/* ------------------------------------------------------------------
   Threshold dialog: the stylesheet for ThresholdDialog (Rendering RCL).

   Extends the shared action sheet in threshold-operational-components.css
   (.th-scrim, .th-modal, __head, __heading, __title, __sub, __close,
   __body, __foot) and is linked immediately after it in index.html,
   before every destination sheet. Everything here applies only to a
   dialog that opts in with .is-confirm, or a scrim that opts in with
   .is-dialog, so existing .th-modal sheets keep their look. --th-* tokens
   only; no copper or oxblood (ADR-0035 locked accents) - dialog tone is
   semantic colour, not brand.

   Tone is set on the dialog (.is-caution, .is-risk; neutral is the
   default) and read by the top edge, the glyph, impact outcomes and the
   confirm button through --dlg-*.

   The confirm button is .cc-btn.th-modal__confirm - never .is-primary,
   which authoring shells re-scope to copper.

   Everything below this header is the approved dialog canon, byte for
   byte; change the canon first, then lift it again.
   ------------------------------------------------------------------ */

/* A dialog's scrim stacks above every drawer, rail, finder and popover (the highest sits at 1085)
   and below the toast stack (1090) and the fatal takeover (3000). This holds only at the layout
   root: the dialog never renders inside another stacking context. */
.th-scrim.is-dialog { z-index: 1088; }

.th-modal.is-confirm {
  --dlg-tone: var(--th-advant-deep);
  --dlg-tone-soft: var(--th-advant-soft);
  --dlg-tone-ink: var(--th-advant-deep);
  --dlg-tone-fg: var(--th-advant-fg);
  border-top: 3px solid var(--dlg-tone);
  /* Head and foot stay put; only the body scrolls when the dialog meets the viewport cap. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-modal.is-confirm.is-caution {
  --dlg-tone: var(--th-warn);
  --dlg-tone-soft: var(--th-warn-soft);
  --dlg-tone-ink: var(--th-warn-ink);
  --dlg-tone-fg: oklch(22% 0.03 70);
}
.th-modal.is-confirm.is-risk {
  --dlg-tone: var(--th-risk);
  --dlg-tone-soft: var(--th-risk-soft);
  --dlg-tone-ink: var(--th-risk-ink);
  --dlg-tone-fg: oklch(99% 0.004 25);
}
[data-theme="dark"] .th-modal.is-confirm.is-risk { --dlg-tone-fg: oklch(16% 0.02 25); }

.th-modal.is-confirm .th-modal__head,
.th-modal.is-confirm .th-modal__foot { flex: none; }
.th-modal.is-confirm .th-modal__body { overflow-y: auto; min-height: 0; }

/* ---------- sizes ---------- */
.th-modal.is-confirm.is-narrow { width: 440px; }
.th-modal.is-confirm.is-wide { width: 720px; }
@media (max-width: 720px) {
  .th-modal.is-confirm,
  .th-modal.is-confirm.is-narrow,
  .th-modal.is-confirm.is-wide { width: 100%; max-width: 100%; }
}

/* ---------- head ---------- */
.th-modal__glyph {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--dlg-tone-soft);
  color: var(--dlg-tone-ink);
}
.th-modal__glyph svg { width: 15px; height: 15px; }
.th-modal.is-confirm .th-modal__close:disabled {
  cursor: default;
  opacity: 0.45;
  background: transparent;
}

/* ---------- body building blocks (each optional) ---------- */
.th-modal__lede { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--th-ink-2); }
.th-modal__lede strong { color: var(--th-ink); font-weight: 600; }

.th-modal.is-confirm code {
  font-family: var(--th-font-mono);
  font-size: 0.92em;
  color: var(--th-ink);
  background: var(--th-paper-2);
  padding: 0 4px;
  border-radius: var(--th-radius-2);
}

.th-modal__impact {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  background: var(--th-paper);
}
.th-modal__impact li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--th-ink);
}
.th-modal__impact li + li { border-top: 1px solid var(--th-line-soft); }
.th-modal__impact .g { color: var(--th-ink-3); display: grid; place-items: center; }
.th-modal__impact .g svg { width: 14px; height: 14px; }
.th-modal__impact .v {
  font-family: var(--th-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-ink-2);
  white-space: nowrap;
}
.th-modal__impact .v.is-tone { color: var(--dlg-tone-ink); font-weight: 600; }

/* Type to confirm: the prompt is one <span>, then the input. */
.th-modal__gate { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--th-ink-2); }
.th-modal__gate .th-input { font-family: var(--th-font-mono); }

.th-modal__body > .th-fb { margin-top: 2px; }

/* ---------- foot ---------- */
.th-modal__note {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--th-ink-3);
  min-width: 0;
}
.th-modal__note svg { width: 12px; height: 12px; flex: none; }
/* Waiting on a request the dialog did not start: the note says what for, led by a spinner, while
   the confirm is held with aria-disabled. */
.th-modal__note.is-waiting::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  animation: th-dlg-spin 0.8s linear infinite;
}

/* Tone applies only while the button can act. A disabled confirm (native or aria) falls through
   to the shared grey .cc-btn disabled atom, like every other disabled button. */
.th-modal__confirm.cc-btn:not(:disabled):not([aria-disabled="true"]) {
  background: var(--dlg-tone);
  border-color: var(--dlg-tone);
  color: var(--dlg-tone-fg);
  font-weight: 600;
}
.th-modal__confirm.cc-btn:not(:disabled):not([aria-disabled="true"]):hover {
  background: oklch(from var(--dlg-tone) calc(l - 0.04) c h);
  border-color: oklch(from var(--dlg-tone) calc(l - 0.04) c h);
}

/* In flight is not unavailable: the action is running. Keep the tone at full strength, change the
   label ("Archiving…") and lead it with a spinner. Use aria-disabled + aria-busy, not disabled,
   so focus stays on the button for the whole request. */
.th-modal .th-modal__confirm.cc-btn[aria-busy="true"] {
  background: var(--dlg-tone);
  border-color: var(--dlg-tone);
  color: var(--dlg-tone-fg);
  font-weight: 600;
  cursor: progress;
}
.th-modal__confirm.cc-btn[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  animation: th-dlg-spin 0.8s linear infinite;
}
@keyframes th-dlg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .th-modal__confirm.cc-btn[aria-busy="true"]::before,
  .th-modal__note.is-waiting::before { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

/* Focus is the decision signal here, so it must read clearly: a solid outline in the tone for the
   confirm, Advant blue for the other buttons (the shared atom's ring is copper and faint) and for
   the notice that takes focus after a refusal or failure. Keyboard focus only, like the buttons. */
.th-modal.is-confirm .th-modal__confirm.cc-btn:focus-visible {
  outline: 2px solid var(--dlg-tone);
  outline-offset: 2px;
  box-shadow: none;
}
.th-modal.is-confirm .th-modal__foot .cc-btn:not(.th-modal__confirm):focus-visible {
  outline: 2px solid var(--th-advant);
  outline-offset: 2px;
  box-shadow: none;
  border-color: var(--th-line-2);
}
.th-modal.is-confirm .th-fb:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* Threshold is designed down to tablet width; at phone width the dialog only reflows. The note takes
   its own line, and Cancel and the confirm keep one row in the same order: a long confirm takes the
   rest of the row and wraps its label instead of dropping below Cancel, and a short one keeps its
   width. A word too long for that space (a long time-zone name) breaks inside the word. */
@media (max-width: 480px) {
  .th-modal.is-confirm .th-modal__foot { flex-wrap: wrap; }
  .th-modal.is-confirm .th-modal__note { flex-basis: 100%; margin-right: 0; }
  .th-modal.is-confirm .th-modal__confirm { flex: 1 1 0; max-width: max-content; overflow-wrap: anywhere; }
}