/* ============================================================
   guides.css: long-form guides (/guides and /guides/*)
   Loaded after /site.css and /article.css. Uses only the design's
   tokens (--bg, --s1, --tx, --am, --rule ...) and fonts, so a guide
   reads like the rest of the site. The @media print block at the
   bottom turns every guide into a clean black-on-white handout.
   ============================================================ */

/* ---- header actions (print + email buttons) ---- */
.g-acts{display:flex;flex-wrap:wrap;gap:12px}
.g-acts .btn{min-height:48px}

/* typographic header panel, used when no photo fits */
.g-panel{border:1px solid var(--rule2);background:var(--s1);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px}
.g-panel div{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:16px}
.g-panel div:last-child{border-bottom:0;padding-bottom:0}
.g-panel b{font:800 clamp(40px,4vw,64px)/1 Archivo;font-variation-settings:"wdth" 72;color:var(--am);min-width:2.2ch}
.g-panel span{color:var(--tx2);font-size:17px;line-height:1.4}

/* ---- body layout: sticky table of contents + prose ---- */
.g-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.g-toc{position:sticky;top:calc(var(--hh) + 24px);border-top:1px solid var(--rule2);padding-top:18px;max-height:calc(100vh - var(--hh) - 48px);overflow:auto}
.g-toc .k{display:block;margin-bottom:12px}
.g-toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;counter-reset:t}
.g-toc li{counter-increment:t}
.g-toc a{display:flex;gap:10px;padding:12px 0;min-height:44px;box-sizing:border-box;color:var(--tx2);font:500 15px/1.35 Archivo}
.g-toc a::before{content:counter(t,decimal-leading-zero);flex:none;font:500 12px/1.75 "JetBrains Mono",monospace;color:var(--mute)}
.g-toc a:hover{color:var(--am)}
.guide .prose{max-width:760px}
.guide .prose h2,.guide .prose h3[id]{scroll-margin-top:calc(var(--hh) + 24px)}
.guide .prose h2 .n{display:block;margin-bottom:10px;font:500 13px "JetBrains Mono",monospace;letter-spacing:.09em;color:var(--am)}

/* ---- boxes inside the prose ---- */
.g-box{padding:24px 26px;border:1px solid var(--rule2);background:var(--s1)}
.g-box>*+*{margin-top:14px}
.g-box .k{display:block}
.g-note{padding:18px 22px;border-left:2px solid var(--am);background:rgba(217,160,91,.07);color:var(--tx)}
.g-note p+p{margin-top:10px}
.g-src{font-size:15px;color:var(--mute)}
.g-src a{color:var(--tx2)}

/* checklists with empty boxes you can tick on paper */
.prose ul.g-check{gap:12px}
.prose ul.g-check>li{padding-left:34px}
.prose ul.g-check>li::before{width:18px;height:18px;top:.25em;background:none;border:1px solid rgba(217,160,91,.6)}

/* priority tags for the checklist table */
.g-p{display:inline-block;padding:2px 8px;border:1px solid var(--rule2);font:500 12px/1.5 "JetBrains Mono",monospace;letter-spacing:.06em;white-space:nowrap}
.g-p.p1{border-color:var(--am);color:var(--am)}
.g-p.p2{color:var(--tx)}
.g-p.p3{color:var(--mute)}
.prose td.g-c{width:28px;text-align:center}
.prose td.g-c::before{content:"";display:inline-block;width:16px;height:16px;border:1px solid rgba(217,160,91,.6)}

/* worksheets: tables with blank cells to fill in */
.g-ws{padding:26px;border:1px dashed rgba(217,160,91,.45);background:rgba(236,231,222,.02)}
.g-ws>*+*{margin-top:16px}
.g-ws .k{display:block}
.prose .g-ws table td{height:40px}
.g-line{display:flex;gap:12px;align-items:flex-end}
.g-line span{flex:none}
.g-line i{flex:1;border-bottom:1px solid var(--rule2);min-height:1.4em}

/* "where this gets hard" section */
.g-hard{padding:28px;border:1px solid var(--rule2);border-top:2px solid var(--am);background:var(--s1)}
.g-hard>*+*{margin-top:16px}

/* scripts and templates */
.g-script{padding:18px 22px;border:1px solid var(--rule2);background:var(--bg);font-size:17px;color:var(--tx)}
.g-script .k{display:block;margin-bottom:8px;font-size:12.5px}
.g-script p+p{margin-top:8px}

/* code sample (schema) */
.prose pre{overflow-x:auto;padding:18px 20px;border:1px solid var(--rule2);background:var(--s2);font:500 13.5px/1.6 "JetBrains Mono",monospace;color:var(--tx2)}
.prose pre code{background:none;padding:0;font:inherit}

/* "email me this guide" box */
.g-mail{margin-top:56px;padding:28px;border:1px solid var(--rule2);background:var(--s1)}
.g-mail h2{margin-top:0 !important}
.g-mail p{color:var(--tx2)}
.g-mail .frm{margin-top:18px;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.g-mail .frm .btn{min-height:56px}
.g-mail .ok{margin-top:18px}

/* ---- guides index cards ---- */
.g-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.g-card{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.6vw,36px);background:var(--bg);color:var(--tx);transition:background .3s}
.g-card:hover{background:var(--s1);color:var(--tx)}
.g-card h2{font:800 clamp(24px,2.2vw,32px)/1.05 Archivo;font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:-.005em}
.g-card p{color:var(--tx2)}
.g-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;color:var(--tx2);font-size:15px}
.g-card ul li::before{content:"";display:inline-block;width:12px;height:1px;margin:0 10px 4px 0;background:var(--am)}
.g-card .art-lnk{margin-top:auto;padding-top:8px;color:var(--am);font-weight:600}

@media(max-width:1000px){
  .g-layout{grid-template-columns:minmax(0,1fr)}
  .g-toc{position:static;max-height:none;padding:20px;border:1px solid var(--rule2);background:var(--s1)}
  .g-cards{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .g-mail .frm{grid-template-columns:minmax(0,1fr)}
  .g-ws,.g-hard,.g-mail,.g-box{padding:20px}
  .g-acts .btn{flex:1 1 100%}
  .prose .g-ws th,.prose .g-ws td{padding:10px 6px}
  .prose .g-ws th{font-size:11px;letter-spacing:.04em}
}

/* ---- print: black on white, no navigation, no buttons ---- */
@media print{
  @page{margin:16mm 14mm}
  :root{--bg:#fff;--s1:#fff;--s2:#f3f3f3;--tx:#000;--tx2:#111;--mute:#333;--rule:#bbb;--rule2:#888;--am:#000;--am2:#000}
  html,body{background:#fff !important;color:#000 !important}
  .skip,header.top,.mm,footer.foot,.mcta,.md,.art-cta,.ready,.g-acts,.g-mail,.g-toc,.ph-img,.crumb,.g-panel{display:none !important}
  .phd{padding:0 0 18px !important;border-bottom:2px solid #000}
  .phd-g{display:block !important}
  .art-sec{padding:20px 0 !important}
  .wrap{max-width:none;padding:0}
  .g-layout{display:block}
  .guide .prose{max-width:none;font-size:11.5pt;line-height:1.5;color:#000}
  .prose h2{font-size:18pt;margin-top:26px;break-after:avoid}
  .prose h3{font-size:13pt;break-after:avoid}
  .prose table{display:table;font-size:10pt;break-inside:auto}
  .prose tr,.g-script,.g-note,.g-box{break-inside:avoid}
  .prose th,.prose td{border:1px solid #888 !important;color:#000}
  .g-ws,.g-hard,.g-box,.g-note,.g-script{background:#fff !important;border-color:#000 !important}
  .prose a{color:#000;text-decoration:underline}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  .fql details,.fql details::details-content{content-visibility:visible}
  .meth summary i,.fql summary::after{display:none}
  .lede,.k,.pm .k{color:#000 !important}
  *{box-shadow:none !important;text-shadow:none !important}
}