/* ==========================================================================
   Advisy CoPilot Redesign - Component styles
   Built entirely on tokens.css. All classes are prefixed `rd-` to stay isolated
   from the live app's styles. Visual direction: compact, calm, editorial,
   credible, strong hierarchy, dense-not-cluttered, readable (10-ui-spec §1).
   ========================================================================== */

/* ----------------------------- Base ----------------------------- */
.rd-root {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--canvas, var(--bg));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rd-root *,
.rd-root *::before,
.rd-root *::after { box-sizing: border-box; }

/* Draft type voice: bold ink headings with tight tracking; grey 400 body explains. */
.rd-root h1, .rd-root h2, .rd-root h3, .rd-root h4 {
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-weight: var(--fw-bold);
}
.rd-root p { margin: 0; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Visible, consistent focus for every interactive control. */
.rd-root :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* ----------------------------- Layout ----------------------------- */
.rd-app-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}
.rd-skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 80;
  transform: translateY(calc(-100% - var(--sp-5)));
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--text-strong);
  color: var(--surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease);
}
.rd-skip-link:focus { transform: translateY(0); }
.rd-page {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
}
.rd-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.rd-page-title { font-size: var(--fs-xl); }
.rd-page-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-1); }

.rd-grid { display: grid; gap: var(--sp-4); }
.rd-grid-2 { grid-template-columns: 1fr 1fr; }
.rd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rd-span-2 { grid-column: span 2; }

.rd-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.rd-row { display: flex; align-items: center; gap: var(--sp-2); }
.rd-row-wrap { flex-wrap: wrap; }
.rd-spacer { flex: 1 1 auto; }

/* ----------------------------- Shell (nav) ----------------------------- */
.rd-sidebar {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100dvh;
  padding: var(--sp-4) var(--sp-3);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  border-right: 1px solid var(--line);
}
.rd-sidebar-head { display: flex; align-items: center; min-height: 40px; padding: 0 var(--sp-2); }
.rd-brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); color: var(--text-strong); }
.rd-brand-mark {
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--brand-btn);
  display: grid; place-items: center; color: var(--on-brand); font-weight: 700; font-size: 13px;
}
.rd-nav-tree {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: var(--sp-5) 0 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.rd-sidebar-newcall { width: 100%; justify-content: flex-start; margin-top: var(--sp-4); }
.rd-newcall { position: relative; }
.rd-newcall-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 45; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2, 0 12px 32px rgba(16,32,64,.18)); display: flex; flex-direction: column; gap: 2px; }
.rd-newcall-menu[hidden] { display: none; } /* explicit display beats the UA [hidden] rule otherwise */
.rd-newcall-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.rd-newcall-item:hover, .rd-newcall-item:focus-visible { background: var(--surface-2); }
.rd-newcall-item-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.rd-newcall-item-sub { font-size: var(--fs-xs); color: var(--muted); }
.rd-import-launchers { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.rd-make-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.rd-make-sub { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.rd-quo-btn { display: inline-flex; align-items: center; gap: 7px; }
.rd-quo-logo { height: 14px; width: auto; display: block; }

/* Batch 2 (10:23 ref): strengths / objections rail rows + member-page header + chart controls. */
.rd-strength-list { display: flex; flex-direction: column; }
.rd-strength-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); }
.rd-strength-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rd-strength-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rd-strength-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.rd-strength-meta { font-size: var(--fs-xs); color: var(--muted); }
.rd-chart-controls { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rd-member-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.rd-member-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rd-member-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-member-role { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.rd-member-actions { display: flex; gap: var(--sp-2); margin-left: auto; flex-wrap: wrap; }
.rd-nav-group { border-radius: var(--r-md); }
.rd-nav-group-toggle {
  appearance: none;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.rd-nav-group-toggle:hover { background: var(--surface-2); color: var(--text); }
.rd-nav-group-toggle:active { transform: translateY(1px); }
.rd-nav-group-active > .rd-nav-group-toggle { color: var(--text-strong); }
.rd-nav-group-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-nav-group-toggle > svg:last-child { transition: transform var(--dur-med) var(--ease); }
.rd-nav-group-toggle[aria-expanded='true'] > svg:last-child { transform: rotate(180deg); }
.rd-nav-direct {
  grid-template-columns: 20px minmax(0, 1fr);
  text-decoration: none;
}
.rd-nav-direct[aria-current='page'], .rd-nav-group-toggle[aria-current='page'] { background: var(--brand-tint); color: var(--brand-strong); }
.rd-nav-sublist { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 var(--sp-2) 36px; }
.rd-nav-sublist[hidden] { display: none; }
.rd-nav-child {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 5px var(--sp-3);
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.rd-nav-child:hover { color: var(--text); background: var(--surface-2); }
.rd-nav-child[aria-current='page'] {
  border-left: 2px solid var(--brand);
  background: var(--brand-tint);
  color: var(--brand-strong);
}
/* Header row for a routed nav group that ALSO has children (navGroup() branch 3): the direct
   link and the chevron toggle both inherit width:100% from .rd-nav-group-toggle, so without this
   wrapper they'd stack as two block rows instead of sitting side by side. */
.rd-nav-group-header { display: flex; align-items: center; gap: 2px; }
.rd-nav-group-header .rd-nav-direct { flex: 1 1 auto; min-width: 0; }
.rd-nav-group-chevron {
  appearance: none;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  min-height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rd-nav-group-chevron:hover { background: var(--surface-2); color: var(--text); }
.rd-nav-group-chevron > svg { transition: transform var(--dur-med) var(--ease); }
.rd-nav-group-chevron[aria-expanded='true'] > svg { transform: rotate(180deg); }
.rd-sidebar-footer { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.rd-sidebar-primary { width: 100%; }
.rd-sidebar-utility {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.rd-sidebar-utility:hover { background: var(--surface-2); color: var(--text); }
.rd-sidebar-close, .rd-mobilebar, .rd-drawer-overlay { display: none; }

/* Referral button + popout, and free-uses line, in the sidebar footer */
.rd-referral { position: relative; }
.rd-referral-popout { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 40; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2, 0 12px 32px rgba(16,32,64,.18)); }
.rd-referral-title { font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-sm); }
.rd-referral-copy { margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.rd-referral-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.rd-referral-link { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); }

/* One continuous rail surface (260727-ilo): one quota-component shape for every tier, and the
   full-width avatar+name account row - replacing the old bordered-card / floating-pill treatment.
   Since ACR-470 the divider sits between Settings and the quota+utility+account cluster, not
   between the utility rows and quota. Nothing here is keyed to child position, so the footer
   order can change without touching this file. */
.rd-sidebar-divider { border: 0; border-top: 1px solid var(--line); margin: var(--sp-2) 0; }
.rd-sidebar-quota {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.rd-sidebar-quota-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-sidebar-quota-cta {
  border: 0;
  background: transparent;
  color: var(--brand-strong);
  font: inherit;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.rd-sidebar-quota-cta:hover { text-decoration: underline; }
.rd-account-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rd-account-trigger:hover { background: var(--surface-2); }
.rd-account-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-strong);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  overflow: hidden;
}
.rd-account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-account-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.rd-iconbtn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: transparent; color: var(--muted);
  cursor: pointer; position: relative;
}
.rd-iconbtn:hover { background: var(--surface-2); color: var(--text); }
.rd-badge-dot {
  position: absolute; top: 7px; right: 8px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--bad-solid); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.rd-mobilebrand { padding-left: var(--sp-1); }
.rd-iconbtn.rd-sidebar-close { display: none; }

/* ----------------------------- Buttons ----------------------------- */
/* Draft buttons: 12px radius, bold, primary carries a soft blue glow and lifts 1px. */
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 16px; border-radius: var(--r-md);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.rd-btn:hover:not(:disabled) { transform: translateY(-1px); }
.rd-btn:active:not(:disabled) { transform: translateY(0); }
.rd-btn-primary { background: var(--brand-btn); color: var(--on-brand); box-shadow: var(--shadow-btn); }
.rd-btn-primary:hover { background: color-mix(in srgb, var(--brand-btn) 88%, black); box-shadow: var(--shadow-btn-hover); }
.rd-btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line); }
.rd-btn-secondary:hover { background: color-mix(in srgb, var(--surface) 80%, var(--surface-2)); border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); }
.rd-btn-quiet { background: transparent; color: var(--brand-strong); }
.rd-btn-quiet:hover { background: var(--surface-2); }
.rd-btn-danger { background: var(--bad-solid); color: #fff; }
.rd-btn-danger:hover { background: color-mix(in srgb, var(--bad-solid) 88%, black); }
.rd-btn-sm { min-height: 44px; padding: 0 12px; font-size: var(--fs-xs); }
.rd-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rd-btn[hidden] { display: none; }

/* ----------------------------- Form controls ----------------------------- */
.rd-input, .rd-file {
  width: 100%; min-height: 44px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.rd-input::placeholder { color: var(--faint); }
.rd-input:hover, .rd-file:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.rd-textarea { min-height: 112px; resize: vertical; line-height: var(--lh-normal); }
.rd-file { padding: 7px; color: var(--muted); }
.rd-file::file-selector-button { margin-right: var(--sp-3); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; }

/* ----------------------------- Context hub -----------------------------
   ACR-454 fix wave. The hub shipped every rd-context-* class name with ZERO
   rules behind it, so all 18 controls rendered as raw UA defaults. tokens.css
   declares color-scheme:dark, which then auto-darkened those unstyled controls
   to a neutral warm grey sitting at 1.52:1 against the navy card; in light they
   were pure white on a pure-white card, marked only by the UA's hard hairline.
   Every control below therefore carries an EXPLICIT background in both themes,
   so the UA never gets to pick one. The control recipe itself is the shipped
   .rd-input / .rd-textarea / .rd-btn one that the rest of the app already uses
   (contextHub.js opts each control into it by class); this block only adds the
   layout, the inset fill that separates a field from its card, and the
   label/hint hierarchy the form was missing. */
.rd-context-panel { display: flex; flex-direction: column; gap: var(--sp-4); }

/* THE CONSOLE (James Gray, approved 2026-08-07; mockup at .planning/acr-392-phase2/mockups/
   context-hub-console-document.html). Replaces the 2026-08-07-morning two-column grid: a 268px
   sticky rail (ring, scope toggle, category nav, reset) beside a pane that shows one category at
   a time. minmax(0,1fr) -- NOT bare 1fr -- and min-width:0 on both children: a bare 1fr track
   refuses to shrink below its content's min-content width, which is exactly how the mockup's
   phone view silently clipped (the console rendered wider than the frame under overflow:hidden). */
.rd-context-console { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.rd-context-rail, .rd-context-pane { min-width: 0; }

.rd-context-rail {
  position: sticky; top: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5);
}

/* The ring is pure CSS: conic-gradient driven by --ring-pct (set inline via cssText -- a style
   OBJECT assignment silently drops custom properties in real browsers). The inner disc is a
   ::before circle of the card's own surface, so no SVG and no second colour system. */
.rd-context-ringrow { display: flex; align-items: center; gap: var(--sp-4); }
.rd-context-ring {
  flex: none; position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--ring-pct, 0) * 1%), var(--surface-3) 0);
}
.rd-context-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.rd-context-ring-n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.rd-context-ringtxt { min-width: 0; }
.rd-context-ringtxt b { display: block; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); }
.rd-context-ringtxt span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.rd-context-ring-ai { color: var(--good-fg); }

.rd-context-scope { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--r-md); }
.rd-context-scope-btn {
  flex: 1; appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted);
  padding: 8px 0; border-radius: var(--r-sm);
}
.rd-context-scope-btn[aria-pressed='true'] { background: var(--surface); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* The category list is a <nav>, and the LEGACY app styles the bare `nav` ELEMENT as its glass
   top navbar (app.html:273: glass background, 1px border, 18px radius, 30px drop shadow, 9-16px
   padding, max-width 1060, flex-row space-between). Inside the rail that leaked through as a
   second card wrapping the category rows -- the "squished" nested box James rejected on the
   2026-08-07 preview. Neutralise every one of those properties explicitly; the class must not
   depend on the legacy selector never changing. */
.rd-context-cats {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; margin: 0; max-width: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.rd-context-cat {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  text-align: left; width: 100%; padding: 10px var(--sp-3); border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 6px;
  transition: background var(--dur-fast) var(--ease);
}
.rd-context-cat:hover { background: var(--surface-2); }
.rd-context-cat[aria-current='true'] { background: var(--brand-tint); }
.rd-context-cat-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.rd-context-cat-name { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text); }
.rd-context-cat[aria-current='true'] .rd-context-cat-name { color: var(--brand-strong); font-weight: var(--fw-bold); }
.rd-context-cat-n { font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.rd-context-cat-bar { display: block; height: 3px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.rd-context-cat-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); }
.rd-context-cat[data-done='true'] .rd-context-cat-bar i { background: var(--good-solid); }

.rd-context-railfoot { padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }

.rd-context-pane { padding: 0; overflow: hidden; }
.rd-context-pane-head {
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.rd-context-pane-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; }
.rd-context-pane-blurb { margin-top: 3px; font-size: var(--fs-base); color: var(--muted); line-height: var(--lh-normal); max-width: 52ch; }
.rd-context-pane-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--neutral-bg); color: var(--neutral-fg); border: 1px solid var(--neutral-border);
}
.rd-context-pane-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--good-solid); }
.rd-context-pane-foot {
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.rd-context-pane .rd-context-panel { padding: var(--sp-5) var(--sp-6); }

/* Hairline field rows inside the pane -- the console's structure, not boxes-in-a-grid. */
.rd-context-field-list { padding: 0 var(--sp-6); }
.rd-context-field { padding: var(--sp-5) 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; align-items: stretch; }
.rd-context-field:first-child { border-top: 0; }

.rd-context-field-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.rd-context-field-labelrow .rd-context-field-label { min-width: 0; }
.rd-context-field-label { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); }
/* tabular-nums: without it the counter jitters on every keystroke. */
.rd-context-field-count { flex: none; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.rd-context-field-count[data-near='true'] { color: var(--warn-fg); }
.rd-context-field-count[data-full='true'] { color: var(--bad-fg); }
.rd-context-field-count[hidden] { display: none; }

.rd-context-field-hint { margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug); }
.rd-context-field-hint[hidden] { display: none; }

/* THE DOCUMENT BOX (variant D of the box-treatment board). No fill: the box is the same surface
   as the pane, defined by its rule alone -- the border resolves to #8C93A1 light / #636F83 dark,
   the measured 3.11:1 / 3.34:1 against the card (BOX-TREATMENT-SPEC-2026-08-07; the old
   fill-vs-card and border-vs-card sat at 1.08:1 and 1.27:1, and the boxes read as ghosts). The
   3px left edge turns brand only once the field HAS an answer, so progress reads straight down
   the margin. Reading size inside: 17px at 1.7 -- the transcript's own tokens. */
.rd-context-field-input {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--neutral-solid) 70%, var(--surface));
  border-left: 3px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md); line-height: var(--lh-reading);
  transition: border-color var(--dur-fast) var(--ease);
}
.rd-context-field-input::placeholder { color: var(--muted); }
.rd-context-field-input[data-filled='true'] { border-left-color: var(--brand); }
.rd-context-field-input:hover { border-color: var(--muted); }
.rd-context-field-input:hover[data-filled='true'] { border-left-color: var(--brand); }
.rd-context-field-input:focus {
  background: var(--surface);
  border-color: var(--brand); border-left-color: var(--brand);
}
/* Drop .rd-textarea's 112px floor inside the hub: it is what made `rows` a no-op for every one
   of the 11 textareas regardless of a 200 or 1200 character cap. With the floor gone, the `rows`
   attribute (3 for the 600-tier, 4 for the 1200-tier -- the console pane holds ~85 chars a line)
   is the sizing decision, set in contextHub.js from `field.max`. */
.rd-context-hub .rd-context-field-input.rd-textarea { min-height: 0; }
/* A rep's read-only Company field must stay legible, not UA-greyed. Chrome
   greys disabled control text through -webkit-text-fill-color, which `color`
   alone does not override. */
.rd-context-field-input:disabled {
  background: var(--surface-3); border-color: var(--line-soft);
  color: var(--text); -webkit-text-fill-color: var(--text);
  opacity: 1; cursor: default; resize: none;
}
/* One meta row under the box: provenance left, Clear + save-status right. */
.rd-context-field-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); min-height: 16px; }
.rd-context-field-meta-actions { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.rd-context-field-clear { flex: none; }
.rd-context-field-status { font-size: var(--fs-sm); }
.rd-context-field-status:empty { display: none; }
.rd-context-field-provenance { font-size: var(--fs-sm); margin: 0; }

.rd-context-header { margin-bottom: var(--sp-5); }
.rd-context-header .rd-welcome { margin-bottom: var(--sp-2); }
.rd-context-intro { max-width: 640px; font-size: var(--fs-base); color: var(--muted); line-height: var(--lh-normal); }
.rd-context-completion { font-size: var(--fs-base); color: var(--muted); }
/* The dashboard Context card's own children (repDashboard.js contextCompletionCard). These five
   classes shipped with zero rules -- the ACR-454 defect recurring on a sibling surface, missed
   because Test 33 only walked renderContextHub's tree (it now renders this card too). Same
   vocabulary as .rd-assign-*: semibold strong headline, muted metadata, spaced action row. */
.rd-context-completion-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rd-context-completion-headline { font-weight: var(--fw-semibold); color: var(--text-strong); }
.rd-context-completion-sub { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }
.rd-context-completion-secondary { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--faint); }
.rd-context-completion-action { margin-top: var(--sp-3); }
.rd-context-readonly-hint { font-size: var(--fs-base); color: var(--muted); }
.rd-context-autosave { font-size: var(--fs-sm); color: var(--muted); }

/* The destructive action gets a rule of its own separating it from the last
   card, and reads as secondary chrome rather than a second primary button. */
.rd-context-reset { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
/* Inside the rail foot the foot itself already draws the separator -- no double border. */
.rd-context-railfoot .rd-context-reset { margin-top: 0; padding-top: 0; border-top: 0; }
.rd-context-reset-status { font-size: var(--fs-sm); }
.rd-context-next { flex: none; }

/* Console responsive. The rail stacks above the pane on a narrow card; on a phone the category
   list becomes a horizontally scrolling strip of chips, which keeps progress visible without
   eating a screen. 16px inputs on the narrow tier -- iOS Safari auto-zooms on focus below 16px
   (app.html's viewport meta sets no maximum-scale). */
@media (max-width: 960px) {
  .rd-context-console { grid-template-columns: minmax(0, 1fr); }
  .rd-context-rail { position: static; }
}
@media (max-width: 640px) {
  .rd-context-rail { padding: var(--sp-4); }
  .rd-context-cats { flex-direction: row; overflow-x: auto; gap: var(--sp-2); padding-bottom: var(--sp-1); }
  .rd-context-cat { width: auto; min-width: 148px; flex: none; background: var(--surface-2); }
  .rd-context-field-list, .rd-context-pane-head, .rd-context-pane-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .rd-context-field-input { font-size: 16px; }
}

/* ----------------------------- Card -----------------------------
   Elevated-card recipe (dashboard v3 token pass, 2026-07-17): softer
   line-soft border + the big soft --shadow-1 blue-grey shadow, never a
   harder --line border on these - "borders only where needed". */
.rd-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.rd-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.rd-card-title {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted);
}
.rd-card-link { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--brand-strong); text-decoration: none; }
.rd-card-link:hover { text-decoration: underline; }
.rd-trend-range {
  display: grid; grid-template-columns: 16px minmax(0, auto) 14px; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rd-trend-range:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.rd-trend-range:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.rd-trend-range > svg { pointer-events: none; }
.rd-trend-range-select {
  appearance: none; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer;
}

/* ----------------------------- Chips / Badges ----------------------------- */
.rd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4;
  border: 1px solid var(--neutral-border); background: var(--neutral-bg); color: var(--neutral-fg);
  white-space: nowrap;
}
.rd-chip .rd-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.rd-chip-good    { background: var(--good-bg); color: var(--good-fg); border-color: var(--good-border); }
.rd-chip-warn    { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.rd-chip-bad     { background: var(--bad-bg);  color: var(--bad-fg);  border-color: var(--bad-border); }
.rd-chip-info    { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }
.rd-chip-neutral { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-border); }

/* Grade badge - solid, always carries its letter label (not color-only). */
.rd-grade {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 28px; padding: 0 10px; border-radius: var(--r-sm);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.rd-grade-a { background: var(--good-bg); color: var(--good-fg); border-color: var(--good-border); }
/* B joins A in the good band: gradeFor() colors A and B good, and the banded score percent
   sitting next to a blue chip read as two different verdicts (James 07-16 contrast pass). */
.rd-grade-b { background: var(--good-bg); color: var(--good-fg); border-color: var(--good-border); }
.rd-grade-c { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.rd-grade-d, .rd-grade-f { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-border); }
.rd-grade-none { background: var(--neutral-bg); color: var(--muted); border-color: var(--neutral-border); }

/* Source badge - small, neutral. */
.rd-source {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-soft);
}
.rd-source-device { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
/* Live (real) calls carry the brand tint so they separate from role-play at a glance. */
.rd-source-live { background: var(--brand-tint); color: var(--brand-strong); border-color: transparent; font-weight: var(--fw-semibold); }

/* ----------------------------- Stat tile ----------------------------- */
.rd-tile { display: flex; flex-direction: column; gap: 4px; }
.rd-tile-label { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.03em; }
.rd-tile-value { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.rd-tile-value.rd-unavailable { color: var(--faint); font-weight: var(--fw-semibold); }
.rd-tile-unit { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); margin-left: 3px; }
.rd-tile-hint { font-size: var(--fs-xs); color: var(--faint); }
.rd-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4); }

/* ----------------------------- Trend chart ----------------------------- */
.rd-trend { display: flex; flex-direction: column; gap: var(--sp-2); }
.rd-trend-head { display: flex; align-items: baseline; gap: var(--sp-3); }
.rd-trend-current { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.rd-trend-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.rd-trend-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd-trend-area { fill: var(--brand); opacity: 0.10; stroke: none; }
.rd-trend-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.rd-trend-gridline { stroke: var(--line-soft); stroke-width: 1; }
/* Fixed 0-100% axis (team performance chart, dashboard v3 "cleaner axes" ask): the
   gridlines themselves are drawn INSIDE the sparkline SVG (trendChart.js buildSparkline
   gridValues), sharing its exact y() math, so a "50%" line can't drift from where the
   series line actually crosses 50%. This label column just needs to visually line up
   beside it: same fixed 150px height + the same 16px top/bottom inset (PAD_Y) as the
   SVG, so 5 evenly-spaced flex rows land next to their gridlines closely enough. */
.rd-trend-plot { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--sp-2); }
.rd-trend-yaxis { height: 150px; padding: 16px 0; display: flex; flex-direction: column; justify-content: space-between; text-align: right; }
.rd-trend-yaxis-label { color: var(--faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; line-height: 1; transform: translateY(-0.5em); }
.rd-trend-context { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; color: var(--muted); font-size: var(--fs-xs); }
.rd-trend-axis { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); color: var(--faint); font-size: var(--fs-xs); }
.rd-trend-axis span:nth-child(2) { text-align: center; }
.rd-trend-axis span:last-child { text-align: right; }
.rd-trend-rule { color: var(--muted); font-size: var(--fs-xs); }
.rd-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.rd-delta-up { color: var(--good-fg); }
.rd-delta-down { color: var(--bad-fg); }
.rd-delta-flat { color: var(--muted); }

/* ----------------------------- Needs-attention row ----------------------------- */
.rd-na-list { display: flex; flex-direction: column; }
.rd-na-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft);
  cursor: pointer;
}
.rd-na-row:hover { background: var(--surface-2); }
.rd-na-row:first-child { border-top: none; }
/* Avatar (dashboard v3 mock), bad-tinted so it still reads as "needs attention" at a
   glance without relying on the card's red rail alone - same shape as Standouts &
   support's avatar, different tint. */
.rd-na-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bad-bg); color: var(--bad-fg); font-size: 10px; font-weight: var(--fw-bold); flex: none; }
.rd-na-body { min-width: 0; flex: 1 1 auto; }
.rd-na-name { font-weight: var(--fw-semibold); color: var(--text-strong); }
.rd-na-reason { font-size: var(--fs-sm); color: var(--muted); }

/* ----------------------------- Call row ----------------------------- */
.rd-callrow {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  padding: var(--sp-3); border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: inherit; font: inherit;
}
.rd-callrow + .rd-callrow { margin-top: 2px; }
.rd-callrow:hover { background: var(--surface-2); }
/* Criterion drill-down demo mode reuses this row's classes on a plain <div> when no click
   handler exists (no server-side id to open against) -- suppress the button's pointer cursor
   and hover shading so a non-interactive row doesn't look clickable. */
div.rd-callrow { cursor: default; }
div.rd-callrow:hover { background: transparent; }
.rd-callrow-main { min-width: 0; flex: 1 1 auto; }
.rd-callrow-title { font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-callrow-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.rd-callrow-score { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text); min-width: 46px; text-align: right; }
.rd-callrow-score.rd-unavailable { color: var(--faint); }
.rd-callrow-chevron { color: var(--faint); flex: none; }
.rd-callrow-member { color: var(--text); font-weight: var(--fw-semibold); }
.rd-callrow-wrap { position: relative; border-radius: var(--r-md); }
.rd-callrow-wrap + .rd-callrow-wrap { margin-top: 2px; }
.rd-callrow-wrap:has(.rd-callrow-manage[open]) { background: var(--surface-2); }
.rd-callrow-wrap > .rd-callrow { padding-right: 68px; }
.rd-callrow-manage { margin: 0 var(--sp-3); }
.rd-callrow-manage:not([open]) { height: 0; }
.rd-callrow-manage > summary { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: var(--r-pill); color: transparent; font-size: 0; cursor: pointer; list-style: none; }
.rd-callrow-manage > summary::-webkit-details-marker { display: none; }
.rd-callrow-manage > summary::after { content: '\2022\2022\2022'; color: var(--muted); font-size: 16px; letter-spacing: 2px; line-height: 1; }
.rd-callrow-manage > summary:hover { background: var(--surface); }
.rd-callrow-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) 0 var(--sp-3); border-top: 1px solid var(--line-soft); }
.rd-callrow-folder-field { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 220px; }
.rd-callrow-folder { min-width: 180px; }

/* ----------------------------- Call library ----------------------------- */
.rd-import-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.rd-import-panel[hidden] { display: none; }
.rd-import-option { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.rd-import-option .rd-setting-field { width: 100%; }
.rd-import-teammate { grid-column: 1 / -1; padding: var(--sp-4); border: 1px solid var(--info-border); border-radius: var(--r-md); background: var(--info-bg); }
.rd-library-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* Left cluster of .rd-library-tools (ACR-369, 2026-07-29): "New folder" + the upload launchers,
   grouped so the parent's space-between pushes the Quo link right instead of scattering all four
   controls evenly across the row. Empty in Team scope, where both children are gated off. */
.rd-library-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rd-scope-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); }
.rd-scope-tab { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.rd-scope-tab[aria-pressed='true'] { background: var(--surface); color: var(--brand-strong); box-shadow: var(--shadow-1); }
.rd-folder-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rd-folder-chips[hidden] { display: none; }
.rd-folder-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; }
/* Names are capped at 40 chars on input, but 40 chars of a narrow viewport is still wider than the
   row; chips never wrap mid-name, so the label ellipsises instead of pushing the page sideways. */
.rd-folder-chip-name { overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.rd-folder-chip:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--brand-strong); }
.rd-folder-chip[aria-pressed='true'] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-strong); }
.rd-folder-chip-count { min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); text-align: center; }
.rd-folder-chip[aria-pressed='true'] .rd-folder-chip-count { background: var(--surface); color: var(--brand-strong); }
.rd-library-integration { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-decoration: none; }
.rd-library-integration:hover { color: var(--brand-strong); text-decoration: underline; }
.rd-call-filters { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(5, minmax(110px, auto)); gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.rd-library-count { margin: var(--sp-3) 0 var(--sp-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rd-library-action-status { min-height: 20px; margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-xs); }
.rd-load-more { display: flex; margin: var(--sp-4) auto 0; }
.rd-load-more[hidden] { display: none; }
.rd-folder-create { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr) auto; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.rd-folder-create[hidden] { display: none; }
.rd-folder-create label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rd-call-library-list { padding: var(--sp-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.rd-library-context { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3); border: 1px solid var(--info-border); border-radius: var(--r-md); background: var(--info-bg); }
.rd-library-context-title { margin-top: 2px; color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* ----------------------------- Transcript (editorial) ----------------------------- */
.rd-transcript { max-width: var(--measure); font-size: var(--fs-md); line-height: var(--lh-reading); }
.rd-transcript-plain { white-space: pre-wrap; color: var(--text); }
.rd-turn {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm);
  align-items: start;
}
.rd-turn.rd-turn-seek { cursor: pointer; }
.rd-turn.rd-turn-seek:hover { background: var(--surface-2); }
.rd-turn.rd-turn-active { background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
.rd-turn-time {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint);
  padding-top: 4px; font-variant-numeric: tabular-nums;
}
.rd-turn-time-btn { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; background: none; border: none; padding: 2px 4px; margin: -10px -4px; border-radius: 4px; cursor: pointer; color: var(--brand-strong); font: inherit; font-family: var(--font-mono); font-size: var(--fs-xs); }
.rd-turn-body { min-width: 0; }
.rd-turn-speaker { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.rd-turn-speaker-rep { color: var(--brand-strong); }
.rd-turn-speaker-prospect { color: var(--accent-cyan); }
.rd-turn-text { color: var(--text); }

/* ----------------------------- Scorecard ----------------------------- */
.rd-scorecard { display: flex; flex-direction: column; gap: var(--sp-3); }
.rd-crit { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--sp-3); align-items: center; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.rd-crit:last-child { border-bottom: none; padding-bottom: 0; }
.rd-crit-name { font-weight: var(--fw-medium); color: var(--text-strong); }
.rd-crit-note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
.rd-dots { display: inline-flex; gap: 4px; }
.rd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.rd-dot-on { background: var(--brand); }
.rd-dot-on.rd-dot-good { background: var(--good-solid); }
.rd-dot-on.rd-dot-warn { background: var(--warn-solid); }
.rd-dot-on.rd-dot-bad  { background: var(--bad-solid); }

/* ----------------------------- Tab rail ----------------------------- */
.rd-tabs { display: flex; flex-direction: column; }
.rd-tablist { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rd-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: var(--sp-3) var(--sp-3); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  min-height: 44px;
}
.rd-tab:hover { color: var(--text); }
.rd-tab[aria-selected='true'] { color: var(--brand-strong); border-bottom-color: var(--brand); }
.rd-tabpanel { padding-top: var(--sp-4); }
.rd-tabpanel[hidden] { display: none; }

/* ----------------------------- Audio player (UI only) ----------------------------- */
.rd-player {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.rd-player-sticky { position: sticky; bottom: var(--sp-4); z-index: 10; }
.rd-player-play {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: none; background: var(--brand-btn); color: var(--on-brand); cursor: pointer;
}
.rd-player-skip { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 8px; border-radius: var(--r-sm); }
.rd-player-skip:hover { color: var(--text); background: var(--surface-2); }
.rd-player-time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-player-track { flex: 1 1 auto; min-height: 44px; border-radius: var(--r-pill); background: var(--line); background-clip: content-box; padding: 19px 0; position: relative; cursor: pointer; }
.rd-player-fill { position: absolute; inset: 19px auto 19px 0; width: 0%; background: var(--brand); border-radius: var(--r-pill); }
.rd-player-speed { min-width: 44px; min-height: 44px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text); cursor: pointer; }

/* ----------------------------- Assignment card ----------------------------- */
.rd-assign { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
.rd-assign:first-child { border-top: none; padding-top: 0; }
.rd-assign-head { display: flex; align-items: center; gap: var(--sp-2); }
.rd-assign-title { font-weight: var(--fw-semibold); color: var(--text-strong); flex: 1 1 auto; min-width: 0; }
.rd-assign-title.rd-done { color: var(--muted); text-decoration: line-through; }
.rd-assign-meta { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--sp-2); align-items: center; }
.rd-progress { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.rd-progress-fill { height: 100%; background: var(--brand); border-radius: var(--r-pill); }
.rd-progress-fill.rd-done { background: var(--good-solid); }

/* ----------------------------- Streak chip ----------------------------- */
.rd-streak {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}

/* ----------------------------- Empty state ----------------------------- */
.rd-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); color: var(--muted); }
.rd-empty-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--faint); }
.rd-empty-title { font-weight: var(--fw-semibold); color: var(--text); }
.rd-empty-text { font-size: var(--fs-sm); max-width: 42ch; }
.rd-empty-inline { padding: var(--sp-3) 0; align-items: flex-start; text-align: left; }

/* Honest "unavailable" line inside a panel (never an empty control). */
.rd-unavail-line {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px dashed var(--line);
  color: var(--muted); font-size: var(--fs-sm);
}
.rd-unavail-line svg { flex: none; color: var(--faint); }

/* ----------------------------- Skeleton ----------------------------- */
.rd-skel { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-hi) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; border-radius: var(--r-sm); animation: rd-shimmer 1.4s ease infinite; }
.rd-skel-line { height: 12px; margin: 6px 0; }
@keyframes rd-shimmer { to { background-position: -200% 0; } }

/* ----------------------------- Workspace header ----------------------------- */
.rd-ws-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.rd-ws-titlerow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rd-ws-title { font-size: var(--fs-xl); }
.rd-ws-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rd-ws-score { font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.rd-ws-score.rd-unavailable { color: var(--faint); }
.rd-ws-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.rd-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.rd-back:hover { color: var(--text); }

.rd-ws-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.rd-ws-grid > *, .rd-call-primary, .rd-call-audio, .rd-player { min-width: 0; }

/* Independently operable call insight windows */
.rd-insight-windows { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.rd-insight-window { border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: clip; }
.rd-insight-window-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); min-height: 58px; padding: var(--sp-3) var(--sp-4); color: var(--text); cursor: pointer; list-style: none; }
.rd-insight-window-summary::-webkit-details-marker { display: none; }
.rd-insight-window-summary:hover { background: var(--surface-2); }
.rd-insight-window-title { color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.rd-insight-window-glance { color: var(--muted); font-size: var(--fs-xs); }
.rd-insight-window-summary > svg { color: var(--muted); transition: transform var(--dur-med) var(--ease); }
.rd-insight-window[open] > .rd-insight-window-summary > svg { transform: rotate(180deg); }
.rd-insight-window-body { padding: var(--sp-4); border-top: 1px solid var(--line-soft); }
.rd-window-divider { height: 1px; margin: var(--sp-4) 0; background: var(--line-soft); }
.rd-call-coaching-summary { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: var(--sp-3); }
.rd-call-coaching-value { margin-top: 3px; color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.rd-coach-result { padding: var(--sp-3); border: 1px solid var(--info-border); border-radius: var(--r-md); background: var(--brand-tint); }
.rd-coach-result p { margin-top: var(--sp-2); color: var(--text); }
.rd-call-detail-list { display: flex; flex-direction: column; }
.rd-call-detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.rd-call-detail-row:first-child { border-top: 0; }
.rd-call-detail-label { color: var(--muted); }
.rd-call-detail-value { color: var(--text); font-weight: var(--fw-semibold); text-align: right; }

/* ----------------------------- Banner (preview only) ----------------------------- */
.rd-banner {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); text-align: center;
  background: var(--warn-bg); color: var(--warn-fg); border-bottom: 1px solid var(--warn-border);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}

/* ----------------------------- Surface pieces ----------------------------- */
/* Delivery dials ("how you sounded") - meter + numeric value (never color-only). */
.rd-meters { display: flex; flex-direction: column; gap: var(--sp-3); }
.rd-meter { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: var(--sp-3); }
.rd-meter-label { font-size: var(--fs-sm); color: var(--muted); }
.rd-meter-track { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.rd-meter-fill { height: 100%; background: var(--brand); border-radius: var(--r-pill); }
.rd-meter-val { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); font-size: var(--fs-sm); text-align: right; color: var(--text); }

/* Key-moment cards */
.rd-moment { padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
.rd-moment:first-child { border-top: none; padding-top: 0; }
.rd-moment-quote { color: var(--text-strong); font-style: italic; border-left: 3px solid var(--brand); padding-left: var(--sp-3); margin-bottom: 6px; }
.rd-moment-why { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 6px; }
.rd-moment-try { font-size: var(--fs-sm); color: var(--good-fg); }
.rd-moment-try b { font-weight: var(--fw-bold); }
.rd-moment-seek { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 6px; background: none; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 10px; font: inherit; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--brand-strong); cursor: pointer; }
.rd-moment-seek:hover { background: var(--surface-2); }

/* Comments / feedback */
.rd-comment { padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
.rd-comment:first-child { border-top: none; padding-top: 0; }
.rd-comment-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.rd-comment-author { font-weight: var(--fw-semibold); }
.rd-comment-time { color: var(--faint); font-size: var(--fs-xs); }
.rd-comment-text { margin-top: 3px; }

/* Activity feed */
.rd-feed { display: flex; flex-direction: column; }
.rd-feed-item { display: flex; align-items: baseline; gap: var(--sp-3); padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.rd-feed-item:first-child { border-top: none; }
.rd-feed-time { color: var(--faint); font-size: var(--fs-xs); white-space: nowrap; margin-left: auto; }

/* Ranked list (common weak criteria) */
.rd-ranklist { display: flex; flex-direction: column; gap: var(--sp-2); }
.rd-rank { display: flex; align-items: center; gap: var(--sp-3); }
.rd-rank-num { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); display: grid; place-items: center; }
.rd-rank-count { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); }

/* Standouts */
.rd-standout { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 0; }
.rd-standout-label { color: var(--muted); font-size: var(--fs-sm); }
.rd-standout-name { font-weight: var(--fw-semibold); margin-left: auto; }

/* Coaching focus */
.rd-focus-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.rd-focus-crit { font-weight: var(--fw-bold); color: var(--text-strong); }
.rd-focus-tip { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; }
.rd-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.rd-focus-card { display: flex; flex-direction: column; padding: var(--sp-4); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.rd-focus-card .rd-focus-tip { flex: 1 1 auto; }
.rd-focus-cta { align-self: flex-start; margin-top: var(--sp-3); }
@media (max-width: 1023px) { .rd-focus-grid { grid-template-columns: 1fr; } }

/* Calls page: personal scenario analytics */
.rd-analytics { margin-bottom: var(--sp-5); }
.rd-analytics-head { margin-bottom: var(--sp-4); }
.rd-analytics-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
/* Draft pill toggle: white bordered pill; active flips to tint bg + tinted border + deep blue text. */
.rd-analytics-tab { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.rd-analytics-tab:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--brand-strong); }
.rd-analytics-tab[aria-pressed="true"] { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--brand-strong); }
.rd-analytics-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: var(--sp-5); align-items: start; }
.rd-analytics-summary { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-soft); }
.rd-analytics-avg-wrap { display: flex; align-items: baseline; gap: var(--sp-2); }
.rd-analytics-avg { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.rd-analytics-avg-label { color: var(--muted); font-size: var(--fs-sm); }
.rd-analytics-count { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rd-analytics-criteria { display: flex; flex-direction: column; gap: var(--sp-3); }
.rd-criterion-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.rd-criterion-label { color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.rd-criterion-score { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rd-criterion-track { margin-top: 5px; height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rd-criterion-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width .25s ease; }
.rd-criterion-fill-low { background: var(--bad-fg, #C2410C); }
.rd-analytics-insights { align-self: start; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.rd-analytics-insights .rd-eyebrow { margin-bottom: var(--sp-2); }
.rd-insight { color: var(--text-strong); font-size: var(--fs-sm); line-height: 1.45; }
.rd-insight + .rd-insight { margin-top: var(--sp-3); }
.rd-insight-warn { border-left: 3px solid var(--bad-fg, #C2410C); padding-left: var(--sp-3); }
.rd-insight-good { border-left: 3px solid var(--good-fg, #15803D); padding-left: var(--sp-3); }
@media (max-width: 900px) { .rd-analytics-body { grid-template-columns: 1fr; } }

/* Calls page: sample report cards section */
.rd-sample-cards { margin-top: var(--sp-6); }
.rd-sample-cards .rd-call-library-list { margin-top: var(--sp-3); }

/* Individual call page (reuses the legacy scorecard body via toggleDetail) */
.rd-call-page { max-width: 900px; }
.rd-call-back { margin-bottom: var(--sp-4); }
.rd-call-page-head { margin-bottom: var(--sp-3); }
.rd-call-detail { display: block; }
.rd-call-detail .scwrap { margin-bottom: 0; }
.rd-call-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-4); padding: var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.rd-call-meta-k { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .03em; }
.rd-call-meta-v { margin-top: 4px; color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* Personal dashboard analytics */
.rd-dashboard-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr); gap: var(--sp-4); align-items: stretch; }
.rd-weekly { display: flex; flex-direction: column; gap: var(--sp-3); }
.rd-section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.rd-section-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 3px; }
.rd-weekly-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.rd-weekly-metric { min-width: 0; padding: var(--sp-4); border-left: 1px solid var(--line-soft); }
.rd-weekly-metric:first-child { border-left: 0; }
.rd-weekly-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .03em; }
.rd-weekly-value { margin-top: var(--sp-2); color: var(--text-strong); font-size: var(--fs-xl); line-height: 1; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rd-weekly-change { display: flex; align-items: center; gap: 4px; margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rd-weekly-up { color: var(--good-fg); }
.rd-weekly-down { color: var(--bad-fg); }
.rd-weekly-flat { color: var(--muted); }

/* Practice workspace */
.rd-practice-page { --practice-max: 1060px; }
.rd-practice-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); border-radius: var(--r-lg); background: linear-gradient(120deg, var(--brand-tint), var(--surface) 68%); box-shadow: var(--shadow-1); }
.rd-practice-hero-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); background: var(--brand); color: var(--on-brand); }
.rd-practice-hero-body { min-width: 0; }
.rd-eyebrow { color: var(--brand-strong); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .12em; }
.rd-practice-hero-title { margin-top: 4px; font-size: var(--fs-lg); }
.rd-practice-hero-copy { max-width: 66ch; margin-top: 6px; color: var(--muted); font-size: var(--fs-sm); }
.rd-practice-time { display: inline-block; margin-top: 6px; color: var(--faint); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; }
.rd-scenario-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-3); }
.rd-scenario { padding: var(--sp-4); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.rd-scenario-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.rd-scenario-title { margin-top: var(--sp-3); font-size: var(--fs-md); }
.rd-scenario-copy { max-width: 68ch; margin-top: 5px; color: var(--muted); font-size: var(--fs-sm); }
.rd-scenario-personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.rd-persona { display: flex; flex-direction: column; min-width: 0; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-2); }
.rd-persona-head { display: flex; align-items: center; gap: var(--sp-3); }
.rd-persona-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--brand-strong); font-weight: var(--fw-bold); }
.rd-persona-name { font-size: var(--fs-base); }
.rd-persona-style, .rd-persona-detail { color: var(--muted); font-size: var(--fs-sm); }
.rd-persona-detail { flex: 1 1 auto; }
.rd-practice-start { align-self: flex-start; }
.rd-practice-dialog .rd-dialog-section { align-items: stretch; }
.rd-practice-setup-context { min-width: 0; }
.rd-practice-setup-persona { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.rd-practice-setup-persona > div:last-child { min-width: 0; }
.rd-practice-setup-fields { width: 100%; }
.rd-practice-room-page { display: flex; flex-direction: column; justify-content: center; }
.rd-practice-room-card { width: min(720px, 100%); margin: 0 auto; padding: clamp(var(--sp-5), 5vw, var(--sp-8)); border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); border-radius: var(--r-xl); background: linear-gradient(140deg, var(--brand-tint), var(--surface) 62%); box-shadow: var(--shadow-2); }
.rd-practice-room-persona { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rd-practice-room-persona p { margin-top: 3px; color: var(--muted); }
.rd-practice-room-status { min-height: 24px; margin-top: var(--sp-5); color: var(--text); font-weight: var(--fw-semibold); }
.rd-practice-room-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-3); }

/* Team Insights */
.rd-insights-scope { display: flex; align-items: flex-end; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.rd-scope-field { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.rd-scope-field label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rd-scope-compare { margin-left: auto; padding-bottom: 10px; color: var(--muted); font-size: var(--fs-xs); }
.rd-insights-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.rd-insight-kpi { min-width: 0; padding: var(--sp-4); border-left: 1px solid var(--line-soft); }
.rd-insight-kpi:first-child { border-left: 0; }
.rd-insight-kpi-value { margin-top: var(--sp-2); color: var(--text-strong); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.rd-insight-delta { display: flex; align-items: center; gap: 4px; margin: var(--sp-2) 0 3px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rd-insight-up { color: var(--good-fg); }
.rd-insight-down { color: var(--bad-fg); }
.rd-insight-flat { color: var(--muted); }
.rd-insights-split { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: var(--sp-4); }
.rd-insight-list { display: flex; flex-direction: column; }
.rd-insight-rank { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--sp-3); width: 100%; min-height: 52px; padding: var(--sp-2) 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rd-insight-rank:first-child { border-top: 0; }
.rd-insight-rank:hover { color: var(--brand-strong); }
.rd-insight-rank-name { font-weight: var(--fw-semibold); }
.rd-insight-score { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rd-insight-score-good { color: var(--good-fg); }
.rd-insight-score-warn { color: var(--warn-fg); }
.rd-insight-score-bad { color: var(--bad-fg); }
.rd-insight-calls { color: var(--muted); font-size: var(--fs-xs); }
.rd-objection-table { display: flex; flex-direction: column; }
.rd-objection-row { display: grid; grid-template-columns: minmax(180px, 1fr) 90px 90px minmax(220px, 1.4fr) 20px; align-items: center; gap: var(--sp-3); min-height: 50px; padding: var(--sp-2) 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; }
.rd-objection-head { min-height: 32px; border-top: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .03em; }
.rd-objection-type { font-weight: var(--fw-semibold); }
.rd-objection-evidence { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; }
.rd-objection-evidence:hover { background: var(--surface-2); color: var(--brand-strong); }
.rd-matrix-wrap { overflow-x: auto; }
.rd-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rd-matrix th, .rd-matrix td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--line-soft); text-align: center; }
.rd-matrix th:first-child { text-align: left; }
.rd-matrix thead th { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rd-matrix tbody th { color: var(--text-strong); font-weight: var(--fw-semibold); }
.rd-matrix-score { min-width: 58px; min-height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-sm); font: inherit; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; cursor: pointer; }
.rd-matrix-good { background: var(--good-bg); color: var(--good-fg); border-color: var(--good-border); }
.rd-matrix-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.rd-matrix-bad { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-border); }
.rd-matrix-unavailable { display: inline-grid; place-items: center; background: var(--surface-2); color: var(--faint); border-color: var(--line); cursor: default; }
.rd-matrix-mobile { display: none; }

/* Full manager roster. The table preserves semantic headers on wide screens and becomes a
   labelled card per authorized member on mobile, so the page never fabricates a ranking or
   leaks horizontal overflow. */
.rd-roster-wrap { width: 100%; overflow-x: auto; }
.rd-roster { width: 100%; min-width: 940px; border-collapse: collapse; }
.rd-roster th, .rd-roster td { padding: 10px var(--sp-2); border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; font-size: var(--fs-sm); }
.rd-roster thead th { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .03em; text-transform: uppercase; }
.rd-roster tbody th { color: var(--text-strong); font-weight: var(--fw-semibold); }
.rd-roster tbody tr { cursor: pointer; }
.rd-roster tbody tr:last-child > * { border-bottom: 0; }
.rd-roster tbody tr:hover { background: var(--surface-2); }
.rd-roster-number { font-variant-numeric: tabular-nums; }
.rd-roster td:last-child { text-align: right; }
/* Member identity cell: name plus a muted subline (manager-only email, low-effort-hidden note). */
.rd-roster-member { display: flex; flex-direction: column; gap: 2px; }
.rd-roster-member-name { font-weight: inherit; color: inherit; }
.rd-roster-member-sub { font-weight: var(--fw-medium); font-size: var(--fs-xs); color: var(--muted); text-transform: none; letter-spacing: normal; }

/* Team roster / command-center "N low-effort calls hidden" reveal toggle, rendered in a card
   header (opts.link) next to the section title. */
.rd-low-effort-toggle[aria-pressed="true"] { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--brand-strong); }

/* Team people and training */
.rd-people-list { display: flex; flex-direction: column; }
.rd-person-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 76px; padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
.rd-person-row:first-child { border-top: 0; }
.rd-person-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.rd-person-body { flex: 1 1 auto; min-width: 0; }
.rd-person-body h2 { font-size: var(--fs-base); }
.rd-person-body p { margin-top: 3px; color: var(--muted); font-size: var(--fs-sm); }
.rd-person-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); color: var(--faint); font-size: var(--fs-xs); }

/* Settings */
.rd-settings-page { max-width: 1080px; }
.rd-settings-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.rd-settings-card h2 { font-size: var(--fs-md); }
.rd-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.rd-setting-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rd-setting-field label, .rd-dialog-section label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rd-setting-note { color: var(--muted); font-size: var(--fs-xs); }
.rd-setting-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.rd-setting-status { color: var(--good-fg); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.rd-setting-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.rd-profile-head { display: flex; align-items: center; gap: var(--sp-3); }
.rd-profile-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); font-weight: var(--fw-bold); }
.rd-setting-toggle { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.rd-setting-toggle input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); }
.rd-setting-toggle span { display: flex; flex-direction: column; gap: 2px; }
.rd-setting-toggle small { color: var(--muted); }
.rd-settings-list { display: flex; flex-direction: column; }
.rd-setting-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 54px; padding: var(--sp-2) 0; border-top: 1px solid var(--line-soft); }
.rd-setting-list-row:first-child { border-top: 0; }
.rd-referral-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); }
.rd-referral-stats > div { display: flex; flex-direction: column; gap: 4px; }
.rd-referral-stats b, .rd-plan-name > b { color: var(--text-strong); font-size: var(--fs-lg); }
.rd-copy-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); }
.rd-copy-row > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rd-copy-row code { overflow: hidden; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.rd-plan-name { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rd-plan-usage { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); }
.rd-destructive-confirm { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3); border: 1px solid var(--bad-border); border-radius: var(--r-md); background: var(--bad-bg); color: var(--bad-fg); }
.rd-destructive-confirm[hidden] { display: none; }
.rd-destructive-confirm p { flex: 1 1 260px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* Persistent global utilities */
.rd-global-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); overflow-y: auto; }
.rd-global-dialog::backdrop { background: color-mix(in srgb, var(--text-strong) 48%, transparent); backdrop-filter: blur(2px); }
.rd-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface); }
.rd-dialog-section { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line-soft); }
.rd-dialog-section h3 { font-size: var(--fs-base); }
.rd-dialog-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4); }
.rd-global-status { min-height: 20px; padding: 0 var(--sp-4) var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.rd-global-link { display: block; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--brand-strong); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.rd-notification-list { display: flex; flex-direction: column; padding: 0 var(--sp-4) var(--sp-4); }
.rd-notification-item { position: relative; display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3) 0 var(--sp-3) var(--sp-3); border-top: 1px solid var(--line-soft); }
.rd-notification-item:first-child { border-top: 0; }
.rd-notification-item p, .rd-notification-item small { color: var(--muted); font-size: var(--fs-sm); }
.rd-notification-item small { font-size: var(--fs-xs); }
.rd-notification-unread::before { content: ''; position: absolute; left: 0; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.rd-account-control { position: relative; width: 100%; }
.rd-account-menu { position: absolute; right: 0; bottom: calc(100% + 7px); z-index: 75; width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-2); }
.rd-account-menu[hidden] { display: none; }
.rd-account-menu :is(a, button) { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); text-decoration: none; cursor: pointer; }
.rd-account-menu :is(a, button):hover { background: var(--surface-2); }
/* Plan + identity header (UI review, 2026-08-05): the plan indicator lives at the TOP of the
   menu, in a non-interactive header (role="presentation", so the existing arrow-key handler --
   which enumerates [role="menuitem"] only -- skips it naturally, no keyboard behavior changes
   needed). Previously this was a bare `div` sandwiched BETWEEN two real menuitems inside
   role="menu": unreachable by keyboard/screen-reader arrow navigation, and for a CTA-less tier
   (unlimited) visually indistinguishable from a broken menu item (no background, no divider,
   hover did nothing). The header still needs room for the account name (new here -- previously
   visible only on the trigger) plus the badge/blurb this already carried, so the width stays
   244px; it was never really "only for the dead block", the block just needed to become legible. */
.rd-account-menu:has(.rd-account-menu-header) { width: 244px; }
.rd-account-menu-header {
  display: flex; flex-direction: column; gap: 2px;
  margin: -6px -6px 6px; padding: var(--sp-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.rd-account-menu-name { color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.rd-account-plan-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; }
.rd-account-plan-label { color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.rd-account-plan-badge { border-radius: 999px; padding: 1px 8px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.rd-account-plan-badge.is-unlimited, .rd-account-plan-badge.is-pro { background: var(--brand-tint); color: var(--brand-strong); }
.rd-account-plan-blurb { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.rd-account-menu .rd-account-plan-cta { min-height: 38px; margin-bottom: 2px; color: var(--brand-strong); font-weight: 600; }
/* Sign out is ALWAYS separated from the actions above it, regardless of tier -- the prior rule
   (`.rd-account-plan-cta + button`) only fired when a CTA existed, so a CTA-less tier (unlimited)
   had zero separators anywhere in the menu. */
.rd-account-signout { margin-top: 2px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* Welcome row */
.rd-welcome { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.rd-welcome-title { font-size: var(--fs-lg); }

/* Utility */
.rd-sticky-bottom { display: none; }
.rd-hide-mobile { display: inline-flex; }

/* ----------------------------- Responsive ----------------------------- */
@media (max-width: 1023px) {
  .rd-app-layout { display: block; min-width: 0; }
  .rd-mobilebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    min-height: var(--mobilebar-h);
    padding: 0 var(--sp-3);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.2) blur(10px);
  }
  .rd-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(86vw, 304px);
    height: 100dvh;
    transform: translateX(-102%);
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-med) var(--ease);
  }
  .rd-sidebar[data-open='true'] { transform: translateX(0); }
  .rd-iconbtn.rd-sidebar-close { display: inline-grid; margin-left: auto; }
  .rd-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--text-strong) 38%, transparent);
    cursor: pointer;
  }
  .rd-drawer-overlay[hidden] { display: none; }
  .rd-ws-grid { grid-template-columns: 1fr; }
  .rd-grid-2, .rd-grid-3 { grid-template-columns: 1fr; }
  .rd-dashboard-split { grid-template-columns: 1fr; }
  .rd-span-2 { grid-column: auto; }
  .rd-call-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-insights-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-insight-kpi:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .rd-insight-kpi:nth-child(4) { border-top: 1px solid var(--line-soft); }
  .rd-insights-split { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .rd-page { width: 100%; padding: var(--sp-4) var(--sp-3) var(--sp-8); }
  .rd-turn { grid-template-columns: 44px 1fr; gap: var(--sp-2) var(--sp-3); }
  .rd-transcript { font-size: var(--fs-base); }
  .rd-sticky-bottom {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 25;
    padding: var(--sp-3);
    margin: var(--sp-4) 0 0;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-top: 1px solid var(--line); backdrop-filter: blur(8px);
  }
  .rd-sticky-bottom .rd-btn { width: 100%; }
  .rd-hide-mobile { display: none !important; }
  .rd-weekly-grid { grid-template-columns: 1fr; }
  .rd-weekly-metric { border-left: 0; border-top: 1px solid var(--line-soft); }
  .rd-weekly-metric:first-child { border-top: 0; }
  .rd-practice-hero { grid-template-columns: auto minmax(0, 1fr); padding: var(--sp-4); }
  .rd-practice-hero > .rd-practice-start { grid-column: 1 / -1; width: 100%; }
  .rd-scenario-head { display: block; }
  .rd-scenario-personas { grid-template-columns: 1fr; }
  .rd-practice-start { width: 100%; }
  .rd-import-panel { grid-template-columns: 1fr; }
  .rd-call-filters { grid-template-columns: 1fr; }
  .rd-folder-create { grid-template-columns: 1fr; }
  .rd-callrow-actions > .rd-btn { flex: 1 1 calc(50% - var(--sp-2)); }
  .rd-callrow-folder-field { flex-basis: 100%; }
  .rd-library-tools { align-items: stretch; }
  .rd-scope-tabs { width: 100%; }
  .rd-scope-tab { flex: 1 1 0; }
  /* Chips wrap in place rather than scrolling sideways: a folder pushed off-screen is the same
     invisibility the dropdown caused. The group claims only the width it needs (never `flex-grow`),
     so with a folder or two New folder still sits beside it instead of being stranded on its own
     row; once the chips genuinely fill the line, wrapping it is the correct outcome. */
  .rd-folder-chips { flex: 0 1 auto; }
  .rd-insights-scope { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .rd-scope-field { min-width: 0; }
  .rd-scope-compare { grid-column: 1 / -1; margin-left: 0; padding-bottom: 0; }
  .rd-insights-kpis { grid-template-columns: 1fr 1fr; }
  .rd-insight-kpi { padding: var(--sp-3); }
  .rd-insight-rank { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .rd-insight-rank .rd-insight-calls { grid-column: 2 / 4; }
  .rd-objection-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .rd-objection-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp-3); padding: var(--sp-3) 0; }
  .rd-objection-row > span:nth-child(2)::before { content: 'Frequency '; color: var(--muted); font-weight: var(--fw-normal); }
  .rd-objection-row > span:nth-child(3)::before { content: 'Calls '; color: var(--muted); font-weight: var(--fw-normal); }
  .rd-objection-row > span:nth-child(4) { grid-column: 1 / -1; color: var(--muted); }
  .rd-objection-row > span:last-child { grid-column: 2; grid-row: 1; }
  .rd-matrix-wrap { display: none; }
  .rd-matrix-mobile { display: flex; flex-direction: column; }
  .rd-matrix-mobile-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--sp-2); align-items: center; min-height: 58px; padding: var(--sp-2) 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-xs); text-align: left; cursor: pointer; }
  .rd-matrix-mobile-unavailable { cursor: default; }
  .rd-matrix-mobile-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
  .rd-call-audio { order: -1; }
  .rd-player { display: grid; grid-template-columns: 44px 44px 44px minmax(0, 1fr) auto 44px; gap: var(--sp-2); width: 100%; padding: var(--sp-3); }
  .rd-player-track { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 44px; padding: 19px 0; }
  .rd-player-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .rd-call-has-audio { padding-bottom: var(--sp-4); }
  .rd-call-has-audio :is(button, a, textarea, input, select) { scroll-margin-bottom: 104px; }
  .rd-call-coaching-summary { grid-template-columns: 1fr 1fr; }
  .rd-call-coaching-summary > .rd-chip { grid-column: 1 / -1; justify-self: start; }
  .rd-ws-actions { width: 100%; }
  .rd-ws-actions .rd-btn { flex: 1 1 auto; }
  .rd-insight-window-summary { grid-template-columns: minmax(0, 1fr) auto; }
  .rd-insight-window-glance { grid-column: 1; grid-row: 2; }
  .rd-insight-window-summary > svg { grid-column: 2; grid-row: 1 / 3; }
  .rd-settings-grid { grid-template-columns: 1fr; }
  .rd-settings-card { padding: var(--sp-4); }
  .rd-referral-stats { grid-template-columns: 1fr; }
  .rd-copy-row { align-items: stretch; flex-direction: column; }
  .rd-copy-row .rd-btn { width: 100%; }
  .rd-dialog-actions .rd-btn { flex: 1 1 100%; }
  .rd-person-row { align-items: flex-start; flex-wrap: wrap; }
  .rd-person-row > .rd-btn { width: 100%; }
  .rd-roster-wrap { overflow: visible; }
  .rd-roster { display: block; min-width: 0; }
  .rd-roster thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .rd-roster tbody, .rd-roster tr { display: block; }
  .rd-roster tr { padding: var(--sp-3) 0; border-top: 1px solid var(--line-soft); }
  .rd-roster tr:first-child { border-top: 0; }
  .rd-roster tbody th { display: block; padding: 0 0 var(--sp-2); border: 0; font-size: var(--fs-base); }
  .rd-roster td { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1fr); gap: var(--sp-2); align-items: center; padding: 6px 0; border: 0; }
  .rd-roster td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .rd-roster td:last-child { text-align: left; }
  .rd-roster td:last-child .rd-btn { width: 100%; }
}

/* ------------------- Calls per-session data table (ref: Company Overview) ------------------- */
.rd-calltable { display: block; overflow-x: auto; }
/* Container-query ancestor for the mobile card-vs-grid switch (app.html's scoped override):
   @container rules style DESCENDANTS of the query container, never the container element
   itself, so this MUST live on a dedicated wrapper around the list, not on .rd-calltable
   (which is a class toggled on/off the list element itself and needs to remain a valid
   descendant target for the mobile override's `.rd-calltable{overflow-x:visible}` rule). */
.rd-calltable-wrap { container-type: inline-size; container-name: rd-calltable; }
.rd-ct-head, .rd-ct-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.8fr) minmax(120px, 1.3fr) 1.3fr 0.7fr 1.1fr 0.6fr 1fr 44px;
  align-items: center;
  gap: var(--sp-3);
  min-width: 920px;
  padding: var(--sp-2) var(--sp-3);
}
.rd-ct-head { border-bottom: 1px solid var(--line); }
.rd-ct-head .rd-ct-cell {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.rd-ct-row { border-bottom: 1px solid var(--line-soft); }
.rd-ct-row:hover { background: var(--surface-2); }
.rd-ct-cell { min-width: 0; font-size: var(--fs-sm); color: var(--text); }
.rd-ct-open {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; width: 100%;
}
/* Team scope (ACR-369): same layout as .rd-ct-open, but plain text -- no cursor:pointer, no hover
   color change, since drill-in isn't available here (ACR-375) and it must never look clickable. */
.rd-ct-static { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.rd-ct-title { font-weight: var(--fw-semibold); color: var(--text-strong); }
.rd-ct-open:hover .rd-ct-title { color: var(--brand-strong); }
.rd-ct-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rd-ct-folder { font-size: var(--fs-xs); color: var(--muted); }
.rd-ct-scorenum { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px; }
.rd-ct-frac { color: var(--muted); font-weight: var(--fw-medium); font-size: var(--fs-xs); }
/* The percent is the signal: bold and banded so good vs bad reads at a glance (James 07-16). */
.rd-ct-pct { font-weight: var(--fw-bold); font-size: var(--fs-md); }
.rd-band-good { color: var(--good-fg); }
.rd-band-warn { color: var(--warn-fg); }
.rd-band-bad  { color: var(--bad-fg); }
.rd-ct-managecell { position: relative; justify-self: end; }
.rd-ct-manage { margin: 0; }
.rd-ct-manage:not([open]) { height: auto; }
.rd-ct-manage > summary { position: static; top: auto; right: auto; width: 32px; height: 32px; }
.rd-ct-manage[open] > .rd-callrow-actions {
  position: absolute; right: 0; top: 36px; z-index: 20;
  width: max-content; max-width: 280px; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(14, 27, 46, .12);
}

/* ----------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rd-root *, .rd-root *::before, .rd-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------- Team command center v2 (team-command-v2 chunk 4) --------------------- */
/* Verdict strip: the page's "so what" - one big colored number + status pills. A compact
   full-width band (number left, pills right); wraps to a stack on narrow screens. */
.rd-verdict { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.rd-verdict-main { display: flex; align-items: baseline; gap: var(--sp-3); }
.rd-verdict-num { font-size: 44px; line-height: 1; font-weight: var(--fw-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rd-verdict-caption { display: flex; flex-direction: column; gap: 2px; }
.rd-verdict-label { color: var(--text-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.rd-verdict-hint { color: var(--muted); font-size: var(--fs-xs); }
.rd-verdict-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Score tones: colored numbers always sit next to their label/value - never color alone. */
.rd-score-good { color: var(--good-fg); }
.rd-score-warn { color: var(--warn-fg); }
.rd-score-bad  { color: var(--bad-fg); }
.rd-score-neutral { color: var(--muted); }

/* Card emphasis states: alert = loudest thing on the page; quiet = recede. */
.rd-card-alert { border-left: 4px solid var(--bad-solid); background: color-mix(in srgb, var(--bad-bg) 38%, var(--surface)); }
.rd-card-alert > .rd-card-head .rd-card-title { color: var(--bad-fg); }
.rd-card-quiet { background: var(--surface-2); box-shadow: none; padding: var(--sp-3) var(--sp-4); }
.rd-card-quiet > .rd-card-head { margin-bottom: var(--sp-1); }

/* Team analytics drill-down ("Where to coach"): a flat, worst-first ranked list of
   skills across every track (dashboard v3 mock - evolved from an earlier per-track
   accordion; buildTeamAnalyticsModel's track math is unchanged, only the render shape
   is flat now). "View all skills" is a plain <details> for the rows past TOP_N. */
.rd-ta-head { align-items: flex-start; }
.rd-ta-overall { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rd-ta-overall-sub { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.rd-ta-score { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rd-ta-score small { font-size: 0.62em; font-weight: var(--fw-semibold); color: var(--muted); margin-left: 1px; }
.rd-ta-score-lg { font-size: 30px; line-height: 1; }
.rd-ta-body { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-4); }
.rd-ta-empty { color: var(--muted); font-size: var(--fs-sm); }
.rd-ta-worst-chip { margin-left: var(--sp-2); vertical-align: 2px; }
.rd-ta-more { margin-top: var(--sp-1); }
.rd-ta-more-link {
  display: inline-flex; align-items: center; gap: 4px; color: var(--brand-strong);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; list-style: none;
}
.rd-ta-more-link::-webkit-details-marker { display: none; }
.rd-ta-more-link::after { content: '\2192'; }
.rd-ta-more-link:hover { text-decoration: underline; }
.rd-ta-more-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.rd-ta-more-body { margin-top: var(--sp-4); }
.rd-criterion-worst .rd-criterion-label { color: var(--warn-fg); }
.rd-fill-good { background: var(--good-solid); }
.rd-fill-warn { background: var(--warn-solid); }
.rd-fill-bad  { background: var(--bad-solid); }
@media (max-width: 600px) { .rd-verdict-num { font-size: 36px; } .rd-ta-overall { align-items: flex-start; } }

/* ----------------------------- Criterion drill-down (ACR-502) -----------------------------
   UI review round 2 (2026-08-05): round 1 gave every structural class a real rule but composed
   a bespoke card that read thin next to the rest of the product ("why can't we just use the
   same layout and same buttons as that?"). This version drops nearly all bespoke classes and is
   assembled from the SAME building blocks the Team command center and member page already use:
   kpiCard() for the stat row, needsAttentionRow.js's .rd-na-* row for each rep, callRow.js's
   .rd-callrow-* row for recent low-scoring calls, .rd-criterion-track/fill for the progress bar.
   What remains here is only page-level layout glue -- see criterionDrilldown.js. */
.rd-cd-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.rd-cd-head .rd-page-head { margin-bottom: 0; }
.rd-cd-body { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Section break under the stat row: the tiles sat flush against the first rep card (James,
   2026-08-06; measured 0px, the apparent gap was card padding). The kpi row is a SIBLING of
   rd-cd-body under rd-cd-page, not a child, so the rule anchors on the page container.
   sp-6 = 32px section break vs the sp-4 = 16px card-to-card rhythm. */
.rd-cd-page > .rd-kpi-row { margin-bottom: var(--sp-6); }
.rd-cd-rep { width: 100%; }
.rd-cd-lowcalls { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.rd-cd-lowcalls-title { margin-bottom: var(--sp-2); }

/* Performance-chart call-type toggle (chunk 4b): compact pills in the card head. */
.rd-trend-toggle { margin-bottom: 0; flex-wrap: nowrap; }
.rd-analytics-tab-sm { padding: 4px 11px; font-size: var(--fs-xs); }

/* Individual call page tabs (team-command-v2 chunk 6a): the detail root groups sections into
   data-cd-pane wrappers; only the canonical call page adds .cd-tabbed to show one at a time.
   Legacy contexts never get .cd-tabbed, so every pane stays stacked there. */
.cd-tabs { margin: 0 0 var(--sp-3); }
.cd-tabbed [data-cd-pane] { display: none; }
.cd-tabbed [data-cd-pane].cd-on { display: block; }

/* --------------------- Design pass (2026-07-16): draft-system skin --------------------- */
/* Call mechanics stat tiles (markup from mechBlock() in app.html; renders in canonical AND
   legacy stacked contexts, so these are unscoped). Draft dash-stat spec: big bold number
   over an uppercase micro-label on a soft inset; flagged metrics use the AA bad triple. */
.cd-mech { margin: 2px 0 12px; }
.cd-mech .slabel { margin-bottom: 8px; }
.cd-statgrid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cd-stat { flex: 1 1 104px; min-width: 104px; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 11px; }
.cd-stat strong { display: block; font-size: 19px; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cd-stat small { display: block; margin-top: 2px; font-size: 10px; font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cd-stat-bad { background: var(--bad-bg); border-color: var(--bad-border); }
.cd-stat-bad strong { color: var(--bad-fg); }

/* Legacy scorecard blocks re-skinned to the draft system on the CANONICAL call page only
   (.rd-call-detail wraps toggleDetail output there). Legacy contexts keep their own look. */
.rd-call-detail .scwrap { border-color: var(--line-soft); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1); }
.rd-call-detail .crit { margin-top: var(--sp-4); gap: 0; }
.rd-call-detail .crow { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.rd-call-detail .crow .cl { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.rd-call-detail .dots { gap: 4px; }
.rd-call-detail .dot { width: 12px; height: 12px; background: var(--surface-3); }
.rd-call-detail .dot.on { background: var(--brand); }
.rd-call-detail .coach { margin-top: var(--sp-4); gap: var(--sp-3); }
.rd-call-detail .box { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--sp-4); }
.rd-call-detail .box .h { font-size: 10px; letter-spacing: .12em; margin-bottom: 7px; }
.rd-call-detail .box .h.sum { color: var(--brand-strong); }
.rd-call-detail .coach .h.good { color: var(--good-fg); }
.rd-call-detail .coach .h.imp { color: var(--warn-fg); }
.rd-call-detail .box .t { color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.rd-call-detail .sub { color: var(--muted); font-size: var(--fs-sm); }

/* --------------------- Dashboard grammar (design pass, refs 07-16) --------------------- */
/* KPI row: 4 stat cards across the top. Icon chip + uppercase label, big number,
   tinted delta chip. Accents (green/red/amber) live ONLY in icon chips and deltas. */
.rd-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.rd-kpi { min-width: 0; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.rd-kpi-click { cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.rd-kpi-click:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); border-color: var(--brand); }
.rd-kpi-click:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rd-kpi-top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.rd-kpi-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; }
.rd-kpi-icon-brand { background: var(--brand-tint); color: var(--brand-strong); }
.rd-kpi-icon-cyan { background: color-mix(in srgb, var(--accent-cyan) 12%, var(--surface)); color: var(--accent-cyan); }
.rd-kpi-icon-good { background: var(--good-bg); color: var(--good-fg); }
.rd-kpi-icon-warn { background: var(--warn-bg); color: var(--warn-fg); }
.rd-kpi-icon-bad { background: var(--bad-bg); color: var(--bad-fg); }
.rd-kpi-icon-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.rd-kpi-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rd-kpi-value { margin-top: var(--sp-3); font-size: 32px; line-height: 1; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.rd-kpi-value small { font-size: 15px; font-weight: var(--fw-semibold); color: var(--muted); margin-left: 2px; }
.rd-kpi-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); min-height: 22px; }
.rd-kpi-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.rd-kpi-delta-up { background: var(--good-bg); color: var(--good-fg); }
.rd-kpi-delta-down { background: var(--bad-bg); color: var(--bad-fg); }
.rd-kpi-delta-flat { background: var(--neutral-bg); color: var(--neutral-fg); }
.rd-kpi-hint { font-size: var(--fs-xs); color: var(--muted); }
/* Hero KPI: the ONE inverted card per page (headline stat). --on-brand keeps AA in both themes. */
.rd-kpi-hero { background: linear-gradient(135deg, var(--brand-btn), color-mix(in srgb, var(--brand-btn) 70%, #0A2B66)); border-color: transparent; box-shadow: var(--shadow-btn); }
.rd-kpi-hero .rd-kpi-label { color: color-mix(in srgb, var(--on-brand) 82%, transparent); }
.rd-kpi-hero .rd-kpi-value { color: var(--on-brand); }
.rd-kpi-hero .rd-kpi-value small,
.rd-kpi-hero .rd-kpi-hint { color: color-mix(in srgb, var(--on-brand) 78%, transparent); }
.rd-kpi-hero .rd-kpi-icon { background: color-mix(in srgb, var(--on-brand) 16%, transparent); color: var(--on-brand); }
.rd-kpi-hero .rd-kpi-delta { background: color-mix(in srgb, var(--on-brand) 18%, transparent); color: var(--on-brand); }
/* Mini sparkline (dashboard v3): a flex sibling of the value, never absolutely
   positioned, so it can never drift over the foot row below regardless of hint
   length - a quiet decorative accent (kpiCard.js only renders it alongside the delta
   chip + hint, which carry the same information as text). */
.rd-kpi-value-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.rd-kpi-value-row .rd-kpi-value { margin-top: 0; }
.rd-kpi-spark { flex: 1 1 auto; min-width: 0; max-width: 96px; height: 32px; opacity: 0.9; pointer-events: none; }
.rd-kpi-spark .rd-trend-line { stroke: var(--on-brand); stroke-width: 1.75; }
.rd-kpi-spark .rd-trend-area { fill: var(--on-brand); opacity: 0.16; }
.rd-kpi-spark .rd-trend-dot { fill: var(--on-brand); stroke: none; }

/* Bento: wide main column (chart + drill-down) + narrow right rail of boxes. */
.rd-bento { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.rd-bento-main, .rd-bento-rail { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.rd-bento-rail .rd-focus-grid { grid-template-columns: 1fr; }

/* Activity feed: colored dot bullets (refs' Recent Activity). */
.rd-feed-item { align-items: flex-start; }
.rd-feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; margin-top: 7px; }
.rd-feed-text { min-width: 0; flex: 1 1 auto; }

/* Standouts: avatar + bold name left, muted role label right (refs' people rows). */
.rd-standout-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); font-size: 10px; font-weight: var(--fw-bold); flex: none; }
.rd-standout { gap: var(--sp-3); }
/* A standout that links through to its member renders as a <button>, so it has to be stripped
   back to look identical to the inert <div> variant sitting next to it -- the only difference a
   user should see is that it responds. Full width + text-align:left because a button does not
   inherit the block layout the div gets for free. */
.rd-standout-btn { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-sm, 8px); }
.rd-standout-btn:hover { background: var(--surface-2, rgba(127, 140, 165, .08)); }
.rd-standout-btn:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.rd-standout-name { margin-left: 0; }
.rd-standout-label { margin-left: auto; order: 3; }

/* A member's name rendered INSIDE a sentence as a real control (ACR-348) -- the activity feed's
   "Ana Rep scored 78% on Cold call intro" and the coaching briefing's named lines. The standout
   variant above owns whole rows and so is stripped to look identical to its inert twin; this one
   sits mid-sentence next to plain text, so it strips the button chrome and then adds exactly one
   signal that it responds: the brand link colour, plus an underline on hover. display:inline so a
   long name wraps with the sentence instead of forcing a line box, and font:inherit so a name
   inside the briefing's <b> keeps that bold rather than resetting to the UA button font.
   Tokens only, no literal colours: dark mode is live on this surface.

   Deliberately NOT given the 44px min-height every other control here carries. WCAG 2.5.5/2.5.8
   exempt a target that is inline in a block of text, and a 44px-tall inline control would blow
   the line spacing of the sentence it lives in apart. The inert branch renders as a bare text
   node, so a name with no resolvable member id has no target at all rather than a small one. */
.rd-member-link {
  display: inline; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: var(--brand-strong); text-decoration: none;
  text-align: left; cursor: pointer;
}
.rd-member-link:hover { text-decoration: underline; }
/* --brand-strong, NOT --focus. There is no --focus token in tokens.css; the two rules already
   using it (.rd-trend-range:focus-within, .rd-ta-more-link:focus-visible) resolve to an invalid
   outline and therefore paint NO focus ring at all. Copying that idiom would have shipped a
   keyboard-only control with an invisible focus state while every DOM assertion stayed green.
   .rd-standout-btn:focus-visible right above uses --brand-strong, which is defined for light,
   dark and the [data-theme] pin. Pre-existing bug logged separately, not fixed here. */
.rd-member-link:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; border-radius: var(--r-sm); }

@media (max-width: 1023px) {
  .rd-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-bento { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rd-kpi-row { grid-template-columns: 1fr; }
}

/* Coaching briefing (ACR-374) -- api/team-insights.js's structured summary on the manager command
   center. Tokens only, no literal colours: dark mode is live and this card renders in both. */
.rd-brf { display: flex; flex-direction: column; gap: var(--sp-4); }
.rd-brf-head { color: var(--text-strong); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.rd-brf-sec { display: flex; flex-direction: column; gap: var(--sp-2); }
.rd-brf-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; }
.rd-brf-line { font-size: var(--fs-sm); }
.rd-brf-try { color: var(--muted); }
.rd-brf-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.rd-brf-cap { color: var(--faint); font-size: var(--fs-xs); }