/* Piqelo v813 — stable mobile buttons and optically centered icon frames.
   Presentation only: no scoring, ranking, offer or analytics behavior changes. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

:where(button,[role="button"],summary,a){
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Keep every framed glyph on its own square line box. Android text scaling must
   not be able to pull the glyph away from the visual center of its frame. */
:where(
  .rtInfoBtn,
  .riIcon,
  .piqeloAvailabilityIcon,
  .trustRailIcon,
  .decisionIcon,
  .mindChangeIcon,
  .pcHeadingIcon,
  .askPiqeloLauncherMark,
  .askPiqeloMark,
  .askPiqeloOrb,
  .askPiqeloClose,
  .askPiqeloComposer>button,
  .askSourceId,
  .altScore,
  .verdictMark,
  .questionTitle>span,
  .methodCard>span,
  .findBtn.classicFindBtn>span,
  .finderTrust span::before,
  .compareTrayItem>button
){
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  justify-content:center!important;
  flex-shrink:0!important;
  aspect-ratio:1 / 1;
  padding:0!important;
  font-style:normal!important;
  line-height:1!important;
  text-align:center!important;
  vertical-align:middle!important;
}

:where(
  .trustRailIcon,
  .decisionIcon,
  .pcHeadingIcon,
  .askPiqeloLauncherMark,
  .askPiqeloMark,
  .askPiqeloOrb,
  .askSourceId
)>:where(svg,img){
  display:block;
  margin:auto;
  max-inline-size:72%;
  max-block-size:72%;
}

/* The information control from the screenshot. Fix both axes so flex layout and
   browser font inflation cannot turn the circle into an oval. The accessible
   name remains on the native button; the visible glyph is drawn independently. */
.rtInfoBtn{
  -webkit-appearance:none!important;
  appearance:none!important;
  position:relative!important;
  flex:0 0 26px!important;
  inline-size:26px!important;
  block-size:26px!important;
  min-inline-size:26px!important;
  min-block-size:26px!important;
  max-inline-size:26px!important;
  max-block-size:26px!important;
  overflow:visible!important;
  border-radius:50%!important;
  font-size:0!important;
  color:transparent!important;
  writing-mode:horizontal-tb!important;
}
.rtInfoBtn::before{
  content:"i";
  display:block;
  color:#1a7188;
  font:950 13px/1 Inter,ui-sans-serif,system-ui,sans-serif;
  transform:translateY(-.25px);
}
.rtInfoBtn::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
}
.rtInfoBtn:focus-visible{
  outline:3px solid rgba(49,217,230,.48)!important;
  outline-offset:3px!important;
}

.rtTopContext{
  max-inline-size:100%;
  min-inline-size:0;
  align-items:center!important;
  overflow-wrap:anywhere;
}
.metricJump.metricHint{
  display:inline-flex!important;
  max-inline-size:100%;
  min-inline-size:0;
  align-items:center!important;
  gap:6px;
  line-height:1.35!important;
  overflow-wrap:anywhere;
}

/* Text actions use one alignment model. This prevents arrows/hearts and labels
   from sitting on different baselines in otherwise identical buttons. */
:where(
  .btn,
  .findBtn,
  .compareMini,
  .saveMini,
  .saveHeroBtn,
  .shareBtn,
  .shareCompareBtn,
  .rankingMethodLink,
  .sectionLine button,
  .bottomNav button,
  .resultActions a,
  .resultActions button,
  .offerPrice a,
  .detailOfferPrice a,
  .pwRangeTabs button,
  .pwTarget button,
  .pwTargetEditor button,
  .askPiqeloStarters button
){
  box-sizing:border-box;
  align-items:center!important;
  justify-content:center!important;
  gap:.45em;
  max-inline-size:100%;
  text-align:center;
  line-height:1.2!important;
  overflow-wrap:anywhere;
}

:where(.btn,.findBtn,.compareMini,.saveMini,.saveHeroBtn,.shareBtn,.shareCompareBtn)>:where(svg,img,i,span){
  flex-shrink:0;
  align-self:center;
}

@media(max-width:780px){
  html,body{
    max-inline-size:100%;
    overflow-x:clip;
  }

  .rtInfoBtn{
    flex-basis:30px!important;
    inline-size:30px!important;
    block-size:30px!important;
    min-inline-size:30px!important;
    min-block-size:30px!important;
    max-inline-size:30px!important;
    max-block-size:30px!important;
  }
  .rtInfoBtn::before{font-size:14px}
  .rtInfoBtn::after{inset:-7px}
  .rtTopContext{gap:9px!important;line-height:1.35!important}

  :where(
    #selectorCard .finderOptions .option,
    .btn,
    .compareMini,
    .saveMini,
    .saveHeroBtn,
    .shareBtn,
    .shareCompareBtn,
    .rankingMethodLink,
    .sectionLine button,
    .bottomNav button,
    .resultActions a,
    .resultActions button,
    .offerPrice a,
    .detailOfferPrice a,
    .pwRangeTabs button,
    .pwTarget button,
    .pwTargetEditor button,
    .askPiqeloStarters button,
    #offerCards .offerWhy summary
  ){
    min-block-size:44px!important;
  }

  .metricJump.metricHint{min-block-size:40px}
  .bottomNav button{display:flex!important;flex-direction:column;gap:3px;line-height:1.1!important}
  .askPiqeloClose{inline-size:44px!important;block-size:44px!important}
  .askPiqeloComposer{grid-template-columns:minmax(0,1fr) 44px!important}
  .askPiqeloComposer>button{inline-size:44px!important;block-size:44px!important}
}

@media(prefers-reduced-motion:reduce){
  .rtInfoBtn::before{transform:none}
}