/* Sacred Command Center · inbox module styles. Owned by the inbox module agent. Use the semantic tokens from theme.css only (no hex, no rgba): tests/static.mjs S-a2 fails the build on a literal color.
   The Inbox is the kit's list page with CC v3's three panes inside it: a list (a table while nothing is open, two-line rows beside the reader),
   the message, and the contact. No colored side stripes, no status dots: a status is a word, lateness is a crimson icon plus the word (.late),
   the only marks are the owner mark, Live and Gilt. Sizes come from the kit's tokens so Compact and Comfortable follow. */

/* ── Panes ─────────────────────────────────────────────────────────────────────────────── */
.mail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; align-items: stretch; }
.mail.is-split { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.mail.is-split.has-ctx { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) 300px; }
.mail-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.mail-pane-h { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-bottom: 1px solid var(--line); }
.mail-pane-h h2 { font-size: var(--fs-cell); font-weight: 700; }
.mail-pane-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
/* A list page fills the window (the kit rule for .lv-main): the panes share the height and each scrolls on its own. */
@media (min-width: 768px) and (min-height: 560px) {
  .mail { height: 100%; grid-template-rows: minmax(0, 1fr); }
  .view:has(.mail) .lv-body { overflow: hidden; }
}
.mail-state { padding: var(--s-5) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.mail-state .caption { margin-top: var(--s-3); }

/* The Email / Texts tabs sit close to the list: a dense list page spends its height on rows, not on the gap under the tabs. */
.view:has(.mail-lv) .module-tabs { margin-bottom: var(--s-2); }

/* ── List: a table of columns, or two-line rows ────────────────────────────────────────── */
.mlist { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
.mscroll { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-x: auto; overflow-y: visible; overscroll-behavior: contain; overflow-anchor: none; }   /* a windowed list moves its own spacers: the browser must not chase them (it pinned the view to the bottom and loaded every row) */
@media (min-width: 768px) and (min-height: 560px) { .mscroll { overflow-y: auto; } }
.mscroll:focus-visible { outline-offset: -2px; }
.mtable { min-width: 0; }
.mhead {
  display: grid; align-items: center; height: var(--th-h); min-width: 0;
  background: var(--surface); border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
@media (min-width: 768px) and (min-height: 560px) { .mhead { position: sticky; top: 0; z-index: 2; } }
.mlist--compact .mhead { grid-template-columns: 44px minmax(0, 1fr); }
.mh-c { min-width: 0; padding: 0 var(--cell-px); overflow: hidden; }
.mh-chk { padding: 0; display: grid; place-items: center; }
.mh-all { color: var(--text-3); }
.mh-c .th-btn { height: var(--th-h); }
.mh-c[aria-sort="ascending"], .mh-c[aria-sort="descending"] { color: var(--text); }
.mrow {
  display: grid; align-items: center; min-width: 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-cell); font-weight: var(--cell-w); color: var(--text-2); cursor: pointer;
}
.mrow:last-child { border-bottom: 0; }
@media (hover: hover) { .mrow:hover { background: var(--surface-2); } }
.mrow.is-checked { background: var(--surface-2); }
.mrow.is-selected { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mc { min-width: 0; padding: 0 var(--cell-px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-chk { padding: 0; display: grid; place-items: center; overflow: visible; }
.mrow-chk { width: 44px; height: 100%; min-height: 44px; }
.mrow-chk .chk-box, .mrow-chk .chk-box * { pointer-events: none; }   /* the click lands on the checkbox itself, so a held Shift (the range) reaches it */
.mc-tools { overflow: visible; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); }
.mrow .row-more { opacity: 0; }
.mrow:hover .row-more, .mrow:focus-within .row-more, .mrow .row-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .mrow .row-more { opacity: 1; } }
.mrow:hover .chip, .mrow.is-checked .chip, .mrow.is-selected .chip { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }   /* a chip is the row's own ground, so on a washed row it is an outline */
.mrow-link { color: var(--text); font-weight: 600; text-decoration: none; }
.mrow-link:hover { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 0.2em; }
.mc .mrow-link { display: block; overflow: hidden; text-overflow: ellipsis; }
.mrow--table .mc-triage .chip, .mrow--table .mc-client { font-weight: 500; }
.mlist--table .mrow--table { grid-template-columns: 44px 1fr; }   /* the real columns come from the row's own inline template */
.mrow--compact { grid-template-columns: 44px minmax(0, 1fr) auto; padding-right: var(--s-2); }
.mrow--compact .mc-main { padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.mrow-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); min-width: 0; }
.mrow-l1 .mrow-link { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-age { flex: none; font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-3); white-space: nowrap; }
.mrow-age .late { font-size: var(--fs-caption); }
.mrow-l2 { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-caption); color: var(--text-3); }
.mrow-l2 .chip { flex: none; min-height: 20px; padding: 0 6px; }
.mrow-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-chip { color: var(--text); }
.mail-retry { cursor: pointer; }
.mpad { pointer-events: none; }
.mmore { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.mail-hint { padding: var(--s-2) var(--s-3) var(--s-3); max-width: var(--measure); }

/* the sender: the name, then the address in the quieter ink */
.mc-from { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.mc-from-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.mc-from-h { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }

/* ── Toolbar pieces ────────────────────────────────────────────────────────────────────── */
.mail-search { flex: 0 1 200px; min-width: 120px; }
/* the view selector, the tabs and Actions share one row; the tabs scroll sideways when they do not fit */
.mail-lv .lv-head { flex-wrap: nowrap; }
.mail-lv .lv-title { flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.mail-lv .lv-tools { flex: none; }
.mail-lv .lv-tabs { flex: 0 1 auto; }
.mail-search .input { min-height: 32px; }
.mail-pulse { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-left: auto; font-size: var(--fs-caption); color: var(--text-3); }
.mail-pulse-l { font-weight: 600; letter-spacing: var(--caption-ls); }
.mail-pulse-t { font-weight: 500; }
.tbtn--danger { border-color: var(--accent); color: var(--danger-text); }
.tbtn--danger .i { color: var(--accent-mark); }
@media (hover: hover) { .tbtn--danger:hover { background: var(--accent); color: var(--on-accent); } .tbtn--danger:hover .i { color: var(--on-accent); } }

/* ── Reader ────────────────────────────────────────────────────────────────────────────── */
.mail-read { min-height: 0; overflow-y: auto; }   /* a short window scrolls the whole reader instead of squeezing the message to nothing */
.mail-read > .mail-pane-b { flex: 1 1 140px; min-height: 140px; }
.mail-rh { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--line); }
.mail-rtop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-3); min-width: 0; }
.mail-rt { flex: 1 1 8rem; min-width: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.28; overflow-wrap: anywhere; }
.mail-seg { flex: none; white-space: nowrap; padding-top: 2px; }
.mail-nav { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-top: -4px; margin-left: auto; }
.mail-nav .caption { padding: 0 2px; white-space: nowrap; }
.mail-back { margin-left: calc(var(--s-2) * -1); }
.mail-rmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; font-size: var(--fs-caption); color: var(--text-3); }
.mail-from { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.mail-racts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mail-tabs { padding: 0 var(--s-3); border-bottom: 1px solid var(--line); }
.mail-why { margin: 0; }
.email-body { white-space: pre-wrap; overflow-wrap: anywhere; max-width: var(--measure); font-size: var(--fs-body); line-height: 1.55; }
.mail-note { max-width: var(--measure); }
.mail-ro .email-body { margin-top: var(--s-1); }
.mail-comp, .mail-draft { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--line); background: var(--surface); }
.mail-draft { padding: 0; border: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.mail-comp .textarea { min-height: 112px; }
.mail-comp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.mail-sh { font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
label.mail-sh { display: block; }
.mail-sh-s { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-cell); color: var(--text-2); }   /* what the message was about, in plain case, not a loud label */

/* A text thread: the last messages, one line each */
.sms-thread { display: flex; flex-direction: column; gap: var(--s-2); }
.sms-line { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-2); align-items: baseline; }
.sms-who { font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-3); }
.sms-line.mine .sms-text { color: var(--text); }
.sms-text { overflow-wrap: anywhere; white-space: pre-wrap; color: var(--text-2); }

/* ── Context ───────────────────────────────────────────────────────────────────────────── */
.mctx { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.mctx-card { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-card); }
.mctx-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.mctx-line { font-size: var(--fs-cell); color: var(--text-2); overflow-wrap: anywhere; }
.mctx-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.mctx-acts .tbtn, .mctx-acts .tbtn:hover { text-decoration: none; }
.mctx-touches { display: flex; flex-direction: column; }
.mctx-touch { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.mctx-touch:last-child { border-bottom: 0; }
.mctx-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text); text-decoration: none; }
a.mctx-link:hover .mctx-t { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 0.2em; }
.mctx-t { font-size: var(--fs-cell); font-weight: 600; overflow-wrap: anywhere; }
.mctx-s { font-size: var(--fs-caption); color: var(--text-3); overflow-wrap: anywhere; }
.mctx-empty { padding: var(--s-1) 0; }
.mctx h3 { font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

/* ── Approvals: an agent's draft, its flags, the checks ────────────────────────────────── */
/* A flag is a word; a hard flag also carries the crimson alert icon (.state--bad). No pills, no colour alone. */
.apv-flags { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: 0; padding: 0; list-style: none; }
.apv-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); }
.apv-mode { margin: 0; max-width: var(--measure); }
.apv-err { white-space: normal; }
.apv-thread, .apv-subj { display: flex; flex-direction: column; gap: var(--s-1); }
.apv-subj .email-body { color: var(--text); font-weight: 600; }
.apv-read .textarea[readonly] { color: var(--text-2); }
.apv-checks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.apv-checks li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-cell); color: var(--text-2); }
.apv-checks li:last-child { border-bottom: 0; }

/* ── A phone: the list, or the message, one at a time ──────────────────────────────────── */
/* reading in one pane (a phone, or a window too narrow for the list beside it): the message has the page, with its own Back; the list tools wait behind it */
.mail-lv.is-reading > .lv-head, .mail-lv.is-reading > .lv-bar, .mail-lv.is-reading > .lv-chips, .mail-lv.is-reading > .lv-note { display: none; }
@media (max-width: 767px) {
  .app:has(.mail-lv.is-reading) .fab { display: none; }   /* the capture button would sit on the reply box */
  .view:has(.mail-lv.is-reading) .page-head, .view:has(.mail-lv.is-reading) .module-tabs { display: none; }
  .mail-pulse-t { display: none; }
  .mail.is-stacked .mail-pane { overflow: visible; }
  .mail-rh { padding: var(--s-3) var(--s-3) var(--s-2); }
  .mail-pane-b { overflow: visible; }
  .mail-read > .mail-pane-b { flex: 0 0 auto; min-height: 0; }   /* the page scrolls: the body takes the height its content needs (a 140px floor let a long thread spill out of its card) */
  .mail-search { flex: 1 1 100%; }
  .mail-pulse { margin-left: 0; }
}
@media (max-width: 719px) { .mail-comp .textarea { min-height: 120px; } }
@media (pointer: coarse) { .mrow-link { padding: 0; } }