/* Guides (/guides/ and /guides/<slug>/). Builds on site.css: .page-head, .page-body, .doc, .doc-toc, .prose.
   Tokens only, so both themes work. */

/* ── article head ──────────────────────────────────────────────────── */
.gd-head .h1{font-size:clamp(2.15rem,4.8vw,3.9rem); line-height:.96; max-width:22ch}
.gd-head .lede{max-width:62ch}
.gd-head .updated{margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.3rem .9rem}
.gd-head .updated a{color:var(--ink-2)}
.gd-head .updated a:hover{color:var(--ink)}

/* ── table of contents ─────────────────────────────────────────────── */
.gd .doc{grid-template-columns:minmax(0,13.5rem) minmax(0,1fr)}
.gd .doc-toc{gap:0; border-left:1px solid var(--line); padding:.1rem 0 .1rem 0}
.gd .doc-toc .lab{padding:0 0 .55rem .9rem}
.gd .doc-toc a{display:block; padding:.32rem .4rem .32rem .9rem; margin-left:-1px; border-left:2px solid transparent; line-height:1.35}
.gd .doc-toc a:hover{border-left-color:var(--ink); text-decoration:none}
@media (max-width:56rem){
  .gd .doc{grid-template-columns:minmax(0,1fr)}
  .gd .doc-toc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:.8rem .9rem .7rem}
  .gd .doc-toc .lab{grid-column:1 / -1; padding:0 0 .45rem}
  .gd .doc-toc a{border-left:0; margin:0; padding:.36rem 0; border-top:1px solid var(--line-2)}
}
@media (max-width:20rem){ .gd .doc-toc{grid-template-columns:minmax(0,1fr)} }

/* ── article body ──────────────────────────────────────────────────── */
/* the prose column spans the grid track; text keeps a readable measure, .gd-wide blocks use the full width */
.gd .doc .prose{max-width:none; min-width:0; --gd-measure:40rem}
.gd .prose > *{max-width:var(--gd-measure)}
.gd .prose > .gd-wide{max-width:60rem}
.gd .prose h2{padding-top:1.3rem; border-top:1px solid var(--line-2); margin-top:2.4rem}
.gd .prose > h2:first-child{margin-top:0; padding-top:0; border-top:0}
.gd .prose h3{margin-top:1.5em; scroll-margin-top:calc(var(--bar-h) + 1rem)}
.gd .prose h3 + p{margin-top:.45em}
.gd .prose a{overflow-wrap:anywhere}
.gd .prose ol{counter-reset:gd}
.gd .prose ol > li{counter-increment:gd; padding-left:1.9rem}
.gd .prose ol > li::before{content:counter(gd); background:none; transform:none; width:auto; height:auto; top:.05em; left:0; font:600 var(--t-xs)/1.9 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); min-width:1.3rem}
.gd .prose ul ul{margin-top:.35em}
.gd .prose pre.code{max-height:none; font-size:.8rem; line-height:1.6}
.gd .prose .callout{margin-top:1.3em; margin-bottom:.4em; font-size:var(--t-sm)}
.gd .prose .callout a{font-weight:500}
.gd .prose .callout + *{margin-top:1.1em}
.gd .prose .table-wrap{margin-top:1.1em}
.gd .prose .table{font-size:var(--t-sm)}
.gd .prose .table th{white-space:normal}
.gd .prose .table td{font-family:var(--f-ui); color:var(--ink)}
.gd .prose .table td.num{font-family:var(--f-mono)}
.gd .prose .table caption{caption-side:bottom; text-align:left; padding:.55rem .75rem; font:400 .98rem/1.45 var(--f-serif); color:var(--ink-3); border-top:1px solid var(--line-2)}
@media (max-width:30rem){ .gd .prose .table th,.gd .prose .table td{padding:.5rem .5rem} .gd .prose pre.code{font-size:.76rem; padding:.7rem .75rem} }

/* a labeled prompt example */
.gd-ex{display:flex; flex-direction:column; gap:.45rem; min-width:0}
.gd-ex figcaption{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; font:400 1rem/1.4 var(--f-serif); color:var(--ink-3)}
.gd-ex figcaption .badge{flex:none}
.gd-ex .code{margin:0}
/* before and after, side by side when there is room */
.gd-pair{display:grid; grid-template-columns:minmax(0,1fr); gap:1rem}
@media (min-width:76rem){ .gd-pair{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start} }
/* three layouts of one prompt */
.gd-trio{display:grid; grid-template-columns:minmax(0,1fr); gap:1rem}
@media (min-width:84rem){ .gd-trio{grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start} .gd-trio .code{font-size:.74rem} }

/* a short definition line under a test heading */
.gd-def{font:italic 400 1.12rem/1.45 var(--f-serif); color:var(--ink); border-left:2px solid var(--ink); padding-left:.75rem}
.gd .prose p.gd-why{color:var(--ink-2)}

/* checklist */
.gd .prose ul.gd-check > li{padding-left:1.6rem}
.gd .prose ul.gd-check > li::before{transform:none; width:.8rem; height:.8rem; top:.32em; left:0; background:transparent; border:1.5px solid var(--ink-3); border-radius:2px}

/* source line for vendor guidance */
.gd .prose p.gd-src{font:italic 400 .98rem/1.5 var(--f-serif); color:var(--ink-3)}
.gd .prose p.gd-src a{color:var(--accent)}

/* comparison table that turns into labeled rows on narrow screens */
.gd-cmp td{vertical-align:top; font-size:var(--t-sm); line-height:1.45}
.gd-cmp th[scope=row]{font:600 var(--t-sm)/1.35 var(--f-ui); letter-spacing:0; text-transform:none; color:var(--ink); background:none; white-space:normal; vertical-align:top; border-bottom:1px solid var(--line-2); width:9rem}
.gd-cmp tr:last-child th[scope=row]{border-bottom:0}
@media (max-width:44rem){
  .gd .prose .gd-cmp-wrap{overflow:visible}
  .gd-cmp,.gd-cmp tbody,.gd-cmp tr,.gd-cmp th,.gd-cmp td{display:block; width:100%}
  .gd-cmp thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .gd .prose .gd-cmp caption{display:block; width:100%; border-top:0; border-bottom:1px solid var(--line-2)}   /* a stacked table keeps its caption full width */
  .gd-cmp tr{border-bottom:1px solid var(--line)}
  .gd-cmp tr:last-child{border-bottom:0}
  .gd-cmp th[scope=row]{border-bottom:0; padding:.75rem .75rem .2rem; width:100%}
  .gd-cmp td{border-bottom:0; padding:.3rem .75rem .45rem}
  .gd-cmp td::before{content:attr(data-label); display:block; font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--ink-3); margin-bottom:.15rem}
  .gd-cmp tr:hover td{background:none}
}

/* key takeaways */
.gd .prose .gd-takeaways{max-width:var(--gd-measure); margin-top:2.6rem; background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--ink); border-radius:var(--r-lg); padding:1.2rem 1.3rem 1.3rem}
.gd .prose .gd-takeaways h2{margin:0 0 .7rem; padding:0; border:0; font-size:1.3rem}
.gd .prose .gd-takeaways li + li{margin-top:.55em}

/* related guides */
.gd .prose h2#related{border-top:0}
.gd-related{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr)); gap:.75rem}
.gd .prose ul.gd-related > li{padding:0}
.gd .prose ul.gd-related > li::before{display:none}
.gd .prose ul.gd-related > li + li{margin-top:0}
.gd-related a{display:flex; flex-direction:column; gap:.35rem; height:100%; padding:.9rem 1rem 1rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); color:var(--ink); text-decoration:none; transition:border-color .15s}
.gd-related a:hover{border-color:var(--ink)}
.gd-related b{font:650 1.05rem/1.2 var(--f-ui)}
.gd-related span{font:400 .95rem/1.4 var(--f-serif); color:var(--ink-2)}
.gd-related small{font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--accent); margin-top:auto; padding-top:.3rem}

/* ── hub (/guides/) ────────────────────────────────────────────────── */
.gd-hub{display:flex; flex-direction:column; gap:clamp(3rem,7vw,4.5rem); padding-top:1.5rem}
.gd-hub .sec-head{margin-bottom:1.6rem}
.gd-path{grid-template-columns:repeat(5,minmax(0,1fr))}
.gd-path li:nth-child(3)::after{background:var(--panel)}
.gd-path li:first-child::after{background:var(--ink)}
.gd-path .gd-step{font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--ink-3)}
@media (max-width:56rem){ .gd-path{grid-template-columns:minmax(0,1fr)} }

.gd-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.gd-card{display:flex; flex-direction:column; gap:.7rem; padding:1.3rem 1.35rem 1.25rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); min-width:0; transition:border-color .15s, box-shadow .15s}
.gd-card:hover{border-color:var(--ink); box-shadow:var(--shadow)}
.gd-card:first-child{grid-column:1 / -1; background:linear-gradient(120deg, var(--accent-wash), transparent 55%), var(--panel)}
.gd-card-top{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.gd-card h3{font:400 clamp(1.45rem,2.4vw,1.8rem)/1.1 var(--f-head); letter-spacing:-.015em; text-wrap:pretty}
.gd-card h3 a{color:var(--ink); text-decoration:none}
.gd-card h3 a:hover{text-decoration:underline; text-decoration-thickness:1px}
.gd-card p{font:400 1.02rem/1.45 var(--f-serif); color:var(--ink-2); flex:1; max-width:62ch}
.gd-card-foot{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem; padding-top:.75rem; border-top:1px solid var(--line-2); font:600 var(--t-xs)/1.4 var(--f-ui)}
.gd-card-foot .muted{font-weight:500}
.gd-card-foot a{text-decoration:none}
.gd-card-foot a:hover{text-decoration:underline}
@media (max-width:48rem){ .gd-cards{grid-template-columns:minmax(0,1fr)} }

.gd-note{font:400 1rem/1.5 var(--f-serif); color:var(--ink-2); max-width:62ch}

/* cost table: model names as row headers, numbers stay tabular */
.gd-cost th[scope=row]{font:500 var(--t-sm)/1.35 var(--f-ui); width:auto}
@media (max-width:44rem){
  .gd-cost td.num{white-space:nowrap}
  .gd-cost td{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.22rem .75rem}
  .gd-cost td::before{margin:0; flex:1 1 auto; white-space:normal; text-align:left}
  .gd-cost td:last-child{padding-bottom:.7rem}
  .gd-cost th[scope=row]{padding:.7rem .75rem .3rem; font-weight:600}
  .gd .prose .gd-cost caption{display:block; border-top:0; border-bottom:1px solid var(--line-2)}
}