/* Sundae design system — tokens + shared components.
   Working accent: Sundae blue. Lavender is the rationed signature accent.
   State speaks in tint+ink pairs. Red is reserved for STOP/DNC/consent-block. */
:root {
  color-scheme: light;
  /* Ground + ink (Phantom-warm paper, confident near-black) */
  --paper: #fffdf8;
  --surface: #ffffff;
  --surface-2: #faf7f0;
  --ink: #1c1c1c;
  --muted: #6e6e6e;
  --line: #eceae4;
  --line-2: #dcdad2;
  --nav: #fdfbf5;
  --nav-ink: #1c1c1c;
  --nav-muted: #6e6e6e;
  /* Working accent (blue) + rationed signature (lavender) */
  /* #3061d9, not #3d6fe0: the brighter blue was 4.38:1 on the warm paper —
     under the 4.5:1 AA floor for the 11px eyebrows/kickers that consume it.
     See tests/test_design_contrast.py. */
  --accent: #3061d9;
  --accent-ink: #ffffff;
  --accent-deep: #1e3a6e;
  --accent-soft: #e3ebfd;
  --accent-faint: #f2f6fe;
  --accent-line: rgba(48, 97, 217, .38);
  --lav: #ab9ff2;
  --lav-soft: #e2dffe;
  --lav-ink: #3c315b;
  /* Positive state: pale tint surface + deep matched ink (Phantom pattern).
     `-dot` variants are darker so a status dot clears 3:1 on its own tint
     (tests/test_design_contrast.py); the vivid parents stay for fills/rails. */
  --go: #2fae4e;
  --go-dot: #1f9440;
  --go-soft: #dbf9df;
  --go-ink: #0a3d18;
  --lav-dot: #7d6ce0;
  /* Restrained data-visualization palette */
  --viz-blue: #2f6fdb; --viz-cyan: #1696a7; --viz-gold: #c58a12; --viz-violet: #7657c8;
  /* Warnings are amber. Red is ONLY for STOP/DNC/consent-block. */
  --warn: #4a3b00;
  --warn-soft: #fff3cd;
  --warn-dot: #a97a00;
  --stop: #b3123a;
  --stop-soft: #ffdadc;
  /* Garnish: sticker yellow + hanko vermilion (see .sticker/.hanko/.seal) */
  --sticker-yellow: #fcc20f;
  --vermilion: #d8432f;
  /* Type */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --font-script: "SignPainter", "SignPainter-HouseScript", "Snell Roundhand",
    "Brush Script MT", cursive;
  --display-weight: 700;
  /* Shape + depth */
  --radius: 9px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(28, 28, 28, .04), 0 8px 24px rgba(28, 28, 28, .04);
  --focus-ring: 0 0 0 3px rgba(48, 97, 217, .3);
  /* Rhythm */
  --tap: 44px;
  --gap: 16px;
}
/* Dark theme — DELIBERATELY UNUSED. No page opts in: every screen, dialer
   included, ships on the light paper ground so the product reads as one
   product. These tokens stay as the seam an opt-in dark preference would hang
   from later. Do not wire a screen to it without that preference. */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f0f0f;
  --surface: #1c1c1c;
  --surface-2: #202020;
  --ink: #fffdf8;
  --muted: #b4b4b4;
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .2);
  --accent: #6ca0fb;
  --accent-ink: #0f1a33;
  --accent-deep: #cdddfa;
  --accent-soft: rgba(108, 160, 251, .14);
  --accent-faint: rgba(108, 160, 251, .08);
  --accent-line: rgba(108, 160, 251, .45);
  --lav-soft: rgba(171, 159, 242, .16);
  --lav-ink: #e2dffe;
  --go-soft: rgba(69, 232, 99, .12);
  --go-ink: #dbf9df;
  --warn: #ffe29a;
  --warn-soft: rgba(255, 214, 0, .12);
  --stop: #ff8d97;
  --stop-soft: rgba(255, 0, 55, .14);
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --focus-ring: 0 0 0 3px rgba(108, 160, 251, .35);
}
/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100vh; }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Layout shell */
.shell { width: min(1180px, 100% - 32px); margin: 0 auto; padding: 20px 0 72px; }
.shell-narrow { width: min(560px, 100% - 32px); margin: 0 auto; padding: 20px 0 72px; }
.stack > * + * { margin-top: var(--gap); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
/* App chrome: brand + screen name + session slot */
.appbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 64px; padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.appbar-brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.appbar-name { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.appbar-screen { color: var(--muted); font-size: 14px; }
.appbar-screen::before { content: "/ "; color: var(--line); }
/* Screens that carry the sidebar name themselves here: the wordmark is in the
   sidebar and is never repeated in the page header. */
.appbar-screen-lead { color: var(--ink); font-size: 16px; font-weight: 700; }
.appbar-screen-lead::before { content: none; }
.appbar-session {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end;
}
.appbar-session .who { color: var(--muted); font-size: 13px; }
.brand-lockup {
  display: inline-flex; align-items: center; color: var(--ink); text-decoration: none;
}
.brand-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo-crop {
  display: block; width: 160px; height: 44px; overflow: hidden; flex: 0 0 auto;
}
.brand-logo {
  display: block; width: 160px; height: auto; transform: translateY(-18px);
}
[data-theme="dark"] .brand-logo-crop {
  border-radius: 8px; background: #faf6ef;
}
/* Conventional CRM frame: persistent navigation, working canvas, record.
   One implementation for every screen — the dialer included. */
.crm-shell {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
}
.crm-nav {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; padding: 16px 14px;
  border-right: 1px solid var(--line); background: var(--nav); color: var(--nav-ink);
}
.crm-nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* The brand lockup is a literal cream sticker: hard 2px offset, ink border. */
.crm-nav .brand-lockup {
  margin: 0 2px 14px; padding: 9px 12px 7px; border-radius: 14px;
  border: 1px solid var(--ink);
  background: linear-gradient(180deg, #fffef8, #fff6dd);
  box-shadow: 2px 2px 0 rgba(28, 28, 28, .85);
  transition: transform .18s ease, box-shadow .18s ease;
}
.crm-nav .brand-lockup:hover {
  transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(28, 28, 28, .85);
}
.crm-nav-links, .crm-nav-group, .crm-nav-group-links {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.crm-lead-finder {
  position: relative; display: flex; align-items: center; margin: 4px 4px 8px;
}
.crm-lead-finder input {
  width: 100%; min-width: 0; min-height: 40px; padding: 7px 42px 7px 11px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--nav-ink);
}
.crm-lead-finder input::placeholder { color: var(--nav-muted); opacity: 1; }
.crm-lead-finder input:focus {
  border-color: var(--accent); background: var(--surface);
}
.crm-lead-finder-shortcut {
  position: absolute; right: 7px; display: inline-flex; align-items: center;
  min-height: 22px; padding: 0 5px; border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 5px; background: var(--surface);
  color: var(--nav-muted); font-family: var(--font-sans); font-size: 10px; line-height: 1;
}
/* The command palette: a light card over the dark nav. Options are the nav's
   own destinations; the last row is always the lead search (form submit). */
.crm-palette {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  padding: 4px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); box-shadow: var(--shadow);
  max-height: 60vh; overflow: auto;
}
.crm-palette-option {
  display: flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 6px 10px; border-radius: 5px; color: var(--ink); cursor: pointer;
}
.crm-palette-option .muted { margin-left: auto; font-size: 11px; }
.crm-palette-option[aria-selected="true"], .crm-palette-option:hover {
  background: var(--accent-soft);
}
/* Each section is a disclosure: a real button header whose chevron points down
   when open, sideways when folded — where to expand is visible, not discovered.
   The section holding the active screen renders open; the rest start folded.
   Sections are color-coded like transit lines: a circled letter badge on the
   header, a faint line running down the open group, and active/hover states
   that pick up the section's color — you always know which zone you are in. */
.crm-nav-group[data-nav-group="work"] {
  --group-line: var(--accent); --group-soft: var(--accent-soft);
  --group-ink: var(--accent-deep);
}
.crm-nav-group[data-nav-group="manage"] {
  --group-line: var(--lav); --group-soft: var(--lav-soft); --group-ink: var(--lav-ink);
}
.crm-nav-group[data-nav-group="control"] {
  --group-line: #8d8c8a; --group-soft: var(--surface-2); --group-ink: #3b3b3b;
}
.crm-nav-section-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 11px 0 0; padding: 4px 8px; min-height: 30px; border: 0;
  border-radius: 8px; background: none; cursor: pointer; color: var(--nav-muted);
  font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; text-align: left;
}
.crm-nav-section-text { display: inline-flex; align-items: center; gap: 8px; }
.crm-nav-section-text::before {
  content: ""; display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--group-line, var(--accent)); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0; line-height: 1;
}
.crm-nav-group[data-nav-group="work"] .crm-nav-section-text::before { content: "W"; }
.crm-nav-group[data-nav-group="manage"] .crm-nav-section-text::before { content: "M"; }
.crm-nav-group[data-nav-group="control"] .crm-nav-section-text::before { content: "C"; }
.crm-nav-section-label:hover { color: var(--nav-ink); background: var(--surface); }
.crm-nav-chevron {
  flex: none; width: 7px; height: 7px; margin: -3px 3px 0 0; transform: rotate(45deg);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transition: transform .15s ease;
}
.crm-nav-group[data-collapsed="true"] .crm-nav-chevron { transform: rotate(-45deg); margin-top: 0; }
.crm-nav-group[data-collapsed="true"] .crm-nav-group-links { display: none; }
/* Workload badge: a quiet number, warm amber family, no alarm color ever. */
.crm-nav-count {
  margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 700; line-height: 1.6; background: var(--warn-soft);
  border: 1px solid #f0dfa8; color: var(--warn);
}
/* The open group carries its transit line: a faint colored rail with the
   links as stops along it. */
.crm-nav-group-links {
  position: relative; margin-left: 9px; padding-left: 12px;
}
.crm-nav-group-links::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  border-radius: 2px; background: var(--group-line, var(--accent)); opacity: .18;
}
/* Lead Desk sub-views: an indented tree under Leads, manager-only. */
.crm-nav-subviews {
  display: flex; flex-direction: column; gap: 2px;
  margin: -2px 0 4px 12px; padding-left: 12px;
  border-left: 1px solid var(--line-2);
}
.crm-nav-sublink {
  display: flex; align-items: center; min-height: var(--tap); padding: 5px 10px;
  border-radius: 6px; color: var(--nav-muted); font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.crm-nav-sublink:hover { color: var(--nav-ink); background: var(--surface); }
/* The phone disclosure. Absent from the desktop sidebar, where the whole list
   is already on screen and a toggle would be a click tax. */
.crm-nav-toggle {
  display: none; align-items: center; gap: 8px; min-height: var(--tap);
  padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 650;
  cursor: pointer;
}
.crm-nav-toggle-bars {
  width: 16px; height: 2px; background: currentColor; border-radius: 2px;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.crm-nav-link {
  display: flex; align-items: center; min-height: var(--tap); padding: 7px 12px;
  border-radius: 8px; color: var(--nav-muted); font-weight: 550; text-decoration: none;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.crm-nav-link:hover {
  color: var(--nav-ink); background: var(--surface);
  box-shadow: inset 2px 0 0 var(--group-line, var(--accent));
}
.crm-nav-link.active {
  color: var(--group-ink, var(--accent-deep));
  background: var(--group-soft, var(--accent-soft)); font-weight: 700;
  box-shadow: inset 2px 0 0 var(--group-line, var(--accent));
}
body[data-sundae-role="dialer"] [data-manager-only],
body[data-sundae-role="closer"] [data-manager-only] { display: none; }
/* View-as: the manager lens. Ships hidden on every screen; only
   Sundae.applyViewAs reveals it, keyed to the server-resolved session role. */
.crm-view-as { margin: 12px 4px 2px; padding: 10px 8px 0; border-top: 1px solid var(--line); }
.crm-view-as-label {
  display: block; color: var(--nav-muted); font-size: 10px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.crm-view-as-options { display: flex; gap: 4px; margin-top: 6px; }
.crm-view-as-option {
  flex: 1; min-height: 36px; padding: 4px 2px; border: 1px solid var(--line-2);
  border-radius: 7px; background: var(--surface); color: var(--nav-muted);
  font-size: 12px; font-weight: 650; cursor: pointer;
}
.crm-view-as-option:hover { color: var(--nav-ink); }
.crm-view-as-option[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent-deep); font-weight: 700;
}
/* The lens chip stays lavender: informational, never an alarm. */
.view-as-banner { border-color: var(--lav); background: var(--lav-soft); color: var(--lav-ink); }
.view-as-banner a { color: inherit; font-weight: 700; }
.crm-nav-session {
  margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line);
}
.crm-nav-session .muted { color: var(--nav-muted); }
.crm-nav-divider, .crm-nav-current { display: none; }
.crm-main { min-width: 0; padding: 0 24px 56px; }
.crm-main-narrow > * { width: min(620px, 100%); }
/* Signed-out pages are product access, not a disabled CRM. Keep the full
   navigation out of the way until an authenticated session exists. */
body:has(#screen-login:not(.hidden)) .crm-shell { grid-template-columns: minmax(0, 1fr); }
body:has(#screen-login:not(.hidden)) .crm-nav,
body:has(#screen-login:not(.hidden)) .appbar { display: none; }
body:has(#screen-login:not(.hidden)) .crm-main {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px;
}
body:has(#screen-login:not(.hidden)) #screen-login { width: min(460px, 100%); }
body:has(#screen-login:not(.hidden)) .crm-main::before {
  content: ""; position: fixed; top: 26px; left: 28px; width: 170px; height: 58px;
  background: url("/assets/sundae-logo.png") center / contain no-repeat;
}
/* Session boot: the first paint of every screen. Not the login form, not a
   blank page — a calm branded ground while the session cookie is checked. */
.session-boot {
  position: fixed; inset: 0; z-index: 50; display: none; place-items: center;
  background: var(--paper);
}
body[data-session="checking"] .session-boot { display: grid; }
.session-boot-inner { display: grid; justify-items: center; gap: 14px; }
.session-boot-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  animation: session-boot-pulse 1.5s ease-in-out infinite;
}
@keyframes session-boot-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.session-boot-copy { margin: 0; color: var(--muted); font-size: 13.5px; }
/* Skeletons instead of spinner theater: the shape of what is coming, once. */
.skeleton {
  border-radius: var(--radius); background: var(--surface-2);
  animation: skeleton-breathe 1.6s ease-in-out infinite;
}
@keyframes skeleton-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
.skeleton-line { height: 12px; margin: 10px 0; }
.skeleton-line.short { width: 55%; }
.skeleton-tile { height: 64px; }
/* Stale-while-revalidate: the last good data stays on screen, quietly. */
.is-refreshing { opacity: .68; transition: opacity .15s ease; }
/* A panel that could not load says so and offers the one fix. Amber, never red. */
.retry-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
/* Type scale: big bold display, tight leading, roomy body */
h1, .display {
  margin: 0; font-size: clamp(30px, 5vw, 46px); line-height: 1.04;
  letter-spacing: -.03em; font-weight: var(--display-weight);
}
h2 { margin: 0; font-size: 19px; letter-spacing: -.015em; font-weight: 700; }
h3 { margin: 0; font-size: 15px; font-weight: 650; }
.lede { margin: 12px 0 0; max-width: 620px; color: var(--muted); font-size: 16px; }
.eyebrow {
  margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.small { font-size: 13px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
/* Buttons — one obvious primary action per screen. Always pills. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-weight: 650; cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.btn:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #2f5cc4; border-color: #2f5cc4; }
.btn-quiet { background: transparent; border-color: transparent; }
.btn-quiet:hover { border-color: var(--line-2); }
/* STOP-only. Never use for cancel/close/ordinary destructive-ish actions. */
.btn-stop { background: var(--stop); border-color: var(--stop); color: #fff; }
.btn-small { min-height: 34px; padding: 0 14px; font-size: 13px; border-radius: 999px; }
.btn-block { width: 100%; }
/* Status pills — tint surface + deep matched ink, never raw accent text. */
.pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px;
  padding: 2px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 550;
}
.pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
}
.pill-ok { color: var(--go-ink); border-color: #c4ecca; background: var(--go-soft); }
.pill-ok::before { background: var(--go-dot); }
.pill-warn { color: var(--warn); border-color: #f0dfa8; background: var(--warn-soft); }
.pill-warn::before { background: var(--warn-dot); }
.insight-stack { display: grid; gap: 10px; }
.insight-now {
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.insight-now h2 { margin: 4px 0 6px; font-size: 18px; }
.insight-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 12px;
}
.insight-work { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.insight-more { display: grid; gap: 8px; }
/* STOP/DNC/consent-block only. */
.pill-stop { color: var(--stop); border-color: #f2c3c6; background: var(--stop-soft); }
.pill-stop::before { background: var(--stop); }
/* Informational (blue) and the rationed lavender signature (VIP/highlight). */
.pill-info { color: var(--accent-deep); border-color: #cdddfa; background: var(--accent-soft); }
.pill-info::before { background: var(--accent); }
.pill-vip { color: var(--lav-ink); border-color: #d8d2fa; background: var(--lav-soft); }
.pill-vip::before { background: var(--lav-dot); }
/* A live indicator breathes; everything else holds still. */
.pill-live::before { animation: sundae-breathe 2.4s ease-in-out infinite; }
/* Cards + stat tiles (summary first, detail on demand) */
.card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow); padding: 18px;
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
}
.stat {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 12px 14px;
}
.stat b { display: block; font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.stat span { color: var(--muted); font-size: 12.5px; }
/* Tables — quiet rows, no zebra noise */
.table-scroll { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; padding: 8px 12px; color: var(--muted); font-size: 12px;
  font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }

/* Garnish — the Dell '96 inventory. Discipline: at most ONE of each per
   screen; these are punctuation, not furniture. */
.sticker {
  display: inline-block; padding: 4px 8px; border: 1px solid var(--ink);
  border-radius: 3px; background: var(--sticker-yellow); color: var(--ink);
  font-weight: 700; font-size: 10.5px; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(28, 28, 28, .85);
  transition: transform .18s ease;
}
.sticker-burst { transform: rotate(-8deg); }
/* Hanko: a small vermilion stamp with a script monogram — the sign-off mark. */
.hanko {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 7px; background: var(--vermilion); color: #fff;
  font-family: var(--font-script); font-size: 21px; line-height: 1;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 1px 1px 0 rgba(28, 28, 28, .5);
}
/* Award seal: rotated yellow circle, hard bevel. Scoreboards and milestones. */
.seal {
  display: inline-grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; padding: 6px; background: var(--sticker-yellow);
  border: 1px solid var(--ink); box-shadow: 2px 2px 0 rgba(28, 28, 28, .85);
  transform: rotate(8deg); text-align: center; color: var(--ink);
  font-size: 6.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.5;
}
/* Section divider: quiet caps + hairline, the page's zoning system. */
.divider { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.divider-label {
  font-size: 10.5px; font-weight: 750; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.divider-rule { flex: 1; height: 1px; background: var(--line); }
/* Motion — one system: rise on load (opt-in per element), grow for bars,
   breathe for live dots, land for stickers. Reduced-motion kills all of it. */
@keyframes sundae-rise { from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; } }
@keyframes sundae-land { from { opacity: 0; transform: rotate(-8deg) scale(.5); }
  to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes sundae-grow { from { transform: scaleX(0); } }
@keyframes sundae-breathe { 0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .65; } }
.rise { animation: sundae-rise .55s cubic-bezier(.22, .7, .3, 1) both; }
.rise-2 { animation-delay: .06s; } .rise-3 { animation-delay: .12s; }
.rise-4 { animation-delay: .18s; } .rise-5 { animation-delay: .24s; }
.rise-6 { animation-delay: .3s; }
.sticker-land { animation: sundae-land .6s cubic-bezier(.34, 1.56, .64, 1) .55s both; }
.bar-grow { transform-origin: left center;
  animation: sundae-grow .8s cubic-bezier(.22, .7, .3, 1) .45s both; }

/* Forms */
.field { display: block; margin: 12px 0 0; }
.field > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 13px; }
.input, input.input, select.input, textarea.input {
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); outline: none;
  background: var(--surface); color: var(--ink);
}
textarea.input { min-height: 72px; resize: vertical; }
.input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.hint { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
.account-recovery { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.account-recovery summary {
  display: inline-flex; align-items: center; width: fit-content; min-height: var(--tap);
  cursor: pointer; color: var(--accent);
  font-size: 13px; font-weight: 700; list-style: none;
}
.account-recovery summary::-webkit-details-marker { display: none; }
.account-recovery summary::after { content: " +"; }
.account-recovery[open] summary::after { content: " –"; }
.account-recovery-form { padding-top: 3px; }
.account-recovery [data-recovery-submit] { margin-top: 12px; }
.account-recovery .recovery-accepted { color: var(--accent); }
.field-error { margin: 6px 0 0; color: var(--warn); font-size: 12.5px; }
/* Show/hide control on password fields — quiet, keyboard-first */
.password-box { position: relative; display: block; }
.password-box > .input { padding-right: 54px; }
.password-toggle {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 11px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.password-toggle:hover { color: var(--ink); background: var(--surface-2); }
.password-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.password-toggle .password-toggle-slash { display: none; }
.password-toggle[aria-pressed="true"] .password-toggle-slash { display: block; }
/* Banners — calm by default */
.banner {
  padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--muted); font-size: 13.5px;
}
.banner-ok {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.banner-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
/* STOP/DNC/consent-block only. */
.banner-stop { border-color: var(--stop); background: var(--stop-soft); color: var(--stop); }
/* Utility */
.hidden { display: none !important; }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--gap) 0; }

/* Calendar primitives — shared by /schedule and /availability. Token-only,
   no new colors: open/booked reuse the accent + muted pair every other
   component already uses, closed is a quieter dashed variant of the same
   muted family, and the coverage warning reuses --warn like every other
   amber in the system. */
.cal-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 26px; padding: 3px 9px; border-radius: 8px; font-size: 11px;
  font-weight: 650; border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--accent);
}
.cal-chip-open { cursor: pointer; }
.cal-chip-booked { border-color: var(--line); background: var(--surface-2); color: var(--muted); }
.cal-chip-closed {
  border-style: dashed; background: transparent; color: var(--muted); opacity: .72;
}
.cal-lane { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-lane-name { font-weight: 650; font-size: 13px; }
.cal-cap {
  display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 9px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.cal-cap-open {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.cal-warn {
  display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px;
  border-radius: 999px; border: 1px solid var(--warn); background: var(--warn-soft);
  color: var(--warn); font-size: 11px; font-weight: 650;
}
.cal-toggle {
  display: inline-flex; align-items: center; justify-content: center; min-height: 30px;
  padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; cursor: pointer;
}
.cal-toggle[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
/* Two-step confirm state, shared by `.cal-toggle` and `.cal-chip`: the same
   destructive action never fires on the click that arms it. Declared last so
   it wins the tie against the other same-specificity modifiers above. */
.cal-armed { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }

/* Phone-first adjustments */
@media (max-width: 640px) {
  .shell, .shell-narrow { width: min(100% - 24px, 1180px); padding-top: 12px; }
  .appbar { flex-wrap: wrap; }
  .btn { width: 100%; }
  .btn-small, .appbar .btn { width: auto; }
  body:has(#screen-login:not(.hidden)) .crm-main{place-items:start center;padding:104px 16px 28px}
  body:has(#screen-login:not(.hidden)) .crm-main::before{top:20px;left:20px;width:140px;height:48px}
}
/* Phones: the sidebar becomes a compact top bar. A 220px column would eat
   more than half a 390px screen, so below this breakpoint the destinations
   collapse behind one 44px disclosure and the canvas keeps the whole width.
   Closed is the default on every load — the work is what the screen is for. */
@media (max-width: 820px) {
  .crm-shell {
    grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0;
    /* `1fr` keeps its content-based minimum, so the canvas fills the rest of
       the screen when the lead card is short and grows past it when the
       disposition grid is long. Opening the menu never squeezes the work. */
    grid-template-rows: auto 1fr;
  }
  .crm-nav {
    position: sticky; top: 0; z-index: 30; height: auto; overflow: visible;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px;
    border-right: 0; border-bottom: 1px solid var(--line);
    min-width: 0; max-width: 100vw;
  }
  .crm-nav-bar { min-height: var(--tap); }
  .crm-nav .brand-lockup { margin: 0; }
  .brand-logo-crop { width: 132px; height: 38px; }
  .brand-logo { width: 132px; transform: translateY(-15px); }
  .crm-nav-toggle { display: inline-flex; }
  .crm-nav-current {
    display: block; flex: 1; min-width: 0; overflow: hidden; padding: 0 10px;
    text-overflow: ellipsis; white-space: nowrap; color: var(--nav-ink); font-weight: 650;
  }
  /* Collapsed by default; the toggle is the only thing that opens it. */
  .crm-nav-links { display: none; padding: 6px 0 2px; }
  .crm-nav[data-nav-open="true"] .crm-nav-links { display: flex; }
  .crm-lead-finder { margin: 4px 0 8px; }
  .crm-lead-finder input {
    min-height: var(--tap); background: var(--surface); color: var(--ink);
    border-color: var(--line);
  }
  .crm-lead-finder input::placeholder { color: var(--muted); }
  .crm-lead-finder-shortcut { display: none; }
  .crm-nav-link { white-space: nowrap; }
  .crm-nav-session { display: none; }
  .crm-main { padding: 14px 12px 44px; }
}