/* ==================================================================
   Applicant File - Work & attention (th-attn-*, th-attention__*, th-task-row, th-work-cols)
   ------------------------------------------------------------------
   The tab's own layout and values (Work Attention.dc.html, and the
   handoff's "file shell tabs & summary" rows .th-attention__row and
   .th-task-row from handoff/threshold-ops.css), on production tokens:

     --th-sunk         -> --th-paper-sunk
     --th-mono / serif -> --th-font-mono / --th-font-serif
     --th-radius / -sm -> --th-radius-5 / --th-radius-3

   Shared primitives - cards, banners, the denied state, history rows,
   the offline strip and the action-sheet bodies - come from
   threshold-operational-components.css; pills and kind labels from
   threshold-actionable-work.css; buttons are cc-btn. No token is
   declared here: every value is a theme-tracking token, so light and
   dark follow the theme without overrides.
   ================================================================== */

.th-attn { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; color: var(--th-ink); }
.th-attn textarea::placeholder, .th-attn input::placeholder { color: var(--th-ink-2); opacity: 1; }
.th-attn-wrap { padding: 14px 24px 0; }
.th-attn-spacer { flex: 1; }

/* ---------- loading, lost access ---------- */
.th-attn-loading { padding: 24px; font-size: 12.5px; color: var(--th-ink-2); display: inline-flex; align-items: center; gap: 8px; }
.th-attn-state__body { font-size: 12.5px; max-width: 440px; color: var(--th-ink-2); line-height: 1.5; }
.th-attn-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-attn-state__link:hover { background: var(--th-paper-2); }

/* ---------- presence strip ---------- */
.th-attn-presence {
  border: 1px solid var(--th-line);
  border-radius: var(--th-radius-5);
  background: var(--th-paper-sunk);
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.th-attn-presence__line { font-size: 12.5px; color: var(--th-ink-2); flex: 1 1 240px; min-width: 0; line-height: 1.45; }
.th-attn-presence__link { font-size: 12.5px; white-space: nowrap; color: var(--th-advant); text-decoration: none; }
.th-attn-presence__link:hover { color: var(--th-advant-deep); }

/* ---------- columns ---------- */
.th-work-cols {
  padding: 16px 24px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
.th-attn-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.th-attn-rail { display: flex; flex-direction: column; gap: 12px; }
.th-attn-card-title { margin: 0; font-family: var(--th-font-serif); font-weight: 600; font-size: 15px; color: var(--th-ink); }
.th-attn-card-sub { font-size: 11.5px; color: var(--th-ink-2); }
.th-attn-head-link { font-size: 12.5px; white-space: nowrap; color: var(--th-advant); text-decoration: none; }
.th-attn-head-link:hover { color: var(--th-advant-deep); }
.th-attn-none { padding: 14px 16px; font-size: 12.5px; color: var(--th-ink-2); }
.th-attn-mini {
  font: inherit;
  font-size: 11.5px;
  padding: 2px 8px;
  margin-left: 6px;
  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-attn-mini:hover { border-color: var(--th-ink-4); color: var(--th-ink); }
.th-attn-mini:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* ---------- "Why this file needs attention" ---------- */
.th-attention__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--th-line-soft);
  align-items: center;
}
.th-attention__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.th-attention__kinds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.th-attention__title { font-weight: 500; color: var(--th-ink); line-height: 1.35; overflow-wrap: anywhere; }
.th-attention__sub { font-size: 11.5px; color: var(--th-ink-2); line-height: 1.45; }
.th-attn-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--th-radius-3);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--th-line-2);
  background: var(--th-paper-sunk);
  color: var(--th-ink);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.th-attn-go:hover { border-color: var(--th-ink-4); background: var(--th-paper-2); color: var(--th-ink); }
.th-attn-go:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.th-attn-go svg { color: var(--th-ink-2); flex: none; }
.th-attn-empty { padding: 22px 16px; display: flex; align-items: center; gap: 12px; }
.th-attn-empty__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--th-ok-soft);
  border: 1px solid var(--th-line);
  color: var(--th-ok-ink);
  flex: none;
}
.th-attn-empty__text { display: flex; flex-direction: column; gap: 2px; }
.th-attn-empty__title { font-weight: 600; color: var(--th-ink); }
.th-attn-empty__line { font-size: 12.5px; color: var(--th-ink-2); line-height: 1.45; }

/* ---------- "Tasks on this file" ---------- */
.th-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 120px;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--th-line-soft);
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.th-task-row:hover { background: var(--th-paper-2); color: inherit; }
.th-task-row:focus-visible { outline: 2px solid var(--th-advant); outline-offset: -2px; }
.th-task-row.is-done { border-bottom: 0; border-top: 1px solid var(--th-line-soft); opacity: 0.85; }
.th-task-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-task-row__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.th-task-row__title { font-weight: 500; color: var(--th-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-task-row__sub { font-size: 11.5px; color: var(--th-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-task-row__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-task-row__team { font-size: 12px; color: var(--th-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-task-row__people { font-size: 11.5px; color: var(--th-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-task-row__people.is-warn { color: var(--th-warn-ink); }
.th-task-row__when { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.th-task-row__due { font-family: var(--th-font-mono); font-size: 11px; color: var(--th-ink-2); white-space: nowrap; }
.th-task-row__due.is-end { text-align: right; }
.th-attn-done-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  background: var(--th-paper-2);
  font: inherit;
  font-size: 12px;
  color: var(--th-ink-2);
  cursor: pointer;
  text-align: left;
}
.th-attn-done-toggle:focus-visible { outline: 2px solid var(--th-advant); outline-offset: -2px; }
.th-attn-chev { color: var(--th-ink-2); transform: rotate(-90deg); transition: transform 0.12s; flex: none; }
.th-attn-chev.is-open { transform: rotate(0deg); }
.th-attn-done-count { font-family: var(--th-font-mono); font-size: 11px; color: var(--th-ink-2); }
@media (prefers-reduced-motion: reduce) { .th-attn-chev { transition: none; } }

/* ---------- escalation and follow-up wait cards ---------- */
.th-attn-box {
  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;
}
/* An attention item's "Manage below" / "Decide below" moves focus here: the ring says where it went. */
.th-attn-box:focus { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.th-attn-box__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.th-attn-box__kicker { margin: 0; }
.th-attn-quote { font-size: 13px; color: var(--th-ink); line-height: 1.45; overflow-wrap: anywhere; }
.th-attn-meta { font-size: 11.5px; color: var(--th-ink-2); line-height: 1.5; }
.th-attn-meta__time { font-weight: 500; color: var(--th-ink-2); font-family: var(--th-font-mono); }
.th-attn-meta__strong { font-weight: 500; color: var(--th-ink-2); }
.th-attn-off { font-size: 12.5px; color: var(--th-ink-2); line-height: 1.5; }
.th-attn-note { font-size: 11.5px; color: var(--th-ink-2); line-height: 1.5; }
.th-attn-act { justify-content: center; padding: 6px 12px; font-size: 12.5px; gap: 7px; }
.th-attn-act.is-quiet { border-color: transparent; background: transparent; color: var(--th-ink-2); }
.th-attn-act.is-quiet:hover { border-color: var(--th-line-2); background: transparent; color: var(--th-ink-2); }
.th-attn-act.is-quiet[aria-disabled="true"] { border-color: transparent; background: transparent; color: var(--th-ink-4); }
.th-attn-wait { display: flex; flex-direction: column; gap: 8px; }
.th-attn-wait + .th-attn-wait { border-top: 1px solid var(--th-line-soft); padding-top: 8px; }
.th-attn-three {
  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-attn-three b { font-weight: 600; color: var(--th-ink-2); }

/* ---------- action sheets (the shared operational sheet shell) ---------- */
.th-attn-scrim { background: oklch(20% 0.01 255 / 0.32); }
.th-attn-modal { width: 500px; font-size: 13px; }
.th-attn-modal .th-modal__sub { font-family: var(--th-font-sans); font-size: 11.5px; }
.th-attn-modal .th-modal__expects { flex: 1; }
.th-attn-modal .cc-btn { white-space: nowrap; font-size: 12.5px; }
.th-attn-sheet .th-banner { font-size: 12.5px; }
.th-attn-sheet .th-textarea[disabled], .th-attn-sheet .th-input[disabled] { color: var(--th-ink-2); background: var(--th-paper-2); }
.th-attn-banner-btn {
  font: inherit;
  font-size: 12px;
  padding: 1px 8px;
  border: 1px solid var(--th-warn-ink);
  border-radius: var(--th-radius-3);
  background: transparent;
  color: var(--th-warn-ink);
  cursor: pointer;
}
.th-attn-banner-btn:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.th-attn-review { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; cursor: pointer; }
.th-attn-hint { font-weight: 400; color: var(--th-ink-2); }
.th-attn-strong { font-weight: 600; color: var(--th-ink); }
.th-attn-spin { animation: th-spinner 1s linear infinite; color: var(--th-ink-2); }
@media (prefers-reduced-motion: reduce) { .th-attn-spin { animation: none; } }

/* The follow-up picker: a checkbox per requirement. An unavailable row stays focusable (aria-disabled) so its reason is
   reachable; only its checkbox and title are dimmed, and the reason keeps the secondary text colour. */
.th-attn-req__label { color: var(--th-ink); }
.th-attn-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid var(--th-line-2);
  display: inline-grid;
  place-items: center;
  flex: none;
  color: transparent;
}
.th-attn-req[aria-pressed="true"] .th-attn-check { background: var(--th-advant-deep); border-color: var(--th-advant-deep); color: var(--th-advant-fg); }
.th-attn-req.is-unavailable { cursor: not-allowed; }
.th-attn-req.is-unavailable .th-attn-check,
.th-attn-req.is-unavailable .th-attn-req__label { opacity: 0.6; }
.th-attn-when-inputs { display: flex; gap: 8px; }

/* The summary card's attention marker (Work Attention canon): a dot and its text, in the ink of what it says. It sits
   in the shell but belongs to this canon, whose attention accent is copper; All Files' own sheet stays copper-free. */
.th-file-attn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--th-marigold-deep);
}
.th-file-attn.is-escalated { color: var(--th-risk-ink); }
.th-file-attn.is-waiting { color: var(--th-ink-2); }
.th-file-attn__dot {
    flex: none;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px color-mix(in oklab, currentColor 18%, transparent);
}
.th-attn-when-inputs .th-input { flex: 1; min-width: 0; font-family: var(--th-font-mono); }
.th-attn-field-line { font-size: 11px; color: var(--th-ink-2); }
.th-attn-field-line.is-error { color: var(--th-risk-ink); }

/* ---------- Requirements & documents opened on one requirement (canon A06b) ---------- */
.af-req-item.is-target > .af-req-row { background: var(--th-advant-soft); box-shadow: inset 2px 0 0 var(--th-advant); }

/* ---------- responsive (canon: 1100 and 720) ---------- */
@media (max-width: 1100px) {
  .th-work-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .th-task-row { grid-template-columns: minmax(0, 1fr); }
  .th-task-row__when { align-items: flex-start; }
  .th-attn-modal { width: 100vw; max-width: 100vw; border-radius: 0; }
}