/* ============================================================
   BMX PARTS DEPOT - GUIDE PAGES
   Shared stylesheet for the Fitment Guide and A-Z Dictionary.
   index.html keeps its own inlined styles. These pages share this
   file because there are eleven of them and inlining the same
   30KB eleven times is waste, not simplicity.
   Brand tokens are copied from index.html. Do not invent new ones.
   ============================================================ */

:root{
  --cyan:#007bb0;--cyan-on-dark:#00a4e6;
  --cyan-lt:#38c6ff;
  --blue:#0032e6;
  --orange:#e64700;

  --ink:#08090b;
  --ink-2:#0e1116;
  --ink-3:#161a21;
  --hairline:rgba(255,255,255,.10);

  --paper:#f9fafb;
  --paper-2:#f0f2f4;
  --line:#e2e5e9;
  --text:#0a0a0a;
  --muted:#6b7280;

  --maxw:1180px;
  --readw:760px;
  --pad:clamp(20px,5vw,48px);

  --display:"Bebas Neue",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --candy-1:#7fe4ff;
  --candy-2:#1cb9f7;
  --candy-3:#0083d8;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.9;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
}
.eyebrow{
  font-family:var(--display);
  font-size:15px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 14px;
}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--cyan);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;
  font-weight:650;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--cyan);
  --fg:#fff;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:10px;
  background:var(--bg);color:var(--fg);
  font-weight:650;font-size:15px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 24px -12px rgba(0,164,230,.85);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 18px 34px -14px rgba(0,164,230,.95)}
.btn:active{transform:translateY(0)}
.btn.orange{--bg:var(--orange);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 24px -12px rgba(230,71,0,.9)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.5);box-shadow:none}
.btn.ghost-dark{background:transparent;color:var(--text);border-color:var(--line);box-shadow:none}
.btn.ghost-dark:hover{background:#fff;border-color:#c9ced6}
/* The label is wrapped so the flex gap falls once, between the words and the
   icon, rather than also between "Shop on" and "eBay". Those were separate
   flex items, so that pair got the 10px gap plus a non-breaking space and read
   as visibly wider than the gap before the icon. The space inside the wrapper
   is a real space, so the button still reads "Shop on eBay" to a screen reader
   and to copy and paste. */
.btn.sm{padding:11px 18px;font-size:14px;border-radius:9px}

/* ---------- wordmark ---------- */
.wordmark{display:inline-flex;align-items:center;line-height:0;text-decoration:none;transition:filter .25s ease}
.wordmark img{height:34px;width:auto;display:block}
.wordmark:hover{filter:brightness(1.08)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(8,9,11,.92);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav .wrap{display:flex;align-items:center;gap:24px;height:70px}
.nav a{color:#fff}
/* Nav sizing. The five labels are deliberately full phrases rather than one
   word each, so the row needs about 1040px once the wordmark and the eBay
   button are counted. The container caps at 1180px minus padding, which left
   only 11px of slack and made every label wrap. Tighter gap and dropping
   "Shop on" below 1250px buy enough room, and the bar hands over to the
   hamburger at 1080px rather than letting anything wrap. */
.nav .links{display:flex;gap:18px;margin-left:auto;align-items:center}
/* Separator between the shop items and the reference items, matching the home
   page: a 2x2 checker turned on its point, the same motif as the floor in the
   games. Decorative only, so aria-hidden keeps the menu reading as one list.
   The gap above went 22px to 18px and the negative margin pulls this element's
   own pair in, because the row is tight and the separator plus its two gaps is
   what tips it into wrapping. */
.nav-sep{
  width:9px;height:9px;flex:none;align-self:center;margin:0 -4px;
  transform:rotate(45deg);
  background:
    conic-gradient(#7ff0ff 0% 25%, transparent 0% 50%,
                   #7ff0ff 0% 75%, transparent 0% 100%);
  box-shadow:0 0 9px rgba(127,240,255,.55);
  opacity:.9;
}
.nav-sep-h{
  /* the panel is a block container, so an inline span has no width to give */
  display:block;
  margin:10px 0 10px 3px;
  width:11px;height:11px;
}
.nav .links a.lnk{
  position:relative;text-decoration:none;font-size:14.5px;font-weight:550;
  color:rgba(255,255,255,.72);transition:color .2s ease;
}
.nav .links a.lnk::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav .links a.lnk:hover,.nav .links a.lnk[aria-current="page"]{color:#fff}
  /* Our Process is a homepage anchor rather than a page, so it is the item
     the bar can lose when a sixth is added. It stays in the hamburger and in
     the footer, so nothing becomes unreachable. Without this the six full
     labels overflow the 1180px container at every window width. */
  .nav .links a.lnk.secondary{display:none}

.nav .links a.lnk:hover::after,.nav .links a.lnk[aria-current="page"]::after{transform:scaleX(1)}
/* ---- mobile menu ----
   Mirrors the homepage. Below 900px the inline links are hidden, and
   without this the guide pages had no nav at all on a phone. */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:4px;
  background:transparent;border:1px solid rgba(255,255,255,.24);
  border-radius:9px;color:#fff;cursor:pointer;flex:none;
}
.nav-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}
.nav-panel{
  display:none;
  position:absolute;top:100%;left:0;right:0;
  /* Opaque, same reason as the homepage. */
  background:#0b0d10;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:8px var(--pad,20px) 14px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
}
.nav-panel a{
  display:block;padding:14px 2px;font-size:16px;font-weight:600;
  color:rgba(255,255,255,.86);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.nav-panel a:last-child{border-bottom:0}
.nav-panel a:hover,.nav-panel a:focus-visible{color:#fff}
.nav-panel[hidden]{display:none}
/* Scrim behind the open mobile menu. Sibling of the panel so it is driven
   purely by [hidden] with no extra JS state to keep in sync. Fixed, so it
   covers the viewport rather than only the page height. */
.nav-scrim{
  /* Outside <header> on purpose. The nav uses backdrop-filter, which makes
     it a containing block for fixed children, so a scrim inside it was
     clipped to the 62px bar instead of covering the viewport. */
  position:fixed;inset:0;z-index:50;
  background:rgba(4,6,9,.66);
  opacity:0;pointer-events:none;
  transition:opacity .26s ease;
}
.nav-scrim.is-open{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.nav-scrim{transition:none}}
@media(min-width:1201px){.nav-scrim{display:none}}
@media(max-width:1200px){
  .nav .links a.lnk{display:none}
  .nav .links .nav-sep{display:none}   /* collapses with the links it divides */
  .nav-toggle{display:inline-flex}
  .nav-panel:not([hidden]){display:block}
}
/* These mirror index.html. Without them the guide pages kept the full
   70px bar and 34px wordmark on a phone while the homepage stepped both
   down, so the logo looked bigger on the guide than on the home page. */
@media(max-width:640px){
  .nav .wrap{height:62px;gap:10px}
  .wordmark img{height:25px}
  .nav .btn.sm{padding:9px 13px;font-size:13px}
  html{scroll-padding-top:78px}
  .toc{top:78px}
}
@media(max-width:420px){
  .wordmark img{height:22px}
  .hide-xs{display:none}
}

/* ============================================================
   GUIDE HEADER
   ============================================================ */
.guide-head{
  background:var(--ink);color:#fff;
  padding:clamp(44px,6vh,72px) 0 clamp(36px,5vh,56px);
  border-bottom:1px solid var(--hairline);
  position:relative;overflow:hidden;
}
.guide-head::before{
  content:"";position:absolute;left:50%;top:-40%;width:min(900px,110vw);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(0,164,230,.22),rgba(0,50,230,.08) 45%,transparent 68%);
  z-index:0;pointer-events:none;
}
.guide-head .wrap{position:relative;z-index:1}
.guide-head h1{font-size:clamp(34px,5.2vw,60px);margin:0;color:#fff}
.guide-head .eyebrow{color:var(--cyan-lt)}
.guide-head .standfirst{
  margin:18px 0 0;max-width:var(--readw);
  font-size:clamp(16px,1.9vw,19px);color:rgba(255,255,255,.72);
}

/* breadcrumb */
.crumbs{font-size:13.5px;color:rgba(255,255,255,.5);margin:0 0 16px;letter-spacing:.02em}
/* Underlined rather than colour-only: these sit inside a text block, so
   colour alone is not a sufficient distinction (WCAG 1.4.1). */
.crumbs a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span[aria-hidden]{padding:0 8px;opacity:.5}

/* ---------- era tags ---------- */
.era-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.era{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;
  font-family:var(--display);font-size:13px;letter-spacing:.14em;
  border:1px solid;white-space:nowrap;
}
.era::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.era-old{color:#ffb27f;border-color:rgba(230,71,0,.5);background:rgba(230,71,0,.12)}
.era-mid{color:#9fe3ff;border-color:rgba(0,164,230,.45);background:rgba(0,164,230,.12)}
.era-modern{color:#b9c6ff;border-color:rgba(0,50,230,.45);background:rgba(0,50,230,.16)}
.era-all{color:#d6dbe2;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.07)}
/* on light sections */
.on-light .era-old{color:#a33200;background:rgba(230,71,0,.09);border-color:rgba(230,71,0,.32)}
.on-light .era-mid{color:#00648c;background:rgba(0,164,230,.09);border-color:rgba(0,164,230,.32)}
.on-light .era-modern{color:#1f2ea8;background:rgba(0,50,230,.08);border-color:rgba(0,50,230,.3)}
.on-light .era-all{color:var(--muted);background:var(--paper-2);border-color:var(--line)}

/* ============================================================
   LAYOUT
   ============================================================ */
.guide-body{padding:clamp(36px,5vh,64px) 0 80px}
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:960px){.guide-grid{grid-template-columns:minmax(0,1fr)}}

article.guide{min-width:0;max-width:var(--readw)}
article.guide h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,3.6vw,40px);line-height:.95;letter-spacing:.005em;
  margin:56px 0 6px;scroll-margin-top:88px;
}
article.guide h2:first-child{margin-top:0}
article.guide h3{
  font-size:19px;font-weight:700;margin:34px 0 8px;letter-spacing:-.01em;
  scroll-margin-top:88px;
}
article.guide p{margin:0 0 18px}
article.guide ul,article.guide ol{margin:0 0 18px;padding-left:22px}
article.guide li{margin:0 0 7px}
article.guide a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* Buttons inside the article are not prose links. Without this the rule above
   paints the eBay CTA cyan text on a cyan background and it disappears. */
article.guide a.btn{color:var(--fg);text-decoration:none}
article.guide a:hover{color:var(--orange)}

/* section rule under each h2 */
.sec-rule{height:3px;width:64px;background:var(--orange);border-radius:2px;margin:0 0 22px}

/* ============================================================
   QUICK ANSWER (AEO extraction target)
   ============================================================ */
#quick-answer,.quick-answer{
  background:var(--ink);color:#fff;
  border-radius:14px;
  padding:clamp(20px,3vw,28px);
  margin:0 0 32px;
  border:1px solid rgba(0,164,230,.3);
  box-shadow:0 20px 40px -30px rgba(0,0,0,.6);
}
.quick-answer .qa-label{
  font-family:var(--display);font-size:13px;letter-spacing:.2em;
  color:var(--cyan-lt);margin:0 0 10px;display:flex;align-items:center;gap:8px;
}
.quick-answer .qa-label::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;
}
.quick-answer p{
  margin:0;font-size:clamp(17px,2vw,19px);line-height:1.55;
  font-weight:600;color:#fff;
}
.quick-answer p + p{margin-top:12px}
/* Quick Answer sits on ink. The light-background cyan measures 4.23 on it,
   so links inside it use the brighter brand cyan, which measures 6.71. */
article.guide .quick-answer a,.quick-answer a{color:var(--cyan-on-dark)}
/* Specificity, not preference: article.guide a is (0,1,2) and beats a bare
   .quick-answer a at (0,1,1). The same trap painted the eBay CTA cyan on
   cyan earlier. Match the qualifier rather than reaching for !important. */
.quick-answer strong{color:var(--cyan-lt);font-weight:700}

/* ============================================================
   SPEC TABLE
   ============================================================ */
.table-scroll:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.table-scroll{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch}
table.spec-table{
  width:100%;border-collapse:collapse;font-size:15px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;min-width:min(100%,520px);
}
table.spec-table caption{
  caption-side:top;text-align:left;
  font-family:var(--display);font-size:15px;letter-spacing:.16em;
  color:var(--muted);padding:0 0 10px;
}
table.spec-table th,table.spec-table td{
  padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
table.spec-table thead th{
  background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:none;white-space:nowrap;
}
table.spec-table tbody th[scope="row"]{
  font-weight:650;background:var(--paper-2);white-space:nowrap;
}
table.spec-table tbody tr:last-child th,
table.spec-table tbody tr:last-child td{border-bottom:none}
table.spec-table tbody tr:hover td{background:#fbfcfd}
table.spec-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* source / confidence markers inside tables */
.src{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:1px;
  text-transform:uppercase;white-space:nowrap;
}
.src-confirmed{background:rgba(0,164,230,.12);color:#00648c}
.src-single{background:var(--paper-2);color:var(--muted)}
.src-conflict{background:rgba(230,71,0,.12);color:#a33200}
/* "Nobody publishes this" is not "sources disagree". It was wearing the
   conflict orange, which made 27 badges read as site-wide disagreement when
   only 7 were. Slate, deliberately unalarming: a gap that was looked for and
   not found is an honest state, not a warning. 6.35 on white. */
.src-gap{background:rgba(100,116,139,.14);color:#4a5568}

/* ============================================================
   CALIPER VERIFICATION CALLOUT
   Left empty on purpose. Joe fills these from his own bench.
   ============================================================ */
.caliper{
  border:1px dashed rgba(230,71,0,.55);
  background:rgba(230,71,0,.05);
  border-radius:12px;
  padding:18px 20px;
  margin:0 0 28px;
}
.caliper .cal-label{
  font-family:var(--display);font-size:13px;letter-spacing:.18em;
  color:var(--orange);margin:0 0 8px;display:flex;align-items:center;gap:8px;
}
.caliper .cal-label svg{flex:none}
.caliper p{margin:0;font-size:15px;color:var(--muted)}
.caliper.filled{border-style:solid;border-color:rgba(230,71,0,.4);background:rgba(230,71,0,.06)}
.caliper.filled p{color:var(--text)}
/* Verified is a different state from pending, so it gets a different colour.
   Dashed orange means "we still owe you this". Solid green means the number
   came off a part on the bench. */
.caliper.verified{
  border:1px solid rgba(16,163,90,.42);
  background:rgba(16,163,90,.055);
}
.caliper.verified .cal-label{color:#0a6c3d}
.caliper.verified p{color:var(--text)}
.caliper .cal-badge{
  display:inline-block;font-family:var(--display);font-size:12.5px;
  letter-spacing:.10em;color:#0a6c3d;background:rgba(16,163,90,.12);
  border:1px solid rgba(16,163,90,.32);border-radius:999px;
  padding:5px 12px;margin:0 0 14px;
}
.caliper .cal-table{width:100%;border-collapse:collapse;margin:0 0 12px}
.caliper .cal-table th,.caliper .cal-table td{
  text-align:left;padding:9px 10px;font-size:15px;
  border-bottom:1px solid rgba(16,163,90,.20);
}
.caliper .cal-table tr:last-child th,.caliper .cal-table tr:last-child td{border-bottom:0}
.caliper .cal-table th{font-weight:600;color:var(--text)}
.caliper .cal-table td.num{
  font-variant-numeric:tabular-nums;font-weight:650;color:var(--text);
  white-space:nowrap;text-align:right;
}
.caliper .cal-part{font-size:14px;color:var(--muted);margin:0 0 10px}
.caliper.verified p+p{margin-top:10px}
.caliper .todo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;color:var(--orange);font-weight:600;letter-spacing:.02em;
}

/* ============================================================
   MEDIA - VIDEO
   ============================================================ */
figure.video{margin:0 0 28px}
.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  background:var(--ink-2);border-radius:12px;overflow:hidden;
  border:1px solid var(--line);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* placeholder shown until a real video id is dropped in */
.video-frame.placeholder{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  border-style:dashed;border-color:rgba(0,164,230,.45);background:rgba(0,164,230,.05);
  text-align:center;padding:24px;
}
.video-frame.placeholder .todo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;color:#00648c;font-weight:600;
}
.video-frame.placeholder .hint{font-size:14px;color:var(--muted);max-width:44ch}
figure.video figcaption,figure.diagram figcaption{
  margin-top:10px;font-size:14px;color:var(--muted);line-height:1.5;
}
figure.video figcaption b,figure.diagram figcaption b{color:var(--text);font-weight:650}

/* ============================================================
   MEDIA - FIGURE / DIAGRAM
   ============================================================ */
figure.diagram{margin:0 0 28px}
figure.diagram .fig-body{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px;display:flex;justify-content:center;
}
figure.diagram img{border-radius:8px}
figure.diagram .fig-body.placeholder{
  border-style:dashed;border-color:rgba(107,114,128,.5);background:var(--paper-2);
  min-height:180px;align-items:center;flex-direction:column;gap:8px;text-align:center;padding:28px 20px;
}
figure.diagram .fig-body.placeholder .todo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;color:var(--muted);font-weight:600;
}

/* ============================================================
   OUTBOUND INVENTORY - eBay part card
   ============================================================ */
.part-card{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px;margin:0 0 16px;
  transition:border-color .2s ease,box-shadow .25s ease,transform .2s ease;
}
.part-card:hover{border-color:#c9ced6;box-shadow:0 18px 34px -26px rgba(0,0,0,.5);transform:translateY(-2px)}
/* A store link has no item photo, so it drops the thumbnail column rather than
   showing an empty dashed box that reads as unfinished. */
.part-card.no-thumb{grid-template-columns:minmax(0,1fr);padding:18px}
.part-card .thumb{
  width:104px;height:104px;border-radius:10px;overflow:hidden;
  background:var(--paper-2);display:flex;align-items:center;justify-content:center;
}
.part-card .thumb img{width:100%;height:100%;object-fit:cover}
.part-card .thumb.placeholder{border:1px dashed var(--line);font-size:11px;color:var(--muted);text-align:center;padding:6px}
.part-card .pc-body{display:flex;flex-direction:column;min-width:0}
.part-card h4{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.35}
.part-card h4 a{color:var(--text);text-decoration:none}
.part-card h4 a:hover{color:var(--cyan)}
.part-card .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.part-card .price{font-family:var(--display);font-size:22px;letter-spacing:.02em;color:var(--text);line-height:1}
.part-card .cta{margin-top:auto;align-self:flex-start}
@media(max-width:520px){
  .part-card{grid-template-columns:72px minmax(0,1fr)}
  .part-card .thumb{width:72px;height:72px}
}

/* condition grade pill */
.grade{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid;
}
.grade-a{color:#0a6c3d;background:rgba(16,163,90,.10);border-color:rgba(16,163,90,.35)}
.grade-b{color:#00648c;background:rgba(0,164,230,.10);border-color:rgba(0,164,230,.35)}
.grade-c{color:#a33200;background:rgba(230,71,0,.10);border-color:rgba(230,71,0,.35)}

/* ============================================================
   PDP COMPATIBILITY BADGE
   Standalone. Also used inside eBay item descriptions, so it
   carries its own inline styles in the snippet file.
   ============================================================ */
.fit-badge{
  display:flex;align-items:flex-start;gap:12px;
  border:1px solid var(--line);border-left:4px solid var(--cyan);
  background:var(--paper-2);border-radius:10px;
  padding:14px 16px;margin:0 0 20px;
  text-decoration:none;color:var(--text);
  transition:background .2s ease,border-color .2s ease;
}
.fit-badge:hover{background:#fff;border-left-color:var(--orange)}
.fit-badge .fb-icon{flex:none;margin-top:2px;color:var(--cyan)}
.fit-badge:hover .fb-icon{color:var(--orange)}
.fit-badge .fb-text{min-width:0}
.fit-badge .fb-q{display:block;font-weight:700;font-size:15px;margin-bottom:2px}
.fit-badge .fb-a{display:block;font-size:14px;color:var(--muted)}
.fit-badge .fb-a b{color:var(--cyan);font-weight:650}

/* ============================================================
   Q AND A BLOCKS
   ============================================================ */
.faq-block{
  border:1px solid var(--line);border-radius:12px;
  background:#fff;padding:18px 20px;margin:0 0 14px;
}
.faq-block h3{margin:0 0 8px;font-size:17px;font-weight:700}
.faq-block h3 .qid{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;color:var(--muted);font-weight:600;margin-right:8px;
  letter-spacing:.04em;
}
.faq-block p:last-child{margin-bottom:0}

/* ============================================================
   ON THIS PAGE (sidebar)
   ============================================================ */
.toc{position:sticky;top:88px;font-size:14.5px}
@media(max-width:960px){
  .toc{position:static;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;margin-bottom:32px}
}
.toc .toc-label{
  font-family:var(--display);font-size:13px;letter-spacing:.2em;
  color:var(--muted);margin:0 0 12px;
}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc li{margin:0}
.toc a{
  display:block;padding:6px 0 6px 14px;margin-left:-2px;
  border-left:2px solid transparent;
  color:var(--muted);text-decoration:none;line-height:1.4;
}
.toc a:hover{color:var(--text)}
.toc a.active{color:var(--cyan);border-left-color:var(--cyan);font-weight:600}

/* ============================================================
   RELATED / CROSS-LINKS
   ============================================================ */
.xlinks{
  border-top:1px solid var(--line);margin-top:56px;padding-top:28px;
}
.xlinks h2{font-size:clamp(22px,3vw,28px)!important;margin:0 0 18px!important}
.xlink-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.xlink{
  display:block;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  background:#fff;text-decoration:none;color:var(--text);
  transition:border-color .2s ease,transform .2s ease;
}
.xlink:hover{border-color:var(--cyan);transform:translateY(-2px)}
.xlink .xl-kind{
  font-family:var(--display);font-size:12px;letter-spacing:.16em;color:var(--orange);
  display:block;margin-bottom:4px;
}
.xlink .xl-name{font-weight:650;font-size:15px;line-height:1.35}

/* ============================================================
   HUB PAGE
   ============================================================ */
.hub-tools{
  background:var(--ink-2);border-bottom:1px solid var(--hairline);
  padding:22px 0;position:sticky;top:70px;z-index:50;
}
/* The magnifier is the first item in the A-Z flow, before the A. Placed
   after Z it orphaned onto a row of its own at any width where it did not
   quite fit after the last letter. First, it never can. */
.az-row{position:relative}
.az-bar{display:flex;flex-wrap:wrap;gap:5px;align-items:center}

.search-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;z-index:2;
  width:32px;height:32px;flex:none;margin-right:11px;
  border-radius:7px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.8);
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.search-toggle:hover{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.search-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.search-toggle .ico-clear{display:none}
.search-toggle[aria-expanded="true"]{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.search-toggle[aria-expanded="true"] .ico-search{display:none}
.search-toggle[aria-expanded="true"] .ico-clear{display:block}

/* Open: the letters go and the row collapses to one line, so the field has
   the full width to grow into and there is no empty band left behind. */
.az-row.is-open .az-bar > button:not(.search-toggle),
.az-row.is-open .az-bar > a{display:none}

/* Animating `right` keeps the left edge pinned to the toggle, so the field
   slides out from under it rather than fading in at full width. */
.hub-input{
  position:absolute;top:50%;transform:translateY(-50%);
  left:43px;right:calc(100% - 43px);
  padding:0;opacity:0;pointer-events:none;
  border-radius:8px;border:1px solid rgba(255,255,255,.18);
  background:#141922;color:#fff;
  font-family:var(--body);font-size:16px;
  transition:right .34s cubic-bezier(.2,.8,.2,1),
             padding .34s cubic-bezier(.2,.8,.2,1),
             opacity .2s ease;
}
.az-row.is-open .hub-input{
  right:0;padding:8px 13px;opacity:1;pointer-events:auto;
}
.hub-input::placeholder{color:rgba(255,255,255,.45)}
.hub-input:focus{outline:2px solid var(--cyan);outline-offset:1px}
@media(prefers-reduced-motion:reduce){
  .az-row .az-bar,.hub-input{transition:none}
}

/* Mobile: the letters wrap into a ragged grid because the magnifier eats
   one slot on the first row and the rows then no longer line up. A fixed
   9-column grid fixes it exactly: 26 letters plus the magnifier is 27
   items, which is three full rows of nine with nothing left ragged.
   Desktop keeps the flex row, which already reads correctly. */
@media(max-width:640px){
  .az-bar{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
  /* Higher specificity than the .az-bar a button skin below, which sets
     min-width:32px and otherwise forces the last column past the edge. */
  .az-row .az-bar > a,.az-row .az-bar > button{min-width:0;width:100%;padding:0}
  .az-row .search-toggle{margin-right:0;width:100%}
  /* Open, the bar goes back to flex. width:100% is only correct while it
     is a grid cell; in a flex row it stretched the button across the whole
     bar. Reset it explicitly. */
  .az-row.is-open .az-bar{display:flex}
  .az-row.is-open .search-toggle{width:32px;flex:none}
}

/* While a search is running the dictionary moves above the guide cards.
   The ten cards sat between the search box and the term results, which was
   490px of the reason nothing looked like it had happened when you typed.
   Flex order rather than moving nodes, so the DOM and reading order stay
   as they are when nothing is being searched. */
#main{display:flex;flex-direction:column}
.hub-sec{order:0}
#main.searching #dict-sec{order:-1}
#main.searching #pillars-sec{margin-top:8px}

/* live result count, sits directly under the input so typing has a visible
   effect even though the results themselves are far below the fold */
.search-count{
  /* Positive top margin: the -6px here was tuned for the old layout where
     the input sat above this line. The field now overlays the A-Z row and
     overflows it slightly, so a negative margin ran the two together. */
  margin:9px 0 0;
  font-size:14px;
  color:var(--cyan-lt);
  font-weight:550;
}
.search-count.none{color:rgba(255,255,255,.55)}
.search-count[hidden]{display:none}

/* Layout for .az-bar lives with the magnifier rules above. This block is
   the button skin only; re-declaring display here overrode the mobile grid. */
.az-bar a,.az-bar button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 6px;
  border-radius:7px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.8);
  font-family:var(--display);font-size:16px;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.az-bar a:hover,.az-bar button:hover{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.az-bar button[aria-pressed="true"]{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.az-bar .is-empty{opacity:.3;pointer-events:none}

/* pillar cards */
.pillar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:0 0 56px}
.pillar-card{
  display:flex;flex-direction:column;gap:8px;
  padding:22px;border:1px solid var(--line);border-radius:14px;background:#fff;
  text-decoration:none;color:var(--text);
  transition:border-color .2s ease,transform .2s ease,box-shadow .25s ease;
}
.pillar-card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 22px 40px -30px rgba(0,0,0,.5)}
/* the UA [hidden] rule is display:none, which any explicit display on the
   same element beats. Anything the filter hides needs to say so itself. */
.pillar-card[hidden],.az-list li[hidden],.az-group[hidden],.sec-rule[hidden]{display:none}
.pillar-card .pc-num{
  font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--orange);
}
.pillar-card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:23px;line-height:1;margin:0;letter-spacing:.01em}
.pillar-card p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.pillar-card .pc-count{margin-top:4px;font-size:13px;color:var(--cyan);font-weight:650}

/* A-Z dictionary index */
.az-group{margin:0 0 34px;scroll-margin-top:150px}
.az-group h2{
  font-family:var(--display);font-weight:400;font-size:40px;line-height:1;
  margin:0 0 14px;color:var(--text);
  border-bottom:3px solid var(--orange);padding-bottom:8px;display:inline-block;min-width:52px;
}
.az-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;list-style:none;margin:0;padding:0}
.az-list a{
  display:block;padding:10px 13px;border-radius:9px;
  border:1px solid transparent;text-decoration:none;color:var(--text);
  transition:background .16s ease,border-color .16s ease;
}
.az-list a:hover{background:#fff;border-color:var(--line)}
.az-list .t{font-weight:650;font-size:15px;display:block}
.az-list .d{font-size:13.5px;color:var(--muted);display:block;line-height:1.45}
.az-group[hidden]{display:none}
.no-results{padding:40px 0;color:var(--muted);font-size:16px}

/* ============================================================
   HOMEPAGE FEATURE CARD (injected into index.html)
   ============================================================ */
.guide-promo{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-3) 100%);
  border:1px solid rgba(0,164,230,.28);border-radius:16px;
  padding:clamp(24px,4vw,38px);color:#fff;
}
.guide-promo h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,3.4vw,34px);line-height:1;margin:0 0 10px}
.guide-promo p{margin:0;color:rgba(255,255,255,.72);max-width:60ch;font-size:16px}
@media(max-width:760px){.guide-promo{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{background:var(--ink);color:rgba(255,255,255,.6);padding:56px 0 28px;border-top:1px solid var(--hairline)}
footer.site .cols{
  /* The padding and rule under this divided it from the old copyright row.
     With that row gone they left a line with nothing beneath it. */
  display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));
  gap:32px;
}
@media(max-width:820px){footer.site .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){footer.site .cols{grid-template-columns:minmax(0,1fr)}}
footer.site .col-title{
  font-family:var(--display);font-size:14px;letter-spacing:.18em;color:#fff;margin:0 0 14px;
}
footer.site nav{display:flex;flex-direction:column;gap:9px}
footer.site a{color:rgba(255,255,255,.6);text-decoration:none;font-size:14.5px}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .tagline{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.45);max-width:34ch}
/* The copyright used to sit in its own full-width row under the columns. It
   is in the brand column now, under the tagline, which fills the space that
   column was wasting and takes a whole row of height out of the footer. */
footer.site .copyright{margin:18px 0 0;font-size:13.5px;color:rgba(255,255,255,.42);line-height:1.6}

/* ============================================================
   MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .btn:hover,.pillar-card:hover,.part-card:hover,.xlink:hover{transform:none}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .nav,.hub-tools,.toc,.guide-promo,footer.site{display:none}
  body{background:#fff;font-size:12pt}
  .quick-answer{background:#fff;color:#000;border:2px solid #000}
  .quick-answer p,.quick-answer strong{color:#000}
  a{text-decoration:none;color:#000}
  article.guide{max-width:none}
}