/* ==========================================================================
   Wingman Sales OS — shared design system (Phase 13A)

   Served by Flask from public/ at the site root: /wingman-ui.css
   Link it BEFORE a page's own <style> block so page-specific rules win.

   Phase 13A links this from login.html only. Component primitives below are
   authored against the class vocabulary the other pages already use, so
   later migration phases can adopt them without rewriting markup.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Backgrounds ---------------------------------------------------------- */
  --bg-app: #070b14;
  --bg-sunken: #05080f;
  --surface-1: #0d1424;
  --surface-2: #141d31;
  --surface-3: #1c2842;
  --surface-input: #0a1120;

  /* Text ----------------------------------------------------------------- */
  --text-primary: #e8eef8;
  --text-secondary: #aebdd4;
  --text-muted: #8598b5;
  --text-disabled: #74869f;
  --text-on-brand: #04121a;

  /* Brand ---------------------------------------------------------------- */
  --brand-primary: #00d4ff;
  --brand-primary-hover: #5ce1ff;
  --brand-primary-sunk: #00a6c8;
  --brand-secondary: #8b5cf6;
  --brand-accent: #e879f9;

  /* States --------------------------------------------------------------- */
  --success: #86efac;
  --success-bg: rgba(134, 239, 172, 0.10);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.10);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.10);
  --info: #67e8f9;
  --info-bg: rgba(103, 232, 249, 0.10);

  /* Borders -------------------------------------------------------------- */
  --border-default: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.28);
  --border-hover: rgba(0, 212, 255, 0.38);
  --border-focus: #00d4ff;

  /* Glows ----------------------------------------------------------------
     --glow-focus is defined once, in the Phase 17 block at the foot of this
     file, as a layered falloff rather than a flat ring. It is deliberately
     absent here so there is exactly one definition to reason about. */
  --glow-interact: 0 0 20px rgba(0, 212, 255, 0.18);
  --glow-ambient: 0 0 140px rgba(0, 212, 255, 0.10);
  --glow-secondary: 0 0 28px rgba(139, 92, 246, 0.22);

  /* Spacing (4px scale) --------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii ---------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows -------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.60);

  /* Motion --------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 0.8, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Typography ----------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
}

/* ==========================================================================
   2. BASE ELEMENTS
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color: var(--brand-primary-hover);
  text-decoration: underline;
}

label {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--space-5) 0;
}

::selection {
  background: rgba(0, 212, 255, 0.28);
  color: var(--text-primary);
}

/* Scrollbars sit on dark surfaces; the browser default light track is the
   most visible remaining light-theme artifact once color-scheme is dark. */
* {
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* ==========================================================================
   3. FORM CONTROLS
   ========================================================================== */

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--text-primary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
textarea {
  width: 100%;
  padding: var(--space-3);
  background-color: var(--surface-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

input:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--border-hover);
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--bg-sunken);
  border-color: var(--border-default);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Chrome's autofill repaints the field with its own near-white background;
   the inset shadow is the only reliable way to keep the dark surface. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-input) inset;
  caret-color: var(--text-primary);
}

/* --- Native select hardening ---------------------------------------------
   Native <select> is kept (no custom dropdown component). The popup itself
   is OS-rendered: color-scheme + explicit option/optgroup colors are what
   make it dark and readable. Disabled state sets an explicit colour rather
   than stacking opacity, which is what previously washed the text out.
   ------------------------------------------------------------------------ */

select {
  width: 100%;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-3);
  background-color: var(--surface-input);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2300d4ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

select option {
  background-color: var(--surface-1);
  color: var(--text-primary);
}

select optgroup {
  background-color: var(--bg-sunken);
  color: var(--text-secondary);
  font-weight: 600;
}

select option:checked {
  background-color: var(--surface-3);
  color: var(--brand-primary);
  font-weight: 600;
}

select option:disabled {
  color: var(--text-disabled);
}

select:hover:not(:disabled) {
  border-color: var(--border-hover);
}

select:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--glow-focus);
  outline: none;
}

select:disabled {
  /* Chrome's UA sheet dims a disabled select to opacity .7, which stacks on
     top of --text-disabled and pushes it under 3:1. The explicit colour above
     is the only dimming this design uses, so the UA opacity is reset here. */
  opacity: 1;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2374869f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  cursor: not-allowed;
}

/* ==========================================================================
   4. FOCUS SYSTEM
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* :not(:disabled) is carried here purely to out-specify the :hover rules
   above — without it a hovered field keeps the weaker hover border while
   focused, and the focus cue is the one that must always win. */
/* :focus as well as :focus-visible, for text-entry controls only.
   :focus-visible is the right gate for buttons and links -- it keeps a ring
   off a mouse click -- but a field the caret is sitting in should read as
   active however it was focused, and browsers disagree about whether a
   click or a programmatic .focus() qualifies as "visible". Buttons and
   links below stay on :focus-visible. */
input:not(:disabled):focus,
textarea:not(:disabled):focus,
select:not(:disabled):focus,
input:not(:disabled):focus-visible,
textarea:not(:disabled):focus-visible,
select:not(:disabled):focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--glow-focus);
  outline: none;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

button {
  padding: var(--space-3) var(--space-5);
  background-color: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

button:hover:not(:disabled) {
  background-color: var(--surface-3);
  border-color: var(--border-hover);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  background-color: var(--surface-1);
  border-color: var(--border-default);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.btn-primary,
button.primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}

.btn-primary:hover:not(:disabled),
button.primary:hover:not(:disabled) {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  box-shadow: var(--glow-interact);
}

.btn-primary:active:not(:disabled),
button.primary:active:not(:disabled) {
  background-color: var(--brand-primary-sunk);
  border-color: var(--brand-primary-sunk);
}

.btn-primary:disabled,
button.primary:disabled {
  background-color: var(--brand-primary-sunk);
  border-color: var(--brand-primary-sunk);
  color: var(--text-on-brand);
  cursor: not-allowed;
}

.btn-secondary,
button.secondary {
  background-color: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.btn-secondary:hover:not(:disabled),
button.secondary:hover:not(:disabled) {
  background-color: var(--surface-3);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.btn-danger {
  background-color: transparent;
  border-color: rgba(248, 113, 113, 0.45);
  color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--danger-bg);
  border-color: var(--danger);
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
}

/* ==========================================================================
   6. COMPONENT PRIMITIVES
   Authored for the existing class vocabulary; unused until later phases.
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-6);
}

.panel {
  background-color: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.panel-title {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.panel-title-row .panel-title {
  margin-bottom: 0;
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  margin-bottom: var(--space-2);
}

.form-hint {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background-color: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.status-badge.success {
  background-color: var(--success-bg);
  border-color: rgba(134, 239, 172, 0.35);
  color: var(--success);
}

.status-badge.warning {
  background-color: var(--warning-bg);
  border-color: rgba(251, 191, 36, 0.35);
  color: var(--warning);
}

.status-badge.danger {
  background-color: var(--danger-bg);
  border-color: rgba(248, 113, 113, 0.35);
  color: var(--danger);
}

.status-badge.info {
  background-color: var(--info-bg);
  border-color: rgba(103, 232, 249, 0.35);
  color: var(--info);
}

.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.list-item.clickable {
  cursor: pointer;
}

.list-item.clickable:hover {
  background-color: var(--surface-3);
  border-color: var(--border-hover);
}

.list-item.selected {
  border-color: var(--border-focus);
  box-shadow: var(--glow-interact);
}

table {
  border-collapse: collapse;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.table th {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.table tbody tr:hover td {
  background-color: var(--surface-2);
  color: var(--text-primary);
}

.table .num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background-color: rgba(4, 7, 13, 0.72);
  z-index: 1000;
}

/* Phase 15F-1: `hidden` must actually hide an overlay.
   The rule above is an author declaration, and author declarations beat the
   user agent's `[hidden] { display: none }` regardless of specificity -- so
   without this, setting el.hidden = true left the overlay covering the page
   and the modal impossible to dismiss (the Lead Sources bug fixed in
   15E-6A with a page-local workaround).
   `!important` is deliberate: it makes the hidden state unambiguous against
   a page-level `.modal-overlay[hidden]` override AND against an inline
   `style.display` set by script, so no future page can reintroduce this by
   opening a modal without clearing the attribute. It affects the hidden
   state only -- the visible modal's layout above is untouched. */
.modal-overlay[hidden] {
  display: none !important;
}

/* The shared Saved Conversations overlays. Several pages carry their own
   page-local `.modal-overlay { display: none }` -- ae-conversations does --
   and a page <style> loads after this sheet and ties on specificity, so it
   won and the folder modals stayed invisible even once unhidden. These four
   are the module's own, so they get their own class and out-specify it. The
   pages' own modals are opened with inline style.display, which outranks any
   stylesheet, so nothing here can affect them. */
body .modal-overlay.wm-overlay {
  display: flex;
}

body .modal-overlay.wm-overlay[hidden] {
  display: none !important;
}

.modal {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  background-color: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.empty-state {
  padding: var(--space-10) var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  text-align: center;
}

.empty-state-title {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-md);
  font-weight: 600;
}

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */

.u-row { display: flex; flex-direction: row; align-items: center; }
.u-col { display: flex; flex-direction: column; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-between { justify-content: space-between; }
.u-center { align-items: center; justify-content: center; }
.u-wrap { flex-wrap: wrap; }
.u-grow { flex: 1 1 auto; min-width: 0; }
.u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-muted { color: var(--text-muted); }
.u-right { text-align: right; }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.u-hidden { display: none !important; }
.u-scroll-x { overflow-x: auto; }

/* ==========================================================================
   8. MOTION PRIMITIVES
   Opacity/transform only — never layout-critical properties.
   ========================================================================== */

@keyframes wm-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes wm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.wm-enter {
  animation: wm-rise var(--dur-slow) var(--ease-out) both;
}

.wm-fade-in {
  animation: wm-fade var(--dur-base) var(--ease-standard) both;
}

.wm-lift {
  transition: transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.wm-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Modal-ready primitives for later phases. */
.wm-overlay-enter { animation: wm-fade var(--dur-fast) var(--ease-standard) both; }
.wm-modal-enter { animation: wm-rise var(--dur-base) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .wm-lift:hover {
    transform: none;
  }

  button:active:not(:disabled) {
    transform: none;
  }
}

/* ==========================================================================
   PHASE 17 — WINGMAN SALES OS DESIGN SYSTEM
   --------------------------------------------------------------------------
   One visual physics system for the whole product. Everything below is
   shared: no page may re-declare a surface, radius, border or glow of its
   own. The seed aesthetic is the login screen — deep navy ground, cool-blue
   borders, and a single cyan accent used sparingly so active states stay
   valuable.

   Depth is exactly three levels and never more:
     Level 0  --bg-app      application ground
     Level 1  --surface-1   panels and cards sitting on the ground
     Level 2  --surface-2   nested controls, subcards, active regions
   --surface-3 is a hover/selected tint of level 2, not a fourth level.
   ========================================================================== */

:root {
  /* Layered focus glow -----------------------------------------------------
     Five stops rather than one flat ring: a crisp accent edge, a tight inner
     ring, then three widening halos that fade to nothing. The falloff is what
     makes it read as light rather than as a second border, and no stop is
     opaque enough to affect the readability of text inside the field. */
  --glow-focus:
    0 0 0 1px rgba(0, 212, 255, 1),
    0 0 0 4px rgba(0, 212, 255, 0.30),
    0 0 12px rgba(0, 212, 255, 0.55),
    0 0 28px rgba(0, 212, 255, 0.32),
    0 0 56px rgba(0, 212, 255, 0.18),
    0 0 96px rgba(0, 212, 255, 0.09);

  /* Same physics, lower energy: selected nav, active tabs, chosen cards.
     Deliberately weaker than focus so the focused field is unambiguously
     the one thing the keyboard is pointed at. */
  --glow-select:
    0 0 0 1px rgba(0, 212, 255, 0.70),
    0 0 14px rgba(0, 212, 255, 0.26),
    0 0 36px rgba(0, 212, 255, 0.13),
    0 0 64px rgba(0, 212, 255, 0.06);

  /* Hover is a hint of the same light, never a full focus cue. */
  --glow-hover:
    0 0 0 1px rgba(0, 212, 255, 0.30),
    0 0 16px rgba(0, 212, 255, 0.13),
    0 0 34px rgba(0, 212, 255, 0.06);

  /* Cursor aura ------------------------------------------------------------ */
  --aura-x: 50%;
  --aura-y: 50%;
  /* Halved in 17A-2. The gradient stops below are percentages of this
     radius, so the falloff shape and the peak alpha are untouched -- the
     same light, drawn tighter around the cursor. */
  --aura-size: 280px;
  --aura-opacity: 1;

  /* App shell geometry ----------------------------------------------------- */
  --shell-nav-h: 52px;
  --shell-max-w: 1680px;
}

/* --------------------------------------------------------------------------
   Cursor aura — one shared overlay for the entire product.
   Ambient light emitted around the pointer rather than a visible circle:
   four radial stops with a long tail and no hard edge. pointer-events: none
   so it can never intercept a click, and the peak alpha is low enough that
   contrast underneath is unaffected. Driven by --aura-x / --aura-y, which
   wingman-ui.js updates on a requestAnimationFrame tick.
   -------------------------------------------------------------------------- */
.wm-aura {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--aura-opacity);
  background: radial-gradient(
    circle var(--aura-size) at var(--aura-x) var(--aura-y),
    rgba(0, 212, 255, 0.15) 0%,
    rgba(0, 212, 255, 0.10) 22%,
    rgba(0, 212, 255, 0.055) 42%,
    rgba(0, 212, 255, 0.022) 62%,
    rgba(0, 212, 255, 0) 80%
  );
  transition: opacity var(--dur-slow) var(--ease-standard);
}

/* A coarse pointer has no cursor to follow, so there is nothing to light. */
@media (pointer: coarse) {
  .wm-aura { display: none; }
}

/* Reduced motion means "stop moving things", not "remove the lighting".
   The aura stays and still tracks the pointer — that is the cursor's own
   movement, not an animation the interface invents — but every easing
   transition on it is dropped so nothing drifts, eases or lingers. An
   earlier build hid it outright here, which removed the feature entirely
   for anyone with the OS setting enabled. */
@media (prefers-reduced-motion: reduce) {
  .wm-aura { transition: none; }
}

/* ==========================================================================
   APP SHELL
   ========================================================================== */

.wm-shell {
  min-height: 100vh;
  background: var(--bg-app);
}

.wm-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--shell-nav-h);
  padding: 0 var(--space-5);
  background: rgba(13, 20, 36, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
}

.wm-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}

.wm-brand-mark { color: var(--brand-primary); }

.wm-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.wm-nav::-webkit-scrollbar { display: none; }

/* Nav items set `display` below, which outranks the user agent's
   `[hidden] { display: none }` -- the same specificity trap documented for
   `.modal-overlay` above. Several pages gate the Admin Panel entry purely
   with the `hidden` attribute (`<a id="adminPanelLink" hidden>`), so without
   this guard the Phase 17 nav rule reveals it to every role. The gating
   itself is unchanged; this only lets it keep working. */
.wm-nav [hidden] {
  display: none !important;
}

/* A legacy nav container the renderer emptied by relocating its links. The
   pages style .sc-nav / .ls-nav as flex rows, and an author `display`
   outranks the user agent's `[hidden] { display: none }` -- so the attribute
   alone would leave the empty wrapper still holding its 12-16px row. This
   restores what `hidden` already means. */
.wm-nav-emptied[hidden] {
  display: none !important;
}

.wm-nav a,
.wm-nav button.wm-nav-item {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-out);
}

.wm-nav a:hover,
.wm-nav button.wm-nav-item:hover {
  color: var(--text-primary);
  background: var(--surface-2);
  border-color: var(--border-default);
}

.wm-nav a.current,
.wm-nav a[aria-current="page"],
.wm-nav button.wm-nav-item.current {
  color: var(--brand-primary);
  background: rgba(0, 212, 255, 0.07);
  border-color: rgba(0, 212, 255, 0.32);
  box-shadow: var(--glow-select);
}

.wm-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  white-space: nowrap;
}

.wm-page {
  max-width: var(--shell-max-w);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.wm-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.wm-page-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.wm-page-sub {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  color: var(--text-muted);
}

.wm-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ==========================================================================
   TABS
   ========================================================================== */

.wm-tabs {
  display: flex;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
  scrollbar-width: none;
}

.wm-tabs::-webkit-scrollbar { display: none; }

.wm-tab {
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-out);
}

.wm-tab:hover:not(.active) {
  color: var(--text-primary);
  background: var(--surface-2);
}

.wm-tab.active {
  color: var(--brand-primary);
  background: rgba(0, 212, 255, 0.07);
  border-color: rgba(0, 212, 255, 0.32);
  box-shadow: var(--glow-select);
}

/* ==========================================================================
   METRIC CARDS + ACTIVITY ROWS
   ========================================================================== */

.wm-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.wm-metric {
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.wm-metric-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wm-metric-value {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.wm-metric-note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.wm-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.wm-row:last-child { border-bottom: none; }
.wm-row:hover { background: var(--surface-2); }

/* ==========================================================================
   STATE SURFACES — empty, loading, alerts
   ========================================================================== */

.wm-empty {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.wm-empty-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-secondary);
}

.wm-empty-body {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--text-muted);
}

.wm-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  font-size: var(--text-base);
  color: var(--text-muted);
}

.wm-skeleton {
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: wm-shimmer 1.4s var(--ease-standard) infinite;
}

@keyframes wm-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.wm-alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.wm-alert-info    { border-left-color: var(--info);    background: var(--info-bg); }
.wm-alert-success { border-left-color: var(--success); background: var(--success-bg); }
.wm-alert-warning { border-left-color: var(--warning); background: var(--warning-bg); }
.wm-alert-danger  { border-left-color: var(--danger);  background: var(--danger-bg); }

/* ==========================================================================
   MODAL PARTS  (the overlay itself, and its [hidden] guard, are defined above)
   ========================================================================== */

.wm-modal {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-12));
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.wm-modal-head,
.wm-modal-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.wm-modal-head { border-bottom: 1px solid var(--border-default); }
.wm-modal-foot { border-top: 1px solid var(--border-default); justify-content: flex-end; }
.wm-modal-body { padding: var(--space-5); overflow-y: auto; }

/* ==========================================================================
   COLLAPSIBLES + TOOLTIPS
   ========================================================================== */

.wm-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}

.wm-collapse-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.wm-collapse-toggle[aria-expanded="true"] {
  color: var(--brand-primary);
  border-color: rgba(0, 212, 255, 0.28);
}

.wm-tip { position: relative; }

.wm-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--text-xs);
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
  z-index: 200;
}

.wm-tip:hover::after,
.wm-tip:focus-visible::after { opacity: 1; }

/* ==========================================================================
   SELECTED / ACTIVE CARDS — the same light as focus, one notch down
   ========================================================================== */

.wm-selectable {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-out);
}

.wm-selectable:hover {
  border-color: var(--border-hover);
  box-shadow: var(--glow-hover);
}

.wm-selectable.selected,
.wm-selectable[aria-selected="true"] {
  border-color: rgba(0, 212, 255, 0.40);
  background: var(--surface-2);
  box-shadow: var(--glow-select);
}

/* ==========================================================================
   RESPONSIVE — desktop density is the target. Narrow widths degrade
   gracefully; they do not drive the layout.
   ========================================================================== */

@media (max-width: 900px) {
  .wm-page { padding: var(--space-4) var(--space-3); }
  .wm-page-head { flex-direction: column; align-items: stretch; }
  .wm-topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .wm-brand span:not(.wm-brand-mark) { display: none; }
}

/* ==========================================================================
   PHASE 17B — PRODUCT COMPOSITION LAYER
   --------------------------------------------------------------------------
   Phase 17 unified the visual language. This layer recomposes the pages
   themselves: column structure, sticky regions, density, hierarchy and
   scroll length.

   It works by targeting the structural vocabulary the pages already share
   (.container, .main-grid, .left-column, .panel, .panel-title, .filter-row,
   .summary-grid, tables) rather than by rewriting their markup. Every id,
   class, data attribute, closest() ancestor chain and descendant selector
   the page JS depends on therefore survives untouched -- which matters,
   because these pages sit behind auth and cannot be rendered for review
   here. Composition that cannot be seen must at least be provably safe.

   SPECIFICITY NOTE: each page's own <style> loads after this sheet, so a
   bare `.container` here would lose to the page's `.container`. Selectors
   below are deliberately qualified with `body` to raise specificity by one
   element and win the cascade. That is the whole reason for the `body`
   prefix -- it is not decoration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ONE PAGE WIDTH AND ONE GUTTER
   Pages previously capped at 1100, 1300, 1400 and 1500px, so moving between
   them shifted the content edge. All now share the shell width, which puts
   the same amount of information on screen at 1366/1440/1600.
   -------------------------------------------------------------------------- */
body .container {
  max-width: var(--shell-max-w);
  padding: var(--space-5) var(--space-6) var(--space-12);
}

/* --------------------------------------------------------------------------
   2. MASTER-DETAIL PAGES  (SDR Workspace, AE Workspace, AE Conversations)
   The rail stops scrolling with the detail: it sticks, scrolls internally,
   and the detail column takes the remaining width. This is the single
   biggest reduction in scrolling across the product -- previously the list
   and the detail scrolled as one very long column.
   -------------------------------------------------------------------------- */
body .main-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

body .main-grid > .left-column {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: calc(100vh - var(--space-8));
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

body .main-grid > .left-column > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The detail column is the one that should dominate. */
body .main-grid > .panel {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   3. PANEL DENSITY
   Panels were generous single-purpose cards. Tightened so more rows fit
   above the fold, with the title reduced to a compact eyebrow so it labels
   the panel without competing with the content inside it.
   -------------------------------------------------------------------------- */
body .panel {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

body .panel-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A title row keeps its controls on the baseline of the eyebrow. */
body .panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   4. METRIC STRIPS
   Summary numbers are what the page is asking you to read first, so they
   lose their card chrome and become a tight strip: bigger numbers, smaller
   labels, tabular figures so columns of money line up.
   -------------------------------------------------------------------------- */
body .summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

body .summary-card {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

body .summary-card-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

body .summary-card-value {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. FILTERS AS A TOOLBAR, NOT A SECTION
   A filter panel used to occupy a full block between the summary and the
   data. Compacted into an inline toolbar so the data itself starts higher.
   -------------------------------------------------------------------------- */
body .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

body .filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

body .filter-group label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

body .filter-group select,
body .filter-group input {
  height: 32px;
  padding: 0 var(--space-3);
}

/* --------------------------------------------------------------------------
   6. DENSE TABLES WITH STICKY HEADS
   Admin and remuneration pages are table-first. Rows tightened, headers
   pinned so the column meaning survives a long scroll.
   -------------------------------------------------------------------------- */
body table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

body table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
}

body table tbody tr:hover {
  background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   7. LIST ROWS
   The repeated list-item pattern (referrals, opportunities, ledger entries)
   becomes a compact row that still reads as selectable, using the shared
   selection glow rather than a per-page treatment.
   -------------------------------------------------------------------------- */
/* The Phase 13A .list-item component is a horizontal row
   (display:flex; justify-content:space-between). Eight pages instead use
   it as a stacked card -- .list-item-title, .list-item-sub and
   .list-item-meta as siblings -- so linking the shared sheet to them laid
   those three children out side by side and crushed the name onto two
   lines in a narrow rail. Stacking is restored here; .list-item-meta keeps
   its own flex, which is what actually wants to be a row. */
body .list-item {
  display: block;
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-out);
}

body .list-item:hover {
  border-color: var(--border-hover);
  box-shadow: var(--glow-hover);
}

body .list-item.active,
body .list-item.selected {
  border-color: rgba(0, 212, 255, 0.40);
  background: var(--surface-2);
  box-shadow: var(--glow-select);
}

body .list-item-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
}

body .list-item-sub,
body .list-item-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8. STICKY PAGE HEADER
   The masthead stays available while the body scrolls, so the current page
   and the sign-out control never scroll away.
   -------------------------------------------------------------------------- */
body > header {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  background: rgba(13, 20, 36, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-default);
}

body .header-content {
  max-width: var(--shell-max-w);
  padding: 0 var(--space-6);
  gap: var(--space-4);
}

/* Both shapes: some pages wrap the masthead heading in .header-titles,
   others put a bare <h1> in the header. The bare case previously kept the
   page's own 28px rule and towered over everything beneath it. */
body .header-titles h1,
body > header h1 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

body .header-titles p {
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   9. THREE-COLUMN OPERATOR SURFACES
   Scripting and the sales call are read while talking, so the centre column
   is given the space and the side rails stick and scroll on their own.
   -------------------------------------------------------------------------- */
body .sc-layout {
  gap: var(--space-4);
}

body .sc-rail,
body .sc-col-right {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Lead Sources: rail sticks, detail takes the room. */
body .ls-layout {
  gap: var(--space-4);
  align-items: start;
}

body .ls-rail {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE FALLBACK
   Desktop density drives the layout. Below 1200px the sticky rails release
   and the grids collapse to one column rather than compressing to
   unreadable widths.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  body .main-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body .main-grid > .left-column,
  body .sc-rail,
  body .sc-col-right,
  body .ls-rail {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 900px) {
  body .container {
    padding: var(--space-4) var(--space-3) var(--space-10);
  }

  body .header-content {
    padding: 0 var(--space-3);
  }

  body table th {
    position: static;
  }
}

/* ==========================================================================
   PHASE 17C-1 — SDR WORKSPACE ZONES + BUTTON UNIFICATION
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SDR WORKSPACE: THREE DELIBERATE ZONES
   Phase 17B declared two grid tracks on .main-grid, but this page has three
   children (rail, centre, right context). The third wrapped onto a second
   row and stranded the "Operating As" context under the rail. Three tracks
   are declared explicitly here, scoped to .sdr-grid so the genuinely
   two-column master-detail pages are unaffected.

   Reading order matches the operator's:
     accounts -> conversation -> active chat -> prospect context
   -------------------------------------------------------------------------- */
body .main-grid.sdr-grid {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(300px, 360px);
  gap: var(--space-4);
  align-items: start;
}

/* Both rails stick and scroll on their own so the centre never has to be
   scrolled past to reach context. */
body .sdr-grid > .sdr-rail,
body .sdr-grid > #rightPanel {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  scrollbar-width: thin;
  min-width: 0;
}

body .sdr-grid > .sdr-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

body .sdr-grid > .sdr-center {
  min-width: 0;
}

/* The page sets an inline max-height on #rightPanel; the sticky rail above
   owns that now, so it is neutralised rather than fighting it. */
body .sdr-grid > #rightPanel {
  max-height: calc(100vh - var(--space-8));
}

/* 1366px is a stated target width, so the three zones must survive it.
   Between 1280 and 1440 the rails fall back to their minima (240 + 300)
   and the centre keeps roughly 700px, which still reads as dominant.
   An earlier 1400px breakpoint collapsed the third zone at 1366 -- exactly
   the width the layout is meant to hold. */
@media (min-width: 1280px) and (max-width: 1439px) {
  body .main-grid.sdr-grid {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    gap: var(--space-3);
  }
}

/* Below three-column comfort: drop the context rail under the centre but
   keep the account/conversation rail beside it. */
@media (max-width: 1279px) {
  body .main-grid.sdr-grid {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  }

  body .sdr-grid > #rightPanel {
    grid-column: 2;
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Genuinely narrow: single column, nothing sticky. */
@media (max-width: 1024px) {
  body .main-grid.sdr-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body .sdr-grid > .sdr-rail,
  body .sdr-grid > #rightPanel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  body .sdr-grid > #rightPanel {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   PHASE 17E — AE CONVERSATIONS COCKPIT
   Same defect as the SDR Workspace had, same remedy. The shared
   `body .main-grid` declares two tracks and out-specifies this page's own
   three-track rule, so its third child -- the Handoff Context panel -- wrapped
   onto a second row and stacked under the rail. Three tracks are declared
   explicitly, scoped to .ae-grid, and both outer columns stick and scroll on
   their own so a long conversation list can never spill over the centre.

   Reading order matches the AE's: accounts -> conversations -> saved ->
   active thread -> handoff context.
   -------------------------------------------------------------------------- */
body .main-grid.ae-grid {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(300px, 360px);
  gap: var(--space-4);
  align-items: start;
}

body .ae-grid > .ae-rail,
body .ae-grid > .ae-context {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  scrollbar-width: thin;
  min-width: 0;
}

body .ae-grid > .ae-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

body .ae-grid > .ae-center {
  min-width: 0;
}

/* The rail is a bounded flex column, and this page keeps its `left-column`
   class -- so its panels also match `.left-column > .panel`, which sets
   `min-height: 0`. A flex item with `min-height: 0` and the default
   `flex-shrink: 1` is explicitly allowed to shrink below its own content, so
   once Accounts + Conversations + Saved exceeded the rail's max-height the
   panels compressed instead of the rail scrolling, and their content painted
   outside its box into the section below. Measured at 1440x620: the Accounts
   panel held a 141px box around 254px of content, so 113px of it landed in
   the Conversations band.

   The SDR rail never had this because its container is `.sdr-rail` alone --
   no `left-column` -- so its panels keep `min-height: auto` and cannot shrink.

   Fix: every direct section of the AE rail sizes to its own content and
   refuses to shrink. They then stack in normal flow and the excess makes the
   RAIL scroll, which is the intended behaviour. */
body .sdr-grid > .sdr-rail > *,
body .main-grid.ae-grid > .ae-rail > * {
  flex: 0 0 auto;
  min-height: auto;
}

/* 1366 is a stated target width: the three zones must survive it. */
@media (min-width: 1280px) and (max-width: 1439px) {
  body .main-grid.ae-grid {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    gap: var(--space-3);
  }
}

@media (max-width: 1279px) {
  body .main-grid.ae-grid {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  }

  body .ae-grid > .ae-context {
    grid-column: 2;
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 1024px) {
  body .main-grid.ae-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body .ae-grid > .ae-rail,
  body .ae-grid > .ae-context {
    position: static;
    max-height: none;
    overflow: visible;
  }

  body .ae-grid > .ae-context {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   2. ONE BUTTON FAMILY
   Pages had drifted into separate button geometries: different heights,
   radii, weights and padding on the Workspace, Scripting and the admin
   surfaces. One geometry is defined here for every <button> and .btn-*,
   with variants distinguished only by semantic state -- never by which
   page they happen to live on.

   Existing class names are preserved and styled, never replaced, because
   several are behaviourally referenced by page JS.
   -------------------------------------------------------------------------- */
body button,
body .btn,
body .btn-primary,
body .btn-secondary,
body .btn-ghost,
body .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-out);
}

body button:hover:not(:disabled),
body .btn:hover:not(:disabled),
body .btn-secondary:hover:not(:disabled) {
  background-color: var(--surface-3);
  border-color: var(--border-hover);
  box-shadow: var(--glow-hover);
}

body button:active:not(:disabled) {
  background-color: var(--surface-2);
}

body button:disabled,
body .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* PRIMARY — Send, Save, Continue, the one action a screen is asking for. */
body button.primary,
body button.btn-primary,
body .btn-primary,
body button.submit-btn,
body .submit-btn,
body button.save-button,
body .save-button {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
  font-weight: 600;
}

body button.primary:hover:not(:disabled),
body button.btn-primary:hover:not(:disabled),
body .btn-primary:hover:not(:disabled),
body button.submit-btn:hover:not(:disabled),
body .submit-btn:hover:not(:disabled),
body button.save-button:hover:not(:disabled),
body .save-button:hover:not(:disabled) {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--text-on-brand);
  box-shadow: var(--glow-select);
}

/* SECONDARY is the base geometry above; named here so intent is explicit. */
body button.secondary,
body .btn-secondary {
  background-color: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

/* GHOST / TERTIARY — inline controls that must not compete. */
body button.btn-ghost,
body .btn-ghost,
body button.small,
body .btn-sm {
  height: 28px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

body button.btn-ghost,
body .btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

body button.btn-ghost:hover:not(:disabled),
body .btn-ghost:hover:not(:disabled) {
  background-color: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* DANGER — logout and destructive admin actions.
   Ten pages carry their own `.logout-btn` rule with its own padding and
   font-size, so geometry is restated here (these selectors out-specify a
   bare page class) rather than colour alone.
   The [onclick] hook catches Logout buttons that never had the class --
   sdr-scripting styles its own as `btn-secondary btn-sm`, which rendered a
   28px grey utility button where every other page shows a 34px red one.
   Matching on the handler avoids editing markup that JS may reference. */
body button.btn-danger,
body .btn-danger,
body button.logout-btn,
body .logout-btn,
body button.danger,
body .danger-btn,
body button[onclick*="logout"] {
  height: 34px;
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  background-color: var(--danger-bg);
  border-color: rgba(248, 113, 113, 0.38);
  color: var(--danger);
  font-weight: 600;
}

body button.btn-danger:hover:not(:disabled),
body .btn-danger:hover:not(:disabled),
body button.logout-btn:hover:not(:disabled),
body .logout-btn:hover:not(:disabled),
body button.danger:hover:not(:disabled),
body .danger-btn:hover:not(:disabled),
body button[onclick*="logout"]:hover:not(:disabled) {
  background-color: rgba(248, 113, 113, 0.18);
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35),
              0 0 14px rgba(248, 113, 113, 0.16);
}

/* --------------------------------------------------------------------------
   ONE NAV GEOMETRY
   sdr-scripting and ae-sales-call render nav as pill-shaped <a> elements
   (999px radius, auto height) while every other page renders 34px/6px
   buttons -- the most visible "two component families" symptom. The anchors
   keep their markup and their behaviour; only geometry is brought in line.
   -------------------------------------------------------------------------- */
body .sc-nav a,
body .sc-nav button,
body .ls-nav a,
body .ls-nav button {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 500;
}

/* Tabs are buttons on several pages; they keep tab geometry, not button
   geometry, so a tab strip never reads as a row of buttons. */
body button.tab,
body .tab-btn {
  height: 30px;
  padding: 0 var(--space-3);
  background-color: transparent;
  border-color: transparent;
  color: var(--text-muted);
  font-weight: 500;
}

body button.tab:hover:not(:disabled),
body .tab-btn:hover:not(:disabled) {
  background-color: var(--surface-2);
  border-color: transparent;
  color: var(--text-primary);
  box-shadow: none;
}

body button.tab.active,
body .tab-btn.active {
  background-color: rgba(0, 212, 255, 0.07);
  border-color: rgba(0, 212, 255, 0.32);
  color: var(--brand-primary);
  box-shadow: var(--glow-select);
}

/* A button asked to fill its container still obeys the shared geometry. */
body button[style*="width: 100%"],
body button.btn-block,
body .btn-block {
  width: 100%;
}

/* ==========================================================================
   PHASE 17C-2 — RAIL DISCLOSURES + SAVED CONVERSATIONS
   Built from the same tokens as everything else so the folders rail reads
   as original equipment rather than a bolted-on panel.
   ========================================================================== */

/* A panel title that is also a disclosure. Matches .panel-title's eyebrow
   treatment exactly, so a collapsible panel and a static one have the same
   heading weight. */
body .rail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: auto;
  padding: 0 0 var(--space-3);
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

body .rail-toggle:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
  box-shadow: none;
}

body .rail-caret {
  flex: 0 0 auto;
  color: var(--brand-primary);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

body .rail-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

body .rail-head .rail-toggle {
  flex: 1 1 auto;
  min-width: 0;
}

/* The + control. Square, quiet until hovered, never competing with the
   panel heading next to it. */
body .rail-add {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1;
}

body .rail-add:hover:not(:disabled) {
  border-color: var(--border-hover);
  background: var(--surface-3);
  color: var(--brand-primary);
  box-shadow: var(--glow-hover);
}

body .rail-empty {
  padding: var(--space-3) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ==========================================================================
   PHASE 17E — SHARED DISCLOSURE LANGUAGE
   One collapsible-panel vocabulary for every list that grew long enough to
   need one: SDR Conversations, Saved Conversations, AE Conversations,
   Referral Inbox, Opportunities, and the AE Sales Call opportunity picker.
   The header reuses .rail-toggle/.rail-caret above, so a disclosure and a
   plain .panel-title still weigh the same; only the caret, the count badge
   and the scrolling body are new.
   ========================================================================== */

/* Caret leads, title follows, count sits at the far end. .rail-toggle is
   space-between, so the title takes the slack and the count stays right. */
body .rail-toggle > .rail-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .rail-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  text-align: center;
}

body .rail-toggle:hover:not(:disabled) .rail-count {
  border-color: var(--border-hover);
  color: var(--brand-primary);
}

/* The body scrolls on its own once it passes a sensible height, so a long
   list can never push the panel below it off the rail. Nothing is truncated
   -- every record stays in the DOM and stays reachable by scrolling. */
body .rail-body {
  max-height: 46vh;
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

/* A collapsed panel keeps only its header. The body is hidden with the
   attribute, and .panel is a flex column, so the guard is restated here for
   the same specificity reason as the nav and modal guards above. */
body .rail-body[hidden] {
  display: none !important;
}

/* A panel gated by the `hidden` attribute. The rail rules above give
   `.left-column > .panel` a `display`, which outranks the user agent's
   `[hidden]` -- the same trap as the nav and modal guards. AE Conversations
   reveals its Conversations panel only after an account is chosen, so
   without this the panel would be visible before there was anything in it. */
body .panel[hidden],
body .left-column > .panel[hidden] {
  display: none !important;
}

/* A disclosure panel sizes to its own content -- header alone when collapsed,
   header plus body when expanded -- and must never be compressed by a bounded
   flex parent. `min-height: 0` here (17E's first attempt) did the opposite: it
   licensed the rail to shrink the panel below its content, so the content
   painted over the section beneath it. The rail scrolls instead. */
body .panel[data-wm-disclose] {
  flex: 0 0 auto;
  min-height: auto;
}

/* ---- folders ------------------------------------------------------------ */

body .folder {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

body .folder:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

body .folder-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

body .folder-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  text-align: left;
}

body .folder-toggle:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
  box-shadow: none;
}

body .folder-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .folder-count {
  flex: 0 0 auto;
  min-width: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

body .folder-body {
  padding: var(--space-1) 0 var(--space-2) var(--space-5);
}

/* A saved entry is a pointer to the same conversation the main list opens,
   so it is styled as a quiet row rather than as a second conversation card
   competing with the real list above it. */
body .folder-conv,
body .folder-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  height: 30px;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 400;
  text-align: left;
}

body .folder-conv:hover:not(:disabled),
body .folder-pick:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-hover);
  color: var(--text-primary);
  box-shadow: var(--glow-hover);
}

body .folder-pick {
  height: 34px;
  margin-bottom: var(--space-2);
  border-color: var(--border-default);
  background: var(--surface-2);
}

body .folder-pick:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

body .folder-conv-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .folder-conv-stage {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The add-conversation list can be long; it scrolls inside the modal
   rather than growing the modal past the viewport. */
body #addToFolderList {
  max-height: 46vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Phase 17C-3: folder action icons. Subtle by default so a destructive
   control never dominates the rail; the danger tone only appears on hover. */
body .folder-action {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-disabled);
  font-size: var(--text-sm);
  line-height: 1;
}

body .folder-action:hover:not(:disabled) {
  border-color: var(--border-default);
  background: var(--surface-2);
  color: var(--text-primary);
  box-shadow: none;
}

body .folder-action-danger:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.38);
  background: var(--danger-bg);
  color: var(--danger);
}

/* A saved row and its remove control sit side by side, so removing never
   overlaps the row's own click target. */
body .folder-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

body .folder-row .folder-conv {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

body .folder-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-disabled);
  font-size: var(--text-md);
  line-height: 1;
}

body .folder-remove:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.38);
  background: var(--danger-bg);
  color: var(--danger);
  box-shadow: none;
}

body .folder-body .folder-add {
  margin-top: var(--space-1);
}

/* ==========================================================================
   PHASE 17C-4 — MULTI-LINE BUTTON CARDS
   The 17C-1 button unification gave every <button> a fixed 34px height and
   vertical centring. That is right for a control and wrong for a button
   that is really a two-line card: the Scripting module rail rendered at
   34px with 43px of content, clipping the card and pushing the branch-count
   subtitle 8px past its own lower border.

   These buttons opt out of the fixed geometry and keep the shared surface,
   border, radius and selection glow. Everything else about the button
   family is unchanged.
   ========================================================================== */

body .sc-module-btn,
body .stage-btn {
  display: block;
  height: auto;
  min-height: 0;
  padding: var(--space-3) var(--space-4);
  line-height: 1.4;
  white-space: normal;
  text-align: left;
}

/* ==========================================================================
   PHASE 17F — LEAD SOURCES CARD
   Same 34px trap as the Scripting cards above, one layer worse. `.ls-source`
   is a <button> holding three stacked rows (name, chips, metrics). Its own
   page rule sets display and padding but never a height, so the shared
   `body button { height: 34px }` applied unopposed: measured at a 256px rail,
   every card rendered a 34px box around 107px of content and painted its
   metrics row 74px BELOW its own lower border.

   The card is sized for the narrow rail, not for a desktop-width card: it
   grows with its content, wraps long community names, and lets the six
   metrics wrap to a second compact row rather than being squeezed onto one.
   Surface, border, radius, typography and hover all stay as the page and the
   Phase 17 system define them -- only the box geometry changes.
   ========================================================================== */

body .ls-source {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-2);
  height: auto;
  min-height: 0;
  padding: var(--space-3);
  line-height: 1.4;
  white-space: normal;
  text-align: left;
}

/* The page spaces these rows with margins; the flex `gap` above now owns the
   rhythm, so the margins are dropped rather than added to it. */
body .ls-source .ls-source-name,
body .ls-source .ls-source-tags {
  margin-bottom: 0;
}

/* Long names wrap instead of forcing the card wider than the rail. */
body .ls-source .ls-source-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A source with no chips must not leave an empty row behind. */
body .ls-source .ls-source-tags:empty {
  display: none;
}

/* Six metrics do not fit one line at rail width. They wrap to a second row,
   and each label+value stays glued together so "Dup 61" never splits. */
body .ls-source .ls-counts {
  flex: 0 0 auto;
  min-width: 0;
}

body .ls-source .ls-counts > span {
  white-space: nowrap;
}

/* Title line: sits on its own row so the subtitle can never ride up on it. */
body .sc-module-btn {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
}

body .sc-module-btn.selected {
  color: var(--text-primary);
}

/* Branch count / subtitle. The margin is what guarantees separation from
   the title, and the block display keeps it inside the padded box. */
body .sc-module-btn .sc-module-meta {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
}

/* Phase 18B-4: Telegram account profile card. Lives here rather than in each
   panel so the two panels cannot drift apart visually. */
.tg-profile { margin-top: 16px; padding: 12px; border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.15); }
.tg-profile[hidden] { display: none; }
.tg-profile-title { font-weight: 600; margin-bottom: 8px; }
.tg-profile-label { display: block; font-size: 0.85em; opacity: 0.8; margin-top: 8px; }
.tg-profile-input { width: 100%; box-sizing: border-box; }
.tg-profile-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tg-profile-status { margin: 4px 0; font-size: 0.9em; }
.tg-profile-status:empty { display: none; }
.tg-profile-status.error { color: #ff6b6b; }
.tg-profile-status.success { color: #51cf66; }
.tg-profile-status.notice { color: #ffd43b; }
.tg-profile-status.warning { color: #ffa94d; font-weight: 600; }
.tg-profile-check { margin-left: 8px; background: none; border: none; padding: 0;
  color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }


/* ===== Phase 18D: internal fictional persona (SDR read + ADMIN editor) ===== */
/* The banner is deliberately loud: the single most important property of this
   content is that it is fiction, and that has to survive a glance. */
.persona-banner {
  border-left: 4px solid #b58900;
  background: rgba(181, 137, 0, 0.08);
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.persona-note { font-size: 12px; opacity: 0.85; margin-top: 4px; }
.persona-empty { font-size: 13px; opacity: 0.75; padding: 6px 0; }
.persona-list { display: flex; flex-direction: column; gap: 8px; }
.persona-row { display: flex; flex-direction: column; gap: 2px; }
.persona-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.persona-value { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
/* Prohibited claims are shown first and styled as a warning: their only value
   is being read BEFORE someone types, not after. */
.persona-prohibited {
  border-left: 4px solid #cb4b16;
  background: rgba(203, 75, 22, 0.10);
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.persona-status { font-size: 13px; margin-top: 8px; }
.persona-status.error { color: #cb4b16; }
.persona-status.success { color: #859900; }
.persona-status.info { opacity: 0.8; }