/* MeshVault v4: field guides (/guide and /guide/<slug>).
   Additive to /assets/v4/site.css, which already styles .page-head, .doc,
   .doc__rail, .doc__body, .steps, .callout, .pins, .faq and .actions.
   Link after shell.css:
     <link rel="stylesheet" href="/assets/v4/pages/guide.css?v=1">
   Shared by the two guide owners. Add here only what site.css lacks; never
   restyle a site.css component. Keep this file small.

   Guide page frame:
     <header class="page-head"><div class="wrap">
       h1.page-head__title   one display sentence, one .tape--inline
       p.page-head__lede     the answer, in two sentences (search snippet)
       p.page-head__meta     "Book facts dated <time>2026-09-29</time>. From The
                             MeshVault Book, Edition 3, page 0NN. <a href=/guide>All guides</a>"
     </div></header>
     <div class="wrap"><div class="doc">
       <nav class="guide-rail" aria-label="On this page"><ul class="doc__rail">
         <li><a href="#id"><span class="tape tape--s">Short label</span></a></li>
       </ul></nav>
       <article class="doc__body">
         h2[id] sections, p, ul, ol.steps, aside.callout, dl.pins
         div.guide-table > table        (give every td data-label for phones)
         fieldset.worksheet             (book fill-in; nothing is saved or sent)
         blockquote.guide-quote         (p quote + footer naming the source)
         div.faq                        (only when the page has real questions)
         h2#sources + ol.guide-sources  (li: Publisher, <cite>Title</cite>, date, link)
         section.guide-next             (h2#next "What to do next", p, div.actions)
       </article>
     </div></div>

   Hub (/guide):
     section.section > .wrap > h2.section__title (one .tape--inline)
       ul.guide-list > li > a.guide-list__name + p + p.guide-list__meta
*/

/* ---------- Rail: the nav wrapper carries the stickiness ---------- */
.guide-rail{position:sticky;top:calc(var(--nav-h) + var(--s-6));align-self:start}
.guide-rail .doc__rail{position:static}
@media (max-width:959px){.guide-rail{position:static}}

/* ---------- Reading rhythm ---------- */
.doc__body > [id]{scroll-margin-top:calc(var(--nav-h) + var(--s-6))}
.doc__body .pins{margin:var(--s-6) 0}
.doc__body .faq{margin:var(--s-6) 0 0}
.doc__body .callout .tape + p{margin-top:0}
.doc__body .steps{padding-left:0}
.page-head__meta a{color:var(--ink)}

/* ---------- Table (prices, surveys) ---------- */
.guide-table{margin:var(--s-6) 0;overflow-x:auto;overscroll-behavior-x:contain;border-top:2px solid var(--ink)}
.guide-table table{width:100%;border-collapse:collapse;font:400 var(--t-sm)/var(--lh-ui-lg) var(--font-ui);color:var(--ink-2)}
.guide-table caption{caption-side:bottom;padding:var(--s-3) 0 0;text-align:left;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}
.guide-table th,.guide-table td{padding:var(--s-3) var(--s-4) var(--s-3) 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.guide-table thead th{font-weight:600;font-size:var(--t-xs);color:var(--ink-3)}
.guide-table tbody th{font-weight:600;color:var(--ink)}
.guide-table .num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
@media (max-width:599px){
  .guide-table{overflow:visible}
  .guide-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .guide-table table,.guide-table tbody,.guide-table tr,.guide-table th,.guide-table td{display:block}
  .guide-table table{display:flex;flex-direction:column}
  .guide-table caption{display:block;order:1}
  .guide-table tr{padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
  .guide-table th,.guide-table td{padding:var(--s-1) 0;border:0}
  .guide-table tbody th{font-size:var(--t-md)}
  .guide-table td[data-label]::before{content:attr(data-label);display:block;font:600 var(--t-2xs)/16px var(--font-ui);color:var(--ink-3)}
}

/* ---------- Worksheet: the book's fill-in lines, typed on screen ----------
   Numbered blanks:  ol > li > label.visually-hidden + input[type=text]
   Labelled blanks:  p.worksheet__row > label + input[type=text]
   Tick rows:        label.check > input[type=checkbox] + span
   Nothing is saved or sent; say so in p.fine at the end. */
.worksheet{margin:var(--s-8) 0;padding:var(--s-5) var(--s-6) var(--s-6);background:var(--card);box-shadow:var(--lift-1);border-radius:var(--r-card)}
.worksheet legend{margin:0 0 var(--s-2);font:600 var(--t-md)/var(--lh-ui-lg) var(--font-ui);color:var(--ink)}
.worksheet ol{margin:0;padding:0;list-style:none;counter-reset:w}
.worksheet li{counter-increment:w;display:grid;grid-template-columns:var(--s-8) minmax(0,1fr);align-items:end;gap:var(--s-2)}
.worksheet li + li{margin-top:0}
.worksheet li::before{content:counter(w);padding-bottom:var(--s-3);font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.worksheet__row{display:grid;grid-template-columns:minmax(5rem,max-content) minmax(0,1fr);align-items:end;gap:var(--s-4);margin:0}
.worksheet__row label{padding-bottom:var(--s-3);font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--ink-2)}
.worksheet input:not([type="checkbox"]):not([type="radio"]){width:100%;min-height:var(--tap-min);padding:var(--s-2) 0;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;background:transparent;font:400 var(--t-md)/var(--lh-ui-lg) var(--font-text);color:var(--ink)}
.worksheet input:not([type="checkbox"]):not([type="radio"]):focus-visible{outline:0;border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.worksheet input::placeholder{color:var(--ink-3)}
.worksheet .check{padding:var(--s-2) 0;border-bottom:1px solid var(--rule);font-family:var(--font-text);font-size:var(--t-md);line-height:var(--lh-ui-lg)}
.worksheet .check:last-of-type{border-bottom:0}
.worksheet .fine{margin:var(--s-4) 0 0}

/* ---------- Quoted voices (public posts, cited) ---------- */
.guide-quote{margin:var(--s-6) 0;padding:0 0 0 var(--s-6);border-left:1px solid var(--ink)}
.guide-quote p{margin:0;font:italic 400 var(--t-lg)/var(--lh-lede) var(--font-text);color:var(--ink);text-wrap:pretty}
.guide-quote footer{margin-top:var(--s-2);font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3)}

/* ---------- Sources (links keep a 44px tap height) ---------- */
.guide-sources{margin:var(--s-4) 0 0;padding:0 0 0 1.6em;font:400 var(--t-sm)/var(--lh-ui-lg) var(--font-ui);color:var(--ink-2)}
.guide-sources li{padding-left:var(--s-1)}
.guide-sources li::marker{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.guide-sources cite{font-style:italic;color:var(--ink)}
.guide-sources a{display:inline-flex;align-items:center;min-height:var(--tap-min);overflow-wrap:anywhere;color:var(--ink)}

/* ---------- What to do next ---------- */
.guide-next{margin:var(--s-16) 0 0;padding:var(--s-8) 0 0;border-top:2px solid var(--ink)}
.guide-next h2{margin-top:0}

/* ---------- Hub list ---------- */
.guide-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-12);margin:var(--s-8) 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.guide-list > li{position:relative;padding:var(--s-6) var(--s-3) var(--s-6) 0;border-bottom:1px solid var(--rule);transition:background-color var(--dur-1) var(--ease-out)}
.guide-list__name{display:inline-block;min-height:var(--tap-min);font:400 var(--t-xl)/1.15 var(--font-display);color:var(--ink);text-decoration:none;text-wrap:balance}
.guide-list__name::after{content:"";position:absolute;inset:0}
.guide-list__name:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.guide-list__name:focus-visible{outline:0}
.guide-list > li:has(.guide-list__name:focus-visible){box-shadow:var(--focus-ring)}
.guide-list > li:has(.guide-list__name:hover){background:var(--card)}
.guide-list p{max-width:36em;margin:var(--s-2) 0 0;color:var(--ink-2)}
.guide-list .guide-list__meta{margin-top:var(--s-3);font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (max-width:767px){.guide-list{grid-template-columns:1fr}}
@media (forced-colors:active){.worksheet{border:1px solid CanvasText}}