/* ============================================================
   Mercure Design System — Documentation page styles
   Layout & specimen-display styles for index.html ONLY.
   Component styles live in components.css.
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────── */
.ds-hero {
  position:        relative;
  min-height:      92vh;
  display:         flex;
  align-items:     center;
  padding:         var(--mc-space-11) 0 var(--mc-space-10);
  overflow:        hidden;
  isolation:       isolate;
}
.ds-hero__bg {
  position:        absolute;
  inset:           0;
  z-index:         -1;
  pointer-events:  none;
}
.ds-hero__bg.mc-bg-grain { opacity: 0.55; mix-blend-mode: overlay; }

.ds-hero__m {
  position:        absolute;
  top:             50%;
  left:            50%;
  width:           min(82vw, 1080px);
  height:          auto;
  transform:       translate(-50%, -50%);
  z-index:         -1;
  pointer-events:  none;
  mix-blend-mode:  screen;
  opacity:         0.55;
}
.ds-hero__m-line {
  fill:            none;
  stroke:          var(--brand-mark);
  stroke-width:    1.8;
  vector-effect:   non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap:  round;
}

.ds-hero__inner {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  gap:             var(--mc-space-6);
  max-width:       880px;
}
.ds-hero__eyebrow {
  letter-spacing:  var(--mc-tracking-wide-l);
}
.ds-hero__title {
  max-width:       780px;
}
.ds-hero__lead {
  max-width:       640px;
}
.ds-hero__cta-row {
  display:         flex;
  gap:             var(--mc-space-3);
  flex-wrap:       wrap;
  margin-top:      var(--mc-space-3);
}
.ds-hero__pills {
  display:         flex;
  gap:             var(--mc-space-2);
  flex-wrap:       wrap;
  margin-top:      var(--mc-space-5);
}


/* ── Section scaffolding ───────────────────────────────── */
.ds-sec {
  position:        relative;
  border-top:      1px solid var(--border-subtle);
}
.ds-sec--alt {
  background:      var(--surface-alt);
}
.ds-sec__head {
  display:         flex;
  flex-direction:  column;
  gap:             var(--mc-space-4);
  max-width:       780px;
  margin-bottom:   var(--mc-space-9);
}


/* ── Tags / inline meta ────────────────────────────────── */
.ds-tag {
  display:         inline-block;
  vertical-align:  middle;
  margin-left:     var(--mc-space-2);
  padding:         3px 10px;
  border-radius:   var(--mc-radius-full);
  background:      rgba(232, 180, 106, 0.12);
  color:           var(--state-warn);
  font-family:     var(--type-mono);
  font-size:       10px;
  letter-spacing:  var(--mc-tracking-wide-m);
  text-transform:  uppercase;
}


/* ── Color swatches ────────────────────────────────────── */
.ds-color__group {
  margin-bottom:   var(--mc-space-10);
}
.ds-color__group:last-child { margin-bottom: 0; }
.ds-color__title {
  margin-bottom:   var(--mc-space-5);
}
.ds-swatches {
  display:         grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:             var(--mc-space-3);
}
.ds-swatch {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  gap:             var(--mc-space-2);
  padding:         var(--mc-space-5);
  background:      var(--swatch, var(--surface-card));
  border:          1px solid var(--border-subtle);
  border-radius:   var(--mc-radius-lg);
  min-height:      140px;
  text-align:      left;
  color:           var(--text-primary);
  transition:      transform var(--mc-dur-short) var(--mc-ease);
  cursor:          copy;
  overflow:        hidden;
}
.ds-swatch:hover {
  transform:       translateY(-2px);
  border-color:    var(--border-brand);
}
.ds-swatch::after {
  content:         "";
  position:        absolute;
  inset:           auto var(--mc-space-3) var(--mc-space-3) auto;
  width:           14px; height: 14px;
  border-radius:   50%;
  background:      rgba(0,0,0,0.32);
  border:          1px solid rgba(255,255,255,0.16);
}
.ds-swatch__token {
  font-family:     var(--type-mono);
  font-size:       var(--mc-type-small);
  letter-spacing:  -0.01em;
  color:           rgba(255,255,255,0.85);
  text-shadow:     0 1px 4px rgba(0,0,0,0.6);
}
.ds-swatch__value {
  font-family:     var(--type-mono);
  font-size:       11px;
  letter-spacing:  var(--mc-tracking-wide-s);
  text-transform:  uppercase;
  color:           rgba(255,255,255,0.55);
  margin-top:      auto;
  text-shadow:     0 1px 4px rgba(0,0,0,0.6);
}
.ds-swatch__note {
  font-family:     var(--type-mono);
  font-size:       10px;
  color:           rgba(255,255,255,0.45);
  text-shadow:     0 1px 4px rgba(0,0,0,0.6);
}
.ds-swatch--accent .ds-swatch__token,
.ds-swatch--accent .ds-swatch__value,
.ds-swatch--accent .ds-swatch__note {
  color:           rgba(255,255,255,0.95);
}
.ds-swatch.is-copied {
  border-color:    var(--state-success) !important;
}


/* ── Type specimens ────────────────────────────────────── */
.ds-type__row {
  display:         grid;
  grid-template-columns: 200px 1fr;
  gap:             var(--mc-space-7);
  padding:         var(--mc-space-7) 0;
  border-top:      1px solid var(--border-subtle);
  align-items:     baseline;
}
.ds-type__row:first-of-type { border-top: 0; padding-top: 0; }
.ds-type__meta {
  display:         flex;
  flex-direction:  column;
  gap:             var(--mc-space-1);
  font-family:     var(--type-mono);
  font-size:       11px;
  color:           var(--text-muted);
  position:        sticky;
  top:             80px;
  align-self:      start;
}
.ds-type__meta code {
  cursor:          copy;
  color:           var(--text-primary);
  letter-spacing:  var(--mc-tracking-wide-s);
  text-transform:  uppercase;
}
.ds-type__meta code:hover {
  color:           var(--action-primary);
}
.ds-type__specimen {
  color:           var(--text-primary);
  word-break:      keep-all;
  overflow-wrap:   break-word;
}
@media (max-width: 720px) {
  .ds-type__row { grid-template-columns: 1fr; }
  .ds-type__meta { position: static; }
}


/* ── Space ruler ───────────────────────────────────────── */
.ds-space__list {
  display:         flex;
  flex-direction:  column;
}
.ds-space__row {
  display:         grid;
  grid-template-columns: 120px 80px 1fr;
  gap:             var(--mc-space-5);
  align-items:     center;
  padding:         var(--mc-space-3) var(--mc-space-4);
  background:      transparent;
  border:          0;
  border-top:      1px solid var(--border-subtle);
  text-align:      left;
  cursor:          copy;
  font:            inherit;
  color:           inherit;
  transition:      background var(--mc-dur-micro) var(--mc-ease);
}
.ds-space__row:hover {
  background:      var(--surface-glass-hover);
}
.ds-space__row.is-copied {
  color:           var(--state-success);
}
.ds-space__token {
  font-family:     var(--type-mono);
  font-size:       var(--mc-type-small);
  letter-spacing:  var(--mc-tracking-wide-s);
  text-transform:  uppercase;
  color:           var(--text-primary);
}
.ds-space__value {
  font-family:     var(--type-mono);
  font-size:       11px;
  color:           var(--text-muted);
}
.ds-space__bar {
  display:         block;
  height:          24px;
  background:      linear-gradient(90deg, var(--action-primary), var(--brand-mark));
  border-radius:   var(--mc-radius-xs);
  box-shadow:      0 0 18px var(--signature-glow);
}


/* ── Radius row ────────────────────────────────────────── */
.ds-radius__row {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--mc-space-4);
  align-items:     center;
}
.ds-radius__box {
  position:        relative;
  width:           120px;
  height:          120px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--mc-space-1);
  background:      var(--surface-card);
  border:          1px solid var(--border-subtle);
  cursor:          copy;
  color:           var(--text-body);
  font-family:     var(--type-mono);
  font-size:       11px;
  letter-spacing:  var(--mc-tracking-wide-s);
  text-transform:  uppercase;
  transition:      transform var(--mc-dur-short) var(--mc-ease),
                   border-color var(--mc-dur-short) var(--mc-ease);
}
.ds-radius__box b {
  font-weight:     500;
  font-size:       20px;
  color:           var(--text-primary);
  letter-spacing:  -0.02em;
}
.ds-radius__box:hover {
  transform:       translateY(-2px);
  border-color:    var(--border-brand);
}


/* ── Motion grid ───────────────────────────────────────── */
.ds-motion__grid {
  display:         grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:             var(--mc-space-5);
  margin-bottom:   var(--mc-space-8);
}
.ds-motion__card {
  display:         flex;
  flex-direction:  column;
  gap:             var(--mc-space-3);
  padding:         var(--mc-space-6);
  background:      var(--surface-card);
  border:          1px solid var(--border-subtle);
  border-radius:   var(--mc-radius-xl);
}
.ds-motion__card code {
  font-family:     var(--type-mono);
  font-size:       11px;
  color:           var(--text-body);
  cursor:          copy;
  word-break:      break-all;
}
.ds-motion__track {
  position:        relative;
  height:          16px;
  background:      var(--surface-glass);
  border-radius:   var(--mc-radius-full);
  overflow:        hidden;
  margin-top:      var(--mc-space-2);
}
.ds-motion__ball {
  position:        absolute;
  top:             3px; left: 3px;
  width:           10px; height: 10px;
  border-radius:   50%;
  background:      var(--action-primary);
  box-shadow:      0 0 14px var(--signature-glow);
  transform:       translateX(0);
}
.ds-motion__card:hover .ds-motion__ball {
  transform:       translateX(calc(100% + 240px));
}
.ds-motion__card:not(:hover) .ds-motion__ball {
  transition-duration: 0ms !important;
}

.ds-duration {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--mc-space-3);
}
.ds-duration__chip {
  display:         flex;
  flex-direction:  column;
  gap:             2px;
  padding:         var(--mc-space-4) var(--mc-space-5);
  background:      var(--surface-card);
  border:          1px solid var(--border-subtle);
  border-radius:   var(--mc-radius-md);
  cursor:          copy;
  color:           var(--text-body);
  font-family:     var(--type-mono);
  font-size:       10px;
  letter-spacing:  var(--mc-tracking-wide-s);
  text-transform:  uppercase;
  text-align:      left;
  transition:      border-color var(--mc-dur-micro) var(--mc-ease);
}
.ds-duration__chip b {
  font-family:     var(--type-display);
  font-weight:     500;
  font-size:       22px;
  letter-spacing:  -0.02em;
  color:           var(--text-primary);
}
.ds-duration__chip span {
  color:           var(--text-muted);
}
.ds-duration__chip:hover {
  border-color:    var(--border-brand);
}
.ds-duration__chip--ambient {
  background:      linear-gradient(135deg, var(--surface-card), rgba(184,140,255,0.08));
}


/* ── Glass grid ────────────────────────────────────────── */
.ds-glass__grid {
  display:         grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:             var(--mc-space-5);
  position:        relative;
}
.ds-glass__grid::before {
  /* light source so the glass has something to refract */
  content:         "";
  position:        absolute;
  inset:           -40px;
  z-index:         -1;
  background:
    radial-gradient(500px 280px at 25% 30%, rgba(107,124,255,0.18), transparent 60%),
    radial-gradient(400px 240px at 80% 70%, rgba(184,140,255,0.14), transparent 60%);
  border-radius:   var(--mc-radius-2xl);
}
.ds-glass__meta {
  margin-top:      var(--mc-space-4);
  position:        relative;
  z-index:         1;
}
.ds-glass__meta code {
  font-family:     var(--type-mono);
  font-size:       11px;
  color:           var(--text-muted);
  cursor:          copy;
}


/* ── Components panels ─────────────────────────────────── */
.ds-comp {
  padding:         var(--mc-space-8) 0;
  border-top:      1px solid var(--border-subtle);
}
.ds-comp:first-of-type { border-top: 0; padding-top: 0; }
.ds-comp__title {
  margin-bottom:   var(--mc-space-5);
}
.ds-comp__row {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--mc-space-3);
  align-items:     center;
  margin-bottom:   var(--mc-space-4);
}
.ds-comp__row--center {
  justify-content: center;
  margin-bottom:   var(--mc-space-6);
}
.ds-comp__stack {
  display:         flex;
  flex-direction:  column;
  gap:             var(--mc-space-4);
  max-width:       720px;
}
.ds-snippet {
  display:         block;
  padding:         var(--mc-space-3) var(--mc-space-4);
  background:      var(--surface-card);
  border:          1px solid var(--border-subtle);
  border-radius:   var(--mc-radius-md);
  font-family:     var(--type-mono);
  font-size:       12px;
  color:           var(--text-body);
  cursor:          copy;
  overflow-x:      auto;
}


/* ── Form layout ───────────────────────────────────────── */
.ds-form {
  display:         grid;
  grid-template-columns: repeat(2, 1fr);
  gap:             var(--mc-space-5);
  max-width:       640px;
}
.ds-form__full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .ds-form { grid-template-columns: 1fr; }
}


/* ── Voice ─────────────────────────────────────────────── */
.ds-voice__grid {
  display:         grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:             var(--mc-space-5);
  margin-bottom:   var(--mc-space-8);
}
.ds-voice__do ul,
.ds-voice__dont ul {
  margin:          var(--mc-space-3) 0 0;
  padding:         0;
  list-style:      none;
  display:         flex;
  flex-direction:  column;
  gap:             var(--mc-space-3);
}
.ds-voice__do li,
.ds-voice__dont li {
  font-size:       var(--mc-type-body);
  line-height:     var(--mc-leading-body);
  color:           var(--text-body);
  position:        relative;
  padding-left:    var(--mc-space-4);
}
.ds-voice__do li::before {
  content:         "";
  position:        absolute;
  left:            0; top: 9px;
  width:           6px; height: 6px;
  border-radius:   50%;
  background:      var(--state-success);
  box-shadow:      0 0 8px var(--state-success);
}
.ds-voice__dont li::before {
  content:         "";
  position:        absolute;
  left:            0; top: 9px;
  width:           6px; height: 6px;
  border-radius:   50%;
  background:      var(--state-error);
  box-shadow:      0 0 8px var(--state-error);
}
.ds-voice__do li strong { color: var(--text-primary); }
.ds-voice__lex {
  padding:         var(--mc-space-6) 0 0;
  border-top:      1px solid var(--border-subtle);
}
.ds-voice__lex h3 {
  margin-bottom:   var(--mc-space-5);
}
.ds-voice__chips {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--mc-space-2);
}


/* ── Roadmap ───────────────────────────────────────────── */
.ds-roadmap {
  display:         grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:             var(--mc-space-5);
}
.ds-roadmap__phase {
  display:         flex;
  flex-direction:  column;
  gap:             var(--mc-space-3);
}
.ds-roadmap__phase ul {
  margin:          0;
  padding:         0 0 0 var(--mc-space-5);
  display:         flex;
  flex-direction:  column;
  gap:             var(--mc-space-2);
  color:           var(--text-body);
  font-size:       var(--mc-type-body);
  line-height:     var(--mc-leading-body);
}
.ds-roadmap__phase code {
  font-family:     var(--type-mono);
  font-size:       12px;
  color:           var(--action-primary);
}
.ds-roadmap__note {
  margin-top:      var(--mc-space-8);
  text-align:      center;
  max-width:       560px;
  margin-left:     auto;
  margin-right:    auto;
}


/* ── Footer ────────────────────────────────────────────── */
.ds-footer {
  padding:         var(--mc-space-8) 0;
  border-top:      1px solid var(--border-subtle);
  background:      var(--surface-alt);
}
.ds-footer__row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--mc-space-4);
  flex-wrap:       wrap;
}


/* ── Copy-on-click feedback ────────────────────────────── */
[data-copy].is-copied {
  color:           var(--state-success);
}


/* ── Anchor offset for sticky nav ──────────────────────── */
section[id] {
  scroll-margin-top: 88px;
}


/* ════════════════════════════════════════════════════════
   DOC EXTENSIONS — for Phase 2 sections
   ════════════════════════════════════════════════════════ */

/* Form-advanced demo row */
.ds-formx {
  display:           grid;
  grid-template-columns: 160px 1fr;
  gap:               var(--mc-space-6);
  padding:           var(--mc-space-6) 0;
  border-top:        1px solid var(--border-subtle);
  align-items:       center;
}
.ds-formx:first-of-type { border-top: 0; padding-top: 0; }
.ds-formx__meta {
  font-family:       var(--type-mono);
  font-size:         11px;
  color:             var(--text-muted);
  letter-spacing:    var(--mc-tracking-wide-s);
  text-transform:    uppercase;
}
.ds-formx__demo {
  display:           flex;
  flex-wrap:         wrap;
  gap:               var(--mc-space-5);
  align-items:       center;
}
@media (max-width: 720px) {
  .ds-formx { grid-template-columns: 1fr; gap: var(--mc-space-3); }
}

/* Data row — like comp but with table styling */
.ds-data {
  padding:           var(--mc-space-8) 0;
  border-top:        1px solid var(--border-subtle);
}
.ds-data:first-of-type { border-top: 0; padding-top: 0; }
.ds-data__title {
  margin-bottom:     var(--mc-space-5);
}

/* Skeleton demo card */
.ds-skel {
  display:           flex;
  flex-direction:    column;
  gap:               var(--mc-space-3);
  padding:           var(--mc-space-5);
  background:        var(--surface-card);
  border:            1px solid var(--border-subtle);
  border-radius:     var(--mc-radius-xl);
  max-width:         420px;
}
.ds-skel__row {
  display:           flex;
  align-items:       center;
  gap:               var(--mc-space-3);
}
.ds-skel__col {
  flex:              1;
  display:           flex;
  flex-direction:    column;
  gap:               var(--mc-space-2);
}

/* Overlay demo trigger row */
.ds-over {
  padding:           var(--mc-space-8) 0;
  border-top:        1px solid var(--border-subtle);
}
.ds-over:first-of-type { border-top: 0; padding-top: 0; }
.ds-over__row {
  display:           flex;
  flex-wrap:         wrap;
  gap:               var(--mc-space-3);
  margin-top:        var(--mc-space-4);
}
.ds-over__note {
  margin-top:        var(--mc-space-3);
  font-family:       var(--type-mono);
  font-size:         11px;
  color:             var(--text-muted);
  letter-spacing:    var(--mc-tracking-wide-s);
  text-transform:    uppercase;
}

/* Icon grid */
.ds-icons {
  display:           grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:               var(--mc-space-2);
}
.ds-icon-tile {
  display:           flex;
  flex-direction:    column;
  align-items:       center;
  gap:               var(--mc-space-3);
  padding:           var(--mc-space-5) var(--mc-space-3);
  background:        var(--surface-card);
  border:            1px solid var(--border-subtle);
  border-radius:     var(--mc-radius-lg);
  cursor:            copy;
  color:             var(--text-body);
  transition:        transform var(--mc-dur-short) var(--mc-ease),
                     border-color var(--mc-dur-short) var(--mc-ease),
                     color var(--mc-dur-short) var(--mc-ease);
}
.ds-icon-tile:hover {
  transform:         translateY(-2px);
  border-color:      var(--border-brand);
  color:             var(--text-primary);
}
.ds-icon-tile .mc-icon { width: 22px; height: 22px; }
.ds-icon-tile__name {
  font-family:       var(--type-mono);
  font-size:         10px;
  letter-spacing:    var(--mc-tracking-wide-s);
  text-transform:    lowercase;
  color:             var(--text-muted);
  text-align:        center;
  word-break:        break-all;
}
.ds-icon-cat {
  font-family:       var(--type-mono);
  font-size:         var(--mc-type-micro);
  letter-spacing:    var(--mc-tracking-wide-m);
  text-transform:    uppercase;
  color:             var(--text-muted);
  margin:            var(--mc-space-6) 0 var(--mc-space-3);
}

/* Theme-aware hero filigrane */
[data-theme="light"] .ds-hero__m-line {
  stroke:            var(--brand-mark);
  opacity:           1;
}
[data-theme="light"] .ds-hero__m {
  mix-blend-mode:    multiply;
  opacity:           0.40;
}
[data-theme="light"] .mc-bg-grain {
  background-image:  radial-gradient(rgba(20, 22, 30, 0.05) 1px, transparent 1px);
  mix-blend-mode:    multiply;
}
[data-theme="light"] .ds-tag {
  background:        rgba(232, 180, 106, 0.18);
}

/* Theme toggle in the nav — preserve mc-nav__item geometry */
.mc-nav__item.mc-theme-toggle-wrap {
  padding:           4px;
}
.mc-nav__item .mc-theme-toggle {
  width:             28px;
  height:            28px;
  background:        transparent;
  border:            0;
}