/* ==================================================================
   Staff Task (th-task-*)
   ------------------------------------------------------------------
   The task page's own layout and values (Staff Task.dc.html), on
   production tokens. Shared primitives - banners, the denied and
   empty states, history rows, avatars, action-sheet bodies - come
   from threshold-operational-components.css; the sheets themselves
   are the shared ThresholdDialog; buttons and pills are cc-btn and
   cc-pill. Where the prototype differs from those atoms (the info
   pill's Advant tone, the quiet risk Cancel task button), the delta
   is scoped to .th-task-page here.
   ================================================================== */

.th-task-page { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.th-task-page input::placeholder, .th-task-page textarea::placeholder { color: var(--th-ink-2); opacity: 1; }
.th-task-mono { font-family: var(--th-font-mono); }
.th-task-spacer { flex: 1; }

/* ---------- back link, stale strip, head ---------- */
.th-task-back { padding: 16px 24px 0; }
.th-task-back a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--th-ink-2); text-decoration: none; }
.th-task-back a:hover { color: var(--th-ink); }
.th-task-stale { margin: 12px 24px 0; padding: 10px 14px; gap: 10px; }
.th-task-head { padding: 12px 24px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.th-task-head > div { min-width: 0; }
.th-task-title {
  margin: 3px 0 0;
  font-family: var(--th-font-serif);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.012em;
  color: var(--th-ink);
  line-height: 1.25;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.th-task-meta { margin-top: 6px; font-size: 12.5px; color: var(--th-ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- state strip ---------- */
.th-task-strip {
  margin: 14px 24px 0;
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  background: var(--th-paper-sunk);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.th-task-page .cc-pill { white-space: nowrap; }
.th-task-page .cc-pill.is-info { background: var(--th-advant-soft); color: var(--th-advant-deep); }
.th-task-page .cc-pill.is-ok { color: var(--th-ok-ink); }
.th-task-page .cc-pill.is-warn { color: var(--th-warn-ink); }
.th-task-page .cc-pill.is-risk { color: var(--th-risk-ink); }
.th-task-due { font-size: 12.5px; color: var(--th-ink-2); }
.th-task-due b { font-family: var(--th-font-mono); font-weight: 500; color: var(--th-ink); }
.th-task-wait { font-size: 12.5px; color: var(--th-warn-ink); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.th-task-wait b { font-family: var(--th-font-mono); font-weight: 500; }
.th-task-wait .th-task-why { color: var(--th-ink-2); }
.th-task-queue { font-size: 11.5px; color: var(--th-ink-2); }
.th-task-queue b { font-weight: 500; color: var(--th-ink-2); }

/* ---------- columns ---------- */
.th-task-cols {
  padding: 16px 24px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.th-task-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.th-task-card { border: 1px solid var(--th-line); border-radius: var(--th-radius-5); background: var(--th-paper-sunk); }
.th-task-facts {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 24px;
  font-size: 12.5px;
}
.th-task-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.th-task-fact.is-wide { grid-column: 1 / -1; gap: 6px; }
.th-task-fact__hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--th-ink-2); }
.th-task-file-link { font-weight: 500; color: var(--th-ink); overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.th-task-file-link:hover { color: var(--th-advant-deep); }
.th-task-file-ref { font-family: var(--th-font-mono); font-size: 11px; color: var(--th-ink-2); }
.th-task-note { font-size: 11.5px; color: var(--th-ink-2); line-height: 1.45; }
.th-task-strong { font-weight: 500; color: var(--th-ink); }
.th-task-quiet { color: var(--th-ink-2); }

/* ---------- assignees ---------- */
.th-task-person { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--th-line-soft); }
.th-task-person__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.th-task-person__name { color: var(--th-ink); }
.th-task-person__sub { font-size: 11px; color: var(--th-ink-2); }
.th-task-avatar { width: 24px; height: 24px; font-size: 10px; }
.th-task-avatar.is-small { width: 22px; height: 22px; font-size: 9.5px; }
/* The prototype's avatar fills, one per person by id; dark keeps hue and chroma at the 70% step. */
.th-task-avatar.is-c0 { background: oklch(50% 0.08 220); }
.th-task-avatar.is-c1 { background: oklch(52% 0.09 150); }
.th-task-avatar.is-c2 { background: oklch(52% 0.09 300); }
.th-task-avatar.is-c3 { background: oklch(50% 0.09 30); }
.th-task-avatar.is-c4 { background: oklch(48% 0.08 260); }
.th-task-avatar.is-c5 { background: oklch(50% 0.08 90); }
.th-task-avatar.is-c6 { background: oklch(50% 0.09 190); }
.th-task-avatar.is-c7 { background: oklch(45% 0.08 340); }
[data-theme="dark"] .th-task-avatar.is-c0 { background: oklch(70% 0.08 220); }
[data-theme="dark"] .th-task-avatar.is-c1 { background: oklch(70% 0.09 150); }
[data-theme="dark"] .th-task-avatar.is-c2 { background: oklch(70% 0.09 300); }
[data-theme="dark"] .th-task-avatar.is-c3 { background: oklch(70% 0.09 30); }
[data-theme="dark"] .th-task-avatar.is-c4 { background: oklch(70% 0.08 260); }
[data-theme="dark"] .th-task-avatar.is-c5 { background: oklch(70% 0.08 90); }
[data-theme="dark"] .th-task-avatar.is-c6 { background: oklch(70% 0.09 190); }
[data-theme="dark"] .th-task-avatar.is-c7 { background: oklch(70% 0.08 340); }
.th-task-avatar.is-hollow,
[data-theme="dark"] .th-task-avatar.is-hollow { background: var(--th-paper-2); color: var(--th-ink-2); box-shadow: inset 0 0 0 1px var(--th-line-2); }
.th-task-unassigned { padding: 6px 0; border-top: 1px solid var(--th-line-soft); color: var(--th-warn-ink); }
.th-task-mini {
  font: inherit;
  font-size: 11.5px;
  padding: 2px 8px;
  border: 1px solid var(--th-line-2);
  border-radius: var(--th-radius-3);
  background: transparent;
  color: var(--th-ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.th-task-mini:hover { border-color: var(--th-ink-4); color: var(--th-ink); }
.th-task-mini:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.th-task-mini.is-edit { padding: 2px 9px; }
.th-task-mini.is-risk { border-color: var(--th-risk); color: var(--th-risk-ink); }
.th-task-mini.is-pressed { border-color: var(--th-line-2); color: var(--th-ink-2); }

/* ---------- description ---------- */
.th-task-desc-hint { font-size: 11px; color: var(--th-ink-2); }
.th-task-desc-note { font-size: 11px; color: var(--th-ink-2); }
.th-task-desc-review { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; cursor: pointer; }
.th-task-desc-actions .cc-btn { font-size: 12px; padding: 4px 10px; }

/* ---------- outcome ---------- */
.th-task-outcome { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.th-task-outcome__text { font-size: 13px; color: var(--th-ink); line-height: 1.5; overflow-wrap: anywhere; }
.th-task-outcome__meta { font-size: 11.5px; color: var(--th-ink-2); }

/* ---------- history ---------- */
.th-task-history__head { padding: 10px 16px; border-bottom: 1px solid var(--th-line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-task-history__title { margin: 0; font-family: var(--th-font-serif); font-weight: 600; font-size: 15px; color: var(--th-ink); }
.th-task-history__sub { font-size: 11.5px; color: var(--th-ink-2); }
.th-task-history .th-history__what.is-medium { font-weight: 500; }
.th-task-history__more { padding: 8px 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--th-ink-2); }
.th-task-history__text {
  margin: 4px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-3);
  background: var(--th-paper-2);
  font-size: 12px;
  color: var(--th-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.th-task-history__text-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--th-ink-2); }
.th-task-history__toggle {
  font: inherit;
  font-size: 11.5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--th-advant-deep);
  cursor: pointer;
  text-align: left;
}
.th-task-history__toggle:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* ---------- rail ---------- */
.th-task-rail { display: flex; flex-direction: column; gap: 12px; }
.th-task-actions {
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  background: var(--th-paper-sunk);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.th-task-actions > .cc-btn { justify-content: center; padding: 7px 12px; font-size: 12.5px; gap: 7px; }
.th-task-actions > .cc-btn.th-task-cancel { border-color: transparent; background: transparent; color: var(--th-risk-ink); }
.th-task-actions > .cc-btn.th-task-cancel:hover:not([aria-disabled="true"]):not(:disabled) { border-color: var(--th-risk); background: transparent; }
.th-task-actions > .cc-btn svg { width: 13px; height: 13px; }
.th-task-terminal { font-size: 12.5px; color: var(--th-ink-2); line-height: 1.5; }
.th-task-action-note { font-size: 11.5px; color: var(--th-ink-2); line-height: 1.5; }
.th-task-who {
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  background: var(--th-paper-2);
  padding: 12px 16px;
  font-size: 11.5px;
  color: var(--th-ink-2);
  line-height: 1.55;
}
.th-task-who b { font-weight: 600; color: var(--th-ink-2); }

/* ---------- missing, denied, loading ---------- */
.th-task-state__body { font-size: 12.5px; max-width: 460px; color: var(--th-ink-2); line-height: 1.5; }
.th-task-state__link {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--th-radius-3);
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--th-line-2);
  background: var(--th-paper-sunk);
  color: var(--th-ink);
  text-decoration: none;
}
.th-task-loading { padding: 24px; font-size: 12.5px; color: var(--th-ink-2); display: inline-flex; align-items: center; gap: 8px; }

/* ---------- action sheets (the shared operational sheet shell) ---------- */
.th-task-modal { font-size: 13px; }
.th-task-modal .th-modal__sub { font-family: var(--th-font-sans); font-size: 11.5px; }
.th-task-modal .th-modal__expects { flex: 1; }
.th-task-modal .cc-btn { white-space: nowrap; }
.th-task-modal .cc-btn.th-task-commit-risk { border-color: var(--th-risk); background: var(--th-risk-soft); color: var(--th-risk-ink); }
.th-task-modal .cc-btn.th-task-commit-risk[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.th-task-sheet .th-field > span.th-task-fact__hint, .th-task-hint { font-weight: 400; color: var(--th-ink-2); }
.th-task-sheet .th-banner { font-size: 12.5px; }
.th-task-sheet .th-banner button { font: inherit; font-size: 12px; padding: 1px 8px; border-radius: var(--th-radius-3); background: transparent; cursor: pointer; }
.th-task-sheet .th-banner.is-warn button,
.th-desc .th-banner.is-warn button { border: 1px solid var(--th-warn-ink); color: var(--th-warn-ink); }
.th-task-review { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; cursor: pointer; }
.th-task-explain { font-size: 12px; color: var(--th-ink-2); line-height: 1.5; }
.th-task-when-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.th-task-when-inputs { display: flex; gap: 8px; }
.th-task-when-inputs .th-input { flex: 1; min-width: 0; font-family: var(--th-font-mono); }
.th-task-field-line { font-size: 11px; color: var(--th-ink-2); }
.th-task-field-line.is-error { color: var(--th-risk-ink); }
.th-task-file-retry { align-self: flex-start; }
.th-task-dropped { font-size: 11.5px; color: var(--th-warn-ink); }
.th-task-sheet .th-input[disabled] { color: var(--th-ink-2); background: var(--th-paper-2); }
.th-task-life { margin-left: auto; }
.th-task-spin { animation: th-spinner 1s linear infinite; color: var(--th-ink-2); }
@media (prefers-reduced-motion: reduce) { .th-task-spin { animation: none; } }

/* ---------- responsive (canon: 1000 and 720) ---------- */
@media (max-width: 1000px) {
  .th-task-cols { grid-template-columns: minmax(0, 1fr); }
  .th-task-rail { order: -1; }
  .th-task-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .th-task-actions > .th-kicker { flex-basis: 100%; }
  .th-task-actions > .cc-btn { white-space: nowrap; }
  .th-task-actions > .th-task-action-note { flex-basis: 100%; }
}
@media (max-width: 720px) {
  .th-task-head { flex-direction: column; align-items: stretch; }
  .th-task-facts { grid-template-columns: minmax(0, 1fr); }
  .th-task-when-row { grid-template-columns: minmax(0, 1fr); }
}