/* ============================================================================
   Tablize — guide pages. Long-form article layer over site.css.

   Everything tokens: colours, radii, type all come from site.css. This file
   only knows how to set an argument in columns — prose measure, a sticky
   outline, definition callouts, comparison tables, FAQ — and deliberately
   introduces no colour of its own. Indigo stays interactive, orange stays
   interception, exactly as the constitution splits them.
   ========================================================================== */

/* ---- head ---- */
.guide-head{padding:calc(var(--section) + 18px) 0 var(--section)}
.guide-head .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.guide-head .eyebrow::before{content:"";width:26px;height:2px;background:var(--signal-fill)}
.guide-h1{font-size:clamp(34px,4.6vw,56px);max-width:17ch}
.guide-head .lede{max-width:58ch;margin-top:20px;font-size:clamp(16px,1.6vw,19px);
  color:var(--muted);line-height:1.65}
.guide-meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--subtle)}
.guide-meta b{color:var(--ink);font-weight:600}

/* ---- two-column body: sticky outline + prose ---- */
.guide-body .shell{display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:start}
.guide-toc{position:sticky;top:96px;font-size:13px}
.guide-toc p{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--subtle);margin-bottom:12px}
.guide-toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--line);
  color:var(--muted);text-decoration:none;line-height:1.4}
.guide-toc a:hover{color:var(--ink);border-left-color:var(--line-strong)}
.guide-toc a[aria-current="true"]{color:var(--accent-text);border-left-color:var(--accent)}
@media (max-width:900px){
  .guide-body .shell{display:block}
  .guide-toc{position:static;margin-bottom:34px;border:1px solid var(--line);
    border-radius:var(--r-md);padding:16px 18px;background:var(--surface)}
}

/* ---- prose ---- */
.prose{max-width:72ch;font-size:16.5px;line-height:1.7}
.prose h2{font-size:clamp(24px,2.6vw,32px);margin:calc(var(--section) * .9) 0 18px;
  scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h2 .no{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);margin-bottom:10px;font-weight:500}
.prose h3{font-size:19px;margin:30px 0 12px;letter-spacing:-.015em}
.prose p{margin:0 0 16px;color:var(--ink)}
.prose p.muted{color:var(--muted)}
.prose a{color:var(--accent-text);text-decoration:underline;
  text-decoration-color:var(--accent-line);text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{margin:0 0 16px;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:22px;margin-bottom:9px}
.prose ul li::before{content:"■";position:absolute;left:2px;top:1px;
  font-size:9px;color:var(--subtle)}
.prose ol{counter-reset:g}
.prose ol li{counter-increment:g}
.prose ol li::before{content:counter(g,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:11px;color:var(--signal);font-weight:500}
.prose b,.prose strong{font-weight:600}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--sunken);
  border:1px solid var(--line);border-radius:5px;padding:.12em .38em}
.prose pre{background:var(--ink-panel);color:var(--on-ink);border-radius:var(--r-md);
  padding:18px 20px;overflow-x:auto;margin:0 0 16px;border:1px solid var(--line)}
.prose pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.75;
  color:inherit}
.prose pre .c{color:var(--on-ink-muted)}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* definition callout — the paragraph an answer engine should lift whole */
.defbox{border:1px solid var(--accent-line);background:var(--accent-soft);
  border-radius:var(--r-md);padding:18px 20px;margin:0 0 16px}
.defbox p{margin:0}
.defbox .gk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text);display:block;margin-bottom:8px}

/* aside — a fact with a hard edge, orange because it interrupts */
.notebox{border-left:3px solid var(--signal-fill);background:var(--signal-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 18px;margin:0 0 16px}
.notebox p{margin:0;font-size:15px;color:var(--ink)}
.notebox .gk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);display:block;margin-bottom:6px}

/* ---- comparison table ---- */
.gtable{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px;line-height:1.5}
.gtable caption{caption-side:bottom;text-align:left;font-size:12px;color:var(--subtle);
  padding-top:10px}
.gtable th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--line-strong);background:var(--surface)}
.gtable td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.gtable td:first-child{font-weight:600;white-space:nowrap}
.gtable tr:last-child td{border-bottom:0}
.gtable .good{color:var(--ink);font-weight:600}
.gtable .bad{color:var(--signal)}
.gtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);
  margin:0 0 16px;background:var(--paper)}
.gtable-wrap .gtable{margin:0}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:18px;align-items:baseline;padding:16px 2px;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--subtle);flex:none}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 2px 18px;max-width:66ch}
.faq .a p{margin:0 0 10px;color:var(--muted);font-size:15px}
.faq .a p:last-child{margin-bottom:0}

/* ---- related guides ---- */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
  margin:20px 0 0}
.related a{display:block;border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;text-decoration:none;background:var(--surface);
  transition:border-color 140ms linear}
.related a:hover{border-color:var(--accent-line)}
.related .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--subtle);display:block;margin-bottom:8px}
.related b{font-size:14.5px;line-height:1.4;display:block;color:var(--ink)}

/* ---- guides index ---- */
.gindex{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.gindex a{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 24px;text-decoration:none;background:var(--surface);
  transition:border-color 140ms linear,transform 140ms ease}
.gindex a:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.gindex .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal)}
.gindex h2{font-size:19px;letter-spacing:-.02em;line-height:1.25}
.gindex p{font-size:14px;color:var(--muted);line-height:1.55}
.gindex .read{margin-top:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}