/* Treadwell BD CRM - the one stylesheet.
 *
 * The proposal tool's design language (its DESIGN.md, "The Estimator's Desk"): warm paper ground,
 * umber-tinted greys, hairline rules, ONE rationed red (active nav, primary action, focus ring),
 * flat surfaces with tonal steps rather than shadows, tabular figures, and icons from
 * js/icons.js only. Shadows are mixed from rgba(60,50,40), never black.
 *
 * Sections: tokens · base · chrome (skip link, sidebar, top bar and burger, scrim) · page layout ·
 * cards · chips · buttons · forms · tables · lists · pace bar · drawer · modal · toast · empty and
 * loading states · login · utilities · phone · print · reduced motion · the pages.
 *
 * No web font is downloaded: Inter where the machine has it, the system face otherwise.
 * The app is light-only (`color-scheme: only light`), like the tool.
 */

/* ── tokens ─────────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: only light;

  --red: #c8102e;          /* signal red: active nav, primary action, focus ring. Nothing else. */
  --red-dark: #9e001f;     /* oxblood: hover/pressed, accent text on light ground */
  --red-deep: #6c0015;     /* cellar red */
  --red-tint: #ffdad8;     /* warm red tint: selected ground */
  --red-wash: #fdf5f6;     /* faintest accent ground */

  --ink: #1b1c1c;          /* near black: body text */
  --ink-v: #5c403f;        /* umber: labels, hints, inactive nav */
  --ink-m: #6f6a62;        /* muted: tertiary and disabled (5.3:1 on white, 4.8:1 on surf-low) */

  --surf: #fbf9f8;         /* warm paper: the page ground */
  --card: #ffffff;         /* raised surfaces sit ABOVE paper */
  --surf-low: #f5f3f3;     /* recessed step, hovered rows */
  --surf-high: #e9e8e7;    /* warm stone: filled chips, tracks */
  --stone: #dbdad9;        /* heavier dividers */
  --line: #e4e2e2;         /* the 1px hairline */
  --line-u: rgba(92, 64, 63, .16);  /* umber hairline */

  /* status: a separate scale from the brand red, so chrome never reads as an alarm */
  --ok: #0f7b34;   --ok-bg: #e3f3e6;   --ok-line: #bfe3c8;
  --warn: #7a5c00; --warn-bg: #fdf6e3; --warn-line: #e8d9a8;
  --info: #4a6b8a; --info-bg: #eef3f8; --info-line: #cfdce8;
  --danger: #ba1a1a; --danger-bg: #fdecea; --danger-line: #f3c4bf;
  --amber: #f59e0b;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(60, 50, 40, .06);
  --sh-2: 0 4px 14px rgba(60, 50, 40, .10);
  --sh-3: 0 16px 44px rgba(60, 50, 40, .22);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: Consolas, "SF Mono", ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;

  --sidebar-w: 240px;
  --gutter: 28px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── base ───────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--surf); color: var(--ink);
  font: 400 14px/1.55 var(--font); font-variant-numeric: tabular-nums;
}
/* only a user's own open/close animates (auth.js adds .bd-nav-anim after the first draw) */
html.bd-nav-anim body { transition: margin-left .2s ease; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
p { margin: 0; }
a { color: var(--red-dark); text-underline-offset: 2px; }
a:hover { color: var(--red); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }   /* a class display rule must never beat [hidden] */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--red-tint); }

/* every js/icons.js glyph: never swallow a click, sit on the text's optical centre */
.tw-ico { pointer-events: none; vertical-align: -.16em; flex: none; }

/* ── chrome: skip link, sidebar (auth.js draws it), top bar and burger, scrim ───────────── */
/* FIRST PAINT (auth.js): <main> stays hidden until the role gate has decided, so a page a role
   may not open never flashes its controls; on a desktop the sidebar's width is reserved before
   auth.js has run (html:not(.bd-nav-set)), so the content does not slide sideways on load. */
html:not(.bd-gated) body:not(.login-page) main { visibility: hidden; }
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1200; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2);
  color: var(--red-dark); font-weight: 700; text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }
#main:focus, #main:focus-visible { outline: none; }
/* THE CLOSED DRAWER IS INERT: visibility:hidden takes it out of hit-testing and the tab order,
   switched with a delay on the way out so the slide stays visible while it animates.
   top + bottom (not 100vh) so it fits the visible area under a phone browser's toolbar. */
#bd-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 900; width: var(--sidebar-w);
  display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; overflow-y: auto;
  background: var(--card); border-right: 1px solid var(--line);
  transform: translateX(-100%); visibility: hidden; pointer-events: none;
}
html.bd-nav-open #bd-sidebar { transform: translateX(0); visibility: visible; pointer-events: auto; }
html.bd-nav-anim #bd-sidebar { transition: transform .2s ease, visibility 0s linear .2s; }
html.bd-nav-anim.bd-nav-open #bd-sidebar { transition: transform .2s ease, visibility 0s linear 0s; }
.bd-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bd-bison { width: 54px; height: 34px; display: block; flex: none; }
.bd-brandname { font-size: 18px; font-weight: 600; line-height: 1.1; }
.bd-brandsub { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-v); }
.bd-collapse, .bd-signout {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; padding: 4px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink-v); cursor: pointer;
}
.bd-collapse:hover, .bd-signout:hover { background: var(--surf-low); color: var(--red-dark); }
.bd-mock { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 10px 12px; }
.bd-mock-tag {
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.bd-mock-note { font-size: 11.5px; line-height: 1.4; color: var(--ink-v); }
.bd-mock-reset {
  min-height: 28px; padding: 0; border: 0; background: none; color: var(--red-dark); cursor: pointer;
  font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
.bd-mock-reset:hover { color: var(--red); }
.bd-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.bd-nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px;
  border-radius: 7px; color: var(--ink); text-decoration: none;
}
.bd-nav-item:hover { background: var(--surf-low); color: var(--ink); }
.bd-nav-item.active { background: rgba(200, 16, 46, .1); color: var(--red-dark); font-weight: 600; }
.bd-nav-ico { width: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-v); }
.bd-nav-item.active .bd-nav-ico { color: var(--red-dark); }
.bd-user {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px;
  border-radius: 9px; background: var(--surf-low);
}
.bd-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800;
}
.bd-userinfo { flex: 1; min-width: 0; }
.bd-username { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-userrole { font-size: 11px; color: var(--ink-v); }
/* desktop: the bar is just the burger, top left, shown while the menu is shut. A phone turns it
   into a full-width strip (see the phone block). */
#bd-topbar { position: fixed; top: 12px; left: 12px; z-index: 880; display: flex; align-items: center; gap: 10px; }
.bd-topbar-name { display: none; }
#bd-burger {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--sh-1);
}
/* the scrim is the other half of the shut-drawer guarantee: no display, no taps */
#bd-nav-scrim { display: none; pointer-events: none; position: fixed; inset: 0; z-index: 890; background: rgba(27, 28, 28, .4); }
@media (min-width: 768px) {
  html.bd-nav-open #bd-topbar { display: none; }
  html.bd-nav-open body, html:not(.bd-nav-set) body:not(.login-page) { margin-left: var(--sidebar-w); }
}
/* clear the fixed burger while the menu is shut, only at widths where the page's left edge
   would sit under it (.page is 1180 wide, .page-narrow 820, both with a 28px gutter) */
@media (min-width: 768px) and (max-width: 1251px) {
  html.bd-nav-set:not(.bd-nav-open) .page:not(.page-narrow) .page-header { padding-left: 56px; min-height: 44px; }
}
@media (min-width: 768px) and (max-width: 891px) {
  html.bd-nav-set:not(.bd-nav-open) .page-narrow .page-header { padding-left: 56px; min-height: 44px; }
}

/* ── page layout ────────────────────────────────────────────────────────────────────────── */
.page { max-width: 1180px; margin: 0 auto; padding: 24px var(--gutter) 72px; }
.page-narrow { max-width: 820px; }
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 16px; margin-bottom: 18px;
}
.page-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.page-sub { margin-top: 2px; color: var(--ink-v); font-size: 13px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.section { margin-top: 24px; }
.section-title {
  margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-v);
}
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack-lg { display: flex; flex-direction: column; gap: 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar .input-search { flex: 1 1 240px; max-width: 360px; }
.banner {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 14px;
  border-radius: var(--r-md); border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn);
  font-size: 13px; font-weight: 500;
}
.banner-info { border-color: var(--info-line); background: var(--info-bg); color: var(--info); }
.banner-ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.banner .tw-ico { margin-top: 2px; }

/* ── cards ──────────────────────────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.card-tight { padding: 12px; }
.card-working { background: var(--surf-low); border-radius: 10px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-title { font-size: 13px; font-weight: 700; }
.card-sub { color: var(--ink-v); font-size: 12.5px; }
.card-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
a.card, .card-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s; }
a.card:hover, .card-link:hover { border-color: var(--red); }
.card.is-done { background: var(--surf-low); }
.card.is-done .card-title { color: var(--ink-v); text-decoration: line-through; text-decoration-color: var(--ink-m); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-v); }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.stat-hint { font-size: 12px; color: var(--ink-v); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--ink-v); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── chips (always words; the tint is only reinforcement) ───────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 8px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surf-high); color: var(--ink-v);
  font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip .tw-ico { width: 12px; height: 12px; }
.chip-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.chip-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.chip-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.chip-danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.chip-plain { background: var(--card); }
/* category */
.chip-cat-bd { background: var(--card); color: var(--ink-v); }
.chip-cat-maintenance { background: #f1ecf7; border-color: #ddd0ec; color: #5b3f86; }
/* lead source */
.chip-src { background: var(--card); color: var(--ink); font-weight: 600; }
.chip-src::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-m); flex: none; }
.chip-src-current::before { background: var(--ok); }
.chip-src-dsbc::before { background: var(--info); }
.chip-src-website::before { background: var(--amber); }
.chip-src-other::before { background: var(--ink-v); }
/* cadence status */
.chip-cadence-never { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.chip-cadence-behind { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.chip-cadence-on_track { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.chip-cadence-complete { background: var(--ok); border-color: var(--ok); color: #fff; }
/* task kind */
.chip-kind-new { background: var(--red-wash); border-color: var(--red-tint); color: var(--red-dark); }
.chip-kind-followup { background: var(--surf-high); color: var(--ink-v); }
/* the "why this one" reason: a quiet sentence, allowed to wrap */
.chip-reason {
  white-space: normal; text-align: left; line-height: 1.35; padding: 3px 9px; border-radius: var(--r-md);
  background: var(--surf-low); border-color: var(--line); color: var(--ink-v); font-weight: 600;
}
.count-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--surf-high); color: var(--ink-v); font-size: 11px; font-weight: 800;
}

/* ── avatars ────────────────────────────────────────────────────────────────────────────── */
.av {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  vertical-align: middle; text-transform: uppercase;
}
.av-lg { width: 40px; height: 40px; font-size: 14px; }

/* ── buttons ────────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--red-dark); color: var(--red-dark); }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-secondary { background: var(--card); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-v); }
.btn-ghost:hover { background: var(--surf-low); border-color: transparent; color: var(--red-dark); }
.btn-danger { background: var(--card); border-color: var(--danger-line); color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.btn-lg { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-icon { min-width: 38px; padding: 0; }
.btn-icon.btn-sm { min-width: 30px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--ink-m) var(--ink-m) var(--ink-m) transparent;
  animation: spin .7s linear infinite;
}
.btn-primary.is-busy::after { border-color: #fff #fff #fff transparent; }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* a choice row (outcome picker, Email | Text | Nothing): pressed state shown by fill AND weight */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-v); font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.seg button:hover { border-color: var(--red-dark); color: var(--red-dark); }
.seg button[aria-pressed="true"] { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

/* ── forms ──────────────────────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-v);
}
.input, .select, .textarea {
  width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-v) 50%), linear-gradient(135deg, var(--ink-v) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--stone); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 16, 46, .12); outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--ink-m); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surf-low); color: var(--ink-m); cursor: not-allowed; }
.input-search { padding-left: 34px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%235c403f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat 11px 50%; }
.field-hint { font-size: 12px; color: var(--ink-v); }
.field-error { font-size: 12px; font-weight: 600; color: var(--danger); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-size: 14px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--red-dark); cursor: pointer; }
/* an on/off switch: <button class="switch" role="switch" aria-checked="true"> */
.switch {
  position: relative; width: 40px; height: 24px; flex: none; padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--stone); cursor: pointer; transition: background-color .15s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-1); transition: transform .15s var(--ease);
}
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.switch:disabled { opacity: .55; cursor: not-allowed; }

/* ── tables ─────────────────────────────────────────────────────────────────────────────── */
/* A table wider than its box scrolls sideways; a soft shadow at the cut edge says there is more
   (the white covers ride with the content, the shadows stay put: no script). */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--card) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(60, 50, 40, .3), rgba(60, 50, 40, 0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(60, 50, 40, .3), rgba(60, 50, 40, 0)) right center / 16px 100% no-repeat scroll,
    var(--card); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th, .table td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surf-low); color: var(--ink-v); white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-link { cursor: pointer; }
.table tbody tr.is-link:hover { background: var(--surf-low); }
.table tbody tr:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .strong { font-weight: 700; }
.table .sub { display: block; color: var(--ink-v); font-size: 12px; }
.th-sort { padding: 0 !important; }
.th-sort button { width: 100%; padding: 9px 12px; border: 0; background: none; font: inherit; color: inherit;
  text-align: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort button:hover { color: var(--red-dark); }

/* ── lists (timeline, task rows) ────────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.list-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.list-row + .list-row { border-top: 1px solid var(--line); }
.list-ico { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surf-low); color: var(--ink-v); }
.list-ico.is-touch { background: var(--ok-bg); color: var(--ok); }
.list-main { flex: 1; min-width: 0; }
.list-title { font-weight: 600; }
.list-meta { color: var(--ink-v); font-size: 12px; }
.list-time { flex: none; color: var(--ink-v); font-size: 12px; white-space: nowrap; }
.timeline .list-row { padding: 10px 14px; }
.transcript { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--line); background: var(--surf-low);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-v); font-size: 12.5px; white-space: pre-wrap; }
details.more > summary { cursor: pointer; color: var(--ink-v); font-size: 12px; font-weight: 600; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }

/* ── pace / progress bar ────────────────────────────────────────────────────────────────── */
.pace { display: flex; flex-direction: column; gap: 8px; }
.pace-label { font-size: 15px; font-weight: 700; }
.pace-label .ahead { color: var(--ok); }
.pace-label .behind { color: var(--warn); }
.pace-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-v); font-size: 12px; }
/* the empty track carries a 1px --ink-m edge: the light fill alone is ~1.2:1 on white */
.bar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--surf-high); overflow: visible;
  box-shadow: inset 0 0 0 1px var(--ink-m); }
.bar-fill { position: absolute; inset: 0 auto 0 0; max-width: 100%; border-radius: inherit; background: var(--ok); transition: width .4s var(--ease); }
.bar-fill.is-behind { background: var(--amber); }
.bar-fill.is-neutral { background: var(--ink-v); }
/* the "where you should be today" mark */
.bar-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.bar-sm { height: 6px; }
.progress-dots { display: flex; gap: 4px; flex-wrap: wrap; }
.progress-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--stone); background: var(--card); }
.progress-dots span.is-done { background: var(--ok); border-color: var(--ok); }
.progress-dots span.is-snoozed { background: var(--surf-high); border-style: dashed; }

/* ── drawer (right side) + scrim ────────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(27, 28, 28, .42);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, visibility 0s linear 0s; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; width: min(560px, 100vw);
  display: flex; flex-direction: column; background: var(--card); box-shadow: var(--sh-3);
  transform: translateX(100%); visibility: hidden; pointer-events: none;
  transition: transform .25s var(--ease), visibility 0s linear .25s;
}
.drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform .25s var(--ease), visibility 0s linear 0s; }
.drawer-wide { width: min(820px, 100vw); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.drawer-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.drawer-sub { color: var(--ink-v); font-size: 13px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; overscroll-behavior: contain; }
.drawer-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surf); }
.close-x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
  border: 0; border-radius: var(--r-md); background: none; color: var(--ink-v); cursor: pointer; }
.close-x:hover { background: var(--surf-low); color: var(--red-dark); }

/* ── modal ──────────────────────────────────────────────────────────────────────────────── */
.modal {
  position: fixed; top: 50%; left: 50%; z-index: 1001; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  transform: translate(-50%, -46%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .2s var(--ease), opacity .2s ease, visibility 0s linear .2s;
}
.modal.is-open { transform: translate(-50%, -50%); opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform .2s var(--ease), opacity .2s ease, visibility 0s linear 0s; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-body { padding: 12px 20px; overflow-y: auto; }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }

/* ── toast (auth.js BDAuth.toast) ───────────────────────────────────────────────────────── */
#bd-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1100; width: min(380px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px 11px 12px; pointer-events: auto;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--ink-v); border-radius: 11px;
  box-shadow: var(--sh-2); font-size: 13px; transform: translateY(12px); opacity: 0;
  transition: transform .25s var(--ease), opacity .25s ease;
}
.toast.toast-in { transform: translateY(0); opacity: 1; }
.toast.toast-out { pointer-events: none; }
.toast-ok { border-left-color: var(--ok); }
.toast-ok .toast-ico { color: var(--ok); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-ico { color: var(--danger); }
.toast-ico { display: inline-flex; padding-top: 1px; color: var(--ink-v); }
.toast-msg { flex: 1; min-width: 0; padding-top: 1px; }
.toast-act { flex: none; border: 0; background: none; color: var(--red-dark); font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: var(--r-sm); }
.toast-act:hover { background: var(--surf-low); }
.toast-x { flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink-v); cursor: pointer; padding: 2px; border-radius: var(--r-sm); }
.toast-x:hover { background: var(--surf-low); color: var(--red-dark); }

/* ── empty, loading, error states ───────────────────────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 20px; text-align: center; color: var(--ink-v); }
.empty-page { min-height: 60vh; justify-content: center; }
.empty-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--surf-low); color: var(--ink-v); margin-bottom: 4px; }
.empty-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.empty-text { max-width: 46ch; font-size: 13.5px; }
.empty .btn { margin-top: 6px; }
.skeleton { border-radius: var(--r-md); background: linear-gradient(90deg, var(--surf-low) 25%, var(--surf-high) 50%, var(--surf-low) 75%);
  background-size: 200% 100%; animation: shimmer 1.2s ease-in-out infinite; min-height: 16px; }
.skeleton-card { height: 112px; border-radius: var(--r-lg); }
.spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--stone);
  border-top-color: var(--red-dark); animation: spin .7s linear infinite; vertical-align: middle; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px; color: var(--ink-v); }
.error-box { padding: 14px 16px; border: 1px solid var(--danger-line); background: var(--danger-bg); color: var(--danger); border-radius: var(--r-md); }
.fatal { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; background: var(--surf); color: var(--ink); text-align: center; font-weight: 600; }
.fatal-msg { max-width: 42ch; font-size: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── login ──────────────────────────────────────────────────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 380px; max-width: 100%; padding: 34px 30px; text-align: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-2); }
.login-logo { display: block; width: 82px; height: 52px; margin: 0 auto 14px; }
.login-card h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.login-sub { color: var(--ink-v); font-size: 13px; margin-bottom: 24px; }
.login-google { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.login-google:hover { border-color: var(--red-dark); background: var(--surf-low); }
.login-google:disabled { opacity: .6; cursor: default; }
.login-g { width: 18px; height: 18px; }
.login-mock { margin-top: 14px; padding: 8px 10px; border-radius: var(--r-md); background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); font-size: 12.5px; }
.login-error { margin-top: 14px; padding: 8px 10px; border-radius: var(--r-md); background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); font-size: 12.5px; }
.login-foot { margin-top: 22px; color: var(--ink-m); font-size: 11.5px; }

/* ── utilities ──────────────────────────────────────────────────────────────────────────── */
.muted { color: var(--ink-v); }
.faint { color: var(--ink-m); }
.small { font-size: 12px; }
.strong { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 14px; } .mt-4 { margin-top: 24px; }
.ml-auto { margin-left: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tel { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--ink); font-weight: 600; text-decoration: none; }
.tel:hover { color: var(--red-dark); }

/* ── tablet and phone ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  html.bd-nav-open #bd-nav-scrim { display: block; pointer-events: auto; }
  #bd-sidebar { width: min(296px, 86vw); box-shadow: var(--sh-3); }
  .bd-nav-item { min-height: 48px; }
  .bd-collapse, .bd-signout { min-width: 44px; min-height: 44px; }
  .bd-mock-reset { min-height: 44px; }
  /* the phone top bar: a fixed strip with its own ground; the page is padded to clear it, so
     the burger never sits over a card while the list scrolls */
  #bd-topbar { top: 0; left: 0; right: 0; height: 56px; padding: 0 16px 0 6px;
    background: var(--card); border-bottom: 1px solid var(--line); }
  #bd-burger { border: 0; box-shadow: none; background: none; }
  .bd-topbar-name { display: inline; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
  body:not(.login-page) { padding-top: 56px; }
  html { scroll-padding-top: 64px; }
  .page { padding-top: 14px; }
  .page-header { align-items: center; }
  .page-actions { width: 100%; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .btn-icon, .btn-icon.btn-sm { min-width: 44px; }
  .close-x { width: 44px; height: 44px; }
  .tel { min-height: 44px; padding-block: 4px; }
  .cd-back { min-height: 44px; }
  /* the switch stays 40x24 to look at; its tap area is 44 tall */
  .switch::before { content: ""; position: absolute; inset: -10px -2px; }
  .toast-x, .toast-act { min-width: 44px; min-height: 44px; }
  .seg button { min-height: 44px; }
  .input, .select, .textarea { min-height: 44px; font-size: 16px; }   /* 16px: no iOS zoom on focus */
  .check { min-height: 44px; }
  .toolbar .input-search { max-width: none; }
  .drawer-head, .drawer-body, .drawer-foot { padding-left: 16px; padding-right: 16px; }
  .drawer-foot .btn { flex: 1 1 auto; }
  .modal-foot .btn { flex: 1 1 auto; }
  #bd-toasts { left: 16px; right: 16px; bottom: 16px; width: auto; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .hide-phone { display: none !important; }
}
@media (min-width: 768px) { .show-phone { display: none !important; } }

/* ── print: the page, not the chrome ────────────────────────────────────────────────────── */
@media print {
  #bd-sidebar, #bd-topbar, #bd-nav-scrim, #bd-toasts, .skip-link { display: none !important; }
  html body { margin-left: 0 !important; padding-top: 0 !important; transition: none !important; }
  .page { max-width: none; padding: 0; }
}

/* ── reduced motion ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* ── page: This Week (index.html, js/week.js) ───────────────────────────────────────────── */
.week-summary { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px 32px; align-items: start; }
.week-side { display: flex; flex-direction: column; gap: 14px; }
.week-count { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.week-summary .progress-dots { margin-top: 4px; }
.task-card { display: flex; flex-direction: column; gap: 8px; }
.task-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 16px; }
.task-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.task-panel { margin-top: 4px; }
.task-rec, .task-fu { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.task-row.is-snoozed .card-title { color: var(--ink-v); }
.task-row .row-between { flex-wrap: nowrap; }
.task-row .card-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg button:disabled { opacity: .5; cursor: default; pointer-events: none; }
@media (max-width: 767px) {
  .week-summary { grid-template-columns: minmax(0, 1fr); }
  .task-actions .btn { flex: 1 1 auto; }
  .task-row .row-between { flex-wrap: wrap; }
}

/* ── page: review.html (Potential BD Contacts) ──────────────────────────────────────────────── */
.rv-row {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 10px 18px; align-items: center; padding: 12px 14px;
  transition: opacity .25s ease, transform .25s var(--ease);
}
.rv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rv-head .section-title { margin: 0; }
.rv-row.is-leaving { opacity: 0; transform: translateX(12px); pointer-events: none; }
.rv-contact { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
/* the whole address shows (the dedupe check compares it): wrap anywhere, never an ellipsis */
.rv-contact .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.rv-quote { min-width: 0; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-dup { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12.5px; }
@media (max-width: 1024px) {
  .rv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rv-actions { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .rv-row { grid-template-columns: minmax(0, 1fr); }
  .rv-actions .btn { flex: 1 1 auto; }
}

/* ── page: analytics.html ───────────────────────────────────────────────────────────────────── */
.an-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; margin-bottom: 4px; }
.an-owner .select { min-width: 190px; }
.an-date { width: 160px; }
.an-range { margin: 14px 0 0; font-size: 13px; }
.an-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px; }
.an-of { font-size: 14px; font-weight: 600; color: var(--ink-v); }
.an-soon { padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-v); }
.an-pace { margin-top: 14px; }
.an-chart { display: block; font-family: var(--font); }
.an-chart-bars { width: 100%; max-width: 420px; height: auto; }
.an-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.an-scroll .an-chart { max-width: none; }
.an-lbl { fill: var(--ink-v); font-size: 12px; }
.an-val { fill: var(--ink); font-size: 12px; font-weight: 700; }
.an-axis { stroke: var(--stone); stroke-width: 1; }
.an-done, .an-seg-ok { fill: var(--ok); }
.an-track { fill: var(--surf-high); stroke: var(--ink-m); stroke-width: 1; }
.an-seg-warn { fill: var(--amber); }
.an-seg-info { fill: var(--info); }
.an-seg-muted { fill: var(--ink-m); }
.an-stack { margin-top: 4px; }
.an-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-v); }
.an-sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: baseline; }
.an-sw-ok { background: var(--ok); }
.an-sw-warn { background: var(--amber); }
.an-sw-info { background: var(--info); }
.an-sw-track { background: var(--surf-high); box-shadow: inset 0 0 0 1px var(--ink-m); }
@media (max-width: 767px) {
  .an-filters { align-items: stretch; }
  .an-owner .select, .an-date { width: 100%; min-width: 0; }
  .an-custom .row { flex-wrap: nowrap; }
}

/* ── page: admin.html ───────────────────────────────────────────────────────────────────────── */
.ad-user { align-items: center; flex-wrap: wrap; }
.ad-user .list-main { min-width: 180px; }
.ad-user-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ad-role { width: 160px; }
.ad-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 13px; cursor: pointer; }
.ad-chips { margin: 0 0 12px; padding: 0; list-style: none; }
.ad-chip { padding-right: 2px; font-size: 12.5px; }
.ad-chip-x {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-v); cursor: pointer;
}
.ad-chip-x:hover { background: var(--danger-bg); color: var(--danger); }
.ad-add-input { flex: 1 1 160px; width: auto; }
.ad-run-owner { min-width: 200px; }
.ad-errors { margin: 6px 0 0; padding-left: 18px; color: var(--ink-v); font-size: 12px; }
@media (max-width: 767px) {
  .ad-role { width: 100%; }
  .ad-user-ctl { width: 100%; }
  .ad-user-ctl .field { flex: 1 1 140px; }
  .ad-chip-x { min-width: 36px; min-height: 36px; }
  .ad-run-owner { min-width: 0; flex: 1 1 100%; }
  .ad-run-btn { width: 100%; }
}

/* ── contacts page (contacts.html, js/contacts.js) ──────────────────────────────────────── */
.ct-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
.ct-toggles { margin-bottom: 14px; }
.ct-count { margin: 0 0 8px; font-size: 13px; color: var(--ink-v); }
.ct-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ct-modal-wide { width: min(640px, calc(100vw - 32px)); }
.ct-dup-list { margin: 6px 0 0; padding-left: 18px; font-weight: 500; }
.ct-toggles .btn[aria-pressed="true"] { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
/* avatar and name on one line, never stacked */
.ct-owner { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* a narrow results box (a tablet with the menu open) can't fit six columns: Owner and Last talked
   fold into one-line notes under the company and the contact (.ct-fold) instead of the table
   scrolling sideways and cutting off Status. Phones have their own layout (.show-phone). */
#ct-results { container: ct-results / inline-size; }
.table .ct-fold { display: none; }
@media (min-width: 768px) {
  @container ct-results (max-width: 679px) {
    .table .ct-col-owner, .table .ct-col-last { display: none; }
    .table .ct-fold { display: block; }
  }
}
/* phone: the selects fold behind a "Filters (n)" button (.ct-filter-toggle, a .show-phone button)
   when the page marks the grid .is-collapsible; .is-open shows them */
@media (max-width: 767px) {
  .ct-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-filters.is-collapsible:not(.is-open) { display: none; }
}

/* ── contact page (contact.html, js/contact.js) ─────────────────────────────────────────── */
.cd-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--ink-v); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cd-back:hover { color: var(--red-dark); }
.cd-id { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cd-id > div { min-width: 0; }
.cd-header .page-actions { max-width: 100%; }
.cd-header .btn { max-width: 100%; }
.cd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.cd-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-v); }
.cd-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cd-freq-input { max-width: 96px; }
.cd-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.cd-reset { margin: 0; padding: 0; list-style: none; }
.cd-fields { margin: 0; display: flex; flex-direction: column; }
.cd-field { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cd-field:last-child { border-bottom: 0; }
.cd-field dt { padding-top: 6px; color: var(--ink-v); font-size: 12.5px; }
.cd-field dd { margin: 0; padding-top: 6px; min-width: 0; overflow-wrap: anywhere; }
.cd-field.is-editing dd { grid-column: 2 / -1; padding-top: 0; }
.cd-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.cd-edit .input, .cd-edit .select, .cd-edit .textarea { flex: 1 1 160px; min-height: 34px; }
.cd-edit-btns { display: inline-flex; gap: 6px; }
.cd-edit .field-error, .cd-edit .field-hint { flex: 1 1 100%; }
.cd-draft { max-width: 640px; }
@media (max-width: 767px) {
  .cd-field { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .cd-edit .input, .cd-edit .select, .cd-edit .textarea { min-height: 44px; }
}