/* moments.css - kept by lane moments (IA v2.0). Lane tokens use the --mo-* prefix; global tokens come from css/site.css and are never redefined here.
   Light only; contrast by ink only (no scrims, halos, blur or shadows). Lake is lines only, never text; the leaf is the leaf only.
   Retired in v2.0: range, ripple button, crown words, area names, strand (their rules are gone). */
:root{
  --mo-line:1.25px;           /* decorative Lake line weight */
  --mo-lead:1.75px;           /* ink lead weight (the sun dot, highlights) */
  --mo-dial-w:132px;          /* the year dial figure */
  --mo-step-w:112px;          /* the approach figure */
  --mo-light:400ms;           /* a name lighting its line */
}

/* ---------- shared figure parts ---------- */
.mo-year-line{ fill:none; stroke:var(--c-lake); stroke-width:var(--mo-line); vector-effect:non-scaling-stroke; }
.mo-horizon{ fill:none; stroke:var(--c-ink); stroke-opacity:.42; stroke-width:1px; vector-effect:non-scaling-stroke; }
.mo-leaf path{ fill:var(--c-leaf); }
.mo-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- #overview: the year dial (inside aside.name-moment) ---------- */
.dial{ display:grid; grid-template-columns:1fr var(--tap) var(--mo-dial-w) var(--tap) 1fr; grid-template-areas:". prev fig next ." "out out out out out";
  align-items:center; column-gap:var(--sp-6); row-gap:var(--sp-3); margin:var(--sp-8) 0 0; } /* fixed tracks: the buttons never move when the line changes */
.dial .pill{ margin-top:0; }
.dial [data-dial="prev"]{ grid-area:prev; }
.dial [data-dial="next"]{ grid-area:next; }
.dial-fig{ grid-area:fig; width:var(--mo-dial-w); }
.mo-dial-svg{ display:block; width:100%; height:auto; overflow:visible; }
.mo-dial-svg .mo-year-line{ stroke-width:1.5px; }
.mo-ticks circle{ fill:var(--c-sky); stroke:var(--c-lake); stroke-width:1.25px; vector-effect:non-scaling-stroke; }
.mo-sun circle{ fill:var(--c-sky); stroke:var(--c-ink); stroke-width:2px; vector-effect:non-scaling-stroke; }
.dial-out{ grid-area:out; min-height:3em; margin:0; font:500 15px/1.5 var(--f-text); color:var(--c-ink) !important; text-align:center; }

/* ---------- #experience / #operations: a name lights its line (toggles; hover and keyboard focus preview, tap / Enter / Space commit) ----------
   The target is the name's own box, at least --tap tall (44 / 48 px); the Frost chip and the ring hug it. */
.line-name[role="button"]{ display:inline-flex; align-items:center; min-height:var(--tap); padding:0 8px; margin:0 -8px; cursor:pointer; border-radius:var(--r-chip);
  text-decoration:underline; text-decoration-color:var(--c-lake); text-decoration-thickness:2px; text-underline-offset:.26em;
  transition:background-color var(--t-hover) var(--ease), text-decoration-color var(--t-hover) var(--ease); -webkit-tap-highlight-color:transparent; }
.pair-k.line-name[role="button"]{ justify-self:start; }
.line-list .line-name[role="button"]{ padding-block:8px; } /* AUD2-6: a name that wraps keeps clear of the rules; one line stays at --tap */
.line-name[role="button"]:focus-visible{ outline:2px solid var(--c-ink); outline-offset:4px; }
.line-name.lit, .line-name[aria-pressed="true"]{ background:var(--c-frost); text-decoration-color:var(--c-ink); }
.line-name[aria-pressed="true"]{ text-decoration-thickness:2.5px; }
/* while another name previews (hover / focus), the committed one keeps only its ink underline: one chip per list */
:is(.exp-list, .ops-list):has(.line-name.lit) .line-name[aria-pressed="true"]:not(.lit){ background:transparent; }
/* the 2D answer where no renderer is live (still mode, or before a renderer reports ready): Lake lines, the lit one in ink */
.mo-lines{ display:block; width:min(260px, 100%); height:auto; margin:var(--sp-5) 0 0; overflow:visible; }
.scene-ready .mo-lines{ display:none; }
.mo-lines path{ fill:none; stroke:var(--c-lake); stroke-width:1.25px; stroke-linecap:round; vector-effect:non-scaling-stroke;
  transition:stroke var(--mo-light) var(--ease), stroke-width var(--mo-light) var(--ease); }
.mo-lines path.on{ stroke:var(--c-ink); stroke-width:2px; }

/* ---------- #approach: four stops on the sun's year; the leaf moves to each step ---------- */
.steps.mo-live .step-k[role="button"]{ display:inline-flex; align-items:center; justify-self:start; min-height:var(--tap); padding:0 8px; margin:0 -8px;
  cursor:pointer; border-radius:var(--r-chip); -webkit-tap-highlight-color:transparent; transition:background-color var(--t-hover) var(--ease); }
.steps.mo-live .step-k[role="button"]:hover{ background:var(--c-frost); }
.steps.mo-live .step-k[role="button"]:focus-visible{ outline:2px solid var(--c-ink); outline-offset:4px; }
.steps.mo-live li{ border-top-color:var(--c-frost); border-top-width:2px; transition:border-color var(--mo-light) var(--ease); }
.steps.mo-live li.on{ border-top-color:var(--c-ink); }
.steps.mo-live .step-k[aria-current="step"]{ text-decoration:underline; text-decoration-color:var(--c-ink); text-decoration-thickness:2px; text-underline-offset:.24em; }
.step-ctl .pill{ margin-top:0; }
.step-fig{ width:var(--mo-step-w); flex:none; }
.mo-step-svg{ display:block; width:100%; height:auto; overflow:visible; }
.mo-stops circle{ fill:var(--c-sky); stroke:var(--c-lake); stroke-width:1.25px; vector-effect:non-scaling-stroke; transition:stroke var(--mo-light) var(--ease); }
.mo-stops circle.on{ stroke:var(--c-ink); stroke-width:2px; }

/* ---------- #contact: the copy button's copied state, and the small year ---------- */
.copy-btn .mo-copy-glyph{ width:18px; height:18px; flex:none; overflow:visible; }
.mo-copy-glyph path{ fill:none; stroke:currentColor; stroke-width:1.5px; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.mo-copy-env{ transition:opacity 200ms var(--ease); }
.mo-copy-check{ stroke-dasharray:1 1; stroke-dashoffset:1; stroke-width:2px !important; }
.copy-btn[data-mo-state="copied"]{ background:var(--c-frost); }
.copy-btn[data-mo-state="copied"] .mo-copy-env{ opacity:0; }
.copy-btn[data-mo-state="copied"] .mo-copy-check{ stroke-dashoffset:0; transition:stroke-dashoffset 420ms var(--ease) 80ms; }
.mo-year{ width:52px; margin:0 0 var(--sp-4); }
.mo-year[data-state="waiting"] svg{ visibility:hidden; } /* nothing half-drawn before the year closes */
.mo-year svg{ display:block; width:100%; height:auto; overflow:visible; }

/* ---------- focus scrolling leaves room for the 2 px ring and its 4 px offset (the ring is never clipped at a viewport edge) ---------- */
.dial .pill, .step-ctl .pill, .line-name[role="button"], .steps.mo-live .step-k[role="button"], .copy-btn{ scroll-margin-block:24px; }

/* ---------- reduced motion: designed stills, no easing ---------- */
.reduce .mo-lines path, .reduce .line-name[role="button"], .reduce .steps.mo-live li, .reduce .mo-stops circle{ transition:none; }
.reduce .copy-btn[data-mo-state="copied"] .mo-copy-check{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .mo-lines path, .line-name[role="button"], .steps.mo-live li, .mo-stops circle, .mo-copy-check, .mo-copy-env{ transition:none !important; }
}

/* ---------- phones (under 768 px, or a coarse pointer at 500 px or less tall) ---------- */
@media (max-width:767px){
  :root{ --mo-dial-w:112px; --mo-step-w:96px; }
  .dial{ grid-template-columns:var(--tap) var(--mo-dial-w) var(--tap) 1fr; grid-template-areas:"prev fig next ." "out out out out"; column-gap:var(--sp-4); }
  .dial-out{ text-align:left; }
  .step-ctl{ justify-content:flex-start; }
}
@media (pointer:coarse) and (max-height:500px){
  :root{ --mo-dial-w:96px; --mo-step-w:84px; }
}