/* ==================================================================
   Threshold - operational component primitives
   ------------------------------------------------------------------
   Shared class primitives for the operational surfaces (Settings >
   Teams now; Staff Task, Team queues and My Work - AW-10/AW-11 -
   when they lift). Lifted from the approved Teams, routing,
   ownership, My Work handoff (handoff/threshold-ops.css), with the
   handoff's names mapped onto production tokens:

     --th-sunk         -> --th-paper-sunk
     --th-mono / sans / serif -> --th-font-mono / sans / serif
     --th-radius / -sm -> --th-radius-5 / --th-radius-3
     .th-dark          -> [data-theme="dark"] (no override needed:
                          every value below is a theme-tracking token)

   No token is declared here. Shadows and scrims are literal values,
   as the handoff writes them. Buttons, pills, chips, toasts, the
   grid and the shell are production atoms (cc-btn, cc-pill, af-chip,
   ThresholdToastHost, ThresholdGrid, threshold-chrome.css) and are
   deliberately not redefined. A surface whose prototype differs from
   these handoff values applies its delta in its own stylesheet.
   ================================================================== */

.th-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- offline strip ---------- */
.th-offline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  background: var(--th-warn-soft);
  border-bottom: 1px solid var(--th-warn);
  color: var(--th-warn-ink);
  font-size: var(--th-size-13);
}
.th-offline__retry {
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  padding: 2px 9px;
  border: 1px solid var(--th-warn-ink);
  border-radius: var(--th-radius-3);
  background: transparent;
  color: var(--th-warn-ink);
  cursor: pointer;
}

/* ---------- banners (status is a word and an icon, never colour alone) ---------- */
.th-banner {
  border-radius: var(--th-radius-5);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  font-size: var(--th-size-13);
  line-height: 1.5;
}
.th-banner > svg { margin-top: 2px; }
.th-banner b { font-weight: 600; }
.th-banner.is-warn { border: 1px solid var(--th-warn); background: var(--th-warn-soft); color: var(--th-warn-ink); }
.th-banner.is-risk { border: 1px solid var(--th-risk); background: var(--th-risk-soft); color: var(--th-risk-ink); }
.th-banner.is-info { border: 1px solid var(--th-advant); background: var(--th-advant-soft); color: var(--th-advant-deep); }
.th-banner.is-ok { border: 1px solid var(--th-ok); background: var(--th-ok-soft); color: var(--th-ok-ink); }
.th-banner.is-neutral { border: 1px solid var(--th-line-2); background: var(--th-paper-2); color: var(--th-ink-2); }

/* ---------- empty and denied states ---------- */
.th-empty {
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--th-ink-2);
}
.th-empty__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--th-paper-2);
  border: 1px solid var(--th-line);
  color: var(--th-ink-2);
  flex: none;
}
.th-empty__title { font-size: var(--th-size-15); font-weight: 600; color: var(--th-ink); }
.th-empty__body { font-size: var(--th-size-13); max-width: 420px; color: var(--th-ink-2); line-height: 1.5; }
.th-denied {
  margin: 24px;
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  background: var(--th-paper-sunk);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.th-denied__title { font: 600 17px var(--th-font-serif); color: var(--th-ink); }

/* ---------- cards ---------- */
.th-card {
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  background: var(--th-paper-sunk);
}
.th-card__head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--th-line);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.th-card__title { font-family: var(--th-font-serif); font-weight: 600; font-size: var(--th-size-14); color: var(--th-ink); }
.th-card__sub { font-family: var(--th-font-mono); font-size: 10.5px; font-weight: 400; color: var(--th-ink-2); }

/* ---------- modal action sheets ---------- */
.th-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: oklch(20% 0.01 255 / 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.th-modal {
  width: 520px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--th-paper-sunk);
  border: 1px solid var(--th-line-2);
  border-radius: 6px;
  box-shadow: 0 20px 60px oklch(20% 0.01 255 / 0.25);
  color: var(--th-ink);
  font-size: 13px;
}
.th-modal:focus { outline: none; }
.th-modal__head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--th-line);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.th-modal__heading { flex: 1; min-width: 0; }
.th-modal__title { margin: 0; font: 600 17px var(--th-font-serif); color: var(--th-ink); }
.th-modal__sub { margin-top: 3px; font-size: 12px; color: var(--th-ink-2); font-family: var(--th-font-mono); }
.th-modal__close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--th-radius-3);
  color: var(--th-ink-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: none;
}
.th-modal__close:hover { background: var(--th-paper-2); color: var(--th-ink); }
.th-modal__close:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.th-modal__body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.th-modal__foot {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--th-line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.th-modal__expects { font-family: var(--th-font-mono); font-size: 11px; color: var(--th-ink-2); }
.th-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--th-ink-2); }
.th-input {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--th-line-2);
  border-radius: var(--th-radius-3);
  background: var(--th-paper);
  color: var(--th-ink);
}
.th-input:focus { border-color: var(--th-advant); outline: 0; }
.th-input[aria-invalid="true"] { border-color: var(--th-risk); }
.th-input::placeholder { color: var(--th-ink-2); opacity: 1; }
.th-field__help { font-size: 11.5px; color: var(--th-ink-2); }
.th-field__help.is-error { color: var(--th-risk-ink); }

/* ---------- history ---------- */
.th-history__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--th-line-soft);
  align-items: baseline;
}
.th-history__when { font: 11.5px var(--th-font-mono); color: var(--th-ink-2); white-space: nowrap; }
.th-history__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.th-history__what { font-size: 13px; color: var(--th-ink); }
.th-history__what.is-strong { font-weight: 500; }
.th-history__what.is-emph { font-weight: 600; }
.th-history__meta { font-size: 11.5px; color: var(--th-ink-2); }

/* ---------- avatar (initials) ---------- */
.th-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(50% 0.08 220);
  color: var(--th-paper);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 600;
  flex: none;
}
[data-theme="dark"] .th-avatar { background: oklch(70% 0.08 220); }

@media (max-width: 720px) {
  .th-modal { width: 100vw; max-width: 100vw; border-radius: 0; }
}