/* ─────────────────────────────────────────────────────────────
   SellWorthy · RQS Calculator
   Palette: Nexus warm beige + Hydra Teal accent
   Fonts:   Satoshi (body) + General Sans (display)
   ───────────────────────────────────────────────────────────── */

/* Kill native number-input spinner arrows across the entire app.
   Rationale: dealers reported typing '15' registered as '1' when the arrow
   was accidentally hit, and step-by-1 is useless for currency + points.
   Mobile keypad is handled via the runtime inputmode='decimal' pass in app.js
   so users get a numeric keyboard without losing paste/typing behavior. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;   /* Firefox */
  appearance: textfield;
}

:root,
[data-theme='light'] {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  /* 4px spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Surfaces */
  /* SellWorthy palette — warm off-white canvas, navy primary, orange accent */
  --color-bg:               #FAFAF7;
  --color-surface:          #FFFFFF;
  --color-surface-2:        #F5F5F0;
  --color-surface-offset:   #EFEFE8;
  --color-surface-dynamic:  #E4E4DC;
  --color-divider:          #E4E4DC;
  --color-border:           #C8C8BE;

  /* Text */
  /* Text — primary navy for headline text; muted for body copy */
  --color-text:        #1E2A52;
  --color-text-muted:  #4A5578;
  --color-text-faint:  #A8ADBD;
  --color-text-inverse:#FFFFFF;

  /* Primary */
  /* Primary — SellWorthy navy #1E2A52 */
  --color-primary:            #1E2A52;
  --color-primary-hover:      #2A3968;
  --color-primary-active:     #141C3A;
  --color-primary-highlight:  #E8ECF5;

  /* Accent — SellWorthy signature orange #F4A22A (checkmark, CTAs, RQS emphasis) */
  --color-accent:             #F4A22A;
  --color-accent-hover:       #E89217;
  --color-accent-active:      #D18310;
  --color-accent-highlight:   #FDF3E1;

  /* Semantic */
  /* Semantic colors — tuned to sit next to navy/orange */
  --color-success:            #16A34A;
  --color-success-highlight:  #DCFCE7;
  --color-warning:            #F4A22A;
  --color-warning-highlight:  #FDF3E1;
  --color-error:              #DC2626;
  --color-error-highlight:    #FEE2E2;

  /* RQS band colors — green (excellent) → orange (fair, brand-consistent) → red (floor) */
  --color-band-excellent:     #16A34A;
  --color-band-good:          #65A30D;
  --color-band-fair:          #F4A22A;
  --color-band-poor:          #EA580C;
  --color-band-floor:         #DC2626;

  /* Quote/job status pill colors */
  --color-status-draft:       #7A8299;
  --color-status-sent:        #1E2A52;
  --color-status-signed:      #16A34A;
  --color-status-lost:        #DC2626;
  --color-status-cancelled:   #A8ADBD;

  --color-job-to-schedule:    #F4A22A;
  --color-job-scheduled:      #1E2A52;
  --color-job-in-progress:    #2563EB;
  --color-job-complete:       #16A34A;
  --color-job-cancelled:      #A8ADBD;

  /* Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Motion */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadow */
  /* Shadows tinted with brand navy for cohesion */
  --shadow-sm: 0 1px 2px  rgba(30, 42, 82, 0.06);
  --shadow-md: 0 4px 12px rgba(30, 42, 82, 0.10);
  --shadow-lg: 0 12px 32px rgba(30, 42, 82, 0.14);

  /* Widths */
  --content-narrow:  560px;
  --content-default: 880px;
  --content-wide:    1120px;

  /* Fonts */
  --font-body:    'Satoshi', 'Helvetica Neue', system-ui, sans-serif;
  --font-display: 'General Sans', 'Helvetica Neue', system-ui, sans-serif;
}

[data-theme='dark'] {
  --color-bg:              #171614;
  --color-surface:         #1C1B19;
  --color-surface-2:       #201F1D;
  --color-surface-offset:  #22211F;
  --color-surface-dynamic: #2D2C2A;
  --color-divider:         #262523;
  --color-border:          #393836;

  --color-text:        #CDCCCA;
  --color-text-muted:  #979692;
  --color-text-faint:  #5A5957;
  --color-text-inverse:#171614;

  --color-primary:            #4F98A3;
  --color-primary-hover:      #227F8B;
  --color-primary-active:     #1A626B;
  --color-primary-highlight:  #24363A;

  --color-success:            #6DAA45;
  --color-success-highlight:  #2E3A26;
  --color-warning:            #BB653B;
  --color-warning-highlight:  #3B2A22;
  --color-error:              #D163A7;
  --color-error-highlight:    #3E2A38;

  --shadow-sm: 0 1px 2px  rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* ─── Layout ───────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-feature-settings: 'ss01';
}

.app-header {
  position: sticky;
  top: 0;
  /* v291 (2026-08-11 Chris — "quote forms lay on top of the navigation
     dropdowns"). The wizard's post-save overlay uses z-index: 20 inside
     .qb-wizard, and the sticky classic-layout sumbar/actionbar also live
     at z:20. Raise the sticky header above them so the Quotes / Projects /
     Reports / Admin dropdowns (nav-menu z:40 trapped in this header's
     stacking context) always sit on top of quote content. */
  z-index: 100;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-divider);
}
.app-header__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}
.brand__mark {
  color: var(--color-primary);
  flex-shrink: 0;
}
/* Brand mark (SellWorthy circle-check). Rounded to match logo. */
.brand__mark--img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 640px) {
  .brand__mark--img { width: 30px; height: 30px; border-radius: 7px; }
}
.brand__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand__academy {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.015em;
}
.brand__academy--sell   { color: var(--color-primary); }
.brand__academy--worthy { color: var(--color-accent); }
.brand__academy--dot    { color: var(--color-accent); }
.brand__product {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}
.nav-btn:hover { color: var(--color-text); background: var(--color-surface-offset); }
.nav-btn.is-active {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

/* --- Grouped nav dropdowns ------------------------------------------------- */
.nav-group {
  position: relative;
  display: inline-block;
}
.nav-btn--group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-btn--group[aria-expanded="true"] {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.nav-btn__caret {
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.nav-btn--group[aria-expanded="true"] .nav-btn__caret {
  transform: rotate(180deg);
}
/* Active state when the current view is one of the group's items */
.nav-group.has-active-child > .nav-btn--group {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
}
.nav-menu[hidden] { display: none !important; }
.nav-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  white-space: nowrap;
}
.nav-menu__item:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.nav-menu__item.is-active {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.nav-group--admin > .nav-btn--group {
  color: var(--color-accent);
}
/* End grouped nav dropdowns */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  display: inline-grid;
  place-items: center;
}
.icon-btn:hover { color: var(--color-text); background: var(--color-surface-offset); }
.icon-btn--text {
  width: auto;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
}

.app-main {
  min-height: calc(100dvh - 60px);
}

.view {
  padding: var(--space-8) var(--space-5) var(--space-16);
}
.view[hidden] { display: none; }

.page {
  max-width: var(--content-default);
  margin: 0 auto;
  padding-bottom: var(--space-8);
}
.page--narrow {
  max-width: var(--content-narrow);
}
.page__head {
  margin-bottom: var(--space-8);
}
.page__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.page__lede {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: 60ch;
}
.page__greeting {
  margin-bottom: var(--space-6);
}
.greeting__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.greeting__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ─── Sign-in view ─────────────────────────────────────── */
.view--signin {
  min-height: calc(100dvh - 60px);
  display: grid;
  place-items: center;
  padding: var(--space-10) var(--space-5);
}
.signin {
  max-width: 460px;
  width: 100%;
  text-align: left;
}

/* ─── Loading view (between sign-in and dashboard) ─── */
.view--loading {
  min-height: calc(100dvh - 60px);
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-5);
}
.loading-shell {
  width: 100%;
  max-width: 760px;
  text-align: left;
}
.loading-shell__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.loading-shell__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}
.loading-shell__lede {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
  max-width: 620px;
}
.loading-shell__progress {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.loading-shell__progress-track {
  flex: 1;
  height: 6px;
  background: var(--color-surface-offset);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.loading-shell__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #7bd88f);
  border-radius: 999px;
  transition: width 300ms ease-out;
  box-shadow: 0 0 12px rgba(123, 216, 143, 0.35);
}
.loading-shell__progress-label {
  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Activity log terminal (used inside .view--loading) ─── */
.syslog {
  --syslog-bg: #0f1613;
  --syslog-bg-chrome: #0a100e;
  --syslog-border: #1c2a26;
  --syslog-text: #c9d5cf;
  --syslog-muted: #6c8079;
  --syslog-info: #7ad0e0;
  --syslog-ok: #7bd88f;
  --syslog-warn: #f0c674;
  --syslog-err: #ef7a7a;
  --syslog-net: #bfa6ef;
  --syslog-meta: #b8e07a;

  background: var(--syslog-bg);
  border: 1px solid var(--syslog-border);
  border-radius: 12px;
  overflow: hidden;
  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  color: var(--syslog-text);
  box-shadow: 0 20px 48px -24px rgba(0, 0, 0, 0.35),
              0 2px 6px -2px rgba(0, 0, 0, 0.2);
  height: 360px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px) {
  .syslog { height: 300px; }
}
.syslog__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--syslog-bg-chrome);
  border-bottom: 1px solid var(--syslog-border);
}
.syslog__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  flex-shrink: 0;
}
.syslog__dot--r { background: #ff5f57; }
.syslog__dot--y { background: #febc2e; }
.syslog__dot--g { background: #28c840; }
.syslog__title {
  margin-left: 8px;
  font-size: 11px;
  color: var(--syslog-muted);
  letter-spacing: 0.04em;
}
.syslog__pulse {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--syslog-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.syslog__pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--syslog-ok);
  box-shadow: 0 0 8px var(--syslog-ok);
  animation: syslog-pulse 1.6s ease-in-out infinite;
}
@keyframes syslog-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1);  }
}
.syslog__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 12px;
  font-size: 12px;
  line-height: 1.55;
  scroll-behavior: smooth;
}
.syslog__body::-webkit-scrollbar {
  width: 6px;
}
.syslog__body::-webkit-scrollbar-track {
  background: transparent;
}
.syslog__body::-webkit-scrollbar-thumb {
  background: var(--syslog-border);
  border-radius: 3px;
}
.syslog__line {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0;
  transform: translateY(3px);
  animation: syslog-in 200ms ease-out forwards;
}
@keyframes syslog-in {
  to { opacity: 1; transform: translateY(0); }
}
.syslog__line--info { color: var(--syslog-info); }
.syslog__line--ok   { color: var(--syslog-ok); }
.syslog__line--warn { color: var(--syslog-warn); }
.syslog__line--err  { color: var(--syslog-err); }
.syslog__line--net  { color: var(--syslog-net); }
.syslog__line--meta { color: var(--syslog-meta); }
.syslog__line--dim  { color: var(--syslog-muted); }
.syslog__prefix {
  display: inline-block;
  min-width: 34px;
  color: var(--syslog-muted);
  margin-right: 8px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.syslog__cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: var(--syslog-ok);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: syslog-blink 1s steps(1) infinite;
}
@keyframes syslog-blink {
  50% { opacity: 0; }
}
.syslog__footer {
  padding: 8px 14px;
  border-top: 1px solid var(--syslog-border);
  background: var(--syslog-bg-chrome);
  font-size: 10.5px;
  color: var(--syslog-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.syslog__footer::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--syslog-muted);
  flex-shrink: 0;
}
.syslog.is-busy .syslog__footer::before {
  background: var(--syslog-warn);
  box-shadow: 0 0 6px var(--syslog-warn);
}
.syslog.is-done .syslog__footer::before {
  background: var(--syslog-ok);
  box-shadow: 0 0 6px var(--syslog-ok);
}
.signin__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.signin__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: var(--space-3);
}
@media (min-width: 640px) {
  .signin__title { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
}
.signin__lede {
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
}
.signin__form {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.signin__foot {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
}

/* ─── Form primitives ──────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.field__label-hint {
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: var(--space-2);
  font-size: var(--text-xs);
}
.field__hint {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.field__hint.is-error { color: var(--color-error); }

.field input[type='text'],
.field input[type='email'],
.field input[type='date'],
.field select {
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  min-height: 44px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.btn--lg { min-height: 52px; font-size: var(--text-base); }
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn--primary:active:not(:disabled) { transform: translateY(1px); }
.btn--primary:disabled {
  background: var(--color-surface-dynamic);
  color: var(--color-text-faint);
  cursor: not-allowed;
}
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface-offset); }

/* SellWorthy accent CTA — signature orange. Solid orange bg + white text
   for maximum visibility. Hardcoded hex (not var(--sw-orange)) because
   brand-tokens.css isn't imported into style.css and CSS var fallback
   would leave the button invisible. Use for high-emphasis actions where
   navy would compete with surrounding UI. */
.btn--accent {
  background: #F4A22A;
  color: #FFFFFF;
  border: 1px solid #F4A22A;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.btn--accent:hover:not(:disabled) {
  background: #E89217;
  border-color: #E89217;
}
.btn--accent:active:not(:disabled) { transform: translateY(1px); }
.btn--accent:disabled {
  background: var(--color-surface-dynamic);
  color: var(--color-text-faint);
  border-color: var(--color-border);
  cursor: not-allowed;
  text-shadow: none;
}
.btn--sm {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

/* ─── Mode toggle ──────────────────────────────────────── */

/* ─── Vertical switcher (RQS 4e) ──────────────────────────── */
/* Chip row above the Quote/Won mode toggle. Renders one chip per active
   vertical; unlocked chips are clickable, locked chips are muted with a
   +$29/mo upsell affordance. The active chip uses SellWorthy orange (the
   same accent as the primary button) to make the scoring context unambiguous. */
.vertical-switcher {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.vertical-switcher__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.vertical-switcher__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.vertical-switcher__loading {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.vertical-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.06s ease;
  min-height: 34px;
}
.vertical-chip:hover:not(.is-locked):not(.is-active) {
  border-color: #F4A22A;
  color: var(--color-text);
  background: rgba(244, 162, 42, 0.08);
}
.vertical-chip:active:not(.is-locked) { transform: translateY(1px); }
.vertical-chip.is-active {
  background: #F4A22A;
  border-color: #F4A22A;
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.vertical-chip.is-active:hover { background: #E8951C; border-color: #E8951C; }
.vertical-chip.is-locked {
  color: var(--color-text-muted);
  background: transparent;
  border-color: var(--color-border);
  border-style: dashed;
  cursor: pointer;   /* still clickable so we can show the upsell tooltip */
}
.vertical-chip.is-locked:hover { color: var(--color-text); border-style: solid; }
.vertical-chip__lock {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(30, 42, 82, 0.08);
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.vertical-chip.is-active .vertical-chip__lock { background: rgba(255,255,255,0.20); color: #FFFFFF; }

/* Compact variant — used in the Quote sidebar's "Score this project" panel
   where horizontal room is tight. Smaller padding + font, tighter min-height.
   Chips still wrap to the next line for narrow sidebars. */
.vertical-switcher__chips--compact {
  gap: 6px;
}
.vertical-chip--compact {
  padding: 4px 10px;
  font-size: var(--text-xs);
  min-height: 26px;
  gap: 6px;
}
.vertical-chip--compact .vertical-chip__lock {
  font-size: 9px;
  padding: 1px 5px;
}

/* Sidebar switcher wrapper — sits under the Score-this-project head, above
   the axes. Small stacked label + chip row + inline override badge. */
.quote-rqs__switcher {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}
.quote-rqs__switcher-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.quote-rqs__badge--inline {
  align-self: flex-start;
  margin-top: 2px;
}
/* Placeholder shown in .axes when a non-outdoor vertical is picked in Commit 1.
   Interactive per-vertical axes ship in the follow-up commit; until then we
   surface the formula, GM floor, and axis structure honestly. */
.axes-placeholder {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  background: var(--color-surface-offset);
}
.axes-placeholder__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F4A22A;
  margin-bottom: var(--space-2);
}
.axes-placeholder__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.axes-placeholder__body {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.axes-placeholder__body strong { color: var(--color-text); font-weight: 600; }
.axes-placeholder__axes {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.8;
}
.axes-placeholder__axes strong { font-weight: 600; }
.axes-placeholder__hint {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--text-xs);
}

.mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}
.mode__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-align: left;
  color: var(--color-text-muted);
  min-height: 60px;
  justify-content: center;
}
.mode__tab:hover { color: var(--color-text); }
.mode__tab.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.mode__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
}
.mode__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* ─── Calculator ───────────────────────────────────────── */

.calc__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (min-width: 720px) {
  .calc__meta {
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: var(--space-5);
  }
}

.segmented {
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
.segmented__legend {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: 0;
}
.segmented__row {
  display: inline-flex;
}
.seg {
  display: inline-flex;
  position: relative;
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
}
.segmented__row .seg:first-of-type > span {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.segmented__row .seg:last-of-type > span {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.segmented__row .seg + .seg > span { border-left-width: 0; }
.seg > span:hover { color: var(--color-text); background: var(--color-surface-offset); }
.seg input:checked + span {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.seg input:focus-visible + span {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
  position: relative;
  z-index: 1;
}

/* Axes */
.axes {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .axes { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.axis {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.axis.is-answered {
  border-color: color-mix(in oklab, var(--color-primary) 40%, var(--color-border));
}
.axis__legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-4);
}
.axis__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
}
.axis__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.axis__opts {
  display: grid;
  gap: var(--space-2);
}

.opt {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  cursor: pointer;
  min-height: 48px;
}
.opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.opt:hover { border-color: var(--color-text-muted); }
.opt__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.opt__points {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  min-width: 44px;
  text-align: center;
}
.opt:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.opt:has(input:checked) .opt__label { color: var(--color-text); }
.opt:has(input:checked) .opt__points {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
/* Negative points get warning tint when selected on lose-y axes */
.opt[data-points^='-']:has(input:checked) {
  border-color: var(--color-warning);
  background: var(--color-warning-highlight);
}
.opt[data-points^='-']:has(input:checked) .opt__points {
  background: var(--color-warning);
}
/* GM<30% hard floor: escalate from warning to error — this pick auto-zeros the score */
.opt.opt--floor:has(input:checked) {
  border-color: var(--color-error);
  background: var(--color-error-highlight);
}
.opt.opt--floor:has(input:checked) .opt__points {
  background: var(--color-error);
}
/* And keep the RQS-0 chip readable even when unselected */
.opt.opt--floor .opt__points {
  background: color-mix(in oklab, var(--color-error) 20%, var(--color-surface));
  color: var(--color-error);
  font-weight: 700;
}

/* Won-mode lead question (shown FIRST when Won is active) */
.won-lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
  margin-bottom: var(--space-6);
}
.won-lead .segmented {
  gap: var(--space-3);
}
.won-lead .segmented__legend {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.won-lead [data-linked-picker] {
  max-width: 480px;
}

/* Won-mode extras (just close date now, shown after Yes/No is picked) */
.won-extras {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border);
}
.field--close-date {
  max-width: 280px;
}

/* Score bar — solid background so it never lets content bleed through. */
.score-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.score-bar__pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.score-bar__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.score-bar__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1;
}
.score-bar__band {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.score-bar__band.band--destroy { color: var(--color-error); }
.score-bar__band.band--toxic   { color: var(--color-warning); }
.score-bar__band.band--neutral { color: var(--color-text-muted); }
.score-bar__band.band--good    { color: var(--color-primary); }
.score-bar__band.band--premium { color: var(--color-success); }

/* Hard-floor state: tint the whole score bar red so the RQS-0 override reads
   as a rule, not a soft warning. */
.score-bar--floor {
  border-color: var(--color-error);
  background: var(--color-error-highlight);
}
.score-bar__floor-tip {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid color-mix(in oklab, var(--color-error) 35%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.score-bar__floor-tip[hidden] { display: none; }

/* ─── Confirmation ─────────────────────────────────────── */
.confirm {
  text-align: center;
  padding-top: var(--space-8);
}
.confirm__check {
  color: var(--color-success);
  margin: 0 auto var(--space-5);
  width: 56px;
  height: 56px;
}
.confirm__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.confirm__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}
.confirm__score {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
}
.confirm__points {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
}
.confirm__points-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.confirm__points-max {
  font-family: var(--font-display);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-weight: 500;
}
.confirm__band {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.confirm__band.band--destroy { color: var(--color-error); }
.confirm__band.band--toxic   { color: var(--color-warning); }
.confirm__band.band--neutral { color: var(--color-text-muted); }
.confirm__band.band--good    { color: var(--color-primary); }
.confirm__band.band--premium { color: var(--color-success); }
.confirm__worst {
  padding: var(--space-4) var(--space-5);
  background: var(--color-warning-highlight);
  color: var(--color-warning);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.confirm__worst[hidden] { display: none; }
.confirm__floor-tip {
  max-width: 480px;
  margin: var(--space-4) auto 0;
  padding: var(--space-4);
  background: var(--color-error-highlight);
  border: 1px solid color-mix(in oklab, var(--color-error) 45%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-error);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: left;
}
.confirm__floor-tip[hidden] { display: none; }
.confirm__worst-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.9;
}
.confirm__worst-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
}
.confirm__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Table (quotes + history) ─────────────────────────── */
/* Quote sections (Open / Won / Lost split) */
.quote-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.quote-section__head {
  margin-bottom: var(--space-4);
}
.quote-section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.quote-section__title-text {
  cursor: pointer;
  user-select: none;
}
.quote-section__title-text:hover {
  color: var(--color-primary);
}
/* v99 — collapsible section chevron. Rotates when expanded so it points down
 * (open drawer); when collapsed, points right toward the label. */
.quote-section__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.quote-section__toggle:hover {
  background: var(--color-surface-alt, rgba(0,0,0,0.04));
  color: var(--color-text);
}
.quote-section__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.quote-section__chevron {
  transition: transform 160ms ease;
}
.quote-section--collapsed .quote-section__chevron {
  transform: rotate(-90deg);
}
.quote-section--collapsed .quote-section__hint,
.quote-section--collapsed .quote-section__windows,
.quote-section--collapsed .quote-section__body {
  display: none;
}
.quote-section--collapsed .quote-section__head {
  margin-bottom: 0;
}
.quote-section__count {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.quote-section__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.quote-section[data-section="won"] .quote-section__title,
.quote-section[data-section="lost"] .quote-section__title {
  color: var(--color-text-muted);
}

.table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}
.qtable {
  width: 100%;
  font-size: var(--text-sm);
}
.qtable th,
.qtable td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}
.qtable thead th {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-surface-offset);
  position: sticky;
  top: 0;
}
.qtable tbody tr:last-child td { border-bottom: none; }
.qtable tbody tr:hover { background: var(--color-surface-offset); }
.qtable__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-weight: 600;
}
/* v334.8 (2026-08-15 Chris — "i think those the actions can just roll
   up into an actions button"): row-level actions collapse into a single
   Actions ▾ dropdown so every My Quotes row (Drafts / Sent / Signed /
   Ready-for-deposit / Lost) shows a consistent 2-affordance action cell:
   the edit pencil + the Actions ▾ popover. Menu items are the exact same
   underlying <button>s and <a>s the row used to render inline — so all
   existing data-* click handlers (copy-link, approve-financing,
   deposit-charge/mark/waive, download/resend contract, quote PDF) keep
   firing without any handler rewrites. Only the presentation changes. */
.qtable__actions {
  text-align: right;
  white-space: nowrap;
}
.qtable__actions > * { vertical-align: middle; margin-left: 4px; }

/* The dropdown shell */
.qtable-actions-menu {
  position: relative;
  display: inline-block;
}
.qtable-actions-menu__toggle { /* looks like a ghost button */ }
.qtable-actions-menu__toggle::after {
  content: "▾";
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0.7;
}
/* v334.9 (2026-08-15 Chris — "the actions drop down disappears inside
   the row"): the enclosing <tr>/<table>/section has overflow clipping,
   which was cutting off the absolute-positioned popover. Fix: render the
   popover as position: fixed and position it via JS at the toggle's
   bounding rect on open. That escapes any ancestor overflow. */
.qtable-actions-menu__list {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  min-width: 200px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
  text-align: left;
}
.qtable-actions-menu.is-open .qtable-actions-menu__list { display: block; }
.qtable-actions-menu__list li { padding: 0; margin: 0; }

/* Items inside the menu render as full-width, left-aligned rows.
   Preserve the ghost/primary visual by scoping resets tightly. */
.qtable-actions-menu__list .btn,
.qtable-actions-menu__list a.btn {
  display: block;
  width: 100%;
  text-align: left;
  margin: 2px 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 500;
  white-space: nowrap;
}
.qtable-actions-menu__list .btn--primary { /* keep primary color, but treat
     as menu row — no elevated background inside the popover */
  background: transparent;
  color: var(--color-primary, #0c4e54);
  border: none;
}
.qtable-actions-menu__list .btn--primary:hover {
  background: var(--color-surface-alt, #f7f7f5);
}
.qtable-actions-menu__list .btn--ghost {
  border: none;
}
.qtable-actions-menu__list .btn:hover,
.qtable-actions-menu__list a.btn:hover {
  background: var(--color-surface-alt, #f7f7f5);
}

/* Empty-state: if a row has zero eligible actions, hide the toggle */
.qtable-actions-menu[data-empty="1"] { display: none; }
.qtable__project {
  font-weight: 500;
  color: var(--color-text);
}
.qtable__type {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
  padding: 2px 8px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
}

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}
.badge--open    { background: var(--color-primary-highlight); color: var(--color-primary); }
.badge--won     { background: var(--color-success-highlight); color: var(--color-success); }
.badge--lost    { background: var(--color-warning-highlight); color: var(--color-warning); }
.badge--expired { background: var(--color-surface-offset); color: var(--color-text-muted); }

/* Quick actions on quote rows */
.row-actions {
  display: inline-flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ─── KPI grid ─────────────────────────────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 720px) {
  .kpis { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}
.kpi {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.kpi__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}
.kpi__val {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ─── Toast ────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.toast[hidden] { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── History deltas ────────────────────────────────── */
.delta {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.delta--up   { color: var(--color-success, #437A22); }
.delta--down { color: var(--color-warning); }
.delta--flat { color: var(--color-text-muted); }
.qtable .muted { color: var(--color-text-faint); }

/* ─── Edit mode ────────────────────────────────────────── */
.edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.edit-banner__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.edit-banner__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.edit-banner__project {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-banner__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.btn--danger {
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
}
.btn--danger:hover {
  background: var(--color-error);
  color: var(--color-text-inverse, #fff);
}

.edit-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
  max-width: 560px;
}
@media (max-width: 560px) {
  .edit-extras { grid-template-columns: 1fr; }
}
.field--status select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

/* Spec 1 v2.7: quote.temperature pill selector on quote edit form. */
.field--temperature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  grid-column: 1 / -1; /* full width beneath status + close-date row */
}
.temperature-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.temperature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 40px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms, transform 60ms;
}
.temperature-pill:hover:not([disabled]) {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}
.temperature-pill:active:not([disabled]) { transform: scale(0.97); }
.temperature-pill[aria-checked="true"] {
  color: var(--color-text);
  font-weight: 600;
  border-width: 2px;
  padding: 7px 13px; /* compensate for +0.5px border so pill height stays constant */
}
.temperature-pill--cold[aria-checked="true"] {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}
.temperature-pill--warm[aria-checked="true"] {
  border-color: #eab308;
  background: rgba(234, 179, 8, 0.10);
}
.temperature-pill--hot[aria-checked="true"] {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.10);
}
/* Glyphs are emoji, so grayscale() alone would leave three different grays
   (yellow reads far lighter than red). brightness(0) flattens each to black
   while keeping the alpha edge, then invert() lifts it to one neutral gray. */
.temperature-pill__glyph {
  transition: filter 120ms;
}
.temperature-pill:not([aria-checked="true"]) .temperature-pill__glyph {
  filter: brightness(0) invert(0.62);
}
.temperature-pill:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.temperature-pill[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.temperature-pills__hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.field--temperature[data-locked="true"] .temperature-pills__hint::after {
  content: " — locked (quote is closed)";
  color: var(--color-text-muted);
  font-style: italic;
}

/* My Quotes status cell wrapper: stacks badge + temperature chip vertically
   with tight spacing so the two never fight for width in a narrow column. */
.qtable__status-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* My Quotes row: compact temperature chip / one-click cycle toggle. */
.qtable .quote-temp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.72rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 120ms, transform 60ms, background 120ms;
  position: relative;
  z-index: 1; /* above row-click handler */
  white-space: nowrap;
}
.qtable .quote-temp:hover:not([disabled]) { border-color: var(--color-text-muted); }
.qtable .quote-temp:active:not([disabled]) { transform: scale(0.95); }
.qtable .quote-temp--cold { border-color: #3b82f6; color: #1e40af; background: rgba(59, 130, 246, 0.05); }
.qtable .quote-temp--warm { border-color: #eab308; color: #854d0e; background: rgba(234, 179, 8, 0.06); }
.qtable .quote-temp--hot  { border-color: #ef4444; color: #991b1b; background: rgba(239, 68, 68, 0.06); }
/* 2026-08-08 Chris: Viewed = customer has opened the quote link. Hotter than
   Hot — replaces the temperature chip entirely for a viewed quote. Rendered
   as a locked <span>, not a button, so it can't be cycled. Solid magenta so
   it visually pops above the cool blue/yellow/red temperature scale. */
.qtable .quote-temp--viewed {
  border-color: #a21caf;
  color: #fff;
  background: linear-gradient(135deg, #c026d3 0%, #a21caf 100%);
  font-weight: 700;
  cursor: pointer; /* now a button — opens view-info popover */
  box-shadow: 0 0 0 1px rgba(162, 28, 175, 0.15), 0 1px 3px rgba(162, 28, 175, 0.25);
}
.qtable .quote-temp--viewed:hover { filter: brightness(1.08); }
.qtable .quote-temp--viewed[aria-expanded="true"] { filter: brightness(0.92); }
.qtable .quote-temp[disabled] { opacity: 0.45; cursor: default; }

/* Spec 1 v2.7.1: My Quotes row status pill — clickable, opens popover of legal
   next-state transitions. Sized to align vertically with the temperature chip
   in the same status-cell stack. Terminal statuses (cancelled) render as a
   .quote-status--terminal span with no caret and no hover. */
.qtable .quote-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.72rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 120ms, transform 60ms, background 120ms;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-family: inherit;
}
.qtable .quote-status:hover:not(.quote-status--terminal) { border-color: var(--color-text-muted); }
.qtable .quote-status:active:not(.quote-status--terminal) { transform: scale(0.95); }
.qtable .quote-status__caret { font-size: 0.7em; opacity: 0.6; margin-left: 1px; }
.qtable .quote-status--terminal { cursor: default; }
.qtable .quote-status--draft    { border-color: #94a3b8; color: #334155; background: rgba(148, 163, 184, 0.08); }
.qtable .quote-status--sent     { border-color: #0ea5e9; color: #075985; background: rgba(14, 165, 233, 0.08); }
/* v334.15h — Approved sits between Sent and Signed. Uses the design-system
   teal accent (Nexus Hydra Teal) so it reads as a calm pipeline state; the
   ⚠ needsReviewFlag icon on the row carries the "action needed" signal. */
.qtable .quote-status--approved { border-color: #14b8a6; color: #115e59; background: rgba(20, 184, 166, 0.08); }
/* v334.15w5 - Contract sent sits between Approved (teal) and Signed (green).
   A deeper cyan-teal signals "customer said yes AND contract is out" -- one
   step further along than Approved. */
.qtable .quote-status--contract_sent { border-color: #0891b2; color: #0e7490; background: rgba(8, 145, 178, 0.08); }
.qtable .quote-status--signed   { border-color: #22c55e; color: #14532d; background: rgba(34, 197, 94, 0.08); }
/* v344.k Chris (2026-08-16 — 'status now should be ready for downpayment if
   one is required'): raw deposit_pending renders with its own amber pill so
   the row visibly signals a customer-action state (deposit outstanding) even
   though it lives inside the Signed collapse for bucket/sort purposes. Amber
   maps to the SellWorthy accent family (#F4A22A) without colliding with the
   Signed green or the Contract-sent cyan. */
.qtable .quote-status--ready_for_down_payment { border-color: #F4A22A; color: #7c4a03; background: rgba(244, 162, 42, 0.12); }
.qtable .quote-status--lost     { border-color: #f97316; color: #7c2d12; background: rgba(249, 115, 22, 0.08); }
.qtable .quote-status--cancelled{ border-color: #a1a1aa; color: #52525b; background: rgba(161, 161, 170, 0.08); }

/* Popover shown under a status pill with legal transitions. Absolute-positioned
   via inline styles from JS (top/left). z-index high enough to sit over table. */
.status-popover {
  z-index: 1000;
  min-width: 130px;
  /* v2.7.3: cap width so clamped positioning has predictable room on phones. */
  max-width: calc(100vw - 16px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.status-popover__head {
  padding: 6px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6b7280);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  margin-bottom: 4px;
}
.status-popover__opt {
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 100ms;
}
.status-popover__opt:hover { background: var(--color-surface-alt, rgba(0, 0, 0, 0.04)); }
.status-popover__opt--sent      { color: #075985; }
.status-popover__opt--signed    { color: #14532d; }
.status-popover__opt--lost      { color: #7c2d12; }
.status-popover__opt--draft     { color: #334155; }
.status-popover__opt--cancelled { color: #52525b; }
/* Spec 25 Slice 4 — destructive Delete option in the row status popover. */
.status-popover__sep {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 0.35rem 0;
}
.status-popover__opt--delete {
  color: #b91c1c;
  font-weight: 600;
}
.status-popover__opt--delete:hover {
  background: rgba(185, 28, 28, 0.08);
  color: #991b1b;
}

/* 2026-08-08 Chris: view-info popover — opens off the magenta Viewed chip.
   Shares the .status-popover base (position/shadow/border) but layouts as
   labeled key/value rows instead of a menu. */
.view-info-popover {
  min-width: 220px;
  max-width: 320px;
  padding: 0.6rem 0.75rem;
}
.view-info__head {
  font-size: 0.75rem;
  font-weight: 700;
  color: #a21caf;
  margin-bottom: 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.view-info__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.2rem 0;
  font-size: 0.8rem;
}
.view-info__k {
  color: var(--color-text-muted, #6b7280);
  font-weight: 500;
}
.view-info__v {
  color: var(--color-text, #111827);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.view-info__foot {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  font-size: 0.7rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  text-align: center;
}

/* Spec 1 v2.7.2: compact icon-only button used for row-level Edit affordances
   in My Quotes. Keeps the action column narrow (was ~64px of text “Edit”
   button; now a 32px hit target). Inherits currentColor so it themes cleanly. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, transform 60ms;
}
.btn-icon:hover {
  background: var(--color-surface-offset, rgba(0, 0, 0, 0.04));
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-icon:active { transform: scale(0.94); }
.btn-icon:focus-visible {
  outline: 2px solid var(--color-primary, #01696F);
  outline-offset: 2px;
}
.btn-icon svg { display: block; }

/* Spec 1 v2.7.2: Status and Temperature are their own columns now (was a single
   stacked cell). Keep them tight and center-aligned. On phones we hide the
   Quoted column so the pills breathe. */
.qtable__status-col,
.qtable__temp-cell {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
.qtable__col--temp { text-align: center; }
@media (max-width: 640px) {
  .qtable th.qtable__col--quoted,
  .qtable td:nth-child(2) { display: none; }
  .qtable th,
  .qtable td { padding-left: 8px; padding-right: 8px; }
}

/* Clickable rows in My Quotes */
.qtable tbody tr[data-quote-id] { cursor: pointer; }
.qtable tbody tr[data-quote-id]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
/* Row-action buttons should not trigger row-click */
.qtable .row-actions button { position: relative; z-index: 1; }

/* ─── Mobile refinements ───────────────────────────────── */
/* ── Hamburger toggle (mobile only) ── */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text);
}
.nav-toggle:hover { background: var(--color-surface-offset); }
.nav-toggle[hidden] { display: none !important; }
.nav-toggle__bar {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 140ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 720px) {
  .app-header__inner {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }
  .brand__product { display: none; }
  .brand__academy { font-size: var(--text-xs); }

  /* Show the hamburger; collapse the nav into a dropdown panel. */
  .nav-toggle:not([hidden]) { display: inline-flex; }

  .app-header__nav {
    position: absolute;
    top: calc(100% + 4px);
    right: var(--space-4);
    left: var(--space-4);
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 40;
  }
  /* Hidden by default on mobile; only revealed via [data-open] set by JS. */
  .app-header__nav:not([data-open]) {
    display: none;
  }
  .app-header__nav[data-open] { display: flex; }

  .app-header__nav .nav-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.2;
    border-radius: var(--radius-md);
  }
  .app-header__nav .icon-btn,
  .app-header__nav .icon-btn--text {
    display: inline-flex !important;
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }
  .app-header__nav .icon-btn[data-theme-toggle] {
    /* Give the theme toggle a labeled slot inside the drawer. */
    gap: var(--space-2);
  }
  .view { padding: var(--space-6) var(--space-4) var(--space-8); }
  .mode { grid-template-columns: 1fr; }
  .mode__tab { min-height: 52px; }
  /* Non-sticky score bar on small screens: keep it at the bottom of the flow. */
  .score-bar {
    position: static;
    box-shadow: none;
    padding: var(--space-4);
  }
  .confirm__actions .btn { flex: 1; }
}

/* ─── Dashboard ──────────────────────────────────────────
   Sign-in landing surface. Big number + smart action cards +
   pipeline snapshot + tool grid.
   ───────────────────────────────────────────────────────── */

.dash__greeting {
  margin-bottom: var(--space-8);
}

.dash-section {
  margin-top: var(--space-10);
}
.dash-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.dash-section__title {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.dash-section__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Hero: big RQS number ------------------------------------ */
.dash-hero {
  margin-top: var(--space-10);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.dash-hero__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.dash-hero__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.dash-hero__value {
  font-family: var(--font-display, var(--font-body));
  font-weight: 700;
  font-size: clamp(3.5rem, 2rem + 5vw, 5.5rem);
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
}
.dash-hero__band {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
.dash-hero__band.band--destroy { color: var(--color-error); }
.dash-hero__band.band--toxic   { color: var(--color-warning); }
.dash-hero__band.band--neutral { color: var(--color-text-muted); }
.dash-hero__band.band--good    { color: var(--color-primary); }
.dash-hero__band.band--premium { color: var(--color-success); }
.dash-hero__trend {
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}
.dash-hero__foot {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Smart action cards -------------------------------------- */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.action {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.action--primary { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.action--warn    { border-color: var(--color-warning); background: var(--color-warning-highlight); }
.action--info    { border-color: var(--color-border);  background: var(--color-surface-offset); }
.action--neutral { border-color: var(--color-border);  background: var(--color-surface); }

.action__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.action__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.action--primary .action__eyebrow { color: var(--color-primary); }
.action--warn    .action__eyebrow { color: var(--color-warning); }

.action__badge {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.action__title {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--color-text);
}
.action__body { font-size: var(--text-sm); color: var(--color-text-muted); }
.action__body-text { line-height: 1.5; }
.action__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.action__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.action__proj {
  font-size: var(--text-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action__score {
  font-family: var(--font-display, var(--font-body));
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.action__score.band--destroy { background: var(--color-error-highlight); color: var(--color-error); }
.action__score.band--toxic   { background: var(--color-warning-highlight); color: var(--color-warning); }
.action__score.band--neutral { background: var(--color-surface-offset); color: var(--color-text-muted); }
.action__score.band--good    { background: var(--color-primary-highlight); color: var(--color-primary); }
.action__score.band--premium { background: var(--color-success-highlight); color: var(--color-success); }

.action__cta {
  align-self: flex-start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
  margin-top: auto;
}
.action__cta:hover {
  background: var(--color-primary-highlight);
  color: var(--color-primary-hover);
}

/* Pipeline snapshot --------------------------------------- */
.pipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.pipe {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.pipe__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.pipe__val {
  font-family: var(--font-display, var(--font-body));
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-text);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

/* Tool grid ------------------------------------------------ */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
.tool {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: left;
  font: inherit;
  color: inherit;
  min-height: 148px;
}
.tool--active { cursor: pointer; }
.tool--active:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.tool--soon { opacity: 0.7; background: var(--color-surface-offset); }
.tool__badge {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}
.tool--active .tool__badge {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.tool__title {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-top: var(--space-1);
}
.tool__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.tool__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* Delta arrow colors (shared with history) */
.delta--up   { color: var(--color-success); }
.delta--down { color: var(--color-warning); }
.delta--flat { color: var(--color-text-muted); }

/* Dashboard responsive tweaks ----------------------------- */
@media (max-width: 560px) {
  .dash-hero { padding: var(--space-6) var(--space-4); }
  .dash-hero__value { font-size: 3.5rem; }
  .actions-grid,
  .tools-grid { grid-template-columns: 1fr; }
  .pipe-grid { grid-template-columns: 1fr 1fr; }
}

/* Empty-state hero: no big number yet */
.dash-hero__band--empty {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

/* ─── Score pill (used in Quotes + History tables) ─── */
.score-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.score-pill__num {
  font-size: var(--text-sm);
  font-weight: 600;
}
.score-pill__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.score-pill.band--destroy { background: var(--color-error-highlight);   color: var(--color-error); }
.score-pill.band--toxic   { background: var(--color-warning-highlight); color: var(--color-warning); }
.score-pill.band--neutral { background: var(--color-surface-offset);    color: var(--color-text-muted); }
.score-pill.band--good    { background: var(--color-primary-highlight); color: var(--color-primary); }
.score-pill.band--premium { background: var(--color-success-highlight); color: var(--color-success); }

/* Right-align pills within numeric cells without hugging the edge */
.qtable__num .score-pill {
  margin-left: auto;
}

@media (max-width: 640px) {
  .score-pill { padding: 0.2rem 0.5rem; gap: 0.3rem; }
  .score-pill__label { font-size: 10px; }
}

/* Score pill inside action list — never shrink; project name gets truncated instead */
.action__list .score-pill { flex-shrink: 0; }

/* ─── Business Model Quadrant on dashboard ─── */
.dash-quadrant-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.dash-quadrant {
  min-width: 0;
  width: 100%;
}
.dash-quadrant svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.dash-quadrant__readout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.dash-quadrant__label {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.dash-quadrant__stats {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.dash-quadrant__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-quadrant__stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 500;
}
.dash-quadrant__stat-val {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.dash-quadrant__blurb {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.dash-quadrant__foot {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.dash-quadrant__empty {
  padding: var(--space-3);
}
.dash-quadrant__empty-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.dash-quadrant__empty-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Quadrant color accents (for label text) */
.quadrant-color--ur { color: var(--color-success); }
.quadrant-color--ul { color: var(--color-primary); }
.quadrant-color--lr { color: var(--color-warning); }
.quadrant-color--ll { color: var(--color-text-muted); }

/* Snapshot toolbar (Quarter / Year toggle) */
.dash-quadrant-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}
.dash-quadrant-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px;
  background: var(--color-surface);
  gap: 2px;
}
.dash-quadrant-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  padding: 6px 16px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-quadrant-toggle__btn:hover {
  color: var(--color-text);
}
.dash-quadrant-toggle__btn.is-active {
  background: var(--color-text);
  color: var(--color-bg);
}
.dash-quadrant-toggle__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Prior-period comparison line inside the readout */
.dash-quadrant__compare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px dashed var(--color-border);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}
.dash-quadrant__compare-label {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
}
.dash-quadrant__compare-delta {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.dash-quadrant__compare-delta.delta--up   { color: var(--color-success); }
.dash-quadrant__compare-delta.delta--down { color: var(--color-warning); }
.dash-quadrant__compare-delta.delta--flat { color: var(--color-text-muted); }

/* Stack on mobile */
@media (max-width: 780px) {
  .dash-quadrant-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .dash-quadrant__foot { border-top: none; padding-top: 0; }
  .dash-quadrant-toolbar { justify-content: flex-start; }
}

/* ─── AI-generated coaching insight (below quadrant) ─── */
.dash-insight {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, transparent), color-mix(in srgb, var(--color-primary) 1%, transparent) 55%, transparent),
    var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-left: 3px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
}
.dash-insight[hidden] { display: none; }

.dash-insight__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--color-primary);
}
.dash-insight__spark {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--color-primary);
}
.dash-insight__spark svg { width: 100%; height: 100%; }

.dash-insight__body-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-insight__headline {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}

.dash-insight__body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}

.dash-insight__foot {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Skeleton loader state */
.dash-insight__skeleton {
  display: block;
  height: 0.9em;
  border-radius: 6px;
  margin-bottom: 6px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-text) 6%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 12%, transparent) 50%,
    color-mix(in srgb, var(--color-text) 6%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: dashInsightShimmer 1.4s ease-in-out infinite;
}
.dash-insight__skeleton--headline { height: 1.35em; width: 62%; }
.dash-insight__skeleton--line     { width: 100%; }
.dash-insight__skeleton--short    { width: 74%; }

@keyframes dashInsightShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* When content is loaded, hide skeletons */
.dash-insight:not(.dash-insight--loading) .dash-insight__skeleton { display: none; }

@media (max-width: 780px) {
  .dash-insight { padding: var(--space-4); }
  .dash-insight__headline { font-size: var(--text-base); }
}

/* ─── Celebration banner (confetti milestones) ─── */
.celebration-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 220ms ease;
  z-index: 9998;
  max-width: min(560px, calc(100vw - 32px));
  width: 100%;
}
.celebration-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.celebration-banner__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: 14px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.28), 0 2px 6px -1px rgba(0, 0, 0, 0.1);
}
.celebration-banner__icon {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.celebration-banner__icon svg { width: 100%; height: 100%; }
.celebration-banner__text { min-width: 0; }
.celebration-banner__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
}
.celebration-banner__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 2px;
}
.celebration-banner__close {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.celebration-banner__close:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); }
@media (max-width: 480px) {
  .celebration-banner { bottom: 12px; }
  .celebration-banner__inner { grid-template-columns: auto 1fr auto; padding: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .celebration-banner { transition: opacity 180ms ease; transform: translate(-50%, 0); }
}

/* ─── Weekly revenue form ─── */
.revenue-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.revenue-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.field__select {
  appearance: none;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.4;
  cursor: pointer;
}
.field__select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: transparent;
}
.field__with-prefix {
  position: relative;
  display: flex;
  align-items: center;
}
.field__with-prefix .field__prefix {
  position: absolute;
  left: 12px;
  color: var(--color-text-muted);
  font-weight: 600;
  pointer-events: none;
}
.field__with-prefix input {
  padding-left: 28px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}
.field__with-prefix input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: transparent;
}
.revenue-form__preview {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rev-preview__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
}
.rev-preview__label {
  color: var(--color-text-muted);
}
.rev-preview__val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rev-preview__quad {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.rev-preview__quad-blurb {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.revenue-form__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}
.field__hint.is-error {
  color: var(--color-error);
}

/* ─── Signin: multi-step wiring ──────────────────────────── */

.signin__error {
  background: color-mix(in oklab, var(--color-error) 12%, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in oklab, var(--color-error) 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}

.signin__debug {
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  border: 1px dashed color-mix(in oklab, var(--color-primary) 40%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.signin__alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}
.link-btn:hover { text-decoration: underline; }
.link-btn--muted { color: var(--color-text-muted); }
.link-btn--muted:hover { color: var(--color-text); }

/* Code input styling — larger, centered, monospace for the OTP */
#codeInput,
#operatorCodeInput {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  text-align: center;
  padding-left: calc(var(--space-4) + 0.25em);
}

/* Demo picker cards */
.demo-picker {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}
.demo-card {
  display: grid;
  gap: var(--space-2);
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.demo-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--color-primary) 10%, transparent);
}
.demo-card__quadrant {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  font-weight: 600;
}
.demo-card__name {
  font-size: var(--text-md);
  font-weight: 600;
}
.demo-card__arc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.demo-card--goal { border-left: 3px solid var(--color-primary); }

/* ─── Upsell modal ─────────────────────────────────────── */

.upsell-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: color-mix(in oklab, black 55%, transparent);
  backdrop-filter: blur(4px);
}
.upsell-modal[hidden] { display: none; }
.upsell-modal__card {
  max-width: 480px;
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.upsell-modal__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.upsell-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.upsell-modal__body {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-6);
  line-height: 1.55;
}
.upsell-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* ─── Guest read-only mode: lock icons on write buttons ── */

body.is-read-only [data-write] {
  position: relative;
}
body.is-read-only [data-write]::after {
  content: "🔒";
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 10px;
  pointer-events: none;
}
body.is-read-only [data-write].is-locked {
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────
   QUOTE CALCULATOR
   ───────────────────────────────────────────────────────────── */

.quote-page__tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.quote-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid transparent;
}
.quote-tab:hover { color: var(--color-text); }
.quote-tab.is-active {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  border-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
}

.quote-tab-panel { margin-top: var(--space-6); }

/* ─── Layout: form (left) + sticky summary (right) ─── */
.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 960px) {
  .quote-layout { grid-template-columns: 1fr; }
}

.quote-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.quote-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quote-card__h {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.quote-card__hrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.quote-card__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 60ch;
}

/* Collapsible card (used by Travel) */
.quote-card--collapsible { padding: 0; gap: 0; }
.quote-card__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  border-radius: var(--radius-lg, 12px);
}
.quote-card__toggle:hover { background: var(--color-surface-offset); }
.quote-card__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.quote-card__toggle .quote-card__h { flex: 0 0 auto; margin: 0; }
.quote-card__toggle-chevron {
  display: inline-block;
  font-size: 0.9em;
  color: var(--color-text-muted);
  transition: transform 180ms ease;
  width: 0.9em;
  text-align: center;
}
.quote-card__toggle[aria-expanded="true"] .quote-card__toggle-chevron { transform: rotate(90deg); }
.quote-card__toggle-hint {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 400;
}
.quote-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-5);
}
.quote-card--collapsible.is-collapsed .quote-card__body { display: none; }
.quote-card--collapsible.is-collapsed .quote-card__toggle-hint { opacity: 1; }
.quote-card--collapsible:not(.is-collapsed) .quote-card__toggle-hint { display: none; }

/* Field visibility (customer field show/required) */
.field.is-hidden { display: none !important; }
.field.is-required > .field__label::after {
  content: " *";
  color: var(--color-error, #b23a48);
  font-weight: 600;
}
.field.is-invalid > .field__input,
.field.is-invalid > .field__input:focus {
  border-color: var(--color-error, #b23a48);
  box-shadow: 0 0 0 3px rgba(178, 58, 72, 0.15);
}

/* Settings: customer-fields config grid */
.cf-config { display: flex; flex-direction: column; gap: var(--space-2); }
.cf-config__head,
.cf-config__row {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.cf-config__head {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}
.cf-config__head > div:not(:first-child) { text-align: center; }
.cf-config__row + .cf-config__row { border-top: 1px solid var(--color-border); }
.cf-config__label { font-weight: 500; color: var(--color-text); }
.cf-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0 auto;
  cursor: pointer;
}
.cf-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cf-switch span {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 999px;
  transition: background 160ms ease;
}
.cf-switch span::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 160ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.cf-switch input:checked + span { background: var(--color-primary); }
.cf-switch input:checked + span::before { transform: translateX(20px); }
.cf-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.25); }
.cf-switch input:disabled + span { opacity: 0.4; cursor: not-allowed; }

.quote-card__add {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  border-radius: var(--radius-md);
}
.quote-card__add:hover { background: color-mix(in oklab, var(--color-primary) 20%, var(--color-primary-highlight)); }
.quote-card--goalseek {
  background: var(--color-surface-2);
  border-style: dashed;
}

/* Grid utilities inside cards */
.quote-grid { display: grid; gap: var(--space-4); }
.quote-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quote-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .quote-grid--2, .quote-grid--3 { grid-template-columns: 1fr; }
}
.field--wide { grid-column: 1 / -1; }
.field__input {
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  width: 100%;
}
.field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}
.field__input--num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.field__hint { color: var(--color-text-muted); font-size: var(--text-xs); font-style: normal; margin-left: var(--space-1); }
.field__combo {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.field__combo .field__input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.field__suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  background: var(--color-bg-muted, #f5f5f2);
  border: 1px solid var(--color-border);
  border-left: 0;
  border-top-right-radius: var(--radius-md, 8px);
  border-bottom-right-radius: var(--radius-md, 8px);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  pointer-events: none;
  min-width: 2.25rem;
  white-space: nowrap;
}

.quote-subrow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-divider);
}
.quote-subrow:first-child { border-top: none; padding-top: 0; }
.quote-subrow__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Vendor lines (stacked card layout) ─── */
.vendor-list { display: flex; flex-direction: column; gap: var(--space-3); }
.vendor-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  padding-right: var(--space-8);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.vendor-row__remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.vendor-row__remove:hover { color: var(--color-error); background: var(--color-surface-offset); }
.vendor-row__remove.is-locked { visibility: hidden; }

/* Material cost block with the MSRP/Discounted toggle. */
.vendor-row__cost { display: flex; flex-direction: column; gap: var(--space-1); }
.vendor-row__cost-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.vendor-row__flipped {
  margin: 0;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Two-segment pill toggle (Discounted ↔ MSRP). */
.cost-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  gap: 3px;
  flex-shrink: 0;
}
.cost-toggle__opt {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 14px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.75;
}
.cost-toggle__opt:hover:not(.is-active) {
  color: var(--color-text);
  opacity: 1;
}
.cost-toggle__opt.is-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  opacity: 1;
}
.cost-toggle__opt:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ─── Warranty tiers editor ─── */
.tier-list { display: flex; flex-direction: column; gap: var(--space-2); }
.tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

/* Spec 06 UX — address autocomplete popover. Anchored to the address
   field wrapper; the wrapper is position:relative so the absolute
   dropdown lines up under the input. */
.addr-field { position: relative; }
.addr-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 4px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  max-height: 260px;
  overflow-y: auto;
}
.addr-suggest__item {
  padding: 10px 12px;
  font-size: var(--text-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--color-divider, transparent);
  line-height: 1.35;
}
.addr-suggest__item:last-child { border-bottom: 0; }
.addr-suggest__item:hover,
.addr-suggest__item[aria-selected="true"] {
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
}
.addr-suggest__meta { color: var(--color-text-muted); font-size: 12px; margin-top: 2px; }

/* Spec 06 UX — Add-discount button. Matches .btn-addrow used inside the
   mobile wizard for Add-custom-item, so both classic and wizard views
   look the same. */
.btn-addrow {
  width: 100%;
  padding: var(--space-3);
  background: transparent;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg, 12px);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
}
.btn-addrow svg { width: 16px; height: 16px; }
.btn-addrow:hover { background: color-mix(in oklab, var(--color-primary) 8%, transparent); }

/* Spec 06 UX — discount rows have their own layout so they don't inherit
   .tier-row's rigid 3-col grid. Mobile-first: everything stacks; the
   Type/Amount pair sits side-by-side; the footer ("only if no financing"
   + Remove) sits below on its own row. Desktop (≥ 720px) opens up into a
   4-col grid with the label taking the widest track. */
.discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "type amount"
    "foot foot";
  gap: var(--space-3);
  align-items: end;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.discount-row__label  { grid-area: label; min-width: 0; }
.discount-row__type   { grid-area: type;  min-width: 0; }
.discount-row__amount { grid-area: amount; min-width: 0; }
.discount-row__foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.discount-row__nofin {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.discount-row__remove { flex: 0 0 auto; }
.discount-row .field__input { width: 100%; }

@media (min-width: 720px) {
  .discount-row {
    grid-template-columns: minmax(0, 2fr) 110px 140px auto;
    grid-template-areas:
      "label type amount foot";
  }
  .discount-row__foot { justify-content: flex-end; }
}

/* ─── Summary card (sticky) ─── */
.quote-summary {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quote-summary__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quote-summary__card--internal {
  background: var(--color-surface-offset);
  border-style: dashed;
}
/* v213 (2026-08-07 Chris) — Collapsible sidebar card. Uses <details>/<summary>
   so it works without JS; state is persisted in localStorage by
   wireInternalOnlyPersistence. The summary row is a compact eyebrow + chevron;
   collapsed height is ~1 row tall so the sidebar isn't dominated by internal
   numbers on every quote. */
.quote-summary__card--collapsible {
  padding: var(--space-3) var(--space-4);
  gap: 0;
}
.quote-summary__card--collapsible[open] {
  padding-bottom: var(--space-4);
  gap: var(--space-3);
}
.quote-summary__card-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  user-select: none;
}
.quote-summary__card-summary::-webkit-details-marker { display: none; }
.quote-summary__card-summary:focus-visible {
  outline: 2px solid var(--color-primary, #2b8fff);
  outline-offset: 2px;
  border-radius: 4px;
}
.quote-summary__card-summary-glyph {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: transform 120ms ease;
  transform: rotate(-90deg); /* points right when collapsed */
}
.quote-summary__card--collapsible[open] .quote-summary__card-summary-glyph {
  transform: rotate(0deg); /* points down when open */
}
.quote-summary__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.quote-summary__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.quote-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.quote-summary__row .lbl { color: var(--color-text-muted); }
.quote-summary__row .val {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.quote-summary__row--hero {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-2);
}
/* v214 (2026-08-07 Chris) — Stacked variant of quote-summary__row so we can
   show a small math/formula line beneath the main label+value row. Used by
   the Net profit % row inside the Internal Only card to make the fraction
   ($X / $Y = Z%) visible without needing the full math debug panel. */
.quote-summary__row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.quote-summary__row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.quote-summary__row-main .lbl { color: var(--color-text-muted); }
.quote-summary__row-main .val {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.quote-summary__row-math {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.4;
  text-align: right;
}
.quote-summary__row-math:empty {
  display: none;
}
.quote-summary__row--hero .lbl {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
}
.quote-summary__row--hero .val {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
.quote-summary__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ─── Temporary math-debug panel ───────────────────────────────────────
   Owner-facing diagnostic. Shows every variable and calculation the
   pricing engine performs on this quote. Not tokenised heavily on
   purpose — lives in the sidebar until we retire it. */
.math-debug {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-border, rgba(0,0,0,0.14));
  border-radius: var(--radius-md, 8px);
  background: color-mix(in oklab, var(--color-warning, #d19900) 6%, var(--color-surface, #fff));
}
.math-debug__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.math-debug__h {
  margin: 0;
  font-size: var(--text-md, 14px);
  font-weight: 600;
}
.math-debug__hint {
  margin: var(--space-1) 0 var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted, #6b6b66);
}
.math-debug__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.math-debug__group {
  border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
  padding-top: var(--space-2);
}
.math-debug__group:first-child { border-top: 0; padding-top: 0; }
.math-debug__group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #6b6b66);
  margin-bottom: var(--space-1);
}
.math-debug__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: baseline;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 2px 0;
}
.math-debug__row > .lbl {
  color: var(--color-text, #1a1a1a);
  white-space: pre-wrap;
  word-break: break-word;
}
.math-debug__row > .val {
  color: var(--color-primary, #01696f);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}
.math-debug__formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--color-text-muted, #6b6b66);
  padding-left: var(--space-2);
}
.math-debug-launcher {
  margin-top: var(--space-2);
  text-align: right;
}
.math-debug-launcher[hidden] { display: none; }
/* Cancel-quote button — subtle destructive tone so it reads as a bail-out
   action, not a peer of Save/Print. Sits at the bottom of the action stack,
   separated by a hairline so it doesn't get clicked by muscle-memory. */
.quote-summary__cancel {
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  color: var(--color-danger, #b04a3a);
  border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
  border-radius: 0;
  background: transparent;
}
.quote-summary__cancel:hover {
  color: var(--color-danger, #b04a3a);
  background: color-mix(in oklab, var(--color-danger, #b04a3a) 8%, transparent);
  border-top-color: var(--color-border, rgba(0,0,0,0.08));
}

.quote-savebanner {
  padding: var(--space-4);
  background: var(--color-success-highlight);
  border: 1px solid color-mix(in oklab, var(--color-success) 40%, transparent);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quote-savebanner__msg {
  font-size: var(--text-sm);
  color: var(--color-success);
  font-weight: 500;
}

/* ─── Inline RQS scoring panel on the Quote page ─── */
.quote-rqs {
  padding: var(--space-4);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quote-rqs__head { display: flex; flex-direction: column; gap: var(--space-1); }
.quote-rqs__h {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}
.quote-rqs__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}
.quote-rqs__field { display: flex; flex-direction: column; gap: var(--space-1); }

/* v151 (2026-08-04 Chris) — axis dropdown locked because its value came from
 * a template binding on an earlier step. Dim the field so it reads as
 * read-only, keep the pt value visible, and show the follow-up guidance
 * (which step to visit) directly under the disabled control. */
.quote-rqs__field.is-locked-by-binding { opacity: 0.85; }
.quote-rqs__field.is-locked-by-binding select[data-axis-key] {
  cursor: not-allowed;
  background-color: var(--surface-2, #f5f5f7);
  color: var(--text, currentColor);
  border-style: dashed;
}
.quote-rqs__field.is-locked-by-binding select[data-axis-key]:disabled {
  /* Some browsers grey out disabled text — keep it readable so the rep can
   * see WHAT was auto-picked. */
  color: var(--text, currentColor);
  -webkit-text-fill-color: var(--text, currentColor);
  opacity: 1;
}

/* v171 (Aug 2026, Chris) — traffic-light coloring for auto-selected RQS axes.
 * qRqsApplyBindingLocks() adds one of these three classes to the field wrapper
 * based on how the auto-picked option's points compare to the rest of the axis:
 *   is-bound-top      — selected option is the top score for that axis
 *   is-bound-positive — selected option scores > 0 but isn't the top
 *   is-bound-zero     — selected option scores 0 or negative
 * Colors are chosen to read as traffic-light semantics (green/yellow/red)
 * without overriding the base disabled/dimmed treatment. Opacity is lifted
 * back to 1 so the color reads clearly; the dashed border and lock hint
 * still communicate "read-only". */
.quote-rqs__field.is-locked-by-binding.is-bound-top {
  opacity: 1;
}
.quote-rqs__field.is-locked-by-binding.is-bound-top select[data-axis-key],
.quote-rqs__field.is-locked-by-binding.is-bound-top select[data-axis-key]:disabled {
  background-color: #e6f5ea;   /* green-50 */
  border-color: #2f9e44;       /* green-600 */
  color: #1b5e20;              /* green-900 */
  -webkit-text-fill-color: #1b5e20;
}
.quote-rqs__field.is-locked-by-binding.is-bound-positive {
  opacity: 1;
}
.quote-rqs__field.is-locked-by-binding.is-bound-positive select[data-axis-key],
.quote-rqs__field.is-locked-by-binding.is-bound-positive select[data-axis-key]:disabled {
  background-color: #fff8e1;   /* amber-50 */
  border-color: #d97706;       /* amber-600 */
  color: #8a5a00;              /* amber-900 */
  -webkit-text-fill-color: #8a5a00;
}
.quote-rqs__field.is-locked-by-binding.is-bound-zero {
  opacity: 1;
}
.quote-rqs__field.is-locked-by-binding.is-bound-zero select[data-axis-key],
.quote-rqs__field.is-locked-by-binding.is-bound-zero select[data-axis-key]:disabled {
  background-color: #fdecea;   /* red-50 */
  border-color: #d64545;       /* red-600 */
  color: #7a1f1f;              /* red-900 */
  -webkit-text-fill-color: #7a1f1f;
}
.quote-rqs__lock-hint {
  margin-top: var(--space-1);
  font-style: italic;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.quote-rqs__lock-hint__text::before {
  content: '\1F512  ';
}
.quote-rqs__lock-hint__btn {
  font-style: normal;
  white-space: nowrap;
  padding: 4px 10px;
  font-size: var(--text-xs);
  border-radius: 999px;
  border: 1px solid var(--border, #d0d0d5);
  background: var(--surface-1, #fff);
  color: var(--text, currentColor);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.quote-rqs__lock-hint__btn:hover {
  background: var(--surface-2, #f5f5f7);
  border-color: var(--border-strong, #b8b8bd);
}
.quote-rqs__lock-hint__btn:focus-visible {
  outline: 2px solid var(--accent, #2b8fff);
  outline-offset: 2px;
}
.quote-rqs__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* v213 (2026-08-07 Chris) — push the source chip to the right so it
     appears on top of the dropdown, right-aligned. */
  justify-content: space-between;
  flex-wrap: wrap;
}
/* v213 (2026-08-07 Chris) — Compact chip that replaces the long
   "Locked by … Go to Step N" hint on RQS axis dropdowns. Sits inline with
   the axis label on the right side, above the <select>. Clickable when the
   wizard is available so it still jumps back to the source step. */
.quote-rqs__source-chip {
  font-size: var(--text-xs);
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  background: var(--color-surface-offset, #f5f5f7);
  border: 1px solid var(--color-divider, #e5e5ea);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  line-height: 1.4;
  cursor: default;
}
button.quote-rqs__source-chip {
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
button.quote-rqs__source-chip:hover {
  background: var(--color-surface, #fff);
  border-color: var(--color-primary, #2b8fff);
  color: var(--color-primary, #2b8fff);
}
button.quote-rqs__source-chip:focus-visible {
  outline: 2px solid var(--color-primary, #2b8fff);
  outline-offset: 2px;
}
.quote-rqs__auto {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.quote-rqs__radios {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--color-text);
}
.quote-rqs__radios label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 18px;
  min-height: 42px;
  min-width: 120px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.quote-rqs__radios label:hover:not(:has(input[type="radio"]:checked)) {
  border-color: var(--color-primary);
  color: var(--color-text);
}
/* Hide the native radio circle but keep it in the DOM for a11y + JS. */
.quote-rqs__radios label input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
/* Selected pill — filled with the brand navy + gold ring. */
.quote-rqs__radios label:has(input[type="radio"]:checked) {
  background: #1E2A52;
  border-color: #1E2A52;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(244, 162, 42, 0.35);
}
.quote-rqs__radios label input[type="radio"]:focus-visible ~ * ,
.quote-rqs__radios label:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 42, 82, 0.25);
}
.quote-rqs__gm {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.quote-rqs__gm.quote-rqs__gm--weak {
  border-color: color-mix(in oklab, var(--color-error) 45%, transparent);
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.quote-rqs__gm.quote-rqs__gm--strong {
  border-color: color-mix(in oklab, var(--color-success) 45%, transparent);
  background: var(--color-success-highlight);
  color: var(--color-success);
}
/* Hard floor: GM < 30%. Stronger border weight than the soft --weak state
   so the company registers this as a rule, not just a warning. */
.quote-rqs__gm.quote-rqs__gm--floor {
  border-width: 2px;
  border-color: var(--color-error);
  font-weight: 600;
}
.quote-rqs__select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  font-family: inherit;
}
.quote-rqs__select:focus,
.quote-rqs__select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.quote-rqs__select.is-missing,
.quote-rqs__gm.is-missing {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px var(--color-error);
}
.quote-rqs__error {
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: 500;
  line-height: 1.4;
}

/* Vertical-driven axes container (Spec 04 follow-up). Renders one
   .quote-rqs__field per non-GM axis from the current vertical's formula. */
.quote-rqs__axes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Small helper text under each axis — the axis.hint from the registry. */
.quote-rqs__hint-small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* "up to +40" weight chip inside the axis label. Slate-neutral so it recedes
   until the user scans for it — the label itself carries the visual weight. */
.quote-rqs__weight {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* Formula name + "custom formula" badge row under the panel head. Shows which
   vertical's formula is scoring this quote so a mid-flow switch is obvious. */
.quote-rqs__formula {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}
.quote-rqs__formula-label {
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.quote-rqs__formula-name {
  color: var(--color-text);
  font-weight: 600;
}
.quote-rqs__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background: #F4A22A; /* SellWorthy orange, matches calc-page badge */
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Inline RQS result card, shown in place of the panel after Save & score */
.quote-rqs-result {
  /* v84 (2026-08-04 Chris) — breathing room above so the RQS preview card
     doesn't butt against the change-log note / actions block on Step 9. */
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: background 120ms ease, border-color 120ms ease;
}
/* Live preview — dashed border signals "not saved yet." Band tint below still
   applies so the company sees the score direction at a glance. */
.quote-rqs-result[data-mode="preview"] {
  border-style: dashed;
}
/* Band tint on the whole card. Red for destroy/toxic, gray/neutral for
   neutral, green for good/premium. Matches the highlight palette used by
   .action__score and .score-pill so tints read consistently across the app. */
.quote-rqs-result.band--destroy { background: var(--color-error-highlight);   border-color: var(--color-error); }
.quote-rqs-result.band--toxic   { background: var(--color-warning-highlight); border-color: var(--color-warning); }
.quote-rqs-result.band--neutral { background: var(--color-surface-offset);    border-color: var(--color-border); }
.quote-rqs-result.band--good    { background: var(--color-primary-highlight); border-color: var(--color-primary); }
.quote-rqs-result.band--premium { background: var(--color-success-highlight); border-color: var(--color-success); }
.quote-rqs-result__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.quote-rqs-result__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.quote-rqs-result__score {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.quote-rqs-result__band {
  font-size: var(--text-base);
  font-weight: 600;
}
.quote-rqs-result__band.band--destroy { color: var(--color-error); }
.quote-rqs-result__band.band--toxic   { color: var(--color-warning); }
.quote-rqs-result__band.band--neutral { color: var(--color-text-muted); }
.quote-rqs-result__band.band--good    { color: var(--color-primary); }
.quote-rqs-result__band.band--premium { color: var(--color-success); }
.quote-rqs-result__tip {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
}
.quote-rqs-result__worst {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.quote-rqs-result__worst strong {
  color: var(--color-text);
  font-weight: 600;
}
.quote-rqs-result__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ─── Saved-quotes list ─── */
.quote-list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.quote-list__empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  grid-column: 1 / -1;
}
.quote-list-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.quote-list-card__customer {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.quote-list-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.quote-list-card__price {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ─── Settings tab ─── */
.quote-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 900px;
}
.quote-settings__intro p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.quote-settings__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-2);
}

/* ─── PRINT ─── */
@media print {
  body { background: white; }
  header, nav, .app__nav, .app__header, .quote-page__tabs, .quote-form,
  .quote-summary__actions, .quote-savebanner, .quote-rqs, .quote-rqs-result, #toast, #mainNav,
  .page__head, .app-shell__head,
  [data-view]:not([data-view="quote"]),
  .quote-tab-panel:not(.is-active) { display: none !important; }
  .page__title, .page__lede { display: none !important; }

  .quote-layout { display: block !important; }
  .quote-summary { position: static !important; page-break-inside: avoid; }
  .quote-summary__card { border: 1px solid #999 !important; box-shadow: none !important; background: white !important; }

  .print-only { display: block !important; }
  .print-header {
    display: block !important;
    padding: 1rem 0;
    border-bottom: 2px solid #000;
    margin-bottom: 1rem;
  }
  .print-header h1 { font-size: 24pt; margin-bottom: 0.25rem; }
  .print-header .print-header__meta { color: #555; font-size: 10pt; }
  .print-customer {
    display: block !important;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ccc;
  }
  .print-customer dl { display: grid; grid-template-columns: 120px 1fr; gap: 0.25rem 1rem; }
  .print-customer dt { color: #555; font-weight: 500; }
  .print-customer dd { font-weight: 600; }
  @page { size: letter; margin: 0.5in; }
}
.print-only, .print-header, .print-customer { display: none; }

/* ─── Module badges strip ─────────────────────────────── */
.badges {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-5);
}
@media (max-width: 900px) {
  .badges { gap: var(--space-2); }
}
@media (max-width: 640px) {
  .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-4); }
}

.badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-text);
  text-align: center;
  font: inherit;
  transition: transform 180ms ease;
}
.badge:hover { transform: translateY(-2px); }
.badge:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 12px;
}

.badge__frame {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.45);
}
@media (max-width: 640px) {
  .badge__frame { width: 84px; height: 84px; border-radius: 20px; }
}
.badge--earned .badge__frame {
  background-image: url("./assets/badge-earned.png");
}
.badge--earned .badge__frame::after {
  /* subtle glow behind earned badges */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.14), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.badge--locked .badge__frame {
  background-image: url("./assets/badge-locked.png");
}
.badge--current .badge__frame {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.badge__icon {
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.badge--locked .badge__icon {
  color: rgba(210, 210, 210, 0.35);
  filter: none;
}

.badge__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-text);
  max-width: 110px;
}
.badge--locked .badge__label { color: var(--color-text-muted); }

.badge__status {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.badge--earned .badge__status { color: var(--color-primary); }
.badge--current .badge__status { color: var(--color-primary); font-weight: 600; }

/* ─── Next-up hero card ───────────────────────────────── */
.nextup {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--color-primary) 10%, var(--color-surface)),
    var(--color-surface));
  border: 1px solid color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
  border-radius: 14px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: 0 4px 16px -10px color-mix(in oklab, var(--color-primary) 40%, transparent);
}
.nextup__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.nextup__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.nextup__lede {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.nextup__foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.nextup__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: var(--color-primary-contrast, #fff);
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.nextup__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px var(--color-primary);
}
.nextup__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* ─── Nudge modal (locked feature) ────────────────────── */
.nudge, .opoverride {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.nudge__backdrop, .opoverride__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 15, 20, 0.55);
  backdrop-filter: blur(6px);
}
.nudge__panel, .opoverride__panel {
  position: relative;
  max-width: 480px; width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: var(--space-6);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
  text-align: center;
}
.opoverride__panel { max-width: 560px; text-align: left; }
.nudge__close, .opoverride__close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0;
  font-size: 22px; line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer; padding: 4px 8px;
}
.nudge__badge {
  width: 96px; height: 96px;
  margin: 0 auto var(--space-3);
  border-radius: 22px;
  background: url("./assets/badge-locked.png") center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.nudge__badge svg { width: 44px; height: 44px; color: rgba(210,210,210,0.35); }
.nudge__eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-text-muted); font-weight: 600;
  margin-bottom: var(--space-2);
}
.nudge__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.nudge__lede {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.nudge__actions {
  display: flex; gap: var(--space-3);
  justify-content: center; flex-wrap: wrap;
}
.nudge__cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary);
  color: var(--color-primary-contrast, #fff);
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-sm); text-decoration: none;
}
.nudge__ghost, .opoverride__ghost {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 10px 18px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-sm); cursor: pointer;
}
.nudge__ghost:hover, .opoverride__ghost:hover {
  border-color: var(--color-text);
}

/* ─── Operator override panel ─────────────────────────── */
.opoverride__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.opoverride__lede {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}
.opoverride__list {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.opoverride__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: 10px;
}
.opoverride__row-title {
  flex: 1; font-weight: 500; font-size: var(--text-sm);
}
.opoverride__row-controls {
  display: flex; gap: var(--space-2);
}
.opoverride__pill {
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
}
.opoverride__pill.is-on {
  background: var(--color-primary);
  color: var(--color-primary-contrast, #fff);
  border-color: var(--color-primary);
}
.opoverride__actions {
  display: flex; justify-content: flex-end; gap: var(--space-3);
}
.opoverride__cta {
  background: var(--color-primary);
  color: var(--color-primary-contrast, #fff);
  border: 0;
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-sm); cursor: pointer;
}

.nav-btn--coach {
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  border: 1px dashed color-mix(in oklab, var(--color-primary) 40%, var(--color-border));
}

/* Locked nav-btn styling (dim + lock badge before) */
.nav-btn.is-locked {
  opacity: 0.55;
  position: relative;
}
.nav-btn.is-locked::before {
  content: "🔒";
  margin-right: 6px;
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   MODULES · Sub-lesson container (Module 1)
   Mirrors sublesson-mockups/option-a-sidebar.html, ported to portal
   design tokens. Sidebar + main grid, video/quiz/worksheet blocks.
   ═══════════════════════════════════════════════════════════════ */

/* ── Baseline card (dashboard, shown when WS1 is null) ── */
/* v91 (2026-08-06 Chris — "when it does show the spacing is off"):
   the title was rendering at --text-xl (clamps up to 36px), way oversized
   for a card CTA, and the <h2> default UA margins were stacking on top of
   the explicit margin-bottom on eyebrow/title/lede — squeezing the CTA
   against the bottom edge and leaving the title feeling cramped between
   eyebrow and lede. Retuned: tighter title (text-lg, up to 24px), explicit
   margin reset on the h2 so only our tokens control vertical rhythm, more
   generous vertical padding, and a bit more air between each block. */
.baseline-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  margin-bottom: var(--space-6);
}
.baseline-card__eyebrow {
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
.baseline-card__title {
  font-size: var(--text-lg);
  line-height: 1.25;
  font-weight: 700;
  /* Reset UA h2 margins so only our tokens drive spacing. */
  margin: 0 0 var(--space-2);
}
.baseline-card__lede {
  color: var(--color-text-muted);
  max-width: 58ch;
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}
.baseline-card__foot { margin: 0; }
.baseline-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
}
.baseline-card__cta:hover { background: var(--color-primary-hover); }

/* ── Module shell: sidebar + main ── */
.module-shell {
  max-width: var(--content-wide, 1400px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-10);
  padding: var(--space-4) 0 var(--space-16);
}
@media (max-width: 900px) {
  .module-shell {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ── Sidebar ── */
.m-sidebar {
  position: sticky;
  top: var(--space-6);
  align-self: start;
}
@media (max-width: 900px) {
  .m-sidebar { position: static; }
}
.m-sidebar__eyebrow {
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.m-sidebar__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
  line-height: 1.2;
}
.m-sidebar__progress {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}
.m-sidebar__progress-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
  overflow: hidden;
}
.m-sidebar__progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.m-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* On mobile: keep the sub-lesson list stacked vertically so it reads like a
   normal outline. Full-width, tap-friendly items. */
@media (max-width: 900px) {
  .m-sidebar__list {
    flex-direction: column;
    gap: var(--space-1);
  }
  .m-sidebar__item {
    width: 100%;
    padding: var(--space-3) var(--space-4);
  }
}
.m-sidebar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition-interactive, 0.12s);
  cursor: pointer;
  border: 1px solid transparent;
  text-align: left;
  background: transparent;
  width: 100%;
  font: inherit;
}
.m-sidebar__item:hover:not(.is-locked) { background: var(--color-surface); }
.m-sidebar__item.is-current {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.m-sidebar__item.is-locked {
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.m-sidebar__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--color-border);
  color: var(--color-text-muted);
}
.is-current .m-sidebar__num {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.is-complete .m-sidebar__num {
  background: var(--color-success);
  color: var(--color-text-inverse);
}
.m-sidebar__label {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.m-sidebar__lesson-name {
  font-size: var(--text-sm);
  font-weight: 500;
}
.m-sidebar__lesson-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.m-sidebar__lock {
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* ── Main content ── */
.m-main { min-width: 0; }
.m-lesson__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.m-lesson__eyebrow {
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.m-lesson__title {
  font-size: var(--text-2xl);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}
.m-lesson__lede {
  color: var(--color-text-muted);
  max-width: 62ch;
  font-size: var(--text-base);
}

/* ── Lesson blocks (video / quiz / worksheet) ── */
.lesson-block { margin-bottom: var(--space-10); }
.lesson-block__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.lesson-block__label-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  letter-spacing: 0;
  flex-shrink: 0;
}
.lesson-block.is-locked .lesson-block__label-num {
  background: var(--color-border);
  color: var(--color-text-muted);
}
.lesson-block.is-complete .lesson-block__label-num { background: var(--color-success); }

/* ── Video block ── */
.video-frame {
  background: #0f172a;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-frame__play {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}
.video-frame__caption {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  background: rgba(0, 0, 0, 0.6);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.watch-confirm {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.watch-confirm__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.watch-confirm__done {
  color: var(--color-success);
  font-weight: 600;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Locked block placeholder ── */
.block-locked {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}
.block-locked__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
  opacity: 0.6;
}

/* ── Quiz ── */
.quiz {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.quiz__q { margin-bottom: var(--space-6); }
.quiz__q:last-of-type { margin-bottom: 0; }
.quiz__q-text {
  font-weight: 600;
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
.quiz__q-num { color: var(--color-primary); margin-right: var(--space-2); }
.quiz__opts { display: flex; flex-direction: column; gap: var(--space-2); }
.quiz__opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-bg);
  transition: border-color 0.12s, background 0.12s;
}
.quiz__opt:hover { border-color: var(--color-primary); }
.quiz__opt input { margin-top: 3px; flex-shrink: 0; }
.quiz__opt.is-wrong {
  border-color: var(--color-error);
  background: var(--color-error-highlight);
}
.quiz__opt.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-highlight);
}
.quiz__short textarea {
  width: 100%;
  min-height: 90px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  resize: vertical;
}
.quiz__short textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}
.quiz__short-tag {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  margin-left: var(--space-2);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.quiz__foot {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.quiz__msg { font-size: var(--text-sm); font-weight: 600; }
.quiz__msg.is-fail { color: var(--color-error); }
.quiz__msg.is-pass { color: var(--color-success); }
.quiz__retake-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
}

/* Collapsed "passed" state — replaces the full quiz form once the user has
   passed, so they don't keep trying to re-answer. */
.quiz-passed {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
  border-radius: var(--radius-md);
}
.quiz-passed__badge {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-success);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 18px;
}
.quiz-passed__body { flex: 1 1 auto; min-width: 0; }
.quiz-passed__title { font-weight: 600; color: var(--color-text); }
.quiz-passed__sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }

/* ── Worksheet form ── */
.ws-form { max-width: 640px; }
.ws-form--wide { max-width: 100%; }
.ws-purpose {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.ws-purpose h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.ws-purpose p { margin: 0 0 var(--space-3); color: var(--color-text); }
.ws-purpose ol { margin: 0; padding-left: var(--space-5); color: var(--color-text); }
.ws-purpose li { margin-bottom: var(--space-2); }
.ws-form__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ws-form textarea {
  min-height: 90px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  resize: vertical;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ws-form input[type='number'] {
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  width: 100%;
}
.ws-form textarea:focus,
.ws-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}
.ws-form__foot {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ws-form__saved {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.ws-form__error {
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ── WS1 service-liability radio block ── */
.ws1-liability {
  border: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}
.ws1-liability legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-weight: 600;
  color: var(--color-text);
}
.ws1-liability__opts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ws1-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.ws1-opt:hover { border-color: var(--color-text-muted); }
.ws1-opt input[type='radio'] { margin: 0; flex: 0 0 auto; accent-color: var(--color-accent); }
.ws1-opt__text { color: var(--color-text); line-height: 1.4; }
.ws1-opt:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

/* ── WS1 current-answer card + history timeline ── */
.ws1-current {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-success-bg, rgba(16, 129, 96, 0.08));
  border: 1px solid var(--color-success, #108160);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.ws1-current__badge {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--color-success, #108160);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: var(--text-base);
}
.ws1-current__eyebrow {
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.ws1-current__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
  margin-bottom: var(--space-1);
}
.ws1-current__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.ws1-history { margin-top: var(--space-6); }
.ws1-history__title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.ws1-history__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.ws1-history__list::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--color-border);
}
.ws1-history__item {
  position: relative;
  padding-left: var(--space-6);
  padding-bottom: var(--space-4);
}
.ws1-history__dot {
  position: absolute;
  left: 0; top: 4px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
}
.ws1-history__item.is-current .ws1-history__dot {
  background: var(--color-success, #108160);
  border-color: var(--color-success, #108160);
}
.ws1-history__when {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.ws1-history__what {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.35;
}
.ws1-history__note {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.4;
}

/* ── WS2 revenue-type buckets (radios grouped by type) ── */
.ws2-types {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
}
.ws2-type {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  margin: 0;
}
.ws2-type__legend {
  padding: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ws2-type__label {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-base);
}
.ws2-type__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.ws2-type__opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}
.ws2-opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  min-height: 44px;
}
.ws2-opt:hover { border-color: var(--color-text-muted); }
.ws2-opt input[type='radio'] { margin: 0; flex: 0 0 auto; accent-color: var(--color-accent); }
.ws2-opt__text { color: var(--color-text); font-size: var(--text-sm); line-height: 1.3; }
.ws2-opt:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}
@media (max-width: 640px) {
  .ws2-type__opts { grid-template-columns: 1fr 1fr; }
}

/* ── Coach-view bypass banner ──
   Amber-toned notice shown at the top of any sub-lesson a coach is viewing
   that a regular company wouldn't yet have access to. Deliberately distinct
   from the company's normal palette so it can't be mistaken for course content. */
.coach-bypass-banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  border: 1px solid #d97706;
  border-radius: var(--radius-md);
  background: #fef3c7;
  color: #78350f;
  font-size: var(--text-sm);
  line-height: 1.5;
}
[data-theme='dark'] .coach-bypass-banner {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  color: #fde68a;
}
.coach-bypass-banner__icon {
  font-size: 1.1em;
  line-height: 1.4;
  flex-shrink: 0;
}
.coach-bypass-banner__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.coach-bypass-banner__body strong {
  font-weight: 600;
}

/* ── Collapsed worksheet form pattern ──
   When a company has already answered, we hide the form and show only the
   "Update my answer" toggle button. Clicking expands the form with fresh
   inputs. The button itself is a large secondary button that reads as an
   action (matches submit-button styling in the expanded state). */
.ws-collapsible--collapsed {
  margin-top: var(--space-6);
}

/* ── WS2 → first month log bridge card ── */
.ws2-bridge {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-primary-highlight);
}
.ws2-bridge__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.ws2-bridge__title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--color-text);
}
.ws2-bridge__lede {
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-5) 0;
}
.ws2-bridge__choice {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ws2-bridge__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 640px) {
  .ws2-bridge__grid { grid-template-columns: 1fr; }
}
.ws2-bridge__foot {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.ws2-bridge__hint {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.ws2-bridge--done,
.ws2-bridge--skipped {
  border-left-color: var(--color-text-muted);
  background: var(--color-surface-offset);
}

/* ── WS6 scoring rows ── */
.ws6-rows { display: flex; flex-direction: column; gap: var(--space-5); }
.ws6-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface);
}
.ws6-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.ws6-row__title { font-weight: 600; }
.ws6-row__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .ws6-row__grid { grid-template-columns: 1fr; }
}
.ws6-row__field { display: flex; flex-direction: column; gap: var(--space-2); }
.ws6-row__field label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.ws6-row__field select,
.ws6-row__field input[type='text'] {
  min-height: 44px;
  padding: 0 var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  width: 100%;
}
.ws6-row__radios { display: flex; gap: var(--space-4); }
.ws6-row__radios label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 400;
  cursor: pointer;
}
.ws6-row__score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}
.ws6-row__score-val { font-size: var(--text-xl); font-weight: 700; }
.ws6-band {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-sm);
  color: #fff;
}
.ws6-band--A { background: #10b981; }
.ws6-band--B { background: #3b82f6; }
.ws6-band--C { background: #f59e0b; }
.ws6-band--D { background: #ef4444; }
.ws6-row__worst {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* ── Footer nav ── */
.m-lesson__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.m-lesson__foot button {
  background: none;
  border: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-2) 0;
}
.m-lesson__foot button:hover { text-decoration: underline; }
.m-lesson__foot button:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  text-decoration: none;
}

/* ─── Settings tabs (Vendors / Labor & Travel / Fees & Warranty / Customer Fields) ─── */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  margin-bottom: var(--space-5);
}
.settings-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}
.settings-tab:hover:not(.is-active) { color: var(--color-text); }
.settings-tab.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.settings-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ─── Default vendor slots editor ─── */
.vendor-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.vendor-slot {
  display: grid;
  grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: end;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
}
.vendor-slot__num {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  padding-bottom: 10px;
}
.vendor-slot .field { margin: 0; }
.vendor-slot .field__label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 640px) {
  .vendor-slot {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "num  num"
      "name name"
      "disc tax";
  }
  .vendor-slot__num  { grid-area: num; padding-bottom: 0; }
  .vendor-slot__name { grid-area: name; }
  .vendor-slot__disc { grid-area: disc; }
  .vendor-slot__tax  { grid-area: tax; }
}

/* ─── Editing an existing quote — banner ─── */
.edit-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4) 0;
  border: 1px solid var(--color-primary);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-text);
  font-size: var(--text-sm);
}
.edit-banner[hidden] { display: none; }
.edit-banner__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.edit-banner__body strong { color: var(--color-primary); font-weight: 600; }
.edit-banner__body span { color: var(--color-text-muted); }
.edit-banner__actions { display: flex; gap: var(--space-2); flex-shrink: 0; align-items: center; }

/* v68: v-chip on the classic edit-banner. Inline with the title row so reps
 * see the current version alongside the quote name they're editing. */
.edit-banner__titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edit-banner__vchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  background: #f0f7ff;
  color: #1a5fb4;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.edit-banner__vchip:hover { background: #dbeaff; border-color: rgba(0,0,0,0.28); }
.edit-banner__vchip:focus-visible { outline: 2px solid #1a5fb4; outline-offset: 2px; }
.edit-banner__vchip[hidden] { display: none; }

/* v71 (Spec 09 Wave 2): v-chip on My Quotes list rows. Same visual language as
 * the edit-banner chip so the metaphor stays consistent. Sits inline in the
 * Project column between type and reason/stage-strip. */
.qtable__vchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  background: #f0f7ff;
  color: #1a5fb4;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
  vertical-align: middle;
}
.qtable__vchip:hover { background: #dbeaff; border-color: rgba(0,0,0,0.28); }
.qtable__vchip:focus-visible { outline: 2px solid #1a5fb4; outline-offset: 2px; }

/* v71: Restore-this-version button lives in the drawer detail-head. */
.qb-history__detail-actions { margin-top: 8px; }

/* More ▾ dropdown inside the Editing banner. Anchors below the trigger. */
.edit-banner__more { position: relative; }
.edit-banner__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e0ded6);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 4px;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.edit-banner__menu[hidden] { display: none; }
.edit-banner__menuitem {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--color-text, #28251d);
  cursor: pointer;
  border-radius: 6px;
}
.edit-banner__menuitem:hover,
.edit-banner__menuitem:focus-visible {
  background: var(--color-bg, #f7f6f2);
  outline: none;
}

/* ─── Split hero: Quoted vs Won RQS ─── */
.dash-hero--split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
.dash-hero--split .dash-hero__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.dash-hero--split .dash-hero__side .dash-hero__label,
.dash-hero--split .dash-hero__side .dash-hero__row,
.dash-hero--split .dash-hero__side .dash-hero__foot { min-width: 0; }
.dash-hero__divider {
  width: 1px;
  background: var(--color-border);
  align-self: stretch;
}
.dash-hero__gap {
  grid-column: 1 / -1;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}
.dash-hero__gap[hidden] { display: none; }
.dash-hero__gap--good {
  background: color-mix(in oklab, var(--color-success) 12%, var(--color-surface));
  color: var(--color-success);
  border: 1px solid color-mix(in oklab, var(--color-success) 40%, transparent);
}
.dash-hero__gap--warn {
  background: color-mix(in oklab, var(--color-warning) 12%, var(--color-surface));
  color: var(--color-warning);
  border: 1px solid color-mix(in oklab, var(--color-warning) 40%, transparent);
}
@media (max-width: 720px) {
  .dash-hero--split {
    grid-template-columns: 1fr;
  }
  .dash-hero__divider {
    width: auto;
    height: 1px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   Spec 04 commit 3 — Coach Admin (formula defaults editor)
   ═════════════════════════════════════════════════════════════════════════ */

.ca-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ca-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
}
.ca-title { margin: 0 0 4px; font-size: 26px; font-weight: 700; color: var(--text-strong, #1E2A52); }
.ca-sub   { margin: 0; max-width: 560px; color: var(--text-muted, #5b6478); font-size: 14px; line-height: 1.5; }

.ca-vertical-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ca-chip {
  appearance: none;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  background: var(--surface-card, #fff);
  color: var(--text-strong, #1E2A52);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ca-chip:hover { border-color: #F4A22A; }
.ca-chip.is-active {
  background: #1E2A52;
  border-color: #1E2A52;
  color: #FAFAF7;
}
.ca-chip__version {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(30,42,82,0.10);
  color: inherit;
}
.ca-chip.is-active .ca-chip__version { background: rgba(250,250,247,0.20); }

.ca-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .ca-body { grid-template-columns: 1fr; }
}

.ca-editor {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-radius: 14px;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ca-loading, .ca-error {
  padding: 32px 20px;
  color: var(--text-muted, #5b6478);
  text-align: center;
}
.ca-error { color: #B4321F; }

.ca-meta__row {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.ca-meta__version {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted, #5b6478);
}
.ca-meta__version strong { color: var(--text-strong, #1E2A52); font-weight: 600; }

.ca-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.ca-field--tight { min-width: 100px; }
.ca-field__label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted, #5b6478); text-transform: uppercase; }
.ca-field__hint  { font-size: 11px; color: var(--text-muted, #5b6478); line-height: 1.4; }
.ca-field input {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.20));
  border-radius: 8px;
  background: var(--surface-input, #fff);
  color: var(--text-strong, #1E2A52);
}
.ca-field input:focus {
  outline: 2px solid rgba(244,162,42,0.35);
  border-color: #F4A22A;
}

.ca-axes {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ca-axis {
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-radius: 12px;
  padding: 16px 16px 14px;
  background: var(--surface-muted, rgba(30,42,82,0.03));
}
.ca-axis__header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: end;
  margin-bottom: 12px;
}
.ca-axis__idcol { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ca-axis__weightcol { display: flex; flex-direction: column; gap: 6px; }
.ca-axis__range { font-size: 12px; color: var(--text-muted, #5b6478); }
.ca-axis__range strong { color: var(--text-strong, #1E2A52); font-weight: 600; }

.ca-options {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.ca-options thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted, #5b6478);
  text-transform: uppercase;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
}
.ca-options tbody td {
  padding: 6px 8px;
  vertical-align: middle;
}
.ca-options tbody tr + tr td { border-top: 1px dashed var(--border-subtle, rgba(30,42,82,0.10)); }
.ca-options input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  border-radius: 6px;
  background: #fff;
  color: var(--text-strong, #1E2A52);
}
.ca-options .ca-num { width: 90px; text-align: right; }
.ca-options .ca-num input { text-align: right; }
.ca-options tbody tr td:last-child { width: 40px; text-align: right; }

.ca-btn-icon {
  appearance: none;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  background: #fff;
  color: var(--text-muted, #5b6478);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 18px;
  cursor: pointer;
}
.ca-btn-icon:hover { background: #FFF3E4; color: #B4321F; border-color: #F4A22A; }

.ca-btn-ghost {
  appearance: none;
  border: 1px dashed var(--border-subtle, rgba(30,42,82,0.30));
  background: transparent;
  color: var(--text-strong, #1E2A52);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  margin-top: 10px;
}
.ca-btn-ghost:hover { border-color: #F4A22A; color: #F4A22A; }
.ca-btn-danger { color: #B4321F; }

.ca-axis-actions {
  display: flex;
  gap: 10px;
}

/* Preview column */
.ca-preview {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ca-preview-card {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-top: 4px solid var(--band-color, #888);
  border-radius: 12px;
  padding: 18px 18px 20px;
}
.ca-preview-title {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted, #5b6478);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ca-preview-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-numeric, "General Sans", ui-sans-serif, sans-serif);
}
.ca-preview-score__num { font-size: 48px; font-weight: 700; color: var(--text-strong, #1E2A52); line-height: 1; }
.ca-preview-score__ceiling { font-size: 20px; color: var(--text-muted, #5b6478); }
.ca-preview-band { font-size: 14px; font-weight: 600; color: var(--band-color, #1E2A52); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; }
.ca-preview-axes {
  list-style: none;
  padding: 12px 0 0;
  margin: 10px 0 0;
  border-top: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ca-preview-axes li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted, #5b6478);
}
.ca-preview-axes strong { color: var(--text-strong, #1E2A52); font-weight: 600; }
.ca-preview-floor { margin-top: 12px; padding: 8px 10px; background: #FFF3E4; border-radius: 6px; color: #B4321F; font-size: 12px; }
.ca-preview-note { font-size: 11px; color: var(--text-muted, #5b6478); line-height: 1.5; padding: 0 4px; }

/* Footer */
.ca-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  flex-wrap: wrap;
}
.ca-footer-note { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted, #5b6478); font-size: 13px; }
.ca-dirty-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F4A22A;
  box-shadow: 0 0 0 3px rgba(244,162,42,0.18);
}
.ca-footer-actions { display: flex; gap: 10px; }

/* Version history */
.ca-history { border: 1px solid var(--border-subtle, rgba(30,42,82,0.10)); border-radius: 12px; padding: 12px 16px; background: var(--surface-card, #fff); }
.ca-history > summary { cursor: pointer; font-weight: 600; color: var(--text-strong, #1E2A52); padding: 6px 0; }
.ca-history-body { padding-top: 10px; }
.ca-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ca-history-table th, .ca-history-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.06)); }
.ca-history-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #5b6478); font-weight: 600; }
.ca-history-note { color: var(--text-muted, #5b6478); }
.ca-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ca-badge--active { background: #E6F5EF; color: #1E7F5A; }

/* ═════════════════════════════════════════════════════════════════════════
   Spec 04 commit 4 — Company Admin (owner-only formula editor)
   Reuses the .ca-* visual language from the coach admin but with its own
   .cad-* namespace to allow subtle differences (e.g., no "publish new version"
   footer, per-field coach-default references, danger reset flows).
   ═════════════════════════════════════════════════════════════════════════ */

/* Shell + header */
.cad-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cad-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cad-title { font-size: 24px; font-weight: 700; color: var(--text-strong, #1E2A52); margin: 0 0 4px; }
.cad-sub { color: var(--text-muted, #5b6478); font-size: 14px; max-width: 640px; margin: 0; }

/* Tabs (Edit vs Reset) */
.cad-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-subtle, #F1F1EC); position: relative; }

/* Desktop: wrapper is inline so it doesn't disrupt the parent flow around the
   tab bar. Mobile media query below flips it to block + relative-positioned. */
.cad-tabs-shell { display: inline-block; }

/* v231 — admin-tab hamburger. Mirrors .nav-toggle (main header) so mobile
   admin pages read the same way as the main nav. Injected via JS as a sibling
   of every .cad-tabs bar; hidden on desktop, revealed ≤720px, and when open
   toggles [data-open] on the sibling .cad-tabs (which becomes a dropdown
   panel via the media query below). */
.cad-tabs-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-subtle, #F1F1EC);
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.14));
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-strong, #1E2A52);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  width: 100%;
  justify-content: space-between;
  text-align: left;
}
.cad-tabs-toggle:hover { background: var(--surface-card, #fff); }
.cad-tabs-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.cad-tabs-toggle__bar {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 140ms ease;
}
.cad-tabs-toggle[aria-expanded="true"] .cad-tabs-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.cad-tabs-toggle[aria-expanded="true"] .cad-tabs-toggle__bar:nth-child(2) {
  opacity: 0;
}
.cad-tabs-toggle[aria-expanded="true"] .cad-tabs-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.cad-tabs-toggle__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cad-tabs-toggle__caret {
  width: 12px;
  height: 12px;
  transition: transform 180ms ease;
  color: var(--text-muted, #5b6478);
}
.cad-tabs-toggle[aria-expanded="true"] .cad-tabs-toggle__caret {
  transform: rotate(180deg);
}

@media (max-width: 720px) {
  /* Show the hamburger button; collapse .cad-tabs into a dropdown panel. */
  .cad-tabs-toggle { display: inline-flex; }

  .cad-tabs {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-subtle, rgba(30,42,82,0.14));
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 40;
  }
  .cad-tabs[data-open] { display: flex; }

  .cad-tabs .cad-tab {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 8px;
  }

  /* The wrapper that holds the tabs bar + its toggle needs position:relative
     so the absolutely-positioned .cad-tabs panel anchors to it. Marked by JS. */
  .cad-tabs-shell {
    position: relative;
    display: block;
    width: 100%;
  }
}
.cad-tab {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted, #5b6478);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cad-tab:hover { color: var(--text-strong, #1E2A52); }
.cad-tab.is-active { background: var(--surface-card, #fff); color: var(--text-strong, #1E2A52); box-shadow: 0 1px 2px rgba(30,42,82,0.08); }

.cad-panel { display: flex; flex-direction: column; gap: 16px; }

/* Vertical chips (Edit tab) */
.cad-vertical-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cad-chip {
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.14));
  background: var(--surface-card, #fff);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong, #1E2A52);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s;
}
.cad-chip:hover { border-color: #F4A22A; }
.cad-chip.is-active { background: var(--color-primary); color: #FAFAF7; border-color: var(--color-primary); }
.cad-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: #F4A22A; box-shadow: 0 0 0 3px rgba(244,162,42,0.20); }
.cad-chip.is-active .cad-chip__dot { box-shadow: 0 0 0 3px rgba(250,250,247,0.30); }

/* Editor pane */
.cad-editor {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cad-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cad-editor__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #5b6478); }
.cad-editor__title { font-size: 20px; font-weight: 700; color: var(--text-strong, #1E2A52); margin: 4px 0 0; }

/* No-override preview (before Clone) */
.cad-no-override {
  padding: 8px 4px;
}
.cad-no-override__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(30,42,82,0.08);
  color: var(--text-strong, #1E2A52);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.cad-no-override__title { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--text-strong, #1E2A52); }
.cad-no-override__sub { color: var(--text-muted, #5b6478); margin: 0 0 18px; max-width: 640px; }
.cad-no-override__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 20px; }
.cad-no-override__meta > div { padding: 10px 12px; background: var(--surface-subtle, #F5F5F0); border-radius: 10px; }
.cad-no-override__meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #5b6478); font-weight: 600; margin: 0 0 4px; }
.cad-no-override__meta dd { margin: 0; color: var(--text-strong, #1E2A52); font-weight: 600; }

/* Editor blocks */
.cad-block {
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.08));
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface-subtle, #FAFAF7);
}
.cad-block__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.cad-block__title { font-size: 15px; font-weight: 700; color: var(--text-strong, #1E2A52); margin: 0; }
.cad-block__sub { font-size: 12px; color: var(--text-muted, #5b6478); margin: 4px 0 0; }

.cad-field { display: flex; flex-direction: column; gap: 4px; }
.cad-field__label { font-size: 11px; font-weight: 600; color: var(--text-muted, #5b6478); text-transform: uppercase; letter-spacing: 0.04em; }
.cad-field__input-wrap { display: inline-flex; align-items: center; gap: 10px; }
.cad-field__input-wrap--tight { gap: 6px; }
.cad-field__input-wrap input[type="number"] {
  width: 96px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.20));
  border-radius: 6px;
  background: var(--surface-card, #fff);
  color: var(--text-strong, #1E2A52);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}
.cad-field__input-wrap input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}

/* Coach-default reference chip next to each editable field */
.cad-field__ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #5b6478);
  padding: 4px 8px;
  border-radius: 6px;
  background: transparent;
}
.cad-field__ref strong { color: var(--text-strong, #1E2A52); font-weight: 700; }
.cad-field__ref.is-diff { background: rgba(244,162,42,0.10); color: #8f5a10; }
.cad-field__ref.is-diff strong { color: #6b4210; }

.cad-restore {
  border: none;
  background: transparent;
  color: #F4A22A;
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}
.cad-restore:hover { color: #d18514; }

/* Options table (inside each axis block) */
.cad-opts { margin-top: 8px; }
.cad-opts__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cad-opts__table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #5b6478);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
}
.cad-opts__table td { padding: 8px; border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.06)); vertical-align: middle; }
.cad-opts__table tr:last-child td { border-bottom: none; }
.cad-opt__label { color: var(--text-strong, #1E2A52); font-weight: 500; }
.cad-opt__value code { font-size: 12px; padding: 1px 5px; background: rgba(30,42,82,0.06); border-radius: 4px; color: var(--text-muted, #5b6478); }
.cad-opt__points { text-align: right; }
.cad-opt__points .cad-field__input-wrap { justify-content: flex-end; }
.cad-opt__points input { width: 72px; text-align: right; }

/* Footer */
.cad-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4px 4px;
  flex-wrap: wrap;
}
.cad-footer-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted, #5b6478); }
.cad-dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: #F4A22A; box-shadow: 0 0 0 3px rgba(244,162,42,0.20); }
.cad-footer-actions { display: inline-flex; gap: 10px; }

/* Empty state */
.cad-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted, #5b6478);
  font-size: 14px;
  background: var(--surface-subtle, #F5F5F0);
  border-radius: 10px;
}

/* ── Reset tab ── */
.cad-reset-lede { max-width: 640px; }
.cad-reset-lede h3 { font-size: 16px; font-weight: 700; color: var(--text-strong, #1E2A52); margin: 0 0 6px; }
.cad-reset-lede p { color: var(--text-muted, #5b6478); font-size: 14px; margin: 0; }

.cad-reset-list { display: flex; flex-direction: column; gap: 10px; }
.cad-reset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  background: var(--surface-card, #fff);
  flex-wrap: wrap;
}
.cad-reset-row.has-override { border-color: rgba(244,162,42,0.35); background: color-mix(in oklab, #F4A22A 4%, var(--surface-card, #fff)); }
.cad-reset-row__label { font-weight: 700; font-size: 14px; color: var(--text-strong, #1E2A52); }
.cad-reset-row__sub { font-size: 12px; color: var(--text-muted, #5b6478); margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cad-reset-row__actions { display: inline-flex; gap: 8px; align-items: center; }
.cad-reset-row__nope { font-size: 12px; color: var(--text-muted, #5b6478); font-style: italic; }
.cad-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(30,42,82,0.08); color: var(--text-strong, #1E2A52);
}
.cad-badge--override { background: rgba(244,162,42,0.15); color: #8f5a10; }

.cad-reset-all {
  border: 1px solid rgba(200,50,60,0.20);
  background: rgba(200,50,60,0.04);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 8px;
}
.cad-reset-all h4 { margin: 0 0 4px; font-size: 14px; color: var(--text-strong, #1E2A52); font-weight: 700; }
.cad-reset-all p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted, #5b6478); }

/* Diff pane */
.cad-diff {
  margin-top: 12px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.14));
  border-radius: 12px;
  background: var(--surface-card, #fff);
  overflow: hidden;
}
.cad-diff__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.08)); background: var(--surface-subtle, #FAFAF7); }
.cad-diff__head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-strong, #1E2A52); }
.cad-diff__close { border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-muted, #5b6478); }
.cad-diff__body { padding: 8px 16px 16px; }
.cad-diff-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.06)); font-size: 13px; }
.cad-diff-row:last-child { border-bottom: none; }
.cad-diff-row--head { font-weight: 700; color: var(--text-muted, #5b6478); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.14)); }
.cad-diff-row__field { color: var(--text-strong, #1E2A52); font-weight: 500; }
.cad-diff-row__coach { color: var(--text-muted, #5b6478); }
.cad-diff-row__override { color: #8f5a10; font-weight: 700; }
.cad-diff-none { padding: 12px; color: var(--text-muted, #5b6478); font-style: italic; text-align: center; }

/* Calc-page override badge (Spec 04 commit 4e) */
.vertical-switcher__badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(244,162,42,0.15);
  color: #8f5a10;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Dark theme deltas */
[data-theme="dark"] .cad-block { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cad-editor { background: #1a1f36; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cad-tabs { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .cad-tab.is-active { background: #24293f; color: #F5F5F0; }
[data-theme="dark"] .cad-reset-row { background: #1a1f36; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cad-reset-row.has-override { background: color-mix(in oklab, #F4A22A 8%, #1a1f36); }
[data-theme="dark"] .cad-empty { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .cad-diff { background: #1a1f36; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cad-diff__head { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .cad-field__input-wrap input[type="number"] { background: #24293f; color: #F5F5F0; border-color: rgba(255,255,255,0.14); }
[data-theme="dark"] .cad-field__ref { color: rgba(245,245,240,0.60); }
[data-theme="dark"] .cad-field__ref strong { color: #F5F5F0; }
[data-theme="dark"] .cad-field__ref.is-diff { background: rgba(244,162,42,0.18); color: #F5C878; }
[data-theme="dark"] .cad-field__ref.is-diff strong { color: #F4A22A; }
[data-theme="dark"] .cad-opt__value code { background: rgba(255,255,255,0.08); color: rgba(245,245,240,0.75); }
[data-theme="dark"] .cad-diff-row__field { color: #F5F5F0; }
[data-theme="dark"] .cad-diff-row__override { color: #F4A22A; }

/* ────────────────────────────────────────────────────────────
   Spec 1 v2.6 Milestone 1 — The Why field
   ──────────────────────────────────────────────────────────── */
/* Header layout — put hint on its own line below the title */
[data-thewhy-card] .quote-card__h {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
[data-thewhy-card] .quote-card__h .quote-card__hint {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0;
}
.the-why-body { display: flex; flex-direction: column; gap: var(--space-2); }

/* Project description card (classic quote view — mirrors wizard Step 9).
   Template dropdown + editable customer-facing body. The Reset button
   shows when the dealer has edited the body away from the template's
   canonical text and lets them snap back. Status text on the left of
   the meta row signals "Loaded template X" / "Edited" / "Custom". */
.pdesc-body { display: flex; flex-direction: column; gap: var(--space-2); }
.pdesc-body #qPdescBody {
  resize: vertical;
  min-height: 132px;
  font: inherit;
  line-height: 1.5;
}
.pdesc-body #qPdescTemplate {
  font: inherit;
  padding-right: var(--space-4);
}
.pdesc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-height: 24px;
}
.pdesc-status:empty { display: none; }
.pdesc-status.is-edited { color: var(--color-warning); }
.pdesc-status.is-custom { color: var(--color-text-muted); font-style: italic; }
/* Fill-in-the-details sub-card (variables). Rendered as a subtle inset
   panel to visually connect it to the template dropdown above and the
   substituted body below — the reader flows top-down: pick template →
   fill fields → preview + edit body. */
.pdesc-vars {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset, var(--color-surface));
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pdesc-vars__head {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.pdesc-vars__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.pdesc-vars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-1);
}
.pdesc-vars__grid .field { margin: 0; }
.pdesc-vars__grid .field__label { font-size: var(--text-xs); }

/* ---- Line Items card v1 ---------------------------------------------
   Sits between Project description and Temperature. Renders a list of
   rows (one per attached template or blank line item) with a description
   textarea, optional variables panel, and qty/unit price inputs when the
   template is text_priced. Actions row lets the dealer add more.
-------------------------------------------------------------------- */
.lineitems-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.lineitems-list:empty { display: none; }
.lineitems-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm, 6px);
  text-align: center;
}
.lineitems-list:not(:empty) + .lineitems-empty { display: none; }
.lineitems-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.lineitem {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset, var(--color-surface));
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lineitem__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.lineitem__title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.lineitem__badge {
  font-size: var(--text-2xs, 10px);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lineitem__body textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  font: inherit;
  line-height: 1.5;
}
.lineitem__priced {
  display: grid;
  grid-template-columns: 100px 140px 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: end;
}
.lineitem__priced .field { margin: 0; }
.lineitem__priced .field__label { font-size: var(--text-xs); }
.lineitem__priced .lineitem__roll {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-bottom: 6px;
}
@media (max-width: 640px) {
  .lineitem__priced {
    grid-template-columns: 1fr 1fr;
  }
  .lineitem__priced .lineitem__roll { grid-column: 1 / -1; }
}
.the-why-input {
  resize: vertical;
  min-height: 84px;
  font: inherit;
  line-height: 1.45;
}
.the-why-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.the-why-count.is-near { color: var(--color-warning); }
.the-why-count.is-full { color: var(--color-error); font-weight: 600; }
.the-why-locked {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-style: italic;
}
/* AI "Clean up with AI" row under the textarea. Muted button so it feels
   secondary to the primary Save action further down. */
.the-why-ai {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.the-why-ai__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  color: var(--color-primary, #01696F);
  background: transparent;
  border: 1px solid var(--color-primary, #01696F);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.the-why-ai__btn:hover:not(:disabled) {
  background: var(--color-primary, #01696F);
  color: #fff;
}
.the-why-ai__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.the-why-ai__btn.is-loading {
  cursor: progress;
  opacity: 0.75;
}
.the-why-ai__btn.is-loading .the-why-ai__label::after {
  content: '…';
}
.the-why-ai__icon { font-size: 14px; }
.the-why-ai__undo {
  padding: 6px 10px;
  font-size: var(--text-xs, 12px);
  font-weight: 500;
  color: var(--color-text-muted, #7A7974);
  background: transparent;
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 6px;
  cursor: pointer;
}
.the-why-ai__undo:hover {
  color: var(--color-text, #28251D);
  border-color: var(--color-text-muted, #7A7974);
}
.the-why-ai__status {
  font-size: var(--text-xs, 12px);
  color: var(--color-text-muted, #7A7974);
}
.the-why-ai__status.is-error {
  color: var(--color-error, #A12C7B);
}
.the-why-coach {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset, var(--color-surface));
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.the-why-coach__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.the-why-coach__list {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}
.the-why-coach__list li + li { margin-top: var(--space-1); }
.the-why-coach__examples { display: flex; flex-direction: column; gap: var(--space-1); }
.the-why-coach__ex {
  border: 0;
  background: transparent;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background 0.12s ease;
}
.the-why-coach__ex:hover { background: rgba(1, 105, 111, 0.06); }
.the-why-coach__ex:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -1px; }

/* Save-empty soft prompt banner */
.the-why-prompt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(1, 105, 111, 0.06);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.the-why-prompt__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.the-why-prompt__btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text);
}
.the-why-prompt__btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ────────────────────────────────────────────────────────────
   Spec 1 v2.6 Milestone 1 — Activity / audit-log panel
   ──────────────────────────────────────────────────────────── */
.activity-panel {
  margin: var(--space-3) 0;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
}
.activity-panel__summary {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.activity-panel__summary::-webkit-details-marker { display: none; }
.activity-panel__summary::before {
  content: '▸';
  font-size: 0.7em;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.activity-panel[open] .activity-panel__summary::before { transform: rotate(90deg); }
.activity-panel__body {
  padding: var(--space-3) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.activity-panel__author {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.activity-panel__history {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.activity-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-offset, transparent);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm);
}
.activity-panel__transition { color: var(--color-text); }
.activity-panel__meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  text-align: right;
}
.activity-panel__note { color: var(--color-primary); font-style: italic; }
.activity-panel__empty { color: var(--color-text-muted); font-style: italic; padding: var(--space-2); }

/* ─────────────────────────────────────────────────────────────
   Company Admin › Integrations tab (GHL config card)
   ───────────────────────────────────────────────────────────── */
.cad-integrations {
  padding: var(--space-6) 0;
  display: grid;
  gap: var(--space-6);
  max-width: 720px;
}

.integ-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}

.integ-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.integ-card__head > div { flex: 1; min-width: 0; }
.integ-card__title {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
  color: var(--color-text);
}
.integ-card__lede {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.integ-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
}
.integ-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.integ-status[data-state="connected"] {
  background: var(--color-success-highlight);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.integ-status[data-state="partial"] {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.integ-status[data-state="off"] {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.integ-status[data-state="error"] {
  background: var(--color-error-highlight);
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}
.integ-status[data-state="loading"] { color: var(--color-text-faint); }

/* Coming-soon transports (Gmail, Office 365) — visually dimmed but present
   so dealers can see the roadmap. Cards are non-interactive. */
.integ-status[data-state="soon"] {
  background: color-mix(in oklab, var(--color-text-faint) 12%, transparent);
  color: var(--color-text-muted);
  border-color: color-mix(in oklab, var(--color-text-faint) 30%, transparent);
}
.integ-card--soon {
  opacity: 0.72;
  border-style: dashed;
}
.integ-card--soon:hover { opacity: 0.9; }

/* Integrations header — sets expectations for the whole tab */
.integ-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.integ-header__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px 0;
}
.integ-header__lede {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}

/* Inline card-title badges (previously "Recommended" / "Optional") were
   removed — SellWorthy doesn't rank transports. Whichever system the dealer
   already uses is the right one. Kept the classes deleted rather than
   orphaned so nothing accidentally regresses. */

.integ-row { display: grid; gap: var(--space-2); }
.integ-row--toggle {
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-divider);
}
.integ-row__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.4;
}
.integ-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.integ-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.integ-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.integ-input:disabled {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.integ-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
}

.integ-status-line {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-2);
}
.integ-status-line--ok {
  color: var(--color-success);
  background: var(--color-success-highlight);
}
.integ-status-line--err {
  color: var(--color-error);
  background: var(--color-error-highlight);
}

/* ─── Switch (checkbox styled as toggle) ─────────────────── */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}
.switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.switch__track {
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--color-surface-dynamic);
  border-radius: 999px;
  transition: background 180ms ease;
  border: 1px solid var(--color-border);
}
.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 180ms ease;
}
.switch input:checked + .switch__track {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.switch input:checked + .switch__track .switch__thumb {
  transform: translateX(20px);
}
.switch input:focus-visible + .switch__track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.switch input:disabled + .switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}
.switch__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

@media (max-width: 640px) {
  .integ-card { padding: var(--space-4); }
  .integ-card__head { flex-direction: column; align-items: stretch; }
  .integ-status { align-self: flex-start; }
  .integ-actions { flex-direction: column-reverse; }
  .integ-actions .btn { width: 100%; }
}

/* ── Integrations sub-tabs ──
   Second-level tab bar inside the Integrations panel. Visually lighter than
   the primary .cad-tabs so it reads as "sub-nav", not a peer of Edit/Integrations.
   Style: underlined pills with a subtle active state. */
.integ-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.integ-subtab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  margin-bottom: -1px; /* overlap the border so active-underline sits flush */
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.integ-subtab:hover { color: var(--color-text); }
.integ-subtab.is-active {
  color: var(--color-text);
  font-weight: 600;
  border-bottom-color: var(--color-primary, #01696F);
}
.integ-subtab:focus-visible {
  outline: 2px solid var(--color-primary, #01696F);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Active transport pill — the "Currently active" chip on a connected card.
   Uses the same base .integ-status shape but a stronger, success-tinted look
   so it reads clearly against the card. */
.integ-status[data-state="connected"] {
  background: color-mix(in oklab, var(--color-success, #437A22) 15%, transparent);
  color: var(--color-success, #437A22);
  border: 1px solid color-mix(in oklab, var(--color-success, #437A22) 35%, transparent);
}

/* Danger-quiet button variant — for destructive actions that shouldn't
   scream. Ghost outline with red text. Used by the per-vertical Reset. */
.btn.btn--danger-quiet {
  color: var(--color-error, #A12C7B);
  border-color: color-mix(in oklab, var(--color-error, #A12C7B) 30%, transparent);
}
.btn.btn--danger-quiet:hover {
  background: color-mix(in oklab, var(--color-error, #A12C7B) 8%, transparent);
  border-color: color-mix(in oklab, var(--color-error, #A12C7B) 50%, transparent);
}
.btn.btn--danger-quiet:focus-visible {
  outline: 2px solid var(--color-error, #A12C7B);
  outline-offset: 2px;
}

/* Reset-this-vertical block — sits at the bottom of the Edit formula editor,
   below all the axis/GM controls. Visually separated (top border) so it reads
   as a distinct "danger zone" without shouting. */
.cad-reset-vertical {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.cad-reset-vertical__meta { flex: 1; min-width: 0; }
.cad-reset-vertical__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.cad-reset-vertical__sub {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}
@media (max-width: 640px) {
  .cad-reset-vertical { flex-direction: column; align-items: stretch; gap: 12px; }
  .cad-reset-vertical .btn { width: 100%; }
}

/* ── Coach settings panel (Coach Admin, above Formula admin) ── */
.cs-shell {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface, #F9F8F5);
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 10px;
}
.cs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: var(--space-6);
  align-items: start;
}
.cs-row__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #28251D);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cs-row__pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-alt, #FBFBF9);
  color: var(--color-primary, #01696F);
  border: 1px solid var(--color-border, #D4D1CA);
}
.cs-row__sub {
  font-size: 13px;
  color: var(--color-text-muted, #7A7974);
  line-height: 1.5;
  max-width: 520px;
}
.cs-row__field { display: grid; gap: 6px; }
.cs-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #7A7974);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cs-input-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.cs-input-group .input {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 6px;
  font-size: 14px;
  background: var(--color-bg, #F7F6F2);
  color: var(--color-text, #28251D);
}
.cs-input-group .input:focus {
  outline: none;
  border-color: var(--color-primary, #01696F);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary, #01696F) 20%, transparent);
}
.cs-hint {
  font-size: 12px;
  color: var(--color-text-muted, #7A7974);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .cs-row { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ── Integrations › Message delivery: done-for-you GHL pitch card ── */
.integ-card--pitch {
  border: 1px solid color-mix(in oklab, var(--color-primary, #01696F) 32%, transparent);
  background: color-mix(in oklab, var(--color-primary, #01696F) 5%, var(--color-surface, #F9F8F5));
  position: relative;
}
.integ-card--pitch::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-primary, #01696F);
  border-radius: 10px 0 0 10px;
}
.integ-pitch__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #01696F);
  margin-bottom: 6px;
}
.integ-actions {
  display: flex;
  gap: 8px;
  margin-top: var(--space-3);
}

/* ── Modal (used by DFY GHL pitch modal; reusable pattern for future modals) ── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--color-text, #28251D) 55%, transparent);
  backdrop-filter: blur(2px);
}
.modal__panel {
  position: relative;
  background: var(--color-bg, #F7F6F2);
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - var(--space-6, 32px));
  overflow-y: auto;
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-muted, #7A7974);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.modal__close:hover { background: color-mix(in oklab, var(--color-text, #28251D) 6%, transparent); color: var(--color-text, #28251D); }

.dfy-modal__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #01696F);
  margin-bottom: 8px;
}
.dfy-modal__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text, #28251D);
  margin: 0 0 12px;
  line-height: 1.25;
}
.dfy-modal__lede {
  font-size: 15px;
  color: var(--color-text-muted, #7A7974);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}
.dfy-modal__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: 12px;
}
.dfy-modal__list li {
  font-size: 14px;
  color: var(--color-text, #28251D);
  line-height: 1.55;
  padding-left: 20px;
  position: relative;
}
.dfy-modal__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary, #01696F);
  font-weight: 700;
}
.dfy-modal__list li strong {
  font-weight: 600;
  color: var(--color-text, #28251D);
}
.dfy-modal__cta-line {
  font-size: 14px;
  color: var(--color-text-muted, #7A7974);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--color-primary, #01696F) 6%, transparent);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary, #01696F);
}
.dfy-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .modal__panel { padding: var(--space-5) var(--space-4) var(--space-4); }
  .dfy-modal__title { font-size: 19px; }
  .dfy-modal__actions { justify-content: stretch; }
  .dfy-modal__actions .btn { flex: 1; text-align: center; }
}

/* ─── Release 1 (2026-07-18): Business profile panel ───────────────────
   Two-column shell: form on left, live preview card on right. Preview
   mimics the biz-hdr on the public quote viewer so the dealer sees
   exactly what customers will see as they edit.                        */
.bp-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--space-6);
  align-items: flex-start;
  padding: var(--space-4) 0;
}
@media (max-width: 900px) {
  .bp-shell { grid-template-columns: minmax(0, 1fr); }
}
.bp-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.bp-lede {
  font-size: 14px;
  color: var(--color-text-muted, #7A7974);
  margin: 0 0 var(--space-2);
  line-height: 1.55;
}
.bp-fieldset {
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 10px;
  padding: var(--space-4);
  margin: 0;
  background: var(--color-surface, #fff);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bp-fieldset legend {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #7A7974);
  font-weight: 600;
  padding: 0 6px;
}
.bp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.bp-row > .bp-field:only-child { grid-column: 1 / -1; }
.bp-row--3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 600px) {
  .bp-row, .bp-row--3 { grid-template-columns: 1fr; }
}
.bp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bp-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text, #28251D);
  line-height: 1.35;
}
.bp-hint {
  font-weight: 400;
  color: var(--color-text-muted, #7A7974);
  font-size: 12px;
}
.bp-field input {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 8px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #28251D);
  transition: border-color 0.15s;
}
.bp-field input:focus {
  outline: none;
  border-color: var(--color-primary, #01696F);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary, #01696F) 15%, transparent);
}
.bp-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.bp-status {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--color-text-muted, #7A7974);
}
.bp-status[data-tone="error"] { color: var(--color-error, #A12C7B); }
.bp-status[data-tone="success"] { color: var(--color-success, #437A22); }

/* ─── Logo uploader (Release 1.1) ─── */
.bp-logo-field { display: flex; flex-direction: column; gap: var(--space-1); }
.bp-logo-uploader {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.bp-logo-preview {
  width: 96px; height: 96px;
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 12px;
  background: var(--color-surface, #F9F8F5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.bp-logo-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bp-logo-preview-placeholder {
  font-size: 11px; color: var(--color-text-muted, #7A7974);
  text-align: center; padding: 8px;
}
.bp-logo-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.bp-logo-btn {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--color-border, #D4D1CA);
  background: var(--color-surface, #F9F8F5);
  color: var(--color-text, #28251D);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.bp-logo-btn:hover { background: var(--color-surface-alt, #FBFBF9); border-color: var(--color-text-muted, #7A7974); }
.bp-logo-btn-primary { display: inline-flex; align-items: center; }
.bp-logo-btn-primary:hover .bp-logo-btn-label { text-decoration: underline; }
.bp-logo-btn-remove {
  color: var(--color-error, #A12C7B);
  border-color: transparent;
  background: transparent;
}
.bp-logo-btn-remove:hover { background: color-mix(in srgb, var(--color-error, #A12C7B) 8%, transparent); border-color: transparent; }
.bp-logo-status {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--color-text-muted, #7A7974);
  min-height: 1.2em;
}
.bp-logo-status[data-tone="error"] { color: var(--color-error, #A12C7B); }
.bp-logo-status[data-tone="success"] { color: var(--color-success, #437A22); }

/* ─── Preview card ─── */
.bp-preview {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
@media (max-width: 900px) {
  .bp-preview { position: static; }
}
.bp-preview__head { padding: 0 var(--space-1); }
.bp-preview__kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #7A7974);
  font-weight: 600;
}
.bp-preview__card {
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 12px;
  background: var(--color-bg, #F7F6F2);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bp-preview__biz {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid color-mix(in oklab, var(--color-border, #D4D1CA) 60%, transparent);
}
.bp-preview__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #D4D1CA);
  padding: 4px;
  flex: 0 0 auto;
}
.bp-preview__text { min-width: 0; }
.bp-preview__name {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text, #28251D);
  line-height: 1.25;
}
.bp-preview__tag {
  font-size: 12px;
  color: var(--color-text-muted, #7A7974);
  margin: 2px 0 0;
  line-height: 1.35;
}
.bp-preview__meta {
  font-size: 11px;
  color: var(--color-text-muted, #7A7974);
  margin: 4px 0 0;
  line-height: 1.5;
  word-break: break-word;
}
.bp-preview__cta-hint {
  font-size: 12px;
  color: var(--color-text-muted, #7A7974);
  margin: 0;
  line-height: 1.55;
  font-style: italic;
}

/* ═════════════════════════════════════════════════════════════════════════
   Release 2 — Coach Admin › Quote templates tab
   ───────────────────────────────────────────────────────────────────────
   Reuses the .cad-tabs / .cad-tab pills from Company Admin (see line ~5387).
   Panels are toggled by app.js via [data-ca-panel]. Two-column layout on
   desktop: list on the left, editor form on the right.
   ═════════════════════════════════════════════════════════════════════════ */

.ca-tabbar {
  max-width: 1240px;
  margin: 24px auto 0;
  padding: 0 20px;
}

.cqt-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cqt-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
}
.cqt-title { margin: 0 0 4px; font-size: 26px; font-weight: 700; color: var(--text-strong, #1E2A52); }
.cqt-sub   { margin: 0; max-width: 620px; color: var(--text-muted, #5b6478); font-size: 14px; line-height: 1.5; }
/* v296 (2026-08-12 Chris) — warranty-only CYA banner. Amber/warning tint so
   it reads as a legal reminder without shouting; sits between the subtitle
   and the kind chips. Toggled via [hidden] by cqtUpdateSubtitle(). */
.cqt-cya {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 720px;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #FEF6E7;
  border: 1px solid #F0D48A;
  border-left: 3px solid #B08A2E;
  border-radius: 8px;
  color: #6B4E12;
}
.cqt-cya[hidden] { display: none; }
.cqt-cya__ico { flex: 0 0 18px; color: #B08A2E; margin-top: 1px; }
.cqt-cya__body { flex: 1; min-width: 0; }
.cqt-cya__title { display: block; font-size: 13px; font-weight: 700; color: #6B4E12; margin-bottom: 4px; letter-spacing: 0.01em; }
.cqt-cya__copy { margin: 0; font-size: 13px; line-height: 1.55; color: #6B4E12; }

.cqt-vertical-picker { display: flex; flex-wrap: wrap; gap: 8px; }

/* Kind picker sits between the header title and the vertical picker.
   Visually a bit heavier than verticals to signal it's the coarser group. */
.cqt-kind-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 2px;
}
.cqt-kind-picker .ca-chip {
  font-weight: 600;
}

/* Two-column body — list left, editor right. Collapses to single column
   on narrow viewports. */
.cqt-body {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .cqt-body { grid-template-columns: 1fr; }
}

.cqt-list-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cqt-editor-col { min-width: 0; }

.cqt-list-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cqt-search { flex: 1; }
.cqt-search input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  border-radius: 8px;
  background: var(--surface-card, #fff);
  color: var(--text-strong, #1E2A52);
  font-size: 14px;
}
.cqt-search input:focus { outline: 2px solid var(--accent, #01696F); outline-offset: 1px; }

.cqt-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 640px;
  overflow-y: auto;
  padding-right: 4px;
}

.cqt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-radius: 10px;
  background: var(--surface-card, #fff);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.cqt-row:hover { border-color: var(--accent, #01696F); }
.cqt-row.is-active {
  border-color: var(--accent, #01696F);
  background: color-mix(in srgb, var(--accent, #01696F) 8%, var(--surface-card, #fff));
}
.cqt-row__body { flex: 1; min-width: 0; }
.cqt-row__name {
  font-weight: 600;
  color: var(--text-strong, #1E2A52);
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cqt-row__meta {
  color: var(--text-muted, #5b6478);
  font-size: 12px;
  display: flex; gap: 8px; align-items: center;
  margin-top: 2px;
}
.cqt-row__pill {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(30,42,82,0.06);
  font-size: 11px;
  color: var(--text-strong, #1E2A52);
}
.cqt-row__pill--inactive {
  background: rgba(200,80,60,0.12);
  color: #944444;
}

/* Editor form (right column) */
.cqt-editor {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-radius: 12px;
  padding: 24px;
  min-height: 320px;
}
.cqt-editor__empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  color: var(--text-muted, #5b6478);
  text-align: center;
  font-size: 14px;
  padding: 24px;
}
.cqt-editor__empty p { margin: 0; max-width: 42ch; line-height: 1.55; }

/* v84 (2026-08-04 Chris) — coach/company template Loading state. Shown
   both on the list host and (via cqt-loading--large) on the editor pane
   while Airtable is warming up. Prevents coaches from clicking a stale
   template row and thinking their save was lost. */
.cqt-editor__empty.cqt-loading {
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
}
.cqt-editor__empty.cqt-loading--large { min-height: 320px; }
.cqt-loading__spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(30, 42, 82, 0.15);
  border-top-color: #F4A22A;
  border-radius: 50%;
  animation: cqtLoadingSpin 900ms linear infinite;
}
.cqt-loading__text {
  color: var(--text-strong, #1E2A52);
  font-size: 14px;
}
.cqt-loading__hint {
  color: var(--text-muted, #5b6478);
  line-height: 1.55;
}
@keyframes cqtLoadingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cqt-loading__spinner { animation-duration: 3000ms; }
}
.cqt-editor__title {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--text-strong, #1E2A52);
}
.cqt-editor__kicker {
  margin: 0 0 20px;
  color: var(--text-muted, #5b6478);
  font-size: 13px;
}
.cqt-form { display: flex; flex-direction: column; gap: 16px; }
.cqt-field { display: flex; flex-direction: column; gap: 6px; }
.cqt-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong, #1E2A52);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cqt-field__hint {
  font-size: 12px;
  color: var(--text-muted, #5b6478);
  line-height: 1.4;
}
.cqt-field input[type="text"],
.cqt-field input[type="number"],
.cqt-field select,
.cqt-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  border-radius: 8px;
  background: var(--surface-card, #fff);
  color: var(--text-strong, #1E2A52);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.cqt-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.cqt-field input:focus,
.cqt-field select:focus,
.cqt-field textarea:focus { outline: 2px solid var(--accent, #01696F); outline-offset: 1px; }

/* Spec 12 (Native e-signature) — paired long-form contract-language field.
   Rendered right below the customer-copy / body textarea on option editors
   (warranty items, service T&Cs, payment terms) and under deposit terms on
   Company Admin › Payments. Visually differentiated with a left border tint
   and a small add-on pill next to the label so it reads as an optional field. */
.cqt-field--contract {
  border-left: 3px solid var(--accent, #01696F);
  padding-left: 12px;
  margin-left: -12px;
}
.cqt-field__badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  background: rgba(1, 105, 111, 0.08);
  color: var(--accent, #01696F);
  border: 1px solid rgba(1, 105, 111, 0.2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.cqt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .cqt-row2 { grid-template-columns: 1fr; } }

/* Active toggle row */
.cqt-toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-radius: 8px;
  background: rgba(30,42,82,0.02);
}
.cqt-toggle-row input[type="checkbox"] { transform: translateY(1px); }
.cqt-toggle-row__label {
  font-size: 13px;
  color: var(--text-strong, #1E2A52);
}
.cqt-toggle-row__hint {
  font-size: 12px;
  color: var(--text-muted, #5b6478);
  margin-left: auto;
}

.cqt-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(30,42,82,0.08));
  margin-top: 8px;
}
.cqt-editor__actions .cqt-danger {
  margin-right: auto;
}

.cqt-status {
  font-size: 12px;
  color: var(--text-muted, #5b6478);
  min-height: 16px;
}
.cqt-status.is-error { color: #B33A3A; }
.cqt-status.is-success { color: #1F8558; }

/* Placeholder-token helper strip */
.cqt-placeholders {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.cqt-placeholders__chip {
  appearance: none;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  background: var(--surface-card, #fff);
  color: var(--text-strong, #1E2A52);
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.cqt-placeholders__chip:hover { border-color: var(--accent, #01696F); }

/* RQS-link editor — line-item template auto-select bindings */
.cqt-rqs__rows { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.cqt-rqs__row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
}
.cqt-rqs__row select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border, #D4D1CA);
  border-radius: 6px;
  background: #fff;
  font: inherit;
}
.cqt-rqs__actions { margin-top: 6px; }
.cqt-rqs__readonly {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--text, #28251D);
  line-height: 1.6;
}
.btn--sm { padding: 4px 10px; font-size: 0.85rem; }

[data-theme="dark"] .cqt-rqs__row select {
  background: #24293F;
  border-color: rgba(255,255,255,0.10);
  color: #F5F5F0;
}

/* Dark mode */
[data-theme="dark"] .cqt-editor { background: #1D2340; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cqt-row { background: #1D2340; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cqt-row.is-active { background: rgba(64,180,196,0.15); }
[data-theme="dark"] .cqt-row__pill { background: rgba(255,255,255,0.08); color: #F5F5F0; }
[data-theme="dark"] .cqt-toggle-row { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cqt-placeholders__chip { background: #1D2340; border-color: rgba(255,255,255,0.10); color: #F5F5F0; }
[data-theme="dark"] .cqt-search input,
[data-theme="dark"] .cqt-field input,
[data-theme="dark"] .cqt-field select,
[data-theme="dark"] .cqt-field textarea { background: #24293F; border-color: rgba(255,255,255,0.10); color: #F5F5F0; }

/* ─── Coach Templates › Variables panel ────────────────────────────── */
.cqt-variables {
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-radius: 10px;
  padding: 14px;
  background: rgba(30,42,82,0.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cqt-variables__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cqt-variables__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong, #1E2A52);
}
.cqt-variables__hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, #5b6478);
}
.cqt-variables__hint code,
.cqt-variables__empty code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  padding: 1px 5px;
  background: rgba(30,42,82,0.06);
  border-radius: 4px;
}
.cqt-variables__empty {
  font-size: 13px;
  color: var(--text-muted, #5b6478);
  padding: 10px 12px;
  border: 1px dashed var(--border-subtle, rgba(30,42,82,0.15));
  border-radius: 8px;
  background: var(--surface-card, #fff);
}

/* Separator between generic placeholder chips and variable chips */
.cqt-placeholders__sep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: var(--border-subtle, rgba(30,42,82,0.15));
  margin: 0 2px;
}
.cqt-placeholders__chip--var {
  border-style: dashed;
}

/* One row per variable */
.cqt-var-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-radius: 8px;
  background: var(--surface-card, #fff);
}
.cqt-var-row__meta { min-width: 0; }
.cqt-var-row__label {
  font-size: 13px; font-weight: 600;
  color: var(--text-strong, #1E2A52);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cqt-var-row__kind {
  font-size: 11px;
  color: var(--text-muted, #5b6478);
  margin-top: 2px;
}
.cqt-var-row__actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.cqt-var-row__actions .btn { padding: 4px 10px; font-size: 12px; }

/* Inline add/edit form */
.cqt-var-editor {
  margin-top: 4px;
  padding: 14px;
  border: 1px solid var(--accent, #01696F);
  border-radius: 10px;
  background: var(--surface-card, #fff);
  display: flex; flex-direction: column; gap: 10px;
}
.cqt-var-editor__title {
  font-size: 13px; font-weight: 600;
  color: var(--text-strong, #1E2A52);
}
.cqt-var-editor__actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(30,42,82,0.08));
}

.cqt-varopts {
  display: flex; flex-direction: column; gap: 6px;
}
.cqt-varopts__head {
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #5b6478);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 2px;
}
.cqt-varopts__row {
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  gap: 8px;
  align-items: center;
}
.cqt-varopts__row input {
  padding: 8px 10px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface-card, #fff);
  color: var(--text-strong, #1E2A52);
}
.cqt-varopts__row .btn { padding: 6px 10px; font-size: 12px; }
.cqt-varopts__addRow { display: flex; justify-content: flex-start; }
@media (max-width: 720px) {
  .cqt-varopts__head,
  .cqt-varopts__row { grid-template-columns: 1fr; }
  .cqt-var-row { grid-template-columns: 1fr; }
  .cqt-var-row__actions { justify-content: flex-start; }
}

/* Dark mode */
[data-theme="dark"] .cqt-variables { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cqt-variables__empty { background: #24293F; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cqt-var-row { background: #24293F; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .cqt-var-editor { background: #24293F; }
[data-theme="dark"] .cqt-varopts__row input { background: #1D2340; border-color: rgba(255,255,255,0.10); color: #F5F5F0; }
[data-theme="dark"] .cqt-variables__hint code,
[data-theme="dark"] .cqt-variables__empty code { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .cqt-placeholders__sep { background: rgba(255,255,255,0.15); }

/* ═════════════════════════════════════════════════════════════════════════
   Spec 05 commit 3 — Coach Admin: Company defaults panel
   Third tab under Coach Admin. Per-(vertical, setting_group) editor with
   vertical chip picker + group sub-tabs + editor + preview + history.
   Mirrors .ca-* styles for continuity but namespaced .ccd-* to keep them
   isolated (different data model, different action verbs).
   ═════════════════════════════════════════════════════════════════════════ */

.ccd-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ccd-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
}
.ccd-title { margin: 0 0 4px; font-size: 26px; font-weight: 700; color: var(--text-strong, #1E2A52); }
.ccd-sub   { margin: 0; max-width: 620px; color: var(--text-muted, #5b6478); font-size: 14px; line-height: 1.5; }

.ccd-vertical-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ccd-vertical-chip {
  appearance: none;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  background: var(--surface-card, #fff);
  color: var(--text-strong, #1E2A52);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ccd-vertical-chip:hover { border-color: #F4A22A; }
.ccd-vertical-chip.is-active {
  background: #1E2A52;
  border-color: #1E2A52;
  color: #FAFAF7;
}

.ccd-groupbar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  padding-bottom: 0;
  overflow-x: auto;
}
.ccd-group-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text-muted, #5b6478);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.ccd-group-tab:hover { color: var(--text-strong, #1E2A52); }
.ccd-group-tab.is-active {
  color: var(--text-strong, #1E2A52);
  border-bottom-color: #F4A22A;
  font-weight: 600;
}

.ccd-context {
  padding: 12px 16px;
  background: var(--surface-alt, rgba(30,42,82,0.03));
  border-radius: 10px;
  border-left: 3px solid #F4A22A;
}
.ccd-context-line { font-size: 14px; color: var(--text-strong, #1E2A52); }
.ccd-context-note { font-size: 12px; margin-top: 4px; color: var(--text-muted, #5b6478); line-height: 1.5; }
.ccd-version-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(30,42,82,0.10);
  color: var(--text-strong, #1E2A52);
}
.ccd-version-badge.is-empty {
  background: rgba(244,162,42,0.15);
  color: #8a5a10;
}
.ccd-version-badge.is-inactive {
  background: rgba(30,42,82,0.06);
  color: var(--text-muted, #5b6478);
  font-weight: 500;
}

.ccd-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .ccd-body { grid-template-columns: 1fr; }
}

.ccd-editor, .ccd-preview {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
  border-radius: 14px;
  padding: 20px 22px;
}

.ccd-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ccd-form-help {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #5b6478);
  line-height: 1.5;
}

.ccd-tier-table {
  width: 100%;
  border-collapse: collapse;
}
.ccd-tier-table th, .ccd-tier-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.08));
  font-size: 13px;
  text-align: left;
}
.ccd-tier-table th {
  font-weight: 600;
  color: var(--text-muted, #5b6478);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ccd-tier-table input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  border-radius: 6px;
  background: var(--surface-input, #fff);
  color: var(--text-strong, #1E2A52);
}
.ccd-tier-table input:focus { outline: none; border-color: #F4A22A; }
.ccd-empty { color: var(--text-muted, #5b6478); font-style: italic; text-align: center; padding: 16px; }

.ccd-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ccd-inline-input {
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.15));
  border-radius: 6px;
  background: var(--surface-input, #fff);
  min-width: 200px;
}

.ccd-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}
@media (max-width: 640px) { .ccd-grid-2 { grid-template-columns: 1fr; } }

.ccd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ccd-field-wide { grid-column: 1 / -1; }
.ccd-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted, #5b6478);
  text-transform: uppercase;
}
.ccd-field-help {
  font-size: 11px;
  color: var(--text-muted, #5b6478);
  line-height: 1.4;
  margin-top: 2px;
}
.ccd-field input, .ccd-field textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.20));
  border-radius: 8px;
  background: var(--surface-input, #fff);
  color: var(--text-strong, #1E2A52);
  resize: vertical;
}
.ccd-field input:focus, .ccd-field textarea:focus { outline: none; border-color: #F4A22A; }

.ccd-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-strong, #1E2A52);
  cursor: pointer;
}

/* Preview column */
.ccd-preview-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text-strong, #1E2A52); }
.ccd-preview-help  { margin: 0 0 12px; font-size: 12px; color: var(--text-muted, #5b6478); line-height: 1.5; }
.ccd-preview-kpi {
  font-size: 28px;
  font-weight: 700;
  color: #F4A22A;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.ccd-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ccd-preview-table th, .ccd-preview-table td {
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, rgba(30,42,82,0.06));
  font-variant-numeric: tabular-nums;
}
.ccd-preview-table th { color: var(--text-muted, #5b6478); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }

/* Footer */
.ccd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, rgba(30,42,82,0.10));
}
.ccd-footer-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted, #5b6478);
}
.ccd-footer-note [data-kind="error"] { color: #B4321F; }
.ccd-footer-note [data-kind="ok"] { color: #237547; }
#ccdStatus[data-kind="error"] { color: #B4321F; }
#ccdStatus[data-kind="ok"]    { color: #237547; }
.ccd-dirty-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F4A22A;
  display: inline-block;
}
.ccd-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* History */
.ccd-history {
  border-top: 1px solid var(--border-subtle, rgba(30,42,82,0.08));
  padding-top: 12px;
}
.ccd-history summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted, #5b6478);
  padding: 4px 0;
}
.ccd-history summary:hover { color: var(--text-strong, #1E2A52); }
.ccd-history-body { padding-top: 12px; }
.ccd-history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ccd-history-list li {
  padding: 10px 12px;
  border: 1px solid var(--border-subtle, rgba(30,42,82,0.08));
  border-radius: 8px;
  background: var(--surface-card, #fff);
}
.ccd-history-list li.is-active { border-color: #F4A22A; background: rgba(244,162,42,0.04); }
.ccd-history-head {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted, #5b6478);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.ccd-history-when, .ccd-history-who { font-variant-numeric: tabular-nums; }
.ccd-history-changelog {
  margin: 4px 0 0;
  padding: 8px 10px;
  background: var(--surface-alt, rgba(30,42,82,0.04));
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  color: var(--text-strong, #1E2A52);
}

/* Dark theme */
[data-theme="dark"] .ccd-editor,
[data-theme="dark"] .ccd-preview,
[data-theme="dark"] .ccd-history-list li { background: #24293F; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .ccd-context { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .ccd-vertical-chip { background: #24293F; color: #F5F5F0; border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .ccd-vertical-chip.is-active { background: #F4A22A; border-color: #F4A22A; color: #1E2A52; }
[data-theme="dark"] .ccd-group-tab { color: rgba(245,245,240,0.60); }
[data-theme="dark"] .ccd-group-tab:hover, [data-theme="dark"] .ccd-group-tab.is-active { color: #F5F5F0; }
[data-theme="dark"] .ccd-tier-table input,
[data-theme="dark"] .ccd-field input,
[data-theme="dark"] .ccd-field textarea,
[data-theme="dark"] .ccd-inline-input { background: #1D2340; color: #F5F5F0; border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .ccd-version-badge { background: rgba(255,255,255,0.10); color: #F5F5F0; }
[data-theme="dark"] .ccd-history-changelog { background: rgba(0,0,0,0.20); color: #F5F5F0; }

/* ─────────────────────────────────────────────────────────────────────────
   Spec 05 commit 4 — Company override panels (owner-facing)
   ─────────────────────────────────────────────────────────────────────────
   Namespaced .owr-* (owner-override) to stay parallel to the coach-side
   .ccd-* namespace. Applies to the Fees & Warranty > "Extended warranty
   tiers" card first; labor/fees/customer_fields wire up in follow-ups.
   ───────────────────────────────────────────────────────────────────────── */

.owr-vertical-picker {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.owr-vertical-chip {
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  background: #FFFFFF; color: var(--text-strong, #1E2A52);
  border: 1px solid rgba(30,42,82,0.15); border-radius: 999px;
  cursor: pointer; transition: all .15s ease;
}
.owr-vertical-chip:hover { border-color: #F4A22A; }
.owr-vertical-chip.is-active {
  background: #F4A22A; border-color: #F4A22A; color: #1E2A52;
}

.owr-panel .quote-card__hrow { align-items: flex-start; gap: 12px; }
.owr-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.owr-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  border-radius: 999px;
  background: rgba(30,42,82,0.06); color: var(--text-strong, #1E2A52);
}
.owr-status[data-source="company_override"] {
  background: rgba(244,162,42,0.15); color: #8A5312;
}
.owr-status[data-source="coach_default"] {
  background: rgba(30,42,82,0.10); color: var(--text-strong, #1E2A52);
}
.owr-status[data-source="hardcoded_fallback"] {
  background: rgba(107,114,128,0.15); color: #4B5563;
}
.owr-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }

.owr-owner-hint {
  margin: 12px 0 0; padding: 10px 12px;
  font-size: 12px; color: #4B5563;
  background: rgba(107,114,128,0.08); border-radius: 6px;
}

/* Per-field default reference + restore icon (inside tier rows) */
.owr-field-default {
  display: block; margin-top: 4px; font-size: 11px; color: #6B7280;
}
.owr-field-default--differs { color: #C87E17; }
.owr-field-default button.owr-restore {
  background: none; border: none; padding: 0 0 0 4px; cursor: pointer;
  color: #F4A22A; font-size: 13px; line-height: 1;
}
.owr-field-default button.owr-restore:hover { color: #C87E17; }

/* Read-only state — dim inputs, disable Clone/Reset */
.owr-panel.is-readonly .tier-row input { background: rgba(107,114,128,0.06); cursor: not-allowed; }

/* Non-override state — visually distinguish "still on coach default" tiers */
.owr-panel:not(.is-overridden) .tier-list { opacity: 0.75; }

/* Dark theme */
[data-theme="dark"] .owr-vertical-chip {
  background: #24293F; color: #F5F5F0; border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .owr-vertical-chip.is-active {
  background: #F4A22A; border-color: #F4A22A; color: #1E2A52;
}
[data-theme="dark"] .owr-owner-hint { background: rgba(255,255,255,0.04); color: rgba(245,245,240,0.70); }
[data-theme="dark"] .owr-status { background: rgba(255,255,255,0.08); color: #F5F5F0; }
[data-theme="dark"] .owr-status[data-source="company_override"] { background: rgba(244,162,42,0.20); color: #F4A22A; }
[data-theme="dark"] .owr-field-default { color: rgba(245,245,240,0.60); }
[data-theme="dark"] .owr-field-default--differs { color: #F4A22A; }

/* --------------------------------------------------------------------
   Line-item template picker modal (desktop + mobile wizard share these).
   Card-based multi-select with the SellWorthy orange checkmark on select.
-------------------------------------------------------------------- */
.li-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 24, 20, 0.55);
  backdrop-filter: blur(2px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: liFade 140ms ease-out;
}
@keyframes liFade { from { opacity: 0 } to { opacity: 1 } }
.li-modal {
  background: #fff;
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  padding: 20px 20px 16px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
  animation: liPop 160ms ease-out;
}
@keyframes liPop { from { transform: translateY(6px); opacity: 0 } to { transform: none; opacity: 1 } }
.li-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.li-modal__head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #28251D;
}
.li-modal__close {
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: #7A7974;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.li-modal__close:hover { background: #F5F3EE; color: #28251D; }
.li-modal__sub {
  font-size: 13px;
  color: #7A7974;
  margin: 4px 0 14px;
}
.li-modal__cards {
  display: grid;
  gap: 10px;
}
.li-pick-card {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 14px 16px 14px 14px;
  background: #FBFAF6;
  border: 1.5px solid #E8E4DA;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 60ms ease;
}
.li-pick-card:hover {
  border-color: #C9C3B4;
  background: #F5F2E9;
}
.li-pick-card:active { transform: scale(0.995); }
.li-pick-card.is-selected {
  background: #FFF6E6;
  border-color: #F4A22A;
  box-shadow: 0 0 0 3px rgba(244, 162, 42, 0.18);
}
.li-pick-card__check {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid #C9C3B4;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  margin-top: 1px;
  overflow: hidden;
}
.li-pick-card__check svg { width: 14px; height: 14px; color: transparent; }
.li-pick-card__check img {
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover;
}
.li-pick-card.is-selected .li-pick-card__check {
  background: transparent;
  border-color: #F4A22A;
  box-shadow: 0 0 0 2px rgba(244, 162, 42, 0.25);
}
.li-pick-card.is-selected .li-pick-card__check svg { display: none; }
.li-pick-card.is-selected .li-pick-card__check img { display: block; }
.li-pick-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.li-pick-card__title {
  font-weight: 600;
  font-size: 14px;
  color: #28251D;
  line-height: 1.35;
}

/* v84 (2026-08-04 Chris) — line-item picker modal is rendered outside the
   .qb-wizard scope (it lives at document.body). Duplicate the RQS pill
   rules here so the pill styles correctly on line-item picker cards. See
   assets/qb-wizard.v78.css for the same rules on the in-wizard pickers. */
.tmpl-picker__badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #F4A22A;
  background: #1E2A52;
  line-height: 1.4;
}
.tmpl-picker__badge--rqs {
  color: #ffffff;
  background: #1F7A4C;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
}
.tmpl-picker__badge--rqs-pos  { background: #1F7A4C; color: #ffffff; }
.tmpl-picker__badge--rqs-zero { background: #6B7280; color: #ffffff; }
.tmpl-picker__badge--rqs-neg  { background: #C05621; color: #ffffff; }
.tmpl-picker__badge--rqs-floor {
  background: #9B1C1C; color: #ffffff;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* v84 (2026-08-04 Chris) — GM ranges informational card. Sits directly
   above the Target GM % input on the pricing review step. Compact ladder
   layout: each row is [range label] → [pill of points]. The row that
   contains the current input value is highlighted with a stronger border
   and light-blue fill so the salesperson can see at a glance which bucket
   they've landed in. Uses SellWorthy tokens (navy #1E2A52, amber #F4A22A).
*/
.quote-card--gm-ranges {
  padding: 14px 16px 12px;
  border: 1px solid #E5E8EE;
  border-radius: 10px;
  background: #F8FAFC;
  margin-bottom: 12px;
}
.quote-card--gm-ranges .gm-range-head { margin-bottom: 8px; }
.quote-card--gm-ranges .gm-range-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1E2A52;
  letter-spacing: 0.01em;
}
.quote-card--gm-ranges .gm-range-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #5b6478;
}
.quote-card--gm-ranges .gm-range-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.gm-range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #ffffff;
  font-size: 13px;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.gm-range-row__label {
  color: #1E2A52;
  font-weight: 500;
}
.gm-range-row__pts {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: #ffffff;
  background: #6B7280;
  min-width: 68px;
  text-align: center;
}
.gm-range-row--pos .gm-range-row__pts { background: #1F7A4C; }
.gm-range-row--neg .gm-range-row__pts { background: #C05621; }
.gm-range-row--zero .gm-range-row__pts { background: #6B7280; }
.gm-range-row--floor .gm-range-row__pts {
  background: #9B1C1C;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.gm-range-row--floor .gm-range-row__label {
  color: #9B1C1C;
  font-weight: 600;
}
.gm-range-row.is-active {
  border-color: #F4A22A;
  background: #FFF8EC;
  box-shadow: 0 0 0 2px rgba(244, 162, 42, 0.15);
}
.gm-range-row.is-active .gm-range-row__label { color: #1E2A52; font-weight: 700; }
.li-pick-card__meta {
  font-size: 12px;
  color: #7A7974;
}
.li-pick-card__preview {
  font-size: 12.5px;
  color: #55524B;
  line-height: 1.4;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed #E8E4DA;
  white-space: pre-wrap;
}
.li-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #EBE8E1;
}
.li-modal__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  margin-left: 2px;
}

/* Divider between Labor and Travel blocks inside the combined step 5 */
.qb-step-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #E8E4DA 20%, #E8E4DA 80%, transparent);
  margin: var(--space-5, 20px) 0 var(--space-4, 16px);
}

/* ── Revenue Band Tables row editor (Coach Admin > Revenue band tables) ─── */
.crb-rows-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 14px;
}
.crb-rows-table thead th {
  text-align: left;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #7A7974);
  border-bottom: 1px solid var(--color-border, #D4D1CA);
  background: transparent;
}
.crb-rows-table tbody td {
  padding: 4px 6px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.crb-rows-table tbody tr:last-child td { border-bottom: none; }
.crb-row-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 6px;
  font: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--color-surface, #F9F8F5);
}
.crb-row-input:focus { outline: 2px solid var(--color-primary, #01696F); outline-offset: -1px; }
[data-theme="dark"] .crb-rows-table thead th { border-bottom-color: rgba(255,255,255,0.10); color: var(--color-text-muted, #797876); }
[data-theme="dark"] .crb-rows-table tbody td { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .crb-row-input {
  background: var(--color-surface, #1C1B19);
  border-color: rgba(255,255,255,0.12);
  color: var(--color-text, #CDCCCA);
}

/* ═════════════════════════════════════════════════════════════════════════
   Coach Admin › Companies tab (Chunk A, 2026-07-22)
   List every company on this coach's roster + "New company" modal to invite
   a new one. Reuses .btn / .btn--primary / .btn--ghost from base.
   ═════════════════════════════════════════════════════════════════════════ */

.ccy-shell {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.ccy-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ccy-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}
.ccy-sub {
  color: var(--color-text-muted, #7A7974);
  font-size: 14px;
  margin: 0;
  max-width: 540px;
}
.ccy-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ccy-search input {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #D4D1CA);
  font: inherit;
  min-width: 260px;
  background: var(--color-surface, #F9F8F5);
  color: inherit;
}
.ccy-status {
  color: var(--color-text-muted, #7A7974);
  font-size: 13px;
  padding: 12px 0;
}
.ccy-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--color-border, #D4D1CA);
  background: var(--color-surface, #F9F8F5);
}
.ccy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ccy-table thead th {
  text-align: left;
  padding: 10px 14px;
  background: var(--color-surface-alt, #FBFBF9);
  border-bottom: 1px solid var(--color-border, #D4D1CA);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-muted, #7A7974);
}
.ccy-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border, #D4D1CA);
  vertical-align: middle;
}
.ccy-table tbody tr:last-child td { border-bottom: none; }
.ccy-table tbody tr:hover { background: var(--color-surface-alt, #FBFBF9); }
.ccy-table .ccy-cell-name { font-weight: 600; }
.ccy-table .ccy-cell-name .ccy-subline {
  display: block;
  font-weight: 400;
  color: var(--color-text-muted, #7A7974);
  font-size: 12px;
  margin-top: 2px;
}
.ccy-table code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
}
[data-theme="dark"] .ccy-table code { background: rgba(255,255,255,0.08); }
.ccy-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0,0,0,0.06);
  color: var(--color-text, #28251D);
}
[data-theme="dark"] .ccy-badge { background: rgba(255,255,255,0.10); color: var(--color-text, #CDCCCA); }
.ccy-badge--active   { background: #DFF0E0; color: #1F5122; }
.ccy-badge--invited  { background: #E7EAF7; color: #253F82; }
.ccy-badge--paused   { background: #FDEDE1; color: #7B3B12; }
.ccy-badge--offboard { background: #F1DFE7; color: #6C1F4B; }
[data-theme="dark"] .ccy-badge--active   { background: #24462A; color: #A9DFB0; }
[data-theme="dark"] .ccy-badge--invited  { background: #26325C; color: #B7C4EE; }
[data-theme="dark"] .ccy-badge--paused   { background: #4A2F14; color: #F5C69C; }
[data-theme="dark"] .ccy-badge--offboard { background: #421B32; color: #EBB2D3; }
.ccy-unlocked-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ccy-unlocked-chip {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
  color: var(--color-text-muted, #7A7974);
}
[data-theme="dark"] .ccy-unlocked-chip { background: rgba(255,255,255,0.06); }
.ccy-actions-th { text-align: right; }
.ccy-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.ccy-btn-small {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--color-border, #D4D1CA);
  background: var(--color-surface, #F9F8F5);
  color: inherit;
  cursor: pointer;
}
.ccy-btn-small:hover { border-color: var(--color-text-muted, #7A7974); }
.ccy-btn-small--danger { color: #A12C7B; border-color: rgba(161,44,123,0.3); }
.ccy-btn-small--danger:hover { background: rgba(161,44,123,0.06); }

.ccy-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted, #7A7974);
  font-size: 14px;
}

/* ── New company modal ── */
.ccy-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ccy-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
}
.ccy-modal-card {
  position: relative;
  background: var(--color-background, #F7F6F2);
  border-radius: 12px;
  border: 1px solid var(--color-border, #D4D1CA);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.30);
}
.ccy-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #D4D1CA);
}
.ccy-modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.ccy-modal-x {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--color-text-muted, #7A7974);
}
.ccy-modal-x:hover { color: var(--color-text, #28251D); }
[data-theme="dark"] .ccy-modal-x:hover { color: var(--color-text, #CDCCCA); }

.ccy-form { padding: 20px; }
.ccy-form-row {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ccy-form-row--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ccy-form-row--triple {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  gap: 12px;
}
.ccy-form-row--pair .ccy-field,
.ccy-form-row--triple .ccy-field {
  margin: 0;
}
.ccy-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ccy-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #7A7974);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ccy-lbl em {
  color: #A12C7B;
  font-style: normal;
  font-weight: 700;
}
.ccy-field input,
.ccy-field select {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #D4D1CA);
  font: inherit;
  background: var(--color-surface, #F9F8F5);
  color: inherit;
}
.ccy-field input:focus,
.ccy-field select:focus {
  outline: 2px solid var(--color-primary, #01696F);
  outline-offset: -1px;
  border-color: transparent;
}
.ccy-unlocked-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 6px;
  background: var(--color-surface, #F9F8F5);
}
.ccy-unlocked-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.ccy-unlocked-item input[disabled] + span { color: var(--color-text-muted, #7A7974); }
.ccy-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.ccy-field-help {
  font-size: 12px;
  color: var(--color-text-muted, #7A7974);
  margin: 4px 0 0;
}
.ccy-form-status {
  font-size: 13px;
  min-height: 20px;
  margin: 8px 0;
  color: var(--color-text-muted, #7A7974);
}
.ccy-form-status.is-error { color: #A12C7B; }
.ccy-form-status.is-success { color: #437A22; }
.ccy-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border, #D4D1CA);
  margin-top: 8px;
}

@media (max-width: 640px) {
  .ccy-form-row--pair,
  .ccy-form-row--triple { grid-template-columns: 1fr; }
  .ccy-unlocked-grid { grid-template-columns: 1fr; }
}

/* ─── Spec 06 rev 2 — Loss reasons (coach + company) ─── */
.lr-shell { display: flex; flex-direction: column; gap: 16px; padding: 8px 4px 24px; }
.lr-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.lr-title { font-size: 22px; margin: 0 0 4px; color: var(--text-strong, #1E2A52); }
.lr-sub { font-size: 14px; color: var(--text-muted, #7A7974); margin: 0; max-width: 620px; }
.lr-toolbar { display: flex; align-items: center; gap: 12px; }
.lr-vertical { display: flex; flex-direction: column; font-size: 12px; color: var(--text-muted, #7A7974); text-transform: uppercase; letter-spacing: .04em; gap: 4px; }
.lr-vertical select { padding: 6px 10px; border: 1px solid var(--color-border, #D4D1CA); border-radius: 8px; background: var(--surface-card, #FBFBF9); color: var(--text-strong, #28251D); font-size: 14px; min-width: 200px; }
.lr-status { padding: 12px 16px; color: var(--text-muted, #7A7974); background: var(--surface-alt, #F9F8F5); border-radius: 8px; font-size: 14px; }
.lr-table-wrap { border: 1px solid var(--color-border, #D4D1CA); border-radius: 10px; overflow: hidden; background: var(--surface-card, #FBFBF9); }
.lr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lr-table thead th { text-align: left; padding: 10px 12px; background: var(--surface-alt, #F5F3EE); border-bottom: 1px solid var(--color-border, #D4D1CA); font-weight: 600; color: var(--text-strong, #28251D); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.lr-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--color-border, #E4E1DA); vertical-align: top; color: var(--text-strong, #28251D); }
.lr-table tbody tr:last-child td { border-bottom: none; }
.lr-table tbody tr.is-archived td { color: var(--text-muted, #7A7974); background: var(--surface-alt, #F9F8F5); }
.lr-drag-th, .lr-drag-cell { width: 20px; }
.lr-actions-th, .lr-actions { text-align: right; white-space: nowrap; }
.lr-label { font-weight: 600; color: var(--text-strong, #28251D); }
.lr-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-alt, #F5F3EE); padding: 2px 6px; border-radius: 4px; color: var(--text-strong, #28251D); }
.lr-mini { font-size: 11px; color: var(--text-muted, #7A7974); text-transform: uppercase; letter-spacing: .04em; }
.lr-playbook { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text-muted, #5A5751); margin-top: 4px; }
.lr-sort { text-align: right; font-variant-numeric: tabular-nums; }
.lr-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.lr-badge--active { background: rgba(67, 122, 34, 0.12); color: #437A22; }
.lr-badge--archived { background: rgba(122, 121, 116, 0.12); color: #7A7974; }
.btn-link { background: none; border: 0; color: var(--color-primary, #01696F); font-size: 13px; cursor: pointer; padding: 4px 6px; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }
.btn-link--danger { color: #A12C7B; }

.lr-preview { padding: 12px 16px; border: 1px dashed var(--color-border, #D4D1CA); border-radius: 8px; background: var(--surface-alt, #F9F8F5); font-size: 13px; color: var(--text-muted, #5A5751); }
.lr-preview summary { cursor: pointer; font-weight: 600; color: var(--text-strong, #28251D); }
.lr-preview-list { margin: 8px 0 0; padding-left: 20px; color: var(--text-strong, #28251D); }
.lr-preview-list li { margin: 4px 0; }

.lr-modal { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(20,18,15,0.72); }
.lr-modal-backdrop { position: absolute; inset: 0; }
.lr-modal-card { position: relative; background: var(--surface-card, #FBFBF9); border-radius: 12px; padding: 4px 0 0; max-width: 520px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.24); }
.lr-modal-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 22px 8px; }
.lr-modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-strong, #28251D); }
.lr-modal-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--text-muted, #7A7974); cursor: pointer; }
.lr-modal-form { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.lr-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-strong, #28251D); }
.lr-field em { font-weight: 400; color: var(--text-muted, #7A7974); font-style: normal; font-size: 11px; }
.lr-field input, .lr-field select, .lr-field textarea { padding: 8px 10px; border: 1px solid var(--color-border, #D4D1CA); border-radius: 8px; font-family: inherit; font-size: 14px; background: var(--surface-alt, #FFF); color: var(--text-strong, #28251D); }
.lr-field textarea { resize: vertical; min-height: 60px; }
.lr-field input:disabled { background: var(--surface-alt, #F5F3EE); color: var(--text-muted, #7A7974); cursor: not-allowed; }
.lr-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lr-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-strong, #28251D); font-weight: 500; }
.lr-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; border-top: 1px solid var(--color-border, #D4D1CA); margin-top: 4px; }

/* Company loss reasons pane (Spec 06 rev 2, Step 7b) */
.lrc-shell { display: flex; flex-direction: column; gap: 16px; }
.lrc-section-title { margin: 4px 0; font-size: 15px; font-weight: 600; color: var(--text-strong, #28251D); }
.lrc-section-sub { margin: 0 0 8px; font-size: 13px; color: var(--text-muted, #7A7974); }
.lrc-defaults-list { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; list-style: none; }
.lrc-default-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface-alt, #F9F8F5); border: 1px solid var(--color-border, #E4E1DA); border-radius: 8px; font-size: 14px; gap: 12px; }
.lrc-default-row.is-hidden { opacity: .5; text-decoration: line-through; }
.lrc-default-label { color: var(--text-strong, #28251D); }
.lrc-toggle { flex: 0 0 auto; }

[data-theme="dark"] .lr-table thead th { background: #232322; color: #F5F5F0; }
[data-theme="dark"] .lr-table tbody td { background: #1C1B19; color: #CDCCCA; border-color: #393836; }
[data-theme="dark"] .lr-table tbody tr.is-archived td { background: #201F1D; color: #7A7974; }
[data-theme="dark"] .lr-modal-card { background: #1C1B19; color: #CDCCCA; }
[data-theme="dark"] .lr-field input,
[data-theme="dark"] .lr-field select,
[data-theme="dark"] .lr-field textarea { background: #232322; border-color: #393836; color: #CDCCCA; }

/* Payment Methods (v100) — Coach Admin catalog + Company picker. */
/* Coach Admin > Payment methods reuses .lr-* table/modal styles. These pmc-
   rules cover the extras it needs on top of the shared kit (shell, header,
   toolbar, badges, custom vs built-in tag, and the modal field wrapper). */
.pmc-shell { display: flex; flex-direction: column; gap: 16px; padding: 8px 4px 24px; }
.pmc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pmc-header h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text-strong, #28251D); }
.pmc-header p { margin: 0; font-size: 13px; color: var(--text-muted, #7A7974); max-width: 640px; }
.pmc-toolbar { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.pmc-status { font-size: 13px; color: var(--text-muted, #7A7974); padding: 4px 0; }
.pmc-badge--builtin { background: rgba(1, 105, 111, 0.12); color: #01696F; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pmc-badge--custom  { background: rgba(122, 57, 187, 0.12); color: #7A39BB; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pmc-field { display: flex; flex-direction: column; gap: 6px; }
.pmc-field label { font-size: 12px; font-weight: 600; color: var(--text-strong, #28251D); text-transform: uppercase; letter-spacing: .04em; }
.pmc-field input, .pmc-field select { padding: 8px 10px; border: 1px solid var(--color-border, #D4D1CA); border-radius: 8px; font-size: 14px; background: var(--surface-card, #FBFBF9); color: var(--text-strong, #28251D); }
.pmc-field input:focus, .pmc-field select:focus { outline: 2px solid var(--color-primary, #01696F); outline-offset: -1px; }
.pmc-field small { font-size: 12px; color: var(--text-muted, #7A7974); }

/* Company Admin > Payments picker — checkbox grid over the active catalog. */
.pmc-picker { padding: 8px 0; }
.pmc-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pmc-picker__item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-alt, #F9F8F5); border: 1px solid var(--color-border, #E4E1DA); border-radius: 10px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.pmc-picker__item:hover { background: var(--surface, #FFFDF8); border-color: var(--color-primary, #01696F); }
.pmc-picker__item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary, #01696F); flex-shrink: 0; cursor: pointer; }
.pmc-picker__label { flex: 1; color: var(--text-strong, #28251D); font-weight: 500; font-size: 14px; }
.pmc-picker__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--surface-card, #FBFBF9); padding: 2px 6px; border-radius: 4px; color: var(--text-muted, #7A7974); }

[data-theme="dark"] .pmc-field input,
[data-theme="dark"] .pmc-field select { background: #232322; border-color: #393836; color: #CDCCCA; }
[data-theme="dark"] .pmc-picker__item { background: #1C1B19; border-color: #393836; }
[data-theme="dark"] .pmc-picker__item:hover { background: #232322; }
[data-theme="dark"] .pmc-picker__code { background: #232322; color: #7A7974; }

/* Payments add-on upsell card — promotes the credit card processor connection
   right underneath the payment-type checkbox grid so it's discoverable without
   forcing the user to hunt through Add-ons. */
.pmc-upsell {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #01696F) 6%, transparent), color-mix(in srgb, var(--color-primary, #01696F) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-primary, #01696F) 24%, transparent);
  border-radius: 12px;
  flex-wrap: wrap;
}
.pmc-upsell__body { flex: 1; min-width: 260px; }
.pmc-upsell__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong, #28251D);
  margin-bottom: 4px;
}
.pmc-upsell__badge {
  background: var(--color-accent, #F4A22A);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pmc-upsell__lede {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-muted, #7A7974);
  line-height: 1.5;
}
.pmc-upsell__points {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-strong, #28251D);
  line-height: 1.7;
}
.pmc-upsell__points li { margin: 0; }
.pmc-upsell .btn { flex-shrink: 0; }

/* Connected variant — confirms the add-on is live, tones down the promo. */
.pmc-upsell--connected {
  background: color-mix(in srgb, #437A22 8%, transparent);
  border-color: color-mix(in srgb, #437A22 32%, transparent);
}
.pmc-upsell__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #437A22;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

[data-theme="dark"] .pmc-upsell {
  background: linear-gradient(135deg, rgba(79, 152, 163, 0.14), rgba(79, 152, 163, 0.04));
  border-color: rgba(79, 152, 163, 0.4);
}
[data-theme="dark"] .pmc-upsell--connected {
  background: rgba(109, 170, 69, 0.14);
  border-color: rgba(109, 170, 69, 0.4);
}

/* ─── My Quotes filter pills (Spec 06 rev 3) ─────────────────────────────── */
.qfilter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 20px 0; }
.qfilter-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--surface-alt, #F9F8F5);
  border: 1px solid var(--color-border, #D4D1CA);
  color: var(--text-strong, #28251D);
  font: 500 13px/1 inherit; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.qfilter-pill:hover { background: var(--surface, #FFFDF8); }
.qfilter-pill--active {
  background: var(--color-primary, #01696F);
  color: #FFFFFF;
  border-color: var(--color-primary, #01696F);
}
.qfilter-pill--active .qfilter-pill__count { color: rgba(255,255,255,.85); }
.qfilter-pill__count {
  font-size: 12px; font-weight: 500; color: var(--text-muted, #7A7974);
  padding: 1px 6px; border-radius: 999px;
  background: rgba(0,0,0,.05); min-width: 18px; text-align: center;
}
.qfilter-pill--active .qfilter-pill__count { background: rgba(255,255,255,.18); }
[data-theme="dark"] .qfilter-pill { background: #201F1D; border-color: #393836; color: #CDCCCA; }
[data-theme="dark"] .qfilter-pill:hover { background: #26251F; }
[data-theme="dark"] .qfilter-pill--active { background: #4F98A3; border-color: #4F98A3; color: #171614; }
[data-theme="dark"] .qfilter-pill__count { background: rgba(255,255,255,.08); color: #797876; }
[data-theme="dark"] .qfilter-pill--active .qfilter-pill__count { background: rgba(0,0,0,.2); color: #171614; }

/* Reason line under Lost rows */
.qtable__reason {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--text-muted, #7A7974);
  font-weight: 400; font-style: italic;
}
.qtable__reason::before { content: "Reason: "; font-style: normal; color: var(--text-faint, #BAB9B4); }
[data-theme="dark"] .qtable__reason { color: #797876; }
[data-theme="dark"] .qtable__reason::before { color: #5A5957; }

/* ─── Loss Reasons report (Spec 06 rev 3) ────────────────────────────────── */
.loss-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.loss-row { display: flex; flex-direction: column; gap: 6px; }
.loss-row__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 14px;
}
.loss-row__label { color: var(--text-strong, #28251D); font-weight: 500; }
.loss-row__stats { color: var(--text-strong, #28251D); font-variant-numeric: tabular-nums; }
.loss-row__stats strong { font-weight: 600; font-size: 15px; }
.loss-row__bar {
  height: 8px; border-radius: 999px;
  background: var(--surface-alt, #F5F3EE);
  overflow: hidden;
}
.loss-row__bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #A12C7B 0%, #C24499 100%);
  transition: width .35s ease;
}
[data-theme="dark"] .loss-row__label { color: #CDCCCA; }
[data-theme="dark"] .loss-row__stats { color: #CDCCCA; }
[data-theme="dark"] .loss-row__bar { background: #201F1D; }
[data-theme="dark"] .loss-row__bar-fill { background: linear-gradient(90deg, #D163A7 0%, #E58FC5 100%); }

/* ─── Dashboard: Top loss reason tile (Spec 06 rev 3) ────────────────────── */
.pipe--clickable {
  cursor: pointer;
  font: inherit; text-align: left;
  border: 1px solid var(--color-border, #D4D1CA);
  background: var(--surface-alt, #F9F8F5);
  transition: background .12s ease, border-color .12s ease, transform .05s ease;
}
.pipe--clickable:hover { background: var(--surface, #FFFDF8); border-color: var(--color-primary, #01696F); }
.pipe--clickable:active { transform: translateY(1px); }
.pipe--clickable:focus-visible {
  outline: 2px solid var(--color-primary, #01696F);
  outline-offset: 2px;
}
.pipe__val--sm {
  font-size: 18px; line-height: 1.25;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.pipe__sub {
  margin-top: 4px;
  font-size: 12px; color: var(--color-text-muted, #7A7974);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .pipe--clickable { background: #201F1D; border-color: #393836; }
[data-theme="dark"] .pipe--clickable:hover { background: #26251F; border-color: #4F98A3; }
[data-theme="dark"] .pipe__sub { color: #797876; }

/* Spec 06 rev 4 — date-window bar on Signed / Lost sections in My Quotes. */
.quote-section__windows {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px;
}
.quote-section__windows-label {
  font-size: 12px; color: var(--text-muted, #7A7974); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600; margin-right: 2px;
}
.qfilter-pill--sm { padding: 4px 10px; font-size: 12px; }
[data-theme="dark"] .quote-section__windows-label { color: #797876; }

/* Custom-range popover */
.quotes-window-popover {
  min-width: 240px; padding: 12px; z-index: 1000;
}
.quotes-window-popover__body { display: flex; flex-direction: column; gap: 10px; }
.quotes-window-popover__row {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-muted, #7A7974);
  font-weight: 600; letter-spacing: 0.02em;
}
.quotes-window-popover__row input[type="date"] {
  padding: 6px 8px; font-size: 14px;
  border: 1px solid var(--color-border, #D4D1CA); border-radius: 6px;
  background: var(--surface, #FFFDF8); color: var(--text-strong, #28251D);
}
.quotes-window-popover__actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;
}
[data-theme="dark"] .quotes-window-popover__row input[type="date"] {
  background: #171614; border-color: #393836; color: #CDCCCA;
}

/* Inline text-button used in Signed/Lost empty-window messages. */
.linklike {
  appearance: none; background: transparent; border: 0; padding: 0;
  color: var(--color-primary, #01696F);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.linklike:hover { color: var(--color-primary-hover, #0C4E54); }
[data-theme="dark"] .linklike { color: #4F98A3; }

/* =============================================================================
   Spec 07 — Post-Signature: Deposit → Schedule
   ============================================================================= */

/* Row-level three-chip stage strip on Signed quotes in My Quotes.
   Sales role reads this at a glance; ops role uses the Projects rail for
   actions. The chips render inline under the project name. */
.qtable__stage-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
  line-height: 1.2;
  font-size: 0.78rem;
}
.qstage__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border, #D4D1CA);
  background: var(--color-surface, #F9F8F5);
  color: var(--color-text-muted, #7A7974);
  font-weight: 500;
  white-space: nowrap;
}
.qstage__chip.is-done {
  background: color-mix(in srgb, var(--color-success, #16A34A) 12%, var(--color-surface, #fff));
  border-color: color-mix(in srgb, var(--color-success, #16A34A) 30%, var(--color-border, #D4D1CA));
  color: var(--color-success, #16A34A);
}
.qstage__chip.is-current {
  background: color-mix(in srgb, var(--color-primary, #1E2A52) 8%, var(--color-surface, #fff));
  border-color: color-mix(in srgb, var(--color-primary, #1E2A52) 40%, var(--color-border, #D4D1CA));
  color: var(--color-primary, #1E2A52);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #1E2A52) 15%, transparent);
  font-weight: 600;
}
.qstage__chip--skipped {
  color: color-mix(in srgb, var(--color-text-muted, #7A7974) 65%, transparent);
  text-decoration: line-through;
  border-style: dashed;
}
.qstage__sep {
  color: var(--color-text-faint, #BAB9B4);
  font-size: 0.85em;
}
[data-theme="dark"] .qstage__chip {
  background: var(--color-surface, #1C1B19);
  border-color: var(--color-border, #393836);
  color: var(--color-text-muted, #797876);
}

/* Spec 29 — dedicated single-chip "Deposit Due" indicator for rows in the
   Ready-to-receive-deposit section. Same visual weight as a stage chip but
   emphasized with the primary accent so it's the first thing the eye lands on. */
.qtable__deposit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-primary, #01696F);
  background: color-mix(in oklab, var(--color-primary, #01696F) 12%, transparent);
  color: var(--color-primary, #01696F);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
[data-theme="dark"] .qtable__deposit-chip {
  border-color: var(--color-primary, #4F98A3);
  background: color-mix(in oklab, var(--color-primary, #4F98A3) 18%, transparent);
  color: var(--color-primary, #4F98A3);
}

/* Projects nav rail (ops+ only). */
.projects-rail {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.25rem 0;
}
.projects-rail__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text, #28251D);
  font-size: 0.92rem;
  text-align: left;
  gap: 0.5rem;
}
.projects-rail__item:hover {
  background: color-mix(in srgb, var(--color-primary, #1E2A52) 6%, transparent);
}
.projects-rail__item.is-active {
  background: color-mix(in srgb, var(--color-primary, #1E2A52) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary, #1E2A52) 25%, transparent);
  font-weight: 600;
}
.projects-rail__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0 0.4rem;
  height: 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary, #1E2A52) 10%, transparent);
  color: var(--color-primary, #1E2A52);
  font-size: 0.72rem;
  font-weight: 600;
}
.projects-rail__sep {
  height: 1px;
  background: var(--color-border, #D4D1CA);
  margin: 0.4rem 0.5rem;
}
.projects-rail__item[disabled],
.projects-rail__item.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Projects detail cards. */
.proj-card {
  background: var(--color-surface, #F9F8F5);
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.proj-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.proj-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text, #28251D);
  margin: 0;
}
.proj-card__meta {
  color: var(--color-text-muted, #7A7974);
  font-size: 0.85rem;
}
.proj-card__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border, #D4D1CA);
  cursor: pointer;
}
.proj-card__row:last-child { border-bottom: none; }
.proj-card__row:hover { background: color-mix(in srgb, var(--color-primary, #1E2A52) 5%, transparent); }
.proj-card__row-name { flex: 1; font-weight: 500; }
.proj-card__row-days {
  color: var(--color-warning, #964219);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* Reschedule-reason banner on Schedule Project detail. */
.reschedule-banner {
  background: color-mix(in srgb, var(--color-warning, #964219) 12%, var(--color-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--color-warning, #964219) 30%, var(--color-border, #D4D1CA));
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  color: var(--color-warning, #964219);
  font-size: 0.9rem;
}
.reschedule-banner__title { font-weight: 700; margin-bottom: 0.15rem; }
.reschedule-banner__reason { font-weight: 400; color: var(--color-text, #28251D); }

/* Payments module upsell (greyed Charge card button + upgrade badge). */
.pay-upsell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--color-text-muted, #7A7974) 10%, transparent);
  color: var(--color-text-muted, #7A7974);
  border: 1px dashed var(--color-border, #D4D1CA);
  font-size: 0.9rem;
  cursor: help;
}
.pay-upsell__badge {
  background: var(--color-accent, #F4A22A);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
}

/* "Add-on" pill inside nav menu items (Projects → Schedule Project). */
.nav-menu__item:has(.nav-menu__addon-badge) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.nav-menu__addon-badge {
  display: inline-block;
  background: color-mix(in srgb, var(--color-accent, #F4A22A) 18%, transparent);
  color: var(--color-accent, #B36A05);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--color-accent, #F4A22A) 45%, transparent);
  line-height: 1.4;
  flex-shrink: 0;
}

/* Time-window pills (morning / afternoon / anytime). */
.time-window-pills {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.time-window-pill {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border, #D4D1CA);
  background: var(--color-surface, #F9F8F5);
  color: var(--color-text, #28251D);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
}
.time-window-pill.is-active {
  background: var(--color-primary, #1E2A52);
  color: #fff;
  border-color: var(--color-primary, #1E2A52);
}

/* ─────────────────────────────────────────────────────────────────────────
   Add-ons › Modules (Company Admin)
   ─────────────────────────────────────────────────────────────────────────
   Reusable card grid for feature-flag toggles. Each card is one entry from
   ADDON_MODULES (app.js). Shares .switch styles with the existing
   messaging/GHL panel so the toggle feels identical. Card frame matches
   .integ-card (subtle border, generous padding) but is its own class so
   messaging-only tweaks don't leak in. */
.addon-modules {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}
.addon-card {
  border: 1px solid var(--border, #D4D1CA);
  border-radius: 12px;
  padding: 20px 22px;
  background: var(--surface, #F9F8F5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.addon-card--loading {
  min-height: 96px;
  background: linear-gradient(90deg, #f3f2ee 0%, #ecebe6 50%, #f3f2ee 100%);
  background-size: 200% 100%;
  animation: addon-shimmer 1.4s ease-in-out infinite;
  border-color: transparent;
}
@keyframes addon-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.addon-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.addon-card__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text, #28251D);
  margin: 0 0 4px 0;
  line-height: 1.3;
}
.addon-card__lede {
  font-size: 14px;
  color: var(--text-muted, #7A7974);
  margin: 0;
  line-height: 1.5;
  max-width: 68ch;
}
.addon-card__row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.addon-card__note {
  font-size: 13px;
  color: var(--text-muted, #7A7974);
  margin: 0;
  font-style: italic;
}
/* Config-hint tone: shown when a live add-on is on but still needs setup */
.addon-card__note--config {
  color: var(--accent, #01696F);
  font-style: normal;
  font-weight: 500;
  padding: 8px 12px;
  background: rgba(1, 105, 111, 0.06);
  border-left: 3px solid var(--accent, #01696F);
  border-radius: 0 6px 6px 0;
  margin-top: 8px;
}

/* Integration status pill — shared across all integ cards (signing, messaging, payments). */
.integ-status[data-state="connected"] {
  background: rgba(67, 122, 34, 0.12);
  color: var(--success, #437A22);
  border-color: rgba(67, 122, 34, 0.3);
}
.integ-status[data-state="disconnected"] {
  background: rgba(122, 121, 116, 0.1);
  color: var(--text-muted, #7A7974);
  border-color: rgba(122, 121, 116, 0.25);
}
.addon-card__status {
  font-size: 13px;
  color: var(--text-muted, #7A7974);
}

/* Status pill — three variants (on, off, coming-soon). Matches the
   .integ-status pill footprint. */
.addon-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.addon-pill--on {
  background: #E6F2F0;
  color: #01696F;
  border-color: #B8DCD8;
}
.addon-pill--off {
  background: #F0EFEB;
  color: #7A7974;
  border-color: #D4D1CA;
}
.addon-pill--soon {
  background: #FBF2E8;
  color: #964219;
  border-color: #E8D0B2;
}

.addon-empty {
  padding: 24px;
  border: 1px dashed var(--border, #D4D1CA);
  border-radius: 12px;
  color: var(--text-muted, #7A7974);
  font-size: 14px;
  text-align: center;
}

/* Coming-soon cards get a slightly muted body so they read as inactive at
   a glance. Toggle itself is disabled via the input[disabled] browser style
   plus a lower cursor / opacity on the label. */
.addon-card:has(.addon-pill--soon) .addon-card__title {
  color: var(--text-muted, #7A7974);
}
.addon-card:has(input[data-addon-toggle]:disabled) .switch__label {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================================
 * v74 (Spec 09 Wave 3): Restore an older version — full-page view.
 * Rendered outside the .qb-wizard scope; uses the same design tokens as the
 * rest of the app pages.
 * ==========================================================================*/
.restore-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.restore-list__loading,
.restore-list__empty,
.restore-list__error {
  padding: 32px 16px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  background: #f9fafb;
  border: 1px dashed rgba(0,0,0,0.1);
  border-radius: 8px;
}
.restore-list__error { color: #a12c2c; background: #fff1f1; border-color: rgba(161,44,44,0.25); }

.restore-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.restore-card--active {
  border-color: #1a5fb4;
  background: #f4f8fd;
}
.restore-card__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.restore-card__v {
  flex: 0 0 auto;
  min-width: 48px;
  font-size: 22px;
  font-weight: 700;
  color: #1a5fb4;
  padding: 6px 12px;
  background: #eaf2fb;
  border-radius: 6px;
  text-align: center;
  line-height: 1;
}
.restore-card--active .restore-card__v { background: #1a5fb4; color: #fff; }
.restore-card__meta { flex: 1 1 auto; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.restore-card__when { font-size: 14px; font-weight: 600; color: #111827; }
.restore-card__who { font-size: 13px; color: #6b7280; }
.restore-card__reason { font-size: 12px; color: #6b7280; font-style: italic; }
.restore-card__actions { flex: 0 0 auto; align-self: center; }

.restore-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  background: #1a5fb4;
  color: #fff;
  border: 1px solid #1a5fb4;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 60ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.restore-card__btn:hover:not(:disabled) { background: #164a91; border-color: #164a91; }
.restore-card__btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.restore-card__btn:focus-visible { outline: 2px solid #1a5fb4; outline-offset: 2px; }
.restore-card__btn:disabled,
.restore-card__btn--current {
  background: #e5e7eb;
  color: #6b7280;
  border-color: rgba(0,0,0,0.1);
  cursor: not-allowed;
  box-shadow: none;
}

.restore-card__totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.restore-card__totals > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.restore-card__totals dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 600;
}
.restore-card__totals dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  font-variant-numeric: tabular-nums lining-nums;
}
.restore-card__totals-total dt { color: #1a5fb4; }
.restore-card__totals-total dd { color: #1a5fb4; }

@media (max-width: 640px) {
  .restore-card__totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .restore-card__head { gap: 12px; }
  .restore-card__actions { flex: 1 1 100%; }
  .restore-card__btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   v74 (Spec 09 Wave 4): save button state machine on the edit banner.
   - Default (dirty): standard .btn--primary blue (no override needed).
   - Saving: keep the blue-ish look but muted + not interactive.
   - Clean: gray, checkmarked, disabled — signals "nothing to save right now".
   Applied to both #qEditSaveBtn (edit banner) and #qSaveBtn (Step 10) so the
   two entry points feel consistent to the rep.
   ------------------------------------------------------------------------- */
#qEditSaveBtn.is-clean,
#qSaveBtn.is-clean {
  background: var(--surface-muted, #f1f1ee) !important;
  color: var(--text-muted, #7a7974) !important;
  border-color: var(--border, #d4d1ca) !important;
  opacity: 0.85;
}
#qEditSaveBtn.is-clean:hover,
#qSaveBtn.is-clean:hover {
  background: var(--surface-muted, #f1f1ee) !important;
  color: var(--text-muted, #7a7974) !important;
}
#qEditSaveBtn.is-saving,
#qSaveBtn.is-saving {
  opacity: 0.75;
  cursor: progress;
}

/* ─── v81 — My Quotes search + sortable columns ────────────────────────── */
.qfilter-bar__spacer { flex: 1 1 auto; min-width: 8px; }
.qfilter-search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 10px;
  border-radius: 999px;
  background: var(--surface, #FFFDF8);
  border: 1px solid var(--color-border, #D4D1CA);
  min-width: 220px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.qfilter-search:focus-within {
  border-color: var(--color-primary, #01696F);
  box-shadow: 0 0 0 3px rgba(1,105,111,.15);
}
.qfilter-search__icon { color: var(--color-text-muted, #7A7974); flex-shrink: 0; }
.qfilter-search__input {
  border: 0; background: transparent; outline: none;
  font: 500 13px/1.4 inherit;
  color: var(--text-strong, #28251D);
  min-width: 0; flex: 1 1 auto;
  padding: 2px 0;
}
.qfilter-search__input::placeholder { color: var(--color-text-muted, #7A7974); font-weight: 400; }
.qfilter-search__input::-webkit-search-cancel-button { display: none; }
.qfilter-search__clear {
  border: 0; background: transparent;
  color: var(--color-text-muted, #7A7974);
  font-size: 18px; line-height: 1; padding: 0 4px;
  cursor: pointer; border-radius: 4px;
}
.qfilter-search__clear:hover { color: var(--text-strong, #28251D); background: rgba(0,0,0,.04); }
[data-theme="dark"] .qfilter-search {
  background: #1C1B19; border-color: #393836;
}
[data-theme="dark"] .qfilter-search__input { color: #CDCCCA; }
[data-theme="dark"] .qfilter-search__clear:hover { background: rgba(255,255,255,.06); color: #CDCCCA; }

/* Sortable headers */
.qtable__th--sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.qtable__th--sortable:hover { color: var(--color-primary, #01696F); }
.qtable__th--sortable:focus-visible { outline: 2px solid var(--color-primary, #01696F); outline-offset: -2px; }
.qtable__sort-arrow {
  display: inline-block; margin-left: 4px;
  font-size: 11px; opacity: .45;
  transition: opacity .12s ease;
}
.qtable__th--sorted .qtable__sort-arrow { opacity: 1; color: var(--color-primary, #01696F); font-weight: 700; }
.qtable__th--sortable:hover .qtable__sort-arrow { opacity: .85; }
[data-theme="dark"] .qtable__th--sorted .qtable__sort-arrow { color: var(--color-primary, #4F98A3); }

/* Mobile — stack search below pills, full-width */
@media (max-width: 640px) {
  .qfilter-bar__spacer { display: none; }
  .qfilter-search { width: 100%; min-width: 0; margin-top: 4px; }
}

/* ── v82 Spec 09: Change-log note card in Step 10 ───────────── */
.quote-changenote {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--color-surface, #F9F8F5);
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quote-changenote__label {
  font: 600 13px/1.35 inherit;
  color: var(--text-strong, #28251D);
  display: flex; align-items: center; gap: 4px;
}
.quote-changenote__req { color: var(--color-error, #A12C7B); font-weight: 700; }
.quote-changenote__input {
  width: 100%; box-sizing: border-box;
  min-height: 60px; resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 8px;
  background: var(--color-background, #F7F6F2);
  color: var(--text-strong, #28251D);
  font: 400 14px/1.45 inherit;
}
.quote-changenote__input:focus {
  outline: none;
  border-color: var(--color-primary, #01696F);
  box-shadow: 0 0 0 3px rgba(1,105,111,.15);
}
.quote-changenote__input.is-invalid {
  border-color: var(--color-error, #A12C7B);
  box-shadow: 0 0 0 3px rgba(161,44,123,.15);
}
.quote-changenote__hint {
  font: 400 12px/1.4 inherit;
  color: var(--color-text-muted, #7A7974);
}
.quote-changenote--autofilled .quote-changenote__input {
  background: rgba(1,105,111,.06);
  color: var(--color-text-muted, #7A7974);
  font-style: italic;
}
[data-theme="dark"] .quote-changenote {
  background: #1C1B19; border-color: #393836;
}
[data-theme="dark"] .quote-changenote__input {
  background: #171614; border-color: #393836; color: #CDCCCA;
}
[data-theme="dark"] .quote-changenote--autofilled .quote-changenote__input {
  background: rgba(79,152,163,.10);
}

/* Restore card — change-note callout */
.restore-card__note {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-primary, #01696F);
  background: rgba(1,105,111,.05);
  border-radius: 4px;
  font: 400 13px/1.45 inherit;
  color: var(--text-strong, #28251D);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.restore-card__note--empty {
  color: var(--color-text-muted, #7A7974);
  font-style: italic;
  border-left-color: var(--color-border, #D4D1CA);
  background: transparent;
}
[data-theme="dark"] .restore-card__note {
  color: #CDCCCA; background: rgba(79,152,163,.10);
  border-left-color: var(--color-primary, #4F98A3);
}

/* ============================================================================
   Spec 10 — Financing sub-flow
   Rollup strip + 3 columns (Requested / Pending / Approved-awaiting-accept)
   plus the persistent Financing-not-approved pill for Quotes-page rows.
   ============================================================================ */

/* Persistent denial pill on Quotes rows. Red. Small. Never auto-clears. */
.pill--denied {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FCE8EE;
  color: #A12C7B;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid #F4C3D3;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
}

/* Spec 30 (2026-08-14) — mirror-image of pill--denied for the manual
   approve-with-financing path. Green (success tone) instead of red. */
.pill--approved {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #E6F3DA;
  color: #437A22;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid #C7E0A9;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
}
@media (prefers-color-scheme: dark) {
  .pill--approved {
    background: #22301A;
    color: #6DAA45;
    border-color: #3F5A2E;
  }
}

/* Financing view */
.fin-loading, .fin-error, .fin-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted, #7A7974);
  font-size: 14px;
}
.fin-error { color: #A12C7B; }

.fin-rollup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 20px 0;
  padding: 16px;
  background: var(--color-surface, #F9F8F5);
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 12px;
}
.fin-rollup__stat { text-align: left; }
.fin-rollup__num {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text, #28251D);
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}
.fin-rollup__lbl {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-muted, #7A7974);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fin-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .fin-columns { grid-template-columns: 1fr; }
}

.fin-col {
  background: var(--color-surface, #F9F8F5);
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: 12px;
  overflow: hidden;
}
.fin-col__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border, #D4D1CA);
  background: var(--color-surface-alt, #FBFBF9);
}
.fin-col__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #28251D);
}
.fin-col__count {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-primary, #01696F);
  color: white;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.fin-col__body { padding: 8px; }
.fin-col__empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--color-text-muted, #7A7974);
  font-size: 13px;
}

.fin-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s;
}
.fin-row + .fin-row { border-top: 1px solid var(--color-border, #D4D1CA); }
.fin-row:hover { background: var(--color-surface-alt, #FBFBF9); }
.fin-row__main { min-width: 0; }
.fin-row__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #28251D);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-row__total {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted, #7A7974);
  font-variant-numeric: tabular-nums lining-nums;
}
.fin-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.fin-row__lender {
  font-size: 11px;
  color: var(--color-text-muted, #7A7974);
  padding: 2px 6px;
  background: var(--color-surface-alt, #FBFBF9);
  border-radius: 4px;
  border: 1px solid var(--color-border, #D4D1CA);
}
.fin-row__aging {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-surface-alt, #FBFBF9);
  color: var(--color-text-muted, #7A7974);
  border: 1px solid var(--color-border, #D4D1CA);
  font-variant-numeric: tabular-nums lining-nums;
}
.fin-row__aging--stuck { background: #FCE8EE; color: #A12C7B; border-color: #F4C3D3; }
.fin-row__aging--nudge { background: #FDECD9; color: #964219; border-color: #F5D2AC; }

/* ── Spec 10 — Company Admin › Financing tab ─────────────────────────── */
.cad-financing { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.cad-financing__toggle { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.cad-financing__toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.cad-financing__toggle-label { user-select: none; }
.cad-financing__help { color: var(--text-muted, #7A7974); font-size: 13px; line-height: 1.5; margin: 0; }
.cad-financing__thresholds { border: 1px solid var(--border, #D4D1CA); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cad-financing__thresholds[disabled] { opacity: 0.5; pointer-events: none; }
.cad-financing__thresholds legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--text-muted, #7A7974); text-transform: uppercase; letter-spacing: 0.04em; }
.cad-financing__field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.cad-financing__field input[type="number"] { width: 72px; padding: 4px 8px; border: 1px solid var(--border, #D4D1CA); border-radius: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.cad-financing__actions { display: flex; align-items: center; gap: 12px; }
.cad-financing__status { font-size: 13px; color: var(--text-muted, #7A7974); }
.cad-financing__status.is-ok { color: #437A22; }
.cad-financing__status.is-error { color: #A12C7B; }
.cad-financing__loading, .cad-financing__empty, .cad-financing__error { color: var(--text-muted, #7A7974); font-size: 14px; }
.cad-financing__error { color: #A12C7B; }

/* v98 — Sent-to-customer pill on QuoteVersions history drawer.
   Green pill next to versions that were the live one when the quote was
   sent to the customer (draft → sent transition stamps sent_to_customer_at
   on the latest version at that moment). Hover to see the exact send time. */
.restore-card__pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.restore-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.restore-card__pill--sent {
  background: #d1fadf;
  color: #05603a;
  border: 1px solid #a6f0c6;
}
.restore-card__pill--sent::before {
  content: "✓";
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   v131 · Full-screen loading overlay (edit-quote transitions)
   ───────────────────────────────────────────────────────────── */
.sw-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 42, 82, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: sw-overlay-fade-in 140ms ease-out;
}
.sw-loading-overlay[hidden] { display: none !important; }
.sw-loading-overlay__card {
  background: var(--color-surface, #FFFFFF);
  color: var(--color-text, #1E2A52);
  padding: 22px 28px;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(30, 42, 82, 0.22);
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: inherit;
}
.sw-loading-overlay__spinner {
  display: inline-flex;
  gap: 4px;
}
.sw-loading-overlay__spinner span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent, #F4A22A);
  display: inline-block;
  animation: sw-overlay-bounce 900ms ease-in-out infinite;
}
.sw-loading-overlay__spinner span:nth-child(2) { animation-delay: 150ms; }
.sw-loading-overlay__spinner span:nth-child(3) { animation-delay: 300ms; }
.sw-loading-overlay__msg {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
@keyframes sw-overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sw-overlay-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-loading-overlay { animation: none; }
  .sw-loading-overlay__spinner span { animation: none; opacity: 1; }
}

/* ── Spec 14b — Step 0 quoting-mode picker + Mode B (by_product_price) UI ──
 * Pre-existing .qb-vtile / .qb-vpick classes (Spec 14 Phase B vertical
 * picker) ship with no dedicated rules in any style.vNN.css on disk — they
 * inherit only generic button/box resets. That gap predates this spec; we
 * don't retrofit it here. The rules below are scoped to the NEW modifier
 * classes this build introduces (--mode, --dupe, and the Mode B step 2/3
 * blocks) so Mode A's existing (unstyled-but-working) picker tiles are
 * untouched. */
.qb-vtile--mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--color-border, #d8dee3);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  width: 100%;
}
.qb-vtile--mode.is-selected {
  border-color: var(--color-accent, #01696F);
  box-shadow: 0 0 0 2px rgba(1, 105, 111, 0.15);
}
.qb-vtile--mode.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.qb-vtile--mode .qb-vtile__label {
  font-weight: 600;
  font-size: 14px;
}
.qb-vtile--mode .qb-vtile__sub {
  font-size: 12.5px;
  color: var(--color-text-muted, #6b7280);
}
.qb-vpick__tiles--mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .qb-vpick__tiles--mode { grid-template-columns: 1fr; }
}
.qb-classic-link--dupe {
  white-space: nowrap;
}

/* Mode B — Step 2 "Variables" (landscape + roofline) */
.qb-modeb-section {
  border: 1px solid var(--color-border, #d8dee3);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #fff;
}
.qb-modeb-section__title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
}
.qb-modeb-section__hint {
  font-size: 12.5px;
  color: var(--color-text-muted, #6b7280);
  margin: 0 0 10px;
}
.qb-modeb-empty {
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted, #6b7280);
  font-size: 13.5px;
  border: 1px dashed var(--color-border, #d8dee3);
  border-radius: 10px;
}
.qb-modeb-radiorow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.qb-modeb-radio {
  border: 1px solid var(--color-border, #d8dee3);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  background: #fff;
  cursor: pointer;
}
.qb-modeb-radio.is-selected {
  border-color: var(--color-accent, #01696F);
  background: rgba(1, 105, 111, 0.08);
  font-weight: 600;
}
.qb-modeb-totalft {
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
  margin-top: 4px;
}
.qb-modeb-readonly {
  background: #f5f7f8;
  border: 1px solid var(--color-border, #d8dee3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: #33393d;
}
.qb-modeb-gm-display {
  font-size: 20px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f5f7f8;
  display: inline-block;
}

/* ===== v162 (2026-08-05) — GM Adjust slider card =========================
   Sits directly under #qGmRangesCard on the summary. Two visual pieces:
   1. Big GM % readout + band label + points delta (left/right split)
   2. Range slider styled as a pill with band tick marks
   3. Retail labor rate line (Mode B only) or Mode A hint
   No new tokens — reuses existing --card, --border, --brand vars from base.
   ========================================================================= */
.quote-card--gm-adjust {
  margin-top: 10px;
  padding: 16px 18px 14px;
}
.gm-adjust-head { margin-bottom: 12px; }
.gm-adjust-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--fg, #101418);
}
.gm-adjust-sub {
  font-size: 12px;
  color: var(--muted, #5a6470);
  line-height: 1.4;
}

.gm-adjust-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.gm-adjust-readout__gm { display: flex; align-items: baseline; gap: 6px; }
.gm-adjust-readout__num {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand, #0b7);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.gm-adjust-readout__lbl {
  font-size: 12px;
  color: var(--muted, #5a6470);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gm-adjust-readout__band { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.gm-adjust-readout__band-label { font-size: 13px; font-weight: 600; color: var(--fg, #101418); }
.gm-adjust-readout__pts { font-size: 11px; color: var(--muted, #5a6470); font-variant-numeric: tabular-nums; }

/* v92 (2026-08-06 Chris — "if the margin is below 30 it still shows 30 and
   is green like it is a good thing"): warning-color state when the actual
   GM sits below the vertical's floor. The number, band label, and pts label
   all shift to red so the operator can't miss that they're underwater. */
.gm-adjust-readout--below-floor .gm-adjust-readout__num,
.gm-adjust-readout--below-floor .gm-adjust-readout__band-label,
.gm-adjust-readout--below-floor .gm-adjust-readout__pts {
  color: #dc2626;
}

.gm-adjust-track {
  position: relative;
  padding: 6px 0 26px;
  margin-bottom: 12px;
}
.gm-adjust-track input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, #e7e9ec, #c9ded4);
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.gm-adjust-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--brand, #0b7);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
  cursor: grab;
  transition: transform .08s ease-out;
}
.gm-adjust-track input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.06);
  cursor: grabbing;
}
.gm-adjust-track input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--brand, #0b7);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
  cursor: grab;
}
.gm-adjust-track input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(11,179,127,0.25);
  border-radius: 999px;
}

.gm-adjust-ticks {
  position: absolute;
  top: 22px;
  left: 12px;
  right: 12px;
  height: 16px;
  pointer-events: none;
}
.gm-adjust-tick {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gm-adjust-tick::before {
  content: '';
  width: 1px;
  height: 6px;
  background: #b7bec6;
  margin-bottom: 1px;
}
.gm-adjust-tick__label {
  font-size: 10px;
  color: var(--muted, #5a6470);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gm-adjust-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted, #5a6470);
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,0.06);
}
.gm-adjust-mode--b .gm-adjust-mode__val {
  color: var(--fg, #101418);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gm-adjust-mode--b .gm-adjust-mode__delta {
  font-variant-numeric: tabular-nums;
  color: var(--muted, #5a6470);
}
.gm-adjust-reset {
  margin-top: 10px;
  align-self: flex-start;
}

/* Mobile — stack readout, shrink type slightly */
@media (max-width: 540px) {
  .gm-adjust-readout { flex-direction: column; align-items: flex-start; }
  .gm-adjust-readout__band { text-align: left; }
  .gm-adjust-readout__num { font-size: 24px; }
}

/* ─── Company Admin → Deleted quotes tab (Spec 25 recovery UI) ────────────
   Chris 2026-08-09. Restore surface for soft-deleted quotes. */
.cad-deleted-shell { padding: 1.25rem 1.5rem 2rem; }
.cad-deleted-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.cad-deleted-title { margin: 0 0 0.25rem; font-size: 1.15rem; font-weight: 600; color: #2A2723; }
.cad-deleted-sub  { margin: 0; color: #4A4A47; font-size: 0.9rem; line-height: 1.5; max-width: 60ch; }
.cad-deleted-empty {
  padding: 2.5rem 1rem; text-align: center; color: #7A7974;
  background: #FAF9F6; border: 1px dashed #E4E1D8; border-radius: 8px;
}
.cad-deleted-empty--error { color: #B23434; background: #FCF3F1; border-color: #EBC7BF; }
.cad-deleted-table-wrap { overflow-x: auto; }
.cad-deleted-table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
}
.cad-deleted-table th,
.cad-deleted-table td {
  padding: 0.75rem 0.85rem; text-align: left; border-bottom: 1px solid #EFEDE6;
  vertical-align: top;
}
.cad-deleted-table th {
  font-weight: 600; color: #4A4A47; background: #FAF9F6; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.cad-deleted-table td.cad-deleted-price,
.cad-deleted-table th.cad-deleted-price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cad-deleted-cust { font-weight: 600; color: #2A2723; }
.cad-deleted-qnum { font-size: 0.78rem; color: #7A7974; margin-top: 0.15rem; }
.cad-deleted-rel  { font-size: 0.78rem; color: #7A7974; margin-top: 0.15rem; }
.cad-deleted-reason { color: #4A4A47; max-width: 32ch; }
.cad-deleted-reason--missing { color: #B26B34; font-style: italic; font-size: 0.85rem; }
.cad-deleted-status {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; text-transform: capitalize;
  background: #EFEDE6; color: #4A4A47;
}
.cad-deleted-status--viewed  { background: #FCE7F3; color: #A21361; }
.cad-deleted-status--sent    { background: #E6EDFA; color: #24478A; }
.cad-deleted-status--draft   { background: #F4EFE4; color: #7A6828; }
.cad-deleted-status--signed  { background: #E1F4E4; color: #2B7038; }
.cad-deleted-status--lost,
.cad-deleted-status--rejected,
.cad-deleted-status--canceled { background: #FCE9E4; color: #A23A1A; }
.cad-deleted-actions { text-align: right; white-space: nowrap; }
.cad-deleted-actions .btn--sm { padding: 0.35rem 0.85rem; font-size: 0.82rem; }

/* Mobile: collapse table into stacked cards. */
@media (max-width: 720px) {
  .cad-deleted-table thead { display: none; }
  .cad-deleted-table,
  .cad-deleted-table tbody,
  .cad-deleted-table tr,
  .cad-deleted-table td { display: block; width: 100%; }
  .cad-deleted-table tr {
    background: #FEFDFB; border: 1px solid #EFEDE6; border-radius: 10px;
    padding: 0.75rem; margin-bottom: 0.75rem;
  }
  .cad-deleted-table td { border: 0; padding: 0.35rem 0; }
  .cad-deleted-table td.cad-deleted-price { text-align: left; }
  .cad-deleted-actions { text-align: left; padding-top: 0.5rem !important; }
}

/* ============================================================
   Spec 06 rev 3 — Follow-ups screen + My Quotes chip + editor
   ============================================================ */

/* Follow-ups screen toolbar (pill filters + refresh) */
.fu-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0 1rem;
  border-bottom: 1px solid #EBE8E1;
  margin-bottom: 1rem;
}
.fu-pill {
  background: #F7F5EF;
  border: 1px solid #DFDBCF;
  color: #47433A;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.fu-pill:hover { background: #EFEBE0; }
.fu-pill.is-active {
  background: #1F2933;
  border-color: #1F2933;
  color: #FDFCF7;
}
.fu-pill.is-active .fu-pill__count { color: #FDFCF7; background: rgba(255,255,255,0.18); }
.fu-pill__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #7A7974;
  background: #FDFCF7;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  min-width: 1.5rem;
  text-align: center;
}
.fu-pill__count:empty { display: none; }
.fu-refresh { margin-left: auto; }

/* Follow-ups body */
.fu-body { padding-bottom: 3rem; }
.fu-skeleton { padding: 2rem 0; color: #7A7974; font-style: italic; }
.fu-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: #7A7974;
  border: 1px dashed #DFDBCF;
  border-radius: 12px;
}
.fu-empty--err { color: #A63D3D; border-color: #E8C5C5; background: #FBEEEE; }

/* Sections (used when range=all) */
.fu-section { margin-bottom: 2rem; }
.fu-section__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #47433A;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.fu-section__count {
  font-size: 0.75rem;
  color: #7A7974;
  background: #F7F5EF;
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-weight: 500;
}
.fu-section--overdue .fu-section__title { color: #A63D3D; }
.fu-section--overdue .fu-section__count { background: #FBEEEE; color: #A63D3D; }
.fu-section--week .fu-section__title { color: #B77519; }
.fu-section--week .fu-section__count { background: #FBF3E4; color: #B77519; }
.fu-section__rows { display: flex; flex-direction: column; gap: 0.5rem; }

/* Row */
.fu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: #FDFCF7;
  border: 1px solid #EBE8E1;
  border-radius: 10px;
  align-items: start;
}
.fu-row--overdue {
  border-color: #E8C5C5;
  background: #FDF5F5;
}
.fu-row__main { min-width: 0; }
.fu-row__top {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  justify-content: space-between;
}
.fu-row__name {
  font-weight: 600;
  color: #1F2933;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fu-row__qnum { color: #7A7974; font-weight: 400; font-size: 0.85rem; }
.fu-row__price {
  font-variant-numeric: tabular-nums;
  color: #47433A;
  font-weight: 500;
  white-space: nowrap;
}
.fu-row__reason {
  font-size: 0.85rem;
  color: #7A7974;
  margin-top: 0.15rem;
}
.fu-row__playbook {
  font-size: 0.82rem;
  color: #47433A;
  background: #F7F5EF;
  border-left: 3px solid #C9B980;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  margin-top: 0.4rem;
  line-height: 1.35;
}
.fu-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 140px;
}
.fu-row__date {
  text-align: right;
  font-weight: 500;
  color: #1F2933;
  font-size: 0.9rem;
}
.fu-row--overdue .fu-row__date { color: #A63D3D; }
.fu-row__rel {
  display: block;
  font-size: 0.72rem;
  color: #7A7974;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fu-row__actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fu-row__actions .btn { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
.btn--danger-ghost {
  background: transparent;
  border: 1px solid #E8C5C5;
  color: #A63D3D;
}
.btn--danger-ghost:hover { background: #FBEEEE; }

/* Mobile: stack meta below main */
@media (max-width: 720px) {
  .fu-row { grid-template-columns: 1fr; }
  .fu-row__meta { align-items: flex-start; }
  .fu-row__date { text-align: left; }
  .fu-row__actions { justify-content: flex-start; }
}

/* Follow-up chip on My Quotes rows */
.fu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #F7F5EF;
  border: 1px solid #DFDBCF;
  color: #47433A;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 0.4rem;
  line-height: 1.4;
  transition: background 120ms ease, border-color 120ms ease;
}
.fu-chip:hover { background: #EFEBE0; border-color: #C9B980; }
.fu-chip__ico { font-size: 0.85rem; line-height: 1; }
.fu-chip__edit { color: #7A7974; margin-left: 0.15rem; }
.fu-chip--overdue {
  background: #FBEEEE;
  border-color: #E8C5C5;
  color: #A63D3D;
}
.fu-chip--overdue .fu-chip__edit { color: #A63D3D; opacity: 0.75; }
.fu-chip--empty {
  background: transparent;
  border: 1px dashed #C9B980;
  color: #7A7974;
}
.fu-chip--empty:hover { color: #47433A; background: #F7F5EF; }

/* Nav badge (Follow-ups count) */
.nav-menu__followups-badge {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0.05rem 0.4rem;
  margin-left: 0.5rem;
  background: #A63D3D;
  color: #FDFCF7;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

/* Follow-up date editor (modal-ish) */
.fu-editor-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 41, 51, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.fu-editor {
  background: #FDFCF7;
  border-radius: 14px;
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.fu-editor__title {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  color: #1F2933;
}
.fu-editor__sub {
  margin: 0 0 1rem;
  color: #7A7974;
  font-size: 0.9rem;
}
.fu-editor__field {
  display: block;
  color: #47433A;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.fu-editor__field input[type=date] {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #DFDBCF;
  border-radius: 8px;
  font-size: 1rem;
  color: #1F2933;
  background: #FFF;
}
.fu-editor__err {
  color: #A63D3D;
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  background: #FBEEEE;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.fu-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ============================================================
   Roofline catalog editor (Spec 14b — v259)
   Shared by Coach Admin (data-rcat-shell="coach") and
   Company Admin (data-rcat-shell="company"). Table-first CRUD.
   ============================================================ */
.rcat-shell{display:flex;flex-direction:column;gap:16px;padding:24px 0}
.rcat-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rcat-title{font-size:20px;font-weight:700;margin:0 0 4px;color:var(--text-strong,#0f172a)}
.rcat-sub{font-size:13px;color:var(--text-muted,#475569);margin:0;max-width:640px;line-height:1.5}
.rcat-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rcat-search{padding:8px 12px;border:1px solid var(--border,#e2e8f0);border-radius:8px;font-size:14px;min-width:240px;background:#fff}
.rcat-search:focus{outline:none;border-color:var(--brand,#0ea5e9);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.rcat-explainer{background:#f8fafc;border:1px solid var(--border,#e2e8f0);border-radius:10px;padding:14px 16px}
.rcat-explainer>summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--text-strong,#0f172a);list-style:none}
.rcat-explainer>summary::-webkit-details-marker{display:none}
.rcat-explainer>summary::before{content:"▸ ";display:inline-block;margin-right:6px;transition:transform .15s}
.rcat-explainer[open]>summary::before{transform:rotate(90deg)}
.rcat-explainer__body{padding-top:10px;display:flex;flex-direction:column;gap:8px}
.rcat-explainer__body p{margin:0;font-size:13px;line-height:1.55;color:var(--text-muted,#475569)}
.rcat-explainer__body strong{color:var(--text-strong,#0f172a);font-weight:600}
.rcat-body{background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:10px;overflow:hidden}
.rcat-table-wrap{overflow-x:auto}
.rcat-table{width:100%;border-collapse:collapse;font-size:13px}
.rcat-table thead th{background:#f1f5f9;text-align:left;padding:10px 12px;font-weight:600;color:var(--text-strong,#0f172a);border-bottom:1px solid var(--border,#e2e8f0);white-space:nowrap;position:sticky;top:0}
.rcat-table tbody td{padding:10px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.rcat-table tbody tr:hover{background:#fafbfc}
.rcat-table tbody tr.is-retired{opacity:.5}
.rcat-table tbody tr.is-retired td:first-child::before{content:"⛔ ";margin-right:4px}
.rcat-brand{font-weight:600;color:var(--text-strong,#0f172a)}
.rcat-model{color:var(--text-muted,#475569);font-size:12px;margin-top:2px}
.rcat-scope{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.rcat-scope--coach{background:#e0e7ff;color:#3730a3}
.rcat-scope--company{background:#d1fae5;color:#065f46}
.rcat-cell-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rcat-cell-num.is-empty{color:#cbd5e1}
.rcat-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.rcat-actions .btn{padding:5px 10px;font-size:12px}
.rcat-empty{padding:32px;text-align:center;color:var(--text-muted,#475569);font-size:14px}
.rcat-status{font-size:12px;color:var(--text-muted,#475569);min-height:18px}
.rcat-status.is-error{color:#b91c1c}
.rcat-status.is-ok{color:#047857}

/* Modal for add / edit */
.rcat-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:9500;padding:24px}
.rcat-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(15,23,42,.3);max-width:920px;width:100%;max-height:90vh;display:flex;flex-direction:column}
.rcat-modal__header{padding:20px 24px;border-bottom:1px solid var(--border,#e2e8f0);display:flex;justify-content:space-between;align-items:center;gap:16px}
.rcat-modal__title{margin:0;font-size:18px;font-weight:700;color:var(--text-strong,#0f172a)}
.rcat-modal__close{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--text-muted,#475569);padding:0;width:32px;height:32px;border-radius:8px}
.rcat-modal__close:hover{background:#f1f5f9;color:#0f172a}
.rcat-modal__body{padding:20px 24px;overflow-y:auto;flex:1}
.rcat-modal__footer{padding:16px 24px;border-top:1px solid var(--border,#e2e8f0);display:flex;justify-content:flex-end;gap:8px}
.rcat-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.rcat-form-row--full{grid-template-columns:1fr}
.rcat-field{display:flex;flex-direction:column;gap:4px}
.rcat-field label{font-size:12px;font-weight:600;color:var(--text-strong,#0f172a)}
.rcat-field input,.rcat-field textarea,.rcat-field select{padding:8px 10px;border:1px solid var(--border,#e2e8f0);border-radius:6px;font-size:13px;background:#fff}
.rcat-field input:focus,.rcat-field textarea:focus,.rcat-field select:focus{outline:none;border-color:var(--brand,#0ea5e9);box-shadow:0 0 0 2px rgba(14,165,233,.15)}
.rcat-field-hint{font-size:11px;color:var(--text-muted,#475569);margin-top:2px}
.rcat-section-title{font-size:14px;font-weight:700;color:var(--text-strong,#0f172a);margin:20px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border,#e2e8f0)}
.rcat-tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rcat-tier-block{border:1px solid var(--border,#e2e8f0);border-radius:8px;padding:12px;background:#fafbfc}
.rcat-tier-block__label{font-size:12px;font-weight:700;color:var(--text-strong,#0f172a);margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.rcat-tier-block .rcat-field{margin-bottom:8px}
.rcat-tier-block .rcat-field:last-child{margin-bottom:0}

/* v261 (2026-08-10 Chris) — Formula info-icon tooltips. Every Internal Only
   row has a small ⓘ button next to its label. Click opens a popover with
   the formula in symbolic form + the same formula with live numbers
   substituted. Popover is positioned absolutely relative to the button. */
.formula-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;padding:0;border:none;background:none;color:var(--text-muted,#64748b);font-size:14px;line-height:1;cursor:pointer;vertical-align:middle;border-radius:50%;transition:color .12s ease,background .12s ease}
.formula-info:hover,.formula-info:focus-visible{color:var(--accent,#0ea5a4);background:var(--surface-2,#f1f5f9);outline:none}
.formula-info[aria-expanded="true"]{color:var(--accent,#0ea5a4);background:var(--surface-2,#f1f5f9)}
.formula-popover{position:absolute;z-index:9999;max-width:min(360px,calc(100vw - 32px));background:#0f172a;color:#f8fafc;padding:12px 14px;border-radius:8px;box-shadow:0 12px 32px rgba(15,23,42,.28);font-size:13px;line-height:1.45;pointer-events:auto}
.formula-popover__title{font-weight:700;margin:0 0 6px;font-size:13px;color:#f8fafc;text-transform:none;letter-spacing:0}
.formula-popover__row{margin:4px 0}
.formula-popover__row--muted{color:#94a3b8;font-size:12px;margin-top:6px}
.formula-popover__formula{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:rgba(255,255,255,.08);padding:6px 8px;border-radius:5px;display:block;word-break:break-word}
.formula-popover__arrow{position:absolute;width:10px;height:10px;background:#0f172a;transform:rotate(45deg)}
.formula-popover__close{position:absolute;top:6px;right:8px;background:none;border:none;color:#94a3b8;font-size:16px;cursor:pointer;padding:2px 6px;line-height:1}
.formula-popover__close:hover{color:#f8fafc}

/* v298b (2026-08-12 Chris) — System variable chips inside coach + company
   admin template editors. Renders alongside the per-template variables
   panel; clicks insert a {{token}} into the last-focused textarea in the
   surrounding form. Compact and unobtrusive so it doesn't dominate the
   editor. */
.cqt-sysvars {
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: rgba(0, 105, 111, 0.04);
  border: 1px solid rgba(0, 105, 111, 0.14);
  border-radius: 10px;
}
.cqt-sysvars__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cqt-sysvars__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #28251D);
}
.cqt-sysvars__hint {
  font-size: 12px;
  color: var(--text-muted, #7A7974);
}
.cqt-sysvars__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cqt-sysvar-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid rgba(0, 105, 111, 0.20);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text, #28251D);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.cqt-sysvar-chip:hover {
  background: rgba(0, 105, 111, 0.08);
  border-color: rgba(0, 105, 111, 0.35);
}
.cqt-sysvar-chip:active { transform: translateY(1px); }
.cqt-sysvar-chip code {
  font-family: var(--font-code, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  color: #01696F;
  background: transparent;
  padding: 0;
}
.cqt-sysvar-chip span {
  color: var(--text-muted, #7A7974);
  font-size: 11.5px;
}
.cqt-sysvars__flash {
  margin-top: 8px;
  padding: 6px 10px;
  background: #FFF4D9;
  border: 1px solid #F0D48A;
  border-radius: 8px;
  color: #7A5A00;
  font-size: 12px;
}
[data-theme="dark"] .cqt-sysvars {
  background: rgba(79, 152, 163, 0.10);
  border-color: rgba(79, 152, 163, 0.28);
}
[data-theme="dark"] .cqt-sysvar-chip {
  background: #1C1B19;
  border-color: rgba(79, 152, 163, 0.35);
  color: var(--text, #CDCCCA);
}
[data-theme="dark"] .cqt-sysvar-chip:hover {
  background: rgba(79, 152, 163, 0.18);
  border-color: rgba(79, 152, 163, 0.55);
}
[data-theme="dark"] .cqt-sysvar-chip code { color: #7ECBD3; }
[data-theme="dark"] .cqt-sysvars__flash {
  background: rgba(240, 212, 138, 0.14);
  border-color: rgba(240, 212, 138, 0.4);
  color: #F0D48A;
}

/* v300 (2026-08-12 Chris) \u2014 Rich-text editor styles.
   Applied to the toolbar+editor wrapper injected by rte.v1.js when a
   coach-authored textarea gets progressive-enhanced. Also applied to
   .rte containers on the public quote page so <strong>/<em>/<u>/<ul>/<li>
   render with consistent typography. */

.rte {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border, #D4D1CA);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.rte__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(0, 105, 111, 0.04);
  border-bottom: 1px solid var(--border, #D4D1CA);
  flex-wrap: wrap;
}
.rte__btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text, #28251D);
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 6px;
  cursor: pointer;
  min-width: 28px;
  transition: background 100ms ease, border-color 100ms ease;
}
.rte__btn:hover {
  background: #fff;
  border-color: rgba(0, 105, 111, 0.35);
}
.rte__btn:active { transform: translateY(1px); }
.rte__btn strong { font-weight: 700; }
.rte__btn em     { font-style: italic; }
.rte__btn u      { text-decoration: underline; }
.rte__sep {
  width: 1px;
  height: 20px;
  background: var(--border, #D4D1CA);
  margin: 0 4px;
}
.rte__edit {
  padding: 10px 12px;
  min-height: 120px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #28251D);
  outline: none;
  background: #fff;
}
.rte__edit--compact { min-height: 72px; }
.rte__edit--readonly {
  background: #F7F6F2;
  color: var(--text-muted, #7A7974);
  cursor: not-allowed;
}
.rte__edit:focus { outline: 2px solid rgba(0, 105, 111, 0.35); outline-offset: -2px; }
.rte__edit p     { margin: 0 0 8px; }
.rte__edit p:last-child { margin-bottom: 0; }
.rte__edit strong { font-weight: 700; }
.rte__edit em     { font-style: italic; }
.rte__edit u      { text-decoration: underline; }
.rte__edit ul     { margin: 6px 0 8px; padding-left: 22px; }
.rte__edit ul li  { margin: 2px 0; }

/* Renderer defaults on the public quote page. .rte is added to the wrapper
   div around any rich-text field so consistent typography carries through. */
.rte p { margin: 0 0 8px; }
.rte p:last-child { margin-bottom: 0; }
.rte strong { font-weight: 700; }
.rte em     { font-style: italic; }
.rte u      { text-decoration: underline; }
.rte ul     { margin: 6px 0 8px; padding-left: 22px; }
.rte ul li  { margin: 2px 0; }
/* Inline variant \u2014 used for line-item descriptions inside a table cell.
   Removes paragraph margins so a single <p> reads as inline text. */
.rte--inline p { display: inline; margin: 0; }
.rte--inline ul { margin: 0; display: inline-block; vertical-align: top; }

[data-theme="dark"] .rte { background: #1C1B19; border-color: rgba(79, 152, 163, 0.28); }
[data-theme="dark"] .rte__toolbar { background: rgba(79, 152, 163, 0.10); border-color: rgba(79, 152, 163, 0.28); }
[data-theme="dark"] .rte__btn { color: var(--text, #CDCCCA); }
[data-theme="dark"] .rte__btn:hover { background: #201F1D; border-color: rgba(79, 152, 163, 0.55); }
[data-theme="dark"] .rte__edit { background: #1C1B19; color: var(--text, #CDCCCA); }
[data-theme="dark"] .rte__edit--readonly { background: #171614; color: var(--text-muted, #797876); }

/* ============================================================================
   v308 (2026-08-13 Chris) — Add-ons > Subscriptions sub-tab
   ============================================================================
   Pricing cards, usage bar, and dev testing panel for AI Lighting Preview.
   Sits under the Add-ons > Subscriptions sub-tab in Company Admin.

   Design intent:
   - Pricing cards read as a scannable grid, not a wall of text.
   - "Most popular" tier subtly elevated with border + shadow, not screaming.
   - Usage bar uses Nexus teal for normal, warm amber near cap, error red over.
   - Dev panel is visually distinct (warmer surface, dashed border) so Chris
     can't confuse it with the customer-facing controls.
*/
.addon-billing-card { margin-top: 14px; }

.addon-billing-status {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f4f7f6;
  border: 1px solid #e5ebe9;
  color: #28251d;
}
.addon-billing-status--warn {
  background: #fff6ea;
  border-color: #f5d9a8;
  color: #7a4a00;
}
.addon-billing-status p { margin: 0 0 8px; }
.addon-billing-status p:last-child { margin-bottom: 0; }

.addon-billing-usage {
  margin-top: 8px;
}
.addon-billing-usage__bar {
  position: relative;
  height: 8px;
  background: #e5ebe9;
  border-radius: 999px;
  overflow: hidden;
}
.addon-billing-usage__bar > span {
  display: block;
  height: 100%;
  background: #01696f; /* Nexus teal */
  border-radius: 999px;
  transition: width 220ms ease;
}
.addon-billing-status--warn .addon-billing-usage__bar > span {
  background: #964219; /* Nexus warning */
}
.addon-billing-usage__label {
  margin: 6px 0 0;
  font-size: 13px;
  color: #7a7974;
  font-variant-numeric: tabular-nums;
}

.addon-billing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.addon-plan {
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid #d4d1ca;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.addon-plan--highlight {
  border-color: #01696f;
  box-shadow: 0 4px 14px rgba(1, 105, 111, 0.08);
}
.addon-plan--current {
  border-color: #01696f;
  background: #f2f8f8;
}
.addon-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.addon-plan__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #28251d;
}
.addon-plan__badge {
  font-size: 11px;
  font-weight: 600;
  color: #01696f;
  background: #d8ecec;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.addon-plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.addon-plan__price-amount {
  font-size: 26px;
  font-weight: 700;
  color: #28251d;
  font-variant-numeric: tabular-nums;
}
.addon-plan__price-sub {
  font-size: 13px;
  color: #7a7974;
}
.addon-plan__tagline {
  margin: 0;
  font-size: 13px;
  color: #7a7974;
  line-height: 1.45;
}
.addon-plan__bullets {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  color: #28251d;
  line-height: 1.55;
}
.addon-plan__bullets li { margin: 2px 0; }
.addon-plan__cta {
  margin-top: auto;
  padding-top: 6px;
}
.addon-plan__cta .btn { width: 100%; justify-content: center; }

/* Dev testing panel — visually distinct so nobody ships it as a customer feature. */
.addon-billing-devpanel {
  margin-top: 20px;
  border-style: dashed;
  border-color: #d19900;
  background: #fffbf1;
}
.addon-billing-dev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.addon-billing-dev-actions .btn { padding: 6px 12px; font-size: 13px; }

/* v309 (2026-08-13 Chris) — Subscriptions restructure
   Base plan + full-bundle placeholder + coming-soon cards.
   Base plan uses a subtle teal-tinted top so it reads as "the account itself";
   bundle uses a warm gold accent to hint at the upsell without shouting;
   coming-soon cards get a muted background so priced cards visually pop. */
.addon-billing-base {
  border-left: 3px solid #01696f;
}
.addon-billing-bundle {
  border-left: 3px solid #d19900;
  background: #fffbf1;
}
.addon-billing-bundle .integ-card__title .addon-plan__badge {
  background: #d19900;
  color: #ffffff;
  margin-left: 8px;
  vertical-align: middle;
  font-size: 10px;
}
.addon-billing-soon {
  background: #fafaf7;
  border-color: #e5ebe9;
}
.addon-billing-soon__bullets {
  margin-top: 12px;
  padding-left: 20px;
  font-size: 13.5px;
  color: #28251d;
  line-height: 1.6;
}
.addon-billing-soon__bullets li { margin: 3px 0; }
.addon-billing-soon__cta {
  margin-top: 14px;
}

/* v362b (2026-08-17 Chris) — Consolidated Base plan card uses the same
   .contract-mode-card* layout as Contracts. Add a "sale" pill variant
   (warm gold) and a "soon" card variant (dimmed) that the contracts card
   didn't need. */
.contract-mode-card__pill--sale {
  color: #7a3f00;
  background: #ffe9b8;
}
.contract-mode-card--soon {
  background: #fafaf7;
  border-color: #e5ebe9;
  opacity: 0.9;
}
.contract-mode-card--soon .contract-mode-card__price-headline {
  color: #7a7974;
  font-size: 18px;
}

/* v362c (2026-08-17 Chris) — struck-out original price beside the launch
   price on the Base plan card. Struck price is muted + smaller so the
   $99 launch price stays the anchor number. */
.contract-mode-card__price-strike {
  color: #7a7974;
  font-size: 17px;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(122, 121, 116, 0.7);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.contract-mode-card__price-launch {
  color: #01696f;
}

/* v310 (2026-08-13 Chris) — Free—included cards inside Subscriptions
   GHL messaging + native contract signing. Green accent left border and a
   subtle green-tinted "Free — included" badge so they read as active perks,
   not add-ons to buy. */
.addon-billing-included {
  border-left: 3px solid #437a22;
}
.addon-billing-included__badge {
  background: #e5f2dc !important;
  color: #2e5615 !important;
}
.addon-billing-included__cta {
  margin-top: 12px;
}

/* v312 (2026-08-13 Chris) — Company Admin sub-tab bar for the Quoting group.
   Slightly smaller pill-style tabs, indented under the main .cad-tabs so
   the hierarchy reads. Hidden by default via [hidden]; JS unhides it when
   the active tab is a Quoting sub-panel. */
.cad-subtabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-top: 10px;
  border-radius: 8px;
  background: var(--surface-subtle-2, #ECECE6);
  position: relative;
  flex-wrap: wrap;
}
.cad-subtabs[hidden] { display: none; }
.cad-subtab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted, #7A7974);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.cad-subtab:hover { color: var(--text-strong, #1E2A52); }
.cad-subtab.is-active {
  background: var(--surface-card, #fff);
  color: var(--text-strong, #1E2A52);
  box-shadow: 0 1px 2px rgba(30,42,82,0.06);
}

/* -----------------------------------------------------------------------------
 * Spec 38 §12.1 — Company Admin › Integrations pill bar.
 *
 * Style mirrors .cad-subtabs (soft pill group with active-white chip) so the
 * two feel like the same design language. Rendered inside a [data-cad-panel]
 * so it sits below the top-level Company Admin tabs and above the pill body.
 * -------------------------------------------------------------------------- */
.integ-pills {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: var(--surface-subtle-2, #ECECE6);
  flex-wrap: wrap;
}
.integ-pill {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted, #7A7974);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.integ-pill:hover { color: var(--text-strong, #1E2A52); }
.integ-pill.is-active {
  background: var(--surface-card, #fff);
  color: var(--text-strong, #1E2A52);
  box-shadow: 0 1px 2px rgba(30,42,82,0.06);
}
.integ-pill-body {
  display: block;
}
[data-theme="dark"] .integ-pills { background: #24293f; }
[data-theme="dark"] .integ-pill.is-active { background: #1C1B19; color: #F5F5F0; }

/* Spec 38 §7 — Stripe onboarding "requirements due" list on the pill body. */
.integ-req-list {
  margin: 0.5rem 0 0 0;
  padding-left: 1.2rem;
  color: var(--color-text-muted, #7A7974);
  font-size: 0.9em;
}
.integ-req-list li { margin: 0.15rem 0; }
.integ-req-list code {
  background: var(--color-surface-alt, #F2F1EC);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* -----------------------------------------------------------------------------
 * Spec 28 — Contract handling mode option cards (Subscriptions › Contracts).
 * Mirrors the .addon-plan tier-card look so the two card rows on the same
 * screen feel like the same design language.
 * -------------------------------------------------------------------------- */
.contract-mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.contract-mode-card {
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid #d4d1ca;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 260px;
}
.contract-mode-card--current {
  border-color: #01696f;
  background: #f2f8f8;
  box-shadow: 0 4px 14px rgba(1, 105, 111, 0.08);
}
.contract-mode-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.contract-mode-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #28251d;
}
.contract-mode-card__pill {
  font-size: 11px;
  font-weight: 600;
  color: #01696f;
  background: #d8ecec;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.contract-mode-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contract-mode-card__price-headline {
  font-size: 22px;
  font-weight: 700;
  color: #28251d;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.contract-mode-card__price-suffix {
  font-size: 12px;
  color: #7a7974;
}
.contract-mode-card__desc {
  margin: 0;
  font-size: 13px;
  color: #28251d;
  line-height: 1.45;
}
.contract-mode-card__bullets {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  color: #28251d;
  line-height: 1.55;
}
.contract-mode-card__bullets li { margin: 2px 0; }
.contract-mode-card__cta-row {
  margin-top: auto;
  padding-top: 6px;
}
.contract-mode-card__cta { width: 100%; justify-content: center; }
.contract-mode-cards__status {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 12px;
  color: #7a7974;
}