/* M57BIBLE.COM — app styles. Design tokens from the approved mockup + audit refinements. */
:root{
  /* colour */
  --paper:#FBFBF9; --paper2:#FFFFFF; --bg:#EDEDE8; --ink:#1A1B1D; --charcoal:#34383F; --brandblue:#375273;
  --ink2:#585B61; --ink3:#8B8E94; --line:#E6E5DE; --line2:#CFCEC5;
  --accent:#F26D5B; --accentD:#C94A38; --accentT:#FCEDEB; --accentBd:#F7CFC8;
  --genuine:#1C8A4E; --genuineT:#E7F4EC; --community:#5E6B7A; --communityT:#EDF0F3;
  --verify:#B9791A; --verifyT:#F8EFDA; --danger:#C0392B; --dangerT:#FBEBE8;
  /* radii */
  --r:13px; --rb:10px; --rs:7px; --r-sheet:20px 20px 0 0; --headH:64px;
  /* elevation — layered, soft, low-alpha (resting → raised → floating) */
  --shadow-sm:0 1px 2px rgba(26,27,29,.04),0 2px 6px rgba(26,27,29,.04);
  --shadow-md:0 1px 2px rgba(26,27,29,.04),0 4px 10px rgba(26,27,29,.05),0 12px 28px rgba(26,27,29,.07);
  --shadow-lg:0 6px 16px rgba(26,27,29,.08),0 24px 60px rgba(26,27,29,.20);
  --shadow-dark:0 2px 6px rgba(16,24,40,.14),0 14px 34px rgba(16,24,40,.20);
  --shadow-dark-hover:0 4px 10px rgba(16,24,40,.16),0 20px 44px rgba(16,24,40,.26);
  --shadow-accent:0 3px 10px rgba(242,109,91,.24);
  --shadow-primary:0 3px 10px rgba(52,56,63,.24);
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* z-index scale — MUST keep sheet/modal above nav drawer */
  --z-fab:40; --z-nav-scrim:50; --z-nav-drawer:60; --z-sheet-scrim:70; --z-sheet:80; --z-popover:90; --z-topbar:30;
  /* touch */
  --tap:44px;
  /* motion */
  --ease-spring:cubic-bezier(.2,.8,.2,1); --dur-sheet:260ms; --dur-drawer:220ms; --dur-fast:140ms;
  /* type */
  --fs:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--fs); color:var(--ink); min-height:100vh; background-color:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:linear-gradient(rgba(26,27,29,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(26,27,29,.04) 1px,transparent 1px);
  background-size:24px 24px;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit}
button{font-family:inherit}
.mono{font-family:var(--fm)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
:focus:not(:focus-visible){outline:none}
/* refined scrollbars (webkit) — thin, quiet, on-theme */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--ink3)}

@keyframes csPop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes csFade{from{opacity:0}to{opacity:1}}
@keyframes csModal{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes csSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes csDrawer{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* ── Layout shell ─────────────────────────────────────────── */
.shell{width:100%;max-width:1440px;margin:0 auto;min-height:100vh;position:relative;display:grid;
  grid-template-columns:300px minmax(0,1fr);background:rgba(251,251,249,.55);
  border-left:1px solid var(--line2);border-right:1px solid var(--line2);}
/* sidebar: a normal full-height column — scrolls with the page, no inner scroll container */
aside{position:relative;background:var(--paper);display:flex;flex-direction:column;}
/* vertical divider starts BELOW the header so the top bar reads as one continuous strip */
aside::after{content:"";position:absolute;top:var(--headH);right:0;bottom:0;width:1px;background:var(--line2);pointer-events:none;}

.brand{display:flex;align-items:center;gap:11px;height:var(--headH);padding:0 20px;border-bottom:1px solid var(--line2);flex:none;box-sizing:border-box;}
.brand .bwrap{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;}
.brand .railmark{display:none;font-family:var(--fm);font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.02em;}
.brand .btext{display:block;min-width:0;}
.brand .name{display:inline-flex;align-items:center;font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1;color:var(--brandblue);}
.brand .name b{color:var(--ink);font-weight:700}
.brand .name::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:6px;margin-top:2px;flex:none;}
.brand .tag{display:block;font-family:var(--fm);font-size:8px;letter-spacing:.14em;color:var(--ink3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand .drawerclose{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line2);background:var(--paper2);border-radius:50%;cursor:pointer;color:var(--ink2);font-size:20px;line-height:1;align-items:center;justify-content:center;transition:border-color var(--dur-fast),background var(--dur-fast);}
.brand .drawerclose:hover{border-color:var(--ink3);background:#EFEFE9}

/* premium "active variant" card */
.vbtn{position:relative;display:flex;flex-direction:column;gap:11px;margin:16px 12px 12px;text-align:left;
  background:linear-gradient(158deg,#3c414a 0%,#2b2e34 100%);border:1px solid #3f444d;border-radius:14px;cursor:pointer;padding:14px 15px 13px;
  box-shadow:var(--shadow-dark);transition:transform var(--dur-fast),box-shadow var(--dur-fast);}
.vbtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-dark-hover);}
.vbtn .row1{display:flex;align-items:center;gap:8px}
.vbtn .lbl{font-family:var(--fm);font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.5);flex:1;}
.vbtn .code{position:relative;background:rgba(242,109,91,.16);border:1px solid rgba(242,109,91,.55);color:#F6B2A4;font-family:var(--fm);font-weight:600;font-size:11.5px;padding:4px 10px;border-radius:7px;white-space:nowrap;}
.vbtn .code .dot{display:none}
.vbtn .rev{font-weight:700;font-size:19px;letter-spacing:-.01em;color:#fff;line-height:1.05;}
.vbtn .fit{font-family:var(--fm);font-size:11px;color:rgba(255,255,255,.62);margin-top:1px;line-height:1.4;}
.vbtn .change{display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:9px;padding:9px;margin-top:3px;font-weight:600;font-size:11.5px;letter-spacing:.04em;color:#fff;transition:background var(--dur-fast),border-color var(--dur-fast);}
.vbtn:hover .change{background:var(--accent);border-color:var(--accent);}
.vactions{display:flex;gap:8px;margin-top:3px}
.vactions .change{flex:1;margin-top:0}
.vclear{flex:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:9px 14px;font-weight:600;font-size:11.5px;letter-spacing:.03em;color:#fff;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.vclear:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.vbtn.novariant .vclear{display:none}
.vbtn.novariant .vactions .change{flex:1}

nav.side{padding:6px 12px 14px;display:flex;flex-direction:column;gap:3px;}
nav.side .grp{font-family:var(--fm);font-size:8.5px;letter-spacing:.15em;color:var(--ink3);padding:18px 12px 8px;}
nav.side a{display:flex;align-items:center;gap:10px;width:100%;text-align:left;text-decoration:none;
  border-radius:var(--rb);padding:10px 12px;cursor:pointer;font-weight:500;font-size:13.5px;color:var(--ink2);transition:background var(--dur-fast);min-height:40px;}
nav.side a:hover{background:#EFEFE9}
nav.side a.active{background:var(--charcoal);color:#fff;font-weight:600;box-shadow:var(--shadow-primary);}
nav.side a .ic{width:18px;display:inline-grid;place-items:center;flex:none;opacity:.85}
nav.side a .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav.side a .cnt{margin-left:auto;font-family:var(--fm);font-size:9.5px;color:var(--ink3);}
nav.side a.active .cnt{color:rgba(255,255,255,.6)}

.railfoot{padding:14px 14px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.donate{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(140deg,#F9E8AC 0%,#EBCD6E 30%,#D7AA40 60%,#ECC96B 100%);color:#4A3510;text-decoration:none;font-weight:700;font-size:13px;padding:11px;border-radius:var(--rb);
  border:1px solid rgba(178,132,30,.55);transition:transform var(--dur-fast),box-shadow var(--dur-fast),filter var(--dur-fast);min-height:var(--tap);
  box-shadow:0 4px 14px rgba(200,152,52,.34),inset 0 1px 0 rgba(255,255,255,.55);}
.donate:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 7px 20px rgba(200,152,52,.46),inset 0 1px 0 rgba(255,255,255,.6)}
.donate>svg{color:#4A3510}
.donate>svg,.donate .dl{position:relative;z-index:2}
.poweredby{font-size:11px;color:var(--ink3);text-align:center;margin-top:11px;}
.poweredby a{color:var(--ink2);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line2);}

/* ── Main ─────────────────────────────────────────── */
main{min-width:0}
.topbar{position:static;z-index:var(--z-topbar);background:var(--paper);
  border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:14px;padding:0 30px;min-height:var(--headH);box-sizing:border-box;}
.topbar .sect{font-weight:700;font-size:17px;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagehead{display:inline-flex;align-items:center;gap:9px;min-width:0;flex:1}
.pnum{font-family:var(--fm);font-size:10px;font-weight:600;color:#fff;background:var(--charcoal);border:1px solid var(--charcoal);border-radius:6px;padding:3px 7px;letter-spacing:.02em;flex:none}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--paper2);border-radius:var(--rb);padding:8px 12px;width:280px;}
.search input{border:0;outline:0;background:transparent;font-family:var(--fs);font-size:13px;color:var(--ink);width:100%;}
/* inline in-page search (fault codes) — always visible, full width, unlike the collapsing topbar search */
.listsearch{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--paper2);border-radius:var(--rb);padding:9px 12px;}
.listsearch svg{flex:none}
.listsearch input{border:0;outline:0;background:transparent;font-family:var(--fs);font-size:13.5px;color:var(--ink);width:100%;}
.searchIcoBtn{display:none;width:var(--tap);height:var(--tap);border:1px solid var(--line2);background:var(--paper2);border-radius:9px;cursor:pointer;place-items:center;flex:none;color:var(--ink2)}
.searchClose{display:none;width:30px;height:30px;border:0;background:transparent;color:var(--ink3);cursor:pointer;place-items:center;border-radius:7px;flex:none;margin-left:2px;transition:background var(--dur-fast),color var(--dur-fast)}
.searchClose:hover{background:var(--paper);color:var(--ink)}
/* fault-code rows: code | meaning | trust chip. Desktop = 3 columns; phones stack so a long
   code (e.g. "P2002 (BMW 480A / 481A)") can't crush the meaning into a one-word-per-line strip */
.cr-top{display:flex;align-items:flex-start;gap:13px}
.cr-code{flex:none;min-width:64px;font-weight:600;font-size:14.5px;color:var(--accent)}
.cr-body{flex:1;min-width:0}
.cr-mean{font-size:13.5px;line-height:1.4}
.cr-sys{font-size:10px;color:var(--ink3);margin-top:2px}
.cr-cause{margin-top:6px}
@media(max-width:560px){
  .cr-top{flex-wrap:wrap;align-items:center;gap:8px 12px}
  .cr-code{order:-1;flex:1 1 auto;min-width:0;font-size:15px}
  .cr-body{order:1;flex:1 1 100%}
}
/* mobile-only engine context bar (second bar under the header) — premium brand-blue; desktop never shows it */
.enginebar{display:none}
.eb-lbl{font-family:var(--fm);font-size:8.5px;font-weight:600;letter-spacing:.18em;color:rgba(255,255,255,.5);flex:none}
.eb-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 3px rgba(242,109,91,.22)}
.eb-txt{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden;white-space:nowrap}
.eb-txt b{font-family:var(--fm);font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em;flex:none}
.eb-txt span{font-family:var(--fm);font-size:11px;color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis}
.eb-clear{display:inline-flex;align-items:center;gap:5px;flex:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:#fff;border-radius:20px;padding:5px 12px 5px 10px;font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast)}
.eb-clear:active{background:var(--danger);border-color:var(--danger)}
.eb-clear svg{width:13px;height:13px}
/* scrim behind the mobile search overlay */
.searchScrim{position:fixed;inset:0;z-index:calc(var(--z-topbar) - 1);background:rgba(20,21,23,.30);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s ease}
.searchScrim.on{opacity:1;pointer-events:auto}
/* breadcrumb (all sizes): HOME › SECTION — home is text on desktop, single-colour icon on mobile */
.topspacer{flex:1;min-width:10px}
.crumbs{display:flex;align-items:center;gap:10px;min-width:0}
.crumb{font-size:12.5px;font-weight:600;color:var(--ink2);text-decoration:none;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.crumb.home{display:inline-flex;align-items:center;color:var(--ink2);transition:color var(--dur-fast)}
.crumb.home:hover{color:var(--accent)}
.crumb.home .home-ico{display:inline-flex;align-items:center}
.crumb.home .home-ico svg{display:block}
.crumb.home .home-brand{display:none;text-transform:none;letter-spacing:-.01em;font-size:15px;font-weight:700;color:var(--brandblue)}
.crumb.home .home-brand b{color:var(--ink);font-weight:700}
.crumb.current{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumbsep{display:inline-flex;flex:none;color:var(--ink3);opacity:.5}
.content{padding:12px 30px 96px;max-width:1180px;}

/* section header */
.shead{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.shead .num{font-family:var(--fm);font-size:10px;font-weight:600;color:var(--accentD);background:var(--accentT);border:1px solid var(--accentBd);border-radius:6px;padding:3px 7px;letter-spacing:.02em;}
.shead h2{font-weight:700;font-size:20px;margin:0;letter-spacing:-.015em;}
.shead .rule{flex:1;height:1px;background:var(--line2);}

.card{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);}
.animate{animation:csPop .28s ease both;}

/* overview */
/* home-page variant hero — premium dark card (matches the sidebar variant card) */
.ovhead{position:relative;background:linear-gradient(158deg,#3c414a 0%,#2b2e34 100%);border:1px solid #3f444d;border-radius:14px;padding:18px 18px 0;box-shadow:var(--shadow-dark);margin-bottom:12px;overflow:hidden;}
.ovhead .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.ovhead .k{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;color:var(--accent);display:flex;align-items:center;gap:6px;}
.ovhead .k::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);}
.ovhead .title{font-weight:700;font-size:19px;letter-spacing:-.01em;margin-top:3px;color:#fff;}
.ovhead .pill{font-family:var(--fm);font-size:10.5px;color:#F6B2A4;background:rgba(242,109,91,.16);border:1px solid rgba(242,109,91,.5);border-radius:var(--rs);padding:5px 9px;white-space:nowrap}
.ovstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:var(--rs);overflow:hidden;margin:12px 0;}
.ovstats .cell{background:#2f333b;padding:11px 12px;}
.ovstats .cl{font-family:var(--fm);font-size:9.5px;letter-spacing:.08em;color:rgba(255,255,255,.5);}
.ovstats .cv{font-family:var(--fm);font-weight:600;font-size:14px;margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;color:#fff;}
.ovblurb{margin:0 -18px;padding:11px 18px;border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.18);font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.45;}
/* trust chips tuned for the dark hero cells */
.ovstats .tc.genuine>button{color:#63D493;border-color:rgba(28,138,78,.55);background:rgba(28,138,78,.16)}
.ovstats .tc.community>button{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.ovstats .tc.conflict>button,.ovstats .tc.verify>button{color:#E7B15A;border-color:rgba(185,121,26,.6);background:rgba(185,121,26,.18)}
.ovgroup{margin-bottom:12px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.tile{display:flex;align-items:flex-start;gap:11px;text-align:left;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);padding:14px;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color var(--dur-fast),transform var(--dur-fast);}
.tile:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.tile .ic{width:32px;height:32px;border-radius:9px;background:#EFEFE9;color:var(--ink);display:grid;place-items:center;flex:none;border:1px solid var(--line);}
.tile .tl{font-weight:700;font-size:14px;display:block}
.tile .td{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.35;display:block}

/* spec / list rows */
.row{border-top:1px solid var(--line);padding:13px 16px;transition:background var(--dur-fast);}
.row:first-child{border-top:0}
.row:hover{background:var(--paper2);}
.row .main{display:grid;grid-template-columns:minmax(150px,205px) minmax(0,1fr) 22px;gap:16px;align-items:center;}
.row .label{font-weight:500;font-size:13px;color:var(--ink2);letter-spacing:-.005em;line-height:1.35;}
.row .value{font-family:var(--fm);font-weight:600;font-size:13.5px;color:var(--ink);text-align:left;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.row .value .u{color:var(--ink3);font-size:12px;font-weight:500;}
.row .note{font-size:12px;color:var(--ink3);line-height:1.5;margin-top:6px;}
.row .note.warn{color:var(--danger)}
/* DDE architecture — icon-led rows with pin-code chips (more scannable than plain mono rows) */
.archrow{display:flex;gap:13px;padding:13px 15px;border-top:1px solid var(--line);transition:background var(--dur-fast);}
.archrow:first-child{border-top:0;}
.archrow:hover{background:var(--paper2);}
.archrow-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--paper2);border:1px solid var(--line2);color:var(--brandblue);}
.archrow-b{flex:1;min-width:0;}
.archrow-hd{display:flex;align-items:center;gap:9px;}
.archrow-t{flex:1;min-width:0;font-weight:600;font-size:13.5px;color:var(--ink);letter-spacing:-.005em;}
.archrow-v{font-family:var(--fm);font-size:12.5px;color:var(--ink2);line-height:1.65;margin-top:4px;overflow-wrap:anywhere;}
.archrow-n{font-size:11.5px;color:var(--ink3);margin-top:4px;line-height:1.5;}
.av-pin{display:inline-block;font-family:var(--fm);font-size:11px;font-weight:600;color:var(--brandblue);background:#E8EEF5;border:1px solid #C3D3E3;border-radius:5px;padding:1px 5px;margin:0 1px;}
/* grouped spec cards (mechanical, fuel) */
/* leading icon on section/group bands — muted monochrome glyph */
.bandi,.tqgh-i{display:inline-flex;flex:none;color:var(--ink2)}
.bandi svg,.tqgh-i svg{width:15px;height:15px;display:block}
/* description line that sits under a category band, above its card */
.banddesc{font-size:12.5px;color:var(--ink2);line-height:1.55;margin:-4px 2px 12px;}
/* unified spec / prose rows — Specs, Air&Turbo, Cooling, Lubrication, Mechanical, Fuel.
   Content is width-constrained for readable line length; value + trust chip stay packed
   together so short values don't float across a huge gap to a far-right chip. */
.srow-head{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:5px 22px;align-items:start;max-width:840px}
.srow-head.col{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;max-width:720px}
.srow-label{font-weight:500;font-size:13px;color:var(--ink2);line-height:1.4;letter-spacing:-.005em}
.srow-head.col .srow-label{flex:1;min-width:0}
.srow-vwrap{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.srow-value{font-family:var(--fm);font-weight:600;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;letter-spacing:-.01em}
.srow-value .u{color:var(--ink3);font-size:12px;font-weight:500}
.srow-body{font-size:13.5px;line-height:1.6;color:var(--ink);font-weight:450;max-width:690px;margin-top:6px;overflow-wrap:anywhere}
.srow-head.col .srow-body{flex:1;min-width:0;margin-top:0}
.srow-note{max-width:680px}
@media(max-width:560px){
  .srow-head{grid-template-columns:1fr;gap:3px;max-width:none}
  .srow-vwrap{margin-top:1px}
  .srow-head.col,.srow-body{max-width:none}
}

/* banners */
.banner{display:flex;gap:10px;align-items:flex-start;background:var(--verifyT);border:1px solid var(--verify);border-radius:var(--rb);padding:11px 13px;margin-bottom:12px;}
.banner svg{flex:none;margin-top:1px}
.banner .t{font-size:12.5px;line-height:1.45;color:#7A5312;}

/* torque cards */
/* unit toggle (shared) */
.unittoggle{display:inline-flex;background:var(--paper2);border:1px solid var(--line2);border-radius:10px;padding:3px;gap:2px;}
.unittoggle button{border:0;background:transparent;font-family:var(--fm);font-weight:600;font-size:12px;padding:7px 15px;border-radius:7px;cursor:pointer;color:var(--ink2);transition:background var(--dur-fast),color var(--dur-fast);}
.unittoggle button.active{background:var(--charcoal);color:#fff;box-shadow:var(--shadow-primary);}

/* ── Torque Specs — grouped expandable tables ──────────── */
.tqhdr{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;}
.tqtitle{display:flex;align-items:center;gap:11px;}
.tqnum{font-family:var(--fm);font-size:12px;font-weight:600;color:var(--accentD);background:var(--accentT);border:1px solid var(--accentBd);border-radius:7px;padding:3px 8px;}
.tqttl{font-weight:700;font-size:26px;letter-spacing:-.02em;}
.tqsub{font-family:var(--fm);font-size:11.5px;color:var(--ink3);}
.tqhdr-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none;}
.tqhdr-ul{font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:var(--ink3);}
/* group jump pills */
.tqpills{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px;}
.tqpill{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;background:var(--paper2);border:1px solid var(--line2);border-radius:9px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:13px;color:var(--ink2);transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast);}
.tqpill:hover{border-color:var(--ink3);}
.tqpill.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal);}
.tqpill-c{font-family:var(--fm);font-size:11px;color:var(--ink3);}
.tqpill.active .tqpill-c{color:rgba(255,255,255,.55);}
.tqpill-i{display:inline-flex;flex:none;margin-right:-2px;color:var(--ink3);}
.tqpill-i svg{width:15px;height:15px;display:block;}
.tqpill.active .tqpill-i{color:rgba(255,255,255,.85);}
/* group header — uses the canonical category-band rules (see .subhead) */
.tqgroup{scroll-margin-top:70px;}
/* standalone cards — each fastener is its own card (not a joined table), desktop & mobile alike */
.tqtbl{display:flex;flex-direction:column;gap:12px;}
.tqth{display:none;}
.tqr{position:relative;background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--dur-fast),border-color var(--dur-fast);}
.tqr:not(.nodetail):hover{box-shadow:var(--shadow-md);}
.tqr:not(.nodetail):active{box-shadow:var(--shadow-md);}
/* subtle zebra between cards — conflict cards look identical, the CONFLICT pill carries the meaning */
.tqtbl > .tqr:nth-child(odd){background:#F9F8F4;}
.tqr.open{background:var(--paper);box-shadow:var(--shadow-md);border-color:var(--line3,#cfcdc4);}
.tqtbl > .tqr.open{background:var(--paper);}
.tqr-sum{display:grid;grid-template-columns:22px minmax(0,1fr) max-content 96px;grid-template-areas:"chev name thread tq";gap:16px;align-items:center;padding:14px 18px;cursor:pointer;}
.tqr.nodetail .tqr-sum{cursor:default;}
.tqr-chev{grid-area:chev;display:inline-flex;color:var(--ink3);transition:transform var(--dur-fast);}
.tqr.open .tqr-chev{transform:rotate(90deg);color:var(--accent);}
.tqr-name{grid-area:name;display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0;}
.tqr-name .fn{font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink);}
.tqr-th{grid-area:thread;font-family:var(--fm);font-size:13px;color:var(--ink2);text-align:right;white-space:nowrap;}
.tqr-tq{grid-area:tq;justify-self:end;}
.tqv{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.05;}
.tqv-main{font-family:var(--fm);font-weight:700;font-size:19px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.tqv-u{font-size:12px;font-weight:500;color:var(--ink3);margin-left:3px;}
.tqv-alt{font-family:var(--fm);font-size:10.5px;color:var(--ink3);margin-top:3px;}
.tqv-main.varies{font-size:13px;font-weight:600;color:var(--ink3);}
.tqv-main.pending{font-size:18px;font-weight:600;color:var(--line2);}
/* GS 90003-2 general-standard fallback — calm blue, clearly not a genuine model figure */
.tqv-main.std{font-size:16px;font-weight:600;color:var(--brandblue);opacity:.9;}
.tqv-main.std .tqv-approx{font-size:12px;font-weight:500;color:var(--brandblue);opacity:.6;margin-right:1px;}
.tqv-main.std .tqv-u{color:var(--brandblue);opacity:.7;}
.tqv-main.std .tqv-star{font-size:11px;color:var(--brandblue);opacity:.55;margin-left:2px;vertical-align:super;}
.tqv-alt.std{color:var(--brandblue);opacity:.6;font-size:9.5px;letter-spacing:.02em;text-transform:uppercase;}
/* inline tags */
.tqtags{display:inline-flex;flex-wrap:wrap;gap:6px;}
.ttag{font-family:var(--fm);font-size:9px;letter-spacing:.05em;font-weight:600;border-radius:6px;padding:3px 8px;white-space:nowrap;}
.ttag.step{background:var(--line);color:var(--ink2);}
.ttag.su{background:#8A3B2C;color:#fff;}
.ttag.pend{background:var(--line);color:var(--ink3);}
.ttag.conf{background:var(--verify);color:#fff;}
.ttag.sm{padding:2px 7px;font-size:8.5px;}
/* expandable detail — zebra-striped sections with dividers */
.tqr-detail{max-height:0;overflow:hidden;transition:max-height .38s var(--ease-spring);}
.tqr.open .tqr-detail{max-height:1600px;}
.tqr-din{border-top:1px solid var(--line2);overflow:hidden;margin:0;
  opacity:0;transform:translateY(-5px);transition:opacity .3s ease .04s,transform .34s var(--ease-spring) .04s;}
.tqr.open .tqr-din{opacity:1;transform:none;}
.tqd-sec{padding:13px 16px;}
.tqd-sec + .tqd-sec{border-top:1px solid var(--line);}
.tqd-sec:nth-child(even):not(.conf){background:rgba(26,27,29,.024);}
.tqd-sec.conf{background:var(--verifyT);}
.tqd-l{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;color:var(--ink3);margin-bottom:9px;}
.tqd-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.tqd-chip{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line2);border-radius:9px;padding:5px 13px 5px 5px;font-family:var(--fm);font-size:12.5px;color:var(--ink);box-shadow:var(--shadow-sm);}
.tqd-chip .n{width:21px;height:21px;flex:none;border-radius:50%;background:var(--charcoal);color:#fff;font-size:10px;font-weight:600;display:inline-grid;place-items:center;}
.tqd-arr{color:var(--accent);font-size:13px;opacity:.6;}
.tqd-multi{display:flex;flex-direction:column;gap:6px;font-family:var(--fm);font-size:13.5px;}
.tqd-multi .seg{display:flex;align-items:baseline;gap:10px;}
.tqd-multi .sz{color:var(--ink3);min-width:70px;}
.tqd-multi .u{color:var(--ink3);font-size:11px;margin-left:3px;}
.tqd-v{font-family:var(--fm);font-size:13px;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.tqd-v.note{font-family:var(--fs);font-size:12.5px;color:var(--ink2);line-height:1.5;display:block;}
/* general-standard fallback block */
.tqd-std{display:flex;flex-direction:column;gap:8px;border-left:2px solid var(--brandblue);padding-left:12px;}
.tqd-std-v{display:flex;align-items:baseline;gap:9px;font-family:var(--fm);}
.tqd-std-v .n{font-size:17px;font-weight:700;color:var(--brandblue);font-variant-numeric:tabular-nums;}
.tqd-std-v .a{font-size:11px;color:var(--ink3);}
.tqd-std-note{font-family:var(--fs);font-size:12px;color:var(--ink2);line-height:1.55;}
.pnlink{display:inline-flex;align-items:center;gap:7px;color:var(--accentD);text-decoration:none;font-weight:600;font-family:var(--fm);}
.pnlink:hover{color:var(--accent);}
.pnico{display:inline-flex;color:var(--accent);}
.pnqty{font-family:var(--fm);color:var(--ink3);}
.tqd-dash{color:var(--ink3);}
.tqd-conf-in{display:flex;gap:9px;align-items:flex-start;}
.tqd-conf-l{font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--verify);flex:none;white-space:nowrap;margin-top:1px;}
.tqd-conf-t{font-size:12.5px;color:#7A5312;line-height:1.5;}
/* reference / source section */
.tqd-ref{display:flex;flex-direction:column;gap:10px;}
.rtrust{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--fm);font-size:9px;font-weight:600;letter-spacing:.06em;padding:3px 9px 3px 7px;border-radius:20px;border:1px solid;}
.rtrust svg{width:12px;height:12px;}
.rtrust.genuine{color:var(--genuine);border-color:var(--genuineBd,var(--genuine));background:var(--genuineT);}
.rtrust.community{color:var(--community);border-color:var(--communityBd,var(--community));background:var(--communityT);}
.rtrust.verify{color:var(--verify);border-color:var(--verifyBd,var(--verify));background:var(--verifyT);}
.rsrc{display:flex;align-items:center;gap:11px;text-decoration:none;background:var(--paper);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);}
.rsrc:hover{border-color:var(--accentBd);box-shadow:var(--shadow-sm);}
.rsrc .ricon{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--paper2);border:1px solid var(--line2);color:var(--accent);}
.rsrc:hover .ricon{border-color:var(--accentBd);}
.rsrc .rmain{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.rsrc .rcode{font-family:var(--fm);font-size:12px;font-weight:600;color:var(--ink);line-height:1.3;overflow-wrap:anywhere;}
.rsrc .rsub{font-size:10.5px;color:var(--ink3);line-height:1.3;}
.rsrc .rgo{flex:none;display:inline-flex;color:var(--accent);opacity:.85;}
.rsrc.none{font-family:var(--fm);font-size:12px;color:var(--ink3);display:block;}
/* orchestrated staggered entrance */
@keyframes tqRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tqpage > *{animation:tqRise .55s var(--ease-spring) both;}
.tqpage > *:nth-child(1){animation-delay:.02s}
.tqpage > *:nth-child(2){animation-delay:.07s}
.tqpage > *:nth-child(3){animation-delay:.12s}
.tqpage > *:nth-child(4){animation-delay:.17s}
.tqpage > *:nth-child(5){animation-delay:.22s}
.tqpage > *:nth-child(6){animation-delay:.27s}
.tqpage > *:nth-child(7){animation-delay:.32s}
.tqpage > *:nth-child(8){animation-delay:.37s}
.tqpage > *:nth-child(n+9){animation-delay:.42s}
/* part-number link — underline draw + icon nudge on hover */
.pnlink .pnnum{position:relative;}
.pnlink .pnnum::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-spring);}
.pnlink:hover .pnnum::after{transform:scaleX(1);}
.pnico{transition:transform var(--dur-fast);}
.pnlink:hover .pnico{transform:translateX(1px);}
.chip{font-family:var(--fm);font-size:10px;color:var(--ink2);border:1px solid var(--line2);border-radius:var(--rs);padding:3px 7px;}
.chip.danger{color:var(--danger);border-color:var(--danger);}
.chip.accent{color:var(--accentD);background:var(--accentT);border-color:var(--accentBd);}
.conflictnote{display:flex;gap:8px;align-items:flex-start;padding:12px 16px 14px;background:var(--verifyT);border-top:1px solid var(--line);}
.conflictnote .k{font-family:var(--fm);font-size:10px;font-weight:600;color:var(--verify);letter-spacing:.06em;flex:none;margin-top:1px;}
.conflictnote .t{font-size:12px;line-height:1.45;color:#7A5312;}

/* pinouts */
.connbtns{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap;}
.connbtn{font-family:var(--fm);font-size:11.5px;padding:9px 13px;border-radius:var(--rb);border:1px solid var(--line2);background:var(--paper2);color:var(--ink2);cursor:pointer;min-height:var(--tap);}
.connbtn.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal);box-shadow:var(--shadow-primary);}
.pinrow{border-top:1px solid var(--line);padding:12px 15px;}
.pinrow:first-child{border-top:0}
.pinrow .main{display:flex;align-items:center;gap:12px;}
.pinrow .pin{font-family:var(--fm);font-weight:600;font-size:15px;color:var(--accent);min-width:40px;}
.pinrow .sig{font-weight:500;font-size:13.5px;}
.pinrow .conf{font-family:var(--fm);font-size:10px;color:var(--ink3);margin-top:2px;}
.pinrow .pnote{font-size:11.5px;color:var(--ink3);line-height:1.4;margin-top:7px;padding-left:52px;}

/* ── interactive ECU pinout ─────────────────────────── */
/* plain-text ECU line — the ECU fitted to the engine selected in the sidebar */
.pnctx{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.pnctx .k{font-family:var(--fm);font-size:12px;color:var(--ink3);letter-spacing:.01em;}
.pnctx .v{font-family:var(--fm);font-weight:600;font-size:13px;color:var(--ink);}
/* full-width row: generation pills (left) + search (right) */
.pntop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
/* ECU generation selector — each is its own distinct button (was a blended segmented control) */
.pntabs{display:none;}   /* superseded by the dropdown selector (.pnsel) at every width */
.pntab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-family:var(--fm);border:1px solid var(--line2);background:var(--paper);color:var(--ink2);padding:8px 14px;border-radius:11px;cursor:pointer;white-space:nowrap;flex:none;box-shadow:var(--shadow-sm);transition:transform var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);}
.pntab:hover{border-color:var(--ink3);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.pntab-top{display:flex;align-items:center;gap:7px;}
.pntab-dot{width:7px;height:7px;border-radius:50%;flex:none;}
.pntab-dot.genuine{background:#1C8A4E;}
.pntab-dot.community{background:#5E86B0;}
.pntab-dot.gap{background:#9AA0A8;}
.pntab-g{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);}
.pntab-e{font-size:9.5px;letter-spacing:.02em;color:var(--ink3);padding-left:14px;}
.pntab.on{background:var(--brandblue);border-color:var(--brandblue);box-shadow:var(--shadow-primary);}
.pntab.on:hover{transform:translateY(-1px);border-color:var(--brandblue);}
.pntab.on .pntab-g{color:#fff;}
.pntab.on .pntab-e{color:rgba(255,255,255,.78);}
.pntab.on .pntab-dot{box-shadow:0 0 0 2px rgba(255,255,255,.28);}
.pnlegend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.pnchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:10.5px;color:var(--ink2);background:var(--paper2);border:1px solid var(--line2);border-radius:20px;padding:4px 10px 4px 7px;cursor:pointer;user-select:none;transition:opacity .14s;}
.pnchip .d{width:10px;height:10px;border-radius:3px;flex:none;}
.pnchip.dim{opacity:.32;}
.pnsearch{flex:1;min-width:200px;max-width:380px;display:flex;align-items:center;gap:8px;background:var(--paper2);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;color:var(--ink3);}
.pnsearch input{flex:1;width:auto;border:0;background:none;outline:none;font-family:var(--fs);font-size:13px;color:var(--ink);}
/* ECU selector as a dropdown — hidden on desktop (tab row shows); phones flip them via @media */
.pnsel{display:block;position:relative;width:200px;flex:none;font-family:var(--fm);}
.pnsel-trig{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line2);border-radius:12px;padding:12px 13px;cursor:pointer;box-shadow:var(--shadow-sm);font:inherit;transition:border-color var(--dur-fast);}
.pnsel-trig:hover{border-color:var(--ink3);}
.pnsel-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.pnsel-g{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--ink);line-height:1.15;}
.pnsel-e{font-size:11px;color:var(--ink3);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pnsel-chev{display:inline-flex;flex:none;color:var(--ink2);transition:transform var(--dur-fast);}
.pnsel.open .pnsel-chev{transform:rotate(180deg);}
.pnsel-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:var(--z-popover);background:var(--paper2);border:1px solid var(--line2);border-radius:12px;padding:5px;box-shadow:var(--shadow-lg);}
.pnsel.open .pnsel-menu{display:block;}
.pnsel-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:10px 11px;cursor:pointer;font:inherit;}
.pnsel-opt+.pnsel-opt{margin-top:2px;}
.pnsel-opt:hover{background:var(--bg);}
.pnsel-opt .pnsel-g{font-size:13px;}
.pnsel-opt.on{background:var(--brandblue);}
.pnsel-opt.on .pnsel-g{color:#fff;}
.pnsel-opt.on .pnsel-e{color:rgba(255,255,255,.82);}
.pnsel-opt.on .pntab-dot{box-shadow:0 0 0 2px #fff;}
.pnsel-chk{margin-left:auto;flex:none;display:inline-flex;color:#fff;opacity:0;}
.pnsel-opt.on .pnsel-chk{opacity:1;}
@media(min-width:761px){
  /* desktop: single-line trigger so the selector matches the search bar's height and flows inline (options stay two-tier) */
  .pnsel-trig{padding:6px 12px;min-height:38px;gap:8px;}
  .pnsel-trig .pnsel-txt{flex-direction:row;align-items:baseline;gap:0;}
  .pnsel-trig .pnsel-g{font-size:13px;}
  .pnsel-trig .pnsel-e{font-size:11.5px;}
  .pnsel-trig .pnsel-e::before{content:"·";margin:0 5px;color:var(--ink3);}
}
.pnfacewrap{position:relative;}
.pnscroll{display:none;}
.pnface{display:flex;flex-wrap:wrap;align-items:flex-start;gap:11px;background:linear-gradient(180deg,#2f3237,#25272b);border:1px solid #17181b;border-radius:16px;padding:12px;box-shadow:0 12px 30px rgba(16,24,40,.22),inset 0 1px 0 rgba(255,255,255,.05);}
/* each connector is its own card; big ones fill the row (pins reflow), small ones hug their pins */
.pnconn{flex:1 1 100%;box-sizing:border-box;background:#131416;border:1px solid #08090a;border-radius:12px;padding:11px 12px 12px;box-shadow:inset 0 2px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03);min-width:0;}
.pnconn.sm{flex:0 0 auto;width:-moz-fit-content;width:fit-content;max-width:100%;}
/* diagram full width; info panel + browsable list share the row beneath it */
.pnbelow{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start;margin-top:18px;}
.pnbelow .subhead:first-child{margin-top:0;}   /* line up the two column titles ("Selected pin" | "… pin list") */
.pncol{position:sticky;top:78px;}
.pncol .pnpanel{position:static;}
.pnconn-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px;min-width:0;}
.pnconn-hd .cid{font-family:var(--fm);font-size:10.5px;font-weight:700;color:#e9ebee;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.07);letter-spacing:.05em;flex:none;padding:2px 8px;border-radius:7px;}
.pnconn-hd .cnm{font-size:11px;color:#9298a1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pnconn-hd .cov{font-family:var(--fm);font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:#8b9099;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:2px 9px;flex:none;white-space:nowrap;}
.pnbank{display:flex;flex-wrap:wrap;gap:6px;background:#0b0c0d;border:1px solid #050506;border-radius:9px;padding:9px;}
.pnpin{width:34px;height:34px;flex:none;border-radius:7px;position:relative;cursor:pointer;background:#26282c;border:1px solid #383b41;display:flex;align-items:center;justify-content:center;transition:transform .08s,box-shadow .12s,filter .12s;}
.pnpin .pnn{font-family:var(--fm);font-size:12px;font-weight:600;color:#9aa0a8;line-height:1;white-space:nowrap;letter-spacing:-.01em;}
/* category colour lives in the pin BACKGROUND (soft tint) — number stays dark & legible, no competing dot */
.pnpin.doc{background:var(--pcT);border-color:var(--pcB);}
.pnpin.doc .pnn{color:var(--ink);font-weight:600;}
.pnpin.undoc{background:#212327;border-style:dashed;border-color:#383b41;}
.pnpin.undoc .pnn{color:#565a61;font-weight:400;}
.pnpin:hover{filter:brightness(1.06);}
.pnpin:hover{transform:translateY(-1px);box-shadow:0 3px 9px rgba(0,0,0,.45);z-index:3;}
.pnpin.sel{outline:2px solid var(--accent);outline-offset:1px;box-shadow:0 0 0 4px rgba(242,109,91,.3);z-index:4;}
.pnpin.rel{outline:2px solid #7fb0e6;outline-offset:1px;z-index:3;}
.pnpin.dim{opacity:.24;}
/* ── PHYSICAL socket face (DDE4): the real ECU connector — 5 sockets side by side, true grids, pin 1 bottom-left (BMW Fig.102) ── */
.pnface.phys{flex-wrap:nowrap;align-items:flex-end;gap:6px;padding:14px 11px 11px;overflow-x:auto;}
.pnsock{display:flex;flex-direction:column;min-width:0;}
.pnsock .pngrid{display:grid;gap:2.5px;background:#0b0c0d;border:1px solid #050506;border-radius:6px;padding:4px;box-shadow:inset 0 1px 5px rgba(0,0,0,.45);}
.pngridwrap{display:flex;align-items:center;gap:11px;min-width:0;background:#0b0c0d;border:1px solid #050506;border-radius:6px;padding:4px 6px;box-shadow:inset 0 1px 5px rgba(0,0,0,.45);}
.pngridwrap .pngrid{background:none;border:0;padding:0;box-shadow:none;}
.pngridwrap .pnpwr{align-self:stretch;align-content:center;}
.pnsock-lbl{text-align:center;font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.09em;color:#aeb4bd;margin-top:8px;}
.pnface.phys .pnpin{width:auto;height:auto;min-width:15px;flex:none;aspect-ratio:1;border-radius:4px;}
.pnface.phys .pnpin .pnn{font-size:10px;letter-spacing:-.04em;font-weight:600;}
/* desktop: fix pin HEIGHT (width still fills the row) → every generation's diagram is exactly the same height, no empty space, no layout jump between tabs */
@media(min-width:761px){.pnface.phys .pnpin{height:24px;aspect-ratio:auto;}}
.pnpin.void{background:transparent;border:0;box-shadow:none;cursor:default;pointer-events:none;}
/* layout provenance caption under the diagram */
.pncap{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:11px;padding:0 3px;position:relative;}
.pncap-b{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px 4px 9px;border-radius:20px;flex:none;cursor:pointer;background:none;border:1px solid transparent;transition:filter var(--dur-fast),box-shadow var(--dur-fast);}
.pncap-b:hover{filter:brightness(.98);box-shadow:var(--shadow-sm);}
.pncap-i{display:inline-flex;}
.pncap-q{display:inline-flex;margin-left:2px;opacity:.5;}
.pncap.gen .pncap-b{color:#1C8A4E;background:#E7F4EC;border-color:#B8DEC6;}
.pncap.comm .pncap-b{color:#375273;background:#E8EEF5;border-color:#C3D3E3;}
.pncap.sch .pncap-b{color:#8A6412;background:var(--verifyT);border-color:#E7CF9C;}
.pncap.gap .pncap-b{color:#5C6570;background:#ECEEF1;border-color:#D6DAE0;}
.pncap.open .pncap-b{filter:brightness(.97);box-shadow:var(--shadow-sm);}
/* DDE7 gap: banner reads as info (steel), not a red warning; gap-notice card replaces the empty pin list */
.pnbanner.gap{background:var(--paper2);border-color:var(--line2);}
.pnbanner.gap svg{color:var(--brandblue);}
.pnbanner.gap .t{color:var(--ink2);}
.pngap{padding:16px 16px 17px;}
.pngap-h{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:var(--ink);}
.pngap-i{display:inline-flex;color:var(--brandblue);flex:none;}
.pngap-t{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--ink2);}
/* info panel */
.pnpanel{background:var(--paper);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);position:sticky;top:78px;}
.pnempty{display:flex;flex-direction:column;align-items:center;gap:11px;color:var(--ink3);font-size:12.5px;text-align:center;padding:32px 20px;line-height:1.55;}
.pnempty-i{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--paper2);border:1px solid var(--line2);color:var(--ink3);}
.pnempty-t{color:var(--ink2);font-weight:500;max-width:34ch;}
.pnempty-s{font-size:11.5px;color:var(--ink3);max-width:36ch;}
.pnp-hd{padding:14px 16px;border-bottom:1px solid var(--line);position:relative;}
.pnp-clear{position:absolute;top:13px;right:13px;font-family:var(--fm);font-size:10px;letter-spacing:.04em;color:var(--ink3);background:var(--paper2);border:1px solid var(--line2);border-radius:20px;padding:4px 10px;cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast);}
.pnp-clear:hover{border-color:var(--accent);color:var(--accentD);}
.pnp-pin{font-family:var(--fm);font-weight:600;font-size:20px;}
.pnp-pin small{font-size:12.5px;color:var(--ink3);font-weight:400;}
.pnp-catrow{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.pnp-cat{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:10px;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:3px 9px 3px 7px;color:#fff;}
.pnp-cat .d{width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.85);}
.pnp-body{padding:14px 16px;display:flex;flex-direction:column;gap:13px;}
.pnp-f .k{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px;}
.pnp-f .v{font-size:13.5px;color:var(--ink);line-height:1.45;}
.pnp-f .v.mono{font-family:var(--fm);font-size:12.5px;}
.pnp-warn{background:var(--verifyT);border:1px solid #E7CF9C;border-radius:9px;padding:9px 11px;font-size:11.5px;color:#7A5312;line-height:1.5;display:flex;gap:8px;}
.pnp-trace{border-top:1px solid var(--line);padding-top:12px;}
.pnp-trace .k{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);}
.pnp-rel{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--line2);border-radius:9px;margin-top:6px;cursor:pointer;background:var(--paper2);transition:border-color var(--dur-fast);}
.pnp-rel:hover{border-color:var(--accentBd);}
.pnp-rel .rp{font-family:var(--fm);font-weight:600;font-size:12px;min-width:44px;color:var(--brandblue);}
.pnp-rel .rd{font-size:11.5px;color:var(--ink2);}
.pnp-none{color:var(--ink3);font-size:12px;padding:6px 2px;}
/* diagram pan hint + bottom-sheet backdrop — mobile only (hidden on desktop) */
.pnhint{display:none;align-items:center;justify-content:center;gap:8px;margin:10px 0 2px;font-family:var(--fs);font-size:11px;font-weight:500;color:var(--ink2);letter-spacing:.01em;}
.pnhint-i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--accentT);border:1px solid var(--accentBd);color:var(--accentD);animation:pnNudge 1.9s ease-in-out infinite;}
@keyframes pnNudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.pnhint-i{animation:none;}}
.pnsheet-scrim{display:none;}
@media(max-width:760px){
  /* ═══════ ECU PINOUTS — mobile polish ═══════ */
  /* your engine's ECU → plain inline text like desktop (no card), sits above the selector */
  .pnctx{gap:6px 8px;margin-bottom:11px;}

  /* safety note: calmer + tighter (scoped to the pinout banner only) */
  .pnbanner{padding:10px 12px;margin-bottom:12px;gap:9px;border-color:#E7CF9C;border-radius:12px;}
  .pnbanner svg{width:15px;height:15px;}
  .pnbanner .t{font-size:11.5px;line-height:1.45;}

  /* generation tabs + search */
  .pntop{gap:10px;margin-bottom:12px;}
  .pnsel{width:auto;flex:1 0 100%;}   /* dropdown fills the row on phones */
  .pnsearch{margin-left:0;width:100%;max-width:none;padding:11px 13px;}
  .pnsearch input{width:100%;font-size:14px;}

  /* category filters → one horizontal scroll row (user preference) */
  .pnlegend{flex-wrap:nowrap;overflow-x:auto;gap:7px;margin:0 0 13px;padding:1px 0 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .pnlegend::-webkit-scrollbar{height:0;}
  .pnchip{flex:none;padding:7px 13px 7px 10px;font-size:11px;min-height:34px;}
  .pnchip .d{width:11px;height:11px;}

  /* ── connector diagram: legible pins, honest horizontal pan ── */
  .pnface{gap:9px;padding:10px;}
  .pnconn.sm{flex:1 1 100%;width:auto;}
  .pnpin{width:31px;height:31px;}
  .pnpin .pnn{font-size:11px;}
  /* ROOT CAUSE (iOS Safari): the sockets use inline `flex:<cols> 1 0` (grow ∝ column count); iOS mis-resolves that flex-grow against the pins' min-width inside the overflow scroller, squeezing the right-hand sockets so pin boxes overlap and numbers double. Fix = deterministic sizing: kill flex-grow (size sockets to content) + fixed-size pins. */
  .pnface.phys{padding:13px 12px 11px;-webkit-overflow-scrolling:touch;}
  .pnface.phys .pnsock{flex:0 0 auto!important;}
  .pnface.phys .pnpin{width:26px;height:26px;min-width:26px;aspect-ratio:auto;border-radius:5px;}
  .pnface.phys .pnpin .pnn{font-size:12px;}
  /* scroll affordance: a slim position bar over the diagram's bottom edge (overlay in the wrapper — NOT a mask on the scroller). A dark fade would just muddy the light pins, so we don't touch them. */
  .pnface.phys{scrollbar-width:none;}
  .pnface.phys::-webkit-scrollbar{height:0;display:none;}
  .pnscroll{display:block;position:absolute;left:50%;transform:translateX(-50%);bottom:9px;width:44%;max-width:190px;height:4px;border-radius:3px;background:rgba(255,255,255,.16);z-index:4;pointer-events:none;overflow:hidden;}
  .pnscroll-thumb{position:absolute;top:0;left:0;height:100%;min-width:16%;border-radius:3px;background:rgba(255,255,255,.62);}
  .pnfacewrap.no-scroll .pnscroll{display:none;}
  .pnsock-lbl{font-size:10px;margin-top:7px;color:#969ba3;letter-spacing:.1em;}
  .pnhint{display:flex;margin:5px 0 11px;font-size:11.5px;}
  .pncap{margin:16px 0 14px;justify-content:flex-start;}   /* compact pill + tap-popover; left-aligned on phones with breathing room above (diagram) and below (search) */

  /* ── pin list (the mobile hero) ── */
  .pnlist .subhead{margin:18px 0 9px;}
  .pnli{padding:13px 15px;gap:13px;}
  .pnli-n{min-width:30px;font-size:14px;}
  .pnli-t{font-size:13.5px;}

  /* ── selected pin → bottom sheet (no dead empty panel; detail at thumb height) ── */
  .pnbelow{grid-template-columns:1fr;gap:0;}
  .pncol{position:static;}
  .pncol>.subhead{display:none;}
  .pncol .pnpanel{display:none;}   /* inline panel hidden on mobile — the sheet is portaled to <body> */
  .pnpanel{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:var(--z-sheet);max-height:84vh;overflow-y:auto;border-radius:var(--r-sheet);border-width:1px 0 0;box-shadow:0 -16px 44px rgba(16,24,40,.30);transform:translateY(101%);transition:transform var(--dur-sheet) var(--ease-spring);-webkit-overflow-scrolling:touch;}
  .pnpanel.open{transform:translateY(0);}
  .pnpanel .pnempty{display:none;}
  .pnpanel::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:3px;background:var(--line2);z-index:2;}
  .pnp-hd{padding:22px 18px 14px;}
  .pnp-clear{top:17px;right:16px;padding:5px 12px;}
  .pnp-pin{font-size:21px;}
  .pnp-catrow{margin-top:10px;}
  .pnp-body{padding:16px 18px calc(24px + env(safe-area-inset-bottom));gap:15px;}
  .pnp-f .k{font-size:9.5px;letter-spacing:.13em;margin-bottom:5px;}
  .pnp-f .v{font-size:14px;line-height:1.5;}
  .pnp-f .v.mono{font-size:13px;}
  .pnp-warn{padding:10px 12px;font-size:12px;line-height:1.5;}
  .pnp-trace{padding-top:14px;}
  .pnp-rel{padding:11px 12px;margin-top:8px;}
  .pnp-rel .rp{min-width:48px;font-size:12.5px;}
  .pnp-rel .rd{font-size:12.5px;}

  .pnsheet-scrim{display:block;position:fixed;inset:0;z-index:var(--z-sheet-scrim);background:rgba(20,21,23,.44);opacity:0;pointer-events:none;transition:opacity var(--dur-sheet);}
  .pnsheet-scrim.on{opacity:1;pointer-events:auto;}
}
/* plain-language pin list */
.pnlist{margin-top:0;}
.pnli{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:10px 15px;cursor:pointer;transition:background var(--dur-fast);}
.pnli:first-child{border-top:0;}
.pnli:hover{background:var(--paper2);}
.pnli.on{background:var(--accentT);}
.pnli-n{font-family:var(--fm);font-weight:600;font-size:13px;color:var(--brandblue);min-width:32px;text-align:right;flex:none;font-variant-numeric:tabular-nums;}
.pnli-d{width:9px;height:9px;border-radius:2px;flex:none;}
.pnli-t{flex:1;font-size:13px;color:var(--ink);min-width:0;line-height:1.35;}
.pnli .tc{flex:none;}

/* ── DDE Electronics: interactive PLUG MAP (sensors + actuators, click → detail + ECU-pin cross-link) ── */
.plugshell{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start;}
.plugmapcol{min-width:0;}
.plugmapcol .subhead:first-child{margin-top:8px;}
.pluggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px;}
.plug{display:flex;align-items:center;gap:11px;text-align:left;background:var(--paper);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast);}
.plug:hover{border-color:var(--ink3);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.plug.on{border-color:var(--brandblue);box-shadow:0 0 0 1px var(--brandblue),var(--shadow-md);}
.plug-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;}
.plug.sensor .plug-ic{background:#EAEFF4;color:#4E7BB0;}
.plug.actuator .plug-ic{background:#F8EFDA;color:#B9791A;}
.plug-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;}
.plug-nm{font-weight:600;font-size:12.5px;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.plug-meta{display:flex;align-items:center;gap:7px;}
.plug-sig{font-family:var(--fm);font-size:9.5px;color:var(--ink3);letter-spacing:.02em;white-space:nowrap;}
.plug-pc{font-family:var(--fm);font-size:9px;color:var(--ink3);background:var(--paper2);border:1px solid var(--line2);border-radius:20px;padding:1px 7px;flex:none;white-space:nowrap;}
.plug-go{display:none;flex:none;color:var(--ink3);align-items:center;}
.plugdetcol{position:sticky;top:78px;}
.plugdetcol .subhead{margin-top:8px;}
.plugdetail{background:var(--paper);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);}
.plugd-empty{color:var(--ink3);font-size:13px;text-align:center;padding:30px 18px;line-height:1.55;}
.plugd-hd{padding:15px 16px;border-bottom:1px solid var(--line);position:relative;}
.plugd-nm{font-weight:700;font-size:15px;line-height:1.3;padding-right:64px;}
.plugd-type{display:inline-block;margin-top:9px;font-family:var(--fm);font-size:8.5px;letter-spacing:.06em;font-weight:700;text-transform:uppercase;border-radius:20px;padding:3px 9px;}
.plugd-type.sensor{color:#3F6FA6;background:#EAEFF4;border:1px solid #C2CFDD;}
.plugd-type.actuator{color:#A66E17;background:#F8EFDA;border:1px solid #E7CF9C;}
.plugd-body{padding:14px 16px;display:flex;flex-direction:column;gap:13px;}
.plugd-f .k{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px;}
.plugd-f .v{font-size:13.5px;color:var(--ink);line-height:1.45;}
.plugd-f .v.mono{font-family:var(--fm);font-size:12px;}
.plugd-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--fm);font-size:11.5px;font-weight:600;color:var(--accentD);text-decoration:none;background:var(--accentT);border:1px solid var(--accentBd);border-radius:9px;padding:8px 11px;transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast);}
.plugd-link:hover{border-color:var(--accent);transform:translateY(-1px);}
.plugd-link svg{flex:none;color:var(--accentD);}
.plugd-e{display:flex;align-items:center;gap:9px;}
.plugd-el{font-size:12px;color:var(--ink2);flex:1;min-width:0;}
.plugd-ev{font-family:var(--fm);font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink);}
.plugdetail .note{margin:0;}
@media(max-width:760px){
  /* DDE banner: calmer + tighter (scoped, so other pages' banners are untouched) */
  .ddebanner{padding:10px 12px;margin-bottom:12px;gap:9px;border-color:#E7CF9C;border-radius:12px;}
  .ddebanner svg{width:15px;height:15px;}
  .ddebanner .t{font-size:11.5px;line-height:1.45;}
  /* plug map */
  .plugshell{grid-template-columns:1fr;gap:0;}
  .pluggrid{grid-template-columns:1fr 1fr;gap:8px;}
  .plug{padding:10px 11px;}
  .plugdetcol{position:static;}
  .plugdetcol>.subhead{display:none;}
  .plugdetcol .plugdetail{display:none;}   /* inline hidden on mobile — the sheet is portaled to <body> */
  .plugdetail{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:var(--z-sheet);max-height:84vh;overflow-y:auto;border-radius:var(--r-sheet);border-width:1px 0 0;box-shadow:0 -16px 44px rgba(16,24,40,.30);transform:translateY(101%);transition:transform var(--dur-sheet) var(--ease-spring);-webkit-overflow-scrolling:touch;}
  .plugdetail.open{transform:translateY(0);}
  .plugdetail .plugd-empty{display:none;}
  .plugdetail::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:3px;background:var(--line2);z-index:2;}
  .plugdetail .plugd-hd{padding-top:22px;}
  .plugdetail .plugd-body{padding-bottom:calc(24px + env(safe-area-inset-bottom));}
}
@media(max-width:560px){
  /* phones: one plug per row so long names read in full; add a tap-affordance chevron */
  .pluggrid{grid-template-columns:1fr;gap:8px;}
  .plug{padding:12px 13px;gap:13px;}
  .plug-ic{width:38px;height:38px;}
  .plug-nm{font-size:13.5px;}
  .plug-meta{gap:8px;margin-top:1px;}
  .plug-go{display:flex;}
}


/* parts — group heading uses the canonical category-band rules (see .subhead) */
.pgroup{margin-bottom:22px}
.prow{border-top:1px solid var(--line);padding:12px 15px;}
.prow:first-child{border-top:0}
.prow .pt{font-weight:500;font-size:13.5px;}
.prow .pl{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap;}
.prow .pn{font-family:var(--fm);font-weight:600;font-size:14.5px;}
.copy{font-family:var(--fm);font-size:10px;color:var(--ink2);border:1px solid var(--line2);background:var(--paper2);border-radius:var(--rs);padding:6px 10px;cursor:pointer;min-height:32px;}
.copy:hover{border-color:var(--ink3)}
.copy.done{color:var(--genuine);border-color:var(--genuine);}
.alt{font-family:var(--fm);font-size:11px;color:var(--ink3);}

/* fault cards */
.fcard{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md);}
.fcard .fh{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--line);}
.fcard .fi{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--dangerT);color:var(--danger);}
.fcard .ft{font-weight:700;font-size:15.5px;flex:1;}
.fcard .fb{padding:13px 15px;display:flex;flex-direction:column;gap:11px;}
.fcard .fk{font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:var(--ink3);margin-bottom:3px;}
.fcard .fv{font-size:13.5px;line-height:1.45;}
.fcard .fv.dim{color:var(--ink2)}
.fixwrap{background:var(--genuineT);border-radius:var(--rs);padding:9px 11px;}
.fixwrap .fk{color:var(--genuine)}
.affected{font-family:var(--fm);font-size:10.5px;color:var(--ink3);}

/* ── CANONICAL CATEGORY BAND — every page shares one treatment ──
   [muted icon]  SMALL-CAPS LABEL  ──hairline──  [count]           */
.subhead,.tqgh,.pgroup .gt{font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);background:none;border:0;margin:22px 0 11px;padding:0 1px;display:flex;align-items:center;gap:11px}
.bandt,.tqgh-n{white-space:nowrap}
.subhead::after,.tqgh::after,.pgroup .gt::after{content:"";order:1;flex:1;height:1px;background:var(--line)}
.shcount,.tqgh-c{order:2;font-family:var(--fm);font-size:10px;font-weight:600;color:var(--ink3);letter-spacing:.05em;font-variant-numeric:tabular-nums}
/* first band on a page sits tight to the top, not a full section gap */
.animate > .shead-moved + .subhead,.animate > .subhead:first-child,.pgroup:first-child .gt,.tqpills + .tqgroup .tqgh{margin-top:8px}
/* inner divider label inside a grouped card */
.innerlabel{padding:11px 15px 6px;background:#F6F6F2;border-top:1px solid var(--line)}
.innerlabel span{font-family:var(--fm);font-size:9px;letter-spacing:.13em;color:var(--ink3)}
.card > .innerlabel:first-child{border-top:0}

/* generic prose card */
.prose{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);padding:15px;box-shadow:var(--shadow-md);margin-bottom:12px;}
.prose h4{font-weight:700;font-size:14.5px;margin:0 0 8px;}
.prose p{font-size:13px;color:var(--ink2);line-height:1.55;margin:0;}
.prose b{color:var(--ink)}

/* gaps panel */
.gaps{margin-top:18px;border:1px dashed var(--line2);border-radius:var(--r);background:var(--paper);padding:13px 15px;}
.gaps .gl{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--ink3);margin-bottom:8px;}
.gaps ul{margin:0;padding-left:18px;}
.gaps li{font-size:12px;color:var(--ink2);line-height:1.5;}

/* empty state */
.empty{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);padding:30px 22px;text-align:center;}
.empty .ei{width:40px;height:40px;border-radius:11px;background:#EFEFE9;border:1px solid var(--line);color:var(--ink3);display:grid;place-items:center;margin:0 auto 12px}
.empty .t{font-weight:600;font-size:15px;margin-bottom:5px;}
.empty .s{font-size:13px;color:var(--ink2);line-height:1.5;max-width:360px;margin:0 auto}
.empty .cta{margin-top:14px;background:var(--charcoal);color:#fff;border:0;border-radius:var(--rb);padding:10px 16px;font-weight:600;font-size:13px;cursor:pointer;min-height:var(--tap);box-shadow:var(--shadow-primary);transition:background var(--dur-fast)}
.empty .cta:hover{background:#23262b}
/* no-variant placeholder (sidebar card + landing prompt) */
.vbtn.novariant .code{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.55)}
.vbtn.novariant .rev{color:rgba(255,255,255,.9);font-size:15px}
.vbtn.novariant .fit{color:rgba(255,255,255,.5)}
/* select-engine placeholder — same premium dark card */
.vprompt{padding:40px 24px;background:linear-gradient(158deg,#3c414a 0%,#2b2e34 100%);border:1px solid #3f444d;box-shadow:var(--shadow-dark)}
.vprompt .ei{width:46px;height:46px;color:var(--accent);background:rgba(242,109,91,.16);border-color:rgba(242,109,91,.45)}
.vprompt .t{font-size:18px;color:#fff}
.vprompt .s{color:rgba(255,255,255,.64)}
.vprompt .cta{background:var(--accent);box-shadow:var(--shadow-primary)}
.vprompt .cta:hover{background:var(--accentD)}

/* skeleton */
.skel{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.skel .sl{height:16px;margin:14px 15px;border-radius:5px;background:linear-gradient(90deg,#EFEFE9 25%,#F6F6F2 37%,#EFEFE9 63%);background-size:400% 100%;animation:csShimmer 1.2s ease infinite}
@keyframes csShimmer{from{background-position:100% 0}to{background-position:0 0}}

/* footer */
.footer{margin-top:30px;border-top:1px solid var(--line2);padding-top:20px;display:flex;flex-direction:column;gap:16px;}
.footer .r{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;}
.footer .sk{font-family:var(--fm);font-size:8.5px;letter-spacing:.14em;color:var(--ink3);}
.footer .srcbtn{background:none;border:0;padding:3px 0 0;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--accent);}
.reportbtn{display:flex;align-items:center;gap:7px;background:var(--paper2);border:1px solid var(--line2);border-radius:var(--rb);padding:9px 13px;cursor:pointer;font-weight:600;font-size:12.5px;color:var(--ink2);min-height:var(--tap)}
.reportbtn:hover{border-color:var(--ink3)}
.disc{font-size:11px;color:var(--ink3);line-height:1.5;text-align:center;}

/* ── Trust chip ─────────────────────────────────────────── */
.tc{position:relative;display:inline-flex;vertical-align:middle;justify-self:end;}
.tc>button{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border-radius:7px;cursor:pointer;border:1px solid;
  transition:transform var(--dur-fast),box-shadow var(--dur-fast),filter var(--dur-fast);}
.tc>button::before{content:"";position:absolute;inset:-11px}   /* 44px+ hit area */
.tc>button:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.tc.open>button{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.tc.genuine>button{border-color:var(--genuine);background:var(--genuineT);color:var(--genuine);}
.tc.community>button{border-color:var(--community);background:var(--communityT);color:var(--community);}
.tc.conflict>button, .tc.verify>button{border-color:var(--verify);background:var(--verifyT);color:var(--verify);}
.tc.open.genuine>button{background:var(--genuine);color:#fff;}
.tc.open.community>button{background:var(--community);color:#fff;}
.tc.open.conflict>button, .tc.open.verify>button{background:var(--verify);color:#fff;}
.tcpop{position:absolute;top:calc(100% + 11px);right:-7px;z-index:var(--z-popover);width:262px;background:var(--paper2);border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--shadow-lg);text-align:left;font-family:var(--fs);overflow:visible;animation:csPop .18s var(--ease-spring) both}
/* caret pointing up to the chip */
.tcpop::before{content:"";position:absolute;top:-6px;right:13px;width:11px;height:11px;background:var(--paper2);border-left:1px solid var(--line2);border-top:1px solid var(--line2);transform:rotate(45deg);border-radius:3px 0 0 0;}
.tcpop>*{position:relative;}
/* header — trust pill + close */
.tcpop .tch{display:flex;align-items:center;gap:8px;padding:12px 12px 0;}
.tcpop .tcbadge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:999px;border:1px solid;font-family:var(--fm);font-size:9.5px;letter-spacing:.09em;font-weight:600;line-height:1;}
.tcpop .tcbadge .bi{display:inline-grid;place-items:center;width:14px;height:14px;}
.tcpop .tcbadge .bi svg{width:12px;height:12px;}
.tcpop.genuine .tcbadge{color:var(--genuine);background:var(--genuineT);border-color:var(--genuineBd,#B9DEC6);}
.tcpop.community .tcbadge{color:var(--community);background:var(--communityT);border-color:var(--communityBd,#C3CCD6);}
.tcpop.verify .tcbadge, .tcpop.conflict .tcbadge{color:var(--verify);background:var(--verifyT);border-color:var(--verifyBd,#E7CF9C);}
.tcpop .x{margin-left:auto;flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;font-size:17px;line-height:1;color:var(--ink3);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);}
.tcpop .x:hover{background:var(--paper);color:var(--ink);}
.tcpop .tcmean{display:block;padding:9px 14px 0;font-size:11.5px;color:var(--ink2);line-height:1.45;}
.tcpop .b{padding:13px 14px 14px;margin-top:13px;border-top:1px solid var(--line);}
.tcpop .sk{display:block;font-family:var(--fm);font-size:9px;letter-spacing:.15em;color:var(--ink3);margin-bottom:8px;}
.tcpop .sv{display:block;font-size:13px;color:var(--ink);line-height:1.4;}
.tcpop .sv.none{font-size:12.5px;color:var(--ink3);font-style:italic;}
/* source rendered as a document card link */
.tcpop a.sv{display:flex;align-items:center;gap:11px;text-decoration:none;
  background:var(--paper);border:1px solid var(--line2);border-radius:11px;padding:10px 11px;transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast);}
.tcpop a.sv:hover{border-color:var(--accentBd);box-shadow:var(--shadow-sm);}
.tcpop a.sv .srcicon{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accentT);border:1px solid var(--accentBd);color:var(--accentD);}
.tcpop a.sv .srcmain{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.tcpop a.sv .srccode{font-family:var(--fm);font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25;overflow-wrap:anywhere;}
.tcpop a.sv .srcsub{font-size:10.5px;color:var(--ink3);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tcpop a.sv .srcgo{flex:none;display:inline-flex;color:var(--ink3);opacity:.9;transition:color var(--dur-fast),transform var(--dur-fast);}
.tcpop a.sv:hover .srcgo{color:var(--accent);transform:translate(1px,-1px);}
.tcpop .cite{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);}
.tcpop .cite .ck{font-family:var(--fm);font-size:9px;letter-spacing:.15em;color:var(--ink3);}
.tcpop .cite .cv{font-size:12px;color:var(--ink2);line-height:1.5;}
/* trust source as bottom sheet on phones */
.tcpop.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border:0;border-radius:var(--r-sheet);box-shadow:0 -12px 34px rgba(0,0,0,.22);animation:csSheet var(--dur-sheet) var(--ease-spring) both}
.tcpop.sheet::before{display:none;}
.tcpop.sheet .tch{padding:16px 16px 0;}
.tcpop.sheet .tcmean{padding:10px 16px 0;font-size:12.5px;}
.tcpop.sheet .b{padding:15px 16px 22px;}
.tcsheetscrim{position:fixed;inset:0;background:rgba(20,21,23,.4);z-index:var(--z-sheet-scrim);animation:csFade .18s ease both}

/* ── Selector modal / sheet ─────────────────────────────── */
.modalwrap{position:fixed;inset:0;z-index:var(--z-sheet);display:none;align-items:center;justify-content:center;}
.modalwrap.open{display:flex;}
.modalwrap .scrim{position:absolute;inset:0;background:rgba(20,21,23,.5);z-index:var(--z-sheet-scrim);animation:csFade .2s ease both;}
.modal{position:relative;z-index:calc(var(--z-sheet) + 1);width:min(500px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);border-radius:var(--r);
  box-shadow:var(--shadow-lg);animation:csModal .26s var(--ease-spring) both;}
.modal .mh{background:var(--paper);display:flex;align-items:center;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line);flex:none}
.modal .mh .t{font-weight:700;font-size:17px;}
.modal .mh .s{font-family:var(--fm);font-size:10.5px;color:var(--ink3);margin-top:2px;}
.modal .mh .x{width:var(--tap);height:var(--tap);border-radius:9px;border:1px solid var(--line2);background:var(--paper2);cursor:pointer;font-size:17px;line-height:1;color:var(--ink2);flex:none}
.tabs{display:flex;gap:4px;margin:14px 20px 4px;padding:4px;background:var(--bg);border:1px solid var(--line2);border-radius:12px;flex:none}
.tabs button{flex:1;padding:9px;border-radius:8px;border:0;background:transparent;font-weight:600;font-size:13px;color:var(--ink2);cursor:pointer;min-height:40px;transition:background var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.tabs button:hover{color:var(--ink)}
.tabs button.active{background:var(--charcoal);color:#fff;box-shadow:var(--shadow-primary)}
/* guided filter bar */
.filterbar{padding:4px 20px 14px;display:flex;flex-direction:column;gap:9px;flex:none}
.filtersearch{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--paper2);border-radius:var(--rb);padding:10px 12px}
.filtersearch input{border:0;outline:0;background:transparent;font-family:var(--fs);font-size:13px;width:100%}
.selects{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.selwrap{position:relative}
.selwrap label{position:absolute;top:7px;left:12px;font-family:var(--fm);font-size:8px;letter-spacing:.1em;color:var(--ink3);pointer-events:none}
.selwrap select{width:100%;appearance:none;-webkit-appearance:none;border:1px solid var(--line2);background:var(--paper2);border-radius:var(--rb);
  padding:21px 30px 9px 12px;font-family:var(--fs);font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;min-height:52px;transition:border-color var(--dur-fast)}
.selwrap select:hover{border-color:var(--ink3)}
.selwrap::after{content:"";position:absolute;right:13px;top:58%;width:7px;height:7px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:translateY(-50%) rotate(45deg);pointer-events:none}
.clearfilters{align-self:flex-start;background:none;border:0;color:var(--accentD);font-weight:600;font-size:12px;cursor:pointer;padding:2px 0}
.clearfilters:hover{color:var(--accent)}
.mlist{padding:4px 20px 20px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.mlist .mk{position:sticky;top:0;background:var(--paper);z-index:1;font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;color:var(--ink3);padding:12px 2px 6px;}
.vopt{text-align:left;background:var(--paper2);border:1px solid var(--line2);border-radius:var(--rb);padding:13px 15px;cursor:pointer;transition:border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);}
.vopt:hover{border-color:var(--ink3);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.vopt.sel{border-color:var(--accent);background:var(--accentT);box-shadow:0 0 0 1px var(--accent);}
.vopt .r{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.vopt .m{font-weight:600;font-size:14.5px;}
.vopt .m .c{color:var(--ink3);font-weight:400;}
.vopt .y{font-family:var(--fm);font-size:10.5px;color:var(--ink3);margin-top:2px;}
.vopt .tick{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:none;background:transparent;border:1px solid var(--line2);}
.vopt.sel .tick{background:var(--accent);border-color:var(--accent);}
.lowconf{font-family:var(--fm);font-size:9px;color:var(--verify);background:var(--verifyT);border:1px solid var(--verify);border-radius:4px;padding:1px 5px;margin-left:6px;}
.noresults{padding:24px 8px;text-align:center;font-size:13px;color:var(--ink3)}
.vhint{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:34px 24px;color:var(--ink3);font-size:13px;line-height:1.5;}
.vhint svg{color:var(--accent);opacity:.8}
.vhint b{color:var(--ink2);font-weight:600}
.clearselrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:2px 0 12px;}
.csnow{font-family:var(--fm);font-size:10.5px;letter-spacing:.02em;color:var(--ink3);min-width:0;overflow:hidden;text-overflow:ellipsis}
.clearsel{background:var(--paper2);border:1px solid var(--line2);border-radius:9px;padding:8px 13px;font-weight:600;font-size:12px;color:var(--ink2);cursor:pointer;flex:none;transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.clearsel:hover{border-color:var(--danger);color:var(--danger);background:var(--dangerT)}

/* ── Contribute / report FAB + panel ───────────────────────── */
.fab{position:fixed;right:22px;bottom:22px;z-index:var(--z-fab);display:grid;place-items:center;width:52px;height:52px;background:var(--charcoal);color:#fff;
  border:1px solid rgba(242,109,91,.24);border-radius:15px;cursor:pointer;box-shadow:0 8px 20px rgba(20,21,23,.24),0 2px 6px rgba(20,21,23,.18);
  transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast),border-color var(--dur-fast)}
.fab:hover{background:#23262b;transform:translateY(-2px);border-color:rgba(242,109,91,.55);box-shadow:0 13px 28px rgba(20,21,23,.3),0 4px 10px rgba(20,21,23,.2)}
.fab:active{transform:translateY(0) scale(.95)}
.fab svg{color:var(--accent);transition:transform var(--dur-fast)}
.fab:hover svg{transform:rotate(-7deg) scale(1.05)}
.fabscrim{position:fixed;inset:0;z-index:var(--z-sheet-scrim);background:rgba(20,21,23,.42);opacity:0;pointer-events:none;transition:opacity .2s ease}
.fabscrim.on{opacity:1;pointer-events:auto}
.fabpop{position:fixed;right:22px;bottom:88px;z-index:var(--z-sheet);width:300px;max-width:calc(100vw - 32px);background:var(--paper);border:1px solid var(--line2);border-radius:16px;
  box-shadow:var(--shadow-lg);overflow:hidden;opacity:0;transform:translateY(10px) scale(.98);transform-origin:bottom right;pointer-events:none;transition:opacity .18s ease,transform .24s var(--ease-spring)}
.fabpop.open{opacity:1;transform:none;pointer-events:auto}
.fabpop-hd{display:flex;align-items:center;gap:11px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.fabpop-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--accentT);border:1px solid var(--accentBd);color:var(--accentD)}
.fabpop-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fabpop-t strong{font-size:14.5px;font-weight:700;line-height:1.2}
.fabpop-t span{font-family:var(--fm);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.fabpop-x{width:28px;height:28px;border-radius:8px;border:1px solid var(--line2);background:var(--paper2);color:var(--ink2);font-size:15px;line-height:1;cursor:pointer;flex:none;display:grid;place-items:center}
.fabpop-x:hover{border-color:var(--ink3);color:var(--ink)}
.fabpop-b{padding:13px 14px 15px}
.fabpop-b p{font-size:12.5px;color:var(--ink2);line-height:1.5;margin:0 0 12px}
.fabpop-btn{display:flex;align-items:center;gap:11px;text-decoration:none;border-radius:11px;padding:12px 14px;font-weight:600;transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}
.fabpop-btn .bi{flex:none;display:inline-flex}
.fabpop-btn .bt{flex:1;font-size:13.5px}
.fabpop-btn .bg{flex:none;display:inline-flex;opacity:.75}
.fabpop-btn.mail{background:var(--charcoal);color:#fff}
.fabpop-btn.mail:hover{background:#23262b;transform:translateY(-1px)}
.fabpop-btn.mail .bi{color:var(--accent)}
.fabpop-btn.donate{position:relative;overflow:hidden;isolation:isolate;color:#4A3510;
  background:linear-gradient(140deg,#F9E8AC 0%,#EBCD6E 30%,#D7AA40 60%,#ECC96B 100%);border:1px solid rgba(178,132,30,.55);
  box-shadow:0 4px 14px rgba(200,152,52,.3),inset 0 1px 0 rgba(255,255,255,.55)}
.fabpop-btn.donate:hover{border-color:rgba(178,132,30,.85);transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 7px 20px rgba(200,152,52,.44),inset 0 1px 0 rgba(255,255,255,.6)}
.fabpop-btn.donate .bi{color:#4A3510}
.fabpop-btn.donate .bi,.fabpop-btn.donate .bt,.fabpop-btn.donate .bg{position:relative;z-index:2}
/* premium gold — metallic sheen sweep + twinkling sparkles */
.donate::before,.fabpop-btn.donate::before{content:"";position:absolute;top:-10%;left:-65%;width:46%;height:120%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.62) 50%,transparent 100%);transform:skewX(-18deg);animation:goldSheen 5s ease-in-out infinite}
@keyframes goldSheen{0%,20%{left:-65%}42%,100%{left:135%}}
.spk{position:absolute;z-index:1;width:11px;height:11px;pointer-events:none;color:#fff;opacity:0;transform:scale(.3) rotate(0);transform-origin:center;
  filter:drop-shadow(0 0 3px rgba(255,236,170,.95)) drop-shadow(0 0 1px rgba(150,105,20,.7));animation:spkTwinkle 3.4s ease-in-out infinite}
.spk svg{width:100%;height:100%;display:block;fill:currentColor}
@keyframes spkTwinkle{0%,66%,100%{opacity:0;transform:scale(.3) rotate(0deg)}80%{opacity:1;transform:scale(1) rotate(42deg)}90%{opacity:.5;transform:scale(.7) rotate(64deg)}}
@media(prefers-reduced-motion:reduce){.donate::before,.fabpop-btn.donate::before{animation:none;opacity:0}.spk{display:none}}
.fabpop-free{font-size:11.5px;color:var(--ink2);line-height:1.5;text-align:center;margin:14px 0 11px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:560px){
  .fabpop{right:0;left:0;bottom:0;width:auto;max-width:none;border-radius:var(--r-sheet);border-width:1px 0 0;transform-origin:bottom;transform:translateY(101%)}
  .fabpop.open{transform:none}
  .fabpop::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:3px;background:var(--line2)}
  .fabpop-hd{padding-top:20px}
  .fabpop-b{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* ── Responsive ─────────────────────────────────────────── */
.mobar{display:none;place-items:center;width:var(--tap);height:var(--tap);border-radius:9px;border:1px solid var(--line2);background:var(--paper2);cursor:pointer;flex:none;color:var(--ink)}
.scrim-nav{display:none}

/* TABLET RAIL: 881–1120 → 64px icon rail */
@media (min-width:881px) and (max-width:1120px){
  .shell{grid-template-columns:64px minmax(0,1fr)}
  .brand{justify-content:center;padding:16px 8px}
  .brand .btext{display:none}
  .brand .bwrap{flex:none;justify-content:center}
  .brand .railmark{display:inline}
  .vbtn{margin:10px 8px;padding:10px 6px;align-items:center}
  .vbtn .lbl,.vbtn .rev,.vbtn .fit,.vbtn .vactions{display:none}
  .vbtn .row1{justify-content:center}
  nav.side{padding:6px 6px 14px}
  nav.side .grp{display:none}
  nav.side a{justify-content:center;padding:11px 0}
  nav.side a .lbl,nav.side a .cnt{display:none}
  .railfoot .donate{padding:11px 0}
  .railfoot .donate span,.railfoot .donate .dl{display:none}
  .railfoot .donate .spk{display:none}
  .poweredby{display:none}
}

/* DRAWER: ≤880 → off-canvas */
@media (max-width:880px){
  .shell{grid-template-columns:1fr}
  aside{position:fixed;inset:0 auto 0 0;width:min(340px,90vw);z-index:var(--z-nav-drawer);height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-100%);transition:transform var(--dur-drawer) var(--ease-spring);box-shadow:0 0 70px rgba(0,0,0,.30);border-right:1px solid var(--line2)}
  aside.open{transform:translateX(0)}
  aside::after{display:none}
  .brand{height:auto;padding:18px 16px}
  .brand .drawerclose{display:inline-flex}
  .scrim-nav{display:block;position:fixed;inset:0;background:rgba(20,21,23,.46);z-index:var(--z-nav-scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-drawer)}
  .scrim-nav.open{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden;touch-action:none}
  .mobar{display:grid}
  .content{padding:18px 16px 108px}
  .tiles{grid-template-columns:1fr}
  /* mobile: values right-aligned (max-content) so they don't over-wrap in a narrow label column */
  .row .main{grid-template-columns:1fr minmax(0,max-content) 21px;gap:11px}
  .row .value{text-align:right}
  /* DDE architecture: stack the wide mono pin-values under the label so they never squeeze it into a 3-line wrap */
  .archcard .row .main{grid-template-columns:1fr auto;grid-template-areas:"label chip" "value value";gap:6px 10px;align-items:center}
  .archcard .row .main .label{grid-area:label}
  .archcard .row .main .value{grid-area:value;text-align:left}
  .archcard .row .main .tc{grid-area:chip}
  /* torque: mobile layout */
  .tqhdr{flex-direction:column;gap:12px}
  .tqhdr-r{flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between}
  .tqttl{font-size:22px}
  .tqpills{flex-wrap:nowrap;overflow-x:auto;margin-left:-14px;margin-right:-14px;padding:2px 14px 6px;-webkit-overflow-scrolling:touch}
  .tqpills::-webkit-scrollbar{height:0}
  .tqpill{flex:none}
  .tqsub{font-size:10.5px}
  /* mobile: stack the summary so the thread sits under the name (cards are already standalone in the base) */
  .tqr-sum{grid-template-columns:16px minmax(0,1fr) max-content;grid-template-areas:"chev name tq" "chev thread tq";gap:3px 9px;padding:14px;align-items:start}
  .tqr-chev{align-self:start;margin-top:3px}
  .tqr-tq{align-self:start}
  .tqr-th{margin-top:5px;text-align:left;align-self:end}
  .tqv-main{font-size:18px}
  .tqgroup{scroll-margin-top:calc(var(--headH) + 6px)}
  /* procedure: stack vertically with a down connector (no awkward horizontal wrap) */
  .tqd-steps{flex-direction:column;align-items:flex-start;gap:0}
  .tqd-chip{align-self:flex-start;max-width:100%}
  .tqd-arr{transform:rotate(90deg);margin:5px 0 5px 15px;font-size:15px;opacity:.7}
  .topbar{position:sticky;top:0;padding:10px 14px;gap:9px}
  /* engine context bar — same premium dark card as the sidebar variant card & home hero */
  .enginebar.show{display:flex;align-items:center;gap:10px;padding:10px 14px;
    background:linear-gradient(158deg,#3c414a 0%,#2b2e34 100%);border-bottom:1px solid #232529;
    box-shadow:var(--shadow-dark)}
  /* mobile: home icon › SECTION + search icon */
  .crumbs{flex:1;min-width:0}
  .crumb.home .home-ico{display:none}
  .crumb.home .home-brand{display:inline-flex}
  .topspacer{display:none}
  .search{display:none}
  .searchIcoBtn{display:grid}
  /* search takes over the bar inline (with an X to close); scrim greys the page */
  .topbar.searching .mobar,
  .topbar.searching .crumbs,
  .topbar.searching .searchIcoBtn{display:none}
  .topbar.searching .search{display:flex;flex:1;width:auto}
  .topbar.searching .searchClose{display:grid}
  .modalwrap{align-items:flex-end}
  .modal{width:100%;max-width:none;max-height:92vh;border-radius:var(--r-sheet);animation:csSheet var(--dur-sheet) var(--ease-spring) both}
  .modal::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:999px;background:var(--line2);z-index:3}
  .modal .mh{padding-top:22px}
}

/* PHONE: ≤560 */
@media (max-width:560px){
  .ovstats{grid-template-columns:repeat(2,1fr)}
  .fab{right:16px;bottom:16px;width:50px;height:50px}
  .selects{grid-template-columns:1fr}
  .content{padding:12px 14px 108px}
  /* legibility floor: smallest mono eyebrow labels never below 10px on phones */
  .brand .tag,.vbtn .lbl,.footer .sk,nav.side .grp,.ovstats .cl,.pinrow .conf,.affected{font-size:10px}
}
@media (max-width:380px){
  .ovstats{grid-template-columns:1fr}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}