/* Meridian design system — AK Teck brand, dark-first. Blueprint 03
   section 07's slate-biased neutral ramp and clay-for-regulatory-states
   rule are preserved in spirit (clay stays exclusive to consent states;
   valid/attention/blocked stay a semantic trio separate from the brand
   accent, always paired with an icon and a word, never colour alone) —
   only which theme is the unconditional default has changed. The
   near-black ground, electric-blue accent, and silver/steel tones below
   are sampled from the AK Teck logo, not invented; every value here was
   checked against the WCAG AA formula (4.5:1 for text, 3:1 for large
   text/icons/UI components) rather than trusted on sight — a "premium"
   dark palette that fails contrast isn't premium, it's illegible. The
   light theme (Blueprint 03's original slate-neutral system) is now the
   secondary variant, applied under prefers-color-scheme: light. */

:root {
  --ground: #050608;
  --surface: #0b0f14;
  --raised: #11161d;
  /* Text/link/nav-active/icon colour: AK Teck's "bright" electric blue,
     used as-is — 7.9:1 against --ground, well clear of AA. */
  --accent: #00acf5;
  /* A separate, deliberately darker blue for filled button backgrounds:
     --accent is too light to hold 4.5:1 for white button text, so solid
     fills use this value instead (5.2:1 white-on-fill, 3.7:1 against
     --surface for the non-text UI-component threshold). */
  --accent-deep: #0072b3;
  /* Decorative-only (gradient stops, glow shadows) — AK Teck's "deep
     royal blue". Never used as a foreground/text colour: it fails AA
     entirely on a dark ground (2.8:1). */
  --accent-glow: #0052b8;
  /* Reserved for the AI-status indicator only, per the brief's own
     "blue used strategically for... AI indicators" — never body text. */
  --cyan: #22d3ee;
  --steel: #c7ccd3;
  --steel-light: #dde3e8;
  --avatar-text: var(--accent);
  --clay: #e0865e;
  --ink: #f5f7fa;
  --ink-muted: #9aa5b1;
  --border: #202832;

  --valid: #3dbd82;
  --attention: #d9a441;
  --blocked: #e5645c;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius: 4px;
  --radius-bubble: 6px;

  /* A single control-height scale, used everywhere instead of ad hoc
     38px/40px/44px literals — sm for auxiliary chips, md for topbar
     controls and nav rows, lg for the 44px accessible-touch-target
     floor on primary actions. */
  --control-height-sm: 36px;
  --control-height-md: 40px;
  --control-height-lg: 44px;

  --transition-fast: 150ms ease;

  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #f6f8fa;
    --surface: #ffffff;
    --raised: #e3e9ef;
    --accent: #1a67d1;
    --accent-deep: #0d4fb0;
    --accent-glow: #1a67d1;
    --cyan: #0891b2;
    --steel: #9aa3ad;
    --steel-light: #ced3d9;
    --avatar-text: var(--accent-deep);
    --clay: #b5502a;
    --ink: #141a21;
    --ink-muted: #4b5563;
    --border: #d6dde5;

    --valid: #2e7d4f;
    /* #9a6a08 measured 4.44:1 against --ground (#f6f8fa) via axe-core —
       just under WCAG AA's 4.5:1 floor. This token was defined but never
       actually rendered by any axe-tested page until the Leads
       consent-status badge (macros.html's consent_badge) exercised it
       for the first time. #704b05 measures ~7.3:1 against the same
       background — meets AAA, not just the AA floor. */
    --attention: #704b05;
    --blocked: #b3312c;
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark light;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

a {
  color: var(--accent);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* App shell: a fixed-width sidebar beside a flexible main column. This
   is the "component library" the AK Teck brief asks for, built with
   plain CSS grid/flex rather than a JS framework — see macros.html for
   the Jinja-macro half of that same idea. */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-3);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  padding: 0 var(--space-2);
}

/* The one glyph in the app drawn from the actual AK Teck brand mark:
   two overlapping chevrons in accent blue over steel, echoing the
   logo's A/K letterforms without shipping the raster file into a
   header it wasn't sized for. */
.brand-glyph {
  display: block;
  flex: none;
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-wordmark .name {
  font-weight: 600;
  font-size: 17px;
}
.brand-wordmark .by-line {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-2) var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 14px;
  min-height: var(--control-height-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-item:hover {
  background: var(--raised);
  color: var(--ink);
}
.nav-item.active {
  /* 8%, not a rounder 10-15% — the lighter tint keeps --accent-as-text
     at 4.8:1 against the light theme's white sidebar; a stronger tint
     measurably fails AA there (verified: 14% gives 4.42:1). */
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.nav-icon {
  display: inline-flex;
  flex: none;
  transition: opacity var(--transition-fast);
}
.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Available vs. coming-later (section 9): dim the icon only — it is
   decorative (aria-hidden), so opacity carries no contrast obligation.
   The label text is deliberately left at full --ink-muted contrast
   (already 7:1+ against both themes' grounds): dimming *text* to signal
   "coming soon" is exactly the contrast-vs-decoration tradeoff section
   12 rules out, so the "Soon" badge plus the quieter icon carry the
   distinction instead. */
.nav-item.coming-soon .nav-icon {
  opacity: 0.55;
}
.nav-item.coming-soon:hover .nav-icon {
  opacity: 0.9;
}
.nav-badge {
  margin-left: auto;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--ink-muted);
  flex: none;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}
.ai-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}
.ai-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  margin-top: 5px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 70%, transparent);
  flex: none;
}
.ai-status-line {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.ai-status-detail {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 2px 0 0 0;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  flex: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  max-width: 320px;
  padding: 0 var(--space-3);
  height: var(--control-height-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink-muted);
}
.topbar-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
}
.topbar-search input::placeholder {
  color: var(--ink-muted);
}
.topbar-search input:disabled {
  cursor: not-allowed;
}

.ask-ak-teck-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.ask-ak-teck-btn:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  border-color: var(--accent);
}

.user-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--ink-muted);
  flex: none;
}
.user-chip .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--avatar-text);
  font-size: 11px;
  font-weight: 600;
}

.sidebar-backdrop {
  display: none;
}

main {
  max-width: 880px;
  padding: var(--space-5);
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 8px 0 24px -8px rgba(0, 0, 0, 0.4);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-toggle {
    display: inline-flex;
  }
  .sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
  }
}

@media (max-width: 600px) {
  main {
    padding: var(--space-3);
  }
  .topbar {
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .topbar-search {
    display: none;
  }
  .ask-ak-teck-btn span,
  .user-chip .chip-name {
    display: none;
  }
}

h1.display {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 var(--space-1) 0;
}

.subhead {
  color: var(--ink-muted);
  font-size: 13px;
  margin: 0 0 var(--space-5) 0;
}

/* Queue card (Blueprint 03 section 07): 3.5px left stripe in the
   semantic colour, a border and no shadow — elevation is spent on
   modals only, never on cards. */
.queue-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3.5px solid var(--ink-muted);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.queue-card[data-kind="escalated"] {
  border-left-color: var(--blocked);
}
.queue-card[data-kind="consent"] {
  border-left-color: var(--attention);
}
.queue-card[data-kind="drafted"] {
  border-left-color: var(--valid);
}

/* Spotlight: the one deliberate moment of visual weight, reserved for
   the single most urgent card. Every other card stays flat — this is
   not a shadow-and-gradient treatment applied uniformly like a generic
   SaaS card kit. */
.queue-card[data-spotlight="true"] {
  box-shadow: 0 4px 24px -8px color-mix(in srgb, var(--accent) 35%, transparent);
  padding: var(--space-5);
}
.queue-card[data-spotlight="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2.5px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
}
.queue-card[data-spotlight="true"] .title {
  font-size: 21px;
}

.queue-card .label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2) 0;
}
.queue-card .label svg {
  flex: none;
}
.queue-card[data-kind="escalated"] .label svg {
  color: var(--blocked);
}
.queue-card[data-kind="consent"] .label svg {
  color: var(--attention);
}
.queue-card[data-kind="drafted"] .label svg {
  color: var(--valid);
}

.queue-card .title {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
}
/* Typographic urgency, not just the amber stripe (section 6: distinguish
   urgency with more than colour) — 3 days or fewer gets underlined
   emphasis in the same semantic colour. */
.days-left-critical {
  color: var(--attention);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.queue-card .body {
  font-size: 15px;
  margin: 0 0 var(--space-3) 0;
}

.queue-card .meta {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}

.actions {
  display: flex;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-lg);
  min-width: var(--control-height-lg);
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.btn-escape {
  background: transparent;
}
/* A real, honest disabled state — Call/Dismiss aren't wired to
   anything yet, and looking identical to a working button is its own
   small dishonesty. Cursor + reduced opacity, never removed from the
   tab order or hidden (Blueprint 03: visible and greyed, never hidden). */
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Consent chip: icon + word + date, never colour alone. */
.consent-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  min-height: 28px;
  padding: 2px var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.consent-chip svg {
  flex: none;
}
.consent-chip[data-status="active"] {
  color: var(--valid);
  border-color: var(--valid);
}
.consent-chip[data-status="attention"] {
  color: var(--attention);
  border-color: var(--attention);
}
.consent-chip[data-status="blocked"] {
  color: var(--blocked);
  border-color: var(--blocked);
}
/* Same chip, reused for the DSR queue's deadline urgency rather than
   consent status — data-urgency keeps the two vocabularies distinct even
   though the visual treatment and semantic colors are shared. */
.consent-chip[data-urgency="ok"] {
  color: var(--valid);
  border-color: var(--valid);
}
.consent-chip[data-urgency="attention"] {
  color: var(--attention);
  border-color: var(--attention);
}
.consent-chip[data-urgency="overdue"] {
  color: var(--blocked);
  border-color: var(--blocked);
}

/* AI marker: outlined badge, never filled — annotates, doesn't decorate. */
.ai-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}
.ai-marker svg {
  flex: none;
  color: var(--steel);
}

/* Blocked banner: names the rule and the remedy, never a bare refusal. */
.blocked-banner {
  border: 1px solid var(--blocked);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface);
}
.blocked-banner .rule {
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
}
.blocked-banner .remedy {
  margin: 0;
  color: var(--ink-muted);
}

/* Locked field: visible and greyed, never hidden. */
.locked-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink-muted);
  font-size: 13px;
}

.empty-state {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--ink-muted);
}
.empty-state svg {
  color: var(--steel);
  margin-bottom: var(--space-3);
}
.empty-state p {
  margin: 0;
}

/* Trust badge (privacy page): a real compliance fact — Canadian data
   residency (C-14) — surfaced visually, not a decorative stat. */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--valid);
  border: 1px solid var(--valid);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
}
.trust-badge svg {
  flex: none;
}

/* Privacy page (C-10) */
.privacy-section {
  margin-bottom: var(--space-6);
}
.privacy-section h2 {
  font-size: 17px;
  margin-bottom: var(--space-3);
}
.privacy-officer {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.privacy-officer dt {
  color: var(--ink-muted);
}
.privacy-officer dd {
  margin: 0;
}
.subprocessor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.subprocessor-table th,
.subprocessor-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.subprocessor-table th {
  color: var(--ink-muted);
  font-weight: 500;
}

/* Conversation view */
.conversation-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 720px) {
  .conversation-layout {
    grid-template-columns: 1fr;
  }
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bubble {
  max-width: 80%;
  padding: var(--space-3);
  border-radius: var(--radius-bubble);
  border: 1px solid var(--border);
}
.bubble[data-direction="inbound"] {
  background: var(--surface);
  align-self: flex-start;
}
.bubble[data-direction="outbound"] {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  align-self: flex-end;
}
.bubble .timestamp {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.consent-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  position: sticky;
  top: var(--space-4);
}
.consent-rail h2 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}
.consent-rail dl {
  margin: 0;
}
.consent-rail dt {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--space-3);
}
.consent-rail dd {
  margin: var(--space-1) 0 0 0;
  font-size: 14px;
}
@media (max-width: 720px) {
  .consent-rail {
    position: static;
  }
}

.composer {
  margin-top: var(--space-5);
}
.composer textarea {
  width: 100%;
  min-height: 88px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
}
.composer .footer-note {
  font-size: 12px;
  color: var(--ink-muted);
  margin: var(--space-2) 0;
}

/* Command bar (Dashboard): the "Ask AK Teck" input is deliberately
   disabled — no free-text-to-action AI layer exists yet, and a disabled
   input is honest where a fake response would not be. The chips below
   it are real buttons; app.js routes each to either a real scroll
   target or an honest "not available yet" toast — never a canned AI
   reply. */
.command-bar {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  overflow: hidden;
}
/* Ties the command bar to the same "this is the important AI moment"
   visual language as the queue's spotlight card, rather than looking
   like an unrelated search box bolted onto the page. */
.command-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
}
.command-bar-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}

/* A small reusable AI-identity badge — the one recurring visual cue
   that ties every AI touchpoint (command bar, this eyebrow) back to
   the brand accent, instead of a bare icon floating on its own. */
.ai-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  flex: none;
}

.command-bar-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ground);
  margin-bottom: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.command-bar-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.command-bar-input input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
}
.command-bar-input input::placeholder {
  color: var(--ink-muted);
}
.command-bar-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent-deep);
  color: #ffffff;
  flex: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.command-bar-send:hover {
  background: var(--accent-glow);
}
.command-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Each real chip is its own tiny <form> (so it can POST query_text
   without JS) — display:contents lets the button inside participate in
   the flex-wrap row as if the form weren't there. */
.command-chips form {
  display: contents;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--raised));
}

/* Today-at-a-glance metrics — real, org-scoped counts only. */
.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.metric-icon {
  display: inline-flex;
  color: var(--accent);
}
.metric-value {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.metric-label {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.dashboard-columns {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 860px) {
  .dashboard-columns {
    grid-template-columns: 1fr;
  }
}

.dashboard-sidecol {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.side-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
}
.side-panel h2 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}
.side-panel-empty {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.activity-item {
  border-radius: var(--radius);
  margin: 0 calc(var(--space-2) * -1);
}
.activity-link {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition-fast);
}
.activity-link:hover {
  background: var(--raised);
}
.activity-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--valid);
  flex: none;
}
.activity-item[data-outcome="escalated"] .activity-dot {
  background: var(--blocked);
}
.activity-summary {
  font-size: 13px;
  margin: 0 0 3px 0;
  color: var(--ink);
}
.activity-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.activity-time {
  font-size: 11.5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.activity-outcome-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}
.activity-flag {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--blocked);
}

.showings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.showing-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.showing-time {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--accent);
}
.showing-address {
  font-size: 13px;
}

/* Coming-soon pages (section 10): a product-oriented placeholder, not a
   bare "not built" notice — states what the section will do, grounded
   in this codebase's real constraints, without promising anything
   undesigned. */
.coming-soon-state {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  max-width: 480px;
}
.coming-soon-state svg {
  color: var(--steel);
  margin-bottom: var(--space-4);
}
.coming-soon-description {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Leads list: a plain data table + a lightweight search form, the first
   of each in this codebase — kept to the existing token scale rather
   than introducing a new visual language. */
.leads-search {
  display: flex;
  gap: var(--space-2);
  max-width: 420px;
  margin: var(--space-4) 0;
}
.leads-search input {
  flex: 1;
  height: var(--control-height-md);
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th {
  text-align: left;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.data-table tr:last-child td {
  border-bottom: none;
}
.data-table a {
  color: var(--ink);
  text-decoration: none;
}
.data-table a:hover {
  color: var(--accent);
}
.dsr-verify-form {
  display: flex;
  gap: var(--space-2);
}
.settings-section {
  margin: var(--space-6) 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.settings-form {
  margin-top: var(--space-4);
}
.settings-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.settings-inline-add {
  display: flex;
  gap: var(--space-2);
  max-width: 420px;
  margin: var(--space-2) 0 var(--space-3);
}
.settings-inline-add input {
  flex: 1;
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ground);
  color: var(--ink);
  font-size: 13px;
}
.settings-tag-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.approval-content {
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: var(--space-2) 0;
  white-space: pre-wrap;
}
.approval-meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}
.approval-meta-list dt {
  font-weight: 500;
}
.approval-decide-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.approval-decide-form label {
  font-size: 13px;
  color: var(--ink-muted);
}
.approval-decide-form input {
  flex: 1;
  max-width: 320px;
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ground);
  color: var(--ink);
  font-size: 13px;
}
.settings-tag-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px var(--space-2);
  font-size: 13px;
}
.dsr-verify-form input {
  width: 140px;
  height: var(--control-height-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ground);
  color: var(--ink);
  font-size: 13px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: 13px;
}
.pagination-status {
  color: var(--ink-muted);
}
.pagination-link {
  color: var(--accent);
  text-decoration: none;
}
.pagination-link[aria-disabled="true"] {
  color: var(--ink-muted);
  pointer-events: none;
}

/* Calendar: a plain server-rendered month grid, no JS calendar library. */
.calendar-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: var(--space-4);
}
.calendar-grid th {
  text-align: left;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.calendar-day {
  vertical-align: top;
  height: 96px;
  padding: var(--space-2);
  border: 1px solid var(--border);
}
.calendar-day.outside-month {
  color: var(--ink-muted);
  background: var(--raised);
}
.calendar-day-number {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}
.calendar-showing {
  display: block;
  font-size: 12px;
  padding: 1px var(--space-1);
  margin-bottom: 2px;
  border-radius: var(--radius);
  border-left: 3px solid var(--steel);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-showing[data-status="requested"] {
  border-left-color: var(--attention);
}
.calendar-showing[data-status="confirmed"] {
  border-left-color: var(--valid);
}
.calendar-showing[data-status="cancelled"] {
  border-left-color: var(--blocked);
  text-decoration: line-through;
}

/* Property microsite builder form. */
.microsite-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 560px;
  margin-top: var(--space-4);
}
.microsite-form label {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: var(--space-3);
}
.microsite-form input,
.microsite-form textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
}

/* The standalone public microsite page — no app-shell chrome. */
.microsite-public {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}
.microsite-price {
  font-size: 20px;
  color: var(--accent);
  font-weight: 500;
}
.microsite-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.microsite-photos img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.microsite-description {
  line-height: 1.7;
  color: var(--ink);
}
.microsite-specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
}
.microsite-specs dt {
  color: var(--ink-muted);
  font-size: 13px;
}

.toast {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: 13.5px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 100;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* AI Assistant workspace (Phase 3): the 3-column layout — sessions
   drawer, chat thread, context panel. Reuses the same tokens/components
   (--accent, .ai-glyph, .command-bar-send) as the Dashboard's command
   bar rather than a second visual language. */
.assistant-workspace {
  display: grid;
  grid-template-columns: 200px 1fr 260px;
  gap: var(--space-5);
  align-items: start;
  height: calc(100vh - 220px);
  min-height: 480px;
}
@media (max-width: 1024px) {
  .assistant-workspace {
    grid-template-columns: 180px 1fr;
    height: auto;
  }
  .assistant-context {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .assistant-workspace {
    grid-template-columns: 1fr;
  }
}

.assistant-sessions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  overflow-y: auto;
}
.assistant-new-chat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: border-color var(--transition-fast);
}
.assistant-new-chat:hover {
  border-color: var(--accent);
}
.session-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.session-item:hover {
  background: var(--raised);
  color: var(--ink);
}
.session-item.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.assistant-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.chat-thread .empty-state {
  margin: auto;
  border: none;
}

.chat-message {
  display: flex;
  gap: var(--space-2);
  max-width: 85%;
}
.chat-message[data-role="assistant"] {
  align-self: flex-start;
}
.chat-message[data-role="user"] {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  font-size: 11px;
  font-weight: 600;
}
.chat-avatar-user {
  background: var(--raised);
  color: var(--avatar-text);
}
.chat-avatar-assistant {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.chat-bubble {
  padding: var(--space-3);
  border-radius: var(--radius-bubble);
  border: 1px solid var(--border);
  background: var(--ground);
}
.chat-message[data-role="user"] .chat-bubble {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.chat-bubble p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
}
.chat-timestamp {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.chat-cards {
  list-style: none;
  margin: var(--space-3) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chat-cards a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
}
.chat-cards a:hover {
  border-color: var(--accent);
}
.chat-cards a span {
  color: var(--ink-muted);
  text-align: right;
}
.chat-error {
  align-self: center;
  border: 1px solid var(--blocked);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  color: var(--blocked);
  font-size: 13.5px;
}

.chat-composer {
  border-top: 1px solid var(--border);
  padding: var(--space-3);
}
.chat-composer-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ground);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.chat-composer-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.chat-composer-input input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
}
.chat-composer-input input::placeholder {
  color: var(--ink-muted);
}
.chat-thinking {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0 var(--space-3);
  font-size: 12.5px;
  color: var(--ink-muted);
}
.chat-thinking-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: chat-thinking-pulse 1.1s ease-in-out infinite;
}
.chat-thinking-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.chat-thinking-dot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes chat-thinking-pulse {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

.assistant-context {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
  height: 100%;
  overflow-y: auto;
}
.assistant-context h2 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3) 0;
}
.context-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.context-cards a {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  transition: border-color var(--transition-fast);
}
.context-cards a:hover {
  border-color: var(--accent);
}
.context-cards a strong {
  display: block;
  margin-bottom: 2px;
}
.context-cards a span {
  color: var(--ink-muted);
}

/* Public pages (landing, capture form) — no authenticated app-shell, just
   the shared design tokens above applied to a simple centred layout. */
.public-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.public-login-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.public-login-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.public-main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}
.cta-button {
  display: inline-block;
  background: var(--accent-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 0 var(--space-5);
  height: var(--control-height-lg);
  line-height: var(--control-height-lg);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  margin-top: var(--space-4);
}
.hero {
  margin-bottom: var(--space-7);
}
.pricing,
.promise {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-top: var(--space-4);
}
.price {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.price span {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-muted);
}
.promise-list {
  padding-left: var(--space-5);
  color: var(--ink-muted);
}
.promise-list li {
  margin-bottom: var(--space-2);
}
.capture-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.capture-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.capture-form label {
  font-weight: 500;
  margin-top: var(--space-3);
}
.capture-form input[type="text"],
.capture-form input[type="email"] {
  height: var(--control-height-md);
  padding: 0 var(--space-3);
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}
.consent-checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 13px;
}
.consent-checkbox input {
  margin-top: 3px;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  max-width: 380px;
  margin: 0 auto;
}
.auth-switch {
  margin-top: var(--space-5);
  color: var(--ink-muted);
  font-size: 14px;
}
.form-error {
  background: color-mix(in srgb, var(--blocked) 12%, transparent);
  color: var(--blocked);
  border: 1px solid var(--blocked);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: var(--space-4) 0 0;
  font-size: 14px;
}