/* public/css/houji-shell.css — the Houji dashboard shell, shared by two hosts.
 *
 * MEMBER_DASHBOARD (C1). Every rule below was EXTRACTED VERBATIM from the inline <style>
 * of public/dashboard.html — not rewritten, not tidied, not "improved" on the way out.
 * That is deliberate: the arc's promise is that the dashboard does not change by a pixel,
 * and a rule that was edited in transit is a rule whose behaviour has to be re-argued.
 * The pin is a MEASUREMENT, not a reading: test/member-dashboard/dashboard-parity.test.js
 * drives the real page in chromium and requires getComputedStyle over ~55 properties on
 * 67 elements at two viewports to be byte-equal to a baseline captured before this file
 * existed (test/member-dashboard/fixtures/dashboard-shell-baseline.json).
 *
 * ORDER. Moving a rule out of an inline block and into a linked sheet changes where it
 * sits in the cascade. These rules keep their original relative order among themselves,
 * and dashboard.html links this file IMMEDIATELY BEFORE the <style> that holds everything
 * that stayed — so every moved rule still precedes every rule that followed it, which
 * makes the extraction order-preserving BY CONSTRUCTION rather than by argument.
 *
 * Measured, so the claim is not a guess: linking this file AFTER that <style> instead
 * changes nothing (0 differing properties) — the moved set and the retained set do not
 * collide today. The placement is therefore insurance, not a live fix, and it stops
 * being merely that the moment someone adds a rule here that a host also declares. Put
 * host-specific rules in the host.
 *
 * WHAT LIVES HERE: the app shell (sidebar, topbar, content), buttons, tables and the call
 * log's column geometry, badges, the filter bar, pagination, message cards, tabs, and the
 * mobile drawer. WHAT DOES NOT: anything only one host renders — the Config Hub, the
 * prompt-history cards, the transcript panel, the setup checklist, the feedback modal.
 * Those stay inline in public/dashboard.html.
 *
 * MEMBER_CARD_PARITY (§2.6) added the tooltip + help-popover group at the foot of this
 * file. It was "help popovers stay inline" until the member page started rendering the
 * same card the dashboard does — and the same "?" with it. Same rule as the rest: moved
 * verbatim, in order, and measured.
 *
 * NOT LINKED BY public/translation-dashboard.html — the interpreter host keeps its own
 * copy of these rules and is out of this arc's scope (MEMBER_DASHBOARD §8). Unifying it
 * is a later pass, and it needs its own measured baseline.
 */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1a2e4a;--navy-mid:#243d60;--navy-light:#2e4f7a;
  --bg:#f4f3f0;--surface:#ffffff;--surface2:#f9f8f6;--surface3:#f2f1ee;
  --border:#e4e2dc;--border2:#d0cec7;
  --text:#181714;--text2:#4a4840;--text3:#8a8880;--text4:#b0aea8;
  --blue:#1a4a8a;--blue-bg:#edf2fb;--blue-border:#bdd0ef;
  --green:#1a5c38;--green-bg:#eaf4ee;--green-border:#a8d8bc;
  --amber:#7a4a10;--amber-bg:#fdf4e8;--amber-border:#e8c898;
  --red:#8a1a1a;--red-bg:#faeaea;--red-border:#e8b8b8;
  --teal:#0f5a5a;--teal-bg:#e8f4f4;--teal-border:#a0d0d0;
  --radius:6px;--radius-lg:10px;--radius-xl:14px;
  --sidebar:220px;--header:56px;
  --content-max:1400px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:13px;cursor:pointer;border:none;background:none}

/* ── Layout ──────────────────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ──────────────────────────────────────────── */
.sidebar{width:var(--sidebar);background:var(--navy);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sidebar-brand{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4a9eff;margin-right:7px}
.brand-name{color:#fff;font-size:15px;font-weight:500;letter-spacing:-.2px}
.brand-sub{font-size:11px;color:rgba(255,255,255,.38);margin-top:2px;padding-left:15px}

.nav{padding:10px 0;flex:1}
.nav-section{padding:14px 16px 6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.28);font-weight:500}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 16px;color:rgba(255,255,255,.62);font-size:13px;transition:all .12s;cursor:pointer;border-radius:0;position:relative}
.nav-item:hover{color:rgba(255,255,255,.88);background:rgba(255,255,255,.05)}
.nav-item.active{color:#fff;background:rgba(255,255,255,.1)}
.nav-item.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;background:#4a9eff;border-radius:0 2px 2px 0}
.nav-icon{font-size:14px;width:16px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;background:#dc4444;color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center}
/* Suggestions nav count chip + subtle pulse (SUGGESTIONS_UI_POLISH) */
.nav-count-badge{position:absolute;right:12px;top:50%;transform:translateY(-50%);min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;background:#4a9eff;color:#fff}
@keyframes sugPulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(74,158,255,0)}50%{box-shadow:inset 0 0 0 1px rgba(74,158,255,.22)}}
@keyframes sugPulseStrong{0%,100%{box-shadow:inset 0 0 0 0 rgba(74,158,255,0)}50%{box-shadow:inset 0 0 0 2px rgba(74,158,255,.34)}}
.nav-item.sug-pulse{animation:sugPulse 2s ease-in-out infinite}
.nav-item.sug-pulse-strong{animation:sugPulseStrong 1.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.nav-item.sug-pulse,.nav-item.sug-pulse-strong{animation:none}}
.nav-divider{margin:6px 16px;border:none;border-top:1px solid rgba(255,255,255,.08)}

.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}
.firm-pill{display:flex;align-items:center;gap:8px}
/* CALLER_CONFIRMATIONS_CLEANUP Part B — min-width:0 is the load-bearing declaration.
   A flex item defaults to min-width:auto, so the text wrapper took its INTRINSIC width
   from a long firm name and grew past the sidebar, where the main panel painted over it.
   The old ellipsis on .firm-name could never fire, because the element was always as wide
   as its own text. With min-width:0 the wrapper is finally allowed to be narrower than its
   content, so the name wraps; the clamp caps it at two lines and the footer grows upward
   on its own (the sidebar is a flex column). Third+ lines clip — the title attribute set
   by the hydrator carries the full name. Kept byte-parallel with translation-dashboard.html. */
.firm-pill-text{min-width:0;flex:1 1 auto}
.firm-avatar{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.firm-name{color:rgba(255,255,255,.75);font-size:12px;font-weight:500;line-height:1.3;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.firm-plan{font-size:10px;color:rgba(255,255,255,.35)}

/* ── Main ─────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

.topbar{height:var(--header);border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;padding:0 24px;gap:16px;flex-shrink:0}
.topbar-title{font-size:15px;font-weight:500;color:var(--text)}
.topbar-sub{font-size:12px;color:var(--text3);margin-left:4px}
.topbar-actions{margin-left:auto;display:flex;gap:8px;align-items:center}

.content{flex:1;overflow-y:auto;padding:24px}
/* DASH_LAYOUT_POLISH D1 — one shared content ceiling for every tab (replaces the
   per-section 720px/900px caps); only bites on very wide monitors. */
.content>section{max-width:var(--content-max)}

/* ── Buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius);font-size:13px;font-weight:500;transition:all .12s;border:1px solid transparent}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-mid)}
.btn-secondary{background:var(--surface);color:var(--text2);border-color:var(--border2)}
.btn-secondary:hover{border-color:var(--border2);background:var(--surface3)}
.btn-ghost{background:transparent;color:var(--text3);border-color:transparent}
.btn-ghost:hover{background:var(--surface3);color:var(--text2)}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.btn-danger:hover{background:#f5d5d5}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-icon{padding:6px;border-radius:var(--radius);color:var(--text3);border:1px solid transparent}
.btn-icon:hover{background:var(--surface3);border-color:var(--border)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ── Table ────────────────────────────────────────────── */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
table{width:100%;border-collapse:collapse}
thead th{padding:10px 16px;text-align:left;font-size:11px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;background:var(--surface3);border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--surface2)}
tbody td{padding:11px 16px;color:var(--text2);font-size:13px}
tbody td.primary{color:var(--text);font-weight:500}
.table-empty{padding:40px;text-align:center;color:var(--text4);font-size:13px}

/* ── Badges / tags ────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:500}
.badge-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border)}
.badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.badge-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.badge-teal{background:var(--teal-bg);color:var(--teal);border:1px solid var(--teal-border)}
.badge-gray{background:var(--surface3);color:var(--text3);border:1px solid var(--border)}

/* ── Search / filter bar ──────────────────────────────── */
.filter-bar{display:flex;gap:8px;margin-bottom:14px;align-items:center}
.search-wrap{position:relative;flex:1;max-width:280px}
.search-wrap input{width:100%;padding:7px 12px 7px 32px;border:1px solid var(--border2);border-radius:var(--radius);font-size:13px;background:var(--surface);color:var(--text);outline:none;font-family:inherit}
.search-wrap input:focus{border-color:var(--blue)}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text4);font-size:13px}
.filter-select{padding:7px 10px;border:1px solid var(--border2);border-radius:var(--radius);font-size:13px;background:var(--surface);color:var(--text2);outline:none;font-family:inherit}
.filter-select:focus{border-color:var(--blue)}

/* ── Pagination ───────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border);justify-content:flex-end}
.page-info{font-size:12px;color:var(--text3);margin-right:auto}

/* ── Message card ─────────────────────────────────────── */
.message-list{display:flex;flex-direction:column;gap:8px}
.message-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;transition:border-color .12s}
.message-card:hover{border-color:var(--border2)}
.message-card.unread{border-left:3px solid var(--blue)}
.message-card.follow_up{border-left:3px solid var(--amber)}
.msg-avatar{width:36px;height:36px;border-radius:50%;background:var(--surface3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--text3);flex-shrink:0}
.msg-body{flex:1;min-width:0}
.msg-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.msg-name{font-weight:500;color:var(--text);font-size:13px}
.msg-phone{font-size:12px;color:var(--text3)}
.phone-link{color:var(--gold,#c4a45c);text-decoration:none;font-size:12px;cursor:pointer}
.phone-link:hover{text-decoration:underline}
.msg-time{font-size:11px;color:var(--text4);margin-left:auto;white-space:nowrap}
.msg-text{font-size:13px;color:var(--text2);line-height:1.55;margin-bottom:8px}
.msg-actions{display:flex;gap:6px}

/* ── Tabs ──────────────────────────────────────────────── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:18px}
.tab{padding:9px 16px;font-size:13px;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .12s}
.tab:hover{color:var(--text2)}
.tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:500}
.tab-count{font-size:11px;background:var(--surface3);color:var(--text4);padding:1px 6px;border-radius:10px;margin-left:5px}
.tab.active .tab-count{background:var(--blue-bg);color:var(--blue)}

.nav-account {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.nav-firm-name {
  font-size: 12px;
  color: var(--text3, #9b9890);
}
.btn-logout {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border, #e4e2dc);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text2, #4a4840);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.btn-logout:hover {
  background: var(--cream, #f4f3f0);
  border-color: var(--navy, #1a2e4a);
  color: var(--navy, #1a2e4a);
}

/* ── Misc ──────────────────────────────────────────────── */
.divider{height:1px;background:var(--border);margin:16px 0}
.notice{padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:16px;border:1px solid}
.notice-amber{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber)}
.notice-blue{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue)}
.hidden{display:none!important}

/* FIX-17: call log overflow safety net */
.call-log-container { overflow-x: auto; }

/* CALL_LOG_SUMMARY_COLUMN (Tim, 2026-09-15) — deterministic column layout, and WHICH column
   is the flexible one. Tim, reading his own Call Log: "The 'Caller' column in 'Call Logs' in
   the dashboard is way too wide, and the 'View' on the right hand side is way too narrow, and
   then has to open up something underneath it … all the room should go to the 'View' column on
   the right. But yes, it should be renamed 'summary'."

   So on the DESKTOP tier the four narrow columns AND Caller carry fixed widths, and Summary is
   the one with none: table-layout:fixed hands the widthless column the remainder, so the thing
   that grows with the monitor is the summary text. Below that tier the rule INVERTS — Summary
   is the 64px View button again and Caller is the flexible one — which is the layout a phone
   has always had.

   THE DESKTOP TIER IS THE ADDITIVE ONE (min-width), not the phone tier. Written the other way
   round, restoring the phone's ▶ costs an explicit `display` that is not the one .btn (:116)
   gives it — inline-block where the button is inline-flex — so "the phone stays exactly as it
   is" would have been false by a measurable property. Everything below 1101px is therefore the
   UNTOUCHED default, and 1101 is complementary to the existing max-width:1100 rule below: no
   viewport matches both, none matches neither.

   DASH_LAYOUT_POLISH D3's disposition ("fill the container") is true again: the table fills the
   tab's full width and wide-monitor bounding lives uniformly in --content-max (:71). */
.call-log-table { table-layout: fixed; }
/* DASH_LAYOUT_POLISH D3 — call-log density. SCOPED overrides only; the global
   thead th/tbody td padding (:103/:107) stays untouched for every other table. */
.call-log-table thead th { padding: 7px 12px; }
.call-log-table tbody td { padding: 7px 12px; }
.col-time     { width: 170px; }
.col-duration { width: 110px; }
.col-badges   { width: 150px; }
.col-summary  { width: 64px; text-align: center; }
/* A fixed-layout cell cannot be widened by its content, so an unbroken string (a long email,
   a pasted URL) would otherwise paint straight through its neighbour. */
.call-log-table td.primary { overflow-wrap: anywhere; }
/* The caller's name is a door to the same card the ✎ opens; the shell's own `a` rule is
   colour:inherit, so the link has to say it is one. */
.call-log-table .cl-name, .msg-header .cl-name { color: var(--blue); cursor: pointer; }
.call-log-table .cl-name:hover, .msg-header .cl-name:hover { text-decoration: underline; }
/* The last cell carries BOTH the summary block and the ▶, and CSS picks which is on screen.
   No JS reads the viewport: a width read at render time is right once and wrong after a
   resize. .cl-desk/.cl-mob are the two halves of the header's own word. */
.call-log-table .cl-summary, .call-log-table .cl-desk { display: none; }
@media (min-width: 1101px) {
  .col-caller  { width: 240px; }
  .col-summary { width: auto; text-align: left; }
  .call-log-table .cl-summary { display: block; }
  .call-log-table .cl-desk    { display: inline; }
  .call-log-table .cl-mob,
  .call-log-table .call-expand-btn { display: none; }
}

/* FIX-17: responsive column hiding */
@media (max-width: 1100px) {
  .call-log-table .col-time { display: none; }
}
@media (max-width: 900px) {
  .call-log-table .col-duration { display: none; }
}

/* ── MOBILE_DASH — off-canvas nav drawer below 768px (visual D1) ─────────
   The 220px sidebar is flex-shrink:0, so at 390px it ate 56% of the viewport and
   every dashboard surface (including the whole Config Hub, which renders inside
   this same shell) was unusable. Below 768px the sidebar leaves the flow and
   slides in over a scrim; content gets the full width.

   THE FENCE IS THE INVARIANT: everything here is either inert at ≥769px (the
   hamburger is display:none, the scrim is pointer-events:none at opacity 0) or
   lives inside the max-width:768px query. Desktop rendering is unchanged. */
#nav-hamburger{display:none;width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);color:var(--text);font-size:15px;line-height:1;cursor:pointer;flex-shrink:0}
#nav-hamburger:hover{background:var(--bg)}
/* Mirrors .panel-overlay (:177) — opacity + pointer-events, never display, so the
   transition can actually run. */
#nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .22s}

@media (max-width:768px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:70;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:2px 0 12px rgba(0,0,0,.25)}
  .sidebar.open{transform:translateX(0)}
  body.drawer-open #nav-scrim{opacity:1;pointer-events:auto}
  body.drawer-open .content{overflow:hidden}          /* touch-scroll lock behind the drawer */
  #nav-hamburger{display:flex;align-items:center;justify-content:center}
  /* The topbar can't hold these plus title + help + account at 390px — and both
     are literal duplicates of nav items now reachable in the drawer. */
  .topbar-shortcut{display:none}
}

@media (prefers-reduced-motion: reduce){.sidebar,#nav-scrim{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════════════
 * Tooltips + the help "?" and its popover — MEMBER_CARD_PARITY (§2.6).
 *
 * Extracted VERBATIM and in order from public/dashboard.html's inline <style>, where
 * they had been since UX_CLARITY Phase 1. They live here because the shared member-card
 * definition (public/js/member-card-form.js) emits both kinds of icon — help-pop, driven
 * by help-content.js, and one bare data-tooltip on "Urgent oversight" — and the member
 * page renders that markup too. Before this move it had a rule for neither, so both would
 * have drawn a bare unstyled "?" that did nothing: worse than absent, because it teaches
 * a reader the "?" is not worth clicking (the D6 amendment).
 *
 * [data-tooltip] moves WITH them, and it is not optional: .help-icon has no cursor of its
 * own, and the "?" reads as inert without cursor:help. Measured — __pt-help-icon
 * answers cursor:help, from exactly this group.
 * ══════════════════════════════════════════════════════════════════════════════════ */

/* ── Tooltips ─────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 7px 11px;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
[data-tooltip]:hover::after {
  opacity: 1;
}
[data-tooltip].tooltip-below::after {
  bottom: auto;
  top: calc(100% + 8px);
}
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--surface3);
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
  z-index: 50;
}
/* ── Help popover (UX_CLARITY Phase 1 — click/tap-toggle, same visual language) ── */
.help-pop { cursor: pointer; }
.help-popover {
  position: absolute;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 6px;
  max-width: 300px;
  text-align: left;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.help-popover-title { font-weight: 700; margin-bottom: 4px; }
/* Pair a help icon's visibility to its preceding toggled control, so a "?" next to a
   display:none button (Change plan, Reactivate) hides with it. Covers both inline
   serializations ("display:none" from HTML, "display: none" from el.style.display). */
.btn[style*="display:none"] + .help-pop,
.btn[style*="display: none"] + .help-pop { display: none !important; }

/* ── CONFLICT_INTAKE §5.7 — the Conflicts screen, one definition for both hosts ────────
   Every selector is prefixed `cui-`. Both hosts keep every section mounted and bind with
   document-wide selectors, so an unprefixed `.tab` here would have its `active` stripped by
   the Inbox's own tab handler; `.conflict-*` is already taken by the Config Hub's
   practice-area card. */
.cui-root { max-width: 900px; }
.cui-h2 { margin: 0 0 2px; font-size: 18px; }
.cui-h3 { margin: 0 0 8px; font-size: 16px; }
.cui-sub { margin: 0 0 14px; color: var(--text3); font-size: 13px; line-height: 1.5; }
.cui-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cui-check { background: var(--surface3); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.cui-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.cui-label-sm { display: block; font-size: 12px; color: var(--text2); margin: 8px 0 4px; }
.cui-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.cui-row-end { justify-content: flex-end; margin-top: 12px; }
.cui-col { flex: 1 1 140px; }
.cui-input { flex: 1 1 240px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; background: var(--surface); color: var(--text); }
.cui-input-sm { padding: 6px 8px; font-size: 13px; width: 100%; }
.cui-result { margin-top: 12px; }
.cui-clean { font-size: 14px; font-weight: 600; }
.cui-fine { font-size: 12px; color: var(--text3); line-height: 1.5; margin-top: 6px; }
.cui-muted { color: var(--text4); font-size: 13px; padding: 12px 0; }
.cui-empty { color: var(--text3); font-size: 13px; padding: 20px 0; line-height: 1.6; }
.cui-hit { border-left: 3px solid var(--amber, #b7791f); padding-left: 12px; }
.cui-hit-certain { border-left-color: var(--red, #c53030); }
.cui-hit-head { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.cui-cand { padding: 8px 0; border-top: 1px solid var(--border); }
.cui-cand-name { font-size: 14px; }
.cui-cand-why, .cui-cand-matter, .cui-cand-facts { font-size: 12px; color: var(--text3); margin-top: 2px; }
.cui-decide { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cui-notice:empty { display: none; }
.cui-notice { font-size: 13px; padding: 8px 0; }
.cui-notice.cui-bad { color: var(--red, #c53030); }
/* CONFLICTS_PAGE_TABS §1 — ONE FIXED FRAME, THREE TABS (Tim, 09-20, having used the stacked
   page: *"rearrange all of these separate sections … in their own separate screens which can
   be accessed by tabs at the top of the Conflicts page."*). The header and its two panels sit
   above the strip and never move; only the panel under it swaps. A tab IS the collapse, so
   nothing on this page carries one of its own. */
.cui-head-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  flex-shrink: 0; }
.cui-tabs { display: flex; gap: 2px; align-items: stretch; margin: 4px 0 0;
  border-bottom: 1px solid var(--border); overflow-x: auto; }
.cui-tab { background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 500; color: var(--text3);
  cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.cui-tab:hover { color: var(--text); }
.cui-tab-on { color: var(--navy, #1a2e4a); border-bottom-color: var(--navy, #1a2e4a); }
.cui-tab:focus-visible { outline: 2px solid var(--navy, #1a2e4a); outline-offset: -2px; }
/* The pill a tab carries. Grey says how many are there; red says how many are WAITING — and
   §1.3 gives neither one a zero to render, so an empty pill is hidden rather than padded. */
.cui-tab-count { font-size: 12px; font-weight: 600; line-height: 1; padding: 3px 7px;
  border-radius: 999px; background: var(--surface3); color: var(--text2); }
.cui-tab-count-alert { background: var(--red, #c53030); color: #fff; }
.cui-panel { padding-top: 4px; }
/* One toolbar row per panel — the filter, the sort, and (firm host only) the download at the
   far end. It replaces the heading-row tools the collapsed sections needed. */
.cui-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 10px 0 12px; }
.cui-toolbar .cui-input-sm { width: auto; flex: 0 1 200px; }
.cui-toolbar-end { margin-left: auto; }
.cui-section { border-top: 1px solid var(--border); padding: 16px 0 4px; }
.cui-section:first-of-type { border-top: none; }
.cui-sec-head { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cui-count { color: var(--text3); font-size: 13px; font-weight: 400; }
.cui-sec-body { display: flex; flex-direction: column; gap: 8px; }
/* §1.4 frame B3 — what *Needs attention* says when nothing does. A dashed card, because it is
   a report rather than a row: nothing is waiting, and here is the scale of the list and when a
   check last ran. */
.cui-nothing { border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 20px 16px; margin-top: 14px; }
.cui-nothing-head { font-size: 15px; font-weight: 600; }
/* A link that is a <button> because it performs an act on this page rather than going
   anywhere — it shows the Check history tab. */
.cui-linkbtn { background: none; border: none; padding: 0; font: inherit; font-size: 12px;
  cursor: pointer; text-decoration: underline; }
.cui-h4 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--text2); }
.cui-link { color: var(--navy, #1a2e4a); }
.cui-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
/* Tim's ruling 3 (09-16): the WHOLE group card opens the matter — "we can't click on any of
   this information to open it up" was said about a card with a link in the corner. */
.cui-card-click { cursor: pointer; }
.cui-card-click:hover { border-color: var(--navy, #1a2e4a); }
.cui-card-click:focus-visible { outline: 2px solid var(--navy, #1a2e4a); outline-offset: 2px; }
.cui-card-flag { border-left: 3px solid var(--amber, #b7791f); }
.cui-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cui-person-pill { font-size: 13px; color: var(--text2); }
.cui-qrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid var(--border); }
.cui-person { border: 1px solid var(--navy, #1a2e4a); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 16px; }
.cui-cand-with { font-size: 12px; color: var(--text2); margin-top: 2px; }
.cui-pill-certain { background: rgba(197,48,48,.1); color: var(--red, #c53030); }
.cui-pill-possible { background: rgba(183,121,31,.12); color: var(--amber, #b7791f); }
/* The intake card's own sections (§5.1): the person, the matter, the other parties. */
.cui-card-sec { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 12px; }
.cui-card-sec:first-of-type { border-top: none; margin-top: 6px; }
.cui-card-actions { border-top: 1px solid var(--border); padding-top: 12px; }
.cui-row-3 { align-items: flex-start; }
.cui-row-3 > .cui-col { flex: 1 1 150px; min-width: 0; }
.cui-col-end { display: flex; align-items: flex-end; justify-content: flex-end; }
.cui-party { border: 1px dashed var(--border); border-radius: var(--radius, 6px);
  padding: 8px 10px; margin-bottom: 8px; }
.cui-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
/* CONFLICTS_FIRST_USE_FIXES A4 — the "Who is this?" header. The title and the number sit on
   the left, the way into Conflicts on the right (Tim, 09-20: "comfortably to the right").
   The sub-line's own 14px bottom margin is what separates the header from the form, so the
   title's margin goes and the gap is kept where it already was. */
.cui-c-head { align-items: baseline; }
.cui-c-head .cui-h3 { margin-top: 0; }
.cui-c-head .cui-sub { margin-bottom: 0; }
.cui-c-head #cui-c-open { flex-shrink: 0; white-space: nowrap; font-size: 13px; }
.cui-card-acts { display: flex; gap: 6px; flex-shrink: 0; }
.cui-name { font-weight: 600; font-size: 14px; }
.cui-matter { font-size: 13px; color: var(--text2); margin-top: 2px; }
.cui-notes { font-size: 12px; color: var(--text2); margin-top: 6px; white-space: pre-wrap; }
.cui-pill { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface3); color: var(--text2); }
.cui-pill-soft { background: transparent; border: 1px dashed var(--border); color: var(--text3); }
.cui-pill-warn { background: rgba(197,48,48,.1); color: var(--red, #c53030); }
.cui-hidden { display: none !important; }
/* CONFLICT_REGISTER C — bringing in a list. The panel is a .cui-card inside the page's own
   last section (CONFLICT_INTAKE §5.7 item 6), and its heading picker is a plain two-column
   grid that collapses to one at phone width (the screen is read on a phone as often as not). */
.cui-row-between { justify-content: space-between; align-items: center; width: 100%; }
/* CONFLICTS_PAGE_TABS §2.2/§2.7 — ONE ROW PER COLUMN IN THE FIRM'S FILE. The firm's heading and
   two of their own values on the left, what we read it as on the right; a two-column grid at
   desktop that stacks at phone width. Tim called the screen this replaces "quite a bit of white
   rectangles" — it was twenty unlabelled selects, which is a labelling problem and not a colour
   one, so the control here is the ordinary .cui-input.cui-input-sm and the words carry it. */
.cui-cols { display: grid; gap: 2px; margin: 10px 0 6px; }
.cui-col-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 6px 16px; align-items: start; padding: 9px 0; border-top: 1px solid var(--border); }
.cui-col-row:first-child { border-top: none; }
.cui-col-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.cui-col-samples { font-size: 12px; color: var(--text3); margin-top: 2px;
  overflow-wrap: anywhere; }
.cui-col-read { display: grid; gap: 6px; }
.cui-col-sub { display: flex; flex-direction: column; gap: 3px; font-size: 12px;
  color: var(--text2); }
/* ⛔ THE BASIS IS A HEIGHT IN HERE. `.cui-input` carries `flex: 1 1 240px` for the horizontal
   rows it was written for; in a column-direction label that 240px lands on the MAIN axis,
   which is now the height — every select rendered about 120px tall, measured. The control
   sizes itself. */
.cui-col-sub .cui-input { flex: 0 0 auto; }
/* The two controls a column reveals when it says it names another person. Dashed, because they
   belong to the row above rather than standing on their own. */
.cui-col-party { border-left: 2px dashed var(--border); padding-left: 10px; display: grid;
  gap: 5px; }
/* One sentence, and only while nothing reads as Role (§2.5). The select sits INSIDE it, so the
   whole thing reads as a sentence rather than as a labelled control. */
.cui-defrole { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.cui-defrole .cui-input-sm { width: auto; flex: 0 1 190px; }
.cui-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 10px 0; }
.cui-table th { text-align: left; font-weight: 600; color: var(--text2);
  border-bottom: 1px solid var(--border); padding: 5px 8px 5px 0; }
.cui-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border2, var(--border));
  vertical-align: top; }
.cui-suggested { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 640px) {
  /* CONFLICTS_PAGE_TABS — all three tabs on one phone screen. The strip scrolls either way
     (`overflow-x: auto`), but a third tab a reader has to discover by swiping is a third tab
     most readers never find. MEASURED at 390px, in the offline render harness: 406px of tabs
     in a 342px strip without this rule (Check history clipped), 342px with it. Narrower than
     390 still scrolls, which is the right way to run out of room. */
  .cui-tab { padding: 8px 6px; font-size: 13px; gap: 5px; }
  .cui-tab-count { padding: 2px 6px; font-size: 11px; }
  /* §2.7 — the heading and what we read it as stack on a phone. (The rules that stood here
     styled the retired field-per-row grid and the two Additional-party slots; `.cui-parties`
     as a CLASS is emitted by nothing — the intake card's own `#cui-parties` is an id.) */
  .cui-col-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* A preview of somebody else's spreadsheet is the one thing here that legitimately
     outgrows a phone; it scrolls in its own box rather than pushing the page sideways. */
  .cui-table { display: block; overflow-x: auto; }
}
.cui-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9998;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.cui-modal { background: var(--surface); border-radius: var(--radius); padding: 18px;
  max-width: 480px; width: 100%; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); }
@media (max-width: 768px) {
  .cui-head { flex-direction: column; }
  .cui-input { flex-basis: 100%; }
}

/* ── The phone tier's own squeeze (CONFLICT_REGISTER §6.6, kept; its table cap RETIRED by
   CALL_LOG_SUMMARY_COLUMN 2026-09-15) ────────────────────────────────────────────────────
   Below 900px the time AND duration columns are hidden, so the caller competes only with the
   badges and the 64px View button — measured at 128px against the badge column's 150px, which
   is the one column a phone reader actually needs coming second to a pair of pills. That is
   still true and this rule still does that job. What went with it was the whole-table cap the
   same arc added: capping the TABLE shrank the log instead of the column and left a 232px band
   of unused space at 1440 (measured: a 940px table in a 1172px section), which is the thing
   Tim then complained about. The remainder is governed by a width on Caller now, not by a
   ceiling on the table. */
@media (max-width: 900px) {
  .call-log-table .col-badges { width: 104px; }
}