/* Barker Publishing House Cockpit: the design system. Documented in crm/docs/DESIGN.md.
   Tokens come from the live site (website/assets/css/main.css :root). Mobile first; breakpoints 768 and 1200.
   Rules held everywhere: text 16px or larger, tap targets 44px or larger, one gold primary per screen,
   a light page with white cards in every theme, focus rings on everything, reduced motion respected. */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;

  /* Gold ladder (site --ember-*) */
  --ember-050: #FBF4E4;
  --ember-100: #F3E4C2;
  --ember-200: #EED097;
  --ember-300: #E6B95E;
  --ember-400: #DBA231;
  --ember-500: #CC8A1B;
  --ember-600: #AA6F11;
  --ember-700: #82550E;
  --ember-800: #5E3E0A;

  /* Paper neutrals (site --paper-*) */
  --paper-0: #FFFFFF;
  --paper-50: #FCFAF6;
  --paper-100: #F7F2E9;
  --paper-200: #EFE7D8;

  /* Navy ink (site --ink-*), the site's navy tints, and one derived chart step */
  --ink-950: #131B2F;
  --ink-900: #1A2440;
  --ink-800: #26324F;
  --ink-500: #3B528D; /* the ink hue (OKLCH h 266) at L 0.45, C 0.10: the navy that passes the dataviz chart checks */
  --ink-100: #D6DCEA;
  --ink-050: #F6F8FC;

  /* Status (fixed meaning, always with an icon and a word) */
  --good-700: #2F6B3A;
  --good-200: #BBD6C1;
  --good-050: #EAF3EC;
  --alert-700: #9A2F26;
  --alert-600: #B3382E; /* the site's oxblood */
  --alert-200: #F3B8B2;
  --alert-050: #FBEDEB;

  /* Roles */
  --page: var(--paper-50);
  --surface: var(--paper-0);
  --surface-2: var(--paper-100);
  --text-strong: #131B2F;
  --text-body: #453D32;
  --text-muted: #6F6455;
  --line: rgba(34, 27, 18, 0.12);
  --line-soft: rgba(34, 27, 18, 0.07);
  --line-input: #8C8172; /* 3.8:1 on white, the WCAG non-text minimum for a field edge */
  --link: var(--ink-800);
  --link-hover: var(--ink-500);
  --focus: var(--ember-600);

  /* Charts (validated: see DESIGN.md, Charts) */
  --series-1: var(--ink-500);
  --series-2: var(--ember-600);
  --meter-fill: var(--ember-600);
  --meter-track: var(--ember-100);
  --chart-grid: rgba(34, 27, 18, 0.10);

  /* Type */
  --font-display: 'Fraunces', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-meta: 1rem;        /* 16px, the floor */
  --fs-body: 1.0625rem;   /* 17px, the site's body size */
  --fs-lead: 1.1875rem;   /* 19px */
  --fs-h3: 1.1875rem;     /* 19px, Outfit 600 */
  --fs-h2: clamp(1.375rem, 1.25rem + 0.4vw, 1.5rem);
  --fs-h1: clamp(2rem, 1.7rem + 1vw, 2.5rem);
  --fs-figure: clamp(2rem, 1.75rem + 0.9vw, 2.5rem);

  /* Space: a 4px grid */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  --r-sm: 8px;
  --r-md: 14px;
  --r-pill: 999px;
  --tap: 44px;
  --field-h: 48px;

  --shadow-soft: 0 1px 2px rgba(34, 27, 18, 0.05), 0 14px 34px -18px rgba(126, 82, 9, 0.18);
  --shadow-lift: 0 2px 6px rgba(34, 27, 18, 0.06), 0 28px 64px -22px rgba(126, 82, 9, 0.26);
  --shadow-ember: 0 10px 24px -12px rgba(204, 138, 27, 0.55);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t-med: 0.3s;
}

/* Dark mode keeps the page light and only softens it: warmer page, off-white cards, no glare. */
@media (prefers-color-scheme: dark) {
  :root {
    --page: var(--paper-100);
    --surface: var(--paper-50);
    --surface-2: var(--paper-200);
    --text-strong: #1A2440;
    --shadow-soft: 0 1px 2px rgba(34, 27, 18, 0.06);
    --shadow-lift: 0 2px 8px rgba(34, 27, 18, 0.08);
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-body);
  background-color: var(--page);
  /* the site's paper grain, behind the cards only */
  background-image: url("../img/paper-grain.svg");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 var(--s-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; color: var(--text-strong); }
h1, h2, h3 { margin: 0; color: var(--text-strong); text-wrap: balance; }
h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 450; line-height: 1.1; letter-spacing: -0.015em; font-optical-sizing: auto; }
h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; font-optical-sizing: auto; }
h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink-900); color: #fff; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.muted { color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 50; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-sm); background: var(--ink-950); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s-2); color: #fff; }

/* ---------- 3. Shell: header, menu, main, footer ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }

.top {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand menu" "who who";
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3);
  background: var(--surface);
}
/* the site's gold hairline, under the header */
.top::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember-400) 12%, var(--ember-400) 88%, transparent);
  opacity: 0.55;
}
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--tap); min-width: 0; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
/* The emblem is a dark square tile with no transparency: it sits as a rounded app-icon tile with a faint gold edge. */
.brand-mark { width: 36px; height: 36px; flex: none; border-radius: 9px; box-shadow: 0 0 0 1.5px var(--ember-500), 0 2px 6px rgba(19, 27, 47, 0.18); }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.005em; color: var(--text-strong); }
.brand-name span { color: var(--ember-700); }
.brand-app { font-size: var(--fs-meta); color: var(--text-muted); }
.who { grid-area: who; display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-meta); color: var(--text-strong); }
.who-name { font-weight: 600; }
.who-role { display: inline-flex; align-items: center; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--ink-050); border: 1px solid var(--ink-100); color: var(--ink-900); }
.btn-menu { grid-area: menu; }
@media (max-width: 767px) { .brand-name span { display: block; } }

@media (min-width: 768px) {
  .top {
    position: sticky; top: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand who menu";
    gap: var(--s-4);
    padding: var(--s-3) var(--s-6);
  }
  .brand-text { flex-direction: row; align-items: baseline; gap: var(--s-3); }
  .brand-name { font-size: 1.3125rem; }
}
@media (min-width: 1200px) { .top { padding-inline: var(--s-8); } }

/* Menu: a right slide-in panel. Native popover where supported; app.js toggles .is-open elsewhere. */
.menu-panel { display: none; }
.menu-panel:popover-open { display: flex; }
.menu-panel.is-open { display: flex; }
.menu-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 40;
  flex-direction: column;
  width: min(22rem, 88vw);
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--s-4) var(--s-4) var(--s-6);
  overflow-y: auto;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-body);
  box-shadow: -24px 0 60px -30px rgba(19, 27, 47, 0.45);
}
.menu-panel::backdrop { background: rgba(19, 27, 47, 0.38); }
.menu-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(19, 27, 47, 0.38); }
@media (prefers-reduced-motion: no-preference) {
  .menu-panel:popover-open, .menu-panel.is-open { animation: menu-in var(--t-med) var(--ease-out); }
}
@keyframes menu-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.menu-who { margin: 0; font-size: var(--fs-meta); color: var(--text-muted); }
.menu-list { list-style: none; margin: 0 0 var(--s-6); }
.menu-list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-strong); font-size: 1.1875rem; font-weight: 500; text-decoration: none;
}
.menu-list a:hover { background: var(--surface-2); color: var(--text-strong); }
.menu-list a[aria-current="page"] { background: var(--ink-050); color: var(--ink-950); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ink-100); }
.menu-list a[aria-current="page"]::after { content: "You are here"; font-size: var(--fs-meta); font-weight: 500; color: var(--ink-500); }
.menu-list li + li { margin-top: var(--s-1); }
.menu-signout { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }

.main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-16); }
@media (min-width: 768px) { .main { padding: var(--s-8) var(--s-6) var(--s-16); } }
@media (min-width: 1200px) { .main { padding: var(--s-10) var(--s-8) var(--s-16); } }

.foot { padding: var(--s-6) var(--s-4) var(--s-8); text-align: center; font-size: var(--fs-meta); color: var(--text-muted); }

/* Messages from the server (one per page) */
.flash { display: flex; align-items: flex-start; gap: var(--s-3); margin: 0 0 var(--s-6); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--good-050); border: 1px solid var(--good-200); color: var(--good-700); font-weight: 500; }
.form-error { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--alert-050); border: 1px solid var(--alert-200); color: var(--alert-700); font-weight: 600; }
.form-error .icon, .flash .icon { margin-top: 0.15em; }

/* ---------- 4. Page head ---------- */
.page-head { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-6); }
.page-head-text { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.page-sub { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.page-actions .btn-primary { width: 100%; }
.back { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); margin: calc(var(--s-2) * -1) 0 var(--s-2); font-weight: 500; text-decoration: none; }
@media (min-width: 768px) {
  .page-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--s-6); }
  .page-actions { flex-wrap: nowrap; justify-content: flex-end; }
  .page-actions .btn-primary { width: auto; }
}

/* ---------- 5. Cards and sections ---------- */
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--shadow-soft); padding: var(--s-5); min-width: 0; }
@media (min-width: 768px) { .card { padding: var(--s-6); } }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.card-head h2 { font-size: 1.3125rem; }
.card-head .count { font-size: var(--fs-meta); color: var(--text-muted); }
.card-foot { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.section { margin-top: var(--s-8); }
.section > h2 { margin-bottom: var(--s-4); }
.section-flush { margin-top: 0; }
.filter-row { margin-bottom: var(--s-6); }
.period { margin-bottom: var(--s-6); }
.period .input-row { margin-top: var(--s-4); max-width: 34rem; }
.step-actions { margin-top: var(--s-5); }
.hint + .btn { margin-top: var(--s-3); }
.grid-2, .grid-3 { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stack > * + * { margin-top: var(--s-5); }

/* Definition lists for facts (attribution, book, quote totals) */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin: 0; }
.facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.facts dt { font-size: var(--fs-meta); color: var(--text-muted); }
.facts dd { margin: 0; color: var(--text-strong); font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 768px) { .facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); } }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); min-width: var(--tap);
  padding: 0.55rem 1.25rem;
  border: 1.5px solid var(--ink-800);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-950);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--ink-050); color: var(--ink-950); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The one gold action per screen (the site's ember pill, navy text 5.9:1) */
.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ember-500), var(--ember-400));
  color: var(--ink-950);
  box-shadow: var(--shadow-ember);
  min-height: 52px;
  padding-inline: 1.75rem;
  font-size: var(--fs-lead);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--ember-400), var(--ember-300)); color: var(--ink-950); box-shadow: 0 16px 34px -14px rgba(204, 138, 27, 0.6); transform: translateY(-1px); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-900); padding-inline: var(--s-3); }
.btn-quiet:hover { background: var(--surface-2); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { border-color: var(--line); background: var(--surface-2); color: var(--text-muted); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- 7. Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field > label, .field-label { font-weight: 600; color: var(--text-strong); }
.hint { margin: 0; max-width: 60ch; font-size: var(--fs-meta); color: var(--text-muted); }
.field-error { margin: 0; font-size: var(--fs-meta); color: var(--alert-700); font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="url"], select, textarea {
  width: 100%;
  min-height: var(--field-h);
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-strong);
  font-size: var(--fs-body);
  line-height: 1.4;
}
textarea { min-height: 7.5rem; resize: vertical; }
select { appearance: none; padding-right: 2.5rem; background-image: url("../img/chevron-down.svg"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.1rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink-800); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alert-600); border-width: 2px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
.check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; cursor: pointer; color: var(--text-strong); }
.check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ink-800); }
.input-row { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .input-row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.input-addon { position: relative; }
.input-addon input { padding-right: 2.5rem; }
.input-addon span { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

/* Numbered steps: every form is 1, 2, 3 */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li { position: relative; counter-increment: step; padding-left: 3.25rem; min-height: 2.5rem; }
.steps > li + li { margin-top: var(--s-6); }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.2rem;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--ember-050);
  border: 1.5px solid var(--ember-300);
  color: var(--ember-800);
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1;
}
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.125rem - 0.75px); top: 2.35rem; bottom: calc(var(--s-6) * -1 + 0.4rem); width: 1.5px; background: var(--ember-100); }
.step-title { margin-bottom: var(--s-3); font-size: var(--fs-h3); }
@media (max-width: 767px) {
  .steps > li { padding-left: 2.75rem; }
  .steps > li::before { width: 2rem; height: 2rem; font-size: 1rem; }
  .steps > li:not(:last-child)::after { left: calc(1rem - 0.75px); top: 2.1rem; }
}
.steps > li > .field + .field, .steps > li > .field + .input-row, .steps > li > .input-row + .field { margin-top: var(--s-4); }

/* Quote builder: one row per price-list service */
.builder { max-width: 52rem; }
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.services > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pick total" "qty qty"; align-items: center; gap: 0 var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft); }
.service-pick { grid-area: pick; }
.service-price { display: block; font-size: var(--fs-meta); color: var(--text-muted); font-weight: 400; }
.service-qty { grid-area: qty; display: flex; align-items: center; gap: var(--s-3); padding: 0 0 var(--s-2) calc(24px + var(--s-3)); }
.service-qty label { min-width: 4.5rem; font-size: var(--fs-meta); color: var(--text-muted); white-space: nowrap; }
.service-qty input { width: 9rem; }
.service-total { grid-area: total; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; text-align: right; }
.services > li.is-off .service-total, .services > li:has(.service-pick input:not(:checked)) .service-total { color: var(--text-muted); font-weight: 400; }
.services > li:has(.service-pick input:not(:checked)) .service-qty { display: none; }
@media (min-width: 768px) {
  .services > li { grid-template-columns: minmax(0, 1fr) 14rem 7.5rem; grid-template-areas: "pick qty total"; }
  .service-qty { padding: 0; justify-content: flex-end; }
}
.services > li > .field-error { grid-column: 1 / -1; padding: 0 0 var(--s-2) calc(24px + var(--s-3)); }
.subtotal { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-3); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* Segmented choice (period picker, tabs) */
.segmented, .tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.segmented a, .tabs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-900);
  font-weight: 500; text-decoration: none;
}
.segmented a:hover, .tabs a:hover { border-color: var(--ink-800); color: var(--ink-950); }
.segmented a[aria-current], .tabs a[aria-current] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; font-weight: 600; }
.segmented a[aria-disabled="true"] { border-style: dashed; background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
.tabs { margin-bottom: var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }

/* ---------- 8. Pills, flags, chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.1rem 0.65rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-body);
  font-size: var(--fs-meta); font-weight: 500; line-height: 1.5;
  white-space: nowrap;
}
/* Brands: the two in scope wear the brand pair, the two legacy brands stay neutral */
.pill[data-brand="bph"] { background: var(--ink-050); border-color: var(--ink-100); color: var(--ink-900); }
.pill[data-brand="p2p"] { background: var(--surface); border-color: var(--ink-500); color: var(--ink-900); }
.pill[data-brand="barker_books"] { background: var(--paper-100); border-color: var(--line); color: var(--text-body); }
.pill[data-brand="barker_publishing"] { background: var(--surface); border-color: var(--line); color: var(--text-muted); }
/* Lead statuses, deal stages, quote statuses */
.pill[data-status="lead"], .pill[data-status="draft"] { background: var(--paper-100); border-color: var(--line); color: var(--text-body); }
.pill[data-status="consultation_booked"], .pill[data-status="in_production"], .pill[data-status="sent"] { background: var(--ink-050); border-color: var(--ink-100); color: var(--ink-900); }
.pill[data-status="viewed"] { background: var(--ink-100); border-color: #B9C3DA; color: var(--ink-950); }
.pill[data-status="quoted"], .pill[data-status="deposit_paid"] { background: var(--ink-100); border-color: #B9C3DA; color: var(--ink-950); }
.pill[data-status="awaiting_materials"] { background: var(--paper-200); border-color: var(--line); color: var(--text-strong); }
.pill[data-status="delivered"], .pill[data-status="accepted"], .pill[data-status="complete"], .pill[data-status="active"], .pill[data-status="ok"] { background: var(--good-050); border-color: var(--good-200); color: var(--good-700); }
.pill[data-status="lost"], .pill[data-status="expired"], .pill[data-status="void"], .pill[data-status="inactive"] { background: var(--surface); border-color: var(--line); color: var(--text-muted); }
/* A workflow run that reported a failure (System tab) */
.pill[data-status="failed"] { background: var(--alert-050); border-color: var(--alert-200); color: var(--alert-700); }
.pill::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; opacity: 0.75; flex: none; }
.pill[data-brand]::before { display: none; }

/* Flags: missing or wrong data, overdue. Icon plus a word, never colour alone. */
.flags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.flag {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.1rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-100);
  background: var(--ink-050);
  color: var(--ink-900);
  font-size: var(--fs-meta); font-weight: 500; line-height: 1.5;
  white-space: nowrap;
}
.flag .icon { width: 1em; height: 1em; }
.flag[data-flag="overdue"], .flag[data-flag="failed"] { border-color: var(--alert-200); background: var(--alert-050); color: var(--alert-700); }
.flag[data-flag="no_phone"], .flag[data-flag="no_email"] { border-color: var(--line); background: var(--surface); color: var(--text-body); border-style: dashed; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0.375rem 0.625rem 0.375rem var(--s-4);
  border-radius: var(--r-pill);
  background: var(--ink-050); border: 1px solid var(--ink-100);
  color: var(--ink-900); font-weight: 500; text-decoration: none;
  max-width: 100%; overflow-wrap: anywhere; /* a pasted email in the search chip wraps inside the row */
}
.chip:hover { border-color: var(--ink-800); color: var(--ink-950); }
.chip .icon { width: 1.75rem; height: 1.75rem; padding: 0.3rem; border-radius: 50%; background: var(--surface); }

/* ---------- 9. Tiles and the meter (dataviz stat-tile contract) ---------- */
.tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--s-8); padding: 0; list-style: none; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 1200px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tiles > li { display: flex; min-width: 0; }
.tiles .tile-wide { grid-column: 1 / -1; }
.tiles + .hint { margin: calc(var(--s-5) - var(--s-8)) 0 var(--s-8); } /* a quiet line under the tiles: 20 px below them, 32 px above what follows */
@media (min-width: 768px) { .tiles .tile-wide { grid-column: span 2; } }
.tile {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-1);
  width: 100%; min-height: 8.5rem;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-body);
  text-decoration: none;
}
@media (min-width: 768px) { .tile { padding: var(--s-5); } }
a.tile { transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
a.tile:hover { border-color: var(--ink-500); background: var(--paper-50); color: var(--text-body); }
.tile-label { order: 1; font-size: var(--fs-meta); font-weight: 500; color: var(--text-body); line-height: 1.35; }
.tile-value { order: 2; margin-top: auto; font-family: var(--font-body); font-size: var(--fs-figure); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; color: var(--text-strong); }
.tile-delta { order: 3; display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--fs-meta); color: var(--text-muted); }
.tile-delta .icon { width: 1em; height: 1em; stroke-width: 2.4; }
.tile-delta[data-tone="good"] { color: var(--good-700); }
.tile-delta[data-tone="bad"] { color: var(--alert-700); }
.tile-state { order: 0; display: inline-flex; align-items: center; gap: 0.3em; align-self: flex-start; margin-bottom: var(--s-1); padding: 0 0.55rem; border-radius: var(--r-pill); font-size: var(--fs-meta); font-weight: 600; line-height: 1.6; }
.tile-state .icon { width: 1em; height: 1em; stroke-width: 2.4; }
.tile[data-state="attention"] { border-color: var(--ink-100); }
.tile[data-state="attention"] .tile-state { background: var(--ink-050); color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-100); }
.tile[data-state="alert"] { border-color: var(--alert-200); }
.tile[data-state="alert"] .tile-state { background: var(--alert-050); color: var(--alert-700); }
.tile[data-state="good"] .tile-state { background: var(--good-050); color: var(--good-700); }

.meter { order: 2; display: flex; flex-direction: column; gap: var(--s-2); margin-top: auto; }
.meter-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s-2); }
.meter-figure .tile-value { order: 0; margin-top: 0; }
.meter-of { font-size: var(--fs-body); color: var(--text-muted); }
/* the bar is an SVG: the fill's width is a presentation attribute, so no style attribute ships */
.meter-bar { display: block; width: 100%; height: 14px; overflow: visible; }
.meter-bar .meter-track { fill: var(--meter-track); }
.meter-bar .meter-fill { fill: var(--meter-fill); }

/* The one thing to do next (Today) */
.next-up { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-6); padding: var(--s-5); border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--ink-100); }
.next-up-label { margin: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-500); }
.next-up-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 1.25; color: var(--text-strong); margin: 0; }
.next-up-meta { margin: 0; color: var(--text-muted); }
@media (min-width: 768px) {
  .next-up { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--s-6); }
  .next-up .btn-primary { flex: none; }
}

/* ---------- 10. Lists (consultations, waiting leads, next actions, inbox rows) ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-top: 1px solid var(--line-soft); }
.list > li:first-child { border-top: 0; }
.list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3); min-height: 64px; padding: var(--s-3) 0; color: inherit; text-decoration: none; }
a.list-row:hover .list-title { color: var(--link-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.list-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list-title { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.list-meta { font-size: var(--fs-meta); color: var(--text-muted); }
.list-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); text-align: right; }
.list-time { font-size: var(--fs-meta); font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.list-row .btn { justify-self: end; }

.list-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); grid-column: 1 / -1; }
@media (min-width: 768px) { .list-row-wide { grid-template-columns: minmax(0, 1fr) auto auto; } .list-row-wide .list-actions { grid-column: auto; } }

/* ---------- 11. Board: filters, search, the responsive table, pager ---------- */
.search { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.search input { flex: 1; min-width: 0; }
.filters { margin-bottom: var(--s-4); }
.filters > summary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-4);
  border: 1.5px solid var(--ink-800); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-950); font-weight: 600;
  cursor: pointer; list-style: none;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters[open] > summary { margin-bottom: var(--s-4); }
.filter-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
@media (min-width: 768px) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .filters > summary { display: none; }
  .filters::details-content { content-visibility: visible; } /* the filter row is always open at desktop; app.js opens it where this pseudo is missing */
  .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(2, minmax(0, 1.3fr)) minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); }
  .filter-grid input[type="date"] { padding-inline: 0.6rem; }
}
.filter-grid .field > label { font-size: var(--fs-meta); }
.result-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.result-count { margin: 0; font-weight: 600; color: var(--text-strong); }
.sort { display: flex; align-items: center; gap: var(--s-2); }
.sort label { font-size: var(--fs-meta); color: var(--text-muted); white-space: nowrap; }
.sort select { width: auto; }

/* .board: a table at 1200 px and up, one card per row below it */
.board { width: 100%; border-collapse: separate; border-spacing: 0; }
.board caption { text-align: left; }
.board thead { display: none; }
.board tbody { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .board tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--shadow-soft); min-width: 0; }
.board td { order: 2; flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 0; min-width: 0; text-align: right; }
/* pills and flags ride on one line under the name, without a label */
.board td.board-tag { order: 1; flex: 0 1 auto; }
.board td.board-tag::before { display: none; }
@media (max-width: 1199px) { .board td.board-tag:empty, .board td:empty { display: none; } }
.board td::before { content: attr(data-label); flex: none; text-align: left; font-size: var(--fs-meta); color: var(--text-muted); }
.board td[data-label=""]::before { display: none; }
.board td.board-name { order: 0; display: block; text-align: left; }
.board td.board-name::before { display: none; }
.board .board-name a, .board-link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-lead); font-weight: 600; color: var(--text-strong); text-decoration: none; }
.board .board-name a:hover, .board-link:hover { color: var(--link-hover); text-decoration: underline; }
.board .board-sub { display: block; font-size: var(--fs-meta); color: var(--text-muted); overflow-wrap: anywhere; } /* long emails break inside the card at every width */
.board a.board-sub { display: flex; align-items: center; width: fit-content; min-height: var(--tap); color: var(--link); } /* a second link in the cell (the lead on Quotes) keeps the tap size */
.board td .flags { justify-content: flex-end; }
.board .num { text-align: right; }
@media (min-width: 1200px) {
  .board { display: table; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--shadow-soft); overflow: hidden; }
  .board thead { display: table-header-group; }
  .board tbody { display: table-row-group; }
  .board tr { display: table-row; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .board th, .board td { display: table-cell; padding: var(--s-2) var(--s-3); text-align: left; vertical-align: middle; border-top: 1px solid var(--line-soft); }
  .board th:first-child, .board td:first-child { padding-left: var(--s-4); }
  .board th { border-top: 0; background: var(--surface-2); font-size: var(--fs-meta); font-weight: 600; color: var(--text-strong); line-height: 1.3; padding-block: var(--s-3); }
  .board td.board-name { min-width: 14rem; }
  .board .nowrap { white-space: nowrap; }
  .board .board-next-what { display: block; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the Leads next action: one line of text, its date under it */
  .board .pill, .board .flag { white-space: normal; border-radius: 12px; }
  .board .flags { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .board td::before { display: none; }
  .board td.board-name { display: table-cell; margin: 0; }
  .board .board-name a, .board-link { font-size: var(--fs-body); }
  .board td .flags { justify-content: flex-start; }
  .board .num, .board th.num { text-align: right; }
  .board tbody tr:hover td { background: var(--paper-50); }
  .board tfoot td { display: table-cell; font-weight: 600; color: var(--text-strong); background: var(--surface-2); }
}
/* totals: a paper card under the rows below 1200 px, the table's last row at 1200 */
.board tfoot { display: block; margin-top: var(--s-3); }
.board tfoot tr { background: var(--surface-2); box-shadow: none; }
.board tfoot td { font-weight: 600; color: var(--text-strong); }
@media (min-width: 1200px) { .board tfoot { display: table-footer-group; margin: 0; } }
/* Settings: the price list's row inputs (each tied to its row's form by the form attribute) and free-text cells */
.board-intro { margin-bottom: var(--s-4); }
.board-field { display: flex; flex-direction: column; gap: var(--s-1); width: 100%; text-align: left; }
.board-field input { font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) { .board td:has(> .board-field) { flex-wrap: wrap; } } /* on a card the label sits above a full-width field */
@media (min-width: 1200px) { .board-field { width: 10rem; } .board-field input { text-align: right; } }
.board td.board-text { text-align: left; overflow-wrap: anywhere; } /* free text (a run note, an audit change) reads left to right on a card */

.pager { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.pager-status { margin: 0; text-align: center; color: var(--text-muted); font-size: var(--fs-meta); }
.pager .btn[aria-disabled="true"] { visibility: visible; }

/* ---------- 12. Empty state (always one action) ---------- */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-6) var(--s-5); border: 1px dashed rgba(34, 27, 18, 0.22); border-radius: var(--r-md); background: var(--surface); }
.empty h2, .empty h3 { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 500; }
.empty p { max-width: 38rem; color: var(--text-body); }
.empty .btn { margin-top: var(--s-2); }
.card .empty { padding: 0; border: 0; } /* inside a card the card is the frame: no dashed card inside a card */

/* ---------- 13. Lead screen: contact block, timeline, conversation ---------- */
/* Two independent stacks at 1200 px; one column below it, in DOM order (main first, then the side rail). */
.lead-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.lead-main, .lead-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
@media (min-width: 1200px) { .lead-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.contact-flags { margin: 0 0 var(--s-5); }
.contact-top { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.contact-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.contact-pills .pill { white-space: normal; overflow-wrap: anywhere; } /* a long owner name wraps inside the card at 375 */
.contact-lines { display: grid; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.contact-lines li { display: flex; align-items: center; gap: var(--s-3); min-height: 32px; color: var(--text-strong); overflow-wrap: anywhere; }
.contact-lines .icon { color: var(--ink-500); }
.contact-actions { display: grid; gap: var(--s-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Call takes the first row on phones (.contact-call on the Lead screen, where Add note is the gold primary; .btn-primary in the comp) */
@media (max-width: 767px) { .contact-actions .btn:not(.btn-primary):not(.contact-call) { padding-inline: var(--s-2); } .contact-actions .btn:not(.btn-primary):not(.contact-call) .icon { display: none; } }
.contact-actions .btn-primary, .contact-actions .contact-call { grid-column: 1 / -1; }
@media (min-width: 768px) { .contact-actions { grid-template-columns: auto auto auto auto; justify-content: start; } .contact-actions .btn-primary, .contact-actions .contact-call { grid-column: auto; } }
.contact-note { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--fs-meta); color: var(--text-muted); }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0.6875rem; top: 0.5rem; bottom: 0.5rem; width: 1.5px; background: var(--paper-200); }
.timeline-item { position: relative; padding: 0 0 var(--s-6) 2.5rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.3rem;
  width: 0.875rem; height: 0.875rem; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--text-muted);
}
/* type markers: conversations a navy ring, money a solid navy dot, notes deep navy, forms green, the record's own events quiet */
.timeline-item[data-type="call"]::before, .timeline-item[data-type="meeting"]::before, .timeline-item[data-type="email"]::before, .timeline-item[data-type="sms"]::before, .timeline-item[data-type="whatsapp"]::before { border-color: var(--ink-500); }
.timeline-item[data-type="checkout"]::before, .timeline-item[data-type="payment"]::before, .timeline-item[data-type="quote"]::before { border-color: var(--ink-500); background: var(--ink-500); }
.timeline-item[data-type="note"]::before, .timeline-item[data-type="task"]::before { border-color: var(--ink-900); }
.timeline-item[data-type="form"]::before { border-color: var(--good-700); }
.timeline-item[data-type="system"]::before { border-color: var(--paper-200); background: var(--paper-100); }
.timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.timeline-type { font-weight: 600; color: var(--text-strong); }
.timeline-time { font-size: var(--fs-meta); color: var(--text-muted); }
.timeline-subject { margin: var(--s-1) 0 0; color: var(--text-strong); font-weight: 500; }
.timeline-body { margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-body); overflow-wrap: anywhere; }
.timeline-meta { margin: var(--s-2) 0 0; font-size: var(--fs-meta); color: var(--text-muted); }

.conv { min-width: 0; }
.conv-channels { margin-bottom: var(--s-4); }
.conv-thread { display: flex; flex-direction: column; gap: var(--s-4); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.msg { max-width: 88%; display: flex; flex-direction: column; gap: var(--s-1); }
.msg[data-dir="in"] { align-self: flex-start; }
.msg[data-dir="out"] { align-self: flex-end; align-items: flex-end; }
.msg-body { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-strong); overflow-wrap: anywhere; }
.msg[data-dir="in"] .msg-body { border-bottom-left-radius: 4px; }
.msg[data-dir="out"] .msg-body { border-bottom-right-radius: 4px; background: var(--ink-050); border-color: var(--ink-100); }
.msg-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-meta); color: var(--text-muted); }
.msg-status[data-status="failed"] { color: var(--alert-700); font-weight: 600; }
.msg-status[data-status="delivered"] { color: var(--good-700); }
.conv-compose { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }

.money-list { list-style: none; margin: 0; padding: 0; }
.money-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
.money-list li:first-child { border-top: 0; }
.money-list a { display: inline-flex; align-items: center; min-height: var(--tap); }
.money-amount { font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
/* a negative amount (a refund): muted, the minus leading; the word or the column says what it is */
.amount-neg, .money-amount.amount-neg, .tile-value.amount-neg, .board td.amount-neg { color: var(--text-muted); }

/* ---------- 14. Charts (Money). Bars are inline SVG; every label is HTML text at 16 px or more. ---------- */
.charts { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s-8); }
@media (min-width: 1200px) { .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart { margin: 0; }
.chart-head { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-4); }
.chart-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-meta); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-4); padding: 0; list-style: none; font-size: var(--fs-meta); color: var(--text-body); }
.legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend-key { width: 14px; height: 14px; border-radius: 3px; background: var(--series-1); flex: none; }
.legend-key[data-series="2"] { background: var(--series-2); }
.bars { list-style: none; margin: 0; padding: 0; }
.bar-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  grid-template-areas: "label bar value" ". detail detail";
  align-items: center;
  gap: 0 var(--s-3);
  min-height: var(--tap);
  padding: var(--s-1) 0;
  border-radius: var(--r-sm);
  outline-offset: 2px;
}
.bar-row:hover .bar-svg rect.mark { filter: brightness(1.12); }
.bar-label { grid-area: label; font-size: var(--fs-meta); color: var(--text-body); display: inline-flex; align-items: center; gap: 0.3em; }
.bar-label .icon { width: 1em; height: 1em; color: var(--alert-700); }
.bar-svg { grid-area: bar; width: 100%; height: 22px; overflow: visible; }
.bar-svg .mark-1 { fill: var(--series-1); }
.bar-svg .mark-2 { fill: var(--series-2); }
.bar-svg .gap { fill: var(--surface); }
.bar-svg .axis { fill: var(--chart-grid); }
.bar-value { grid-area: value; font-size: var(--fs-meta); font-weight: 600; color: var(--text-strong); text-align: right; min-width: 5.5rem; font-variant-numeric: tabular-nums; }
.bar-detail { grid-area: detail; display: flex; flex-wrap: wrap; gap: 0 var(--s-4); font-size: var(--fs-meta); color: var(--text-muted); }
.bar-detail span { display: inline-flex; align-items: center; gap: var(--s-2); }
.chart-scale { display: flex; justify-content: space-between; gap: var(--s-3); margin: var(--s-2) 0 0; padding-top: var(--s-2); border-top: 1px solid var(--chart-grid); font-size: var(--fs-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart-table { margin-top: var(--s-4); }
.chart-table > summary { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--link); font-weight: 600; cursor: pointer; }
.chart-table table { width: 100%; margin-top: var(--s-2); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: var(--s-2) var(--s-2); border-top: 1px solid var(--line-soft); text-align: right; font-size: var(--fs-meta); }
.chart-table th:first-child, .chart-table td:first-child { text-align: left; }
.chart-table thead th { border-top: 0; color: var(--text-strong); }
/* phones: label and value on one line, the bar full width under them */
@media (max-width: 767px) {
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar" "detail detail"; gap: var(--s-1) var(--s-3); padding: var(--s-2) 0; }
  .bar-value { min-width: 0; }
}

/* tooltip (app.js), enhancement only: every value is also printed on the row and in the table view */
.tip { position: fixed; z-index: 60; max-width: 18rem; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--ink-950); color: #fff; font-size: var(--fs-meta); line-height: 1.4; pointer-events: none; box-shadow: var(--shadow-lift); }
.tip strong { color: #fff; }

.note-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.note-line .label { font-weight: 600; color: var(--text-strong); }

/* ---------- 15. Projects ---------- */
.stages { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1200px) { .stages.stages-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* the live screen: deposit paid, in production */
.stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 2px solid var(--ink-100); }
.stage-head h2 { font-size: 1.3125rem; }
.stage-count { font-size: var(--fs-meta); color: var(--text-muted); }
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.project-title { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-lead); font-weight: 600; color: var(--text-strong); text-decoration: none; }
.project-title:hover { color: var(--link-hover); text-decoration: underline; }
.project-book { margin: 0 0 var(--s-4); font-family: var(--font-display); font-style: italic; color: var(--text-body); }
.project .facts { margin-bottom: var(--s-4); }

/* ---------- 16. Calendar week ---------- */
.week-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.week { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1200px) { .week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); } }
.day { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-soft); min-width: 0; }
@media (min-width: 1200px) { .day { min-height: 18rem; } }
.day-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-soft); }
.day-name { font-weight: 600; color: var(--text-strong); }
.day-date { font-size: var(--fs-meta); color: var(--text-muted); }
.day[aria-current="date"] { background: var(--ink-050); border: 1.5px solid var(--ink-500); }
.day[aria-current="date"] .day-date { color: var(--ink-950); font-weight: 600; }
.day-empty { margin: 0; font-size: var(--fs-meta); color: var(--text-muted); }
.event { display: flex; flex-direction: column; gap: 2px; min-height: var(--tap); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--ink-050); border: 1px solid var(--ink-100); color: var(--ink-950); text-decoration: none; }
.event:hover { border-color: var(--ink-800); color: var(--ink-950); }
.event-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.event-name { overflow-wrap: anywhere; }
.event-kind { font-size: var(--fs-meta); color: var(--text-muted); }
.event[data-kind="kickoff"] { background: var(--paper-100); border-color: var(--line); }
.event[data-status="cancelled"] { background: var(--surface); border-style: dashed; color: var(--text-muted); }
.event[data-status="cancelled"] .event-name { text-decoration: line-through; }

/* ---------- 17. Toast and modal ---------- */
.toast-region { position: fixed; left: 50%; bottom: var(--s-6); z-index: 70; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); width: min(28rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--ink-950); color: #fff; box-shadow: var(--shadow-lift); pointer-events: auto; }
.toast .icon { color: var(--ink-100); }
.toast p { margin: 0; flex: 1; }
.toast .btn-quiet { color: #fff; }
.toast .btn-quiet:hover { background: rgba(255, 255, 255, 0.12); }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in var(--t-med) var(--ease-out); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.modal { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--r-md); background: var(--surface); color: var(--text-body); box-shadow: var(--shadow-lift); }
.modal::backdrop { background: rgba(19, 27, 47, 0.42); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-6); border-bottom: 1px solid var(--line-soft); }
.modal-body { padding: var(--s-6); }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-6) var(--s-6); }

/* ---------- 18. Login, 403, message ---------- */
.login-card { max-width: 30rem; margin: var(--s-4) auto 0; }
@media (min-width: 768px) { .login-card { margin-top: var(--s-12); padding: var(--s-8); } }
.login-card h1 { margin-bottom: var(--s-2); }
.login-card .lede { margin-bottom: var(--s-6); color: var(--text-muted); }
.login-card .btn-primary { width: 100%; }
.login-card .google-signin { min-height: var(--tap); }
.message-card { max-width: 36rem; margin: var(--s-4) auto 0; }
.message-card h1 { margin-bottom: var(--s-3); }
.message-card .btn-row { margin-top: var(--s-5); }

/* ---------- 19. Public quote page (/q/<token>) ---------- */
.qp { max-width: 50rem; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-12); }
@media (min-width: 768px) { .qp { padding: var(--s-10) var(--s-6) var(--s-16); } }
.qp-head { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding-bottom: var(--s-6); margin-bottom: var(--s-6); text-align: center; position: relative; }
.qp-head::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ember-400), transparent); opacity: 0.6; }
.qp-head .brand-mark { width: 56px; height: 56px; border-radius: 13px; }
.qp-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--text-strong); }
.qp-name span { color: var(--ember-700); }
.qp-meta { margin: 0; color: var(--text-muted); }
.qp-title { margin-bottom: var(--s-2); }
/* the value block: three claims, strongest last (the rule-of-3 pass), each a lead in ink and a sentence */
.qp-value { list-style: none; display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--ink-050); border: 1px solid var(--ink-100); }
.qp-value strong { color: var(--ink-950); }
.qp-for { margin-bottom: var(--s-6); color: var(--text-muted); }
.items { width: 100%; border-collapse: collapse; margin-bottom: var(--s-5); }
.items th, .items td { padding: var(--s-3) var(--s-2); border-top: 1px solid var(--line-soft); vertical-align: top; text-align: left; }
.items thead th { border-top: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--text-strong); }
.items .num { text-align: right; white-space: nowrap; }
.items .item-sub { display: block; font-size: var(--fs-meta); color: var(--text-muted); }
@media (max-width: 767px) {
  .items thead { display: none; }
  .items tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
  .items td { display: block; padding: 0; border: 0; }
  .items td.qty { display: none; }
}
.qp-doc .totals:last-child { margin-bottom: 0; }
.totals { display: grid; gap: 0; margin: 0 0 var(--s-6); padding: var(--s-2) var(--s-5); border-radius: var(--r-md); background: var(--surface-2); }
.totals div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
.totals div:first-child { border-top: 0; }
.totals dt { color: var(--text-body); }
.totals dd { margin: 0; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; text-align: right; }
.totals .totals-due dt, .totals .totals-due dd { font-size: var(--fs-lead); color: var(--text-strong); font-weight: 600; }
.terms > summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-weight: 600; color: var(--text-strong); cursor: pointer; }
.terms-body { margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-body); }
.terms-body h2 { margin: var(--s-4) 0 var(--s-2); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; }
.qp-state { text-align: left; }
.qp-state .btn-row, .qp-state .totals { margin-top: var(--s-5); }
.qp-state .hint { margin-top: var(--s-3); }
.accept h2 { margin-bottom: var(--s-5); }
.qp-foot { margin-top: var(--s-10); text-align: center; font-size: var(--fs-meta); color: var(--text-muted); }

/* ---------- 20. Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  @page { margin: 16mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .top, .menu-panel, .foot, .skip, .toast-region, .no-print, .accept, .btn { display: none !important; }
  .card, .tile { box-shadow: none; border-color: #ccc; }
  .qp { max-width: none; padding: 0; }
  .qp-head { padding-bottom: 8mm; }
  .totals { background: none; border: 1px solid #ccc; }
  .terms > summary { display: none; }
  .terms::details-content { content-visibility: visible; }
  .terms-body { background: none; padding: 0; }
  a { color: #000; text-decoration: none; }
}