/* ===========================================================================
   Data Tomo — the chat tab
   ===========================================================================

   Loaded after app.css. Nothing here may rely on a Pico default: an unstyled
   Pico <button> renders azure (--pico-primary is never overridden in this
   app) and looks foreign, so every button on this surface is styled here.

   NAMING. Everything defined in this file is prefixed `dt-`, with no
   exceptions. `.brand-pill` is used on this surface but is DEFINED in
   app.css:1773 and deliberately not restated -- importing it rather than
   copying it is what stops the two surfaces drifting.

   The prototype lost an afternoon to a cascade collision: a chat speaker label
   classed `.tomo` matched the page-layout rule `.tomo { display: grid }` and
   turned a 96px label into a 266px grid that overflowed its box. app.css is
   4,425 lines of unprefixed class names; assume every short word is taken.

   TOKENS. These are measured from the RUNNING app, not read off app.css's
   :root -- which gets the colours wrong. The navy --ab-nav-bg in :root is used
   by nothing. The app's real accent is deep green #2c5f4a; burnt orange
   #b73d09 is used sparingly and is NOT the button colour.
   ========================================================================= */

:root {
  --dt-accent: #2c5f4a;
  --dt-accent-soft: #e8f0ec;
  --dt-card-head: #fbfcfc;
  --dt-text-body: #373c44;   /* Pico's body colour -- what tables render in */
  --dt-text-head: #2d3138;
  --dt-text-muted: #646b79;
  /* app.css:1135-1137 already owns these two exact values (--ab-border,
     --ab-hover-bg) -- aliased, not restated, so the two surfaces cannot
     drift apart the way a copy-pasted hex can. --dt-border-light has no
     app.css equivalent at this value and stays a literal. */
  --dt-border: var(--ab-border);
  --dt-border-light: #f1f1f0;
  --dt-hover-bg: var(--ab-hover-bg);

  /* System mono, deliberately not a webfont. The prototype used IBM Plex
     Mono; adding it would be a new external asset for slugs and SQL, and any
     new origin has to be in nginx/nginx.conf's CSP or it fails silently on
     every deployed environment and nowhere locally (LTA-103). */
  --dt-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
                  'Liberation Mono', monospace;

  --dt-radius: 10px;
  --dt-shadow: 0 1px 3px rgba(27, 40, 50, .04), 0 6px 16px rgba(27, 40, 50, .045);
}

/* --- Layout -------------------------------------------------------------- */

.dt-layout {
  display: grid;
  grid-template-columns: 266px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.dt-rail {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dt-thread { min-width: 0; }

/* The positioning context LTA-101's share popover anchors to. Empty until
   that ticket lands, and harmless while it is. */
.dt-pos { position: relative; margin-left: auto; }

.dt-chat { display: flex; flex-direction: column; gap: 22px; }

.dt-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--dt-text-muted);
  background: #fff;
  border: 1px dashed var(--dt-border);
  border-radius: var(--dt-radius);
}

/* --- Composer ------------------------------------------------------------ */

.dt-composer {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  background: #fff;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  padding: 14px 20px;
  box-shadow: var(--dt-shadow);
}

.dt-composer input {
  flex: 1;
  border: 0;
  margin: 0;
  font-family: inherit;
  font-size: 0.9rem;
  background: none;
  color: var(--dt-text-body);
  min-width: 0;
}

.dt-composer input:focus { outline: none; box-shadow: none; }

.dt-composer-hint {
  color: var(--dt-text-muted);
  font-family: var(--dt-font-mono);
  font-size: 0.85rem;
}

/* Genuinely disabled, not merely dimmed -- the `disabled` attribute is the
   enforcement and this is only how it looks. */
.dt-composer-locked { opacity: .55; }
.dt-composer-locked input { cursor: not-allowed; }

/* --- Scope: the brand chosen BEFORE the question (LTA-184) ---------------

   THE COMPOSER IS HIDDEN, NOT DISABLED, until a scope is set. A greyed-out
   box still reads as "type here" and still invites the click, so a reader
   tries, gets nothing, and has to work out why.

   `.dt-composer` is `display: flex`, and a bare [hidden] attribute is only
   `display: none` at the USER-AGENT level -- any author `display` beats it.
   Without `!important` here the composer renders while it is supposed to be
   gone. Same trap `.dt-asadmin` and the prototype's `.dts-*` blocks document;
   it is written out for each of them rather than shared, because a selector
   list is the thing somebody deletes half of. */
.dt-composer[hidden],
.dt-bf[hidden],
.dt-bf-nudge[hidden],
.dt-scope[hidden] { display: none !important; }

.dt-bf {
  background: #fff;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: var(--dt-shadow);
  padding: 18px 20px;
  margin-top: 22px;
}

.dt-bf-q {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1rem;
  color: var(--dt-text-head);
  margin: 0 0 3px;
}

.dt-bf-s {
  font-size: 0.85rem;
  color: var(--dt-text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

.dt-bf-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

.dt-bf-sep {
  width: 1px;
  align-self: stretch;
  background: var(--dt-border-light);
  margin: 0 5px;
}

/* "All B2C" and "Other" are NOT brands, so neither gets a brand colour -- a
   coloured swatch beside them would read as an eighth brand. Dashed, to say
   they are a different kind of thing from the pills beside them. */
.dt-bf-alt {
  background: transparent;
  border: 1.5px dashed var(--dt-border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  margin: 0;
  width: auto;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ab-text-secondary, var(--dt-text-body));
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}

.dt-bf-alt:hover {
  border-color: var(--dt-accent);
  color: var(--dt-accent);
  background: var(--dt-accent-soft);
}

.dt-bf-alt[aria-pressed="true"] {
  background: var(--dt-text-body);
  border-color: var(--dt-text-body);
  border-style: solid;
  color: #fff;
}

.dt-bf-alt.dt-bf-other[aria-pressed="true"] {
  background: var(--dt-text-muted);
  border-color: var(--dt-text-muted);
}

.dt-bf-why {
  font-size: 0.8rem;
  color: var(--dt-text-muted);
  line-height: 1.5;
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px dashed var(--dt-border);
}

.dt-bf-why b { color: var(--dt-text-body); font-weight: 600; }

/* An OFFER, not a correction: the four stay selected unless it is taken. */
.dt-bf-nudge {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  background: var(--dt-accent-soft);
  border: 1px solid #cfe0d6;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #1d4d3a;
  margin: 13px 0 0;
}

.dt-bf-nudge button {
  background: var(--dt-accent);
  border: 1px solid var(--dt-accent);
  color: #fff;
  border-radius: 7px;
  padding: 5px 13px;
  margin: 0;
  width: auto;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.dt-bf-nudge button:hover { background: transparent; color: var(--dt-accent); }

/* Once chosen, the scope sits ON the composer -- present, small and
   changeable, so nobody has to wonder what the next answer is about. */
.dt-scope {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  background: var(--dt-accent-soft);
  border: 1px solid #cfe0d6;
  border-radius: 999px;
  padding: 5px 7px 5px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dt-accent);
  white-space: nowrap;
}

/* All B2C and Other: a scope, not a brand, so no brand colour at all. */
.dt-scope.dt-scope-plain {
  background: var(--dt-hover-bg);
  border-color: var(--dt-border);
  color: var(--dt-text-body);
}

.dt-scope-sw { height: 9px; flex: none; }

.dt-scope button {
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 7px;
  margin: 0;
  width: auto;
  border-radius: 99px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dt-scope button:hover {
  background: var(--dt-accent);
  color: #fff;
  text-decoration: none;
}

.dt-scope.dt-scope-plain button:hover { background: var(--dt-text-body); }

/* --- Responsive ----------------------------------------------------------
   Below 900px the rail stacks above the thread and stops being sticky. */

@media (max-width: 900px) {
  .dt-layout { grid-template-columns: 1fr; }
  .dt-rail { position: static; }
}

/* --- Rail ---------------------------------------------------------------- */

.dt-newchat {
  background: #fff;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dt-accent);
  text-align: left;
  cursor: pointer;
  width: 100%;
  margin: 0;
}

.dt-newchat:hover { background: var(--dt-accent-soft); border-color: var(--dt-accent); }
.dt-newchat[hidden] { display: none !important; }

.dt-convlist { display: flex; flex-direction: column; gap: 2px; }

/* LTA-167. "Older conversations" — the rail holds ten at a time. Quieter than
   "New chat" (it shares that button's shape but not its accent) because it is
   a navigation control, not the thing the rail is for. */
.dt-rail-older {
  margin-top: 6px;
  font-weight: 500;
  color: var(--dt-text-muted);
}

.dt-rail-older:hover { color: var(--dt-accent); }
.dt-rail-older[disabled] { cursor: default; opacity: 0.6; }
.dt-rail-older[disabled]:hover {
  background: #fff;
  border-color: var(--dt-border);
  color: var(--dt-text-muted);
}

.dt-conv {
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 11px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  cursor: pointer;
  margin: 0;
}

.dt-conv:hover { background: var(--dt-hover-bg); }
.dt-conv[aria-current="true"] { background: var(--dt-accent-soft); }

.dt-conv-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dt-text-body);
  line-height: 1.35;
}

.dt-conv[aria-current="true"] .dt-conv-title { color: var(--dt-accent); }

.dt-conv-meta {
  font-size: 0.7rem;
  color: var(--dt-text-muted);
  display: flex;
  gap: 7px;
  align-items: center;
}

.dt-conv-n { font-family: var(--dt-font-mono); }

/* LTA-203 — what a thread COVERS, one line under the title and before the turn
   count. Several scopes in one conversation is normal (the picker can be
   changed at any time), so it stops at two codes and then counts. */
.dt-conv-cs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}

.dt-conv-cs-sw {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.dt-conv-cs b {
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  color: var(--dt-text-body);
}

.dt-conv-cs-more { font-weight: 600; letter-spacing: 0; }

/* LTA-168. "Clear old chats" — quiet like the paging control: housekeeping,
   not the thing the rail is for. */
.dt-rail-clear {
  margin-top: 6px;
  font-weight: 500;
  color: var(--dt-text-muted);
}

.dt-rail-clear:hover { color: var(--dt-accent); }

.dt-clear {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dt-clear-choices { display: flex; flex-direction: column; gap: 4px; }

.dt-clear-choice {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 10px;
  text-align: left;
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--dt-text-body);
  cursor: pointer;
}

.dt-clear-choice:hover { background: var(--dt-hover-bg); }
.dt-clear-choice[aria-pressed="true"] {
  background: var(--dt-accent-soft);
  border-color: var(--dt-accent);
  color: var(--dt-accent);
  font-weight: 600;
}

.dt-clear-head {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dt-text-body);
  margin: 0;
  line-height: 1.45;
}

.dt-clear-shared { font-size: 0.7rem; margin: 0; color: var(--dt-text-muted); }

.dt-clear-shared-list {
  margin: 0;
  padding-left: 16px;
  font-size: 0.7rem;
  color: var(--dt-text-body);
  line-height: 1.5;
}

.dt-clear-go {
  background: #fbeaea;
  border: 1px solid #e3b4b4;
  border-radius: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: #8a2a2a;
  cursor: pointer;
}

.dt-clear-go:hover { background: #f6dede; }

.dt-clear-note,
.dt-rail-none,
.dt-railfoot {
  font-size: 0.7rem;
  color: var(--dt-text-muted);
  line-height: 1.5;
  margin: 6px 0 0;
}

.dt-railfoot { padding-top: 12px; border-top: 1px solid var(--dt-border); }

/* --- Errors -------------------------------------------------------------- */

.dt-error {
  background: #fbeaea;
  border: 1px solid #f0d2d2;
  border-radius: 8px;
  padding: 16px 20px;
  color: #8f2020;
}

.dt-error p { margin: 6px 0 0; font-size: 0.8rem; }
.dt-error-hint { color: var(--dt-text-muted); }

/* --- The user turn ------------------------------------------------------- */

.dt-ask {
  display: flex;
  gap: 12px;
  align-items: baseline;
  /* LTA-203. The scope chip shares this row, so a long question wraps rather
     than squeezing the chip off the end of it. */
  flex-wrap: wrap;
  row-gap: 3px;
  font-family: var(--ab-font-display, Georgia, serif);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--dt-text-head);
}

.dt-ask-caret {
  color: var(--dt-accent);
  font-family: var(--dt-font-mono);
  font-size: 0.85rem;
  flex: none;
}

/* LTA-203 — which brand this question was asked about.
   Beside the question rather than inside the card, because it describes what
   was ASKED and not what the answer found. Quiet by default: it is
   provenance, not content. */
.dt-ask-scope {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ab-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--dt-text-muted);
  background: var(--dt-hover-bg);
  border: 1px solid var(--dt-border-light);
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  white-space: nowrap;
}

.dt-ask-scope-sw {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

/* The code itself. Its own element because "All B2C" is a real pick that is
   not a code, and it must be able to read as words while the codes beside it
   read as codes. */
.dt-ask-scope-code { font-weight: inherit; }

.dt-ask-scope-more {
  font-weight: 600;
  letter-spacing: 0;
  color: inherit;
}

/* A scope that CHANGED at this turn is the one worth noticing: it is the only
   place in a thread where the answers above and below stop being comparable,
   and it is exactly what somebody scrolling back is hunting for. */
.dt-ask-scope.dt-ask-scope-changed {
  color: var(--dt-accent);
  border-color: #cfe0d6;
  background: var(--dt-accent-soft);
}

/* NO PICK IS NOT A SCOPE. A turn where the reader chose "Other", or one that
   predates the picker, gets NO chip at all rather than one reading "All" — a
   label naming a scope nobody chose reads as a decision somebody made, which
   is worse than silence. Nothing to style; the markup is simply absent. */

/* --- The answer card ----------------------------------------------------- */

.dt-ans {
  background: #fff;
  border-radius: var(--dt-radius);
  box-shadow: var(--dt-shadow);
  border-left: 4px solid var(--dt-line, var(--dt-border));
  overflow: hidden;
}

.dt-ans-verified { --dt-line: var(--ab-success); }
.dt-ans-adhoc    { --dt-line: var(--ab-amber); }
.dt-ans-clarify  { --dt-line: var(--dt-accent); }
/* LTA-118's fifth mode: stored SQL ran and still did not answer the question.
   Red, not amber -- amber is "we wrote SQL for this", which is a lesser
   warning than "this is not what you asked for". */
.dt-ans-mismatch { --dt-line: #9b2c2c; }
.dt-ans-compare  { --dt-line: var(--ab-success); }
/* LTA-139. A breakdown of one reviewed metric claims exactly what a
   verified answer claims, so it is painted the same green. */
.dt-ans-grouped  { --dt-line: var(--ab-success); }

.dt-ans-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 20px;
  background: var(--dt-card-head);
  border-bottom: 1px solid var(--dt-border-light);
}

.dt-pill {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 99px;
  white-space: nowrap;
}

.dt-pill-verified { background: #e5f1ea; color: var(--ab-success); }
.dt-pill-adhoc    { background: #fbf0dd; color: var(--ab-amber); }
.dt-pill-clarify  { background: var(--dt-accent-soft); color: var(--dt-accent); }
.dt-pill-mismatch { background: #fbeaea; color: #9b2c2c; }
/* A comparison is verified twice over, so it reads as the verified pill does
   (LTA-120) -- a different colour here would suggest a different level of
   confidence in the number, and there is not one. */
.dt-pill-compare  { background: #e5f1ea; color: var(--ab-success); }
.dt-pill-grouped  { background: #e5f1ea; color: var(--ab-success); }
/* Two reviewed metrics on one axis is verified twice over as well (LTA-150),
   so it reads exactly as the two above it do. */
.dt-pill-dual     { background: #e5f1ea; color: var(--ab-success); }

.dt-src { font-size: 0.8rem; color: var(--dt-text-muted); margin: 0; }
.dt-src b {
  color: var(--dt-text-body);
  font-family: var(--dt-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
}

/* What the answer cost (LTA-171). A quiet mono line at the far right of the
   card head -- provenance, beside the trust pill and the source line, not part
   of the answer. Time is here for every reader; the money and the `breakdown`
   disclosure only ever render for an admin, because only an admin's payload
   carries them.

   `margin-left: auto` pushes it to the right of the head. When the breakdown
   is OPEN the whole disclosure takes a line of its own (`flex-basis: 100%`,
   the head is already `flex-wrap: wrap`) so the table has room -- and the
   summary keeps its right edge, so opening it does not make the seconds jump
   across the card. */
.dt-meta {
  margin-left: auto;
  font-family: var(--dt-font-mono);
  font-size: 0.75rem;
  color: var(--dt-text-muted);
  white-space: nowrap;
}
.dt-cost > summary {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  padding: 1px 0;
}
.dt-cost > summary::-webkit-details-marker { display: none; }
.dt-meta-sep { opacity: .45; }
.dt-cost-n { color: var(--dt-text-body); }
/* The cold turn -- the one that WROTE the ~90k-token corpus into the prompt
   cache rather than reading it, and so cost roughly ten times the next one.
   Marked because it is the number the whole feature exists to make visible;
   an unmarked outlier reads as a mistake. */
.dt-cost-cold { color: var(--dt-accent); font-weight: 600; }
.dt-cost-more {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dt-cost > summary:hover .dt-cost-more {
  color: var(--dt-accent);
  text-decoration: none;
}
.dt-cost[open] { flex: 1 1 100%; }

.dt-cost-box {
  width: max-content;
  max-width: 100%;
  margin: 10px 0 0 auto;
  padding: 11px 14px;
  background: var(--ab-bg, #FEFDF8);
  border: 1px solid var(--dt-border-light);
  border-radius: 8px;
  white-space: normal;
}
.dt-cost-box dl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px 14px;
  margin: 0;
  align-items: baseline;
}
.dt-cost-box dt { color: var(--dt-text-muted); white-space: nowrap; }
.dt-cost-box dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--dt-text-body);
}
.dt-cost-w {
  font-family: var(--ab-font-body);
  text-align: left !important;
  color: var(--dt-text-muted) !important;
}
.dt-cost-tot {
  border-top: 1px solid var(--dt-border-light);
  padding-top: 6px;
  margin-top: 2px;
  font-weight: 600;
  color: var(--dt-text-head) !important;
}
.dt-cost-note {
  margin: 9px 0 0;
  max-width: 44ch;
  font-family: var(--ab-font-body);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--dt-text-muted);
}
.dt-cost-note b { color: var(--dt-accent); font-weight: 600; }

.dt-ans-body { padding: 20px; }
.dt-ans-body p { margin: 0 0 12px; color: var(--dt-text-body); }
.dt-ans-body p:last-child { margin-bottom: 0; }
.dt-ans-body code { font-size: 0.8rem; color: var(--ab-primary); }

.dt-choices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* LTA-197. A window chip is taller than a brand pill because it carries two
   lines: the name the reader recognises, and the dates they are actually
   choosing. The dates are the point of the chip, so they are never truncated
   -- the row wraps instead. */
.dt-window-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: var(--dt-surface, #fff);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dt-window-chip:hover,
.dt-window-chip:focus-visible {
  border-color: var(--dt-accent);
  background: var(--dt-accent-wash, #f4f6f1);
}
.dt-window-chip-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dt-text-body);
}
.dt-window-chip-dates {
  font-size: 0.75rem;
  color: var(--dt-text-muted);
  font-variant-numeric: tabular-nums;
}

.dt-why {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--dt-border);
  font-size: 0.8rem;
  color: var(--dt-text-muted);
  line-height: 1.6;
}

.dt-why b {
  font-family: var(--dt-font-mono);
  font-size: 0.75rem;
  color: var(--dt-text-body);
  font-weight: 600;
}

/* --- Recommendation ------------------------------------------------------ */

.dt-rec {
  margin: 0 20px 4px;
  border: 1px solid #cfe0d6;
  border-radius: 8px;
  background: #f2f8f4;
  overflow: hidden;
}

.dt-rec-h { display: flex; gap: 11px; align-items: baseline; flex-wrap: wrap; padding: 14px 18px 0; }

.dt-rec-mk {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--dt-accent);
  padding: 4px 10px;
  border-radius: 5px;
  white-space: nowrap;
}

.dt-rec-a {
  font-family: var(--ab-font-display, Georgia, serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #1d4d3a;
  line-height: 1.3;
  flex: 1;
  min-width: 220px;
}

.dt-rec-f {
  margin: 14px 18px 0;
  background: #fff;
  border: 1px solid #cfe0d6;
  border-radius: 7px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dt-rec-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4e7c66;
}

/* The formula and its substituted numbers are the whole point of the block;
   they scroll in their own container rather than wrapping mid-expression. */
.dt-rec-expr,
.dt-rec-sub {
  font-family: var(--dt-font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 2px;
}

.dt-rec-expr { color: var(--dt-text-head); }
.dt-rec-sub { color: var(--dt-accent); font-weight: 600; }
.dt-rec-fnote { font-size: 0.75rem; line-height: 1.5; color: var(--dt-text-muted); }

.dt-rec ul {
  list-style: none;
  margin: 0;
  padding: 12px 18px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 12px;
  align-items: start;
}

.dt-rec li { display: contents; }

.dt-rec-k {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #4e7c66;
  white-space: nowrap;
  margin-top: 3px;
}

.dt-rec-v { font-size: 0.8rem; line-height: 1.5; color: var(--dt-text-body); }
.dt-rec b { color: var(--dt-text-head); font-weight: 600; }

/* --- Table ---------------------------------------------------------------
   18px / 10px 20px, as measured. Scrolls in its own container so the page
   body never scrolls sideways.

   LTA-178. `.dt-tw` is the gutter and holds the truncation note; `.dt-tw-box`
   inside it is the SCROLL PORT, capped at ten rows. A table renders every row
   it has, so a thirty-day series -- or the fifty-row product lists LTA-177
   will attach to ordinary counting answers -- otherwise pushes the rest of
   the card, and every later turn in the thread, off the screen. Shorter
   tables never reach the cap and show no scrollbar. */

.dt-tw { margin-top: 4px; padding: 0 20px 4px; }

.dt-tw-box {
  /* Ten rows plus the sticky header, and HALF an eleventh row: a row cut by
     the fold is what tells the reader there is more below, where a flush cut
     at exactly ten leaves only a scrollbar to notice.
     45px / 44px measured in the browser against the real stylesheet set
     (Pico's 18px base, 10px + 10px padding, a 1.5 line at 0.9rem, 1px rule)
     -- the arithmetic alone predicted 48px and was wrong. */
  --dt-table-row: 45px;
  --dt-table-head: 44px;
  max-height: calc(var(--dt-table-head) + var(--dt-table-row) * 10.5);
  overflow: auto;
  overscroll-behavior: contain;
}

.dt-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 0; }

.dt-table th,
.dt-table td {
  padding: 10px 20px;
  text-align: left;
  border-bottom: 1px solid var(--dt-border-light);
  white-space: nowrap;
  color: var(--dt-text-body);
}

/* Sticky, so a scrolled table is not a grid of unlabelled numbers. The
   background must be opaque (the card is #fff) or the rows show through, and
   the rule has to be an inset shadow rather than a border: with
   `border-collapse: collapse` the border belongs to the collapsed grid and
   not to the cell, so it does not travel with a sticky header. */
.dt-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--dt-border);
}

.dt-table th { font-weight: 600; border-bottom: 0; }
.dt-table td.dt-n, .dt-table th.dt-n { text-align: right; font-variant-numeric: tabular-nums; }
.dt-table td.dt-n { font-family: var(--dt-font-mono); font-size: 0.85rem; }
.dt-table tbody tr:last-child td { border-bottom: 0; }
.dt-table tbody tr:hover { background: var(--dt-hover-bg); }

/* --- The rail pager (LTA-180) --------------------------------------------
   Arrows either side of "Page 3 of 7", replacing LTA-167's single "Older
   conversations" button. Hidden entirely on a one-page history. */

.dt-rail-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.dt-pagebtn {
  flex: 0 0 auto;
  width: 30px;
  padding: 3px 0;
  font-size: 0.8rem;
  line-height: 1.4;
  background: transparent;
  color: var(--dt-text-body);
  border: 1px solid var(--dt-border);
  border-radius: 6px;
  cursor: pointer;
}

.dt-pagebtn:hover:not(:disabled) {
  background: var(--dt-hover-bg);
  color: var(--dt-text-head);
}

/* Dead rather than gone: an arrow that vanishes at the end of the history
   moves the other one, so the pair would shift under the reader's cursor. */
.dt-pagebtn:disabled { opacity: .35; cursor: default; }

.dt-pagenum {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.7rem;
  color: var(--dt-text-muted);
  font-variant-numeric: tabular-nums;
}

.dt-tw-note { font-size: 0.7rem; color: var(--dt-text-muted); margin: 8px 0 0; }

/* LTA-198. The export control and the truncation note share one line, because
   they say halves of the same thing: how many rows this is, and that the file
   carries exactly those. The note takes the width it needs and the link sits at
   the far end; with no note the link is alone on the right, which is where a
   reader's eye leaves a table. */
.dt-tw-foot {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.dt-tw-foot .dt-tw-note { flex: 1 1 200px; }

/* An anchor, not a button: this IS a link to a file, and `download` is what
   makes it one. Styled as a quiet control so it never competes with the number
   above it. */
.dt-csv {
  flex: 0 0 auto;
  margin: 8px 0 0 auto;
  padding: 3px 10px;
  font-size: 0.7rem;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  color: var(--dt-text-body);
  background: transparent;
  border: 1px solid var(--dt-border);
  border-radius: 6px;
  cursor: pointer;
}

.dt-csv:hover { background: var(--dt-hover-bg); color: var(--dt-text-head); }

/* LTA-177. The rows behind the figure. Set apart from the answer's own table
   by a rule and a label rather than by a card of its own: it is part of the
   same answer, and a second bordered box beside the first reads as a second
   result. The heading is what tells a reader these are constituents and not
   another figure. */
.dt-bd { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--dt-border); }
.dt-bd-head {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dt-text-muted);
  margin: 0 0 8px;
}
/* The reason there is no breakdown. Muted and italic: it explains an absence,
   so it must not compete with the number it sits under. */
.dt-bd-none {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--dt-text-muted);
  margin: 14px 0 0;
}

/* --- Disclosures --------------------------------------------------------- */

.dt-more { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 20px 18px; }

.dt-dis {
  background: var(--ab-bg, #FEFDF8);
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  color: var(--ab-text-secondary, #4a4a4a);
  font-family: var(--dt-font-mono);
  cursor: pointer;
  margin: 0;
  width: auto;
}

.dt-dis:hover { border-color: var(--dt-accent); color: var(--dt-accent); }
.dt-dis[aria-expanded="true"] { background: var(--dt-accent); color: #fff; border-color: var(--dt-accent); }

.dt-panel { padding: 0 20px 20px; }
.dt-panel[hidden] { display: none !important; }

/* One panel, several sections (LTA-115): the receipt, the SQL, the code, the
   citations and the technical notes stack under their own small headings
   instead of each owning a button in the card's main flow. */
.dt-panel-h {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dt-text-muted);
  margin: 16px 0 7px;
}

.dt-panel-h:first-child { margin-top: 0; }

.dt-notes {
  margin: 0;
  padding-left: 18px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--dt-text-body);
}

.dt-notes code { font-size: 0.75rem; color: var(--ab-primary); }

.dt-sql {
  background: #22333d;
  color: #dbe6ee;
  border-radius: 8px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--dt-font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  margin: 0;
}

.dt-cites { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.dt-cite {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.8rem;
  padding: 12px 16px;
  background: var(--ab-bg, #FEFDF8);
  border: 1px solid var(--dt-border-light);
  border-radius: 8px;
  color: var(--dt-text-body);
}

.dt-cite code { font-size: 0.75rem; color: var(--ab-primary); flex: none; }
.dt-cite-st { margin-left: auto; font-size: 0.7rem; white-space: nowrap; font-weight: 600; }
.dt-cite-ok { color: var(--ab-success); }
.dt-cite-warn { color: var(--ab-amber); }

/* --- Assumptions --------------------------------------------------------- */

.dt-assume {
  margin: 14px 20px 4px;
  padding: 12px 16px;
  border: 1px dashed var(--dt-border);
  border-radius: 8px;
  background: var(--ab-bg, #FEFDF8);
  font-size: 0.75rem;
  color: var(--dt-text-muted);
  line-height: 1.55;
}

.dt-assume b { color: var(--ab-text-secondary, #4a4a4a); font-weight: 600; }
.dt-assume ol { margin: 7px 0 0; padding-left: 20px; }
.dt-assume li { margin-bottom: 3px; }

/* --- Propose as instruction ---------------------------------------------- */

.dt-propose {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 20px 20px;
  padding: 16px 20px;
  background: var(--ab-primary-light, #fef0e8);
  border: 1px solid #f3d9c9;
  border-radius: 8px;
}

.dt-propose p { margin: 0; font-size: 0.8rem; color: #7a2c08; flex: 1; min-width: 220px; }

/* --- Buttons -------------------------------------------------------------
   A bare Pico button renders azure (--pico-primary is never overridden), so
   every button on this surface is styled explicitly. */

.dt-btn {
  display: inline-block;
  background: var(--dt-accent);
  color: #fff;
  border: 1px solid var(--dt-accent);
  border-radius: var(--dt-radius);
  padding: 12px 25px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
  width: auto;
}

.dt-btn:hover { background: transparent; color: var(--dt-accent); }
.dt-btn-small { padding: 8px 16px; font-size: 0.75rem; }

/* --- What stands out -----------------------------------------------------
   Analysis past the literal question. Two to three observations, never more:
   past three the block stops being a callout and the eye skips it.

   ONE grid for the whole list, so every label column is the same width and the
   text starts on a single edge instead of stepping in and out. */

.dt-obs {
  margin: 16px 20px 4px;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  background: var(--ab-bg, #FEFDF8);
  overflow: hidden;
}

.dt-obs-l {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dt-text-muted);
  padding: 11px 16px 0;
  margin: 0;
}

.dt-obs ul {
  list-style: none;
  margin: 0;
  padding: 8px 16px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px 12px;
  align-items: start;
}

.dt-obs li { display: contents; }
.dt-obs-txt { font-size: 0.8rem; line-height: 1.5; color: var(--dt-text-body); }
.dt-obs b { font-weight: 600; color: var(--dt-text-head); }
.dt-obs code { font-size: 0.7rem; color: var(--ab-primary); }
.dt-obs-spacer { display: block; }

/* The WORD is the signal. Colour is reinforcement and never the only cue. */
.dt-mk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
  margin-top: 1px;
}

.dt-mk-anomaly { background: #fbf0dd; color: var(--ab-amber); }
.dt-mk-insight { background: var(--dt-accent-soft); color: var(--dt-accent); }
.dt-mk-caution { background: #fbeaea; color: #9b2c2c; }

.dt-explore {
  background: #fff;
  border: 1px solid var(--dt-border);
  border-radius: 7px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dt-accent);
  white-space: nowrap;
  margin: 1px 0 0;
  width: auto;
  cursor: pointer;
}

.dt-explore:hover { background: var(--dt-accent); border-color: var(--dt-accent); color: #fff; }

.dt-explore-done {
  color: var(--dt-text-muted);
  border-style: dashed;
  cursor: default;
}

.dt-explore-done:hover {
  background: var(--dt-hover-bg);
  color: var(--ab-text-secondary, #4a4a4a);
  border-color: var(--dt-border);
}

/* --- What next? ---------------------------------------------------------- */

.dt-next { padding: 4px 20px 18px; }
.dt-next-l { font-size: 0.75rem; color: var(--dt-text-muted); margin: 0 0 7px; }

.dt-next-b {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--dt-accent);
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 5px 0 5px 24px;
  position: relative;
  border-radius: 5px;
  cursor: pointer;
  margin: 0;
}

.dt-next-b::before {
  content: "\21B3";
  position: absolute;
  left: 4px;
  top: 5px;
  color: var(--dt-text-muted);
  font-size: 0.75rem;
}

.dt-next-b:hover { text-decoration: underline; background: var(--dt-accent-soft); }

/* --- Charts -------------------------------------------------------------- */

.dt-figure { padding: 4px 20px 0; }
.dt-fig-t { font-size: 0.8rem; font-weight: 600; color: var(--dt-text-head); margin: 0 0 2px; }
.dt-fig-s { font-size: 0.7rem; color: var(--dt-text-muted); margin: 0 0 10px; }
/* LTA-131. The subtitle normally holds the 10px gap between the captions and
   the chart, and a server-default chart has no subtitle to render at all
   (data-tomo-answer.js omits the empty one rather than leaving a <p> that
   reserves its margin). Whichever caption ends up last carries the gap. */
.dt-figure p:last-of-type { margin-bottom: 10px; }

/* LTA-181 + LTA-182. The headline figures above the chart's own title.

   A ROW THAT WRAPS, not a grid: there are one or three figures and never a
   fixed count, and a wrapping row keeps them left-aligned with the caption
   below instead of leaving a column of dead space when there is only the
   actual. Each figure is its own stacked value+label, so a label can never
   drift away from the number it names -- the two independent flex rows that
   preceded this in the prototype put "Actual" under the target.

   `tabular-nums` because three figures read as a set and proportional digits
   make them look ragged. The label is deliberately quiet: the number is the
   thing, and a label competing with it is what makes a card look like a
   dashboard rather than an answer. */
.dt-head {
  display: flex; flex-wrap: wrap; gap: 4px 28px;
  margin: 2px 0 8px; align-items: baseline;
}
.dt-head-f { min-width: 0; }
.dt-head-v {
  font-size: 1.75rem; font-weight: 600; line-height: 1.15;
  color: var(--dt-text-head); font-variant-numeric: tabular-nums;
}
.dt-head-l {
  font-size: 0.7rem; color: var(--dt-text-muted);
  letter-spacing: 0.02em; margin-top: 1px;
}
/* The attainment is the derived one of the three -- it restates the other two
   rather than measuring anything new -- so it is set smaller.

   LTA-193 GAVE IT A COLOUR, and only when the server sent a verdict. It stays
   muted by default, which is every metric that declares no `direction:` and
   every window with no calendar period to pace against -- 124% of a
   new-customer target is good and 135% of a spend budget is not, and this
   file still cannot tell which metric it is looking at. The declaration is
   the corpus's and the comparison is made server-side against the ELAPSED
   FRACTION OF THE PERIOD (backend/services/chat_pace.py), never against 100%:
   62% of a monthly target on the 19th is level, not a 38% miss.

   `.dt-pace-*` is set on the FIGURE rather than on the value, so the glyph,
   the word and the number take one colour from one rule. */
.dt-head-attainment .dt-head-v { font-size: 1.35rem; color: var(--dt-text-muted); }

/* LTA-193. The verdict, said three ways.

   NEVER HUE ALONE. Red and green are the two colours a colour-blind reader is
   least able to separate, and an attainment figure is a number somebody acts
   on -- so the colour is the third signal, not the only one: the glyph
   (server-sent, an up or down triangle), the word ("on pace", "behind pace",
   "over pace") and a full sentence under the row all carry it too. Remove
   this whole block and the card still tells a reader which way the number
   points. The glyph is `aria-hidden` in the markup because the word beside it
   says the same thing to a screen reader.

   The colours are the two already in this stylesheet's vocabulary rather than
   a new pair, so a verdict reads like the rest of the product. */
.dt-pace-favourable .dt-head-v,
.dt-pace-favourable .dt-head-p { color: #2c5f4a; }
.dt-pace-unfavourable .dt-head-v,
.dt-pace-unfavourable .dt-head-p { color: #9a3325; }
.dt-head-p {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  margin-top: 1px; white-space: nowrap;
}
.dt-pace-mark { margin-right: 3px; font-size: 0.85em; }
/* The sentence that stops a reader mistrusting the colour. Quiet, full-width,
   and BELOW the figures: the colour is the glance, this is the arithmetic. */
.dt-head-said {
  margin: 0 0 8px; font-size: 0.75rem; color: var(--dt-text-muted);
  line-height: 1.4;
}

/* The same verdict in a fan-out's "To target" cell (LTA-189's column). The
   word is spaced off the figure rather than wrapped, so the column still
   scans as numbers; `dt-n` keeps them right-aligned. */
.dt-table td.dt-pace-favourable { color: #2c5f4a; }
.dt-table td.dt-pace-unfavourable { color: #9a3325; }
.dt-table td .dt-pace-word {
  margin-left: 6px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.02em; white-space: nowrap;
}
.dt-pace-said { font-style: normal; }

/* LTA-185. The rest of the family, and the two numbers a rate divides.

   ONE SIZE SMALLER THAN THE LEAD, never a second row. The reader asked about
   one metric and got six, and if all six are set the same size the card stops
   saying which question was answered -- the family is context for the figure
   at its head, so it reads as context. The wrapping row above already handles
   however many there are.

   AND STILL NOT COLOURED, which LTA-193 did not change. The corpus now
   declares a direction and the attainment above takes its colour from it --
   but a family member is a LEVEL, not a comparison: $46,904 of spend is
   neither favourable nor unfavourable on its own, and there is no target
   beside it to be favourable against. With six metrics on one card the
   temptation to paint the big ones green is exactly the assertion nothing in
   the corpus supports, declaration or no declaration. */
.dt-head-family .dt-head-v,
.dt-head-numerator .dt-head-v,
.dt-head-denominator .dt-head-v { font-size: 1.35rem; }

.dt-chart { position: relative; }
.dt-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.dt-gridline { stroke: #ece9df; stroke-width: 1; }
.dt-axis { stroke: #d8d3c2; stroke-width: 1; }
.dt-tick { font-family: var(--ab-font-body, sans-serif); font-size: 13px; fill: #646b79; }

/* LTA-133. A multi-series chart's legend, and a bar+line chart's two axis
   names. Both are SVG <text>, so only type is shared here.
   .dt-atitle is deliberately the same size as a tick: it labels the axis, it
   does not compete with the figure title above the chart. */
.dt-legend-t,
.dt-atitle {
  font-family: var(--ab-font-body, sans-serif);
  font-size: 13px;
}

/* NO `fill` ON .dt-atitle, AND THAT IS THE WHOLE POINT. _axisTitle() sets each
   axis name's fill to the SERIES colour of the marks it belongs to, as an SVG
   PRESENTATION ATTRIBUTE -- and a presentation attribute is the weakest thing
   in the cascade, weaker than any stylesheet rule, so a `fill` declared here
   for .dt-atitle silently overrode it and drew both names in this grey. That
   removed the only thing tying an axis to its series, on the one chart with
   two axes and (for that reason) no legend, leaving the reader with two sets
   of numbers and no way to tell which belongs to which mark. Verified in
   Chrome, not reasoned about: getComputedStyle().fill on both titles of a real
   barLine() render reads rgb(100,107,121) with this rule and each series
   colour without it.

   The legend keeps the grey, and needs it: _legend() colours the SWATCH beside
   each name and leaves the text itself unset, so the text has nothing of its
   own to override. */
.dt-legend-t { fill: #646b79; }

.dt-atitle { font-weight: 600; }

.dt-dlabel {
  font-family: var(--dt-font-mono);
  font-size: 13px;
  fill: #373c44;
  font-variant-numeric: tabular-nums;
}

/* LTA-169. A horizontal bar chart's category names, and the reason they are NOT
   classed .dt-tick: on that chart the name is the thing being read, not axis
   furniture, so it carries the body text colour rather than the axis grey. It
   needs its own RULE and not a `fill` attribute on a .dt-tick element, for the
   cascade reason .dt-atitle above documents at length -- a presentation
   attribute is the weakest thing there is and .dt-tick's own `fill` would beat
   it. Same size as a tick: a row label, not a heading. */
.dt-rowname {
  font-family: var(--ab-font-body, sans-serif);
  font-size: 13px;
  fill: #373c44;
}

/* LTA-169. What a chart did not draw, said under it: "showing the 12 largest of
   31. The other 19 are in the table below." A <p> beside the SVG rather than
   text inside it, so it wraps at any card width, can be selected, and reaches a
   screen reader as prose instead of as one more fragment of the picture. Sized
   like the figure subtitle it sits under, because it is the same kind of
   statement about the figure. */
.dt-chart-note {
  margin: 7px 0 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--dt-text-muted);
}

.dt-hit { fill: transparent; cursor: crosshair; }

.dt-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
  background: #22333d;
  color: #eef4f8;
  font-size: 0.7rem;
  line-height: 1.4;
  padding: 7px 11px;
  border-radius: 7px;
  white-space: nowrap;
  transform: translate(-50%, -115%);
  z-index: 5;
}

.dt-tip b { font-family: var(--dt-font-mono); font-variant-numeric: tabular-nums; }
.dt-tip-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dt-tip { transition: none; }
}

/* --- Pending answer ------------------------------------------------------
   The card while the stream is running. LTA-98 streams routing/executing/
   answer/error stages -- see _updatePending()/_replacePending() -- so this
   card's label text changes in place rather than the card being rebuilt. */

.dt-ans-pending { --dt-line: var(--dt-border); }
.dt-pill-pending { background: var(--dt-border-light); color: var(--dt-text-muted); }

/* --- Admin: whose history am I looking at -------------------------------- */

.dt-whosel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dt-border);
}

.dt-whosel label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dt-text-muted);
}

.dt-whosel select {
  font-family: inherit;
  font-size: 0.75rem;
  color: var(--dt-text-body);
  background: #fff;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  padding: 9px 12px;
  width: 100%;
  margin: 0;
}

.dt-whosel select:focus {
  outline: none;
  border-color: var(--dt-accent);
  box-shadow: 0 0 0 3px var(--dt-accent-soft);
}

/* [hidden] must beat display:flex, or an empty notice renders as a bare bar. */
.dt-asadmin[hidden], .dt-whosel[hidden] { display: none !important; }

.dt-asadmin {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: #eef4f8;
  border: 1px solid #d7e4ec;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 0.75rem;
  color: #2a4a5c;
  line-height: 1.45;
}

.dt-asadmin b { font-weight: 600; }

/* --- The conversation row's delete control (LTA-135) --------------------- */

/* `.dt-conv` is a full-width <button>, so the delete control cannot live
   inside it -- a nested button is invalid HTML. `.dt-conv-row` is the wrapper
   that lets the two sit as siblings while still reading as one row. */
.dt-conv-row { position: relative; display: flex; align-items: stretch; }

/* Room for the × so a long title never runs underneath it. */
.dt-conv-row .dt-conv { padding-right: 34px; }

.dt-conv-del {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 1rem;
  color: var(--dt-text-muted);
  cursor: pointer;
  /* Hidden until the row is hovered or the button itself is focused, so a rail
     of twelve conversations is not also a rail of twelve delete buttons. NOT
     display:none -- that would drop it out of the tab order, which is the
     whole of how a keyboard reader reaches it. */
  opacity: 0;
}

.dt-conv-row:hover .dt-conv-del,
.dt-conv-del:focus-visible { opacity: 1; }

.dt-conv-del:hover {
  color: var(--ab-danger);
  background: #fbeaea;
}

/* --- Type-to-confirm (LTA-135) ------------------------------------------ */

/* The gate on anything Data Tomo destroys with no undo. Deliberately NOT on
   "Stop sharing" (revoking is reversible and destroys nothing) or on removing
   an attachment -- see the comments in tomo-confirm.js. Putting the heaviest
   gate on the lightest action is what teaches people to type the word without
   reading the sentence above it. */

.dt-confirm-dim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(26, 26, 26, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* [hidden] must beat display:flex, same reason as .dt-asadmin above. */
.dt-confirm-dim[hidden] { display: none !important; }

.dt-confirm {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 452px;
  box-shadow: 0 18px 50px rgba(27, 40, 50, .28);
  overflow: hidden;
}

.dt-confirm-title {
  margin: 0;
  padding: 20px 22px 0;
  font-size: 1.05rem;
  color: var(--dt-text-head);
}

.dt-confirm-body {
  padding: 12px 22px 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--dt-text-body);
}

.dt-confirm-body b { color: var(--dt-text-head); font-weight: 600; }

/* The thing being destroyed, echoed back. Set as text, never markup. */
.dt-confirm-what {
  margin: 12px 22px 0;
  padding: 11px 14px;
  background: var(--dt-card-head);
  border: 1px solid var(--dt-border-light);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--dt-text-head);
  word-break: break-word;
}

.dt-confirm-what[hidden] { display: none !important; }

.dt-confirm-label {
  display: block;
  padding: 16px 22px 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dt-text-muted);
}

.dt-confirm-label code {
  font-family: var(--dt-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ab-danger);
  background: none;
}

.dt-confirm-input {
  display: block;
  width: calc(100% - 44px);
  margin: 7px 22px 0;
  font-family: var(--dt-font-mono);
  font-size: 0.85rem;
  color: var(--dt-text-body);
  background: #fff;
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  padding: 10px 13px;
}

.dt-confirm-input:focus {
  outline: none;
  border-color: var(--ab-danger);
  box-shadow: 0 0 0 3px #fbeaea;
}

.dt-confirm-acts {
  display: flex;
  gap: 11px;
  justify-content: flex-end;
  padding: 20px 22px;
  margin-top: 18px;
  background: var(--dt-card-head);
  border-top: 1px solid var(--dt-border-light);
}

.dt-confirm-cancel,
.dt-confirm-go {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 21px;
  margin: 0;
  width: auto;
  cursor: pointer;
}

.dt-confirm-cancel {
  background: #fff;
  border: 1px solid var(--dt-border);
  color: var(--dt-text-body);
}

.dt-confirm-cancel:hover { background: var(--dt-hover-bg); }

.dt-confirm-go {
  background: var(--ab-danger);
  border: 1px solid var(--ab-danger);
  color: #fff;
}

.dt-confirm-go:hover {
  background: var(--ab-danger-hover);
  border-color: var(--ab-danger-hover);
}

/* Disabled is the AFFORDANCE for "the word is not typed yet"; tomo-confirm.js
   re-checks the word on every submit path, so this is never the enforcement. */
.dt-confirm-go[disabled] { opacity: .4; cursor: not-allowed; }

.dt-confirm-go[disabled]:hover {
  background: var(--ab-danger);
  border-color: var(--ab-danger);
}