/* ============================================================
   AMMO · Styleguide — reference.css
   Styles for the reference routes (/color, /typography,
   /components, /layout, /brand-assets/).

   Ported from the Open Design review cards' _card.css and their
   inline <style> blocks. The cards shipped their own duplicate
   :root palette; those declarations are dropped here on purpose —
   every value already exists in static/app.css, so the routes use
   the guide's real tokens and inherit both appearances for free.
   ============================================================ */

/* ---- root scale for the reference routes ----
   The guide sets --pico-font-size:15px, and Pico applies it to :root. The
   exported cards were authored against the browser default of 16px, so every
   rem-based value here would otherwise render 6.25% small (h1 22.5px instead
   of 24px). Pinning the root back to 16px on these routes keeps the exported
   type scale exact. The guide's own pages are unaffected. */
html:has(.card-head){font-size:16px}
/* Fallback for engines without :has() support. */
.reference-root{font-size:16px}

/* ---- card shell ---- */
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;margin-bottom:22px;border-bottom:3px solid transparent;
  border-image:linear-gradient(to right,#3097ef 0 33.333%,#6434b9 33.333% 66.666%,#ef3340 66.666%) 1}
/* The reference cards set their own type scale, smaller than the guide's:
   h1 1.5rem / h2 1rem / body .85rem. The guide's app.css sets h1 2rem and
   h2 1.25rem, so these must be re-declared after it or the cards render
   noticeably larger than the exported design. */
.card-head h1{font-family:Rockwell,Georgia,serif;font-size:1.5rem;font-weight:700;letter-spacing:0;margin:0;line-height:1.2}
.eyebrow{font:400 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.guide-main h2{font-family:Rockwell,Georgia,serif;font-size:1rem;font-weight:700;margin:26px 0 10px;letter-spacing:0}
.guide-main h2:first-of-type{margin-top:0}
.guide-main p{font-size:.85rem;color:var(--muted);max-width:68ch}
.guide-main code,.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.78rem}
.grid{display:grid;gap:14px}

/* ---- colour ---- */
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.role{background:var(--surface);border:1px solid var(--line);border-radius:var(--control-radius);overflow:hidden}
.chip{height:76px;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.chip span{font:400 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase}
.meta{padding:11px 13px}
.meta b{display:block;font-size:.84rem;font-weight:600}
.meta em{display:block;font-style:normal;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.74rem;color:var(--muted);margin-top:3px}
.meta small{display:block;font-size:.74rem;color:var(--muted);margin-top:7px;line-height:1.45}
.brandrow{display:flex;gap:0;height:54px;border-radius:var(--control-radius);overflow:hidden;border:1px solid var(--line)}
.brandrow div{flex:1;display:grid;place-items:center;font:400 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:0 6px}
.states{display:flex;gap:10px;flex-wrap:wrap}
.state{border-radius:var(--compact-control-radius);padding:9px 14px;font-size:.8rem;font-weight:600;border:1px solid}
.rule3{height:3px;border-radius:2px;margin-top:12px;
  background:linear-gradient(to right,#3097ef 0 33.333%,#6434b9 33.333% 66.666%,#ef3340 66.666%)}

/* ---- typography ---- */
.spec{background:var(--surface);border:1px solid var(--guide-card-border,var(--line));
  border-radius:var(--control-radius);padding:22px;margin-bottom:14px}
.spec .ag{font-size:76px;line-height:1;color:var(--ink)}
.spec .fam{font-size:.95rem;font-weight:600;margin-top:16px}
.spec .det{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.75rem;color:var(--muted);margin-top:5px}
.spec .sample{font-size:1rem;color:var(--ink);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.d-rock{font-family:Rockwell,Georgia,serif;font-weight:700}
.d-sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:600}
.d-mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:400}
.scale{display:grid;gap:0;border-top:1px solid var(--line)}
.scale-row{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.scale-row .k{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.74rem;color:var(--muted)}

/* ---- shared tables (layout, typography) ---- */
.guide-main table.metrics{width:100%;border-collapse:collapse;font-size:.82rem}
.guide-main table.metrics th,.guide-main table.metrics td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--line)}
.guide-main table.metrics th{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400}

/* ---- layout ---- */
.radii{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
.rad{background:var(--surface);border:1px solid var(--control-border);width:96px;height:60px;
  display:grid;place-items:center;font:400 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
.sp{display:grid;gap:0;margin-top:6px}
.sprow{display:grid;grid-template-columns:74px 1fr 120px;gap:14px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:.8rem}
.bar{height:14px;background:var(--blue);border-radius:3px;opacity:.85}
.sprow .v{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.74rem;color:var(--muted)}
.shell{border:1px solid var(--line);border-radius:var(--control-radius);overflow:hidden;display:flex;height:190px;background:var(--canvas)}
.side{width:150px;background:var(--sidebar-bg);border-right:1px solid #485261;padding:14px;flex:none}
.side .b{width:64px;height:22px;background:#3097ef;border-radius:3px;opacity:.9}
.side .n{height:8px;background:#485261;border-radius:2px;margin-top:12px}
.shell-main{flex:1;display:flex;flex-direction:column}
.hdr{height:38px;background:#1a2332;border-bottom:3px solid transparent;
  border-image:linear-gradient(to right,#3097ef 0 33.333%,#6434b9 33.333% 66.666%,#ef3340 66.666%) 1}
.shell-body{flex:1;padding:16px}
.shell-body .t{height:12px;width:180px;background:#2b3444;border-radius:2px}
.shell-body .r{height:8px;background:#243044;border-radius:2px;margin-top:10px}
.lbl{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.7rem;color:var(--muted);margin-top:8px}
.guide-main .rule-list p{margin-top:9px}
.guide-main .rule-list p:first-child{margin-top:0}

/* ---- brand assets ---- */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.logo{background:var(--surface);border:1px solid var(--guide-card-border,var(--line));border-radius:var(--control-radius);
  padding:18px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-height:150px}
.logo .box{flex:1;display:grid;place-items:center;width:100%;min-height:64px}
.logo img{max-width:100%;max-height:64px;object-fit:contain}
.logo .box img.invertible{filter:var(--logo-filter)}
.logo b{font-size:.82rem;font-weight:600}
.logo em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem;color:var(--muted)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.shot{background:var(--surface);border:1px solid var(--guide-card-border,var(--line));border-radius:var(--control-radius);overflow:hidden}
.shot .frame{background:#0b0e13;display:grid;place-items:center;padding:12px}
.shot img{max-width:100%;max-height:190px;width:auto;height:auto;object-fit:contain;border-radius:var(--compact-control-radius)}
.shot .cap{padding:10px 12px;border-top:1px solid var(--line)}
.shot b{display:block;font-size:.8rem;font-weight:600}
.shot small{display:block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.7rem;color:var(--muted);margin-top:3px}
.icons{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ico{width:52px;height:52px;display:grid;place-items:center;background:var(--surface);
  border:1px solid var(--guide-card-border,var(--line));border-radius:var(--compact-control-radius);color:var(--ink)}
.ico svg{width:16px;height:16px}
.note{font-size:.78rem;color:var(--muted);margin-top:12px;max-width:64ch}

/* ---- specimen + field helpers shared by the components route ----
   The guide's own stylesheet (styleguide.css) already provides .specimen,
   .demo-row, .demo-status, .settings-sections, .feedback-grid, .save-feedback
   and .error-toggle. These fill the remaining gaps so the route stands alone. */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.crud-icon{width:32px;min-height:32px;padding:0;justify-content:center}

/* ---- appearance switch active state ----
   app.css only styles [aria-pressed=true] inside .theme-picker, but the guide's
   sidebar uses .appearance. Without this the three buttons render identically
   and the current appearance is invisible. */
.appearance button[aria-pressed=true]{background:var(--surface);color:var(--ink);border-color:var(--control-border)}
.appearance button[aria-pressed=true]:hover{background:var(--surface);color:var(--ink)}

/* ---- guide submenu ----
   Child links sit indented under a group label so the reference routes read as
   a submenu of the guide rather than as siblings of its sections. */
.sidebar nav .nav-label{display:block;margin:20px 12px 6px;color:var(--sidebar-muted);
  font-size:.72rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.sidebar nav a.nav-sub{padding-left:24px;font-size:.84rem;color:var(--sidebar-muted)}
.sidebar nav a.nav-sub:hover{color:var(--sidebar-ink);background:var(--sidebar-hover)}
.sidebar nav a.nav-sub[aria-current=page]{color:var(--nav-active-ink);background:var(--nav-active);font-weight:600}
.sidebar nav a.nav-sub[aria-current=page]:hover{color:var(--nav-active-ink);background:var(--nav-active)}

/* ---- marketing blocks ----
   Testimonial, pricing and feature-card primitives. Adapted from the Open
   Design component kit, but re-tokenised: the kit derived its own palette
   (primary #4f9ed9, 14px body, 44px controls) whereas these use the real
   AMMO tokens so they sit correctly beside the rest of the guide. */
.mkt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:start}

.mkt-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--guide-card-border,var(--line));border-radius:var(--control-radius);
  font-size:.86rem;color:var(--ink)}
.mkt-card--quote{padding:22px;gap:20px}
.mkt-quote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink);font-family:Rockwell,Georgia,serif;max-width:none}
.mkt-attrib{display:flex;align-items:center;gap:12px;margin-top:auto}
.mkt-avatar{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--primary-fill);color:var(--primary-ink);font-weight:700;font-size:.78rem;letter-spacing:.02em}
.mkt-attrib b{display:block;font-size:.84rem;font-weight:600}
.mkt-attrib small{display:block;font-size:.76rem;color:var(--muted)}

.mkt-card--plan{border-color:var(--primary-fill);box-shadow:0 0 0 1px var(--primary-fill)}
.mkt-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px 0}
.mkt-plan-head b{font-size:1.05rem;font-weight:700}
.mkt-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:4px 9px;border-radius:var(--compact-control-radius);
  background:var(--primary-fill);color:var(--primary-ink);white-space:nowrap}
.mkt-plan-note{padding:6px 20px 0;font-size:.8rem;color:var(--muted);margin:0}
.mkt-price{display:flex;align-items:baseline;gap:6px;padding:14px 20px 0}
.mkt-price strong{font-size:2.1rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.mkt-price span{font-size:.84rem;color:var(--muted)}
.mkt-features{list-style:none;margin:16px 0 0;padding:0 20px}
.mkt-features li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:.84rem;color:var(--ink)}
.mkt-features svg{color:var(--success);flex:none;margin-top:2px}
.mkt-plan-action{margin-top:auto;padding:20px}
.mkt-plan-action .ammo-btn-primary{display:inline-flex;width:100%;justify-content:center;min-height:38px;
  padding:10px 14px;border:1px solid var(--primary-fill);border-radius:var(--button-radius);
  background:var(--primary-fill);color:var(--primary-ink);font:600 .82rem/1 var(--font-body,sans-serif)}
.mkt-plan-action .ammo-btn-primary:hover{background:var(--primary-fill);filter:brightness(1.08);text-decoration:none}

.mkt-card--feature .mkt-feature-head{padding:16px 20px;border-bottom:1px solid var(--line);
  font-size:1rem;font-weight:700;color:var(--ink)}
.mkt-card--feature .mkt-feature-body{padding:20px;flex:1;color:var(--muted);font-size:.84rem;line-height:1.65}
.mkt-card--feature .mkt-feature-foot{padding:14px 20px;border-top:1px solid var(--line);background:var(--canvas)}
.mkt-link{color:var(--blue);font-size:.82rem;font-weight:600;text-decoration:none}
.mkt-link:hover{color:var(--blue-hover);text-decoration:underline}

/* ---- data display ----
   Tables, stat figures, avatars and a no-JS accordion. The guide had no
   table primitive beyond the metric tables, and no stat or avatar element. */
.data-table{width:100%;border-collapse:collapse;font-size:.82rem;color:var(--ink)}
.data-table caption{text-align:left;color:var(--muted);font-size:.78rem;padding-bottom:10px}
.data-table th,.data-table td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.data-table th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;
  border-bottom-color:var(--control-border)}
.data-table code{font-size:.76rem}
.data-table tbody tr:hover{background:var(--hover)}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:0}
.stat{background:var(--surface);border:1px solid var(--guide-card-border,var(--line));
  border-radius:var(--control-radius);padding:16px 18px}
.stat strong{display:block;font-size:1.8rem;font-weight:700;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:.78rem;color:var(--muted);margin-top:6px}

.avatar-set{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  background:var(--control-bg);color:var(--ink);border:1px solid var(--control-border)}
.avatar--accent{background:var(--primary-fill);color:var(--primary-ink);border-color:var(--primary-fill)}
.avatar--more{font-size:.7rem;color:var(--muted)}

.accordion{border-top:1px solid var(--line)}
.accordion details{border-bottom:1px solid var(--line);padding:0}
.accordion summary{cursor:pointer;padding:14px 0;font-size:.88rem;font-weight:600;color:var(--ink);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";color:var(--muted);font-weight:400;font-size:1.1rem;line-height:1}
.accordion details[open] summary::after{content:"–"}
.accordion summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--compact-control-radius)}
.accordion p{margin:0 0 14px;font-size:.84rem;color:var(--muted);max-width:70ch}

/* ---- tags ---- */
.tag-set{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;
  padding:4px 10px;border-radius:var(--compact-control-radius);border:1px solid;white-space:nowrap}
.tag--primary{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-bg)}
.tag--success{background:var(--success-bg);color:var(--success);border-color:var(--success-bg)}
.tag--warning{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border)}
.tag--error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}
.tag--info{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-bg)}
.tag--neutral{background:var(--control-bg);color:var(--muted);border-color:var(--control-border)}

/* ---- alerts & progress ---- */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--control-radius);
  border:1px solid;font-size:.84rem;margin-bottom:10px}
.alert svg{flex:none;margin-top:1px}
.alert b{display:block;font-weight:600;margin-bottom:2px}
.alert p{margin:0;font-size:.82rem;max-width:70ch;color:inherit;opacity:.9}
.alert--success{background:var(--success-bg);color:var(--success);border-color:var(--success-bg)}
.alert--info{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-bg)}
.alert--warning{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border)}
.alert--error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}

.progress-block{max-width:420px}
.progress-track{height:6px;border-radius:3px;background:var(--control-bg);
  border:1px solid var(--control-border);overflow:hidden}
.progress-fill{height:100%;background:var(--primary-fill);border-radius:2px;transition:width .3s ease}
.progress-meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;
  font-size:.78rem;color:var(--muted)}
.progress-meta strong{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- navigation primitives ---- */
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-bottom:20px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb [aria-current=page]{color:var(--ink);font-weight:600}
.breadcrumb .sep{color:var(--line);user-select:none}

.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;min-height:32px;padding:6px 9px;border-radius:var(--compact-control-radius);
  border:1px solid var(--control-border);background:var(--control-bg);color:var(--ink);
  font-size:.8rem;font-weight:600;text-decoration:none}
.pager a:hover{background:var(--hover);text-decoration:none}
.pager [aria-current=page]{background:var(--primary-fill);color:var(--primary-ink);border-color:var(--primary-fill)}
.pager .is-disabled{color:var(--muted);opacity:.5}
.pager svg{width:14px;height:14px}

.steps{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{flex:1;min-width:140px;padding:0 14px 0 0;position:relative;font-size:.8rem}
.steps li::before{counter-increment:step;content:counter(step);display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;margin-bottom:8px;font-size:.72rem;font-weight:700;
  background:var(--control-bg);color:var(--muted);border:1px solid var(--control-border)}
.steps li.is-done::before{content:"✓";background:var(--success-bg);color:var(--success);border-color:var(--success)}
.steps li.is-current::before{background:var(--primary-fill);color:var(--primary-ink);border-color:var(--primary-fill)}
.steps b{display:block;color:var(--ink);font-weight:600;font-size:.84rem;margin-bottom:3px}
.steps span{color:var(--muted)}

/* ---- sidebar fit ----
   The guide's nav now carries the ten reference links as well as its own nine
   sections. On shorter viewports that overflows the rail, so let the nav scroll
   on its own and keep the brand and the appearance switch pinned. */
.sidebar-navigation{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.sidebar-bottom{margin-top:0}

/* ---- artifacts ----
   Marketing and document surfaces built from the same primitives. Adapted from
   the Open Design artifacts, re-tokenised: those rendered on antd's stock
   palette (#1677ff) and the derived #4f9ed9, with none of the real AMMO brand
   colours. These use the guide's own tokens. */

/* Shared artifact chrome */
.artifact{background:var(--surface);border:1px solid var(--guide-card-border,var(--line));
  border-radius:var(--control-radius);overflow:hidden}
.artifact-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--canvas);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.7rem;color:var(--muted)}
.artifact-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--control-border);flex:none}
.artifact-body{padding:28px}
.artifact-note{margin-top:10px;font-size:.76rem;color:var(--muted)}

/* 1. Landing page */
.lp-hero{text-align:center;padding:44px 28px 36px;border-bottom:1px solid var(--line)}
.lp-eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--info-ink);background:var(--info-bg);
  border-radius:var(--compact-control-radius);padding:5px 11px;margin-bottom:18px}
.lp-hero h2{font-family:Rockwell,Georgia,serif;font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1.15;margin:0 0 16px;max-width:20ch;margin-inline:auto;text-wrap:balance}
.lp-hero p{font-size:.95rem;color:var(--muted);max-width:62ch;margin:0 auto 26px}
.lp-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lp-cta{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:11px 18px;
  border-radius:var(--button-radius);font:600 .86rem/1 var(--font-body,sans-serif);text-decoration:none;
  background:var(--primary-fill);color:var(--primary-ink);border:1px solid var(--primary-fill)}
.lp-cta:hover{filter:brightness(1.08);text-decoration:none;color:var(--primary-ink)}
.lp-cta--ghost{background:var(--control-bg);color:var(--ink);border-color:var(--control-border)}
.lp-cta--ghost:hover{background:var(--hover);filter:none;color:var(--ink)}
.lp-fine{font-size:.76rem;color:var(--muted);margin-top:14px}
.lp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:28px}
.lp-step b{display:block;font-size:.9rem;color:var(--ink);margin-bottom:6px}
.lp-step span{font-size:.82rem;color:var(--muted);display:block}
.lp-step i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--primary-fill);color:var(--primary-ink);font-size:.74rem;font-weight:700;
  font-style:normal;margin-bottom:10px}

/* 2. Pitch deck — 16:9 slide with keyboard navigation */
.deck{position:relative;aspect-ratio:16/9;background:var(--canvas);border-radius:var(--control-radius);
  overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:5% 6%}
.deck-slide{display:none}
.deck-slide.is-on{display:block}
.deck-slide h2{font-family:Rockwell,Georgia,serif;font-size:clamp(1.3rem,2.9vw,2.2rem);
  line-height:1.2;margin:0 0 14px;max-width:24ch}
.deck-slide p{font-size:clamp(.76rem,1.3vw,.9rem);color:var(--muted);max-width:56ch;margin:0}
.deck-foot{position:absolute;inset:auto 6% 5%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.deck-dots{display:flex;gap:6px}
.deck-dots button{width:22px;height:4px;padding:0;min-height:0;border:0;border-radius:2px;
  background:var(--line);cursor:pointer}
.deck-dots button[aria-current=true]{background:var(--primary-fill)}
.deck-nav{display:flex;gap:6px;align-items:center;font-size:.74rem;color:var(--muted)}
.deck-nav button{min-height:28px;padding:4px 9px;font-size:.72rem}
.deck-rule{height:3px;border-radius:2px;margin-bottom:22px;max-width:120px;
  background:linear-gradient(to right,#3097ef 0 33.333%,#6434b9 33.333% 66.666%,#ef3340 66.666%)}

/* 3. Poster — 3:4 print */
.poster{aspect-ratio:3/4;max-width:420px;background:var(--canvas);border:1px solid var(--line);
  border-radius:var(--control-radius);padding:30px;display:flex;flex-direction:column;gap:0}
.poster h2{font-family:Rockwell,Georgia,serif;font-size:1.9rem;line-height:1.12;margin:0 0 auto;max-width:12ch}
.poster .poster-mark{font-family:Rockwell,Georgia,serif;font-size:1rem;font-weight:700;margin-bottom:20px}
.poster .poster-sub{font-size:.84rem;color:var(--muted);margin:16px 0 0;max-width:30ch}
.poster .poster-swatches{display:flex;gap:0;height:8px;border-radius:2px;overflow:hidden;margin-top:22px}
.poster .poster-swatches i{flex:1}

/* 4 & 5. Email + newsletter */
.mail{max-width:600px;background:var(--canvas);border:1px solid var(--line);
  border-radius:var(--control-radius);overflow:hidden}
.mail-head{padding:22px 26px 18px;border-bottom:1px solid var(--line)}
.mail-mark{font-family:Rockwell,Georgia,serif;font-size:1.05rem;font-weight:700;color:var(--ink)}
.mail-body{padding:26px}
.mail-body h2{font-family:Rockwell,Georgia,serif;font-size:1.4rem;line-height:1.25;margin:0 0 14px}
.mail-body p{font-size:.86rem;line-height:1.7;color:var(--muted);margin:0 0 16px}
.mail-cta{display:inline-block;padding:11px 18px;border-radius:var(--button-radius);
  background:var(--primary-fill);color:var(--primary-ink);font:600 .84rem/1 var(--font-body,sans-serif);
  text-decoration:none}
.mail-cta:hover{filter:brightness(1.08);text-decoration:none;color:var(--primary-ink)}
.mail-foot{padding:16px 26px;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted)}
.mail-story{padding:18px 0;border-bottom:1px solid var(--line)}
.mail-story:last-child{border-bottom:0;padding-bottom:0}
.mail-story b{display:block;font-size:.92rem;color:var(--ink);margin-bottom:5px}
.mail-story span{font-size:.82rem;color:var(--muted);line-height:1.6}

/* 6. Form — split screen */
.form-split{display:grid;grid-template-columns:1fr 1fr;min-height:340px}
.form-pitch{padding:32px;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center}
.form-pitch h2{font-family:Rockwell,Georgia,serif;font-size:1.5rem;line-height:1.2;margin:0 0 12px;max-width:16ch}
.form-pitch p{font-size:.86rem;color:var(--muted);margin:0;max-width:34ch}
.form-fields{padding:32px;display:flex;flex-direction:column;justify-content:center}
.form-fields label{display:block;font-size:.78rem;color:var(--ink);margin-bottom:6px}
.form-fields input,.form-fields select{width:100%;min-height:34px;padding:6px 10px;font-size:13px;
  background:var(--control-bg);color:var(--ink);border:1px solid var(--control-border);
  border-radius:var(--control-radius);margin-bottom:16px}
.form-fields input:focus,.form-fields select:focus{outline:2px solid var(--focus);outline-offset:1px}
.form-submit{min-height:38px;padding:10px 16px;border-radius:var(--button-radius);
  background:var(--primary-fill);color:var(--primary-ink);border:1px solid var(--primary-fill);
  font:600 .84rem/1 var(--font-body,sans-serif);cursor:pointer;width:100%}
.form-submit:hover{filter:brightness(1.08)}
.form-done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:32px;justify-content:center}
.form-done svg{width:32px;height:32px;color:var(--success)}

/* ---- agent instructions ---- */
.prompt-block{position:relative;background:var(--code-bg);border:1px solid var(--line);
  border-radius:var(--control-radius);padding:16px 18px;margin-bottom:12px}
.prompt-block pre{margin:0;padding-right:120px;background:transparent;border:0;overflow-x:auto}
.prompt-block code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.8rem;line-height:1.7;color:var(--code-ink);white-space:pre-wrap;word-break:break-word}
.copy-prompt{position:absolute;top:12px;right:12px;font-size:.74rem;padding:5px 10px;min-height:30px}
.copy-prompt svg{width:15px;height:15px}
.copy-prompt[data-copied=true]{border-color:var(--success);color:var(--success)}

.agent-steps,.agent-constraints{font-size:.86rem;padding-left:20px;margin:0}
.agent-steps li,.agent-constraints li{padding:6px 0;line-height:1.6;color:var(--muted)}
.agent-steps li strong,.agent-constraints li strong{color:var(--ink);font-weight:600}
.widget-usage{margin-top:12px;font-size:.78rem;color:var(--muted);max-width:70ch}

/* ---- brand lockup ----
   The product lockup (.brand in app.css) sets Rockwell explicitly; .guide-brand
   never did, so the guide's own wordmark rendered in system sans and read as a
   different brand. Match the product: Rockwell, and the same weight. */
.guide-brand{font-family:Rockwell,Georgia,serif;font-weight:700;letter-spacing:0}
.guide-brand span{font-family:Rockwell,Georgia,serif}

/* ---- logo lockups ---- */
.lockup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.lockup{background:var(--surface);border:1px solid var(--guide-card-border,var(--line));
  border-radius:var(--control-radius);padding:20px;display:flex;flex-direction:column;gap:14px}
.lockup .lockup-mark{display:flex;align-items:center;gap:12px;min-height:44px}
.lockup .lockup-mark img{width:76px;height:auto;object-fit:contain;filter:var(--logo-filter)}
.lockup .lockup-mark span{font-family:Rockwell,Georgia,serif;font-weight:700;font-size:1.5rem;
  letter-spacing:0;color:var(--ink)}
.lockup b{font-size:.82rem;font-weight:600;color:var(--ink)}
.lockup code{display:block;font-size:.74rem;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.lockup small{font-size:.76rem;color:var(--muted);line-height:1.55;display:block}

/* Host = a real domain: wordmark + ".Tools" with the dot. */
.lockup--domain .lockup-mark span::before{content:".";margin-right:1px}
/* Subdomain = no dot: wordmark + the product name as one word. */
.lockup--subdomain .lockup-mark span::before{content:""}

/* ---- sidebar nav groups ----
   "Overview" and "Guide sections" link back to the guide; the ten reference
   routes sit under the REFERENCE label. The first group is styled as a top
   level row so it reads as navigation, not as another sub-item. */
.sidebar nav a.nav-top{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:2px 0;
  border-radius:var(--control-radius);color:var(--sidebar-ink);font-size:.88rem;font-weight:500}
.sidebar nav a.nav-top:hover{background:var(--sidebar-hover);color:var(--ink);text-decoration:none}
.sidebar nav a.nav-top:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- sidebar: agents link ----
   Carries .secondary so it renders as a real AMMO secondary button rather than
   a one-off. Only width and alignment are set here; colour, border, radius and
   padding all come from the shared button rules. */
.sidebar-agents{width:100%;justify-content:flex-start;margin-bottom:12px;font-size:.82rem}
.sidebar-agents svg{width:16px;height:16px;flex:none}
.sidebar-agents:hover{text-decoration:none}

/* ---- appearance switch ----
   The guide's own control. A focus ring is required, but it must be the token
   ring, drawn inside so it never reads as a stray border around the group. */
.appearance{gap:3px;padding:3px;background:var(--canvas);border:1px solid var(--line);
  border-radius:var(--control-radius);width:auto;margin:0;box-shadow:none}
.appearance button,
.appearance button.secondary{min-height:32px;padding:6px 9px;border:0;border-radius:var(--compact-control-radius);
  background:transparent;color:var(--muted);box-shadow:none}
.appearance button:hover{background:var(--hover);color:var(--ink)}
.appearance button[aria-pressed=true]{background:var(--surface);color:var(--ink)}
.appearance button:focus{outline:none}
.appearance button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.appearance svg{width:15px;height:15px}

/* ---- sitewide footer ----
   .app-footer in app.css is written for a full-width page: it assumes no fixed
   sidebar and pads itself from the viewport edge. Inside .guide-main (which is
   offset 272px by the sidebar) its negative-looking box ran under the rail and
   the copyright was hidden behind it. Contain the footer to the content column
   and let the parent's padding do the aligning. */
.site-footer{box-sizing:border-box;width:100%;max-width:100%;margin:48px 0 0;
  padding:18px 0 28px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:flex-start;gap:20px}
.site-copyright{color:var(--muted);font-size:.78rem;text-decoration:none}
.site-copyright:hover{color:var(--ink);text-decoration:underline}
.site-copyright:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--compact-control-radius)}

@media(max-width:850px){
  /* Sidebar becomes a stacked block, so the footer reclaims the full width. */
  .site-footer{margin-top:36px}
}
@media(max-width:700px){
  .site-footer{padding-bottom:24px}
}

/* ---- responsive: mirror the guide's own breakpoints ---- */
@media(max-width:850px){
  /* The guide's rule makes the sidebar nav a horizontal scroller. Because the
     sidebar is a flex column, the nav needs min-width:0 or it expands to its
     content and pushes the whole page wide instead of scrolling. */
  .sidebar nav{min-width:0;max-width:100%}
  .card-head{flex-wrap:wrap;gap:6px}
  .eyebrow{white-space:normal}
  .scale-row{grid-template-columns:1fr;gap:6px}
  .sprow{grid-template-columns:64px 1fr}
  .sprow .v{grid-column:2;font-size:.7rem}
  .shell{height:150px}
  .side{width:110px}
  .spec{padding:18px}
  .spec .ag{font-size:56px}
}
@media(max-width:600px){
  .brandrow{flex-direction:column;height:auto}
  .brandrow div{min-height:44px}
  .roles,.logos,.gal{grid-template-columns:1fr}
  /* Keep wide content inside the viewport rather than scrolling the page. */
  .guide-main table.metrics{display:block;overflow-x:auto;white-space:nowrap}
  .guide-main table.metrics td,.guide-main table.metrics th{white-space:normal;min-width:120px}
  .demo-row{flex-wrap:wrap}
  .spec .det,.note{overflow-wrap:anywhere}
  .guide-main pre{overflow-x:auto}
  /* Data display: scroll wide tables rather than the page. */
  .data-table{display:block;overflow-x:auto}
  .data-table th,.data-table td{white-space:nowrap}
  .stat-row{grid-template-columns:1fr 1fr}
  .steps li{flex:1 1 100%;padding-bottom:16px}
  .steps li::before{margin-bottom:6px}
  .mkt-grid{grid-template-columns:1fr}
  .alert{padding:12px}
  /* Artifacts */
  .form-split{grid-template-columns:1fr}
  .form-pitch{border-right:0;border-bottom:1px solid var(--line)}
  .lp-steps{grid-template-columns:1fr;padding:20px}
  .artifact-body{padding:18px}
  .deck{padding:7% 6%}
  .poster{max-width:none}
  .mail-body{padding:20px}
}