/* SYSTEM PAGE — composition for system.html only. No new components: everything
   here is page furniture (table of contents, swatches, specimens, demo frames).
   Component rules live in css/components.css; tokens in css/theme.css. */

.mini-header .nav-toggle{display:inline-flex}
.sub{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--s)*4);margin:calc(var(--s)*14) 0 calc(var(--s)*5);padding-bottom:calc(var(--s)*3);border-bottom:1px solid var(--color-line)}
.sub:first-of-type{margin-top:0}
.stack-4 > * + *{margin-top:calc(var(--s)*4)}
.stack-6 > * + *{margin-top:calc(var(--s)*6)}

/* Hero */
.hero{padding-block:calc(var(--spacing-section) * .9) var(--spacing-section)}
.hero h1{font-size:var(--text-display);font-weight:900;letter-spacing:-0.03em;line-height:1.05;max-width:16ch;margin-block:calc(var(--s)*4) calc(var(--s)*6)}
.hero .lede{margin-bottom:calc(var(--s)*8)}
.hero__actions{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);margin-bottom:calc(var(--s)*14)}
.toc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 calc(var(--s)*6);border-top:1px solid var(--color-brand-100)}
@media (min-width:48rem){.toc{grid-template-columns:repeat(4,minmax(0,1fr))}}
.toc a{display:flex;gap:calc(var(--s)*3);align-items:baseline;min-height:44px;padding-block:calc(var(--s)*3);border-bottom:1px solid var(--color-brand-100);text-decoration:none;font-weight:500;font-size:var(--text-sm);color:var(--color-ink-900)}
.toc a:hover{color:var(--color-brand-700)}
.toc .num{font-size:var(--text-meta);color:var(--color-ink-500);letter-spacing:.08em}

/* Swatches */
.swatches{display:grid;gap:calc(var(--s)*4);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.swatch{border:1px solid var(--color-line);border-radius:var(--radius);overflow:hidden;background:var(--color-surface)}
.swatch__chip{height:calc(var(--s)*24);display:flex;align-items:flex-end;justify-content:space-between;padding:calc(var(--s)*3);font-weight:700;font-size:var(--text-sm)}
.swatch__chip--line{box-shadow:inset 0 -1px 0 var(--color-line)}
.swatch__body{padding:calc(var(--s)*3) calc(var(--s)*4) calc(var(--s)*4)}
.swatch__name{font-weight:500;font-size:var(--text-sm);color:var(--color-ink-900)}
.swatch__hex{font-size:var(--text-meta);color:var(--color-ink-500);font-variant-numeric:tabular-nums;text-transform:uppercase}
.swatch__use{font-size:var(--text-meta);color:var(--color-ink-500);margin-top:calc(var(--s)*2)}
.swatch__ratio{display:flex;justify-content:space-between;gap:calc(var(--s)*2);font-size:var(--text-meta);color:var(--color-ink-700);margin-top:calc(var(--s)*2);padding-top:calc(var(--s)*2);border-top:1px solid var(--color-line-soft)}

/* Ramp strip */
.ramp{display:grid;grid-template-columns:repeat(5,1fr);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-line);margin-bottom:calc(var(--s)*6)}
.ramp div{height:calc(var(--s)*20);display:flex;align-items:flex-end;padding:calc(var(--s)*3);font-size:var(--text-meta);font-weight:500}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface)}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:560px}
caption{text-align:left}
th,td{text-align:left;vertical-align:top;padding:calc(var(--s)*3) calc(var(--s)*4);border-bottom:1px solid var(--color-line-soft)}
thead th{font-size:var(--text-meta);font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--color-ink-500);background:var(--color-surface);border-bottom:1px solid var(--color-line)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody th{font-weight:500;color:var(--color-ink-900)}
td{color:var(--color-ink-700)}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pass,.fail,.large{display:inline-flex;align-items:center;gap:calc(var(--s)*1);font-weight:500;white-space:nowrap}
.pass{color:var(--color-ink-900)}
.pass::before{content:"✓";color:var(--color-brand-700)}
.large{color:var(--color-ink-700)}
.large::before{content:"◐";color:var(--color-ink-500)}
.fail{color:var(--color-ink-900)}
.fail::before{content:"✕";color:var(--color-ink-500)}
.swatch-dot{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--color-line);vertical-align:-2px;margin-right:calc(var(--s)*2)}

/* Type specimens */
.specimen{display:grid;gap:calc(var(--s)*3);padding-block:calc(var(--s)*8);border-bottom:1px solid var(--color-line)}
.specimen:first-child{padding-top:0}
@media (min-width:64rem){.specimen{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:baseline;gap:calc(var(--s)*10)}}
.specimen__spec{display:flex;flex-direction:column;gap:calc(var(--s)*1)}
.t-display{font-size:var(--text-display);font-weight:900;letter-spacing:-0.03em;line-height:1.05}
.t-h2{font-size:var(--text-h2);font-weight:900;letter-spacing:-0.02em;line-height:1.15}
.t-h3{font-size:var(--text-h3);font-weight:700;letter-spacing:-0.015em;line-height:1.25}
.t-lede{font-size:var(--text-lede);line-height:1.5;color:var(--color-ink-700)}
.t-body{font-size:var(--text-body);line-height:1.65;color:var(--color-ink-700);max-width:60ch}
.t-sm{font-size:var(--text-sm);color:var(--color-ink-500)}
.t-role{font-size:var(--text-sm);font-weight:300}
.weights{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:calc(var(--s)*4);margin-top:calc(var(--s)*8)}
.weight{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);padding:calc(var(--s)*4)}
.weight__aa{font-size:2.5rem;line-height:1;margin-bottom:calc(var(--s)*3)}
.weight__meta{font-size:var(--text-meta);color:var(--color-ink-500)}

/* Spacing visual */
.space-row{display:grid;grid-template-columns:calc(var(--s)*16) 1fr calc(var(--s)*20);align-items:center;gap:calc(var(--s)*4);padding-block:calc(var(--s)*2);font-size:var(--text-meta);color:var(--color-ink-500)}
.space-row span:nth-child(2){display:block;height:12px;background:var(--color-brand-100);border-radius:3px}
.radii,.shadows{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:calc(var(--s)*5)}
.radius-demo,.shadow-demo{height:calc(var(--s)*24);background:var(--color-surface);border:1px solid var(--color-line);display:flex;align-items:flex-end;padding:calc(var(--s)*3);font-size:var(--text-meta);color:var(--color-ink-500)}
.shadow-demo{border-color:var(--color-line-soft);border-radius:var(--radius)}

/* Component demo panels */
.demo{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);overflow:hidden}
.demo + .demo{margin-top:calc(var(--s)*6)}
.demo__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:calc(var(--s)*2) calc(var(--s)*6);padding:calc(var(--s)*5) calc(var(--s)*6);border-bottom:1px solid var(--color-line-soft)}
.demo__title{display:flex;align-items:baseline;gap:calc(var(--s)*3)}
.demo__title .h3{font-size:1.25rem}
.demo__base{font-size:var(--text-meta);color:var(--color-ink-500)}
.demo__body{padding:calc(var(--s)*6)}
.demo__foot{padding:calc(var(--s)*4) calc(var(--s)*6);border-top:1px solid var(--color-line-soft);background:var(--color-surface-alt);font-size:var(--text-sm);color:var(--color-ink-700)}
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:calc(var(--s)*5) calc(var(--s)*4);align-items:end}
.state{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--s)*2)}
.state__label{font-size:var(--text-meta);color:var(--color-ink-500)}
.variant + .variant{margin-top:calc(var(--s)*8);padding-top:calc(var(--s)*6);border-top:1px dashed var(--color-line)}
.variant__name{font-size:var(--text-meta);font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--color-ink-500);margin-bottom:calc(var(--s)*4)}
.cards{display:grid;gap:calc(var(--s)*6)}
@media (min-width:48rem){.cards{grid-template-columns:1fr 1fr}}
.section-strips{display:grid;gap:calc(var(--s)*3)}
.section-strip{padding:calc(var(--s)*6);border:1px solid var(--color-line);border-radius:var(--radius);display:flex;justify-content:space-between;gap:calc(var(--s)*4);flex-wrap:wrap}
.placeholder{aspect-ratio:16/10;background:var(--color-surface-tint);display:block;width:100%;height:auto}
.placeholder--wide{aspect-ratio:16/9}
.mini-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--s)*4);padding:calc(var(--s)*3) calc(var(--s)*5);border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface);flex-wrap:wrap}
.mini-footer{background:var(--color-surface-deep);color:var(--color-ink-inverse);border-radius:var(--radius);padding:calc(var(--s)*6);display:flex;justify-content:space-between;align-items:center;gap:calc(var(--s)*4);flex-wrap:wrap}
.mini-footer .wordmark__name,.mini-footer .wordmark__role{color:var(--color-ink-inverse)}

/* Pipeline */
.pipeline{list-style:none;margin:0 0 calc(var(--s)*10);padding:0;display:grid;gap:calc(var(--s)*3);counter-reset:step}
@media (min-width:64rem){.pipeline{grid-template-columns:repeat(4,1fr)}}
.pipeline li{position:relative;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);padding:calc(var(--s)*5);box-shadow:var(--shadow-1)}
.pipeline li strong{display:block;font-weight:700;margin:calc(var(--s)*2) 0 calc(var(--s)*1)}
.pipeline li p{font-size:var(--text-sm);color:var(--color-ink-500)}

/* Motion demo */
.motion-demo{display:flex;flex-wrap:wrap;gap:calc(var(--s)*6);align-items:center;margin-bottom:calc(var(--s)*10)}
.ease-track{flex:1 1 320px;height:56px;border:1px solid var(--color-line);border-radius:var(--radius);background:var(--color-surface);position:relative;overflow:hidden}
.ease-dot{position:absolute;top:50%;left:calc(var(--s)*3);width:32px;height:32px;margin-top:-16px;border-radius:50%;background:var(--color-brand-600);transition:left var(--duration-slow) var(--ease-brand)}
.ease-track.is-run .ease-dot{left:calc(100% - 32px - var(--s)*3)}

/* Why publish */
.why{display:grid;gap:calc(var(--s)*10)}
@media (min-width:64rem){.why{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(var(--s)*12)}}