/* ============================================================
   MELA · THE DEMONSTRATION — synthetic-month instrument
   Ported to the cinematic-parchment design system. One component,
   embedded on / (after the layers) and /how-it-works/ (with the
   annotation layer on via data-annotated). Markup is rendered by
   shared/demonstration.js — there is no second copy.

   Care Clause held: gold = the one emphasis, coral = attention mark,
   no red/blue, down-days render like up-days, evidence is co-movement
   capped below certainty. AA text twins (--gold-ink/--label-ink) for
   copy; gold/coral used only as graphic marks (>=3:1 on parchment).
   ============================================================ */

/* Component-local aliases mapped to the global parchment tokens. Defined on
   both the homepage section wrapper (for its heading chrome) and the mount
   itself, so the component carries its own tokens wherever it is embedded
   (e.g. inside an .act on /how-it-works/, which has no .demonstration ancestor). */
.demonstration, .mela-demo {
  --d-bark: var(--deep-bark);
  --d-ink: var(--bark);
  --d-muted: var(--label-ink);
  --d-muted-deco: var(--bark-quiet);
  --d-gold: var(--gold);
  --d-gold-text: var(--gold-ink);
  --d-coral: var(--coral);
  --d-hairline: color-mix(in srgb, var(--deep-bark) 16%, transparent);
  --d-grid: color-mix(in srgb, var(--deep-bark) 9%, transparent);
  --d-band: color-mix(in srgb, var(--deep-bark) 7%, transparent);
}

/* Homepage standalone section layout (on /how-it-works/ the component sits
   inside an .act, which supplies its own width + heading chrome). */
.demonstration {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-20) var(--space-3) var(--space-16);
}

/* ---------- masthead ---------- */
.demonstration-head { max-width: 64ch; }
.dm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--d-muted);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0;
}
.dm-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--d-gold); }
.dm-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 96;
  color: var(--d-bark);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: var(--space-2) 0 var(--space-2);
  max-width: 22ch;
}
.dm-title em { font-style: italic; color: var(--d-gold-text); }
.dm-dek {
  font-family: var(--font-body);
  color: var(--d-muted);
  font-size: var(--text-lg);
  line-height: 1.55;
  max-width: 58ch;
  margin: 0;
}

/* ---------- the instrument ---------- */
/* No hard outline boxes — the surrounding scenes group with a subtle
   parchment-light lift and a single gold accent, not 1px borders. */
.mela-demo { margin-top: var(--space-6); font-family: var(--font-body); }
.dm-instrument {
  border-radius: var(--r-card, 20px);
  background: var(--parchment-light);
  overflow: hidden;
}
/* Facelift: the homepage instrument is the page's one floating object (depth
   without a border). The how-it-works embed (inside .act) stays flat. */
.demonstration .dm-instrument { box-shadow: var(--shadow-float); }
.dm-inst-head {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 16px 20px 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--d-muted); flex-wrap: wrap;
}
.dm-inst-head .dm-state { color: var(--d-ink); }
.dm-chartwrap { position: relative; padding: 6px 12px 0; }
.mela-demo svg { display: block; width: 100%; height: auto; }
.dm-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--d-muted);
  transition: opacity 0.4s var(--ease-deliberate);
}
.dm-hint.gone { opacity: 0; }

/* svg marks — every mark takes its color from a token */
.dm-gridline { stroke: var(--d-grid); stroke-width: 1; }
.dm-axis { font-family: var(--font-mono); font-size: 10.5px; fill: var(--d-muted); letter-spacing: 0.08em; }
.dm-bandshape { fill: var(--d-band); }
.dm-trace { fill: none; stroke: var(--d-bark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dm-serumline { stroke: var(--d-gold); stroke-width: 1.5; }
.dm-serumlabel { font-family: var(--font-mono); font-size: 10.5px; fill: var(--d-gold-text); letter-spacing: 0.14em; text-transform: uppercase; }
.dm-flaredot { fill: var(--d-coral); }
.dm-serumdot { fill: var(--d-gold); }
.dm-lonedot { fill: none; stroke: var(--d-coral); stroke-width: 1.6; }
.dm-cursorline { stroke: var(--d-bark); stroke-width: 1; opacity: 0.55; }
.dm-cursordot { fill: var(--d-bark); stroke: var(--parchment); stroke-width: 1.5; }
.dm-phasecell-menstrual { fill: color-mix(in srgb, var(--deep-bark) 13%, transparent); }
.dm-phasecell-follicular { fill: color-mix(in srgb, var(--deep-bark) 4%, transparent); }
.dm-phasecell-ovulation { fill: color-mix(in srgb, var(--deep-bark) 8%, transparent); }
.dm-phasecell-luteal { fill: color-mix(in srgb, var(--deep-bark) 17%, transparent); }
.dm-phaselabel { font-family: var(--font-mono); font-size: 9.5px; fill: var(--d-muted); letter-spacing: 0.1em; }
.dm-cyclelabel { font-family: var(--font-mono); font-size: 10px; fill: var(--d-muted); letter-spacing: 0.16em; }

/* rail + transport */
.dm-rail { padding: 10px 20px 4px; }
.mela-demo input[type=range] {
  appearance: none; -webkit-appearance: none; width: 100%; height: 28px;
  background: transparent; cursor: pointer;
}
.mela-demo input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--deep-bark) 18%, transparent); }
.mela-demo input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--d-bark); border: 3px solid var(--parchment); box-shadow: 0 0 0 1px var(--d-hairline); margin-top: -8px; }
.mela-demo input[type=range]::-moz-range-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--deep-bark) 18%, transparent); }
.mela-demo input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--d-bark); border: 3px solid var(--parchment); box-shadow: 0 0 0 1px var(--d-hairline); }
.mela-demo input[type=range]:focus-visible { outline: 2px solid var(--d-gold-text); outline-offset: 4px; border-radius: 2px; }

.dm-transport { display: flex; align-items: center; gap: 10px; padding: 4px 20px 18px; flex-wrap: wrap; }
.dm-btn {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--d-ink);
  background: var(--parchment); border: 1px solid var(--d-hairline); border-radius: 999px;
  padding: 9px 22px; cursor: pointer; transition: background 0.2s var(--ease-deliberate), color 0.2s;
}
.dm-btn:hover { background: var(--parchment-deep); }
.dm-btn.ghost { border-color: transparent; color: var(--d-muted); }
.dm-btn.ghost:hover { color: var(--d-ink); background: var(--parchment-deep); }
.dm-btn:focus-visible { outline: 2px solid var(--d-gold-text); outline-offset: 2px; }
.dm-daycount { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--d-muted); }

/* ---------- read + evidence ---------- */
/* Asymmetric like the signup: one filled accent card (the read, with the gold
   left edge) and one open column (the evidence) — no matching outline boxes. */
.dm-panels { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--space-4); margin-top: var(--space-3); align-items: start; }
.dm-panel { padding: 20px 22px; }
.dm-plabel { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--d-muted); margin: 0 0 12px; }
.dm-read { background: var(--parchment-light); border-left: 2px solid var(--d-gold); border-radius: 0 12px 12px 0; }
.dm-panel:not(.dm-read) { padding-left: 2px; }
.dm-readtext { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.5; color: var(--d-ink); min-height: 3.1em; max-width: 46ch; margin: 0; }
.dm-readtext.final { font-weight: 500; color: var(--d-bark); }

/* annotation layer (depth prop) — only when [data-annotated="true"] */
.dm-anno { display: none; }
.mela-demo[data-annotated="true"] .dm-anno {
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--d-hairline);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5;
  letter-spacing: 0.02em; color: var(--d-muted); max-width: 48ch;
}
.dm-anno .k { color: var(--d-gold-text); text-transform: uppercase; letter-spacing: 0.16em; font-size: 9.5px; display: block; margin-bottom: 4px; }

.dm-evrow { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 12px; margin: 13px 0; }
.dm-evrow .lab { font-size: var(--text-sm); color: var(--d-ink); }
.dm-track { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--deep-bark) 8%, transparent); overflow: hidden; }
/* Both hypothesis bars take the same neutral fill — only their length (the
   co-movement shape) differs. Colour is not used to code a verdict. */
.dm-fill { display: block; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--deep-bark) 82%, transparent); width: 0%; transition: width 0.7s var(--ease-carve); }
.dm-evnote { font-size: var(--text-xs); color: var(--d-muted); margin: 10px 0 0; max-width: 34ch; }
.dm-evempty { font-size: var(--text-sm); color: var(--d-muted); font-style: italic; }

/* ---------- reveal ---------- */
.dm-reveal { display: none; margin-top: 18px; border-top: 1px solid var(--d-hairline); padding: 26px 4px 0; }
.dm-reveal.shown { display: block; animation: dm-rise 0.7s var(--ease-carve); }
@keyframes dm-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dm-reveal h3 { font-family: var(--font-display); font-weight: 400; font-variation-settings: 'opsz' 72; font-size: var(--text-2xl); color: var(--d-bark); margin: 0 0 8px; }
.dm-reveal h3 em { font-style: italic; color: var(--d-gold-text); }
.dm-reveal p { font-family: var(--font-body); color: var(--d-muted); font-size: var(--text-base); max-width: 66ch; margin: 0; }

/* ---------- footnote ---------- */
.dm-footnote { margin-top: var(--space-5); display: flex; flex-direction: column; gap: 14px; }
.dm-chip { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--d-muted); background: var(--parchment-deep); border-radius: 999px; padding: 7px 14px; }
.dm-fine { font-family: var(--font-body); font-size: var(--text-sm); color: var(--d-muted); max-width: 72ch; margin: 0; }
.dm-notelinks { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--d-muted); display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; margin: 0; }
.dm-notelinks .lead { letter-spacing: 0.18em; text-transform: uppercase; font-size: 10px; }
.dm-notelinks a { color: var(--d-gold-text); text-decoration: none; border-bottom: 1px solid transparent; }
.dm-notelinks a:hover { border-bottom-color: var(--d-gold-text); }

/* JS-off fallback shown inside the mount before render */
.dm-fallback { font-family: var(--font-body); color: var(--d-muted); font-size: var(--text-base); max-width: 60ch; }
.dm-fallback a { color: var(--d-gold-text); }

@media (max-width: 740px) {
  .demonstration { padding: var(--space-12) var(--space-2) var(--space-10); }
  .dm-panels { grid-template-columns: 1fr; }
  .dm-readtext { min-height: 0; }
  .dm-daycount { width: 100%; margin-left: 0; order: 3; }
}
/* phone: viewBox scaling crushes 10px SVG text, so type/marks scale up
   and tertiary labels drop */
@media (max-width: 560px) {
  .dm-axis { font-size: 22px; }
  .dm-trace { stroke-width: 3.2; }
  .dm-serumline { stroke-width: 2.6; }
  .dm-cursorline { stroke-width: 2; }
  .dm-gridline { stroke-width: 1.5; }
  .dm-serumlabel, .dm-phaselabel, .dm-cyclelabel { display: none; }
  .mela-demo input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; }
  .mela-demo input[type=range]::-moz-range-thumb { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-fill, .dm-hint { transition: none; }
  .dm-reveal.shown { animation: none; }
}