.daily-usage-item{flex:0 0 48px;min-width:48px}.daily-usage-bubble{font-variant-numeric:tabular-nums}.daily-usage-bubble:not(:popover-open){display:none}.daily-usage-axis,.daily-usage-totals,.daily-usage-table{font-variant-numeric:tabular-nums}
/* Customer profile surfaces and evidence-only Sales Funnel. */
:root{--stage-inquiry:#174ea6;--stage-needs:#6331a1;--stage-quote:#825300;--stage-deal:#246331;--stage-delivered:#00685c;--stage-surface:#fff}
:root[data-theme="dark"]{--stage-inquiry:#9fc5ff;--stage-needs:#d8b4fe;--stage-quote:#ffd580;--stage-deal:#a3e6ae;--stage-delivered:#80e2ce;--stage-surface:#17212b}
.customer-profile>.workspace-section,.customer-profile>.profile-name{padding:20px;margin-block:16px;border:1px solid var(--control-line);border-radius:10px;background:var(--canvas);min-width:0}
.profile-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;background:var(--control-line);border:1px solid var(--control-line)}
.profile-stat-grid>div{padding:14px;background:var(--canvas);min-width:0}.profile-stat-grid dt{font-size:.8rem;color:var(--muted)}.profile-stat-grid dd{margin:6px 0 0;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.customer-objective{padding:20px;margin-block:18px;border:1px solid var(--control-line);border-radius:10px;min-width:0}.customer-objective>h3{font-size:1.15rem}.objective-windows{margin-block:16px}.objective-windows summary{min-height:44px;cursor:pointer}
.sales-funnel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-block:16px}
[data-stage="inquiry"]{--stage-color:var(--stage-inquiry)}[data-stage="needs"]{--stage-color:var(--stage-needs)}[data-stage="quote"]{--stage-color:var(--stage-quote)}[data-stage="deal"]{--stage-color:var(--stage-deal)}[data-stage="delivered"]{--stage-color:var(--stage-delivered)}
.funnel-step{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;white-space:normal;overflow-wrap:anywhere;min-width:0;min-height:88px;padding:12px;border:2px solid var(--stage-color);background:var(--stage-surface);color:var(--stage-color)}
.funnel-step[data-evidenced="false"]{border:2px dashed var(--control-line);color:var(--ink);background:var(--canvas)}.funnel-step span{font-size:.8rem}.funnel-step:focus-visible,.stage-timeline li:focus{outline:3px solid var(--stage-color);outline-offset:3px}
.stage-timeline{padding-left:20px}.stage-timeline li{padding:12px 16px;margin-block:10px;border-left:3px solid var(--stage-color);background:var(--stage-surface);overflow-wrap:anywhere}.stage-timeline strong{display:block;color:var(--stage-color);margin-bottom:8px}.stage-timeline time{font-variant-numeric:tabular-nums}.stage-timeline a{display:inline-flex;align-items:center;min-height:44px}.customer-objective>.text-button{min-height:44px;border:1px solid var(--control-line);margin:4px}
@media(max-width:700px){.sales-funnel{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-objective{padding:12px}.customer-profile>.workspace-section{padding:14px}}

/* Instant browsing controls, shared by the four business lists. */
.workspace-filters.browse-filter-bar{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;min-width:0}
.browse-filter-bar .filter-search-row,.browse-filter-bar .filter-search-row label{display:block;width:100%;max-width:none}
.browse-filter-bar .filter-search-row input{width:100%;max-width:none;min-height:44px}
.browse-filter-bar .filter-quick-row,.browse-filter-bar .filter-extra{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.browse-filter-bar .filter-quick-row label{flex:1 1 140px;min-width:0}
.browse-filter-bar select,.browse-filter-bar input,.browse-filter-bar button,.browse-filter-bar summary{min-height:44px}
.browse-filter-bar select{width:100%;max-width:none}
.browse-filter-bar>button{align-self:flex-start;width:auto}
.browse-filter-bar .filter-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.browse-filter-bar .active-filter-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--control-line);border-radius:6px;padding-left:10px;color:var(--ink);background:var(--canvas);max-width:100%;overflow-wrap:anywhere}
.browse-filter-bar .active-filter-chip button{min-width:44px;padding:4px;border:0;background:transparent}
.browse-filter-bar .filter-result-count{margin:0;font-variant-numeric:tabular-nums}
@media(max-width:480px){.browse-filter-bar .filter-quick-row label{flex-basis:calc(50% - 10px)}.browse-filter-bar .filter-extra label{width:100%}}
/* WAtcher workspace — Carbon Copy.
   The workspace is a multi-part form set. Every field is a ruled box with its
   caption pre-printed inside it; every state is a mark you would make on the
   form. An unfilled box keeps its caption: absence is printed, never blank. */

/* Legacy token names still referenced across this sheet, remapped onto the
   form-set world so nothing can drift out of palette. */
:root {
  --wash: var(--canvas);
  --control-border: var(--control-line);
  --teal-ink: var(--green);
  --navy: var(--ink);
  --teal: var(--green);

  /* Copy stocks double as the state vocabulary: the colour of the copy is
     what tells you who holds which truth. */
  --state-review-bg: #edebe5;    --state-review-ink: #403d36;  /* the common state: quiet */
  --state-progress-bg: #f6e8c4;  --state-progress-ink: #6b5212; /* in flight: the travelling copy */
  --state-info-bg: #dde5ee;      --state-info-ink: #2d3f58;
  --state-success-bg: #dfe9dc;   --state-success-ink: #2c5233;  /* done reads green */
  --state-neutral-bg: #d7d5ce;   --state-neutral-ink: #4b483f;
  --state-error-bg: #f3ded8;     --state-error-ink: #8a2717;
  /* Copy stocks as a dyed edge; the tint carries custody on the row itself. */
  --edge-original: #b9b7ae;
  --edge-office: #c69aa4;
  --edge-travelling: #c9a94e;

  font-family: 'Archivo', 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
}
:root[data-theme=dark] {
  --state-review-bg: #2a2926;    --state-review-ink: #ccc9c1;
  --state-progress-bg: #3a3320;  --state-progress-ink: #e9cd86;
  --state-info-bg: #222b35;      --state-info-ink: #b4c6da;
  --state-success-bg: #213024;   --state-success-ink: #a8d0ae;
  --state-neutral-bg: #333029;   --state-neutral-ink: #bdbab2;
  --state-error-bg: #38251f;     --state-error-ink: #f0a396;
  --edge-original: #55534c;
  --edge-office: #7a5560;
  --edge-travelling: #7d6a2c;
}

body { font-family: 'Archivo', 'Segoe UI', Arial, sans-serif; background: var(--canvas); color: var(--ink) }
a { text-underline-offset: 3px }

/* ----------------------------------------------------------- docket strip -- */

.workspace { display: grid; grid-template-columns: 216px minmax(0, 1fr) }
.sidebar { width: auto; background: var(--sidebar-bg); padding: 20px 12px; color: var(--sidebar-link); border: 0 }
.sidebar .brand { font-size: 21px; margin: 0 8px 22px; color: var(--sidebar-ink) }
.sidebar .brand-mark { background: none; color: var(--brand-dot); font-size: 21px; width: 26px; height: 26px }
.sidebar nav { gap: 1px }
.sidebar nav a { font-size: 13px; font-weight: 600; padding: 10px 12px; min-height: 42px; border-radius: var(--radius-sm); border: 0 }
.sidebar-note { font-size: 12px }
.sidebar .passive-dot { background: var(--brand-dot) }
.sidebar .account button { background: transparent; color: var(--sidebar-ink); border-color: var(--sidebar-control-border) }

.main-shell { margin: 0; min-width: 0 }
.topbar { min-height: 52px; padding: 8px 26px; background: var(--surface); border-bottom: 1px solid var(--rule) }
main { padding: 22px 26px 84px; max-width: none }
.page-heading h1 { font-size: 25px; font-weight: 640; letter-spacing: -.025em; line-height: 1.15; color: var(--ink) }
.card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 24px; border-radius: 0 }
.card h2 { font-size: 14px; font-weight: 650; letter-spacing: .01em }
.card > .workspace-filters + h2 { margin-top: 24px }
.workspace-footer { font-size: 12px; border-top: 1px solid var(--rule) }
#content > .card:first-child > h2:first-child { display: none }
#content[data-view=overview] { display: block }

/* ------------------------------------------------- the ruled field box ---- */
/* A caption printed inside its own box costs ~50px where a stacked label and
   input cost ~90px. This is the whole density argument of the world. */

.workspace-filters > label,
.page-filter-searches > label,
.filter-extra > label,
.report-generation-controls > label,
.settings-form > label,
.connection-create label,
.case-action-form label,
.episode-form > label {
  position: relative;
  display: block;
  min-width: 0;
  padding: 5px 10px 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.workspace-filters > label :is(input, select),
.page-filter-searches > label :is(input, select),
.filter-extra > label :is(input, select),
.report-generation-controls > label :is(input, select),
.settings-form > label :is(input, select),
.connection-create label :is(input, select),
.case-action-form label :is(input, select, textarea),
.episode-form > label :is(input, select) {
  display: block;
  width: 100%;
  margin: 1px 0 0;
  padding: 0 0 6px;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.workspace-filters > label:focus-within,
.page-filter-searches > label:focus-within,
.filter-extra > label:focus-within { border-color: var(--green); box-shadow: inset 0 -2px 0 var(--green) }
.workspace-filters > label :is(input, select):focus-visible,
.page-filter-searches > label :is(input, select):focus-visible,
.filter-extra > label :is(input, select):focus-visible { outline: none }
.case-action-form label textarea { min-height: 84px; padding-bottom: 8px }


/* A form's field has a fill line: without it the caption reads as the value. */
.workspace-filters > label :is(input, select),
.page-filter-searches > label :is(input, select),
.filter-extra > label :is(input, select) { border-bottom: 1px solid var(--rule) }
@media(max-width:800px) {
  .workspace-filters > label, .page-filter-searches > label, .filter-extra > label { padding: 4px 9px 0 }
  .workspace-filters > label :is(input, select),
  .page-filter-searches > label :is(input, select),
  .filter-extra > label :is(input, select) { min-height: 26px; padding-bottom: 4px; font-size: 15px }
}
/* ------------------------------------------------- one ruled filter row ---- */

/* One ruled row: two field boxes, the disclosure, and the actions. A grid so
   the row is deterministic instead of whatever flex wrapping decides. */
.workspace-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto auto;
  align-items: stretch;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  max-width: none;
}
.workspace-filters > label { min-width: 0 }
.workspace-filters details { align-self: stretch }
.workspace-filters summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 14px;
  min-height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.workspace-filters:has(details[open]) details { grid-column: 1 / -1; grid-row: 2 }
.workspace-filters details[open] summary { margin-bottom: 8px }
.workspace-filters > button { align-self: stretch; margin: 0; min-height: 44px }
.filter-extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0 }

.page-filters, .filters > form.page-filters, form.filters.page-filters {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: none; width: 100%;
}
.page-filter-searches { display: flex; gap: 8px; width: 100%; min-width: 0 }
.page-filter-searches > label, .page-filter-searches > input { flex: 1 1 0; min-width: 0; width: 100% }
/* Status is a short enumerated field; it should not claim a search field's width. */
.page-filter-searches > label:has(select[name=stage]) { flex: 0 1 190px }
.page-filters .page-filter-searches input { max-width: none; width: 100% }
.page-filters > details { flex: none; width: 100% }
.page-filters > .filter-extra { margin: 0 }
.page-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.page-filter-actions > button { width: auto; margin: 0 }

/* One ruled row on a desk; still stacked on a phone, where a row cannot hold
   two fields, a disclosure and two actions without shrinking every target. */
@media(min-width:801px) {
  .page-filters, .filters > form.page-filters, form.filters.page-filters {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .page-filter-searches { flex: 1 1 320px }
  .page-filters > details { width: auto; flex: 0 0 auto; align-self: stretch }
  .page-filter-actions { flex: 0 0 auto }
  /* Opened, the extra fields take their own full-width row beneath. */
  .page-filters:has(> details[open]) > details { flex-basis: 100%; order: 3 }
  .page-filters:has(> details[open]) > .page-filter-actions { order: 4 }
}

/* ------------------------------------------------------------ tally line -- */

.case-summary {
  display: flex;
  align-items: baseline;
  gap: 8px 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 12px;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.case-summary > strong { font-size: 27px; font-weight: 640; letter-spacing: -.025em }
.case-summary p { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); max-width: 26ch }
.case-summary > span { font-size: 12px; color: var(--muted) }
.coverage-note { background: transparent; border: 1px dashed var(--rule-strong); padding: 10px 14px; font-size: 12px; color: var(--muted); border-radius: var(--radius-sm) }

/* -------------------------------------------------------- docket columns -- */

.case-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  margin-top: 20px;
  height: min(720px, 70dvh);
  max-height: calc(100dvh - 32px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  border-top: 1px solid var(--rule-strong);
  /* The scrollbar is the affordance: on narrow screens the docket is a spindle
     you swipe, and it must look like one. */
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) var(--soft);
}
/* Columns are divided by a perforation, not a border. */
.case-lane {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-snap-align: start;
  padding: 0 12px 56px;
  scroll-padding-top: 64px;
  overflow-anchor: none;
  border-right: 1px dashed var(--rule);
}
.case-lane:last-child { border-right: 0 }
.case-lane > h3 {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  border-bottom: 1px solid var(--rule);
}
/* The lane's own name leads; its disclosure annotates and must not outrank it. */
.case-lane > h3 :is(a, .inline-link, button) {
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-transform: none;
}
.case-lane > h3 :is(a, .inline-link, button):hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px }
.case-lane > h3 > span { max-width: 100% }
.case-lane > h3 a:hover { color: var(--green); text-decoration: underline }

/* The lane caption IS the control: hover, click or focus the header itself for
   the stage note. No separate "About this stage" link competes with it. */
.case-lane > h3 .case-stage-help { margin: 0; width: 100% }
.case-lane > h3 .case-stage-help > summary {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 4px 0;
  display: flex;
  align-items: center;
  list-style: none;
  cursor: help;
}
.case-lane > h3 .case-stage-help > summary::-webkit-details-marker { display: none }
.case-lane > h3 .case-stage-help > summary:hover,
.case-lane > h3 .case-stage-help[open] > summary { color: var(--ink); text-decoration: underline dotted; text-underline-offset: 4px }
.case-lane > h3 .case-stage-help > p {
  font-size: 13px; text-transform: none; letter-spacing: normal;
  font-weight: 400; margin: 6px 0 0; color: var(--muted);
}
.case-lane-footer { position: sticky; bottom: -4px; background: var(--canvas); padding: 8px 0; z-index: 1 }
.case-lane-status { font-size: 12px; color: var(--muted); margin: 0 0 8px; font-variant-numeric: tabular-nums }
.case-load-older { width: 100% }
.case-lane > .muted { font-size: 12px; padding: 14px 0; color: var(--muted) }

/* A card is a ruled slip, not a floating tile. */
.case-card {
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  background: var(--stock-original);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 12px 12px 10px;
  gap: 7px;
  width: 100%;
  margin: 0 0 8px;
  box-shadow: none;
  overflow-wrap: anywhere;
  min-height: 0;
  position: relative;
}
/* These are <button> elements: the base control rule sets nowrap, which would
   clip every customer name. Text in a slip or a ledger row always wraps. */
.case-card, .chart-button, .case-list-row, .conversation-thread-row { white-space: normal }
.case-card:hover { border-color: var(--green); background: var(--surface) }
.case-card strong { font-size: 14px; line-height: 1.4; font-weight: 650 }
/* The record number stamps the slip's corner; the customer leads the line. */
.case-card .case-number {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-lane .case-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 10px;
  row-gap: 7px;
}
.case-lane .case-card > .case-number { grid-column: 2; grid-row: 1; text-align: right; align-self: start }
.case-lane .case-card > .customer-name { grid-column: 1; grid-row: 1 }
.case-lane .case-card > :not(.case-number):not(.customer-name) { grid-column: 1 / -1 }
.customer-name { font-size: 12px; color: var(--muted) }
.case-meta { font-size: 12px; color: var(--muted) }
.case-source { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em }
/* The footer rule belongs to a slip, not to a row in the ledger. */
.case-card .case-source { border-top: 1px dashed var(--rule); padding-top: 8px }

/* ------------------------------------------------- the ledger row (list) -- */

.case-list, .conversation-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule-strong) }
.case-list .case-list-row, .conversation-thread-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(150px, .9fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10px 10px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  text-align: left;
  color: var(--ink);
  box-shadow: none;
  min-height: 0;
}
.case-list .case-list-row:hover, .conversation-thread-row:hover { background: var(--soft) }
.case-list-row > span, .conversation-thread-row > span { min-width: 0; overflow-wrap: anywhere }
.case-list-context, .case-list-state { display: flex; flex-direction: column; gap: 3px }
/* The number stamps the corner of its own cell; the customer leads the line. */
.case-list-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline }
.case-list-identity .customer-name { grid-column: 1; grid-row: 1 }
.case-list-identity .case-number { grid-column: 2; grid-row: 1; text-align: right }
.case-list-identity .case-list-preview { grid-column: 1 / -1; grid-row: 2 }
.case-list-row .case-number { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
.case-list-row .customer-name { font-size: 14px; font-weight: 650; color: var(--ink) }
.case-list-preview { font-size: 12px; font-weight: 400; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden }
.case-list-context, .case-list-state time { font-size: 12px; font-weight: 400; color: var(--muted) }
.case-list-status { font-size: 12px; font-weight: 650; color: var(--ink) }
.case-list-open { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); text-decoration: none }
.case-list .case-list-row:hover .case-list-open { color: var(--green); text-decoration: underline; text-underline-offset: 3px }

/* The pre-printed ledger header. Added by the renderer, never a row itself. */
.case-list-head, .conversation-list-head {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(150px, .9fr) auto;
  gap: 16px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-list-head > span { min-width: 0 }

/* An unassessed review is an empty box that still shows its caption. */
.ai-indication, .case-advisory { padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); margin: 14px 0 }
.ai-indication h3 { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px }
.ai-indication p { font-size: 13px; line-height: 1.6 }

/* ---------------------------------------------------------- state stocks -- */

.status-badge, .sentiment-badge {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  white-space: normal;
  background: var(--state-neutral-bg);
  color: var(--state-neutral-ink);
  border: 1px solid transparent;
}
.sentiment-badge { vertical-align: middle; font-size: 12px }
/* An unassessed review is an unfilled box that still shows its caption,
   never a filled chip asserting a result nobody produced. */
.sentiment-badge[data-sentiment=not_assessed],
.sentiment-badge[data-sentiment=unknown] {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--rule-strong);
  font-weight: 600;
}
.status-badge:is([data-status=ongoing], [data-status=open], [data-status=waiting]),
.sentiment-badge[data-sentiment=neutral] { background: var(--state-info-bg); color: var(--state-info-ink) }
.sentiment-badge[data-sentiment=mixed] { background: var(--state-review-bg); color: var(--state-review-ink) }
.status-badge:is([data-status=need_review], [data-status=pending], [data-status=queued]) { background: var(--state-review-bg); color: var(--state-review-ink) }
.status-badge:is([data-status=in_progress], [data-status=running]) { background: var(--state-progress-bg); color: var(--state-progress-ink); border-color: var(--state-progress-ink) }
.status-badge:is([data-status=completed], [data-status=verified], [data-status=done]),
.sentiment-badge[data-sentiment=positive] { background: var(--state-success-bg); color: var(--state-success-ink) }
.status-badge:is([data-status=disconnected], [data-status=error], [data-status=failed]),
.sentiment-badge[data-sentiment=negative] { background: var(--state-error-bg); color: var(--state-error-ink) }

.case-list .case-list-status[data-status=pending] { background: var(--state-error-bg); color: var(--state-error-ink) }
.case-list .case-list-status[data-status=need_review] { background: var(--state-review-bg); color: var(--state-review-ink) }
/* Dismissed is struck, not hidden: it stays legible. */
.case-list .case-list-status[data-status=dismissed] { background: var(--state-neutral-bg); color: var(--state-neutral-ink) }
.case-list .case-list-row[data-stage=dismissed] .customer-name { text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 1px }

/* ----------------------------------------------------------- case detail -- */

.evidence-dialog {
  width: min(1180px, calc(100vw - 64px));
  max-width: none;
  max-height: calc(100dvh - 64px);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 3px 4px 0 var(--rule), 6px 10px 40px rgb(36 31 26 / .18);
  overflow: auto;
  animation: evidence-in .18s cubic-bezier(.16, 1, .3, 1);
}
.evidence-dialog::backdrop { background: var(--overlay-backdrop) }
.evidence-dialog .dialog-heading { position: sticky; top: -22px; background: var(--surface); padding: 12px 0; z-index: 1; align-items: flex-start }
.evidence-dialog .dialog-heading button { flex-shrink: 0 }
.evidence-dialog h2 { font-size: 20px; line-height: 1.25; font-weight: 650 }
.evidence-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px }
.evidence-grid > section + section { border-left: 1px dashed var(--rule); padding-left: 24px }
.workspace-section h2 { font-size: 14px; margin-top: 20px }
.message { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); margin: 0 16px 10px 0; padding: 12px; overflow-wrap: anywhere }
.message.outbound { margin: 0 0 10px 16px; background: var(--soft) }
.message p { font-size: 12px; line-height: 1.7; margin: 11px 0 6px; white-space: pre-wrap }
.message small { font-size: 12px; color: var(--muted) }
.human-note { padding: 14px; background: var(--stock-office); border: 1px solid var(--rule); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.6; margin: 12px 0 }
.case-action-form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px }
.case-action-form label { display: block; margin-bottom: 10px }
.case-action-form > div { width: 100% }
.case-context { margin: 12px 0 }
.case-context > summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; font-weight: 650 }
.case-context > .panel { margin-top: 12px }
/* The identity line is three separate facts, not one run-on string. The DOM
   order (case number, customer, phone) is pinned by test_case_detail_layout_browser. */
.case-detail-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 6px }
.case-detail-identity > * { min-width: 0 }
.case-detail-identity .case-number { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
.case-detail-identity a[data-case-customer] { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px }
.case-detail-identity a[data-case-customer]:hover { text-decoration-thickness: 2px }
.case-detail-identity a[data-case-customer]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: var(--radius-sm) }
[data-review-advisory] { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px 14px; margin: 12px 0 }
[data-review-advisory] strong { display: block }


/* ------------------------------------------------------------- the stocks -- */
/* The copy colour is the claim: which sheet is this, and who holds it.
   A 1px dyed edge (never a heavier bar) plus a faint tint on the sheet. */
.case-list .case-list-row, .case-card { border-left: 1px solid var(--edge-original) }
.case-list .case-list-row[data-stage=in_progress], .case-card[data-stage=in_progress] {
  border-left-color: var(--edge-travelling);
  background: color-mix(in srgb, var(--canvas) 92%, var(--stock-travelling) 8%);
}
.case-list .case-list-row[data-stage=need_review], .case-card[data-stage=need_review] {
  border-left-color: var(--edge-original);
  background: color-mix(in srgb, var(--canvas) 96%, var(--stock-original) 4%);
}
.case-list .case-list-row:is([data-stage=completed], [data-stage=dismissed]),
.case-card:is([data-stage=completed], [data-stage=dismissed]) {
  border-left-color: var(--edge-office);
  background: color-mix(in srgb, var(--canvas) 94%, var(--stock-office) 6%);
}
.case-card { background: var(--stock-original) }
/* The slip inherits its stock from the lane it is filed in. */
.case-lane[data-stage=in_progress] .case-card {
  background: color-mix(in srgb, var(--surface) 90%, var(--stock-travelling) 10%);
  border-left-color: var(--edge-travelling);
}
.case-lane[data-stage=need_review] .case-card { border-left-color: var(--edge-original) }
.case-lane:is([data-stage=completed], [data-stage=dismissed]) .case-card {
  background: color-mix(in srgb, var(--surface) 92%, var(--stock-office) 8%);
  border-left-color: var(--edge-office);
}
.case-lane[data-stage=ongoing] .case-card { border-left-color: var(--edge-office) }

/* ------------------------------------------- case detail: the open form --- */
/* The left column is the pre-printed body; the right is the signature block. */
.case-detail-primary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .38fr); gap: 24px; align-items: start }
.case-detail-primary > .workspace-section + section { border-left: 1px dashed var(--rule); padding-left: 24px }
.case-detail-reading { min-width: 0 }
.case-detail-reading > .case-context, .case-detail-reading > .episode-summary { display: block }
.case-conversation-evidence { min-width: 0 }
.case-summary-text { line-height: 1.55; font-size: 14px; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere }
.phone-number { font-variant-numeric: tabular-nums; color: var(--muted) }

.case-advisory-finding { padding-bottom: 14px; border-bottom: 1px solid var(--rule) }
.case-advisory-finding:last-child { border-bottom: 0; padding-bottom: 0 }
.case-advisory-finding h3 { font-size: 13px; margin: 0 0 6px }
.case-advisory-finding p { margin: 0; line-height: 1.55 }
.case-source-disclosure { margin-top: 10px }
.case-source-disclosure > summary { display: inline-flex; min-height: 36px; align-items: center; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
/* The unclassed disclosures in the case dialog were 21px: too small to hit.
   Scoped to those only, so the 44px context-help and case-context targets are
   raised past, never pulled down. */
.evidence-dialog details:not([class]) > summary { min-height: 36px; display: flex; align-items: center; cursor: pointer }
.case-source-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px }
.case-source-missing { color: var(--muted); font-size: 12px; overflow-wrap: anywhere }
.case-stage-help { margin: 0 0 0 10px }
.case-stage-help > summary { min-height: 32px; padding: 4px 8px; font-size: 12px }
.case-stage-help[open] > p { max-width: min(42ch, calc(100vw - 72px)) }

/* A cited message is stamped, not tinted. */
.message-chat__bubble--cited { outline: 2px solid var(--green); outline-offset: 3px; background: color-mix(in srgb, var(--surface) 84%, var(--green) 16%) }

.profile-name { margin: 8px 0 18px }
.profile-name-form { max-width: 620px }
.profile-name-form[hidden], .profile-name-trigger[hidden] { display: none }
.profile-name-trigger { font-size: 20px; font-weight: 650; text-align: left; white-space: normal; overflow-wrap: anywhere; min-height: 44px }
.profile-name [role=status]:empty { display: none }

.telegram-credential-status { width: fit-content; max-width: 100%; padding: 11px 14px; border: 1px solid var(--green); border-radius: var(--radius-sm); background: var(--state-progress-bg); color: var(--state-progress-ink); font-weight: 600; overflow-wrap: anywhere }

/* Floating help uses the top layer where available, fixed positioning otherwise. */
.context-help > .floating-help, .case-source-disclosure > .floating-help {
 position: fixed; inset: auto; box-sizing: border-box; margin: 0; z-index: 100;
 max-width: calc(100vw - 24px); max-height: min(320px, 70dvh); overflow: auto;
 padding: 12px 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
 background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent);
 font-size: 13px; font-weight: 400; line-height: 1.55; overflow-wrap: anywhere;
}
.floating-help::before { content: ''; position: absolute; left: var(--caret-left, 16px); top: 0; width: 8px; height: 8px; background: var(--surface); border-top: 1px solid var(--rule-strong); transform: rotate(45deg); }
.floating-help[data-side=above]::before { top: auto; bottom: 0; transform: rotate(225deg) }
.case-source-disclosure > summary { min-height: 44px; display: inline-flex; align-items: center }
.evidence-dialog:has(.case-detail-identity) .case-detail-identity { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--rule-strong) }
.evidence-dialog .case-detail-identity a[data-case-customer] { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 44px; color: var(--link); font-size: 22px; font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px }
.evidence-dialog .case-detail-identity a[data-case-customer]:hover { background: color-mix(in srgb, var(--link) 8%, var(--surface)) }
.evidence-dialog:has(.case-detail-identity) :is(.case-severity,.case-advisory-finding,.case-context,.workspace-section) { border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 16px }
.evidence-dialog:has(.case-detail-identity) :is(.case-severity,.case-advisory-finding) { background: color-mix(in srgb, var(--link) 4%, var(--surface)); padding: 12px; border-radius: var(--radius-sm) }
.evidence-dialog:has(.case-detail-identity) :is(h2,h3) { font-weight: 650; line-height: 1.35 }
.evidence-dialog:has(.case-detail-identity) h3 { font-size: 15px }
.evidence-dialog .phone-number { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums }
.analytics-ranges { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1 }
.analytics-ranges button { min-height: 44px }
.analytics-ranges [aria-pressed=true] { border-color: var(--link); color: var(--link); font-weight: 650 }
.analytics-period { font-weight: 650; grid-column: 1 / -1 }
.filter-result-count, .workspace-pager, .case-lane-status, .management-kpis { font-variant-numeric: tabular-nums }
/* Help is a marginal annotation: keyboard and touch reachable, never hover-only. */
.context-help { position: relative; width: fit-content; max-width: 100%; margin: 8px 0 }
.context-help > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 8px 12px; color: var(--link); text-decoration: underline; text-underline-offset: 3px }
.context-help > p { position: relative; z-index: 2; max-width: 65ch; margin: 0; padding: 11px 14px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); line-height: 1.55; overflow-wrap: anywhere; box-shadow: 2px 3px 0 var(--rule) }
.context-help[open] { z-index: 5 }
.case-detail-identity + .context-help[open] > p { max-height: 40dvh; overflow: auto }

/* Every settings-style form keeps its action at content width, not full bleed. */
:is(.settings-form, .runtime-settings-form, .telegram-credentials, .notification-settings,
    .profile-name-form, .profile-tags-form, .case-action-form, .episode-form, .admin-user-form) > button {
  width: fit-content; max-width: 100%; flex: 0 0 auto; align-self: flex-start; justify-self: start;
  min-height: 44px; padding: 10px 16px;
}
.runtime-settings-form, .admin-user-form { display: grid; gap: 16px; max-width: 660px }

/* Jump links sit with Close in the dialog head: leaving the case for the
   conversation or the customer should not cost a round trip through the list. */
.case-detail-jump { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; margin-right: 16px }
.case-detail-jump a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.case-detail-jump a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px }
@media(max-width:800px) {
  .case-detail-jump { margin: 6px 0 0; flex-basis: 100%; order: 3 }
}

/* --------------------------------------------------------------- tabs ----- */

.tab-strip { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule-strong); padding-bottom: 0; margin-bottom: 20px }
.tab-strip button {
  margin: 0;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}
/* Rank is inversion, not a new hue. */
.tab-strip button[aria-selected=true] { background: var(--ink); color: var(--canvas); border-color: var(--ink) }

/* ------------------------------------------------------------- the funnel -- */

.analytics-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
.analytics-columns > section, .evidence-grid > section { min-width: 0 }
.chart-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule) }
.chart-list .chart-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  width: 100%;
  color: var(--ink);
  margin: 0;
  min-height: 0;
  text-align: left;
  white-space: normal;
  justify-content: flex-start;
}
.chart-list .chart-button:hover { background: var(--soft) }
.chart-label { overflow-wrap: anywhere; text-align: left; font-size: 13px; font-weight: 600 }
.chart-value { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); margin-left: auto }
.chart-scale { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; padding-bottom: 4px }
/* A funnel reads as a funnel: the track is the sheet, the fill is the stage. */
.chart-track { display: block; grid-column: 1 / -1; height: 10px; overflow: hidden; border-radius: var(--radius-sm); background: var(--soft); border: 1px solid var(--rule); width: 100% }
.chart-bar { display: block; height: 100%; background: var(--green) }
.chart-button[data-series=cancelled] .chart-bar, .chart-button[data-series=declined] .chart-bar { background: var(--muted) }
.chart-track--unavailable { height: 0; border: 0; border-top: 1px dashed var(--rule-strong); margin: 5px 0 }
.chart-button progress { max-width: 45%; height: 10px; accent-color: var(--green) }
.chart-button strong { font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto }

.definitions-table { width: 100%; table-layout: fixed; margin-top: 14px }
.definitions-table th, .definitions-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; padding: 11px 12px; line-height: 1.55 }
.definitions-table th:first-child { width: 28% }
.definitions-table tbody th { font-size: 12px; text-align: left; color: var(--ink) }

[data-ai-usage] { min-width: 0; max-width: 100% }
[data-ai-usage] .daily-usage-chart { margin: 20px 0; min-width: 0 }
[data-ai-usage] figcaption { font-weight: 650; margin-bottom: 12px }
[data-ai-usage] .daily-usage-layout { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 10px }
[data-ai-usage] .daily-usage-axis { height: 200px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums }
[data-ai-usage] .daily-usage-scroll { overflow-x: auto; min-width: 0; padding: 3px; border-bottom: 1px solid var(--line) }
[data-ai-usage] .daily-usage-bars { display: flex; width: max-content; min-width: 100%; gap: 4px }
[data-ai-usage] .daily-usage-day { display: flex; flex-direction: column; align-items: center; flex: 1 0 46px; width: 46px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; font-size: 11px }
[data-ai-usage] .daily-usage-day:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px }
[data-ai-usage] .daily-usage-plot { height: 200px; width: 100%; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(to top,var(--soft) 1px,transparent 1px); background-size: 100% 100px }
[data-ai-usage] .daily-usage-bar { display: block; width: 26px; background: var(--green); min-height: 1px }
[data-ai-usage] .daily-usage-marker { height: 20px !important; background: transparent; border-bottom: 1px solid var(--ink); line-height: 20px }
[data-ai-usage] .daily-usage-date { padding: 8px 0; white-space: nowrap }
[data-ai-usage] .daily-usage-axis-label { text-align: center; margin: 4px; font-size: 12px }
[data-ai-usage] .daily-usage-detail { min-height: 3em; overflow-wrap: anywhere }
[data-ai-usage] .daily-usage-table { min-width: 0; max-width: 100%; overflow-x: auto }
[data-ai-usage] .daily-usage-table summary { cursor: pointer; padding: 12px 0 }

/* -------------------------------------------------------- connections ----- */

.connection-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule) }
.connection-list .connection-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
  gap: 12px 24px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.connection-identity { min-width: 0; overflow-wrap: anywhere }
.connection-identity h3 { margin: 0 0 5px; font-size: 15px }
.connection-identity p { margin: 0 0 10px; color: var(--muted) }
.connection-list .connection-card dl { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: 6px 16px; margin: 0; align-content: start; font-size: 12px; line-height: 1.55 }
.connection-list .connection-card dt { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
.connection-list .connection-card dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
.connection-list .capture-intervals { grid-column: 1 / -1; min-width: 0 }
.connection-list .actions { grid-column: 1 / -1; flex-wrap: wrap; margin: 0 }
.connection-list .capture-intervals summary { min-height: 44px; padding: 12px 0; cursor: pointer }
.capture-settings { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 16px }
.capture-settings summary { cursor: pointer; min-height: 44px }
.connection-dialog { width: min(560px, calc(100vw - 24px)) }
.connection-create { display: flex; flex-direction: column; align-items: stretch; gap: 14px }
.connection-create button { align-self: flex-start }
[data-onboard-agent] { margin-bottom: 20px }

/* ------------------------------------------------------- conversations ---- */

.conversation-meta { font-size: 12px; color: var(--muted); margin: 0 0 10px; font-variant-numeric: tabular-nums }
.conversation-thread-customer, .conversation-thread-agent, .conversation-thread-activity { display: flex; flex-direction: column; gap: 4px }
.conversation-thread-customer strong { font-size: 14px; font-weight: 650 }
.conversation-thread-customer span, .conversation-thread-agent, .conversation-thread-activity { font-size: 12px; color: var(--muted) }
.conversation-thread-activity { font-variant-numeric: tabular-nums }
.conversation-thread-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 32px) }
.conversation-thread-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: start; margin-bottom: 12px }
.conversation-thread-identity h3, .conversation-thread-identity p { margin: 0 }
.conversation-thread-identity h3, .conversation-thread-identity p:first-of-type { grid-column: 1 }
.conversation-load-older { margin: 0 0 12px }
.conversation-thread-chat { min-width: 0 }
.conversation-thread-chat .message-chat__conversation { margin: 0 }
.conversation-thread-chat .message-chat__heading, .conversation-thread-chat .message-chat__context { display: none }
.case-conversation-evidence .message-chat__heading, .case-conversation-evidence .message-chat__context { display: none }
.conversation-thread-chat .message-chat__list { max-height: 58dvh }

/* ------------------------------------------------------------- settings --- */

.settings-nav { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 20px; padding: 0; border-bottom: 1px solid var(--rule-strong) }
.settings-nav a { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 16px; text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: 13px; font-weight: 600; color: var(--muted) }
.settings-nav a[aria-current=page] { background: var(--ink); border-color: var(--ink); color: var(--canvas) }
.settings-nav a:hover:not([aria-current=page]) { background: var(--soft); color: var(--ink) }
.settings-form, .telegram-credentials { max-width: 660px; display: grid; gap: 16px }
.knowledge-reference-list { display: grid; gap: 16px; max-width: 860px; min-width: 0 }
.knowledge-reference { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 16px; min-width: 0; overflow-wrap: anywhere }
.knowledge-reference h3 { margin: 0 0 10px; }
.knowledge-reference-content { max-height: min(42dvh, 420px); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; border: 1px solid var(--rule); margin-top: 10px }
.knowledge-reference > button { width: fit-content; max-width: 100%; min-height: 44px; }
.knowledge-status[role=alert] { color: var(--danger, #a33); }
.settings-form .actions { display: flex; gap: 10px; flex-wrap: wrap }
.preferences { display: none !important }
.login-layout > .preferences { display: flex !important }
.snapshot-form { margin-bottom: 24px }
.report-generation-form { display: flex; flex-direction: column; align-items: stretch; padding-bottom: 20px; border-bottom: 1px solid var(--rule) }
.report-generation-form .report-generation-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; width: 100%; align-items: end }
.report-generation-controls > label { min-width: 0; overflow-wrap: anywhere }
.report-generation-form > button { align-self: flex-start; margin-top: 12px }
.report-generation-form fieldset { min-width: 0; max-width: 100% }
.report-generation-form fieldset label { overflow-wrap: anywhere }

.housekeeping-progress { padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); margin-block: 12px; max-width: 680px; box-sizing: border-box }
.housekeeping-progress[hidden] { display: none }
.housekeeping-progress h4 { margin: 0 0 10px }
.housekeeping-progress p { margin: 8px 0; overflow-wrap: anywhere }
.housekeeping-progress progress { display: block; width: 100%; height: 10px; accent-color: var(--green) }
.housekeeping-progress progress[hidden] { display: none }
.housekeeping-poll-status { color: var(--muted); font-size: 12px }

/* ------------------------------------------------------------- support ---- */
/* Docked, not drifting: main reserves a strip so the trigger never sits on the
   last row of content, and the lanes reserve their own. */
.ai-support-trigger {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  background: var(--ink);
  color: var(--canvas);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 2px 3px 0 var(--rule-strong), 4px 6px 20px rgb(36 31 26 / .22);
  padding: 8px 16px;
  min-height: 44px;
  margin: 0;
  font-size: 12px;
}
.ai-support-trigger:hover { background: var(--green); border-color: var(--green); color: var(--on-accent) }
#ai-support-dialog { width: min(680px, calc(100vw - 32px)); max-height: 90dvh }
#ai-support-dialog label, #ai-support-dialog textarea { display: block; width: 100%; box-sizing: border-box }
#ai-support-dialog textarea { min-height: 72px }
#ai-support-dialog [data-support-output] { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 42dvh; overflow: auto; margin-block: 14px }
.support-turn { padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); margin-block: 8px }
.support-turn-user { margin-left: 12%; background: var(--stock-office) }
.support-turn-assistant { margin-right: 5%; background: var(--surface) }
#ai-support-dialog form button { width: auto; min-height: 44px; margin: 8px 8px 0 0 }

/* ----------------------------------------------------------------- tags --- */

.tag-panel { max-height: 152px; max-width: 100%; width: 100%; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: 7px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); align-content: start }
.customer-list .tag-panel { min-width: 180px; max-width: 320px }
.profile-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 }
.profile-tag { background: var(--surface); font-size: 12px; line-height: 1.5; padding: 4px 9px; border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--ink); overflow-wrap: anywhere }
.profile-tags-form { margin-bottom: 20px }
.profile-tags-form .tag-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; max-height: 240px; min-width: 0 }
.tag-editor-chips { display: contents }
.profile-tags-form .tag-editor label { flex: 1 1 180px; min-width: 0; font-size: 12px }
.profile-tags-form .tag-editor input { width: 100%; min-width: 0; font-size: 16px }
.tag-editor-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 13px; padding: 3px 4px 3px 10px; border-radius: var(--radius-sm) }
.tag-editor-chip > span { overflow-wrap: anywhere; min-width: 0 }
.profile-tags-form .tag-remove { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; min-height: 32px; padding: 6px; border: 0; background: transparent; color: inherit }
.tag-remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2 }
.tag-remove:hover { opacity: .75 }
.tag-remove:focus-visible { outline: 2px solid currentColor; outline-offset: 1px }
.profile-tags-form .tag-suggestions { display: flex; flex-wrap: wrap; gap: 7px; max-height: 152px }
.tag-suggestions[hidden] { display: none }
.profile-tags-form .tag-suggestions button { background: transparent; white-space: normal; overflow-wrap: anywhere; max-width: 100% }
.profile-tags-form > [role=status]:empty { display: none }
.tag-color-0 { color: #234a86; background: #e3ebf7 }
.tag-color-1 { color: #5b3a86; background: #ece4f7 }
.tag-color-2 { color: #35602c; background: #e4eed6 }
.tag-color-3 { color: #7a5a12; background: #f7ecc4 }
.tag-color-4 { color: #8f2a1a; background: #f8e3de }
[data-theme=dark] .tag-color-0 { color: #b9cfe8; background: #23303f }
[data-theme=dark] .tag-color-1 { color: #c9b2ef; background: #2f2740 }
[data-theme=dark] .tag-color-2 { color: #bcd4a0; background: #263320 }
[data-theme=dark] .tag-color-3 { color: #e9cd86; background: #3a3320 }
[data-theme=dark] .tag-color-4 { color: #f2a89c; background: #3a2723 }

/* ---------------------------------------------------------------- misc ---- */

.inventory-scroll { max-width: 100%; overflow: auto; margin: 20px 0; border: 1px solid var(--rule); border-radius: var(--radius-sm) }
.destructive-inventory { width: 100%; min-width: 280px; border-collapse: collapse }
.destructive-inventory caption { text-align: left; padding: 11px 14px; font-weight: 650; color: var(--ink); background: var(--soft) }
.destructive-inventory th, .destructive-inventory td { padding: 9px 14px; border-bottom: 1px solid var(--rule); text-align: left; overflow-wrap: anywhere }
.destructive-inventory th[scope=row] { font-weight: 500 }
.destructive-inventory td, .destructive-inventory th:last-child { text-align: right; font-variant-numeric: tabular-nums }
.destructive-inventory tbody tr:last-child > * { border-bottom: 0 }

.episode-form { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 }
.episode-form > div { width: 100% }
.episode-form input[type=checkbox], .snapshot-form input[type=checkbox] { width: 20px; min-height: 20px; height: 20px; margin: 6px; vertical-align: middle }
.episode-form label:has(input[type=checkbox]), .snapshot-form label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: transparent; padding: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--ink) }
.episode-form label { overflow-wrap: anywhere }
.text-button { background: transparent; border-color: transparent; color: var(--link); padding: 4px 8px; min-height: 0 }
.evidence-links { display: flex; flex-wrap: wrap; gap: 4px }
.evidence-dialog .episode-summary { min-width: 0; overflow: hidden }
.evidence-dialog .episode-summary table { width: 100%; max-width: 100%; table-layout: fixed; display: table }
.evidence-dialog .episode-summary :is(th, td) { padding: 8px; white-space: normal; overflow-wrap: anywhere; vertical-align: top; line-height: 1.5 }
.evidence-dialog .episode-summary tr > :nth-child(3) { padding: 4px }
.evidence-dialog .episode-summary .evidence-links .text-button { min-height: 28px; min-width: 28px; padding: 2px 4px; font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums }

.table-wrap { max-width: 100%; overflow: auto }
table { font-size: 12px }
th { font-size: 12px; letter-spacing: .09em; text-transform: uppercase }
td, th { padding: 9px 12px }
td { overflow-wrap: anywhere }
td .inline-link { margin-right: 8px }
body:has(.evidence-dialog[open]) { overflow: hidden }
.error { overflow-wrap: anywhere }
form [role=alert] { flex-basis: 100% }

#content input:is([type=checkbox], [type=radio]), dialog input:is([type=checkbox], [type=radio]) { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; padding: 0; margin: 0 }
#content label:has(> input:is([type=checkbox], [type=radio])), dialog label:has(> input:is([type=checkbox], [type=radio])) { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; border: 0; background: transparent; padding: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--ink) }

:root[data-density=compact] .case-card { padding: 8px 10px; gap: 5px }
:root[data-density=compact] td, :root[data-density=compact] th { padding: 6px 10px }
:root[data-density=compact] main { padding-top: 16px }
:root[data-density=compact] .case-list .case-list-row { padding: 6px 10px }

@keyframes evidence-in { from { transform: translateY(6px) } to { transform: translateY(0) } }

/* ------------------------------------------------------------ responsive -- */

@media(max-width:1250px) {
  .case-board { grid-template-columns: repeat(4, minmax(250px, 1fr)) }
  .workspace { grid-template-columns: 186px minmax(0, 1fr) }
}
@media(max-width:1100px) {
  .case-list .case-list-row, .conversation-thread-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px }
  .case-list-head, .conversation-list-head { display: none }
  .case-list-state, .conversation-thread-activity { grid-column: 2; grid-row: 1 }
  .case-list-open { text-align: right }
  .conversation-thread-agent { grid-column: 2 }
}
@media(max-width:800px) {
  .workspace { display: block }
  .sidebar { position: relative; width: 100%; padding: 12px 16px }
  .sidebar .brand { margin: 0; font-size: 20px }
  .sidebar nav { display: none }
  .sidebar.nav-open nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px }
  .sidebar #nav-toggle { display: flex; color: var(--sidebar-ink); border-color: var(--sidebar-control-border); background: var(--sidebar-control-bg) }
  .sidebar-note, .account { display: none }
  .sidebar.nav-open .account { display: grid }
  .topbar { min-height: 50px; padding: 8px 16px; gap: 12px; flex-wrap: wrap }
  .topbar > span:first-child { display: none }
  main { padding: 18px 16px 84px }
  .filter-extra { grid-template-columns: 1fr 1fr }
  .evidence-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 16px }
  .evidence-dialog .dialog-heading { top: -16px }
  .evidence-grid, .case-detail-primary { grid-template-columns: 1fr }
  .evidence-grid > section + section, .case-detail-primary > .workspace-section + section { border-left: 0; border-top: 1px dashed var(--rule); padding: 0 }
  .evidence-dialog h2 { font-size: 18px }
  .analytics-columns { grid-template-columns: 1fr }
  .connection-list .connection-card { grid-template-columns: minmax(0, 1fr) }
  .connection-card .actions { grid-column: auto }
}
@media(max-width:480px) {
  /* The docket stays a spindle you swipe, never four stacked boxes. */
  .case-board { grid-template-columns: repeat(4, minmax(min(272px, 84vw), 1fr)) }
  .case-lane { padding-left: 10px; padding-right: 10px }
  .case-lane > h3 { font-size: 12px }
  .case-card { padding: 12px }
  .workspace-filters { gap: 6px }
  .workspace-filters > label { flex-basis: 100% }
  .case-summary { gap: 8px 14px }
  .page-heading h1 { font-size: 22px }
  .tab-strip button { flex: 1 1 45%; font-size: 12px }
  .filter-extra { grid-template-columns: 1fr }
  .connection-card dl { grid-template-columns: 1fr 1fr }
  .case-list .case-list-row, .conversation-thread-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 2px }
  .case-list-state { grid-column: auto; grid-row: auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 8px }
  .case-list-open { text-align: left }
  .conversation-thread-agent, .conversation-thread-activity { grid-column: auto }
  .conversation-thread-activity { flex-direction: row; justify-content: space-between; gap: 8px }
  .conversation-thread-identity { grid-template-columns: minmax(0, 1fr) }
  .conversation-thread-identity > * { grid-column: 1 !important }
  .conversation-thread-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px) }
  .page-filter-searches { flex-direction: column; gap: 8px }
  .page-filter-searches > label, .page-filter-searches > input { flex-basis: auto }
  .page-filters > .filter-extra { grid-template-columns: 1fr }
  .chart-list .chart-button { grid-template-columns: minmax(0, 1fr) }
  .chart-value { text-align: left; margin-left: 0 }
}
@media(max-width:800px) {
  .case-detail-primary { grid-template-columns: minmax(0, 1fr) }
  .case-detail-primary > .workspace-section + section { border-left: 0; border-top: 1px dashed var(--rule); padding-left: 0 }
}
/* Sales funnel drill, stage and returning labels */
.sales-stage-badge{display:inline-flex;align-items:center;gap:5px;width:fit-content;font-size:12px;font-weight:650;line-height:1.3;padding:2px 8px;border:1px solid var(--stage-color);border-radius:var(--radius-sm);color:var(--ink);background:var(--stage-surface,var(--surface))}
.sales-stage-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--stage-color);flex:none}
.returning-badge{display:inline-flex;align-items:center;width:fit-content;font-size:12px;font-weight:650;line-height:1.3;padding:2px 8px;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--state-info-ink);background:var(--state-info-bg)}
.customer-name-cell,.conversation-thread-marks,.customer-objective-marks{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sales-stage-cell{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.sales-stage-others{font-size:12px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.customer-objective-marks{margin:4px 0 8px}
.customer-objective--target{border-color:var(--green);background:color-mix(in srgb,var(--green) 6%,var(--surface))}
.customer-objective:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.funnel-drill-back{position:sticky;top:0;z-index:2;display:inline-flex;align-items:center;min-height:44px;background:var(--surface);padding-inline:4px}
.funnel-drill-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.funnel-drill-chips>button{min-height:44px}.funnel-drill-chips .active-filter-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding-left:10px;border:1px solid var(--control-line);border-radius:var(--radius-sm);background:var(--canvas);color:var(--ink);overflow-wrap:anywhere}.funnel-drill-chips .active-filter-chip button{min-width:44px;min-height:44px;padding:4px;border:0;background:transparent;color:var(--ink)}
.funnel-drill-summary{font-weight:600;color:var(--ink);margin:4px 0 12px}
.funnel-drill-head,.funnel-drill-row{font-variant-numeric:tabular-nums;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:center}
.funnel-drill-head{font-size:.8rem;color:var(--muted);padding:0 12px 6px;border-bottom:1px solid var(--line)}
.funnel-drill-row{padding:10px 12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.funnel-drill-customer{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.funnel-drill-actions{display:flex;flex-wrap:wrap;gap:4px 12px}
.funnel-drill-actions a{display:inline-flex;align-items:center;min-height:44px}
.funnel-drill-empty{padding:16px 12px}
/* Lead-source drill: customer, Agent, last activity, actions. */
/* Header and rows are separate grids: a fixed actions track keeps their columns aligned. */
@media(min-width:801px){.lead-drill-head,.lead-drill-row{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 13rem}.lead-drill-row .funnel-drill-actions{justify-content:flex-end}}
@media(max-width:800px){.lead-drill-row .funnel-drill-agent,.lead-drill-row .funnel-drill-activity{grid-column:auto}}
@media(max-width:800px){.funnel-drill-head{display:none}.funnel-drill-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;background:var(--surface)}.funnel-drill-customer,.funnel-drill-need,.funnel-drill-actions{grid-column:1/-1}}
/* Lead source badge: entry/origin label on drill, Customers, Conversations and profile rows */
.lead-source-badge{display:inline-flex;align-items:center;gap:5px;width:fit-content;font-size:12px;font-weight:650;line-height:1.3;padding:2px 8px;border:1px solid var(--control-line);border-radius:var(--radius-sm);color:var(--ink);background:var(--surface);overflow-wrap:anywhere}.lead-source-badge[data-lead-known="false"]{border-style:dashed;color:var(--muted);background:transparent}.lead-source-facts .evidence-links{display:flex;flex-wrap:wrap;gap:4px 10px}.lead-source-facts .evidence-links a{display:inline-flex;align-items:center;min-height:44px}