/* DriverPeak product guide (Brief 11) — layout + components from
   docs/design/guide-template.dc.html, mapped onto the site's tokens.
   Every colour is a site variable (css/style.css :root); the template's
   type/space/shape scale has no site equivalent and lives here, scoped
   to .guide. Dark theme: the site's ink tokens, via [data-theme="dark"] or
   prefers-color-scheme (guide pages only — the marketing site stays light). */

.guide{
  /* ── template token → site variable ── */
  --surface-sheet:var(--bg-card);
  --surface-panel:var(--bg-subtle);
  --surface-zebra:var(--bg-subtle);
  --surface-lift:var(--bg-row);
  --surface-desk:var(--bg);
  --border-rule:var(--border);
  --border-strong:var(--text-dim);
  --text-primary:var(--text);
  --text-secondary:var(--text-body);
  --text-muted:var(--text-dim);
  --text-inverse:var(--on-ink);
  --accent-pressed:var(--accent-hover);
  --accent-wash:#EEF3FE;              /* no site equivalent — added here */
  --focus-ring:var(--accent);
  --data-faster-text:var(--green-text);
  --data-faster-line:#12A150;         /* no site equivalent (site has flag + dark tiers only) */
  --data-slower-text:var(--yellow-text);
  --data-slower-line:#C97F00;         /* no site equivalent */
  --data-unsure:var(--text-faint);
  --hatch-unsure:repeating-linear-gradient(135deg,var(--data-unsure) 0 3px,transparent 3px 6px);
  --font-display:var(--display);
  --font-body:var(--sans);
  --font-data:var(--mono);
  /* ── template scales with no site equivalent ── */
  --size-h2:30px; --lh-h2:1.10; --tracking-h2:-0.015em;
  --size-h3:22px; --lh-h3:1.20; --tracking-h3:-0.01em;
  --size-h4:16px; --lh-h4:1.30;
  --size-lede:17px; --lh-lede:1.55;
  --size-body:15px; --lh-body:1.55;
  --size-ui:13px; --lh-ui:1.50;
  --size-label:11px; --tracking-label:0.07em;
  --size-data-m:20px; --size-data-s:13px; --size-data-xs:12px; --lh-data-xs:1.35;
  --tracking-mono-label:0.12em;
  --wdth-display:125%;
  --weight-display:700; --weight-display-sub:600;
  --weight-body-medium:500; --weight-body-strong:600; --weight-data-medium:500;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:80px;
  --control-h:32px; --control-h-lg:40px; --hit-min:44px;
  --radius-1:2px; --radius-2:4px;
  --border-w:1px; --edge-w:3px;
  --page-gutter:32px;
  --shadow-pop:0 4px 16px rgba(20,23,28,0.14);

  background:var(--surface-sheet);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  font-variant-numeric:tabular-nums;
}
/* Dark value map = the site's ink tokens; values the site lacks are the template's. */
.guide[data-theme="dark"]{
  --surface-sheet:var(--ink);
  --surface-panel:var(--ink-panel);
  --surface-zebra:#191D23;
  --surface-lift:#20242B;
  --surface-desk:#0E1114;
  --border-rule:var(--ink-hair);
  --border-strong:#3A4149;
  --text-primary:var(--bg);            /* mist #e9ebee */
  --text-secondary:var(--on-ink-dim);
  --text-muted:var(--on-ink-muted);
  --text-inverse:var(--ink);
  --accent:var(--blue);
  --accent-pressed:var(--blue-hover);
  --accent-wash:#1A2436;
  --focus-ring:var(--blue);
  --data-faster-text:var(--green);
  --data-faster-line:var(--green);
  --data-slower-text:var(--yellow);
  --data-slower-line:var(--yellow);
  --data-unsure:var(--on-ink-muted);
  --shadow-pop:0 4px 16px rgba(0,0,0,0.5);
}
@media (prefers-color-scheme:dark){
  .guide:not([data-theme="light"]){
    --surface-sheet:var(--ink); --surface-panel:var(--ink-panel); --surface-zebra:#191D23; --surface-lift:#20242B; --surface-desk:#0E1114;
    --border-rule:var(--ink-hair); --border-strong:#3A4149;
    --text-primary:var(--bg); --text-secondary:var(--on-ink-dim); --text-muted:var(--on-ink-muted); --text-inverse:var(--ink);
    --accent:var(--blue); --accent-pressed:var(--blue-hover); --accent-wash:#1A2436; --focus-ring:var(--blue);
    --data-faster-text:var(--green); --data-faster-line:var(--green); --data-slower-text:var(--yellow); --data-slower-line:var(--yellow); --data-unsure:var(--on-ink-muted);
    --shadow-pop:0 4px 16px rgba(0,0,0,0.5);
  }
}

/* ── shell ── */
.guide a{color:var(--accent)}
.guide a:hover{color:var(--accent-pressed)}
.guide :focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.guide .guide-shell{display:grid;grid-template-columns:260px minmax(0,1fr) 220px;max-width:var(--wrap);margin:0 auto}
.guide .guide-side{border-right:var(--border-w) solid var(--border-rule);padding:var(--space-5) 0 var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.guide .guide-search{margin:0 var(--space-4);display:flex;align-items:center;gap:8px;height:var(--control-h-lg);padding:0 var(--space-3);border:1px solid var(--border-rule);border-radius:var(--radius-1);color:var(--text-muted);font-size:var(--size-ui);background:var(--surface-sheet)}
.guide .guide-search input{flex:1;border:0;background:none;color:var(--text-primary);font:inherit;min-width:0}
.guide .guide-search input::placeholder{color:var(--text-muted)}
.guide .guide-search kbd{font-family:var(--font-data);font-size:var(--size-data-xs);border:1px solid var(--border-rule);border-radius:var(--radius-1);padding:0 5px;line-height:18px}
.guide .guide-nav{display:flex;flex-direction:column;gap:2px;font-size:var(--size-ui)}
.guide .guide-nav a,.guide .guide-nav span{display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:0 var(--space-4);text-decoration:none}
.guide .guide-nav .grp{color:var(--text-primary);font-weight:var(--weight-body-strong)}
.guide .guide-nav .grp.soon{color:var(--text-muted);font-weight:var(--weight-body-medium)}
.guide .guide-nav .grp.soon small{font-family:var(--font-data);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.guide .guide-nav .sub{padding-left:var(--space-6)}
.guide .guide-nav .page{color:var(--text-secondary);border-left:var(--edge-w) solid transparent;padding-left:calc(var(--space-6) - var(--edge-w))}
.guide .guide-nav .page:hover{color:var(--text-primary);background:var(--surface-panel)}
.guide .guide-nav .page[aria-current="page"]{border-left-color:var(--accent);background:var(--accent-wash);color:var(--text-primary);font-weight:var(--weight-body-medium)}
.guide .guide-main{padding:var(--space-7) 64px var(--space-8);min-width:0}
.guide .guide-article{max-width:720px;display:flex;flex-direction:column;gap:var(--space-6)}
.guide .guide-rail{padding:var(--space-7) var(--space-5) 0 0}
.guide .guide-rail > div{position:sticky;top:80px;display:flex;flex-direction:column;gap:var(--space-3)}
.guide .guide-label{font-size:var(--size-label);font-weight:var(--weight-body-strong);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.guide .guide-toc{display:flex;flex-direction:column;border-left:1px solid var(--border-rule);font-size:var(--size-ui)}
.guide .guide-toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid transparent;color:var(--text-secondary);text-decoration:none;margin-left:-1px}
.guide .guide-toc a:hover{color:var(--text-primary)}
.guide .guide-toc a.active{border-left-color:var(--accent);color:var(--text-primary);font-weight:var(--weight-body-medium)}

/* ── page header ── */
.guide .guide-head{display:flex;flex-direction:column;gap:var(--space-3)}
.guide .guide-eyebrow{font-family:var(--font-data);font-size:var(--size-label);font-weight:var(--weight-data-medium);letter-spacing:var(--tracking-mono-label);text-transform:uppercase;color:var(--text-muted)}
.guide h1{margin:0;font-family:var(--font-display);font-stretch:var(--wdth-display);font-weight:var(--weight-display);font-size:var(--size-h2);line-height:var(--lh-h2);letter-spacing:var(--tracking-h2);color:var(--text-primary)}
.guide .guide-lede{margin:0;font-size:var(--size-lede);line-height:var(--lh-lede);color:var(--text-secondary)}
.guide .guide-verified{font-family:var(--font-data);font-size:var(--size-data-xs);line-height:var(--lh-data-xs);color:var(--text-muted)}
.guide h2{margin:0;font-family:var(--font-display);font-weight:var(--weight-display-sub);font-size:var(--size-h3);line-height:var(--lh-h3);letter-spacing:var(--tracking-h3);color:var(--text-primary)}
.guide h3{margin:0;font-family:var(--font-display);font-weight:var(--weight-display-sub);font-size:var(--size-h4);line-height:var(--lh-h4);color:var(--text-primary)}
.guide p{margin:0}
.guide section{display:flex;flex-direction:column;gap:var(--space-4)}

/* ── steps ── */
.guide .guide-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-5)}
.guide .guide-steps > li{display:grid;grid-template-columns:28px 1fr;gap:var(--space-3)}
.guide .guide-steps .num{width:28px;height:28px;border:1px solid var(--border-strong);border-radius:var(--radius-1);display:flex;align-items:center;justify-content:center;font-family:var(--font-data);font-size:var(--size-data-s);font-weight:var(--weight-data-medium);color:var(--text-primary)}
.guide .guide-steps .body{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.guide .guide-steps h3{margin-top:4px}
.guide .guide-see{border-left:1px solid var(--border-strong);padding-left:var(--space-3);display:flex;flex-direction:column;gap:2px;color:var(--text-secondary);font-size:var(--size-ui);line-height:var(--lh-ui)}
.guide .guide-see .guide-label{color:var(--text-muted)}

/* ── screenshot frame ── */
.guide figure.shot{margin:0;border:1px solid var(--border-rule);border-radius:var(--radius-2);overflow:hidden;background:var(--surface-panel)}
.guide figure.shot .img{position:relative;display:block;background:var(--ink)}
.guide figure.shot img{display:block;width:100%;height:auto}
.guide figure.shot .hot{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--blue);color:var(--ink);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-data);font-size:var(--size-data-xs);font-weight:var(--weight-data-medium);transform:translate(-50%,-50%)}
.guide figure.shot figcaption{padding:var(--space-2) var(--space-3);font-size:var(--size-ui);line-height:var(--lh-ui);color:var(--text-muted);border-top:1px solid var(--border-rule)}
.guide figure.shot.phone{width:min(100%,260px);border:6px solid var(--ink-panel);border-radius:32px;background:var(--ink)}
.guide figure.shot.phone .img{border-radius:24px;overflow:hidden}

/* ── callouts ── */
.guide .callout{display:flex;gap:var(--space-4)}
.guide .callout > span{flex:none;width:var(--edge-w);background:var(--border-strong)}
.guide .callout.tip > span{background:var(--accent)}
.guide .callout.honesty > span{background:var(--hatch-unsure)}
.guide .callout.warning > span{background:var(--data-slower-line)}
.guide .callout > div{display:flex;flex-direction:column;gap:6px;padding:4px 0;min-width:0}
.guide .callout .kind{display:flex;align-items:center;gap:8px;font-family:var(--font-data);font-size:var(--size-label);font-weight:var(--weight-data-medium);letter-spacing:var(--tracking-mono-label);text-transform:uppercase;color:var(--text-secondary)}
.guide .callout.tip .kind{color:var(--accent)}
.guide .callout.warning .kind{color:var(--data-slower-text)}

/* ── inline references ── */
.guide .chip{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--border-strong);border-radius:var(--radius-1);font-size:var(--size-ui);font-weight:var(--weight-body-medium);background:var(--surface-panel);color:var(--text-primary);vertical-align:middle}
.guide code,.guide .mono{font-family:var(--font-data);font-size:var(--size-data-s);background:var(--surface-panel);padding:0 4px;border-radius:var(--radius-1)}
.guide .num-faster{font-family:var(--font-data);color:var(--data-faster-text)}
.guide .num-slower{font-family:var(--font-data);color:var(--data-slower-text)}

/* ── key/value + table ── */
.guide dl.kv{margin:0;display:grid;grid-template-columns:180px 1fr;border-top:1px solid var(--border-rule)}
.guide dl.kv dt{padding:var(--space-2) 0;border-bottom:1px solid var(--border-rule);font-size:var(--size-label);font-weight:var(--weight-body-strong);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);line-height:23px}
.guide dl.kv dd{margin:0;padding:var(--space-2) 0;border-bottom:1px solid var(--border-rule)}
.guide .tablewrap{border:1px solid var(--border-rule);overflow-x:auto}
.guide table{width:100%;border-collapse:collapse;font-size:var(--size-ui);line-height:var(--lh-ui)}
.guide thead tr{background:var(--surface-panel)}
.guide th{text-align:left;padding:var(--space-2) var(--space-3);font-size:var(--size-label);font-weight:var(--weight-body-strong);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border-rule)}
.guide td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-rule);color:var(--text-secondary);vertical-align:top}
.guide td:first-child{font-weight:var(--weight-body-medium);color:var(--text-primary);white-space:nowrap}
.guide tbody tr:nth-child(even){background:var(--surface-zebra)}
.guide tr:last-child td{border-bottom:0}

/* ── related + prev/next ── */
.guide .related{border-top:1px solid var(--border-rule);padding-top:var(--space-3);gap:var(--space-3)}
.guide .related .row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.guide .related a{display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 var(--space-3);border:1px solid var(--border-rule);border-radius:var(--radius-1);font-size:var(--size-ui);color:var(--text-primary);text-decoration:none}
.guide .related a:hover{border-color:var(--border-strong)}
.guide .pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);border-top:1px solid var(--border-rule);padding-top:var(--space-4)}
.guide .pn a,.guide .pn span.off{display:flex;flex-direction:column;gap:4px;padding:var(--space-3) var(--space-4);border:1px solid var(--border-rule);border-radius:var(--radius-1);color:var(--text-primary);text-decoration:none}
.guide .pn a:hover{border-color:var(--border-strong)}
.guide .pn .next{align-items:flex-end;text-align:right}
.guide .pn span.off{color:var(--text-muted)}
.guide .pn .guide-label{font-family:var(--font-data);letter-spacing:var(--tracking-mono-label);font-weight:var(--weight-data-medium)}
.guide .pn .t{font-weight:var(--weight-body-medium)}

/* ── landing cards ── */
.guide .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.guide .cards a,.guide .cards span{display:flex;flex-direction:column;gap:4px;padding:var(--space-4);border:1px solid var(--border-rule);border-radius:var(--radius-1);color:var(--text-primary);text-decoration:none}
.guide .cards a:hover{border-color:var(--border-strong)}
.guide .cards span{color:var(--text-muted)}
.guide .cards .t{font-weight:var(--weight-body-strong)}
.guide .cards small{color:var(--text-muted);font-size:var(--size-ui)}

/* ── mobile bar + drawer ── */
.guide .guide-bar{display:none}
@media (max-width:1023px){
  .guide .guide-shell{grid-template-columns:1fr}
  .guide .guide-side,.guide .guide-rail{display:none}
  .guide .guide-main{padding:var(--space-6) var(--space-4) var(--space-7)}
  .guide .guide-bar{display:grid;grid-template-columns:1fr auto;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--border-w) solid var(--border-rule);background:var(--surface-panel)}
  .guide .guide-bar details{position:relative}
  .guide .guide-bar summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--hit-min);padding:0 var(--space-3);background:var(--surface-sheet);border:1px solid var(--border-rule);border-radius:var(--radius-1);font-size:var(--size-ui);color:var(--text-primary)}
  .guide .guide-bar summary::-webkit-details-marker{display:none}
  .guide .guide-bar summary .guide-label{display:block}
  .guide .guide-bar summary b{display:block;font-weight:var(--weight-body-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .guide .guide-bar .pop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;display:flex;flex-direction:column;border:1px solid var(--border-rule);border-radius:var(--radius-2);box-shadow:var(--shadow-pop);background:var(--surface-sheet);font-size:var(--size-ui)}
  .guide .guide-bar .pop a,.guide .guide-bar .pop span{display:flex;align-items:center;min-height:var(--hit-min);padding:0 var(--space-4);color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-rule)}
  .guide .guide-bar .pop span{color:var(--text-muted)}
  .guide .guide-bar .pop a[aria-current="page"]{box-shadow:inset var(--edge-w) 0 0 var(--accent);font-weight:var(--weight-body-medium)}
  .guide .guide-bar .jump summary{padding:0 var(--space-3)}
  .guide .guide-steps > li{grid-template-columns:24px 1fr}
  .guide .guide-steps .num{width:24px;height:24px}
  .guide dl.kv{grid-template-columns:1fr}
  .guide dl.kv dt{border-bottom:0;padding-bottom:0}
  .guide .cards{grid-template-columns:1fr}
  .guide .pn{grid-template-columns:1fr}
  .guide .tablewrap{margin:0 calc(-1 * var(--space-4));border-left:0;border-right:0}
  .guide figure.shot{margin:0 calc(-1 * var(--space-4));border-left:0;border-right:0;border-radius:0}
  .guide h1{font-size:26px}
}
.guide .guide-nav span.page{color:var(--text-muted)}
.guide .guide-nav span.page::after{content:"soon";font-family:var(--font-data);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase}