/* Co-Create CRM. Design tokens first; every colour, face and radius below
   comes from them, so a white-label theme only has to change this block.
   Contrast pairs checked at WCAG AA: ink on paper and surface, accent text on
   paper, ink on the orange fill, side text on the sidebar. */

@font-face { font-family: "Anton"; src: url("/fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }

:root {
  --bg: #F3EEE9;          /* cream paper */
  --surface: #FFFFFF;
  --surface-2: #F8F8F8;
  --warm: #FFF5ED;
  --ink: #181B20;
  --muted: #454545;
  --faint: #666666;
  --line: #E7DEDA;
  --hair: rgba(24, 27, 32, .12);
  --fill: #FC6500;        /* brand orange, with ink text on it */
  --on-fill: #181B20;
  --accent: #BF3A14;      /* small orange text: 4.76:1 on paper, 5.48:1 on white */
  --ok: #0C8FC8;          /* Electric Blue: allowed, passing (dots, borders) */
  --ok-text: #0A6E9C;     /* the same blue when it is text: 5.64:1 on white */
  --field-line: #858585;  /* field edges: 3.69:1 on white, 3.20:1 on paper */
  --text-min: 14px;       /* nothing readable is smaller */
  --ok-bg: #F8F8F8;
  --warn-bg: #FFF5ED;
  --danger: #BF3A14;
  --err-bg: #FFF5ED;
  --ring: #0C8FC8;
  --blue: #0D4A92;
  --hl: #DE5300;
  --side: #1A1A1A;
  --side-ink: #AAB3BF;
  --side-hi: #EEF1F5;
  --display: "Monigue", "Anton", "Arial Narrow", Impact, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 16px;
    --shadow: 0 18px 40px -22px rgba(24, 27, 32, .35);
  --side-w: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #181B20; --surface: #22262C; --surface-2: #1E2227; --warm: #22262C;
    --ink: #EEF1F5; --muted: #C9D0D9; --faint: #AAB3BF;
    --line: rgba(238, 241, 245, .12); --hair: rgba(238, 241, 245, .14);
    --accent: #FF9B6A; --ok: #6FB0F5; --ok-text: #6FB0F5; --field-line: #7A828C; --ok-bg: #1E2227; --warn-bg: #22262C; --danger: #FF9B6A; --err-bg: #22262C; --blue: #6FB0F5; --hl: #FC6500;
    --ring: #6FB0F5; --side: #0F1114;
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #181B20; --surface: #22262C; --surface-2: #1E2227; --warm: #22262C;
  --ink: #EEF1F5; --muted: #C9D0D9; --faint: #AAB3BF;
  --line: rgba(238, 241, 245, .12); --hair: rgba(238, 241, 245, .14);
  --accent: #FF9B6A; --ok: #6FB0F5; --ok-text: #6FB0F5; --field-line: #7A828C; --ok-bg: #1E2227; --warn-bg: #22262C; --danger: #FF9B6A; --err-bg: #22262C; --blue: #6FB0F5; --hl: #FC6500;
  --ring: #6FB0F5; --side: #0F1114;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
h1 { font: 400 clamp(36px, 5vw, 64px)/.95 var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 12px; }
h2 { font: 400 24px/1.25 var(--serif); margin: 0 0 12px; }
h3 { font: 600 16px/1.3 var(--ui); margin: 20px 0 8px; }
.hint { color: var(--faint); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Shell: sidebar on desktop, top bar and bottom tabs on phones ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: linear-gradient(to right, var(--side) var(--side-w), var(--bg) var(--side-w)); }
.app:has(#tabs[hidden]) { background: var(--bg); }
.side { background: var(--side); color: var(--side-hi); display: flex; flex-direction: column; gap: 24px; padding: 24px 16px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--side-hi); text-decoration: none; }
.mark { width: 34px; height: 34px; flex: none; }
.brand b { display: block; font: 400 20px/1 var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
/* A company's own logo sits on a light chip so dark logos stay visible. */
.co-brand { flex-wrap: wrap; gap: 8px; }
.co-logo { display: inline-flex; align-items: center; background: #FFF; border-radius: 10px; padding: 6px 10px; max-width: 100%; }
.co-logo img { display: block; max-height: 40px; max-width: 180px; width: auto; height: auto; }
.logo-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.logo-view { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 12px; border: 1px dashed var(--hair); border-radius: 12px; background: #FFF; margin-bottom: 10px; }
.logo-view img { max-height: 80px; max-width: 100%; width: auto; height: auto; }
.brand small { display: block; font: 500 var(--text-min)/1.3 var(--mono); color: var(--side-ink); letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }
.tabs { display: flex; flex-direction: column; gap: 4px; }
.tabs a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--side-ink); text-decoration: none; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tabs a:hover { color: var(--side-hi); background: rgba(238, 241, 245, .07); }
.tabs a[aria-current="page"] { background: var(--fill); color: var(--on-fill); }
.tabs svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs .count { margin-left: auto; min-width: 22px; text-align: center; font: 600 var(--text-min)/20px var(--ui); border-radius: 999px; background: var(--fill); color: var(--on-fill); padding: 0 6px; }
.tabs a[aria-current="page"] .count { background: var(--on-fill); color: var(--fill); }
.residency { margin: auto 0 0; border: 1px solid rgba(238, 241, 245, .14); border-radius: var(--r); padding: 14px; font: 400 var(--text-min)/1.55 var(--mono); color: var(--side-ink); }
.residency strong { display: flex; align-items: center; gap: 8px; color: var(--side-hi); font-weight: 500; margin-bottom: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fill); flex: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: flex-end; padding: 16px 24px 0; min-height: 16px; }
.topbar { gap: 10px; align-items: center; }
.theme-btn { width: 44px; min-height: 44px; padding: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--hair); }
.theme-btn:hover:not(:disabled) { box-shadow: none; border-color: var(--ink); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.lang-toggle { min-height: 44px; padding: 0 6px; white-space: nowrap; }
.who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.who select { width: auto; margin: 0; min-height: 40px; padding: 0 12px; border-radius: 999px; font-size: 14px; }
.av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 500 var(--text-min) var(--mono); background: var(--warm); border: 2px solid var(--fill); color: var(--accent); flex: none; }
.who-text { display: flex; flex-direction: column; line-height: 1.25; }
.who .name { font-weight: 600; font-size: 14px; }
.who .role { font: 400 var(--text-min) var(--mono); color: var(--faint); }
main { width: 100%; max-width: 1160px; padding: 24px 24px 48px; flex: 1; }
.foot { color: var(--faint); font: 400 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 0 24px 24px; }

/* Signed out: no sidebar content, just the card on paper. */
.app:has(#tabs[hidden]) { grid-template-columns: minmax(0, 1fr); }
.app:has(#tabs[hidden]) .side { position: static; height: auto; flex-direction: row; padding: 16px 24px; }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 22px; margin-bottom: 16px; }
.narrow { max-width: 440px; margin: 32px auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; }
.toolbar h1, .toolbar h2, .toolbar h3 { margin: 0; }
.toolbar + * { margin-top: 14px; }
.notice { padding: 12px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--hair); border-left: 4px solid var(--ring); font-size: 15px; overflow-wrap: anywhere; }
.notice.error { background: var(--warm); border-left-color: var(--accent); }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.badge.warn { background: var(--err-bg); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font: 400 var(--text-min) var(--mono); background: var(--surface-2); }

/* ---------- Forms and buttons ---------- */
label { display: block; margin-bottom: 14px; font: 500 var(--text-min)/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
input, select, textarea { display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 10px 14px; font: 400 16px/1.5 var(--ui); color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: 12px; text-transform: none; letter-spacing: normal; }
::placeholder { color: var(--faint); opacity: 1; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ring); outline-offset: 1px; border-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; font: 600 15px var(--ui); border: 1px solid transparent; border-radius: 999px; background: var(--fill); color: var(--on-fill); cursor: pointer; transition: transform .15s, box-shadow .15s; }
button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px -10px var(--fill); }
button:disabled { opacity: .6; cursor: wait; }
button.secondary { background: transparent; color: var(--ink); border-color: var(--hair); }
button.secondary:hover:not(:disabled) { border-color: var(--ink); box-shadow: none; }
button.link { background: none; color: var(--accent); min-height: 40px; padding: 0 8px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { transform: none; box-shadow: none; }
button.link.danger { color: var(--danger); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; align-items: end; }
.grid button { margin-bottom: 14px; }
.wide { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--hair); border-radius: 12px; margin: 0 0 14px; padding: 10px 14px; }
legend { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: 0 4px; }
.check { display: flex; gap: 10px; align-items: center; margin: 6px 0; font: 400 15px/1.4 var(--ui); text-transform: none; letter-spacing: normal; color: var(--ink); min-height: 32px; }
.check input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--fill); flex: none; }
label.inline { display: inline-block; margin: 0; }
.grow { flex: 1 1 220px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.link-box { margin-top: 14px; padding: 14px; border: 1px dashed var(--fill); border-radius: 12px; background: var(--warm); }
.link-box input { margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; min-height: 32px; }
details form { margin-top: 14px; max-width: 480px; }
#import-form { max-width: 720px; }

/* ---------- Tables ---------- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; } /* relative: hidden header text scrolls with the table */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: 12px 14px; border-bottom: 1px solid var(--hair); white-space: nowrap; background: var(--surface-2); }
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child > :is(td, th) { border-bottom: 0; }
td a { font-weight: 600; }

/* ---------- Home and contacts ---------- */
.steps { padding-left: 22px; }
.steps li { margin: 6px 0; }
.steps li.done { color: var(--faint); text-decoration: line-through; }
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 14px 0; }
.badge-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--ok); background: var(--ok-bg); font-size: 14px; }
.badge-card.held { border-left-color: var(--accent); background: var(--warm); }
.badge-card strong { display: block; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.loc { padding: 14px 0; border-top: 1px dashed var(--line); }
.loc .hint { margin: 4px 0; }

/* ---------- Social planner ---------- */
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-nav strong { font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; min-width: 8ch; text-align: center; }
.month-nav button { min-height: 44px; width: 44px; padding: 0; font-size: 20px; }
.grant-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cal-head, .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head span { font: 500 var(--text-min) var(--mono); color: var(--faint); padding: 6px 8px; text-transform: uppercase; letter-spacing: .04em; }
.cal { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cal .day { min-height: 104px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal .day:nth-child(7n) { border-right: 0; }
.cal .day.out { background: var(--surface-2); }
.cal .day .d { font: 500 var(--text-min) var(--mono); color: var(--faint); }
.cal .day.today .d { color: var(--accent); }
.cal .day.today { box-shadow: inset 0 0 0 2px var(--fill); }
.post-chip { display: block; font: 400 var(--text-min)/1.35 var(--mono); padding: 4px 7px; border-radius: 8px; border: 1px solid var(--line); border-left: 3px solid var(--faint); background: var(--surface); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-chip:hover { border-color: var(--ink); }
.s-in_review { border-left-color: var(--fill); }
.s-approved { border-left-color: var(--ok); }
.s-changes_requested { border-left-color: var(--danger); }
.badge.s-in_review { background: var(--warn-bg); }
.badge.s-approved { background: var(--ok-bg); }
.badge.s-changes_requested { background: var(--err-bg); }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { padding: 12px 0; border-top: 1px dashed var(--line); }
.post-list li:first-child { border-top: 0; }
.net-row { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.checks { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.checks li { padding: 10px 14px; border-radius: 12px; font-size: 14px; background: var(--warn-bg); border: 1px solid var(--line); }
.checks li.stop { background: var(--err-bg); font-weight: 600; }
.warn-text { color: var(--danger); }
.history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.history li { display: grid; grid-template-columns: 12px 1fr; column-gap: 12px; padding: 10px 0; }
.history strong { font: 400 19px/1.3 var(--serif); }
.history li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fill); margin-top: 8px; grid-row: span 4; }
.post-text { white-space: pre-wrap; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--bg); }
  .side { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 16px 10px; overflow: visible; }
  .brand small { display: none; }
  .brand b { font-size: 19px; }
  .co-logo { padding: 4px 8px; border-radius: 8px; }
  .co-logo img { max-height: 28px; max-width: 120px; }
  .mark { width: 30px; height: 30px; }
  .residency { display: none; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-direction: row; gap: 0; background: var(--side); border-top: 1px solid rgba(255, 255, 255, .08); padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); overflow-x: auto; }
  .tabs a { flex: 1 0 64px; flex-direction: column; gap: 3px; min-height: 52px; padding: 4px; border-radius: 12px; font: 500 var(--text-min) var(--ui); text-transform: none; letter-spacing: 0; justify-content: center; position: relative; }
  .tabs a[aria-current="page"] { background: transparent; color: var(--fill); }
  .tabs svg { width: 22px; height: 22px; }
  .tabs .count { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; }
  .tabs a[aria-current="page"] .count { background: var(--fill); color: var(--on-fill); }
  .topbar { position: fixed; top: max(8px, env(safe-area-inset-top)); right: 12px; z-index: 31; padding: 0; }
  .theme-btn { width: 40px; min-height: 40px; background: transparent; color: var(--side-hi); border-color: rgba(238, 241, 245, .2); }
  .who-text { display: none; }
  .who select { max-width: 46vw; background: var(--side); color: var(--side-hi); border-color: rgba(255, 255, 255, .2); }
  main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .card { padding: 16px; }
  h1 { font-size: clamp(28px, 8.5vw, 36px); }
}

/* ---------- Public event page ---------- */
body.public { background: var(--bg); }
.public-main { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
/* The business's own logo above a public page's heading. */
.pub-brand { margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.pub-brand img { display: block; max-height: 64px; max-width: min(280px, 100%); width: auto; height: auto; }
.pub-brand img.pub-mark { max-height: 36px; }
/* A full logo is usually drawn for a light page, so its name can vanish on a
   dark one. In dark mode it sits on a small cream plate so it always reads. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pub-brand img:not(.pub-mark) { background: #F3EEE9; padding: 8px 12px; border-radius: 10px; }
}
:root[data-theme="dark"] .pub-brand img:not(.pub-mark) { background: #F3EEE9; padding: 8px 12px; border-radius: 10px; }
.public .narrow { max-width: none; }
.caps { font: 500 var(--text-min)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 8px; }
dl.rows { margin: 0 0 16px; }
dl.rows div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); font: 400 14px/1.5 var(--mono); }
dl.rows dt { color: var(--faint); }
dl.rows dd { margin: 0; text-align: right; }
.event-desc { white-space: pre-wrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent-box { align-items: flex-start; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-2); }
.consent-box input { margin-top: 2px; }
.public form button { width: 100%; }
.event-list { list-style: none; padding: 0; margin: 0; }
.event-list li { padding: 14px 0; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: baseline; }
.event-list li:first-child { border-top: 0; }
.event-list a { font: 400 20px/1.3 var(--serif); }
.tag-in { color: var(--ok-text); font-weight: 600; }

/* ---------- Web app ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
.tabs, .tabs a, .brand, button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, select, textarea { font-size: max(16px, 1em); }
.install-btn { min-height: 44px; padding: 0 16px; gap: 8px; background: var(--fill); color: var(--on-fill); border: 0; }
.install-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offline { margin: 0; padding: 10px 16px; background: var(--side); color: #FFF5ED; font: 500 14px/1.4 var(--mono, "JetBrains Mono", monospace); text-align: center; }
.offline[hidden], .install-btn[hidden] { display: none; }
.standalone .side { padding-top: max(10px, env(safe-area-inset-top)); }
@media (max-width: 820px) {
  .install-btn span { display: none; }
  .install-btn { width: 44px; padding: 0; justify-content: center; }
  .offline { position: sticky; top: 0; z-index: 29; }
}
@media (display-mode: standalone) and (min-width: 821px) {
  .side { padding-top: max(24px, env(safe-area-inset-top)); }
}

/* ---------- Profile ---------- */
.who-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 999px; min-height: 44px; }
.who-link:hover .name { text-decoration: underline; text-underline-offset: 3px; }
.who-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.av.has-photo { overflow: hidden; padding: 0; }
.av img, canvas.av { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.av-lg { width: 112px; height: 112px; font-size: 32px; border-width: 3px; }
canvas.av-lg { width: 112px; height: 112px; }
.av-sm { width: 30px; height: 30px; font-size: var(--text-min); border-width: 1.5px; }
td.person .person-box { display: flex; align-items: center; gap: 10px; }
td.person small { display: block; color: var(--faint); font: 400 var(--text-min) var(--ui); }
.profile-photo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 20px 0 24px; }
.photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 240px; }
.photo-actions .hint { flex-basis: 100%; margin: 0; }
.file-btn { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--hair); font: 600 15px var(--ui); color: var(--ink); cursor: pointer; position: relative; }
.file-btn:hover { border-color: var(--ink); }
.file-btn:focus-within { outline: 2px solid var(--ring); outline-offset: 3px; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
@media (max-width: 820px) {
  .who-link { gap: 0; }
}

/* ---------- Media ---------- */
.pane-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.pane-head h1 { margin-bottom: 0; }
.meter { margin: 18px 0 8px; }
.meter-bar { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter-bar span { display: block; height: 100%; width: 0; background: var(--fill); transition: width .3s; }
.meter-bar span.full { background: var(--accent); }
.meter .hint { margin: 6px 0 0; font-family: var(--mono); font-size: var(--text-min); }
.dropzone { margin: 16px 0; padding: 22px; border: 1.5px dashed var(--hair); border-radius: 16px; background: var(--warm); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.dropzone.over { border-color: var(--fill); background: var(--surface); }
.dropzone > p:first-child { margin: 0; }
.dropzone .hint { flex-basis: 100%; margin: 0; }
.upload-list { list-style: none; padding: 0; margin: 0; flex-basis: 100%; display: grid; gap: 6px; }
.upload-list:empty { display: none; }
.upload-list li { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: center; font-size: 14px; }
.upload-list progress { width: 100%; accent-color: var(--fill); }
.media-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 8px 0 16px; }
.media-tools input[type=search] { flex: 1 1 220px; max-width: 360px; }
button.chip { min-height: 40px; padding: 0 16px; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; background: transparent; color: var(--ink); border: 1px solid var(--hair); }
button.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
button.chip:hover:not(:disabled) { box-shadow: none; }
.media-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.media-tile { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.media-frame { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.media-icon { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--hair); border-radius: 999px; padding: 6px 12px; }
.media-meta { padding: 10px 12px 0; display: grid; gap: 2px; min-width: 0; }
.media-meta b { font: 600 14px/1.3 var(--ui); overflow-wrap: anywhere; }
.media-meta .hint { margin: 0; font-size: var(--text-min); }
.media-meta .warn { color: var(--accent); }
.media-actions { display: flex; gap: 4px; padding: 4px 4px 8px; margin-top: auto; }
.source-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.source-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.source-list li.hint { border: 0; padding: 0; }
@media (max-width: 820px) {
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dropzone { padding: 16px; }
}

/* ---------- Forms ---------- */
.share-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; margin-top: 12px; }
.share-box .hint { grid-column: 1 / -1; margin: 0; }
.share-box textarea { font: 400 var(--text-min)/1.5 var(--mono); resize: none; }
.field-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; counter-reset: fld; }
.field-list { grid-template-columns: minmax(0, 1fr) auto auto; }
.field-list > .field-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.field-row > input:not([type=checkbox]) { margin: 0; }
.field-row > input + .badge { justify-self: start; }
.field-row .field-tools { grid-column: 1 / -1; display: flex; gap: 4px; }
.field-row > input:nth-of-type(2) { grid-column: 1 / -1; }
.field-row .check { margin: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 24px; }
dl.answers { margin: 0; display: grid; grid-template-columns: auto minmax(16ch, 1fr); gap: 2px 10px; font-size: 14px; }
dl.answers dt { white-space: nowrap; color: var(--faint); font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
dl.answers dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
body.embedded { background: transparent; }
body.embedded .public-main { padding: 0; margin: 0; max-width: none; }
body.embedded .card.narrow { margin: 0; box-shadow: none; }
@media (max-width: 820px) {
  .share-box { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr) auto; }
  .field-list { grid-template-columns: minmax(0, 1fr) auto; }
  .field-row .check { grid-column: 1 / -1; }
}

/* Website tracking */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ledger > div { padding: 14px 12px; }
.ledger dt { font-family: var(--mono, monospace); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ledger dd { margin: 4px 0 0; font-size: 30px; line-height: 1.1; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.spark-bar { flex: 1; min-height: 2px; background: var(--ring, #0C8FC8); border-radius: 2px 2px 0 0; }
.spark-bar.has-conv { background: var(--fill, #FC6500); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; gap: 0 24px; }

/* ---------- AI assistant access ---------- */
#ai-access td.mono, #ai-access .share-box input { font: 400 var(--text-min)/1.5 var(--mono); }
#ai-token-form { margin-top: 16px; }
#ai-access .table-wrap { margin-top: 16px; }
#ai-access td:nth-child(3), #ai-access td:nth-child(4) { white-space: nowrap; }
@media (max-width: 820px) { #ai-access td:first-child { min-width: 18ch; } #ai-access td:nth-child(5) { white-space: nowrap; } }
/* ---------- More sheet: phones show four main tabs and More ---------- */
.more-btn { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(15, 17, 20, .5); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--side); color: var(--side-hi); border-radius: 20px 20px 0 0; padding: 16px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; color: var(--side-hi); }
.sheet-head .link { color: var(--side-hi); }
.sheet-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sheet-links a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 8px 4px; border-radius: 12px; color: var(--side-ink); text-decoration: none; font: 500 var(--text-min) var(--ui); text-align: center; }
.sheet-links a:hover, .sheet-links a[aria-current="page"] { color: var(--fill); background: rgba(238, 241, 245, .07); }
.sheet-links svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px) {
  .tabs { overflow-x: visible; }
  .tabs a:not([data-main]) { display: none; }
  .tabs a { flex: 1 1 0; min-width: 0; }
  .more-btn { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; min-height: 52px; padding: 4px; border-radius: 12px; background: transparent; color: var(--side-ink); font: 500 var(--text-min) var(--ui); border: 0; }
  .more-btn:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--side-hi); }
  .more-btn[aria-current="page"], .more-btn[aria-expanded="true"] { color: var(--fill); }
}
@media (min-width: 821px) { .sheet, .sheet-backdrop { display: none !important; } }

/* ---------- Email campaigns ---------- */
.schedule-box { margin-top: 20px; padding-top: 6px; border-top: 1px dashed var(--line); }
.schedule-box h3, .schedule-box h2 { margin-top: 12px; }
.schedule-box .actions { align-items: end; }
.badge.cs-scheduled, .badge.as-active { background: var(--warn-bg); border-color: var(--fill); }
.mail-previews { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-top: 12px; }
.mail-frame { margin: 0; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface-2); padding: 10px; min-width: 0; }
.mail-frame figcaption { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin: 0 0 8px 4px; }
.mail-frame.phone { border-radius: 28px; padding: 14px 10px 18px; max-width: 360px; }
.mail { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mail-iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.code-input { font: 400 var(--text-min) var(--mono); }
.mail-head { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.mail-head strong { overflow-wrap: anywhere; }
.mail-head .hint { margin: 0; overflow-wrap: anywhere; }
/* Rich text editor for email: a toolbar over an editable box, styled like a field. */
.rte { text-transform: none; letter-spacing: normal; margin-top: 6px; border: 1px solid var(--field-line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rte[hidden] { display: none; }
.rte:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.rte-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--hair); }
.rte-btn { min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink); font: 600 15px var(--ui); text-transform: none; letter-spacing: 0; }
.rte-btn:hover { border-color: var(--hair); }
.rte-btn[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); }
.rte-btn:disabled { opacity: .5; }
.rte-btn.rte-i { font-style: italic; font-family: var(--serif); }
.rte-area { min-height: 220px; max-height: 60vh; overflow-y: auto; padding: 12px 14px; font: 400 16px/1.6 var(--ui); color: var(--ink); outline: none; overflow-wrap: anywhere; }
.rte-area[aria-disabled="true"] { opacity: .7; }
.rte-area p { margin: 0 0 12px; }
.rte-area h1 { font: 700 24px/1.3 var(--ui); margin: 4px 0 12px; text-transform: none; letter-spacing: 0; }
.rte-area h2 { font: 700 19px/1.35 var(--ui); margin: 16px 0 10px; text-transform: none; letter-spacing: 0; }
.rte-area ul, .rte-area ol { margin: 0 0 12px; padding-left: 24px; }
.rte-area a { color: var(--ring); text-decoration: underline; }
.rte-plain { margin-top: 6px; }
.sig-form .rte-area { min-height: 120px; }
.mail-body ol { padding-left: 24px; }
.mail-sig { margin-top: 16px; font-size: 15px; }
.mail-sig p { margin: 0 0 6px; }
.mail-sig-logo { display: block; max-width: 200px; max-height: 60px; width: auto; height: auto; margin-top: 8px; }
.mail-body { padding: 18px 20px; font: 400 16px/1.6 var(--ui); overflow-wrap: anywhere; }
.mail-body h3 { font: 400 26px/1.2 var(--serif); margin: 0 0 12px; }
.mail-body h4 { font: 600 18px/1.3 var(--ui); margin: 16px 0 8px; }
.mail-body p { margin: 0 0 12px; white-space: pre-wrap; }
.phone .mail-body { padding: 14px; font-size: 15px; }
.phone .mail-body h3 { font-size: 22px; }
.mail-foot { padding: 14px 20px; border-top: 1px solid var(--line); font: 400 var(--text-min)/1.6 var(--ui); color: var(--faint); }
.fake-link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
#cp-test-result { margin-top: 12px; }
#campaign-detail details { margin-top: 12px; }
#campaign-detail details .table-wrap { margin-top: 8px; }
@media (max-width: 980px) {
  .mail-previews { grid-template-columns: minmax(0, 1fr); }
  .mail-frame.phone { justify-self: center; width: 100%; }
}

/* ---------- Automation designer ---------- */
.step-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.step-card { position: relative; padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--faint); border-radius: 12px; background: var(--surface); min-width: 0; }
.step-card.st-send_email { border-left-color: var(--fill); }
.step-card.st-if_else { border-left-color: var(--ok); background: var(--surface-2); }
.step-card.st-wait { border-left-color: var(--blue); }
.step-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.step-head strong { font: 400 19px/1.3 var(--serif); }
.badge.gate { background: var(--warn-bg); border-color: var(--fill); }
.step-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.step-fields label { margin-bottom: 10px; }
.gate-note { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); border: 1px dashed var(--fill); font-size: 14px; }
.branch { padding: 4px 0 0 14px; border-left: 2px dashed var(--line); margin: 6px 0 4px; min-width: 0; }
.branch h4 { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin: 6px 0 0; }
.branch .row-actions { margin-bottom: 8px; }
.step-card .field-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.row-actions label.inline select { margin-top: 6px; }
@media (max-width: 820px) {
  .step-card { padding: 12px 10px; }
  .branch { padding-left: 8px; }
  .step-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Page heads, ledger and chips (tasks and pipeline) ---------- */
.lead { margin: 0; max-width: 62ch; color: var(--muted); font: 400 17px/1.5 var(--serif); }
.pane-head .caps { margin-bottom: 6px; }
.head-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.head-tools select { min-width: 200px; }
dl.ledger { margin: 20px 0 24px; }
dl.ledger dd { font: 400 30px/1.1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
dl.ledger > div + div { border-left: 1px solid var(--line); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-row button.chip { min-height: 44px; }
.empty-note { padding: 24px 0; text-align: center; }
.app .register-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 14px; align-items: center; border-bottom: 1px solid var(--line); padding-block: 10px; }
@media (max-width: 600px) { .app .register-row { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- Top bar: search and bell ---------- */
.tb-search { min-height: 44px; min-width: 220px; padding: 0 10px 0 14px; gap: 8px; justify-content: flex-start; background: var(--surface); color: var(--faint); border: 1px solid var(--hair); font: 400 15px var(--ui); margin-right: auto; }
.tb-search:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--ink); }
.tb-search span { flex: 1; text-align: left; }
.tb-search kbd { font: 400 12px var(--mono); border: 1px solid var(--hair); border-radius: 6px; padding: 0 6px; color: var(--faint); }
.tb-search svg, .tb-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tb-ic { position: relative; width: 44px; min-height: 44px; padding: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--hair); }
.tb-ic:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--ink); }
.tb-dot { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--fill); color: var(--on-fill); font: 600 var(--text-min)/20px var(--ui); font-style: normal; text-align: center; padding: 0 5px; }

/* ---------- Tasks ---------- */
.quick-add { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: end; padding: 16px 18px 2px; }
.quick-add label { flex: 0 1 180px; }
.quick-add label.grow { flex: 1 1 260px; }
.quick-add button { margin-bottom: 14px; }
.task-tools { margin: 4px 0 8px; }
.task-tools select { min-width: 220px; max-width: 360px; }
.task-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.task { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.task .tick { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; cursor: pointer; border-radius: 12px; }
.task .tick:hover { background: var(--warm); }
.task .tick input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--fill); cursor: pointer; }
.task-body { min-width: 0; padding-top: 10px; }
.task-body > b { font: 400 19px/1.3 var(--serif); overflow-wrap: anywhere; }
.task-body .hint { margin: 2px 0 0; }
.task.s-done .task-body > b { text-decoration: line-through; color: var(--faint); }
.task > .task-side { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
.who-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 400 var(--text-min) var(--mono); white-space: nowrap; }
.who-tag.none { border-style: dashed; color: var(--faint); }
.badge.due-overdue { background: var(--err-bg); border-color: var(--accent); color: var(--accent); }
.badge.due-today { background: var(--warn-bg); border-color: var(--fill); }
.small-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.post-box { margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--fill); border-radius: 12px; background: var(--warm); }
.post-box .post-text { margin: 0 0 6px; overflow-wrap: anywhere; }
.post-box .actions { margin: 8px 0 4px; }
.post-box .hint { margin: 4px 0 0; overflow-wrap: anywhere; }
a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--fill); color: var(--on-fill); font: 600 15px var(--ui); text-decoration: none; }
a.btn:hover { box-shadow: 0 8px 22px -10px var(--fill); }

/* ---------- Pipeline board ---------- */
.board-wrap { overflow-x: auto; padding-bottom: 12px; }
.board { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(208px, 1fr)); gap: 12px; }
.col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; min-height: 320px; min-width: 0; transition: border-color .15s, background .15s; }
.col.over { border-color: var(--fill); background: var(--warm); }
.col-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.col-head .caps { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); margin: 0; }
.col-head b { display: block; font: 400 24px/1.1 var(--mono); margin-top: 6px; font-variant-numeric: tabular-nums; }
.col:is(.o-won, .o-lost) .col-head .caps > span:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: middle; background: var(--ok); }
.col.o-lost .col-head .caps > span:first-child::before { background: var(--faint); }
.col.o-lost .col-head b { color: var(--faint); }
.col-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.col-body > .hint { margin: 4px; }
.deal { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 14px 14px 12px; cursor: grab; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.deal.dragging { opacity: .45; }
.deal h3 { margin: 0; font: 400 19px/1.25 var(--serif); overflow-wrap: anywhere; }
.deal .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 400 var(--text-min) var(--mono); color: var(--faint); min-width: 0; }
.deal .meta { flex-wrap: wrap; }
.deal .meta span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.deal .meta span:last-child { white-space: nowrap; flex: none; text-align: right; }
.deal .amt { font: 500 15px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal .stale { color: var(--accent); }
.deal select { margin: 0; min-height: 44px; border-radius: 999px; background: var(--surface-2); padding: 0 12px; font: 400 14px var(--mono); }

/* ---------- Drawers: search and notifications ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(15, 17, 20, .45); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: min(460px, 100%); background: var(--surface); color: var(--ink); border-left: 1px solid var(--hair); box-shadow: var(--shadow); padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.drawer-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.drawer-head h2 { margin: 0; }
.drawer-head h2:focus { outline: none; }
.drawer-head .caps { margin: 0 0 4px; }
.drawer .hint { margin: 0; }
.cmd-in { margin: 0; min-height: 52px; font-size: 17px; background: var(--surface-2); border-radius: 14px; }
.cmd-list, .bell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cmd-list li.hint { padding: 10px; }
.cmd-list button, .bell-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); padding: 6px 12px; font: 400 15px var(--ui); text-align: left; }
.cmd-list button:hover, .cmd-list button:focus-visible, .bell-list button:hover, .bell-list button:focus-visible { background: var(--warm); transform: none; box-shadow: none; }
.cmd-main { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.cmd-main small, .cmd-kind { font: 400 var(--text-min) var(--mono); color: var(--faint); }
.cmd-kind { text-transform: uppercase; letter-spacing: .06em; flex: none; }
.bell-list li { border-left: 3px solid transparent; border-radius: 0 12px 12px 0; }
.bell-list li.unread { border-left-color: var(--fill); background: var(--surface-2); }
body.dialog-open { overflow: hidden; }

@media (max-width: 1180px) {
  .tb-search { min-width: 0; width: 44px; padding: 0; justify-content: center; margin-right: 0; }
  .tb-search span, .tb-search kbd { display: none; }
}
@media (max-width: 820px) {
  .tb-search, .tb-ic { width: 40px; min-height: 40px; background: transparent; color: var(--side-hi); border-color: rgba(238, 241, 245, .2); }
  .topbar { gap: 6px; }
  .task { grid-template-columns: 44px minmax(0, 1fr); }
  .quick-add label, .quick-add label.grow { flex: 1 1 100%; }
  .quick-add button { width: 100%; }
  .head-tools, .head-tools label.inline, .task-tools label.inline { width: 100%; }
  .head-tools select, .task-tools select { min-width: 0; }
  dl.ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dl.ledger > div:nth-child(3) { border-left: 0; }
  dl.ledger > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  dl.ledger dd { font-size: 24px; }
  .drawer { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0; border-radius: 20px 20px 0 0; }
}

/* ---------- Security: two-step sign-in and sessions ---------- */
.twofa-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border-left-color: var(--fill); background: var(--warn-bg); }
.twofa-banner a { font-weight: 500; }
#two-step-form .actions, #tf-confirm-form .actions { margin-bottom: 0; }
.badge-line { font-weight: 500; }
.badge-line.on { color: var(--ok-text); }
.badge.warn { background: var(--warn-bg); border-color: var(--fill); }
.tf-steps { padding-left: 20px; margin: 12px 0; display: grid; gap: 14px; }
.tf-steps li { padding-left: 4px; }
.tf-steps .hint { display: block; overflow-wrap: anywhere; }
.tf-qr { display: block; width: 220px; height: 220px; max-width: 100%; margin: 10px 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; image-rendering: pixelated; }
.tf-code-list { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 14px; font: 500 15px/1.6 var(--mono); }
.tf-policy { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--line); }
#security-card details { margin-top: 10px; }
#sessions-card td.mono { font: 400 var(--text-min)/1.5 var(--mono); overflow-wrap: anywhere; min-width: 16ch; }
#sessions-card td:nth-child(n+3) { white-space: nowrap; }
#two-step-form input[name=code], #tf-confirm-form input[name=code] { max-width: 240px; font: 500 20px/1.2 var(--mono); letter-spacing: .12em; }
@media (max-width: 820px) {
  .tf-qr { width: 200px; height: 200px; }
  /* Phones: device, address and last seen are enough to recognise a session. */
  #sessions-card th:nth-child(3), #sessions-card td:nth-child(3) { display: none; }
}

/* ---------- Location switcher: sidebar on desktop, a row under the header on phones ---------- */
.ctx { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid rgba(238, 241, 245, .14); border-radius: var(--r); color-scheme: dark; }
.ctx-co { margin: 0; font: 400 18px/1.25 var(--serif); color: var(--side-hi); overflow-wrap: anywhere; }
.ctx-pick { margin: 0; color: var(--side-ink); }
.ctx select { margin-top: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #22262C; color: #EEF1F5; border-color: rgba(238, 241, 245, .2); font: 400 16px var(--ui); }
.ctx select:focus { outline: 2px solid #6FB0F5; outline-offset: 2px; }
.ctx-one { margin: 0; font: 500 var(--text-min)/1.4 var(--mono); color: var(--side-ink); text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.pick-list button { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 16px; border-radius: 14px; text-align: left; }
.pick-list small { font: 400 var(--text-min) var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
a.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
a.btn.ghost:hover { border-color: var(--ink); box-shadow: none; }
/* Text-style buttons are still 44px tall to tap. */
button.link { min-height: 44px; }
@media (max-width: 820px) {
  .side { flex-wrap: wrap; }
  .ctx { order: 3; flex: 1 1 100%; gap: 4px; padding: 0; border: 0; }
  .ctx-co { font: 500 var(--text-min)/1.3 var(--mono); color: var(--side-ink); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 14px; }
  .ctx-word { display: none; }
  .ctx select { margin: 0; }
  .ctx.single { display: none; }
}

/* ---------- Calendar: week grid on wide screens, day list everywhere ---------- */
#cal-main { --hour: 64px; }
@media (pointer: coarse) { #cal-main { --hour: 88px; } }
.cal-tools { margin: 0 0 14px; }
.cal-tools .month-nav strong { font-size: 20px; min-width: 11ch; }
.cal-tools label.inline select { min-height: 44px; min-width: 200px; margin-top: 4px; }
.week-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 12px; }
.week { display: grid; grid-template-columns: 80px repeat(7, minmax(112px, 1fr)); min-width: 864px; }
.wk-corner { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.wk-day { flex-direction: column; gap: 0; min-height: 56px; padding: 6px; border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface-2); color: var(--ink); font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.wk-day b { font: 400 22px/1 var(--display); letter-spacing: .02em; }
.wk-day:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--warm); }
.wk-day:focus-visible { outline-offset: -3px; }
.wk-day.today { color: var(--accent); box-shadow: inset 0 -3px 0 var(--fill); }
.wk-day.today:hover:not(:disabled) { box-shadow: inset 0 -3px 0 var(--fill); }
.wk-gutter span { display: block; height: var(--hour); padding: 2px 8px 0 0; border-top: 1px solid var(--line); font: 400 var(--text-min) var(--ui); color: var(--faint); text-align: right; white-space: nowrap; }
.wk-gutter span:first-child { border-top: 0; }
.wk-col { position: relative; height: calc(var(--hours, 8) * var(--hour)); border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour) - 1px), var(--line) calc(var(--hour) - 1px) var(--hour)); cursor: cell; }
.wk-col.today { background-color: var(--warm); }
.wk-appt { position: absolute; min-height: 28px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 4px 6px; border: 1px solid var(--hair); border-left: 3px solid var(--fill); border-radius: 8px; background: var(--surface); color: var(--ink); font: 400 var(--text-min)/1.3 var(--mono); text-align: left; overflow: hidden; cursor: pointer; }
.wk-appt b { max-width: 100%; font: 600 var(--text-min)/1.25 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-appt span { max-width: 100%; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-appt.short { flex-direction: row; align-items: center; gap: 6px; padding: 2px 6px; }
.wk-appt.short b { flex: 0 1 auto; min-width: 0; }
.wk-appt.short span { flex: 1 1 0; min-width: 0; }
.wk-appt:hover:not(:disabled) { transform: none; box-shadow: var(--shadow); border-color: var(--ink); z-index: 2; }
.wk-appt:focus-visible { z-index: 3; }
.wk-appt.st-confirmed { border-left-color: var(--ok); }
.wk-appt.st-done { background: var(--surface-2); border-left-color: var(--faint); }
.wk-appt.st-no_show { background: var(--surface-2); border-left-color: var(--danger); }
.wk-appt.st-cancelled { background: transparent; border-style: dashed; border-left-color: var(--faint); }
.wk-appt.st-cancelled b, .appt-row.st-cancelled .appt-main b { text-decoration: line-through; color: var(--faint); }
.cal-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.cal-day { padding: 14px 16px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); }
.cal-day.today { border-color: var(--fill); }
.cal-day h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font: 400 20px/1.3 var(--serif); }
.cal-day > .hint { margin: 4px 0; }
.appt-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.appt-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-left: 4px solid var(--fill); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: 400 15px var(--ui); text-align: left; }
.appt-row:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--warm); border-color: var(--ink); border-left-color: var(--fill); }
.appt-row.st-confirmed, .appt-row.st-confirmed:hover:not(:disabled) { border-left-color: var(--ok); }
.appt-row.st-done, .appt-row.st-done:hover:not(:disabled), .appt-row.st-cancelled, .appt-row.st-cancelled:hover:not(:disabled) { border-left-color: var(--faint); }
.appt-row.st-no_show, .appt-row.st-no_show:hover:not(:disabled) { border-left-color: var(--danger); }
.appt-time { display: flex; flex-direction: column; font: 500 var(--text-min)/1.35 var(--ui); font-variant-numeric: tabular-nums; }
.appt-time small { font-weight: 400; color: var(--faint); }
.appt-time, .appt-time small { white-space: nowrap; }
.appt-main { display: flex; flex-direction: column; min-width: 0; }
.appt-main b { font: 600 15px/1.3 var(--ui); overflow-wrap: anywhere; }
.appt-main small { font: 400 var(--text-min)/1.4 var(--ui); color: var(--faint); overflow-wrap: anywhere; }
.badge.ap-booked { background: var(--warn-bg); border-color: var(--fill); }
.badge.ap-confirmed { border-color: var(--ok); }
.badge.ap-no_show { border-color: var(--danger); color: var(--danger); }
.badge.ap-cancelled { color: var(--faint); }
button.add-here { margin-top: 6px; padding-left: 0; }
#bp-form { margin-top: 18px; }
#cal-main[data-mode="week"] .cal-list { display: none; }
#cal-main[data-mode="day"] .week-wrap { display: none; }
.time-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.time-chips button.chip { min-height: 44px; padding: 0 14px; text-transform: none; letter-spacing: 0; }
.time-chips button.chip.look-busy { border-style: dashed; color: var(--muted); }
#book-times .caps { margin: 0 0 6px; }
#book-form .grid { gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.drawer details summary, .type-item summary, #add-type summary, details.hours summary, #add-review summary { min-height: 44px; padding: 10px 0; }
.drawer details form { max-width: none; }
.review-ask { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; padding: 14px; border: 1px dashed var(--fill); border-radius: 12px; background: var(--warm); }
.review-ask h3 { margin: 0; }
.review-ask fieldset { margin: 0; background: var(--surface); }
.review-ask label, .review-ask textarea { margin: 0; }
.review-ask button { align-self: flex-start; }
.review-ask textarea[readonly] { font: 400 14px/1.5 var(--mono); background: var(--surface); }
.check.opt { align-items: flex-start; min-height: 44px; padding: 6px 0; margin: 0; }
.check.opt input { margin-top: 2px; }
.check.opt > span { display: flex; flex-direction: column; }
.check.opt small { font-size: var(--text-min); color: var(--faint); }
.check.opt:has(input:disabled) { color: var(--faint); }
@media (max-width: 820px) {
  #cal-main[data-mode="week"] .week-wrap { display: none; }
  #cal-main[data-mode="week"] .cal-list { display: grid; }
  .cal-tools label.inline, .cal-tools label.inline select { width: 100%; min-width: 0; }
  .appt-row { grid-template-columns: 80px minmax(0, 1fr); }
  .appt-row .badge { grid-column: 2; justify-self: start; }
}

/* ---------- Booking setup: types and weekly hours ---------- */
.type-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.type-list > li.hint { padding: 4px 0; }
.type-item { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--fill); border-radius: 12px; background: var(--surface); }
.type-item.off { border-left-color: var(--faint); background: var(--surface-2); }
.type-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.type-head b { font: 400 19px/1.3 var(--serif); overflow-wrap: anywhere; }
.type-item > p.hint { margin: 4px 0 0; }
.type-form .check { grid-column: 1 / -1; margin: 0 0 8px; min-height: 44px; }
.type-form button { justify-self: start; margin-top: 6px; }
.hours-list { display: grid; gap: 8px; margin-top: 12px; }
details.hours { padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
details.hours summary b { margin-right: 10px; }
details.hours summary .hint { font-weight: 400; }
details .hours-form { max-width: 560px; margin: 4px 0 14px; }
.hours-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 6px; }
.hours-row .check { margin: 0; min-height: 44px; }
.hours-row input[type=time] { margin: 0; min-height: 44px; }
.hours-row input:disabled { opacity: .55; }
.hours-form button { margin-top: 8px; }
@media (max-width: 820px) {
  .hours-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hours-row .check { grid-column: 1 / -1; }
}

/* ---------- Reviews ---------- */
.review-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.review { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); }
.review.r-new { border-left: 4px solid var(--fill); }
.review > .av { width: 44px; height: 44px; }
.review-body { min-width: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.review-head b { font: 400 20px/1.3 var(--serif); overflow-wrap: anywhere; }
.stars { color: var(--hl); letter-spacing: 2px; font-size: 16px; white-space: nowrap; }
.review-body > .hint { margin: 2px 0 0; }
.review-text { margin: 10px 0; font: 400 16px/1.55 var(--ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.review-reply { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--fill); border-radius: 0 12px 12px 0; background: var(--surface-2); font: 400 14px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-form { margin-top: 12px; }
.reply-form label { margin-bottom: 6px; }
.reply-form .actions { margin: 8px 0 0; }
.reply-form a.btn { text-align: center; }
.badge.ok { border-color: var(--ok); }
#add-review form { max-width: none; }
@media (max-width: 820px) {
  .review { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .review > .av { display: none; }
  .reply-form .actions > a.btn, .reply-form .actions > button:not(.link) { flex: 1 1 auto; }
}

/* ---------- Public booking page ---------- */
.choice-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.choice { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; }
.choice:hover { border-color: var(--fill); background: var(--warm); }
.choice b { font: 400 20px/1.3 var(--serif); }
.choice span { font: 400 var(--text-min) var(--mono); color: var(--faint); }
.choice small { font-size: 14px; color: var(--muted); }
.picked { display: flex; flex-direction: column; gap: 2px; margin: 12px 0; padding: 12px 14px; border-left: 4px solid var(--fill); border-radius: 0 12px 12px 0; background: var(--warm); }
.picked b { font: 400 20px/1.3 var(--serif); }
.day-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 16px; padding: 4px 4px 10px; scroll-snap-type: x proximity; }
.day-chips a { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; min-height: 56px; padding: 6px 12px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); color: var(--ink); font: 500 14px/1.3 var(--ui); text-align: center; text-decoration: none; scroll-snap-align: start; }
.day-chips a:hover { border-color: var(--ink); }
.day-chips small { font: 400 var(--text-min) var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.day-chips a[aria-current="date"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.day-chips a[aria-current="date"] small { color: inherit; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0 0 16px; padding: 12px; }
label.slot { position: relative; display: block; margin: 0; }
.slot input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.slot span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 14px var(--mono); text-transform: none; letter-spacing: 0; }
.slot:hover span { border-color: var(--ink); }
.slot input:checked + span { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.slot input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- Webhooks (Settings) ---------- */
.wh-form { margin-top: 16px; }
.wh-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
.wh-checks .check { flex-wrap: wrap; gap: 4px 10px; }
.wh-code { font: 400 var(--text-min) var(--mono); color: var(--faint); }
#wh-new input { font: 400 var(--text-min)/1.5 var(--mono); }
.wh-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.wh-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); min-width: 0; }
.wh-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.wh-url { font: 500 14px/1.4 var(--mono); overflow-wrap: anywhere; min-width: 0; }
.wh-desc { margin: 6px 0 0; }
.wh-meta, .wh-events-text { margin: 6px 0 0; color: var(--faint); font-size: 14px; overflow-wrap: anywhere; }
.wh-item .actions { margin: 10px 0 0; }
.wh-deliveries { margin-top: 10px; }
.wh-deliveries td { white-space: nowrap; }
.wh-deliveries td.mono { font: 400 var(--text-min)/1.5 var(--mono); white-space: nowrap; }
.wh-deliveries td:last-child { font: 400 var(--text-min)/1.5 var(--mono); white-space: normal; overflow-wrap: break-word; min-width: 20ch; }
@media (max-width: 820px) {
  .wh-item { padding: 12px; }
  .wh-item .actions button { flex: 1 1 auto; }
  /* Phones: when, event, status and result are enough. */
  .wh-deliveries th:nth-child(4), .wh-deliveries td:nth-child(4) { display: none; }
}

/* ---------- API docs (/api/docs) ---------- */
.api-docs { background: var(--bg); }
.api-main { max-width: 980px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 48px max(24px, env(safe-area-inset-left)); }
.api-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.api-head .caps { margin: 0; }
.api-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 400 20px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.api-main > .lead { margin-bottom: 20px; }
.api-main code { font: 400 .9em var(--mono); overflow-wrap: break-word; }
.api-toc ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 16px; }
.api-toc a { display: inline-block; padding: 6px 0; }
.api-group { margin-top: 32px; }
.api-group > h2 { font: 400 clamp(26px, 4vw, 36px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.api-op { scroll-margin-top: 16px; }
.api-op h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 0; }
.api-op h3 code { font: 500 15px/1.4 var(--mono); }
.api-op h4 { font: 500 var(--text-min)/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin: 16px 0 8px; }
.api-main td, .api-main td code { overflow-wrap: break-word; }
.api-main td:first-child { white-space: nowrap; }
.api-main td:last-child { min-width: 24ch; }
.api-method { display: inline-block; min-width: 64px; text-align: center; font: 600 var(--text-min)/1 var(--mono); letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface-2); color: var(--ink); }
.api-method.m-get { border-color: var(--ok); color: var(--ok-text); }
.api-method.m-post { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.api-method.m-patch { border-color: var(--fill); color: var(--accent); background: var(--warm); }
.api-method.m-delete { border-color: var(--danger); color: var(--danger); }
.api-code { margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--side); color: var(--side-hi); overflow-x: auto; font: 400 var(--text-min)/1.6 var(--mono); -webkit-overflow-scrolling: touch; }
.api-code code { font: inherit; color: inherit; overflow-wrap: normal; white-space: pre; }
.api-main section.card { scroll-margin-top: 16px; }
.api-main .table-wrap { margin-top: 8px; }
.api-main > .foot { padding: 24px 0 0; }
@media (max-width: 820px) {
  .api-main { padding: max(16px, env(safe-area-inset-top)) 16px 32px; }
  .api-code { font-size: var(--text-min); padding: 12px; }
}

/* ---------- Contact workspace, inbox, agency numbers and shared patterns ---------- */
.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; }

/* Navigation groups in the sidebar and the More sheet. */
.nav-group { margin: 14px 0 2px; padding: 0 14px; font: 500 var(--text-min)/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--side-ink); }
.sheet-links { display: flex; flex-direction: column; gap: 4px; }
.sheet-group h3 { margin: 8px 4px 4px; font: 500 var(--text-min)/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--side-ink); }
.sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

/* Breadcrumbs: agency, company, location. */
.crumbs { flex: 1 1 auto; min-width: 0; margin-right: auto; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; min-width: 0; font: 500 var(--text-min)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.crumbs li { display: flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--faint); flex: none; }
.crumbs a, .crumbs span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a { line-height: 44px; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.topbar .tb-search { margin-right: 0; }

/* New menu: a pill in the top bar, a round button above the tabs on phones. */
.new-wrap { position: relative; }
.tb-new { min-height: 44px; padding: 0 18px 0 14px; }
.tb-new svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.new-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; list-style: none; margin: 0; padding: 6px; min-width: 220px; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow); }
.new-menu button { width: 100%; justify-content: flex-start; min-height: 44px; padding: 0 14px; border-radius: 10px; background: transparent; color: var(--ink); font: 500 15px var(--ui); }
.new-menu button:hover, .new-menu button:focus-visible { background: var(--warm); transform: none; box-shadow: none; }

/* Toasts confirm; errors stay on the page. */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; padding: 12px 16px; border-radius: 14px; border-left: 4px solid var(--fill); background: var(--ink); color: var(--bg); font: 500 15px/1.45 var(--ui); box-shadow: var(--shadow); overflow-wrap: anywhere; animation: toast-in .18s ease-out; }
.toast.going { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* "How this works" behind a toggle. */
details.info-tip { margin: 6px 0 14px; }
details.info-tip summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); list-style: none; }
details.info-tip summary::-webkit-details-marker { display: none; }
details.info-tip summary::before { content: "i"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font: 600 12px/1 var(--serif); text-transform: none; }
details.info-tip[open] summary { color: var(--ink); }
details.info-tip p { margin: 0 0 4px; max-width: 72ch; padding: 12px 14px; border-left: 3px solid var(--fill); border-radius: 0 12px 12px 0; background: var(--warm); color: var(--muted); font-size: 15px; }
.pane-head + details.info-tip { margin-top: 10px; }

/* Consent in a word. */
.cs { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 500 var(--text-min)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.cs::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.cs-yes { border-color: var(--ok); }
.cs-yes::before { background: var(--ok); }
.cs-ending { border-color: var(--fill); background: var(--warn-bg); }
.cs-ending::before { background: var(--fill); }
.cs-unsubscribed { border-color: var(--accent); color: var(--accent); }
.cs-unsubscribed::before { background: var(--accent); }
.cs-no_address { border-style: dashed; color: var(--faint); }
.cs-no_address::before { background: transparent; border: 1px solid var(--faint); }

/* Contact list: table on wide screens, cards on phones. */
.contact-tools { align-items: end; margin: 0 0 14px; }
.contact-tools label.grow { flex: 1 1 260px; max-width: 420px; }
button.chip .n { margin-left: 8px; font-weight: 400; font-variant-numeric: tabular-nums; }
.contact-table tbody tr { cursor: pointer; }
.contact-table tbody tr:hover td { background: var(--warm); }
.contact-table td small.sub { display: block; margin-top: 2px; color: var(--faint); font: 400 var(--text-min) var(--ui); overflow-wrap: anywhere; }
#contact-list.one-loc .col-loc { display: none; }
.tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.tags .badge { padding: 2px 8px; font-size: var(--text-min); }
.contact-cards { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; }
.contact-card { display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.contact-card:hover { border-color: var(--ink); }
.cc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cc-top b { min-width: 0; font: 400 20px/1.25 var(--serif); overflow-wrap: anywhere; }
.cc-top small { flex: none; font: 400 var(--text-min) var(--mono); color: var(--faint); white-space: nowrap; }
.cc-sub { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
details.card > summary { min-height: 44px; padding: 10px 0; margin-top: -10px; }

/* Contact drawer and its timeline. */
.drawer-wide { width: min(560px, 100%); }
.drawer-grip { display: none; }
.drawer h3 { margin: 14px 0 2px; }
.drawer .actions { margin: 4px 0; }
.drawer dl.rows { margin: 0; }
.drawer dl.rows dd { overflow-wrap: anywhere; min-width: 0; }
.consent-cards { display: grid; gap: 10px; }
.consent-card { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--faint); border-radius: 12px; background: var(--surface-2); }
.consent-card.is-yes { border-left-color: var(--ok); }
.consent-card.is-ending { border-left-color: var(--fill); background: var(--warm); }
.consent-card.is-unsubscribed { border-left-color: var(--accent); }
.ccard-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.ccard-head strong { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.consent-card p { margin: 0 0 4px; font-size: 15px; }
.consent-card .mono { font: 400 var(--text-min) var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.consent-card details summary { display: flex; align-items: center; color: var(--blue); font: 500 14px var(--ui); }
.evidence { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 10px; }
.evidence li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid var(--line); font-size: 14px; }
.evidence q { font: italic 400 15px/1.5 var(--serif); }
#cw-town-form { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: end; }
#cw-town-form label { flex: 1 1 200px; }
#cw-town-form button { margin-bottom: 14px; }
#cw-note-form button { margin-top: -4px; }
.timeline { list-style: none; margin: 0; padding: 0 0 8px; }
.tl { position: relative; margin-left: 5px; padding: 0 0 16px 20px; border-left: 2px solid var(--line); }
.tl:last-child { border-left-color: transparent; }
.tl::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--faint); background: var(--surface); }
.tl.k-message::before { border-color: var(--blue); }
.tl.k-note::before { border-color: var(--fill); background: var(--fill); }
.tl.k-appointment::before, .tl.k-deal::before { border-color: var(--fill); }
.tl.k-consent::before { border-color: var(--ok); }
.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tl-head .caps { margin: 0; font-size: var(--text-min); }
.tl-head time { font: 400 var(--text-min) var(--mono); color: var(--faint); white-space: nowrap; }
.tl-title { display: block; font: 400 17px/1.35 var(--serif); overflow-wrap: anywhere; }
.tl-text { margin: 4px 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.drawer .tl .hint { margin: 2px 0 0; }
.tl button.link { padding: 0; }

/* Inbox: list and thread side by side; one at a time on phones. */
.inbox { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.convo-pane { min-width: 0; }
.convo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.convo { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.convo[aria-current="true"] { border-color: var(--fill); box-shadow: inset 4px 0 0 var(--fill); }
.convo-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.convo-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.convo-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.3 var(--ui); }
.convo.unread .convo-top b { font-weight: 700; }
.convo-top small { flex: none; font: 400 var(--text-min) var(--mono); color: var(--faint); white-space: nowrap; }
.convo-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--muted); }
.convo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.convo-meta .badge { padding: 2px 8px; font-size: var(--text-min); }
.convo-meta small { font: 400 var(--text-min) var(--mono); color: var(--faint); }
.badge.new { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.thread { position: sticky; top: 16px; min-width: 0; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 20px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); }
.thread > .empty-note { padding: 48px 0; }
.thread-back { display: none; }
.thread-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 10px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.thread-who { min-width: 0; }
.thread-head .caps { margin: 0 0 4px; }
.thread-head h2 { margin: 0; overflow-wrap: anywhere; }
.thread-head h2:focus { outline: none; }
.thread-head .hint { margin: 2px 0 0; overflow-wrap: anywhere; }
.thread-head .hint a { display: inline-flex; align-items: center; min-height: 44px; }
.thread-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: end; gap: 8px; }
.thread-tools label { margin: 0; }
.thread-tools select { width: auto; max-width: 240px; min-height: 44px; margin-top: 4px; padding: 0 14px; border-radius: 999px; }
details.snooze summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--hair); border-radius: 999px; font: 600 15px var(--ui); list-style: none; }
details.snooze summary::-webkit-details-marker { display: none; }
details.snooze[open] { flex-basis: 100%; }
details.snooze[open] summary { border-color: var(--ink); }
.snooze-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; max-width: none; margin: 10px 0 0; padding: 12px; border: 1px dashed var(--fill); border-radius: 12px; background: var(--warm); }
.snooze-form label { flex: 1 1 200px; margin: 0; }
.bubbles { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msg { align-self: flex-start; max-width: 82%; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface-2); }
.msg.m-out { align-self: flex-end; border-color: var(--fill); background: var(--warm); }
.msg.m-note { align-self: stretch; max-width: none; border-style: dashed; background: transparent; }
.msg-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0 0 4px; }
.msg-head .caps { margin: 0; font-size: var(--text-min); white-space: nowrap; }
.msg-head time { font: 400 var(--text-min) var(--mono); color: var(--faint); white-space: nowrap; }
.msg-subject { display: block; font-weight: 600; overflow-wrap: anywhere; }
.msg-body { margin: 2px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .hint { font-size: var(--text-min); }
.composer { padding-top: 14px; border-top: 1px solid var(--line); }
.composer .chips-row { margin-bottom: 10px; }
.composer > .notice { margin-bottom: 10px; }
.composer-form { max-width: none; }
.composer-form .grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.composer-form .actions { margin: 8px 0; }
.gate-line { margin: 0 0 4px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--faint); border-radius: 12px; background: var(--surface-2); font: 400 14px/1.5 var(--mono); }
.gate-line:empty { display: none; }
.gate-line.pass { border-left-color: var(--ok); }
.gate-line.held { border-left-color: var(--accent); background: var(--warm); }

/* Agency numbers on Companies. */
.rollup { margin: 12px 0 8px; }
.rollup-table th { white-space: normal; }
#overview th { white-space: normal; }
#overview-rows td:first-child { min-width: 12rem; }
.rollup-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rollup-table tbody th { min-width: 10rem; font: 600 14px var(--ui); text-transform: none; letter-spacing: 0; color: var(--ink); background: transparent; border-bottom: 1px solid var(--line); }
.rollup-table tbody tr:last-child th { border-bottom: 0; }
.rollup-table tr.total th, .rollup-table tr.total td { background: var(--surface-2); font-weight: 600; }
.rollup-table .warn-n { color: var(--accent); font-weight: 600; }
.rollup-cards { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; }
.rollup-cards li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.rollup-cards b { display: block; margin-bottom: 4px; font: 400 18px/1.3 var(--serif); }
.rollup-cards dl.rows { margin: 0; }

@media (max-width: 980px) and (min-width: 821px) {
  .inbox { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .nav-group, .crumbs { display: none; }
  main { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .new-wrap { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 32; }
  .tb-new { width: 56px; min-height: 56px; padding: 0; box-shadow: var(--shadow); }
  .tb-new span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tb-new svg { width: 24px; height: 24px; }
  .new-menu { top: auto; bottom: calc(100% + 10px); }
  .toasts { left: 16px; right: 16px; bottom: calc(150px + env(safe-area-inset-bottom)); max-width: none; align-items: stretch; }
  .toast { pointer-events: none; }
  .contact-table { display: none; }
  .contact-cards { display: grid; }
  .contact-tools label.grow { max-width: none; }
  .drawer { transition: transform .2s ease-out; }
  .drawer-grip { display: block; flex: none; width: 44px; height: 25px; margin: -14px auto -6px; padding: 10px 0; border-radius: 3px; background: var(--hair); background-clip: content-box; }
  .drawer.drawer-full { top: max(8px, env(safe-area-inset-top)); max-height: none; }
  .drawer-head { position: sticky; top: 0; z-index: 2; margin: 0 -20px; padding: 6px 20px 8px; background: var(--surface); touch-action: none; }
  .drawer-grip { touch-action: none; }
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox[data-open="list"] .thread { display: none; }
  .inbox[data-open="thread"] .convo-pane { display: none; }
  #pane-inbox[data-open="thread"] > :not(.inbox):not(.pane-head) { display: none; }
  /* The page heading stays for screen readers while a thread fills the phone. */
  #pane-inbox[data-open="thread"] > .pane-head { margin: 0; }
  #pane-inbox[data-open="thread"] > .pane-head :is(.caps, .lead, .head-tools) { display: none; }
  #pane-inbox[data-open="thread"] > .pane-head h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .thread { position: static; max-height: none; overflow: visible; padding: 14px; }
  .thread-back { display: inline-flex; }
  .thread-tools { justify-content: flex-start; }
  .msg { max-width: 92%; }
  .rollup-table { display: none; }
  .rollup-cards { display: grid; }
  .loc .badge { white-space: normal; max-width: 100%; }
}

/* ---------- Mentions ---------- */
#men-note { margin: 0 0 16px; }
.men-tools { align-items: flex-end; }
.men-selects { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.men-selects select { width: auto; min-width: 170px; min-height: 44px; }
.mention-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 12px; }
.mention { min-width: 0; padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); }
.mention.m-new { border-left: 4px solid var(--fill); }
.mention.m-actioned, .mention.m-ignored { background: var(--surface-2); }
.mention-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mention-when { margin-left: auto; font: 400 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); white-space: nowrap; }
.mention-title { display: block; margin: 10px 0 0; font: 400 20px/1.3 var(--serif); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.mention-title:hover { text-decoration: underline; }
.mention.m-ignored .mention-title { color: var(--muted); }
.mention-snippet { margin: 6px 0 0; font: 400 15px/1.55 var(--ui); color: var(--muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.mention-meta { margin: 8px 0 0; overflow-wrap: anywhere; }
.mention .actions { margin: 10px 0 0; }
.mention .actions button { min-height: 44px; }
.badge.src { background: transparent; }
.badge.src::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.badge.s-gdelt::before { background: var(--blue); }
.badge.s-google_alerts::before { background: var(--fill); }
.badge.s-bluesky::before { background: var(--ok); }
.badge.pri-high { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.badge.pri-low { background: transparent; color: var(--faint); border-style: dashed; }
.badge.is-new { background: var(--warm); border-color: var(--fill); color: var(--accent); }
.badge.st-actioned { border-color: var(--ok); }
.badge.st-ignored { color: var(--faint); }
.men-foot { justify-content: center; }
.men-settings { margin-top: 24px; }
.men-settings h3 { margin-top: 24px; }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.watch-group { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.watch-label { margin: 0 0 8px; font: 500 var(--text-min)/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.watch-terms { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.watch-terms li { display: inline-flex; align-items: center; max-width: 100%; padding: 0 0 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); font: 400 14px/1.3 var(--ui); }
.watch-terms li span { padding: 6px 0; overflow-wrap: anywhere; }
.watch-terms li.none { padding: 7px 12px; border-style: dashed; background: transparent; color: var(--faint); }
.w-exclude .watch-terms li:not(.none) { border-style: dashed; }
button.term-x { width: 40px; min-height: 40px; padding: 0; background: transparent; color: var(--faint); font: 400 20px/1 var(--ui); border-radius: 999px; }
button.term-x:hover:not(:disabled) { color: var(--accent); transform: none; box-shadow: none; }
.men-source-list { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 10px; }
.source-item { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.source-item.ss-failing { border-left: 4px solid var(--danger); }
.source-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.source-head b { font: 400 18px/1.3 var(--serif); }
.source-feed { margin: 6px 0 0; font: 400 var(--text-min)/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.source-meta { margin: 6px 0 0; }
.source-error { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--danger); border-radius: 0 10px 10px 0; background: var(--err-bg); font-size: 14px; overflow-wrap: anywhere; }
.source-item .actions { margin: 10px 0 0; }
.source-none { margin: 0; padding: 12px 0; }
.badge.ss-active { border-color: var(--ok); }
.badge.ss-paused { color: var(--faint); }
.badge.ss-failing { border-color: var(--danger); color: var(--danger); }
.men-help { margin-top: 8px; }
.men-help summary { min-height: 44px; padding: 10px 0; }
.men-help ol { margin: 8px 0; padding-left: 22px; }
.men-help li { margin: 6px 0; }
@media (max-width: 820px) {
  .men-selects { width: 100%; }
  .men-selects label.inline { flex: 1 1 140px; }
  .men-selects select { width: 100%; min-width: 0; }
  .mention { padding: 14px; }
  .mention-title { font-size: 18px; }
  .mention .actions button:not(.link), .source-item .actions button:not(.link) { flex: 1 1 auto; }
  .watch-grid { grid-template-columns: minmax(0, 1fr); }
  #men-company-wrap { width: 100%; }
}

/* ---------- Contact tags ---------- */
/* Chips with a 44px remove button in the drawer and on the full record, small
   pills on each contact list row, and the tag filter beside the chips. */
.tag-box { margin: 2px 0 6px; }
.drawer .tag-box h3 { margin: 6px 0 8px; }
#contact-detail .tag-box { margin: 8px 0 20px; }
#contact-detail .tag-box h2 { margin-bottom: 8px; }
.tag-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 0 0 0 14px; border: 1px solid var(--hair); border-radius: 999px; background: var(--warm); color: var(--ink); font: 500 var(--text-min)/1.3 var(--mono); letter-spacing: .02em; }
.tag-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fill); flex: none; }
.tag-chip .tag-name { min-width: 0; overflow-wrap: anywhere; }
button.tag-x { flex: none; width: 44px; min-height: 44px; padding: 0; margin: -1px -1px -1px -4px; border-radius: 999px; background: transparent; color: var(--muted); font: 400 22px/1 var(--ui); }
button.tag-x:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--on-fill); background: var(--fill); }
.tag-none { display: flex; align-items: center; min-height: 44px; margin: 0; }
.tag-add { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: end; }
.tag-add label { flex: 1 1 200px; margin-bottom: 0; }
.tag-add button { flex: none; }
.tag-line { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; min-width: 0; }
.tag-pill { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 9px; border: 1px solid var(--hair); border-radius: 999px; background: var(--warm); color: var(--ink); font: 500 var(--text-min)/1.5 var(--mono); letter-spacing: .03em; }
.tag-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--fill); vertical-align: middle; }
.tag-pill.more { background: transparent; color: var(--muted); }
.tag-pill.more::before { display: none; }
.contact-tools label.tag-filter select { min-height: 44px; min-width: 190px; margin-top: 4px; }
@media (max-width: 820px) {
  .contact-tools label.tag-filter { flex: 1 1 100%; }
  .contact-tools label.tag-filter select { width: 100%; min-width: 0; }
  .tag-add button { flex: 1 1 100%; margin-top: 10px; }
}

/* ---------- Connections (Settings) and Waiting for your OK (Home) ---------- */
.conn-off { margin: 14px 0 0; padding: 12px 16px; border-left: 4px solid var(--fill); border-radius: 0 12px 12px 0; background: var(--warm); font-size: 15px; }
.conn-form { margin-top: 4px; }
.conn-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; align-items: end; }
.conn-fields:disabled { opacity: .55; }
.conn-fields:disabled button { cursor: not-allowed; }
.conn-value, .conn-submit { grid-column: 1 / -1; }
.conn-value input { font-family: var(--mono); letter-spacing: .04em; }
.conn-submit { margin-bottom: 14px; }
.conn-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.mb-connect { display: grid; gap: 12px; margin-top: 14px; }
.mb-connect label { max-width: 360px; }
.outbox-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: var(--text-min, 14px); }
.conn-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); min-width: 0; }
.conn-item.revoked { background: transparent; border-style: dashed; }
.conn-item.revoked .conn-label { color: var(--faint); }
.conn-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.conn-label { font: 400 18px/1.3 var(--serif); overflow-wrap: anywhere; min-width: 0; }
.conn-meta { margin: 8px 0 0; color: var(--faint); font-size: 14px; overflow-wrap: anywhere; }
.conn-fp { display: inline-block; margin-right: 4px; padding: 1px 8px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 var(--text-min)/1.6 var(--mono); letter-spacing: .04em; }
.conn-item .actions { margin: 8px 0 0; }
.ok-card { border-left: 4px solid var(--fill); }
.ok-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.ok-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--warm); min-width: 0; }
.ok-meta { margin: 0 0 8px; overflow-wrap: anywhere; }
.ok-summary { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 16px/1.55 var(--ui); }
.ok-expires { margin: 8px 0 0; }
.ok-item .actions { margin: 12px 0 0; }
@media (max-width: 820px) {
  .conn-item, .ok-item { padding: 12px; }
  .ok-item .actions button { flex: 1 1 auto; }
}

/* ---------- Form styles: inside the form ---------- */
/* "Match the website" and "Custom". /form-frame.js sets the colour tokens and
   the --fs-* values on <html> from checked values (contrast already passing)
   and adds .fs-themed with .fs-site or .fs-custom. These rules swap the
   Co-Create type for the chosen font and use the chosen rounding. The
   Co-Create look sets nothing and keeps everything above. */
html.fs-themed body.public { font-size: var(--fs-size, 16px); }
html.fs-themed .public h1 { font: 600 1.6em/1.2 var(--ui); text-transform: none; letter-spacing: normal; margin: 0 0 .4em; }
html.fs-themed .public .caps { font: 600 .8em/1.3 var(--ui); letter-spacing: .04em; color: var(--muted); }
html.fs-themed .public label { font: 600 .9em/1.4 var(--ui); text-transform: none; letter-spacing: normal; color: var(--ink); }
html.fs-themed .public label.check { font-weight: 400; font-size: .95em; }
html.fs-themed .public input, html.fs-themed .public select, html.fs-themed .public textarea { font-family: var(--ui); font-size: max(16px, 1em); color: var(--ink); background: var(--surface); border-color: var(--fs-field-line); border-radius: var(--fs-r-input); }
html.fs-themed .public button { font: 600 1em var(--ui); border-radius: var(--fs-r-btn); }
html.fs-themed .public button:hover:not(:disabled) { box-shadow: none; filter: brightness(.95); }
html.fs-themed .public .notice, html.fs-themed .public .consent-box { border-radius: var(--fs-r-input); }
html.fs-themed .public .hint { font-size: .875em; }
html.fs-site body.embedded .card.narrow { background: transparent; border: 0; border-radius: 0; padding: 0; }
html.fs-custom .public .card.narrow { border-radius: var(--fs-r-card); }

/* ---------- Form styles: the editor's Style panel ---------- */
/* The choices on the left and the live preview (the real form, embedded) on
   the right; stacked on phones. Pills follow the chip style; every control
   is at least 44px tall. */
.style-head h2 { margin-bottom: 4px; }
.style-head .hint { margin: 0 0 16px; }
.style-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.style-controls { min-width: 0; }
.style-modes { margin-bottom: 16px; }
.style-modes .check.opt { padding: 8px 0; }
.style-modes .check.opt > span > span { font-weight: 600; }
.style-custom { margin-bottom: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.seg legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; }
.seg label { position: relative; display: inline-flex; margin: 0; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: var(--ink); font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.seg label:hover span { border-color: var(--ink); }
.seg input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.seg input:disabled + span { opacity: .6; }
.seg input:disabled { cursor: default; }
.seg-small { display: inline-flex; margin: 0; gap: 6px; }
.seg-small span { padding: 0 14px; font-size: var(--text-min); }
.colour-field { margin-bottom: 14px; }
.colour-field > label { margin-bottom: 6px; }
.colour-pair { display: flex; gap: 8px; align-items: center; }
.colour-pair input[type=color] { flex: none; width: 52px; height: 48px; min-height: 48px; margin: 0; padding: 4px; border-radius: 12px; cursor: pointer; }
.colour-pair input:not([type=color]) { margin: 0; font: 400 15px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.colour-pair input[aria-invalid="true"] { border-color: var(--danger); outline: 2px solid var(--danger); outline-offset: 1px; }
#fs-colour-hint { margin: -4px 0 14px; }
#fs-adjusted { margin: 0 0 12px; font-size: 14px; }
#fs-actions { margin: 8px 0 0; }
.style-preview { margin: 0; min-width: 0; padding: 10px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface-2); }
.style-preview figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 0 4px 10px; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.style-stage { padding: 24px; border-radius: 12px; background: var(--stage-bg, var(--bg)); transition: background-color .2s; }
.style-stage iframe { display: block; width: 100%; height: 560px; border: 0; background: transparent; }
#fs-preview-note { margin: 10px 4px 2px; }
@media (max-width: 980px) {
  .style-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .style-stage { padding: 14px; }
  .seg-small { width: 100%; }
  .seg-small label { flex: 1 1 0; }
  .seg-small span { width: 100%; justify-content: center; }
  #fs-actions button { flex: 1 1 100%; }
}

/* ---------- Smart media ---------- */
/* Folder and tag chips with counts, the folder, tag pills and copy status on
   each tile, a two-part storage bar (originals in orange, website-ready copies
   in blue) and the file drawer with its sizes and image code. Every target is
   at least 44px; colours come from the tokens, so dark mode follows. */
#pane-media button.chip { min-height: 44px; }
.meter-bar.split { display: flex; }
.meter-bar.split span { flex: none; }
.meter-bar span.copies { background: var(--blue); }
.meter-key { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.meter-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 6px 0 0; border-radius: 50%; background: var(--fill); vertical-align: -1px; }
.meter-key .key-copies::before { background: var(--blue); }
#media-copies-off { margin: 4px 0 0; }
.media-filters { display: grid; gap: 14px; margin: 0 0 18px; }
.media-filters .caps { margin: 0 0 8px; }
.media-chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.media-chip-row button.chip { min-height: 44px; max-width: 100%; padding: 0 14px; text-transform: none; letter-spacing: .02em; }
.media-chip-row button.chip .chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-chip-row button.tag-filter-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fill); flex: none; }
.media-chip-row button.link { min-height: 44px; }
.media-chip-row button.chip .n { margin-left: 0; }
.media-rename { margin: 10px 0 0; }
.media-rename summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.media-rename form { max-width: 520px; margin: 6px 0 4px; }
.media-rename .hint { margin: 8px 0 0; max-width: 60ch; }
.media-folder { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 4px; font: 500 var(--text-min)/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.media-folder::before { content: ""; flex: none; width: 12px; height: 9px; border: 1.5px solid currentColor; border-top-width: 3px; border-radius: 2px; }
.media-meta .tag-line { margin-top: 4px; }
.media-status { margin-top: 4px; font: 500 var(--text-min)/1.4 var(--mono); color: var(--faint); }
.media-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; border: 1px solid currentColor; vertical-align: middle; }
.media-status.ready { color: var(--ok-text); }
.media-status.ready::before { background: currentColor; }
.media-status.pending { color: var(--muted); }
.media-status.problem { color: var(--accent); }
.media-actions button.link { min-height: 44px; min-width: 44px; }
.md-preview { flex: none; display: grid; place-items: center; min-height: 120px; max-height: 280px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.md-preview img { display: block; max-width: 100%; max-height: 280px; width: auto; height: auto; object-fit: contain; }
#md-form, #md-sizes-box, #md-snippet-box { display: grid; gap: 0; }
#md-form > label[for], #md-snippet-box > label[for] { margin-bottom: 0; }
#md-form button[type=submit] { justify-self: start; }
.md-under { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 6px 0 14px; }
.md-under .hint { margin: 0; }
.md-count { margin-left: auto; font-family: var(--mono); font-size: var(--text-min); font-variant-numeric: tabular-nums; }
.md-count.warn { color: var(--accent); }
#md-sizes-status { margin: 0 0 10px; }
.md-sizes { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.md-size { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-2); }
.md-size-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.md-size-head b { font: 600 15px/1.3 var(--ui); }
.md-size .saving { font: 500 var(--text-min)/1.4 var(--mono); color: var(--muted); }
.md-size .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.md-size .actions button { min-height: 44px; padding: 0 18px; font-size: 14px; }
a.pill-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink); background: transparent; font: 600 14px var(--ui); text-decoration: none; }
a.pill-link:hover { border-color: var(--ink); }
#md-snippet { margin-top: 6px; font: 400 var(--text-min)/1.55 var(--mono); white-space: pre; overflow-x: auto; resize: vertical; }
#md-snippet-help { margin: 8px 0 4px; }
#md-tags li.tag-pill { font-size: var(--text-min); padding: 4px 10px; }
@media (max-width: 820px) {
  .media-tools input[type=search] { max-width: none; }
  .media-chip-row button.chip { padding: 0 12px; }
  .media-actions { flex-wrap: wrap; }
  .md-size .actions button, .md-size .actions a.pill-link { flex: 1 1 auto; }
  #md-form button[type=submit] { justify-self: stretch; }
}

/* ---------- Domains ---------- */
.domain-list { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--line); }
.domain { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 14px 0 14px 14px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; min-width: 0; }
.domain.b-amber { border-left-color: var(--fill); }
.domain.b-red, .domain.b-expired { border-left-color: var(--accent); }
.domain-main { flex: 1 1 260px; min-width: 0; }
.domain-name { font: 400 21px/1.25 var(--serif); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.domain-name:hover { text-decoration: underline; }
.domain-ascii { margin: 2px 0 0; font: 400 var(--text-min) var(--mono); color: var(--faint); overflow-wrap: anywhere; }
.domain-meta { margin: 4px 0 0; overflow-wrap: anywhere; }
.domain-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 0; }
.badge.exp-amber { background: var(--warn-bg); border-color: var(--fill); }
.badge.exp-red { background: var(--err-bg); border-color: var(--accent); color: var(--accent); }
.badge.exp-expired { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.badge.exp-none, .badge.chk-none { color: var(--muted); }
.badge.st-pass::before, .badge.st-warn::before, .badge.st-fail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.badge.st-pass { border-color: var(--ok); }
.badge.st-warn { background: var(--warn-bg); border-color: var(--fill); }
.badge.st-warn::before { background: var(--fill); }
.badge.st-fail { background: var(--err-bg); border-color: var(--accent); color: var(--accent); }
.badge.st-fail::before { background: var(--accent); }
.badge.ds-planned, .badge.ds-pending, .badge.ds-pending_registrant_agreement { background: var(--warm); border-style: dashed; }
.badge.ds-transferred_out { color: var(--faint); }
.dom-preview { margin: -6px 0 12px; font-family: var(--mono); overflow-wrap: anywhere; }
.dom-settings .info-tip { margin-bottom: 0; }
.task-note-long { white-space: pre-line; overflow-wrap: anywhere; }

/* The domain drawer: countdown, details, check results, steps, tasks. */
.dd-countdown { margin: 0; padding: 10px 14px; border-radius: 0 12px 12px 0; border-left: 4px solid var(--ok); background: var(--surface-2); font: 500 14px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.dd-countdown.exp-amber { background: var(--warn-bg); border-left-color: var(--fill); }
.dd-countdown.exp-red, .dd-countdown.exp-expired { background: var(--err-bg); border-left-color: var(--accent); color: var(--accent); }
.dd-countdown.exp-none { border-left-color: var(--hair); color: var(--muted); }
#dd-rows div { align-items: baseline; }
#dd-rows dt { flex: none; }
#dd-rows dd { min-width: 0; overflow-wrap: anywhere; }
.dd-check, .dd-register, .dd-tasks-wrap, .dd-edit { border-top: 1px solid var(--line); padding-top: 4px; }
.dd-check-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.dd-check-head h3 { margin: 12px 0; }
.dd-check-head button { min-height: 44px; }
.dd-overall { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 6px; font-size: 15px; }
.drawer .dd-overall + .hint { margin: 0 0 4px; }
.check-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.check-item { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 0 12px 12px 0; background: var(--surface-2); }
.check-item.st-warn { border-left-color: var(--fill); background: var(--warn-bg); }
.check-item.st-fail { border-left-color: var(--accent); background: var(--err-bg); }
.check-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.check-head b { font: 600 15px/1.3 var(--ui); }
.check-summary { margin: 8px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.check-fix { margin: 8px 0 0; padding: 8px 10px; border: 1px dashed var(--fill); border-radius: 10px; background: var(--surface); font-size: 14px; overflow-wrap: anywhere; }
.check-found { margin-top: 6px; }
.check-found summary, .dd-history summary, .dd-edit summary { display: flex; align-items: center; min-height: 44px; }
.check-found summary { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.check-found ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.check-found li { padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: 400 var(--text-min)/1.5 var(--mono); overflow-wrap: anywhere; }
.dd-history { margin-top: 8px; }
.dd-history-list { margin: 4px 0 0; padding-left: 18px; font: 400 var(--text-min)/1.7 var(--mono); color: var(--muted); }
.dd-register .check { margin: 10px 0 0; }
.dd-register .actions { margin: 10px 0 4px; }
.dd-tasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dd-task { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.dd-task small { font: 400 var(--text-min) var(--mono); color: var(--faint); }
.dd-task.done span { text-decoration: line-through; color: var(--faint); }
.dd-edit form { max-width: none; }
.dd-overrides { min-width: 0; }
.drawer .dd-overrides .hint { margin: 0 0 10px; }
.dd-foot { margin: 4px 0 0; }
@media (max-width: 820px) {
  .domain { padding-left: 10px; }
  .domain-badges { flex: 1 1 100%; justify-content: flex-start; }
  .domain-name { font-size: 19px; }
  #dd-rows div { flex-wrap: wrap; gap: 2px 16px; }
}

/* ---------- Calls: Call buttons, do not call, My calls today, call lists, the outcome sheet ---------- */
/* Calls go out from the person's own phone. The outcome sheet is made for one
   thumb: five big choices, 56px tall, then Save across the whole width. */
.call-box { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; min-width: 0; }
#cd-call { margin: 4px 0 20px; max-width: 640px; }
#thread-call { margin: 12px 0 4px; }
.call-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.call-row .call-btn { min-width: 120px; }
.call-num { font: 500 18px/1.3 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
a.call-btn { gap: 8px; }
a.call-btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.dnc-note { padding: 12px 16px; border-radius: 0 12px 12px 0; border-left: 4px solid var(--accent); background: var(--warm); min-width: 0; }
.dnc-note strong { display: block; font: 500 var(--text-min)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-bottom: 4px; }
.dnc-note p { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.dnc-note p + p { margin-top: 4px; }
.dnc-note.no-phone { border-left-color: var(--faint); }
.dnc-note.no-phone strong { color: var(--muted); }
details.dnc-form summary { min-height: 44px; padding: 10px 0; font: 500 14px var(--ui); color: var(--muted); }
details.dnc-form[open] summary { color: var(--ink); }
details.dnc-form form { margin-top: 6px; max-width: 420px; }
.notice.dncl { border-left-color: var(--fill); background: var(--warn-bg); font-size: 14px; margin: 0 0 12px; }

.call-queue { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.call-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.call-item-body { min-width: 0; }
.call-item .hint { margin: 2px 0 0; overflow-wrap: anywhere; }
a.call-name { font: 400 19px/1.3 var(--serif); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.call-name:hover { text-decoration: underline; }
.call-more { padding: 10px 0; }
.tasks-card .toolbar + .hint { margin-top: 4px; }
.app .tasks-card .task-list { margin-top: 10px; padding: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.tasks-card .task:last-child { border-bottom: 0; }
.task-more { padding: 10px 0; }
.calls-card .toolbar + .hint { margin-top: 4px; }
.calls-card .call-queue { margin-top: 10px; }

.call-lists { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.call-list { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 16px 18px; min-width: 0; }
.call-list.s-done { background: var(--surface-2); }
.call-list .caps { margin: 0 0 4px; }
.cl-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
a.cl-name { font: 400 21px/1.25 var(--serif); color: var(--ink); text-decoration-thickness: 1px; overflow-wrap: anywhere; min-width: 0; }
.call-list .hint { margin: 0; overflow-wrap: anywhere; }
.cl-mine { margin: 8px 0 0; font: 500 var(--text-min)/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.badge.cl-active { border-color: var(--fill); background: var(--warn-bg); }
.badge.cl-done { color: var(--faint); }
.progress-bar { display: flex; height: 10px; margin: 12px 0 8px; border-radius: 999px; overflow: hidden; background: var(--line); }
.progress-bar .pb { min-width: 4px; }
.pb-talked { background: var(--ok); }
.pb-voicemail { background: color-mix(in srgb, var(--ok) 45%, var(--surface)); }
.pb-no_answer { background: var(--fill); }
.pb-wrong_number { background: var(--faint); }
.pb-do_not_call { background: var(--ink); }
.pb-left { background: transparent; }
#clv-bar { height: 14px; margin: -8px 0 16px; }
.call-list-form fieldset, .call-sheet fieldset, #clv-share fieldset { min-width: 0; }
.cl-from { display: flex; flex-wrap: wrap; gap: 0 20px; }
.cl-from .check, .people-checks .check { min-height: 44px; margin: 0; }
.people-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 16px; }
.people-checks span { overflow-wrap: anywhere; min-width: 0; }
.pick-people { list-style: none; margin: 0 0 6px; padding: 4px 10px; max-height: 300px; overflow-y: auto; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.pick-people li + li { border-top: 1px dashed var(--line); }
.pick-people .check { min-height: 44px; margin: 0; }
.pick-people .check span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pick-people .check small { font: 400 var(--text-min) var(--mono); color: var(--faint); white-space: nowrap; }
.pick-people li.hint { padding: 10px 0; }

.call-entries { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.call-entry { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ce-pos { font: 500 var(--text-min) var(--mono); color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.ce-body { min-width: 0; }
.ce-body .hint { margin: 2px 0 0; overflow-wrap: anywhere; }
.ce-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-width: 0; }
.ce-side label.ce-who { margin: 0; display: flex; align-items: center; gap: 8px; }
.ce-side select { width: auto; max-width: 220px; min-height: 44px; margin: 0; padding: 0 12px; border-radius: 999px; font-size: 14px; }
.ce-side span.ce-who { margin: 0; }
.badge.ce-due { border-color: var(--fill); background: var(--warn-bg); }
.badge.ce-talked { border-color: var(--ok); }
.badge.ce-dnc, .badge.ce-do_not_call { border-color: var(--accent); color: var(--accent); background: var(--warm); }
.call-entry.e-done .call-name, .call-entry.e-talked .call-name, .call-entry.e-voicemail .call-name, .call-entry.e-no_answer .call-name, .call-entry.e-wrong_number .call-name { color: var(--muted); }

/* The outcome sheet. */
.call-sheet .cs-who { margin: 0; font: 400 19px/1.35 var(--serif); overflow-wrap: anywhere; }
.call-sheet form { display: flex; flex-direction: column; }
fieldset.outcomes { border: 0; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
fieldset.outcomes legend { padding: 0; margin-bottom: 8px; }
label.outcome { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px; margin: 0; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface-2); color: var(--ink); font: 600 16px/1.25 var(--ui); text-transform: none; letter-spacing: normal; text-align: center; cursor: pointer; }
label.outcome input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
label.outcome:hover { border-color: var(--ink); }
label.outcome:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
label.outcome:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
label.outcome.o-dnc { grid-column: 1 / -1; }
label.outcome.o-dnc:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--surface); }
#cs-outcome-hint { margin: -4px 0 12px; }
.call-sheet .check { min-height: 44px; margin: 0 0 8px; }
button.cs-save { width: 100%; min-height: 56px; font-size: 17px; margin-top: 4px; }
#cs-cancel { align-self: center; margin-top: 6px; }
.cs-next { border-top: 1px dashed var(--line); padding-top: 12px; }
.cs-next h3 { margin: 0 0 2px; font: 400 24px/1.25 var(--serif); overflow-wrap: anywhere; }
.cs-next .caps { margin: 0 0 4px; }
.cs-next-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cs-next-actions a.btn { min-height: 56px; font-size: 17px; }
.cs-next-actions button.link { align-self: center; }

/* A started call waiting to be logged. */
.call-bar { position: fixed; z-index: 40; right: 24px; bottom: 24px; width: min(620px, calc(100vw - var(--side-w) - 48px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 10px 10px 18px; border-radius: 20px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); }
.call-bar-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.call-bar-text b { font: 600 15px/1.3 var(--ui); overflow-wrap: anywhere; }
.call-bar-text small { font: 400 var(--text-min)/1.4 var(--mono); opacity: .8; overflow-wrap: anywhere; }
.call-bar-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.call-bar button { min-height: 48px; }
.call-bar button.secondary { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 45%, transparent); }
.call-bar button.secondary:hover:not(:disabled) { border-color: var(--bg); }
body.has-call-bar main { padding-bottom: 140px; }
body.has-call-bar .toasts { bottom: 112px; }
@media (max-width: 820px) {
  .call-row .call-btn { flex: 1 1 100%; min-height: 56px; font-size: 17px; }
  .call-row .call-num { flex: 1 1 auto; }
  .call-item { grid-template-columns: minmax(0, 1fr) auto; }
  .call-entry { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
  .ce-pos { padding-top: 4px; }
  .ce-side { grid-column: 2; justify-content: flex-start; }
  .ce-side .call-btn { flex: 1 1 100%; }
  .ce-side select { max-width: 100%; }
  .cl-from { flex-direction: column; }
  .call-bar { left: 12px; right: 12px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 10px 10px 10px 14px; }
  .call-bar-tools { flex: 1 1 100%; }
  .call-bar-tools button { flex: 1 1 0; padding: 0 12px; }
  body.has-call-bar .new-wrap { display: none; }
  body.has-call-bar main { padding-bottom: calc(260px + env(safe-area-inset-bottom)); }
  body.has-call-bar .toasts { bottom: calc(200px + env(safe-area-inset-bottom)); }
}

/* ---------- Accessibility pass (Oct 2026 review) ---------- */
/* Skip link: hidden until it has keyboard focus. */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--fill); color: var(--on-fill); font: 600 15px var(--ui); text-decoration: none; }
.skip-link:focus { top: max(12px, env(safe-area-inset-top)); }
main:focus { outline: none; }
main h1:focus { outline: none; }
main h1:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
/* A field the server sent back gets a clear edge, not only the message. */
[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.form-error { margin: 12px 0 0; grid-column: 1 / -1; }
/* Taps: summaries, tick rows and text buttons are at least 44px. */
summary, .check { min-height: 44px; }
summary { padding-block: 10px; }
details.info-tip summary { padding-block: 0; }
button.link { min-width: 44px; }
.event-list a, .pane-head > a, a.back-link { display: inline-flex; align-items: center; min-height: 44px; }
.pane-head { margin-bottom: 20px; }
.twofa-banner a { display: inline-flex; align-items: center; min-height: 44px; }
.deal .meta a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 820px) {
  /* Keep focused controls clear of the sticky header and the tab bar. */
  html { scroll-padding-top: 130px; scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  html:has(body.has-call-bar) { scroll-padding-bottom: calc(300px + env(safe-area-inset-bottom)); }
  .tb-search, .tb-ic, .theme-btn { width: 44px; min-height: 44px; }
  .brand { min-height: 44px; }
  body { font-size: 16px; }
  .hint { font-size: 15px; }
  input, select, textarea, .share-box textarea, #ai-access .share-box input, #md-snippet, #wh-new input { font-size: 16px; }
  /* The More sheet sits above the header buttons and the New button. */
  .side:has(#more-sheet:not([hidden])) { z-index: 45; }
  .deal .meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .who-link { min-width: 44px; justify-content: center; }
}
/* Social planner: a key for the status colours. */
.status-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; padding: 0; list-style: none; font: 400 var(--text-min) var(--mono); color: var(--muted); }
.status-key li { display: inline-flex; align-items: center; gap: 8px; }
.status-key i { width: 4px; height: 16px; border-radius: 2px; background: var(--faint); }
.status-key .k-approved i { background: var(--ok); }
.status-key .k-in_review i { background: var(--fill); }
.status-key .k-changes_requested i { background: var(--danger); }
.post-chip .st { display: block; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }

/* Undo: the toast's button, and the list of changes you can take back. */
.toast.has-action { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.toast.has-action > span { flex: 1 1 auto; }
.toast-action { flex: none; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid currentColor; background: transparent; color: inherit; font: 600 15px/1 var(--ui); cursor: pointer; }
.toast-action:focus-visible { outline: 3px solid var(--fill); outline-offset: 2px; }
.undo-window { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.undo-window label { max-width: 220px; }
.undo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.undo-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.undo-item > div { min-width: 0; overflow-wrap: anywhere; }
.undo-meta { display: block; }
@media (max-width: 820px) {
  .toast.has-action { pointer-events: auto; }
}

/* ---------- Checkout (/pay) and the funnel designer ---------- */
body.checkout .public-main { max-width: 1040px; }
body.checkout .card.narrow { max-width: 640px; margin: 0 auto; }
.co-head { margin-bottom: 20px; }
.co-grid { display: grid; gap: 20px; align-items: start; }
.co-sum { order: -1; }
.sum-fold { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 4px 20px 16px; }
.sum-fold > summary { display: flex; justify-content: space-between; gap: 12px; min-height: 48px; align-items: center; cursor: pointer; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.sum-fold[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.product-box h2 { margin: 0 0 4px; overflow-wrap: anywhere; }
.product-box .price { font: 400 32px/1 var(--display); letter-spacing: .03em; margin: 8px 0 14px; }
.order-sum td, .order-sum th { padding: 8px 0; border-bottom: 1px dashed var(--line); font: 400 14px/1.5 var(--mono); text-align: left; }
.order-sum .num { text-align: right; white-space: nowrap; }
.order-sum td:not(.num), .order-sum th { overflow-wrap: anywhere; }
.order-sum tfoot th, .order-sum tfoot td { background: none; color: var(--ink); border-bottom: 0; padding-top: 12px; font: 400 26px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.checkout-form fieldset { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 12px; }
.checkout-form legend { font: 400 22px/1.25 var(--serif); margin-bottom: 10px; padding: 0; }
.bump-box { align-items: flex-start; padding: 14px 16px; border: 2px dashed var(--fill); border-radius: 12px; background: var(--warm); margin-bottom: 16px; }
.bump-box > span { display: grid; gap: 4px; }
.bump-box .bump-price { font: 500 14px/1.4 var(--mono); color: var(--accent); }
.pay-panel { border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; margin: 12px 0; display: grid; gap: 10px; }
.pay-panel legend { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 0 6px; }
.pay-btn { min-height: 52px; font-size: 16px; }
.offer-form { display: grid; gap: 10px; }
.offer-form .link { min-height: 44px; }
@media (min-width: 900px) {
  .co-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .co-sum { order: 1; position: sticky; top: 24px; }
}

.flow-rail { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.flow-step { position: relative; border-left: 4px solid var(--ring); }
.flow-step.k-checkout { border-left-color: var(--fill); }
.flow-step.k-downsell { border-left-color: var(--faint); margin-left: 28px; }
.flow-step.k-thanks { border-left-color: var(--ok); }
.flow-step .step-head { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.flow-step .step-head .caps { margin: 0; }
.flow-link { font: 500 var(--text-min)/1.4 var(--mono); color: var(--faint); padding: 10px 0 10px 22px; margin-left: 14px; border-left: 2px dashed var(--line); }
.flow-link b { color: var(--accent); font-weight: 500; }
.flow-grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .flow-grid.two { grid-template-columns: 1fr 1fr; } }
.bump-edit { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; margin-bottom: 10px; }
.step-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.flow-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.money-in { max-width: 180px; }
.tax-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: end; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.kpis div { padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-2); }
.kpis b { display: block; font: 400 28px/1 var(--display); letter-spacing: .03em; }
.kpis span { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.save-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 16px; margin: 16px 0; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.fz-field .hint { margin: 4px 0 0; }
@media (max-width: 820px) {
  .save-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .flow-step.k-downsell { margin-left: 12px; }
}

/* ---------- UI tune-up (Oct 2026): shadcn-style details on our own tokens ---------- */
/* Small, quiet touches borrowed from shadcn/ui patterns: a soft card edge, a
   halo around focused fields, drawn select chevrons, row hover, press feedback
   and drawers that slide in. Scoped to the app shell so public pages keep
   their own look. The select caret is drawn with gradients because the page's
   content policy keeps images, data: ones included, to our own files. */
:root {
  --shadow-sm: 0 1px 2px rgba(24, 27, 32, .05), 0 1px 1px rgba(24, 27, 32, .03);
  --halo: 0 0 0 4px rgba(12, 143, 200, .18);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --halo: 0 0 0 4px rgba(111, 176, 245, .2); }
}
:root[data-theme="dark"] { --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --halo: 0 0 0 4px rgba(111, 176, 245, .2); }

::selection { background: rgba(252, 101, 0, .24); }

/* Page heads: the lead clears the tall display face, and the focus ring a
   route change can draw hugs the heading instead of an empty box. */
main h1 { width: fit-content; max-width: 100%; }
.pane-head .lead { margin-top: 10px; }

/* Surfaces and tables */
.app .card { box-shadow: var(--shadow-sm); }
.app td { font-variant-numeric: tabular-nums; transition: background-color .15s; }
.app tbody tr:hover > :is(td, th) { background: var(--surface-2); }

/* Rows stay whole. A cell is always a table cell (a flex layout goes on a box
   inside it, like .person-box), cells sit on the row's middle as in the demo,
   and a cell of buttons keeps them on one line. Buttons keep their 44px
   target but reach into the cell padding, so they never make a row taller
   than its text. test/unit/web-tables.test.ts guards this. */
.app td { vertical-align: middle; }
.app td.cell-tools { width: 1%; white-space: nowrap; text-align: right; }
.app td.cell-tools > * + * { margin-left: 4px; }
.app td > :is(button, a.btn) { min-height: 44px; margin-block: -11px; }
.app td > button:not(.link), .app td > a.btn { margin-block: -6px; }
.app th.cell-tools { text-align: right; }
/* Shared cell sizes: short facts stay on one line (an email or phone never
   breaks mid-word), longer text keeps a readable floor, and .table-wrap
   scrolls sideways instead of crushing a column. */
.app td.nowrap { white-space: nowrap; }
.app td.prose { min-width: 16rem; }
.app td.cell-text { min-width: 14rem; }
.app td.cell-when { min-width: 9rem; }
#wd-conv td:nth-child(-n+2) { white-space: nowrap; }
#fd-subs .line { display: block; white-space: nowrap; }
.app .table-wrap td[colspan] > dl.rows { position: sticky; left: 0; max-width: min(560px, calc(100vw - 64px)); }
.table-wrap.row-forms { container-type: inline-size; }
.table-wrap.row-forms td[colspan] > form { position: sticky; left: 0; box-sizing: border-box; width: calc(100cqi - 28px); max-width: calc(100cqi - 28px); }
.app td > button:not(.link), .app td > a.btn { padding: 0 16px; font-size: 14px; }

/* Shell. The top bar stays one row: tools never shrink below 44px, the
   agency crumb gives way before the current place, and the who pill shrinks
   to its avatar on narrower screens. Sign out, the workspace switch and (on
   phones) the theme live in the account menu on the who pill. */
.app .topbar > :not(.crumbs) { flex: none; }
.app .topbar > .crumbs { flex: 1 1 0; min-width: 0; }
.app .who { position: relative; flex-wrap: nowrap; }
.app .crumbs li:first-child { flex-shrink: 4; min-width: 6ch; }
.app .crumbs li:last-child { flex: none; max-width: 28ch; }
.app .crumbs ol { font-weight: 400; text-transform: none; letter-spacing: 0; }
.app .crumbs a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.app .crumbs a:hover { color: var(--ink); }
.app .crumbs [aria-current] { color: var(--ink); font-weight: 500; }
button.who-link { color: var(--ink); font: inherit; text-align: left; min-height: 44px; }
.app .who-link:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--ink); }
.app .who-link[aria-expanded="true"] { border-color: var(--fill); }
.app .new-menu { border-radius: var(--r); }
.app .who-menu { top: calc(100% + 8px); bottom: auto; right: 0; min-width: 240px; }
.app .who-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font: 500 15px var(--ui); }
.app .who-menu a:hover, .app .who-menu a:focus-visible { background: var(--warm); }
.app .who-menu select { width: 100%; max-width: none; margin: 0 0 6px; min-height: 44px; background-color: var(--surface); color: var(--ink); border-color: var(--line); --caret: var(--faint); }
.app .who-menu .who-menu-theme { display: none; }
.app .who-menu [role=menuitemcheckbox][aria-checked="true"]::after { content: "On"; margin-left: auto; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.app .tb-new svg { transition: rotate .2s var(--ease); }
.app .tb-new[aria-expanded="true"] svg { rotate: 45deg; }
@media (min-width: 821px) {
  .app .tb-new { background: var(--surface); color: var(--ink); border: 1px solid var(--hair); }
  .app .tb-new svg { color: var(--accent); }
  .app .tb-new:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--ink); }
  .app .tb-new[aria-expanded="true"] { border-color: var(--fill); }
  .app .side { overflow: hidden; gap: 20px; }
  .app .side > .tabs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 2px 6px; scrollbar-width: thin; scrollbar-color: rgba(238, 241, 245, .18) transparent; }
  .app .residency { margin-top: 0; flex: none; }
}
@media (min-width: 821px) and (max-height: 700px) { .app .residency { display: none; } }
@media (min-width: 821px) and (max-width: 1280px) {
  .app .who-text { display: none; }
  .app .who-link { padding: 3px; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .app .tb-new { width: 44px; padding: 0; }
  .app .tb-new span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 820px) {
  .app #theme-toggle { display: none; }
  .app .who-menu .who-menu-theme { display: list-item; }
  .app .new-wrap:has(#new-menu:not([hidden]))::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(15, 17, 20, .35); }
  body:has(#pane-inbox:not([hidden])[data-open="thread"]) .new-wrap { display: none; }
  .app .new-wrap { transition: translate .2s var(--ease); }
  .app .new-wrap.away { translate: 0 120px; }
  .app .pane-head > .head-tools > :is(button, a.btn) { flex: 1 1 auto; }
  .app .tabs a[aria-current="page"]::before, .app .more-btn[aria-current="page"]::before { content: ""; position: absolute; top: 4px; left: 50%; width: 56px; height: 30px; margin-left: -28px; border-radius: 999px; background: rgba(252, 101, 0, .16); z-index: -1; }
  .app .more-btn { position: relative; }
}
@media (max-width: 380px) {
  .app .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Notices: the two-step banner is one compact row; errors look like errors. */
.app #twofa-banner { gap: 4px 16px; padding: 6px 8px 6px 18px; border: 1px solid var(--line); background: var(--warm); font: 400 var(--text-min)/1.6 var(--mono); color: var(--muted); }
.app #twofa-banner-text { flex: 1 1 34ch; display: flex; gap: 10px; align-items: baseline; }
.app #twofa-banner-text::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fill); }
.app #twofa-banner-go { padding: 0 18px; border-radius: 999px; background: var(--fill); color: var(--on-fill); text-decoration: none; font: 600 15px var(--ui); }
.app #twofa-banner-later { color: var(--muted); }
.app .notice.error { display: flex; gap: 10px; align-items: baseline; border: 1px solid var(--accent); border-left-width: 4px; color: var(--ink); }
.app .notice.error[hidden] { display: none; }
.app .notice.error::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--surface); font: 600 14px/1 var(--ui); transform: translateY(3px); }
@media (max-width: 820px) {
  .app #twofa-banner { padding: 10px 12px 8px 16px; }
  .app #twofa-banner-go { flex: 1 1 auto; justify-content: center; }
}

/* Sidebar group labels read as labels; the More sheet shows tiles. */
.app .nav-group, .app .sheet-group h3 { color: rgba(238, 241, 245, .5); letter-spacing: .12em; }
.app .nav-group { margin-top: 20px; }
.app .sheet { border-top: 1px solid rgba(238, 241, 245, .1); }
.app .sheet-grid a { position: relative; min-height: 78px; border: 1px solid rgba(238, 241, 245, .1); background: rgba(238, 241, 245, .04); border-radius: var(--r); }
.app .sheet-grid a[aria-current="page"] { border-color: var(--fill); box-shadow: inset 0 0 0 1px var(--fill); background: transparent; }
.app .sheet-grid .count { position: absolute; top: 6px; right: 8px; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--fill); color: var(--on-fill); font: 600 var(--text-min)/22px var(--ui); }
@media (hover: none) { .app .sheet-links a:hover:not([aria-current]) { background: rgba(238, 241, 245, .04); color: var(--side-ink); } }

/* Shared components (parity batch 2). */
small { font-size: var(--text-min); }
.appt-time small { font-weight: 400; color: var(--faint); font-size: var(--text-min); }
.app label:not(.check) > small { display: block; margin-top: 6px; font: 400 var(--text-min)/1.45 var(--ui); text-transform: none; letter-spacing: 0; color: var(--faint); }

/* Drawers: paper surface, display-face title, a round close, a pinned head
   and their facts in a white card. The "Close" text stays as the name. */
.drawer { background: var(--bg); }
.drawer-head { position: sticky; top: calc(-1 * max(20px, env(safe-area-inset-top))); z-index: 2; margin: calc(-1 * max(20px, env(safe-area-inset-top))) -20px 0; padding: max(20px, env(safe-area-inset-top)) 20px 8px; background: var(--bg); }
.drawer-head h2 { font: 400 32px/.96 var(--display); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.drawer:not(.call-sheet) .drawer-head [data-close] { position: relative; flex: none; width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--hair); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 0; text-decoration: none; }
.drawer:not(.call-sheet) .drawer-head [data-close]::before, .drawer:not(.call-sheet) .drawer-head [data-close]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: currentColor; rotate: 45deg; }
.drawer:not(.call-sheet) .drawer-head [data-close]::after { rotate: -45deg; }
.drawer .drawer-head [data-close]:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--ink); }
.drawer > dl.rows { padding: 4px 18px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
@media (max-width: 820px) {
  .drawer-head { top: 0; margin: 0 -20px; padding: 6px 20px 8px; background: var(--bg); }
  .drawer-head h2 { font-size: 28px; }
}

/* Status pills: a coloured dot per state, words always shown. */
:is(.app, .drawer) .cs { text-transform: none; letter-spacing: 0; }
:is(.app, .drawer) .cs-no { color: var(--faint); background: transparent; }
:is(.app, .drawer) .cs-no::before { background: transparent; border: 1px solid var(--faint); }
.app .badge:is(.s-draft, .s-in_review, .s-approved, .s-changes_requested, .cs-draft, .cs-scheduled, .cs-sent, .ev-open, .ev-draft, .ev-closed, .ev-cancelled, .as-active, .as-draft, .as-paused)::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.app .badge:is(.s-in_review, .cs-scheduled, .ev-open, .as-active) { border-color: var(--fill); }
.app .badge:is(.s-in_review, .cs-scheduled, .ev-open, .as-active)::before { background: var(--fill); }
.app .badge:is(.s-approved, .cs-sent) { border-color: var(--ok); }
.app .badge:is(.s-approved, .cs-sent)::before { background: var(--ok); }
.app .badge.s-changes_requested { border-color: var(--danger); color: var(--danger); }
.app .badge.s-changes_requested::before { background: var(--danger); }
.app .badge:is(.s-draft, .cs-draft, .ev-draft, .as-draft) { border-style: dashed; background: transparent; }
.app .badge:is(.s-draft, .cs-draft, .ev-draft, .as-draft)::before { background: transparent; border: 1px solid var(--faint); }
.app .badge.ev-cancelled { color: var(--faint); border-style: dashed; }
.app .loc .badge { text-transform: none; letter-spacing: 0; }

/* Filter chips: sentence case with faint counts; one sideways row on phones. */
.app .chips-row button.chip { text-transform: none; letter-spacing: 0; }
.app .chips-row button.chip .n { color: var(--faint); }
.app .chips-row button.chip[aria-pressed="true"] .n { color: inherit; }
@media (max-width: 820px) {
  .app .chips-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px; }
  .app .chips-row > * { flex: none; }
  .app .composer .chips-row { margin-inline: -14px; padding-inline: 14px; }
}

/* List rows are one click target, with ink titles. */
.app :is(.post-list, #email-rows, #forms-rows, #auto-rows, #events-rows) > li { position: relative; margin-inline: -12px; padding-inline: 12px; border-radius: var(--r); transition: background-color .15s; }
.app :is(.post-list, #email-rows, #forms-rows, #auto-rows, #events-rows) > li:hover { background: var(--surface-2); }
.app a.row-link { color: var(--ink); text-decoration: none; }
.app .post-list a.row-link { font-weight: 600; }
.app a.row-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.app a.row-link:hover { text-decoration: underline; }
.app :is(.post-list, #email-rows, #forms-rows, #auto-rows, #events-rows) > li :is(button, select, input, label, a:not(.row-link)) { position: relative; z-index: 1; }
.app a.row-link:focus-visible { outline: none; }
.app :is(.post-list, #email-rows, #forms-rows, #auto-rows, #events-rows) > li:has(a.row-link:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.app :is(.post-list, #email-rows, #forms-rows, #auto-rows, #events-rows) .hint { font-family: var(--mono); }

/* Ledgers line up with the headline; three figures stay one row on phones. */
.app dl.ledger > div:first-child { padding-left: 0; }
.app dl.ledger dd { text-transform: uppercase; }
@media (max-width: 820px) {
  .app dl.ledger > div:nth-child(odd) { padding-left: 0; }
  .app dl.ledger:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app dl.ledger:has(> div:nth-child(3):last-child) > div:nth-child(3) { border-left: 1px solid var(--line); border-top: 0; padding-left: 12px; }
}

/* Disclosures: a chevron instead of the browser triangle. */
.app :is(details.card, #company-list details, #pane-media details, #se-history details, #campaign-detail details):not(.info-tip):not(.media-rename):not(.snooze) > summary { display: flex; align-items: center; gap: 12px; list-style: none; font: 600 15px/1.3 var(--ui); color: var(--ink); }
.app :is(details.card, #company-list details, #pane-media details, #se-history details, #campaign-detail details):not(.info-tip):not(.media-rename):not(.snooze) > summary::-webkit-details-marker { display: none; }
.app :is(details.card, #company-list details, #pane-media details, #se-history details, #campaign-detail details):not(.info-tip):not(.media-rename):not(.snooze) > summary::before { content: ""; flex: none; width: 8px; height: 8px; margin: 0 2px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform .15s var(--ease); }
.app :is(details.card, #company-list details, #pane-media details, #se-history details, #campaign-detail details):not(.info-tip):not(.media-rename):not(.snooze)[open] > summary::before { transform: rotate(45deg); }
.app :is(#se-history, #campaign-detail) details > summary { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.app #company-list .card > details:not(.info-tip) { border-top: 1px solid var(--line); }

/* Reply boxes grow with what you type. */
@supports (field-sizing: content) {
  .app .composer textarea { field-sizing: content; min-height: 72px; max-height: 40vh; }
  .app .reply-form textarea { field-sizing: content; min-height: 48px; max-height: 320px; }
}

/* House radius on card-like blocks; framed empty states. */
.app :is(.step-card, .field-row, .link-box, .gate-note, .checks li) { border-radius: var(--r); }
/* One framed empty state everywhere: a plain line, and the action that fills it when it fits. */
:is(.app, .drawer) .empty { margin: 0 0 16px; padding: 28px 16px; border: 1px dashed var(--line); border-radius: var(--r); text-align: center; font: 400 15px/1.6 var(--mono); color: var(--muted); }
:is(.app, .drawer) .empty > button { margin-top: 14px; }
.app .thread > .empty { border: 0; }
.rollup-table tbody th { white-space: nowrap; }

/* Toasts on the house radius, with a dot. */
.toasts .toast { border-radius: var(--r); border-left: 0; display: flex; gap: 10px; align-items: baseline; }
.toasts .toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fill); transform: translateY(-1px); }

/* Fields: a steady hover edge, a soft halo with the focus ring, drawn chevrons. */
:is(.app, .drawer) :is(input, select, textarea) { transition: border-color .15s, box-shadow .15s; }
:is(.app, .drawer) :is(input:not([type=checkbox]):not([type=radio]), select, textarea):hover:not(:focus):not(:disabled) { border-color: var(--muted); }
:is(.app, .drawer) :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus-visible { box-shadow: var(--halo); }
:is(.app, .drawer) select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; --caret: var(--faint); background-image: linear-gradient(45deg, transparent 50%, var(--caret) 50%), linear-gradient(135deg, var(--caret) 50%, transparent 50%); background-position: calc(100% - 21px) 52%, calc(100% - 16px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.app .ctx select:not([multiple]):not([size]) { --caret: var(--side-ink); }
.app .ctx select:hover:not(:focus) { border-color: rgba(238, 241, 245, .4); }

/* Buttons: colour changes ease in, and a press gives back a little. */
button, a.btn { transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s, color .15s; }
:is(.app, .drawer) button:active:not(:disabled), :is(.app, .drawer) a.btn:active { transform: translateY(0) scale(.98); }
.tabs a, .sheet-links a { transition: background-color .15s, color .15s; }

/* Sidebar scrolls without a heavy bar. */
.side { scrollbar-width: thin; scrollbar-color: rgba(238, 241, 245, .18) transparent; }

/* Drawers and sheets slide in; reduced motion skips it (see Base). */
@keyframes cc-fade { from { opacity: 0; } }
@keyframes cc-from-right { from { translate: 28px 0; opacity: 0; } }
@keyframes cc-from-below { from { translate: 0 40px; opacity: 0; } }
.drawer-backdrop, .sheet-backdrop { animation: cc-fade .2s ease-out; }
.drawer { animation: cc-from-right .26s var(--ease); }

/* Parity with the clickable demo: mono leads, display-face figures with the
   caption under them, a pill for "How this works", the person in a pill, and
   calmer badges inside tables. */
.lead { max-width: 640px; color: var(--muted); font: 400 15px/1.75 var(--mono); }
h1 em { font-style: normal; color: var(--hl); }
.app dl.ledger > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.app dl.ledger dd { margin: 0; font: 400 32px/1 var(--display); letter-spacing: .03em; }
.app dl.ledger dt { font: 400 var(--text-min)/1.4 var(--mono); text-transform: none; letter-spacing: 0; color: var(--faint); }
.col-head b { font: 400 26px/1.1 var(--display); letter-spacing: .03em; }
details.info-tip summary { width: fit-content; padding: 0 16px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); text-transform: none; letter-spacing: 0; }
details.info-tip summary::before { border: 0; background: var(--warm); color: var(--accent); }
details.info-tip summary:hover { border-color: var(--ink); }
details.info-tip[open] summary { border-color: var(--fill); color: var(--ink); }
.table-wrap { border-radius: var(--r); background: var(--surface); }
.app td .badge { text-transform: none; letter-spacing: 0; }
.who-link { padding: 3px 16px 3px 3px; border: 1px solid var(--line); background: var(--surface); }
.who-link:hover { border-color: var(--ink); }

/* Phones: the location row moves under the header (wireCtxPlace in app.js)
   and scrolls away, so only the brand row stays pinned. */
@media (max-width: 820px) {
  .drawer, .sheet { animation: cc-from-below .28s var(--ease); }
  .main > .ctx { order: -1; flex: none; background: var(--side); padding: 2px 16px 12px; border-radius: 0; }
  .app .who select:not([multiple]):not([size]) { --caret: var(--side-ink); }
  html { scroll-padding-top: 84px; }
  .app tbody tr:hover > :is(td, th) { background: none; }
  .pane-head > .head-tools { flex: 1 1 100%; }
  .pane-head > button, .pane-head > a.btn, .pane-head > .head-tools > button:only-child { width: 100%; }
  .who-link { padding: 0; border: 0; background: none; }
  .app dl.ledger dd { font-size: 28px; }
}

/* Settings lock: the review list on each company. */
.lock-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0; }
.lock-panel.locked { display: block; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--fill); }
.lock-head { margin: 0 0 8px; }
.lock-list { list-style: none; margin: 0 0 12px; padding: 0; }
.lock-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.lock-list li > div { min-width: 0; overflow-wrap: anywhere; }
.lock-panel .actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Terms and privacy: the owner's tool list, the draft frame, and the policy pages. */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 4px 16px; }
.policy-frame { display: block; width: 100%; height: 520px; border: 1px solid var(--hair); border-radius: var(--r, 16px); background: var(--bg); margin: 8px 0 12px; }
.public .policy-doc { max-width: 720px; margin-inline: auto; }
.public-main:has(.policy-doc) { max-width: 760px; }
.policy-doc section + section { margin-top: 20px; }
.policy-doc h2 { font-size: 1.15em; margin: 0 0 6px; }
.policy-doc ul { padding-left: 1.2em; }
.policy-doc .table-wrap { overflow-x: auto; }
.policy-doc table { width: 100%; border-collapse: collapse; }
.policy-doc th, .policy-doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* Contacts and Inbox, matched to the clickable demo. */
.app .contact-tools { justify-content: flex-start; }
.app .contact-tools label.grow { flex: 1 1 360px; max-width: none; }
.app .contact-tools .chips-row { flex: 1 1 100%; }
.app .contact-tools :is(select, input) { min-height: 48px; }
.app .search-field { position: relative; display: block; }
.app .search-field svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.app .search-field input { padding-left: 44px; }

.app .contact-table td { vertical-align: middle; }
.app .contact-table .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app .contact-table .who .av { border-width: 1px; border-color: var(--line); }
.app .contact-table td .who a { color: var(--ink); text-decoration: none; font: 600 15px/1.3 var(--ui); }
.app .contact-table tr:hover .who a, .app .contact-table .who a:focus-visible { text-decoration: underline; }
.app .contact-table td small.sub { font: 400 var(--text-min) var(--mono); }
.app .contact-table td.col-when { font: 400 var(--text-min) var(--mono); color: var(--muted); white-space: nowrap; }
.app .contact-table .col-tags :is(.tags, .tag-line) { margin-top: 0; }
.app .contact-table .col-tags > * + * { margin-top: 4px; }
.app .contact-table table { min-width: 980px; }

.app .contact-cards li { display: grid; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); }
.app .contact-cards li > .contact-card { border: 0; flex-direction: row; align-items: flex-start; gap: 12px; }
.app .contact-card > .av { width: 44px; height: 44px; border-width: 1px; border-color: var(--line); }
.app .contact-card .cc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.app .contact-card .cc-chips { gap: 4px 14px; }
.app .contact-card .cs { padding: 0; border: 0; background: none; color: var(--muted); }
.app .contact-card :is(.cs-ending, .cs-unsubscribed) { color: var(--accent); }
.app .contact-card .badge { text-transform: none; letter-spacing: 0; }
.app .cc-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 16px 14px; }
.app .cc-quick :is(button, a) { min-height: 44px; margin: 0; }

.app #contact-detail { background: none; border: 0; box-shadow: none; padding: 0; }
.app .cw-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) {
  .app .cw-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 320px); }
}
.app .cw-grid > section { min-width: 0; display: grid; gap: 12px; }
.app .cw-grid > section > .card { min-width: 0; margin: 0; padding: 20px 22px; }
.app .cw-grid h2 { font: 400 22px/1.2 var(--serif); }
.app .cw-grid .badges { grid-template-columns: minmax(0, 1fr); }
.app .cw-consent-form { margin-top: 12px; }
.app .cw-grid .table-wrap { overflow-x: auto; }

#contact-drawer { gap: 12px; }
#contact-drawer .cw-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); }
#contact-drawer .cw-card > h3, #contact-drawer .tag-box > h3 { font: 400 22px/1.2 var(--serif); margin: 0 0 10px; }
#contact-drawer .drawer-head .av { width: 56px; height: 56px; font-size: 20px; border-width: 1px; border-color: var(--line); }
#contact-drawer .drawer-head > div:first-child { display: flex; gap: 14px; align-items: center; min-width: 0; }
#contact-drawer .drawer-head > div:first-child > div { min-width: 0; }
#contact-drawer #cw-name { overflow-wrap: anywhere; }
#contact-drawer .cw-card > dl.rows { padding: 0; border: 0; }
#cw-note-form { position: sticky; bottom: calc(-1 * max(20px, env(safe-area-inset-bottom))); z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px -20px 0; padding: 10px 20px max(12px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--hair); }
#cw-note-form label { flex: 1; margin: 0; }
#cw-note-form textarea { min-height: 48px; max-height: 30vh; resize: vertical; margin: 0; }
#cw-note-form button { margin: 0; }
#cw-note-form .hint { flex: 1 1 100%; margin: 0; font-size: var(--text-min); }
.tl button.link { color: var(--blue); font: 400 14px var(--ui); min-height: 44px; padding: 0; }

.app .msg { scroll-margin: 96px 0 calc(150px + env(safe-area-inset-bottom)); }
.app .msg.m-out { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.app .msg.m-out :is(.msg-head .caps, .msg-head time, .hint) { color: inherit; opacity: .78; }
.app .msg-day { align-self: center; padding: 4px 0; font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); list-style: none; }
.app .thread-tools { align-items: center; }
.app .thread-tools label { display: flex; align-items: center; gap: 8px; }
.app .thread-tools select { margin-top: 0; }
.app .thread-tools > button, .app .thread-tools details.snooze summary, .app .thread-tools a.btn.ghost { min-height: 44px; padding: 0 16px; font-size: 14px; }

.app .convo-list { gap: 0; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.app .convo-list:empty { display: none; }
.app .convo { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.app .convo-list > li:last-child .convo { border-bottom: 0; }
.app .convo:hover { background: var(--surface-2); }
.app .convo:focus-visible { outline-offset: -3px; }
.app .convo[aria-current="true"] { background: var(--warm); box-shadow: inset 4px 0 0 var(--fill); }
.app .convo .av-sm { width: 38px; height: 38px; }
.app .convo-prev { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.app .convo-ch { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.app .convo.unread .convo-ch { color: var(--accent); }
.app .convo.unread .av { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }

@media (min-width: 821px) {
  .app .thread-head { position: sticky; top: -18px; z-index: 1; margin: -18px -20px 0; padding: 18px 20px 12px; background: var(--surface); }
  .app .thread:has(> #thread-empty:not([hidden])) { align-self: stretch; min-height: 320px; display: grid; place-items: center; }
}

@media (max-width: 820px) {
  .app .contact-tools { position: sticky; top: calc(54px + max(10px, env(safe-area-inset-top))); z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0 -16px 10px; padding: 8px 16px; background: var(--bg); }
  .app .contact-tools label.grow { grid-column: 1; margin: 0; }
  .app .contact-tools .tag-filter { grid-column: 2; margin: 0; }
  .app .contact-tools .tag-filter select { min-width: 0; max-width: 40vw; margin-top: 0; }
  .app .contact-tools .chips-row { grid-column: 1 / -1; }
  .app .contact-tools .tools-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html:has(#pane-contacts:not([hidden])) { scroll-padding-top: calc(84px + 116px); }
  .app .thread-tools label { flex: 1 1 100%; }
  .app .thread-tools select { flex: 1; max-width: none; }
  .app #thread-call .call-num { display: none; }
  .app #thread-call .call-row .call-btn { flex: 1 1 0; min-height: 48px; font-size: 15px; }
  .app #inbox-ledger { display: none; }
}

/* ---------- Batch 4: Pipeline, Tasks, Calendar and Reviews ---------- */
.app main:has(#pane-pipeline:not([hidden])) { max-width: 1320px; }
.app .deal .meta span:first-child { flex: 1 1 auto; }
.app .deal .meta .amt { margin-left: auto; white-space: nowrap; }
.app .deal .meta span:last-child:not(.amt) { white-space: normal; }
.app .board-wrap { scroll-snap-type: x proximity; }
.app .col { scroll-snap-align: start; }
.app .deal { box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) { .app .deal:hover { border-color: var(--field-line); } }
.app .deal:active { cursor: grabbing; }
.app .col-body > .hint { margin: 0; padding: 18px 12px; border: 1px dashed var(--hair); border-radius: 12px; text-align: center; }

.app .task-list { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 0 18px 0 8px; }
.app .task-list:empty { display: none; }
.app .task:last-child { border-bottom: 0; }
.app .task-tools label.inline { display: flex; align-items: center; gap: 12px; }
.app .task-tools label.inline select { margin: 0; max-width: 420px; }
.app .task-note { max-width: 72ch; }

.app .wk-appt { border: 1px solid var(--fill); border-left-width: 3px; border-radius: 12px; background: color-mix(in srgb, var(--fill) 9%, var(--surface)); }
.app .wk-appt.st-confirmed { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.app .wk-appt.st-done { border-color: var(--hair); border-left-color: var(--faint); background: var(--surface-2); }
.app .wk-appt.st-no_show { border-color: var(--danger); background: var(--surface-2); }
.app .wk-appt.st-cancelled { border: 1px dashed var(--faint); background: transparent; }
.app .wk-appt:hover:not(:disabled) { border-color: var(--ink); }
.app .wk-col.today { background-color: color-mix(in srgb, var(--fill) 6%, var(--surface)); }
.app .wk-day:hover:not(:disabled), .app .appt-row:hover:not(:disabled) { background: color-mix(in srgb, var(--fill) 8%, var(--surface-2)); }
.app .wk-corner, .app .wk-gutter { position: sticky; left: 0; z-index: 4; }
.app .wk-gutter { background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.app .wk-corner { z-index: 5; }
.app .wk-ghost { position: absolute; left: 3px; right: 3px; padding: 2px 8px; border: 1px dashed var(--fill); border-radius: 12px; background: color-mix(in srgb, var(--fill) 6%, transparent); color: var(--accent); font: 500 var(--text-min)/1.4 var(--mono); pointer-events: none; overflow: hidden; }
@media (hover: none) { .app .wk-ghost { display: none; } }
.app .wk-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--fill); pointer-events: none; z-index: 1; }
.app .wk-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--fill); }
#appt-contact { margin: 0 0 12px; }

.app .review-list { gap: 0; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); overflow: clip; }
.app .review { border: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 16px 20px; }
.app .review:first-child { border-top: 0; }
.app .review.r-new { border-left: 0; box-shadow: inset 4px 0 0 var(--fill); }
.app .review-list:empty { display: none; }
.app .reply-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.app .reply-head label { margin: 0; }
.stars .off { color: var(--field-line); }
.app .review-body > .hint { font-family: var(--mono); }
.app .review > .av { width: 40px; height: 40px; border-width: 1px; border-color: var(--line); }

@media (min-width: 821px) {
  .app .cal-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .app .cal-tools > label.inline { justify-self: end; }
}
@media (max-width: 820px) {
  .app #task-form:not(:focus-within):has([name=title]:placeholder-shown) > label:not(.grow) { display: none; }
  .app .task-list { padding: 0 12px 0 4px; }
  .app .task { grid-template-areas: 'tick due' 'tick body'; row-gap: 0; }
  .app .task .tick { grid-area: tick; }
  .app .task > .task-side { grid-area: due; justify-content: flex-start; margin-top: 8px; }
  .app .task-body { grid-area: body; padding-top: 6px; }
  .app .task-tools label.inline select { flex: 1; min-width: 0; }
  .app .board-wrap { margin-inline: -16px; padding: 0 16px 12px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
  .app .board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 320px); }
  .app .col { min-height: 260px; scroll-snap-align: start; }
  #appt-contact { width: 100%; }
  #book-form > button[type=submit] { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); width: 100%; z-index: 1; box-shadow: var(--shadow); }
  .app .cal-day.empty { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; padding-block: 8px; }
  .app .cal-day.empty h2 { margin: 0; font-size: 18px; }
  .app .cal-day.empty > .hint { order: 3; flex-basis: 100%; margin: 0 0 4px; }
  .app .cal-day.empty .add-here { margin: 0; }
  .app .review { padding: 14px; }
}

/* ---------- Social, Email, Forms, Automations and Events (batch 5) ---------- */
/* Social month: chips lead with the network code and title, time and status beneath. */
.app .post-chip { border-left-color: var(--st, var(--faint)); }
.app .post-chip .l1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .post-chip .n { color: var(--accent); font-weight: 500; margin-right: 6px; }
.app .post-chip .b { color: var(--ink); }
.app .post-chip .st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .post-chip.s-in_review { --st: var(--fill); border-style: dashed; border-color: var(--fill); border-left-style: solid; }
.app .post-chip.s-approved { --st: var(--ok); }
.app .post-chip.s-changes_requested { --st: var(--danger); }
.app .post-chip:hover { border-color: var(--ink); border-left-color: var(--st, var(--faint)); background: var(--surface-2); }
.app .status-key .k-in_review i { background: transparent; border: 2px dashed var(--fill); width: 6px; }
.app .cal .day .wd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app .cal-toolbar { margin: 0 0 12px; }
.app .cal-toolbar .status-key { margin: 0; }
.app .cal-toolbar + .hint { margin: 0 0 6px; }
.app .grant-actions { margin: 0 0 12px; }
.app .cal-head { border: 1px solid var(--line); border-bottom-color: var(--hair); border-radius: var(--r) var(--r) 0 0; background: var(--surface-2); }
.app .cal { border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.app #social-planner .card:has(> #social-cal) { container-type: inline-size; }
@container (max-width: 760px) {
  .app .cal-head { display: none; }
  .app .cal { grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .app .cal .day { min-height: 0; border: 0; border-bottom: 1px dashed var(--line); padding: 10px 0; }
  .app .cal .day.empty { display: none; }
  .app .cal .day.today { box-shadow: none; }
  .app .cal .day .wd { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .app .post-chip { white-space: normal; font-size: 14px; padding: 10px 12px; }
  .app .post-chip :is(.l1, .st) { white-space: normal; }
}
#social-ledger dt::before { content: ''; display: inline-block; width: 4px; height: 14px; border-radius: 2px; margin-right: 8px; vertical-align: -2px; background: var(--faint); }
#social-ledger .k-in_review dt::before { background: var(--fill); }
#social-ledger .k-changes_requested dt::before { background: var(--danger); }
#social-ledger .k-approved dt::before { background: var(--ok); }
.app #social-planner > .ledger, .app #email-list-view > .ledger, .app #events-list-view > .ledger { margin-top: 0; }
.app .ledger:empty { display: none; }

/* Approval queue rows: the post on the left, its action on the right. */
.app .post-list.rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.app .post-list.rows li > :first-child { flex: 1 1 260px; min-width: 0; }

/* Wording checks read as single warning rows. */
.app .checks li.check, .app .checks li.stop { display: block; min-height: 0; margin: 0; font: 400 14px/1.5 var(--ui); color: var(--ink); }
.app .checks li { border-left: 4px solid var(--fill); }
.app .checks li.stop { border-left-color: var(--accent); }
.toolbar + [hidden] + * { margin-top: 14px; }

/* Post drawer */
#post-drawer .cw-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 14px 18px; box-shadow: var(--shadow-sm); }
#post-drawer .cw-card > h3 { font: 400 22px/1.2 var(--serif); margin: 0 0 6px; }
#post-drawer .cw-card > dl.rows { margin: 0 0 10px; }
#post-drawer .post-text { margin: 0; overflow-wrap: anywhere; font: 400 17px/1.55 var(--serif); }
#post-drawer .checks { margin: 0; }
#post-drawer .actions { margin: 0; }
#post-drawer #pd-changes-form { max-width: none; }

/* Email: editor and preview side by side on wide screens. */
@media (min-width: 1180px) {
  .app #campaign-detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
  .app #campaign-detail > p { grid-column: 1 / -1; }
  /* The preview has the right column to itself, beside the form and the
     audience check, so it can stay in view without riding over either. */
  .app #campaign-detail > .card:nth-of-type(2) { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 16px; }
  .app #campaign-detail > .card:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  .app #campaign-detail .mail-previews { grid-template-columns: 1fr; }
  .app #campaign-detail .mail-frame.desktop { display: none; }
}
@media (max-width: 820px) { .app .mail-frame.desktop { display: none; } }

/* Events: seats bars, and a guest list that works on phones. */
.app #events-rows .meter-bar { width: min(100%, 320px); margin-top: 8px; }
.app #event-detail .meter { margin: 10px 0 6px; max-width: 420px; }
.app .guest-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); }
.app .guest { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.app .guest:first-child { border-top: 0; }
.app .guest:hover { background: var(--surface-2); }
.app .guest .g-name { min-width: 0; overflow-wrap: anywhere; }
.app .guest .g-when { margin: 0; font-family: var(--mono); }
.app .guest .g-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; }
.app .guest.r-cancelled { color: var(--faint); }
.app .guest-list > .guest-none { margin: 0; padding: 16px; }
.app #ed-add { align-items: end; }

/* Forms: answers wrap by word; the preview stays beside the editor. */
.app dl.answers { min-width: min(18rem, 70vw); }
.app dl.answers dd { overflow-wrap: break-word; }
.app .style-grid { grid-template-columns: minmax(0, 1fr); }
.app .fd-grid > .style-preview { margin: 0 0 16px; }
@media (min-width: 1100px) {
  .app .fd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 0 16px; align-items: start; }
  .app .fd-grid > .card { grid-column: 1; }
  .app .fd-grid > .style-preview { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 16px; }
}
.app .share-box label { margin-bottom: 0; }
.app .row-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.app .row-side .num { font-size: var(--text-min); color: var(--muted); }
.app .badge.s-consent::before { background: var(--ok); }
/* Save bars: as the last thing in a card, the bar sits flush with the card's
   foot. A bar outside a card (Funnels) keeps the plain rounded bar, so it never
   overhangs the column or rides over the next card. */
.app .card > .save-bar:last-child { position: sticky; bottom: 0; z-index: 2; margin: 16px -22px -22px; padding: 12px 22px; background: var(--surface); border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); }

/* Builders: round icon buttons for Up, Down and Remove. */
.app .icon-btn { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--hair); color: var(--muted); }
.app .icon-btn svg, .app .add-step svg, .app .palette svg, .app .step-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app .icon-btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); transform: none; box-shadow: none; }
.app .icon-btn.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.app .field-tools button:disabled { visibility: hidden; cursor: default; }
.app .field-row .field-tools { justify-content: flex-end; }

/* Automations: list as cards, with a one-line flow. */
.app #auto-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 16px 0 0; }
.app #auto-rows > li { margin-inline: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 16px 18px; border: 1px solid var(--hair); border-top: 1px solid var(--hair); background: var(--surface); box-shadow: var(--shadow-sm); }
.app #auto-rows li > .badge { order: -1; }
.app #auto-rows > li:hover { border-color: var(--ink); background: var(--surface); }
.app .auto-sum { font: 400 var(--text-min)/1.5 var(--mono); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app .mono-lead { margin-top: 6px; font: 400 var(--text-min)/1.6 var(--mono); }

/* Automation header switch. */
.app .switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 16px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.app .switch .sw { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--line); transition: background-color .2s; }
.app .switch .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform .2s; }
.app .switch[aria-checked='true'] .sw { background: var(--fill); }
.app .switch[aria-checked='true'] .sw::after { transform: translateX(18px); }
.app .switch:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--ink); }
.app .switch[hidden] { display: none; }

/* Automation step canvas. */
.app .step-fields { display: flex; flex-wrap: wrap; gap: 0 14px; }
.app .step-fields > label { flex: 1 1 220px; min-width: 0; }
.app .step-fields > .wide { flex: 1 0 100%; }
.app #ad-canvas { margin: 12px -22px 0; padding: 28px 22px 32px; border-block: 1px solid var(--hair); background-color: var(--surface-2); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px; }
.app #ad-canvas > *, .app #ad-steps > .step-flow { max-width: 640px; margin-inline: auto; }
.app #ad-steps .step-list { gap: 0; margin: 0; }
.app .step-card { box-shadow: var(--shadow); }
.app .step-card.st-trigger { border-color: var(--fill); border-left-width: 1px; box-shadow: inset 0 0 0 1px var(--fill), var(--shadow); }
.app .step-head { flex-wrap: nowrap; }
.app .step-ic { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--warm); color: var(--accent); border: 1px solid var(--line); }
.app .step-words { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.app .step-words small { font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.app .step-words strong { font: 400 19px/1.3 var(--serif); overflow-wrap: anywhere; }
.app .add-wrap { display: flex; flex-direction: column; align-items: center; }
.app .add-wrap::before, .app .add-wrap::after { content: ''; width: 2px; height: 14px; background: var(--line); }
.app .add-wrap.stem::after { display: none; }
.app .add-gap { list-style: none; }
.app .add-step { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px dashed var(--faint); background: var(--surface); color: var(--muted); display: grid; place-items: center; }
.app .add-step:hover:not(:disabled), .app .add-step[aria-expanded='true'] { border-style: solid; border-color: var(--fill); color: var(--accent); transform: none; box-shadow: none; }
.app .palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: min(420px, 100%); margin-top: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); }
.app .palette[hidden] { display: none; }
.app .palette button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); font: 400 var(--text-min) var(--mono); }
.app .palette button:hover:not(:disabled) { background: var(--surface-2); transform: none; box-shadow: none; }
.app .branch .step-card { box-shadow: none; }
.app .branch .add-wrap::before, .app .branch .add-wrap::after { background: transparent; border-left: 2px dashed var(--line); width: 0; }
@media (min-width: 821px) {
  .app .step-card > .field-tools { position: absolute; top: 10px; right: 10px; margin: 0; }
  .app .step-card > .step-head { padding-right: 150px; }
}
@media (max-width: 820px) {
  .app dl.answers { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .app dl.answers dd { margin-bottom: 8px; }
  .app #form-detail th:nth-child(5), .app #fd-subs td:nth-child(5) { display: none; }
  .app .guest { grid-template-columns: minmax(0, 1fr) auto; }
  .app .guest :is(.g-when, .g-tools) { grid-column: 1 / -1; }
  .app .guest .g-tools { justify-content: flex-start; }
  .app .guest .g-tools > button:not(.link) { flex: 1 1 auto; }
  .app .field-list { grid-template-columns: minmax(0, 1fr) auto; }
  .app #ad-canvas { margin-inline: -16px; padding: 20px 12px 24px; }
  .app .save-bar { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .app .card > .save-bar:last-child { bottom: calc(64px + env(safe-area-inset-bottom)); margin: 16px -16px -16px; padding: 12px 16px; }
  .app .step-head { flex-wrap: wrap; }
}

/* ---------- Batch 6: Home, Companies, People, Audit and Media ---------- */
/* Home: the consent table gets right-aligned figures and a coverage bar. */
.app #overview .num { text-align: right; }
.app .meter-bar.inline { display: inline-block; width: 72px; height: 6px; margin-right: 8px; vertical-align: middle; }
.app #overview .meter-bar span { background: var(--ok); }
.app td.warn-n { color: var(--accent); font-weight: 600; }
.app #overview-cards .hint { display: block; margin-bottom: 6px; }
/* Getting started reads as a numbered checklist. */
.app #steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.app #steps li { counter-increment: step; display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; border-top: 1px dashed var(--line); }
.app #steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--hair); font: 500 var(--text-min)/1 var(--mono); color: var(--faint); }
.app #steps li.done { color: var(--faint); }
.app #steps li.done::before { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.app #steps a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.app a.call-name { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }

/* Companies: one card per company, each opening its own page. */
.app .co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-bottom: 16px; }
.app .co-card { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.app .co-card:hover { border-color: var(--ink); }
.app .co-card .toolbar { margin: 0; }
.app .co-card h2 { margin: 0; }
.app .co-card h2 a { color: inherit; text-decoration: none; }
.app .co-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.app .loc-chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.app .loc-chips button { min-height: 44px; padding: 0 14px; gap: 8px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font: 400 var(--text-min) var(--mono); box-shadow: none; }
.app .loc-chips button:hover { border-color: var(--ink); }
.app .loc-chips button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fill); }
.app .co-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--line); }
.app .co-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
.app .co-stats dd { margin: 0; font: 400 24px/1 var(--display); letter-spacing: .03em; overflow-wrap: anywhere; }
.app .co-stats dt { font: 400 var(--text-min)/1.4 var(--mono); color: var(--faint); }
.app .co-attn { margin: 0; font: 500 var(--text-min) var(--mono); color: var(--accent); }
.app .rollup-table tbody th > button.link { min-height: 44px; margin-block: -11px; padding: 0; font: inherit; color: var(--ink); text-decoration-color: var(--hair); }
.app .rollup-cards .wide-btn { width: 100%; margin-top: 10px; }

/* People and Audit on phones. */
.app .people-cards .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.app .people-cards .person-box { margin-bottom: 8px; }
.app .people-cards .person-box small { display: block; overflow-wrap: anywhere; }
.app .audit-cards li p { margin: 4px 0 0; }
.app .audit-cards li .caps { margin: 0 0 4px; }
.app #audit-rows td.cell-when { white-space: nowrap; font: 400 var(--text-min)/1.4 var(--mono); }
.app #audit-areas { margin: 12px 0; }
.app #audit-more { margin-top: 12px; }

/* Media: a quieter dropzone, even tiles, and a picture that opens the details. */
.app #media-drop { padding: 14px 18px; margin: 12px 0; }
.app .media-meta b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app .media-tile { transition: border-color .15s; }
.app .media-tile:hover { border-color: var(--ink); }
.app button.media-frame { border: 0; border-radius: 0; width: 100%; min-height: 0; padding: 0; background: var(--warm); box-shadow: none; transform: none; cursor: pointer; }
.app button.media-frame:hover { box-shadow: none; transform: none; }
.drawer-tools { display: flex; align-items: center; gap: 12px; flex: none; }

/* Add sections open in place under the heading, from the head button. */
.app details.card:is(#add-contact, #add-event, #add-site, #add-campaign, #add-automation, #add-form, #add-company, #add-call-list, #add-deal, #add-review, #dom-add, #invite-card):not([open]):not(.has-draft) { display: none; }
/* Folded with something typed in it: it stays on the page, marked, so nothing looks lost. */
.app details.card .draft-kept { display: none; margin-left: auto; }
.app details.card.has-draft:not([open]) .draft-kept { display: inline-flex; }

/* Phones: a back-to-agency chip beside the location select. */
.ctx-row { display: flex; align-items: center; gap: 8px; }
.ctx-row .ctx-pick { flex: 1; min-width: 0; }
.ctx-back { display: none; }
@media (max-width: 820px) {
  .app .ctx-back:not([hidden]) { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(238, 241, 245, .2); color: var(--side-hi); flex: none; }
  .app .ctx-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .app .ctx-row .ctx-pick select { width: 100%; }
  .app .rollup-cards:not(.people-cards):not(.audit-cards):not(#overview-cards) dl.rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .app .rollup-cards:not(.people-cards):not(.audit-cards):not(#overview-cards) dl.rows div { flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: 0; border: 0; }
  .app .rollup-cards:not(.people-cards):not(.audit-cards):not(#overview-cards) dl.rows dd { text-align: left; font: 400 22px/1.1 var(--display); letter-spacing: .03em; }
  .app .rollup-cards:not(.people-cards):not(.audit-cards):not(#overview-cards) dl.rows dt { font: 400 var(--text-min)/1.3 var(--mono); }
  .app #media-upload { width: 100%; }
}

/* Batch 7: Profile, search, sign-in screens, phone Contacts, Calls. */

/* Profile: page head like every other pane, section pills, fields at a readable width. */
.app .profile-jump { margin: 0 0 20px; }
.app .profile-jump .chip { min-height: 44px; }
.app #pane-profile > .card { scroll-margin-top: 16px; }
.app #pane-profile > .card > h2, .app #pane-profile > details.card > summary { font: 400 24px/1.2 var(--serif); }
.app #profile-form, .app #change-password-form, .app #undo-window-form { max-width: 560px; }
.app #sessions-rows .more-row td { text-align: center; }
@media (max-width: 820px) {
  .app .profile-jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .app .profile-jump .chip { flex: none; }
}

/* Search drawer: a lead mark per row, the first result reads as the Enter target. */
.cmd-list .cmd-av { width: 36px; height: 36px; border-width: 1px; }
.cmd-list .cmd-av svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cmd-list button { justify-content: flex-start; }
.cmd-list .cmd-main { flex: 1 1 auto; }
.cmd-list li:first-child button { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.cmd-list li.empty { margin-top: 8px; }

/* Signed-out screens: heading on the page, form in a white card, full-width buttons. */
main > .auth.card { background: transparent; border: 0; box-shadow: none; padding: 0; margin-inline: auto; }
main:has(> .auth:not([hidden])) { margin-inline: auto; }
.auth > .caps { margin: 0 0 6px; }
.auth > h1 { margin: 0 0 12px; }
.auth > .hint { margin: 12px 0 0; }
.auth > form { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); margin-top: 16px; }
.auth > form button[type=submit] { width: 100%; }
.auth .actions { display: grid; gap: 8px; justify-items: center; }

/* Calls: avatars and whole-row links on the queue and the list cards. */
.app .call-item { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; }
.app .call-item > .av { flex: none; }
.app .call-item :is(button, a:not(.row-link)) { position: relative; z-index: 1; }
.app .call-list { position: relative; transition: border-color .15s; }
.app .call-list:hover { border-color: var(--line); }
.app a.cl-name.row-link { text-decoration: none; }

@media (max-width: 820px) {
  /* Phone Contacts: compact head so the first card shows on the first screen. */
  .app #contact-list > .pane-head .lead { display: none; }
  .app #contact-list > .pane-head .head-tools { display: none; }
  .app #contact-list > .pane-head h1 { font-size: 34px; }
  .app #contacts-ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0; }
  .app #contacts-ledger > div { padding: 8px 6px; border-top: 0; }
  .app #contacts-ledger > div:first-child { padding-left: 0; }
  .app #contacts-ledger > div + div { border-left: 1px solid var(--line); }
  .app #contacts-ledger dd { font-size: 20px; }
  .app #contacts-ledger dt { font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 1.25; }
}

/* A draft kept on this device was put back into the form. */
.draft-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--warm); font-size: 0.9rem; }
.draft-note .link { min-height: 0; padding: 0; }
/* Pipeline settings and filters (stages, reasons, card fields). */
.pipe-filters { margin: 0 0 14px; }
.pipe-filters .hint { margin: 0; flex-basis: 100%; }
details form.pipe-settings { display: grid; gap: 18px; max-width: 760px; }
.pipe-settings fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0; min-width: 0; }
.pipe-settings legend { padding: 0 6px; font: 500 15px var(--ui); }
.stage-rows { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.stage-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) auto; gap: 8px; align-items: center; }
.stage-row input, .stage-row select { margin: 0; width: 100%; min-width: 0; }
.stage-tools { display: flex; gap: 6px; }
.stage-tools button { min-width: 44px; }
.stage-row.removed > input, .stage-row.removed > select { opacity: .5; text-decoration: line-through; }
.stage-move { grid-column: 1 / -1; }
.card-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 14px; }
.card-fields legend { grid-column: 1 / -1; }
.app .deal .meta.line > span:last-child { white-space: normal; text-align: left; flex: 1 1 100%; }
.deal-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.deal .deal-tags .badge { padding: 2px 8px; flex: none; }
@media (max-width: 640px) {
  .stage-row { grid-template-columns: minmax(0, 1fr) minmax(0, 7rem); }
  .stage-tools { grid-column: 1 / -1; }
}

/* Closing a deal, archiving and why deals close. */
.deal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.deal-foot select { flex: 1 1 100%; min-width: 0; }
.deal-foot .deal-archive { flex: none; min-height: 44px; margin-left: auto; }
.deal-why { display: grid; gap: 8px; margin: 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.deal-why label { margin: 0; }
.deal-why .actions { flex-wrap: wrap; }
.pipe-tidy { margin: 0 0 14px; justify-content: flex-start; }
.pipe-tidy .hint { margin: 0; flex-basis: 100%; }
.archived-deals { list-style: none; padding: 0; margin: 0; }
.archived-deals li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.archived-deals li .hint { flex: 1 1 16rem; margin: 0; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 18px; }
.why-side h3 { margin: 0 0 8px; }
.why-row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 2.5rem; gap: 10px; align-items: center; padding: 4px 0; font-size: 14px; }
.why-bar { height: 10px; border-radius: 999px; background: var(--surface-2); position: relative; overflow: hidden; }
.why-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--fill); border-radius: inherit; }
.why-row b { text-align: right; font-variant-numeric: tabular-nums; }
/* Demo mode (src/demo/routes.ts): real people and businesses blur on the
   admin's own screen; sample records carry a SAMPLE pill. */
.demo-on .demo-blur, .demo-on .demo-blur-field, .demo-on .av.demo-real { filter: blur(max(6px, .4em)); user-select: none; }
.demo-on .demo-blur { display: inline-block; }
.demo-on .av.demo-real img { visibility: hidden; }
.demo-flag { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--accent); background: var(--warm); color: var(--accent); font: 500 var(--text-min) var(--mono); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.demo-flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* Uppercase even where table and card badges switch it off. */
.badge.sample-pill, .app td .badge.sample-pill, .app .contact-card .badge.sample-pill { border-color: var(--accent); color: var(--accent); background: transparent; padding: 1px 8px; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
#demo-form fieldset { border: 0; padding: 0; margin: 0 0 12px; }
#demo-form legend { font-weight: 600; margin-bottom: 4px; }

/* View as (src/auth/view-as.ts): a banner that stays in sight while an agency
   admin sees the CRM as someone else. */
.viewas-banner { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; border-left-color: var(--accent); background: var(--warm); font-weight: 500; }
.viewas-banner button { min-height: 44px; }