/* ============================================================
   DESIGN SYSTEM — case study styles
   Showcases a product design system (the system behind Bridge)
   rendered as live native tokens & components on warm paper.
   ============================================================ */

/* ---- showcased SYSTEM tokens (scoped to body.ds) ---- */
.ds{
  --ds-primary:#3457C4;
  --ds-primary-600:#2A48A8;
  --ds-primary-100:#DCE3F8;
  --ds-primary-50:#EEF1FC;
  --ds-ink:#0E1525;
  --ds-ink-2:#3A4255;
  --ds-surface:#FFFFFF;
  --ds-surface-2:#F6F7FB;
  --ds-line:#E4E7F0;
  --ds-muted:#6B7280;
  --ds-success:#1CA45C;
  --ds-warn:#E0911F;
  --ds-error:#E5484D;
}

/* page accent inherits the system primary */
.ds{ --accent:#3457C4; }
[data-theme="dark"] .ds{ --accent:#8AA0F2; }

/* ---------- generic section intro ---------- */
.ds-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---------- FOUNDATION BLOCK ---------- */
.found{ border-top:1px solid var(--line); padding-top:46px; margin-top:60px; }
.found:first-of-type{ border-top:none; }
.found-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:30px; flex-wrap:wrap; }
.found-num{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.08em; }
.found-head h3{ font-size:clamp(24px,3vw,34px); font-weight:600; letter-spacing:-.025em; }
.found-head h3 em{ font-family:var(--serif); font-style:italic; font-weight:400; }
.found-desc{ max-width:60ch; color:var(--muted); font-size:16px; margin:-12px 0 30px; }

/* spec card surface (a white artboard sitting on warm paper) */
.spec{ background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:18px; padding:clamp(22px,3vw,40px);
  box-shadow:0 30px 60px -48px rgba(20,28,60,.5); color:var(--ds-ink); }
/* neo.css .spec is display:flex (about-page rows) — force block here so foundation cards stack */
.ds .spec{ display:block; }
[data-theme="dark"] .ds .spec{ box-shadow:0 30px 60px -48px rgba(0,0,0,.7); }
.spec .slabel{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ds-muted); margin-bottom:16px; display:block; }

/* ---------- COLOR ---------- */
.ramp{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border-radius:12px; overflow:hidden; border:1px solid var(--ds-line); }
.ramp .stop{ height:76px; display:flex; align-items:flex-end; padding:8px; }
.ramp .stop span{ font-family:var(--mono); font-size:9px; color:rgba(255,255,255,.85); }
.ramp .stop.dark span{ color:rgba(255,255,255,.9); }
.ramp .stop.light span{ color:rgba(20,28,60,.7); }
.ramp + .ramp{ margin-top:14px; }
.ramp-label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ds-muted); margin:20px 0 8px; }

.semantic{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:8px; }
.sem{ display:flex; align-items:center; gap:12px; border:1px solid var(--ds-line); border-radius:999px; padding:8px 16px 8px 8px; background:var(--ds-surface); }
.sem .chip{ width:38px; height:38px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(20,28,60,.08); }
.sem .meta{ min-width:0; }
.sem .meta b{ display:block; font-size:13px; font-weight:600; color:var(--ds-ink); line-height:1.2; }
.sem .meta span{ font-family:var(--mono); font-size:10px; color:var(--ds-muted); }
@media(max-width:680px){ .semantic{ grid-template-columns:repeat(2,1fr); } }

/* light + dark surface preview */
.theme-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.tp{ border-radius:14px; padding:20px; border:1px solid var(--ds-line); }
.tp.lite{ background:#FFFFFF; color:#0E1525; }
.tp.drk{ background:#0E1525; color:#EAEDF7; border-color:#222C44; }
.tp .tp-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.tp .tp-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }
.tp .tp-dot{ width:26px; height:26px; border-radius:50%; background:var(--ds-primary); }
.tp .tp-card{ border-radius:10px; padding:14px; margin-bottom:10px; }
.tp.lite .tp-card{ background:#F6F7FB; }
.tp.drk .tp-card{ background:#1A2238; }
.tp .tp-ln{ height:8px; border-radius:5px; background:currentColor; opacity:.16; }
.tp .tp-ln.s{ width:60%; margin-top:7px; opacity:.1; }
.tp .tp-btn{ display:inline-block; margin-top:4px; padding:9px 16px; border-radius:8px; background:var(--ds-primary); color:#fff; font-size:12.5px; font-weight:600; }
@media(max-width:680px){ .theme-pair{ grid-template-columns:1fr; } }

/* ---------- TYPOGRAPHY ---------- */
.type-ramp{ display:flex; flex-direction:column; }
.type-ramp .tr{ display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:18px 0; border-top:1px solid var(--ds-line); }
.type-ramp .tr:first-child{ border-top:none; }
.type-ramp .tr .sample{ color:var(--ds-ink); letter-spacing:-.02em; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.type-ramp .tr .spec-meta{ font-family:var(--mono); font-size:10.5px; color:var(--ds-muted); flex:none; text-align:right; line-height:1.5; }
.type-foot{ display:flex; gap:30px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--ds-line); }
.type-foot .tf b{ font-size:14px; color:var(--ds-ink); }
.type-foot .tf span{ font-family:var(--mono); font-size:10.5px; color:var(--ds-muted); display:block; margin-top:3px; }

/* ---------- GRID ---------- */
.grid-demo{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--ds-line); background:var(--ds-surface-2);
  display:grid; grid-template-columns:repeat(12,1fr); gap:16px; padding:18px; height:230px; }
.grid-demo .col{ background:rgba(52,87,196,.12); border:1px solid rgba(52,87,196,.22); border-radius:5px; }
.grid-meta{ display:flex; gap:26px; flex-wrap:wrap; margin-top:18px; }
.grid-meta .gm{ font-size:13.5px; color:var(--ds-ink); }
.grid-meta .gm b{ font-family:var(--mono); font-size:11px; color:var(--ds-muted); display:block; letter-spacing:.06em; margin-bottom:3px; font-weight:400; }
@media(max-width:680px){ .grid-demo{ grid-template-columns:repeat(6,1fr); height:160px; } }

/* ---------- SHADOWS / ELEVATION ---------- */
.elev-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.elev{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.elev .box{ width:100%; aspect-ratio:1; border-radius:14px; background:var(--ds-surface); border:1px solid var(--ds-line); }
.elev .e1{ box-shadow:0 1px 2px rgba(20,28,60,.12); }
.elev .e2{ box-shadow:0 3px 8px -2px rgba(20,28,60,.16); }
.elev .e3{ box-shadow:0 8px 18px -6px rgba(20,28,60,.20); }
.elev .e4{ box-shadow:0 16px 30px -10px rgba(20,28,60,.26); }
.elev .e5{ box-shadow:0 28px 50px -14px rgba(20,28,60,.34); }
.elev .lab{ font-family:var(--mono); font-size:10px; color:var(--ds-muted); letter-spacing:.06em; text-align:center; }
@media(max-width:680px){ .elev-row{ grid-template-columns:repeat(3,1fr); } }

/* ---------- SPACING & RADIUS ---------- */
.sr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.space-scale{ display:flex; flex-direction:column; gap:12px; }
.space-scale .sp{ display:flex; align-items:center; gap:14px; }
.space-scale .bar{ height:14px; background:var(--ds-primary); border-radius:3px; flex:none; }
.space-scale .sp span{ font-family:var(--mono); font-size:11px; color:var(--ds-muted); }
.radius-scale{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.radius-scale .rc{ aspect-ratio:1.3; background:var(--ds-primary-50); border:1.5px solid var(--ds-primary); display:flex; align-items:flex-end; padding:10px; }
.radius-scale .rc span{ font-family:var(--mono); font-size:10px; color:var(--ds-primary-600); }
@media(max-width:680px){ .sr-grid{ grid-template-columns:1fr; } }

/* ---------- ICONS ---------- */
.icon-grid{ display:grid; grid-template-columns:repeat(9,1fr); gap:14px; }
.icon-grid .ic{ aspect-ratio:1; border:1px solid var(--ds-line); border-radius:12px; display:grid; place-items:center; color:var(--ds-ink);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.icon-grid .ic:hover{ background:var(--ds-primary); color:#fff; transform:translateY(-3px); }
.icon-grid .ic svg{ width:24px; height:24px; }
.icon-weights{ display:flex; gap:24px; align-items:center; margin-top:22px; padding-top:20px; border-top:1px solid var(--ds-line); flex-wrap:wrap; }
.icon-weights .iw{ display:flex; align-items:center; gap:10px; color:var(--ds-ink); }
.icon-weights .iw span{ font-family:var(--mono); font-size:10.5px; color:var(--ds-muted); }
@media(max-width:860px){ .icon-grid{ grid-template-columns:repeat(6,1fr); } }
@media(max-width:520px){ .icon-grid{ grid-template-columns:repeat(4,1fr); } }

/* ============================================================
   COMPONENT GALLERY
   ============================================================ */
.comp-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:10px; }
@media(max-width:900px){ .comp-gallery{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .comp-gallery{ grid-template-columns:1fr; } }

.comp-card{ background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; color:var(--ds-ink);
  box-shadow:0 24px 50px -44px rgba(20,28,60,.5); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
html.js .comp-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -40px rgba(20,28,60,.45); }
.comp-stage{ flex:1; min-height:150px; display:grid; place-items:center; padding:30px 24px; background:
  radial-gradient(circle at 50% 0%, var(--ds-surface-2), var(--ds-surface) 70%); }
.comp-foot{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--ds-line); }
.comp-foot .cn{ font-family:var(--mono); font-size:10px; color:var(--ds-muted); }
.comp-foot .ct{ font-size:14px; font-weight:600; white-space:nowrap; }

/* --- shared control primitives (system-styled) --- */
.ds-btn{ font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:-.01em; padding:12px 22px; border-radius:10px;
  border:none; cursor:pointer; transition:filter .2s, transform .2s; }
.ds-btn:active{ transform:translateY(1px); }
.ds-btn.primary{ background:var(--ds-primary); color:#fff; }
.ds-btn.primary:hover{ filter:brightness(1.08); }
.ds-btn.ghost{ background:transparent; color:var(--ds-primary); border:1.5px solid var(--ds-primary); }
.ds-btn.soft{ background:var(--ds-primary-50); color:var(--ds-primary-600); }
.btn-stack{ display:flex; flex-direction:column; gap:12px; align-items:center; }

/* checkbox */
.ds-check{ display:flex; align-items:center; gap:12px; cursor:pointer; font-size:14px; color:var(--ds-ink); }
.ds-check .box{ width:22px; height:22px; border-radius:7px; border:1.5px solid var(--ds-line); display:grid; place-items:center;
  transition:background .2s, border-color .2s; background:var(--ds-surface); }
.ds-check .box svg{ width:14px; height:14px; stroke:#fff; opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s; }
.ds-check.on .box{ background:var(--ds-primary); border-color:var(--ds-primary); }
.ds-check.on .box svg{ opacity:1; transform:scale(1); }
.check-list{ display:flex; flex-direction:column; gap:16px; }

/* search */
.ds-search{ display:flex; align-items:center; gap:10px; width:100%; max-width:240px; padding:12px 16px; border-radius:11px;
  border:1.5px solid var(--ds-line); background:var(--ds-surface); color:var(--ds-muted); font-size:14px; }
.ds-search svg{ width:17px; height:17px; flex:none; }
.ds-search .cue{ width:2px; height:17px; border-radius:2px; background:var(--ds-primary); margin:0 -4px 0 0; animation:dscaret 1.1s steps(1) infinite; }
@keyframes dscaret{ 50%{ opacity:0; } }

/* switch */
.ds-switch{ width:50px; height:30px; border-radius:30px; background:var(--ds-line); position:relative; cursor:pointer; transition:background .25s; }
.ds-switch .knob{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 2px 5px rgba(20,28,60,.3); transition:left .25s var(--ease); }
.ds-switch.on{ background:var(--ds-primary); }
.ds-switch.on .knob{ left:23px; }
.switch-row{ display:flex; gap:20px; align-items:center; }

/* input field */
.ds-field{ width:100%; max-width:250px; }
.ds-field label{ font-size:12px; font-weight:600; color:var(--ds-ink-2); display:block; margin-bottom:7px; }
.ds-field .inp{ width:100%; padding:13px 15px; border-radius:11px; border:1.5px solid var(--ds-primary); background:var(--ds-surface);
  font-size:14px; color:var(--ds-ink); box-shadow:0 0 0 4px var(--ds-primary-50); }
.ds-field .hint{ font-size:11px; color:var(--ds-muted); margin-top:7px; }

/* segmented tabs */
.ds-seg{ display:inline-flex; background:var(--ds-surface-2); border-radius:11px; padding:4px; gap:2px; }
.ds-seg button{ border:none; background:transparent; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ds-muted);
  padding:9px 16px; border-radius:8px; cursor:pointer; transition:color .2s; }
.ds-seg button.on{ background:var(--ds-surface); color:var(--ds-primary); box-shadow:0 2px 6px rgba(20,28,60,.12); }

/* menu */
.ds-menu{ width:180px; background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:12px; padding:6px;
  box-shadow:0 16px 34px -16px rgba(20,28,60,.3); }
.ds-menu .mi{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px; font-size:13.5px; color:var(--ds-ink); }
.ds-menu .mi svg{ width:16px; height:16px; color:var(--ds-muted); }
.ds-menu .mi.on,.ds-menu .mi:hover{ background:var(--ds-primary-50); color:var(--ds-primary-600); }
.ds-menu .mi.on svg,.ds-menu .mi:hover svg{ color:var(--ds-primary); }
.ds-menu .sep{ height:1px; background:var(--ds-line); margin:5px 8px; }

/* filter tabs */
.ds-filters{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.ds-filter{ font-size:13px; font-weight:500; padding:9px 15px; border-radius:30px; border:1.5px solid var(--ds-line);
  background:var(--ds-surface); color:var(--ds-ink-2); cursor:pointer; transition:all .2s; }
.ds-filter.on{ background:var(--ds-primary); border-color:var(--ds-primary); color:#fff; }

/* radio */
.radio-list{ display:flex; flex-direction:column; gap:16px; }
.ds-radio{ display:flex; align-items:center; gap:12px; cursor:pointer; font-size:14px; color:var(--ds-ink); }
.ds-radio .dot{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ds-line); display:grid; place-items:center; transition:border-color .2s; }
.ds-radio .dot::after{ content:""; width:11px; height:11px; border-radius:50%; background:var(--ds-primary); transform:scale(0); transition:transform .2s; }
.ds-radio.on .dot{ border-color:var(--ds-primary); }
.ds-radio.on .dot::after{ transform:scale(1); }

/* stepper */
.ds-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--ds-line); border-radius:11px; overflow:hidden; background:var(--ds-surface); }
.ds-stepper button{ width:42px; height:42px; border:none; background:transparent; font-size:20px; color:var(--ds-primary); cursor:pointer; transition:background .2s; }
.ds-stepper button:hover{ background:var(--ds-primary-50); }
.ds-stepper .val{ min-width:46px; text-align:center; font-size:15px; font-weight:600; color:var(--ds-ink); }

/* tooltip */
.ds-tip-wrap{ position:relative; display:inline-flex; }
.ds-tip-anchor{ width:42px; height:42px; border-radius:11px; background:var(--ds-primary-50); color:var(--ds-primary); display:grid; place-items:center; cursor:pointer; }
.ds-tip{ position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%);
  background:var(--ds-ink); color:#fff; font-size:12px; font-weight:500; padding:8px 12px; border-radius:8px; white-space:nowrap; }
.ds-tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--ds-ink); }

/* slider */
.ds-slider{ width:200px; }
.ds-slider .track{ height:6px; border-radius:6px; background:var(--ds-line); position:relative; }
.ds-slider .fill{ position:absolute; left:0; top:0; height:100%; border-radius:6px; background:var(--ds-primary); width:62%; }
.ds-slider .thumb{ position:absolute; top:50%; left:62%; transform:translate(-50%,-50%); width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--ds-primary); box-shadow:0 2px 6px rgba(20,28,60,.3); cursor:grab; }
.ds-slider input{ -webkit-appearance:none; appearance:none; width:100%; height:20px; background:transparent; position:absolute; inset:0 0 auto 0; margin:0; cursor:pointer; opacity:0; }
.ds-slider .wrap{ position:relative; }
.ds-slider .num{ text-align:center; font-family:var(--mono); font-size:12px; color:var(--ds-muted); margin-top:14px; }

/* ---------- SYSTEM IN ACTION ---------- */
.action-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:760px){ .action-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- RESULTS ---------- */
.res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.res{ padding:46px 36px; border-right:1px solid var(--line); }
.res:first-child{ padding-left:0; }
.res:last-child{ border-right:none; padding-right:0; }
.res .rv{ font-size:clamp(34px,4.4vw,56px); font-weight:600; letter-spacing:-.03em; line-height:1; }
.res .rv .serif{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent); }
.res .rt{ font-size:18px; font-weight:600; margin:18px 0 8px; letter-spacing:-.01em; }
.res .rd{ font-size:15px; color:var(--muted); line-height:1.5; }
@media(max-width:760px){ .res-grid{ grid-template-columns:1fr; } .res{ border-right:none; border-bottom:1px solid var(--line); padding:32px 0; } }