*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── RESKIN (Build 2): navy + bronze editorial design language. Token NAMES
        kept (1,615 refs) — only VALUES repointed, mapped by ROLE. ── */
  /* Navy ink family (was the navy/green tokens): accent = primary ink,
     green-mid/green-dark = progressively deeper for dark sections. */
  --green-dark:    #0E1828;   /* deepest navy (dark-section gradient end) */
  --green-mid:     #16243C;   /* navy (dark-section gradient start) */
  --green-sage:    #9DAAC0;   /* muted blue-gray (supporting/quiet accent) */
  --accent:        #18283F;   /* PRIMARY navy ink */
  --forest:        #18283F;   /* = accent (CTAs/buttons; was a navy synonym) */
  /* Light surfaces (was the egg-* warm neutrals). */
  --egg-bg:        #FAF9F6;   /* warm off-white page ground (living-canvas build) */
  --egg-card:      #FFFFFF;   /* white card */
  --egg-border:    #E2E6EC;   /* hairline */
  --egg-hover:     #F1F4F8;   /* pale band — hover/active fill */
  /* Text. */
  --text-primary:  #18283F;   /* navy ink */
  --text-secondary:#45566E;
  --text-muted:    #8B97A8;

  /* Bronze — a SPICE, never a fill: eyebrows/labels, small rules, markers, one accent. */
  --bronze:        #9C7A3F;   /* bronze on light */
  --bronze-bright: #C9A961;   /* bronze on dark */
  /* Dark-section helpers. */
  --navy-grad:        linear-gradient(160deg,#16243C,#0E1828);
  --ink-on-navy:      #E6E9EF;
  --muted-on-navy:    #9DAAC0;
  --hairline-on-navy: #2A3A55;
  --rule-strong:      #D8DDE5;
  --logo-cream:       #F5F2EA;   /* the mark/cream on dark */

  /* Fonts — three roles: display serif (headlines, wordmark, big numerals),
     body serif (running copy/leads/captions), Inter (UI/labels/buttons). */
  --font-display:    "DM Serif Display", Georgia, serif;
  --font-body:       "Spectral", Georgia, serif;
  --font-sans:       "Inter", system-ui, sans-serif;
  /* Ink channels for the repeated rgba shadows/tints (now the new navy ink). */
  --ink-rgb:         24, 40, 63;    /* = --accent #18283F */
  --ink-deep-rgb:    14, 24, 40;    /* = --green-dark #0E1828 */
  --tint-forest-rgb: 24, 40, 63;    /* repointed: navy tint (was warm green) */
  --gold-rgb:        201, 169, 97;  /* repointed: bronze tint (was gold) = #C9A961 */
  /* Semantic state colors — left as-is (functional). */
  --danger:          #C0392B;
  --danger-deep:     #B33A2A;
  --danger-rgb:      192, 57, 43;
  --success:         #1E5C3A;

  /* ── Spacing + radius scale (DESIGN.md) — THE single scale. New/edited rules
        use these tokens; don't mint new one-off px literals for gaps/padding/
        margins/radii. Spacing steps 4/8/12/16/24/32/48; radius sm=8 (inputs,
        small chips), md=12 (inner cards, rows), lg=16 (page-level cards/bands),
        pill=999 (fully-round pills/badges). ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;
}

body {
  font-family: var(--font-sans);
  background: var(--egg-bg);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

.app { display: flex; height: 100vh; }

/* ═══════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════ */
.sidebar {
  width: 56px;
  flex-shrink: 0;
  background: var(--green-dark);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  left: 0; top: 0;
  z-index: 50;
  overflow: hidden;
  transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.26s;
  /* Hard 1px separator line + soft depth shadow behind it */
  box-shadow: 1px 0 0 0 rgba(0,0,0,0.18), 4px 0 20px rgba(0,0,0,0.28);
}
.sidebar:hover {
  width: 220px;
  box-shadow: 1px 0 0 0 rgba(0,0,0,0.18), 8px 0 36px rgba(0,0,0,0.38);
}

.sidebar-brand {
  flex-shrink: 0;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--hairline-on-navy);
  position: relative;
  transition: padding-left 0.26s cubic-bezier(0.4,0,0.2,1),
              padding-right 0.26s cubic-bezier(0.4,0,0.2,1);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  cursor: pointer;   /* click goes to Home, like a normal brand-mark/logo control */
  user-select: none;
}

.brand-logo {
  width: 26px;
  flex-shrink: 0;
  color: var(--logo-cream);   /* cream mark on the navy gradient (fill=currentColor) */
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo svg {
  width: 26px;
  height: auto;               /* preserve the real logo's aspect ratio */
  display: block;
}

.brand-text {
  min-width: 0;
  flex: 1;                    /* take the remaining width so the tagline never clips */
}

.brand-name {
  font-size: 23px;
  line-height: 1.05;
  color: var(--logo-cream);   /* display serif via the RESKIN typography block */
  letter-spacing: 0;
}

.brand-tagline {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  color: var(--muted-on-navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin-top: 4px;
}
/* NOWRAP (fixed the expand-animation reflow glitch): at the current tracking
   (0.08em, trimmed from the original wider value) "Litigation Intelligence"
   already fits on ONE line within the expanded sidebar's 139px text column
   (verified: scrollWidth === clientWidth === 139px at nowrap, no overflow past
   .brand-row) — the old clipping risk that motivated `white-space: normal` no
   longer applies. `white-space: normal` let the tagline reflow to two lines at
   the narrower INTERMEDIATE widths during the 0.26s sidebar width transition,
   then snap back to one line once fully expanded — a visible two-line flash.
   Forcing nowrap here (matching the general `.brand-tagline` rule two blocks
   down, made explicit for this element) keeps it a single line throughout the
   whole animation; `.brand-row`'s `overflow: hidden` clips/reveals it as the
   rail widens, so it appears as one crisp line, never a wrap. Higher
   specificity (.sidebar-brand …) so it wins regardless of source order. */
.sidebar-brand .brand-tagline { white-space: nowrap; }

.sidebar-nav {
  padding: var(--space-3) var(--space-3);
  flex: 1;
  min-height: 0;           /* lets flex child shrink so footer stays visible */
  overflow-y: auto;        /* scroll nav when items overflow */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;                /* the nest-connector math encodes this 1px — keep in step */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}


.nav-item {
  position: relative;       /* anchors the ::after active marker */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted-on-navy);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
  user-select: none;
}

.nav-item:hover {
  background: rgba(42,58,85,0.55);   /* --hairline-on-navy as a quiet fill */
  color: var(--ink-on-navy);
}

/* Active = crisp bronze edge marker + bronze icon + cream label over a faint
   bronze wash. ::after (not ::before — the nest connector owns ::before). */
.nav-item.active {
  background: rgba(var(--gold-rgb),0.10);
  color: var(--ink-on-navy);
  font-weight: 600;
}
.nav-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--bronze-bright);
}
.nav-item.active svg { color: var(--bronze-bright); }

.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }



/* (.nav-dropdown / .nav-sub-item / .nav-sub-dot removed — the Tasks→Reviews nav submenu is gone.) */

/* ════════════════════════════════════════════════════════════════════
   THREE-PILLAR NAV — pillar labels + the Case-Management nesting staircase.

   Geometry is derived from ONE indent unit (--nest-step) + the icon half-width,
   so every nested level steps by the same amount and the tree connectors land
   exactly on each row's vertical centre. --depth (1/2/3) is the only per-item
   knob — no hand-tuned offsets.
   ════════════════════════════════════════════════════════════════════ */
.sidebar-nav {
  --nav-pad:   12px;   /* depth-0 content inset (== .nav-item padding-left) */
  --nest-step: 19px;   /* one indent level */
  --icon-half: 8px;    /* half the 16px nav icon */
  --nav-row:   36px;   /* fixed row height → exact connector math */
  --tree:        rgba(201,169,97,0.30);  /* restrained bronze guide */
  --tree-active: rgba(201,169,97,0.62);
}
/* Normalise every row to a fixed height so the staircase aligns precisely. */
.sidebar-nav .nav-item { min-height: var(--nav-row); box-sizing: border-box; }

/* Pillar headers (replace the old per-section labels) — bronze eyebrow (Inter,
   small-caps rhythm; sits under its group's .nav-div divider). */
.nav-pillar {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bronze-bright, #C9A961);
  opacity: 0.75;
  padding: var(--space-1) var(--space-3) 6px;
  white-space: nowrap;
}

/* Group divider — a real, legible break between pillars. Stays visible on the
   collapsed rail (narrower margins) so the icon column keeps its group rhythm;
   deliberately NOT in the collapsed-fade list. */
.nav-div {
  flex-shrink: 0;
  height: 1px;
  background: var(--hairline-on-navy);
  margin: var(--space-3) var(--space-1) var(--space-2);
  transition: margin 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar:not(:hover) .nav-div { margin-left: 14px; margin-right: 14px; }

/* Nested rows: indent by --depth; the row content shifts right one step/level. */
.nav-nest {
  position: relative;
  padding-left: calc(var(--nav-pad) + var(--nest-step) * var(--depth));
}
/* Tree connector — an "└" elbow (left + bottom border, rounded inner corner)
   rising from just below the PARENT icon down into THIS row's icon centre.
   guide-x = parent icon centre = exactly one indent-step left of this icon, so
   the vertical guide aligns to the parent node and the elbow meets this icon. */
.nav-nest::before {
  content: '';
  position: absolute;
  left:   calc(var(--nav-pad) + var(--nest-step) * (var(--depth) - 1) + var(--icon-half));
  top:    calc(var(--icon-half) - var(--nav-row) / 2 - 1px);   /* parent icon bottom */
  width:  calc(var(--nest-step) - var(--icon-half));            /* across to this icon */
  height: calc(var(--nav-row) - var(--icon-half) + 1px);        /* down to row centre */
  border-left:   1.5px solid var(--tree);
  border-bottom: 1.5px solid var(--tree);
  border-bottom-left-radius: 8px;
  pointer-events: none;
  transition: border-color 0.13s;
}
.nav-nest:hover::before,
.nav-nest.active::before { border-color: var(--tree-active); }

/* Collapsed rail: no indent, no connectors — icons re-centre like every row.
   (The existing `.sidebar:not(:hover) .nav-item { padding-left:20px }` already
   re-centres the row; we only need to hide the connector here.) */
.sidebar:not(:hover) .nav-nest::before { display: none; }

/* (The old #nav-below-divider was retired — group breaks are .nav-div now, and
   the gated Conflicts zone carries its own divider inside #nav-conflicts-zone.) */

/* Main layout: floating top chrome over the views stack */
.main {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  margin-left: 56px; /* always offset by collapsed sidebar width */
  display: flex;
  flex-direction: column;
  position: relative;  /* anchors the zero-height .main-topbar overlay */
}
/* ── Top chrome is a ZERO-HEIGHT OVERLAY — no reserved strip. The notification
   bell floats as a compact control over the page's top-right gutter; every view
   gains the former 60px. pointer-events pass through the empty band. ── */
.main-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  padding: 0;
  background: none;
  z-index: 300;
  pointer-events: none;
}
.main-views {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* ── Notification bell (lives in .main-topbar, pushed to right) — quiet
   card-surface button (the old solid dark circle floated awkwardly on the
   light page); the danger badge carries the urgency. ── */
.notif-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--egg-border);
  color: var(--accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  top: var(--space-2); right: var(--space-3);
  pointer-events: all;
  transition: background 0.13s, box-shadow 0.18s cubic-bezier(.2,.8,.2,1), transform 0.18s cubic-bezier(.2,.8,.2,1), border-color 0.13s;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 8px 20px -12px rgba(24,40,63,.18);
}
.notif-btn:hover {
  background: var(--egg-hover); border-color: rgba(var(--ink-rgb),0.25);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(24,40,63,.07), 0 12px 26px -12px rgba(24,40,63,.28);
}
/* Red unread badge */
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  background: var(--danger);
  border: 2.5px solid var(--egg-bg);
  color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 20px;
  letter-spacing: 0;
  pointer-events: none;
}
/* Dropdown — fixed so it escapes sidebar overflow:hidden */
.notif-dropdown {
  position: fixed;
  /* top / left set dynamically by JS */
  width: min(360px, calc(100vw - 32px));
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(var(--ink-deep-rgb),0.18);
  z-index: 9000;
  overflow: hidden;
  display: none;
  max-height: 480px;
  overflow-y: auto;
}
.notif-dropdown.open { display: block; }
.notif-hdr-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--egg-border);
  background: var(--egg-bg);
  position: sticky; top: 0; z-index: 1;
}
.notif-hdr {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--bronze);
}
.notif-mark-all {
  background: none; border: none; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--forest);
  font-family: var(--font-sans);
  padding: 0; transition: opacity 0.12s;
}
.notif-mark-all:hover { opacity: 0.7; }
.notif-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--egg-border);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background 0.12s;
}
.notif-row:hover { background: var(--egg-hover); }
.notif-row:last-child { border-bottom: none; }
.notif-row.unread { background: rgba(var(--ink-rgb),0.04); border-left-color: var(--bronze); }
.notif-row-content { flex: 1; min-width: 0; }
.notif-row-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary); line-height: 1.4;
}
.notif-row-body {
  font-size: 11.5px; color: var(--text-secondary);
  margin-top: 2px; line-height: 1.4;
}
.notif-row-time {
  font-size: 10.5px; color: var(--text-muted);
  margin-top: 3px;
}
.notif-dismiss {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px;
  padding: 2px; line-height: 1;
  transition: color 0.12s;
  margin-top: -1px;
}
.notif-dismiss:hover { color: var(--text-primary); }
.notif-empty {
  padding: 32px 18px;
  text-align: center;
  font-size: 13px; color: var(--text-muted);
}
/* Toast notifications */
#notif-toast-wrap {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1100;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  max-width: 320px;
}
.notif-toast {
  background: var(--green-dark);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: flex-start; gap: var(--space-3);
  box-shadow: 0 6px 28px rgba(var(--ink-deep-rgb),0.28);
  pointer-events: all;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s, transform 0.28s;
  cursor: default;
  min-width: 260px;
}
.notif-toast.visible { opacity: 1; transform: translateY(0); }
.notif-toast.danger { background: var(--danger-deep); }
.notif-toast.danger.clickable:hover { background: var(--danger); }
.notif-toast-icon {
  flex-shrink: 0; margin-top: 1px;
  opacity: 0.75;
}
.notif-toast-content { flex: 1; min-width: 0; }
.notif-toast-title {
  font-size: 13px; font-weight: 700;
  color: #fff; line-height: 1.4;
}
.notif-toast-body {
  font-size: 12px; color: rgba(255,255,255,0.72);
  margin-top: 2px; line-height: 1.4;
}
.notif-toast-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.6); font-size: 17px; line-height: 1;
  flex-shrink: 0; padding: 0; margin-top: -1px;
  transition: color 0.13s;
}
.notif-toast-close:hover { color: #fff; }
/* Clickable toast (e.g. "Analysis ready" → opens the result) */
.notif-toast.clickable { cursor: pointer; }
.notif-toast.clickable:hover { background: var(--green-mid); box-shadow: 0 8px 32px rgba(var(--ink-deep-rgb),0.34); }
.notif-toast-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: #fff; opacity: 0.92;
  margin-top: 7px;
}
.notif-toast-cta svg { transition: transform 0.13s; }
.notif-toast.clickable:hover .notif-toast-cta svg { transform: translateX(2px); }


.sidebar-footer {
  flex-shrink: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--hairline-on-navy);
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.13s;
}

.user-pill:hover { background: rgba(42,58,85,0.55); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22375A, #16243C);
  border: 1px solid rgba(var(--gold-rgb),0.45);   /* bronze hairline ring */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-on-navy);
  flex-shrink: 0;
}

.user-name { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-on-navy); font-weight: 600; line-height: 1.2; }
.user-role { font-family: var(--font-sans); font-size: 10.5px; color: var(--muted-on-navy); font-weight: 400; margin-top: 1px; }
.user-company { font-family: var(--font-sans); font-size: 9.5px; color: rgba(157,170,192,0.6); font-weight: 400; margin-top: 1px; }

/* ── Account popup menu ── */
.sidebar-footer { position: relative; }
.acct-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 12px; right: 12px;
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(var(--tint-forest-rgb),0.18);
  padding: 5px;
  display: none;
  z-index: 300;
  min-width: 180px;
}
.acct-menu.open { display: block; }
.acct-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--text-primary); transition: background 0.12s;
  user-select: none;
}
.acct-menu-item:hover { background: var(--egg-hover); }
.acct-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-secondary); }
.acct-menu-item.danger { color: var(--danger-deep); }
.acct-menu-item.danger svg { color: var(--danger-deep); }
.acct-menu-divider { height: 1px; background: var(--egg-border); margin: 4px 2px; }

/* ── Connected Apps modal ── */
#connected-apps-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(var(--ink-deep-rgb),0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1200;
  align-items: center; justify-content: center;
}
#connected-apps-overlay.open { display: flex; }
#connected-apps-modal {
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: var(--radius-lg);
  width: 520px; max-width: calc(100vw - 32px);
  box-shadow: 0 24px 64px rgba(var(--ink-deep-rgb),0.18), 0 4px 16px rgba(var(--ink-deep-rgb),0.08);
  overflow: hidden;
  /* The relocated Calendar Sync panels make this tall — bound + scroll the body. */
  max-height: 86vh;
  display: flex; flex-direction: column;
}
#connected-apps-modal .ca-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* The relocated Calendar Sync block (all csync-* ids/handlers unchanged) */
.ca-csync { border-top: 1px solid var(--egg-border); }
.ca-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--egg-border);
}
.ca-header-text h3 {
  font-size: 20px; margin: 0;
  color: var(--text-primary);
}   /* serif via the curated list (.ca-title); the explanatory subtitle was removed */
.ca-close-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); padding: 4px; margin-top: -2px;
  border-radius: 6px; display: flex; align-items: center;
  transition: background 0.12s, color 0.12s; flex-shrink: 0;
}
.ca-close-btn:hover { background: var(--egg-hover); color: var(--text-primary); }
.ca-body { padding: 6px 0; }
.ca-app-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px;
  transition: background 0.12s;
}
.ca-app-row:hover { background: var(--egg-bg); }
.ca-app-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: #0078d4;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,120,212,0.28);
}
.ca-app-icon svg { width: 22px; height: 22px; color: #fff; }
.ca-app-info { flex: 1; min-width: 0; }
.ca-app-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ca-app-sub  { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.ca-status-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600;
  visibility: hidden;
  transition: background 0.2s, color 0.2s;
}
.ca-status-badge.visible { visibility: visible; }
.ca-status-badge.connected {
  background: rgba(46,160,113,0.12); color: var(--success);
}
.ca-status-badge.disconnected {
  background: var(--egg-hover); color: var(--text-secondary);
}
.ca-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ca-status-badge.connected   .ca-badge-dot { background: var(--success); }
.ca-status-badge.disconnected .ca-badge-dot { background: var(--text-muted); }
.ca-connect-btn {
  font-size: 13px; font-weight: 600; padding: 8px 18px;
  border-radius: 8px; border: 1.5px solid transparent; cursor: pointer;
  transition: background 0.14s, color 0.14s, box-shadow 0.14s, border-color 0.14s;
  white-space: nowrap; flex-shrink: 0; visibility: hidden;
}
.ca-connect-btn.visible { visibility: visible; }
.ca-connect-btn.connect {
  background: var(--forest); color: #fff; border-color: var(--forest);
  box-shadow: 0 2px 8px rgba(var(--ink-rgb),0.22);
}
.ca-connect-btn.connect:hover { background: var(--green-dark); border-color: var(--green-dark); }
.ca-connect-btn.disconnect {
  background: transparent; color: var(--text-secondary); border-color: var(--egg-border);
}
.ca-connect-btn.disconnect:hover { background: rgba(192,57,43,0.08); color: var(--danger-deep); border-color: rgba(192,57,43,0.35); }
.ca-footer {
  padding: 13px 24px;
  background: var(--egg-bg);
  border-top: 1px solid var(--egg-border);
}
.ca-footer p {
  font-size: 11.5px; color: var(--text-secondary); margin: 0; line-height: 1.5;
}

/* ── Calendar Sync Panel ── */
.csync-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--egg-border);
}
.csync-section:last-child { border-bottom: none; }
.csync-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: 14px;
}
.csync-header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--egg-border);
  background: var(--egg-bg);
}
.csync-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.csync-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.csync-conn-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.csync-conn-badge.connected    { background: rgba(46,204,113,0.12); color: #1a9e52; }
.csync-conn-badge.disconnected { background: var(--egg-hover); color: var(--text-secondary); }
.csync-conn-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.csync-conn-badge.connected    .csync-conn-badge-dot { background: #2ecc71; }
.csync-conn-badge.disconnected .csync-conn-badge-dot { background: #bbb; }
.csync-sync-btn {
  padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--forest); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.13s; flex-shrink: 0;
}
.csync-sync-btn:hover  { background: var(--green-dark); }
.csync-sync-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.csync-spin { animation: csync-rotate 0.8s linear infinite; }
@keyframes csync-rotate { to { transform: rotate(360deg); } }
/* Disconnect/not-connected placeholder */
.csync-not-connected {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px; gap: 12px; text-align: center;
}
.csync-not-connected p { font-size: 13px; color: var(--text-secondary); margin: 0; }
/* Direction pills */
.csync-direction-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.csync-dir-pill {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  border: 1.5px solid var(--egg-border);
  transition: border-color 0.13s, background 0.13s;
  user-select: none;
}
.csync-dir-pill:hover  { background: var(--egg-hover); }
.csync-dir-pill.active { border-color: var(--forest); background: rgba(var(--ink-rgb),0.05); }
.csync-dir-pill input  { margin-top: 2px; accent-color: var(--forest); flex-shrink: 0; }
.csync-dir-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.csync-dir-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
/* What to sync toggles */
.csync-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--egg-border);
}
.csync-toggle-row:last-child { border-bottom: none; }
.csync-toggle-label { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.csync-toggle-sub   { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.csync-switch {
  position: relative; width: 38px; height: 22px; flex-shrink: 0;
}
.csync-switch input { display: none; }
.csync-switch-track {
  position: absolute; inset: 0; border-radius: 11px;
  background: #d1d5db; cursor: pointer; transition: background 0.2s;
}
.csync-switch input:checked + .csync-switch-track { background: var(--forest); }
.csync-switch-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 0.2s; pointer-events: none;
}
.csync-switch input:checked ~ .csync-switch-thumb { left: 19px; }
/* Synced items table */
.csync-items-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
}
.csync-items-table th {
  text-align: left; padding: 7px 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-secondary); border-bottom: 1px solid var(--egg-border);
}
.csync-items-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--egg-border);
  color: var(--text-primary); vertical-align: middle;
}
.csync-items-table tr:last-child td { border-bottom: none; }
.csync-type-badge {
  display: inline-block; padding: 2px 7px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; text-transform: capitalize;
  background: var(--egg-hover); color: var(--text-secondary);
}
.csync-remove-btn {
  padding: 3px 9px; border-radius: 6px; border: 1px solid var(--egg-border);
  background: transparent; cursor: pointer; font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary); transition: all 0.12s;
}
.csync-remove-btn:hover { background: #fde8e6; color: var(--danger-deep); border-color: #f3b8b3; }
.csync-empty { padding: 16px 10px; color: var(--text-secondary); font-size: 13px; text-align: center; }
/* Conflict cards */
.csync-conflict-card {
  background: #FFF8F0; border: 1px solid #F5D5A8;
  border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
}
.csync-conflict-card:last-child { margin-bottom: 0; }
.csync-conflict-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.csync-conflict-row  {
  display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px;
}
.csync-conflict-side {
  flex: 1; background: #fff; border: 1px solid #E3DCD2;
  border-radius: 7px; padding: 8px 10px;
}
.csync-conflict-side-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 4px;
}
.csync-conflict-side-val { font-size: 12px; color: var(--text-primary); }
.csync-conflict-actions { display: flex; gap: 8px; }
.csync-keep-btn {
  flex: 1; padding: 7px 12px; border-radius: 7px; border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; transition: background 0.13s;
}
.csync-keep-ratio   { background: var(--forest); color: #fff; }
.csync-keep-ratio:hover   { background: var(--green-dark); }
.csync-keep-outlook { background: #0078d4; color: #fff; }
.csync-keep-outlook:hover { background: #005fa3; }

/* (The External Calendar Sync panel CSS was REMOVED — the calendar page now
   carries only a quiet Sync button; the csync-* panels live in
   #connected-apps-overlay.) */

/* Form quick-sync toggle */
.ac-cal-sync-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 9px;
  background: var(--egg-bg); border: 1px solid var(--egg-border);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
   VIEW SYSTEM
═══════════════════════════════════════════════════ */

/* ── Sidebar collapse / expand behaviour ── */

/* Text labels: vanish before sidebar narrows so they never appear clipped */
.nav-label {
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.18s ease 0.1s; /* delayed: text fades in after sidebar is open */
}
.sidebar:not(:hover) .nav-label {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease; /* fast: gone before overflow could clip */
}

/* Section headers, brand, chevron, user info — same fade treatment */
.brand-name,
.brand-tagline,
.nav-pillar,
.user-name,
.user-role,
.user-company {
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.18s ease 0.1s;
}
.sidebar:not(:hover) .brand-name,
.sidebar:not(:hover) .brand-tagline,
.sidebar:not(:hover) .nav-pillar,
.sidebar:not(:hover) .user-name,
.sidebar:not(:hover) .user-role,
.sidebar:not(:hover) .user-company {
  opacity: 0;
  transition: opacity 0.08s ease;
}

/* ── Icon centering ──
   Zero sidebar-nav's own horizontal padding so items span the full 56px width.
   Then item padding-left = (56 − 16px icon) / 2 = 20px → icon centre at 28px exactly. */
.sidebar-nav {
  transition: padding-left  0.26s cubic-bezier(0.4, 0, 0.2, 1),
              padding-right 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar:not(:hover) .sidebar-nav { padding-left: 0; padding-right: 0; }
.sidebar:not(:hover) .sidebar-brand { padding-left: 16px; padding-right: 0; }

.nav-item {
  transition: background 0.13s, color 0.13s,
              padding-left  0.26s cubic-bezier(0.4, 0, 0.2, 1),
              padding-right 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar:not(:hover) .nav-item { padding-left: 20px; padding-right: 20px; }

/* Centre the 32px avatar: zero footer padding + 12px on pill
   → avatar left edge = 12px, centre = 12 + 16 = 28px ✓ */
.sidebar-footer {
  transition: padding-left  0.26s cubic-bezier(0.4, 0, 0.2, 1),
              padding-right 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar:not(:hover) .sidebar-footer { padding-left: 0; padding-right: 0; }
.user-pill {
  transition: background 0.13s,
              padding-left 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar:not(:hover) .user-pill { padding-left: 12px; }

.view {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}

.view.active { display: flex; }

/* ═══════════════════════════════════════════════════
   HOME VIEW
═══════════════════════════════════════════════════ */
#view-home {
  display: none;
  flex-direction: column;
}

#view-home.active { display: flex; }

.home-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 28px 32px;
  overflow-y: auto;
  min-width: 0;
}


.welcome-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
/* Gentle entrance — applied only on the first home-page render per session.
   Starts slightly displaced + transparent and eases up into place. */
.welcome-name.welcome-anim {
  animation: welcomeRise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes welcomeRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-name.welcome-anim { animation: none; }
}

/* Search */
.search-wrap { position: relative; }

.search-wrap .ico-search {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 14px 56px 14px 46px;
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(var(--ink-rgb),0.04);
}

.search-input::placeholder { color: var(--text-muted); font-family: var(--font-body); font-style: italic; }

.search-input:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(var(--ink-rgb),0.1);
}

.search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--green-dark);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.13s;
}

.search-btn:hover { background: var(--green-mid); }
.search-btn:active { transform: translateY(-50%) scale(.97); }
.search-btn svg { width: 13px; height: 13px; }

/* ── Home search dropdown ── */
.srch-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(var(--ink-deep-rgb),0.16);
  z-index: 40; /* below .sidebar's z-index:50 — the sidebar hover-expands (56px->220px)
                  as a fixed overlay on top of page content, and this dropdown's left
                  edge sits close enough to the rail to fall under it while expanded */
  overflow: hidden;
  display: none;
}
.srch-dropdown.open {
  display: block;
  animation: srchFadeIn 0.13s ease;
}
@keyframes srchFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.srch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--egg-border);
  transition: background 0.1s;
  line-height: 1.35;
}
.srch-item:last-child { border-bottom: none; }
.srch-item:hover,
.srch-item.kbd-active { background: var(--egg-hover); }
.srch-item strong { color: var(--green-mid); font-weight: 700; }
.srch-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-type-badge {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex-shrink: 0;
}
.srch-dym-hdr {
  padding: 9px 14px 5px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.srch-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* ── Duplicate detection system ──────────────────────────────────────────
   The bespoke .dup-modal-* / #dup-items-overlay confirm shells were REMOVED —
   both flows route through the shared window._ratioConfirm. The .di-item-*
   per-item resolution cards below still render inside the confirm's content
   slot (.rc-content). ── */
.di-modal-list  { display: flex; flex-direction: column; gap: var(--space-2); }
.di-item-card {
  border: 1px solid var(--egg-border);
  border-radius: var(--radius-sm); background: var(--egg-bg);
  padding: var(--space-3);
}
.di-item-names { margin-bottom: 8px; }
.di-item-new   { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.di-item-match { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.di-item-match strong { color: #8B6914; }
.di-item-btns  { display: flex; gap: 6px; }
.di-item-btn {
  flex: 1; padding: 7px 6px; border-radius: 8px;
  border: 1.5px solid var(--egg-border);
  background: var(--egg-card);
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  cursor: pointer; color: var(--text-secondary); text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.di-item-btn:hover         { background: var(--egg-hover); color: var(--text-primary); }
.di-item-btn.di-sel-keep  { background: var(--egg-hover); color: var(--text-secondary); border-color: rgba(var(--ink-rgb),0.3); }
.di-item-btn.di-sel-add   { background: var(--forest); color: #fff; border-color: var(--forest); }
.di-item-btn.di-sel-merge { background: rgba(var(--gold-rgb),0.18); color: var(--bronze); border-color: rgba(var(--gold-rgb),0.45); }

/* Staging-page duplicate section */
.as-dup-section { padding: 0 28px 24px; }
.as-dup-section-hdr {
  display: flex; align-items: center; gap: 9px;
  padding: 16px 0 14px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #8B6914;
  border-top: 1.5px solid rgba(var(--gold-rgb),0.35);
  margin-bottom: 10px;
}
.as-dup-card {
  border: 1.5px solid var(--egg-border);
  border-left: 4px solid #C4A440;
  border-radius: 12px; background: var(--egg-card);
  margin-bottom: 10px; overflow: hidden;
}
.as-dup-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px;
  background: rgba(var(--gold-rgb),0.07);
  border-bottom: 1px solid var(--egg-border);
}
.as-dup-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.as-dup-score {
  font-size: 11px; font-weight: 700; color: #8B6914;
  background: rgba(var(--gold-rgb),0.18); border-radius: 5px; padding: 2px 7px;
}
.as-dup-sides {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--egg-border);
}
.as-dup-side { padding: 11px 13px; }
.as-dup-side:first-child { border-right: 1px solid var(--egg-border); }
.as-dup-side-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 5px;
}
.as-dup-side-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.as-dup-side-meta { font-size: 11.5px; color: var(--text-secondary); }
.as-dup-actions { display: flex; gap: 7px; padding: 9px 13px; align-items: center; }
.as-dup-action-btn {
  padding: 5px 11px; border-radius: 7px;
  border: 1.5px solid var(--egg-border); background: var(--egg-card);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  cursor: pointer; color: var(--text-primary);
  transition: background 0.11s, border-color 0.11s;
}
.as-dup-action-btn:hover { background: var(--egg-hover); border-color: rgba(var(--ink-rgb),0.25); }
.as-dup-action-btn.keep    { color: var(--text-muted); }
.as-dup-action-btn.add-new { color: var(--forest); border-color: rgba(var(--ink-rgb),0.35); }
.as-dup-action-btn.merge   { background: var(--forest); color: #fff; border-color: var(--forest); }
.as-dup-action-btn.merge:hover { background: var(--green-mid); border-color: var(--green-mid); }
.as-dup-action-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* Merge panel */
.as-merge-panel {
  background: rgba(var(--gold-rgb),0.04); border-top: 1px solid rgba(var(--gold-rgb),0.25);
  padding: 14px 13px; display: none;
}
.as-merge-panel.open { display: block; }
.as-merge-panel-title { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.as-merge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.as-merge-col-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 5px; }
.as-merge-item {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 12px; color: var(--text-secondary);
}
.as-merge-item:last-child { border-bottom: none; }
.as-merge-item input[type=checkbox] { margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--forest); }
.as-merge-item-label { flex: 1; }
.as-merge-exists-badge { font-size: 10px; color: var(--text-muted); background: var(--egg-border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
.as-merge-apply-btn {
  padding: 7px 15px; background: var(--forest); color: #fff;
  border: none; border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.13s;
}
.as-merge-apply-btn:hover { background: var(--green-mid); }

/* Form duplicate warning banner */
.dup-warn-banner {
  background: rgba(var(--gold-rgb),0.09);
  border: 1.5px solid rgba(var(--gold-rgb),0.4);
  border-radius: 9px; padding: 11px 13px;
  margin-bottom: 10px; display: none;
}
.dup-warn-banner.visible { display: block; }
.dup-warn-text { font-size: 12.5px; color: #7A5A10; font-weight: 500; margin-bottom: 9px; line-height: 1.5; }
.dup-warn-actions { display: flex; gap: 7px; }
.dup-warn-confirm-btn {
  padding: 5px 11px; background: var(--text-primary); color: #fff;
  border: none; border-radius: 7px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer;
}
.dup-warn-cancel-btn {
  padding: 5px 11px; background: transparent;
  border: 1.5px solid var(--egg-border); border-radius: 7px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  cursor: pointer; color: var(--text-secondary);
}

/* Home workflow cards */
.section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.card {
  background: var(--egg-card);
  border-radius: 14px;
  border: 1px solid var(--egg-border);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb),0.05);
}

.card.clickable {
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s;
}

.card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--ink-deep-rgb),0.1), 0 2px 5px rgba(var(--ink-deep-rgb),0.06);
  border-color: rgba(var(--ink-rgb),0.28);
}










/* Home chart */
.chart-card {
  flex-shrink: 0;
  padding: 16px 18px 12px;
  display: flex;
  flex-direction: column;
  min-height: 170px;
}






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

/* Home right col */


/* ── Home hub modules ── */
.home-qa {
  flex: 1; display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: var(--space-3) var(--space-4); background: var(--egg-bg);
  border: 1px solid var(--egg-border); border-radius: var(--radius-sm);
  cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-primary); transition: background-color 0.15s, border-color 0.15s;
}
.home-qa:hover { background: var(--egg-hover); border-color: rgba(var(--ink-rgb),0.28); }
.home-qa-ic {
  width: 21px; height: 21px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.hr-case { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); }
.home-task-row {
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: 11px;
  padding: 11px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;
  transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
}
.home-task-row:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(var(--ink-deep-rgb),0.08); border-color: rgba(var(--ink-rgb),0.24); }
.home-task-row .hr-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; }
.home-task-row .hr-case { font-weight: 600; }
.home-empty { font-size: 12.5px; color: var(--text-muted); padding: 6px 0; }
/* Deadline rows — editorial listings: DM Serif day numeral, hairline-separated */
.home-dl-item {
  display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-1); cursor: pointer;
  background: none; border: none; border-radius: 0; margin-bottom: 0;
  border-bottom: 1px solid var(--egg-border);
  transition: background-color 0.15s;
}
.home-dl-item:hover { background: var(--egg-hover); }
.home-dl-when { text-align: center; flex-shrink: 0; min-width: 44px; }
.home-dl-mon { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--bronze); letter-spacing: 0.12em; }
.home-dl-day { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--text-primary); line-height: 1; }
.home-dl-desc { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.home-dl-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.home-bill-num { font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; line-height: 1; }
.home-bill-cap { font-size: 13px; font-style: italic; color: var(--text-muted); margin-top: var(--space-1); }
.home-bill-link { font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 12px; }

/* ── Home hub — FRONT PAGE (editorial redesign): a light masthead set in ink on
   the paper, ruled sections instead of boxed cards, and a newspaper column
   rule between the Today spread and the rail. Brand register at the masthead;
   product register (dense, restrained) in the working zones. ── */
.home-scroll { flex: 1; overflow-y: auto; min-width: 0; }
.home-inner {
  width: 100%;
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-6) 44px var(--space-7);
}

/* 1. MASTHEAD — the headline moment. Ink type on the page ground; a bronze
   dateline between hairlines above, the classic thick-thin nameplate rule
   below. The concentric-arc device stays, faint, bleeding off the top-right. */
.home-hero {
  position: relative; overflow: hidden;
  padding: var(--space-2) 0 var(--space-5);
  border-bottom: 1px solid var(--egg-border);   /* thin of the double rule */
}
.home-hero::after {   /* thick of the double rule, 4px above the thin */
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: var(--accent);
}
.home-hero-arcs { position: absolute; top: 0; right: 0; width: 320px; height: 320px; opacity: .4; pointer-events: none; }
.home-hero-content { position: relative; z-index: 1; min-width: 0; }
.home-hero-eyebrow {   /* dateline — bronze caps centered between hairlines */
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bronze);
  margin-bottom: var(--space-4); white-space: nowrap;
}
.home-hero-eyebrow::before, .home-hero-eyebrow::after {
  content: ''; flex: 1 1 0; min-width: var(--space-5); height: 1px; background: var(--rule-strong);
}
.home-hero .welcome-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 3.6vw, 52px);
  color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.08;
  text-wrap: balance;
}
.home-hero .welcome-name i { font-style: italic; color: var(--bronze); }

/* 3. The spread — LEDGER REVISION: editorial type inside crisp bordered
   containers. Each zone is a defined card (1px edge, no float/hover-lift);
   the ledger rows live INSIDE the frames. */
.home-zones { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }

/* Dominant "Today" zone — the page's lede, in a defined frame */
.home-today {
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05);
  padding: var(--space-5); min-width: 0;
}
/* Section head row: serif head + tabs share one baseline rule */
.home-today-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  border-bottom: 1px solid var(--rule-strong); margin-bottom: var(--space-4);
}
.home-today-title {
  font-family: var(--font-display); font-weight: 400; font-size: 26px;
  color: var(--text-primary); line-height: 1.1; padding-bottom: var(--space-2);
}
.home-today-sec-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); margin-bottom: var(--space-3);
}
.home-today #home-deadlines { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 var(--space-6); }
.home-today .home-dl-item { margin-bottom: 0; }
.home-today .home-empty { grid-column: 1 / -1; }
/* Upcoming Deadlines — a ruled section, not a box */
.home-dl-card {
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: var(--space-4) 0 0; margin-top: var(--space-5);
  border-top: 1px solid var(--rule-strong);
}

/* Supporting rail — two defined cards */
.home-rail { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.home-rail-card {
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05);
  padding: var(--space-5);
}
.home-rail-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); margin-bottom: var(--space-3);
}
.home-rail-bill .home-bill-num { font-family: var(--font-display); font-weight: 400; font-size: 56px; letter-spacing: 0; }
.home-rail-bill .home-bill-chart { margin-top: var(--space-4); }
.home-rail-bill .home-bill-link { margin-top: var(--space-3); cursor: pointer; }
/* Quick Actions — real bordered, tappable tiles inside the card */
.home-qa-col { display: flex; flex-direction: column; gap: var(--space-2); }
.home-qa-col .home-qa {
  justify-content: flex-start; padding: var(--space-3) var(--space-4); font-size: 13px;
  background: var(--egg-bg); border: 1px solid var(--egg-border); border-radius: var(--radius-sm);
}

.home-bill-figures { cursor: pointer; flex-shrink: 0; min-width: 132px; }
.home-bill-figures:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 3px; border-radius: var(--radius-sm); }
.home-bill-chart { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; flex-wrap: wrap; }
.home-bill-pie { flex-shrink: 0; }
.home-bill-pie svg { display: block; }
.home-bill-legend { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ── Action Items ── */
.home-action-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4) var(--space-5); }
.home-act-cat { display: flex; flex-direction: column; gap: var(--space-2); }
.home-act-cat-hdr {   /* category head = the sanctioned bronze eyebrow */
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--bronze);
}
.home-act-count {
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--accent);
  border-radius: var(--radius-pill); padding: 1px 8px; line-height: 1.6; min-width: 18px; text-align: center;
}
.home-act-item {   /* editorial list row — hairline-separated, quiet hover */
  display: flex; align-items: center; gap: 10px; padding: var(--space-3) var(--space-1); cursor: pointer;
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid var(--egg-border);
  transition: background-color 0.15s;
}
.home-act-item:hover { background: var(--egg-hover); }
.home-act-cat .home-act-item:last-child { border-bottom: none; }
.home-act-main { flex: 1; min-width: 0; }
.home-act-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-act-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Category identity lives in the labeled header; only true urgency gets color
   (overdue → danger). Navy count badges otherwise — no per-screen accent set. */
.home-act-cat.cat-overdue  .home-act-count { background: var(--danger); }
.home-allclear {   /* quiet editorial rest state — a short bronze rule + serif line */
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); text-align: center;
  background: none; border: none; border-radius: 0;
}
.home-allclear::before { content: ''; width: 28px; height: 1px; background: var(--bronze); opacity: .6; margin-bottom: var(--space-2); }
.home-allclear-title { font-size: 19px; font-weight: 400; color: var(--text-primary); }
.home-allclear-sub   { font-size: 13px; font-style: italic; color: var(--text-muted); }

/* ── Home WORKLOAD module (step-4 cross-case density strip; approved design,
   verbatim, scoped under #home-workload so the generic class names don't
   collide) ── */
/* "Briefing band" in a defined frame (ledger revision): the serif head +
   legend row sits inside the card over a strong rule; the week columns are
   boxed, aligned cells divided by full-height hairlines. */
#home-workload .card {
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05);
  overflow: hidden;
}
#home-workload .card:hover { transform: none; box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05); }   /* not a hover-lift card (override the global .card:hover) */
#home-workload .hd { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: 1px solid var(--rule-strong); }
#home-workload .eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); }
#home-workload .title { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; margin-top: var(--space-2); color: var(--accent); }
#home-workload .legend { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
#home-workload .legend button { display: flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--accent); background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-pill); padding: 6px var(--space-3) 6px 10px; cursor: pointer; transition: .13s; }
#home-workload .legend button .ld { width: 9px; height: 9px; border-radius: 50%; transition: .13s; }
#home-workload .legend button:hover { border-color: var(--bronze-bright); box-shadow: 0 2px 7px rgba(var(--ink-rgb),.07); }
#home-workload .legend button.off { color: var(--text-muted); background: transparent; }
#home-workload .legend .reset { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; color: var(--bronze); background: none; border: none; cursor: pointer; padding: 6px var(--space-1); text-decoration: underline; text-underline-offset: 2px; }
#home-workload .strip { display: flex; }   /* the card frame closes the band; .wk hairlines divide the columns */
#home-workload .wk { flex: 1; padding: var(--space-4) var(--space-3); border-left: 1px solid var(--egg-border); min-height: 192px; position: relative; }
#home-workload .wk:first-child { border-left: none; }
#home-workload .wk.now { background: linear-gradient(180deg, rgba(var(--gold-rgb),.09), rgba(var(--gold-rgb),.01)); }
#home-workload .wk.now::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; background: var(--bronze-bright); }
#home-workload .today { display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-2); }
#home-workload .today .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze-bright); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.22); }
#home-workload .today b { font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
#home-workload .today em { font-family: var(--font-sans); font-size: 10px; font-style: normal; color: var(--text-muted); margin-left: auto; }
#home-workload .wkl { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--accent); }
#home-workload .wkl.q { color: var(--text-muted); }
#home-workload .wkr { font-family: var(--font-sans); font-size: 9.5px; color: var(--text-muted); margin-top: 1px; }
#home-workload .load { display: flex; gap: 3px; margin: var(--space-2) 0 var(--space-1); min-height: 5px; flex-wrap: wrap; }
#home-workload .load i { height: 5px; width: 13px; border-radius: 2px; display: inline-block; }
#home-workload .load .d { background: var(--bronze-bright); }
#home-workload .load .t { background: rgba(var(--gold-rgb),.32); }
#home-workload .load .none { width: 22px; height: 5px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--egg-border) 0 4px, transparent 4px 8px); }
#home-workload .dl { display: flex; gap: var(--space-2); background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-sm); padding: var(--space-2); margin-top: var(--space-2); box-shadow: 0 1px 3px rgba(var(--ink-rgb),.05); }
#home-workload .dl.istoday { background: linear-gradient(180deg, rgba(var(--gold-rgb),.12), var(--egg-card)); border-color: rgba(var(--gold-rgb),.55); }
#home-workload .dl b { width: 3px; border-radius: 2px; flex: 0 0 auto; }   /* matter-color spine — functional (matches the legend), not decoration */
#home-workload .dl .x { min-width: 0; }
#home-workload .dl .day { font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--bronze); text-transform: uppercase; }
#home-workload .dl .ti { font-family: var(--font-body); font-size: 12.5px; line-height: 1.25; color: var(--accent); font-weight: 500; margin-top: 1px; }
#home-workload .dl .tag { font-family: var(--font-sans); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--bronze); border-radius: var(--space-1); padding: 1px 5px; display: inline-block; margin-top: 3px; }
#home-workload .tg { display: flex; align-items: center; gap: 5px; margin-top: var(--space-3); flex-wrap: wrap; }
#home-workload .tg i { width: 7px; height: 7px; border-radius: 50%; opacity: .5; display: inline-block; }
#home-workload .tg em { font-family: var(--font-sans); font-size: 10.5px; color: var(--text-muted); font-style: normal; }
#home-workload .open { margin-top: var(--space-3); font-family: var(--font-sans); font-size: 11px; color: var(--success); display: flex; align-items: center; gap: var(--space-2); }
#home-workload .open::before { content: ''; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--success) 30%, transparent) 0 5px, transparent 5px 10px); }
#home-workload .hw-empty { padding: var(--space-6) var(--space-5) var(--space-6); font-family: var(--font-body); font-size: 14px; color: var(--text-muted); }

/* ── Route-to-people suggestion pills (step 5b; recommends-only) ──
   .rt-pill = the Assign-panel horizontal pill; .rt-chip = the Workload-strip
   stacked chip (green left-accent, fits the narrow column). All scoped under
   the .rt- prefix so the generic inner class names (lead/who/when/l1/l2/l3)
   don't collide. */
.rt-chip{display:block;margin-top:var(--space-2);background:linear-gradient(180deg,#f1f6f2,#e6efe7);border:1px solid #c4d6c7;border-radius:var(--radius-sm);padding:6px var(--space-2);cursor:pointer;transition:.13s}
.rt-chip:hover{border-color:#a6c6ac}
.rt-chip .l1{font-family:var(--font-sans);font-size:10px;font-weight:500;color:#5d7f72;line-height:1}
.rt-chip .l2{font-family:var(--font-sans);font-size:11.5px;font-weight:700;color:var(--accent);margin-top:3px;line-height:1.1}
.rt-chip .l3{font-family:var(--font-sans);font-size:10px;font-weight:600;color:#3d6b5b;margin-top:2px;line-height:1}
/* .rt-ask = the opt-in affordance that PRECEDES .rt-chip on a pile-up week.
   Deliberately quieter than the chip it can become: it is an offer to spend a
   model call, not a finding. Bronze, the app's AI spice — never a green fill,
   which reads as a settled suggestion. See the cost invariant in 12-home-hub.js. */
.rt-ask{display:block;width:100%;margin-top:var(--space-2);background:rgba(var(--gold-rgb),.10);border:1px solid rgba(var(--gold-rgb),.42);border-radius:var(--radius-sm);padding:6px var(--space-2);font-family:var(--font-sans);font-size:10.5px;font-weight:600;color:#9C7A3F;text-align:left;cursor:pointer;transition:.13s}
.rt-ask:hover{background:rgba(var(--gold-rgb),.20);border-color:var(--bronze-bright)}
.rt-ask-busy{opacity:.72;cursor:default;font-style:italic}

@media (max-width: 980px) {
  .home-zones { grid-template-columns: 1fr; }
  #home-workload .strip { flex-wrap: wrap; }
  #home-workload .wk { flex: 1 1 33%; min-width: 150px; }
}
@media (max-width: 880px) {
  .home-action-cats, .home-today #home-deadlines { grid-template-columns: 1fr; }
}

.tm-card {
  background: var(--egg-card);
  border-radius: 12px;
  border: 1px solid var(--egg-border);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb),0.05);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
}

.tm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(var(--ink-deep-rgb),0.1);
  border-color: rgba(var(--ink-rgb),0.28);
}

.tm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
}

.tm-avatar.c1 { background: linear-gradient(135deg, #C06B2A, #D4946A); }
.tm-avatar.c2 { background: linear-gradient(135deg, #2A6B7A, #4A9DB8); }
.tm-avatar.c3 { background: linear-gradient(135deg, #243558, #3B5A8F); }

.tm-info { flex: 1; min-width: 0; }
.tm-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tm-role { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; font-weight: 400; }


/* ═══════════════════════════════════════════════════
   CASES VIEW
═══════════════════════════════════════════════════ */
#view-cases {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 44px;
  gap: var(--space-5);   /* the view gap owns inter-section spacing (convention) */
}

#view-cases.active { display: flex; }



.cases-count {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--ink-rgb),0.1);
  color: var(--green-mid);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-left: 10px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

/* Add New Case */
/* ════════════════════════════════════════════════════════════════════════
   THE DOCKET (Cases redesign, Home standard) — editorial head row over ONE
   framed ledger card of matter ROWS. The gradient-hero tile form is GONE;
   _caseAccentColor stays (workflow cards, Home workload legend, and task
   accents consume the accent) — the accent now shows as a small functional
   identity dot on each row.
   ════════════════════════════════════════════════════════════════════════ */

/* Head row: eyebrow + serif headline + live subhead left, New Case right,
   over one shared strong rule (the Home head-row pattern). */
.cases-hd {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--space-3);
  flex-shrink: 0;
}
.cases-hd-text { min-width: 0; }
.cases-hd-eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bronze);
  margin-bottom: var(--space-1);
}
#view-cases .cm-hd-title { font-size: 32px; }   /* the view's headline moment */
.add-case-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-4); flex-shrink: 0; margin-bottom: var(--space-1);
  background: var(--accent); border: none; border-radius: var(--radius-sm);
  cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: #fff;
  transition: background 0.14s;
}
.add-case-btn:hover { background: var(--green-mid); }
.add-case-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* The matter list — DISTINCT cards with clear air between them ("unified but
   purpose-fit": distinguishing matters is this screen's purpose). */
.cases-grid {
  display: flex; flex-direction: column; gap: var(--space-4);
  flex-shrink: 0;
}

/* MATTER CARD — color-anchored, composed as one block, column-locked.
   Fixed grid so equivalent elements align pixel-perfectly across every card:
   [ content 1fr | View Case 130px | delete 32px ]. The thick left SPINE is the
   per-case identity (--case-accent, set inline by _addCase — a genuinely
   distinct editorial hue, deliberate and functional, not decoration). */
.case-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 32px;
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-5);
  padding-left: calc(var(--space-5) + 6px);
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05);
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color 0.15s, background-color 0.15s;
}
.case-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--case-accent, var(--green-sage));
}
.case-card:hover { background: var(--egg-hover); border-color: rgba(var(--ink-rgb),0.24); }
.case-card-main { min-width: 0; }
.case-card-name {
  font-size: 22px; font-weight: 400; line-height: 1.2;   /* serif via the RESKIN list */
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-card-name i { font-style: italic; color: var(--bronze); }
.case-card-meta {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: 6px; min-width: 0;
}
.case-card-type {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case-meta-sep { color: var(--text-muted); opacity: .6; flex-shrink: 0; }
.case-metric-wf {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; border-radius: var(--radius-sm); padding: 3px 6px; margin: -3px -6px;
  white-space: nowrap; flex-shrink: 0; transition: background 0.13s, color 0.13s;
}
.case-metric-wf:hover { background: rgba(var(--gold-rgb),0.12); color: var(--text-primary); }
.case-wf-count { font-weight: 700; color: var(--text-primary); }

/* Column-locked action: same width, same edge, every card. */
.case-card .case-view-btn { width: 100%; justify-content: center; margin: 0; }
.case-card .ratio-del-ctrl { opacity: 0; justify-self: center; }
.case-card:hover .ratio-del-ctrl { opacity: .6; }
.case-card .ratio-del-ctrl:hover { opacity: 1; }

/* Empty list — the quiet centered device (shows only with no cards). */
.cases-empty { display: none; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-4); text-align: center; }
.cases-grid:not(:has(.case-card)) .cases-empty { display: flex; }
.cases-empty::before { content: ''; width: 28px; height: 1px; background: var(--bronze); opacity: .6; margin-bottom: var(--space-2); }
.cases-empty-title { font-size: 19px; color: var(--text-primary); }   /* serif via the curated list */
.cases-empty-sub { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--text-muted); }

/* Deadline row */



/* Deadline urgency badges */


/* ═══════════════════════════════════════════════════
   WORKFLOWS VIEW
═══════════════════════════════════════════════════ */
#view-workflows {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 44px;
  gap: 32px;
}

#view-workflows.active { display: flex; }



.wfl-total-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--ink-rgb),0.1);
  color: var(--green-mid);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

/* Case group — COLLAPSIBLE: the most recently active case opens by default,
   every other case is a quiet single line; click toggles (state persists per
   session via sessionStorage). The grid sits in a 0fr/1fr expand wrapper. */
.wfl-group { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

/* ── CASE GROUP BAND — the QUIET PATTERN surface: a flat per-case identity
   gradient (both stops derived from the case's accent color, set as custom
   properties by _wflBandTint) under TWO faint flowing contour paths (inline
   SVG — one bronze .22, one cream .08, 1px). A whisper, not a graphic.
   The open band is the page's anchor (the Workflows ribbon was removed —
   first page of the header-variety direction). ── */
.wfl-group-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #16243C;   /* first-paint ink before the vars land */
  /* CLEAN composed header (redesign): the case-accent gradient only — the
     contour-SVG decoration was removed (read as noise, not identity). */
  background-image: linear-gradient(100deg, var(--case-band-a, #101C30) 0%, var(--case-band-b, #24395C) 100%);
  color: var(--logo-cream);
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb),.08);
}
.wfl-gh-text { position: relative; z-index: 1; min-width: 0; flex: 1; }
.wfl-gh-meta {
  display: flex; align-items: center; gap: 4px; margin-top: 5px;
  font-family: var(--font-sans); font-size: 12px; color: rgba(245,242,234,.7);
}
.wfl-group-chev { position: relative; z-index: 1; margin-left: auto; color: rgba(245,242,234,.75); flex-shrink: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.wfl-group.collapsed .wfl-group-chev { transform: rotate(-90deg); }
/* COLLAPSED SLIVER — slim, same surface, whole sliver clickable */
.wfl-group.collapsed .wfl-group-header {
  padding: var(--space-3) var(--space-4);
}
.wfl-group.collapsed .wfl-gh-meta { margin-top: 1px; font-size: 11px; }
.wfl-expand { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .38s cubic-bezier(.2,.8,.2,1); }
.wfl-group.collapsed .wfl-expand { grid-template-rows: 0fr; }
.wfl-expand-inner { overflow: hidden; }
.wfl-group.collapsed .wfl-group-name { font-size: 15.5px; }
@media (prefers-reduced-motion: reduce) {
  .wfl-expand, .wfl-group-chev { transition: none; }
}


.wfl-group-name {
  font-family: var(--font-display);   /* serif band title */
  font-weight: 400;
  font-size: 21px;
  color: #F5F2EA;
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wfl-group-name i { font-style: italic; font-weight: 400; color: #E8D9B8; }   /* the "v." */

.wfl-group-count {   /* on-band chip — translucent cream on the accent band */
  font-size: 11px;
  font-weight: 600;
  color: rgba(245,242,234,.85);
  background: rgba(245,242,234,.12);
  border: 1px solid rgba(245,242,234,.25);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.wfl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

/* Workflow card */
/* ── WORKFLOW MODULE — PROGRESS-FORWARD unit (redesign): the band already says
   which matter, so the card leads with MOMENTUM. Fixed row grid so equivalent
   elements (name / phase / progress / deadline / foot) align pixel-perfectly
   across every card: [name 44px | phase 16px | progress auto | deadline 26px |
   foot 34px]. Crisp bordered card, no hover-lift. ── */
.wfl-card {
  background: var(--egg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--egg-border);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05);
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  row-gap: var(--space-2);
  padding: var(--space-4);
  transition: border-color .15s, background-color .15s;
}
.wfl-card:not(.wfl-done) { grid-template-rows: 44px 16px auto 26px 34px; }
.wfl-card:hover {
  background: var(--egg-hover);
  border-color: rgba(var(--ink-rgb),0.24);
}
.wfl-mod-eyebrow {
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bronze);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92%;
}
.wfl-card .wfl-name {
  font-family: var(--font-display); font-weight: 400; font-size: 16.5px;
  color: var(--accent); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Labeled PHASE marker — dot + phase name (filled by _wfApplyPhaseAccent;
   color explained, not unexplained decoration) */
.wfl-phase { display: flex; align-items: center; gap: 6px; min-height: 14px; }
.wfl-phase-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wfl-phase-label {
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* THE PROGRESS HERO — task count over a full-width bronze bar, in flow */
.wfl-progress { min-width: 0; align-self: center; }
.wfl-card .wfl-tasks-strip {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--text-secondary); white-space: nowrap;
  background: transparent; padding: 0; border-radius: 0;
}
.wfl-thread { position: static; height: 6px; border-radius: var(--radius-pill); background: var(--egg-hover); overflow: hidden; margin-top: 6px; }
.wfl-thread-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--bronze), var(--bronze-bright)); transition: width .8s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .wfl-thread-fill { transition: none; } }
/* Deadline row — the urgency chip on a shared aligned baseline */
.wfl-dl-row { display: flex; align-items: center; min-height: 24px; }
.wfl-chip {
  display: inline-flex; align-items: center; gap: 0;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  white-space: nowrap;
  background: #F1EEE6; color: #5C6878;   /* quiet gray — distant dates */
}
.wfl-chip-dot { display: none; }
.wfl-chip-dl.dl-amber { background: rgba(201,137,59,.14); color: #A06A20; }
.wfl-chip-dl.dl-red   { background: rgba(192,57,43,.12);  color: #9C3328; }
.wfl-chip-dl.dl-none  { background: #F7F5EF; color: #9AA3AE; }
.wfl-chip-complete { letter-spacing: .1em; text-transform: uppercase; font-size: 9.5px; font-weight: 700; background: rgba(var(--gold-rgb),.16); color: var(--bronze); }
/* FOOT — Complete + Assign grouped as ONE cluster (never flung to far edges) */
.wfl-card-foot { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-start; }
/* ── THE ONE "Complete" CONTROL — Option B warm outline pill (the single shared
   class used on every surface: workflow cards, case-dashboard cards, the
   workflow-board header, and task rows). Warm surface + warm border + muted-navy
   text → bronze on hover → green when checked. ONE size everywhere (the old
   `-lg` + `.wfl-card` size overrides + the task-row bare-ring override are
   neutralized below). Reuses the existing mark/restore logic unchanged. ── */
.wfl-complete-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px 8px 10px;
  border-radius: 999px;
  border: 1px solid #e7ddc9;
  background: #fffdf9;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.wfl-complete-btn:hover { border-color: var(--bronze-bright); color: var(--bronze); background: rgba(var(--gold-rgb),.08); }
/* Hollow ring icon on the left */
.wfl-cb-ring {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.6px solid var(--text-muted);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.wfl-complete-btn:hover .wfl-cb-ring { border-color: var(--bronze); }
.wfl-cb-ring svg { width: 9px; height: 9px; flex-shrink: 0; display: block; opacity: 0; transition: opacity 0.12s; }
/* Checked / completed → green filled check-ring + tint, label reads "Completed" */
.wfl-complete-btn.checked { border-color: #1E5C3A; color: #1E5C3A; background: rgba(30,92,58,.10); }
.wfl-complete-btn.checked .wfl-cb-ring { background: #1E5C3A; border-color: #1E5C3A; }
.wfl-complete-btn.checked .wfl-cb-ring svg { opacity: 1; stroke: #fff; }
.wfl-complete-btn.checked .wfl-cb-label { font-size: 0; }
.wfl-complete-btn.checked .wfl-cb-label::before { content: 'Completed'; font-size: 12px; }
/* ONE size everywhere — the former variants collapse to the base */
.wfl-complete-btn-lg { padding: 8px 13px 8px 10px; font-size: 12px; gap: 8px; height: auto; border-radius: 999px; }
.wfl-complete-btn-lg .wfl-cb-ring { width: 15px; height: 15px; }
.wfl-complete-btn-lg .wfl-cb-ring svg { width: 9px; height: 9px; }

/* Completed module — SETTLED on light: compact + muted, COMPLETE wash pill */
.wfl-card.wfl-done {
  opacity: .72;
  min-height: 0;
  padding: 12px 16px 14px;
}
.wfl-card.wfl-done .wfl-name { font-size: 15px; color: var(--text-secondary); }

/* Row holding workflow name + complete button in the tasks view */

/* ── See Completed Workflows button ── */

/* ── Shared Case-Management landing header (banner-free; Cases / Workflows /
   Tasks share this look — only Home keeps the navy hero). Title + a one-line
   subhead that reflects real state; an optional control sits on the right. ── */
.cm-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-shrink: 0; }
/* Section eyebrow on the .cm-hd pages (Workflows, Calendar) — same DNA as the
   other Case-Management page eyebrows (mw-hd-eyebrow / docs-hd-eyebrow). */
.cm-hd-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); margin-bottom: 5px; }
.cm-hd-title { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--accent); line-height: 1.1; letter-spacing: -0.2px; }
.cm-hd-sub { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); margin-top: 5px; }
/* Billing belt eyebrow ("Time") — matches the Team Performance belt eyebrow. */
.time-belt-left { display: flex; flex-direction: column; min-width: 0; }
.time-belt-eye { font: 600 12px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #a8842f; margin-bottom: 4px; }
.wfl-completed-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fffdf9; border: 1px solid #e7ddc9; border-radius: 9px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; flex-shrink: 0; transition: background .13s, border-color .13s, color .13s; }
.wfl-completed-toggle:hover { background: rgba(var(--gold-rgb),.08); border-color: var(--bronze-bright); color: var(--bronze); }
.wfl-completed-toggle .wfl-completed-count-badge { font-size: 10px; font-weight: 700; color: var(--bronze); background: rgba(var(--gold-rgb),.12); padding: 3px 7px; border-radius: 999px; }
.wfl-completed-toggle svg { width: 13px; height: 13px; transition: transform .2s; flex-shrink: 0; }
.wfl-completed-toggle.open svg { transform: rotate(180deg); }

/* ── Workflows empty state — message + CTA lead ABOVE THE FOLD (no loading-style
   skeleton). A single quiet, clearly-decorative dashed outline anchors it without
   reading as a grey loading block. ── */
.wfl-empty { display: flex; flex-direction: column; align-items: center; gap: 18px; flex-shrink: 0; padding-top: 18px; }
.wfl-empty-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; }
.wfl-empty-mark { width: 54px; height: 54px; border-radius: 14px; border: 1.5px dashed rgba(156,122,63,.45); display: flex; align-items: center; justify-content: center; color: var(--bronze); margin-bottom: 4px; }
.wfl-empty-mark svg { width: 24px; height: 24px; }
.wfl-empty-cta-title { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--accent); }
.wfl-empty-cta-sub { font-family: var(--font-body); font-size: 15px; color: var(--text-secondary); line-height: 1.55; }
.wfl-empty-cta-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.wfl-empty-cta-btn { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: #fff; background: var(--accent); border: none; border-radius: 10px; padding: 11px 22px; cursor: pointer; transition: background .13s, transform .12s; }
.wfl-empty-cta-btn:hover { background: var(--green-mid); transform: translateY(-1px); }
.wfl-empty-cta-link { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--bronze); background: none; border: none; cursor: pointer; }
.wfl-empty-cta-link:hover { color: var(--accent); }

/* ── Completed Workflows collapsible section ── */
.wfl-completed-section {
  display: none;
  flex-direction: column;
  gap: 20px;
  padding: 22px 24px;
  background: #fffdf9;
  border: 1px solid #e7ddc9;
  border-radius: 14px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.wfl-completed-section.open { display: flex; }
.wfl-completed-hdr {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ece4d4;
}
.wfl-completed-hdr-title {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); flex: 1;
}
.wfl-completed-count-badge {
  font-size: 10px; font-weight: 700;
  background: rgba(var(--gold-rgb),.12); color: var(--bronze);
  padding: 3px 7px; border-radius: 999px;
}
.wfl-completed-empty {
  font-size: 12.5px; color: var(--text-muted);
  text-align: center; padding: 12px 0;
}

/* The .wfl-complete-overlay / .wfl-cm-* confirm shell was REMOVED — the
   task/workflow complete + delete-guard confirms route through the shared
   window._ratioConfirm (.rn-* shell). */

/* (The old EDITORIAL light-card treatment was replaced by the rich photo
   MODULE — see the WORKFLOW MODULE block above. The .wfl-ed-* / .wfl-divider
   classes are no longer emitted by the card builders.) */
/* Delete control on the light module — muted, top-right, reveals on hover. */
.wfl-card > .ratio-del-ctrl { position: absolute; top: 8px; right: 8px; z-index: 3; color: var(--text-muted); opacity: 0; transition: opacity .15s; }
.wfl-card:hover > .ratio-del-ctrl { opacity: 1; }
.wfl-card > .ratio-del-ctrl:hover { color: var(--danger); background: rgba(192,57,43,.1); }


.wfl-meta-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wfl-meta-row svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.wfl-meta-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}



.wfl-tasks-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-left: auto;
}


/* Case-specific workflow pages (static + dynamic via .wfl-case-view) */
.wfl-case-view {
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 44px;
  gap: 20px;
}

.wfl-case-header { flex-shrink: 0; }

.wfl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 14px;
}

.wfl-breadcrumb-btn {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: color 0.13s;
}

.wfl-breadcrumb-btn:hover { color: var(--green-mid); }

.wfl-breadcrumb-sep { color: var(--text-muted); }

.wfl-case-title-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 4px;
}

.wfl-case-title-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wfl-case-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.4px;
}

.wfl-case-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 400;
  padding-left: 22px;
}

/* See past cases */




/* (#view-case-detail view CSS removed 2026-07-03 — legacy screen gone. The
   `.cd-*` class rules below are RETAINED: they are shared with the live case
   dashboard, `casedash-*`.) */


/* 2×2 module grid */

/* Individual module card */

/* Case info rows */

/* Pie chart module */

/* Teammates module */

/* Workflows module */

/* "View Case" button on case cards */
.case-view-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 7px 12px; border-radius: 8px;
  border: 1.5px solid var(--egg-border); background: var(--egg-bg);
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
  color: var(--text-secondary); cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
  margin-top: 10px;
}
.case-view-btn:hover { background: rgba(var(--ink-rgb),0.07); border-color: var(--green-mid); color: var(--forest); }
.case-view-btn svg { transition: transform 0.15s; }
.case-view-btn:hover svg { transform: translateX(2px); }

/* ═══════════════════════════════════════════════════
   CALENDAR VIEW
═══════════════════════════════════════════════════ */
#view-calendar {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 44px;
  gap: 24px;
}
#view-calendar.active { display: flex; }

/* ── THE MONTH CARD (calendar redesign): one composed bordered card — the
   card's header row IS the control bar (serif Month/Year · ‹ › paging + Today ·
   the matter-legend toggle chips · a quiet Sync link), then ONE continuous navy
   weekday band over the month grid. Gridlines stay the deliberate WARM #ECE8DE
   (not the cool --egg-border). ── */
.cal-card {
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .06);
  overflow: hidden;
  flex-shrink: 0;
}
.cal-card-hd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--egg-border);
}
.cal-hd-spring { flex: 1 1 auto; }   /* balances the row: title+nav left · mode+sync right */

/* Week | Month view switch (the seg pattern) */
.cal-mode {
  display: inline-flex;
  background: var(--egg-hover);
  border: 1px solid var(--egg-border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
  height: 34px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.cal-mode button {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--text-muted);
  background: none; border: none;
  border-radius: 6px;
  padding: 0 14px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.cal-mode button.active {
  background: var(--egg-card);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(var(--ink-rgb),.10);
}

.cal-month-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cal-nav-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1.5px solid var(--egg-border);
  background: var(--egg-card);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.cal-nav-btn:hover {
  background: var(--egg-hover);
  border-color: var(--green-mid);
  color: var(--green-dark);
}
.cal-nav-btn svg { width: 14px; height: 14px; }

.cal-today-btn {
  height: 34px; padding: 0 14px;
  border-radius: 9px;
  border: 1.5px solid var(--egg-border);
  background: var(--egg-card);
  cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.cal-today-btn:hover { background: var(--egg-hover); border-color: var(--green-mid); color: var(--green-dark); }

.cal-month-title {
  font-family: var(--font-display);   /* serif month title */
  font-size: 26px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  line-height: 1.1;
  min-width: 260px;   /* fits the longest week-range string ("Sep 28 – Oct 4, 2026") PLUS
                         the caret + its gap + padding below, so the ‹ › paging buttons
                         never shift under repeated clicks */
  flex-shrink: 0;
  cursor: pointer;   /* click opens the shared month/year jump popover (window._openMiniDatePicker) */
  /* a visible, button-like affordance (padding+radius+caret) so it doesn't read as
     inert text sitting next to the ‹ › buttons — a bare color-on-hover wasn't
     discoverable enough */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
  user-select: none;   /* clicking to open/close the popover shouldn't text-select the date */
}
.cal-month-title:hover { background: rgba(var(--gold-rgb),.10); color: var(--bronze); }
.cal-month-caret { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-muted); transition: color .12s; }
.cal-month-title:hover .cal-month-caret { color: var(--bronze); }

/* ── window._openMiniDatePicker — the shared month/year jump popover (used by
   the Calendar page's .cal-month-title AND the case-dashboard's .cd-cal-range;
   ONE singleton element, positioned fixed from the clicked label's rect). ── */
/* ── RATIO'S DATE PICKER (.dp-*) ───────────────────────────────────────────────
   The field + the day popover that replaced every <input type="date">. Sits
   beside .mdp-popover deliberately: they are the same popover family (warm
   #e7ddc9 border, radius-md, soft depth, bronze hover) and should stay visibly
   related — .mdp-* jumps a calendar to a month, .dp-* picks a single day.

   THE FIELD IS A <button> that reads as a text field. See the header comment on
   window._openDatePicker for why it cannot be an input: the value and its
   display have to be the same element or a programmatic write drifts them
   apart silently. */
.dp-field {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  box-sizing: border-box; width: 100%; min-width: 0;
  padding: 8px 10px; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--accent); background: #fffdf9;
  border: 1px solid #e7ddc9; border-radius: var(--radius-sm);
  transition: border-color .13s, box-shadow .13s, background .13s;
}
.dp-field:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.05); }
/* :focus-visible so a mouse click doesn't leave a ring behind, but a keyboard
   user always sees where they are. */
.dp-field:focus-visible {
  outline: none; border-color: var(--bronze-bright);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.14);
}
.dp-field[aria-expanded="true"] { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.06); }
/* Empty state is muted + italic Spectral — the same "nothing here yet" voice
   the rest of the app uses for an unset value, never a bare dash. */
.dp-field.dp-empty .dp-field-val { color: var(--text-muted); font-family: var(--font-body); font-style: italic; font-weight: 400; }
.dp-field-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-field-icon { width: 14px; height: 14px; flex: none; color: var(--bronze); opacity: .8; }
.dp-field:hover .dp-field-icon, .dp-field[aria-expanded="true"] .dp-field-icon { opacity: 1; }

.dp-pop {
  position: fixed; z-index: 5001;          /* above .mdp-popover's 5000 */
  width: 268px; padding: 12px;
  background: var(--egg-card);
  border: 1px solid #e7ddc9; border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(var(--ink-deep-rgb),0.18);
  display: none; user-select: none;
}
.dp-pop.open { display: block; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 8px; }
.dp-nav {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  border: 1px solid #e7ddc9; background: #fffdf9; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .13s, background .13s, color .13s;
}
.dp-nav:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.10); color: var(--bronze); }
.dp-nav svg { width: 12px; height: 12px; }
/* The month label doubles as the month/year switch — same affordance as the
   Calendar page's range label (always-visible caret + a hover pill), so the
   behaviour is learned once and works in both places. */
.dp-label {
  display: inline-flex; align-items: center; gap: 5px; flex: 1; justify-content: center;
  padding: 4px 8px; border: 1px solid transparent; border-radius: 8px;
  background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 16px; font-weight: 400; color: var(--text-primary);
  transition: background .13s, color .13s;
}
.dp-label svg { width: 11px; height: 11px; color: var(--bronze); flex: none; }
.dp-label:hover { background: rgba(var(--gold-rgb),.10); color: var(--bronze); }
.dp-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid #ece4d4;
}
.dp-dow span {
  text-align: center; font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; color: var(--text-muted);
}
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day {
  height: 30px; border: 1px solid transparent; border-radius: 8px; background: none;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; position: relative;
  transition: background .1s, color .1s, border-color .1s;
}
.dp-day:hover:not(.off) { background: rgba(var(--gold-rgb),.12); color: var(--bronze); }
.dp-day:focus-visible { outline: none; border-color: var(--bronze-bright); box-shadow: 0 0 0 2px rgba(var(--gold-rgb),.18); }
/* Leading/trailing days of the neighbouring months: reachable (clicking one
   pages the view) but clearly not this month. */
.dp-day.other { color: var(--text-muted); opacity: .45; font-weight: 500; }
/* TODAY is a bronze dot under the numeral — the same marker the month-jump
   popover uses. SELECTED is the navy fill. A day that is both keeps the fill
   and drops the dot, since the fill already says "this one". */
.dp-day.is-today::after {
  content: ''; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--bronze);
}
.dp-day.sel {
  background: var(--accent); color: #fff; font-weight: 700; border-color: var(--accent);
}
.dp-day.sel::after { display: none; }
.dp-day.sel:hover { background: var(--green-mid); color: #fff; }
.dp-day.off { opacity: .3; cursor: not-allowed; }
.dp-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid #ece4d4;
}
.dp-foot-btn {
  flex: 1; padding: 6px 10px; border-radius: 8px;
  border: 1px solid #e7ddc9; background: #fffdf9;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--text-secondary); cursor: pointer;
  transition: border-color .13s, background .13s, color .13s;
}
.dp-foot-btn:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.10); color: var(--bronze); }
.dp-foot-btn.dp-clear:hover { border-color: rgba(var(--danger-rgb),.5); background: rgba(var(--danger-rgb),.07); color: var(--danger); }
/* Month/year mode — one popover, two faces, no nested popover to trap focus. */
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dp-month {
  padding: 10px 0; border: 1px solid transparent; border-radius: 8px; background: none;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; position: relative; transition: background .1s, color .1s, border-color .1s;
}
.dp-month:hover { background: rgba(var(--gold-rgb),.12); color: var(--bronze); }
.dp-month.sel { background: var(--accent); color: #fff; font-weight: 700; border-color: var(--accent); }
.dp-month.is-today::after {
  content: ''; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--bronze);
}
.dp-month.sel.is-today::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .dp-field, .dp-nav, .dp-day, .dp-month, .dp-foot-btn, .dp-label { transition: none; }
}

.mdp-popover {
  position: fixed;
  z-index: 5000;
  width: 232px;
  background: var(--egg-card);
  border: 1px solid #e7ddc9;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(var(--ink-deep-rgb),0.18);
  padding: 14px;
  display: none;
}
.mdp-popover.open { display: block; }
.mdp-year-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mdp-year-btn {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e7ddc9; background: #fffdf9;
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mdp-year-btn:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.10); }
.mdp-year-btn svg { width: 13px; height: 13px; }
.mdp-year-label { font-family: var(--font-display); font-size: 17px; color: var(--text-primary); }
.mdp-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mdp-month-btn {
  padding: 8px 0; border-radius: 8px; border: 1px solid transparent; background: none;
  font: 600 12.5px 'Inter', sans-serif; color: var(--text-secondary); cursor: pointer; text-align: center;
  position: relative;
}
.mdp-month-btn:hover { background: var(--egg-hover); }
.mdp-month-btn.current { background: rgba(var(--gold-rgb),.14); border-color: var(--bronze-bright); color: var(--bronze); font-weight: 700; }
.mdp-month-btn.is-today-month::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--bronze-bright);
}

/* Matter legend — a PROPER legend on its own full-width row under the control
   bar: a readable square swatch in each case's CANONICAL accent + the case's
   first-party name (no character-cut; full name in the tooltip). Click toggles
   that matter's dates; the Outlook chip rides the row; "Show all" resets. */
.cal-legend-row {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--rule-strong);
}
.cal-legend {
  display: flex;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.cal-legend button {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--accent);
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: var(--radius-pill);
  padding: 7px var(--space-4) 7px 11px;
  cursor: pointer;
  max-width: 280px;
  transition: .13s;
}
.cal-legend button .ld { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; transition: .13s; }
.cal-legend button:hover { border-color: var(--bronze-bright); box-shadow: 0 2px 7px rgba(var(--ink-rgb),.07); }
.cal-legend button.off { color: var(--text-muted); background: transparent; }
.cal-legend .reset {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  color: var(--bronze);
  background: none; border: none; cursor: pointer;
  padding: 7px var(--space-1);
  text-decoration: underline; text-underline-offset: 2px;
}

/* MATTER PICKER (.cal-mp) — the legend's height is now constant no matter how
   many matters a firm has. Before this the row was one chip per matter with
   flex-wrap, which at the canonical firm's 42 matters produced 44 chips and
   ~370px of vertical space above the grid; the calendar effectively started
   half a screen down. The row no longer wraps at all (flex-wrap: nowrap +
   min-width: 0 on the picker), so a long matter name shortens the trigger
   rather than pushing the utility chips onto a second line. */
.cal-legend { flex-wrap: nowrap; overflow: visible; }
.cal-legend .cal-mp { flex: 0 1 auto; min-width: 0; }
.cal-legend button { flex: 0 0 auto; }
/* CHIP MODE (a firm under CAL_PICKER_MIN matters, JS adds this class): no picker
   is rendered, so every matter is a chip you toggle directly. Wrapping is safe
   here and nowhere else - the count is bounded by the threshold, so the worst
   case is a second short row on a narrow window rather than the unbounded wall
   the picker exists to prevent. */
.cal-legend.cal-legend-chips { flex-wrap: wrap; }
/* Two classes + the id, deliberately: the shared .bill-dd-trigger rule lives
   ~3000 lines LATER in this file, and at equal specificity the later rule wins —
   a plain `#view-calendar .bill-dd-sm` was silently losing its height to it and
   the trigger came out 40px beside 31px chips. Specificity, not source order,
   because the shared block may be moved or extended by a future consumer. */
#view-calendar .bill-dd-trigger.bill-dd-sm { height: 32px; border-radius: var(--radius-pill); padding: 0 13px; }
/* The panel is anchored to the trigger and sits over the weekday strip; z-index
   clears .cal-dow and the grid, and stays under the notification dropdown. */
#view-calendar .cal-mp-panel { width: 320px; z-index: 60; }
#view-calendar .cal-mp-bulkrow {
  display: flex; gap: var(--space-3); align-items: center;
  padding: 0 4px var(--space-2); margin-bottom: var(--space-2);
  border-bottom: 1px solid #ece4d4;
}
#view-calendar .cal-mp-bulk {
  font: 600 11px/1 var(--font-sans); color: var(--bronze);
  background: none; border: none; cursor: pointer; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 2px;
}
#view-calendar .cal-mp-bulk:hover { color: #a8842f; }
/* A matter row is a checklist line, so the swatch reads as identity rather than
   as the chip's own colour: keep it square, matching the legend chip's .ld. */
/* Two classes + the id again, same reason as the trigger above: the shared
   .bill-dd-opt .cdot rule (border-radius: 50%) sits later in the file at equal
   specificity, so the plain selector silently lost and these came out round. The
   swatch is SQUARE to match the .ld swatch on the legend chips beside it. */
#view-calendar .bill-dd-opt.cal-mp-opt .cdot { width: 11px; height: 11px; border-radius: 3px; }

.cal-sync-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: 9px;
  border: 1.5px solid var(--egg-border);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  transition: background 0.13s, border-color 0.13s, color 0.13s;
  flex-shrink: 0;
}
.cal-sync-btn:hover { background: var(--egg-hover); border-color: var(--green-mid); color: var(--green-dark); }
.cal-sync-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Weekday band — ONE continuous navy strip inside the card (a single gradient,
   not seven per-cell gradients, so there are no hairline seams). */
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: linear-gradient(100deg, #16243C, #22375A);
}
.cal-dow-cell {
  color: #F5F2EA;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 10px 0;
  text-align: center;
}

/* ── CALENDAR GRID: deadlines as bold case-spined text, billed time demoted
   to a small bronze hover-dot. The card owns the outer frame; the grid's 1px
   gaps over the warm background ARE the gridlines. ── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* minmax, not a fixed length: a row must be AT LEAST --cal-row-h, but grows
     to fit its tallest day's content. Fixed 96px + .cal-day's overflow:hidden
     was silently clipping the capped event list — often the "+N more" chip
     itself — whenever a day had more than ~2 events. (Week view already uses
     plain `auto` via its own override below.) */
  grid-auto-rows: minmax(var(--cal-row-h, 96px), auto);
  gap: 1px;
  padding-top: 1px;
  background: #ECE8DE;              /* the thin warm gridlines */
  flex-shrink: 0;
}

/* ── WEEK VIEW (the default): seven tall day columns with room for FULL event
   text — the fix for tiny truncated entries. Same cell/event anatomy as the
   month grid (one click handler, one popup, one color system). ── */
.cal-grid.cal-week { grid-auto-rows: auto; }
.cal-grid.cal-week .cal-day {
  min-height: 380px;
  padding: 10px 10px 12px;
  gap: 6px;
}
.cal-grid.cal-week .cal-day-num { font-size: 15px; width: 28px; height: 28px; margin-bottom: 4px; }
.cal-grid.cal-week .cal-event {
  white-space: normal;              /* full (or near-full) titles */
  font-size: 12.5px;
  line-height: 1.35;
  padding: 5px 8px 5px 9px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--egg-bg);
}
.cal-grid.cal-week .cal-event-ext { font-size: 12px; }

.cal-day {
  position: relative;
  background: #FFFFFF;
  overflow: hidden;
  padding: 8px 9px 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 96px;
  transition: background 0.13s;
}

.cal-day:hover { background: var(--egg-hover); }

.cal-day.other-month {
  background: rgba(245,242,237,0.55);
}
.cal-day.other-month:hover { background: rgba(238,234,228,0.8); }

.cal-day-num {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  align-self: flex-start;
  flex-shrink: 0;
  margin-bottom: 1px;
  user-select: none;   /* clicking a day cell (to open the day popup) shouldn't highlight the number */
}

.cal-day.other-month .cal-day-num {
  color: var(--text-muted);
  font-weight: 500;
}

/* PRESSURE SIGNAL — a day with 3+ hero deadlines gets a faint warm wash so
   collision days read at a month glance. (Today's cream, below, still wins.) */
.cal-day.heavy { background: #F8F1E1; }

/* TODAY — soft cream cell + navy-circled date */
.cal-day.today { background: #FBF6EA; }
.cal-day.today .cal-day-num {
  background: var(--accent);
  color: #F5F2EA;
}

/* DEADLINES = HEROES — bold dark text with a colored 3px type-spine
   (spine color = event kind, set inline by render()). */
.cal-event {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  padding: 1px 4px 1px 7px;
  border-radius: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  flex-shrink: 0;
  cursor: pointer;
  border-left: 3px solid;
  line-height: 1.4;
  transition: opacity 0.13s;
}
.cal-event:hover { opacity: 0.7; }

/* COURT DATES — the one heavier typographic treatment (kind no longer owns a
   color channel): bold on a case-color TINT fill (set inline, ~13% alpha of
   the case hue); the 3px spine stays the solid case color. */
.cal-event-court {
  font-weight: 700;
  border-radius: 0 4px 4px 0;
}

/* TARGETS — Ratio's SUGGESTED runway date, shared by both calendars (the
   Calendar page and the case-dashboard mini). A dashed outline with no fill and
   the leading glyph, deliberately unlike every obligation treatment above: a
   suggestion must not be mistakable for a court date at a glance. Colour comes
   inline (case hue on the Calendar page, workstream phase on the mini, since
   within one matter the case hue carries no information). */
.cal-event-target {
  border: 1px dashed;
  border-radius: 0 4px 4px 0;
  background: transparent;
  font-weight: 700;
}

/* EXTERNAL (Outlook) events — visually RECESSIVE context, never a deadline
   hero: muted gray, lighter weight, hairline spine, a small Outlook glyph.
   Read-only (no routing into Ratio entities). */
.cal-event-ext {
  font-weight: 500;
  color: #8B97A8;
  background: rgba(139,151,168,.07);
  border-left: 2px solid rgba(139,151,168,.45);
  font-style: italic;
  display: flex; align-items: center; gap: 4px;
}
.cal-event-ext .cal-ext-dot {
  flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: #5A7BA0;   /* Outlook blue-gray dot */
}
.cal-event-more {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  color: var(--bronze);
  padding: 0 4px 0 7px;
  cursor: pointer;
  white-space: nowrap;
}
.cal-event-more:hover { color: var(--accent); }

/* BILLED TIME — a small bronze dot, top-right; the hours live in its
   native title tooltip. Never competes with the deadlines. */
.cal-billed-dot {
  position: absolute;
  top: 9px; right: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(201,169,97,.55);
}

/* ═══════════════════════════════════════════════════
   WORKFLOW TASKS STRIP (replaces static tasks row)
═══════════════════════════════════════════════════ */
/* Open affordance — inline in the body foot (count + label + chevron), not a bar. */
.wfl-tasks-strip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  transition: color 0.13s;
}
.wfl-tasks-strip:hover .wfl-ts-chevron { color: var(--green-mid); transform: translateX(3px); }
.wfl-ts-count {
  font-family: var(--font-display);   /* serif number — editorial */
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.2px;
  line-height: 1;
}
.wfl-ts-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.wfl-ts-chevron {
  width: 14px; height: 14px;
  color: var(--text-muted);
  align-self: center;
  flex-shrink: 0;
  transition: transform 0.13s, color 0.13s;
}

/* ═══════════════════════════════════════════════════
   TASKS VIEW
═══════════════════════════════════════════════════ */
#view-tasks {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 36px 44px;
  gap: 22px;
}
#view-tasks.active { display: flex; }
/* Workflow dashboard: the task board panel spans full width beneath the
   supporting panels; a little more breathing room around the columns. */

.tasks-view-header { flex-shrink: 0; }

.tasks-workflow-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  margin-bottom: 5px;
}
.tasks-wf-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 70ch;
  margin-top: 10px;
}
/* Workflow-level deadline rows (reuse the board's .thb-dl urgency badge) */
.tasks-wfdl-list { display: flex; flex-direction: column; gap: 8px; }
.tasks-wfdl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--egg-border); border-radius: 10px;
  background: var(--egg-bg);
}
.tasks-wfdl-desc { font-family: var(--font-sans); font-size: 13px; color: var(--text-primary); min-width: 0; }

/* When the task panel itself is too narrow for two comfortable columns, stack
   to one column rather than overflow. A container query (not a viewport media
   query) so it tracks the PANEL's real width regardless of the hover sidebar. */
@container (max-width: 720px) {
  .dash-tasks-panel .tasks-columns { grid-template-columns: 1fr; }
}


/* Tasks-home recent list — TWO-COLUMN responsive card grid (1 col when narrow). */
.task-item {
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: 10px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: default;            /* the row is a container; only .task-item-open opens the task */
  transition: transform 0.13s, box-shadow 0.13s, border-color 0.13s;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb),0.04);
}
.task-item.task-done { opacity: 0.62; }
.task-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--ink-deep-rgb),0.08);
  border-color: rgba(var(--ink-rgb),0.22);
}
/* The unambiguous "open this task" target: the dot + task name (+ meta).
   The Complete / timer / delete controls sit outside this and stay distinct. */
.task-item-open {
  display: flex; align-items: center; gap: 11px;
  flex: 1; min-width: 0; cursor: pointer;
  /* stretch the hit area through the row's vertical padding so the whole
     name band is clickable, without overlapping the right-side controls */
  margin: -10px 0; padding: 10px 0;
}
.task-item-open:hover .task-item-text { color: var(--accent); }
.task-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.task-dot.ip { background: #4A9DB8; }
.task-dot.ns { background: transparent; border: 1.5px solid var(--text-muted); }
.task-item-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* ── Assignee avatar stack on task pills/rows (2 + "+N") — small variant of
   .td-atty-avatar, sized for a 13px pill, overlapped with a card-color ring. ── */
.task-av-stack { display: inline-flex; align-items: center; flex-shrink: 0; }
.task-av-stack .task-av:not(:first-child) { margin-left: -7px; }
.task-av {
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 9.5px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--egg-card); box-sizing: border-box; flex-shrink: 0;
}
.task-av-more { background: var(--egg-hover); color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════
   TASKS HOME VIEW
═══════════════════════════════════════════════════ */
#view-tasks-home {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 44px;
  gap: 28px;
}
#view-tasks-home.active { display: flex; }

/* ── STATUS-PIPELINE BOARD (tasks landing) ───────────────────────────── */
.thb-head { display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   PRE-DEMO POLISH — empty-state scaffolds (Tasks/Workflows), Tasks sub-tabs +
   Reviews panel, Home "Action | Reviews" tabs. Reuses the navy/bronze/cream
   tokens + DM Serif / Spectral / Inter roles; pages fill width.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tasks: empty board scaffold (labeled lanes + dashed drop-zones) ── */

/* ── Tasks: editorial page header — eyebrow + serif title over the baseline
   rule (the Tasks|Reviews sub-tab switch was removed 2026-07-02; Reviews lives
   on Home's Action|Reviews tab + the standalone #view-reviews) ── */
.mw-hd-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--rule-strong); }
.mw-hd { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-3); }
.mw-hd-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); }
.mw-hd-title { font-size: 30px; color: var(--accent); line-height: 1.1; }   /* DM Serif via the curated list */

/* ── Home: "Action | Reviews" tabs in the Today zone ── */
.home-today-tabs { display: flex; gap: var(--space-4); }   /* the shared rule lives on .home-today-head */
.home-tt-btn { position: relative; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); background: none; border: none; padding: 4px 2px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: color .13s; }
.home-tt-btn:hover { color: var(--text-secondary); }
.home-tt-btn.active { color: var(--bronze); }
.home-tt-btn.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bronze); border-radius: 2px; }
.home-tt-badge { font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: 0; line-height: 1; color: #fff; background: var(--bronze); border-radius: 20px; padding: 3px 6px; }
.home-tt-pane { display: none; }
.home-tt-pane.active { display: block; }
.home-rv-list { display: flex; flex-direction: column; gap: 9px; }
.home-rv-sec-label { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; }
.home-rv-sent-label { margin-top: 18px; }
.home-rv-alllink { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--bronze); cursor: pointer; margin-top: 16px; }
.home-rv-alllink:hover { color: var(--accent); }
.thb-card { background: var(--egg-card); border: 1px solid var(--egg-border); border-left: 4px solid var(--egg-border); border-radius: 10px; padding: 11px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 1px 2px rgba(24,40,63,.04); transition: transform .12s, box-shadow .12s, border-color .12s; }
.thb-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(24,40,63,.30); }
.thb-card-title { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--accent); line-height: 1.25; }
.thb-dl { font-family: var(--font-sans); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 13px; white-space: nowrap; flex-shrink: 0; border: 1px solid var(--egg-border); background: var(--egg-bg); color: var(--text-secondary); }
.thb-dl-overdue { border-color: rgba(192,57,43,.4); background: rgba(192,57,43,.09); color: var(--danger-deep); }
.thb-dl-soon { border-color: rgba(239,166,58,.5); background: rgba(239,166,58,.12); color: #8A5F14; }
.thb-dl-later { color: var(--text-secondary); }
.thb-dl-none { color: var(--text-muted); }
/* faint card tint so approaching deadlines surface within a column */
/* runway TARGET chip on a board card — its own line below the meta so it reads
   as secondary to (and never crowds) the court-deadline badge. */


/* See All Tasks button + empty state */

/* (.task-completed-wrap / .task-see-completed-btn + the .task-completed-* widget
   CSS removed — the phantom completed-tasks "See completed" section is gone.) */
/* ta-task-row completed state */
.ta-task-row.task-done { opacity: 0.62; }

/* ── All Tasks view ── */
#view-tasks-all {
  display: none; flex-direction: column;
  overflow-y: auto; padding: 40px 44px; gap: 20px;
}
#view-tasks-all.active { display: flex; }

/* ── Dashboard shell (reusable for case + workflow dashboards) ──
   Calm, oriented, navy. The header + panel + deadline patterns below are
   shared design DNA: the workflow dashboard reuses these same classes. */
.dash { display: none; flex-direction: column; gap: 22px; overflow-y: auto; padding: 36px 44px; }
.dash.active { display: flex; }
.dash-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-shrink: 0; }
.dash-breadcrumb-btn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-secondary); }
.dash-breadcrumb-btn:hover { color: var(--green-mid); text-decoration: underline; }
.dash-breadcrumb-sep { color: var(--text-muted); }
.dash-breadcrumb-cur { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Header — the "what is this matter" orientation block */
.dash-header {
  background: rgba(var(--ink-rgb),0.045); border: 1px solid var(--egg-border);
  border-left: 4px solid var(--green-mid); border-radius: 14px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 9px; flex-shrink: 0;
}
.dash-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.dash-title-row { display: flex; align-items: center; gap: 11px; }
.dash-title-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dash-title { font-size: 23px; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin: 0; }
.dash-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px;
  font-size: 12px; font-weight: 600; background: var(--egg-hover); color: var(--text-secondary);
}

/* Panels — calm cards that hold each section of the dashboard */
.dash-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.dash-panel { background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb),0.05); }
.dash-panel-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--egg-border); }
.dash-panel-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.dash-panel-count { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--egg-hover); padding: 2px 9px; border-radius: 20px; }
.dash-panel-body { padding: 13px 16px 16px; }

.dash-empty { font-size: 12.5px; color: var(--text-muted); padding: 6px 2px; line-height: 1.45; }

/* Workflow list container (reusable) — the cards inside are the shared
   .wfl-card component (window._wflMakeCardFor), not styled here. */
.dash-wf-list { display: flex; flex-direction: column; gap: 8px; }
.dash-panel-link { font-size: 12px; font-weight: 700; color: var(--green-mid); cursor: pointer; }
.dash-panel-link:hover { text-decoration: underline; }

/* ── Case dashboard redesign (S3): 2-col top row + full-width calendar ── */
#view-case-dashboard .cd-top { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
#view-case-dashboard .cd-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 980px) { #view-case-dashboard .cd-top { grid-template-columns: 1fr; } }
/* Workflows: two-column compact card grid (overrides the shared flex-column list) */
/* align-items:start so each card sizes to its OWN content — expanding one card's
   roadmap (cd-rmp-slot) must NOT stretch its row sibling into a tall blank blob. */
#view-case-dashboard #dash-wf-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; align-items: start; }
@media (max-width: 1280px) { #view-case-dashboard #dash-wf-list { grid-template-columns: 1fr; } }
#view-case-dashboard #dash-wf-list .wfl-card { margin: 0; }
.cd-rmp-slot { margin-top: 10px; }
/* Billing figures (real, inline) — RESTRUCTURED: hero figure + caption, two
   hairline-divided stat cells, then a divided Top-billers list. */
.cd-bill-hero { display: flex; align-items: flex-end; gap: 8px; }
.cd-bill-fig { font-family: var(--font-display); font-size: 38px; line-height: 1; color: var(--text-primary); }
.cd-bill-figunit { font-family: var(--font-display); font-size: 15px; color: var(--text-muted); padding-bottom: 5px; }
.cd-bill-cap { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin: 4px 0 16px; }
.cd-bill-stats { display: flex; border-top: 1px solid #ece4d4; border-bottom: 1px solid #ece4d4; margin-bottom: 16px; }
.cd-bill-stat { flex: 1; padding: 12px 0; text-align: center; }
.cd-bill-stat + .cd-bill-stat { border-left: 1px solid #ece4d4; }
.cd-bill-statv { font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--text-primary); }
.cd-bill-statl { font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.cd-bill-sub { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.cd-bill-contribs { display: flex; flex-direction: column; }
.cd-bill-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #ece4d4; }
.cd-bill-row:last-child { border-bottom: none; }
.cd-bill-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cd-bill-name { font-family: var(--font-body); font-size: 14px; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-bill-hrs { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.cd-cal-sub { font-size: 11.5px; color: var(--text-muted); }
/* The calendar panel is a DIRECT flex child of the fixed-height, scrolling
   `.dash` column; as a `.dash-panel` it has `overflow:hidden`, which sets a flex
   item's automatic min-height to 0 — so without this it gets compressed to a
   ~2px sliver instead of sizing to the grid (same fix as `.rmp-panel`). */
.cd-cal-panel { flex-shrink: 0; }

/* ── WARM EDITORIAL HEADER (replaces the navy ink-ribbon slab) ── */
#view-case-dashboard .cd-head { border-bottom: 1px solid #e7ddc9; padding-bottom: 20px; margin-bottom: 24px; }
#view-case-dashboard .cd-eyebrow { font: 600 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
#view-case-dashboard .cd-title { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.12; color: var(--text-primary); margin: 11px 0 14px; }
#view-case-dashboard .cd-title i { font-style: italic; font-weight: 400; }
#view-case-dashboard .cd-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#view-case-dashboard .cd-tag { font: 600 11px/1 var(--font-sans); color: var(--text-secondary); background: #fffdf9; border: 1px solid #e7ddc9; border-radius: 999px; padding: 8px 13px; display: inline-flex; align-items: center; gap: 7px; }
#view-case-dashboard .cd-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #1E5C3A; }
#view-case-dashboard .cd-status:not(.active) .cd-status-dot { background: var(--text-muted); }
#view-case-dashboard .cd-edit { color: var(--bronze); cursor: pointer; }
#view-case-dashboard .cd-edit:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.10); }
#view-case-dashboard .cd-edit svg { width: 13px; height: 13px; }

/* ── SECTION / CARD HEADERS harmonized (bronze caps label + count chip) ── */
#view-case-dashboard .dash-panel { border-color: #e7ddc9; }
#view-case-dashboard .dash-panel-hd { border-bottom-color: #ece4d4; }
#view-case-dashboard .dash-panel-title { font: 600 12px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
#view-case-dashboard .dash-panel-count { color: var(--text-muted); background: #fffdf9; border: 1px solid #e7ddc9; }

/* ── CALENDAR (mirrors the Calendar page: DM-Serif range title, ‹ ›+Today,
   Week/Month toggle, navy weekday strip via the shared .cal-dow, today-highlight
   via .cal-day.today; NO filter chips, NO Sync). ── */
#view-case-dashboard .cd-cal-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
#view-case-dashboard .cd-cal-left { display: flex; align-items: center; gap: 14px; }
#view-case-dashboard .cd-cal-range {
  font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--text-primary);
  min-width: 220px;   /* fits the longest week-range string PLUS the caret/gap/padding below,
                         so the nav buttons beside it never shift */
  flex-shrink: 0; cursor: pointer;
  /* a visible, button-like affordance — see .cal-month-title's identical fix for why */
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
  user-select: none;   /* clicking to open/close the popover shouldn't text-select the date */
}
#view-case-dashboard .cd-cal-range:hover { background: rgba(var(--gold-rgb),.10); color: var(--bronze); }
#view-case-dashboard .cd-cal-caret { width: 11px; height: 11px; flex-shrink: 0; color: var(--text-muted); transition: color .12s; }
#view-case-dashboard .cd-cal-range:hover .cd-cal-caret { color: var(--bronze); }
#view-case-dashboard .cd-cal-nav { display: flex; gap: 6px; }
#view-case-dashboard .cd-cal-navbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e7ddc9; background: #fffdf9; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#view-case-dashboard .cd-cal-navbtn:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.10); }
#view-case-dashboard .cd-cal-navbtn svg { width: 15px; height: 15px; }
#view-case-dashboard .cd-cal-today { font: 600 12px/1 var(--font-sans); color: var(--text-secondary); background: #fffdf9; border: 1px solid #e7ddc9; border-radius: 8px; padding: 0 14px; height: 32px; cursor: pointer; }
#view-case-dashboard .cd-cal-today:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.10); }
#view-case-dashboard .cd-cal-toggle { display: inline-flex; background: #fffdf9; border: 1px solid #e7ddc9; border-radius: 9px; padding: 3px; }
#view-case-dashboard .cd-cal-toggle button { font: 600 12px/1 var(--font-sans); padding: 8px 16px; border-radius: 7px; color: var(--text-muted); background: none; border: none; cursor: pointer; }
#view-case-dashboard .cd-cal-toggle button.on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 2px rgba(24,40,63,.1); }
#view-case-dashboard .cd-cal-body { border: 1px solid #e7ddc9; border-radius: 12px; overflow: hidden; }
/* The runway TARGET pill's look lives in the SHARED .cal-event-target rule (see
   the .cal-event family above) so both calendars carry one treatment. The old
   .cd-cal-target click-routing hook is GONE — a derived target now carries the
   same durable refs as any other pill and routes through _calRouteEvent. */
/* Prominent primary action for a panel header (mirrors .mt-btn / .rvw-open-btn accent DNA) */
.dash-manage-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; background: var(--accent); color: #fff;
  border: none; border-radius: 9px; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; flex-shrink: 0;
  transition: background 0.13s, box-shadow 0.13s;
  box-shadow: 0 1px 5px rgba(var(--ink-rgb),0.2);
}
.dash-manage-btn:hover { background: var(--green-dark); box-shadow: 0 2px 9px rgba(var(--ink-rgb),0.28); }
/* Contextual "+ Workflow" / "+ Task" — secondary (outline) so the primary
   "Manage team" stays dominant; bronze tint on hover marks it as a create. */
.dash-add-btn { background: var(--egg-card); color: var(--accent); border: 1px solid var(--egg-border); box-shadow: none; }
.dash-add-btn:hover { background: rgba(156,122,63,.10); border-color: var(--bronze); color: var(--bronze); box-shadow: none; }
.dash-wf-foot { margin-top: 10px; text-align: left; }

/* ════════════════════════════════════════════════════════════════════════
   PLANNING ENGINE — VERTICAL ROADMAP TIMELINE (workflow board).
   The panel must NOT collapse: it's a flex child of #view-tasks (which is
   overflow-y:auto), and .dash-panel's overflow:hidden makes its auto min-height
   0 → with default flex-shrink it shrank to ~2px (the old bug). flex-shrink:0
   keeps its FULL content height; the page scrolls. The timeline fills width and
   expands to content — no fixed/clamped height, no clipping.
   ════════════════════════════════════════════════════════════════════════ */
.rmp-panel { flex-shrink: 0; }
.rmp-panel .dash-panel-body { padding: 20px 22px 22px; }
/* thin bronze workflow-progress bar in the header (done / total of the roadmap) */
.wf-progress-bar { height: 5px; max-width: 340px; border-radius: 3px; background: var(--egg-border); overflow: hidden; margin-top: 11px; }
.wf-progress-fill { height: 100%; width: 0; border-radius: 3px; background: var(--bronze); transition: width .4s cubic-bezier(.2,.8,.2,1); }

/* Empty state — a prominent, clearly-visible centered Generate CTA */
.rmp-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 30px 20px 26px; }
.rmp-empty-text { font-family: var(--font-body); font-size: 15px; color: var(--text-secondary); max-width: 560px; line-height: 1.55; }
.rmp-gen-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; color: #fff; background: var(--bronze); border: none; border-radius: 10px; padding: 12px 24px; cursor: pointer; transition: background .13s, transform .12s, box-shadow .13s; box-shadow: 0 2px 12px -3px rgba(156,122,63,.55); }
.rmp-gen-btn:hover { background: var(--bronze-bright); transform: translateY(-1px); }
.rmp-gen-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.rmp-gen-btn svg { width: 15px; height: 15px; }

/* Slim "fold existing tasks into a roadmap" bar (tasks exist, no roadmap yet) */
.rmp-genbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 11px 14px; margin-bottom: 18px; background: rgba(156,122,63,.07); border: 1px dashed rgba(156,122,63,.4); border-radius: 11px; }
.rmp-genbar-text { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); }
.rmp-genbar .rmp-gen-btn { padding: 8px 16px; font-size: 12.5px; }

/* The timeline: a single continuous bronze spine in a ~44px gutter, prominent
   nodes centered on it, and a pill per step to the right. */
.rmp-timeline { position: relative; }
.rmp-step { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding-bottom: 28px; }
.rmp-step:last-child { padding-bottom: 0; }
.rmp-nodecol { position: relative; display: flex; justify-content: center; align-items: center; }
/* ONE continuous spine running through the node CENTRES: left:50% (= column
   centre = node centre x), drawn behind the nodes (z-index 0). Each segment
   spans the full column height + the 28px row gap so the line is continuous
   through the vertically-centred nodes; clipped to node centres at the ends. */
.rmp-nodecol::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: -28px; width: 2px; background: rgba(156,122,63,.38); z-index: 0; }
.rmp-step:first-child .rmp-nodecol::before { top: 50%; }
.rmp-step:last-child .rmp-nodecol::before { display: block; top: 0; bottom: 50%; }
/* the node IS the complete circle AND carries the step number: faint ring +
   muted number (not started) → bronze ring + bronze number (in progress) →
   bronze fill + white check (done). Click toggles completion. Centred on the
   spine; stays vivid even when the pill is muted. */
.rmp-node { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--egg-card); border: 2px solid rgba(156,122,63,.35); box-shadow: 0 1px 4px rgba(156,122,63,.22); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .14s, border-color .14s, transform .12s, box-shadow .14s; }
.rmp-node:hover { transform: scale(1.09); }
.rmp-node-num { font-family: var(--font-sans); font-weight: 700; font-size: 13px; line-height: 1; color: var(--text-muted); transition: opacity .12s, color .14s; }
.rmp-node svg { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; fill: none; stroke: var(--bronze); stroke-width: 3.4; opacity: 0; transition: opacity .12s, stroke .12s; }
.rmp-node:hover .rmp-node-num { opacity: .25; }
.rmp-node:hover svg { opacity: .5; }
.rmp-step.is-ip .rmp-node { border-color: var(--bronze); box-shadow: 0 1px 5px rgba(156,122,63,.4); }
.rmp-step.is-ip .rmp-node-num { color: var(--bronze); }
.rmp-step.is-done .rmp-node { background: var(--bronze); border-color: var(--bronze); box-shadow: 0 1px 7px rgba(156,122,63,.55); }
.rmp-step.is-done .rmp-node-num { opacity: 0; }
.rmp-step.is-done .rmp-node svg { opacity: 1; stroke: #fff; }
.rmp-step.is-done .rmp-node:hover .rmp-node-num { opacity: 0; }
.rmp-step.is-done .rmp-node:hover svg { opacity: 1; }
/* pill */
.rmp-pill { position: relative; min-height: 76px; box-sizing: border-box; display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: 12px; box-shadow: 0 6px 20px -14px rgba(24,40,63,0); transition: border-color .12s, box-shadow .2s, opacity .14s; }
.rmp-pill:hover { border-color: rgba(156,122,63,.45); box-shadow: 0 6px 20px -14px rgba(24,40,63,.5); transition-delay: 80ms; }
/* in progress → a gentle bronze tint; completed → settled / muted */
.rmp-step.is-ip .rmp-pill { background: rgba(156,122,63,.055); border-color: rgba(156,122,63,.3); }
/* completed → settled / muted (muted title only, NO strikethrough) */
.rmp-step.is-done .rmp-pill { opacity: .72; }
.rmp-step.is-done .rmp-pill:hover { opacity: .92; }
.rmp-step.is-done .rmp-pill-name { color: var(--text-muted); }
/* body is ONE ROW: text grows on the left, the meta cluster sits on the right
   top-aligned with the title — the row reads as a single line, full width. */
.rmp-pill-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 16px; }
.rmp-pill-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.rmp-pill-name { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.rmp-pill-desc { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
/* PROVENANCE badge — quiet origin marker on the committed roadmap step: extracted
   (muted gray) vs Ratio-derived (bronze spice). Inter, uppercase, small. */
.rmp-origin { display: inline-block; margin-top: 6px; font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 8px; border-radius: 20px; border: 1px solid; }
.rmp-origin-doc { color: var(--text-secondary); border-color: var(--egg-border); background: var(--egg-hover); }
.rmp-origin-ratio { color: var(--bronze); border-color: rgba(156,122,63,0.32); background: rgba(156,122,63,0.08); }
.rmp-step.is-done .rmp-origin { opacity: 0.6; }
/* per-step meta on the RIGHT (status marker · hours logged · Record-time) */
.rmp-step-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; padding-top: 1px; }
.rmp-hours { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }
.rmp-hours.has-time { color: var(--text-secondary); font-weight: 600; }
.rmp-timer { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--egg-border); border-radius: 7px; padding: 4px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: border-color .12s, color .12s, background .12s; }
.rmp-timer:hover { border-color: rgba(156,122,63,.5); color: var(--bronze); background: rgba(156,122,63,.06); }
/* RUNWAY: the "Target" suggested-date chip — deliberately styled UNLIKE a
   court-deadline urgency badge (bronze, labeled "Target"), so a suggestion
   can never be read as a court order. Slipping switches to a calm warning amber. */
.rmp-suggest { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; color: var(--bronze); background: rgba(156,122,63,.10); border: 1px solid rgba(156,122,63,.34); }
.rmp-suggest svg { width: 12px; height: 12px; flex-shrink: 0; }
.rmp-suggest.early   { color: var(--bronze); }
.rmp-suggest.ontime  { color: var(--bronze); }
.rmp-suggest.slipping { color: #B0472E; background: rgba(176,71,46,.10); border-color: rgba(176,71,46,.38); }
.rmp-step.is-done .rmp-suggest { display: none; }   /* a finished step needs no target */
/* runway info bar above the timeline */
.rmp-runwaybar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; padding-bottom: 2px; }
.rmp-runway-legend { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12.5px; color: var(--text-secondary); }
.rmp-runway-legend-muted { color: var(--text-muted); font-style: italic; }
.rmp-runway-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(156,122,63,.10); border: 1.5px solid var(--bronze); flex-shrink: 0; }
.rmp-runway-tight { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: #B0472E; background: rgba(176,71,46,.09); border: 1px solid rgba(176,71,46,.34); border-radius: 8px; padding: 4px 10px; }
.rmp-runway-tight svg { width: 13px; height: 13px; flex-shrink: 0; }
.rmp-runway-refresh { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--egg-border); border-radius: 8px; padding: 5px 11px; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.rmp-runway-refresh:hover { border-color: rgba(156,122,63,.5); color: var(--bronze); background: rgba(156,122,63,.06); }
.rmp-runway-refresh svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform .5s; }
.rmp-runway-refresh.is-busy svg { animation: rmpSpin .8s linear infinite; }
.rmp-runway-refresh:disabled { opacity: .6; cursor: default; }
/* subtle hover controls, anchored at the pill's BOTTOM-right so they never
   overlap the meta cluster (status/hours/timer) that now sits top-right */
.rmp-step-ctrls { position: absolute; bottom: 8px; right: 10px; display: flex; gap: 1px; opacity: 0; transition: opacity .12s; background: var(--egg-card); border-radius: 8px; box-shadow: 0 0 0 4px var(--egg-card); z-index: 2; }
.rmp-pill:hover .rmp-step-ctrls { opacity: 1; transition-delay: 30ms; }
.rmp-step-ctrls:focus-within { opacity: 1; }
.rmp-ctrl { width: 26px; height: 26px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.rmp-ctrl:hover { background: var(--egg-hover); color: var(--accent); }
.rmp-ctrl:disabled { opacity: .28; cursor: default; }
.rmp-ctrl.rmp-del:hover { color: var(--danger); }
.rmp-ctrl svg { width: 14px; height: 14px; }
/* quiet "add step" at the bottom of the timeline */
.rmp-addstep { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; margin-left: 58px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: transparent; border: none; cursor: pointer; padding: 6px 4px; transition: color .12s; }
.rmp-addstep:hover { color: var(--bronze); }
.rmp-addstep svg { width: 14px; height: 14px; }
/* generating… */
.rmp-busy { display: flex; align-items: center; gap: 10px; padding: 26px 14px; font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); }
.rmp-spin { width: 16px; height: 16px; border: 2px solid var(--egg-border); border-top-color: var(--bronze); border-radius: 50%; animation: rmpSpin .8s linear infinite; }
@keyframes rmpSpin { to { transform: rotate(360deg); } }

/* Team members (reusable) */
.dash-team-list { display: flex; flex-direction: column; gap: 11px; }
.dash-team-member { display: flex; align-items: center; gap: 11px; }
.dash-team-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--green-mid); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.dash-team-info { min-width: 0; }
.dash-team-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.dash-team-role { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }

/* ── Manage Team modal (case-membership management) — mirrors td-submit-overlay + rv-reviewer DNA ── */
.mt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.42); display: flex; align-items: flex-start; justify-content: center; z-index: 2000; backdrop-filter: blur(2px); overflow-y: auto; padding: 48px 16px; }
.mt-overlay.mt-overlay-hidden { display: none; }
.mt-modal { position: relative; background: #fff; border-radius: 20px; padding: 30px 28px 24px; width: 100%; max-width: 480px; margin: auto; box-shadow: 0 10px 48px rgba(0,0,0,0.22); display: flex; flex-direction: column; gap: 12px; }
.mt-title { font-size: 17px; font-weight: 800; color: var(--text-dark); }
.mt-pending { background: var(--egg-bg); border: 1.5px solid var(--egg-border); border-radius: 12px; padding: 12px 14px; display: none; flex-direction: column; gap: 10px; }
.mt-pending-name { font-size: 13.5px; font-weight: 700; color: var(--text-dark); }
.mt-level-choice { display: flex; flex-direction: column; gap: 7px; }
.mt-level-choice label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.mt-btn-row { display: flex; align-items: center; gap: 12px; }
.mt-btn { padding: 9px 16px; background: var(--accent); color: #fff; border: none; border-radius: 9px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.13s; }
.mt-btn:hover { background: var(--green-dark); }
.mt-link { background: none; border: none; color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mt-link:hover { color: var(--text-dark); }
.mt-members { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.mt-member-info { flex: 1; min-width: 0; }
.mt-empty { font-size: 12.5px; color: var(--text-muted); padding: 8px 0; }
/* AI recommendations inside the Manage Team modal (fit-for-task framing; no scores) */
.mt-ai-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 16px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.13s, box-shadow 0.13s; box-shadow: 0 2px 10px rgba(var(--ink-rgb),0.18); }
.mt-ai-btn:hover { background: var(--green-dark); }
.mt-ai-btn:disabled { opacity: 0.6; cursor: default; }
.mt-recs { display: flex; flex-direction: column; gap: 10px; }
.mt-recs-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mt-recs-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; background: rgba(var(--ink-rgb),0.09); color: var(--accent); }
.mt-rec-card { background: var(--egg-bg); border: 1.5px solid var(--egg-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mt-rec-card.top { border-color: rgba(var(--ink-rgb),0.28); }
.mt-rec-top { display: flex; align-items: center; gap: 10px; }
.mt-rec-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.mt-rec-role { font-size: 11.5px; color: var(--text-secondary); }
.mt-rec-conf { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--egg-hover); border-radius: 12px; padding: 3px 9px; }
.mt-rec-summary { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.mt-rec-reason { display: none; flex-direction: column; gap: 8px; border-top: 1px solid var(--egg-border); padding-top: 8px; }
.mt-rec-reason.open { display: flex; }
.mt-rec-reason h6 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin: 0; }
.mt-rec-reason p { font-size: 12px; line-height: 1.6; color: var(--text-secondary); margin: 3px 0 0; }
.mt-rec-reason ul { margin: 3px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.mt-rec-actions { display: flex; align-items: center; gap: 12px; }
.mt-rec-pool { font-size: 12px; line-height: 1.55; color: var(--text-secondary); background: var(--egg-hover); border-radius: 10px; padding: 10px 12px; }
.mt-rec-onteam { font-size: 11.5px; font-weight: 600; color: var(--green-mid); }
.ta-page-header { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ta-back-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 8px;
  border: 1px solid var(--egg-border);
  background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  transition: all 0.13s;
}
.ta-back-btn:hover { background: var(--egg-hover); color: var(--text-primary); }
.ta-page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
/* Case block */
.ta-case-block {
  background: var(--egg-card); border: 1px solid var(--egg-border);
  border-radius: 14px; overflow: hidden;
}
.ta-case-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px;
  background: var(--egg-bg); border-bottom: 1px solid var(--egg-border);
}
.ta-case-left { display: flex; align-items: center; gap: 9px; }
/* small restrained per-case accent on the header (dot + the block's left rule) */
.ta-case-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ta-case-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ta-case-count {
  font-size: 11px; font-weight: 700;
  background: var(--egg-hover); color: var(--text-secondary);
  padding: 2px 8px; border-radius: 20px;
}
.ta-collapse-btn {
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  padding: 4px 12px; border-radius: 7px;
  border: 1px solid var(--egg-border);
  background: transparent; cursor: pointer;
  transition: all 0.13s; flex-shrink: 0;
}
.ta-collapse-btn:hover { background: var(--egg-hover); color: var(--text-primary); }
/* Workflow block */
.ta-wf-block { border-bottom: 1px solid var(--egg-border); }
.ta-wf-block:last-child { border-bottom: none; }
.ta-wf-header {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 18px; cursor: pointer; user-select: none;
  transition: background 0.12s;
}
.ta-wf-header:hover { background: var(--egg-hover); }
.ta-wf-chevron { color: var(--text-secondary); transition: transform 0.18s; flex-shrink: 0; }
.ta-wf-chevron.open { transform: rotate(90deg); }
.ta-wf-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.ta-wf-count { font-size: 11.5px; color: var(--text-muted); }
/* Task rows — TWO-COLUMN responsive card grid (single column when narrow) so
   the list scans as cards, not a monotonous full-width stack. */
.ta-task-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
  padding: 10px 18px 14px 24px;
}
@media (max-width: 760px) { .ta-task-list { grid-template-columns: 1fr; } }
/* Contained pill — mirrors .task-item so All-Tasks rows read as distinct cards,
   not loose floating lines. */
.ta-task-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 15px; border-radius: 10px; cursor: pointer;
  background: var(--egg-card); border: 1px solid var(--egg-border);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb),0.04);
  transition: transform 0.13s, box-shadow 0.13s, border-color 0.13s;
}
.ta-task-row:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--ink-deep-rgb),0.08); border-color: rgba(var(--ink-rgb),0.22); }
.ta-task-name { font-size: 13.5px; color: var(--text-primary); flex: 1; min-width: 0; }
.ta-no-tasks { padding: 36px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* ═══════════════════════════════════════════════════
   TASK DETAIL VIEW
═══════════════════════════════════════════════════ */
#view-task-detail {
  display: none; flex-direction: column;
  overflow-y: auto; padding: 40px 44px; gap: 20px;
}
#view-task-detail.active { display: flex; }
.td-task-name {
  font-size: 22px; font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.3px; flex: 1; line-height: 1.3;
}
.td-status-badge {
  font-size: 11px; font-weight: 700; border-radius: 20px;
  padding: 4px 13px; flex-shrink: 0; margin-top: 4px;
}
.td-status-badge.ip { background: rgba(74,157,184,0.14); color: #2A7090; }
.td-status-badge.ns { background: var(--egg-hover); color: var(--text-secondary); }
.td-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px;
}
.td-atty-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-atty-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.13s, box-shadow 0.13s;
}
.td-atty-avatar:hover { transform: scale(1.08); box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
.td-atty-remove {
  position: absolute; top: -3px; right: -3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #C04040; color: #fff; font-size: 9px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid var(--egg-bg); line-height: 1;
}
.td-desc-textarea {
  width: 100%; min-height: 96px; box-sizing: border-box;
  background: var(--egg-hover); border: 1px solid var(--egg-border);
  border-radius: 10px; padding: 13px 15px;
  font-size: 13px; color: var(--text-primary); font-family: inherit;
  line-height: 1.6; resize: vertical;
  transition: border-color 0.13s, background 0.13s;
}
.td-desc-textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.td-meta-cell {
  background: var(--egg-hover); border: 1px solid var(--egg-border);
  border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.td-meta-cell-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
}
.td-meta-cell-value {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  line-height: 1.4; flex: 1;
}
/* Warm secondary, matching the deadline row it sits in. The only VISIBLE
   instance is #td-cal-btn ("View on calendar →") — #td-wf-btn / #td-case-btn
   carry this class but ship display:none as bound targets for the Linked card,
   so this restyle has a single surface. */
.td-meta-btn {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin-top: 8px; padding: 6px 12px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  color: var(--text-secondary); background: #fffdf9; border: 1px solid #e7ddc9;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  transition: border-color 0.13s, background 0.13s, color 0.13s;
}
.td-meta-btn:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.08); color: var(--bronze); }
/* Deadline inline editor */
.td-deadline-edit-row {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
}
/* The deadline field itself is now a .dp-field button (Ratio's own picker) —
   see the .dp-* block. Only its width is set here; everything else comes from
   the shared field styling, so this row cannot drift from Enter Time's. */
#td-deadline-input.dp-field { width: 148px; }
/* Save = the navy primary; Cancel = the quiet warm secondary, matching the
   field so the three controls in this row read as one unit. */
.td-deadline-save-btn {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700; padding: 6px 14px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: var(--radius-sm); cursor: pointer; transition: background 0.13s, border-color 0.13s;
}
.td-deadline-save-btn:hover { background: var(--green-mid); border-color: var(--green-mid); }
.td-deadline-cancel-btn {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; padding: 6px 12px;
  background: #fffdf9; color: var(--text-secondary); border: 1px solid #e7ddc9;
  border-radius: var(--radius-sm); cursor: pointer; transition: background 0.13s, border-color 0.13s;
}
.td-deadline-cancel-btn:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.08); }

/* ── Task-detail redesign: read-to-edit affordances + section structure ──── */
/* Small pencil "Edit" control, shared by Deadline + Description (reuses the
   .td-meta-btn accent treatment). */
.td-readedit-val { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.td-readedit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; font-size: 12px; font-weight: 700;
  color: var(--accent); background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 8px; cursor: pointer; text-align: left;
  transition: border-color 0.13s, background 0.13s; align-self: flex-start;
}
.td-readedit-btn:hover { border-color: var(--accent); background: rgba(var(--ink-rgb),0.06); }
/* Description read display + edit row */
.td-desc-display {
  font-size: 14px; color: var(--text-primary); line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; margin-bottom: 8px;
}
.td-desc-display.td-desc-empty { color: var(--text-muted); font-style: italic; }
.td-desc-edit-row { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.td-desc-edit-actions { display: flex; gap: 6px; }
/* Inline litigation parameters — woven into the task/workflow detail, NOT a
   boxed panel. Rendered from live case_parameters at display time. */
.td-params { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.td-param { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; font-size: 13.5px; line-height: 1.4; }
.td-param-name { font-weight: 600; color: var(--text-primary); }
.td-param-dash { color: var(--text-muted); }
.td-param-value { color: var(--text-secondary); }
.td-param-tag {
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bronze, #9C7A3F);
  border: 1px solid color-mix(in srgb, var(--bronze, #9C7A3F) 40%, transparent);
  border-radius: 4px; padding: 1px 5px; line-height: 1.5;
}
.td-param-sides { color: var(--text-muted); font-size: 12.5px; font-style: italic; }
/* THE WORK / THE REVIEW section dividers (mirror the .td-attorneys / .td-srv
   border DNA so the three sections read as distinct). */
.td-review-block {
  border-top: 1px solid var(--egg-border); padding-top: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
/* The review sub-sections already carried their own top border/margin for when
   they sat at the bottom of the work block — neutralize inside the wrapper so
   there's no double divider. */
.td-review-block .td-srv-section,
.td-review-block .td-rvstat-section { border-top: none; margin-top: 0; padding-top: 4px; }

/* ── Review detail popup overlay (mirrors .td-submit-overlay DNA) ─────────── */
.rvd-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.42);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 2000; backdrop-filter: blur(2px);
  overflow-y: auto; padding: 40px 16px;
}
.rvd-overlay.rvd-overlay-hidden { display: none; }
.rvd-modal {
  position: relative; background: var(--egg-bg);
  border-radius: 20px; padding: 34px 30px 30px;
  width: 100%; max-width: 940px; margin: auto;
  box-shadow: 0 10px 48px rgba(0,0,0,0.22);
}
.rvd-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--egg-hover); border: none; cursor: pointer;
  font-size: 13px; color: var(--text-secondary); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.13s, color 0.13s; z-index: 1;
}
.rvd-modal-close:hover { background: var(--egg-border); color: var(--text-dark); }

/* ── Reviewed Version section (task detail) ─────────────────────────────── */
/* ── Submit for Review section (task detail) ────────────────────────────── */
.td-srv-section {
  border-top: 1.5px solid var(--egg-border);
  padding-top: 20px; margin-top: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.td-srv-section.td-srv-hidden { display: none; }
.td-srv-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.td-srv-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 22px; background: var(--accent); color: #fff;
  border: none; border-radius: 12px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; flex-shrink: 0;
  transition: background 0.13s, box-shadow 0.13s;
  box-shadow: 0 2px 10px rgba(var(--ink-rgb),0.22);
}
.td-srv-btn:hover { background: var(--green-dark); box-shadow: 0 4px 16px rgba(var(--ink-rgb),0.3); }
/* Submission-type selector (Draft / Final) in the Submit-for-Review modal */

/* Submission-type pills (rows + review-detail header) */
.td-srv-success {
  display: flex; align-items: center; gap: 9px;
  background: rgba(30,92,58,0.08); border: 1.5px solid rgba(30,92,58,0.25);
  color: var(--success); border-radius: 12px; padding: 13px 18px;
  font-size: 13.5px; font-weight: 600;
}

/* ── Review status indicator (task detail, associate side) ──────────────── */
.td-rvstat-section {
  border-top: 1.5px solid var(--egg-border);
  padding-top: 20px; margin-top: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.td-rvstat-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.td-rvstat-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.td-rvstat-detail { font-size: 13px; color: var(--text-secondary); }
.td-rvstat-results-btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 11px 20px; background: var(--accent); color: #fff;
  border: none; border-radius: 11px; font-size: 13.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background 0.13s, box-shadow 0.13s;
  box-shadow: 0 2px 10px rgba(var(--ink-rgb),0.22);
}
.td-rvstat-results-btn:hover { background: var(--green-dark); box-shadow: 0 4px 16px rgba(var(--ink-rgb),0.3); }

/* ── Status pills (shared across review UIs) ────────────────────────────── */
.rv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.02em; white-space: nowrap;
  background: var(--egg-hover); color: var(--text-secondary);
}
.rv-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rv-pill.pending,
.rv-pill.in_progress { background: #FBF0D8; color: #8A6D1B; }
.rv-pill.comparing   { background: #DCEBF5; color: #1F5C82; }
.rv-pill.complete    { background: #DCEDE1; color: var(--success); }
.rv-pill.cancelled,
.rv-pill.declined    { background: #EFE4E4; color: #8B5A5A; }

/* ── Submit-for-Review modal ────────────────────────────────────────────── */
.rv-submit-modal { max-width: 460px; gap: 14px; }
.rv-modal-file {
  display: flex; align-items: center; gap: 9px;
  background: var(--egg-bg); border: 1.5px solid var(--egg-border);
  border-radius: 10px; padding: 11px 14px;
  font-size: 13px; font-weight: 600; color: var(--text-dark);
}
.rv-modal-file svg { color: var(--accent); flex-shrink: 0; }
.rv-field { display: flex; flex-direction: column; gap: 7px; }
.rv-field-label { font-size: 12px; font-weight: 700; color: var(--text-dark); }
.rv-field-optional { font-weight: 500; color: var(--text-muted); }
.rv-reviewer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-reviewer-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--ink-rgb),0.08); color: var(--accent);
  border-radius: 7px; padding: 5px 9px; font-size: 12.5px; font-weight: 600;
}
.rv-reviewer-chip-x { cursor: pointer; opacity: 0.6; font-size: 14px; line-height: 1; }
.rv-reviewer-chip-x:hover { opacity: 1; }
.rv-reviewer-picker { position: relative; }
.rv-reviewer-input {
  width: 100%; padding: 10px 12px; font-size: 13px; font-family: inherit;
  border: 1.5px solid var(--egg-border); border-radius: 10px; color: var(--text-dark);
  box-sizing: border-box;
}
.rv-reviewer-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--ink-rgb),0.12); }
/* The bespoke .rv-reviewer-dropdown/option/empty CSS was REMOVED — the reviewer,
   Manage-Team, and Workflow-Team searches all render through the shared
   window._ratioSuggest engine (.tya-* classes). .rv-reviewer-input + the picker
   wrapper + chips are KEPT (they're the field, not the dropdown). */
.rv-note-input {
  width: 100%; padding: 10px 12px; font-size: 13px; font-family: inherit;
  border: 1.5px solid var(--egg-border); border-radius: 10px; color: var(--text-dark);
  resize: vertical; box-sizing: border-box; line-height: 1.5;
}
.rv-note-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--ink-rgb),0.12); }

/* ── Sidebar Reviews badge ──────────────────────────────────────────────── */

/* ── Reviews views: match the column-scroll layout of the other views ───── */
#view-reviews, #view-review-detail,
#view-formal-report-builder, #view-formal-report,
#view-staffing {
  display: none; flex-direction: column;
  /* Generous top/left breathing room for the page header (≥ the case dashboard's
     36px 44px) so the title isn't jammed in the corner. */
  overflow-y: auto; padding: 46px 48px; gap: 22px;
}
#view-reviews.active, #view-review-detail.active,
#view-formal-report-builder.active, #view-formal-report.active,
#view-staffing.active { display: flex; }

/* ── Reviews inbox view ─────────────────────────────────────────────────── */
.rvw-page-title { font-size: 28px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px; flex-shrink: 0; }
.rvw-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--egg-border); margin-bottom: 22px; }
.rvw-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  padding: 10px 18px; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  display: flex; align-items: center; gap: 8px; transition: color 0.15s, border-color 0.15s;
}
.rvw-tab:hover { color: var(--text-secondary); }
.rvw-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.rvw-tab-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--egg-hover); color: var(--text-secondary);
  font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
}
.rvw-tab.active .rvw-tab-count { background: var(--accent); color: #fff; }
.rvw-tabpane { display: none; }
.rvw-tabpane.active { display: block; }
.rvw-list { display: flex; flex-direction: column; gap: 12px; }
.rvw-row-task-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rvw-empty {
  padding: 50px 24px; text-align: center; font-size: 13.5px; color: var(--text-muted);
  background: var(--egg-card); border: 1.5px solid var(--egg-border); border-radius: 14px;
}
.rvw-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 14px; padding: 18px 22px; transition: border-color 0.13s, box-shadow 0.13s;
}
.rvw-row:hover { border-color: rgba(var(--ink-rgb),0.28); box-shadow: 0 4px 18px rgba(var(--ink-deep-rgb),0.08); }
.rvw-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rvw-row-task { font-size: 15.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; }
.rvw-row-meta { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; }
.rvw-row-meta strong { color: var(--text-secondary); font-weight: 600; }
.rvw-row-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rvw-open-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; background: var(--accent); color: #fff;
  border: none; border-radius: 10px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background 0.13s;
}
.rvw-open-btn:hover { background: var(--green-dark); }
.rvw-cancel-btn {
  appearance: none; background: none; border: 1.5px solid var(--egg-border);
  border-radius: 10px; padding: 8px 14px; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; transition: all 0.13s; font-family: inherit;
}
.rvw-cancel-btn:hover { border-color: var(--danger); color: var(--danger); }

/* ── Review detail (focused screen) ─────────────────────────────────────── */
.rvd-wrap { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.rvd-back {
  appearance: none; background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: inherit;
}
.rvd-back:hover { color: var(--accent); }
.rvd-header {
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 16px; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px;
}
.rvd-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rvd-task-name { font-size: 24px; color: var(--text-primary); letter-spacing: 0; }   /* serif via the curated list */
.rvd-meta-grid { display: flex; gap: 28px; flex-wrap: wrap; }
.rvd-meta-cell { display: flex; flex-direction: column; gap: 3px; }
.rvd-meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.rvd-meta-val { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.rvd-note {
  background: rgba(var(--ink-rgb),0.05); border: 1.5px solid rgba(var(--ink-rgb),0.15);
  border-radius: 12px; padding: 16px 20px;
}
.rvd-note-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 6px; }
.rvd-note-text { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); }
.rvd-wp {
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center;
}
.rvd-wp-icon { color: var(--accent); }
.rvd-wp-filename { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.rvd-wp-sub { font-size: 13px; color: var(--text-muted); }
.rvd-download-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; background: var(--accent); color: #fff;
  border: none; border-radius: 13px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background 0.13s, box-shadow 0.13s;
  box-shadow: 0 3px 14px rgba(var(--ink-rgb),0.25);
}
.rvd-download-btn:hover { background: var(--green-dark); box-shadow: 0 5px 20px rgba(var(--ink-rgb),0.32); }
.rvd-section-card {
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 16px; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px;
}
.rvd-section-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.rvd-upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 30px; text-align: center;
  border: 1.5px dashed rgba(var(--ink-rgb),0.25); border-radius: 13px;
  background: var(--egg-hover); cursor: pointer; transition: border-color 0.13s, background 0.13s;
}
.rvd-upload-zone:hover, .rvd-upload-zone.drag-over { border-color: var(--accent); background: rgba(var(--ink-rgb),0.05); }
.rvd-upload-icon { color: var(--text-muted); }
.rvd-upload-text { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.rvd-upload-types { font-size: 11px; color: var(--text-muted); }
.rvd-status-msg {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px;
  border-radius: 13px; font-size: 13.5px; font-weight: 600; line-height: 1.5;
}
.rvd-status-msg.comparing { background: #DCEBF5; color: #1F5C82; border: 1.5px solid rgba(31,92,130,0.25); }
.rvd-status-msg.complete  { background: #DCEDE1; color: var(--success); border: 1.5px solid rgba(30,92,58,0.25); }
.rvd-spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(31,92,130,0.3);
  border-top-color: #1F5C82; border-radius: 50%; animation: rvd-spin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes rvd-spin { to { transform: rotate(360deg); } }
.rvd-notes-input {
  width: 100%; padding: 12px 14px; font-size: 13.5px; font-family: inherit;
  border: 1.5px solid var(--egg-border); border-radius: 11px; color: var(--text-dark);
  resize: vertical; box-sizing: border-box; line-height: 1.55; min-height: 90px;
}
.rvd-notes-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--ink-rgb),0.12); }
.rvd-complete-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; background: var(--success); color: #fff; align-self: flex-start;
  border: none; border-radius: 12px; font-size: 14.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background 0.13s, box-shadow 0.13s;
  box-shadow: 0 3px 14px rgba(30,92,58,0.28);
}
.rvd-complete-btn:hover { background: #174a2e; box-shadow: 0 5px 20px rgba(30,92,58,0.35); }
.rvd-complete-btn:disabled { opacity: 0.5; cursor: default; }
.rvd-done-banner {
  display: flex; align-items: center; gap: 12px; padding: 20px 24px;
  background: #DCEDE1; color: var(--success); border: 1.5px solid rgba(30,92,58,0.25);
  border-radius: 14px; font-size: 15px; font-weight: 700;
}

/* ── Submit modal overlay ────────────────────────────────────────────────── */
.td-submit-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.42);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; backdrop-filter: blur(2px);
}
.td-submit-overlay.td-submit-overlay-hidden { display: none; }
.td-submit-modal {
  background: #fff; border-radius: 20px; padding: 32px 28px 22px;
  width: 100%; max-width: 400px; margin: 16px;
  box-shadow: 0 10px 48px rgba(0,0,0,0.22);
  display: flex; flex-direction: column; gap: 10px;
}
.td-submit-modal-title {
  font-size: 17px; font-weight: 800; color: var(--text-dark);
  margin-bottom: 2px;
}
.td-submit-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px; text-align: left;
  background: var(--egg-bg); border: 1.5px solid var(--egg-border);
  border-radius: 12px; font-size: 13.5px; font-weight: 600;
  font-family: inherit; color: var(--text-dark); cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.td-submit-option:hover {
  background: #e9f4ed; border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(var(--ink-rgb),0.12);
}
.td-submit-option.td-submit-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.td-submit-option.td-submit-primary:hover {
  background: var(--green-dark); border-color: var(--green-dark);
}
.td-submit-modal-cancel {
  margin-top: 2px; padding: 10px; width: 100%;
  background: none; border: none; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; border-radius: 8px; transition: color 0.12s, background 0.12s;
}
.td-submit-modal-cancel:hover { color: var(--text-dark); background: var(--egg-bg); }

/* ── Document Review: comparison result cards ───────────────────────────── */
.dr-summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 700px) { .dr-summary-grid { grid-template-columns: repeat(2, 1fr); } }
.dr-stat-card {
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 12px; padding: 16px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.dr-stat-num { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.dr-stat-num.total       { color: var(--green-dark); }
.dr-stat-num.substantive { color: var(--danger); }
.dr-stat-num.stylistic   { color: #2A7090; }
.dr-stat-num.form        { color: var(--text-secondary); }
.dr-stat-num.comments    { color: #B8860B; }
.dr-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.dr-change-list { display: flex; flex-direction: column; gap: 7px; }
.dr-change-item {
  background: var(--egg-bg); border: 1px solid var(--egg-border);
  border-radius: 9px; padding: 10px 14px;
  font-size: 12.5px; color: var(--text-primary); line-height: 1.55;
}
.dr-change-item.substantive { border-left: 3px solid var(--danger); background: rgba(var(--danger-rgb),0.03); }
.dr-change-item.stylistic   { border-left: 3px solid #2A7090; background: rgba(42,112,144,0.03); }
.dr-change-item.form        { border-left: 3px solid var(--egg-border); }
.dr-comment-item {
  background: rgba(184,134,11,0.05); border: 1px solid rgba(184,134,11,0.22);
  border-radius: 9px; padding: 10px 14px;
  font-size: 12.5px; color: var(--text-primary); line-height: 1.55;
}
.dr-summary-text {
  font-size: 13.5px; line-height: 1.7; color: var(--text-primary);
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 12px; padding: 18px 22px;
}
.dr-meta-row  { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.dr-meta-item { display: flex; flex-direction: column; gap: 2px; }
.dr-meta-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.dr-meta-val   { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.dr-saved-bar {
  display: flex; align-items: center; gap: 14px;
  background: rgba(var(--ink-rgb),0.07); border: 1.5px solid rgba(var(--ink-rgb),0.2);
  border-radius: 12px; padding: 14px 20px;
}
.dr-saved-info { font-size: 13.5px; font-weight: 700; color: var(--green-dark); }
.dr-saved-sub  { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.dr-saved-icon { width: 26px; height: 26px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Performance — Document Reviews section ─────────────────────────────── */
.perf-dr-empty {
  font-size: 13px; color: var(--text-muted); font-style: italic;
  padding: 28px 20px; text-align: center;
  background: var(--egg-card); border: 1.5px dashed var(--egg-border); border-radius: 14px;
}
.perf-dr-card {
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 14px; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.perf-dr-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.perf-dr-task  { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.perf-dr-date  { font-size: 11px; color: var(--text-muted); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.perf-dr-counts { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.perf-dr-count  { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.perf-dr-count-num { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.perf-dr-count-num.total       { color: var(--green-dark); }
.perf-dr-count-num.substantive { color: var(--danger); }
.perf-dr-count-num.stylistic   { color: #2A7090; }
.perf-dr-count-num.form        { color: var(--text-secondary); }
.perf-dr-count-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.perf-dr-divider { height: 1px; background: var(--egg-border); }
.perf-dr-summary {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Performance: sub-tabs ───────────────────────────────────────────────── */
.perf-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  padding: 10px 18px; border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px; transition: color 0.15s, border-color 0.15s;
}
.perf-tab:hover { color: var(--text-secondary); }
.perf-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Profile (Performance Analytics) ─────────────────────────────────────── */
.pfp-section { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; }

.pfp-card {
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 16px; padding: 22px 24px;
}
.pfp-card-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  letter-spacing: 0.01em; margin-bottom: 4px;
}
.pfp-card-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

/* Header card */
.pfp-header { display: flex; align-items: center; gap: 18px; }
.pfp-avatar {
  width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff; letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
}
.pfp-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pfp-header-name { font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
.pfp-header-title { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.pfp-header-years { font-size: 12.5px; color: var(--text-secondary); }
.pfp-header-years .pfp-years-val { font-weight: 700; color: var(--text-primary); }
.pfp-edit-btn {
  appearance: none; background: var(--egg-hover); border: 1.5px solid var(--egg-border);
  border-radius: 9px; padding: 8px 16px; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; transition: all 0.13s; flex-shrink: 0;
}
.pfp-edit-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--ink-rgb),0.04); }
.pfp-years-edit { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pfp-years-input {
  width: 80px; padding: 6px 10px; font-size: 13px; font-family: inherit;
  border: 1.5px solid var(--egg-border); border-radius: 8px; color: var(--text-primary);
}
.pfp-years-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--ink-rgb),0.12); }

/* Completeness */
.pfp-complete-card { display: flex; flex-direction: column; gap: 10px; }
.pfp-complete-head { display: flex; align-items: center; justify-content: space-between; }
.pfp-complete-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.pfp-complete-pct { font-size: 14px; font-weight: 800; color: var(--accent); }
.pfp-complete-track {
  width: 100%; height: 9px; border-radius: 6px; background: var(--egg-hover);
  overflow: hidden; border: 1px solid var(--egg-border);
}
.pfp-complete-fill {
  height: 100%; border-radius: 6px; width: 0%;
  background: linear-gradient(90deg, var(--green-mid), var(--accent));
  transition: width 0.4s ease;
}

/* Tag inputs */
.pfp-tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.pfp-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--ink-rgb),0.08); color: var(--accent);
  border-radius: 7px; padding: 5px 9px; font-size: 12.5px; font-weight: 600;
}
.pfp-tag-x {
  cursor: pointer; font-size: 13px; line-height: 1; opacity: 0.6;
  display: inline-flex; align-items: center;
}
.pfp-tag-x:hover { opacity: 1; }
.pfp-tag-input {
  flex: 1; min-width: 160px; border: none; background: none; outline: none;
  font-size: 13px; font-family: inherit; color: var(--text-primary); padding: 5px 2px;
}
.pfp-tag-input::placeholder { color: var(--text-muted); }
.pfp-tags-wrap {
  border: 1.5px solid var(--egg-border); border-radius: 10px; padding: 8px 10px;
  transition: border-color 0.13s;
}
.pfp-tags-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--ink-rgb),0.10); }

/* Background materials */
.pfp-bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .pfp-bg-grid { grid-template-columns: 1fr; } }
.pfp-bg-zone-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.pfp-bg-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px; text-align: center;
  border: 1.5px dashed rgba(var(--ink-rgb),0.25); border-radius: 11px;
  background: var(--egg-hover); cursor: pointer; transition: border-color 0.13s, background 0.13s;
}
.pfp-bg-drop:hover, .pfp-bg-drop.drag-over { border-color: var(--accent); background: rgba(var(--ink-rgb),0.05); }
.pfp-bg-drop-icon { color: var(--text-muted); }
.pfp-bg-drop-text { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pfp-bg-drop-types { font-size: 10.5px; color: var(--text-muted); }
.pfp-bg-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pfp-bg-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--egg-card); border: 1px solid var(--egg-border);
  border-radius: 9px; padding: 8px 11px;
}
.pfp-bg-row-icon { color: var(--accent); flex-shrink: 0; display: flex; }
.pfp-bg-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pfp-bg-row-name {
  font-size: 12.5px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pfp-bg-row-date { font-size: 10.5px; color: var(--text-muted); }
.pfp-bg-row-del {
  appearance: none; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 15px; line-height: 1; padding: 2px 4px; flex-shrink: 0;
  transition: color 0.13s;
}
.pfp-bg-row-del:hover { color: var(--danger); }
.pfp-bg-uploading { font-size: 11.5px; color: var(--text-muted); font-style: italic; margin-top: 6px; }

.pfp-coming-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 70px 24px; text-align: center;
  background: var(--egg-card); border: 1.5px solid var(--egg-border); border-radius: 16px;
}
.pfp-coming-soon-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.pfp-coming-soon-sub { font-size: 13px; color: var(--text-muted); max-width: 420px; line-height: 1.6; }

/* ══════════════ PHASE 3 — QUICK REPORT, TEAM GRID, FORMAL REPORT ══════════════ */
.qr-section { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.qr-header { display: flex; align-items: center; gap: 14px; }
.qr-name { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
.qr-role { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.qr-complete-mini { margin-left: auto; font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.qr-complete-mini .bar { width: 90px; height: 6px; border-radius: 4px; background: var(--egg-hover); overflow: hidden; }
.qr-complete-mini .fill { height: 100%; background: var(--accent); }

.qr-period { display: flex; gap: 6px; flex-wrap: wrap; }
.qr-period-pill {
  appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 20px; background: var(--egg-card);
  border: 1.5px solid var(--egg-border); color: var(--text-secondary); transition: all 0.13s;
}
.qr-period-pill:hover { border-color: var(--accent); color: var(--accent); }
.qr-period-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.qr-custom-range { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.qr-custom-range input { padding: 7px 10px; border: 1.5px solid var(--egg-border); border-radius: 8px; font-family: inherit; font-size: 12.5px; }

.qr-summary-card {
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 16px; padding: 26px 30px;
}
.qr-summary-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.qr-summary-text { font-size: 16px; line-height: 1.85; color: var(--text-primary); }
.qr-summary-text em { font-style: italic; color: var(--text-muted); font-size: 13.5px; }

.qr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .qr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .qr-grid { grid-template-columns: 1fr; } }
.qr-card {
  background: var(--egg-card); border: 1.5px solid var(--egg-border); border-radius: 14px;
  padding: 16px 18px; cursor: pointer; transition: border-color 0.13s, box-shadow 0.13s;
  display: flex; flex-direction: column; gap: 8px;
}
.qr-card:hover { border-color: rgba(var(--ink-rgb),0.28); box-shadow: 0 4px 16px rgba(var(--ink-deep-rgb),0.07); }
.qr-card-head { display: flex; align-items: center; gap: 8px; }
.qr-card-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); flex: 1; }
.qr-card-trend-line { font-size: 12.5px; color: var(--text-secondary); }
.qr-card-detail { font-size: 13px; line-height: 1.7; color: var(--text-secondary); border-top: 1px solid var(--egg-border); padding-top: 10px; margin-top: 2px; }
.qr-trend-ico { width: 14px; height: 14px; flex-shrink: 0; }

.qr-generate-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; background: var(--accent); color: #fff; border: none; border-radius: 12px;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: 0 2px 10px rgba(var(--ink-rgb),0.22); transition: background 0.13s;
}
.qr-generate-btn:hover { background: var(--green-dark); }

/* Report history */
.qr-hist-section { margin-top: 8px; }
.qr-hist-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.qr-hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qr-hist-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 8px 10px; border-bottom: 1.5px solid var(--egg-border); }
.qr-hist-table td { padding: 10px; border-bottom: 1px solid var(--egg-border); color: var(--text-secondary); }
.qr-hist-btn { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--egg-border); background: var(--egg-card); color: var(--accent); cursor: pointer; font-family: inherit; }
.qr-hist-btn:hover { border-color: var(--accent); }
.qr-empty { font-size: 13px; color: var(--text-muted); padding: 16px 0; }

/* Team grid */
.tmg-search {
  width: 100%; max-width: 420px; padding: 11px 16px; font-size: 14px; font-family: inherit;
  border: 1.5px solid var(--egg-border); border-radius: 11px; color: var(--text-primary); margin-bottom: 20px;
}
.tmg-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--ink-rgb),0.12); }
.tmg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .tmg-grid { grid-template-columns: 1fr; } }
.tmg-card {
  background: var(--egg-card); border: 1.5px solid var(--egg-border); border-radius: 14px;
  padding: 18px 20px; cursor: pointer; transition: border-color 0.13s, box-shadow 0.13s;
  display: flex; flex-direction: column; gap: 8px;
}
.tmg-card:hover { border-color: rgba(var(--ink-rgb),0.28); box-shadow: 0 4px 18px rgba(var(--ink-deep-rgb),0.08); }
.tmg-card-top { display: flex; align-items: center; gap: 10px; }
.tmg-card-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.tmg-role-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 10px; background: rgba(var(--ink-rgb),0.08); color: var(--accent); }
.tmg-limited-pill { margin-left: auto; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: #FBF0D8; color: #8A6D1B; }
.tmg-snippet { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.tmg-back, .fr-back, .frb-back {
  appearance: none; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-muted); align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
}
.tmg-back:hover, .fr-back:hover, .frb-back:hover { color: var(--accent); }

/* Formal report builder */
.frb-wrap, .fr-wrap { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; width: 100%; }
.frb-title { font-size: 24px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.4px; }
.frb-card { background: var(--egg-card); border: 1.5px solid var(--egg-border); border-radius: 14px; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.frb-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.frb-field-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.frb-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.frb-pill { appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 20px; background: var(--egg-bg); border: 1.5px solid var(--egg-border); color: var(--text-secondary); }
.frb-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.frb-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.frb-toggle-track { width: 38px; height: 22px; border-radius: 12px; background: var(--egg-border); position: relative; flex-shrink: 0; transition: background 0.15s; }
.frb-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s; }
.frb-toggle.on .frb-toggle-track { background: var(--accent); }
.frb-toggle.on .frb-toggle-thumb { transform: translateX(16px); }
.frb-snippet { border: 1.5px solid var(--egg-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.frb-snippet-head { display: flex; align-items: center; gap: 10px; }
.frb-snippet-label { font-size: 12.5px; font-weight: 700; color: var(--accent); flex: 1; }
.frb-snippet-illus { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; }
.frb-snippet-illus.strength { background: #E3F0E8; color: #2D7A4F; }
.frb-snippet-illus.growth { background: #F6EADA; color: #C77A2D; }
.frb-snippet-excerpt { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); font-style: italic; padding-left: 12px; border-left: 3px solid var(--egg-border); }
.frb-snippet-meta { font-size: 11px; color: var(--text-muted); }
.frb-swap-btn { font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 8px; border: 1.5px solid var(--egg-border); background: var(--egg-card); color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.frb-generate-btn { align-self: flex-start; padding: 14px 28px; background: var(--accent); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 2px 10px rgba(var(--ink-rgb),0.22); }
.frb-generate-btn:hover { background: var(--green-dark); }
.frb-generate-btn:disabled { opacity: 0.6; cursor: default; }

/* Formal report rendered document */
.fr-doc { background: #fff; border: 1.5px solid var(--egg-border); border-radius: 14px; padding: 48px 56px; color: #1c2530; }
.fr-doc h1 { color: var(--accent); font-size: 26px; margin-bottom: 6px; }
.fr-doc h2 { color: var(--accent); font-size: 17px; border-bottom: 2px solid var(--accent); padding-bottom: 5px; margin: 30px 0 12px; }
.fr-doc h3 { color: var(--accent); font-size: 14.5px; margin: 18px 0 6px; display: flex; align-items: center; gap: 8px; }
.fr-doc p { font-size: 14px; line-height: 1.75; margin-bottom: 10px; color: #2a3340; }
.fr-meta { color: #5a6675; font-size: 12.5px; margin-bottom: 3px; }
.fr-band { border-bottom: 3px solid var(--accent); padding-bottom: 16px; margin-bottom: 8px; }
.fr-snippet { margin-bottom: 14px; }
.fr-snippet-label { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.fr-snippet blockquote { margin: 5px 0 0; padding: 9px 16px; border-left: 3px solid var(--accent); background: #f6f7f9; font-style: italic; font-size: 13px; }
.fr-foot { margin-top: 30px; padding-top: 12px; border-top: 1px solid #ccc; color: #8893a0; font-size: 11.5px; }
.fr-export-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--accent); color: #fff; border: none; border-radius: 11px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; }
.fr-export-btn:hover { background: var(--green-dark); }
.fr-trend-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 10px; }
.fr-trend-improving { background: #E3F0E8; color: #2D7A4F; }
.fr-trend-steady { background: #EEE; color: #888; }
.fr-trend-declining { background: #F6EADA; color: #C77A2D; }
.fr-trend-no_data { background: #F0F0F0; color: #BBB; }

/* ══════════════ PHASE 4 — STAFFING ══════════════ */
/* The Staffing overview FILLS the content area (no centered max-width band) —
   #view-staffing already supplies padding:40px 44px. A generous ceiling keeps it
   sane on ultra-wide monitors without re-introducing the narrow centered column.
   (Root cause of the recurring "centered with empty margins": views fill by
   default; narrowness was this wrapper's opt-in max-width+margin:auto. Modals +
   reading columns keep their own caps — see the .rvd-* family, .mydev-body,
   .cf-sub.) NOTE: never let a star sit immediately before a slash inside a CSS
   comment — that pair terminates the comment early, and the parser's error
   recovery then discards the ENTIRE next rule block. A wildcard selector written
   that way in this very comment silently killed the .stf-wrap rule below for
   months: the symptom was Staffing computing as `display:block` with no gap,
   twice mis-diagnosed as a page-padding problem and "fixed" with explicit
   margins on the children (now removed, since the gap is real again). Keep a
   space after any star, or say "the .foo family" instead. */
.stf-wrap { max-width: 1400px; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 20px; }
/* Header line-rhythm: the .stf-wrap column gap (20px) owns the seams BETWEEN the
   header block, the lead line, and the panels — do not add margins for those.
   .stf-title's own margins sit INSIDE .stf-hd (between the eyebrow, the title and
   that block's baseline rule), so the wrapper gap never touches them. .stf-sub is
   NOT rendered on this page — it survives only in the dormant Insights cluster. */
.stf-title { font-size: 26px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.4px; line-height: 1.18; margin-bottom: 7px; }
.stf-sub { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.stf-card { background: var(--egg-card); border: 1.5px solid var(--egg-border); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.stf-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.stf-field-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.stf-select { width: 100%; padding: 10px 13px; font-size: 13.5px; font-family: inherit; border: 1.5px solid var(--egg-border); border-radius: 10px; color: var(--text-primary); box-sizing: border-box; }
.stf-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--ink-rgb),0.12); }
.stf-btn-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stf-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--accent); color: #fff; border: none; border-radius: 11px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; }
.stf-btn:hover { background: var(--green-dark); }
.stf-btn:disabled { opacity: 0.5; cursor: default; }
.stf-link { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: underline; }
.stf-empty { font-size: 13px; color: var(--text-muted); padding: 14px 0; }

/* Recommendation result */

/* Insights */
.stf-obs-card { background: var(--egg-card); border: 1.5px solid var(--egg-border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.stf-obs-top { display: flex; align-items: center; gap: 10px; }
.stf-obs-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.stf-obs-summary { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); flex: 1; }
.stf-obs-date { font-size: 11px; color: var(--text-muted); }
.stf-obs-detail { font-size: 12px; color: var(--text-secondary); background: var(--egg-bg); border-radius: 8px; padding: 10px; display: none; }
.stf-obs-detail.open { display: block; }
.stf-summary-banner { background: rgba(var(--ink-rgb),0.05); border: 1.5px solid rgba(var(--ink-rgb),0.15); border-radius: 12px; padding: 18px 22px; font-size: 14.5px; line-height: 1.7; color: var(--text-primary); }

/* Toast (assignment + undo) */
/* .stf-toast deleted — the staffing-explorer toast was retired with that flow
   (verified unreferenced); transient notices go through window._ratioToast. */

/* Inline staffing entry points (forms + detail pages) — assistive, not dominant */
.stf-entry { margin-top: 4px; display: flex; flex-direction: column; gap: 7px; }
.stf-entry-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stf-entry-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  background: var(--accent); color: #fff; border: none; border-radius: 9px;
  font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.13s;
}
.stf-entry-btn:hover { background: var(--green-dark); }

.td-file-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* The bespoke td-picker modal CSS was REMOVED (merged into the shared #atm2
   picker). .td-picker-foot / .td-picker-manage are KEPT — the workflow-team
   modal still uses them for its "Manage team" footer link. */
.td-picker-manage { background: none; border: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; }
.td-picker-manage:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════════
   CALENDAR BILLING CHIP + MODAL
═══════════════════════════════════════════════════ */
.bil-overlay {
  position: fixed; inset: 0;
  background: rgba(var(--tint-forest-rgb),0.45);
  z-index: 200; display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.bil-overlay.open { display: flex; }
.bil-modal {
  background: var(--egg-card);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5) var(--space-4);
  width: 390px; max-height: 78vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(var(--ink-deep-rgb),0.2);
  border: 1px solid var(--egg-border);
}
.bil-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--space-1);
}
.bil-modal-date { font-size: 20px; color: var(--text-primary); }   /* serif via the curated list */
.bil-modal-total { font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-4); }
.bil-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; line-height: 1; padding: 0;
  transition: color 0.13s; flex-shrink: 0;
}
.bil-modal-close:hover { color: var(--text-primary); }
.bil-case-row {
  border: 1px solid var(--egg-border); border-radius: 10px;
  margin-bottom: 8px; overflow: hidden; cursor: pointer;
  transition: border-color 0.13s;
}
.bil-case-row:hover { border-color: rgba(var(--ink-rgb),0.28); }
.bil-case-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--egg-card);
}
.bil-case-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bil-case-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.bil-case-hrs  { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.bil-chevron {
  width: 14px; height: 14px; color: var(--text-muted);
  transition: transform 0.18s; flex-shrink: 0;
}
.bil-case-row.open .bil-chevron { transform: rotate(90deg); }
.bil-wf-list {
  display: none;
  background: var(--egg-hover);
  padding: 6px 14px 10px;
  border-top: 1px solid var(--egg-border);
}
.bil-case-row.open .bil-wf-list { display: block; }
.bil-wf-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--egg-border);
  font-size: 12px;
}
.bil-wf-row:last-child { border-bottom: none; }
.bil-wf-name { color: var(--text-secondary); flex: 1; padding-right: 12px; }
.bil-wf-hrs  { font-weight: 700; color: var(--text-primary); flex-shrink: 0; }

/* ── Stage 4: unified day popup — events section, empty states, CTA ── */
.bil-sec-label {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--bronze);
  margin: 16px 0 9px;
}
.bil-empty {
  font-family: var(--font-body); font-size: 13px; color: var(--text-muted);
  font-style: italic; padding: 4px 2px 8px;
}
.bil-ev-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--egg-border); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 8px;
}
.bil-ev-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--green-sage);
}
.bil-ev-main { flex: 1; min-width: 0; }
.bil-ev-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bil-ev-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.bil-ev-log {
  flex-shrink: 0; background: none; border: 1.5px solid var(--egg-border);
  color: var(--text-secondary); border-radius: 8px; padding: 4px 11px;
  font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font-sans);
  letter-spacing: 0.02em; transition: all 0.14s;
}
.bil-ev-log:hover { border-color: var(--bronze); color: var(--bronze); background: rgba(var(--gold-rgb),0.06); }
.bil-logtime-btn {
  width: 100%; margin-top: 14px; background: var(--forest); color: #fff;
  border: none; border-radius: 11px; padding: 11px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-sans);
  letter-spacing: 0.02em; transition: background 0.14s;
}
.bil-logtime-btn:hover { background: var(--accent); }

/* ═══════════════════════════════════════════════════
   TIME PAGE
═══════════════════════════════════════════════════ */
#view-time,
#view-performance,
#view-perf-my,
#view-perf-team {
  display: none; flex-direction: column;
  overflow-y: auto; padding: 40px 44px; gap: 28px;
  scrollbar-gutter: stable;   /* always reserve the scrollbar track so content
                                 width is identical whether or not the view scrolls
                                 (keeps the centered billing toggle from shifting). */
}
#view-time.active,
#view-performance.active,
#view-perf-my.active,
#view-perf-team.active { display: flex; }

.time-page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.time-page-title {
  font-size: 28px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px;
}

/* My Billing — moved personal billing summary block */

/* ── My / Team sliding toggle (light, animated pill) ── */
.bill-toggle {
  position: relative; display: inline-flex; align-items: stretch;
  background: var(--egg-hover); border: 1px solid var(--egg-border);
  border-radius: 11px; padding: 4px;
}
.bill-toggle-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  background: var(--egg-card); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(var(--ink-deep-rgb),0.12);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}
.bill-toggle[data-active="team"] .bill-toggle-pill { transform: translateX(100%); }
.bill-toggle-opt {
  position: relative; z-index: 1; border: none; background: none; cursor: pointer;
  padding: 7px 22px; font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  color: var(--text-muted); transition: color 0.2s; white-space: nowrap;
}
.bill-toggle-opt.active { color: var(--accent); }

/* ── Merged entries table block on My Billing ── */
.time-entries { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.bt-entries-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.bt-entries-hdr .bt-filter-row { margin: 0; }

/* ── Compact billing overview (stat strip + chart/pie side-by-side) so the
   entries table surfaces near the fold (replaced the tall stacked summary). ── */
.bill-stat-strip { display: flex; gap: 12px; flex-shrink: 0; }
.bill-stat {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: 11px;
  padding: 11px 16px;
}
.bill-stat-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); font-family: var(--font-sans);
}
.bill-stat-value {
  font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px;
  font-family: var(--font-sans); margin-left: auto;
}
.bill-stat-detail { font-size: 11px; color: var(--text-muted); width: 100%; }

.bill-overview { display: flex; gap: 20px; align-items: stretch; flex-shrink: 0; }
.bill-overview-chart { flex: 2 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bill-overview-side  { flex: 1 1 0; min-width: 230px; display: flex; flex-direction: column; gap: 12px; }
/* The chart card FILLS its column (the columns are stretched to equal height); the
   chart body absorbs any extra so the footer pins to the bottom — so when the
   "Hours by Case" pie/ledger is taller, no dead space opens under the chart card
   and "My Time Entries" sits ~24px below the overview row, not ~100px. */
#view-time .bill-overview-chart > .time-chart-card { flex: 1 1 auto; display: flex; flex-direction: column; }
#view-time .time-chart-card .bill-chart-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* Pie card is now the WHOLE side column — fill the height + vertically center the
   pie+legend so it aligns symmetrically with the chart card (no lopsided top gap). */
.bill-pie-card { flex: 1; padding: 18px 20px !important; gap: 12px !important; width: auto !important; max-width: none !important; display: flex; flex-direction: column; }

/* ── My Billing module redesign — "Billed Hours" + "Hours by Case" ── */
#view-time .time-chart-card,
#view-time .bill-pie-card {
  padding: 0 !important; gap: 0 !important; overflow: hidden;
  background: #fff; border: 1px solid #e7ddc9; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(24,40,63,.04), 0 10px 26px rgba(24,40,63,.05);
}
/* FIX 3 — the pie card inherits `.ta-chart-card { align-items:center }`, which shrank
   the header band to its text width (a floating inset ribbon). Stretch so the band +
   body span the FULL card width (band → flush top + sides, top corners clipped to the
   card's 16px radius by overflow:hidden, like the Billed Hours band). */
#view-time .bill-pie-card { display: flex; flex-direction: column; align-items: stretch !important; }
/* WARM editorial card header (the navy gradient band is KILLED) + a de-slabbed
   hero. Quiet DM-Serif title + muted-navy subtitle on the white card surface,
   a warm hairline under; nav/Calendar are quiet warm DNA controls at the right. */
#view-time .bill-chd { display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:20px 24px 16px; border-bottom:1px solid #ece4d4; background:#fff; }
#view-time .bill-ct { font-family:'DM Serif Display',serif; font-size:22px; color:#18283F; line-height:1.1; }
#view-time .bill-cs { font-family:'Inter',sans-serif; font-size:12px; color:#8B97A8; margin-top:6px; }
#view-time .bill-ctrls { display:flex; gap:8px; align-items:center; flex-shrink:0; }
#view-time .bill-navbtn { width:30px; height:30px; border:1px solid #e7ddc9; background:#fffdf9; border-radius:8px;
  color:#45566E; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; cursor:pointer;
  font-family:'Inter',sans-serif; line-height:1; padding:0; transition:.13s; }
#view-time .bill-calbtn { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#45566E;
  background:#fffdf9; border:1px solid #e7ddc9; border-radius:8px; padding:0 12px; height:30px; cursor:pointer;
  white-space:nowrap; transition:.13s; }
#view-time .bill-navbtn:hover, #view-time .bill-calbtn:hover { border-color:var(--bronze-bright); background:rgba(var(--gold-rgb),.10); }
/* THE ONE WEEKLY HERO — big DM-Serif figure (left) + quiet muted-navy sub-stats
   (right), on the warm surface. Financial figures, allowed. */
#view-time .bill-figrow { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:16px 24px 8px; background:#fff; }
#view-time .bill-figlbl { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8B97A8; }
#view-time .bill-fignum { font-family:'DM Serif Display',serif; font-size:40px; color:#18283F; line-height:1; margin-top:6px; }
#view-time .bill-figsub { text-align:right; font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:#45566E; }
#view-time .bill-figsub-line { display:flex; gap:14px; align-items:center; justify-content:flex-end; }
#view-time .bill-fig-delta { color:#8B97A8; margin-top:6px; }
#view-time .bill-split-seg { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
#view-time .bill-split-seg.sub   { color:#1E5C3A; }
#view-time .bill-split-seg.draft { color:#9C7A3F; }
#view-time .bill-split-sep { color:#c9bfa8; margin:0 2px; }
#view-time .bill-split-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
#view-time .bill-split-dot.sub   { background:#1E5C3A; }
#view-time .bill-split-dot.draft { background:#9C7A3F; }
#view-time .bill-chart-body { padding:14px 16px 4px; background:#FAF9F6; }
#view-time .bill-chart-foot { display:flex; border-top:1px solid #ece3d2; background:#FAF9F6; }
#view-time .bill-foot-cell { flex:1; padding:13px 14px; text-align:center; min-width:0; }
#view-time .bill-foot-cell + .bill-foot-cell { border-left:1px solid #ece3d2; }
#view-time .bill-foot-fig { font-family:'DM Serif Display',serif; font-size:20px; color:#18283F; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-time .bill-foot-lbl { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a8478; margin-top:4px; }
/* Module 2 — donut + ranked ledger. GENERALIZED (#view-time + #view-home) so the
   SAME component renders identically on Home's "This Week" rail and the billing card. */
#view-time .bill-bycase-body, #view-home .bill-bycase-body { display:flex; gap:24px; align-items:center; justify-content:center; padding:24px; flex-wrap:wrap; }
#view-time .bill-donut-wrap, #view-home .bill-donut-wrap { position:relative; flex:0 0 auto; width:170px; height:170px; max-width:100%; }
#view-time .bill-donut-wrap svg, #view-home .bill-donut-wrap svg { width:100%; height:100%; display:block; }
#view-time .bill-donut-center, #view-home .bill-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; text-align:center; }
#view-time .bill-donut-total, #view-home .bill-donut-total { font-family:'DM Serif Display',serif; font-size:27px; color:#18283F; line-height:1; }
#view-time .bill-donut-cap, #view-home .bill-donut-cap { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a8478; margin-top:4px; }
#view-time .bill-ledger, #view-home .bill-ledger { flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:13px; }
#view-time .bill-ledger-empty, #view-home .bill-ledger-empty { font-family:'Spectral',serif; font-style:italic; font-size:13.5px; color:#8a8478; }
#view-time .bill-ledger-row, #view-home .bill-ledger-row { display:flex; align-items:center; gap:10px; }
#view-time .bill-ledger-tick, #view-home .bill-ledger-tick { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
#view-time .bill-ledger-main, #view-home .bill-ledger-main { flex:1; min-width:0; }
#view-time .bill-ledger-toprow, #view-home .bill-ledger-toprow { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
#view-time .bill-ledger-name, #view-home .bill-ledger-name { font-family:'Inter',sans-serif; font-size:14px; color:#18283F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-time .bill-ledger-hrs, #view-home .bill-ledger-hrs { font-family:'DM Serif Display',serif; font-size:16px; color:#18283F; flex:0 0 auto; }
#view-time .bill-ledger-hrs { font-size:20px; }   /* My-Billing "donut legend total" tier (Home keeps 16px) */
#view-time .bill-ledger-bar, #view-home .bill-ledger-bar { height:7px; border-radius:4px; background:#efe7d6; margin-top:5px; overflow:hidden; }
#view-time .bill-ledger-barfill, #view-home .bill-ledger-barfill { height:100%; border-radius:4px; }
#view-time .bill-ledger-pct, #view-home .bill-ledger-pct { font-family:'Inter',sans-serif; font-size:11px; color:#8a8478; flex:0 0 auto; width:34px; text-align:right; }
@keyframes billFade { from { opacity:0 } to { opacity:1 } }
#view-time .bill-area-in { animation: billFade .5s ease both; }
#view-time .bill-line-in { animation: billFade .65s ease both; }
@media (prefers-reduced-motion: reduce) { #view-time .bill-area-in, #view-time .bill-line-in { animation: none; } }

/* ── TIME-PAGE HEADER BELT ── one coherent band on both billing views:
   serif title (left) + the sliding toggle (ABSOLUTELY centered, so the
   anchor never jumps between views) + the CTA/month (right). Sticky, with a
   translucent blur instead of a solid off-color strip (the living canvas
   shows through the page, so a flat --egg-bg band read as a different
   color). The Enter Time stickiness is preserved (the belt is the sticky). */
.time-belt {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-shrink: 0;
}
.time-belt .bill-toggle {
  position: absolute; left: 50%; transform: translateX(-50%);
}
.time-page-hdr-sticky {
  position: static;            /* scrolls away normally like every other page header */
  padding: 22px 0 12px;
}
.bill-enter-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  background: var(--forest); color: #fff; border: none; border-radius: 11px;
  padding: 10px 20px; font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  letter-spacing: 0.01em; cursor: pointer;
  box-shadow: 0 2px 10px rgba(var(--ink-rgb),0.22);
  transition: background 0.14s, transform 0.12s, box-shadow 0.14s;
}
.bill-enter-btn:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--ink-rgb),0.3); }
.bill-enter-plus { font-size: 17px; font-weight: 800; line-height: 1; }

/* My Development — deferred placeholder shell */
.mydev-body { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); max-width: 540px; }

/* ── Billing pages (Team Billing + Case billing detail) ── */
#view-team-billing, #view-case-billing, #view-tm-billing {
  display: none; flex-direction: column; overflow-y: auto; padding: 40px 44px; gap: 22px;
  scrollbar-gutter: stable;   /* reserve the scrollbar track so a short (non-
                                 scrolling) Team page has the SAME content width as
                                 the tall My-Billing page → the centered toggle lands
                                 identically on both (no 15px scrollbar-reflow gap). */
}
#view-team-billing.active, #view-case-billing.active, #view-tm-billing.active { display: flex; }
/* Billing scroll containers (My + Team) drop their TOP padding so the sticky
   header belt pins FLUSH at the scrollport top. A `top:0` sticky element is
   offset from the PADDING box, so a container padding-top left a 40px band above
   the pinned belt that rows bled through on scroll (read as the header being
   "cut off"). Placed AFTER both container rules so it wins the cascade for both;
   the belt supplies its own top breathing room via its padding (side/bottom stay). */
#view-time, #view-team-billing { padding-top: 0; }
/* Toggle row — TOP-CENTER on both billing views (primary view-switcher). A
   center-anchored toggle sits at the page midpoint identically on My/Team, so it
   never shifts when toggled (removed the residual ~15px right-aligned jump). */
.bill-toggle-row { display: flex; justify-content: center; flex-shrink: 0; }
/* Header group: title + subtitle travel as ONE section so the view gap fires
   once between the group and the modules (no negative-margin hack). */
.tb-subrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.tb-month { font-size: 12.5px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.3px; }
.tb-sub   { font-size: 13px; color: var(--text-muted); }
/* auto-FIT (not auto-fill) so a couple of cases stretch to fill the row instead
   of leaving empty tracks; large min-width so cards are substantial. */
.tb-modules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 20px; flex-shrink: 0;
}
.tb-module {
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: 16px;
  padding: 26px 28px 22px; cursor: pointer;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb),0.05);
  transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
}
.tb-module:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(var(--ink-deep-rgb),0.1); border-color: rgba(var(--ink-rgb),0.28); }
.tb-module-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); }
.tb-module-name { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--text-primary); line-height: 1.25; }
.tb-module-hours { font-size: 34px; font-weight: 800; color: var(--accent); letter-spacing: -0.6px; margin-top: 2px; }
.tb-module-hours-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; margin-left: 6px; }
.tb-module-foot { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.tb-message { font-size: 13.5px; color: var(--text-muted); background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: 12px; padding: 28px; text-align: center; }

/* ── Landing-card teammate distribution (data reused from /case/:id byTeammate) ── */
.tb-dist { margin-top: 6px; min-height: 52px; }
.tb-dist-bar {
  display: flex; width: 100%; height: 22px; border-radius: 7px; overflow: hidden;
  background: var(--egg-hover); border: 1px solid var(--egg-border);
}
.tb-dist-seg { height: 100%; min-width: 2px; transition: opacity 0.13s; }
.tb-dist-bar:hover .tb-dist-seg { opacity: 0.85; }
.tb-dist-names {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 11px;
  font-size: 12.5px; color: var(--text-secondary);
}
.tb-dist-name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tb-dist-name strong { color: var(--text-primary); font-weight: 700; }
.tb-dist-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tb-dist-more { font-size: 12px; color: var(--text-muted); font-style: italic; }
.tb-dist-loading, .tb-dist-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 8px 0; }

/* Case-billing detail */
.cb-toggle { display: inline-flex; gap: 0; border: 1.5px solid var(--egg-border); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.cb-toggle-btn {
  padding: 9px 18px; font-size: 12.5px; font-weight: 700; font-family: inherit;
  background: var(--egg-card); color: var(--text-secondary); border: none; cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.cb-toggle-btn + .cb-toggle-btn { border-left: 1.5px solid var(--egg-border); }
.cb-toggle-btn.active { background: var(--accent); color: #fff; }
.cb-search {
  width: 100%; max-width: 320px; box-sizing: border-box; padding: 9px 13px;
  border: 1.5px solid var(--egg-border); border-radius: 10px; background: var(--egg-card);
  font-family: inherit; font-size: 13px; color: var(--text-primary);
}
.cb-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--ink-rgb),0.10); }
.cb-card {
  background: var(--egg-card); border: 1.5px solid var(--egg-border); border-radius: 16px;
  padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; overflow: visible;
  width: 100%; max-width: 700px;   /* constrained — no full-page stranding */
}
.cb-total { font-size: 13px; color: var(--text-muted); }
.cb-total strong { font-size: 22px; color: var(--text-primary); font-weight: 800; letter-spacing: -0.4px; }
.cb-pie-row { display: flex; gap: 22px; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.cb-pie { flex-shrink: 0; overflow: visible; }
/* Pie spin/sweep-in on (re)render — subtle, quick. */
@keyframes pieSweep {
  from { transform: rotate(-115deg) scale(0.72); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: rotate(0deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  svg[style*="pieSweep"] { animation: none !important; }
}
.cb-hint { font-size: 12px; color: var(--text-muted); font-style: italic; }
.cb-drill-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cb-back-btn {
  background: rgba(var(--ink-rgb),0.08); border: 1px solid rgba(var(--ink-rgb),0.18); border-radius: 8px;
  padding: 6px 12px; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--accent); cursor: pointer;
}
.cb-back-btn:hover { background: rgba(var(--ink-rgb),0.14); }
.cb-drill-sep { color: var(--text-muted); }
.cb-drill-cur { font-weight: 700; color: var(--text-primary); }
.cb-legend { flex: 0 1 auto; min-width: 200px; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.cb-search-results { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }


/* My Billing — compact, columnar density */
#view-time { gap: 18px; }
/* My Billing by-case pie: a compact, snug pie+legend unit — content-sized
   card (not full-width), pie left + legend immediately beside it. */

.time-chart-card { min-height: 0; }
/* Weekly chart: fixed 280px height + width:100%; renderBarChart sets the viewBox
   width to the measured px so 1 unit = 1px (no stretch). */
#view-time .time-chart-card .chart-area svg { height: 280px; width: 100%; display: block; }


.time-bottom-row {
  display: flex; gap: 12px; align-items: center; flex-shrink: 0;
}
.time-sync-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--egg-card); border: 1px solid var(--egg-border);
  border-radius: 10px; padding: 11px 18px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb),0.05);
  transition: border-color 0.13s, box-shadow 0.13s;
}
.time-sync-btn:hover { border-color: rgba(var(--ink-rgb),0.3); box-shadow: 0 3px 10px rgba(var(--ink-deep-rgb),0.09); }
.time-sync-btn svg { flex-shrink: 0; color: var(--accent); }

/* ── Enter Time modal ── */
.et-overlay {
  position: fixed; inset: 0; background: rgba(var(--tint-forest-rgb),0.45);
  z-index: 200; display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.et-overlay.open { display: flex; }
.et-modal {
  background: var(--egg-card); border-radius: 16px;
  width: 460px; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px rgba(var(--tint-forest-rgb),0.2); border: 1px solid var(--egg-border);
}
.et-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 28px 0; margin-bottom: 22px; flex-shrink: 0;
}
.et-title { font-size: 20px; color: var(--text-primary); }   /* serif via the curated list */
.et-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; padding: 0; line-height: 1;
  transition: color 0.13s;
}
.et-close:hover { color: var(--text-primary); }
.et-form { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1 1 auto; padding: 0 28px 8px; }
.et-footer { flex-shrink: 0; padding: 14px 28px 22px; background: var(--egg-card); border-top: 1px solid var(--egg-border); }
.et-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.et-field { display: flex; flex-direction: column; gap: 6px; }
.et-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.et-input, .et-select, .et-textarea {
  background: var(--egg-hover); border: 1px solid var(--egg-border);
  border-radius: 9px; padding: 10px 13px;
  font-size: 13px; color: var(--text-primary); font-family: inherit;
  transition: border-color 0.13s, background 0.13s;
}
.et-input:focus, .et-select:focus, .et-textarea:focus {
  outline: none; border-color: var(--accent); background: #fff;
}
.et-select { appearance: none; cursor: pointer; }
.et-textarea { min-height: 88px; resize: vertical; line-height: 1.6; }
.et-submit {
  width: 100%; padding: 12px; margin-top: 4px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 10px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity 0.13s;
  font-family: inherit;
}
.et-submit:hover { opacity: 0.88; }
.et-success {
  display: none; text-align: center; padding: 16px 0 4px;
  font-size: 14px; font-weight: 600; color: var(--accent);
}

/* Enter Time — case / task search combos */
.et-field.disabled { opacity: 0.5; pointer-events: none; }
.et-combo { position: relative; }
/* ── THE shared typeahead dropdown (.tya-* — window._ratioSuggest). One box,
   one row anatomy, one keyboard model for every type-to-pick field (Enter-Time
   case + task, Manage-Team, Workflow-Team, Reviews reviewer). Home standard:
   bordered card on the token scale. ── */
.tya-box {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(var(--ink-deep-rgb),0.16);
  max-height: 230px; overflow-y: auto; padding: var(--space-1);
  display: none;
}
.tya-box.open { display: block; }
.tya-item, .tya-create {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 9px 11px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; color: var(--text-primary);
}
.tya-item:hover, .tya-item.active,
.tya-create:hover, .tya-create.active { background: var(--egg-hover); }
.tya-item.active, .tya-create.active { box-shadow: inset 0 0 0 1px var(--egg-border); }
.tya-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; color: #fff; background: var(--green-mid);
}
.tya-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tya-sub { font-size: 11px; color: var(--text-muted); margin-left: auto; flex-shrink: 0; }
.tya-create {
  color: var(--bronze); font-weight: 700;
  border-top: 1px solid var(--egg-border); margin-top: 2px; border-radius: 0;
}
.tya-empty { padding: 9px 11px; font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); }
.et-linked {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  padding: 7px 11px; border-radius: 8px;
  background: rgba(var(--ink-rgb),0.07); border: 1px solid rgba(var(--ink-rgb),0.16);
  font-size: 12.5px; color: var(--text-primary);
}
.et-linked-ic { font-size: 12px; }
.et-linked strong { color: var(--accent); }
.et-linked-clear {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; line-height: 1; padding: 2px 4px;
}
.et-linked-clear:hover { color: var(--text-primary); }
.et-newwf-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }

/* ── Sync modal ── */
.sync-overlay {
  position: fixed; inset: 0; background: rgba(var(--tint-forest-rgb),0.45);
  z-index: 200; display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.sync-overlay.open { display: flex; }
.sync-modal {
  background: var(--egg-card); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-5); width: 420px; max-height: 82vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(var(--ink-deep-rgb),0.2); border: 1px solid var(--egg-border);
}
.sync-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3);
}
.sync-title { font-size: 20px; color: var(--text-primary); }   /* serif via the curated list */
.sync-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; padding: 0; line-height: 1;
  transition: color 0.13s;
}
.sync-close:hover { color: var(--text-primary); }
.sync-app-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--egg-border);
}
.sync-app-row:last-child { border-bottom: none; }
.sync-app-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -0.5px;
}
.sync-app-info { flex: 1; }
.sync-app-name  { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.sync-app-desc  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.sync-btn {
  padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.13s; white-space: nowrap; font-family: inherit;
  border: 1.5px solid rgba(var(--ink-rgb),0.3); background: transparent; color: var(--accent);
}
.sync-btn:hover { background: rgba(var(--ink-rgb),0.08); }
.sync-btn.connected {
  background: rgba(var(--ink-rgb),0.1); border-color: var(--accent); color: var(--accent);
}

/* ── Performance ── */

/* Dashboard */
.perf-module {
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 18px; padding: 36px 48px;
  display: flex; align-items: center; gap: 52px;
  cursor: pointer; transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
  min-height: 0; position: relative; overflow: visible;
}
.perf-module:hover {
  background: var(--egg-hover); border-color: rgba(var(--ink-rgb),0.28);
  box-shadow: 0 6px 28px rgba(var(--ink-deep-rgb),0.10);
}

/* Slice-hover: dim surrounding content, pie stays vivid */
/* Billing-pie legends stay fully opaque on hover (no fade) — the legend is the
   single labeling source for these simple side-by-side pies. */

/* Teammate avatars strip in module */
.perf-tm-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
  border: 2px solid var(--egg-bg);
}

/* Legend */
.perf-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.perf-legend-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.perf-legend-case { color: var(--text-muted); flex: 1; }
.perf-legend-hrs  { color: var(--text-primary); font-weight: 700; flex-shrink: 0; margin-left: 8px; }

/* Sub-pages header */

/* Sub-page content cards */

/* Teammate perf cards */

/* Teammate performance page modules */
.tm-perf-module {
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 16px; padding: 22px 26px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer; transition: background 0.14s, box-shadow 0.14s, border-color 0.14s;
}
.tm-perf-module:hover {
  background: var(--egg-hover); border-color: rgba(var(--ink-rgb),0.28);
  box-shadow: 0 4px 18px rgba(var(--ink-deep-rgb),0.10);
}
.tm-perf-module-top { display: flex; align-items: center; gap: 14px; }
.tm-perf-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.tm-perf-name  { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.tm-perf-title { font-size: 12px; color: var(--text-muted); }
.tm-perf-divider { height: 1px; background: var(--egg-border); }
.tm-perf-stats { display: flex; gap: 20px; }
.tm-perf-stat  { display: flex; flex-direction: column; gap: 2px; }
.tm-perf-stat-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.7px; }
.tm-perf-stat-value { font-size: 18px; font-weight: 800; color: var(--green-dark); letter-spacing: -0.4px; }
.tm-perf-primary-case {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted);
}
.tm-perf-case-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Individual teammate detail page */
.tm-detail-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0;
}

/* Deadlines module */

/* Preview sub-module row */

/* Sub-page list */

/* Time analytics */
.ta-chart-card {
  flex: 1; min-width: min(100%, 460px);
  background: var(--egg-card); border: 1.5px solid var(--egg-border);
  border-radius: 16px; padding: 32px 40px;
  display: flex; flex-direction: column; gap: 24px; align-items: center;
  overflow: visible; position: relative;
}

/* Breakdown section */

/* ═══════════════════════════════════════════════════
   AC-* SHARED STYLES — used by the manual New Case form (#view-add-case,
   restored), the document analysis upload box (.ac-drop-zone / .ac-pill*), and
   the task-detail work-product dropzone.
═══════════════════════════════════════════════════ */
/* Manual New Case view layout (the per-view display rule, restored). */
#view-add-case { display: none; flex-direction: column; overflow-y: auto; padding: 40px 44px; gap: 24px; }
#view-add-case.active { display: flex; }
/* Editorial page header — breadcrumb, then eyebrow + serif title on the
   baseline rule (the Directory/Documents header rhythm) */
.ac-page-header { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ac-hd { display: flex; flex-direction: column; gap: var(--space-1); border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--space-3); }
.ac-hd-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); }
.ac-page-title {
  font-size: 30px;
  color: var(--accent);
  line-height: 1.1;   /* DM Serif via the curated list */
}

.ac-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  flex-shrink: 0;
}

/* WARM panel surfaces (the Directory warmth lesson — not cold gray-on-white) */
.ac-half {
  background: var(--egg-card);
  border: 1px solid #e7ddc9;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 18px 40px -30px rgba(24,40,63,.12);
}

.ac-half-title {
  font-size: 20px;
  color: var(--accent);   /* DM Serif via the curated list */
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(var(--gold-rgb),.35);
}


/* Upload drop zone — warm dashed bronze border, navy/bronze affordance */
.ac-drop-zone {
  border: 1.5px dashed rgba(var(--gold-rgb),.5);
  border-radius: var(--radius-md);
  padding: 38px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: rgba(240,235,225,0.35);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
  text-align: center;
}
.ac-drop-zone:hover {
  background: rgba(var(--gold-rgb),0.07);
  border-color: var(--bronze);
}
.ac-drop-zone.drag-over {
  background: rgba(var(--ink-rgb),0.09);
  border-color: var(--green-mid);
  border-style: solid;
}
.ac-drop-zone.has-file {
  border-color: var(--green-mid);
  border-style: solid;
  background: rgba(var(--ink-rgb),0.05);
}
.ac-file-card {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 12px;
  background: var(--egg-bg);
  border: 1.5px solid var(--egg-border);
  border-radius: 9px;
  width: 100%;
  box-sizing: border-box;
}
.ac-file-card.show { display: flex; }
/* Per-file removable pills (multi-file upload batch) */
.ac-pills { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }
.ac-pill {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 6px 5px 9px; border-radius: 8px;
  background: var(--egg-card); border: 1px solid var(--egg-border);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.ac-pill-icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--bronze); }
.ac-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ac-pill-x {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: all .12s; padding: 0;
}
.ac-pill-x:hover { background: rgba(var(--danger-rgb),0.12); color: var(--danger); }
.ac-file-card-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-secondary); }
.ac-clear-btn {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s; padding: 0; margin-left: 2px;
}
.ac-clear-btn:hover { background: rgba(var(--danger-rgb),0.1); color: var(--danger); }
.ac-file-card-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  text-align: left;
}
.ac-upload-btn {
  flex-shrink: 0;
  padding: 5px 14px;
  background: var(--green-mid);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.13s;
}
.ac-upload-btn:hover { background: var(--green-dark); }
.ac-upload-btn.done {
  background: rgba(36,53,88,0.12);
  color: #243558;
  cursor: default;
  pointer-events: none;
}
.ac-drop-icon {
  width: 46px; height: 46px;
  background: var(--accent);   /* navy circle, cream mark (the Home QA-tile affordance) */
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.ac-drop-icon svg { width: 20px; height: 20px; color: var(--logo-cream); }
.ac-drop-label { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.ac-drop-or { font-family: var(--font-body); font-style: italic; font-size: 11.5px; color: var(--text-secondary); }
.ac-browse-btn {
  padding: 8px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s;
}
.ac-browse-btn:hover { background: var(--green-mid); }
.ac-file-types { font-size: 10.5px; color: var(--text-muted); font-weight: 500; }

/* The labeled OR rule between the two paths — deliberate, not a bare "OR" */
.ac-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  gap: 10px;
  align-self: stretch;
}
.ac-divider-line { flex: 1; width: 1px; background: #ece4d4; }
.ac-divider-text {
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 700;
  color: var(--bronze);
  text-transform: uppercase; letter-spacing: .16em;
}

/* Form fields */
.ac-form { display: flex; flex-direction: column; gap: 15px; }

.ac-field { display: flex; flex-direction: column; gap: 5px; }

/* Field labels — the DNA caps style in muted navy (bronze stays the accent) */
.ac-label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .1em;
}
.ac-optional { font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

/* Inputs on the warm token family — bronze focus */
.ac-input, .ac-select {
  width: 100%;
  padding: 10px 13px;
  background: #fffdf9;
  border: 1px solid #e7ddc9;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--accent);
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.13s, box-shadow 0.13s;
}
.ac-input::placeholder { color: var(--text-muted); font-weight: 400; }
.ac-input:focus, .ac-select:focus {
  border-color: var(--bronze-bright);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.14);
}
.ac-select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C7A3F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
}

/* Our Role segmented control — the bronze active state (the Directory
   active-filter treatment), reading clearly as the selection */
.ac-role-group { display: flex; gap: 7px; }
.ac-role-btn {
  flex: 1;
  padding: 9px 6px;
  background: #fffdf9;
  border: 1px solid #e7ddc9;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer; text-align: center;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.ac-role-btn:hover { background: rgba(var(--gold-rgb),0.07); border-color: var(--bronze-bright); }
.ac-role-btn.selected {
  background: rgba(var(--gold-rgb),0.14);
  border-color: var(--bronze-bright);
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--bronze-bright);
}

/* Actions — navy primary + quiet secondary */
.ac-actions { display: flex; gap: 10px; margin-top: var(--space-2); }
.ac-cancel-btn {
  padding: 10px 22px;
  background: transparent;
  border: 1px solid #e7ddc9;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
}
.ac-cancel-btn:hover { background: rgba(var(--gold-rgb),0.07); border-color: var(--bronze-bright); }
.ac-save-btn {
  flex: 1;
  padding: 10px 22px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  color: #fff; cursor: pointer;
  transition: background 0.13s;
}
.ac-save-btn:hover { background: var(--green-mid); }

/* Assign-to-teammate button in form actions */

/* ── Assign to Teammate overlay ── */
.atm-overlay {
  position: fixed; inset: 0; background: rgba(var(--tint-forest-rgb),0.45);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.atm-overlay.open { opacity: 1; pointer-events: all; }
.atm-modal {
  background: var(--egg-card);
  border-radius: 16px;
  width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(var(--tint-forest-rgb),0.2);
  border: 1px solid var(--egg-border);
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════
   SETTINGS VIEW
═══════════════════════════════════════════════════ */
#view-settings {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 44px;
  gap: 28px;
}
#view-settings.active { display: flex; }

.settings-page-title {
  font-size: 26px; font-weight: 700;
  color: var(--text-primary); letter-spacing: -0.4px;
  flex-shrink: 0;
}

.settings-section {
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.settings-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--egg-border);
  background: var(--egg-bg);
}
.settings-section-title {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-secondary);
}
.settings-section-body { padding: 20px 24px; }

/* Account Settings */
.settings-field-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
}
.settings-field-row:last-child { margin-bottom: 0; }
.settings-field-label {
  width: 110px; flex-shrink: 0;
  font-size: 12px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px;
}
.settings-field-val {
  font-size: 14px; font-weight: 500; color: var(--text-primary);
  flex: 1;
}
.settings-field-input {
  flex: 1;
  background: var(--egg-bg); border: 1.5px solid var(--egg-border);
  border-radius: 8px; padding: 8px 12px;
  font-size: 14px; font-weight: 500; color: var(--text-primary);
  font-family: var(--font-sans);
  outline: none; transition: border-color 0.14s;
}
.settings-field-input:focus { border-color: var(--forest); }
.settings-edit-btn {
  background: none; border: 1.5px solid var(--egg-border);
  border-radius: 7px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; color: var(--forest);
  cursor: pointer; font-family: var(--font-sans);
  transition: background 0.13s, border-color 0.13s;
}
.settings-edit-btn:hover { background: var(--egg-hover); border-color: rgba(var(--ink-rgb),0.3); }
.settings-save-btn {
  background: var(--forest); color: #fff; border: none;
  border-radius: 7px; padding: 7px 16px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--font-sans); transition: background 0.13s;
}
.settings-save-btn:hover { background: var(--green-mid); }
.settings-cancel-btn {
  background: none; border: 1.5px solid var(--egg-border);
  border-radius: 7px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; font-family: var(--font-sans);
}

/* Teammate History */

/* Notification Preferences */
.settings-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--egg-border);
}
.settings-toggle-row:last-child { border-bottom: none; }
.settings-toggle-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.settings-toggle-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.settings-toggle {
  width: 40px; height: 22px; border-radius: 11px;
  background: #D4CEC8; border: none; cursor: pointer;
  position: relative; flex-shrink: 0;
  transition: background 0.2s;
}
.settings-toggle.on { background: var(--forest); }
.settings-toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 0.2s;
}
.settings-toggle.on::after { left: 21px; }

/* Connected Apps (reuse existing ca- styles + small overrides) */
.settings-ca-wrap { padding: 4px 0; }

/* ═══════════════════════════════════════════════════
   TEAMMATES VIEW
═══════════════════════════════════════════════════ */
#view-teammates {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 44px;
  gap: 24px;
}
#view-teammates.active { display: flex; }

/* ── Directory page header — editorial: eyebrow + serif title + quiet count on
   one baseline rule (the shared .cm-hd/.docs-hd DNA). .tm-page-title's serif
   comes from the curated RESKIN list; this rule sets size/color only. ── */
.tm-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(var(--gold-rgb),.4);   /* bronze-tinted baseline rule — editorial, not gray */
}
.tm-page-title {
  font-size: 32px;
  color: var(--text-primary);
  letter-spacing: 0;
  line-height: 1.1;
  margin-top: 6px;
}
.tm-hd-count {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: #a8842f;               /* the deliberate bronze count (eyebrow family) */
  padding-bottom: 4px;
  white-space: nowrap;
}

/* ── Directory controls: search + filters ── */
.tmd-search-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 240px;
}
.tmd-search-icon {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.tmd-search {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px 11px 38px;
  border: none;
  border-radius: 11px;
  background: var(--egg-card);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.tmd-search::placeholder { color: var(--text-muted); }
.tmd-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--ink-rgb),0.10);
}
.tmd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tmd-filter {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 30px 9px 13px;
  border: 1.5px solid var(--egg-border);
  border-radius: 10px;
  background: var(--egg-card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23556' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
    no-repeat right 10px center;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s;
}
.tmd-filter:hover { border-color: rgba(var(--ink-rgb),0.32); }
.tmd-filter:focus { outline: none; border-color: var(--accent); color: var(--text-primary); }

/* Profile-modal detail rows */
.tmd-detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid var(--egg-border);
}
.tmd-detail-row:last-child { border-bottom: none; }
.tmd-detail-label {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.tmd-detail-val {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-primary);
}
.tmd-detail-link { color: var(--accent); text-decoration: none; }
.tmd-detail-link:hover { text-decoration: underline; }
.tmd-detail-muted { color: var(--text-muted); font-weight: 500; }
.tmd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tmd-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--ink-rgb),0.08);
  color: var(--accent);
  font-size: 11.5px; font-weight: 700;
  padding: 4px 11px;
  border-radius: 20px;
}

/* ═══ Directory — DNA redesign: light My-Profile card + search-first ledger ═══
   (the navy gradient slab, tan-filled controls, and centered tiles are gone) */
.tmp-eyebrow { font: 600 12px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #a8842f; }
/* My Profile — one crisp bordered card: light head (avatar · identity · modest
   completeness ring) over a hairline-divided ledger strip, then a button foot. */
#tm-profile-summary .pf {
  background: var(--egg-card); border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  border-top: 3px solid var(--accent);   /* restrained navy presence — the card's ink anchor (no gradient slab) */
  overflow: hidden; min-width: 0;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05), 0 14px 34px -18px rgba(var(--ink-rgb),.18);
}
#tm-profile-summary .pf-band { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5); }
#tm-profile-summary .pf-av {
  width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
  background: var(--navy-grad); color: var(--logo-cream);
  display: flex; align-items: center; justify-content: center;
  font: 600 22px var(--font-sans);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb),.55), 0 0 0 4px rgba(var(--gold-rgb),.12);
}
#tm-profile-summary .pf-id { flex: 1; min-width: 0; }
#tm-profile-summary .pf-id h1 { font: 400 28px var(--font-display); color: var(--text-primary); line-height: 1.08; overflow-wrap: anywhere; }
#tm-profile-summary .pf-id .role { font: 600 11px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #a8842f; margin-top: 6px; }
#tm-profile-summary .pf-id .meta { font: 400 14px var(--font-body); color: var(--text-secondary); margin-top: 7px; overflow-wrap: anywhere; }
#tm-profile-summary .pf-ring { text-align: center; flex: 0 0 auto; }
#tm-profile-summary .pf-ring .lbl { font: 600 9.5px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin-top: 5px; }
/* Ledger strip — warm 1px hairline dividers via the gap-on-border trick */
#tm-profile-summary .pf-body {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  background: #ece4d4; border-top: 1px solid #e7ddc9;
}
#tm-profile-summary .pf-cell { background: var(--egg-card); padding: var(--space-4) var(--space-5); min-width: 0; }
#tm-profile-summary .pf-cell .k { font: 600 11px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
#tm-profile-summary .pf-cell .v { font: 400 17px var(--font-display); color: var(--text-primary); }
#tm-profile-summary .pf-cell .v.sm { font: 500 13.5px var(--font-sans); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tm-profile-summary .pf-none { font: italic 400 13px var(--font-body); color: var(--text-muted); }
#tm-profile-summary .pf-mail { color: var(--text-secondary); text-decoration: none; }
#tm-profile-summary .pf-mail:hover { color: #a8842f; }
#tm-profile-summary .pf-foot { display: flex; gap: 10px; padding: var(--space-4) var(--space-5); border-top: 1px solid #ece4d4; flex-wrap: wrap; }
#tm-profile-summary .pf-btn {
  font: 600 12.5px var(--font-sans); padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid #e7ddc9; background: var(--egg-card); color: #2c3e5e;
  cursor: pointer; transition: background .13s, border-color .13s;
}
#tm-profile-summary .pf-btn:hover { background: rgba(var(--gold-rgb),.08); border-color: rgba(var(--gold-rgb),.5); }
#tm-profile-summary .pf-btn.pri { background: var(--accent); color: #fff; border-color: var(--accent); }
#tm-profile-summary .pf-btn.pri:hover { background: var(--green-dark); }
@media (max-width: 760px){ #tm-profile-summary .pf-body { grid-template-columns: 1fr 1fr; } #tm-profile-summary .pf-band { flex-wrap: wrap; } }

/* Directory card — warm edges + gentle depth; the search is the surface */
.tm-dir-card {
  background: var(--egg-card); border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05), 0 14px 34px -18px rgba(var(--ink-rgb),.18);
}
.tm-dir-card .tmd-search-wrap {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #e7ddc9; border-radius: var(--radius-sm);
  padding: 11px var(--space-4); margin-bottom: var(--space-3);
  background: #fffdf9; transition: border-color .14s, box-shadow .14s;
}
.tm-dir-card .tmd-search-wrap:focus-within { border-color: var(--bronze-bright); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.14); }
.tm-dir-card .tmd-search-icon { color: var(--accent); flex: 0 0 auto; position: static; transform: none; }
.tm-dir-card .tmd-search {
  border: none; background: none; outline: none; box-shadow: none; padding: 0;
  font: 400 15px var(--font-sans); color: var(--text-primary); flex: 1; width: 100%;
}
.tm-dir-card .tmd-search::placeholder { font: italic 400 14.5px var(--font-body); color: var(--text-muted); }
.tm-dir-card .tmd-filters { display: flex; flex-wrap: wrap; gap: 8px; }
/* the existing <select> filters — 34px controls on warm borders; bronze when set */
.tm-dir-card .tmd-filters .tmd-filter {
  font: 600 12.5px var(--font-sans); color: #2c3e5e;
  background-color: #fffdf9; border: 1px solid #e7ddc9; border-radius: var(--radius-sm);
  height: 34px; padding: 0 30px 0 12px; box-sizing: border-box; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8842f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color .13s, background-color .13s, color .13s;
}
.tm-dir-card .tmd-filters .tmd-filter:hover  { border-color: rgba(var(--gold-rgb),.55); }
.tm-dir-card .tmd-filters .tmd-filter:focus  { outline: none; border-color: var(--bronze-bright); }
.tm-dir-card .tmd-filters .tmd-filter.active { border-color: var(--bronze-bright); color: #a8842f; background-color: rgba(var(--gold-rgb),.08); }
/* Search-first resting state — the quiet centered device (short bronze rule + serif line) */
.tm-dir-placeholder { text-align: center; padding: var(--space-7) 20px var(--space-6); }
.tm-dir-placeholder .tm-dir-rule { width: 28px; height: 2px; background: var(--bronze); margin: 0 auto var(--space-4); }
.tm-dir-placeholder h3 { font: 400 20px var(--font-display); color: var(--text-primary); }
/* Results — warm ledger rows: bronze-tint separators, warm hover, navy ink.
   :empty hides the container so its rule never strays under the placeholder. */
.tm-rows { margin-top: var(--space-4); border-top: 1px solid rgba(var(--gold-rgb),.45); }
.tm-rows:empty { display: none; }
.tm-row {
  display: grid; grid-template-columns: 44px minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,1fr);
  gap: var(--space-4); align-items: center;
  padding: 12px var(--space-2); cursor: pointer;
  transition: background .12s;
}
.tm-row + .tm-row { border-top: 1px solid rgba(var(--gold-rgb),.22); }
.tm-row:hover { background: rgba(var(--gold-rgb),.07); }
.tm-row-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--font-sans); color: #fff; flex: 0 0 auto;
}
.tm-row-name { font-size: 16px; color: var(--text-primary); line-height: 1.2; overflow-wrap: anywhere; }
.tm-row-role { font: 500 11.5px var(--font-sans); color: var(--text-secondary); margin-top: 2px; }
.tm-row-pg   { font: 500 12.5px var(--font-sans); color: #2c3e5e; overflow-wrap: anywhere; }
.tm-row-meta { font: 500 12px var(--font-sans); color: var(--text-secondary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-rows-more { font: italic 400 12.5px var(--font-body); color: var(--text-muted); text-align: center; padding: 12px 0 4px; border-top: 1px solid rgba(var(--gold-rgb),.22); }
.tm-empty-state { font: italic 400 13.5px var(--font-body); color: var(--text-muted); text-align: center; padding: var(--space-5) 0 var(--space-3); }
@media (max-width: 900px){ .tm-row { grid-template-columns: 44px minmax(0,1fr); } .tm-row-pg, .tm-row-meta { display: none; } }

/* (.tm-add-btn removed 2026-07-03 — unused "Add Teammate" button from the retired teammate-connection model; no markup/JS creates it.) */

/* Teammate Requests box */

/* Empty state */
.tm-empty-state {
  text-align: center;
  padding: 60px 20px;
  font-size: 14px; color: var(--text-muted);
}

/* Modal overlay */
.tm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--tint-forest-rgb),0.5);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.tm-modal-overlay.open { display: flex; }

.tm-modal {
  background: var(--egg-card);
  border-radius: 20px;
  border: 1px solid var(--egg-border);
  box-shadow: 0 24px 64px rgba(var(--tint-forest-rgb),0.22);
  width: 400px;
  max-width: 92vw;
  max-height: 82vh;
  overflow-y: auto;
  position: relative;
}


.tm-modal-hero {
  padding: 32px 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  border-bottom: 1px solid var(--egg-border);
}
.tm-modal-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: white;
  margin-bottom: 6px;
}
.tm-modal-name { font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
.tm-modal-role { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }

.tm-modal-body {
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}


/* Teammate detail modal — new dynamic body content */

/* (Unused .tm-add-overlay "Add Teammate" + .tm-ws-overlay "Workstream" modal CSS,
   AND the "Add-to-Case modal overrides" leftovers (.tm-ac-* family +
   .tm-ws-modal-wide + .tm-ws-save-btn:disabled), removed — all superseded by the
   #atm2/.a2-* picker, zero markup/JS in any served file. 2026-07-03.) */

/* ── Case pills (modal) ── */

/* The #dp-overlay day-drill pie CSS was REMOVED (merged into #bil-overlay). .bar-hit + chart-nav below are still used by the chart. */
/* ── Billed Time View ── */
.bt-filters { display:flex; gap:8px; flex-wrap:wrap; }
.bt-table-wrap { background:var(--egg-card); border-radius:14px; overflow:visible; box-shadow:0 2px 12px rgba(0,0,0,0.06); flex-shrink:0; }
.bt-table { width:100%; border-collapse:collapse; font-family:var(--font-sans); }
.bt-table thead th { padding:12px 16px; text-align:left; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; background:var(--egg-card); border-bottom:1.5px solid var(--egg-border); }
.bt-table tbody tr { border-bottom:1px solid var(--egg-border); transition:background 0.1s; }
.bt-table tbody tr:last-child { border-bottom:none; }
.bt-table tbody tr:hover { background:rgba(var(--ink-rgb),0.04); }
.bt-table td { padding:12px 16px; font-size:13px; color:var(--text-secondary); vertical-align:top; }
.bt-td-date { font-weight:600; color:var(--accent); white-space:nowrap; }
.bt-td-case { font-weight:600; }
.bt-td-matter { color:var(--text-secondary); font-size:12px; }
.bt-td-hours { font-weight:700; color:var(--forest); white-space:nowrap; }
.bt-td-narrative { color:var(--text-secondary); font-size:12px; max-width:300px; }
.bt-empty { padding:48px 24px; text-align:center; color:var(--text-muted); font-size:13px; font-family:var(--font-sans); }
.bt-footer { padding:12px 16px; border-top:1.5px solid var(--egg-border); display:flex; justify-content:flex-end; gap:24px; background:var(--egg-card); }
.bt-footer-label { font-size:12px; font-weight:600; color:var(--text-muted); font-family:var(--font-sans); }
.bt-footer-val { font-size:14px; font-weight:700; color:var(--forest); font-family:var(--font-sans); }
.bt-footer-item { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
/* See all billed time button */
/* Prominent "See all billed time" button */

/* Billed time row left-border color coding (the case's canonical accent spine) */
.bt-table td.bt-td-date { border-left: 3px solid transparent; }

/* ── My Billing entries table — WARM DNA (matches Reviews/Admin) ── */
#view-time .bt-table-wrap { background: #fff; border: 1px solid #e7ddc9; border-radius: 14px; box-shadow: 0 1px 2px rgba(24,40,63,.04), 0 10px 26px rgba(24,40,63,.05); }
#view-time .bt-table thead th { background: #fffdf9; border-bottom: 1px solid #e7ddc9; color: var(--text-secondary); }
#view-time .bt-table tbody tr { border-bottom: 1px solid #ece4d4; }
#view-time .bt-table tbody tr:hover { background: rgba(var(--gold-rgb),.07); }
#view-time .bt-footer { background: #fffdf9; border-top: 1px solid #e7ddc9; }
#view-time .bt-footer-label { color: var(--text-secondary); }
#view-time .time-sync-btn {
  background: #fffdf9; border: 1px solid #e7ddc9; color: var(--text-secondary);
}
#view-time .time-sync-btn:hover { border-color: var(--bronze-bright); box-shadow: none; background: rgba(var(--gold-rgb),.08); }
#view-time .time-sync-btn svg { color: var(--bronze); }

/* (The filter POPUP CSS — .bt-filter-popup-btn / .bt-fpopup* — was DELETED:
   the filter bar is inline and always visible now.) */

/* ── Billed Time: the WARM filter row — Cases dropdown + sort on the LEFT END,
   the time-range segmented control on the RIGHT END, flex space between. ── */
.bill-enlbl { display: block; margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
#view-time .bt-filter-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 0; margin-bottom: 16px; flex-wrap: wrap;
}
#view-time .bt-left-group { display: flex; align-items: center; gap: 12px; }
#view-time .bt-spacer { flex: 1 1 auto; min-width: 12px; }
/* Cases multiselect dropdown — CLOSED by default; opens a searchable checklist */
/* SHARED DROPDOWN — the .bill-dd family is no longer billing-only: the Calendar
   page's matter picker (.cal-mp) rides the same chrome, because it is the same
   control solving the same problem (a wall of per-case pills that does not fit).
   The class name is historical; treat it as a shared primitive and do NOT fork
   it for a third consumer. .bill-dd-sm is the calendar's size variant, matched
   to the legend chips beside it rather than to billing's 40px filter row. */
#view-time .bill-dd,
#view-calendar .bill-dd { position: relative; }
#view-time .bill-dd-trigger, #view-calendar .bill-dd-trigger {
  height: 40px; display: inline-flex; align-items: center; gap: 9px;
  font: 600 12px/1 var(--font-sans); color: var(--text-secondary);
  background: #fff; border: 1px solid #e7ddc9; border-radius: 10px; padding: 0 14px; cursor: pointer;
}
#view-time .bill-dd-trigger:hover, #view-calendar .bill-dd-trigger:hover { border-color: var(--bronze-bright); }
#view-time .bill-dd-cnt, #view-calendar .bill-dd-cnt { font: 600 10px/1 var(--font-sans); color: var(--bronze); background: rgba(var(--gold-rgb),.12); border-radius: 999px; padding: 3px 7px; }
#view-time .bill-dd-car, #view-calendar .bill-dd-car { color: var(--text-muted); font-size: 11px; }
#view-time .bill-dd-panel, #view-calendar .bill-dd-panel {
  position: absolute; top: calc(100% + 6px); left: 0; width: 300px; z-index: 20;
  background: #fff; border: 1px solid #e7ddc9; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(24,40,63,.14); padding: 10px;
}
#view-time .bill-dd-search, #view-calendar .bill-dd-search {
  width: 100%; border: 1px solid #e7ddc9; border-radius: 8px; background: #fffdf9;
  padding: 9px 11px; font: 400 13px/1 var(--font-body); color: var(--text-primary); margin-bottom: 8px;
}
#view-time .bill-dd-search:focus, #view-calendar .bill-dd-search:focus { outline: none; border-color: var(--bronze-bright); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.15); }
#view-time .bill-dd-list, #view-calendar .bill-dd-list { max-height: 260px; overflow-y: auto; }
#view-time .bill-dd-opt, #view-calendar .bill-dd-opt {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer;
  font: 400 13px/1.2 var(--font-body); color: var(--text-primary);
}
#view-time .bill-dd-opt:hover, #view-calendar .bill-dd-opt:hover { background: rgba(var(--gold-rgb),.10); }
#view-time .bill-dd-opt .ck, #view-calendar .bill-dd-opt .ck { width: 16px; height: 16px; border: 1.5px solid #e7ddc9; border-radius: 4px; flex: none; position: relative; }
#view-time .bill-dd-opt .ck.on, #view-calendar .bill-dd-opt .ck.on { background: var(--accent); border-color: var(--accent); }
#view-time .bill-dd-opt .ck.on:after, #view-calendar .bill-dd-opt .ck.on:after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#view-time .bill-dd-opt .cdot, #view-calendar .bill-dd-opt .cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#view-time .bill-dd-opt .cnm, #view-calendar .bill-dd-opt .cnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-time .bill-dd-empty, #view-calendar .bill-dd-empty { padding: 12px 8px; font: italic 400 12.5px/1 var(--font-body); color: var(--text-muted); }
/* sort — warm 40px control matching the dropdown */
.bt-sort-sel {
  height: 40px; flex-shrink: 0;
  font: 600 12px/1 var(--font-sans); color: var(--text-secondary);
  background: #fff; border: 1px solid #e7ddc9; border-radius: 10px;
  padding: 0 12px; cursor: pointer;
}
.bt-sort-sel:hover { border-color: var(--bronze-bright); }
/* time-range segmented control (This Week / 2 Weeks / 30 / 60 / 90 Days) */
#view-time .bt-filters.bill-seg {
  display: inline-flex; align-items: center; flex-wrap: nowrap;
  height: 40px; padding: 0 3px; gap: 0;
  background: #fffdf9; border: 1px solid #e7ddc9; border-radius: 10px;
}
#view-time .bt-filters.bill-seg span {
  font: 600 12px/1 var(--font-sans); color: var(--text-muted);
  height: 34px; padding: 0 12px; display: inline-flex; align-items: center;
  border-radius: 8px; white-space: nowrap; cursor: pointer;
}
#view-time .bt-filters.bill-seg span.on { background: var(--accent); color: #fff; }

/* ── Billed Time: edit column ── */
.bt-th-edit { width: 40px !important; padding: 12px 4px 12px 14px !important; }
.bt-th-status { text-align: right; }
.bt-td-edit { width: 40px; padding: 8px 4px 8px 14px !important; }
.bt-td-status { text-align: right; vertical-align: middle !important; }
.bt-edit-btn {
  background: none; border: 1.5px solid var(--egg-border); border-radius: 7px;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); transition: all 0.15s; padding: 0;
  font-size: 14px; flex-shrink: 0; font-family: var(--font-sans);
}
.bt-edit-btn:hover { background: var(--forest); border-color: var(--forest); color: #fff; }

/* ── Billed Time: submitted pill ── */
.bt-submitted-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(var(--ink-rgb),0.09); border: 1px solid rgba(var(--ink-rgb),0.22);
  border-radius: 20px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; color: var(--forest);
  letter-spacing: 0.03em; white-space: nowrap;
}

/* ── Billed Time: locked / amend / row-submit (Stage 2) ── */
.bt-lock-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; font-size: 13px; opacity: 0.55;
  filter: grayscale(1); cursor: default; user-select: none;
}
.bt-row-locked { background: rgba(var(--ink-rgb),0.025); }
.bt-row-locked .bt-td-narrative,
.bt-row-locked .bt-td-case,
.bt-row-locked .bt-td-matter { color: var(--text-secondary); }
.bt-amend-btn {
  margin-left: 8px; background: none; border: 1.5px solid var(--egg-border);
  color: var(--text-secondary); border-radius: 8px; padding: 3px 11px;
  font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font-sans);
  letter-spacing: 0.02em; transition: all 0.14s; vertical-align: middle;
}
.bt-amend-btn:hover { border-color: var(--bronze); color: var(--bronze); background: rgba(var(--gold-rgb),0.06); }
.bt-row-submit {
  background: var(--forest); color: #fff; border: none;
  border-radius: 8px; padding: 5px 14px;
  font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--font-sans);
  letter-spacing: 0.03em; transition: all 0.14s; white-space: nowrap;
}
.bt-row-submit:hover { background: var(--accent); }

/* ── Review-before-submit checkpoint popup ── */
.bt-review-overlay {
  position: fixed; inset: 0; background: rgba(var(--ink-deep-rgb),0.42);
  display: none; align-items: center; justify-content: center;
  z-index: 640; backdrop-filter: blur(2px);
}
.bt-review-overlay.open { display: flex; }
.bt-review-modal {
  background: var(--egg-card); border-radius: 18px;
  width: 430px; max-width: 94vw; overflow: hidden;
  box-shadow: 0 22px 64px rgba(var(--ink-deep-rgb),0.32);
  font-family: var(--font-sans);
}
.bt-review-head { padding: 22px 26px 16px; border-bottom: 1.5px solid var(--egg-border); }
.bt-review-eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--bronze);
  margin-bottom: 7px;
}
.bt-review-title { font-family: var(--font-display); font-size: 21px; color: var(--text-primary); line-height: 1.18; }
.bt-review-sub { font-family: var(--font-body); font-size: 13.5px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }
.bt-review-body { padding: 16px 26px 6px; display: flex; flex-direction: column; gap: 11px; }
.bt-review-row { display: flex; gap: 14px; align-items: baseline; }
.bt-review-row.bt-review-narr { flex-direction: column; gap: 4px; }
.bt-review-k {
  flex-shrink: 0; width: 78px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.bt-review-v { font-size: 14px; color: var(--text-primary); }
.bt-review-narr .bt-review-v { font-family: var(--font-body); color: var(--text-secondary); line-height: 1.5; }
.bt-review-flag {
  display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700;
  color: var(--danger); letter-spacing: 0.01em;
}
/* In-place editable review inputs (hours/date/narrative) */
.bt-review-input {
  font-family: var(--font-sans); font-size: 14px; color: var(--text-primary);
  background: var(--egg-bg); border: 1.5px solid var(--egg-border); border-radius: 9px;
  padding: 7px 11px; outline: none; transition: border-color 0.13s; box-sizing: border-box;
}
.bt-review-input:focus { border-color: var(--forest); }
.bt-review-row:not(.bt-review-narr) .bt-review-input { flex: 1; min-width: 0; }
.bt-review-input-hours { width: 110px; flex: 0 0 110px; font-weight: 700; }
.bt-review-input-hours.high { color: var(--danger); border-color: var(--danger); }
.bt-review-hours-wrap { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.bt-review-textarea { width: 100%; min-height: 64px; resize: vertical; line-height: 1.5; }
.bt-review-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 26px 20px; margin-top: 8px;
}
.bt-review-cancel {
  background: none; border: 1.5px solid var(--egg-border); color: var(--text-secondary);
  border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--font-sans); transition: all 0.14s;
}
.bt-review-cancel:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.bt-review-confirm {
  background: var(--forest); color: #fff; border: none;
  border-radius: 10px; padding: 9px 20px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--font-sans); transition: all 0.14s;
}
.bt-review-confirm:hover { background: var(--accent); }

/* ── Edit Entry Modal ── */
.bt-edit-overlay {
  position: fixed; inset: 0; background: rgba(var(--ink-deep-rgb),0.38);
  display: none; align-items: center; justify-content: center;
  z-index: 600; backdrop-filter: blur(2px);
}
.bt-edit-overlay.open { display: flex; }
.bt-edit-modal {
  background: var(--egg-card); border-radius: 20px;
  width: 480px; max-width: 96vw; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(var(--ink-deep-rgb),0.28);
  font-family: var(--font-sans);
}
.bt-edit-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1.5px solid var(--egg-border);
}
.bt-edit-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.bt-edit-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 18px; line-height: 1; transition: color 0.13s; padding: 0;
}
.bt-edit-close:hover { color: var(--text-primary); }
.bt-edit-form { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.bt-edit-field { display: flex; flex-direction: column; gap: 5px; }
.bt-edit-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
}
.bt-edit-input, .bt-edit-select, .bt-edit-textarea {
  background: var(--egg-bg); border: 1.5px solid var(--egg-border);
  border-radius: 10px; padding: 9px 13px;
  font-size: 13px; color: var(--text-primary); font-family: var(--font-sans);
  outline: none; transition: border-color 0.13s; width: 100%;
}
.bt-edit-input:focus, .bt-edit-select:focus, .bt-edit-textarea:focus { border-color: var(--forest); }
.bt-edit-textarea { resize: vertical; min-height: 80px; }
.bt-edit-2col { display: flex; gap: 12px; }
.bt-edit-2col .bt-edit-field { flex: 1; }
.bt-edit-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 24px; border-top: 1.5px solid var(--egg-border);
}
.bt-edit-save-btn {
  background: var(--forest); color: #fff; border: none;
  border-radius: 10px; padding: 10px 22px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.13s;
}
.bt-edit-save-btn:hover { background: var(--accent); }
.bt-edit-submit-btn {
  background: none; border: 1.5px solid var(--forest); color: var(--forest);
  border-radius: 10px; padding: 10px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.13s;
}
.bt-edit-submit-btn:hover { background: rgba(var(--ink-rgb),0.08); }
.bt-edit-delete-btn {
  margin-left: auto; background: none;
  border: 1.5px solid #E8D0D0; color: #C06060;
  border-radius: 10px; padding: 10px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.15s;
}
.bt-edit-delete-btn:hover { border-color: #C06060; background: rgba(192,96,96,0.06); }
.bt-edit-delete-btn.confirming {
  background: #C06060; border-color: #C06060; color: #fff;
}

/* ── Task Timer Button ── */
.task-timer-btn {
  flex-shrink: 0;
  background: rgba(var(--ink-rgb),0.1);
  border: 1.5px solid rgba(var(--ink-rgb),0.45); border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #1C3A28;
  transition: all 0.15s; padding: 0;
  position: relative; font-size: 15px;
  font-family: var(--font-sans);
}
.task-timer-btn:hover { background: var(--forest); border-color: var(--forest); color: #fff; }
.task-timer-btn::after {
  content: 'Record time';
  position: absolute; bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: #111D33; color: #fff;
  font-size: 10px; font-weight: 600; font-family: var(--font-sans);
  white-space: nowrap; padding: 4px 8px;
  border-radius: 6px; opacity: 0; pointer-events: none;
  transition: opacity 0.15s; z-index: 10;
}
.task-timer-btn:hover::after { opacity: 1; }
.td-timer-btn { margin-top: 2px; }

/* ── Timer Popup ── */
.timer-popup {
  position: fixed; z-index: 9999;
  background: var(--egg-card); border: 1px solid var(--egg-border);
  border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 10px 40px rgba(var(--ink-deep-rgb),0.22);
  width: 252px; font-family: var(--font-sans);
}
.tp-task-name { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.tp-case-name { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.timer-display {
  font-size: 34px; font-weight: 700; color: var(--forest);
  text-align: center; letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px; line-height: 1;
}
.timer-display.running { color: #2A7090; }
.timer-controls { display: flex; align-items: center; gap: 8px; justify-content: center; }
.timer-ctrl-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--egg-border); background: var(--egg-hover);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; color: var(--text-secondary);
  transition: all 0.15s; padding: 0; font-family: var(--font-sans); line-height: 1;
}
.timer-ctrl-btn:hover { background: var(--forest); border-color: var(--forest); color: #fff; }
.timer-ctrl-btn.cancel:hover { background: #C04040; border-color: #C04040; color: #fff; }
.timer-save-btn {
  background: var(--forest); color: #fff; border: none;
  border-radius: 20px; padding: 7px 18px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.15s; letter-spacing: 0.03em;
}
.timer-save-btn:hover { background: var(--accent); }
.timer-save-btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; }
.timer-warn {
  margin-top: 12px; background: rgba(192,64,64,0.07);
  border: 1px solid rgba(192,64,64,0.22);
  border-radius: 10px; padding: 9px 13px;
  font-size: 11.5px; color: #a03030; font-weight: 600;
  text-align: center; line-height: 1.5;
}
/* drag handle */
.timer-popup { user-select: none; }
.timer-drag-handle {
  display: flex; align-items: flex-start; gap: 7px;
  cursor: grab; padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--egg-border);
}
.timer-drag-handle:active, .timer-drag-handle.dragging { cursor: grabbing; }
.timer-drag-grip {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 3px; flex-shrink: 0; opacity: 0.4;
}
.timer-drag-grip span {
  display: block; width: 16px; height: 2px;
  background: var(--text-muted); border-radius: 2px;
}
.timer-drag-header { flex: 1; min-width: 0; }
.timer-close-btn {
  flex-shrink: 0; background: none; border: none;
  color: var(--text-muted); font-size: 17px; line-height: 1;
  cursor: pointer; padding: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; transition: all 0.13s; margin-top: -1px;
}
.timer-close-btn:hover { color: #C04040; background: rgba(192,64,64,0.1); }

/* ══════════════════════════════════════════════
   DOCUMENTS VIEW
══════════════════════════════════════════════ */
#view-documents {
  display: none; flex-direction: column;
  overflow-y: auto; padding: 40px 44px; gap: 28px;
}
#view-documents.active { display: flex; }

/* ── Documents: editorial page header — eyebrow + serif title + quiet count
   on the baseline rule, Upload as the navy primary action ── */
.docs-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: var(--space-3);
  flex-shrink: 0;
}
.docs-hd-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.docs-hd-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); }
.docs-hd-title { font-size: 30px; color: var(--accent); line-height: 1.1; }   /* DM Serif via the curated list */
.docs-hd-sub { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); }
.docs-upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: #fff; background: var(--accent);
  border: none; border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer; flex-shrink: 0;
  margin-bottom: var(--space-1);
  transition: background .13s;
}
.docs-upload-btn:hover { background: var(--green-mid); }
.docs-upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--forest); color: #fff; border: none;
  border-radius: 11px; padding: 11px 20px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--font-sans); transition: all 0.13s;
  box-shadow: 0 2px 10px rgba(var(--ink-rgb),0.25);
}
.docs-upload-btn:hover { background: var(--accent); transform: translateY(-1px); }
.docs-upload-btn svg { flex-shrink: 0; }
/* Drop zone (empty state) */
.docs-drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; border: 2px dashed var(--egg-border); border-radius: 16px;
  padding: 64px 32px; cursor: pointer; transition: all 0.15s; text-align: center;
  background: var(--egg-card);
}
.docs-drop-zone:hover, .docs-drop-zone.dragover { border-color: var(--forest); background: rgba(var(--ink-rgb),0.03); }
.docs-drop-icon { color: var(--text-muted); }
.docs-drop-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.docs-drop-types { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* Upload progress */
.docs-upload-progress {
  display: none; align-items: center; gap: 12px;
  background: var(--egg-card); border-radius: 12px; padding: 14px 18px;
  border: 1.5px solid var(--egg-border);
}
.docs-upload-progress.show { display: flex; }
.docs-prog-bar-wrap { flex: 1; height: 5px; background: var(--egg-border); border-radius: 3px; overflow: hidden; }
.docs-prog-bar { height: 100%; background: var(--forest); border-radius: 3px; transition: width 0.3s ease; width: 0%; }
.docs-prog-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

/* ── Inference (smart-defaults) banner / toast ─────────────────────────────
   Rendered after document uploads when the engine has a case suggestion.
   Always visible, always one-click correctable per the seamlessness spec. */
.inf-stack {
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 380px; pointer-events: none;
}
.inf-banner {
  pointer-events: auto;
  background: var(--egg-card, #fff);
  border: 1.5px solid var(--egg-border, #e0dccf);
  border-left: 4px solid var(--forest, #1f4e3d);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  font-family: var(--font-sans);
  font-size: 13px; color: var(--text-primary, #1d2229);
  animation: infFadeIn 0.18s ease;
}
.inf-banner.inf-ask    { border-left-color: #C58B2F; }
.inf-banner.inf-confirm{ border-left-color: #1f4e3d; }
.inf-banner.inf-auto   { border-left-color: #2E7D32; }
.inf-banner-file { font-size: 11.5px; color: var(--text-secondary, #5a6675); margin-bottom: 4px; font-weight: 600; }
.inf-banner-msg  { font-weight: 600; line-height: 1.4; margin-bottom: 8px; }
.inf-banner-msg strong { color: var(--forest, #1f4e3d); }
.inf-banner-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inf-btn {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700;
  padding: 6px 11px; border-radius: 7px;
  border: 1px solid var(--egg-border, #e0dccf);
  background: #fff; color: var(--text-primary, #1d2229);
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.inf-btn:hover { background: var(--egg-bg, #f5f1e3); }
.inf-btn.primary { background: var(--forest, #1f4e3d); color: #fff; border-color: var(--forest, #1f4e3d); }
.inf-btn.primary:hover { background: #173b2e; }
.inf-btn.subtle  { background: transparent; border-color: transparent; color: var(--text-secondary, #5a6675); padding: 6px 8px; }
.inf-btn.subtle:hover { background: var(--egg-bg, #f5f1e3); color: var(--text-primary, #1d2229); }
.inf-picker {
  margin-top: 6px;
  max-height: 160px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
  border-top: 1px solid var(--egg-border, #e0dccf);
  padding-top: 8px;
}
.inf-picker-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.inf-picker-row:hover { background: var(--egg-bg, #f5f1e3); }
.inf-picker-row .why { color: var(--text-secondary, #5a6675); font-size: 11px; font-weight: 500; margin-left: 8px; }
.inf-picker-new {
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--forest, #1f4e3d);
  border-top: 1px dashed var(--egg-border, #e0dccf); margin-top: 4px; padding-top: 8px;
}
.inf-picker-new:hover { background: var(--egg-bg, #f5f1e3); }
@keyframes infFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Table */
/* ── The file LEDGER — one bordered card, hairline-separated rows (the Home
   ledger DNA), brand tokens only ── */
.docs-table-wrap { background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05); }
.docs-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.docs-table thead th { padding: 12px var(--space-4); text-align: left; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; background: var(--egg-card); border-bottom: 1px solid var(--rule-strong); }
.docs-table tbody tr { border-bottom: 1px solid var(--egg-border); transition: background 0.13s; cursor: pointer; }
.docs-table tbody tr:last-child { border-bottom: none; }
.docs-table tbody tr:hover { background: var(--egg-hover); }
.docs-table td { padding: 13px var(--space-4); font-size: 13px; color: var(--text-secondary); vertical-align: middle; }
.docs-td-icon { width: 44px; padding-right: 4px !important; }
/* ONE token treatment for every file type — a quiet navy icon on the warm
   hover surface (the off-palette red/blue/green per-type tints are GONE);
   the type column is a plain muted caps label, not a colored pill. */
.docs-type-wrap { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--egg-hover); color: var(--green-mid); border: 1px solid var(--egg-border); }
.docs-type-wrap svg  { width: 17px; height: 17px; flex-shrink: 0; }
/* Filename in the UI sans (Inter) — a technical filename, consistent with the
   TYPE/SIZE/UPLOADED labels; the serif stays on the page title only. */
.docs-table td.docs-td-name { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--accent); }
/* Case column — canonical matter swatch (window._caseAccentColor) + name; quiet
   "No case" when unlinked (never an invented color). */
.docs-td-case { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.docs-case-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: 1px; }
.docs-case-name { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.docs-case-none { font-size: 12px; color: var(--text-muted); font-style: italic; }
/* "Shared with you" — quiet indicator on rows the viewer doesn't own */
.docs-shared-pill {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 8px;
  border-radius: 6px; padding: 2px 8px;
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--egg-hover); color: var(--text-muted);
}
/* Share affordance — quiet circle matching the delete control; bronze on hover */
.docs-share-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: none; border: 1.5px solid transparent;
  color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.14s; padding: 0;
}
.docs-share-btn:hover { background: rgba(var(--gold-rgb),0.12); border-color: rgba(var(--gold-rgb),0.35); color: var(--bronze); }
.docs-share-btn svg { width: 13px; height: 13px; }
/* Share popover — compact card on the DNA (egg-card + hairline + radius-md) */
.docs-share-pop {
  position: fixed; z-index: 3000; width: 300px; max-height: 340px; overflow-y: auto;
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-md);
  box-shadow: 0 6px 28px rgba(var(--ink-deep-rgb),0.18); padding: var(--space-3);
}
.docs-share-pop-title { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); margin-bottom: 10px; }
.docs-share-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--egg-border); }
.docs-share-row:last-child { border-bottom: none; }
.docs-share-row-info { flex: 1; min-width: 0; }
.docs-share-row-name { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-share-row-role { font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); }
.docs-share-add {
  flex: none; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; color: var(--bronze);
  background: rgba(var(--gold-rgb),0.12); border: 1px solid rgba(var(--gold-rgb),0.4);
  border-radius: 7px; padding: 4px 11px; cursor: pointer; transition: background .13s;
}
.docs-share-add:hover { background: rgba(var(--gold-rgb),0.22); }
.docs-share-add:disabled { opacity: .5; cursor: default; }
.docs-share-remove {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: none;
  border: 1.5px solid transparent; color: var(--text-muted); font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .13s;
}
.docs-share-remove:hover { background: rgba(var(--danger-rgb),0.08); border-color: rgba(var(--danger-rgb),0.25); color: var(--danger); }
.docs-share-on { flex: none; font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.docs-share-empty { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); padding: 10px 4px; text-align: center; }
.docs-type-pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
/* "Insights" badge — distinct plum accent so it reads as "Ratio has analysed
   this", set apart from the file-type colors. Clickable: reopens the analysis. */
.docs-insights-pill {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  margin-left: 8px; border: none; cursor: pointer;
  border-radius: 6px; padding: 2px 8px;
  font-family: var(--font-sans); font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(156,122,63,0.12); color: var(--bronze);
  transition: background 0.12s, box-shadow 0.12s;
}
.docs-insights-pill:hover { background: rgba(156,122,63,0.22); box-shadow: 0 1px 5px rgba(156,122,63,0.25); }
.docs-insights-pill svg { width: 11px; height: 11px; }
/* Filter row above the documents table */
.docs-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.docs-filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.docs-filter-select {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-sm);
  padding: 0 10px; height: 34px; box-sizing: border-box; cursor: pointer; outline: none;
}
.docs-filter-select:focus { border-color: var(--bronze-bright); }
.docs-filter-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: var(--radius-pill);
  padding: 0 14px; height: 34px; box-sizing: border-box;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.docs-filter-chip input { accent-color: var(--bronze); cursor: pointer; margin: 0; }
.docs-filter-chip.active { border-color: var(--bronze-bright); color: var(--bronze); background: rgba(var(--gold-rgb),0.10); }
.docs-td-size { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.docs-td-date { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.docs-td-del { width: 76px; text-align: right; padding-right: 14px !important; white-space: nowrap; }
.docs-del-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: none; border: 1.5px solid transparent;
  color: var(--text-muted); font-size: 13px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.14s; padding: 0; font-family: inherit;
}
.docs-del-btn:hover { background: rgba(var(--danger-rgb),0.08); border-color: rgba(var(--danger-rgb),0.25); color: var(--danger); }
/* (the two-press .confirm state is gone — deletes route through the shared _ratioConfirm) */
/* Checkbox column */
.docs-td-cb { width: 36px; padding-right: 0 !important; text-align: center; }
.docs-cb {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--forest);
  border-radius: 3px; flex-shrink: 0;
}
.docs-table tbody tr.docs-row-selected { background: rgba(var(--ink-rgb),0.07); }
.docs-table tbody tr.docs-row-selected:hover { background: rgba(var(--ink-rgb),0.11); }
/* Bulk action bar — on the navy/cream tokens (the off-brand sage/coral are gone) */
.docs-bulk-bar {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--navy-grad); color: var(--ink-on-navy);
  border-radius: var(--radius-md); padding: 11px var(--space-4);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(var(--ink-deep-rgb),0.32);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 900; white-space: nowrap;
}
.docs-bulk-bar.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.docs-bulk-count { color: var(--bronze-bright); font-weight: 700; }
.docs-bulk-del-btn {
  background: rgba(var(--danger-rgb),0.24); border: 1.5px solid rgba(var(--danger-rgb),0.5);
  color: #fff; border-radius: var(--radius-sm); padding: 6px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all 0.14s;
}
.docs-bulk-del-btn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.docs-bulk-cancel-btn {
  background: none; border: 1.5px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7); border-radius: 9px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all 0.14s;
}
.docs-bulk-cancel-btn:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
/* Download popup */
.docs-dl-overlay {
  position: fixed; inset: 0; background: rgba(var(--ink-deep-rgb),0.38);
  display: none; align-items: center; justify-content: center;
  z-index: 700; backdrop-filter: blur(2px);
}
.docs-dl-overlay.open { display: flex; }
.docs-dl-modal { background: var(--egg-card); border-radius: 20px; width: 400px; max-width: 96vw; box-shadow: 0 20px 60px rgba(var(--ink-deep-rgb),0.28); font-family: var(--font-sans); }
.docs-dl-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 18px; border-bottom: 1.5px solid var(--egg-border); }
.docs-dl-icon-wrap { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.docs-dl-icon-wrap svg { width: 22px; height: 22px; }
.docs-dl-head-text { flex: 1; min-width: 0; }
.docs-dl-filename { font-size: 15px; font-weight: 700; color: var(--text-primary); word-break: break-word; line-height: 1.3; }
.docs-dl-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.docs-dl-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 0; flex-shrink: 0; transition: color 0.13s; }
.docs-dl-close:hover { color: var(--text-primary); }
.docs-dl-footer { padding: 18px 22px; }
.docs-dl-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--forest); color: #fff; border: none; border-radius: 12px; padding: 14px 20px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-sans); transition: all 0.13s; }
.docs-dl-btn:hover { background: var(--accent); }
.docs-dl-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Analyze button (inside ac-drop-zone file card area) ────────────────── */
.ac-analyze-btn {
  display: none; /* shown via JS when file is selected */
  width: 100%; margin-top: 8px;
  align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px;
  background: var(--green-dark); color: #fff;
  border: none; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background 0.13s;
  box-sizing: border-box;
}
.ac-analyze-btn:hover { background: var(--green-mid); }
.ac-analyze-btn:disabled { opacity: 0.55; cursor: default; pointer-events: none; }

/* ── Analysis Staging view ───────────────────────────────────────────────── */
#view-analysis-staging {
  display: none; flex-direction: column;
  padding: 40px 44px 48px; gap: 0; overflow-y: auto;
}
#view-analysis-staging.active { display: flex; }

/* Editorial page header — eyebrow (carrying the context) + serif title +
   muted-navy filename on the baseline rule; Back is the quiet control on the
   rule's right. The top-right corner stays EMPTY for the floating bell. */
.as-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5); flex-shrink: 0;
}
.as-hd-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.as-hd-eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bronze);
}
/* the context ("Case" / "Workflow" / …) rides the eyebrow after a divider dot */
.as-context-badge { color: var(--bronze); }
.as-context-badge::before { content: '·'; margin: 0 7px; }
.as-context-badge:empty { display: none; }
.as-back-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 13px; background: var(--egg-card);
  border: 1px solid var(--egg-border); border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; transition: all 0.13s; flex-shrink: 0;
}
.as-back-btn:hover { background: var(--egg-hover); color: var(--text-primary); border-color: rgba(var(--ink-rgb),0.3); }
.as-page-header .as-back-btn { margin-bottom: var(--space-1); }
.as-page-title { font-size: 30px; color: var(--accent); line-height: 1.1; }   /* DM Serif via the curated list */
.as-page-filename { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Loading */
/* No dead band: the module sits a measured distance under the header rule
   (flex-start, not vertically centered in 60vh) — one composed page. */
.as-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: var(--space-6) 0 48px; color: var(--text-secondary);
}
@keyframes as-spin { to { transform: rotate(360deg); } }
/* ── THE COMPOSED CENTERPIECE — one warm panel (navy crest, warm hairlines,
   soft depth) holding the whole reading moment: eyebrow dateline · progress
   ring around the mark · serif headline · italic stage line · the document
   exhibit. Premium and calm, never a floating spinner. ── */
.as-loading-panel {
  width: min(620px, 92%);
  background: var(--egg-bg);
  border: 1px solid #e7ddc9;
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 24px 60px -30px rgba(24,40,63,.18);
  padding: var(--space-6) var(--space-6) var(--space-6);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
}
/* bronze caps dateline centered between warm hairlines (the Home masthead device) */
.as-loading-eyebrow {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bronze);
  margin-bottom: var(--space-2);
}
.as-loading-eyebrow::before, .as-loading-eyebrow::after { content: ''; flex: 1; height: 1px; background: #ece4d4; }
/* Branded anchor — Ratio mark with a calm breathing pulse */
.as-loading-mark { width: 38px; color: var(--green-mid); opacity: 0.9; animation: as-mark-pulse 2.4s ease-in-out infinite; }
.as-loading-mark svg { width: 100%; height: auto; display: block; }
@keyframes as-mark-pulse { 0%,100% { opacity: 0.45; transform: translateY(0); } 50% { opacity: 0.95; transform: translateY(-2px); } }
.as-loading-title { font-size: 26px; color: var(--accent); margin-top: var(--space-1); line-height: 1.15; }   /* DM Serif via the curated list */
.as-loading-sub {
  font-family: var(--font-body); font-style: italic;
  font-size: 14.5px; color: var(--text-secondary); text-align: center; max-width: 380px;
  min-height: 20px; transition: opacity 0.3s ease;
}
/* ── PROMINENT circular progress ring — the focal wait indicator, ENCIRCLING the
   Ratio logo. Faint navy track + thick bronze arc, driven by REAL stages only
   (reading N/M across the first ~70%, then gentle continuous motion while
   reconciling, complete on done). No fabricated %, no timer bar. ── */
/* fixed 140px square that RESERVES the ring's full height in the column flow —
   flex:none so it never shrinks to the logo's content height (which let the
   absolute 140px ring overflow down into the mock card). */
.as-ring-wrap { position: relative; flex: none; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; }
/* a faint warm halo behind the ring — sanctioned soft depth, not a glow gimmick */
.as-ring-wrap::before {
  content: ''; position: absolute; inset: -22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb),.13), transparent 66%);
  pointer-events: none;
}
.as-ring { position: absolute; inset: 0; margin: auto; width: 140px; height: 140px; transform: rotate(-90deg); transform-origin: 50% 50%; }
.as-ring.as-ring-spin { animation: as-ring-rot 6s linear infinite; }
@keyframes as-ring-rot { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.as-ring-track { fill: none; stroke: rgba(var(--ink-rgb, 24,40,63), 0.12); stroke-width: 7; }
.as-ring-arc {
  fill: none; stroke: var(--bronze-bright, #C9A961); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 339.292;            /* 2·π·54 */
  stroke-dashoffset: 339.292;           /* start empty */
  transition: stroke-dashoffset 0.5s cubic-bezier(.4,0,.2,1);
}
/* the Ratio mark sits centered INSIDE the ring (keeps its calm breathing pulse) */
.as-ring-wrap .as-loading-mark { position: relative; width: 50px; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .as-ring.as-ring-spin { animation: none; }
  .as-ring-arc { transition: none; }
  .as-loading-mark { animation: none; }
}
/* ── "Document being read" motif — a skeleton case picture forming under a
   bronze scan beam. Navy/bronze/cream, calm not gimmicky; fills the space. ── */
.as-scan { width: 360px; max-width: 92%; margin: var(--space-4) 0 var(--space-1); }   /* the document exhibit at the panel's foot */
.as-scan-doc {
  position: relative; background: var(--egg-card); border: 1px solid #e7ddc9;
  border-radius: var(--radius-md); padding: 20px 22px 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 18px 40px -26px rgba(24,40,63,.30);
}
.as-scan-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.as-scan-badge { width: 36px; height: 36px; border-radius: 9px; background: var(--navy-grad); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(201,169,97,.28); }
.as-scan-htext { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.as-scan-htext span { height: 8px; border-radius: 4px; background: rgba(24,40,63,.18); }
.as-scan-htext span:first-child { width: 58%; }
.as-scan-htext span:last-child  { width: 36%; background: rgba(156,122,63,.40); }
.as-scan-lines { display: flex; flex-direction: column; gap: 12px; }
.as-scan-lines span {
  height: 9px; border-radius: 5px;
  background: linear-gradient(90deg,
    rgba(24,40,63,.09) 0%, rgba(24,40,63,.09) 42%,
    rgba(201,169,97,.34) 50%,
    rgba(24,40,63,.09) 58%, rgba(24,40,63,.09) 100%);
  background-size: 220% 100%;
  animation: asShimmer 2.4s linear infinite;
}
@keyframes asShimmer { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
/* the bronze scan beam sweeping down the document */
.as-scan-beam {
  position: absolute; left: 0; right: 0; top: -48px; height: 48px;
  background: linear-gradient(180deg, transparent, rgba(201,169,97,.20) 45%, rgba(201,169,97,.30) 50%, rgba(201,169,97,.20) 55%, transparent);
  animation: asScanBeam 2.2s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes asScanBeam { 0% { transform: translateY(0); } 100% { transform: translateY(260px); } }
@media (prefers-reduced-motion: reduce) {
  .as-scan-lines span, .as-scan-beam { animation: none; }
  .as-scan-beam { display: none; }
}

/* Error */
.as-error-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 64px 0; color: var(--text-muted);
}
.as-error-msg { font-size: 13.5px; font-weight: 600; color: var(--danger); }
.as-retry-btn {
  padding: 8px 20px; background: var(--egg-card);
  border: 1.5px solid var(--egg-border); border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; color: var(--text-primary); transition: all 0.13s;
}
.as-retry-btn:hover { border-color: var(--green-mid); color: var(--green-mid); }
.as-error-actions { display: flex; gap: 10px; align-items: center; justify-content: center; }
.as-back-btn { color: var(--text-secondary); }

/* Results layout */
.as-results { display: flex; flex-direction: column; gap: 20px; margin-bottom: 8px; }
.as-empty { font-size: 12.5px; color: var(--text-muted); font-style: italic; padding: 8px 0; }
.as-section { display: flex; flex-direction: column; gap: 8px; }
.as-section-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); padding-bottom: 7px; border-bottom: 1px solid var(--egg-border);
}

/* ── PHASE-GROUPED workflows (staging redesign) ──────────────────────────────
   Workflows are grouped by workstream into ordered phase sections; each section
   header is a colored dot + uppercase phase label (in the phase color) + a
   hairline rule + a right-aligned count. */
.as-phase { margin-top: var(--space-6); }
.as-phase:first-of-type { margin-top: var(--space-2); }
.as-phase-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.as-phase-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.as-phase-label { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; }
.as-phase-rule { flex: 1; height: 1px; background: #ece4d4; }
.as-phase-count { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); white-space: nowrap; }

/* Workflow card — warm bordered card, a 4px phase-colored LEFT spine (set
   inline), serif workflow name (the committed-card idiom) */
.as-wfl-item {
  background: var(--egg-card); border: 1px solid #e7ddc9; border-left: 4px solid var(--green-mid);
  border-radius: var(--radius-md); padding: 16px 38px 14px 18px; position: relative; overflow: visible;
  display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(24,40,63,.05);
}
.as-wfl-name { font-family: var(--font-display); font-size: 17px; font-weight: 400; color: var(--accent); margin-bottom: 5px; line-height: 1.25; }
/* Two-line (clamped) workflow description — muted navy, not gray */
.as-wfl-desc {
  font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 11px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.as-wfl-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.as-wfl-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 13px; font-size: 11px; font-weight: 600;
}
.as-wfl-badge.ok   { background: #D8EDE0; color: var(--success); }
.as-wfl-badge.warn { background: #F5DADA; color: #8B2A2A; }
.as-wfl-badge.neutral, .as-wfl-badge.tasks { background: #F0ECE1; color: #5A5147; }
/* Milestone (deadline) chip — shown ONLY when a deadline exists; the dot is
   colored by urgency (reusing the board thresholds). */
.as-wfl-mile {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px;
  border-radius: 13px; font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  background: var(--egg-bg); border: 1px solid var(--egg-border); color: var(--text-secondary);
}
.as-wfl-mile-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Expand affordance for a workflow's task count (clickable solid chip + chevron) */
.as-wfl-expand {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 10px; border-radius: 13px; font-size: 11px; font-weight: 600;
  background: #F0ECE1; color: #5A5147;
  border: 1px solid transparent; cursor: pointer; font-family: var(--font-sans);
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.as-wfl-expand:hover { background: #E7E0D0; color: var(--accent); border-color: rgba(var(--ink-rgb),0.14); }
.as-wfl-expand.expanded { background: #E7E0D0; color: var(--accent); }
.as-wfl-chevron { transition: transform 0.18s ease; }
.as-wfl-expand.expanded .as-wfl-chevron { transform: rotate(180deg); }

/* Nested task list revealed when a workflow card is expanded */
.as-wfl-tasks {
  margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--egg-border);
  display: flex; flex-direction: column; gap: 7px;
}
.as-wfl-tasks[hidden] { display: none; }
.as-wfl-subtask { display: flex; align-items: flex-start; gap: 9px; }
.as-wfl-subtask-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.as-wfl-subtask-text { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); line-height: 1.4; flex: 1; }
.as-wfl-subtask-rm {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: none; color: var(--text-muted);
  opacity: 0.4; transition: opacity 0.13s, background 0.13s, color 0.13s;
}
.as-wfl-subtask:hover .as-wfl-subtask-rm { opacity: 1; }
.as-wfl-subtask-rm:hover { background: rgba(var(--danger-rgb),0.1); color: var(--danger); }

/* Read-only ROADMAP PREVIEW under a staging workflow card (filled by
   _asPreviewRoadmaps; reuses the .rmp-* timeline markup in preview mode). */
.as-wfl-roadmap { margin-top: 11px; padding-top: 12px; border-top: 1px dashed var(--egg-border); }
.as-wfl-roadmap:empty { display: none; }
.as-wfl-roadmap .rmp-timeline-preview { position: relative; }
.as-wfl-roadmap-spin {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--egg-border); border-top-color: var(--bronze);
  animation: as-spin 0.8s linear infinite;
}
/* Preview node is a STATIC number (not the interactive complete-toggle); the
   pill drops the min-height that the committed card reserves for its (hidden)
   meta row + hover controls, so the preview reads compact. */
.rmp-step-preview .rmp-node { cursor: default; }
.rmp-step-preview .rmp-node:hover { transform: none; }
.rmp-step-preview .rmp-pill-main { cursor: default; }
.rmp-step-preview .rmp-pill { min-height: 0; padding: 7px 13px; }
/* Compact name-only list: tighter row gap, Inter (label font) for dense scanning
   (committed full-mode roadmap keeps Spectral + descriptions — preview only). */
.rmp-step-preview { padding-bottom: 14px; }
.rmp-step-preview .rmp-pill-name { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; }

/* Collapsed-by-default expander for the preview roadmap — a clear primary
   affordance (bronze), not a faint link. */
.as-roadmap-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--bronze); background: rgba(156,122,63,.10);
  border: 1px solid rgba(156,122,63,.40); border-radius: 9px;
  padding: 8px 14px; cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
}
.as-roadmap-toggle:hover { background: rgba(156,122,63,.17); border-color: var(--bronze); }
.as-roadmap-toggle:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.as-roadmap-toggle svg { width: 13px; height: 13px; transition: transform .18s; }
.as-roadmap-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.as-roadmap-steps { margin-top: 12px; }
.as-roadmap-steps[hidden] { display: none; }
/* THE ROADMAP AS THE CENTERPIECE (staging-scoped — the dashboard's compact
   preview is untouched): the steps sit in a warm inset reading panel, serif
   numerals on the nodes, Spectral step names in navy. */
#view-analysis-staging .as-roadmap-steps {
  background: rgba(var(--gold-rgb),.06);
  border: 1px solid #f0e9da;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-1);
}
#view-analysis-staging .rmp-step-preview .rmp-pill-name {
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--accent);
}
#view-analysis-staging .rmp-step-preview .rmp-node-num {
  font-family: var(--font-display); font-weight: 400; font-size: 14.5px; color: var(--green-mid);
}
/* Extracted-task FALLBACK wrapper — hidden unless the preview is unavailable. */
.as-wfl-extracted { margin-top: 10px; }
.as-wfl-extracted[hidden] { display: none; }

/* Case-level tasks — visually distinct from workflows so it doesn't read as
   an orphaned/floating section */
.as-section.as-caselevel {
  background: rgba(var(--gold-rgb),0.05); border: 1px solid #e7ddc9;
  border-left: 3px solid var(--bronze); border-radius: var(--radius-md); padding: 13px 14px;
}
.as-caselevel-desc {
  font-size: 12px; color: var(--text-secondary); line-height: 1.45;
  margin: -2px 0 2px; font-weight: 500;
}

/* Task row (mirrors .task-item) */
.as-task-row {
  background: var(--egg-card); border: 1px solid #e7ddc9; border-radius: var(--radius-sm);
  padding: 11px 40px 11px 14px; display: flex; align-items: flex-start; gap: 10px;
  position: relative;
}
.as-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.as-task-text { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.4; flex: 1; }

/* Pill rows */
.as-pill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.as-stk-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 11px;
  border-radius: 20px; background: rgba(var(--ink-rgb),0.10); color: var(--green-mid);
  font-size: 12px; font-weight: 600; position: relative;
}

/* Recommended Workflows — two columns of narrower cards, side by side */
.as-wfl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 720px) { .as-wfl-grid { grid-template-columns: 1fr; } }

/* Prominent case headline at the very top of the results page (legacy class,
   still used by the streaming skeleton until that build aligns) */

/* ── Matter identity — the case as a WARM EXHIBIT (the fork-card idiom writ
   large; the navy slab is gone — the shipped header owns the page's weight) ── */
.as-banner {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--space-5) var(--space-5); margin-bottom: var(--space-5);
  background: var(--egg-card);
  border: 1px solid #e7ddc9; border-left: 4px solid var(--bronze);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 18px 40px -30px rgba(24,40,63,.12);
}
.as-banner-eyebrow {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze);
}
.as-banner-name { font-size: 28px; font-weight: 400; line-height: 1.15; color: var(--accent); }
.as-banner-name i { color: var(--bronze); font-style: italic; }
.as-banner-stats { font-family: var(--font-body); font-size: 13.5px; color: var(--text-secondary); margin-top: 2px; }

/* ── KEY DEADLINES = THE VERTICAL DOCKET (approved mockup spec) — one warm
   bordered card, chronological rows on a DATE · RAIL · DESCRIPTION · RELATIVE
   grid. A continuous warm-hairline rail runs down the rail column with a hollow
   node per row (white fill, 2px colored border). Color is RESTRAINED: node
   border + relative phrase follow ONE rule — passed → danger, ≤21d → bronze,
   else muted; the date reddens only when passed. Inter caps dates (NOT serif
   numerals), Spectral navy descriptions. ── */
.as-dl-grid {
  background: var(--egg-card); border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(24,40,63,.05);
  max-width: 760px; padding: 0 32px;
}
.as-dl-item {
  position: relative;
  display: grid; grid-template-columns: 120px 30px minmax(0,1fr) auto 28px;
  align-items: center; column-gap: var(--space-3);
  padding: 16px 0;
  transition: background .13s;
}
.as-dl-item + .as-dl-item { border-top: 1px solid #ece4d4; }
/* DATE — Inter caps, muted navy; red only when passed */
.as-dl-when { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.as-dl-when.tbd { text-transform: none; letter-spacing: 0; color: var(--text-muted); white-space: normal; line-height: 1.35; }
.as-dl-item.over .as-dl-when { color: var(--danger); }
/* RAIL — a continuous 1px warm-hairline line with a hollow node per row,
   trimmed to the node centre on the first + last rows */
.as-dl-rail { position: relative; align-self: stretch; }
.as-dl-rail::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 1px; background: #ece4d4; }
.as-dl-item:first-child .as-dl-rail::before { top: 50%; }
.as-dl-item:last-child  .as-dl-rail::before { bottom: 50%; }
.as-dl-item:only-child  .as-dl-rail::before { display: none; }
.as-dl-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--egg-card); border: 2px solid var(--text-muted); box-sizing: border-box; }
.as-dl-item.soon .as-dl-node { border-color: var(--bronze); }
.as-dl-item.over .as-dl-node { border-color: var(--danger); }
/* DESCRIPTION — Spectral navy */
.as-dl-body { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--accent); line-height: 1.4; min-width: 0; }
/* RELATIVE — quiet Inter, right-aligned; color follows the one rule */
.as-dl-rel { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--text-muted); text-align: right; white-space: nowrap; }
.as-dl-item.soon .as-dl-rel { color: var(--bronze); }
.as-dl-item.over .as-dl-rel { color: var(--danger); }
.as-dl-item .as-action-btn { position: static; }

/* Per-item action button (circle, top-right) */
.as-action-btn {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--egg-bg); border: 1px solid var(--egg-border);
  color: var(--text-muted); font-size: 15px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: inherit; transition: all 0.13s; z-index: 3; padding: 0;
}
.as-action-btn:hover { background: var(--egg-hover); border-color: rgba(var(--ink-rgb),0.3); color: var(--text-primary); }
/* Pill action button (inline, not absolute) */
.as-pill-action-btn {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,0,0,0.12); border: none; color: inherit;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; transition: background 0.13s; padding: 0;
}
.as-pill-action-btn:hover { background: rgba(0,0,0,0.22); }

/* Action popup */
.as-action-popup {
  position: absolute; top: 34px; right: 6px; z-index: 200;
  background: var(--egg-card); border: 1px solid #e7ddc9;
  border-radius: var(--radius-md); box-shadow: 0 4px 18px rgba(var(--ink-deep-rgb),0.13);
  min-width: 118px; overflow: hidden; display: none;
}
.as-action-popup.open { display: block; }
.as-popup-btn {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 9px 13px; background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  text-align: left; color: var(--text-primary); transition: background 0.12s;
}
.as-popup-btn:hover { background: var(--egg-hover); }
.as-popup-btn.remove { color: var(--danger); }
.as-popup-btn.remove:hover { background: rgba(var(--danger-rgb),0.08); }
.as-popup-btn.confirm-remove { color: var(--danger); font-weight: 700; }
.as-popup-btn:disabled { opacity: 0.55; cursor: default; pointer-events: none; }

/* Pill popup (opens upward) */
.as-pill-popup {
  position: absolute; bottom: calc(100% + 5px); right: 0; z-index: 200;
  background: var(--egg-card); border: 1px solid var(--egg-border);
  border-radius: 10px; box-shadow: 0 4px 18px rgba(var(--ink-deep-rgb),0.13);
  min-width: 110px; overflow: hidden; display: none;
}
.as-pill-popup.open { display: block; }

/* Add All bar */
.as-add-all-bar {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid #ece4d4;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.as-add-all-label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
/* Top placement: the COMMIT BAND — a warm bordered strip under the header
   holding the resolved "Filing under" line + the navy primary. */
.as-add-all-bar.as-top {
  margin: 4px 0 var(--space-5); padding: var(--space-4) var(--space-5);
  border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  background: var(--egg-card);
  box-shadow: 0 1px 2px rgba(24,40,63,.05);
  gap: 18px;
}
.as-add-all-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.as-resolved-target { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.as-resolved-target b { color: var(--accent); font-weight: 700; }
.as-resolved-target .as-rt-eyebrow { color: var(--bronze); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; margin-right: 6px; }
.as-add-all-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 22px; background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background 0.13s, box-shadow 0.13s; flex-shrink: 0;
}
.as-add-all-bar.as-top .as-add-all-btn { padding: 13px 28px; font-size: 14px; box-shadow: 0 4px 16px rgba(var(--ink-rgb),0.2); }
.as-add-all-btn:hover { background: var(--green-mid); }

/* ── Recent analyses list (#view-docs-recent) ──────────────────────────── */
.ra-empty { font-size: 13px; color: var(--text-muted); padding: 24px 0; font-style: italic; }
.ra-entry {
  background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: background 0.13s, border-color 0.13s;
  box-shadow: 0 1px 3px rgba(var(--ink-deep-rgb),0.05);
}
.ra-entry:hover { background: var(--egg-hover); border-color: rgba(var(--ink-rgb),0.25); }
.ra-entry-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: rgba(var(--ink-rgb),0.10); color: var(--green-mid);
  display: flex; align-items: center; justify-content: center;
}
.ra-entry-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ra-entry-title { font-size: 13px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-entry-badge-row { display: flex; align-items: center; gap: 6px; }
.ra-entry-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(var(--ink-rgb),0.10); color: var(--green-mid); border-radius: 20px; font-size: 11px; font-weight: 700; }
.ra-entry-ctx { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.ra-entry-date { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }

/* ── Recent analyses checkbox + selection ── */
.ra-cb {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--forest); flex-shrink: 0;
}
.ra-entry.ra-selected { background: rgba(var(--ink-rgb),0.08); border-color: rgba(var(--ink-rgb),0.3); }
.ra-entry.ra-selected:hover { background: rgba(var(--ink-rgb),0.12); }
.ra-select-all-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; user-select: none; flex-shrink: 0;
}

/* ── Docs-recent view layout ── */

/* ═══════════════════════════════════════════════════
   ADMIN VIEW
═══════════════════════════════════════════════════ */
#view-admin {
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 40px 44px;
  gap: 24px;
}
#view-admin.active { display: flex; }


/* ── Tabs ── */
.adm-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--egg-border);
  flex-shrink: 0;
  padding-bottom: 0;
}
.adm-tab {
  padding: 8px 18px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 7px;
}
.adm-tab:hover { color: var(--text-primary); }
.adm-tab.active {
  color: var(--green-mid);
  border-bottom-color: var(--green-mid);
}
.adm-tab-count {
  background: var(--egg-border);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.adm-tab.active .adm-tab-count {
  background: rgba(var(--ink-rgb),0.12);
  color: var(--green-mid);
}

/* ── Tab panels ── */
.adm-panel { display: none; flex-direction: column; gap: 12px; }
.adm-panel.active { display: flex; }

/* ── Empty state ── */
.adm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  gap: 10px;
  color: var(--text-muted);
}
.adm-empty svg { width: 36px; height: 36px; opacity: 0.35; }
.adm-empty-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.adm-empty-sub   { font-size: 13px; }

/* ── Cards (pending + users share the same card frame) ── */
.adm-card {
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: 14px;
  overflow: hidden;
}

/* ── Table inside card ── */
.adm-table {
  width: 100%;
  border-collapse: collapse;
}
.adm-table th {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--egg-border);
  background: var(--egg-bg);
}
.adm-table td {
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text-primary);
  vertical-align: middle;
  border-bottom: 1px solid rgba(227,220,210,0.55);
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: var(--egg-hover); }

.adm-name  { font-weight: 600; }
.adm-email { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }

.adm-role-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(var(--ink-rgb),0.09);
  color: var(--green-mid);
  white-space: nowrap;
}
.adm-admin-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(180,130,50,0.12);
  color: #8A6520;
  margin-left: 6px;
  vertical-align: middle;
}
.adm-date { font-size: 12.5px; color: var(--text-muted); }

.adm-actions { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }

.adm-btn {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background 0.13s, opacity 0.13s;
}
.adm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.adm-btn-approve {
  background: rgba(var(--ink-rgb),0.10);
  color: var(--green-mid);
}
.adm-btn-approve:hover:not(:disabled) { background: rgba(var(--ink-rgb),0.18); }
.adm-btn-reject {
  background: rgba(180,60,40,0.08);
  color: #B33A28;
}
.adm-btn-reject:hover:not(:disabled) { background: rgba(180,60,40,0.15); }
.adm-btn-edit {
  background: var(--egg-bg);
  color: var(--text-secondary);
  border: 1px solid var(--egg-border);
}
.adm-btn-edit:hover:not(:disabled) { background: var(--egg-hover); color: var(--text-primary); }

/* ── Edit modal ── */
.adm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--ink-deep-rgb),0.48);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
}
.adm-modal-overlay.open { display: flex; }
.adm-modal {
  background: var(--egg-card);
  border: 1px solid var(--egg-border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(var(--tint-forest-rgb),0.22);
  padding: 28px;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.adm-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.adm-modal-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 5px;   /* small positive gap below the title (was -14px, which pulled
                        the subline UP and overlapped "Edit User") */
}
.adm-modal-field { display: flex; flex-direction: column; gap: 6px; }
.adm-modal-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.adm-modal-select {
  width: 100%;
  padding: 10px 13px;
  background: var(--egg-bg);
  border: 1.5px solid var(--egg-border);
  border-radius: 9px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.adm-modal-select:focus { border-color: var(--green-mid); }

.adm-modal-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--egg-bg);
  border: 1px solid var(--egg-border);
  border-radius: 9px;
}
.adm-modal-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adm-modal-toggle-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.adm-modal-toggle-sub   { font-size: 11.5px; color: var(--text-muted); }

/* toggle switch */
.adm-toggle {
  position: relative;
  width: 40px; height: 22px;
  flex-shrink: 0;
}
.adm-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.adm-toggle-track {
  position: absolute; inset: 0;
  background: var(--egg-border);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
}
.adm-toggle-track::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.2s;
}
.adm-toggle input:checked + .adm-toggle-track {
  background: var(--green-sage);
}
.adm-toggle input:checked + .adm-toggle-track::after {
  transform: translateX(18px);
}

.adm-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.adm-modal-cancel {
  padding: 9px 18px;
  background: none;
  border: 1.5px solid var(--egg-border);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.13s;
}
.adm-modal-cancel:hover { background: var(--egg-hover); }
.adm-modal-save {
  padding: 9px 22px;
  background: var(--green-mid);
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  transition: background 0.13s, opacity 0.13s;
}
.adm-modal-save:hover { background: var(--green-dark); }
.adm-modal-save:disabled { opacity: 0.55; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════════
   RESKIN (Build 2) — typography roles + bronze eyebrows + dark sections.
   Appended last so it wins (equal specificity, later source order) over the
   per-class `font-family: var(--font-sans)` declarations from Build 1.
   ════════════════════════════════════════════════════════════════════════ */
/* DISPLAY SERIF — headlines, section titles, the wordmark, big numerals/stats.
   DM Serif Display is a single 400 weight, so force 400 to avoid faux-bold. */
.welcome-name,
.brand-name,
.ac-page-title,
.ac-half-title,
.as-page-title,
.cal-month-title,
.adm-modal-title,
.adm-empty-title,
.case-card-name,
.bil-case-name,
.bil-wf-name,
.as-banner-name,
.as-loading-title,
.bt-edit-title,
.rn-title,
.a2-title,
.bil-modal-date,
.sync-title,
.ca-title,
.cases-empty-title,
.td-task-name,
.home-allclear-title,
.tm-name,
.pfp-header-name,
.home-bill-num,
.cb-total,
.tb-module-hours,
.bt-td-hours,
.dr-stat-num,
.perf-dr-count-num,
.pfp-complete-pct,
.ta-page-title,
.cm-hd-title,
.mw-hd-title,
.docs-hd-title,
.tm-page-title,
.tm-row-name,
.qr-name,
.tmg-card-name,
.stf-title,
.settings-page-title,
.dash-title,
.rvw-page-title,
.home-today-title,
.home-dl-day,
.rvd-task-name,
.et-title,
.time-page-title {   /* Billing titles (My/Team Billing, Billed Time) — were Inter */
  font-family: var(--font-display);
  font-weight: 400;
}
/* BODY SERIF — running copy, leads, captions, descriptions, pull-quotes. */
.home-bill-cap,
.home-allclear-sub,
.as-loading-sub,
.ca-app-sub,
.adm-empty-sub,
.dash-empty {
  font-family: var(--font-body);
}
/* EYEBROWS / SECTION LABELS — Inter 700, wide tracking, uppercase, bronze.
   (The main sanctioned use of bronze.) .th-section-label (Tasks, was 0.08em/
   no bronze) and .qr-summary-label (Performance, was 0.1em/navy) are folded in
   so they match the canonical eyebrow treatment site-wide. */
.section-label,
.dash-eyebrow,
.as-section-label,
.qr-summary-label {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bronze);
}
/* Dark sections use the navy gradient + cream/ink-on-navy text. */
.sidebar { background: var(--navy-grad); }

/* ── Conflicts / ethical walls page (Risk/Compliance) ── */
#view-conflicts { overflow-y: auto; }
.cf-page { width: 100%; padding: 36px 40px 64px; }   /* fill the content area (no centered max-width band) */
.cf-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.cf-title { font-family: var(--font-display); font-size: 30px; color: var(--text-primary); margin-top: 2px; }
.cf-sub { font-family: var(--font-body); font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; max-width: 560px; line-height: 1.5; }
.cf-new-btn { flex-shrink: 0; background: var(--forest); color: #fff; border: none; border-radius: 11px; padding: 11px 18px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.cf-new-btn:hover { background: var(--green-mid); }
.cf-msg { padding: 11px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; font-family: var(--font-sans); }
.cf-msg.err { background: rgba(var(--danger-rgb),0.08); color: var(--danger); border: 1px solid rgba(var(--danger-rgb),0.25); }
.cf-msg.ok  { background: rgba(var(--ink-rgb),0.06); color: var(--text-primary); border: 1px solid var(--egg-border); }
.cf-section-head { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cf-count { background: var(--egg-hover); color: var(--text-secondary); border-radius: 20px; font-size: 11px; font-weight: 700; padding: 1px 9px; letter-spacing: 0; }
.cf-list { display: flex; flex-direction: column; gap: 10px; }
.cf-card { background: var(--egg-card); border: 1px solid var(--egg-border); border-radius: 14px; padding: 15px 17px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cf-card.lifted { opacity: 0.66; }
.cf-card-main { min-width: 0; }
.cf-card-row1 { font-size: 14px; color: var(--text-primary); font-weight: 600; }
.cf-card-row1 .cf-vs { color: var(--text-muted); font-weight: 400; margin: 0 7px; }
.cf-card-reason { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); margin-top: 5px; line-height: 1.45; }
.cf-card-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; }
.cf-lift-btn { flex-shrink: 0; background: var(--egg-card); border: 1.5px solid var(--egg-border); border-radius: 9px; padding: 7px 14px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.cf-lift-btn:hover { border-color: var(--accent); color: var(--accent); }
.cf-empty { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); padding: 8px 2px; }
.cf-overlay { position: fixed; inset: 0; background: rgba(var(--ink-deep-rgb),0.42); display: flex; align-items: flex-start; justify-content: center; z-index: 2000; overflow-y: auto; padding: 56px 16px; }
.cf-modal { background: #fff; border-radius: 18px; padding: 26px 24px 20px; width: 100%; max-width: 460px; box-shadow: 0 12px 48px rgba(var(--ink-deep-rgb),0.28); display: flex; flex-direction: column; }
.cf-modal-title { font-family: var(--font-display); font-size: 21px; color: var(--text-primary); margin-bottom: 16px; }
.cf-field-label { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronze); margin: 12px 0 6px; }
.cf-select, .cf-textarea { font-family: var(--font-sans); font-size: 13.5px; color: var(--text-primary); background: var(--egg-bg); border: 1.5px solid var(--egg-border); border-radius: 10px; padding: 10px 12px; outline: none; width: 100%; }
.cf-textarea { min-height: 72px; resize: vertical; font-family: var(--font-body); }
.cf-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.cf-cancel-btn { background: transparent; border: 1.5px solid var(--egg-border); border-radius: 10px; padding: 9px 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.cf-confirm-btn { background: var(--forest); color: #fff; border: none; border-radius: 10px; padding: 9px 18px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.cf-confirm-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── In-app notice modal (window._ratioNotice) + the shared CONFIRM
   (window._ratioConfirm) — one .rn-* shell for notice / prompt / confirm.
   Navy + serif + a bronze rule; Home standard (tokens, crisp edge). ── */
.rn-overlay { position: fixed; inset: 0; background: rgba(var(--ink-deep-rgb),0.45); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: var(--space-5); }
.rn-modal { background: var(--egg-card); border: 1px solid #e7ddc9; border-top: 3px solid var(--bronze); border-radius: var(--radius-lg); box-shadow: 0 16px 56px rgba(var(--ink-deep-rgb),0.32); padding: var(--space-5) var(--space-5) var(--space-4); max-width: 430px; width: 100%; }
.rn-title { font-family: var(--font-display); font-size: 19px; color: var(--text-primary); margin-bottom: var(--space-2); }
.rn-body { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.rn-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--space-4); }
.rn-ok { background: var(--forest); color: #fff; border: none; border-radius: var(--radius-sm); padding: 9px 20px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.rn-ok:hover { background: var(--green-mid); }
/* Confirm additions: danger action, wide content variant, content slot, checkbox row */
.rn-ok.rn-danger { background: var(--danger); }
.rn-ok.rn-danger:hover { background: var(--danger-deep); }
.rn-ok:disabled { background: var(--egg-hover); color: var(--text-muted); cursor: default; }
.rn-modal.rc-wide { max-width: 560px; }
.rc-content { margin-top: var(--space-4); max-height: 46vh; overflow-y: auto; }
.rc-check { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.rc-check input { accent-color: var(--forest); width: 15px; height: 15px; cursor: pointer; }

/* _namePrompt — single-field create prompt (contextual + Workflow / + Task) */
.np-input {
  width: 100%; box-sizing: border-box; margin-top: 14px;
  padding: 10px 13px; border: 1px solid var(--egg-border); border-radius: 10px;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-primary);
  background: var(--egg-bg); transition: border-color .13s, box-shadow .13s;
}
.np-input:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(156,122,63,.15); }
.np-actions { gap: 10px; }
.np-cancel {
  background: transparent; color: var(--text-secondary); border: 1px solid var(--egg-border);
  border-radius: 10px; padding: 9px 18px; font-family: var(--font-sans); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: background .13s, border-color .13s;
}
.np-cancel:hover { background: var(--egg-hover); border-color: rgba(var(--ink-rgb),.25); }

/* ═══ LIVING CANVAS + MOTION (Home rebuild) — keep LAST so it wins by source
   order. Canvas: body-level fixed layer behind all views (page bg lives on
   body; .app/.main/.view are transparent). Two slow brand blobs + vignette +
   grain, all pointer-events:none. ═══ */
.ratio-canvas { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.rc-blob { position: absolute; border-radius: 50%; will-change: transform; }
.rc-blob-navy {
  width: 920px; height: 920px; top: -300px; right: -260px;
  background: radial-gradient(circle at 50% 50%, rgba(24,40,63,.10), transparent 70%);
  animation: rcDriftA 28s ease-in-out infinite alternate;
}
.rc-blob-bronze {
  width: 840px; height: 840px; bottom: -280px; left: -240px;
  background: radial-gradient(circle at 50% 50%, rgba(201,169,97,.12), transparent 70%);
  animation: rcDriftB 32s ease-in-out infinite alternate;
}
@keyframes rcDriftA { from { transform: translate(0, 0) scale(1); } to { transform: translate(-46px, 40px) scale(1.06); } }
@keyframes rcDriftB { from { transform: translate(0, 0) scale(1.06); } to { transform: translate(48px, -42px) scale(1); } }
.rc-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(24,40,63,.07) 100%); }
.rc-grain {
  position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Home entrance choreography — plays ONCE per session (gated in _renderHome);
   tight: settles by ~440ms (.3s rise, 70/140ms stagger). */
.home-enter .home-hero  { animation: homeHeroFade .3s cubic-bezier(.2,.8,.2,1) both; }
.home-enter .home-today { animation: homeZoneRise .3s cubic-bezier(.2,.8,.2,1) .07s both; }
.home-enter .home-rail  { animation: homeZoneRise .3s cubic-bezier(.2,.8,.2,1) .14s both; }
@keyframes homeHeroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes homeZoneRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Global crumbs: cards/panels float on hover; buttons press on :active */
.tb-module, .dash-panel, .stf-ov-card,
.adm-card, .card {
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 14px 34px -18px rgba(24,40,63,.18);
}
.tb-module:hover,
.stf-ov-card:hover, .adm-card:hover, .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(24,40,63,.07), 0 20px 44px -18px rgba(24,40,63,.30);
}
/* .dash-panel is a structural framing container, not a click target itself —
   it keeps the resting elevated shadow above but never lifts on hover. Its
   clickable children (links, rows, cards) carry their own hover treatment. */
.bill-overview-chart .card:hover { transform: none; }
button:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .rc-blob { animation: none; }
  .home-enter .home-hero, .home-enter .home-today, .home-enter .home-rail { animation: none; }
}

/* ═══ APP-WIDE ROLLOUT VOCABULARY — ink ribbon, entrance, pulses, ink stats ═══ */
/* INK RIBBON — compact page-header band (~88px): the Home ink-wash family,
   grain, a subtler concentric-arc device (CSS rings, ~.35), serif cream title,
   one big bronze serif stat on the right. */
.ink-ribbon {
  position: relative; overflow: hidden; border-radius: 14px; min-height: 88px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 28px; flex-shrink: 0;
  background:
    radial-gradient(700px 240px at 88% 120%, rgba(201,169,97,.30), transparent 60%),
    radial-gradient(560px 200px at 70% -40%, rgba(90,120,165,.40), transparent 65%),
    radial-gradient(900px 320px at 12% 50%, rgba(10,18,32,.5), transparent 70%),
    linear-gradient(105deg, #0E1A2E 0%, #16263F 45%, #1D3050 78%, #24395C 100%);
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 14px 34px -18px rgba(24,40,63,.18);
}
.ink-ribbon::after {
  content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ink-ribbon::before { /* concentric bronze hairlines bleeding off the top-right */
  content: ''; position: absolute; top: -150px; right: -150px; width: 300px; height: 300px;
  border-radius: 50%; opacity: .35; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(201,169,97,.55) 34px 35px, transparent 35px 69px);
}
/* chips/pills hosted inside a ribbon go glassy-on-ink */
.ink-ribbon .dash-chip { background: rgba(245,242,234,.12); border: 1px solid rgba(245,242,234,.25); color: #F5F2EA; }
/* ribbon-hosted action button (e.g. Documents upload) — quiet glassy pill */

/* ENTRANCE — staggered rise applied by window._entrance(). TIGHT: .27s rise,
   60ms steps capped at 3 → the whole choreography settles by ~450ms. Items
   are never invisible awaiting a long delay (delay ceiling is 180ms). */
.rise-in { animation: pageRise .27s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes pageRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* VALUE SWAP — replacing the "—" placeholder with a real value crossfades
   (~150ms, opacity .3 → 1), never snaps. Applied by _countUp/_statReveal. */
.stat-swap { animation: statSwap .15s ease-out; }
@keyframes statSwap { from { opacity: .3; } to { opacity: 1; } }

/* Workflow case-group dots — soft pulse */

/* Billing — the stat strip is the page's dark anchor (ink panels) */
.ink-stat {
  position: relative; overflow: hidden;
  background:
    radial-gradient(420px 160px at 85% 120%, rgba(201,169,97,.26), transparent 62%),
    linear-gradient(115deg, #0E1A2E 0%, #16263F 55%, #1D3050 100%);
  border: 1px solid rgba(201,169,97,.18) !important;
}
.ink-stat .bill-stat-label { color: rgba(245,242,234,.66); }
.ink-stat .bill-stat-value { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: #F5F2EA; letter-spacing: 0; }
.ink-stat .bill-stat-detail { color: rgba(245,242,234,.55); }
.ink-stat.ink-stat-bronze .bill-stat-value { color: #C9A961; }

/* Weekly chart bars grow from 0 (per-bar delay set inline by renderBarChart) */

/* Blank-until-ready stats: a stat element holds a subtle dash placeholder
   until its REAL value is known (no transient zeros, ever). The class is
   stripped by whatever writes the real value (_countUp et al.). */
.stat-pending { opacity: .3; }

/* Quiet end-of-list device (Documents / Admin lower halves) */
.end-device { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 36px 16px 10px; }
.end-device-mark {
  width: 54px; height: 54px; border-radius: 50%; opacity: .5;
  background: repeating-radial-gradient(circle, transparent 0 8px, rgba(156,122,63,.55) 8px 9px, transparent 9px 17px);
}
.end-device-line { font-family: var(--font-body); font-style: italic; font-size: 13.5px; color: var(--text-muted); }
.home-bill-empty { padding: 12px 8px 6px; }
.home-bill-empty-link {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  color: var(--accent); cursor: pointer;
}
.home-bill-empty-link:hover { text-decoration: underline; }

/* ── Home rail refinements (front-page redesign): the billing links are quiet
   editorial index links, not bordered buttons. "Enter time →" shows only in
   the empty state (toggled by renderBilling/renderBillEmpty). ── */
.home-bill-btnrow { display: flex; gap: var(--space-5); margin-top: var(--space-4); align-items: center; }
.home-bill-btnrow .home-bill-link,
.home-bill-btnrow .home-bill-empty-link {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; margin: 0; border: none; background: none; padding: 0; height: auto;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--accent);
  cursor: pointer;
}
.home-bill-btnrow .home-bill-link:hover,
.home-bill-btnrow .home-bill-empty-link:hover {
  color: var(--bronze); text-decoration: underline; text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rise-in { animation: none; }
  .stat-swap { animation: none; }
}

/* ═══ TASK PAGE two-zone layout (task-pages redesign P2) ═══ */
.td-crumb-link { color: var(--text-muted); cursor: pointer; }
.td-crumb-link:hover { color: var(--accent); text-decoration: underline; }
.td-dl-chip { cursor: pointer; font-size: 11.5px; padding: 5px 12px; }
.td-dl-chip:hover { border-color: rgba(var(--ink-rgb),0.35); }
/* CONTROL ROW (#4c): the title pushes the actions into one aligned, right-anchored
   group of equal-height buttons. Status lives in the prominent banner below, so
   the band's small status badge is retired here. */
/* runway TARGET chip slots in task detail — distinct, secondary to the hard
   deadline (the chip itself reuses the shared bronze .rmp-suggest styling). */
.td-sb-target { margin-top: 4px; }
.td-sb-target:empty, .td-target-chip-wrap:empty { display: none; }
.td-target-chip-wrap { display: inline-flex; align-items: center; }
/* ── Prominent STATUS BANNER (#4d) — status · deadline · document review ── */
.td-sb-seg { background: var(--egg-card); padding: 13px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.td-sb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.td-sb-status-ip   .td-sb-dot { background: #2A7090; }
.td-sb-status-done .td-sb-dot { background: var(--bronze); }
.td-sb-status-done .td-sb-value { color: var(--text-secondary); }
.td-zones { display: grid; grid-template-columns: 62fr 38fr; gap: 22px; align-items: start; }
@media (max-width: 980px) { .td-zones { grid-template-columns: 1fr; } }
.td-main {
  background: rgba(255,255,255,.92); border: 1px solid var(--egg-border); border-radius: 16px;
  padding: 24px 26px 26px; min-width: 0;
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 14px 34px -18px rgba(24,40,63,.18);
}
.td-zone-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bronze);
}
.td-main .td-desc-display {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.7;
  color: var(--text-secondary); cursor: text; border-radius: 8px; padding: 2px 4px;
  transition: background .12s;
}
.td-main .td-desc-display:hover { background: var(--egg-hover); }
.td-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.td-rail-card {
  background: rgba(255,255,255,.92); border: 1px solid var(--egg-border); border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 14px 34px -18px rgba(24,40,63,.18);
}
.td-people-role {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  margin: 14px 0 8px;
}
.td-people-role:first-of-type { margin-top: 12px; }
.td-rail .td-atty-row { display: flex; flex-direction: column; gap: 9px; }
/* PEOPLE rows — bordered cards, not floating borderless names. */
.td-person {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  border: 1px solid var(--egg-border); border-radius: 10px;
  padding: 8px 11px; background: var(--egg-bg);
  transition: border-color .13s, background .13s;
}
.td-person:hover { border-color: rgba(var(--ink-rgb),0.22); background: var(--egg-card); }
.td-person .td-atty-avatar {
  width: 34px; height: 34px; font-size: 12.5px; cursor: pointer; flex-shrink: 0;
}
.td-person-name {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  color: var(--text-primary); cursor: pointer; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-person .td-atty-remove { opacity: 0; transition: opacity .15s; }
.td-person:hover .td-atty-remove { opacity: 1; }
/* "+ add" — a proper, clearly-tappable button (full row width, dashed = add). */
.td-person-add {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: none; border: 1.5px dashed var(--egg-border); border-radius: 10px;
  padding: 11px 14px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-secondary);
  transition: color .13s, border-color .13s, background .13s;
}
.td-person-add:hover { color: var(--accent); border-color: var(--bronze); background: rgba(156,122,63,0.05); }
/* prominent dark bronze-trimmed staffing entry */
.stf-entry-btn.td-staff-btn {
  width: 100%; justify-content: center; margin-top: 16px;
  background: var(--forest); color: #F5F2EA;
  border: 1px solid rgba(201,169,97,.5); border-radius: 11px;
  padding: 11px 14px; font-weight: 700;
}
.stf-entry-btn.td-staff-btn:hover { background: var(--green-mid); border-color: #C9A961; }
/* linked-context cards: whole card clickable, no arrows */
.td-meta-cell-click { cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), border-color .14s; }
.td-meta-cell-click:hover {
  transform: translateY(-3px); border-color: rgba(var(--ink-rgb),0.28);
  box-shadow: 0 2px 4px rgba(24,40,63,.06), 0 12px 26px -14px rgba(24,40,63,.22);
}
.td-rail .td-meta-cell + .td-meta-cell { margin-top: 10px; }
.td-meta-line { font-family: var(--font-body); font-style: italic; font-size: 12px; color: var(--text-muted); padding: 0 4px; }

/* ═══ TASK DETAIL — three-jobs reorganization (Work Product centerpiece,
   Assign rail, prominent Start-timer). Presentation only. ═══ */
/* EDITORIAL HEADER: title + quiet status line (left), prominent timer (right). */
.td-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule-strong);
  flex-shrink: 0; margin-bottom: 22px;
}
.td-hd-text { min-width: 0; }
.td-hd .td-task-name {
  font-family: var(--font-display); font-weight: 400; font-size: 30px;
  color: var(--text-primary); line-height: 1.15; letter-spacing: 0;
}
/* quiet status line "• Not started" — reuses the status-seg ids that
   _tdRenderStatusBar drives (it replaces the seg className each render, so the
   dot tint via .td-sb-status-* still applies). */
.td-statusline { margin-top: 8px; }
.td-statusline .td-sb-seg {
  background: none; padding: 0; flex-direction: row; align-items: center; gap: 7px;
}
.td-statusline .td-sb-dot { width: 8px; height: 8px; }
.td-statusline #td-sb-status-val {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
/* PROMINENT Start-timer primary (navy fill, white text, soft shadow). */
.td-timer-primary {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 11px 20px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 10px rgba(var(--ink-rgb),0.22);
  transition: background .13s, box-shadow .13s;
}
.td-timer-primary:hover { background: var(--green-dark); box-shadow: 0 4px 16px rgba(var(--ink-rgb),0.3); }
.td-timer-primary svg { display: block; }
/* MAIN column is a plain stack now; the blocks inside carry the surfaces. */
#view-task-detail .td-main {
  background: none; border: none; box-shadow: none; padding: 0;
  gap: var(--space-4);
}
/* THE WORK — a quiet block (cool hairline, subtle depth). */
.td-work {
  background: rgba(255,255,255,.92); border: 1px solid var(--egg-border);
  border-radius: var(--radius-lg); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 2px rgba(24,40,63,.05);
}
/* DEADLINE as a small quiet line inside The Work. */
.td-deadline-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.td-deadline-line .td-dl-chip { cursor: pointer; font-size: 12px; padding: 5px 12px; }
.td-deadline-line #td-cal-btn { font-size: 12px; font-weight: 600; padding: 5px 12px; }
/* WORK PRODUCT — the centerpiece: warm surface, largest/deepest block. */
.td-wp-card {
  background: #fffdf9; border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 18px 40px -22px rgba(24,40,63,.16);
}
.td-wp-card > .td-section-label { color: var(--bronze); letter-spacing: .14em; margin-bottom: 0; }
/* submitted / staged work-product rows. */
.td-wp-card .td-file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 0; }
.td-wp-card .td-file-list:empty { display: none; }
.td-file-row {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 11px 14px; background: var(--egg-card);
  border: 1px solid #e7ddc9; border-radius: var(--radius-md);
}
.td-file-ic {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--egg-hover); color: var(--bronze);
}
.td-file-ic svg { width: 16px; height: 16px; }
.td-file-nm {
  flex: 1; min-width: 0; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-file-dl {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--gold-rgb),0.42); background: rgba(var(--gold-rgb),0.12);
  color: var(--bronze); font-family: var(--font-sans); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .13s, border-color .13s;
}
.td-file-dl svg { width: 14px; height: 14px; }
.td-file-dl:hover { background: rgba(var(--gold-rgb),0.20); border-color: var(--bronze); }
.td-file-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; flex-shrink: 0; padding: 2px 4px; }
.td-file-x:hover { color: var(--danger); }
/* delete control sits quiet at the foot of the rail. */
.td-rail .td-del-ctrl { align-self: flex-start; }

/* ═══ TASK ROW anatomy (task-pages redesign) — board pills, All Tasks rows,
   Tasks home. Serif name, case accent rule (inline per row), urgency chip,
   status pill, hover-revealed timer/delete, hairline + lift. ═══ */
.task-item, .ta-task-row { border-left: 3px solid var(--egg-border); }
.task-item-text, .ta-task-name {
  font-family: var(--font-display); font-weight: 400; font-size: 15.5px;
  color: var(--accent); line-height: 1.25;
}
.task-dl-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 3px 9px; border-radius: 14px;
  border: 1px solid var(--egg-border); background: var(--egg-bg);
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap;
}
.task-dl-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.task-dl-chip.dl-sage  .task-dl-dot { background: #7FA379; }
.task-dl-chip.dl-amber { border-color: rgba(239,166,58,.5); background: rgba(239,166,58,.09); color: #8A5F14; }
.task-dl-chip.dl-amber .task-dl-dot { background: #D98E1C; }
.task-dl-chip.dl-red   { border-color: rgba(192,57,43,.4); background: rgba(192,57,43,.06); color: var(--danger-deep); }
.task-dl-chip.dl-red   .task-dl-dot { background: var(--danger); }
.task-dl-chip.dl-none  { color: var(--text-muted); }
.task-status-pill {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 3px 10px; border-radius: 12px;
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.task-status-pill.ip   { background: rgba(24,40,63,.08); color: var(--accent); }
.task-status-pill.ns   { background: var(--egg-hover); color: var(--text-muted); border: 1px solid var(--egg-border); }
.task-status-pill.done { background: rgba(201,169,97,.16); color: #7A5F2E; }
/* compact complete toggle on rows (ring only — the label is for the modules) */
.task-item .wfl-cb-label, .ta-task-row .wfl-cb-label { display: none; }
/* task rows now show the SAME shared Option-B pill (the old bare-ring override is retired) */
/* timer + delete reveal on hover */
.task-item .task-timer-btn, .task-item .ratio-del-ctrl,
.ta-task-row .ratio-del-ctrl { opacity: 0; transition: opacity .15s; }
.task-item:hover .task-timer-btn, .task-item:hover .ratio-del-ctrl,
.ta-task-row:hover .ratio-del-ctrl { opacity: 1; }
/* lift per design language */
.task-item:hover, .ta-task-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(24,40,63,.06), 0 12px 26px -14px rgba(24,40,63,.22);
}

/* Privacy Policy — reading-column static shell (placeholder copy) */
#view-privacy { display: none; flex-direction: column; overflow-y: auto; padding: 40px 44px; }
#view-privacy.active { display: flex; }
.privacy-wrap { max-width: 760px; }
.privacy-updated { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--text-muted); margin: 8px 0 26px; }
.privacy-sec { border-top: 1px solid var(--egg-border); padding: 18px 0 6px; }
.privacy-h { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--text-primary); margin-bottom: 8px; }
.privacy-p { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.privacy-p a { color: var(--accent); }

/* Skeleton for collection areas that genuinely await a fetch (never blank) */
.skel-rows { display: flex; flex-direction: column; gap: 10px; }
.skel-row { height: 64px; border-radius: 14px; background: rgba(24,40,63,.06); animation: skelPulse 1.4s ease-in-out infinite; }
.skel-row:nth-child(2) { animation-delay: .15s; }
.skel-row:nth-child(3) { animation-delay: .3s; }
@keyframes skelPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skel-row { animation: none; } }

/* ═══ PERFORMANCE HUB — calm rows, expand-in-place, themed accordions ═══ */
.hub-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); margin-bottom: 12px;
}
/* Remake: responsive 2-col CARD grid of associate cards (Remake_Team_Performance). */
/* ── Option B associate card — ONE consolidated face block (the prior layered
   passes left two conflicting .hub-row-head/.pc-top definitions; merged).
   FIXED-HEIGHT face, deterministic block flow: clamped takeaway + one-line
   MEASURE-FITTED chip rows keep content bounded; "Read full assessment" is
   absolutely pinned so it sits at the same y on every card; the reserved 50px
   bottom padding keeps content clear of it. overflow:hidden is safe — the
   accordion (.hub-expand) is a SIBLING below, not a child, so expansion still
   grows the row. With .hub-grid align-items:start, every card in a row is this
   exact height with matching top + bottom edges (strict row lock, no masonry). */
/* NO standing/grade pill; the "Limited data" note is the only right-aligned
   chip (a data caveat, not a rating). */
/* TAKEAWAY — the derived headline (Spectral navy, unquoted). The backend caps
   it at ~140 chars (CARD_SUMMARY_SYSTEM v3) so it fits two lines; the clamp
   below is a safety net for pathological output, never the norm. */
/* the narrative FALLBACK (when no card summary yet) — clamped snippet */
#view-performance .hub-row.open .narr { -webkit-line-clamp: unset; }
/* STRENGTHS + GAPS — eyebrow + chips; chip base is shared, tier classes set
   the intensity color (green family for strengths, bronze→danger for gaps). */
/* chip ROW — single line; JS measure-fits the row (hides chips that would
   overflow and sizes the "+N more" tag to fit), so nothing ever clips mid-word */
#view-performance .chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow: hidden; }
/* chip BASE — padding/radius/font only; tier classes own bg/color/border */
#view-performance .chip { font: 600 11px var(--font-sans); color: var(--accent); background: rgba(201,169,97,.12); border: 1px solid #e7ddc9; border-radius: var(--radius-pill); padding: 4px 11px; flex-shrink: 0; white-space: nowrap; }
/* "+N more" — muted neutral, never a tier color */
#view-performance .chip.chip-more { background: var(--egg-bg); color: var(--text-muted); border: 1px solid var(--egg-border); }
/* TIER LADDER — crisp, ledger-precise: tint → deeper tint + stronger border →
   solid fill. (The former blurred box-shadow "glows" bled across the 7-8px chip
   gap and read as one connected strip — blur removed; emphasis now lives in
   fill/border/text alone, which can't bleed.) */
/* Strengths tiers (green family, --success #1E5C3A) */
/* Gaps tiers (bronze → danger family) */
#view-performance .more { font: 600 12px var(--font-sans); color: var(--bronze); cursor: pointer; position: absolute; left: 24px; bottom: 22px; }
#view-performance .hub-row.open .more { display: none; }
/* When expanded, the full .hub-holistic shows the opening summary, so hide the
   preview snippet (it repeats the same text → summary appeared twice). Collapsed
   cards still show the snippet. */
/* Team Performance navy header band (Remake_Team_Performance) — title never floats on cream. */
/* Light page header (matches My Billing) — no navy band. Title left, toggle centered. */
#view-performance .perf-belt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-shrink: 0; }
#view-performance .perf-belt .bill-toggle { position: absolute; left: 50%; transform: translateX(-50%); }
#view-performance .perf-belt-eye { font: 600 12px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #a8842f; margin-bottom: 4px; }
#view-performance .perf-belt-sub { font: 500 12px var(--font-sans); color: var(--text-muted); margin-top: 4px; }
/* Editorial row cards: hairline border, real serif name, Inter caps meta,
   comfortable padding, hover lift (suppressed while expanded). */
.hub-row {
  background: rgba(255,255,255,.92); border: 1px solid var(--egg-border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 14px 34px -18px rgba(24,40,63,.18);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
.hub-row:not(.open):hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(24,40,63,.07), 0 20px 44px -18px rgba(24,40,63,.30);
}
.hub-row-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; min-width: 0; }
.hub-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13.5px; font-family: var(--font-sans);
}
.hub-limited-note { font-family: var(--font-body); font-style: italic; font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }
.hub-chev { flex-shrink: 0; color: var(--text-muted); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.hub-row.open .hub-chev { transform: rotate(180deg); }
/* smooth height: the 0fr→1fr grid-row trick */
.hub-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.hub-row.open .hub-expand { grid-template-rows: 1fr; }
.hub-expand-inner { overflow: hidden; }
.hub-detail { padding: 2px 22px 20px; }
/* ── TEAM PERFORMANCE — PERFORMANCE MATRIX v4 (People view) ──
   One row per associate; three color-blocked dimension cells = a solid stage
   BADGE + a 2–3 sentence THIRD-PERSON read (from the partner-facing holistic /
   theme-breakdown narratives — NEVER the second-person coaching read). The
   expand opens a contained warm panel: holistic summary + three dimension
   sub-cards. Scoped to #view-performance. */
#view-performance .pmx-matrix { background: #fff; border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 1px 2px rgba(24,40,63,.04), 0 10px 26px rgba(24,40,63,.05); }
#view-performance .pmx-headrow { display: grid; grid-template-columns: 230px repeat(3,1fr) 84px;
  background: #fffdf9; border-bottom: 1px solid #e7ddc9; }
#view-performance .pmx-mh { font: 600 12px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); padding: 16px 20px; display: flex; align-items: center; }
/* rows are borderless inside the frame */
#view-performance .pmx-row { background: none; border: none; border-bottom: 1px solid #ece4d4;
  border-radius: 0; box-shadow: none; transform: none; }
#view-performance .pmx-row:last-child { border-bottom: none; }
#view-performance .pmx-row:not(.open):hover { transform: none; box-shadow: none; }
#view-performance .pmx-head-row { display: grid; grid-template-columns: 230px repeat(3,1fr) 84px;
  align-items: stretch; padding: 0; gap: 0; }
#view-performance .pmx-person { display: flex; align-items: center; gap: 13px; padding: 20px;
  border-right: 1px solid #ece4d4; min-width: 0; }
#view-performance .pmx-person .hub-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff; font: 600 14px/1 var(--font-sans); }
#view-performance .pmx-name { font: 600 16.5px/1.15 var(--font-sans); color: var(--text-primary); }
#view-performance .pmx-role { font: 400 12.5px/1 var(--font-sans); color: var(--text-muted); margin-top: 5px; }
/* dimension cell — left-aligned solid BADGE + a 2–3 sentence read (v4 "Version B") */
#view-performance .pmx-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
  padding: 18px 20px; border-right: 1px solid #ece4d4; text-align: left; }
#view-performance .pmx-cell.exc  { background: rgba(30,92,58,.16); }
#view-performance .pmx-cell.dev  { background: rgba(181,117,42,.18); }
#view-performance .pmx-cell.grow { background: rgba(126,140,160,.22); }
#view-performance .pmx-cell.lim  { background: repeating-linear-gradient(45deg,#f7f4ee,#f7f4ee 8px,#ece5d8 8px,#ece5d8 16px); }
#view-performance .pmx-badge { align-self: flex-start; font: 700 11px/1 var(--font-sans); letter-spacing: .05em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 999px; color: #fff; white-space: nowrap; }
#view-performance .pmx-badge.exc  { background: #1E5C3A; }
#view-performance .pmx-badge.dev  { background: #B5752A; }
#view-performance .pmx-badge.grow { background: #7E8CA0; }
#view-performance .pmx-badge.lim  { background: #8f8578; }
#view-performance .pmx-read { font: 400 14.5px/1.55 var(--font-body); color: var(--text-secondary); }
/* the prominent labeled expand control */
#view-performance .pmx-expand { display: flex; align-items: center; justify-content: center; padding: 12px; }
#view-performance .pmx-expbtn { font: 600 12px/1 var(--font-sans); color: var(--text-secondary);
  background: #fffdf9; border: 1px solid #e7ddc9; border-radius: 9px; padding: 11px 14px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer; transition: .13s; }
#view-performance .pmx-expbtn:hover { border-color: var(--bronze-bright); background: rgba(var(--gold-rgb),.10); }
#view-performance .pmx-expbtn .ar { font-size: 12px; color: var(--bronze); }
/* the contained, animated expand panel (reuses .hub-expand's 0fr→1fr height transition) */
#view-performance .pmx-row .hub-expand { background: #fffdf9; border-top: 1px solid #e7ddc9; }
#view-performance .pmx-row .hub-detail { padding: 0; }
#view-performance .pmx-exppanel { padding: 24px 28px 28px; }
#view-performance .pmx-expsum { font: 400 15.5px/1.65 var(--font-body); color: var(--text-primary);
  padding: 18px 22px; background: #fff; border: 1px solid #e7ddc9; border-left: 3px solid var(--bronze);
  border-radius: 10px; margin-bottom: 20px; }
#view-performance .pmx-expsum .hub-limited-note { margin-top: 10px; }
#view-performance .pmx-expdims { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
#view-performance .pmx-expdim { background: #fff; border: 1px solid #e7ddc9; border-radius: 10px; overflow: hidden; }
#view-performance .pmx-expdim-h { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid #ece4d4; }
#view-performance .pmx-expdim-t { font: 600 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
#view-performance .pmx-expdim-b { padding: 16px 18px; font: 400 14px/1.6 var(--font-body); color: var(--text-secondary); }
#view-performance .pmx-exp-foot { margin-top: 18px; }
#view-performance .pmx-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px;
  font: 400 11px/1 var(--font-sans); color: var(--text-muted); align-items: center; }
#view-performance .pmx-legend b { font-family: var(--font-sans); font-weight: 600; color: var(--text-secondary); }
#view-performance .pmx-lg { display: inline-flex; align-items: center; gap: 7px; }
#view-performance .pmx-sw { width: 22px; height: 12px; border-radius: 3px; flex: none; }
@media (max-width: 1150px) {
  #view-performance .pmx-headrow, #view-performance .pmx-head-row { grid-template-columns: 190px repeat(3,1fr) 72px; }
  #view-performance .pmx-read { font-size: 13.5px; }
  #view-performance .pmx-expdims { grid-template-columns: 1fr; }
}
.hub-empty-state { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--text-muted); padding: 14px 2px; }
.hub-search { margin-bottom: 12px; }
.hub-own {
  background: rgba(255,255,255,.92); border: 1px solid var(--egg-border); border-radius: 16px;
  padding: 34px 30px; max-width: 560px;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 14px 34px -18px rgba(24,40,63,.18);
}
.hub-own-title { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--text-primary); margin-bottom: 10px; }
.hub-own-body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) {
  .hub-expand { transition: none; }
  .hub-chev { transition: none; }
}

/* ═══ TEAM PERFORMANCE — stacked per-case health rows ═══ */
#team-perf-body { display: flex; flex-direction: column; gap: 16px; }
.tp-row {
  border: 1px solid var(--egg-border); border-radius: 14px; overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 14px 34px -18px rgba(24,40,63,.18);
}
.tp-row-missed { outline: 1px solid var(--danger); outline-offset: -1px; }
/* identity band — per-case gradient set inline by _wflBandTint via the renderer
   would be ideal, but here we tint from a neutral ink to keep it self-contained */
.tp-band {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 15px 20px; color: #F5F2EA;
  background: linear-gradient(100deg, #16243C, #22375A);
}
.tp-band-name { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: #F5F2EA; line-height: 1.15; min-width: 0; }
.tp-band-name i { font-style: italic; color: #E8D9B8; }
.tp-flag {
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  background: rgba(192,57,43,.92); color: #fff; padding: 3px 9px; border-radius: 11px; flex-shrink: 0;
}
.tp-band-count { margin-left: auto; font-family: var(--font-sans); font-size: 11.5px; color: rgba(245,242,234,.72); flex-shrink: 0; }
.tp-chev { color: rgba(245,242,234,.7); flex-shrink: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.tp-row.open .tp-chev { transform: rotate(180deg); }
.tp-cells { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .tp-cells { grid-template-columns: repeat(2, 1fr); } }
.tp-cell { padding: 16px 18px; border-left: 1px solid #ECE8DE; }
.tp-cell:first-child { border-left: none; }
.tp-cell-label { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9AA3B0; margin-bottom: 7px; }
.tp-est { font-weight: 600; letter-spacing: .04em; text-transform: none; opacity: .8; }
.tp-cell-val { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: #26334A; display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.tp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tp-cell-sub { font-family: var(--font-sans); font-size: 11px; color: #9AA3B0; margin-top: 4px; }
/* drill-in */
.tp-drill { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.tp-row.open .tp-drill { grid-template-rows: 1fr; }
.tp-drill-inner { overflow: hidden; }
.tp-row.open .tp-drill-inner { border-top: 1px solid #ECE8DE; padding: 16px 20px; }
.tp-narr { font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 14px; }
.tp-evi { margin-top: 12px; }
.tp-evi-h { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); margin-bottom: 7px; }
.tp-evi-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid #F1EEE6; font-family: var(--font-sans); font-size: 12.5px; }
.tp-evi-task { flex: 1; min-width: 0; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-evi-meta { color: var(--text-muted); flex-shrink: 0; }
.tp-evi-stat { font-weight: 700; flex-shrink: 0; font-size: 11.5px; }
.tp-rollup { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.tp-roll-ok { color: var(--text-muted); }
.tp-showall { margin-top: 8px; background: none; border: none; cursor: pointer; padding: 2px 0; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--accent); }
.tp-showall:hover { text-decoration: underline; }
.tp-alldl { margin-top: 6px; }
.tp-empty { font-family: var(--font-body); font-style: italic; font-size: 12.5px; color: var(--text-muted); padding: 4px 0; }
@media (prefers-reduced-motion: reduce) { .tp-drill, .tp-chev { transition: none; } }

/* ═══ MY DEVELOPMENT — coaching page (growth-framed, calm, light) ═══ */
#mydev-body { display: flex; flex-direction: column; gap: 0; max-width: none; width: 100%; }
/* Remake (Remake_My_Development): full-bleed navy cap + theme card grid + habit chips. */
/* Light page header (matches My Billing) — no navy band, DM-Serif title, bronze eyebrow. */
#mydev-body { gap: 20px; }
/* Billing habits — a CONTAINED card (not a full-bleed strip). */
.mydev-hchips { display: flex; flex-wrap: wrap; gap: 10px; }
.mydev-hchip { display: flex; align-items: center; gap: 8px; font: 500 13px var(--font-sans); color: #2c3e5e; background: #f4efe4; border: 1px solid #ece4d4; border-radius: 9px; padding: 9px 13px; }
.mydev-hchip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
/* (.mydev-head / .mydev-greeting / .mydev-headline removed — "The Arc" redesign
   renders its own masthead; the generic fallback headline is gone too.) */
.mydev-muted { font-family: var(--font-body); font-style: italic; font-size: 13.5px; color: var(--text-muted); }
.mydev-limited { font-family: var(--font-body); font-style: italic; font-size: 12.5px; color: var(--text-muted); padding: 0 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   SHARED MODAL STANDARD (.rmod) — ONE scaffold for every modal/popup.
   Values mirror the canonical Manage-Team/#atm2 shell (the a2-* family) +
   the Directory warmth lesson (warm #e7ddc9 card border, #ece4d4 hairlines,
   warm control fills, bronze focus). LAST in the stylesheet on purpose: the
   .rmod-* classes ride ALONGSIDE each modal's legacy classes and win per
   property by source order. Presentation only — ids/handlers untouched.
   Anatomy: .rmod (card chrome) › .rmod-head (eyebrow+title+✕, hairline
   below) › .rmod-body › .rmod-foot (hairline above, right-aligned quiet
   secondary + navy primary). New modals should use these classes directly.
   ═══════════════════════════════════════════════════════════════════════ */
.rmod { background: #fff; border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 24px 64px rgba(var(--ink-rgb),.20); }
/* id-styled cards (id selector outranks .rmod) — re-assert the warm border */
#connected-apps-modal.rmod, #rvd-modal.rmod, #tm-modal.rmod { border-color: #e7ddc9; }
/* cards that carried their own all-over padding → sections own the padding
   (gap:0 too — a flex-column gap would air-gap the section hairlines) */
.bil-modal.rmod, .sync-modal.rmod, .adm-modal.rmod, .cf-modal.rmod,
.td-submit-modal.rmod, #rvd-modal.rmod { padding: 0; gap: 0; }
.rmod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid #ece4d4;
  margin: 0; flex-shrink: 0; }
.rmod-hgroup { min-width: 0; flex: 1; }
.rmod-eyebrow { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.rmod-title { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.2;
  color: var(--text-primary); margin: 7px 0 0; letter-spacing: 0; text-transform: none; }
.rmod-close { position: static; width: 32px; height: 32px; flex: none; border: none; background: none;
  cursor: pointer; color: var(--text-muted); font-size: 19px; line-height: 1; padding: 0;
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  transition: background .13s, color .13s; }
.rmod-close:hover { background: var(--egg-hover); color: var(--text-primary); }
/* on-ink variant (a navy hero header, e.g. the teammate profile) */
.rmod-eyebrow-onink { color: var(--bronze-bright); }
.rmod-close-onink { color: rgba(245,242,234,.75); }
.rmod-close-onink:hover { background: rgba(245,242,234,.14); color: #F5F2EA; }
.rmod-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.rmod-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: var(--space-4) var(--space-5); border-top: 1px solid #ece4d4; margin: 0; flex-shrink: 0; }
.rmod-btn { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-secondary);
  background: none; border: none; cursor: pointer; padding: 9px 14px; border-radius: var(--radius-sm);
  transition: background .13s, color .13s; }
.rmod-btn:hover { background: var(--egg-hover); color: var(--text-primary); }
.rmod-btn-primary { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: #fff;
  background: var(--accent); border: none; border-radius: var(--radius-sm); padding: 10px 20px;
  cursor: pointer; transition: background .14s; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; width: auto; }
.rmod-btn-primary:hover { background: var(--green-mid); }
.rmod-btn-danger { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--danger);
  background: none; border: 1px solid rgba(var(--danger-rgb),.35); border-radius: var(--radius-sm);
  padding: 9px 14px; cursor: pointer; margin-right: auto; transition: background .13s, border-color .13s; }
.rmod-btn-danger:hover { background: rgba(var(--danger-rgb),.07); border-color: rgba(var(--danger-rgb),.55); }
/* field standard — labels in muted-navy Inter caps; controls on the warm
   token family with the bronze focus ring (explicit class list = safe scope,
   never restyles radio/checkbox option labels) */
.rmod .et-label, .rmod .bt-edit-label, .rmod .cf-field-label,
.rmod .adm-modal-label, .rmod .rv-field-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.rmod .et-input, .rmod .et-select, .rmod .et-textarea,
.rmod .bt-edit-input, .rmod .bt-edit-select, .rmod .bt-edit-textarea,
.rmod .cf-select, .rmod .cf-textarea, .rmod .adm-modal-select,
.rmod .rv-reviewer-input, .rmod .rv-note-input {
  background: #fffdf9; border: 1px solid #e7ddc9; border-radius: var(--radius-sm);
  color: var(--text-primary); font-family: var(--font-sans); }
.rmod .et-input:focus, .rmod .et-select:focus, .rmod .et-textarea:focus,
.rmod .bt-edit-input:focus, .rmod .bt-edit-select:focus, .rmod .bt-edit-textarea:focus,
.rmod .cf-select:focus, .rmod .cf-textarea:focus, .rmod .adm-modal-select:focus,
.rmod .rv-reviewer-input:focus, .rmod .rv-note-input:focus {
  border-color: var(--bronze-bright); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.18); outline: none; }
/* chip standard — gold-tint bronze (never green/sage/navy-tint) */
.rmod .rv-reviewer-chip { background: rgba(201,169,97,.12); border: 1px solid #e7ddc9; color: var(--accent); }
/* combos/inputs fill the body column (default browser sizing left the Enter-Time
   case/description fields conspicuously narrow next to the full-width ones) */
.rmod .et-combo { width: 100%; }
.rmod .et-combo .et-input, .rmod .et-combo .et-textarea { width: 100%; box-sizing: border-box; }
/* pieces re-homed inside a .rmod-head keep no double padding/border */
.rmod-head .docs-dl-head { padding: 0; border-bottom: none; margin-top: 8px; }
.rmod-head .bt-review-sub { margin-top: 8px; }
/* teammate-profile modal: ✕ floats over the navy hero (standard on-ink ✕) */
.tm-close-abs { position: absolute; top: 14px; right: 14px; z-index: 1; }
.tm-modal-hero .rmod-eyebrow { margin-bottom: 12px; }
/* the Enter-Time inline success note rides the footer's left side */
.rmod-foot .et-success { margin-right: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   DETAIL-SCREEN WARMTH PASS (Settings · Reviews · Admin · Workflow board) —
   the Directory warmth lesson applied to four detail screens: warm #e7ddc9
   card borders + #ece4d4 internal hairlines + the layered soft depth, field/
   section labels in muted-NAVY Inter caps (never flat gray), controls on the
   token family with bronze accents/focus, gold-tint hovers. Presentation
   only; scoped so shared classes on other pages are untouched.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── 1. SETTINGS ── */
.settings-section { border-color: #e7ddc9;
  box-shadow: 0 1px 2px rgba(24,40,63,.04), 0 12px 30px rgba(24,40,63,.05); }
.settings-section-hdr { border-bottom-color: #ece4d4; background: #fffdf9; }
.settings-section-title { color: var(--text-secondary); letter-spacing: .1em; font-size: 11px; }
.settings-field-label { color: var(--text-secondary); letter-spacing: .06em; }
.settings-field-input { background: #fffdf9; border: 1px solid #e7ddc9; border-radius: var(--radius-sm); }
.settings-field-input:focus { border-color: var(--bronze-bright); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.18); }
.settings-edit-btn { border: 1px solid #e7ddc9; color: #2c3e5e; border-radius: var(--radius-sm); }
.settings-edit-btn:hover { background: rgba(var(--gold-rgb),.08); border-color: var(--bronze); }
.settings-cancel-btn { border: 1px solid #e7ddc9; border-radius: var(--radius-sm); }
.settings-toggle-row { border-bottom-color: #ece4d4; }
.settings-toggle { background: #e7ddc9; }
.settings-toggle.on { background: var(--accent); }
/* ── 2. REVIEWS (inbox/sent + the review-detail popup content) ── */
.rvw-tabs { border-bottom: none; gap: 8px; margin-bottom: 18px; }
.rvw-tab { border: 1px solid #e7ddc9; border-radius: var(--radius-sm); background: #fffdf9;
  padding: 8px 16px; margin-bottom: 0; color: var(--text-secondary); }
.rvw-tab:hover { color: var(--text-primary); border-color: var(--bronze); }
.rvw-tab.active { background: rgba(var(--gold-rgb),.12); border: 1px solid var(--bronze-bright);
  color: var(--text-primary); font-weight: 700; }
.rvw-tab-count { background: rgba(var(--gold-rgb),.14); color: var(--bronze); }
/* sent/inbox lists = ONE warm bordered ledger (rows become hairline-separated) */
.rvw-list { gap: 0; background: #fff; border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 1px 2px rgba(24,40,63,.04), 0 12px 30px rgba(24,40,63,.05); }
.rvw-list:empty { display: none; }
.rvw-row { border: none; border-top: 1px solid #ece4d4; border-radius: 0; }
.rvw-row:first-child { border-top: none; }
.rvw-row:hover { border-color: #ece4d4; box-shadow: none; background: rgba(var(--gold-rgb),.06); }
.rvw-row-meta strong { color: var(--text-secondary); }
.rvw-empty { border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  font-family: var(--font-body); font-style: italic; }
/* the empty state renders INSIDE the ledger container — one frame, not two */
.rvw-list .rvw-empty { border: none; border-radius: 0; }
.rvw-cancel-btn { border: 1px solid #e7ddc9; border-radius: var(--radius-sm); }
/* review-detail popup CONTENT (the shell was standardized in the modal pass) */
.rvd-header, .rvd-wp { border: 1px solid #e7ddc9; border-radius: var(--radius-lg); }
.rvd-note { background: rgba(var(--gold-rgb),.08); border: 1px solid #e7ddc9; }
.rvd-note-label { color: var(--bronze); }
.rvd-meta-label { color: var(--text-secondary); }
/* ── 3. FIRM ADMIN (the navy ink-ribbon banner is GONE — editorial header) ── */
.adm-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid rgba(var(--gold-rgb),.4); flex-shrink: 0; }
.adm-hd-eyebrow { font: 600 12px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #a8842f; }
.adm-hd-title { font-family: var(--font-display); font-weight: 400; font-size: 32px;
  color: var(--text-primary); line-height: 1.15; margin-top: 6px; }
.adm-hd-meta { font: 500 13px var(--font-sans); color: var(--text-secondary); padding-bottom: 6px; }
.adm-tab-bar { border-bottom: none; gap: 8px; }
.adm-tab { border: 1px solid #e7ddc9; border-radius: var(--radius-sm); background: #fffdf9;
  padding: 8px 16px; margin-bottom: 0; color: var(--text-secondary); }
.adm-tab:hover { color: var(--text-primary); border-color: var(--bronze); }
.adm-tab.active { background: rgba(var(--gold-rgb),.12); border: 1px solid var(--bronze-bright);
  color: var(--text-primary); font-weight: 700; border-bottom: 1px solid var(--bronze-bright); }
.adm-tab-count { background: rgba(var(--gold-rgb),.14); color: var(--bronze); }
.adm-tab.active .adm-tab-count { background: var(--accent); color: #fff; }
.adm-card { border-color: #e7ddc9; border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(24,40,63,.04), 0 12px 30px rgba(24,40,63,.05); }
.adm-table th { color: var(--text-secondary); background: #fffdf9; border-bottom-color: #ece4d4; }
.adm-table td { border-bottom: 1px solid #ece4d4; }
.adm-empty svg { opacity: .5; color: var(--bronze); }
.adm-empty-title { color: var(--text-secondary); }
/* ── 4. WORKFLOW BOARD (#view-tasks-scoped — the shared .dash-* classes on the
   case dashboard are deliberately untouched) ── */
#view-tasks .dash-header { background: #fffdf9; border-color: #e7ddc9;
  box-shadow: 0 1px 2px rgba(24,40,63,.04), 0 12px 30px rgba(24,40,63,.05); }
#view-tasks .dash-chip { background: rgba(var(--gold-rgb),.10); border: 1px solid #e7ddc9; color: var(--text-secondary); }
#view-tasks .dash-panel { border-color: #e7ddc9;
  box-shadow: 0 1px 2px rgba(24,40,63,.04), 0 12px 30px rgba(24,40,63,.05); }
#view-tasks .dash-panel-hd { border-bottom-color: #ece4d4; background: #fffdf9; }
#view-tasks .dash-panel-title { font: 700 11px var(--font-sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-secondary); }
#view-tasks .tasks-wfdl-row { border-color: #e7ddc9; background: #fffdf9; }

/* ═══════════════════════════════════════════════════════════════════════
   MENU / POPOVER STANDARD — the .rmod idea at menu scale, applied to ALL
   floating menus (account menu, notifications, omnibar results, the shared
   .tya-box typeaheads): warm #e7ddc9 popover border, #ece4d4 hairline
   dividers, muted-navy item text/icons, BRONZE hover/active (gold-tint fill),
   bronze-eyebrow caps headers. Presentation only — open/close, search,
   read/dismiss, and the people-typeahead wall enforcement are untouched.
   Future menus should match these values.
   ═══════════════════════════════════════════════════════════════════════ */
/* 1. ACCOUNT MENU */
.acct-menu { border-color: #e7ddc9;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 12px 30px rgba(24,40,63,.14); }
.acct-menu-item { color: var(--text-secondary); }
.acct-menu-item:hover { background: rgba(var(--gold-rgb),.10); color: var(--text-primary); }
.acct-menu-item:hover svg { color: var(--bronze); }
.acct-menu-item.danger:hover { background: rgba(var(--danger-rgb),.07); color: var(--danger-deep); }
.acct-menu-item.danger:hover svg { color: var(--danger-deep); }
.acct-menu-divider { background: #ece4d4; }
/* 2. NOTIFICATIONS DROPDOWN (bronze header + unread bar KEPT) */
.notif-dropdown { border-color: #e7ddc9;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 12px 30px rgba(24,40,63,.14); }
.notif-hdr-row { background: #fffdf9; border-bottom-color: #ece4d4; }
.notif-mark-all { color: var(--bronze); }
.notif-mark-all:hover { opacity: 1; color: #a8842f; text-decoration: underline; }
.notif-row { border-bottom-color: #ece4d4; }
.notif-row:hover { background: rgba(var(--gold-rgb),.07); }
.notif-row.unread { background: rgba(var(--gold-rgb),.08); }   /* bronze left bar kept */
.notif-row-body { color: var(--text-secondary); }
.notif-dismiss:hover { color: var(--bronze); }
/* 3. OMNIBAR SEARCH DROPDOWN */
.srch-dropdown { border-color: #e7ddc9;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 12px 30px rgba(24,40,63,.14); }
.srch-item { border-bottom-color: #ece4d4; color: var(--text-secondary); }
.srch-item:hover, .srch-item.kbd-active { background: rgba(var(--gold-rgb),.10); color: var(--text-primary); }
.srch-item strong { color: var(--text-primary); }
/* 4. TYPEAHEADS (.tya-box — mt/wt/reviewer + every _ratioSuggest instance) */
.tya-box { border-color: #e7ddc9;
  box-shadow: 0 1px 2px rgba(24,40,63,.05), 0 12px 30px rgba(24,40,63,.14); }
.tya-item, .tya-create { color: var(--text-secondary); }
.tya-item:hover, .tya-item.active { background: rgba(var(--gold-rgb),.10); color: var(--text-primary); }
.tya-item.active, .tya-create.active { box-shadow: inset 0 0 0 1px var(--bronze-bright); }
.tya-create { color: var(--bronze); border-top-color: #ece4d4; }
.tya-create:hover, .tya-create.active { background: rgba(var(--gold-rgb),.10); }

/* ═══════════════════════════════════════════════════════════════════════
   PERFORMANCE MIRROR — My Development (#view-perf-my). Three dimension
   cards (Substance / Form / Execution) as soft coaching: colored stage
   accent + qualitative stage BADGE + a discrete named stepper — NEVER a
   number, grade, or percent. Warm DNA surfaces; billing habits in their
   own dashed strip at the foot. (Replaces the "Arc" timeline — the .arc-*
   family was removed with it.)
   ═══════════════════════════════════════════════════════════════════════ */
#mydev-body { display: flex; flex-direction: column; gap: var(--space-5); }
/* 1. COMPACT FRAME — a frame, not a wall */
.pm-titleblock { padding-bottom: var(--space-3); border-bottom: 1px solid rgba(var(--gold-rgb),.4); }
.pm-eyebrow { font: 600 12px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: #a8842f; }
.pm-title { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.15;
  color: var(--text-primary); margin-top: 6px; }
/* the coaching headline is the page's visual lead — prominent serif under the rule */
.pm-headline { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.3;
  color: var(--text-primary); margin-top: var(--space-3); max-width: 820px; }
.pm-refreshed { font: 500 12px var(--font-sans); color: var(--text-secondary); margin-top: 6px; }
/* 2. THE THREE DIMENSION CARDS — equal, the eye lands on accent + badge */
.pm-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 1050px) { .pm-grid { grid-template-columns: minmax(0,1fr); } }
.pm-card { position: relative; background: #fff; border: 1px solid #e7ddc9; border-radius: var(--radius-lg);
  padding: 20px 22px 18px; overflow: hidden; min-width: 0;
  box-shadow: 0 1px 2px rgba(24,40,63,.04), 0 12px 30px rgba(24,40,63,.05); }
.pm-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--pm-c, #7E8CA0); }
/* standing colors — stage WORDS only, color is the value carrier */
.pm-excelling  { --pm-c: #1E5C3A; }
.pm-developing { --pm-c: #B5752A; }
.pm-growth, .pm-limited { --pm-c: #7E8CA0; }
.pm-badge { display: inline-block; font: 700 10px var(--font-sans); letter-spacing: .13em; text-transform: uppercase;
  color: #fff; background: var(--pm-c, #7E8CA0); border-radius: var(--radius-pill); padding: 4px 11px; }
/* the segmented standing bar (Early | Developing | Strong) — reached segments
   filled in the standing color, the rest a warm empty track; NEVER a numeral */
.pm-segbar { display: flex; gap: 5px; margin: 14px 0 7px; }
.pm-seg { flex: 1 1 0; height: 7px; border-radius: 3px; background: #ece4d4; }
.pm-seg.on { background: var(--pm-c, #7E8CA0); }
.pm-seglabels { display: flex; justify-content: space-between; margin-bottom: 16px; }
.pm-seglabel { font: 600 9.5px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pm-seglabel.on { color: var(--pm-c, #7E8CA0); font-weight: 700; }
.pm-dim { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--text-primary); line-height: 1.15; }
.pm-sub { font: 600 10.5px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 3px 0 10px; }
/* text is NEVER visually truncated — no clamp/overflow-hide; the read is a
   short COMPLETE sentence (see oneLine) and the card sizes to it. */
.pm-read { font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
/* evidence expander — quiet link, collapsed by default */
.pm-evd-btn { display: block; background: none; border: none; padding: 0; margin-top: 12px; cursor: pointer;
  font: 600 11.5px var(--font-sans); color: var(--bronze); text-align: left; }
.pm-evd-btn:hover { color: #a8842f; text-decoration: underline; }
.pm-evd { margin-top: 10px; border-top: 1px solid #ece4d4; padding-top: 4px; }
.pm-evd-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 2px;
  font: 500 12px var(--font-sans); color: var(--text-secondary); line-height: 1.45; }
.pm-evd-row + .pm-evd-row { border-top: 1px solid #ece4d4; }
.pm-evd-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 4px; }
.pm-evd-click { cursor: pointer; border-radius: var(--radius-sm); }
.pm-evd-click:hover { background: rgba(var(--gold-rgb),.08); color: var(--text-primary); }
/* 3. BILLING HABITS — a slim, visually SEPARATED dashed strip at the foot */
.pm-habits { border: 1px dashed #e7ddc9; border-radius: var(--radius-md); padding: 14px 18px;
  background: rgba(255,253,249,.6); max-width: 640px; }
.pm-habits-h { font: 700 10.5px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.pm-habits-note { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); margin: 4px 0 10px; }

/* ══════════════════════════════════════════════════════════════════════
   Below: CSS migrated out of runtime `document.createElement('style')`
   injection in ratio.html (each was pure static CSS with zero dynamic
   interpolation — injected lazily/once per feature purely as a historical
   habit of colocating a feature's CSS with its own JS, not for any real
   lazy-load benefit, since ratio.css already loads in full up front).
   ══════════════════════════════════════════════════════════════════════ */

/* ── was #tmd-profile-styles (injected by JS) ── */
.tmd-profile { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--egg-border); }
      .tmd-profile-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
      .tmd-profile-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); }
      .tmd-profile-refresh { font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); text-decoration: none; }
      .tmd-profile-refresh:hover { color: var(--bronze); }
      .tmd-profile-seniority { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 6px; }
      .tmd-profile-narr { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 12px; }
      .tmd-profile-field { margin-bottom: 10px; }
      .tmd-profile-label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
      .tmd-tag-work { background: rgba(var(--gold-rgb), .12); border-color: rgba(var(--gold-rgb), .35); color: var(--bronze); }
      .tmd-profile-foot { margin-top: 8px; }
      .tmd-profile-meta { font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); }

/* ── was #mw-styles (injected by JS) ── */
#mw-root{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2) 0;}
/* ── the unified filter bar (rendered ONCE per _mwRender; filter changes only
         touch #mw-chips / #mw-count / #mw-list, so the search input keeps focus).
         ONE quiet 34px control family: seg · search · four filters · completed. ── */
#mw-root .bar{display:flex;flex-direction:column;gap:var(--space-2);}
#mw-root .bar-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#mw-root .seg{display:inline-flex;background:var(--egg-hover);border:1px solid var(--egg-border);border-radius:var(--radius-sm);padding:2px;gap:2px;flex:none;height:34px;box-sizing:border-box;}
#mw-root .seg button{font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--text-muted);background:none;border:none;border-radius:6px;padding:0 13px;cursor:pointer;transition:background .14s,color .14s;}
#mw-root .seg button.active{background:var(--egg-card);color:var(--accent);box-shadow:0 1px 3px rgba(24,40,63,.10);}
#mw-root .bar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;}
#mw-root .search{font-family:var(--font-sans);font-size:13px;color:var(--accent);background:var(--egg-card);border:1px solid var(--egg-border);border-radius:var(--radius-sm);padding:0 13px;height:34px;box-sizing:border-box;flex:1 1 190px;min-width:160px;max-width:330px;outline:none;}
#mw-root .search:focus{border-color:var(--bronze-bright);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.12);}
#mw-root .search::placeholder{color:var(--text-muted);font-style:italic;font-family:var(--font-body);}
#mw-root .drop{font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--text-secondary);background:var(--egg-card);border:1px solid var(--egg-border);border-radius:var(--radius-sm);padding:0 10px;height:34px;box-sizing:border-box;cursor:pointer;outline:none;max-width:150px;}
#mw-root .drop:focus{border-color:var(--bronze-bright);}
/* Show-completed: a clear labeled TOGGLE (pill button with a check ring),
         not a corner checkbox — default OFF, wired to _mwSetShowCompleted */
#mw-root .mw-done-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--text-secondary);background:var(--egg-card);border:1px solid var(--egg-border);border-radius:var(--radius-pill);padding:0 14px;height:34px;box-sizing:border-box;cursor:pointer;margin-left:auto;white-space:nowrap;transition:background .13s,border-color .13s,color .13s;}
#mw-root .mw-done-btn:hover{border-color:var(--bronze-bright);}
#mw-root .mw-done-btn .mw-done-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--rule-strong);display:inline-flex;align-items:center;justify-content:center;font-size:9px;line-height:1;color:transparent;flex:none;box-sizing:border-box;transition:border-color .13s,background .13s,color .13s;}
#mw-root .mw-done-btn.on{background:rgba(var(--gold-rgb),.12);border-color:var(--bronze-bright);color:var(--accent);}
#mw-root .mw-done-btn.on .mw-done-dot{border-color:var(--bronze);background:var(--bronze);color:#fff;}
/* chips strip: stacked AND chips + clear-all left · live count right */
#mw-root .bar-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:22px;}
#mw-root .mw-count{font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--text-muted);flex:none;margin-left:auto;}
#mw-root .mw-chips{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
#mw-root .fchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--egg-hover);border:1px solid var(--egg-border);border-radius:var(--radius-pill);padding:3px 4px 3px 11px;}
#mw-root .fchip .fdot{width:8px;height:8px;border-radius:50%;flex:none;}
#mw-root .fchip-k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
#mw-root .fchip-x{font-family:var(--font-sans);font-size:13px;line-height:1;color:var(--text-muted);background:none;border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;padding:0;transition:color .13s,background .13s;}
#mw-root .fchip-x:hover{color:var(--danger);background:rgba(var(--danger-rgb,192,57,43),.1);}
#mw-root .mw-clear{font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--bronze);background:none;border:none;cursor:pointer;padding:3px 6px;}
#mw-root .mw-clear:hover{text-decoration:underline;}
/* ── SECTIONS ARE COMPOSED DOCKET UNITS — one bordered --radius-lg card per
         group: a colored band CAP (the same _wflBandTint / severity shade
         treatment as the Workflows bands) over hairline-separated LEDGER rows.
         The page reads as a few crisp objects, not hundreds of floating boxes. ── */
#mw-root .grp{border:1px solid var(--egg-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--egg-card);box-shadow:0 1px 2px rgba(24,40,63,.05);margin-bottom:var(--space-4);}
#mw-root .mw-sec{position:relative;display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-4);background-color:#16243C;background-image:linear-gradient(100deg,var(--band-a,var(--case-band-a,#101C30)),var(--band-b,var(--case-band-b,#24395C)));color:var(--logo-cream);-webkit-user-select:none;user-select:none;}
#mw-root .mw-sec-title{font-family:var(--font-display);font-weight:400;font-size:16.5px;color:var(--logo-cream);display:inline-flex;align-items:center;gap:10px;margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#mw-root .mw-sec-count{font-family:var(--font-sans);font-size:11.5px;font-weight:700;color:rgba(245,242,234,.9);background:rgba(245,242,234,.14);border-radius:var(--radius-pill);padding:2px 10px;line-height:1.3;flex:none;}
#mw-root .mw-sec-click{cursor:pointer;}
#mw-root .mw-sec-chev{font-size:9px;color:rgba(245,242,234,.7);display:inline-block;transition:transform .15s;flex:none;}
#mw-root .mw-sec-chev.open{transform:rotate(90deg);}
/* on-band scope toggle (full-access cases only, by-case grouping) */
#mw-root .mw-scope{display:inline-flex;align-self:center;background:rgba(245,242,234,.12);border:1px solid rgba(245,242,234,.22);border-radius:var(--radius-pill);padding:2px;gap:2px;flex:none;}
#mw-root .mw-scope button{font-family:var(--font-sans);font-size:11px;font-weight:600;color:rgba(245,242,234,.78);background:none;border:none;border-radius:var(--radius-pill);padding:4px 11px;cursor:pointer;transition:background .13s,color .13s;}
#mw-root .mw-scope button.on{background:var(--logo-cream);color:var(--accent);box-shadow:0 1px 3px rgba(24,40,63,.25);}
#mw-root .rows{display:flex;flex-direction:column;}
/* ── LEDGER ROWS — hairline-separated inside the frame; hover = quiet
         fill, no lift, no per-row borders. The row dot is the case's CANONICAL
         accent (the same hue as its band/spine everywhere). ── */
#mw-root .row{display:grid;grid-template-columns:20px minmax(0,1fr) 124px 52px 24px;align-items:center;column-gap:var(--space-4);padding:14px var(--space-4);background:var(--egg-card);transition:background .13s;}
#mw-root .row + .row{border-top:1px solid var(--egg-border);}
#mw-root .row:hover{background:var(--egg-hover);}
#mw-root .ck{width:20px;height:20px;border-radius:50%;border:2px solid var(--rule-strong);flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:transparent;transition:border-color .14s,background .14s,color .14s;}
#mw-root .ck:hover{border-color:var(--bronze-bright);background:rgba(var(--gold-rgb),.12);}
#mw-root .ck.on{border-color:var(--bronze);background:var(--bronze);color:#fff;}
#mw-root .mid{min-width:0;cursor:pointer;}
#mw-root .ttl{font-family:var(--font-body);font-size:17px;font-weight:500;color:var(--accent);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#mw-root .ctx{display:flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:12.5px;color:var(--text-muted);margin-top:3px;min-width:0;}
#mw-root .ctx > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#mw-root .mdot{width:8px;height:8px;border-radius:50%;flex:none;}
#mw-root .due-cell{display:flex;justify-content:flex-end;min-width:0;}
#mw-root .av-cell{display:flex;justify-content:flex-start;}
#mw-root .asg-cell{display:flex;justify-content:flex-end;}
/* due dates: quiet right-aligned TEXT — color only where urgency earns it */
#mw-root .due{font-family:var(--font-sans);font-size:12.5px;font-weight:500;white-space:nowrap;}
#mw-root .due.d-over{color:var(--danger);font-weight:600;}
#mw-root .due.d-target{color:var(--bronze);}
#mw-root .due.d-soon{color:var(--text-secondary);}
#mw-root .due.d-later{color:var(--text-muted);}
/* assignee stack: up to 2 overlapped avatars + a "+N" bubble — rendered
         ONLY when someone is assigned (no dashed placeholder noise) */
#mw-root .avstack{display:inline-flex;align-items:center;}
#mw-root .av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:10px;font-weight:700;color:#fff;box-shadow:0 0 0 2px var(--egg-card);}
#mw-root .avstack .av + .av{margin-left:-8px;}
#mw-root .av.more{background:var(--egg-hover);color:var(--text-secondary);font-size:9.5px;}
/* Assign recedes to a quiet hover-revealed icon (secondary action) */
/* Resting-visible standardized quiet Assign pill (gold-tint fill, bronze
         border, visible "Assign" label, bronze text) — inherits the canonical
         .ratio-assign-btn look; only the compact padding is trimmed to stay
         restrained in a long list. Stronger hover comes from the canonical
         .ratio-assign-btn:hover (gold-0.20 / bronze border). */
#mw-root .row .ratio-assign-btn{opacity:1;padding:4px 10px;}
/* long-section cap expander — a hairline-topped footer row inside the frame */
#mw-root .mw-more{display:block;width:100%;text-align:center;font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--bronze);background:var(--egg-card);border:none;border-top:1px solid var(--egg-border);padding:9px 0;cursor:pointer;transition:background .13s;}
#mw-root .mw-more:hover{background:var(--egg-hover);}
/* completed rows: present but muted */
#mw-root .row.done{opacity:.6;}
#mw-root .row.done .ttl{color:var(--text-muted);}
/* empty state: the quiet centered device */
#mw-root .mw-empty{padding:56px 0 64px;text-align:center;}
#mw-root .mw-empty-rule{width:36px;height:2px;background:var(--bronze);margin:0 auto 14px;}
#mw-root .mw-empty-line{font-family:var(--font-body);font-style:italic;font-size:15px;color:var(--text-muted);}

/* ── was #asfork-styles (injected by JS) ── */
.asf-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(var(--ink-deep-rgb,14,24,40),0.55);backdrop-filter:blur(2px);padding:20px;}
/* the warm plaque — navy crest, warm border, soft depth (the approved centerpiece DNA) */
.asf-modal{width:100%;max-width:520px;background:var(--egg-bg);border:1px solid #e7ddc9;border-top:3px solid var(--accent);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:0 1px 2px rgba(24,40,63,.05),0 28px 70px -20px rgba(var(--ink-deep-rgb,14,24,40),0.45);animation:asfIn .28s cubic-bezier(.2,.7,.3,1);}
@keyframes asfIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
/* bronze caps dateline centered between warm hairlines (the masthead device) */
.asf-eyebrow{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin-bottom:var(--space-4);}
.asf-eyebrow::before,.asf-eyebrow::after{content:"";flex:1;height:1px;background:#ece4d4;}
.asf-title{font-family:var(--font-display);font-size:26px;line-height:1.18;color:var(--accent);margin-bottom:6px;}
.asf-title b{font-weight:400;color:var(--accent);}
.asf-sub{font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--text-secondary);margin-bottom:var(--space-4);}
/* the matched matter as an EXHIBIT — canonical case-accent spine + serif name
         + the match basis as quiet italic evidence */
.asf-match{background:var(--egg-card);border:1px solid #e7ddc9;border-left:4px solid var(--bronze);border-radius:var(--radius-md);padding:14px var(--space-4);margin-bottom:var(--space-1);cursor:pointer;box-shadow:0 1px 2px rgba(24,40,63,.05);}
.asf-match-eyebrow{font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin-bottom:5px;}
.asf-match-name{font-family:var(--font-display);font-size:19px;line-height:1.2;color:var(--accent);}
.asf-match-name i{color:var(--bronze);font-style:italic;}
.asf-match-why{font-family:var(--font-body);font-style:italic;font-size:12.5px;color:var(--text-secondary);margin-top:6px;}
/* the new-matter name — a Spectral centerpiece field on the warm tokens */
.asf-input{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:16px;padding:11px 14px;background:#fffdf9;border:1px solid #e7ddc9;border-radius:var(--radius-sm);color:var(--accent);transition:border-color .13s,box-shadow .13s;}
.asf-input:focus{outline:none;border-color:var(--bronze-bright);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.14);}
.asf-field-label{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 6px;}
.asf-override{border-top:1px solid #ece4d4;margin-top:var(--space-4);padding-top:var(--space-4);}
.asf-select{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:13.5px;padding:10px 12px;background:#fffdf9;border:1px solid #e7ddc9;border-radius:var(--radius-sm);color:var(--accent);}
.asf-select:focus{outline:none;border-color:var(--bronze-bright);}
/* the mini "or" dateline between the two override paths */
.asf-or{display:flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin:14px 0 12px;}
.asf-or::before,.asf-or::after{content:"";flex:1;height:1px;background:#ece4d4;}
.asf-link{background:none;border:none;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--bronze);cursor:pointer;padding:10px 0 0;text-decoration:underline;text-underline-offset:2px;}
.asf-actions{display:flex;justify-content:flex-end;margin-top:var(--space-5);}
.asf-confirm{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:12px 26px;font-family:var(--font-sans);font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,opacity .15s;}
.asf-confirm:hover:not(:disabled){background:var(--green-mid);}
.asf-confirm:disabled{background:var(--egg-hover);color:var(--text-muted);cursor:default;}

/* ── was #recon-styles (injected by JS) ── */
#recon-overlay{position:fixed;inset:0;z-index:100000;display:none;align-items:flex-start;justify-content:center;background:rgba(14,24,40,.55);backdrop-filter:blur(3px);overflow-y:auto;padding:48px 16px;}
      #recon-overlay.open{display:flex;}
      .recon-modal{background:var(--egg-card,#fff);width:min(760px,96vw);border-radius:16px;box-shadow:0 24px 70px rgba(14,24,40,.35);overflow:hidden;font-family:var(--font-sans);}
      .recon-head{background:var(--navy-grad,linear-gradient(160deg,#16243C,#0E1828));color:var(--ink-on-navy,#E6E9EF);padding:22px 26px;}
      .recon-eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze-bright,#C9A961);}
      .recon-title{font-family:var(--font-display,'DM Serif Display');font-size:23px;margin:6px 0 0;color:var(--logo-cream,#F5F2EA);}
      .recon-title i{font-style:italic;color:var(--bronze-bright,#C9A961);}
      .recon-lead{font-size:14.5px;color:var(--muted-on-navy,#9DAAC0);margin-top:10px;}
      .recon-lead b{color:var(--logo-cream,#F5F2EA);font-weight:700;}
      .recon-casename{margin-top:12px;width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--hairline-on-navy,#2A3A55);background:rgba(255,255,255,.08);color:var(--logo-cream,#F5F2EA);font-family:var(--font-display,'DM Serif Display');font-size:17px;}
      .recon-casename::placeholder{color:var(--muted-on-navy,#9DAAC0);}
      .recon-body{padding:22px 26px;max-height:58vh;overflow-y:auto;}
      .recon-sec{margin-bottom:22px;}
      .recon-sec-label{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--bronze,#9C7A3F);margin-bottom:10px;}
      .recon-changed{border:1px solid var(--egg-border,#E2E6EC);border-left:3px solid #B0472E;border-radius:11px;padding:13px 15px;margin-bottom:10px;background:rgba(176,71,46,.035);}
      .recon-changed-subj{font-weight:600;color:var(--text-primary,#18283F);font-size:14px;}
      .recon-delta-row{margin-top:6px;font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
      .recon-old{color:var(--text-muted,#8B97A8);text-decoration:line-through;}
      .recon-arrow{color:var(--text-muted,#8B97A8);}
      .recon-new{color:#18283F;font-weight:700;}
      .recon-delta{font-size:11.5px;font-weight:700;color:#B0472E;background:rgba(176,71,46,.1);padding:2px 8px;border-radius:9px;}
      .recon-src{font-size:11.5px;color:var(--text-muted,#8B97A8);margin-top:5px;font-style:italic;}
      .recon-conflict{border:1px solid rgba(176,71,46,.4);border-radius:11px;padding:13px 15px;margin-bottom:10px;}
      .recon-conflict-subj{font-weight:600;color:var(--text-primary,#18283F);font-size:14px;}
      .recon-conflict-reason{font-size:12.5px;color:var(--text-secondary,#45566E);margin:4px 0 10px;}
      .recon-opts{display:flex;gap:10px;flex-wrap:wrap;}
      .recon-opt{flex:1;min-width:180px;border:1.5px solid var(--egg-border,#E2E6EC);border-radius:10px;padding:11px 13px;cursor:pointer;transition:all .14s;background:#fff;}
      .recon-opt:hover{border-color:var(--bronze,#9C7A3F);background:var(--egg-hover,#F1F4F8);}
      .recon-opt.sel{border-color:#18283F;background:rgba(24,40,63,.05);box-shadow:0 0 0 1px #18283F inset;}
      .recon-opt-date{font-weight:700;color:#18283F;font-size:15px;font-family:var(--font-display,'DM Serif Display');}
      .recon-opt-src{font-size:11.5px;color:var(--text-muted,#8B97A8);margin-top:3px;}
      .recon-added-row,.recon-plain-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--egg-border,#E2E6EC);font-size:13.5px;}
      .recon-added-row:last-child,.recon-plain-row:last-child{border-bottom:none;}
      .recon-added-subj{color:var(--text-primary,#18283F);font-weight:600;}
      .recon-added-meta{color:var(--text-muted,#8B97A8);font-size:12px;text-align:right;white-space:nowrap;}
      .recon-more-toggle{font-size:12.5px;font-weight:600;color:var(--text-secondary,#45566E);cursor:pointer;padding:6px 0;}
      .recon-more-toggle:hover{color:var(--accent,#18283F);}
      .recon-more{display:none;margin-top:8px;}
      .recon-more.open{display:block;}
      .recon-opt-static{cursor:default;border-color:var(--egg-border,#E2E6EC);}
      .recon-opt-static:hover{border-color:var(--egg-border,#E2E6EC);background:transparent;}
      .recon-opt-static.sel{border-color:var(--egg-border,#E2E6EC);}
      .recon-empty{font-size:13px;color:var(--text-muted,#8B97A8);font-style:italic;}
      .recon-foot{display:flex;justify-content:flex-end;gap:12px;padding:18px 26px;border-top:1px solid var(--egg-border,#E2E6EC);background:var(--egg-bg,#FAF9F6);}
      .recon-btn{padding:10px 20px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent;font-family:var(--font-sans);}
      .recon-btn-secondary{background:transparent;border-color:var(--egg-border,#E2E6EC);color:var(--text-secondary,#45566E);}
      .recon-btn-secondary:hover{background:var(--egg-hover,#F1F4F8);}
      .recon-btn-primary{background:var(--green-mid,#16243C);color:#fff;}
      .recon-btn-primary:hover{background:var(--accent,#18283F);}
      .recon-btn-primary:disabled{opacity:.55;cursor:default;}

/* ── was #alloc-styles (injected by JS) ── */
.alloc-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-start;justify-content:center;background:rgba(var(--ink-deep-rgb,14,24,40),0.55);backdrop-filter:blur(2px);padding:40px 20px;overflow:auto;}
.alloc-modal{width:100%;max-width:620px;background:var(--egg-card);border:1px solid var(--egg-border);border-radius:18px;padding:26px 26px 20px;box-shadow:0 24px 60px rgba(var(--ink-deep-rgb,14,24,40),0.34);animation:asfIn .28s cubic-bezier(.2,.7,.3,1);}
.alloc-eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px;}
.alloc-title{font-family:var(--font-display);font-size:24px;line-height:1.15;color:var(--text-primary);margin-bottom:6px;}
.alloc-sub{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--text-secondary);margin-bottom:18px;}
.alloc-sub b{color:var(--accent);}
.alloc-rows{display:flex;flex-direction:column;gap:14px;}
.alloc-row{border:1.5px solid var(--egg-border);border-radius:13px;padding:14px 15px;}
.alloc-row.done{border-color:rgba(36,53,88,0.28);background:var(--egg-bg);}
.alloc-row-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.alloc-row-chip{font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bronze);background:rgba(201,169,97,0.14);border-radius:20px;padding:2px 9px;}
.alloc-row-name{font-family:var(--font-sans);font-size:14px;font-weight:700;color:var(--text-primary);flex:1;min-width:0;}
.alloc-row-status{font-family:var(--font-body);font-size:12.5px;color:var(--text-muted);}
.alloc-loading{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:13px;color:var(--text-muted);padding:4px 0;}
.alloc-spin{width:14px;height:14px;border:2px solid var(--egg-border);border-top-color:var(--bronze);border-radius:50%;animation:as-spin .8s linear infinite;}
.alloc-pickrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;}
.alloc-pick-label{font-family:var(--font-sans);font-size:12px;color:var(--text-secondary);}
.alloc-select{font-family:var(--font-sans);font-size:12.5px;padding:7px 9px;border:1.5px solid var(--egg-border);border-radius:9px;color:var(--text-primary);}
.alloc-skip{background:none;border:none;font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.alloc-assigned{font-family:var(--font-sans);font-size:13px;font-weight:700;color:var(--green-mid);display:flex;align-items:center;gap:7px;}
.alloc-actions{display:flex;justify-content:flex-end;margin-top:20px;}
.alloc-done{background:var(--accent);color:#fff;border:none;border-radius:11px;padding:12px 28px;font-family:var(--font-sans);font-size:14px;font-weight:700;cursor:pointer;}
.alloc-done:hover{background:var(--green-dark);}

/* ── was #as-tb-styles (injected by JS) ── */
.as-tb-screen{position:fixed;inset:0;z-index:99990;background:var(--egg-bg);overflow:auto;}
.as-tb-wrap{max-width:1080px;margin:0 auto;padding:34px 28px 140px;}
.as-tb-eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px;}
.as-tb-title{font-family:var(--font-display);font-size:30px;line-height:1.12;color:var(--text-primary);margin-bottom:8px;}
.as-tb-title i{font-style:italic;font-weight:400;color:var(--accent);}
.as-tb-sub{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--text-secondary);margin-bottom:8px;max-width:680px;}
.as-tb-skiptop{position:absolute;top:24px;right:28px;background:none;border:none;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.as-tb-skiptop:hover{color:var(--bronze);}
.as-tb-groups{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px;}
@media(max-width:840px){.as-tb-groups{grid-template-columns:1fr;}}
.as-tb-group{min-width:0;}
.as-tb-grouphd{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--egg-border);}
.as-tb-loading{display:flex;align-items:center;gap:9px;font-family:var(--font-body);font-size:13px;color:var(--text-muted);padding:10px 2px;}
.as-tb-spin{width:14px;height:14px;border:2px solid var(--egg-border);border-top-color:var(--bronze);border-radius:50%;animation:as-spin .8s linear infinite;}
.as-tb-card{border:1.5px solid var(--egg-border);border-radius:13px;padding:13px 14px;margin-bottom:12px;background:var(--egg-card);transition:border-color .15s,box-shadow .15s;}
.as-tb-card.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--ink-rgb),0.10);}
.as-tb-card-hd{display:flex;align-items:center;gap:10px;}
.as-tb-av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:12px;font-weight:700;color:#fff;background:var(--green-mid);}
.as-tb-name{font-family:var(--font-sans);font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.2;}
.as-tb-role{font-family:var(--font-sans);font-size:11.5px;color:var(--text-muted);}
.as-tb-pickbtn{margin-left:auto;flex:none;background:var(--accent);color:#fff;border:none;border-radius:9px;padding:8px 14px;font-family:var(--font-sans);font-size:12.5px;font-weight:700;cursor:pointer;}
.as-tb-pickbtn.on{background:var(--egg-hover);color:var(--green-mid);border:1.5px solid var(--accent);padding:6.5px 12px;}
.as-tb-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.as-tb-chip{font-family:var(--font-sans);font-size:11px;font-weight:600;border-radius:20px;padding:3px 10px;background:var(--egg-hover);color:var(--text-secondary);border:1px solid var(--egg-border);}
.as-tb-chip.work{background:rgba(var(--gold-rgb),0.12);border-color:rgba(var(--gold-rgb),0.34);color:var(--bronze);}
.as-tb-chip.exp{background:rgba(var(--ink-rgb),0.07);border-color:rgba(var(--ink-rgb),0.18);color:var(--accent);}
.as-tb-chip.pa{background:rgba(var(--ink-rgb),0.06);color:var(--text-secondary);}
.as-tb-chip.muted{font-style:italic;color:var(--text-muted);}
.as-tb-more{font-family:var(--font-sans);font-size:11px;font-weight:700;color:var(--text-muted);align-self:center;}
.as-tb-expbtn{background:none;border:none;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--bronze);cursor:pointer;padding:9px 0 0;text-decoration:underline;text-underline-offset:2px;}
.as-tb-detail{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--egg-border);}
.as-tb-detail.open{display:block;}
.as-tb-drow{font-family:var(--font-body);font-size:12.5px;color:var(--text-secondary);margin-bottom:5px;}
.as-tb-drow b{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-right:6px;}
.as-tb-empty{font-family:var(--font-body);font-size:13px;color:var(--text-muted);padding:8px 2px;}
.as-tb-bar{position:fixed;left:0;right:0;bottom:0;z-index:99991;background:var(--egg-card);border-top:1px solid var(--egg-border);box-shadow:0 -8px 24px rgba(var(--ink-deep-rgb,14,24,40),0.10);}
.as-tb-bar-in{max-width:1080px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:16px;}
.as-tb-count{font-family:var(--font-sans);font-size:13px;color:var(--text-secondary);flex:1;min-width:0;}
.as-tb-count b{color:var(--accent);}
.as-tb-names{font-family:var(--font-body);font-size:12px;color:var(--text-muted);}
.as-tb-skip{background:none;border:none;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;}
.as-tb-build{background:var(--accent);color:#fff;border:none;border-radius:11px;padding:12px 26px;font-family:var(--font-sans);font-size:14px;font-weight:700;cursor:pointer;}
.as-tb-build:disabled{background:var(--egg-hover);color:var(--text-muted);cursor:default;}
.as-tb-build:hover:not(:disabled){background:var(--green-dark);}

/* ── was #ratio-del-ctrl-styles (injected by JS) ── */
.ratio-del-ctrl{display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;padding:0;background:transparent;border:none;border-radius:7px;
cursor:pointer;color:var(--text-muted);opacity:.5;line-height:0;flex-shrink:0;
transition:opacity .15s,color .15s,background .15s;}
.ratio-del-ctrl:hover{opacity:1;color:var(--danger);background:rgba(var(--danger-rgb),0.10);}
.ratio-del-ctrl svg{width:14px;height:14px;}
/* (the old .case-card absolute top-right placement was removed — on the
         docket rows the control sits inline in the actions cluster) */
.task-item .ratio-del-ctrl,.ta-task-row .ratio-del-ctrl{width:28px;height:28px;border:1.5px solid var(--egg-border);border-radius:50%;opacity:.65;}
.task-item .ratio-del-ctrl:hover,.ta-task-row .ratio-del-ctrl:hover{opacity:1;border-color:var(--danger);}
.task-item .ratio-del-ctrl svg,.ta-task-row .ratio-del-ctrl svg{width:13px;height:13px;}

/* ── was #stf-ov-styles (injected by JS) ── */
/* ── Editorial page header (the Directory .tm-hd family): bronze eyebrow +
         serif title on a bronze-tint baseline rule; capacity headline as the
         Spectral lead beneath. Warm, not gray. ── */
/* Header rhythm: the .stf-wrap column gap (20px) owns the seams — header block →
         lead line → panels. It was long documented here as "not in effect", which
         was never true: a stray comment terminator upstream was discarding the
         whole .stf-wrap rule. The explicit margins that compensated for it are
         gone; do not re-add them, or every seam doubles. */
.stf-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid rgba(var(--gold-rgb),.4);}
.stf-hd-eyebrow{font:600 12px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:#a8842f;}
.stf-title{margin-top:6px;}
.stf-ov-headline{font-family:var(--font-body);font-size:16.5px;line-height:1.45;color:var(--text-secondary);margin:0;}
.stf-ov-headline .accent{color:var(--bronze);font-style:italic;}
.stf-ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:880px){.stf-ov-grid{grid-template-columns:1fr;}}
.stf-ov-card{background:var(--egg-card);border:1px solid #e7ddc9;border-radius:var(--radius-lg);padding:var(--space-5);min-width:0;box-shadow:0 1px 2px rgba(var(--ink-rgb),.05), 0 14px 34px -18px rgba(var(--ink-rgb),.18);}
.stf-ov-eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a8842f;margin-bottom:3px;}
.stf-ov-q{font-family:var(--font-body);font-size:12.5px;color:var(--text-secondary);margin-bottom:14px;}
/* ── HEAT CELLS — editorial urgency WASHES (the deadline-chip family), not
         loud solid fills: soft tinted card + 3px band spine + deep matching text.
         available = soft green (the availability-chip family) · light = slate ·
         moderate = amber wash · heavy = red wash. Coverage reuses them flipped. ── */
.stf-hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;}
.stf-hm-cell{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:7px;min-height:82px;padding:11px 13px 11px 16px;border:1px solid #ece4d4;border-left-width:3px;border-radius:var(--radius-md);cursor:pointer;text-align:left;width:100%;font-family:var(--font-sans);background:var(--egg-card);box-shadow:0 1px 2px rgba(var(--ink-rgb),.05);transition:box-shadow .12s,border-color .12s;}
.stf-hm-cell:hover{box-shadow:0 4px 14px rgba(var(--ink-rgb),.12);}
.stf-hm-name{font-size:13.5px;font-weight:700;line-height:1.22;letter-spacing:-0.1px;color:var(--text-primary);}
.stf-hm-load{font-size:11.5px;font-weight:600;}
.stf-hm-cell.idle{background:#f1f6f2;border-color:#c4d6c7;border-left-color:#3d6b5b;}
.stf-hm-cell.idle .stf-hm-load{color:#3d6b5b;}
.stf-hm-cell.light{background:#eef1f5;border-color:#d9dfe8;border-left-color:#46566E;}
.stf-hm-cell.light .stf-hm-load{color:#46566E;}
.stf-hm-cell.moderate{background:rgba(201,137,59,.12);border-color:#e6d29a;border-left-color:#A06A20;}
.stf-hm-cell.moderate .stf-hm-load{color:#A06A20;}
.stf-hm-cell.heavy{background:#f6e6df;border-color:rgba(var(--danger-rgb),.28);border-left-color:#9a3b22;}
.stf-hm-cell.heavy .stf-hm-load{color:#9a3b22;}
.stf-hm-legend{display:flex;flex-wrap:wrap;gap:13px;margin-top:14px;font-family:var(--font-sans);font-size:11px;color:var(--text-secondary);}
.stf-hm-legend span{display:inline-flex;align-items:center;gap:6px;}
.stf-hm-sw{width:12px;height:12px;border-radius:4px;display:inline-block;border:1px solid #ece4d4;}
.stf-hm-sw.idle{background:#f1f6f2;border-color:#c4d6c7;}
.stf-hm-sw.light{background:#eef1f5;border-color:#d9dfe8;}
.stf-hm-sw.moderate{background:rgba(201,137,59,.18);border-color:#e6d29a;}
.stf-hm-sw.heavy{background:#f6e6df;border-color:rgba(var(--danger-rgb),.28);}
/* matter cell foot: quiet bronze Staff + opt-in Suggest (never auto-fires) */
.stf-hm-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.stf-hm-act{font-family:var(--font-sans);font-size:11px;font-weight:700;color:var(--bronze);background:rgba(var(--gold-rgb),.10);border:1px solid rgba(var(--gold-rgb),.4);border-radius:7px;padding:4px 10px;cursor:pointer;transition:background .13s;}
.stf-hm-act:hover{background:rgba(var(--gold-rgb),.2);}
.stf-hm-act.ghost{background:none;border-color:transparent;color:#a8842f;}
.stf-hm-act.ghost:hover{background:rgba(var(--gold-rgb),.10);}
/* Ratio's wall-aware suggestion chip (from /route/pileup) — narrative only */
.stf-sug{grid-column:1/-1;display:flex;align-items:center;gap:10px;border:1px solid #c4d6c7;border-left:3px solid #3d6b5b;border-radius:var(--radius-md);background:linear-gradient(180deg,#f7faf8,#fff);padding:10px 14px;}
.stf-sug-eyebrow{font-family:var(--font-sans);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d6b5b;flex:none;}
.stf-sug-body{flex:1;min-width:0;font-family:var(--font-body);font-size:13px;color:var(--text-secondary);}
.stf-sug-body b{font-family:var(--font-sans);font-size:12.5px;font-weight:700;color:var(--text-primary);}
.stf-sug-none{grid-column:1/-1;font-family:var(--font-body);font-style:italic;font-size:12.5px;color:var(--text-muted);padding:6px 2px;}

/* ── was #ratio-assign-styles (injected by JS) ── */
.ratio-assign-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--bronze);background:rgba(var(--gold-rgb),0.12);border:1px solid rgba(var(--gold-rgb),0.42);border-radius:var(--radius-sm);padding:5px 11px;cursor:pointer;transition:background .15s,border-color .15s;line-height:1;white-space:nowrap;}
.ratio-assign-btn svg{width:14px;height:14px;flex:none;}
.ratio-assign-btn:hover{background:rgba(var(--gold-rgb),0.20);border-color:var(--bronze);}
.ratio-assign-btn:active{transform:scale(.97);}
/* ══ ASSIGN MODAL v2 (#atm2) — roomy, three-scope, opt-in recommendation ══ */
#atm-overlay .atm-modal, #mt-overlay .mt-modal.atm2, #wt-overlay .mt-modal.atm2{width:540px;max-width:calc(100vw - 40px);padding:0;gap:0;flex:none;display:flex;flex-direction:column;max-height:86vh;overflow:hidden;}
.atm2{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;}
.atm2 .a2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid #ece4d4;flex:none;}
.atm2 .a2-eyebrow{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);}
.atm2 .a2-title{font-size:23px;line-height:1.2;color:var(--text-primary);margin-top:7px;}
/* serif via the curated list */
.atm2 .a2-title i{font-style:italic;color:var(--accent);}
.atm2 .a2-sub{font-family:var(--font-body);font-size:13px;color:var(--text-secondary);margin-top:6px;}
.atm2 .a2-close{width:32px;height:32px;flex:none;border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:19px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:.13s;}
.atm2 .a2-close:hover{background:var(--egg-hover);color:var(--text-primary);}
.atm2 .a2-body{padding:var(--space-4) var(--space-5) var(--space-5);overflow-y:auto;flex:1 1 auto;min-height:0;}
.atm2 .a2-rec-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:13.5px;font-weight:700;color:var(--bronze);background:rgba(var(--gold-rgb),0.10);border:1px solid rgba(var(--gold-rgb),0.42);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);cursor:pointer;transition:.14s;box-shadow:0 1px 3px rgba(var(--ink-rgb),.05);}
.atm2 .a2-rec-btn:hover{border-color:var(--bronze);box-shadow:0 3px 10px rgba(var(--gold-rgb),.18);}
.atm2 .a2-rec-btn svg{width:16px;height:16px;flex:none;}
.atm2 .a2-rec-slot{margin-top:14px;}
/* FIX 4: engaging in-place loader — spinner + cycling status line + an
         indeterminate bar + pulsing teammate dots (green palette). NOT a
         full-screen block; the team list below stays usable. */
.atm2 .a2-load{border:1px solid #c4d6c7;border-radius:12px;padding:16px 18px;background:linear-gradient(180deg,#f7faf8,#fff);}
.atm2 .a2-load-top{display:flex;align-items:center;gap:11px;}
.atm2 .a2-load-spin{width:18px;height:18px;flex:none;border:2.5px solid #d9e5dc;border-top-color:#3d6b5b;border-radius:50%;animation:a2spin .8s linear infinite;}
@keyframes a2spin{to{transform:rotate(360deg);}}
.atm2 .a2-load-msg{font-family:var(--font-body);font-style:italic;font-size:13px;color:#3d6b5b;transition:opacity .3s;}
.atm2 .a2-load-bar{position:relative;height:4px;border-radius:3px;background:#e2ece4;overflow:hidden;margin-top:13px;}
.atm2 .a2-load-bar::before{content:"";position:absolute;top:0;left:0;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,#3d6b5b,#6fae8f);animation:a2bar 1.3s ease-in-out infinite;}
@keyframes a2bar{0%{left:-40%;}100%{left:100%;}}
.atm2 .a2-load-dots{display:flex;gap:7px;margin-top:13px;}
.atm2 .a2-load-dot{width:9px;height:9px;border-radius:50%;background:#3d6b5b;opacity:.3;animation:a2pulse 1.1s ease-in-out infinite;}
.atm2 .a2-load-dot:nth-child(2){animation-delay:.15s;}
.atm2 .a2-load-dot:nth-child(3){animation-delay:.3s;}
.atm2 .a2-load-dot:nth-child(4){animation-delay:.45s;}
.atm2 .a2-load-dot:nth-child(5){animation-delay:.6s;}
@keyframes a2pulse{0%,100%{opacity:.25;transform:scale(.85);}50%{opacity:1;transform:scale(1);}}
.atm2 .a2-cards{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.atm2 .a2-sug{border:1px solid var(--egg-border);border-left:4px solid #3d6b5b;border-radius:12px;padding:15px 16px;background:linear-gradient(180deg,#f7faf8,#fff);}
.atm2 .a2-sug-eyebrow{font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3d6b5b;}
.atm2 .a2-sug-row{display:flex;align-items:center;gap:12px;margin-top:10px;}
.atm2 .a2-sug-info{flex:1;min-width:0;}
.atm2 .a2-sug-name{font-family:var(--font-sans);font-size:15px;font-weight:700;color:var(--text-primary);}
.atm2 .a2-sug-role{font-family:var(--font-sans);font-size:11.5px;color:var(--text-muted);margin-top:1px;}
.atm2 .a2-express{flex:none;font-family:var(--font-sans);font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--bronze),#b0863f);border:none;border-radius:9px;padding:8px 15px;cursor:pointer;transition:filter .14s;white-space:nowrap;}
.atm2 .a2-express:hover{filter:brightness(1.07);}
.atm2 .a2-express--done{background:rgba(var(--gold-rgb),.92);cursor:default;}
.atm2 .a2-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.atm2 .a2-pill{font-family:var(--font-sans);font-size:10.5px;font-weight:600;color:var(--text-secondary);background:var(--egg-bg);border:1px solid var(--egg-border);border-radius:999px;padding:4px 10px;}
.atm2 .a2-pill.avail{color:#3d6b5b;border-color:#c4d6c7;background:#f1f6f2;display:inline-flex;align-items:center;gap:6px;}
.atm2 .a2-pill.avail .dot{width:6px;height:6px;border-radius:50%;background:#3d6b5b;flex:none;}
.atm2 .a2-why{margin-top:12px;}
.atm2 .a2-why-btn{font-family:var(--font-sans);font-size:11.5px;font-weight:600;color:#3d6b5b;background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px;}
.atm2 .a2-why-car{display:inline-block;transition:transform .15s;font-size:10px;}
.atm2 .a2-why.open .a2-why-car{transform:rotate(90deg);}
.atm2 .a2-why-body{display:none;margin-top:8px;font-family:var(--font-body);font-size:12.5px;line-height:1.5;color:var(--text-secondary);}
.atm2 .a2-why.open .a2-why-body{display:block;}
.atm2 .a2-team-label{font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin:var(--space-5) 0 var(--space-3);}
.atm2 .a2-search{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:13px;padding:9px 12px;border:1px solid var(--egg-border);border-radius:var(--radius-sm);background:var(--egg-bg);color:var(--text-primary);margin-bottom:var(--space-2);}
.atm2 .a2-search:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.14);}
.atm2 .a2-list{display:flex;flex-direction:column;gap:var(--space-2);}
.atm2 .a2-row{display:flex;align-items:center;gap:13px;padding:var(--space-3) var(--space-4);border:1px solid var(--egg-border);border-radius:var(--radius-md);cursor:pointer;transition:.13s;background:var(--egg-card);}
.atm2 .a2-row:hover{border-color:rgba(var(--gold-rgb),.5);background:var(--egg-hover);}
.atm2 .a2-row.sel{border-color:var(--bronze);box-shadow:0 0 0 2px rgba(var(--gold-rgb),.25);background:rgba(var(--gold-rgb),.06);}
.atm2 .a2-av{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:13px;font-weight:700;color:#fff;background:var(--green-mid);}
.atm2 .a2-row-info{flex:1;min-width:0;}
.atm2 .a2-row-name{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--text-primary);}
.atm2 .a2-row-role{font-family:var(--font-sans);font-size:11.5px;color:var(--text-muted);margin-top:1px;}
/* availability badge — sizes to its (now-brief) content; never clips */
.atm2 .a2-badge{flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:11px;font-weight:600;border-radius:999px;padding:5px 11px;border:1px solid var(--egg-border);color:var(--text-muted);background:var(--egg-bg);white-space:nowrap;}
.atm2 .a2-badge .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text-muted);}
.atm2 .a2-badge.green{color:#2f6b4f;border-color:#c4d6c7;background:#f1f6f2;}
.atm2 .a2-badge.green .dot{background:#3d6b5b;}
.atm2 .a2-badge.amber{color:#9a6a1f;border-color:#e6d29a;background:#fdf6e6;}
.atm2 .a2-badge.amber .dot{background:#C9A961;}
.atm2 .a2-badge-txt{white-space:nowrap;}
/* per-row action button (assign / remove in place; toggles, modal stays open) */
.atm2 .a2-row-btn{flex:none;font-family:var(--font-sans);font-size:12px;font-weight:700;color:var(--bronze);background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.42);border-radius:var(--radius-sm);padding:6px 13px;cursor:pointer;transition:.13s;white-space:nowrap;}
.atm2 .a2-row-btn:hover{background:rgba(var(--gold-rgb),.22);border-color:var(--bronze);}
.atm2 .a2-row-btn.done{color:#fff;background:rgba(var(--gold-rgb),.92);border-color:rgba(var(--gold-rgb),.92);}
.atm2 .a2-row-btn.done::before{content:"\2713";font-weight:700;margin-right:5px;}
.atm2 .a2-row-btn:disabled{opacity:.55;cursor:default;}
.atm2 .a2-row-btn.danger{color:var(--danger);background:rgba(var(--danger-rgb),.08);border-color:rgba(var(--danger-rgb),.3);}
.atm2 .a2-row-btn.danger:hover{background:rgba(var(--danger-rgb),.16);border-color:var(--danger);}
.atm2 .a2-manage-link{background:none;border:none;padding:0;font-family:var(--font-sans);font-size:12.5px;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.atm2 .a2-manage-link:hover{color:var(--bronze);}
.atm2 .a2-row-lock{flex:none;font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--text-muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.atm2 .a2-row-sel{flex:none;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--text-secondary);border:1px solid var(--egg-border);border-radius:8px;padding:5px 8px;background:var(--egg-bg);cursor:pointer;}
.atm2 .a2-row-sel:focus{outline:none;border-color:var(--bronze);}
.atm2 .a2-row-end{flex:none;display:flex;align-items:center;gap:9px;}
.atm2 .a2-empty{font-family:var(--font-body);font-size:13px;color:var(--text-muted);padding:16px 4px;text-align:center;}
/* footer note (FIX 1: footer is now a quiet note + Done) */
.atm2 .a2-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:var(--space-4) var(--space-5);border-top:1px solid #ece4d4;flex:none;}
.atm2 .a2-cancel{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-secondary);background:none;border:none;cursor:pointer;padding:9px 14px;border-radius:var(--radius-sm);}
.atm2 .a2-cancel:hover{background:var(--egg-hover);}
.atm2 .a2-confirm{font-family:var(--font-sans);font-size:13px;font-weight:700;color:#fff;background:var(--accent);border:none;border-radius:var(--radius-sm);padding:10px 20px;cursor:pointer;transition:.14s;}
.atm2 .a2-confirm:disabled{opacity:.4;cursor:not-allowed;}
.atm2 .a2-confirm:not(:disabled):hover{filter:brightness(1.12);}
/* case-pill: prominent Assign at the hero top-right (clears the delete trash) */
/* FIX 5: case-scope Assign on the workflow-landing case band (cream-translucent on navy) */
.wfl-gh-assign{position:relative;z-index:2;flex:none;}
.wfl-group-header .ratio-assign-btn{background:rgba(245,242,234,.12);border:1px solid rgba(245,242,234,.28);color:#F5F2EA;}
.wfl-group-header .ratio-assign-btn:hover{background:rgba(245,242,234,.2);border-color:rgba(245,242,234,.45);}

/* ── was #cap-styles (injected by JS) ── */
.cap-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
background:rgba(var(--ink-deep-rgb,14,24,40),0.55);backdrop-filter:blur(2px);padding:20px;}
.cap-modal{width:100%;max-width:440px;background:var(--egg-card);border:1px solid var(--egg-border);
border-radius:var(--radius-lg);padding:var(--space-5) var(--space-5) var(--space-4);box-shadow:0 24px 60px rgba(var(--ink-deep-rgb,14,24,40),0.34);
animation:capIn .28s cubic-bezier(.2,.7,.3,1);}
@keyframes capIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.cap-eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px;}
.cap-title{font-family:var(--font-display);font-size:24px;line-height:1.15;color:var(--text-primary);margin-bottom:6px;}
.cap-sub{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--text-secondary);margin-bottom:18px;}
.cap-q{margin-bottom:16px;}
.cap-q-label{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:9px;}
.cap-opts{display:flex;gap:8px;flex-wrap:wrap;}
.cap-opt{flex:1;min-width:92px;padding:11px 12px;border:1px solid var(--egg-border);background:var(--egg-bg);
border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-secondary);
cursor:pointer;transition:all .15s;text-align:center;}
.cap-opt:hover{border-color:var(--bronze);color:var(--text-primary);}
.cap-opt.sel{background:var(--accent);border-color:var(--accent);color:var(--logo-cream,#F5F2EA);box-shadow:0 4px 14px rgba(var(--ink-rgb),0.22);}
.cap-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;}
.cap-later{background:none;border:none;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;padding:8px 4px;}
.cap-later:hover{color:var(--text-secondary);text-decoration:underline;}
.cap-submit{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:12px 26px;
font-family:var(--font-sans);font-size:13.5px;font-weight:700;cursor:pointer;transition:opacity .15s,background .15s;}
.cap-submit:hover:not(:disabled){background:var(--green-dark);}
.cap-submit:disabled{background:var(--egg-hover);color:var(--text-muted);cursor:default;}
/* Home Action-Items card — an editorial list row (matches .home-act-item) */
.cap-action-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-1);margin-bottom:var(--space-3);cursor:pointer;
background:none;border:none;border-bottom:1px solid var(--egg-border);
border-radius:0;transition:background-color .15s;}
.cap-action-card:hover{background:var(--egg-hover);}
.cap-action-ico{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;
background:rgba(var(--gold-rgb),0.14);color:var(--bronze);}
.cap-action-tx{flex:1;min-width:0;}
.cap-action-title{font-family:var(--font-sans);font-size:13.5px;font-weight:600;color:var(--text-primary);}
.cap-action-sub{font-family:var(--font-body);font-size:12.5px;font-style:italic;color:var(--text-muted);margin-top:1px;}
.cap-action-cta{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze);flex-shrink:0;}
/* Partner-view capacity chips (teammate profile) */
.tmd-cap-latest{font-family:var(--font-body);color:var(--text-primary);}
.tmd-cap-weeks{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.tmd-cap-chip{font-family:var(--font-sans);font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:20px;
background:var(--egg-hover);color:var(--text-secondary);border:1px solid var(--egg-border);}

/* ══ PERSONAL CALENDAR ══════════════════════════════════════════════════════
   A private time block (source='personal'). Only ever visible to its owner —
   the server's read is owner-only and that is a standing constraint, so nothing
   here is a visibility control, only a treatment.

   RECESSIVE, and distinct from the Outlook treatment above. It is not an
   obligation anyone imposed, so it must not compete with a court date; but it IS
   the viewer's own deliberate entry, so it reads more solid than the italic
   read-only Outlook row: upright weight, a slate spine, a soft slate wash.
   Slate rather than bronze or red — bronze belongs to Ratio's own suggestions
   and the urgency family belongs to the docket. */
.cal-event-personal {
  font-weight: 600;
  color: #46566E;
  background: rgba(126,140,160,.10);
  border-left: 3px solid #7E8CA0;
  border-radius: 0 4px 4px 0;
  display: flex; align-items: center; gap: 5px;
}
.cal-event-personal .cal-pers-dot {
  flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: #7E8CA0;
}
/* The SPAN is the content of a personal event ("Thursday 2-5 is gone"), so the
   time is shown alongside the name rather than hidden in a tooltip — but quieter
   than the name, which is what a person scans for. */
.cal-event-personal .cal-pers-time {
  font-weight: 700;
  font-size: 10.5px;
  color: #6B7A92;
  flex-shrink: 0;
}
/* min-width: 0 is the load-bearing half: a flex item defaults to min-width:auto
   and so refuses to shrink below its text, which is why this label used to be
   chopped mid-word by the pill's overflow while every sibling pill ellipsized. */
.cal-event-personal .cal-pers-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-grid.cal-week .cal-event-personal .cal-pers-name { white-space: normal; }
/* In WEEK mode cells are tall and text wraps, so let the span sit above the name
   rather than forcing one ellipsized line. */
.cal-grid.cal-week .cal-event-personal { flex-wrap: wrap; white-space: normal; }

/* "+ Event" in the card header — the create affordance. Mirrors .cal-sync-btn's
   quiet control family exactly; it is deliberately NOT a primary button, because
   the calendar's main job is reading the docket, not data entry. */
.cal-add-event-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 13px;
  border-radius: 9px;
  border: 1.5px solid var(--egg-border);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  transition: background 0.13s, border-color 0.13s, color 0.13s;
  flex-shrink: 0;
}
.cal-add-event-btn:hover { background: var(--egg-hover); border-color: var(--green-mid); color: var(--green-dark); }
.cal-add-event-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── The personal-event editor (#cev-overlay) ────────────────────────────────
   On the shared .rmod standard, so the card chrome, head, foot and buttons all
   come from there; only the field family is local. Warm token surfaces with the
   bronze focus ring, per the .rmod field spec — and via an EXPLICIT class list,
   never a bare input/label selector, so nothing else in the modal is caught. */
.cev-overlay {
  position: fixed; inset: 0;
  background: rgba(var(--ink-deep-rgb),0.42);
  display: none;
  align-items: flex-start; justify-content: center;
  z-index: 2000; overflow-y: auto;
  padding: 56px 16px;
}
.cev-overlay.open { display: flex; }
.cev-modal {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column;
  padding: 0; gap: 0;
}
.cev-label {
  display: block;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
  margin: 14px 0 6px;
}
.cev-label:first-child { margin-top: 0; }
.cev-input, .cev-textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-sans); font-size: 13.5px;
  color: var(--text-primary);
  background: #fffdf9;
  border: 1px solid #e7ddc9;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.13s, box-shadow 0.13s;
}
.cev-textarea {
  font-family: var(--font-body);
  min-height: 66px; resize: vertical;
}
.cev-input:focus, .cev-textarea:focus {
  border-color: var(--bronze-bright);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.16);
}
/* Start/End side by side — a span is read as one thing, so it is entered as one. */
.cev-row { display: flex; gap: var(--space-3); }
.cev-col { flex: 1 1 0; min-width: 0; }
/* <input type="time"> is a real text field whose only browser chrome is a small
   clock glyph — unlike type="date", whose whole dropdown is unreachable chrome.
   That is why times are native here and the date is not. */
.cev-time { font-variant-numeric: tabular-nums; }
.cev-modal .cev-dp { width: 100%; }
/* The privacy statement is part of the form, not a tooltip: the user is being
   asked to put something personal into a firm system, and the answer to "who
   sees this" belongs where they are typing it. */
.cev-private {
  display: flex; align-items: center; gap: 7px;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid #ece4d4;
  font-family: var(--font-body); font-size: 12.5px; font-style: italic;
  color: var(--text-secondary);
}
.cev-private svg { width: 13px; height: 13px; color: #7E8CA0; flex-shrink: 0; }

/* The Repeats / Ends selects. Same warm control family as .cev-input, plus a
   bronze chevron, since a bare <select> inherits OS chrome that does not match
   anything else in the modal. */
.cev-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239C7A3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
/* "Part of a repeating event" — states which occurrence is open, so a save or a
   delete is never ambiguous about what it will touch. */
.cev-series {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--space-3);
  padding: 9px 12px;
  border: 1px solid #e7ddc9;
  border-radius: var(--radius-sm);
  background: rgba(var(--gold-rgb), .07);
  font: 400 12.5px/1.45 var(--font-body);
  color: var(--text-secondary);
}
.cev-series svg { width: 14px; height: 14px; flex: none; color: var(--bronze); }
/* The repeat marker on a pill: this date is one of a series. */
.cal-pers-rep { opacity: .75; margin-left: 3px; font-size: 10px; }