/* Generated by build_pages.py — shared styles for Fit Finder static pages.
   :root tokens mirror index.html so pages look right even on staging; the live
   site's tokens.css / components.css override them. */
:root{
  --color-indigo:#483984; --color-asphalt:#37343a; --color-aged-linen:#F2EDE4;
  --color-selvedge:#B8A898; --color-light-indigo:#8B7EC8;
  --color-light-indigo-bright:#AD9EF8; --color-light-indigo-deep:#675D96;
  --color-bg:var(--color-aged-linen); --color-text:var(--color-asphalt);
  --color-text-muted:#6f6671; --color-accent:var(--color-indigo);
  --color-border:var(--color-selvedge); --color-border-hairline:#eee5d6;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'DM Sans',-apple-system,sans-serif; --tracking-accent:0.12em;
  --font-mono:ui-monospace,'SF Mono','Cascadia Mono','IBM Plex Mono',Menlo,Consolas,monospace;
  --shadow-xs:0 1px 3px rgba(55,52,58,.09);
  --shadow-sm:0 4px 12px rgba(55,52,58,.11),0 1px 2px rgba(55,52,58,.07);
}
/* Dark-mode mirror of tokens.css's html.ff-site block, for the window before
   tokens.css itself has loaded. No html.ff-site gate needed — every page
   this ships on is a Fit Finder page. Only mirrors the tokens actually
   redefined above (surface-white/bg-subtle/delta-pos aren't used by this
   fallback's own rules below, so they're skipped here same as in light). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:var(--color-asphalt); --color-text:var(--color-aged-linen);
    --color-text-muted:var(--color-selvedge); --color-accent:var(--color-light-indigo-bright);
    --color-border-hairline:#4a454f;
    --shadow-xs:0 1px 3px rgba(0,0,0,.35); --shadow-sm:0 4px 14px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --color-bg:var(--color-asphalt); --color-text:var(--color-aged-linen);
  --color-text-muted:var(--color-selvedge); --color-accent:var(--color-light-indigo-bright);
  --color-border-hairline:#4a454f;
  --shadow-xs:0 1px 3px rgba(0,0,0,.35); --shadow-sm:0 4px 14px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:1rem;line-height:1.6}
a{color:var(--color-accent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.site-header{border-bottom:1px solid var(--color-border)}
.site-header__row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem}
.site-header .wordmark a{display:block;color:inherit;text-decoration:none}
.site-header .wordmark img{display:block;height:2.1rem;width:auto}
.site-nav{display:flex;gap:1.75rem;align-items:center;flex-wrap:wrap}
.site-nav a{font-size:.78rem;letter-spacing:var(--tracking-tight);text-transform:uppercase;color:var(--color-text);text-decoration:none}
.btn{display:inline-block;font-size:.78rem;letter-spacing:var(--tracking-tight);text-transform:uppercase;padding:.85rem 1.6rem;border-radius:2px;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--color-asphalt);color:var(--color-aged-linen)}
.btn-support{background:var(--color-light-indigo-bright);color:var(--color-asphalt)}
.ff-page{padding-top:2rem;padding-bottom:3rem}
.ff-crumbs{font-size:.78rem;color:var(--color-text-muted);margin-bottom:1.3rem}
.ff-crumbs a{color:var(--color-text-muted)}
.ff-eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:var(--tracking-tight);color:var(--color-text-muted);margin:0 0 .3rem}
.ff-eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
h1{font-family:var(--font-display);font-weight:600;font-size:2.6rem;line-height:1.1;margin:0}
.ff-lede{color:var(--color-text-muted);max-width:52rem;margin:.6rem 0 1.4rem;font-size:.98rem}
h2{font-family:var(--font-display);font-weight:600;font-size:1.7rem;margin:2.4rem 0 .8rem}
.ff-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.4rem}
/* Separates "this orients you" (crumbs/eyebrow/h1/lede) from "this is the
   data" (the table/list below) — these pages had no such break before,
   just the same background all the way down. Nested margins are zeroed so
   the box's own padding is the only bottom space, not two stacked ones. */
.ff-hero{background:var(--color-bg-subtle);border-radius:4px;padding:1.6rem 1.75rem 1.5rem;margin-bottom:1.6rem}
.ff-hero .ff-lede,.ff-hero .ff-chips{margin-bottom:0}
.ff-chip{border:1px solid var(--color-border);border-radius:3px;padding:.45rem .8rem;background:var(--color-surface-white);font-size:.82rem;box-shadow:var(--shadow-xs)}
.ff-chip span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.64rem;color:var(--color-text-muted)}
/* Treatment-word tooltip inside the Fabric chip (Loomstate/Raw/Rinsed/Washed/
   Distressed) — CSS-only so it works with no JS: :hover for pointer users,
   :focus-visible for keyboard, tabindex makes the span reachable by Tab. */
.ff-term{border-bottom:1px dotted var(--color-text-muted);cursor:help;position:relative}
.ff-term::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);width:15rem;max-width:60vw;padding:.55rem .7rem;
  border-radius:4px;background:var(--color-asphalt);color:var(--color-aged-linen);font-size:.74rem;
  font-weight:400;line-height:1.4;text-transform:none;letter-spacing:normal;white-space:normal;
  box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;z-index:5}
.ff-term::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--color-asphalt);opacity:0;visibility:hidden;
  transition:opacity .12s ease;z-index:5}
.ff-term:hover::after,.ff-term:focus-visible::after,
.ff-term:hover::before,.ff-term:focus-visible::before{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* A table narrower than its columns has to say so. Two prior attempts do not:
   overflow-x:auto alone leaves nothing on screen, because macOS and iOS hide the
   scrollbar until you are already scrolling; and styling ::-webkit-scrollbar to
   force a persistent bar is ignored by current Chromium, measured at 0px of
   reserved track. The classic background-attachment:local shadow is out too —
   it has been broken in iOS Safari since iOS 13, which is exactly the browser
   with the hidden scrollbar.
   So the fade is an absolutely-positioned overlay on a non-scrolling parent,
   switched by classes that ff-scroll.js sets from scrollLeft. Plain positioning
   and a scroll listener, which every engine gets right. Without JS the table
   still scrolls natively; it only loses the hint. */
.ff-scroll{position:relative}
.ff-tblwrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface-white);
  scrollbar-width:thin;scrollbar-color:var(--color-selvedge) var(--color-aged-linen)}
.ff-tblwrap::-webkit-scrollbar{height:11px}
.ff-tblwrap::-webkit-scrollbar-track{background:var(--color-aged-linen);border-top:1px solid var(--color-border-hairline)}
.ff-tblwrap::-webkit-scrollbar-thumb{background:var(--color-selvedge);border-radius:6px;border:2px solid var(--color-aged-linen)}
.ff-scroll::before,.ff-scroll::after{content:"";position:absolute;top:1px;bottom:1px;width:34px;
  pointer-events:none;opacity:0;transition:opacity .15s var(--ease-out);z-index:1}
.ff-scroll::before{left:1px;background:linear-gradient(to right,rgba(55,52,58,.16),rgba(55,52,58,0))}
.ff-scroll::after{right:1px;background:linear-gradient(to left,rgba(55,52,58,.16),rgba(55,52,58,0))}
.ff-scroll.is-scrollable:not(.at-start)::before{opacity:1}
.ff-scroll.is-scrollable:not(.at-end)::after{opacity:1}
.ff-scrollhint{display:none;font-size:.78rem;color:var(--color-text-muted);margin:.5rem 0 0}
.ff-scroll.is-scrollable + .ff-scrollhint{display:block}
.ff-table{border-collapse:collapse;width:100%;font-size:.92rem}
.ff-table caption{caption-side:bottom;text-align:left;font-size:.74rem;color:var(--color-text-muted);padding:.5rem .8rem}
.ff-table th,.ff-table td{padding:.55rem .8rem;text-align:right;border-bottom:1px solid var(--color-border-hairline);white-space:nowrap}
.ff-table thead th{background:var(--color-asphalt);color:var(--color-aged-linen);text-align:right;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.ff-table tbody th[scope=row]{text-align:left;font-weight:600}
.ff-table thead th:first-child{text-align:left}
.ff-match{font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.ff-delta{color:var(--color-text-muted);font-size:.85em;font-family:var(--font-mono)}
.ff-rule{border-left:2px solid var(--color-accent);padding:.1rem 0 .1rem 1rem;margin:0 0 1.4rem;font-size:.88rem;color:var(--color-text-muted);max-width:52rem}
.ff-facets{font-size:.85rem;color:var(--color-text-muted);margin:1rem 0 0}
.ff-table td{font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
/* Everything else in these tables is a number and must stay on one line, but the
   model name is prose — held to nowrap it pushed the measurement columns off the
   edge on its own. Wrapping it is what lets the rest fit without scrolling at
   desktop width; the min-width stops the column collapsing to one word a line. */
.ff-table .ff-name{white-space:normal;min-width:12rem;line-height:1.35;text-align:left}
.ff-table .ff-name a{color:var(--color-accent);text-decoration:none;font-variant-numeric:normal}
.ff-cta{margin:1.8rem 0}
.ff-retailers,.ff-links,.ff-cards{list-style:none;padding:0;margin:0}
.ff-retailers li{display:flex;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--color-border)}
.ff-price{color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.ff-stock{margin-left:auto;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}
.ff-links{columns:2;gap:1.5rem}
.ff-links li{margin:.3rem 0;break-inside:avoid}
.ff-src{font-size:.8rem;color:var(--color-text-muted);margin-top:2rem}
.ff-src a{color:var(--color-text-muted)}
.ff-embed-note{font-size:.85rem;color:var(--color-text-muted);margin:.2rem 0 .7rem}
.ff-embed{display:flex;gap:.6rem;align-items:flex-start;flex-wrap:wrap}
.ff-embed textarea{flex:1;min-width:260px;height:70px;font-family:ui-monospace,Menlo,monospace;font-size:.74rem;padding:.55rem .7rem;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface-white);color:var(--color-text);resize:vertical}
.ff-copy{border:0;white-space:nowrap;cursor:pointer}
.ff-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem;margin-top:1rem}
.ff-cards a{display:block;border:1px solid var(--color-border);border-radius:4px;padding:.9rem 1.1rem;background:var(--color-surface-white);text-decoration:none;color:var(--color-text);box-shadow:var(--shadow-xs);transition:box-shadow .16s var(--ease-out)}
.ff-cards strong{display:block;font-size:1.02rem}
.ff-cards span{font-size:.8rem;color:var(--color-text-muted)}
.ff-cards--models a{display:flex;flex-direction:column;justify-content:space-between;min-height:11rem}
.ff-new-filters{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem;font-size:.85rem}
.ff-new-filters label{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}
/* Wrapping the <select> is what lets the arrow track theme colors via
   currentColor instead of a baked-in SVG that'd go invisible in dark mode —
   a select itself can't take a ::after in most browsers. */
.ff-select{position:relative;display:inline-block}
.ff-select::after{content:"";position:absolute;top:50%;right:.85rem;width:.4em;height:.4em;
  border-right:2px solid var(--color-text-muted);border-bottom:2px solid var(--color-text-muted);
  transform:translateY(-65%) rotate(45deg);pointer-events:none}
.ff-new-filters select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:var(--font-body);font-size:.85rem;padding:.55rem 2.1rem .55rem .75rem;
  border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface-white);
  color:var(--color-text);text-transform:none;letter-spacing:normal;cursor:pointer;
  box-shadow:var(--shadow-xs);transition:border-color .15s var(--ease-out)}
.ff-new-filters select:hover{border-color:var(--color-accent)}
.ff-new-filters select:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}
.ff-new-filters #newFilterCount{color:var(--color-text-muted);align-self:flex-end}
.ff-cards--new a{display:flex;flex-direction:column;gap:.3rem;min-height:11.5rem}
.ff-cards--new a>span:last-child{margin-top:auto;padding-top:.5rem}
.ff-hub-brand{margin:1.8rem 0}
.ff-hub-brand h2{font-size:1.4rem;margin:0 0 .5rem}
.ff-faq{display:flex;flex-direction:column;gap:.5rem;max-width:44rem}
details.faq{border:1px solid var(--color-selvedge);border-radius:4px;background:var(--color-surface-white);box-shadow:var(--shadow-xs);transition:border-color .15s var(--ease-out)}
details.faq summary{cursor:pointer;padding:.75rem .9rem;font-weight:600;font-size:.94rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.8rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-weight:400;color:var(--color-text-muted);font-size:1.1rem;flex-shrink:0;display:inline-block;transition:transform .15s var(--ease-out)}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq[open]{border-color:var(--color-indigo)}
details.faq .a{padding:0 .9rem .85rem;border-top:1px solid var(--color-border-hairline);margin-top:.75rem;padding-top:.7rem;font-size:.88rem;color:var(--color-text-muted);line-height:1.6}
.ia-footer{background:var(--color-asphalt);color:var(--color-aged-linen);padding:4rem 0 2.5rem;margin-top:4rem}
.ia-footer__inner{max-width:960px;margin:0 auto;padding:0 3rem}
.ia-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3rem}
.ia-footer .wordmark{font-family:var(--font-display);font-size:1.6rem}
.ia-footer .amp{color:var(--color-light-indigo-bright);font-style:italic}
.ia-footer__tag{color:var(--color-selvedge);font-family:var(--font-display);font-style:italic;font-size:1.1rem;max-width:32ch;margin:1rem 0 0}
.ia-footer__col h4{font-size:.68rem;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-light-indigo-bright);margin:0 0 1rem}
.ia-footer__col a{display:block;color:var(--color-selvedge);text-decoration:none;font-size:.9rem;margin-bottom:.55rem}
.ia-footer__bottom{border-top:1px solid rgba(184,168,152,.3);margin-top:3rem;padding-top:1.75rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-selvedge)}
/* Hover-only interactions, gated behind (hover: hover) and (pointer: fine)
   and collected here rather than left in place next to each base rule —
   same reasoning as fit-finder/index.html's own hover block: on a touch
   device, tapping a card or link with no matching un-hover event leaves it
   visually "stuck" hovered until the next unrelated tap. */
@media (hover:hover) and (pointer:fine){
  .site-nav a:hover{color:var(--color-accent)}
  .btn-primary:hover{background:var(--color-indigo)}
  .btn-support:hover{filter:brightness(1.06)}
  .ff-eyebrow a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}
  .ff-tblwrap::-webkit-scrollbar-thumb:hover{background:var(--color-asphalt)}
  .ff-table .ff-name a:hover{text-decoration:underline}
  .ff-cards a:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm)}
  .ia-footer__col a:hover{color:var(--color-aged-linen)}
}
@media (max-width:860px){.ia-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.site-header{text-align:center}.site-header__row{flex-direction:column;align-items:center;gap:.5rem}.site-nav{justify-content:center;gap:.5rem}.site-nav a{font-size:.62rem;letter-spacing:.06em}.site-nav .btn{padding:.38rem .55rem;font-size:.62rem}}
@media (max-width:640px){h1{font-size:2rem}.ff-links{columns:1}.ia-footer__grid{grid-template-columns:1fr}.ff-hero{padding:1.1rem 1.1rem 1rem}}