/* ============================================================================
   MCS Disability Site — Design System component primitives (Phase 0C)
   Built on the v5.0.0 token layer (assets/css/tokens.css, --mcsd-* props).
   Values are faithful to homepage mockup v1.3.

   SCOPED + INERT: every rule lives under the .mcsd-ds wrapper, so it styles
   NOTHING on existing pages (none use .mcsd-ds yet) and cannot collide with
   the current site.css. Phase 1 wraps the homepage in
   <div class="mcsd-ds" ...> and the mockup markup drops in verbatim.

   ALIAS BRIDGE: the mockup's component markup/SVGs reference unprefixed var
   names (--slate, --sage, ...). The block below maps the namespaced --mcsd-*
   tokens onto those names *within* .mcsd-ds, so the mockup CSS/SVG ports as-is
   (single light presentation from v6.9.0; the --mcsd-* layer in tokens.css
   remains the source of truth).
   ============================================================================ */

.mcsd-ds{
  --bone:var(--mcsd-bone); --paper:var(--mcsd-paper); --card:var(--mcsd-card);
  --ink:var(--mcsd-ink); --ink-soft:var(--mcsd-ink-soft); --ink-faint:var(--mcsd-ink-faint);
  --slate:var(--mcsd-slate); --slate-deep:var(--mcsd-slate-deep);
  --sage:var(--mcsd-sage); --sage-fill:var(--mcsd-sage-fill); --sage-line:var(--mcsd-sage-line);
  --clay:var(--mcsd-clay); --clay-soft:var(--mcsd-clay-soft);
  --gold:var(--mcsd-gold);
  --line:var(--mcsd-line); --line-soft:var(--mcsd-line-soft);
  --shadow:var(--mcsd-shadow); --shadow-lift:var(--mcsd-shadow-lift);
  --radius:var(--mcsd-radius); --radius-lg:var(--mcsd-radius-lg); --maxw:var(--mcsd-maxw);
  --air1:var(--mcsd-air1); --air2:var(--mcsd-air2); --motion:var(--mcsd-motion);

  color:var(--ink);
  background:var(--bone);
  font-family:var(--mcsd-font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ─── Type ─── */
.mcsd-ds h1,.mcsd-ds h2,.mcsd-ds h3,.mcsd-ds .serif{
  font-family:var(--mcsd-font-display); font-weight:500; line-height:1.12;
  letter-spacing:-.01em; color:var(--ink);
}
.mcsd-ds .em{font-style:italic; color:var(--slate)}
.mcsd-ds .lede{font-size:19px; line-height:1.6; color:var(--ink-soft)}
.mcsd-ds .eyebrow{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); font-weight:700;
}
.mcsd-ds a{color:var(--slate); text-decoration:underline; text-underline-offset:2px}
.mcsd-ds :focus-visible{outline:3px solid var(--clay); outline-offset:3px; border-radius:6px}

/* ─── Buttons (slate primary · clay action, sparingly · gold "start here") ─── */
.mcsd-ds .btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:.18s;
}
.mcsd-ds .btn-primary{background:var(--slate); color:#fff; box-shadow:var(--shadow)}
html[data-theme="dark"] .mcsd-ds .btn-primary{color:var(--slate-deep)}
.mcsd-ds .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.mcsd-ds .btn-ghost:hover{border-color:var(--sage)}
.mcsd-ds .btn-start{background:var(--gold); color:#3a2c12}
.mcsd-ds .btn-action{background:var(--clay); color:#fff}

/* ─── Chips (filters) ─── */
.mcsd-ds .chip{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--ink-soft); cursor:pointer; transition:.16s;
}
.mcsd-ds .chip:hover{border-color:var(--sage); color:var(--ink)}
.mcsd-ds .chip[aria-pressed="true"]{background:var(--slate); border-color:var(--slate); color:#fff}
html[data-theme="dark"] .mcsd-ds .chip[aria-pressed="true"]{color:var(--slate-deep)}

/* ─── Card ─── */
.mcsd-ds .card{
  background:var(--card); border:1px solid var(--sage-line);
  border-radius:var(--radius-lg); padding:30px 34px; box-shadow:var(--shadow);
}

/* ─── Doors (four-pathway grid) ─── */
.mcsd-ds .door-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.mcsd-ds .door{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 24px; text-decoration:none; color:var(--ink);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.mcsd-ds .door:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--sage-line)}
.mcsd-ds .door::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent,var(--sage))}
.mcsd-ds .door .ico{width:60px; height:60px; margin-bottom:16px}
.mcsd-ds .door h3{font-size:21px; margin:0 0 7px}
.mcsd-ds .door .who{font-size:13px; color:var(--accent,var(--slate)); font-weight:700; letter-spacing:.02em; margin-bottom:10px}
.mcsd-ds .door p{font-size:15px; color:var(--ink-soft); margin:0 0 16px; line-height:1.55}
.mcsd-ds .door .go{margin-top:auto; font-weight:700; font-size:15px; color:var(--slate); display:inline-flex; align-items:center; gap:7px}
.mcsd-ds .door .go svg{width:16px; height:16px; transition:.2s}
.mcsd-ds .door:hover .go svg{transform:translateX(4px)}
.mcsd-ds .door.s1{--accent:var(--sage)}
.mcsd-ds .door.s2{--accent:var(--slate)}
.mcsd-ds .door.s3{--accent:var(--gold)}
.mcsd-ds .door.s4{--accent:var(--clay)}

/* ─── Zones (sage = patient/calm · slate = clinical/credibility) ─── */
.mcsd-ds .zone-sage{background:var(--sage-fill)}
.mcsd-ds .zone-slate{background:var(--slate-deep); color:var(--ink)}
html[data-theme="light"] .mcsd-ds .zone-slate{color:#EDEFE9}
html[data-theme="light"] .mcsd-ds .zone-slate p{color:#C3CFC9}

/* ─── Tool cards ─── */
.mcsd-ds .tool{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
}
.mcsd-ds .tool .topfold{
  height:54px; background:linear-gradient(120deg,var(--sage-fill),transparent);
  border-bottom:1px solid var(--line-soft); display:flex; align-items:center; padding:0 18px;
}
.mcsd-ds .tool .topfold svg{width:24px; height:24px; color:var(--slate)}
.mcsd-ds .mini{
  display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600;
  padding:9px 15px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink); text-decoration:none; transition:.16s;
}
.mcsd-ds .mini:hover{border-color:var(--sage)}
.mcsd-ds .mini.solid{background:var(--slate); color:#fff; border-color:var(--slate)}
html[data-theme="dark"] .mcsd-ds .mini.solid{color:var(--slate-deep)}

/* ─── Stat tiles (Fraunces numerals) ─── */
.mcsd-ds .stat .num{font-family:var(--mcsd-font-display); font-size:clamp(38px,4.6vw,56px); font-weight:500; line-height:1; color:var(--ink)}
.mcsd-ds .stat .lbl{font-size:14px; color:var(--ink-soft)}

/* ─── Native disclosure (crawlable, JS-free) ─── */
.mcsd-ds details{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:0 20px; margin:10px 0}
.mcsd-ds details summary{cursor:pointer; padding:16px 0; font-weight:700; color:var(--ink); list-style:none}
.mcsd-ds details summary::-webkit-details-marker{display:none}
.mcsd-ds details summary::after{content:"+"; float:right; color:var(--slate); font-weight:700}
.mcsd-ds details[open] summary::after{content:"–"}
.mcsd-ds details > *:not(summary){padding-bottom:18px; color:var(--ink-soft)}

/* ─── Motion gate (paired with the --motion token; OS reduced-motion = 0) ─── */
@media (prefers-reduced-motion: reduce){
  .mcsd-ds .door,.mcsd-ds .btn,.mcsd-ds .mini,.mcsd-ds .door .go svg{transition:none}
}
/* ─── Layout helpers ─── */
.mcsd-ds .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
@media(max-width:880px){.mcsd-ds .door-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mcsd-ds .door-grid{grid-template-columns:1fr}}