/* Foundation 1 and 2 detail pages (I12). Tokens match index.html dashboard-format. */
:root {
  color-scheme: dark;
  --bg: #0b0e14; --panel: #151a24; --chip: #1d2432;
  --gold: #d4af37; --gold-l: #e0bd4f; --gold-f: rgba(212,175,55,.12);
  --line: rgba(212,175,55,.38); --line-s: #232a38;
  --cream: #f1f3f8; --text: #e6e9f0; --muted: #8b94a7; --dim: #5b6373;
  --rec: #7fb0ff; --ai: #4fd1a5; --c: var(--gold);
  --card: linear-gradient(180deg, #202633, #151a24);
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --max: 1108px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { display: flex; flex-direction: column; min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--text); font: 14px/1.55 var(--sans); background: radial-gradient(ellipse 60% 40% at 15% -5%, rgba(212,175,55,.10), transparent), radial-gradient(ellipse 50% 35% at 85% -5%, rgba(96,165,250,.10), transparent), var(--bg); -webkit-font-smoothing: antialiased; }
.is-rec { --c: var(--rec); }
.is-ai { --c: var(--ai); }
a { color: var(--gold-l); }
a:hover { color: var(--cream); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: #0b0e14; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 50; top: 10px; left: 10px; padding: 10px 14px; transform: translateY(-160%); border: 1px solid var(--gold); border-radius: 8px; background: var(--bg); color: var(--cream); text-decoration: none; }
.skip-link:focus { transform: none; }
main { flex: 1; width: min(calc(100% - 32px), var(--max)); margin: 0 auto; padding: 4px 0 40px; }
main:focus { outline: none; }
h1 { margin: 6px 0 8px; color: var(--cream); font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
h2 { margin: 0 0 10px; color: var(--cream); font-size: 17px; font-weight: 800; }

/* Header, breadcrumb, foundation nav */
.fd-top { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 26px; border-bottom: 1px solid var(--line-s); background: rgba(11,14,20,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fd-brand { display: flex; align-items: baseline; gap: 8px; color: var(--cream); font-size: 18px; font-weight: 800; letter-spacing: .5px; text-decoration: none; }
.fd-brand strong::after { margin-left: 8px; color: var(--dim); content: '//'; }
.fd-brand span { color: var(--gold); }
.fd-topback { font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.fd-crumbs { width: min(calc(100% - 32px), var(--max)); margin: 14px auto 0; }
.fd-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; }
.fd-crumbs li + li::before { margin-right: 8px; color: var(--dim); content: '→'; }
.fd-crumbs a { color: var(--muted); }
.fd-crumbs a:hover { color: var(--cream); }
.fd-crumbs [aria-current='page'] { color: var(--cream); font-weight: 700; }
.fd-fnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line-s); border-top: 3px solid var(--c); border-radius: 12px; background: var(--panel); }
.fd-fname { color: var(--c); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fd-fnav ul { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fd-fnav ul a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid var(--line-s); border-radius: 999px; background: var(--chip); color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; }
.fd-fnav ul a:hover { border-color: var(--line); color: var(--text); }
.fd-fnav ul a[aria-current='page'] { border-color: var(--c); background: rgba(212,175,55,.08); color: var(--cream); }
.fd-switch { font-size: 12px; font-weight: 700; text-decoration: none; }

/* Hero and outputs */
.fd-hero { margin: 22px 0 0; text-align: center; }
.fd-kick { margin: 0; color: var(--c); font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.fd-lede { max-width: 760px; margin: 0 auto; color: var(--text); font-size: 15px; }
.fd-strip { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; max-width: 900px; margin: 16px auto 0; text-align: left; }
.fd-strip > div { padding: 12px 14px; border: 1px solid var(--line-s); border-radius: 12px; background: var(--card); }
.fd-strip p { margin: 0; }
.fd-strip a { font-weight: 800; }
.fd-strip small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.fd-label { display: block; margin-bottom: 4px; color: var(--gold); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fd-outs { margin: 26px 0 0; }
.fd-outs ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: fdo; }
.fd-outs li { padding: 12px 14px; border: 1px solid var(--line-s); border-top: 2px solid var(--gold); border-radius: 12px; background: var(--card); counter-increment: fdo; }
.fd-outs li::before { display: block; color: var(--gold); font-size: 11px; font-weight: 800; content: '0' counter(fdo); }
.fd-outs b { display: block; color: var(--cream); font-size: 14.5px; }
.fd-outs p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

/* Tabs */
.fd-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-s); }
.fd-tabs button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line-s); border-radius: 8px; background: var(--chip); color: var(--muted); cursor: pointer; font: 700 12.5px var(--sans); }
.fd-tabs button:hover { color: var(--text); }
.fd-tabs [aria-selected='true'] { border-color: var(--gold); background: var(--gold-f); color: var(--gold); }
.fd-panel:focus-visible { outline-offset: 6px; }

/* Sample document */
.fd-doc { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #10141c; }
.fd-doc-head { padding: 14px 16px; border-bottom: 1px dashed var(--line); background: linear-gradient(180deg, rgba(212,175,55,.08), transparent); }
.fd-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border: 1px dashed var(--line); border-radius: 999px; color: var(--gold-l); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fd-doc-head h3 { margin: 8px 0 6px; color: var(--cream); font-size: 18px; font-weight: 800; line-height: 1.3; }
.fd-doc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fd-doc-meta span { padding: 2px 9px; border: 1px solid var(--line-s); border-radius: 999px; background: var(--chip); color: var(--muted); font-size: 11.5px; }
.fd-blk { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line-s); }
.fd-doc-head + .fd-blk { border-top: 0; }
.fd-blk h4 { margin: 0 0 8px; color: var(--c); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fd-blk dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 0; }
.fd-blk dl div { min-width: 0; }
.fd-blk dt { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.fd-blk dd { margin: 2px 0 0; color: var(--text); overflow-wrap: anywhere; }
.fd-scroll { overflow-x: auto; }
.fd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fd-table th, .fd-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line-s); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.fd-table thead th { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fd-table tbody th { color: var(--cream); font-weight: 700; }
.fd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fd-steps li { padding: 10px 12px; border: 1px solid var(--line-s); border-left: 3px solid var(--c); border-radius: 10px; background: var(--chip); }
.fd-steps b { display: block; margin-bottom: 6px; color: var(--cream); }
.fd-steps dl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fd-flags { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fd-note { color: var(--muted); font-size: 13px; background: rgba(212,175,55,.04); }
.fd-flag { display: inline-flex; gap: 6px; align-items: baseline; }
.fd-flag > span[aria-hidden] { display: inline-grid; flex: none; width: 16px; height: 16px; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 900; line-height: 1; }
.is-ok > span[aria-hidden] { background: rgba(79,209,165,.18); color: #4fd1a5; }
.is-open > span[aria-hidden] { background: rgba(224,189,79,.18); color: var(--gold-l); }
.is-miss > span[aria-hidden] { background: rgba(248,113,113,.18); color: #f87171; }
.fd-flag.is-miss { color: #fca5a5; }
.fd-assume { margin-top: 10px; padding: 12px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.fd-assume h3, .fd-how h3 { margin: 0 0 6px; color: var(--c); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fd-assume ul, .fd-how ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }

/* How it's built */
.fd-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fd-how section { padding: 12px 14px; border: 1px solid var(--line-s); border-radius: 12px; background: var(--card); }
.fd-how ul { color: var(--text); }
.fd-how li + li { margin-top: 4px; }
.fd-art { max-width: 560px; margin: 16px auto 0; }
.fd-art img { display: block; width: 100%; height: auto; border: 1px solid var(--line-s); border-radius: 12px; background: #0e1219; }
.fd-art figcaption { margin-top: 6px; color: var(--muted); font-size: 12px; text-align: center; }
.fd-art.is-missing { display: none; }

/* Connections */
.fd-conn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fd-node { padding: 12px 14px; border: 1px solid var(--line-s); border-radius: 12px; background: var(--card); }
.fd-node.is-this { border-color: var(--c); }
.fd-node a, .fd-node b { font-weight: 800; }
.fd-node b { color: var(--cream); }
.fd-node p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.fd-node ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.fd-also, .fd-bound { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.fd-bound { padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.fd-bound b { color: var(--gold); }

/* Pager, return, chooser, footer */
.fd-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; }
.fd-pager a { display: grid; gap: 2px; min-width: min(100%, 240px); padding: 10px 14px; border: 1px solid var(--line-s); border-radius: 12px; text-decoration: none; }
.fd-pager a:hover { border-color: var(--gold); background: var(--gold-f); }
.fd-pager .next { margin-left: auto; text-align: right; }
.fd-pager span { color: var(--dim); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fd-pager b { color: var(--gold-l); font-size: 14px; }
.fd-return { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 14px 0 0; font-size: 13px; font-weight: 700; }
.fd-notice { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--gold-f); }
.fd-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.fd-choose section { padding: 14px; border: 1px solid var(--line-s); border-top: 3px solid var(--c); border-radius: 14px; background: var(--panel); }
.fd-choose h2 { color: var(--c); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.fd-choose ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fd-choose a { display: block; padding: 9px 12px; border: 1px solid var(--line-s); border-radius: 10px; background: var(--chip); text-decoration: none; }
.fd-choose a:hover { border-color: var(--line); }
.fd-choose a b { display: block; color: var(--cream); }
.fd-choose a small { color: var(--muted); }
.fd-noscript { margin-top: 24px; text-align: center; }
.fd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; width: min(calc(100% - 32px), var(--max)); margin: 0 auto; padding: 16px 0 26px; border-top: 1px solid var(--line-s); color: var(--dim); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 860px) {
  .fd-outs ol, .fd-how, .fd-conn, .fd-choose, .fd-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fd-top { padding: 0 14px; }
  .fd-brand { font-size: 15px; }
  .fd-blk { padding: 12px; }
  .fd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fd-table, .fd-table tbody, .fd-table tr, .fd-table th, .fd-table td { display: block; width: 100%; }
  .fd-table tr { padding: 8px 0; border-bottom: 1px solid var(--line-s); }
  .fd-table th, .fd-table td { padding: 3px 0; border: 0; }
  .fd-table td::before { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; content: attr(data-label); }
  .fd-pager { flex-direction: column; }
  .fd-pager a { min-width: 0; }
  .fd-pager .next { margin-left: 0; }
}
@media (max-width: 480px) {
  .fd-brand span, .fd-brand strong::after { display: none; }
}
/* I13: paired-foundation diagram (foundation and report pages) */
.fd-pair { margin: 22px 0 0; padding: 14px 16px 16px; border: 1px solid var(--line-s); border-radius: 14px; background: var(--panel); }
.fd-pair > h2 { margin: 0 0 2px; font-size: 15px; }
.fd-pair > p { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }
.fd-pflow { display: flex; flex-direction: column-reverse; max-width: 900px; margin: 0 auto; }
.fd-pins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fd-in { min-width: 0; padding: 10px 12px; border: 1px solid var(--line-s); border-top: 3px solid var(--c); border-radius: 12px; background: linear-gradient(180deg, var(--cbg), transparent 75%), var(--chip); overflow-wrap: anywhere; }
.fd-in.is-rec { --cbg: rgba(127,176,255,.12); }
.fd-in.is-ai { --cbg: rgba(79,209,165,.12); }
.fd-in .fd-label { color: var(--c); }
.fd-in a, .fd-in > b { font-weight: 800; }
.fd-in > b { color: var(--cream); }
.fd-in small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.fd-in p { margin: 6px 0 0; color: var(--text); font-size: 12.5px; }
.fd-in ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.fd-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 30px; }
.fd-up.is-one { grid-template-columns: minmax(0, 1fr); height: 24px; }
.fd-up i { position: relative; justify-self: center; width: 2px; background: linear-gradient(0deg, var(--c), var(--gold)); }
.fd-up.is-one i { background: var(--gold); }
.fd-up i::before { position: absolute; top: -2px; left: 50%; width: 0; height: 0; border-style: solid; border-color: transparent transparent var(--gold); border-width: 0 7px 11px; transform: translateX(-50%); content: ''; }
.fd-pout { padding: 10px 14px; border: 1px solid rgba(212,175,55,.6); border-radius: 12px; background: radial-gradient(ellipse at center, rgba(212,175,55,.16), transparent 75%), var(--chip); text-align: center; }
.fd-pout b { display: block; color: var(--cream); font-size: 14.5px; line-height: 1.35; }
.fd-pout p { max-width: 720px; margin: 4px auto 0; color: var(--text); font-size: 12.5px; }
.fd-pact { padding: 9px 14px; border: 1px dashed var(--line); border-radius: 12px; font-size: 13px; text-align: center; }
.fd-pact p { margin: 0; }
.fd-pact b { color: var(--cream); }
.fd-pact a { display: inline-block; margin-top: 4px; font-weight: 800; }

/* I13: reporting sample pages */
.rp-outs { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.rp-outs b { color: var(--cream); }
.fd-doc > .fd-blk:first-child { border-top: 0; }
.rp-b { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-s); border-radius: 10px; background: var(--chip); color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px; text-align: left; }
.rp-b:hover { border-color: var(--line); }
.rp-b[aria-pressed='true'] { border-color: var(--gold); background: var(--gold-f); box-shadow: inset 0 0 0 1px var(--gold); }
.rp-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rp-pick { font-weight: 700; }
.rp-pick[aria-pressed='true'] { color: var(--gold-l); }
.rp-picks i, .rp-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.rp-rows, .rp-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rp-row, .rp-inv, .rp-chk { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 220px); gap: 4px 12px; align-items: center; width: 100%; }
.rp-lab { min-width: 0; color: var(--text); font-size: 12.5px; }
.rp-lab small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rp-lab b { color: var(--cream); }
.rp-val { color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rp-track { position: relative; display: block; height: 18px; border-left: 2px solid var(--muted); border-radius: 0 4px 4px 0; background: rgba(255,255,255,.05); }
.rp-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 0 4px 4px 0; background: var(--gold); }
.rp-k-billed { border: 1px solid var(--gold-l); background: rgba(212,175,55,.14); }
.rp-track .rp-k-paid { top: 5px; bottom: 5px; }
.rp-k-paid, .rp-k-c { background: var(--ai); }
.rp-k-d { background: #f87171; }
.rp-k-o { background: var(--gold); }
.rp-stack { position: absolute; top: 0; bottom: 0; left: 0; display: flex; overflow: hidden; border-radius: 0 4px 4px 0; }
.rp-stack > span { display: grid; min-width: 18px; place-items: center; color: #0b0e14; font-size: 11px; font-weight: 800; }
.rp-stack > span + span { border-left: 1px solid var(--bg); }
.rp-stack > span:not(.is-sel) { opacity: .4; }
.rp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.rp-card { display: grid; align-content: start; gap: 2px; }
.rp-card small { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rp-card b { color: var(--cream); font-size: 26px; font-weight: 800; line-height: 1.1; }
.rp-card em { margin-top: 4px; color: var(--muted); font-size: 12px; font-style: normal; }
.rp-trend { max-width: 420px; margin: 0; }
.rp-trend svg { display: block; width: 100%; height: auto; }
.rp-sbar { fill: var(--rec); }
.rp-sval { fill: var(--cream); font: 800 12px var(--sans); }
.rp-slab { fill: var(--muted); font: 11px var(--sans); }
.rp-axis { stroke: var(--muted); stroke-width: 1.5; }
.rp-trend figcaption { margin-top: 4px; color: var(--muted); font-size: 12px; }
.rp-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.rp-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 112px; }
.rp-col b { color: var(--cream); font-size: 12.5px; line-height: 1.3; }
.rp-n { color: var(--gold-l); font-size: 22px; font-weight: 800; line-height: 1; }
.rp-n small { color: var(--muted); font-size: 11px; font-weight: 700; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rp-chips > span { padding: 1px 7px; border: 1px solid var(--line-s); border-radius: 999px; color: var(--muted); font-size: 11px; }
.rp-chips > .is-gap { border-color: rgba(248,113,113,.6); color: #fca5a5; }
.fd-blk .rp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 4px; }
.fd-blk .rp-tiles div { padding: 8px 10px; border: 1px solid var(--line-s); border-radius: 10px; background: var(--chip); }
.fd-blk .rp-tiles dt { font-size: 11px; font-weight: 800; }
.fd-blk .rp-tiles dd { color: var(--cream); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fd-blk .rp-tiles small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.rp-detail { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(212,175,55,.04); }
.rp-go { margin: 10px 0 0; font-size: 13px; font-weight: 800; }
.rp-tx { margin-top: 10px; }
.rp-tx summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--gold-l); cursor: pointer; font-size: 12.5px; font-weight: 700; }
.rp-choose { grid-template-columns: minmax(0, 1fr); }
.rp-choose ul { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 860px) {
  .rp-board { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .fd-blk .rp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rp-row, .rp-inv, .rp-chk { grid-template-columns: minmax(0, 1fr); }
  .rp-col { min-height: 0; }
  .fd-pair { padding: 12px; }
  .fd-pins { gap: 6px; }
  .fd-in { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .fd-top, .fd-fnav, .fd-tabs, .fd-pager, .skip-link { display: none !important; }
  .fd-panel[hidden] { display: block !important; }
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* I14: workflow sample pages (stage rail, scenario states, fork, handoff, event lineage) */
.wf-tag { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wf-tag.is-hyp { color: var(--rec); }
.fd-badge.is-hyp { border-color: rgba(127,176,255,.6); color: var(--rec); }
.wf-note { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: rgba(212,175,55,.06); font-size: 13px; }
.wf-note.is-hyp { border-left-color: var(--rec); background: rgba(127,176,255,.08); }
.wf-note b { color: var(--cream); }
.wf-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.wf-rail li { position: relative; display: flex; min-width: 0; }
.wf-rail li + li::before { position: absolute; top: 50%; left: -15px; color: var(--gold); content: '→'; font-weight: 800; line-height: 1; transform: translateY(-50%); }
.wf-stage { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--line-s); border-top: 3px solid var(--sc, var(--muted)); border-radius: 10px; background: var(--chip); color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px; text-align: left; }
.wf-stage.is-ok { --sc: var(--ai); }
.wf-stage.is-open { --sc: var(--gold); }
.wf-stage.is-miss { --sc: #f87171; }
.wf-stage:hover { background: #222a39; }
.wf-stage[aria-pressed='true'] { border-color: var(--gold); border-top-color: var(--sc); background: var(--gold-f); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(212,175,55,.15); }
.wf-k { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wf-n { color: var(--gold); }
.wf-stage > b { color: var(--cream); font-size: 13px; line-height: 1.3; }
.wf-st { font-size: 12px; overflow-wrap: anywhere; }
.wf-sel { color: var(--gold-l); font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wf-detail .fd-badge { margin-bottom: 4px; }
.wf-ro { margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
.wf-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px 18px; }
.wf-dgrid h5, .wf-tool h5 { margin: 0 0 6px; color: var(--gold); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fd-blk .wf-dgrid dl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.wf-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.wf-tool { min-width: 0; padding: 10px 12px; border: 1px solid var(--line-s); border-radius: 10px; background: var(--chip); font-size: 12.5px; overflow-wrap: anywhere; }
.wf-tool p { margin: 0; }
.wf-gate { display: inline-block; padding: 3px 10px; border: 1px solid var(--gold); border-radius: 6px; color: var(--cream); font-weight: 700; }
.wf-fork ul { display: grid; gap: 4px; margin: 6px 0 0 10px; padding: 0 0 0 14px; border-left: 2px solid var(--line-s); list-style: none; }
.wf-fork li { position: relative; padding: 3px 8px; border-radius: 6px; color: var(--muted); }
.wf-fork li::before { position: absolute; top: 12px; left: -14px; width: 12px; height: 2px; background: var(--line-s); content: ''; }
.wf-fork li.is-on { background: var(--gold-f); color: var(--cream); font-weight: 700; }
.wf-fork li.is-on::before { background: var(--gold); }
.wf-fork em { display: block; color: var(--gold-l); font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wf-tool .wf-hand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.wf-role { padding: 3px 9px; border: 1px solid var(--line-s); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--cream); font-weight: 700; }
.wf-arr { color: var(--gold); font-weight: 800; }
.wf-line { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wf-line li { padding: 2px 0 2px 10px; border-left: 2px solid var(--gold); }
.wf-line .wf-k { display: block; }
.wf-line li + li .wf-k::before { color: var(--gold); content: '↓ '; }
.wf-prpt ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 4px 0 0; padding: 0; list-style: none; }
.wf-prpt li { max-width: 320px; }
.wf-prpt a { margin-top: 0; }
.wf-prpt small { display: block; color: var(--muted); font-size: 11.5px; }
.fd-pair > .wf-back { display: flex; gap: 10px; align-items: flex-start; max-width: 900px; margin: 10px auto 0; padding: 8px 12px; border: 1px dashed var(--gold); border-radius: 10px; color: var(--text); }
.wf-back > span:first-child { color: var(--gold); font-size: 18px; line-height: 1.1; }
.wf-back b { color: var(--cream); }
.wf-events { margin-top: 10px; }
@media (max-width: 760px) {
  .wf-rail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wf-rail li + li::before { top: -14px; left: 16px; content: '↓'; transform: none; }
}
@media (max-width: 640px) {
  .wf-dgrid, .wf-tools { grid-template-columns: minmax(0, 1fr); }
}

/* I15: custom system sample workspaces */
.cs-ws { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.cs-wh { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line-s); }
.cs-wh b { color: var(--cream); font-size: 15px; }
.cs-wh small { color: var(--muted); font-size: 11.5px; }
.cs-met { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cs-met li { min-width: 0; padding: 8px 10px; border: 1px solid var(--line-s); border-left: 3px solid var(--gold); border-radius: 10px; background: var(--card); overflow-wrap: anywhere; }
.cs-met b { display: block; color: var(--gold-l); font-size: 18px; }
.cs-met span { display: block; color: var(--cream); font-size: 12.5px; font-weight: 700; }
.cs-met small { color: var(--muted); font-size: 11px; }
.cs-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px; align-items: start; }
.cs-q { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cs-item { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 1px solid var(--line-s); border-left: 4px solid var(--muted); border-radius: 10px; background: var(--chip); color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.cs-item.is-ok { border-left-color: var(--ai); }
.cs-item.is-open { border-left-color: var(--gold); }
.cs-item.is-miss { border-left-color: #e07a5f; border-left-style: double; }
.cs-item b { color: var(--cream); }
.cs-item[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-f); box-shadow: inset 0 0 0 1px var(--gold); }
.cs-item:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.cs-id { color: var(--rec); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.cs-det { min-width: 0; overflow-wrap: anywhere; }
.cs-links { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 8px 0 0; font-size: 12.5px; }
.cs-links a { font-weight: 800; }
.cs-mode { color: var(--muted); font-size: 11px; }
.cs-pb { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--ai); color: var(--text); font-size: 12.5px; }
.cs-fields { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; text-align: center; }
.cs-fields b { color: var(--cream); }
.cs-emb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
.cs-emb ul { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.cs-emb small { display: block; color: var(--muted); font-size: 11.5px; }
.cs-custom { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; margin: 0; padding-left: 18px; font-size: 13px; }
.cs-custom b { color: var(--cream); }
@media (max-width: 760px) {
  .cs-grid, .cs-emb { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cs-met { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* I16: AI tool sample outputs (question, cited output, sources, review) */
.at-static { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--gold-f); font-size: 12.5px; }
.at-static b { color: var(--gold-l); }
.at-static span { color: var(--muted); }
.at-hyp { margin: 0 0 12px; padding: 8px 12px; border: 1px dashed var(--gold); border-radius: 10px; font-size: 13px; }
.at-flow { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
.at-q, .at-rev { grid-column: 1 / -1; }
.at-q, .at-out, .at-ev, .at-rev { min-width: 0; padding: 10px 12px; border: 1px solid var(--line-s); border-radius: 12px; background: var(--chip); overflow-wrap: anywhere; }
.at-q p { margin: 2px 0 0; color: var(--cream); font-weight: 700; }
.at-out { border-color: rgba(212,175,55,.6); }
.at-out h4 { margin: 8px 0 4px; color: var(--cream); font-size: 13px; }
.at-out h4 small { color: var(--muted); font-weight: 600; }
.at-lines { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: 13px; }
.at-cites { white-space: nowrap; }
.at-cite { min-width: 26px; min-height: 26px; margin-left: 2px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--gold-l); cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 800; }
.at-cite:hover { background: var(--gold-f); }
.at-cite:focus-visible, .at-src:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.at-draft { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: rgba(255,255,255,.03); color: var(--text); font-size: 13px; }
.at-draft .fd-label { display: block; margin-bottom: 4px; }
.at-gap { margin: 8px 0 0; color: var(--text); font-size: 12.5px; }
.at-gap b { color: var(--gold-l); }
.at-srcs { display: grid; gap: 6px; margin: 4px 0 8px; padding: 0; list-style: none; }
.at-src.is-rec, .at-sd.is-rec { --c: var(--rec); }
.at-src.is-ai, .at-sd.is-ai { --c: var(--ai); }
.at-src { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-s); border-left: 3px solid var(--c); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px; text-align: left; }
.at-src .at-n { grid-row: span 2; align-self: center; color: var(--c); font-weight: 800; }
.at-src b { color: var(--cream); }
.at-src small { color: var(--muted); font-size: 11.5px; }
.at-src[aria-pressed='true'] { border-color: var(--gold); border-left-color: var(--c); background: var(--gold-f); box-shadow: inset 0 0 0 1px var(--gold); }
.at-sd { padding: 8px 10px; border: 1px solid var(--line-s); border-top: 3px solid var(--c); border-radius: 10px; font-size: 12.5px; }
.at-sd .fd-label { color: var(--c); }
.at-sd dl { display: grid; gap: 4px; margin: 4px 0 6px; }
.at-sd dt { color: var(--muted); font-size: 11.5px; }
.at-sd dd { margin: 0; color: var(--text); }
.at-sd a { font-weight: 800; }
.at-rev { border-style: dashed; border-color: var(--line); }
.at-rev p { margin: 4px 0 0; font-size: 13px; }
.at-rev b { color: var(--cream); }
.at-trev { margin-top: 12px; }
.at-rules { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
@media (max-width: 760px) {
  .at-flow { grid-template-columns: minmax(0, 1fr); }
  .at-cites { white-space: normal; }
}

/* I17: training & adoption samples (artifact, practice choice, evidence log, learning loop) */
.ta-label { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--gold-f); font-size: 12.5px; }
.ta-label b { color: var(--gold-l); }
.ta-label span { color: var(--muted); }
.ta-flow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
.ta-art, .ta-try, .ta-own { min-width: 0; padding: 10px 12px; border: 1px solid var(--line-s); border-radius: 12px; background: var(--chip); overflow-wrap: anywhere; }
.ta-art { border-color: rgba(212,175,55,.6); }
.ta-art h3 { margin: 2px 0 2px; color: var(--cream); font-size: 15px; }
.ta-art .ta-id { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.ta-meta { display: grid; gap: 4px; margin: 0 0 8px; }
.ta-meta div { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line-s); font-size: 13px; }
.ta-meta dt { color: var(--muted); font-size: 12px; }
.ta-meta dd { margin: 0; color: var(--text); }
.ta-art h4, .ta-try h4 { margin: 8px 0 4px; color: var(--cream); font-size: 13px; }
.ta-steps { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: 13px; }
.ta-try .ta-qq { margin: 2px 0 8px; color: var(--cream); font-weight: 700; }
.ta-chs { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.ta-ch { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-s); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.ta-ch small { color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.ta-ch:hover { border-color: var(--line); }
.ta-ch[aria-pressed='true'] { border-color: var(--gold); background: var(--gold-f); box-shadow: inset 0 0 0 1px var(--gold); }
.ta-ch:focus-visible, .ta-reset:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.ta-fb { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line-s); border-left: 3px solid var(--ai); border-radius: 0 10px 10px 0; font-size: 13px; }
.ta-fb.is-miss { border-left-color: var(--gold); border-left-style: dashed; }
.ta-fb p { margin: 4px 0 0; }
.ta-fb b { color: var(--cream); }
.ta-fb .ta-st { display: inline-block; margin-bottom: 2px; color: var(--gold-l); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.ta-reset { min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--gold-l); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; }
.ta-reset[disabled] { opacity: .45; cursor: default; }
.ta-own { grid-column: 1 / -1; border-style: dashed; border-color: var(--line); }
.ta-own p { margin: 4px 0 0; font-size: 13px; }
.ta-own b { color: var(--cream); }
.ta-obs { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line-s); border-radius: 10px; background: var(--chip); font-size: 13px; }
.ta-obs b { color: var(--cream); }
.ta-rules { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
.ta-tbl { margin-top: 8px; }
@media (max-width: 760px) {
  .ta-flow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ta-meta div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* I18: What we build pages (build-detail.html) */
.build-gap { margin-top: 10px; }
.build-flow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.build-prev, .build-sheet { min-width: 0; padding: 12px 14px; border: 1px solid var(--line-s); border-radius: 12px; background: var(--card); }
.build-prev { border-color: rgba(212,175,55,.6); }
.build-prev h3, .build-sheet h3 { margin: 0 0 8px; color: var(--cream); font-size: 15px; }
.build-sheet dl, .build-kv { display: grid; gap: 6px; margin: 10px 0 0; }
.build-sheet dl div, .build-kv div { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-s); }
.build-sheet dt, .build-kv dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.build-sheet dd, .build-kv dd { margin: 0; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.build-bars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.build-bars li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.build-bars i { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-l)); }
.build-bars b { color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; }
.build-bars small { color: var(--muted); font-weight: 600; }
.build-foot { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.build-stages { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: bst; }
.build-stages li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--line-s); border-radius: 10px; background: var(--chip); font-size: 13px; }
.build-stages li::before { color: var(--gold); font-weight: 800; content: counter(bst); counter-increment: bst; }
.build-stages b { color: var(--cream); }
.build-stages small { display: block; color: var(--muted); font-size: 12px; }
.build-st { padding: 1px 8px; border: 1px solid var(--line-s); border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.build-st.is-done { border-color: var(--ai); color: var(--ai); }
.build-st.is-held { border-color: var(--gold); border-style: dashed; color: var(--gold-l); }
.build-st.is-wait { color: var(--muted); }
.build-dh { margin: 0 0 6px; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.build-draft { margin: 0; padding: 10px 12px; border-left: 3px solid var(--ai); border-radius: 0 10px 10px 0; background: rgba(79,209,165,.06); color: var(--cream); font-size: 13.5px; }
.build-cites { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; }
.build-cites span { margin-right: 6px; color: var(--gold-l); font-weight: 800; }
.build-steps { margin: 0; padding-left: 20px; font-size: 13px; }
.build-steps li + li { margin-top: 4px; }
.build-arts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.build-arts li { padding: 12px 14px; border: 1px solid var(--line-s); border-top: 3px solid var(--gold); border-radius: 12px; background: var(--card); }
.build-arts b { color: var(--cream); }
.build-arts p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.build-what h3 { margin: 0 0 8px; color: var(--gold); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.build-vars { margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; }
.fd-node .build-rel small { display: block; color: var(--muted); }
@media (max-width: 760px) {
  .build-flow, .build-arts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .build-sheet dl div, .build-kv div, .build-bars li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .build-stages li { grid-template-columns: 22px minmax(0, 1fr); }
  .build-st { grid-column: 2; justify-self: start; }
}

/* I20: AI Knowledge & Context artwork and workspace kit preview */
.build-art { margin: 22px 0 0; padding: 10px; border: 1px solid var(--gold); border-radius: 14px; background: var(--panel); }
.build-art img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; }
.build-kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.build-kit section { min-width: 0; padding: 8px 10px; border: 1px solid var(--line-s); border-radius: 10px; background: var(--chip); }
.build-kit h4 { margin: 0 0 4px; color: var(--gold-l); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: none; }
.build-kit ul { margin: 0; padding-left: 16px; color: var(--text); font-size: 12.5px; }
@media (max-width: 760px) { .build-kit { grid-template-columns: minmax(0, 1fr); } }