/* ============================================
   Peace Ops — styles
   Base: web-brand tokens (app-build/web-brand/templates/tokens.css).
   Per-client values below come from clients/matthew-mcdonald/brand-kit.md —
   never Stein defaults, never invented.
   ============================================ */

:root {
  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radius scale — --radius from brand-kit corner style */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);

  /* Readable-width caps (MANDATORY — do not remove) */
  --readable-text: 720px;
  --readable-ui: 900px;

  /* Gutters */
  --gutter-mobile: 12px; --gutter-tablet: 24px; --gutter-desktop: 32px;

  /* Brand — from brand-kit.md. Admin Settings > Branding overrides at runtime. */
  /* Admin > Branding sets --brand-* (app.js). These map them into the live
     tokens with the brand-kit value as the fallback, so the dark theme can
     still override page/surface/text — an inline --bg would have won forever. */
  --primary: var(--brand-primary, #352339);
  --primary-dark: #281a2b;
  --accent: var(--brand-accent, #c7c2d8);
  --bg: var(--brand-bg, #f8f4f4);
  --surface: #FFFFFF;
  --text: var(--brand-text, #352339);
  --text-muted: #6b5f75;
  /* Strong text sitting ON a card/sidebar surface (headings, metric numbers,
     active nav). Light = brand plum. Dark flips it to the light text color —
     plum on a dark plum surface is invisible. Use this instead of
     color: var(--primary) for anything that renders on --surface/--bg. */
  --on-surface-strong: var(--brand-primary, #352339);
  --success: #27AE60;
  --error: #C0392B;

  /* Surface detail tokens — every border/chip/hover in the app reads these,
     so the dark theme below only has to redefine them once. Never hardcode
     an rgba border again; add it here. */
  --border: #e6e0ec;
  --border-strong: #d3cadd;
  --chip-bg: #f0ecf4;
  --hover: #efeaf4;
  --input-bg: #ffffff;

  /* Light redesign (2026-09-16): the thumbnail palette. Lavender blue for
     lines and meters, lilac and blush for soft fills, sage for "all good". */
  --accent-blue: #6f82b8;
  --accent-soft: #dde4f2;
  --lilac: #d8cde6;
  --blush: #f1dce3;
  --good: #4f6b4e;
  --good-soft: #e3ebdd;
  --btn-bg: var(--primary);
  --fab-a: var(--brand-primary, #352339);
  --fab-b: #6f82b8;
  --fab-ink: #ffffff;
  --shadow-soft: 0 1px 2px rgba(53, 35, 57, 0.04), 0 8px 28px -12px rgba(53, 35, 57, 0.16);
  --shadow-fab: 0 10px 24px -8px rgba(53, 35, 57, 0.45);

  /* Status badges (investor pipeline) — paired bg/text so dark can retune both */
  --badge-prospect-bg: #efece7; --badge-prospect-fg: #5f5e5a;
  --badge-warm-bg: #faeeda;    --badge-warm-fg: #854f0b;
  --badge-commit-bg: #eaf3de;  --badge-commit-fg: #3b6d11;
  --badge-commit-border: #639922;
  --danger-fg: #a32d2d;
  --font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Gilda Display', serif;

  --sidebar-w: 240px;
  --topbar-h: 60px;
  /* Shell content cap. Wider than --readable-ui because a dashboard holds data
     tables, not prose — the sidebar already eats 240px. Prose inside stays
     capped at --readable-text via .page-intro and .card-text (see below), so
     the readable-width rule is honored where it actually matters: line length. */
  --shell-max: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--on-surface-strong); }

.readable { max-width: var(--readable-text); margin: 0 auto; padding: 0 var(--gutter-desktop); width: 100%; }
.readable-wide { max-width: var(--readable-ui); margin: 0 auto; padding: 0 var(--gutter-desktop); width: 100%; }
@media (max-width: 900px) { .readable, .readable-wide { padding: 0 var(--gutter-tablet); } }
@media (max-width: 600px) { .readable, .readable-wide { padding: 0 var(--gutter-mobile); } }

button, a.btn, [role="button"] { min-height: 44px; min-width: 44px; }

/* ---------- Header ---------- */
.topbar {
  height: var(--topbar-h);
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-md);
}
.topbar-logo { height: 34px; width: auto; border-radius: var(--radius-sm); }
.topbar-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-who { font-size: 13px; opacity: 0.85; white-space: nowrap; }
@media (max-width: 600px) { .topbar-who { display: none; } }
.hamburger { display: none; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
.btn-ghost { background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff; border-radius: var(--radius-sm); padding: 6px 14px; font-family: var(--font); font-size: 13px; cursor: pointer; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* ---------- Layout ---------- */
.layout { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--sp-5) 0;
  display: flex; flex-direction: column;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  flex-shrink: 0;
}
.nav-list { list-style: none; flex: 1; }
.nav-list a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  color: var(--text); text-decoration: none; font-size: 14.5px;
  border-left: 3px solid transparent;
}
.nav-list a:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.nav-list a.active {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  font-weight: 600; color: var(--on-surface-strong);
}

.sidebar-contact {
  border-top: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-5) 0;
}
.contact-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: var(--sp-2); }
.contact-link {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13.5px; color: var(--on-surface-strong); text-decoration: none;
  padding: var(--sp-2) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font); text-align: left; width: 100%;
}
.contact-link:hover { color: var(--accent); }

.sidebar-scrim { display: none; }

/* ---------- Content ---------- */
.content { padding: var(--sp-6) var(--gutter-desktop); flex: 1; max-width: var(--shell-max); margin: 0 auto; width: 100%; }
/* Text-only cards keep prose at a readable line length. Data cards (tables,
   scoreboards, forms) use the full width. */
.card-text { max-width: var(--readable-text); }
.page { display: none; }
.page.active { display: block; }
.page h1 { font-size: 26px; margin-bottom: var(--sp-2); }
.page-intro { color: var(--text-muted); margin-bottom: var(--sp-5); max-width: var(--readable-text); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.card h2 { font-size: 18px; margin-bottom: var(--sp-3); }

.btn-primary {
  background: var(--primary); color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: 12px 22px;
  font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer;
  width: 100%;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }

/* ---------- Team page (staff + permissions) ---------- */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card-head h2 { margin: 0; }

.invite-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.invite-form input, .invite-form select {
  flex: 1 1 160px; min-width: 0; padding: 10px 12px; font-family: var(--font); font-size: 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text);
}
.btn-inline { width: auto; flex: 0 0 auto; padding: 10px 18px; font-size: 14px; }
.invite-result:not(:empty) { margin-top: var(--sp-3); }
.invite-ok { background: color-mix(in srgb, var(--success) 8%, transparent); border-radius: var(--radius-sm); padding: var(--sp-3); }
.invite-ok p { margin: 0 0 var(--sp-2); font-size: 14px; }
.invite-link { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.invite-link code {
  flex: 1 1 240px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12.5px; word-break: break-all;
}
.invite-err { color: var(--error); font-size: 13.5px; margin-top: var(--sp-2); }
.fine { font-size: 12.5px; color: var(--text-muted); margin-top: var(--sp-3); line-height: 1.5; }
.login-help { text-align: center; }

.team-row { border-top: 1px solid var(--border); padding: var(--sp-4) 0; }
.team-row:first-child { border-top: 0; padding-top: 0; }
.team-row.is-off { opacity: 0.55; }
.team-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.team-name { font-weight: 700; font-size: 15px; }
.team-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.team-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.role-select, .perm-select {
  padding: 8px 10px; font-family: var(--font); font-size: 13px; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
}
.perm-select.is-override { border-color: var(--accent); border-width: 2px; font-weight: 600; }
.tag-off {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
  background: var(--border); color: var(--text-muted); padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}
.btn-danger {
  background: none; border: 1px solid var(--error); color: var(--error);
  border-radius: var(--radius-sm); padding: 8px 14px; font-family: var(--font); font-size: 13px; cursor: pointer;
}
.btn-danger:hover { background: color-mix(in srgb, var(--error) 10%, transparent); }
.btn-link {
  background: none; border: 0; color: var(--on-surface-strong); text-decoration: underline;
  font-family: var(--font); font-size: 13px; cursor: pointer; padding: 0; min-height: 0; min-width: 0;
}
.invite-pending {
  margin-top: var(--sp-2); font-size: 13px; color: var(--text-muted);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: var(--radius-sm); padding: 8px 11px;
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
}
.team-perms { margin-top: var(--sp-3); }
.team-perms summary { cursor: pointer; font-size: 13px; color: var(--on-surface-strong); font-weight: 600; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.perm { display: flex; flex-direction: column; gap: 4px; }
.perm-name { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.view-only-note {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13.5px; margin-bottom: var(--sp-4);
}
@media (max-width: 600px) {
  .invite-form input, .invite-form select, .btn-inline { flex: 1 1 100%; }
  .team-head { flex-direction: column; }
}

/* ---------- Footer ---------- */
.footer { padding: var(--sp-5); text-align: center; font-size: 12.5px; color: var(--text-muted); }
.stealth-link { color: inherit; text-decoration: none; }

/* ---------- Login page ---------- */
.login-body { justify-content: center; align-items: center; padding: var(--sp-4); }
.login-card {
  background: var(--surface); border-radius: var(--radius-lg);
  border-top: 5px solid var(--accent);
  box-shadow: var(--shadow-lg);
  max-width: 420px; width: 100%; padding: var(--sp-7) var(--sp-6);
  text-align: center;
}
.login-logo { max-height: 60px; max-width: 220px; margin-bottom: var(--sp-4); }
.login-card h1 { font-size: 22px; margin-bottom: var(--sp-2); }
.login-sub { color: var(--text-muted); font-size: 14px; margin-bottom: var(--sp-5); }
.login-card input {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: var(--font);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
  background: var(--input-bg); color: var(--text);
}
.login-err { color: var(--error); font-size: 13px; min-height: 18px; margin-bottom: var(--sp-2); }
.login-foot { position: fixed; bottom: var(--sp-4); left: 0; right: 0; text-align: center; font-size: 12px; color: var(--text-muted); }

input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }

/* ---------- Secure key-drop widget ---------- */
.sdw-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9000;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--primary); color: #fff; border: 2px solid var(--accent);
  font-size: 22px; cursor: pointer; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, box-shadow 0.12s;
}
.sdw-fab:hover { transform: translateY(-2px); }
.sdw-fab-tip {
  position: fixed; right: 84px; bottom: 33px; z-index: 9000;
  background: var(--primary); color: #fff; font-size: 12.5px;
  padding: 6px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
  font-family: var(--font);
}
.sdw-fab:hover + .sdw-fab-tip { opacity: 1; }
.sdw-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: color-mix(in srgb, var(--primary) 45%, transparent);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.sdw-overlay.open { display: flex; }
.sdw-modal {
  background: var(--surface); border-top: 5px solid var(--accent);
  border-radius: var(--radius); max-width: 480px; width: 100%;
  padding: 24px 26px; font-family: var(--font); color: var(--text);
  box-shadow: var(--shadow-lg); position: relative;
}
.sdw-modal h3 { font-size: 19px; margin: 0 0 8px; }
.sdw-modal p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 14px; }
.sdw-close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 20px; color: var(--text-muted); cursor: pointer; line-height: 1; min-height: 0; min-width: 0; }
.sdw-modal input, .sdw-modal textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 11px 13px; font-family: inherit;
  font-size: 14px; margin-bottom: 10px;
}
.sdw-modal textarea { min-height: 110px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.sdw-send {
  width: 100%; padding: 12px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--primary); color: #fff; font-family: var(--font);
  font-size: 15px; font-weight: 600;
}
.sdw-send:hover { background: var(--primary-dark); }
.sdw-send:disabled { opacity: 0.6; cursor: wait; }
.sdw-done { display: none; text-align: center; padding: 10px 0 4px; }
.sdw-done.show { display: block; }
.sdw-done .big { font-size: 34px; }
.sdw-done p { color: var(--success); font-size: 14px; margin-top: 8px; }
.sdw-err { display: none; color: var(--error); font-size: 12.5px; margin: -2px 0 10px; line-height: 1.4; }
.sdw-err.show { display: block; }
.sdw-fine { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.45; }

/* Who should get it — the recipient picker inside the modal. */
.sdw-label { display: block; font-size: 12.5px; font-weight: 600; margin: 2px 0 5px; }
.sdw-label-hint { font-weight: 400; color: var(--text-muted); }
.sdw-people { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 4px 2px; margin-bottom: 10px; max-height: 190px; overflow-y: auto; }
.sdw-person { display: flex; align-items: center; gap: 9px; padding: 7px 11px; cursor: pointer; font-size: 13.5px; border-radius: var(--radius-sm); }
.sdw-person:hover { background: var(--hover); }
.sdw-person input { width: auto; margin: 0; flex: none; }
.sdw-person .sdw-pmail { color: var(--text-muted); font-size: 12px; }
.sdw-group { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); padding: 8px 11px 3px; }
.sdw-other { padding: 4px 11px 9px; display: none; }
.sdw-other.show { display: block; }
.sdw-other input { margin-bottom: 7px; }
.sdw-loading { padding: 12px; font-size: 13px; color: var(--text-muted); }
/* The fallback: a link the sender passes on by hand because the email failed. */
.sdw-handover { background: var(--chip-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; color: var(--text); margin-top: 10px; text-align: left; line-height: 1.5; }
.sdw-handover code { display: block; word-break: break-all; margin-top: 5px; font-size: 11.5px; }

/* ---------- Responsive: sidebar → hamburger drawer ---------- */
@media (max-width: 900px) {
  .hamburger { display: block; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
    transform: translateX(-100%); transition: transform 0.2s ease;
    z-index: 200; box-shadow: var(--shadow-lg); height: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim {
    display: none; position: fixed; inset: var(--topbar-h) 0 0 0;
    background: rgba(0,0,0,0.35); z-index: 150;
  }
  .sidebar-scrim.show { display: block; }
  .content { padding: var(--sp-5) var(--gutter-tablet); }
}
@media (max-width: 600px) {
  .content { padding: var(--sp-4) var(--gutter-mobile); }
  .sdw-fab { right: 14px; bottom: 14px; }
  .topbar-title { font-size: 15px; }
}

/* Topbar logo is the plum wordmark — invert to white on the plum bar. */
.topbar-logo { filter: brightness(0) invert(1); }
@media (max-width: 600px) { .topbar-title { display: none; } }

/* ---------- Investor Pipeline (rebuilt from the VIP-day one-off) ---------- */
/* Metric tiles. Shared by every page that has a numbers strip — the investor
   pipeline named them first, .metrics/.metric is the neutral alias so a new
   page never re-invents the look. */
.inv-metrics, .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: var(--sp-5); }
@media (max-width: 600px) { .inv-metrics, .metrics { grid-template-columns: repeat(2, 1fr); } }
.inv-metric, .metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.inv-metric-label, .metric-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.inv-metric-value, .metric-value { font-size: 24px; font-family: var(--font-display); color: var(--on-surface-strong); }
.inv-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.inv-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-fbtn { font-size: 13px; padding: 6px 14px; border-radius: 50px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer; min-height: 36px; min-width: 0; }
.inv-fbtn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* The pill primary button. Every toolbar and modal footer in the app uses this
   shape — the investor pipeline named it first, so new surfaces join the
   selector rather than restyling. Without it the global .btn-primary
   (width:100%) stretches the button across its row. */
.inv-toolbar .btn-primary, .inv-modal-footer .btn-primary,
.sc-toolbar .btn-primary, .dv-actions .btn-primary, .dv-footer .btn-primary { width: auto; background: var(--primary); color: #fff; border: none; border-radius: 50px; padding: 10px 22px; font-weight: 600; font-size: 14px; cursor: pointer; }
.inv-toolbar .btn-primary:hover, .inv-modal-footer .btn-primary:hover,
.sc-toolbar .btn-primary:hover, .dv-actions .btn-primary:hover, .dv-footer .btn-primary:hover { background: var(--primary-dark); }
.dv-footer .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.inv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.inv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.inv-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.inv-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.inv-card-id { flex: 1; min-width: 0; }
.inv-card-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-card-firm { font-size: 12px; color: var(--text-muted); }
.inv-badge { font-size: 11px; padding: 3px 10px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; }
.inv-badge-prospect { background: var(--badge-prospect-bg); color: var(--badge-prospect-fg); }
.inv-badge-warm { background: var(--badge-warm-bg); color: var(--badge-warm-fg); }
.inv-badge-committed { background: var(--badge-commit-bg); color: var(--badge-commit-fg); }
.inv-card-meta { font-size: 12px; color: var(--text-muted); line-height: 1.9; margin-bottom: 8px; }
.inv-card-notes { font-size: 12px; color: var(--text-muted); font-style: italic; border-left: 2px solid var(--accent); padding-left: 8px; margin-bottom: 10px; line-height: 1.5; }
.inv-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; flex-wrap: wrap; }
.inv-btn-sm { font-size: 12px; padding: 5px 12px; border-radius: 50px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer; min-height: 32px; min-width: 0; margin-right: 4px; }
.inv-btn-commit { background: var(--badge-commit-bg); border-color: var(--badge-commit-border); color: var(--badge-commit-fg); }
.inv-btn-ghost { border-color: transparent; color: var(--text-muted); }
.inv-btn-ghost:hover { border-color: var(--border-strong); }
.inv-btn-danger { color: var(--danger-fg); }
.inv-committed { font-size: 12px; color: var(--badge-commit-fg); font-style: italic; }
.inv-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--text-muted); }
.inv-overlay { display: none; position: fixed; inset: 0; background: rgba(40, 26, 43, 0.45); z-index: 200; align-items: center; justify-content: center; }
.inv-overlay.open { display: flex; }
.inv-modal { background: var(--surface); border-radius: var(--radius-lg); padding: 24px; width: 100%; max-width: 430px; margin: 16px; max-height: 90vh; overflow-y: auto; }
.inv-modal h3 { margin-bottom: 16px; }
.inv-field { margin-bottom: 12px; }
.inv-field label { font-size: 13px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.inv-field input, .inv-field select, .inv-field textarea, .inv-field .fmt-box { width: 100%; font-family: var(--font); font-size: 14px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }

/* The two boxes he writes in by hand — the devotional body and the social
   caption. They are contenteditable rather than textareas so that bold looks
   bold while he writes, instead of showing him the marks. Everything above
   gives them the same frame as every other field; the rest is what a plain
   textarea already did for free. */
.fmt-box { line-height: 1.7; min-height: 120px; max-height: 46vh; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.fmt-box-tall { min-height: 240px; }
.fmt-box:focus { outline: none; border-color: var(--accent); }
/* An emptied box still holds a stray <div><br></div>, so :empty never matches.
   The script sets is-empty from the text it actually serialized. */
.fmt-box.is-empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.fmt-box a { color: inherit; text-decoration: underline; }
.fmt-bar { display: flex; gap: 6px; margin-bottom: 6px; }
.fmt-btn { background: transparent; border: 1px solid var(--border-strong); border-radius: 8px; min-width: 34px; padding: 5px 10px; cursor: pointer; color: var(--text-muted); font-family: var(--font); font-size: 13px; line-height: 1.4; }
.fmt-btn:hover { color: var(--text); border-color: var(--accent); }

.inv-modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* Scoped to the modal footer ON PURPOSE. Bare `.btn-ghost` here used to
   override the topbar Log out button (same class, later in the file) and
   washed it out against the plum header. */
.inv-modal-footer .btn-ghost { background: transparent; border: 1px solid var(--border-strong); border-radius: 50px; padding: 9px 18px; cursor: pointer; color: var(--text-muted); font-size: 14px; }

/* ---------- Email Engine ---------- */
.ee-status { margin-bottom: var(--sp-5); }
.ee-phase { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: var(--sp-4); }
.ee-phase-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ee-phase-head h2 { font-size: 19px; }
.ee-phase-days { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ee-phase-blurb { font-size: 13px; color: var(--text-muted); margin: 4px 0 12px; }
.ee-rows { display: flex; flex-direction: column; }
.ee-row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); border-top: 1px solid var(--border); }
.ee-row:hover { background: var(--hover); }
.ee-day { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--accent); border-radius: 50px; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; min-width: 58px; text-align: center; }
.ee-subject { flex: 1; font-size: 14px; min-width: 0; }
.ee-open { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 600px) { .ee-open { display: none; } }

/* ============================================
   Dark mode
   Follows the system setting by default; the topbar moon/sun button
   overrides it and remembers the choice (localStorage "peaceops-theme").
   Colors are the brand plum family shifted dark, NOT neutral grey — the
   surface is a lifted plum so it still reads as Seek Peace. Palette source:
   clients/matthew-mcdonald/brand-kit.md.
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: var(--brand-primary, #2a1c2e);
    --primary-dark: #1d1420;
    --accent: var(--brand-accent, #c7c2d8);
    --bg: #1b1a31;
    --surface: #23223f;
    --text: #efeaf6;
    --text-muted: #b3aac6;
    --border: #35335a;
    --border-strong: #4a4872;
    --chip-bg: #2b2a4d;
    --hover: #2b2a4d;
    --input-bg: #1f1e38;
    --accent-blue: #b7c3e9;
    --accent-soft: #33385e;
    --lilac: #4a4570;
    --blush: #5a4060;
    --good: #b9d2b0;
    --good-soft: #2f3f35;
    --btn-bg: #6a5690;
    --fab-a: #d8cde6;
    --fab-b: #b7c3e9;
    --fab-ink: #1b1a31;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 30px -14px rgba(0, 0, 0, 0.5);
    --shadow-fab: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.6);
    --badge-prospect-bg: #34303a; --badge-prospect-fg: #c3bdc9;
    --badge-warm-bg: #4a3418;    --badge-warm-fg: #f0c98a;
    --badge-commit-bg: #26401a;  --badge-commit-fg: #b7dd93;
    --badge-commit-border: #6d9c3c;
    --on-surface-strong: #efeaf6;
    --danger-fg: #f0908c;
    --success: #5cc98a;
    --error: #ef8078;
  }
}

:root[data-theme="dark"] {
  --primary: var(--brand-primary, #2a1c2e);
  --primary-dark: #1d1420;
  --accent: var(--brand-accent, #c7c2d8);
  --bg: #1b1a31;
  --surface: #23223f;
  --text: #efeaf6;
  --text-muted: #b3aac6;
  --border: #35335a;
  --border-strong: #4a4872;
  --chip-bg: #2b2a4d;
  --hover: #2b2a4d;
  --input-bg: #1f1e38;
  --accent-blue: #b7c3e9;
  --accent-soft: #33385e;
  --lilac: #4a4570;
  --blush: #5a4060;
  --good: #b9d2b0;
  --good-soft: #2f3f35;
  --btn-bg: #6a5690;
  --fab-a: #d8cde6;
  --fab-b: #b7c3e9;
  --fab-ink: #1b1a31;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 30px -14px rgba(0, 0, 0, 0.5);
  --shadow-fab: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.6);
  --badge-prospect-bg: #34303a; --badge-prospect-fg: #c3bdc9;
  --badge-warm-bg: #4a3418;    --badge-warm-fg: #f0c98a;
  --badge-commit-bg: #26401a;  --badge-commit-fg: #b7dd93;
  --badge-commit-border: #6d9c3c;
  --on-surface-strong: #efeaf6;
  --danger-fg: #f0908c;
  --success: #5cc98a;
  --error: #ef8078;
}

:root[data-theme="dark"] .login-logo { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-logo { filter: brightness(0) invert(1); }
}

/* Theme toggle button (topbar) */
.theme-toggle {
  background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff;
  border-radius: var(--radius-sm); padding: 6px 10px; font-size: 15px;
  cursor: pointer; line-height: 1; min-height: 34px; min-width: 34px;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); }

/* ---------- Sunday toolbox (floating, every page) ----------
   The three tools Matthew reaches for every week, one thumb-reach away on any
   page. Sits ABOVE the key-drop FAB (which stays at bottom: 22px). */
.tb-fab {
  position: fixed; right: 22px; bottom: 88px; z-index: 9000;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--primary); color: #fff; border: 2px solid var(--accent);
  font-size: 22px; cursor: pointer; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, box-shadow 0.12s;
}
.tb-fab:hover { transform: translateY(-2px); }
.tb-fab-tip {
  position: fixed; right: 84px; bottom: 99px; z-index: 9000;
  background: var(--primary); color: #fff; font-size: 12.5px;
  padding: 6px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
  font-family: var(--font);
}
.tb-fab:hover + .tb-fab-tip { opacity: 1; }
.tb-panel {
  position: fixed; right: 22px; bottom: 152px; z-index: 9050;
  width: min(360px, calc(100vw - 44px));
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
  display: none;
}
.tb-panel.open { display: block; }
.tb-head {
  font-family: var(--font-display); font-size: 16px;
  color: var(--on-surface-strong); margin-bottom: var(--sp-3);
}

.toolkit-verse label {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); margin-bottom: var(--sp-2);
}
.toolkit-verse-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.toolkit-verse-row input {
  flex: 1 1 220px; min-width: 0; padding: 11px 13px; font-size: 15px;
  font-family: var(--font); color: var(--text); background: var(--input-bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.toolkit-go {
  flex: 0 0 auto; background: var(--primary); color: #fff; border: 0;
  border-radius: var(--radius-sm); padding: 11px 20px; font-family: var(--font);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.toolkit-go:hover { background: var(--primary-dark); }
.toolkit-hint { font-size: 12.5px; color: var(--text-muted); margin-top: var(--sp-2); }

.toolkit-links { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.toolkit-link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: 10px;
  border: 1px solid var(--border); text-decoration: none; color: var(--text);
  background: transparent; min-height: 44px;
}
.toolkit-link:hover { background: var(--hover); border-color: var(--border-strong); }
.tk-icon { font-size: 20px; flex-shrink: 0; }
.tk-body { display: flex; flex-direction: column; }
.tk-label { font-weight: 600; font-size: 14.5px; }
.tk-note { font-size: 12.5px; color: var(--text-muted); }

/* Not-yet-added state: never a dead link. Renders as plain text with a note. */
.toolkit-link.pending { pointer-events: none; opacity: 0.75; border-style: dashed; }
.toolkit-link.pending .tk-note { font-style: italic; }
@media (max-width: 600px) {
  .toolkit-verse-row input, .toolkit-go { flex: 1 1 100%; }
}

/* ============================================
   Social Calendar (2026-08-03)
   Same tokens as every other page — surface, border, radius, plum, lavender.
   Nothing hardcoded, so the dark theme comes free.
   ============================================ */

.sc-banner {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--chip-bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: var(--sp-5);
  font-size: 14px; line-height: 1.6; max-width: var(--readable-ui);
}
.sc-banner-icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; }

/* Overnight images (2026-08-17). The price of a setting sits next to the
   setting, and the month's spend sits on the card, because both cost surprises
   came from numbers that were invisible while they were being spent. */
.sc-img { margin-bottom: var(--sp-5); max-width: var(--readable-ui); }
.sc-img-state {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 50px; padding: 4px 12px; border: 1px solid var(--border-strong);
}
.sc-img-state.is-on { color: var(--success); border-color: var(--success); }
.sc-img-state.is-off { color: var(--text-muted); }
.sc-img-lede { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: var(--sp-4); }
.sc-img-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--sp-4); align-items: end;
}
.sc-img-switch { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; cursor: pointer; }
.sc-img-switch input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.sc-img-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sc-img-field label { font-size: 12.5px; color: var(--text-muted); }
.sc-img-field input, .sc-img-field select {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font); font-size: 14px;
  width: 100%;
}
.sc-img-grid input:disabled, .sc-img-grid select:disabled { opacity: 0.5; cursor: not-allowed; }
.sc-img-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.sc-img-run { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 760px) {
  .sc-img-grid { grid-template-columns: 1fr; }
}

.sc-queue { margin-bottom: var(--sp-5); }
.sc-queue-count { font-size: 12px; color: var(--text-muted); }
.sc-queue-list { display: flex; flex-direction: column; }
.sc-clear { color: var(--text-muted); font-size: 14px; }
.sc-q {
  display: grid; grid-template-columns: 190px 180px 1fr auto;
  align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--border); padding: 12px 8px;
  font-family: var(--font); font-size: 14px; color: var(--text);
  cursor: pointer; border-radius: 10px;
}
.sc-q:first-child { border-top: 0; }
.sc-q:hover { background: var(--hover); }
.sc-q-when { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.sc-q-style { font-size: 13px; white-space: nowrap; }
.sc-q-cap { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-q-go { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 760px) {
  .sc-q { grid-template-columns: 1fr auto; }
  .sc-q-style, .sc-q-cap { grid-column: 1 / -1; white-space: normal; }
}

.sc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.sc-month { display: flex; align-items: center; gap: var(--sp-2); }
.sc-month-label { font-family: var(--font-display); font-size: 20px; color: var(--on-surface-strong); min-width: 170px; text-align: center; }
.sc-navbtn {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 50px; width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer;
}
.sc-navbtn:hover { background: var(--hover); }
.sc-today {
  background: none; border: 1px solid var(--border-strong); color: var(--text-muted);
  border-radius: 50px; padding: 6px 14px; font-family: var(--font); font-size: 13px; cursor: pointer;
}
.sc-today:hover { background: var(--hover); }

.sc-cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
/* minmax(0, 1fr), not 1fr — a plain 1fr floors at the content's min width, so a
   single long caption chip stretches its column and the week goes crooked. */
.sc-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--chip-bg); }
.sc-dow div { padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.sc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sc-cell { min-height: 116px; min-width: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: 6px; }
.sc-cell:nth-child(7n + 1) { border-left: 0; }
.sc-cell-empty { background: var(--chip-bg); opacity: 0.35; }
.sc-cell-today { background: var(--hover); }
.sc-cell-head { display: flex; align-items: center; justify-content: space-between; }
.sc-daynum { font-size: 12px; color: var(--text-muted); }
.sc-cell-today .sc-daynum { color: var(--on-surface-strong); font-weight: 700; }
.sc-add {
  background: none; border: 0; color: var(--text-muted); font-size: 16px; line-height: 1;
  cursor: pointer; opacity: 0; padding: 0 4px; border-radius: 6px;
}
.sc-cell:hover .sc-add { opacity: 1; }
.sc-add:hover { background: var(--chip-bg); color: var(--text); }
.sc-add:focus-visible { opacity: 1; }
.sc-chips { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; min-width: 0; }
.sc-chip {
  display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; text-align: left;
  border: 1px solid var(--border); border-left-width: 3px; background: var(--surface);
  border-radius: 8px; padding: 4px 6px; font-family: var(--font); font-size: 11.5px;
  color: var(--text); cursor: pointer; overflow: hidden;
}
.sc-chip:hover { background: var(--hover); }
.sc-chip-time { color: var(--text-muted); font-size: 10.5px; white-space: nowrap; }
.sc-chip-cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-badge-draft { border-left-color: var(--border-strong); }
.sc-badge-approved { border-left-color: var(--accent); }
.sc-badge-scheduled { border-left-color: var(--badge-commit-border); }
.sc-badge-posted { border-left-color: var(--success); opacity: 0.72; }
.sc-badge-failed { border-left-color: var(--error); }

.sc-month-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }

@media (max-width: 760px) {
  /* On a phone the month grid becomes a list of the days that actually have
     something on them. A blank day is shape, not information, and 31 of them
     is just scrolling. Adding a post on a specific day is the calendar's job
     on desktop; on mobile "+ New post" covers it. */
  .sc-cal { border: 0; background: none; }
  .sc-dow { display: none; }
  .sc-grid { grid-template-columns: 1fr; gap: 8px; }
  .sc-cell { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-height: 0; }
  .sc-cell-empty, .sc-cell-blank { display: none; }
  .sc-cell-blank.sc-cell-today { display: block; }
  /* Without the column headers, a bare number loses its weekday. Put it back. */
  .sc-daynum::before { content: attr(data-dow) ' '; }
  .sc-add { opacity: 1; }
  .sc-chip-cap { white-space: normal; }
  .sc-month-empty { padding: 20px 4px; text-align: left; }
}

/* Composer */
.sc-modal { max-width: 620px; }
.sc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.sc-opt { color: var(--text-muted); font-weight: 400; }
.sc-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.5; }
.sc-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.sc-style {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; font-family: var(--font); color: var(--text);
}
.sc-style:hover { background: var(--hover); }
.sc-style.active { border-color: var(--on-surface-strong); box-shadow: inset 0 0 0 1px var(--on-surface-strong); }
.sc-style-emoji { font-size: 17px; }
.sc-style-label { font-size: 13px; font-weight: 600; line-height: 1.3; }
.sc-style-share { font-size: 11px; color: var(--text-muted); }
.sc-style-blurb { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.sc-plats { display: flex; flex-direction: column; gap: 8px; }
.sc-plat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-plat {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 50px;
  padding: 7px 14px; font-family: var(--font); font-size: 13px; color: var(--text-muted); cursor: pointer;
  flex-shrink: 0; width: 128px; text-align: center;
}
.sc-plat.active { border-color: var(--on-surface-strong); color: var(--text); background: var(--chip-bg); }
.sc-plat:disabled { opacity: 0.6; cursor: not-allowed; }
.sc-plat-date, .sc-plat-time {
  font-family: var(--font); font-size: 13px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 8px;
}
.sc-plat-date:disabled, .sc-plat-time:disabled { opacity: 0.5; }
.sc-plat-lock { font-size: 12px; color: var(--text-muted); }

.sc-hashtag-row { display: flex; gap: 8px; }
.sc-hashtag-row input { flex: 1; min-width: 0; }
.sc-hashtag-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sc-hashtag-chip { font-size: 12.5px; padding: 5px 12px; }

.sc-promptbox { border: 1px solid var(--border-strong); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.sc-promptbox summary { cursor: pointer; font-size: 13px; color: var(--text); }
.sc-prompt-body { position: relative; margin-top: 10px; }
.sc-prompt-body pre {
  background: var(--primary); color: #ede9ef; border-radius: 10px;
  padding: 34px 14px 14px; font-family: Consolas, Monaco, monospace; font-size: 12px;
  line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto;
}
.sc-copy {
  position: absolute; top: 8px; right: 8px; background: var(--accent); color: var(--primary);
  border: 0; border-radius: 50px; padding: 5px 14px; font-family: var(--font);
  font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.sc-err {
  background: var(--badge-warm-bg); color: var(--badge-warm-fg); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; margin-bottom: 12px; line-height: 1.5;
}

/* Preview */
.sc-preview-modal { max-width: 560px; }
.sc-pv-tabs { display: flex; gap: 8px; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.sc-pv-tab {
  background: none; border: 1px solid var(--border-strong); border-radius: 50px;
  padding: 6px 14px; font-family: var(--font); font-size: 13px; color: var(--text-muted); cursor: pointer;
}
.sc-pv-tab.active { border-color: var(--on-surface-strong); color: var(--text); background: var(--chip-bg); }
.sc-pv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-3); font-size: 12.5px; color: var(--text-muted); }
.sc-pv-meta .sc-badge { border: 1px solid var(--border-strong); border-left-width: 3px; border-radius: 50px; padding: 3px 12px; font-size: 11px; color: var(--text); }
.sc-pv-loading, .sc-pv-note { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
.sc-pv-error { font-size: 13px; color: var(--danger-fg); margin-top: 10px; }
.sc-mock { border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.sc-mock-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.sc-mock-av {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.sc-mock-name { font-size: 14px; font-weight: 600; }
.sc-mock-sub { font-size: 12px; color: var(--text-muted); }
.sc-mock-img { display: block; width: 100%; }
.sc-mock-img.broken { min-height: 120px; background: var(--chip-bg); }
.sc-mock-noimg {
  padding: 42px 16px; text-align: center; background: var(--chip-bg);
  color: var(--text-muted); font-size: 13px;
}
.sc-mock-cap { padding: 12px 14px; font-size: 14px; line-height: 1.6; }
.sc-mock-bar { display: flex; gap: 18px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.sc-mock-ig .sc-mock-bar { border-top: 0; padding-bottom: 4px; font-size: 17px; }
.sc-mock-ig .sc-mock-sub { padding: 0 14px 12px; }

/* ============================================
   Weekly devotional (lives on the Email Engine page)
   ============================================ */

.dv-card { margin-bottom: var(--sp-5); }
.dv-lede { color: var(--text-muted); font-size: 14px; line-height: 1.6; max-width: var(--readable-text); margin-bottom: var(--sp-3); }
.dv-pill { font-size: 11px; padding: 3px 12px; border-radius: 50px; white-space: nowrap; }
.dv-pill-scheduled { background: var(--badge-commit-bg); color: var(--badge-commit-fg); }
.dv-pill-draft { background: var(--badge-warm-bg); color: var(--badge-warm-fg); }
.dv-pill-failed { background: var(--badge-warm-bg); color: var(--danger-fg); }
.dv-next-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: var(--sp-3);
}
.dv-next-failed { border-color: var(--error); }
.dv-next-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.dv-next-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dv-empty { color: var(--text-muted); font-size: 14px; margin-bottom: var(--sp-3); }
.dv-actions { margin-bottom: var(--sp-3); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.card .btn-ghost, .inv-modal .btn-ghost {
  background: transparent; border: 1px solid var(--border-strong); border-radius: 50px;
  padding: 9px 18px; cursor: pointer; color: var(--text-muted); font-size: 14px; font-family: var(--font);
}
.card .btn-ghost.btn-sm, .inv-modal .btn-ghost.btn-sm { padding: 6px 14px; font-size: 13px; }
.card .btn-ghost:hover, .inv-modal .btn-ghost:hover { background: var(--hover); }
.card .btn-ghost:disabled, .inv-modal .btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
.dv-past-wrap { margin-top: var(--sp-3); }
.dv-past-wrap summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.dv-past-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  border-top: 1px solid var(--border); padding: 10px 2px; font-size: 14px; flex-wrap: wrap;
}
.dv-past-when { font-size: 12.5px; color: var(--text-muted); }

.dv-modal { max-width: 660px; }
.dv-modal textarea { line-height: 1.7; }
.dv-footer { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.dv-footer-left, .dv-footer-right { display: flex; gap: 8px; flex-wrap: wrap; }
.dv-confirm { max-width: 460px; }
.dv-confirm p { font-size: 14px; line-height: 1.65; color: var(--text); }

/* ---- Devotional: "In the Peace App this week" -----------------------------
   The three app features inside the composer. Grouped and set back from the
   devotional itself so the writing stays the main event and the week's
   features read as a checklist he fills in after. */

.dv-section {
  margin: 26px 0 4px;
  padding: 22px 20px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.dv-section-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--on-surface-strong);
}

.dv-section-note { margin-top: 6px; margin-bottom: 18px; }

.dv-block-label {
  margin: 24px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dv-section > .dv-block-label:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }

.dv-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dv-upload.is-busy { opacity: 0.55; pointer-events: none; }

.dv-upload-file {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.dv-upload-preview {
  width: 108px;
  height: 68px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

/* ---- Business Dashboard -------------------------------------------------
   Brand feel is "still, sacred, soft, plum, unhurried", so this page is not a
   spreadsheet. Numbers are set in the display face and given room, each email
   is a line you can read rather than a row you have to decode, and the only
   colour is plum at varying strength. No second accent, no hard shadows.    */

.biz-tabs { display: flex; gap: var(--sp-5); margin: var(--sp-5) 0 var(--sp-6); border-bottom: 1px solid var(--border); }
.biz-tab {
  background: none; border: none; border-bottom: 1px solid transparent;
  font-family: var(--font); font-size: 14px; letter-spacing: 0.01em; color: var(--text-muted);
  padding: 0 0 12px; margin-bottom: -1px; cursor: pointer;
}
.biz-tab:hover { color: var(--text); }
.biz-tab.active { color: var(--on-surface-strong); border-bottom-color: var(--on-surface-strong); }

.biz-panel { display: none; }
.biz-panel.active { display: block; }

/* ---- The list, at a glance ---------------------------------------------
   One number carries the page. The movement beside it is a sentence, not
   three more boxes competing with it. */
.biz-headline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-5) var(--sp-7);
  padding: var(--sp-6) 0 var(--sp-6);
  border-bottom: 1px solid var(--border); margin-bottom: var(--sp-6);
}
.biz-hero-value { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--primary); }
.biz-hero-label { font-size: 14px; color: var(--text-muted); margin-top: var(--sp-2); }
.biz-move { display: flex; gap: var(--sp-6); }
.biz-move-item { min-width: 92px; }
.biz-move-value { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--text); }
.biz-move-label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.biz-move-note { font-size: 12px; color: var(--text-muted); flex-basis: 100%; margin: 0; }

/* ---- One email per line ------------------------------------------------ */
.biz-send-head {
  display: grid; grid-template-columns: 108px 1fr 168px 168px;
  gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
}
.biz-send {
  display: grid; grid-template-columns: 108px 1fr 168px 168px;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--border);
}
.biz-send:last-child { border-bottom: none; }
.biz-send-date { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.biz-send-subject { font-family: var(--font-display); font-size: 17px; color: var(--on-surface-strong); }
.biz-send-sub2 { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* A meter, not a bar chart: a quiet plum fill on a paper track, with the
   figure beside it so the number is never guessed from a length. */
.biz-meter { display: flex; align-items: center; gap: var(--sp-3); }
.biz-track { flex: 1; height: 8px; border-radius: 50px; background: color-mix(in srgb, var(--primary) 8%, transparent); overflow: hidden; }
.biz-fill { height: 100%; border-radius: 50px; background: color-mix(in srgb, var(--primary) 78%, transparent); }
.biz-fill-soft { background: color-mix(in srgb, var(--primary) 42%, transparent); }
.biz-figure { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text); min-width: 52px; text-align: right; }
.biz-figure-none { color: var(--text-muted); }

.biz-more {
  background: none; border: 1px solid var(--border); border-radius: 50px;
  font-family: var(--font); font-size: 13px; color: var(--text-muted);
  padding: 8px 20px; margin-top: var(--sp-5); cursor: pointer;
}
.biz-more:hover { color: var(--primary); border-color: var(--primary); }

.biz-empty { color: var(--text-muted); padding: var(--sp-4) 0; }
.biz-foot { font-size: 12px; line-height: 1.7; color: var(--text-muted); margin-top: var(--sp-5); max-width: var(--readable-text); }

@media (max-width: 720px) {
  .biz-hero-value { font-size: 44px; }
  .biz-send-head { display: none; }
  .biz-send { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-5) 0; }
  .biz-send-date { order: -1; }
  .biz-meter { max-width: 260px; }
}

/* ---- Business Dashboard: the growth chart -------------------------------
   Hand-drawn SVG, no library. Plum for the line, a lighter plum for people
   joining, and a hollow outline for people leaving — leaving is an absence,
   so it reads as an absence rather than as a second competing colour.        */

/* The chart keeps a minimum width so fifteen months never squash into mush.
   On a phone that means it scrolls inside its own box — the page itself must
   never scroll sideways. This rule was lost in the redesign and the phone
   layout broke silently; it is the reason the mobile check exists. */
.biz-scroll { overflow-x: auto; }
.biz-chart { width: 100%; min-width: 560px; height: auto; display: block; }
.biz-grid { stroke: var(--border); stroke-width: 1; }
.biz-axis { font-family: var(--font); font-size: 10px; fill: var(--text-muted); }
.biz-line { stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.biz-bar-in { fill: color-mix(in srgb, var(--primary) 45%, transparent); }
.biz-bar-out { fill: color-mix(in srgb, var(--primary) 16%, transparent); }

.biz-key { display: flex; gap: var(--sp-4); font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.biz-key span { display: inline-flex; align-items: center; gap: 6px; }
.biz-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.biz-swatch-line { height: 2px; border-radius: 50px; background: var(--primary); }
.biz-swatch-in { background: color-mix(in srgb, var(--primary) 45%, transparent); }
.biz-swatch-out { background: color-mix(in srgb, var(--primary) 16%, transparent); }

.biz-pace {
  font-size: 13px; line-height: 1.7; color: var(--text-muted);
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border);
  max-width: var(--readable-text);
}
.biz-pace strong { color: var(--on-surface-strong); font-family: var(--font-display); font-size: 15px; }

/* The benchmark mark on a meter. Deliberately quiet: it is a reference point,
   not a pass/fail line, and it must never look like an alarm. */
.biz-track { position: relative; }
.biz-notch {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: 1px;
}

/* ---- Business Dashboard: Subscribers -------------------------------------
   One card per number, set the same way as the email headline: the figure in
   the display face and plum, the date it was read directly under it, and the
   week's movement as a plain sentence. The total leads and spans the row.   */
.aud-head { margin-bottom: var(--sp-5); flex-wrap: wrap; }
.aud-intro { color: var(--text-muted); margin: 0; max-width: var(--readable-text); }
.aud-refresh { margin-top: 0; }
.aud-notice {
  font-size: 13px; color: var(--text); margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.aud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--sp-5); }
.aud-grid .aud-card { margin-bottom: 0; }
.aud-card-total { grid-column: 1 / -1; }
.aud-label { font-size: 17px; margin-bottom: var(--sp-3); }
.aud-value { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--on-surface-strong); font-variant-numeric: tabular-nums; }
.aud-card-total .aud-value { font-size: 56px; }
.aud-asof { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-2); }
.aud-change { font-size: 14px; color: var(--text); margin-top: var(--sp-4); }
.aud-note { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-1); }
.aud-spark { display: block; width: 100%; height: 44px; margin-top: var(--sp-4); }
.aud-spark-line { stroke: var(--on-surface-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.7; }
.aud-card-total .aud-spark { max-width: 560px; }
.aud-range { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.aud-card-total .aud-range { max-width: 560px; }

@media (max-width: 720px) {
  .aud-value, .aud-card-total .aud-value { font-size: 44px; }
}

/* ============================================
   Light redesign (2026-09-16)
   Matthew's direction: light, in the feel of the Peace app thumbnails —
   misty photography, white continuous line art, pearl, lilac, blush and a
   soft lavender blue. Approved from a mockup before any code changed.

   Presentation only. Every class the scripts render is kept; nothing here
   changes what a page does. It sits at the end of the file on purpose, so
   it reads as one layer over the rules above and can be reviewed as one.
   Colors come from the tokens at the top (and the dark set), never literals.
   ============================================ */

h1, h2, h3 { font-weight: 400; letter-spacing: 0.005em; text-wrap: balance; }
body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ---------- Top bar: light, quiet, the plum wordmark as it is ---------- */
.topbar {
  height: 64px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  padding: 0 var(--sp-5);
  gap: var(--sp-4);
}
.topbar-logo { height: 28px; width: auto; border-radius: 0; filter: none; }
.topbar-title {
  flex: 1; font-weight: 400; font-size: 19px;
  padding-left: var(--sp-4); border-left: 1px solid var(--border-strong);
}
.topbar-who { color: var(--text-muted); opacity: 1; }
.hamburger { color: var(--text); }
.theme-toggle {
  width: 38px; height: 38px; min-height: 38px; min-width: 38px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.topbar .topbar-logout { border: 0; color: var(--text-muted); padding: 6px 8px; }
.topbar .topbar-logout:hover { background: none; color: var(--text); }

/* ---------- Sidebar: line icons, a lifted pill for where you are ---------- */
.sidebar { background: var(--bg); padding: var(--sp-5) 14px; }
.nav-list li + li { margin-top: 2px; }
.nav-list a {
  gap: 12px; padding: 9px 12px; border-left: 0; border-radius: 10px;
  color: var(--text-muted);
}
.nav-list a:hover { background: var(--hover); color: var(--text); }
.nav-list a.active {
  background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border);
}
.nav-icon {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.sidebar-contact { padding: var(--sp-4) 12px 0; margin-top: var(--sp-4); }
.contact-head { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; }
.contact-link { color: var(--text-muted); gap: 10px; }
.contact-link:hover { color: var(--text); }
.contact-link .nav-icon { width: 16px; height: 16px; }

/* ---------- Content column ---------- */
.content { max-width: none; margin: 0; padding: 36px 40px 96px; }
.page { max-width: 1080px; }

/* Page header: the words on the left, a thumbnail from the app on the right.
   The tile scales with the window and moves above the title on a phone. */
.page-head {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 24vw, 360px);
  gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: 28px;
}
.page-head-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.page-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.page h1 { font-size: 40px; line-height: 1.1; margin: 0; }
.page-intro { font-size: 16px; line-height: 1.6; margin: 0; max-width: 60ch; }
.page-tile {
  position: relative; width: 100%; max-width: 100%; aspect-ratio: 5 / 3;
  border-radius: 16px; overflow: hidden; background: var(--lilac); box-shadow: var(--shadow-soft);
}
.page-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Cards: one width, soft edges, lifted only where it counts ---------- */
.card {
  border: 1px solid var(--border); border-radius: 18px; box-shadow: none;
  padding: 24px 26px; margin-bottom: 22px;
}
.card h2 { font-size: 23px; line-height: 1.25; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.card-text { max-width: none; }
.card-text p { max-width: 68ch; color: var(--text-muted); }
.dv-card, .aud-card-total { box-shadow: var(--shadow-soft); }

/* Buttons: pills throughout. --btn-bg is plum in light and a lifted violet in
   dark, where plum on the night ground would disappear. */
.btn-primary { border-radius: 999px; background: var(--btn-bg); }
.btn-primary:hover { background: var(--btn-bg); filter: brightness(1.12); }
.inv-toolbar .btn-primary, .inv-modal-footer .btn-primary,
.sc-toolbar .btn-primary, .dv-actions .btn-primary, .dv-footer .btn-primary,
.toolkit-go, .sdw-send { background: var(--btn-bg); }
.inv-toolbar .btn-primary:hover, .inv-modal-footer .btn-primary:hover,
.sc-toolbar .btn-primary:hover, .dv-actions .btn-primary:hover, .dv-footer .btn-primary:hover,
.toolkit-go:hover, .sdw-send:hover { background: var(--btn-bg); filter: brightness(1.12); }
.inv-toolbar .btn-primary, .inv-modal-footer .btn-primary,
.sc-toolbar .btn-primary, .dv-actions .btn-primary, .dv-footer .btn-primary { padding: 10px 20px; }
.card .btn-ghost, .inv-modal .btn-ghost { color: var(--text); background: var(--surface); }
.btn-inline { border-radius: 999px; }

/* Number strips */
.inv-metrics, .metrics { gap: 14px; margin-bottom: 22px; }
.inv-metric, .metric { border-radius: 14px; padding: 16px 18px; }
.inv-metric-label, .metric-label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; margin-bottom: 8px; }
.inv-metric-value, .metric-value { font-size: 32px; line-height: 1; }

/* Filters: the chosen one is ink, the rest are quiet */
.inv-fbtn { border-color: var(--border); background: var(--surface); color: var(--text-muted); }
.inv-fbtn.active { background: var(--text); border-color: var(--text); color: var(--surface); }
.inv-empty { color: var(--text-muted); }

/* Inputs share one soft frame */
.inv-field input, .inv-field select, .inv-field textarea, .inv-field .fmt-box,
.invite-form input, .invite-form select, .sc-img-field input, .sc-img-field select,
.toolkit-verse-row input, .role-select, .perm-select, .login-card input, .sdw-modal input, .sdw-modal textarea {
  border-radius: 10px; border-color: var(--border-strong); background: var(--input-bg); color: var(--text);
}
.inv-modal { border-radius: 20px; }
.inv-overlay { background: color-mix(in srgb, var(--primary) 30%, transparent); }

/* ---------- Email Engine ---------- */
.dv-lede { max-width: 70ch; }
.dv-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; display: inline-flex; align-items: center; gap: 6px; }
.dv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dv-pill-scheduled { background: var(--good-soft); color: var(--good); }
.dv-next-row { background: var(--chip-bg); border: 0; border-radius: 14px; padding: 16px 18px; }
.dv-next-failed { box-shadow: inset 0 0 0 1px var(--error); }
.dv-next-row strong { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--on-surface-strong); }
.dv-past-wrap summary { font-size: 14px; }
.ee-status { margin-bottom: 18px; }
#eeStatus { background: transparent; border: 0; padding: 12px 2px 0; }
#eeStatus p { color: var(--text-muted); }
.ee-phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ee-phase { border-radius: 18px; padding: 20px 22px; margin-bottom: 0; }
.ee-phase-head h2 { font-size: 19px; }
.ee-phase-days { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; }
.ee-row { padding: 9px 6px; border-radius: 8px; }
.ee-day { background: none; color: var(--text-muted); padding: 0; min-width: 52px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; border-radius: 0; }
.ee-open { color: var(--accent-blue); }
@media (max-width: 980px) { .ee-phases { grid-template-columns: 1fr; } }

/* ---------- Business Dashboard ---------- */
.biz-tabs { margin: 0 0 22px; gap: 4px; }
.biz-tab { padding: 10px 14px 12px; font-size: 14.5px; border-bottom-width: 2px; }
.biz-tab.active { font-weight: 600; color: var(--text); border-bottom-color: var(--text); }
.biz-headline {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-soft); padding: 28px 30px; margin-bottom: 22px; align-items: flex-end;
}
.biz-hero-value { font-size: 72px; color: var(--on-surface-strong); }
.biz-hero-label { color: var(--text-muted); }
.biz-move-value { font-size: 30px; color: var(--on-surface-strong); }
.biz-line { stroke: var(--accent-blue); stroke-width: 2.4; }
.biz-bar-in { fill: var(--lilac); }
.biz-bar-out { fill: var(--blush); }
.biz-swatch-line { background: var(--accent-blue); }
.biz-swatch-in { background: var(--lilac); }
.biz-swatch-out { background: var(--blush); }
.biz-grid { stroke: var(--border); }
.biz-track { background: var(--chip-bg); height: 6px; overflow: visible; }
.biz-fill { background: var(--accent-blue); }
.biz-fill-soft { background: color-mix(in srgb, var(--accent-blue) 60%, transparent); }
.biz-notch { top: -4px; bottom: -4px; background: var(--text-muted); opacity: 0.6; }
.biz-more { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
.biz-more:hover { color: var(--text); border-color: var(--text-muted); }
.biz-pace strong { color: var(--on-surface-strong); }
.aud-grid { gap: 16px; }
.aud-label { font-size: 17px; }
.aud-spark-line { stroke: var(--accent-blue); opacity: 1; }
.aud-notice { background: var(--chip-bg); border-radius: 12px; }

/* ---------- Social Calendar ---------- */
.sc-img, .sc-banner { max-width: none; }
.sc-banner { border-radius: 14px; background: var(--chip-bg); border-color: var(--border); }
/* .sc-banner sets display:flex, which beat the hidden attribute and left an
   empty grey bar on the Social page whenever there was no banner to show. */
.sc-banner[hidden] { display: none; }
.sc-img-state { font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: 12px; padding: 3px 10px; border: 0; background: var(--chip-bg); }
.sc-img-state.is-on { background: var(--good-soft); color: var(--good); }
.sc-month-label { font-size: 24px; }
.sc-navbtn, .sc-today { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.sc-cal { border-radius: 16px; }
.sc-dow { background: var(--chip-bg); border-bottom: 1px solid var(--border); }
.sc-dow div { font-weight: 600; letter-spacing: 0.14em; }
@media (min-width: 761px) {
  /* Every day carries its own bottom edge, so a short last week still closes
     cleanly; the month's final edge tucks under the card border. */
  .sc-grid { margin-bottom: -1px; }
  .sc-cell { border-top: 0; border-bottom: 1px solid var(--border); }
  .sc-cell-empty { background: var(--bg); opacity: 1; }
}
.sc-cell-today { background: var(--accent-soft); }
.sc-cell-today .sc-daynum {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 999px; background: var(--text); color: var(--surface); font-size: 12px;
}
.sc-chip { border-radius: 8px; }

/* ---------- Team: the row actions stay quiet until you need one ---------- */
.team-row { padding: 16px 0; }
.team-actions { gap: 14px; }
.role-select { border-radius: 999px; padding: 6px 12px; }
.invite-form select { flex: 1 1 230px; }
.btn-link { color: var(--text-muted); text-decoration: none; }
.btn-link:hover { color: var(--text); text-decoration: underline; }
.btn-danger { border: 0; padding: 0; min-height: 0; min-width: 0; color: var(--danger-fg); background: none; font-size: 13px; }
.btn-danger:hover { background: none; text-decoration: underline; }
.team-perms summary { color: var(--text-muted); font-weight: 600; }

/* ---------- The two helpers, bottom right: in colour, so they are found ---------- */
.tb-fab, .sdw-fab {
  width: 52px; height: 52px; border: 0; color: var(--fab-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 75%, transparent), var(--shadow-fab);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.tb-fab { background: var(--fab-a); bottom: 90px; }
.sdw-fab { background: var(--fab-b); }
.tb-fab:hover, .sdw-fab:hover { transform: translateY(-2px); filter: brightness(1.08); }
.tb-fab .nav-icon, .sdw-fab .nav-icon { width: 22px; height: 22px; stroke-width: 1.6; }
.tb-fab-tip, .sdw-fab-tip { background: var(--text); color: var(--surface); border-radius: 999px; padding: 6px 12px; }
.tb-panel { border-left: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-soft); }
.tb-head { font-size: 19px; }
.toolkit-go { border-radius: 999px; }
.toolkit-link { border-radius: 12px; }
.sdw-modal { border-top: 0; border-radius: 20px; }
.sdw-send { border-radius: 999px; }

/* ---------- Sign-in pages share the light ground ---------- */
.login-card { border-top: 0; border-radius: 20px; box-shadow: var(--shadow-soft); border: 1px solid var(--border); }

/* ---------- Dark: the logo turns white on the night palette ---------- */
:root[data-theme="dark"] .topbar-logo { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar-logo { filter: brightness(0) invert(1); }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .content { padding: 28px 24px 110px; }
}
@media (max-width: 760px) {
  .page-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 22px; }
  .page-tile { order: -1; max-width: 520px; }
  .page h1 { font-size: 32px; }
  .card { padding: 20px; }
  .biz-headline { padding: 22px; }
  .biz-hero-value { font-size: 56px; }
}
@media (max-width: 600px) {
  .content { padding: 20px 16px 120px; }
  .topbar { padding: 0 var(--sp-3); }
  .topbar-title { display: none; }
  /* With the title hidden, nothing pushes the buttons right. */
  .theme-toggle { margin-left: auto; }
  .tb-fab { right: 14px; bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-fab, .sdw-fab, .sidebar { transition: none; }
}