/* Guides components (hub cards, guide page, Premium boundary). Builds on style.css tokens: --bg --panel --line --ink --muted --lime --blue --orange --glass --glass-line --control-line --on-lime. */
:root{--gd-measure:35em}

/* ---------- index: hub sections + card grid ---------- */
.gd-grid{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.gd-grid>li{display:flex}
.gd-card{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;padding:26px;box-sizing:border-box;border-top:2px solid var(--lime)}
.gd-card .eyebrow{margin:0}
.gd-card h3{font-size:30px;margin:0;line-height:1.02}
.gd-card h3 a{color:inherit;text-decoration:none}
.gd-card h3 a::after{content:"";position:absolute;inset:0;border-radius:16px} /* whole card is the hit area; one link per card */
.gd-card h3 a:focus-visible{outline:none}
.gd-card:focus-within{outline:2px solid var(--lime);outline-offset:3px}
.gd-card .gd-summary{margin:0;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:none}
.gd-meta{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px}
.gd-checked{color:var(--muted)}
.gd-checked time{color:var(--ink)}
.gd-checked.is-missing{color:var(--orange);font-weight:600}

/* access pill: Free / Premium / not set. Text label always present (never colour alone). */
.gd-access{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid currentColor;line-height:1.4}
.gd-access.is-free{color:var(--lime)}
.gd-access.is-premium{color:#ffb38a}
.gd-access.is-unset{color:var(--muted);border-style:dashed}
:root[data-theme=light] .gd-access.is-premium{color:#a54618}
:root[data-theme=light] .gd-access.is-free{color:#15803d}
.gd-card.is-premium{border-top-color:var(--orange)}

/* ---------- guide page ---------- */
.gd-page{max-width:none}
.gd-page .lead{max-width:var(--gd-measure)!important}
.gd-facts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;list-style:none;padding:0;margin:14px 0 0;font-size:14px}
.gd-page .view-switch{max-width:var(--gd-measure);box-sizing:border-box}
.gd-body{max-width:var(--gd-measure)}
.gd-body p,.gd-body li{line-height:1.7}
.gd-body h2{scroll-margin-top:96px}
.gd-body h2.gd-step{display:flex;align-items:baseline;gap:14px}
.gd-num{flex:none;display:inline-grid;place-items:center;min-width:44px;height:44px;border-radius:12px;border:1px solid var(--glass-line);background:var(--glass);color:var(--lime);font:800 26px 'Barlow Condensed',sans-serif;letter-spacing:0}

/* on-this-page list */
.gd-toc{max-width:var(--gd-measure);margin:8px 0 28px;padding:16px 20px;box-sizing:border-box}
.gd-toc h2{font:700 12px 'DM Sans',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--lime);margin:0 0 8px}
.gd-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.gd-toc a{display:flex;gap:10px;align-items:baseline;min-height:36px;padding:6px 0;color:var(--ink);text-decoration:none}
.gd-toc a:hover{color:var(--lime)}
.gd-toc .gd-toc-n{flex:none;width:22px;color:var(--lime);font:800 18px 'Barlow Condensed',sans-serif}

/* callouts: two shapes, two colours, two icons, two labels */
.gd-callout{position:relative;margin:22px 0;padding:14px 18px 14px 56px;border-radius:12px}
.gd-callout p{margin:0}
.gd-callout .gd-callout-label{display:block;margin:0 0 4px;font:700 12px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.gd-callout::before{position:absolute;left:16px;top:14px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font:700 15px 'DM Sans',sans-serif;line-height:1}
.gd-check{background:color-mix(in srgb,var(--lime) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--lime) 45%,transparent);border-left:4px solid var(--lime)}
.gd-check .gd-callout-label{color:var(--lime)}
.gd-check::before{content:"\2713";background:var(--lime);color:var(--on-lime)}
.gd-own{background:color-mix(in srgb,var(--blue) 7%,var(--panel));border:1px dashed color-mix(in srgb,var(--blue) 70%,transparent)}
.gd-own .gd-callout-label{color:var(--blue)}
.gd-own::before{content:"\2302";border:2px solid var(--blue);color:var(--blue);font-size:16px}

/* code blocks: style.css .lesson-body .code-wrap/.code-bar/.code-copy, plus copied state */
.gd-body .code-copy{min-height:32px;padding:4px 12px;border-color:var(--control-line)}
.gd-body .code-copy[data-state=copied]{border-color:var(--lime);color:var(--lime)}
.gd-body .code-wrap pre{white-space:pre}

/* quiz: style.css .md-quiz/.qa-card/.mc-btn; answers revealed after choosing */
.gd-body .qa-card details.reveal[hidden]{display:none}
.gd-body .qa-form{margin:0}
.gd-body .qa-form .mc-options{margin:0}
/* No layout shift: human-view.js marks <html> in the head before first paint, so when scripts run, the space the view switch
   will take is reserved while it is still hidden (copy buttons sit in the absolutely positioned code bar, so they shift nothing).
   Without JS nothing is reserved and the switch never appears. */
html[data-lesson-view] .gd-page .view-switch[hidden]{display:flex!important;visibility:hidden}
.gd-resources h2{margin-top:32px}

/* ---------- Premium boundary ---------- */
.gd-fade{position:relative;max-height:13em;overflow:hidden;pointer-events:none;user-select:none}
.gd-fade::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 92%)}
.gd-lock{max-width:var(--gd-measure);box-sizing:border-box;margin:-24px 0 40px;padding:28px;display:grid;gap:10px;border-top:2px solid var(--orange)}
.gd-lock .gd-access{justify-self:start}
.gd-lock h2{margin:0;font-size:36px}
.gd-lock p{margin:0;color:var(--ink)}
.gd-lock .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.gd-lock .gd-lock-list{margin:0;padding-left:20px;color:var(--muted)}
.gd-lock .gd-lock-list li{margin:2px 0}


@media (max-width:700px){
  .gd-card{padding:20px}
  .gd-card h3{font-size:27px}
  .gd-lock{padding:20px;margin-top:-16px}
  .gd-lock h2{font-size:30px}
  .gd-callout{padding-left:50px}
  .gd-callout::before{left:13px}
  .gd-body h2.gd-step{gap:10px}
  .gd-num{min-width:38px;height:38px;font-size:22px}
}
@media (prefers-reduced-motion:reduce){.gd-card,.gd-card:hover{transform:none;transition:none}}
.gd-card .gd-summary.is-missing{color:var(--orange);font-style:italic}