/* need-a-moment.css — the "Need a moment?" panel (COA-87, COA-114). Tokens only (site/rel8r-tokens.css).
   Black chassis with the antique gold frame (COA-117 --gold-*), so the triage tool matches the header and footer on every page;
   the opener stays bottom-left. Pink is kept for the one forward action ("Next step"). */
.nam__open {
  position: fixed; left: var(--size-space-4); bottom: var(--size-space-4); z-index: var(--ed-z-nav);
  min-height: var(--size-space-12); padding: 0 var(--size-space-5);
  font: 700 var(--size-text-lg) var(--font-body); color: var(--gold-text);
  background: var(--gold-chassis); border: var(--nam-line) solid var(--gold-line); border-radius: var(--ed-radius-pill); cursor: pointer;
  box-shadow: var(--gold-bevel), 0 var(--size-space-1) var(--size-space-4) rgb(var(--ch-pure-black) / var(--ed-alpha-fill));
}
.nam__open:hover { border-color: var(--gold-line-hot); box-shadow: var(--gold-bevel), var(--gold-glow); }
.nam__open:focus-visible, .nam__btn:focus-visible, .nam__ask:focus-visible { outline: var(--nam-focus) solid rgb(var(--ch-gold-specular)); outline-offset: var(--size-space-1); }
.nam__dialog {
  width: min(var(--nam-width), calc(var(--ed-vw-100) - var(--size-space-8))); max-height: calc(var(--ed-vh-full) - var(--size-space-8)); overflow: auto;
  padding: var(--size-space-5); color: rgb(var(--ch-cream)); background: var(--gold-chassis);
  border: var(--nam-line) solid var(--gold-line); border-radius: var(--size-space-4); font-family: var(--font-body);
  box-shadow: var(--gold-bevel), var(--gold-glow);
}
.nam__dialog::backdrop { background: rgb(var(--ch-ink) / var(--ed-alpha-scrim)); }
.nam__head { display: flex; align-items: center; justify-content: space-between; gap: var(--size-space-3);
  padding-bottom: var(--size-space-3); border-bottom: var(--gold-rule-h) solid var(--gold-line); }
.nam__title { margin: 0; font: 800 var(--size-text-6xl) var(--font-headline); color: var(--gold-text); }
.nam__ask { margin: var(--size-space-4) 0 var(--size-space-3); font: 800 var(--size-text-4xl) var(--font-headline); color: rgb(var(--ch-cream)); }
.nam__choices, .nam__actions { display: flex; flex-direction: column; gap: var(--size-space-2); }
.nam__btn {
  min-height: var(--size-space-12); padding: var(--size-space-2) var(--size-space-4); text-align: left;
  font: 700 var(--size-text-lg) var(--font-body); color: rgb(var(--ch-cream));
  background: rgb(var(--ch-gunmetal) / var(--ed-alpha-fill)); border: var(--nam-line) solid var(--gold-line); border-radius: var(--size-space-3); cursor: pointer;
}
.nam__btn:hover { border-color: var(--gold-line-hot); }
.nam__btn--next { color: rgb(var(--ch-cream)); background: rgb(var(--ch-pink-700)); border-color: var(--gold-line-hot); box-shadow: var(--gold-bevel); }
.nam__btn--quiet { background: transparent; border-color: transparent; color: rgb(var(--ch-cream) / var(--ed-alpha-meta)); }
/* the four steps: a quiet track, the current step in gold foil, finished steps dimmed */
.nam__ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--size-space-1); margin: var(--size-space-4) 0 0; padding: 0; list-style: none; }
.nam__ladder li { padding-top: var(--size-space-2); border-top: var(--nam-line) solid var(--gold-line); color: rgb(var(--ch-cream) / var(--ed-alpha-meta));
  font: 700 var(--size-text-sm) var(--font-body); line-height: 1.2; }
.nam__ladder li.is-done { border-top-color: rgb(var(--ch-gold-deep)); }
.nam__ladder li.is-now { border-top-color: rgb(var(--ch-gold-specular)); color: var(--gold-text); }
.nam__step { margin: var(--size-space-2) 0 0; color: var(--gold-text); font: 700 var(--size-text-md) var(--font-body); }
.nam__steps { margin: 0 0 var(--size-space-4); padding-left: var(--size-space-5); font-size: var(--size-text-xl); line-height: 1.5; }
.nam__steps li + li { margin-top: var(--size-space-2); }
.nam__line, .nam__meta { margin: var(--size-space-2) 0; font-size: var(--size-text-xl); line-height: 1.5; }
.nam__meta { color: rgb(var(--ch-cream) / var(--ed-alpha-meta)); font-size: var(--size-text-md); }
.nam__crisis { margin-top: var(--size-space-5); padding: var(--size-space-3) var(--size-space-4); background: rgb(var(--ch-pink) / var(--ed-alpha-glow));
  border: var(--gold-rule-h) solid var(--gold-line); border-radius: var(--size-space-3); }
.nam__crisis .nam__line { margin: var(--size-space-1) 0; font-size: var(--size-text-md); }
.nam__crisis-label { margin: 0; font: 800 var(--size-text-md) var(--font-headline); color: rgb(var(--ch-cream)); }
.nam__note { margin: var(--size-space-3) 0 0; color: rgb(var(--ch-cream) / var(--ed-alpha-meta)); font-size: var(--size-text-base); line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) { .nam__btn, .nam__open { transition: border-color var(--nam-fade), box-shadow var(--nam-fade); } }