@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap");
@import url("/brand/recovery-console/css/recovery-console-brand-tokens.css");

:root {
  /* ═══════════════════════════════════════════════════════
     App-level aliases → canonical DW-BlueSlate tokens.
     ALL raw hex lives in recovery-console-brand-tokens.css.
     Do NOT add hex values here; add a --dw-* token first.
     ═══════════════════════════════════════════════════════ */

  /* Fonts */
  --font-body:    var(--dw-font-body);
  --font-display: var(--dw-font-display);
  --font-mono:    var(--dw-font-mono);
  --font-data:    var(--dw-font-display);

  /* Surfaces */
  --page-bg:       var(--dw-bg);
  --page-bg-deep:  var(--dw-bg-deep);
  --page-bg-edge:  var(--dw-bg-deep);
  --surface-base:  var(--dw-surface);
  --surface-raised: var(--dw-surface-h);
  --surface-strong: var(--dw-surface-2);
  --surface-overlay: rgba(19, 29, 42, 0.94);
  --surface-dark:  var(--dw-surface-2);
  --surface-dark-raised: var(--dw-border);
  --surface-dark-top: var(--dw-border-strong);
  --surface-hero-card: rgba(255, 255, 255, 0.07);

  /* Text */
  --text-primary:       var(--dw-text);
  --text-secondary:     var(--dw-text-2);
  --text-subtle:        var(--dw-text-3);
  --text-inverse:       var(--dw-text-inv);
  --text-inverse-muted: var(--dw-text-3);

  /* Borders */
  --border-subtle:  var(--dw-border);
  --border-strong:  var(--dw-border-strong);
  --border-inverse: rgba(255, 255, 255, 0.18);

  /* Accent: Electric Cyan / Blue */
  --accent-primary:        var(--dw-blue);
  --accent-primary-strong: var(--dw-blue-bright);
  --accent-primary-soft:   var(--dw-blue-soft);

  /* Accent: Warm Copper / Gold */
  --accent-heritage:      var(--dw-gold);
  --accent-heritage-soft: var(--dw-gold-soft);

  /* Support */
  --accent-support:      var(--dw-blue);
  --accent-support-soft: rgba(56, 189, 248, 0.10);

  /* Success */
  --accent-success:      var(--dw-green);
  --accent-success-soft: var(--dw-green-soft);

  /* Danger */
  --accent-danger:      var(--dw-red);
  --accent-danger-soft: var(--dw-red-soft);

  /* Neutral */
  --accent-neutral:      var(--dw-neutral);
  --accent-neutral-soft: var(--dw-neutral-soft);

  --focus-ring:     var(--dw-focus-ring);
  --shadow:         0 18px 42px rgba(0, 0, 0, 0.4);
  --shadow-strong:  0 24px 60px rgba(0, 0, 0, 0.5);
  --radius: 12px;

  /* Semantic shorthand aliases */
  --paper:        var(--dw-bg);
  --paper-strong: var(--dw-surface);
  --ink:          var(--dw-text);
  --ink-soft:     var(--dw-text-2);
  --line:         var(--dw-border);
  --sun:          var(--dw-gold);
  --sun-soft:     var(--dw-gold-soft);
  --ember:        var(--dw-red);
  --ember-soft:   var(--dw-red-soft);
  --sage:         var(--dw-green);
  --sage-soft:    var(--dw-green-soft);
  --sky:          var(--dw-blue);
  --sky-soft:     var(--dw-blue-soft);
  --night:        var(--dw-text);
  --night-soft:   rgba(240, 244, 248, 0.15);
  --ash:          var(--dw-neutral);
  --ash-soft:     var(--dw-neutral-soft);
}

/* ── T2-8: Extracted utility classes (formerly inline styles) ── */
.u-margin-bottom-sm  { margin: 0 0 1rem; }
.u-grid-2col         { grid-template-columns: 1fr 1.5fr; }
.u-grid-2col-sidebar { grid-template-columns: 1fr 280px; }
.u-grid-2col-equal   { grid-template-columns: 1fr 1fr; }
.u-grid-2col-wide    { grid-template-columns: 2fr 1fr; }
.u-grid-2col-intel   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.u-panel-padded      { padding: 1rem; }
.u-panel-padded-sm   { padding: 0.75rem; }
.u-chart-container   { position: relative; height: 220px; }
.u-chart-sm          { position: relative; height: 180px; }
.u-chart-md          { position: relative; height: 200px; }
.u-chart-lg          { position: relative; height: 260px; }
.u-form-label        { font-size: 0.85rem; color: var(--text-secondary); }
.u-form-input        { width: 100%; padding: 0.4rem; border: 1px solid var(--border-strong); border-radius: 8px; }
.u-form-grid         { padding: 0.75rem; display: grid; gap: 0.75rem; }

/* ── G-A11Y-6 — utilities for index.html sweep ── */
.u-mb-10             { margin-bottom: 10px; }
.u-mb-1              { margin-bottom: 1rem; }
.u-mb-16             { margin-bottom: 16px; }
.u-mt-1              { margin-top: 1rem; }
.u-mt-half           { margin-top: 0.5rem; }
.u-my-3              { margin: var(--dw-space-3) 0; }
.u-my-half           { margin: 0.5rem 0; }
.u-row-gap-sm        { display: flex; align-items: center; gap: 0.5rem; }
.u-row-gap-3         { display: flex; align-items: center; gap: 12px; }
.u-row-gap-4         { display: flex; gap: 4px; }
.u-row-between       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.u-card-row          { margin-bottom: 16px; padding: 16px; }
.u-padded-h          { padding: 0 0.75rem; font-size: 0.8rem; color: var(--text-secondary); }
.u-padded-bottom     { padding: 0 0.75rem 0.75rem; }
.u-chart-tall-md     { position: relative; height: 240px; }
.u-padded-16         { padding: 16px; }
.u-divider-top-16    { margin-top: 16px; border-top: 1px solid var(--border-default); padding-top: 16px; }
.u-divider-top-12    { margin-top: 12px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.u-meta-mb-8         { margin: 0 0 8px; color: #6B7E94; }
.u-mb-8              { margin: 0 0 8px; }
.u-overflow-y-200    { max-height: 200px; overflow-y: auto; }
.u-grid-pipeline-5   { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; border-radius: 6px; overflow: hidden; }
.u-grid-3col         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.u-grid-2col-asym    { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.u-funnel-bar        { display: flex; align-items: stretch; height: 56px; border-radius: 8px; overflow: hidden; }
.u-meta-summary      { font-size: 11px; color: #6B7E94; cursor: pointer; user-select: none; letter-spacing: 0.02em; }
.u-helper-meta       { font-size: 0.8rem; color: var(--text-secondary); margin: 0.5rem 0; }
.u-status-chip-mono  { font-family: var(--font-mono); font-size: 10px; padding: 4px 10px; border-radius: 3px; background: var(--surface-base); color: var(--text-muted); }
.u-hero-h2           { font-family: var(--font-display); letter-spacing: 2px; }
.u-search-input      { flex: 1; max-width: 400px; }
.u-text-primary      { color: var(--text-primary); }
.u-text-accent       { color: var(--accent-primary); }
.u-brand-divider-2   { color: var(--accent-primary); margin: 0 2px; }
.u-brand-divider-3   { color: var(--accent-primary); margin: 0 3px; }
.u-attribution-meta  { margin-top: 10px; font-size: 12px; color: #8899AA; line-height: 1.5; }
.u-signout-btn       { margin-top: 0.5rem; color: var(--text-subtle); }
.u-hidden            { display: none; }

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

html {
  scroll-behavior: smooth;
  /* Display density: scales all rem-based values. 16px = 1rem default.
     Adjusted by .display-compact (14px) and .display-comfortable (18px) on body. */
  font-size: 16px;
}

/* ── Display density modes (user preference) ── */
:root {
  --tap-min: 44px;
}
body.display-compact {
  font-size: 0.875rem;
  --tap-min: 40px;
}
body.display-comfortable {
  font-size: 18px;
  --tap-min: 52px;
}
/* Respect OS-level text scaling */
@media (prefers-reduced-data: reduce) {
  html { font-size: 16px; }
}

/* G18: respect prefers-reduced-motion. Vestibular-disorder users + WCAG 2.3.3.
   Disable all animations + transitions; keep one-frame transforms so the
   layout still updates, just instantly. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* G34/F-039: visually-hidden h1 for IA + skip link. Standard a11y patterns.
   Skip link reveals on keyboard focus. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 0.5rem 1rem;
  background: var(--accent-primary);
  color: var(--dw-bg);
  z-index: 10000;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  font-weight: 600;
}
.skip-link:focus {
  top: 0;
}

/* G18: forced-colors mode (Windows high-contrast). Surface our token-based
   colors as explicit system colors so low-vision users keep contrast. */
@media (forced-colors: active) {
  :root {
    --page-bg: Canvas;
    --surface-base: Canvas;
    --surface-raised: Canvas;
    --text-primary: CanvasText;
    --text-secondary: CanvasText;
    --border-subtle: CanvasText;
    --border-strong: CanvasText;
    --accent-primary: LinkText;
  }
  .send-action-btn,
  .action-button,
  .ghost-button,
  .outcome-confirm-btn {
    border: 1px solid CanvasText;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Thin scrollbar — matches Gen2 pages */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--page-bg); }
::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }

/* Subtle grid overlay — visual depth cue from Gen2 */
.shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--dw-z-base);
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(56,189,248,0.02) 0px, rgba(56,189,248,0.02) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg, rgba(56,189,248,0.02) 0px, rgba(56,189,248,0.02) 1px, transparent 1px, transparent 80px);
}

/* Scanline texture — subtle CRT depth effect */
.shell::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--dw-z-max);
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
}

/* Fade-up entrance animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.auth-screen {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.06), transparent 22rem),
    var(--page-bg);
}

/* Phase D-1: subtle grid overlay matches the signup page so the auth journey
   feels visually continuous (signup → login → in-app are all dark + branded). */
body.auth-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(0deg, transparent 24%, rgba(56, 189, 248, 0.03) 25%, rgba(56, 189, 248, 0.03) 26%, transparent 27%, transparent 74%, rgba(56, 189, 248, 0.03) 75%, rgba(56, 189, 248, 0.03) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, rgba(56, 189, 248, 0.03) 25%, rgba(56, 189, 248, 0.03) 26%, transparent 27%, transparent 74%, rgba(56, 189, 248, 0.03) 75%, rgba(56, 189, 248, 0.03) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
}
body.auth-screen .auth-shell {
  position: relative;
  z-index: 1;
}

button,
textarea,
input,
select {
  font: inherit;
  color: inherit;
}

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

button:focus-visible,
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1400px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 0.5rem 0 2rem;
}

.workspace-nav {
  position: sticky;
  top: 0;
  z-index: var(--dw-z-dropdown);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0;
  margin: 0 0 0.5rem;
  background: rgba(19, 29, 42, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}

.workspace-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-subtle);
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.workspace-tab:hover {
  color: var(--text-primary);
  background: var(--surface-base);
}

.workspace-tab.is-active {
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
}

.workspace-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1rem;
}

.workspace {
  display: none;
}

.workspace.is-active {
  display: block;
}

.workspace-header {
  margin-bottom: 1rem;
}

#workspace-today .workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
#today-replay-tour {
  flex-shrink: 0;
  white-space: nowrap;
}

.workspace-copy {
  max-width: 52rem;
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.workspace-grid {
  display: grid;
  gap: 1rem;
  align-items: start;
}

/* Jobs layout — single list + detail */
.jobs-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 36rem;
}

/* Legacy 2-col override removed — now single-column inline expand */
.jobs-layout.jobs-layout--inline {
  display: flex;
  flex-direction: column;
}

.jobs-list-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  max-height: 85vh;
}

/* ── Inline expand/collapse for job detail ── */
.job-item-wrapper {
  display: flex;
  flex-direction: column;
}
.job-item-wrapper.expanded > .job-row {
  border-color: var(--dw-blue);
  background: var(--dw-surface-h);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.job-inline-detail {
  background: var(--dw-surface);
  border: 1px solid var(--dw-blue);
  border-top: none;
  border-radius: 0 0 var(--dw-radius-md) var(--dw-radius-md);
  padding: var(--dw-space-4) var(--dw-space-4) var(--dw-space-6);
  animation: slideDown 0.15s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  to   { opacity: 1; max-height: 2000px; }
}

/* Last-viewed indicator — shows which row was previously expanded */
.job-item-wrapper.last-viewed > .job-row {
  border-left: 3px solid var(--dw-blue);
}
.job-row.last-viewed {
  border-left: 3px solid var(--dw-blue);
}

/* Collapse animation for detail panels */
@keyframes slideUp {
  from { opacity: 1; max-height: 2000px; }
  to   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
}

.jobs-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  position: sticky;
  top: 0;
  background: var(--page-bg);
  z-index: 2;
}

.job-filter-select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-base);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.job-count-label {
  font-size: 0.8rem;
  color: var(--text-subtle);
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.job-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 80ms ease;
  font: inherit;
}

.job-row:hover {
  background: var(--surface-raised);
}

.job-row.active {
  background: var(--surface-dark);
  color: var(--text-primary);
}

.job-row.active .pill {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.job-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.job-row-detail {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.job-row.active .job-row-detail {
  color: var(--text-subtle);
}

.job-row-meta {
  display: flex;
  gap: 0.8rem;
  font-size: 0.76rem;
  color: var(--text-subtle);
  margin-top: 0.2rem;
}

.job-row.active .job-row-meta {
  color: var(--text-subtle);
}

/* Dashboard */
.dashboard-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.3rem 0 0.8rem;
}

.dash-metric {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.dash-metric strong {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.dash-metric span {
  font-size: 0.6875rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-section {
  padding: 0.5rem 0;
}

.funnel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0;
  font-size: 0.85rem;
}

.funnel-step strong {
  font-family: var(--font-display);
  color: var(--text-primary);
}

.funnel-arrow {
  color: var(--text-subtle);
  font-size: 0.8rem;
}

.category-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.3rem 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

/* Activity log */
.activity-log-entry {
  padding: 0.4rem 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.activity-log-entry:last-child {
  border-bottom: none;
}

/* Pipeline view */
.pipeline-summary {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.pipeline-summary strong {
  color: var(--text-primary);
  font-family: var(--font-display);
}

.pipeline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.pipeline-table th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  border-bottom: 1px solid var(--border-strong);
}

.pipeline-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
}

.pipeline-table .pill.small {
  font-size: 0.74rem;
  padding: 0.2rem 0.5rem;
}

/* Job fields */
.job-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.3rem 0;
}

.job-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 100px;
}

.job-fields label span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.job-fields select,
.job-fields input {
  padding: 0.35rem 0.5rem;
  font-size: 0.84rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-base);
  color: var(--text-primary);
}

/* Call log form */
.log-call-row {
  margin: 0.2rem 0;
}

.call-log-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0;
}

.call-log-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.call-log-form select,
.call-log-form input,
.call-log-form textarea {
  flex: 1;
  min-width: 120px;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.call-log-form textarea {
  resize: vertical;
  min-height: 2.5rem;
}

.call-log-form input[type="text"],
.call-log-form input[type="datetime-local"] {
  flex: 2;
}

.call-log-duration {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* Conditional fields area (appears based on outcome selection) */
.call-log-conditional {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.3rem 0;
}
.call-log-conditional:empty {
  display: none;
}
.field-hint {
  font-size: 0.78rem;
  color: var(--text-subtle);
  font-style: italic;
  padding: 0.25rem 0;
}

/* Next action banner on job detail */
.next-action-banner {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--accent-primary);
  background: var(--surface-raised);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  color: var(--text-primary);
  margin: 0.3rem 0;
}
.next-action-time {
  color: var(--text-subtle);
  font-size: 0.78rem;
}

/* Automation thread entry */
.thread-entry.automation {
  border-left: 3px solid var(--accent-primary);
  background: var(--surface-raised);
  font-size: 0.8rem;
  color: var(--text-subtle);
}

/* Read-only field display */
.field-readonly {
  display: inline-block;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

/* ─── Source attribution & context bar ─── */
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.source-badge.sky {
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
}
.source-badge.sun {
  background: var(--accent-heritage-soft);
  color: var(--accent-heritage);
}
.source-badge.subtle {
  background: var(--surface-raised);
  color: var(--text-subtle);
}
.source-badge.night {
  background: var(--surface-strong);
  color: var(--text-secondary);
}

.external-ids-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.15rem 0;
}
.external-id-link {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-subtle);
  background: var(--surface-raised);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  cursor: default;
}

.job-context-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.25rem 0;
}
.ctx-chip {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  font-size: 0.72rem;
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  white-space: nowrap;
}
.ctx-chip.fire {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger);
  font-weight: 600;
}
.ctx-chip.sun {
  background: var(--accent-heritage-soft);
  color: var(--accent-heritage);
  font-weight: 600;
}
.ctx-chip.consent {
  background: rgba(34, 197, 94, 0.12);
  color: var(--dw-green);
}

/* ─── Thread expand/collapse ─── */
.thread-expand-btn {
  background: none;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0 0.25rem;
  vertical-align: middle;
  transition: color 0.15s;
}
.thread-expand-btn:hover {
  color: var(--accent-primary);
}
.thread-detail-expand {
  margin-top: 0.3rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface-raised);
  border-radius: 6px;
  border-left: 2px solid var(--border-subtle);
}
.thread-detail-field {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0.1rem 0;
  line-height: 1.4;
}
.thread-detail-label {
  font-weight: 600;
  color: var(--text-subtle);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 0.3rem;
}
.thread-src-badge {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--text-subtle);
  background: var(--surface-raised);
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  vertical-align: middle;
}

/* External sync entry */
.thread-entry.external-sync {
  border-left: 3px solid var(--accent-heritage);
  background: var(--surface-raised);
  font-size: 0.8rem;
  color: var(--text-subtle);
}

/* Audit trail entry in thread */
.thread-entry.audit {
  border-left: 2px solid var(--accent-heritage);
  padding-left: 0.5rem;
}

.thread-audit-detail {
  font-size: 0.75rem;
  color: var(--text-subtle);
  font-family: var(--font-mono);
}

/* Tech-grouped view */
.tech-group-header {
  padding: 0.5rem 0.7rem 0.25rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.4rem;
}

.tech-group-header:first-child {
  border-top: none;
  margin-top: 0;
}

/* Thread view */
.thread-view {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.thread-entry {
  padding: 0.4rem 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.thread-entry:last-child {
  border-bottom: none;
}

.thread-time {
  font-size: 0.74rem;
  color: var(--text-subtle);
  margin-right: 0.4rem;
}

.thread-entry.inbound {
  border-left: 3px solid var(--accent-support);
  padding-left: 0.6rem;
}

.thread-entry.outbound {
  border-left: 3px solid var(--accent-primary);
  padding-left: 0.6rem;
}

.thread-entry.stage-change {
  font-size: 0.78rem;
  color: var(--text-subtle);
  font-style: italic;
}

.thread-body {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.thread-entry.note {
  background: var(--surface-raised);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}

/* Legacy operations grid — kept for backward compat but no longer default */
.operations-grid {
  grid-template-columns: 0.85fr 0.85fr 1.3fr;
}

.operations-grid .detail-panel {
  grid-row: span 2;
  min-height: 42rem;
  grid-column: 3;
}

.dispatch-panel {
  grid-column: 2;
}

.prospects-grid {
  grid-template-columns: 0.85fr 0.85fr 1.3fr;
}

.prospects-grid .detail-panel {
  grid-row: span 2;
  grid-column: 3;
  min-height: 34rem;
}

.reporting-grid {
  grid-template-columns: 1fr 1fr;
}

.reporting-grid .reporting-panel,
.reporting-grid .contacts-panel {
  grid-column: 1 / -1;
}

.reporting-grid .report-history-panel,
.reporting-grid .closeout-backlog-panel,
.reporting-grid .compliance-panel {
  grid-column: span 1;
}

.reporting-grid .report-digest-panel,
.reporting-grid .focus-digest-panel,
.reporting-grid .analytics-panel,
.reporting-grid .export-panel,
.reporting-grid .contacts-panel,
.reporting-grid #reconciliation-panel {
  grid-column: 1 / -1;
}

.admin-grid {
  grid-template-columns: 1fr 1fr;
}

.platform-grid {
  grid-template-columns: 1.15fr 0.85fr;
}

.platform-grid .platform-users-panel {
  grid-column: 1 / -1;
}

.platform-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.platform-table th {
  text-align: left;
  padding: 0.6rem 0.7rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-strong);
}

.platform-table td {
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.platform-table tbody tr {
  cursor: pointer;
  transition: background 120ms ease;
}

.platform-table tbody tr:hover {
  background: var(--surface-raised);
}

.platform-table tbody tr.is-selected {
  background: var(--accent-primary-soft);
  border-left: 3px solid var(--accent-primary);
}

.impersonation-banner {
  background: var(--accent-primary-soft);
  border-left: 4px solid var(--accent-primary);
  border-radius: 12px;
  margin: 0.75rem 0;
  padding: 0.65rem 1rem;
}

.impersonation-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#impersonation-label {
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* ── Operating Mode Banner ── */
.operating-mode-banner {
  border-radius: 12px;
  margin: 0.75rem 0;
  padding: 0.65rem 1rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.operating-mode-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.operating-mode-cta {
  margin-left: auto;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.operating-mode-cta:hover,
.operating-mode-cta:focus-visible {
  background: currentColor;
  color: var(--surface-base, #fff);
}
.operating-mode-icon {
  font-size: 1rem;
  line-height: 1;
}
.operating-mode-banner[data-mode="demo"] {
  background: var(--accent-heritage-soft);
  border-left: 4px solid var(--accent-heritage);
  color: var(--accent-heritage);
}
.operating-mode-banner[data-mode="live"] {
  background: var(--accent-success-soft);
  border-left: 4px solid var(--accent-success);
  color: var(--accent-success);
}

/* ── Top Bar (replaces hero) ── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1rem;
  height: 48px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--dw-z-sticky);
}
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.top-bar-brand {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.top-bar-switcher {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8rem;
}
.top-bar-center {
  flex: 1;
  max-width: 480px;
  position: relative;
}
.top-bar-search {
  width: 100%;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--surface-raised);
  color: var(--text-primary);
}
.top-bar-search-results {
  display: none;
  position: absolute;
  z-index: var(--dw-z-overlay);
  background: var(--surface-base);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 50vh;
  overflow-y: auto;
  width: 100%;
  margin-top: 0.25rem;
}
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.top-bar-chip {
  font-size: 0.68rem;
  color: var(--text-subtle);
  white-space: nowrap;
}

/* Ops sub-tabs (merged recovery tabs into operations) */
.ops-sub-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ops-sub-tab {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.ops-sub-tab:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.ops-sub-tab.active {
  background: rgba(56, 189, 248, 0.1);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: 600;
}

/* ── Two-column operations layout ── */
.ops-two-col {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  min-height: calc(100vh - 140px);
}
.ops-queue-list {
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  max-height: calc(100vh - 180px);
  position: sticky;
  top: 0;
}
.ops-queue-list .jobs-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--page-bg);
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.ops-detail-pane {
  overflow-y: auto;
  max-height: calc(100vh - 180px);
  padding: 0.75rem;
}
@media (max-width: 768px) {
  .ops-two-col {
    grid-template-columns: 1fr;
  }
  .ops-queue-list {
    max-height: 40vh;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .ops-detail-pane {
    max-height: none;
  }
}

/* ── Call outcome modal ── */
.call-outcome-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}
.call-outcome-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: border-color 0.15s, background 0.15s;
}
.call-outcome-option:hover {
  border-color: var(--accent-primary);
}
.call-outcome-option input[type="radio"] {
  display: none;
}
.call-outcome-option:has(input:checked) {
  border-color: var(--accent-primary);
  background: rgba(56, 189, 248, 0.08);
}
.call-outcome-option:has(input:checked) span {
  font-weight: 600;
}
.log-call-cta {
  width: 100%;
  padding: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  background: var(--accent-primary);
  color: var(--page-bg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.log-call-cta:hover {
  filter: brightness(1.1);
}

/* ── Send preview modal ── */
.send-preview-body {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}

/* ── Stage pipeline (deprecated — replaced by .record-stage-label) ── */
.stage-pipeline {
  display: none;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.4rem 0 0.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stage-pip {
  padding: 0.2rem 0.4rem;
  font-size: 0.62rem;
  font-family: var(--font-body);
  white-space: nowrap;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}
.stage-pip.done {
  background: rgba(52, 211, 153, 0.12);
  color: var(--accent-success);
}
.stage-pip.current {
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent-primary);
  font-weight: 700;
}
.stage-connector {
  width: 10px;
  height: 2px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

/* ── Primary job CTA ── */
.primary-job-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--accent-primary);
  color: var(--page-bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.primary-job-cta:hover {
  filter: brightness(1.1);
}

/* ── Stage label (simple text, not pipeline) ── */
.record-stage-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-primary);
  background: rgba(56, 189, 248, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  margin-right: 0.5rem;
}

/* ── Simplified action bar ── */
.record-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

/* ── Mobile: top bar compact ── */
@media (max-width: 768px) {
  .top-bar {
    height: auto;
    flex-wrap: wrap;
    padding: 0.4rem 0.5rem;
    gap: 0.3rem;
  }
  .top-bar-center {
    order: 10;
    max-width: none;
    width: 100%;
  }
  .top-bar-chip {
    display: none;
  }
  .ops-sub-tabs {
    padding: 0.35rem 0;
    gap: 0.2rem;
  }
  .ops-sub-tab {
    font-size: 0.72rem;
    padding: 0.3rem 0.5rem;
  }
}

/* ── Work Queue ── */
.wq-section { margin-bottom: 0.5rem; }
.wq-section-header {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 0.5rem 0.75rem 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wq-section-count {
  background: var(--surface-raised);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  color: var(--text-secondary);
}
.wq-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--text-primary);
  font: inherit;
  transition: background 0.1s;
}
.wq-row:hover { background: rgba(56, 189, 248, 0.04); }
.wq-row.active { background: rgba(56, 189, 248, 0.08); border-left: 3px solid var(--accent-primary); }
.wq-row-line1 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.wq-dot { flex-shrink: 0; font-size: 0.6rem; }
.wq-name { font-weight: 600; flex-shrink: 0; }
.wq-summary { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.wq-time { flex-shrink: 0; font-size: 0.75rem; color: var(--text-subtle); }
.wq-row-line2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding-left: 1.4rem;
  margin-top: 0.15rem;
}
.wq-phone { font-family: var(--font-mono); font-size: 0.72rem; }
.wq-value { color: var(--accent-success); font-weight: 600; }
.wq-action { margin-left: auto; color: var(--accent-primary); font-weight: 500; font-size: 0.75rem; }

/* Work Queue Detail */
.wq-detail { padding: 0.5rem 0; }
.wq-detail-header { margin-bottom: 0.75rem; }
.wq-detail-type {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  background: rgba(56, 189, 248, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}
.wq-detail-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0.35rem 0 0.15rem;
}
.wq-detail-phone {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--accent-primary);
  text-decoration: none;
}
.wq-detail-value {
  display: block;
  font-size: 0.85rem;
  color: var(--accent-success);
  font-weight: 600;
  margin-top: 0.2rem;
}
.wq-detail-summary {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.wq-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.wq-detail-preview {
  margin-top: 0.75rem;
}
.wq-preview-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  margin-bottom: 0.35rem;
}

/* DEPRECATED — hero hidden, replaced by .top-bar */
.hero {
  display: none;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-heritage), var(--accent-primary), var(--accent-heritage));
  opacity: 0.6;
}

.hero-lockup,
.auth-lockup {
  display: block;
  height: auto;
}

.hero-lockup {
  width: clamp(240px, 28vw, 360px);
  margin-bottom: 1rem;
}

.auth-lockup {
  width: min(100%, 320px);
  margin-bottom: 1rem;
}

.hero-brand {
  display: flex;
  gap: 0;
  margin-bottom: 0.75rem;
}

.hero-brand-d {
  font-family: "Oswald", sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: 0.08em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.hero-brand-w {
  font-family: "Oswald", sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  text-transform: uppercase;
}

.eyebrow,
.panel-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent-heritage);
  font-weight: 700;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

h3,
.summary-card strong,
.mini-metric strong,
.list-item strong,
.activity-item strong,
.contact-card strong,
.note-card strong,
.preview-card strong,
.template-card strong {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 0.92;
  text-wrap: balance;
}

.subtitle {
  max-width: 40rem;
  margin: 0.8rem 0 0;
  color: var(--text-subtle);
  line-height: 1.5;
}

.workspace-header .panel-kicker,
.workspace-copy,
.panel p,
.template-card p,
.activity-time,
.detail-label,
.list-item p,
.contact-card p,
.note-card p,
.preview-card p,
.activity-item p {
  color: var(--text-secondary);
}

.hero .eyebrow,
.auth-card .eyebrow {
  color: var(--accent-primary-strong);
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.switcher-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--text-subtle);
  font-size: 0.82rem;
}

.switcher-label select {
  min-width: 15rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 0.6rem 0.8rem;
  background: var(--surface-base);
  color: var(--text-primary);
}

.hero .ghost-button {
  border-color: var(--border-inverse);
  background: var(--surface-hero-card);
  color: var(--text-primary);
}

.hero .ghost-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hero .status-chip {
  border-color: var(--border-inverse);
  background: var(--surface-hero-card);
  color: var(--text-primary);
}

.hero .status-chip,
.hero .ghost-button,
.workspace-tab,
.pill,
.status-chip {
  letter-spacing: 0.01em;
}

/* Alert bar — compact filter chips above the queues */
.alert-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0;
  margin: 0.25rem 0 0.6rem;
}

.alert-bar-clear {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.alert-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 6px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--surface-base);
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.2;
}

.alert-chip strong {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--text-primary);
}

.alert-chip:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.alert-chip.active {
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  border-color: transparent;
}

.alert-chip.active strong {
  color: var(--text-primary);
}

.alert-chip.ember strong { color: var(--accent-danger); }
.alert-chip.sun strong { color: var(--accent-primary-strong); }
.alert-chip.sky strong { color: var(--accent-support); }
.alert-chip.ash strong { color: var(--accent-neutral); }
.alert-chip.active.ember strong,
.alert-chip.active.sun strong,
.alert-chip.active.sky strong,
.alert-chip.active.ash strong { color: var(--text-primary); }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.summary-card,
.panel,
.preview-card,
.note-card,
.template-card,
.mini-metric,
.contact-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-base);
  box-shadow: var(--dw-shadow-panel);
  position: relative;
  overflow: hidden;
}

.summary-card {
  padding: 20px;
  animation: fadeUp 0.4s ease-out both;
}

/* Gen2 accent top-line on summary cards */
.summary-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0.5;
}

.mini-metric {
  padding: 14px 16px;
  background: var(--surface-base);
  position: relative;
  overflow: hidden;
}

.mini-metric::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0.5;
}

.summary-card p {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.summary-card strong,
.mini-metric strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.mini-metric p {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.summary-card.sun::after {
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}

.summary-card.ember::after {
  background: linear-gradient(90deg, transparent, var(--accent-danger), transparent);
}

.summary-card.sage::after {
  background: linear-gradient(90deg, transparent, var(--accent-success), transparent);
}

.summary-card.sky::after {
  background: linear-gradient(90deg, transparent, var(--accent-support), transparent);
}

.summary-card.night::after {
  background: linear-gradient(90deg, transparent, var(--surface-dark), transparent);
}

.mini-metric.sun {
  border-top-color: var(--accent-primary);
}

.mini-metric.ember {
  border-top-color: var(--accent-danger);
}

.mini-metric.sage {
  border-top-color: var(--accent-success);
}

.mini-metric.sky {
  border-top-color: var(--accent-support);
}

.mini-metric.night {
  border-top-color: var(--surface-dark);
}

.mini-metric.ash {
  border-top-color: var(--accent-neutral);
}

.main-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr 1fr;
  gap: 1rem;
  align-items: start;
}

.panel {
  padding: 24px;
  animation: fadeUp 0.4s ease-out 0.1s both;
}

.reporting-panel {
  background: var(--surface-base);
}

.reporting-panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  opacity: 0.6;
}

.detail-panel {
  min-height: 42rem;
}
/* Hidden legacy detail panel when inline mode is active */
.jobs-layout--inline + .detail-body[hidden],
.jobs-layout--inline + h2[hidden],
.jobs-layout--inline + span[hidden] {
  display: none !important;
}

.template-panel,
.activity-panel,
.access-panel {
  grid-column: span 1;
}

.reporting-panel {
  grid-column: span 2;
}

.activation-panel,
.contacts-panel {
  grid-column: 1 / -1;
}

.observability-panel {
  grid-column: 1 / -1;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.reporting-panel .panel-header,
.contacts-panel .panel-header {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(29, 35, 43, 0.08);
}

.stacked-list,
.template-list,
.activity-list,
.detail-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.metric-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.owner-command-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 1rem;
}

.focus-lane-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.focus-lane {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.reporting-analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.owner-command-column {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.activation-grid {
  display: grid;
  grid-template-columns: 1.55fr 0.95fr;
  gap: 1rem;
}

.settings-cluster {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}

.settings-cluster + .settings-cluster {
  margin-top: 1rem;
}

.cluster-header h3 {
  margin: 0;
  font-size: 1.55rem;
}

.compact-copy {
  max-width: 40rem;
  margin-top: 0.35rem;
  font-size: 0.94rem;
}

.preset-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.preset-intro {
  flex: 1 1 24rem;
}

.preset-intro p,
.preset-status p {
  margin: 0.35rem 0 0;
}

.preset-status {
  margin-bottom: 1rem;
}

.preset-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.compact-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--accent-heritage);
  font-size: 0.92rem;
}

.account-form input,
.account-form select,
.account-form textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 0.8rem 0.9rem;
  background: var(--surface-base);
  color: var(--text-primary);
}

.account-form textarea {
  min-height: 6rem;
}

.full-width {
  width: 100%;
}

.list-item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-base);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.list-item:hover,
.list-item.active {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

/* Last-viewed indicator — shows which list item was previously expanded,
   so the operator can quickly re-engage after a toggle-collapse. */
.list-item.last-viewed {
  border-left: 3px solid var(--dw-blue);
}

.list-item p,
.contact-card p,
.note-card p,
.preview-card p,
.activity-item p {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.list-item-top,
.list-meta,
.preview-header,
.template-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
}

.list-meta {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.pill,
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 8px;
  border-radius: 3px;
  border: none;
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.pill.sun {
  background: var(--sun-soft);
}

.pill.ember {
  background: var(--ember-soft);
}

.pill.sage {
  background: var(--sage-soft);
}

.pill.sky {
  background: var(--sky-soft);
}

.pill.night {
  background: var(--night-soft);
}

.pill.ash,
.pill.subtle {
  background: var(--ash-soft);
}

.pill.attention,
.pill.missing {
  background: var(--ember-soft);
}

.pill.configured,
.pill.approved,
.pill.installed,
.pill.live {
  background: var(--sage-soft);
}

.pill.sent,
.pill.delivered,
.pill.confirmed {
  background: var(--sage-soft);
}

.pill.failed,
.pill.blocked,
.pill.error {
  background: var(--ember-soft);
}

.pill.pending,
.pill.queued,
.pill.review {
  background: var(--sun-soft);
}

.pill.draft,
.pill.not_started,
.pill.internal,
.pill.customer_site_embed,
.pill.customer_landing_page,
.pill.dorsey_hosted_page,
.pill.forwarding_overlay,
.pill.site_number_overlay,
.pill.after_hours_only,
.pill.operator_callback,
.pill.sms_triage,
.pill.sms_escalation,
.pill.provisioning,
.pill.planned,
.pill.submitted,
.pill.in_progress,
.pill.ready_for_launch,
.pill.pilot,
.pill.customer {
  background: var(--sky-soft);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

/* Compact detail header */
.detail-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.detail-header-row strong {
  color: var(--text-primary);
}

.detail-notes {
  margin: 0 0 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.84rem;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border-radius: 8px;
  line-height: 1.4;
}

/* Flat inline sections — no card wrappers */
.defer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.detail-label-inline {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.consent-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--accent-danger);
  background: var(--accent-danger-soft);
  border-radius: 0 8px 8px 0;
  font-size: 0.84rem;
}

.consent-alert-label {
  font-weight: 600;
}

.consent-alert-label.ember {
  color: var(--accent-danger);
}

.inline-context {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.ember-text {
  color: var(--accent-danger);
}

.dispatch-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.action-reasoning {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--text-subtle);
  font-style: italic;
  line-height: 1.3;
}

.recordings-section {
  display: grid;
  gap: 0.5rem;
}

/* Slim segmented stage bar */
.stage-bar {
  margin: 0.2rem 0 0.4rem;
}

.stage-bar-segments {
  display: flex;
  gap: 3px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.stage-seg {
  flex: 1;
  border-radius: 3px;
  background: var(--accent-neutral-soft);
  transition: background 0.2s;
}

.stage-seg.done {
  background: var(--accent-success);
}

.stage-seg.active {
  background: var(--surface-dark);
}

.stage-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
}

.stage-label {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
}

.stage-label.active {
  color: var(--text-primary);
  font-weight: 700;
}

.stage-label.done {
  color: var(--accent-success);
}

/* Inline stats row */
.inline-stats {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* Guidance block */
.guidance-block {
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--accent-primary);
  background: var(--surface-raised);
  border-radius: 0 12px 12px 0;
  margin-bottom: 0.8rem;
}

.guidance-block p {
  margin: 0 0 0.35rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.guidance-block p:last-child {
  margin-bottom: 0;
}

.guidance-headline {
  font-weight: 600;
  color: var(--text-primary) !important;
  font-size: 0.92rem;
}

.guidance-next {
  font-size: 0.88rem;
}

.guidance-concern {
  font-size: 0.85rem;
}

.guidance-risk {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-subtle) !important;
}

.detail-label {
  margin: 0 0 0.25rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.note-card,
.preview-card {
  padding: 0.9rem 1rem;
  background: var(--surface-raised);
}

.report-brief-panel,
.report-digest-panel {
  background: var(--surface-base);
}

.owner-command-panel,
.focus-queue-panel,
.report-history-panel,
.closeout-backlog-panel {
  background: var(--surface-base);
}

.focus-digest-panel {
  background: var(--surface-base);
}

.report-brief-panel .panel-kicker,
.report-digest-panel .panel-kicker {
  color: var(--accent-heritage);
}

#report-period-copy,
#overnight-period-copy {
  color: var(--text-secondary);
  max-width: 46rem;
}

#report-metrics .mini-metric,
#overnight-report-metrics .mini-metric {
  min-height: 9.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface-base);
}

#report-highlights,
#overnight-report-highlights,
#report-delivery-list,
#overnight-report-items,
#reconciliation-history-list,
#focus-digest-history-list,
#focus-lane-now,
#focus-lane-today,
#focus-lane-waiting,
#focus-lane-needs-owner {
  display: grid;
  gap: 0.8rem;
}

#report-highlights .activity-item,
#overnight-report-highlights .activity-item,
#report-delivery-list .activity-item,
#overnight-report-items .activity-item,
#reconciliation-history-list .activity-item,
#focus-digest-history-list .activity-item,
#focus-lane-now .activity-item,
#focus-lane-today .activity-item,
#focus-lane-waiting .activity-item,
#focus-lane-needs-owner .activity-item {
  background: var(--surface-raised);
  border-left: 4px solid var(--accent-primary);
}

#report-highlights .activity-item p,
#overnight-report-highlights .activity-item p,
#report-delivery-list .activity-item p,
#overnight-report-items .activity-item p,
#reconciliation-history-list .activity-item p,
#focus-digest-history-list .activity-item p,
#analytics-source-mix-list .activity-item p,
#analytics-outcome-reason-list .activity-item p,
#analytics-aging-list .activity-item p,
#owner-action-list .activity-item p,
#owner-workflow-list .activity-item p,
#focus-lane-now .activity-item p,
#focus-lane-today .activity-item p,
#focus-lane-waiting .activity-item p,
#focus-lane-needs-owner .activity-item p,
#report-history-list .activity-item p,
#closeout-backlog-list .activity-item p {
  color: var(--text-primary);
}

#report-highlights .placeholder,
#overnight-report-highlights .placeholder,
#report-delivery-list .placeholder,
#overnight-report-items .placeholder,
#reconciliation-history-list .placeholder,
#focus-digest-history-list .placeholder,
#analytics-source-mix-list .placeholder,
#analytics-outcome-reason-list .placeholder,
#analytics-aging-list .placeholder,
#owner-action-list .placeholder,
#owner-workflow-list .placeholder,
#focus-lane-now .placeholder,
#focus-lane-today .placeholder,
#focus-lane-waiting .placeholder,
#focus-lane-needs-owner .placeholder,
#report-history-list .placeholder,
#closeout-backlog-list .placeholder {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: var(--surface-base);
  border: 1px dashed var(--border-strong);
}

.activity-item.is-clickable {
  cursor: pointer;
}

#focus-digest-settings-card {
  margin-bottom: 1rem;
}

.export-button-row {
  margin-bottom: 1rem;
}

.conversion-wizard-card {
  border-top: 4px solid var(--accent-primary);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent 9rem),
    var(--surface-base);
}

.conversion-step-grid {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.conversion-step {
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}

.conversion-step .settings-grid {
  margin-top: 0.45rem;
}

.conversion-step .full-width + .full-width {
  margin-top: 0.8rem;
}

.closeout-confirmed {
  margin: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.closeout-inline {
  display: grid;
  gap: 0.4rem;
  margin: 0.4rem 0 0.6rem;
}

.closeout-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.closeout-fields select,
.closeout-fields input {
  flex: 1;
  min-width: 100px;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-base);
  color: var(--text-primary);
}

.closeout-inline textarea {
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-base);
  resize: vertical;
}

#twilio-execution-status {
  margin-bottom: 0.8rem;
}

#report-period-copy {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.contact-card {
  padding: 0.95rem;
}

.subsection {
  margin-top: 1.2rem;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.5rem 0 0.8rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.action-button,
.ghost-button {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-base);
  color: var(--text-primary);
  padding: 6px 14px;
  font-size: 0.8125rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  transition: all 0.2s;
}

.action-button {
  background: var(--accent-primary);
  color: var(--page-bg);
  border-color: transparent;
  font-weight: 600;
}

.ghost-button:hover {
  background: var(--surface-raised);
  border-color: var(--border-strong);
}

.action-button:hover {
  filter: brightness(1.1);
}

.ghost-button.danger,
.action-button.danger {
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--accent-danger);
}

.ghost-button.danger:hover,
.action-button.danger:hover {
  background: var(--accent-danger-soft);
}

.ghost-button.small {
  padding: 4px 10px;
  font-size: 0.75rem;
}

.ghost-button:hover,
.action-button:hover {
  transform: none;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.preview-card[data-preview-toggle] {
  cursor: pointer;
}

.preview-collapsed {
  padding: 0.6rem 1rem;
}

.preview-collapsed .preview-body {
  display: none;
}

.preview-expanded .preview-body {
  display: block;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-chevron {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-secondary);
  transition: transform 200ms ease;
}

.preview-expanded .preview-chevron {
  transform: rotate(45deg);
}

.preview-header {
  margin-bottom: 0.55rem;
  color: var(--text-secondary);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.template-card {
  padding: 0.85rem;
}

.template-card p {
  margin: 0.15rem 0 0;
  color: var(--ink-soft);
}

.template-card textarea {
  width: 100%;
  min-height: 8.5rem;
  margin-top: 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 0.85rem;
  background: var(--surface-base);
  color: var(--text-primary);
  resize: vertical;
}

.activity-item {
  padding: 0.85rem 0.95rem;
  border-radius: 18px;
  background: var(--surface-base);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

button.activity-item {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.member-card.is-selected,
button.activity-item:hover {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.activity-time {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.body-copy {
  white-space: pre-wrap;
}

.placeholder {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.placeholder.error,
.auth-status.error {
  color: var(--accent-danger);
}

.placeholder.success,
.auth-status.success {
  color: var(--accent-success);
}

.danger-card {
  border-top: 4px solid var(--accent-danger);
  background: var(--surface-base);
}

.auth-shell {
  width: min(560px, calc(100vw - 1.5rem));
  margin: 4rem auto;
}

.auth-card {
  padding: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.06), transparent 18rem),
    var(--surface-base);
  color: var(--text-primary);
  box-shadow: var(--shadow-strong);
}

.auth-brand {
  display: flex;
  gap: 0;
  margin-bottom: 0.75rem;
}

.auth-brand-d {
  font-family: "Oswald", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.auth-brand-w {
  font-family: "Oswald", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  text-transform: uppercase;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--text-secondary);
}

.auth-form input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 0.85rem 0.95rem;
  background: var(--surface-base);
  color: var(--text-primary);
}

.auth-status {
  min-height: 1.5rem;
}

/* F-Q7/F-003: password visibility toggle (login) */
.auth-form .password-wrap {
  position: relative;
}
.auth-form .password-wrap input {
  padding-right: 4rem;
}
.auth-form .password-toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  min-height: 44px;
}
.auth-form .password-toggle:hover,
.auth-form .password-toggle:focus-visible {
  color: var(--accent-primary, var(--text-primary));
  outline: none;
}

.auth-form .action-button {
  width: 100%;
  justify-content: center;
}

.auth-card .subtitle {
  color: var(--text-secondary);
}

.auth-secondary-link {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.auth-secondary-link a {
  color: var(--accent-primary);
  text-decoration: none;
}
.auth-secondary-link a:hover {
  text-decoration: underline;
}

.auth-card .eyebrow {
  color: var(--accent-primary);
}

.auth-card h1 {
  color: var(--text-primary);
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
  .action-button,
  .workspace-tab,
  .backlog-item,
  .ghost-button,
  .ghost-button.small,
  .dw-modal-input,
  .dw-modal-actions button,
  .consent-badge,
  select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  textarea {
    min-height: var(--tap-min, 44px);
  }

  .backlog-item {
    padding: 0.65rem 0;
  }

  select, input, textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Modal adapts to mobile keyboard overlay */
  .dw-modal-overlay {
    align-items: flex-end;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .dw-modal-card {
    max-height: 70vh;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
  }
}

@media (max-width: 1120px) {
  .jobs-layout,
  .main-grid,
  .operations-grid,
  .prospects-grid,
  .reporting-grid,
  .admin-grid,
  .platform-grid {
    grid-template-columns: 1fr;
  }

  .activation-grid,
  .owner-command-grid,
  .focus-lane-grid,
  .reporting-analytics-grid,
  .detail-panel {
    min-height: auto;
  }

  .activation-grid {
    grid-template-columns: 1fr;
  }

  .focus-lane-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preset-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .reporting-panel,
  .report-history-panel,
  .closeout-backlog-panel,
  .contacts-panel,
  .observability-panel,
  .dispatch-panel {
    grid-column: span 1;
  }

  .operations-grid .detail-panel {
    grid-row: span 1;
  }

  .detail-panel {
    min-height: auto;
  }

  /* Operations grid detail panel shouldn't be sticky tall */
  .operations-grid .detail-panel {
    min-height: auto;
  }

  .prospects-grid .detail-panel {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .shell {
    width: min(100vw - 1rem, 100%);
    margin: 0.5rem auto 2rem;
  }

  .hero {
    padding: 1.25rem;
    flex-direction: column;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .switcher-label {
    width: 100%;
  }

  .switcher-label select {
    min-width: 0;
    width: 100%;
  }

  .workspace-nav {
    gap: 0.55rem;
  }

  .workspace-tab {
    width: 100%;
    justify-content: center;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .stage-bar-labels,
  .focus-lane-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .compact-settings {
    grid-template-columns: 1fr;
  }

  .auth-shell {
    width: min(100vw - 1rem, 100%);
    margin: 1rem auto 2rem;
  }

  .auth-card {
    padding: 1.25rem;
  }

  .wizard-step label span { font-size: 0.78rem; }
  .wizard-actions { flex-direction: column; }
  .wizard-actions .wizard-spacer { display: none; }

  /* Touch-friendly backlog items */
  .backlog-item {
    padding: 0.7rem 0;
  }

  /* Lead detail panel: stack fields */
  .detail-panel {
    min-height: auto;
  }

  .detail-panel .detail-actions {
    flex-wrap: wrap;
  }

  /* Recording player full width */
  .recording-player {
    height: 40px;
  }

  /* Dispatch execution */
  .dispatch-item {
    padding: 0.6rem 0;
  }

  /* Template editor */
  .template-grid {
    grid-template-columns: 1fr;
  }

  .template-preview {
    min-height: 6rem;
  }

  /* KPI grid on tablet */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reconciliation */
  .recon-grid {
    grid-template-columns: 1fr;
  }

  /* Inline close-out stack */
  .backlog-inline-close {
    flex-wrap: wrap;
  }

  /* Status chips smaller */
  .status-chip {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }

  /* Trend grid */
  .trend-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .shell {
    width: 100%;
    margin: 0;
    padding: 0 0.35rem;
  }

  .hero {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .hero-title { font-size: 1.1rem; }

  .workspace-nav {
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
  }

  .workspace-tab {
    font-size: 0.75rem;
    padding: 0.45rem 0.6rem;
  }

  .panel {
    padding: 0.75rem;
    border-radius: 12px;
  }

  /* Inline detail mobile optimizations */
  .job-inline-detail {
    padding: var(--dw-space-3);
  }
  .job-inline-detail .detail-header-row {
    flex-direction: column;
    gap: var(--dw-space-2);
  }
  .job-inline-detail .button-row {
    flex-wrap: wrap;
  }
  .job-inline-detail .button-row button {
    min-height: var(--tap-min, 44px);
    flex: 1 1 auto;
  }
  .job-inline-detail .ai-rec-card {
    margin: var(--dw-space-2) 0;
  }
  .job-inline-detail .ai-rec-execute {
    width: 100%;
    justify-content: center;
    min-height: var(--tap-min, 44px);
  }
  .job-inline-detail .job-context-bar {
    flex-wrap: wrap;
  }
  .jobs-list-panel {
    max-height: none;
  }

  .panel-title {
    font-size: 0.85rem;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .kpi-value { font-size: 1.4rem; }

  .backlog-item {
    padding: 0.55rem 0;
  }

  .body-copy, .note-copy {
    font-size: 0.82rem;
  }

  .action-button {
    font-size: 0.78rem;
    padding: 0.4rem 0.7rem;
  }

  .wizard-review-section dl {
    grid-template-columns: 1fr;
  }

  .wizard-review-section dd {
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACTIVATION WIZARD
═══════════════════════════════════════════════════════════════ */
.activation-wizard {
  border: 1px solid var(--accent-border, rgba(159,107,63,0.25));
  background: var(--surface-soft, var(--dw-bg-mid));
}

.wizard-progress {
  display: grid;
  gap: 0.65rem;
  padding: 0 1.25rem 0.75rem;
}

.wizard-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--accent, var(--dw-gold)), var(--signal, var(--dw-text-3)));
  border-radius: 2px;
  transition: width 300ms ease;
}

.wizard-steps-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.wizard-step-dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  color: var(--dw-text-2);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-step-dot.active {
  background: var(--accent, var(--dw-gold));
  border-color: var(--accent, var(--dw-gold));
  color: var(--page-bg);
}

.wizard-step-dot.complete {
  background: var(--success, var(--dw-green));
  border-color: var(--success, var(--dw-green));
  color: var(--page-bg);
}

.wizard-body {
  padding: 0 1.25rem;
}

.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block;
}

.wizard-step-intro {
  margin-bottom: 1rem;
}

.wizard-step-intro h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.wizard-step-intro p {
  color: rgba(255,255,255,0.8);
  font-size: 0.88rem;
  line-height: 1.5;
}

.wizard-step .settings-grid {
  gap: 0.75rem;
}

.wizard-step-note {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--dw-neutral-soft);
  border: 1px solid rgba(255,255,255,0.18);
}

.wizard-step-note p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  margin: 0;
}

.wizard-review {
  display: grid;
  gap: 0.65rem;
}

.wizard-review-section {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  background: var(--dw-neutral-soft);
  border: 1px solid rgba(255,255,255,0.18);
}

.wizard-review-section h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.45rem;
}

.wizard-review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0;
  font-size: 0.85rem;
}

.wizard-review-row span:first-child {
  color: rgba(255,255,255,0.55);
}

.wizard-review-row span:last-child {
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.wizard-review-row .missing {
  color: var(--ember, var(--dw-gold));
  font-style: italic;
  font-weight: 400;
}

.wizard-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: 1rem;
}

.wizard-spacer { flex: 1; }

.primary-ghost {
  background: var(--accent, var(--dw-gold)) !important;
  color: var(--page-bg) !important;
  border-color: var(--accent, var(--dw-gold)) !important;
}

.primary-ghost:hover {
  opacity: 0.9;
}

.wizard-active-hide {
  display: none !important;
}

.template-preview {
  margin-top: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: var(--dw-neutral-soft);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
}

.template-preview-body {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  white-space: pre-wrap;
}

.template-vars {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  margin-top: 0.35rem;
}

.template-vars code {
  background: var(--dw-neutral-soft);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.7rem;
  margin-right: 0.2rem;
}

.trend-grid {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: var(--dw-neutral-soft);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
}

.trend-grid .panel-kicker {
  margin-bottom: 0.5rem;
}

.trend-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.trend-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.5rem;
  background: var(--dw-neutral-soft);
  border-radius: 4px;
}

.trend-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.trend-delta {
  font-size: 0.95rem;
  font-weight: 700;
}

.trend-delta.sage { color: var(--sage, var(--dw-green)); }
.trend-delta.ember { color: var(--ember, var(--dw-gold)); }
.trend-delta.ash { color: rgba(255,255,255,0.35); }

.trend-values {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}

.backlog-inline-close {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.backlog-inline-close select,
.backlog-inline-close input {
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  background: var(--dw-neutral-soft);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  color: rgba(255,255,255,0.85);
}

.backlog-inline-close select { flex: 1; }
.backlog-inline-close input { width: 80px; }

.webhook-url {
  font-family: monospace;
  font-size: 0.78rem;
  word-break: break-all;
  color: rgba(255,255,255,0.8);
  margin: 0.2rem 0;
  padding: 0.4rem 0.6rem;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.webhook-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin: 0.25rem 0 0;
}

.wizard-review-section dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 1rem;
  margin: 0;
}

.wizard-review-section dt {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  padding: 0.2rem 0;
}

.wizard-review-section dd {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 0;
  padding: 0.2rem 0;
  text-align: right;
}

/* Call recording display */
.recording-entry {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.recording-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.recording-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.recording-duration {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9rem;
}

.recording-player {
  width: 100%;
  height: 32px;
  border-radius: 8px;
  margin: 0.4rem 0;
}

.recording-transcript {
  margin-top: 0.4rem;
  padding: 0.5rem 0.7rem;
  background: var(--dw-neutral-soft);
  border-radius: 8px;
  border-left: 3px solid var(--accent-copper, var(--dw-gold));
}

.recording-transcript .body-copy {
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Load more button in lists */
.load-more-btn {
  width: 100%;
  text-align: center;
  margin-top: 0.4rem;
  opacity: 0.7;
}

.load-more-btn:hover,
.show-more-btn:hover {
  opacity: 1;
}

.show-more-btn {
  width: 100%;
  text-align: center;
  margin-top: 0.4rem;
  opacity: 0.7;
}

/* ── Collapsible Panels ── */
.panel-header[data-panel-toggle] {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header[data-panel-toggle]:hover {
  background: var(--accent-neutral-soft);
  border-radius: 12px;
  margin: -0.5rem;
  padding: 0.5rem;
}

.panel-chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.panel.is-collapsed .panel-chevron {
  transform: rotate(-45deg);
}

.panel-body {
  transition: max-height 250ms ease, opacity 200ms ease, padding 200ms ease;
  overflow: hidden;
}

.panel.is-collapsed .panel-body {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Sub-Tab Navigation ── */
.sub-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.sub-tab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-body);
  border: none;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
  transition: all 0.2s;
}

.sub-tab:hover {
  background: var(--surface-base);
  color: var(--text-primary);
}

.sub-tab.is-active {
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
}

/* ── Accordion (Setup Workspace) ── */
.setup-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.accordion-item {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-base);
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  gap: 1rem;
  transition: background 150ms ease;
}

.accordion-header:hover {
  background: var(--accent-neutral-soft);
}

.accordion-header h3 {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0;
}

.accordion-header .panel-kicker {
  margin: 0 0 0.15rem;
}

.accordion-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.accordion-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle);
  transform: rotate(-45deg);
  transition: transform 200ms ease;
}

.accordion-item.is-open .accordion-chevron {
  transform: rotate(45deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}

.accordion-item.is-open .accordion-body {
  padding: 0 1.25rem 1.25rem;
}

.accordion-completion {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.accordion-completion.complete {
  background: var(--accent-success-soft);
  color: var(--accent-success);
}

.accordion-completion.incomplete {
  background: rgba(159, 107, 63, 0.12);
  color: var(--accent-primary-strong);
}

.accordion-divider {
  padding: 0.75rem 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.5rem;
}

/* ── Drill-Target Summary Cards ── */
.summary-card[data-drill-target] {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.summary-card[data-drill-target]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-primary);
}

/* ── Platform Search ── */
.platform-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-family: var(--font-body);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-base);
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.platform-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Subsection Collapsible (Platform Infra) ── */
.subsection-collapsible {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.subsection-collapsible .subsection-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-subtle);
  border-bottom: 2px solid var(--text-subtle);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.subsection-collapsible.is-collapsed .subsection-chevron {
  transform: rotate(-45deg);
}

.subsection-count-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  background: var(--accent-neutral-soft);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text-secondary);
}

/* ── Responsive: Sub-tabs ── */
@media (max-width: 1120px) {
  .sub-tab-nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .sub-tab {
    flex: 1 1 auto;
    text-align: center;
  }

  .accordion-header {
    padding: 0.75rem 1rem;
  }

  .accordion-item.is-open .accordion-body {
    padding: 0 1rem 1rem;
  }
}

@media (max-width: 480px) {
  .sub-tab-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

  .sub-tab-nav::-webkit-scrollbar {
    display: none;
  }

  .sub-tab {
    flex-shrink: 0;
  }
}

/* ── Print Styles ── */
@media print {
  .sub-tab-nav,
  .panel-chevron,
  .accordion-chevron,
  .show-more-btn,
  .load-more-btn {
    display: none;
  }

  .panel-body,
  .accordion-body {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  .panel.is-collapsed .panel-body {
    max-height: none !important;
    opacity: 1 !important;
    padding-top: revert;
    padding-bottom: revert;
  }
}

/* ═══════════════════════════════════════════════════════════
   Mobile Responsive
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .shell {
    width: calc(100vw - 1rem);
    margin: 0.5rem auto 2rem;
  }

  .hero {
    padding: 1rem !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .hero-lockup {
    max-width: 160px !important;
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .workspace-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0 !important;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }

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

  .workspace-tab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.8rem !important;
    padding: 0.4rem 0.6rem !important;
  }

  .workspace-grid,
  .platform-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .ops-grid {
    grid-template-columns: 1fr !important;
  }

  .panel {
    border-radius: 16px !important;
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  .metric-card {
    padding: 0.75rem !important;
  }

  .metric-value {
    font-size: 1.2rem !important;
  }

  .workspace-header h2 {
    font-size: 1.2rem !important;
  }

  .sub-tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .sub-tab-nav::-webkit-scrollbar {
    display: none;
  }

  .sub-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .global-search-bar {
    position: relative;
  }

  #global-search-results {
    left: 0;
    right: 0;
  }

  .hero h1 {
    font-size: 1.1rem !important;
  }

  .hero .subtitle {
    font-size: 0.8rem !important;
  }

  .panel-header h2 {
    font-size: 1rem !important;
  }

  .platform-table {
    font-size: 0.75rem;
  }

  .platform-table th,
  .platform-table td {
    padding: 0.3rem 0.5rem !important;
  }

  .switcher-label select {
    max-width: 140px;
  }
}

@media (max-width: 480px) {
  .summary-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .switcher-label {
    width: 100%;
  }

  .hero-actions select {
    width: 100%;
    max-width: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Toast animation
   ═══════════════════════════════════════════════════════════ */

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════
   Connection indicator
   ═══════════════════════════════════════════════════════════ */

.status-chip[data-connected="true"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-success);
  margin-right: 0.35rem;
}

.status-chip[data-connected="false"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-danger);
  margin-right: 0.35rem;
}

/* ═══════════════════════════════════════════════════════════
   Conversation timeline
   ═══════════════════════════════════════════════════════════ */

.conversation-timeline {
  scroll-behavior: smooth;
}

.conversation-list-item {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s;
}

.conversation-list-item:hover {
  background: var(--surface-raised);
}

.conversation-list-item.active {
  background: var(--accent-primary-soft);
  border-left: 3px solid var(--accent-primary);
}

.conversation-unread {
  display: inline-block;
  background: var(--accent-primary);
  color: var(--page-bg);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 100px;
  padding: 0 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   Recovery Workspace
   ═══════════════════════════════════════════════════════════════════ */

.recovery-sub-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.recovery-panel {
  display: none;
}

.recovery-panel.is-active {
  display: block;
}

.recovery-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.recovery-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Recovery Queue Items ── */

.recovery-queue-item {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-base);
  transition: border-color 120ms ease;
}

.recovery-queue-item:hover {
  border-color: var(--border-strong);
}

.recovery-queue-item.severity-emergency {
  border-left: 4px solid var(--accent-danger);
}

.recovery-queue-item.severity-urgent {
  border-left: 4px solid var(--sun);
}

.recovery-queue-item.severity-hot {
  border-left: 4px solid var(--accent-primary);
}

.recovery-queue-item.severity-normal {
  border-left: 4px solid var(--border-subtle);
}

.rqi-priority {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--page-bg);  /* Dark text on bright badge — intentional contrast */
}

.rqi-priority.ember { background: var(--accent-danger); }
.rqi-priority.sun { background: var(--sun); }
.rqi-priority.sky { background: var(--accent-primary); }
.rqi-priority.ash { background: var(--surface-strong); color: var(--text-secondary); }

.rqi-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.rqi-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rqi-customer {
  font-weight: 600;
  color: var(--text-primary);
}

.rqi-phone {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-primary);
  text-decoration: none;
}

.rqi-phone:hover {
  text-decoration: underline;
}

.rqi-source {
  font-size: 0.82rem;
  color: var(--text-subtle);
}

.rqi-value {
  font-family: var(--font-data);
  font-size: 1.1rem;
  color: var(--accent-success);
  letter-spacing: 0.02em;
}

.rqi-context {
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rqi-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.rqi-actions .ghost-button {
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
}

/* ── Cadence Cards ── */

.cadence-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-base);
  padding: 1.2rem;
}

.cadence-card.paused {
  opacity: 0.7;
  border-style: dashed;
}

.cadence-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.cadence-card-customer {
  font-weight: 600;
  font-size: 1rem;
}

.cadence-card-equipment {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.cadence-card-value {
  font-family: var(--font-data);
  font-size: 1.4rem;
  color: var(--accent-success);
}

.cadence-tier-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
}

.cadence-tier-badge.tier-1 { background: var(--accent-primary-soft); color: var(--accent-primary); }
.cadence-tier-badge.tier-2 { background: var(--sun-soft); color: var(--sun); }
.cadence-tier-badge.tier-3 { background: var(--accent-danger-soft); color: var(--accent-danger); }

/* Cadence Timeline */

.cadence-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 1rem 0;
  position: relative;
}

.cadence-touch {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 0;
}

.cadence-touch::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border-subtle);
  z-index: 0;
}

.cadence-touch:last-child::after {
  display: none;
}

.cadence-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  background: var(--surface-base);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: default;
  position: relative;
}

.cadence-dot.completed {
  background: var(--accent-success);
  border-color: var(--accent-success);
  color: var(--text-primary);
}

.cadence-dot.current {
  border-color: var(--accent-primary);
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
  animation: cadence-pulse 2s ease-in-out infinite;
}

.cadence-dot.upcoming {
  border-color: var(--border-strong);
  color: var(--text-subtle);
}

.cadence-dot.skipped {
  border-color: var(--border-subtle);
  color: var(--text-subtle);
  text-decoration: line-through;
}

@keyframes cadence-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
}

.cadence-touch-label {
  font-size: 0.68rem;
  color: var(--text-subtle);
  margin-top: 0.35rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cadence-touch-day {
  font-size: 0.6rem;
  color: var(--text-subtle);
  font-family: var(--font-mono);
}

.cadence-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.cadence-consent-badges {
  display: flex;
  gap: 0.35rem;
}

.consent-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  color: var(--text-subtle);
}

.consent-badge.active {
  border-color: var(--accent-success);
  color: var(--accent-success);
  background: var(--accent-success-soft);
}

/* ── SLA Rows ── */

.sla-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-base);
}

.sla-row.breached {
  border-left: 4px solid var(--accent-danger);
}

.sla-row.warning {
  border-left: 4px solid var(--sun);
}

.sla-row.on-track {
  border-left: 4px solid var(--accent-success);
}

.sla-timer {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  min-width: 5rem;
  text-align: right;
}

.sla-timer.breached { color: var(--accent-danger); }
.sla-timer.warning { color: var(--sun); }
.sla-timer.on-track { color: var(--accent-success); }

/* ── Calendar Strip ── */

.calendar-strip {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  overflow-x: auto;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-base);
  text-align: center;
}

.calendar-day.today {
  border-color: var(--accent-primary);
  background: var(--accent-primary-soft);
}

.calendar-day-label {
  font-size: 0.72rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-day-date {
  font-family: var(--font-data);
  font-size: 1.6rem;
  color: var(--text-primary);
}

.calendar-day-count {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ── Appointment Rows ── */

.appointment-row {
  display: grid;
  grid-template-columns: 1fr 10rem 8rem 8rem 8rem 6rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-base);
}

/* ── Aging Chart ── */

.aging-chart {
  margin-bottom: 1.5rem;
}

.aging-buckets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.aging-bucket {
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-base);
  text-align: center;
}

.aging-bucket-label {
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin-bottom: 0.3rem;
}

.aging-bucket-value {
  font-family: var(--font-data);
  font-size: 1.5rem;
}

.aging-bucket-count {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.aging-bucket.current .aging-bucket-value { color: var(--accent-success); }
.aging-bucket.days-1-30 .aging-bucket-value { color: var(--accent-primary); }
.aging-bucket.days-31-60 .aging-bucket-value { color: var(--sun); }
.aging-bucket.days-61-90 .aging-bucket-value { color: var(--accent-heritage); }
.aging-bucket.days-90-plus .aging-bucket-value { color: var(--accent-danger); }

/* ── Invoice Rows ── */

.invoice-row {
  display: grid;
  grid-template-columns: 1fr 7rem 7rem 5rem 12rem auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-base);
}

/* ── Customer Intelligence Cards ── */

.customer-intel-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-base);
  padding: 1.5rem;
}

.customer-intel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.customer-intel-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.customer-intel-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  gap: 1rem;
  margin-top: 0.25rem;
}

.customer-intel-ltv {
  font-family: var(--font-data);
  font-size: 1.8rem;
  color: var(--accent-success);
  text-align: right;
}

.customer-intel-ltv-label {
  font-size: 0.72rem;
  color: var(--text-subtle);
  text-align: right;
}

.customer-timeline {
  border-left: 2px solid var(--border-subtle);
  margin: 1rem 0 0 0.8rem;
  padding-left: 1.2rem;
}

.customer-timeline-item {
  position: relative;
  padding-bottom: 1rem;
}

.customer-timeline-item::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.45rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}

.customer-timeline-item.won::before { background: var(--accent-success); }
.customer-timeline-item.lost::before { background: var(--accent-danger); }
.customer-timeline-item.active::before { background: var(--accent-primary); }

.customer-timeline-date {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-subtle);
}

.customer-timeline-desc {
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* ── Recovery responsive ── */
@media (max-width: 1024px) {
  .sla-row {
    grid-template-columns: 1fr auto auto;
  }
  .appointment-row {
    grid-template-columns: 1fr auto auto;
  }
  .invoice-row {
    grid-template-columns: 1fr auto auto;
  }
  .aging-buckets {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .recovery-queue-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .rqi-priority {
    display: none;
  }
  .aging-buckets {
    grid-template-columns: 1fr 1fr;
  }

  /* Issue 17.2 — Collections invoice rows stack vertically on mobile */
  .invoice-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 0.75rem;
  }
  .invoice-row > div {
    text-align: left !important;
  }

  /* Issue 8.1 — Cadence timeline dots: collapse long timelines */
  .cadence-timeline {
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-start;
  }
  .cadence-touch {
    flex: 0 0 auto;
    min-width: 36px;
  }
  .cadence-touch::after {
    display: none;
  }

  /* Issue 8.2 — Cadence card footer: stack consent + actions */
  .cadence-card-footer {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Issue 8.3 — Cadence filter bar: stack on mobile */
  .cadence-filters {
    flex-direction: column;
    gap: 0.4rem;
  }

  /* Issue 8.4 — Cadence card max-height cap */
  .cadence-card {
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Issue 4.3 — Recovery summary cards: show only essential on mobile */
  .recovery-summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
  .recovery-summary-grid .summary-card:nth-child(n+4) {
    display: none;
  }

  /* Issue 31.1 — Dashboard metrics: 2-col on mobile, hide overflow */
  .dashboard-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
  .dashboard-metrics .dash-metric:nth-child(n+5) {
    display: none;
  }

  /* Issue 37.1 — Search dropdown: use viewport-relative height on mobile */
  #global-search-results {
    max-height: 50vh;
  }

  /* Issue 33.1 — Settings form: single column on mobile */
  .conversion-form-grid,
  .settings-form-grid,
  .closeout-form-grid {
    grid-template-columns: 1fr;
  }

  /* Issue 14.1 — Calendar strip: limit visible days */
  .calendar-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .calendar-strip > * {
    scroll-snap-align: start;
  }

  /* Issue 29.1 — Calendar grid: use day/agenda view on mobile */
  .calendar-grid {
    grid-template-columns: 1fr;
  }
  .calendar-grid .cal-day:not(.cal-today):not(.cal-selected) {
    display: none;
  }

  /* Issue 12.2 + 29.2 — Modal max-height on mobile */
  .dw-modal-card {
    max-height: 85vh;
  }
}

/* ── Loading state for action buttons ── */
.is-loading {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
  position: relative;
}
.is-loading::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.4em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin-loader 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes spin-loader {
  to { transform: rotate(360deg); }
}

/* ── Inline modal prompt (DW-BlueSlate) ── */
.dw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--dw-z-max);
  animation: fadeIn 0.15s ease;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.dw-modal-card {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.5rem;
  min-width: 340px;
  max-width: 440px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  -webkit-overflow-scrolling: touch;
}
.dw-modal-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.dw-modal-field {
  margin-bottom: 0.75rem;
}
.dw-modal-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.dw-modal-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: var(--page-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
}
.dw-modal-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}
textarea.dw-modal-input {
  min-height: 60px;
  resize: vertical;
}
.dw-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Inbox workspace ── */
.inbox-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}
.inbox-filters {
  display: flex;
  gap: 0.25rem;
}
.inbox-filter-btn {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.inbox-filter-btn.active {
  background: var(--accent-primary);
  color: var(--page-bg);
  border-color: var(--accent-primary);
}
.inbox-stats {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.conversation-list-item {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.12s;
}
.conversation-list-item:hover {
  background: var(--surface-raised);
}
.conversation-list-item.active {
  background: var(--accent-primary-soft, rgba(56, 189, 248, 0.1));
  border-left: 3px solid var(--accent-primary);
}
.conversation-list-item.unread .conv-name {
  color: var(--text-primary);
}
.conv-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-preview {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}
.conv-time {
  font-size: 0.7rem;
  color: var(--text-subtle);
}
.conversation-unread {
  display: inline-block;
  background: var(--accent-primary);
  color: var(--page-bg);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  min-width: 1.2em;
  text-align: center;
}

/* ── Calendar workspace ── */
.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}
.calendar-nav {
  display: flex;
  gap: 0.25rem;
}
.calendar-month-label {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}
.calendar-day {
  background: var(--surface-base);
  padding: 0.5rem;
  min-height: 130px;
}
.calendar-day.calendar-today {
  background: var(--surface-raised);
}
.calendar-day-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.calendar-day-header.today {
  color: var(--accent-primary);
}
.calendar-event {
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  border-left: 2px solid var(--accent-primary);
  cursor: pointer;
  transition: opacity 0.12s;
}
.calendar-event:hover {
  opacity: 0.8;
}
.calendar-event.tone-sage {
  background: rgba(74, 222, 128, 0.1);
  border-left-color: var(--dw-green);
}
.calendar-event.tone-sun {
  background: rgba(212, 168, 83, 0.1);
  border-left-color: var(--dw-gold);
}
.calendar-event.tone-sky {
  background: rgba(56, 189, 248, 0.1);
  border-left-color: var(--dw-blue);
}
.cal-evt-time {
  font-weight: 600;
}
.cal-evt-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-evt-tech {
  font-size: 0.65rem;
  color: var(--text-subtle);
  font-style: italic;
}
.cal-evt-more {
  font-size: 0.7rem;
  color: var(--text-subtle);
  padding: 0.1rem 0;
}

/* ═══════════════════════════════════════════════
   AI Recommendation Card & Confidence System
   ═══════════════════════════════════════════════ */

.ai-rec-card {
  background: var(--dw-surface);
  border: 1px solid var(--dw-border-strong);
  border-radius: var(--dw-radius-md);
  padding: var(--dw-space-4);
  margin: var(--dw-space-3) 0;
  position: relative;
  overflow: hidden;
}
.ai-rec-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.ai-rec-card.sage::before { background: var(--dw-green); }
.ai-rec-card.sun::before  { background: var(--dw-gold); }
.ai-rec-card.ash::before  { background: var(--dw-neutral); }

.ai-rec-card.sage { box-shadow: 0 0 16px rgba(52, 211, 153, 0.08); }
.ai-rec-card.sun  { box-shadow: 0 0 16px rgba(212, 168, 83, 0.08); }

.ai-rec-header {
  display: flex;
  align-items: center;
  gap: var(--dw-space-2);
  margin-bottom: var(--dw-space-3);
}
.ai-rec-icon {
  font-size: 1.1rem;
}
.ai-rec-title {
  font-family: var(--font-display, "Oswald", sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dw-text-2);
}
.ai-rec-body {
  display: flex;
  flex-direction: column;
  gap: var(--dw-space-1);
  margin-bottom: var(--dw-space-3);
}
.ai-rec-action {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dw-text);
}
.ai-rec-reasoning {
  font-size: 0.82rem;
  color: var(--dw-text-2);
  line-height: 1.4;
}
.ai-rec-execute {
  display: inline-flex;
  align-items: center;
  gap: var(--dw-space-2);
  padding: var(--dw-space-2) var(--dw-space-4);
  border: none;
  border-radius: var(--dw-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.ai-rec-card.sage .ai-rec-execute {
  background: var(--dw-green);
  color: var(--dw-text-inv);
}
.ai-rec-card.sage .ai-rec-execute:hover {
  background: var(--dw-green);
  transform: translateY(-1px);
}
.ai-rec-card.sun .ai-rec-execute {
  background: var(--dw-gold);
  color: var(--dw-text-inv);
}
.ai-rec-card.sun .ai-rec-execute:hover {
  background: var(--dw-gold-bright);
  transform: translateY(-1px);
}
.ai-rec-card.ash .ai-rec-execute {
  background: var(--dw-surface-2);
  color: var(--dw-text);
}
.ai-rec-card.ash .ai-rec-execute:hover {
  background: var(--dw-surface-h);
  transform: translateY(-1px);
}

/* Confidence badge */
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--dw-radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.confidence-badge.sage {
  background: var(--dw-green-soft);
  color: var(--dw-green);
}
.confidence-badge.sun {
  background: var(--dw-gold-soft);
  color: var(--dw-gold);
}
.confidence-badge.ash {
  background: var(--dw-neutral-soft);
  color: var(--dw-neutral);
}

/* AI recommendation pill (list views) */
.ai-rec-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--dw-radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-rec-pill.sage {
  background: var(--dw-green-soft);
  color: var(--dw-green);
}
.ai-rec-pill.sun {
  background: var(--dw-gold-soft);
  color: var(--dw-gold);
}
.ai-rec-pill.ash {
  background: var(--dw-neutral-soft);
  color: var(--dw-neutral);
}

/* List item AI row */
.job-row-ai,
.list-item-ai {
  padding: 2px 0;
}

/* Ensure AI pill in list items doesn't break layout */
.job-row .ai-rec-pill,
.list-item .ai-rec-pill {
  font-size: 0.65rem;
}


/* ═══ Workstream B: Clickable detail affordances ═══ */
/* Table row hover affordance */
[data-platform-account-row]:hover,
[data-detail-row]:hover,
.activity-item:hover {
  background: rgba(56, 189, 248, 0.06);
  cursor: pointer;
  transition: background 0.15s ease;
}
[data-platform-account-row].is-selected {
  background: rgba(56, 189, 248, 0.12);
}

/* Chart drill-down panel */
.chart-drilldown {
  margin-top: var(--dw-space-3);
  padding: var(--dw-space-4);
  background: var(--dw-surface);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-md);
  animation: slideDown 0.2s ease-out;
  max-height: 300px;
  overflow-y: auto;
}
.chart-drilldown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--dw-space-3);
}
.chart-drilldown-header h4 {
  font-family: "Oswald", sans-serif;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dw-blue);
  margin: 0;
}
.chart-drilldown-close {
  background: none;
  border: none;
  color: var(--dw-muted);
  cursor: pointer;
  font-size: 1.125rem;
  padding: 0 4px;
  line-height: 1;
}
.chart-drilldown-close:hover {
  color: var(--dw-text);
}
.chart-drilldown table {
  width: 100%;
}
.chart-drilldown td, .chart-drilldown th {
  padding: 4px 8px;
  font-size: 0.75rem;
}
.chart-drilldown th {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.625rem;
  color: var(--dw-muted);
  text-align: left;
  border-bottom: 1px solid var(--dw-border);
}

/* KPI metric click affordance */
.mini-metric[data-metric-key],
.summary-grid .kpi-card[data-metric-key] {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mini-metric[data-metric-key]:hover,
.summary-grid .kpi-card[data-metric-key]:hover {
  background: rgba(56, 189, 248, 0.08);
  border-color: var(--dw-blue);
}

/* Platform account row toggle (like Operations) */
[data-platform-account-row] {
  cursor: pointer;
  transition: background 0.12s ease;
}


/* ═══ Workstream E: AI Intent Framework styles ═══ */
.ai-intent-card {
  background: var(--dw-surface);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-md);
  padding: var(--dw-space-4);
  margin: var(--dw-space-3) 0;
  position: relative;
  overflow: hidden;
}
.ai-intent-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--dw-blue);
}
.ai-intent-card.sage::before { background: var(--dw-green); }
.ai-intent-card.sun::before  { background: var(--dw-gold); }
.ai-intent-card.ash::before  { background: var(--dw-neutral); }
.ai-intent-card.sage { box-shadow: 0 0 16px rgba(52, 211, 153, 0.08); }
.ai-intent-card.sun  { box-shadow: 0 0 16px rgba(212, 168, 83, 0.08); }

.ai-intent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ai-intent-title {
  font-family: "Oswald", sans-serif;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dw-muted);
}
.ai-intent-summary {
  font-size: 15px;
  font-weight: 600;
  color: var(--dw-text);
  margin-bottom: 8px;
  line-height: 1.35;
}
.ai-intent-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: rgba(56, 189, 248, 0.04);
  border-radius: var(--dw-radius-sm, 4px);
}
.ai-intent-step {
  font-size: 0.75rem;
  color: var(--dw-text);
  padding: 3px 8px;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 3px;
  font-family: "Roboto Mono", monospace;
}
.ai-intent-step.primary {
  background: rgba(56, 189, 248, 0.2);
  font-weight: 600;
}
.ai-intent-step-connector {
  color: var(--dw-muted);
  font-size: 0.875rem;
}
.ai-intent-condition {
  color: var(--dw-gold);
  font-size: 0.625rem;
  font-style: italic;
}
.ai-intent-optional {
  color: var(--dw-muted);
  font-size: 0.625rem;
}
.ai-intent-reasoning {
  font-size: 0.75rem;
  color: var(--dw-muted);
  line-height: 1.4;
  margin-bottom: 8px;
}
.ai-intent-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ai-intent-opp-score {
  font-family: "Oswald", sans-serif;
  font-size: 0.8125rem;
  color: var(--dw-gold);
  letter-spacing: 0.03em;
}
.ai-intent-opp-icon {
  color: var(--dw-gold);
  font-size: 0.625rem;
}
.ai-intent-execute {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--dw-radius-sm, 4px);
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.1s ease;
  background: rgba(56, 189, 248, 0.15);
  color: var(--dw-blue);
}
.ai-intent-execute:hover {
  background: rgba(56, 189, 248, 0.25);
  transform: translateY(-1px);
}
.ai-intent-card.sage .ai-intent-execute {
  background: rgba(52, 211, 153, 0.15);
  color: var(--dw-green);
}
.ai-intent-card.sage .ai-intent-execute:hover {
  background: rgba(52, 211, 153, 0.25);
}
.ai-intent-card.sun .ai-intent-execute {
  background: rgba(212, 168, 83, 0.15);
  color: var(--dw-gold);
}
.ai-intent-card.sun .ai-intent-execute:hover {
  background: rgba(212, 168, 83, 0.25);
}

/* Alternatives disclosure */
.ai-intent-alternatives {
  margin-top: 8px;
  border-top: 1px solid var(--dw-border);
  padding-top: 8px;
}
.ai-intent-alt-trigger {
  font-size: 0.6875rem;
  color: var(--dw-muted);
  cursor: pointer;
  user-select: none;
}
.ai-intent-alt-trigger:hover {
  color: var(--dw-blue);
}
.ai-intent-alt-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-intent-alt-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: rgba(56, 189, 248, 0.04);
  border-radius: 3px;
  font-size: 0.75rem;
}
.ai-intent-alt-summary {
  color: var(--dw-text);
}
.ai-intent-alt-conf {
  font-family: "Roboto Mono", monospace;
  font-size: 0.625rem;
  color: var(--dw-muted);
}

/* ═══ Intent kind / channel / urgency badges — Workstream E Phase 1 ═══ */

.kind-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  font-family: "Roboto Mono", monospace;
  background: rgba(56, 189, 248, 0.08);
  color: var(--dw-text);
  border: 1px solid rgba(56, 189, 248, 0.2);
}
.kind-badge.kind-engage  { background: rgba(56, 189, 248, 0.12);  border-color: rgba(56, 189, 248, 0.3); color: var(--dw-blue); }
.kind-badge.kind-qualify { background: rgba(212, 168, 83, 0.12);  border-color: rgba(212, 168, 83, 0.3); color: var(--dw-gold); }
.kind-badge.kind-commit  { background: rgba(52, 211, 153, 0.12);  border-color: rgba(52, 211, 153, 0.3); color: var(--dw-green); }
.kind-badge.kind-fulfill { background: rgba(52, 211, 153, 0.12);  border-color: rgba(52, 211, 153, 0.3); color: var(--dw-green); }
.kind-badge.kind-resolve { background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.3); color: var(--dw-text-3); }

.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.625rem;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--dw-muted);
  border: 1px solid var(--dw-border);
}
.channel-badge.ch-email { color: var(--dw-text-3); }
.channel-badge.ch-sms   { color: var(--dw-blue); }
.channel-badge.ch-call  { color: var(--dw-gold); }
.channel-badge.ch-wait  { color: var(--dw-text-3); opacity: 0.7; }

.urgency-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dw-border);
  overflow: hidden;
  font-family: "Roboto Mono", monospace;
}
.urgency-badge .urgency-tier-label {
  position: relative;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.urgency-badge .urgency-window {
  position: relative;
  z-index: 2;
  color: var(--dw-muted);
  font-weight: 400;
}
.urgency-badge .urgency-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0.18;
  transition: width 0.6s ease;
}
.urgency-badge.ember { border-color: rgba(239, 68, 68, 0.4); color: var(--dw-red); }
.urgency-badge.ember .urgency-fill { background: var(--dw-red); }
.urgency-badge.sun   { border-color: rgba(212, 168, 83, 0.4); color: var(--dw-amber); }
.urgency-badge.sun .urgency-fill   { background: var(--dw-gold); }
.urgency-badge.sky   { border-color: rgba(56, 189, 248, 0.4); color: var(--dw-blue-bright); }
.urgency-badge.sky .urgency-fill   { background: var(--dw-blue); }
.urgency-badge.ash   { border-color: rgba(148, 163, 184, 0.3); color: var(--dw-text-3); }
.urgency-badge.ash .urgency-fill   { background: var(--dw-text-3); }

.urgency-badge.breached {
  border-color: var(--dw-red);
  background: rgba(239, 68, 68, 0.08);
  color: var(--dw-red);
}
.urgency-badge.breached .urgency-fill { opacity: 0.32; width: 100% !important; background: var(--dw-red); }

.urgency-badge.pulse {
  animation: urgency-pulse-anim 1.6s ease-in-out infinite;
}
@keyframes urgency-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

/* Card-level urgency state */
.ai-intent-card.urgency-breached {
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.1);
}
.ai-intent-card.urgency-pulse {
  border-color: rgba(239, 68, 68, 0.25);
}

/* Pill-level urgency accents (for list rows) */
.ai-rec-pill.urgency-ember { border-left: 2px solid var(--dw-red); padding-left: 6px; }
.ai-rec-pill.urgency-sun   { border-left: 2px solid var(--dw-gold); padding-left: 6px; }
.ai-rec-pill.urgency-sky   { border-left: 2px solid var(--dw-blue); padding-left: 6px; }
.ai-rec-pill.urgency-ash   { border-left: 2px solid var(--dw-text-3); padding-left: 6px; }
.ai-rec-pill.urgency-breached {
  background: rgba(239, 68, 68, 0.1);
  color: var(--dw-red);
  border-left-color: var(--dw-red);
}
.ai-rec-pill.urgency-pulse {
  animation: urgency-pulse-anim 1.6s ease-in-out infinite;
}

/* Mobile responsive for intent card */
@media (max-width: 768px) {
  .ai-intent-steps {
    flex-direction: column;
    align-items: flex-start;
  }
  .ai-intent-step-connector {
    transform: rotate(90deg);
    display: block;
    text-align: center;
  }
  .ai-intent-header {
    flex-wrap: wrap;
  }
  .urgency-badge {
    margin-top: 4px;
  }
}


/* ═══ Workstream D: Call Workflow styles ═══ */
.call-workflow-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.call-workflow {
  margin-top: var(--dw-space-3);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-md);
  overflow: hidden;
  animation: slideDown 0.2s ease-out;
}
.cw-phase {
  padding: var(--dw-space-4);
}
.cw-phase-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cw-phase-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dw-blue);
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
}
.cw-phase-title {
  font-family: "Oswald", sans-serif;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dw-text);
}
.cw-timer {
  margin-left: auto;
  font-family: "Roboto Mono", monospace;
  font-size: 1.125rem;
  color: var(--dw-blue);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Phase 1: Context card */
.cw-context-card {
  background: var(--dw-surface-h, var(--dw-bg));
  border-radius: var(--dw-radius-sm, 4px);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.cw-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  font-size: 0.75rem;
}
.cw-context-grid .cw-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dw-muted);
  margin-bottom: 2px;
}
.cw-context-grid strong {
  color: var(--dw-text);
  font-size: 0.8125rem;
}
.cw-ai-briefing {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--dw-border);
}
.cw-ai-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.cw-ai-briefing p {
  font-size: 0.75rem;
  color: var(--dw-muted);
  line-height: 1.45;
  margin: 0;
}

/* Phase 2: Live tags */
.cw-live-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.cw-tag-btn {
  min-width: 44px;
  min-height: var(--tap-min, 44px);
  padding: 8px 14px;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-sm, 4px);
  background: var(--dw-surface);
  color: var(--dw-text);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.cw-tag-btn:hover {
  border-color: var(--dw-blue);
  transform: translateY(-1px);
}
.cw-tag-btn.active {
  border-color: var(--dw-blue);
  background: rgba(56, 189, 248, 0.12);
}
.cw-tag-btn.sage.active { border-color: var(--dw-green); background: rgba(52, 211, 153, 0.12); }
.cw-tag-btn.sun.active  { border-color: var(--dw-gold); background: rgba(212, 168, 83, 0.12); }
.cw-tag-btn.sky.active  { border-color: var(--dw-blue); background: rgba(56, 189, 248, 0.12); }
.cw-tag-btn.ember.active { border-color: var(--dw-red); background: rgba(239, 68, 68, 0.12); }

.cw-tags-applied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 0;
}
.cw-applied-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--dw-text);
}
.cw-remove-tag {
  background: none;
  border: none;
  color: var(--dw-muted);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0 2px;
  line-height: 1;
}
.cw-remove-tag:hover {
  color: var(--dw-red);
}

.cw-live-notes {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-sm, 4px);
  background: var(--dw-surface);
  color: var(--dw-text);
  font-family: "Roboto", sans-serif;
  font-size: 0.8125rem;
  resize: vertical;
  margin-bottom: 10px;
}
.cw-live-notes:focus {
  outline: none;
  border-color: var(--dw-blue);
}

/* Phase 3: Wrap-up form */
.cw-wrapup-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.cw-select {
  padding: 8px 10px;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-sm, 4px);
  background: var(--dw-surface);
  color: var(--dw-text);
  font-size: 0.8125rem;
}
.cw-select:focus {
  outline: none;
  border-color: var(--dw-blue);
}
.cw-wrapup-notes {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-sm, 4px);
  background: var(--dw-surface);
  color: var(--dw-text);
  font-family: "Roboto", sans-serif;
  font-size: 0.8125rem;
  resize: vertical;
}
.cw-wrapup-notes:focus {
  outline: none;
  border-color: var(--dw-blue);
}

/* Next action suggestion */
.cw-next-action-suggestion {
  padding: 8px 12px;
  background: rgba(212, 168, 83, 0.06);
  border: 1px solid rgba(212, 168, 83, 0.2);
  border-radius: var(--dw-radius-sm, 4px);
}
.cw-next-action-suggestion .cw-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dw-gold);
  margin-bottom: 4px;
}
.cw-next-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cw-next-action-text {
  font-size: 0.8125rem;
  color: var(--dw-text);
}
.cw-accept-action.accepted {
  color: var(--dw-green);
  border-color: var(--dw-green);
}

/* Phase actions row */
.cw-phase-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

/* Mobile: large touch targets */
@media (max-width: 768px) {
  .cw-tag-btn {
    min-width: 48px;
    min-height: 48px;
    font-size: 0.875rem;
  }
  .cw-context-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════ */
/* RECORD DETAIL — First-Principles Redesign                  */
/* Layout: Context → Thread → Unified Action Bar              */
/* ═══════════════════════════════════════════════════════════ */

.record-detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Context Header ── */
.record-context { padding: 0.5rem 0 0; }
.record-context-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.record-context-left, .record-context-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.record-phone { font-weight: 600; color: var(--text-primary); font-family: 'Roboto Mono', monospace; }
.record-email { color: var(--text-secondary); }
.record-value { font-weight: 700; color: var(--dw-green); font-family: 'Roboto Mono', monospace; }
.record-tech { color: var(--text-secondary); font-size: 0.8rem; }
.record-work-desc { font-size: 0.8rem; color: var(--text-secondary); margin: 0.25rem 0 0; }
.record-history-chip {
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface-raised);
  border-radius: 8px;
  border-left: 3px solid var(--dw-gold);
  margin-top: 0.35rem;
}

/* ── Next action / Flag banners ── */
.record-next-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  font-size: 0.85rem;
}
.record-next-icon { font-size: 1.1rem; }
.record-next-time { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.15rem; }
.record-flag-banner {
  padding: 0.5rem 0.75rem;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--dw-red);
}

/* ── Thread (the living record) ── */
.record-thread {
  background: var(--surface-raised);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.record-thread-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(30, 46, 72, 0.3);
}
.record-thread-title {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.record-thread-count {
  font-size: 0.7rem;
  color: var(--text-subtle);
  font-family: 'Roboto Mono', monospace;
}
.record-thread-body {
  max-height: 280px;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.record-thread-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.85rem;
  font-style: italic;
}

/* ── Job fields disclosure ── */
.record-fields-disclosure {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}
.record-fields-summary {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  background: rgba(30, 46, 72, 0.15);
  user-select: none;
}
.record-fields-summary:hover { background: rgba(30, 46, 72, 0.25); }
.record-fields-disclosure[open] .record-fields-summary { border-bottom: 1px solid var(--border-subtle); }

/* ═══ UNIFIED ACTION BAR ═══ */
.record-action-bar {
  background: var(--surface-raised);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.record-action-bar.closed {
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.record-closed-label { font-size: 0.9rem; color: var(--text-secondary); }

.record-action-section { display: flex; flex-direction: column; gap: 0.35rem; }
.record-action-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  padding-left: 0.15rem;
}

/* ── Outcome grid — the primary interaction ── */
.record-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}
.outcome-btn {
  padding: 0.5rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  line-height: 1.2;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outcome-btn:hover {
  border-color: var(--accent-primary);
  background: rgba(56, 189, 248, 0.06);
}
.outcome-btn.active {
  border-color: var(--dw-blue);
  background: rgba(56, 189, 248, 0.12);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}
.outcome-btn.tone-sage:hover, .outcome-btn.tone-sage.active { border-color: var(--dw-green); background: rgba(52, 211, 153, 0.1); }
.outcome-btn.tone-sage.active { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.2); }
.outcome-btn.tone-sun:hover, .outcome-btn.tone-sun.active { border-color: var(--dw-gold); background: rgba(212, 168, 83, 0.1); }
.outcome-btn.tone-sun.active { box-shadow: 0 0 0 2px rgba(212, 168, 83, 0.2); }
.outcome-btn.tone-ember:hover, .outcome-btn.tone-ember.active { border-color: var(--dw-red); background: rgba(248, 113, 113, 0.1); }
.outcome-btn.tone-ember.active { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2); }
.outcome-btn.tone-ash:hover, .outcome-btn.tone-ash.active { border-color: var(--dw-text-3); background: rgba(136, 153, 170, 0.1); }

/* ── Outcome expand panel (direction, notes, conditional fields) ── */
.record-outcome-expand {
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.outcome-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem;
}
.outcome-direction, .outcome-notes-input, .outcome-cond-input {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 0.82rem;
  background: var(--surface-base);
  color: var(--text-primary);
}
.outcome-cond-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.outcome-conditional {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.outcome-confirm-row {
  display: flex;
  gap: 0.5rem;
}
.outcome-confirm-btn {
  flex: 1;
  padding: 0.55rem 1rem;
  background: var(--dw-blue);
  color: var(--dw-bg);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.outcome-confirm-btn:hover { background: var(--dw-blue-bright); }
.outcome-cancel-btn {
  padding: 0.55rem 1rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 0.82rem;
  cursor: pointer;
}
.outcome-cancel-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* ── Send / Advance / Close action buttons ── */
.record-send-row, .record-advance-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.send-action-btn {
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.06);
  color: var(--dw-blue);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.send-action-btn:hover { background: rgba(56, 189, 248, 0.12); border-color: var(--dw-blue); }
.advance-btn {
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(52, 211, 153, 0.25);
  background: rgba(52, 211, 153, 0.06);
  color: var(--dw-green);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.advance-btn:hover { background: rgba(52, 211, 153, 0.12); border-color: var(--dw-green); }
.advance-btn.primary {
  background: var(--dw-green);
  color: var(--dw-bg);
  border-color: var(--dw-green);
}
.advance-btn.primary:hover { background: var(--dw-green); }
.close-action-btn {
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(136, 153, 170, 0.2);
  background: transparent;
  color: var(--text-subtle);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.close-action-btn:hover { border-color: var(--dw-red); color: var(--dw-red); }
.action-btn-reopen {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.06);
  color: var(--dw-blue);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.action-btn-reopen:hover { background: rgba(56, 189, 248, 0.12); }

/* ── Canonical-path hint (B-3): point operators back to Today for routine sends ── */
.record-canonical-hint {
  margin: 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-secondary);
  background: rgba(56, 189, 248, 0.05);
  border-left: 2px solid rgba(56, 189, 248, 0.35);
  border-radius: 4px;
}
.record-canonical-hint strong { color: var(--dw-blue); font-weight: 600; }

.record-action-row--secondary { opacity: 0.78; }
.record-action-row--secondary .send-action-btn,
.record-action-row--secondary .advance-btn {
  background: transparent;
  font-weight: 500;
}
.record-action-row--secondary:hover { opacity: 1; }

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .record-outcome-grid { grid-template-columns: repeat(2, 1fr); }
  .outcome-detail-grid { grid-template-columns: 1fr; }
  .outcome-conditional { grid-template-columns: 1fr; }
}

/* === DRILLDOWN DRAWER (Phase 1) ===================================== */
.drill-drawer { position: fixed; inset: 0; z-index: var(--dw-z-modal); pointer-events: none; }
.drill-drawer.is-open { pointer-events: auto; }
.drill-drawer-backdrop { position: absolute; inset: 0; background: rgba(13,20,32,0.55); opacity: 0; transition: opacity .18s ease; }
.drill-drawer.is-open .drill-drawer-backdrop { opacity: 1; }
.drill-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 92vw); background: var(--dw-bg-mid); border-left: 1px solid var(--dw-border-strong); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: -12px 0 40px rgba(0,0,0,0.4); }
.drill-drawer.is-open .drill-drawer-panel { transform: translateX(0); }
.drill-drawer-header { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--dw-border-strong); }
.drill-drawer-back { background: transparent; border: none; color: var(--dw-text-3); font-size: 0.6875rem; padding: 6px 8px; cursor: pointer; font-family: 'Roboto Mono', monospace; border-radius: 3px; letter-spacing: 0.04em; text-transform: uppercase; }
.drill-drawer-back:hover { color: var(--dw-blue); background: rgba(56,189,248,0.08); }
.drill-drawer-titles { flex: 1; min-width: 0; }
.drill-drawer-kicker { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dw-text-3); font-family: 'Roboto Mono', monospace; margin: 0; }
.drill-drawer-title { font-family: 'Oswald', sans-serif; font-size: 1.625rem; color: var(--dw-text); margin: 4px 0 2px; letter-spacing: 0.02em; font-weight: 500; line-height: 1.1; word-break: break-word; }
.drill-drawer-sub { font-size: 0.6875rem; color: var(--dw-text-3); margin: 0; font-family: 'Roboto Mono', monospace; }
.drill-drawer-close { background: transparent; border: none; color: var(--dw-text-3); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 2px 10px; border-radius: 3px; flex-shrink: 0; }
.drill-drawer-close:hover { color: var(--dw-red); background: rgba(248,113,113,0.08); }
.drill-drawer-body { flex: 1; overflow-y: auto; }
.drill-drawer-footer { border-top: 1px solid var(--dw-border-strong); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.drill-drawer-count { font-size: 0.625rem; color: var(--dw-text-3); font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; }
.drill-drawer-export { background: transparent; border: 1px solid var(--dw-border-strong); color: var(--dw-text-3); font-size: 0.625rem; padding: 6px 12px; cursor: pointer; border-radius: 3px; font-family: 'Roboto Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.drill-drawer-export:hover { border-color: var(--dw-blue); color: var(--dw-blue); }
.drill-drawer-empty { color: var(--dw-text-3); font-size: 0.8125rem; text-align: center; padding: 40px 20px; margin: 0; }

.drill-row { display: grid; gap: 10px; padding: 12px 20px; align-items: center; border-bottom: 1px solid var(--dw-bg-mid); }
.drill-row-header { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dw-text-3); font-family: 'Roboto Mono', monospace; padding: 10px 20px; border-bottom: 1px solid var(--dw-border-strong); background: var(--dw-bg); position: sticky; top: 0; z-index: 1; }
.drill-row-item { background: transparent; border: none; border-bottom: 1px solid var(--dw-bg-mid); color: inherit; font: inherit; cursor: pointer; text-align: left; width: 100%; display: grid; gap: 10px; padding: 12px 20px; align-items: center; }
.drill-row-item:hover { background: rgba(56,189,248,0.06); }
.drill-row-item:focus-visible { outline: 2px solid var(--dw-blue); outline-offset: -2px; }
.drill-cell { font-size: 0.75rem; color: var(--dw-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-cell[data-col='customer'] { color: var(--dw-text); font-weight: 500; }
.drill-cell[data-col='amount'] { font-family: 'Oswald', sans-serif; font-size: 15px; color: var(--dw-text); letter-spacing: 0.02em; }
.drill-cell[data-col='date'] { font-family: 'Roboto Mono', monospace; font-size: 0.625rem; letter-spacing: 0.04em; color: var(--dw-text-3); }
.drill-cell[data-col='type'] { font-family: 'Roboto Mono', monospace; font-size: 0.625rem; letter-spacing: 0.04em; color: var(--dw-text-3); text-transform: uppercase; }
.drill-cell[data-col='status'] { font-family: 'Roboto Mono', monospace; font-size: 0.625rem; letter-spacing: 0.04em; color: var(--dw-text-3); text-transform: uppercase; }

.summary-card.drill-clickable { cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease; position: relative; }
.summary-card.drill-clickable:hover { background: rgba(56,189,248,0.05); border-color: var(--dw-blue); transform: translateY(-1px); }
.summary-card.drill-clickable:focus-visible { outline: 2px solid var(--dw-blue); outline-offset: 2px; }
.summary-card.drill-clickable::after { content: '\2197'; position: absolute; top: 10px; right: 12px; color: var(--dw-text-3); font-size: 0.8125rem; opacity: 0; transition: opacity 0.12s ease; }
.summary-card.drill-clickable:hover::after { opacity: 1; color: var(--dw-blue); }

.drill-record-detail { padding: 22px 20px; }
.drill-record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin-bottom: 24px; }
.drill-record-field { display: flex; flex-direction: column; gap: 4px; }
.drill-record-field span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dw-text-3); font-family: 'Roboto Mono', monospace; }
.drill-record-field strong { font-size: 0.875rem; color: var(--dw-text); font-weight: 500; }
.drill-record-field strong.drill-amount { font-family: 'Oswald', sans-serif; font-size: 1.5rem; color: var(--dw-gold); letter-spacing: 0.02em; font-weight: 500; }
.drill-record-linked { border-top: 1px solid var(--dw-border-strong); padding-top: 18px; margin-top: 4px; }
.drill-record-section-kicker { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dw-text-3); font-family: 'Roboto Mono', monospace; margin: 0 0 10px; }
.drill-record-job-link { background: transparent; border: 1px solid var(--dw-blue); color: var(--dw-blue); padding: 11px 14px; cursor: pointer; border-radius: 3px; font-size: 0.6875rem; font-family: 'Roboto Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; width: 100%; text-align: left; }
.drill-record-job-link:hover { background: rgba(56,189,248,0.08); }

@media (max-width: 768px) {
  .drill-drawer-panel { width: 100%; }
  .drill-record-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* APP-D CALL WORKFLOW — DW-BlueSlate, mobile-first, 44px tap targets  */
/* ═══════════════════════════════════════════════════════════════════ */

.call-workflow {
  background: var(--dw-bg-deep);
  border: 1px solid var(--dw-border-strong);
  border-radius: 4px;
  margin: 14px 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.call-workflow[hidden] { display: none; }

.cw-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--dw-bg) 0%, var(--dw-bg) 100%);
  border-bottom: 1px solid var(--dw-border-strong);
}
.cw-header-left { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1; }
.cw-header-icon { color: var(--dw-blue); font-size: 1.25rem; line-height: 1; padding-top: 2px; }
.cw-header-title { font-family: 'Oswald', sans-serif; font-size: 0.875rem; color: var(--dw-text); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.cw-header-sub { font-size: 0.6875rem; color: var(--dw-text-3); font-family: 'Roboto Mono', monospace; letter-spacing: 0.02em; margin-top: 2px; word-break: break-all; }
.cw-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cw-close-btn {
  min-width: 44px; min-height: var(--tap-min, 44px);
  background: transparent; border: 1px solid var(--dw-border-strong); color: var(--dw-text-3);
  font-size: 1.125rem; line-height: 1; cursor: pointer; border-radius: 3px; padding: 0 10px;
}
.cw-close-btn:hover { background: rgba(239,68,68,0.08); border-color: var(--dw-red); color: var(--dw-red); }

.cw-urgency-badge {
  font-family: 'Roboto Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 3px; white-space: nowrap; font-weight: 500;
}
.cw-urgency-immediate { background: rgba(239,68,68,0.12); color: var(--dw-red); border: 1px solid rgba(239,68,68,0.35); }
.cw-urgency-today     { background: rgba(212,168,83,0.12); color: var(--dw-gold); border: 1px solid rgba(212,168,83,0.35); }
.cw-urgency-this_week { background: rgba(56,189,248,0.10); color: var(--dw-blue); border: 1px solid rgba(56,189,248,0.30); }
.cw-urgency-standing  { background: rgba(136,153,170,0.10); color: var(--dw-text-3); border: 1px solid rgba(136,153,170,0.30); }

.cw-phase-nav {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--dw-bg-deep); border-bottom: 1px solid var(--dw-border-strong);
}
.cw-phase-step {
  padding: 11px 8px; text-align: center;
  font-family: 'Roboto Mono', monospace; font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dw-text-3); border-right: 1px solid var(--dw-border-strong); cursor: default;
}
.cw-phase-step:last-child { border-right: none; }
.cw-phase-step.cw-phase-done { color: var(--dw-blue); background: rgba(56,189,248,0.04); }
.cw-phase-step.cw-phase-active { color: var(--dw-gold); background: rgba(212,168,83,0.08); font-weight: 500; }

.cw-phase-panel { padding: 14px 16px; }
.cw-phase-panel[hidden] { display: none; }

.cw-section { margin-bottom: 16px; }
.cw-section:last-child { margin-bottom: 0; }
.cw-section-title {
  font-family: 'Oswald', sans-serif; font-size: 0.6875rem; color: var(--dw-text-2);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin: 0 0 8px;
}

.cw-kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 14px; margin: 0; }
.cw-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-kv dt { font-family: 'Roboto Mono', monospace; font-size: 9px; color: var(--dw-text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.cw-kv dd { margin: 0; font-size: 0.8125rem; color: var(--dw-text); font-weight: 500; }

.cw-talking-points { margin: 0; padding-left: 18px; color: var(--dw-text-2); font-size: 0.8125rem; line-height: 1.55; }
.cw-talking-points li { margin-bottom: 4px; }
.cw-empty-hint { margin: 0; color: var(--dw-text-3); font-size: 0.75rem; font-style: italic; }

.cw-form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cw-label { display: block; font-size: 0.6875rem; color: var(--dw-text-2); font-family: 'Roboto Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.cw-select, .cw-input, .cw-textarea {
  width: 100%; min-height: var(--tap-min, 44px);
  background: var(--dw-bg); border: 1px solid var(--dw-border-strong); color: var(--dw-text);
  font-size: 0.875rem; padding: 10px 12px; border-radius: 3px; font-family: inherit;
}
.cw-textarea { min-height: 70px; resize: vertical; line-height: 1.5; }
.cw-select:focus, .cw-input:focus, .cw-textarea:focus { outline: 2px solid var(--dw-blue); outline-offset: 0; border-color: var(--dw-blue); }

.cw-phase-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.cw-dial-btn {
  flex: 1 1 auto; min-height: var(--tap-min, 44px); padding: 11px 16px;
  font-family: 'Oswald', sans-serif; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  background: var(--dw-blue); color: var(--dw-bg-deep); border: none; border-radius: 3px; cursor: pointer;
  text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.cw-dial-btn:hover { background: var(--dw-blue-bright); }
.cw-dial-btn.primary { background: var(--dw-blue); }
.cw-dial-provider { font-family: 'Roboto Mono', monospace; font-size: 0.625rem; letter-spacing: 0.04em; opacity: 0.75; text-transform: none; }
.cw-secondary-btn {
  min-height: var(--tap-min, 44px); padding: 11px 14px;
  background: transparent; border: 1px solid var(--dw-border-strong); color: var(--dw-text-2);
  font-size: 0.75rem; font-family: 'Roboto Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 3px; cursor: pointer;
}
.cw-secondary-btn:hover { background: rgba(56,189,248,0.06); border-color: var(--dw-blue); color: var(--dw-blue); }

.cw-timer-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--dw-bg-deep); border-radius: 3px; border: 1px solid var(--dw-border-strong); }
.cw-timer-label { font-family: 'Roboto Mono', monospace; font-size: 0.625rem; color: var(--dw-text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.cw-timer { font-family: 'Oswald', sans-serif; font-size: 1.375rem; color: var(--dw-gold); letter-spacing: 0.04em; font-weight: 500; font-variant-numeric: tabular-nums; }

.cw-tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.cw-tag-btn {
  min-height: var(--tap-min, 44px); padding: 10px 12px; text-align: center;
  background: var(--dw-bg); border: 1px solid var(--dw-border-strong); color: var(--dw-text-2);
  font-size: 0.75rem; font-weight: 500; border-radius: 3px; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cw-tag-btn:hover { background: rgba(56,189,248,0.08); border-color: var(--dw-blue); color: var(--dw-blue); }
.cw-tag-btn.active { background: rgba(212,168,83,0.12); border-color: var(--dw-gold); color: var(--dw-gold); }
.cw-applied-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 20px; }
.cw-applied-tag { background: rgba(212,168,83,0.12); color: var(--dw-gold); border: 1px solid rgba(212,168,83,0.35); padding: 4px 8px; border-radius: 3px; font-size: 0.6875rem; display: inline-flex; align-items: center; gap: 6px; }
.cw-remove-tag { background: transparent; border: none; color: var(--dw-gold); cursor: pointer; font-size: 0.875rem; line-height: 1; padding: 0 2px; min-width: 20px; min-height: 20px; }
.cw-remove-tag:hover { color: var(--dw-red); }

.cw-conditional { display: flex; flex-direction: column; gap: 10px; }
.cw-conditional:empty { display: none; }
.cw-conditional .cw-label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; text-transform: none; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--dw-text-2); font-family: inherit; }

.cw-next-action-suggestion { background: rgba(56,189,248,0.06); border: 1px solid rgba(56,189,248,0.25); border-radius: 3px; padding: 10px 12px; }
.cw-next-action-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }
.cw-next-action-text { font-size: 0.8125rem; color: var(--dw-text); }
.cw-accept-action.accepted { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.4); color: var(--dw-green); }

.cw-trigger-btn { border-color: var(--dw-blue) !important; color: var(--dw-blue) !important; }
.cw-trigger-btn:hover { background: rgba(56,189,248,0.08) !important; }

/* ── UX Red-Team Fixes — Legends, Pagination, Affordances ── */

/* Severity legend bar (Issues 3.1, 3.2, 11.1) */
.severity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(19, 29, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.severity-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.severity-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.severity-legend-dot.emergency { background: var(--accent-danger); }
.severity-legend-dot.urgent { background: var(--sun); }
.severity-legend-dot.hot { background: var(--dw-amber); }
.severity-legend-dot.normal { background: var(--accent-primary); }

/* Tone legend (Issue 1.1) */
.tone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.35rem 0;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-subtle);
}
.tone-legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.tone-legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Timeline legend (Issue 7.2) */
.timeline-legend {
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0 0.5rem;
  font-size: 0.7rem;
  color: var(--text-subtle);
}
.timeline-legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Pagination (Issues 12.1, 23.1) */
.pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin-top: 0.5rem;
}
.pagination-bar button {
  min-height: 40px;
  padding: 0.4rem 1rem;
}
.pagination-info {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Search result type badge (Issue 36.1) */
.search-type-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.search-type-badge.job { background: rgba(56, 189, 248, 0.15); color: var(--accent-primary); }
.search-type-badge.customer { background: rgba(52, 211, 153, 0.15); color: var(--accent-success); }
.search-type-badge.invoice { background: rgba(212, 168, 83, 0.15); color: var(--sun); }
.search-type-badge.conversation { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }

/* Search debounce indicator (Issue 36.2) */
.search-searching {
  padding: 0.5rem 0.75rem;
  color: var(--text-subtle);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.search-searching::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-primary);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin-loader 0.6s linear infinite;
}

/* Activity log expand (Issue 31.2) */
.activity-log-entry {
  cursor: pointer;
}
.activity-log-entry.expanded .activity-full-text {
  display: block;
}
.activity-full-text {
  display: none;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

/* Disabled form explanation banner (Issue 32.2) */
.form-disabled-banner {
  padding: 0.65rem 1rem;
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.25);
  border-radius: var(--radius);
  color: var(--dw-amber);
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
}

/* Data freshness label (Issue 1.3) */
.data-freshness {
  font-size: 0.72rem;
  color: var(--text-subtle);
  margin-left: 0.5rem;
}

/* Aging escalation legend (Issue 15.1) */
.aging-escalation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.4rem 0;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-subtle);
}

/* Stage transition highlight (Issue 20.2) */
@keyframes stage-flash {
  0%   { background: rgba(56, 189, 248, 0.15); }
  100% { background: transparent; }
}
.stage-changed {
  animation: stage-flash 0.8s ease-out;
}

/* Issue 4.2 — Recovery queue horizontal scroll indication */
.recovery-queue-item {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Issue 4.4 — Summary card fixed height for small phones */
.summary-card {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Issue 23.2 — Smoother job expand animation */
.job-inline-detail {
  max-height: 500px;
}

/* Issue 6.2 — Abbreviate cadence card value on mobile */
@media (max-width: 640px) {
  .cadence-card-value {
    font-size: 0.85rem;
  }
}

/* Funnel legend (UX P2) */
.funnel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.4rem 0;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-subtle);
}
.funnel-legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Dispatch list mobile collapse (UX P2) */
@media (max-width: 640px) {
  .list-item[data-type="dispatch"] .list-item-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .list-item[data-type="dispatch"] .list-meta {
    flex-direction: column;
    gap: 0.15rem;
  }

  /* Bulk send form mobile adaptation (UX P2) */
  .bulk-send-form,
  .bulk-action-bar {
    flex-direction: column;
    gap: 0.5rem;
  }
  .bulk-send-form button,
  .bulk-action-bar button {
    min-height: var(--tap-min, 44px);
    width: 100%;
  }
  .bulk-send-form select,
  .bulk-send-form input {
    min-height: var(--tap-min, 44px);
    width: 100%;
  }

  /* Tech schedule table responsive (UX P2) */
  .tech-schedule-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Revenue Proof / Attribution Module ─────────────────── */

/* Hero block at the top of Operations → Recovery Overview. Surfaces the
 * "did it work?" answer above the operational queue so operators don't
 * have to dig into a sub-tab to see whether the system is earning its
 * keep. Uses the sage tone (= recovered revenue) for visual weight. */
.revenue-proof-hero {
  margin: 0 0 var(--dw-space-3) 0;
}
.revenue-proof-hero:empty {
  display: none;
}
.revenue-proof-hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dw-space-3);
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--tone-sage) 14%, var(--surface-base)),
    var(--surface-base)
  );
  border: 1px solid color-mix(in oklab, var(--tone-sage) 35%, var(--border-base));
  border-radius: var(--radius-lg);
  padding: var(--dw-space-3) var(--dw-space-4);
}
.revenue-proof-hero__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.revenue-proof-hero__kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.revenue-proof-hero__value {
  font-family: var(--font-mono);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--tone-sage);
  line-height: 1.1;
}
.revenue-proof-hero__sub {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
}
.revenue-proof-hero__last {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.revenue-proof-hero__last-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  text-align: right;
}
.revenue-proof-hero__cta {
  border: 1px solid var(--border-base);
  background: var(--surface-base);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--text-primary);
}
.revenue-proof-hero__cta:hover {
  border-color: color-mix(in oklab, var(--tone-sage) 50%, var(--border-base));
}
.revenue-proof-hero__narrative {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 4px 0 0;
  text-align: right;
  max-width: 32rem;
  line-height: 1.45;
}

.attribution-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--dw-space-2);
  margin: var(--dw-space-2) 0;
}
.attribution-type-card {
  background: var(--surface-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  padding: var(--dw-space-2) var(--dw-space-3);
}
.attribution-type-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.attribution-type-stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.attribution-type-count {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.attribution-type-revenue {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--tone-sage);
}
.attribution-type-pending {
  font-size: 0.6875rem;
  color: var(--tone-sun);
  margin-top: 4px;
}

/* Attribution Match Cards */
.attribution-match-card {
  background: var(--surface-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  padding: var(--dw-space-2) var(--dw-space-3);
  margin-bottom: var(--dw-space-1);
  transition: border-color 0.15s;
}
.attribution-match-card--pending {
  border-left: 3px solid var(--tone-sun);
}
.attribution-match-card--confirmed {
  border-left: 3px solid var(--tone-sage);
}
.attribution-match-card--rejected {
  opacity: 0.5;
  border-left: 3px solid var(--tone-ember);
}
.attribution-match-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.attribution-match-amount {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
}
.attribution-match-details {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.attribution-match-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Confidence Badges */
.attribution-confidence {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
}
.attribution-confidence--high { background: rgba(52, 211, 153, 0.15); color: var(--dw-green); }
.attribution-confidence--medium { background: rgba(251, 191, 36, 0.15); color: var(--dw-amber); }
.attribution-confidence--low { background: rgba(239, 68, 68, 0.15); color: var(--dw-red); }

/* Type Badges */
.attribution-type-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(56, 189, 248, 0.12);
  color: var(--dw-blue);
}
.attribution-type-badge--estimate_followup { background: rgba(52, 211, 153, 0.12); color: var(--dw-green); }
.attribution-type-badge--missed_call { background: rgba(239, 68, 68, 0.12); color: var(--dw-red); }
.attribution-type-badge--after_hours { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.attribution-type-badge--win_back { background: rgba(251, 191, 36, 0.12); color: var(--dw-amber); }
.attribution-type-badge--payment_collection { background: rgba(56, 189, 248, 0.12); color: var(--dw-blue); }

.attribution-empty {
  text-align: center;
  padding: var(--dw-space-4) var(--dw-space-2);
}

/* Mobile overrides */
@media (max-width: 640px) {
  .attribution-type-grid { grid-template-columns: 1fr 1fr; }
  .attribution-match-amount { font-size: 0.875rem; }
  .attribution-match-header { gap: 6px; }
}
@media (pointer: coarse) {
  .attribution-match-actions .ghost-button { min-height: var(--tap-min, 44px); min-width: 80px; }
}

/* Mobile: stack phase actions, larger touch targets, full-width buttons */
@media (max-width: 640px) {
  .cw-header { flex-direction: column; align-items: stretch; }
  .cw-header-right { justify-content: space-between; }
  .cw-kv-grid { grid-template-columns: 1fr 1fr; }
  .cw-tag-grid { grid-template-columns: 1fr 1fr; }
  .cw-phase-actions { flex-direction: column; }
  .cw-dial-btn, .cw-secondary-btn { width: 100%; }
  .cw-phase-step { font-size: 9px; padding: 10px 4px; letter-spacing: 0.04em; }
}
@media (pointer: coarse) {
  .cw-tag-btn, .cw-dial-btn, .cw-secondary-btn, .cw-close-btn, .cw-select, .cw-input { min-height: var(--tap-min, 44px); }
}

/* ═══════════════════════════════════════════════════════════
   Onboarding Wizard — fullscreen overlay
   ═══════════════════════════════════════════════════════════ */

.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--dw-z-modal);
  background: var(--page-bg, var(--dw-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.ob-overlay[hidden] {
  display: none;
}

/* ── Phase C: PLG demo-mode landing card on wizard step 0 ── */
.ob-demo-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(52, 211, 153, 0.06) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
}
.ob-demo-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.ob-demo-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0.85rem 0.5rem;
  background: rgba(13, 20, 32, 0.35);
  border-radius: 8px;
}
.ob-demo-stat-num {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  color: var(--dw-blue);
  line-height: 1;
}
.ob-demo-stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: 0.02em;
}
.ob-demo-cta {
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  font-weight: 600;
}
.ob-demo-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-subtle);
  text-align: center;
}
.ob-inline-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--dw-blue);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  font-size: inherit;
}
.ob-inline-link:hover { color: var(--dw-blue-bright, #56cfff); }
@media (max-width: 640px) {
  .ob-demo-stats { grid-template-columns: 1fr; }
}

/* ── Phase C: 4-step product tour popover ── */
.product-tour {
  position: fixed;
  inset: 0;
  z-index: calc(var(--dw-z-modal) - 1);
  pointer-events: none;
}
.product-tour[hidden] { display: none; }
.product-tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 20, 32, 0.45);
  pointer-events: auto;
  cursor: pointer;
}
.product-tour-popover {
  position: absolute;
  width: min(380px, 90vw);
  background: var(--surface-raised, var(--dw-bg-mid));
  border: 1px solid var(--border-strong, var(--dw-border-strong));
  border-radius: 12px;
  padding: 1rem 1.1rem 0.9rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  /* Default position: centered. JS repositions next to highlighted target. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.22s cubic-bezier(.2,.8,.2,1), left 0.22s cubic-bezier(.2,.8,.2,1);
}
.product-tour-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-tour-step {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}
.product-tour-close {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
  border-radius: 4px;
}
.product-tour-close:hover { color: var(--dw-red); background: rgba(248, 113, 113, 0.08); }
.product-tour-title {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem;
  color: var(--text-primary);
}
.product-tour-body {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.product-tour-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.product-tour-spacer { flex: 1; }
.product-tour-target-highlight {
  position: relative;
  z-index: calc(var(--dw-z-modal) - 1);
  outline: 2px solid var(--dw-blue);
  outline-offset: 4px;
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(13, 20, 32, 0.4);
  transition: outline 0.18s ease;
}

/* ── Today: unified ranked next-action queue ── */
.today-content { display: flex; flex-direction: column; gap: 1rem; }

.today-stats {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.today-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-base);
  min-width: 110px;
}
.today-stat-value { font-size: 1.4rem; font-weight: 600; color: var(--text-primary); line-height: 1.1; }
.today-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }

/* Phase D-2: semantic KPI tones — color the headline number so urgency reads at a glance */
.today-stat--ember { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.06); }
.today-stat--ember .today-stat-value { color: var(--dw-red); }
.today-stat--sun { border-color: rgba(212, 168, 83, 0.35); background: rgba(212, 168, 83, 0.06); }
.today-stat--sun .today-stat-value { color: var(--dw-gold); }
.today-stat--sage { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.06); }
.today-stat--sage .today-stat-value { color: var(--dw-green); }
.today-stat--neutral { border-color: var(--border-subtle); }
.today-stat--neutral .today-stat-value { color: var(--text-primary); }

/* Phase D-3: skeleton loading state — replaces bare "Loading…" placeholders.
   The shimmer animation is GPU-friendly (transform/opacity only), so it can
   render across many rows without jank. */
@keyframes rc-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.04) 0%,
    rgba(56, 189, 248, 0.10) 50%,
    rgba(56, 189, 248, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: rc-skeleton-shimmer 1.4s linear infinite;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  height: 1rem;
  margin: 0.5rem 0;
}
.skeleton-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: var(--surface-base);
}
.skeleton-row .skeleton { margin: 0; border: none; }
.skeleton-row .skeleton--title { height: 0.85rem; width: 70%; }
.skeleton-row .skeleton--sub { height: 0.7rem; width: 40%; margin-top: 0.4rem; }
.skeleton-row .skeleton--btn { height: 1.8rem; width: 7rem; border-radius: 8px; }
.skeleton-stats {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.skeleton-stat { width: 110px; height: 56px; border-radius: 8px; margin: 0; }

.today-sections { display: flex; flex-direction: column; gap: 1.25rem; }

.today-section { display: flex; flex-direction: column; gap: 0.5rem; }
.today-section-label {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.today-section-count {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  font-size: 0.7rem;
  color: var(--text-primary);
}

.today-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.today-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-base);
}
.today-item--sev-critical { border-left: 3px solid var(--ember, #ef4444); }
.today-item--sev-high     { border-left: 3px solid #f59e0b; }
.today-item--sev-normal   { border-left: 3px solid var(--accent-primary, #38bdf8); }
.today-item--sev-low      { border-left: 3px solid var(--sage, #6b7280); }

.today-item-meta { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.today-item-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.today-item-dot { font-size: 0.7rem; }
.today-item-name { font-size: 0.95rem; }
.today-item-summary { color: var(--text-secondary); font-size: 0.85rem; }
.today-item-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.today-phone { color: var(--accent-primary); text-decoration: none; }
.today-phone:hover { text-decoration: underline; }
.today-item-actions { display: flex; gap: 0.5rem; align-items: center; }

/* Phase D-4: mobile collapse — Today queue stacks instead of side-by-side
   so a phone-sized viewport can read the customer line and tap the action
   button without horizontal scroll. */
@media (max-width: 640px) {
  .today-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .today-item-actions {
    width: 100%;
  }
  .today-item-actions .send-action-btn {
    flex: 1;
    min-height: var(--tap-min, 44px);
  }
  #workspace-today .workspace-header {
    flex-direction: column;
    align-items: stretch;
  }
  #today-replay-tour {
    align-self: flex-start;
  }
  .today-stats {
    flex-direction: column;
    gap: 0.5rem;
  }
  .today-stat {
    width: 100%;
  }
}

.today-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1px dashed var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-base);
}
.today-empty h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.today-empty p { margin: 0.25rem auto; max-width: 42rem; color: var(--text-secondary); }

@media (max-width: 640px) {
  .today-item { grid-template-columns: 1fr; }
  .today-item-actions { justify-content: flex-end; }
}

.ob-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  width: min(1100px, 96vw);
  min-height: min(720px, 92vh);
  max-height: 92vh;
  background: var(--surface-base, var(--dw-bg));
  border-radius: 12px;
  border: 1px solid var(--dw-border);
  box-shadow: var(--dw-shadow-card);
  overflow: hidden;
}

.ob-sidebar {
  background: var(--page-bg, var(--dw-bg));
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-right: 1px solid var(--dw-border);
}

.ob-sidebar-title {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, var(--dw-gold));
  margin: 0;
}

.ob-sidebar-subtitle {
  font-size: 0.82rem;
  color: var(--dw-text-3);
  line-height: 1.5;
  margin: -0.75rem 0 0;
}

.ob-step-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.ob-step-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 150ms ease;
  text-align: left;
  color: var(--dw-text-3);
}

.ob-step-nav-item:hover {
  background: var(--dw-neutral-soft);
}

.ob-step-nav-item.active {
  background: var(--dw-blue-soft);
  border-color: var(--dw-border-strong);
  color: var(--dw-text);
}

.ob-step-nav-item.complete {
  color: var(--success, var(--dw-green));
}

.ob-step-num {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ob-step-nav-item.active .ob-step-num {
  background: var(--accent-primary, var(--dw-blue));
  border-color: var(--accent-primary, var(--dw-blue));
  color: var(--page-bg);
}

.ob-step-nav-item.complete .ob-step-num {
  background: var(--success, var(--dw-green));
  border-color: var(--success, var(--dw-green));
  color: var(--page-bg);
}

.ob-step-label {
  font-size: 0.82rem;
  font-weight: 500;
}

.ob-sidebar-footer {
  margin-top: auto;
}

.ob-main {
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.ob-progress-bar {
  height: 3px;
  background: var(--dw-neutral-soft);
  border-radius: 2px;
  margin-bottom: 1.75rem;
  overflow: hidden;
}

.ob-progress-fill {
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, var(--accent-primary, var(--dw-blue)), var(--accent, var(--dw-gold)));
  border-radius: 2px;
  transition: width 350ms ease;
}

.ob-step {
  display: none;
  flex: 1;
}

.ob-step.active {
  display: flex;
  flex-direction: column;
}

.ob-step-header {
  margin-bottom: 1.5rem;
}

.ob-step-header h2 {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.ob-step-header p {
  font-size: 0.88rem;
  color: var(--dw-text-2);
  line-height: 1.55;
  margin: 0;
}

.ob-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Connection card (ServiceTitan) ── */
.ob-connection-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: var(--dw-neutral-soft);
  border: 1px solid var(--dw-border);
}

.ob-connection-info h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}

.ob-connection-info p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.ob-status-badge {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

.ob-status-badge.connected {
  background: rgba(52,211,153,0.15);
  color: var(--dw-green);
}

.ob-note {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--dw-neutral-soft);
  border: 1px solid rgba(255,255,255,0.08);
}

.ob-note p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  margin: 0;
}

/* ── Form fields ── */
.ob-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.ob-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ob-field span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--dw-text-2);
}

.ob-field small {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}

.ob-field input,
.ob-field select {
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--dw-neutral-soft);
  color: #fff;
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 150ms ease;
}

.ob-field input:focus,
.ob-field select:focus {
  outline: none;
  border-color: var(--accent-primary, var(--dw-blue));
}

/* ── 10DLC card ── */
.ob-10dlc-card {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: var(--dw-neutral-soft);
  border: 1px solid rgba(255,255,255,0.08);
}

.ob-10dlc-card h4 {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.ob-10dlc-card p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.ob-10dlc-status {
  display: flex;
  gap: 1.5rem;
}

.ob-10dlc-item {
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.ob-dot--pending { background: rgba(255,255,255,0.3); }
.ob-dot--approved { background: var(--success, var(--dw-green)); }

/* ── Recovery type toggles ── */
.ob-recovery-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.ob-toggle-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--dw-border);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 150ms ease;
}

.ob-toggle-card:has(input:checked) {
  border-color: rgba(56,189,248,0.3);
  background: rgba(56,189,248,0.06);
}

.ob-toggle-card input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--accent-primary, var(--dw-blue));
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ob-toggle-info h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}

.ob-toggle-info p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.4;
}

.ob-pref-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
  padding-top: 0.5rem;
}

/* ── Team list ── */
.ob-team-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ob-team-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  background: var(--dw-neutral-soft);
  border: 1px solid rgba(255,255,255,0.08);
}

.ob-team-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(56,189,248,0.15);
  color: var(--accent-primary, var(--dw-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ob-team-details {
  flex: 1;
}

.ob-team-details strong {
  font-size: 0.85rem;
  display: block;
}

.ob-team-details small {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
}

.ob-team-role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
}

.ob-invite-form {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: var(--dw-neutral-soft);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ob-invite-form h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

/* ── Footer navigation ── */
.ob-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ob-spacer { flex: 1; }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .ob-container {
    grid-template-columns: 1fr;
    min-height: auto;
    max-height: 100vh;
    border-radius: 0;
  }
  .ob-sidebar {
    padding: 1rem 1.25rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .ob-sidebar-title,
  .ob-sidebar-subtitle,
  .ob-sidebar-footer { display: none; }
  .ob-step-nav {
    flex-direction: row;
    flex: 1;
    justify-content: center;
  }
  .ob-step-label { display: none; }
  .ob-main { padding: 1.25rem; }
  .ob-form-grid { grid-template-columns: 1fr; }
  .ob-recovery-types { grid-template-columns: 1fr; }
  .ob-pref-row { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  .ob-step-nav-item,
  .ob-toggle-card,
  .ob-field input,
  .ob-field select { min-height: var(--tap-min, 44px); }
}

/* ── Theme toggle (top-bar) ─────────────────────────────────────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-toggle-icon {
  font-size: 14px;
  line-height: 1;
}
.theme-toggle-label {
  font-size: 12px;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .theme-toggle-label { display: none; }
}

/* ══════════════════════════════════════════════
   G19 a11y — applied site-wide.
   ══════════════════════════════════════════════ */

/* Honor user's prefers-reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus ring on every interactive element. styles.css has
   element-specific :focus-visible for some inputs already (lines ~228);
   this is the catch-all for everything else. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-primary, #38BDF8);
  outline-offset: 2px;
  border-radius: 3px;
}