/* public/app.css — web-owned (docs/CONTRACT.md §1 "web").
   Brand tokens + base styles + full screen styles for every server-rendered view (pipeline
   board, opportunity/account detail, accounts list, Do-Not-Contact, Approval Queue, login).
   No build step, no framework — plain CSS with custom properties. Brand: plum #1B0F2E/#2E1A47,
   gold #C9A24B, porcelain #F8F4EF; Cormorant Garamond headings, Inter body (project rule — see
   /Users/claude/Documents/Claude/Aftervue AI/CLAUDE.md). No pink, no substitute colors. */

@import url("/fonts/fonts.css");

:root {
  --av-plum: #1B0F2E;
  --av-plum-2: #2E1A47;
  --av-gold: #C9A24B;
  --av-porcelain: #F8F4EF;

  --av-ink: var(--av-plum);
  --av-surface: var(--av-porcelain);
  --av-surface-raised: #FFFFFF;
  --av-border: rgba(27, 15, 46, 0.12);
  --av-text: var(--av-plum);
  --av-text-muted: rgba(27, 15, 46, 0.62);
  --av-on-plum: var(--av-porcelain);
  --av-accent: var(--av-gold);

  --av-success: #3e7a52;
  --av-error: #8f2f2f;
  --av-info: #4c6b8a;

  /* Stage badge tints — neutral gold/plum system, not a traffic-light metaphor (this is a plain
     status label, not a health score). Closed stages get a muted treatment. */
  --av-stage-open: var(--av-plum-2);
  --av-stage-closed-won: var(--av-success);
  /* Was rgba(27,15,46,.4) — 2.48:1 on the badge's own tint, well under WCAG AA's 4.5:1 for body
     text. Darkened to a solid plum-grey that still reads as "de-emphasised" next to the other
     stage colours but is actually legible. */
  --av-stage-closed-lost: #5A5165;

  --av-font-heading: "Cormorant Garamond", Georgia, serif;
  --av-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --av-radius: 10px;
  --av-radius-sm: 6px;
  --av-shadow: 0 1px 2px rgba(27, 15, 46, 0.08), 0 4px 16px rgba(27, 15, 46, 0.06);

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--av-surface);
  color: var(--av-text);
  font-family: var(--av-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--av-font-heading);
  font-weight: 600;
  color: var(--av-plum);
  margin: 0 0 0.5em;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

a { color: var(--av-plum-2); }

p { margin: 0 0 0.75em; }
dl { margin: 0; }

/* ---------------------------------------------------------------------------------------
   Accessibility baseline
   --------------------------------------------------------------------------------------- */

.av-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--av-gold);
  color: var(--av-plum);
  padding: 0.5rem 1rem;
  z-index: 10;
  border-radius: 0 0 var(--av-radius) 0;
}
.av-skip-link:focus { left: 0; }

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

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, .av-opp-card:focus-visible {
  outline: 3px solid var(--av-gold);
  outline-offset: 2px;
}

.av-touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* ---------------------------------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------------------------------- */

.av-header {
  background: var(--av-plum);
  color: var(--av-on-plum);
  padding: 0.85rem 1.25rem;
}

.av-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.av-brand-group { display: flex; align-items: center; }
.av-brand-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--av-on-plum);
}
.av-logo { display: block; border-radius: 4px; }
.av-brand {
  font-family: var(--av-font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--av-on-plum);
}

.av-header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.av-header-user {
  font-size: 0.85rem;
  color: rgba(248, 244, 239, 0.85);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.av-role-chip {
  background: rgba(201, 162, 75, 0.22);
  color: var(--av-gold);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.av-nav {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.av-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(248, 244, 239, 0.75);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}
.av-nav-link.is-active { color: var(--av-on-plum); border-bottom-color: var(--av-gold); }

.av-link-button {
  background: transparent;
  border: none;
  color: rgba(248, 244, 239, 0.85);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0.2rem;
}

/* ---------------------------------------------------------------------------------------
   Layout shell
   --------------------------------------------------------------------------------------- */

.av-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.av-main--login {
  max-width: 420px;
  min-height: calc(100vh - 2.5rem);
  justify-content: center;
}

.av-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.av-breadcrumb { margin: 0 0 0.25rem; font-size: 0.85rem; }
.av-breadcrumb a { color: var(--av-text-muted); text-decoration: none; }
.av-breadcrumb a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------------------
   Cards / banners / empty states
   --------------------------------------------------------------------------------------- */

.av-card {
  background: var(--av-surface-raised);
  border-radius: var(--av-radius);
  box-shadow: var(--av-shadow);
  padding: 1.1rem 1.2rem;
}
.av-card--center { text-align: center; max-width: 420px; margin: 3rem auto; }

.av-banner {
  border-radius: var(--av-radius);
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.av-banner--success { background: rgba(62, 122, 82, 0.14); color: var(--av-success); }
.av-banner--error { background: rgba(178, 58, 58, 0.12); color: var(--av-error); }
.av-banner--info { background: rgba(76, 107, 138, 0.12); color: var(--av-info); }

.av-empty-state {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--av-text-muted);
  font-style: italic;
}

.av-muted { color: var(--av-text-muted); }
.av-subheading { margin-top: 1rem; font-size: 0.95rem; }

.av-detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.1rem;
  align-items: start;
}
/* The right-hand column stacks its cards; the left is a single tall card beside them. */
.av-detail-grid > .av-card { margin-bottom: 0; }

/* ---------------------------------------------------------------------------------------
   Buttons / chips
   --------------------------------------------------------------------------------------- */

.av-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--av-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  border-radius: var(--av-radius-sm);
  padding: 0.6rem 1rem;
  cursor: pointer;
  text-decoration: none;
  gap: 0.4rem;
}
.av-button--primary { background: var(--av-gold); color: var(--av-plum); }
.av-button--primary:hover { background: #b8913f; }
.av-button--ghost { background: transparent; color: var(--av-plum); border: 1px solid var(--av-border); }
.av-button--ghost:hover { background: rgba(27, 15, 46, 0.05); }
.av-button--small { font-size: 0.78rem; padding: 0.35rem 0.7rem; }

.av-inline-form { display: inline-block; margin: 0; }

.av-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(27, 15, 46, 0.08);
  color: var(--av-plum);
  font-weight: 600;
}
.av-chip--primary { background: rgba(201, 162, 75, 0.25); color: #7a5f28; }
.av-chip--muted { background: rgba(27, 15, 46, 0.06); color: var(--av-text-muted); font-weight: 500; }
.av-chip-count { font-variant-numeric: tabular-nums; opacity: 0.7; font-weight: 500; }

.av-link { color: var(--av-plum-2); font-weight: 600; text-decoration: none; }
.av-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------------------- */

.av-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 480px; }
/* An inline form lays out FIELD GROUPS side by side, never loose labels and inputs.
   Before Sept 6 2026 the label and its control were sibling flex items, so on a narrow column
   they wrapped independently — a label could end up on a different line from the field it names
   ("Expected close date" sitting beside the Value input, "Primary contact" under the date field).
   Each label+control now lives in its own .av-field, which wraps as one unit. */
.av-form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; max-width: none; }
.av-form--inline .av-label { margin-top: 0; }
.av-form--inline > .av-button { margin-bottom: 1px; }

.av-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 0 1 auto; }
.av-field > .av-label { margin-top: 0; }
.av-field--grow { flex: 1 1 12rem; }
.av-field--sm { flex: 0 1 9rem; }
.av-form--inline .av-input, .av-form--inline .av-select { width: 100%; }

.av-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--av-text-muted);
  margin-top: 0.4rem;
}

.av-input, .av-select, .av-textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  background: #fff;
  color: var(--av-text);
  min-height: 44px;
}
.av-textarea { min-height: 88px; font-family: inherit; resize: vertical; }

.av-fieldset { border: none; padding: 0; margin: 0.3rem 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.av-fieldset legend { font-size: 0.8rem; font-weight: 600; color: var(--av-text-muted); padding: 0; }
.av-radio, .av-checkbox { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; min-height: 44px; }

.av-filter-form { display: flex; align-items: center; gap: 0.5rem; }

.av-create-form summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--av-plum-2);
  padding: 0.2rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.av-create-form form { margin-top: 0.75rem; max-width: 420px; }

.av-google-button { gap: 0.6rem; width: 100%; }

.av-login-card { text-align: center; padding: 2rem 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.av-login-logo { margin-bottom: 0.5rem; }
.av-login-title { margin-bottom: 0.2rem; }
.av-login-footnote { font-size: 0.8rem; margin-top: 1rem; }

/* ---------------------------------------------------------------------------------------
   Pipeline board
   --------------------------------------------------------------------------------------- */

.av-board {
  display: grid;
  grid-auto-flow: column;
  /* Columns shrink to fit rather than holding a fixed width. The research called HubSpot's
     non-resizable fixed columns the single most-complained-about part of their board — a 10-stage
     pipeline can't fit a laptop, so cards get dragged to targets that are off-screen. */
  grid-auto-columns: minmax(var(--av-col-min, 226px), 1fr);
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  align-items: start;
}
/* Compact density: narrower columns and tighter cards, so more stages fit at once. */
.av-board.is-compact { --av-col-min: 178px; }
.av-board.is-compact .av-opp-card { padding: 0.5rem 0.6rem; }
.av-board.is-compact .av-opp-card-foot { display: none; }

.av-board-col {
  background: rgba(27, 15, 46, 0.03);
  border-radius: var(--av-radius);
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}
.av-board-col.is-closed { background: rgba(27, 15, 46, 0.015); }

.av-board-col-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem 0.4rem;
  border-bottom: 1px solid var(--av-border);
  padding-bottom: 0.45rem;
}
.av-board-col-title {
  font-family: var(--av-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--av-text-muted);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Column money total. A sum of amounts actually recorded — never a forecast. */
.av-board-col-total {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--av-plum-2);
  font-variant-numeric: tabular-nums;
}
.av-board-col-partial { color: var(--av-text-muted); font-weight: 500; }
.av-board-col-total--none { color: var(--av-text-muted); font-weight: 500; font-size: 0.78rem; }

.av-col-collapse {
  background: none; border: none; cursor: pointer; padding: 0 0.1rem;
  color: var(--av-text-muted); font-size: 0.75rem; line-height: 1;
}
.av-col-collapse span { display: inline-block; transition: transform 120ms ease; }
.av-board-col.is-collapsed .av-col-collapse span { transform: rotate(-90deg); }
.av-board-col.is-collapsed .av-board-col-body { display: none; }
.av-board-col.is-collapsed { min-width: 0; }

.av-board-col-body { display: flex; flex-direction: column; gap: 0.55rem; }
.av-board-col-empty { margin: 0; padding: 0.6rem 0.1rem; font-size: 0.82rem; color: var(--av-text-muted); }

.av-opp-card {
  display: block;
  background: var(--av-surface-raised);
  border-radius: var(--av-radius-sm);
  box-shadow: var(--av-shadow);
  padding: 0.6rem 0.7rem;
  color: var(--av-text);
  border-left: 3px solid transparent;
}
.av-opp-card:hover { box-shadow: 0 2px 4px rgba(27,15,46,0.12), 0 6px 20px rgba(27,15,46,0.08); }
/* Stalled reads as red, not grey: grey reads as "disabled" rather than "this needs you". */
.av-opp-card.is-stalled { border-left-color: var(--av-error); }

.av-opp-card-name {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
  color: var(--av-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.av-opp-card-name:hover { text-decoration: underline; }

.av-opp-card-facts {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.av-opp-card-value { color: var(--av-plum-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.av-opp-card-age { color: var(--av-text-muted); font-variant-numeric: tabular-nums; }

.av-opp-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--av-text-muted);
}
.av-opp-card-idle.is-stalled { color: var(--av-error); font-weight: 600; }

/* ---------------------------------------------------------------------------------------
   Board summary strip + controls
   --------------------------------------------------------------------------------------- */

.av-board-head { align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; }
.av-board-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.av-board-toolbar { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.av-board-toolbar .av-create-form { flex: 1 1 auto; margin-bottom: 0; }

.av-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
  margin: 0 0 1rem;
}
.av-metric {
  background: var(--av-surface-raised);
  border-radius: var(--av-radius);
  box-shadow: var(--av-shadow);
  padding: 0.75rem 0.85rem;
  border-top: 3px solid var(--av-gold);
}
.av-metric--warn { border-top-color: var(--av-error); }
.av-metric-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--av-text-muted); font-weight: 600; }
.av-metric-value {
  font-family: var(--av-font-heading);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0.1rem 0;
  font-variant-numeric: tabular-nums;
}
.av-metric--warn .av-metric-value { color: var(--av-error); }
.av-metric-note { font-size: 0.72rem; color: var(--av-text-muted); }

.av-toggle { display: inline-flex; border: 1px solid var(--av-border); border-radius: 999px; overflow: hidden; }
.av-toggle-option {
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--av-text-muted);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}
.av-toggle-option.is-active { background: var(--av-plum); color: var(--av-on-plum); }

.av-table-wrap { overflow-x: auto; }
.av-table tr.is-stalled td:first-child { border-left: 3px solid var(--av-error); }

.av-stage-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(46, 26, 71, 0.1);
  color: var(--av-stage-open);
  white-space: nowrap;
}
.av-stage-badge--closed-won { background: rgba(62, 122, 82, 0.15); color: var(--av-stage-closed-won); }
.av-stage-badge--closed-lost { background: rgba(27, 15, 46, 0.08); color: var(--av-stage-closed-lost); }

/* ---------------------------------------------------------------------------------------
   Deal facts / contact block
   --------------------------------------------------------------------------------------- */

.av-deal-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.9rem;
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
}
.av-deal-facts dt { color: var(--av-text-muted); font-weight: 600; }
.av-deal-facts dd { margin: 0; }

.av-contact-block { border-top: 1px solid var(--av-border); padding-top: 0.75rem; margin: 0.75rem 0; }

.av-ai-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.av-ai-note { font-size: 0.78rem; margin: 0; }
.av-ai-flag { color: var(--av-plum-2); font-weight: 600; }

/* ---------------------------------------------------------------------------------------
   Log-a-call panel + Activity timeline
   --------------------------------------------------------------------------------------- */

.av-log-call-form { max-width: 560px; }

.av-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.av-timeline-item { border-left: 3px solid var(--av-gold); padding-left: 0.85rem; }
.av-timeline-head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; }
.av-timeline-type { font-weight: 700; }
.av-timeline-time { color: var(--av-text-muted); }
.av-timeline-meta { font-size: 0.8rem; margin: 0.15rem 0 0.3rem; }
.av-timeline-body { white-space: pre-wrap; margin: 0.2rem 0; }

/* ---------------------------------------------------------------------------------------
   Accounts list / contacts / opportunities table
   --------------------------------------------------------------------------------------- */

.av-table-wrap { overflow-x: auto; }
.av-table { width: 100%; border-collapse: collapse; background: var(--av-surface-raised); border-radius: var(--av-radius); overflow: hidden; }
.av-table th, .av-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--av-border); font-size: 0.9rem; }
.av-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--av-text-muted); }
.av-table tr.is-archived { opacity: 0.55; }

.av-contact-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.av-contact-list-item { border-bottom: 1px solid var(--av-border); padding-bottom: 0.6rem; font-size: 0.92rem; }
.av-contact-list-item:last-child { border-bottom: none; }

/* The per-contact edit disclosure sits inside a list item, so it needs a lighter, smaller
   summary than the section-level "Add a contact" one it shares .av-create-form with. */
.av-contact-edit { margin-top: 0.35rem; }
.av-contact-edit summary { font-size: 0.82rem; font-weight: 500; min-height: 32px; color: var(--av-text-muted); }
.av-contact-edit[open] summary { color: var(--av-plum-2); }
.av-contact-edit form { margin-top: 0.5rem; }

.av-opp-link-list { margin: 0; padding-left: 1.1rem; }

/* ---------------------------------------------------------------------------------------
   Do-Not-Contact
   --------------------------------------------------------------------------------------- */

.av-dnc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.av-dnc-item { background: var(--av-surface-raised); border-radius: var(--av-radius); box-shadow: var(--av-shadow); padding: 0.85rem 1rem; }
.av-dnc-item.is-removed { opacity: 0.65; }
.av-dnc-item-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.av-dnc-remove summary { cursor: pointer; color: var(--av-error); font-weight: 600; font-size: 0.85rem; min-height: 44px; display: flex; align-items: center; }

/* ---------------------------------------------------------------------------------------
   Approval Queue
   --------------------------------------------------------------------------------------- */

.av-approval-list { display: flex; flex-direction: column; gap: 0.85rem; }
.av-approval-item-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.av-approval-context { font-size: 0.88rem; }
.av-approval-body { white-space: pre-wrap; background: rgba(27,15,46,0.03); border-radius: var(--av-radius-sm); padding: 0.7rem 0.85rem; }
.av-approval-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-start; margin-top: 0.6rem; }
.av-approval-edit form, .av-approval-reject form { margin-top: 0.5rem; max-width: 420px; }

/* ---------------------------------------------------------------------------------------
   Reports (funnel / activity / plan-vs-actual / approval turnaround / DNC trend)
   BUG FIX (adversarial review 4): src/views/reports.js has always emitted these classes, but
   this file never had a matching rule for any of them — the tab strip rendered as one run-on
   line of text with no gaps, and every stat tile / honesty callout fell back to bare card
   padding. Every screen this stylesheet already covers has its own section here; this one
   never got written. Colors/spacing follow the same tokens/scale used above (av-card,
   av-nav-link, av-chip) rather than inventing a new visual language for this one page.
   --------------------------------------------------------------------------------------- */

.av-report-tabs {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--av-border);
  margin-bottom: 0.25rem;
}
.av-report-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--av-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}
.av-report-tab:hover { color: var(--av-plum); }
.av-report-tab.is-active { color: var(--av-plum); border-bottom-color: var(--av-gold); }

.av-report-generated { margin-top: -0.5rem; }

.av-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
}

.av-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.av-stat-value {
  font-family: var(--av-font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--av-plum);
  line-height: 1.1;
}
.av-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--av-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.av-callout { border-left: 4px solid var(--av-info); }
.av-callout h3 { margin-bottom: 0.3rem; }
.av-callout p:last-child { margin-bottom: 0; }
.av-callout--info { border-left-color: var(--av-info); }
.av-callout--muted { border-left-color: var(--av-border); background: rgba(27, 15, 46, 0.02); }

.av-status-met { color: var(--av-success); font-weight: 700; text-transform: capitalize; }
.av-status-missed { color: var(--av-error); font-weight: 700; text-transform: capitalize; }
.av-status-pending { color: var(--av-text-muted); font-weight: 600; text-transform: capitalize; }

/* ---------------------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------------------- */

@media (max-width: 780px) {
  .av-detail-grid { grid-template-columns: 1fr; }
  .av-main { padding: 1rem 0.85rem 2.5rem; }
  .av-page-head { flex-direction: column; align-items: stretch; }
  .av-form--inline { flex-direction: column; align-items: stretch; }
  .av-form--inline .av-button { width: 100%; }
}

@media (max-width: 480px) {
  .av-board-col { min-width: 78vw; }
  h1 { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------------------------------
   Follow-ups
   Built only from tokens and classes that already exist elsewhere in this sheet (av-card,
   av-chip, av-link, the --av-* palette) — no new colors, no new fonts.
   --------------------------------------------------------------------------------------- */

.av-followup-counts { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.av-chip--overdue { background: rgba(143, 47, 47, 0.12); color: var(--av-error); }

.av-followup-note { font-size: 0.85rem; margin: 0 0 0.75rem; }

.av-followup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.av-followup-item {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--av-border);
}
.av-followup-item:last-child { border-bottom: none; }
.av-followup-main { flex: 1 1 18rem; min-width: 0; }
.av-followup-action { font-size: 0.9rem; margin-top: 0.15rem; }
.av-followup-meta { flex: 0 0 auto; text-align: right; font-size: 0.85rem; }
.av-followup-due { font-weight: 600; font-variant-numeric: tabular-nums; }

.av-followup--overdue .av-followup-due { color: var(--av-error); }
.av-followup--today .av-followup-due { color: var(--av-plum-2); }
.av-followup--undated .av-followup-due { font-weight: 500; }

@media (max-width: 600px) {
  .av-followup-item { gap: 0.35rem; }
  .av-followup-meta { text-align: left; flex-basis: 100%; }
}

/* Screen-reader-only label text. Used where a visible label would duplicate an adjacent heading
   but the control still needs an accessible name. */
.av-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;
}

/* ---------------------------------------------------------------------------------------
   Workspace action bar — the hand-off from a CRM record into Gmail / Calendar / Meet.
   --------------------------------------------------------------------------------------- */

.av-ws { margin-bottom: 1rem; }
.av-ws-title {
  font-family: var(--av-font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--av-text-muted);
  margin: 0 0 0.6rem;
}
.av-ws-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.av-ws-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--av-border);
  background: var(--av-surface-raised);
  color: var(--av-plum-2);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.av-ws-action:hover { border-color: var(--av-gold); background: rgba(201, 162, 75, 0.08); }
.av-ws-ext { font-size: 0.72em; opacity: 0.55; }
.av-ws-note { font-size: 0.78rem; margin: 0.65rem 0 0; max-width: 62ch; }

/* Summary tiles are links to the set they count (see renderSummary). */
.av-metric--link { display: block; text-decoration: none; color: inherit; position: relative; }
.av-metric--link:hover { box-shadow: 0 2px 4px rgba(27,15,46,0.12), 0 6px 20px rgba(27,15,46,0.08); }
.av-metric--link:hover .av-metric-cta { opacity: 1; }
.av-metric-cta {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-plum-2);
  opacity: 0;
  transition: opacity 120ms ease;
}
.av-metric--warn.av-metric--link:hover .av-metric-cta { color: var(--av-error); }
/* Touch devices have no hover, so the call to action is always visible there. */
@media (hover: none) { .av-metric-cta { opacity: 1; } }

.av-table-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.av-table-title { font-family: var(--av-font-heading); font-size: 1.3rem; margin: 0; }
.av-table-blurb { font-size: 0.82rem; margin: 0.15rem 0 0; max-width: 60ch; }

/* Report charts. The SVGs carry preserveAspectRatio="xMinYMin meet" so they anchor to the card's
   left edge like every heading above them, instead of floating centred with dead gutters either
   side. Height follows width; max-width stops a chart being stretched past its natural size on a
   wide screen, which would fatten every bar without adding information. */
.av-chart-svg { display: block; width: 100%; max-width: 760px; height: auto; }

/* A button in a STACKED form hugs its label instead of stretching the column's full width —
   flex-direction:column makes children stretch by default, which turned every Save into a
   480px-wide slab. Scoped away from inline forms: there the row is already align-items:flex-end
   so the button's baseline matches the field beside it, and an align-self here would yank it to
   the top of the row instead. */
.av-form:not(.av-form--inline) > .av-button { align-self: flex-start; }

/* Detail pages: two independently-stacking columns. .av-detail-grid's auto-placement fills row by
   row, which leaves a tall gap under a short card while the other column runs on. */
.av-detail-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.1rem; align-items: start; }
.av-detail-col { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.av-detail-col > .av-card { margin-bottom: 0; }
@media (max-width: 900px) { .av-detail-cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------------------
   Tasks, Today, monthly goals, sequences
   --------------------------------------------------------------------------------------- */

.av-subnav { display: flex; gap: 0.3rem; flex-wrap: wrap; border-bottom: 1px solid var(--av-border); margin-bottom: 1rem; }
.av-subnav-link {
  padding: 0.55rem 0.9rem; text-decoration: none; color: var(--av-text-muted);
  font-size: 0.88rem; font-weight: 600; border-bottom: 2px solid transparent; min-height: 44px;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.av-subnav-link.is-active { color: var(--av-text); border-bottom-color: var(--av-gold); }

.av-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.av-task {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--av-border);
}
.av-task:last-child { border-bottom: none; }
.av-task.is-done .av-task-title { text-decoration: line-through; color: var(--av-text-muted); }
.av-task-check { margin: 0; flex: 0 0 auto; }
.av-task-checkbox {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--av-border);
  background: #fff; cursor: pointer; color: var(--av-plum-2); font-size: 0.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.av-task-checkbox:hover { border-color: var(--av-gold); }
.av-task-main { flex: 1 1 auto; min-width: 0; }
.av-task-title { font-weight: 600; font-size: 0.94rem; overflow-wrap: anywhere; }
.av-task-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; font-size: 0.8rem; color: var(--av-text-muted); }
.av-task-body { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--av-text-muted); }
.av-task-due { flex: 0 0 auto; text-align: right; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.av-task-due--overdue { color: var(--av-error); font-weight: 700; }
.av-task-assignee { font-size: 0.75rem; margin-top: 0.15rem; }
.av-task.is-overdue .av-task-checkbox { border-color: var(--av-error); }

/* Two independently packed columns. As a plain grid of cards, a tall "Follow-ups due" card set
   the height of the whole first row, so the cards below "Your tasks" started a screen further
   down — Mikel, Sept 9 2026: "as followups expand this spread happens". */
.av-today { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.1rem; align-items: start; margin-bottom: 1.1rem; }
.av-today-col { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.av-today-side { display: flex; flex-direction: column; gap: 1.1rem; }
.av-today > .av-card, .av-today-side > .av-card, .av-today-col > .av-card { margin-bottom: 0; }

/* A long list scrolls inside its card instead of stretching it. Nothing is truncated any more,
   so "74 more due." no longer hides work behind a sentence. */
.av-scroll-list { max-height: 23rem; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.35rem; }
.av-scroll-list::-webkit-scrollbar { width: 8px; }
.av-scroll-list::-webkit-scrollbar-thumb { background: var(--av-border); border-radius: 4px; }
.av-followup-moved { font-size: 0.72rem; }
.av-launch-note { margin: 0 0 1.1rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--av-gold);
  background: color-mix(in srgb, var(--av-gold) 8%, transparent); font-size: 0.88rem; border-radius: 0 6px 6px 0; }
.av-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; }
.av-card-head h2 { margin: 0; }
.av-today-flag { margin: 0.7rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--av-error); }
.av-today-count { font-family: var(--av-font-heading); font-size: 2.2rem; margin: 0; line-height: 1; }
.av-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.9rem; }
@media (max-width: 900px) { .av-today { grid-template-columns: 1fr; } }

.av-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; }
.av-goal { border-top: 3px solid var(--av-border); padding-top: 0.6rem; }
.av-goal--ahead { border-top-color: var(--av-success); }
.av-goal--close { border-top-color: var(--av-gold); }
.av-goal--behind { border-top-color: var(--av-error); }
.av-goal--untracked { border-top-style: dashed; }
.av-goal-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--av-text-muted); font-weight: 600; }
.av-goal-value { font-family: var(--av-font-heading); font-size: 1.5rem; line-height: 1.2; margin: 0.1rem 0 0.35rem; font-variant-numeric: tabular-nums; }
.av-goal-target { font-family: var(--av-font-body); font-size: 0.85rem; color: var(--av-text-muted); font-weight: 500; }
.av-goal-bar { display: block; height: 5px; border-radius: 3px; background: rgba(27,15,46,0.08); overflow: hidden; }
.av-goal-bar > span { display: block; height: 100%; background: var(--av-plum-2); }
.av-goal--ahead .av-goal-bar > span { background: var(--av-success); }
.av-goal--behind .av-goal-bar > span { background: var(--av-error); }
.av-goal-note { font-size: 0.74rem; color: var(--av-text-muted); margin-top: 0.3rem; }
.av-goals-note { font-size: 0.78rem; margin: 0.9rem 0 0; max-width: 70ch; }

.av-seq-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.av-seq-item { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.av-seq-form { margin-top: 0.2rem; }
.av-seq-note { font-size: 0.78rem; margin: 0.8rem 0 0; max-width: 62ch; }

/* ---------------------------------------------------------------------------------------
   Cmd+K global search
   --------------------------------------------------------------------------------------- */

.av-search-trigger {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(248, 244, 239, 0.08); border: 1px solid rgba(248, 244, 239, 0.18);
  color: var(--av-on-plum); border-radius: 999px; padding: 0.35rem 0.7rem;
  font: inherit; font-size: 0.82rem; cursor: pointer; min-height: 36px;
}
.av-search-trigger:hover { background: rgba(248, 244, 239, 0.16); }
.av-kbd {
  font-family: var(--av-font-body); font-size: 0.72rem; opacity: 0.75;
  border: 1px solid rgba(248, 244, 239, 0.3); border-radius: 4px; padding: 0 0.28rem;
}

.av-omni {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(27, 15, 46, 0.55);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 8vh 1rem 1rem;
}
/* BUG FIX (Mikel, Sept 6 2026: "cant exit out of search"). The rule above sets display:flex on
   .av-omni, and an author rule beats the UA stylesheet's [hidden] { display: none } every time.
   So `overlay.hidden = true` in public/search.js set the attribute and changed nothing on
   screen: Esc, Cmd+K and the backdrop click all ran close() correctly and the overlay stayed
   up, with no way out but a page reload. Anything hidden via the attribute needs this. */
.av-omni[hidden] { display: none; }
.av-omni-panel {
  width: 100%; max-width: 620px; background: var(--av-surface-raised);
  border-radius: var(--av-radius); box-shadow: 0 20px 60px rgba(27, 15, 46, 0.35);
  overflow: hidden; display: flex; flex-direction: column; max-height: 74vh;
}
.av-omni-head { position: relative; display: flex; align-items: stretch; }
.av-omni-head .av-omni-input { flex: 1 1 auto; min-width: 0; }
.av-omni-close {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  padding: 0 1rem; font-size: 1.5rem; line-height: 1; color: var(--av-text-muted);
  border-bottom: 1px solid var(--av-border); min-width: 44px;
}
.av-omni-close:hover, .av-omni-close:focus-visible { color: var(--av-text); background: rgba(27, 15, 46, 0.06); }
.av-omni-input {
  font: inherit; font-size: 1.05rem; padding: 1rem 1.1rem; border: none;
  border-bottom: 1px solid var(--av-border); outline: none; color: var(--av-text); background: #fff;
}
.av-omni-status { padding: 0.5rem 1.1rem; font-size: 0.75rem; color: var(--av-text-muted); border-bottom: 1px solid var(--av-border); }
.av-omni-results { overflow-y: auto; }
.av-omni-group {
  padding: 0.7rem 1.1rem 0.3rem; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 700; color: var(--av-text-muted);
}
.av-omni-item {
  display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 1.1rem;
  text-decoration: none; color: var(--av-text); min-height: 44px;
}
.av-omni-item.is-active, .av-omni-item:hover { background: rgba(201, 162, 75, 0.14); }
.av-omni-title { font-weight: 600; font-size: 0.92rem; }
.av-omni-sub { font-size: 0.8rem; color: var(--av-text-muted); }
.av-omni-more { padding: 0.3rem 1.1rem 0.6rem; font-size: 0.75rem; color: var(--av-text-muted); }
@media (max-width: 640px) { .av-search-trigger span { display: none; } }

/* Duplicate review — one pair at a time, side by side. */
.av-dup-why { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.av-dup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.av-dup-col { border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); padding: 0.9rem 1rem; min-width: 0; }
.av-dup-letter { font-size: 1.05rem; margin: 0 0 0.6rem; overflow-wrap: anywhere; }
/* Only the fields that actually disagree are marked — that difference is the whole decision. */
.av-dup-differs { font-weight: 700; color: var(--av-plum-2); }
.av-dup-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.av-dup-note { font-size: 0.8rem; margin: 0.9rem 0 0; max-width: 74ch; }
@media (max-width: 760px) { .av-dup-grid { grid-template-columns: 1fr; } }

/* Employee sign-in and password-setup screens (Sept 6 2026). */
.av-login-form { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.1rem 0 0.4rem; text-align: left; }
.av-login-form .av-field { display: flex; flex-direction: column; gap: 0.3rem; }
.av-login-submit { width: 100%; justify-content: center; }
.av-login-hint { font-size: 0.78rem; margin: 0; }
.av-login-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0 0.9rem; color: var(--av-text-muted); font-size: 0.78rem; }
.av-login-or::before, .av-login-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--av-border); }
.av-error-list { margin: 0; padding-left: 1.1rem; text-align: left; }

/* People / onboarding (Sept 6 2026). */
.av-people-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.av-person { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: flex-start; justify-content: space-between;
  border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); padding: 0.9rem 1rem; background: var(--av-surface-raised); }
.av-person.is-inactive { opacity: 0.62; }
.av-person-main { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.av-person-meta { font-size: 0.8rem; }
.av-person-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.av-invite { border-left: 3px solid var(--av-gold); }
.av-invite-title { margin: 0 0 0.3rem; font-size: 1.05rem; }
.av-invite-link { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; margin-top: 0.6rem; }
.av-invite-note { font-size: 0.78rem; margin: 0.5rem 0 0; }
@media (max-width: 620px) { .av-person { flex-direction: column; } .av-person-actions { width: 100%; } }

/* Activity timeline — filter and collapse (Sept 6 2026). */
.av-timeline-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; }
.av-timeline-chip {
  border: 1px solid var(--av-border); background: var(--av-surface-raised); color: var(--av-text-muted);
  border-radius: 999px; padding: 0.28rem 0.75rem; font: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; min-height: 32px;
}
.av-timeline-chip[aria-pressed="true"] { background: var(--av-plum); color: var(--av-porcelain); border-color: var(--av-plum); }
.av-timeline-chip:hover { border-color: var(--av-gold); }
.av-timeline-more { margin-top: 0.6rem; }
/* A human touch is the thing being looked for — give it a visible edge. */
.av-timeline-item.is-human { border-left: 3px solid var(--av-gold); padding-left: 0.75rem; }

/* Quick-log confirmation (Sept 6 2026). */
.av-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--av-plum); color: var(--av-porcelain);
  padding: 0.6rem 1.1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(27, 15, 46, 0.3); z-index: 200;
  opacity: 1; transition: opacity 0.45s ease;
}
.av-toast.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .av-toast { transition: none; } }

/* Accounts list — search, filters, paging (Sept 7 2026). */
.av-acct-filters { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; margin-bottom: 1rem; }
.av-acct-filters .av-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.av-acct-filters .av-field:first-child { flex: 1 1 22rem; }
.av-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; white-space: nowrap; }
.av-pager { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 620px) { .av-acct-filters { flex-direction: column; align-items: stretch; } }

/* --- Account working surface (stage / owner / log), Sept 7 2026 ------------------------------
   Mikel: "crm has now way i can see to log activity or to make notes, or change the stage" and
   "also need to be able to assign accounts and see account owner." These style the controls that
   answered that — a stage chip, an owner badge, and the hint text under each form. */

.av-acct-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0;
}

.av-stage-chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: rgba(46, 26, 71, 0.08);
  color: var(--av-plum, #2E1A47);
  border: 1px solid rgba(46, 26, 71, 0.16);
}

/* Progress reads left to right: cold grey -> working plum -> engaged gold -> closed. */
.av-stage-chip--new,
.av-stage-chip--researched { background: rgba(122, 107, 140, 0.12); color: #5C5168; border-color: rgba(122, 107, 140, 0.24); }
.av-stage-chip--contacted { background: rgba(76, 107, 138, 0.12); color: #3D5A73; border-color: rgba(76, 107, 138, 0.26); }
.av-stage-chip--replied,
.av-stage-chip--discovery-booked,
.av-stage-chip--demo-delivered,
.av-stage-chip--trial-active { background: rgba(201, 162, 75, 0.18); color: #8C6B1F; border-color: rgba(201, 162, 75, 0.4); }
.av-stage-chip--closed-won { background: rgba(62, 122, 82, 0.16); color: var(--av-success, #3E7A52); border-color: rgba(62, 122, 82, 0.32); }
.av-stage-chip--closed-lost { background: rgba(178, 58, 58, 0.12); color: var(--av-error, #B23A3A); border-color: rgba(178, 58, 58, 0.28); }
.av-stage-chip--nurture { background: rgba(122, 107, 140, 0.1); color: #6B5E7A; border-color: rgba(122, 107, 140, 0.2); }

.av-owner-badge {
  font-size: 0.82rem;
  color: var(--av-muted, #7A6B8C);
}

.av-owner-current {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
}

/* Says what a control is about to do before it does it — the stage select opens a deal. */
.av-hint {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--av-muted, #7A6B8C);
}

.av-timeline-meta {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--av-muted, #7A6B8C);
}

.av-stage-form,
.av-assign-form { margin-bottom: 0.25rem; }

.av-assign-form { border-top: 1px solid rgba(46, 26, 71, 0.1); padding-top: 0.9rem; }

/* Next action — the form that creates the task Today and Tasks read (Sept 7 2026). */
.av-next-action-form { border-top: 1px solid rgba(46, 26, 71, 0.1); padding-top: 0.9rem; }
.av-next-action-live {
  margin: 0.9rem 0 0.25rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(201, 162, 75, 0.12);
  font-size: 0.88rem;
}

/* Follow-ups on Today (Mikel, Sept 7 2026: "follow ups should appear in the today view"). */
.av-followup-list { list-style: none; margin: 0; padding: 0; }
.av-followup {
  padding: 0.6rem 0 0.6rem 0.75rem;
  border-left: 3px solid rgba(76, 107, 138, 0.35);
  border-bottom: 1px solid rgba(46, 26, 71, 0.07);
}
.av-followup:last-child { border-bottom: 0; }
.av-followup.is-overdue { border-left-color: var(--av-error, #B23A3A); }
.av-followup-action { margin-top: 0.15rem; font-size: 0.9rem; }
.av-followup-meta { margin-top: 0.15rem; font-size: 0.78rem; }
.av-followup.is-overdue .av-followup-meta { color: var(--av-error, #B23A3A); }

/* The agents' scoring clause, kept out of the way (Sept 7 2026). Present for anyone who wants it,
   never the first thing read on an account. */
.av-agent-note { margin: 0.25rem 0 0.9rem; }
.av-agent-note > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--av-muted, #7A6B8C);
  list-style: none;
}
.av-agent-note > summary::-webkit-details-marker { display: none; }
.av-agent-note > summary::before { content: '▸ '; }
.av-agent-note[open] > summary::before { content: '▾ '; }
.av-agent-note-body {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--av-muted, #7A6B8C);
}

/* Values that must never be broken across lines (Mikel, Sept 7 2026: "spread out phonenumber").
   "+1 (561) 235-8066" was wrapping onto four lines and reading as gibberish; a phone number, a
   stage, an owner and a city are each one thing, so the table scrolls sideways instead of folding
   them. .av-table-wrap already provides that scroll. */
.av-table .av-cell-nowrap { white-space: nowrap; }

/* An account that is ours rather than a customer's — the app's own test install. Stated on the
   record because its deal is deliberately missing from every client count (Sept 7 2026). */
.av-internal-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(76, 107, 138, 0.12);
  color: #3D5A73;
  border: 1px solid rgba(76, 107, 138, 0.26);
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------------------------
   Inbound leads + notifications (Sept 9 2026)
   Mikel: "I got an email for a lead from the website yesterday ... show with high priority on the
   today view. these need to be responded to immediatly." The one alarming thing on the screen.
   --------------------------------------------------------------------------------------------- */
.av-inbound { border-left: 4px solid var(--av-error); }
.av-inbound h2 { margin-top: 0; }
.av-inbound-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.av-inbound-item { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  padding: 0.7rem 0; border-bottom: 1px solid var(--av-border); flex-wrap: wrap; }
.av-inbound-item:last-child { border-bottom: 0; }
.av-inbound-main { min-width: 0; flex: 1 1 18rem; }
.av-inbound-name { font-weight: 700; }
.av-inbound-meta { font-size: 0.85rem; margin-top: 0.15rem; }
.av-inbound-message { margin: 0.4rem 0 0; font-size: 0.88rem; }
.av-inbound-when { font-size: 0.78rem; margin-top: 0.25rem; }
.av-inbound-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.av-inbound-claim, .av-inbound-dismiss { margin: 0; }
.av-inbound-dismiss .av-link-button { font-size: 0.8rem; opacity: 0.75; }

.av-notif { position: relative; }
.av-notif > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--av-error); color: #fff; border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.8rem; font-weight: 700; }
.av-notif > summary::-webkit-details-marker { display: none; }
.av-notif-panel { position: absolute; right: 0; top: 2rem; z-index: 40; width: min(22rem, 80vw);
  background: var(--av-surface, #fff); color: var(--av-text, #1B0F2E); border: 1px solid var(--av-border);
  border-radius: 8px; box-shadow: 0 12px 28px rgba(27, 15, 46, 0.22); padding: 0.8rem; }
.av-notif-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-bottom: 0.5rem; }
.av-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.av-notif-item { border-left: 3px solid var(--av-border); padding-left: 0.55rem; }
.av-notif-item--urgent { border-left-color: var(--av-error); }
.av-notif-body, .av-notif-time { font-size: 0.8rem; opacity: 0.8; }

.av-toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column;
  gap: 0.6rem; max-width: min(24rem, 92vw); }
.av-toast { display: block; text-decoration: none; background: var(--av-plum-dark, #1B0F2E); color: #F8F4EF;
  border-left: 4px solid var(--av-gold, #C9A24B); border-radius: 8px; padding: 0.8rem 0.9rem;
  box-shadow: 0 12px 28px rgba(27, 15, 46, 0.35); }
.av-toast-title { display: block; font-weight: 700; }
.av-toast-body { display: block; font-size: 0.85rem; opacity: 0.85; margin-top: 0.15rem; }
.av-toast-cta { display: block; font-size: 0.8rem; color: var(--av-gold, #C9A24B); margin-top: 0.4rem; font-weight: 700; }

/* "Add a note", on the card the notes actually live in (Mikel, Sept 9 2026: "where can i add a
   note to an account?" — the form was four cards above the feed it wrote into). */
.av-add-note { margin-bottom: 1rem; }
.av-add-note > summary { list-style: none; cursor: pointer; display: inline-block; }
.av-add-note > summary::-webkit-details-marker { display: none; }
.av-add-note[open] > summary { margin-bottom: 0.8rem; }