/* DC Admin — same look as aeroy.co.uk: forest #01453a, amber #ffa300, Schibsted
   Grotesk. Light is :root, dark is :root[data-theme="dark"] (set by theme.js). */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/SchibstedGrotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f1f3f2;
  --surface: #ffffff;
  --surface-2: #f6f8f7;
  --ink: #13201c;
  --muted: #5a615e;
  --line: #e4e9e7;
  --brand: #01453a;          /* Aeroy teal */
  --brand-deep: #013a31;
  --brand-ink: #ffffff;
  /* Brand as text, icon, fill or stroke on a surface. --brand itself is for backgrounds. */
  --brand-text: #01453a;
  --accent: #ffa300;         /* Aeroy orange */
  --accent-ink: #8a5a00;
  --accent-soft: #fff1d6;
  /* "Good / active" tints, in the brand teal. */
  --lime-soft: #e3f1ea;
  --lime-ink: #01453a;
  --sage: #7fb3a4;
  --stone: #d3dcd9;
  --red: #a3302c;
  --red-soft: #fde8e7;
  /* Milestone diamond: a darker amber, 3:1 on the card surface. */
  --ms: #b06d00;
  --amber: #8a5a00;
  --amber-soft: #fcf0d9;
  --info: #3c5bb5;
  --info-soft: #e9edfa;
  --on-accent: #1c2321;
  --radius: 22px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: none;
  --shadow-pop: 0 14px 30px rgba(16, 24, 22, .16), 0 2px 6px rgba(16, 24, 22, .08);
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Chart series, in brand hues. Validated for lightness, chroma, colour-blind separation and contrast. */
  --series-in: #00876a;
  --series-out: #c98500;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0d1714;
  --surface: #14221e;
  --surface-2: #1a2b26;
  --ink: #eaf1ee;
  --muted: #9aa9a4;
  --line: #22342f;
  --brand: #0b5a4c;
  --brand-deep: #01453a;
  --accent: #ffa300;
  --accent-ink: #ffd699;
  --accent-soft: #3a2a0c;
  --lime-soft: #173a32;
  --lime-ink: #9fe0cb;
  --brand-text: #9fe0cb;
  --sage: #4f8f7e;
  --stone: #2d403b;
  --red: #ff9d97;
  --red-soft: #3a1c1b;
  --ms: #ffb733;
  --amber: #f0b85a;
  --amber-soft: #352914;
  --info: #9fb3ff;
  --info-soft: #1d2440;
  --shadow: none;
  --shadow-pop: 0 14px 30px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  /* Dark steps chosen and validated separately against the dark surface. */
  --series-in: #009070;
  --series-out: #bf8514;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.muted { color: var(--muted); }
code { font-size: 12px; }
small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.ic { width: 20px; height: 20px; flex: none; }
.ic.xs { width: 14px; height: 14px; vertical-align: -2px; }

h1, h2, h3, .hero-value, .tile strong, .client-hero h2, .donut-centre strong { font-family: var(--font-head); letter-spacing: -.02em; }

/* ---- Shell ---------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.side {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  margin: 12px 0 12px 12px; padding: 18px 12px;
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 12px; height: calc(100vh - 24px);
}
.logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 6px 10px;
}
.logo img { display: block; width: 92px; height: auto; }
.logo .logo-dark, :root[data-theme="dark"] .logo .logo-light { display: none; }
:root[data-theme="dark"] .logo .logo-dark { display: block; }
.logo span {
  font-size: 11px; font-weight: 600; margin-left: auto; padding: 2px 9px;
  border-radius: var(--radius-pill); background: var(--lime-soft); color: var(--lime-ink);
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a, .side-nav .soon {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; color: var(--muted);
}
.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
.side-nav a[aria-current] { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.side-nav .soon { color: var(--muted); cursor: default; }
.side-nav .soon em {
  margin-left: auto; font-style: normal; font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
}
.side-card {
  margin-top: auto; background: var(--brand); color: var(--brand-ink);
  border-radius: 18px; padding: 16px; position: relative; overflow: hidden;
}
.side-card-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.12); color: var(--accent); margin-bottom: 10px;
}
.side-card p { margin: 0 0 12px; font-size: 12px; line-height: 1.5; opacity: .9; }
.side-card b { font-size: 13px; opacity: 1; }
.progress svg { display: block; width: 100%; height: 6px; }
.progress .track { fill: rgba(255,255,255,.15); }
.progress .fill { fill: var(--accent); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 16px 28px; background: var(--bg);
  position: sticky; top: 0; z-index: 2;
}
.topbar h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.theme-switch {
  display: flex; flex: none; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.theme-switch button {
  display: grid; place-items: center; width: 32px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); cursor: pointer;
}
.theme-switch button:hover { background: none; color: var(--ink); }
.theme-switch button[aria-pressed="true"]:hover { background: var(--brand); color: var(--brand-ink); }
.theme-switch button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
.theme-switch .ic { width: 16px; height: 16px; }
.search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 14px; width: min(320px, 40vw); color: var(--muted);
}
.search .ic { width: 16px; height: 16px; }
.search input { border: 0; background: none; padding: 9px 0; outline: none; width: 100%; }
.me { display: flex; align-items: center; gap: 10px; }
.topbar .search + .me { margin-left: 4px; }
.topbar h1 + .me { margin-left: auto; }
.me-text b { display: block; font-size: 13px; }
.me-text small { font-size: 11px; }

.avatar {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--lime-soft); color: var(--lime-ink); font-weight: 700; font-size: 13px;
}
.avatar.sm { width: 32px; height: 32px; font-size: 11px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; background: var(--brand); color: var(--accent); }

main { padding: 4px 28px 28px; }
.foot { padding: 16px 28px 24px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); margin: 0 28px; padding-left: 0; }

/* ---- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { margin: 0; font-size: 16px; font-weight: 700; }

.board { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.col-main, .col-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* KPI row */
.kpis { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 14px; }
.hero {
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden;
}
.hero-mark {
  position: absolute; right: 16px; top: 16px; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.1); color: var(--accent);
}
.hero-label { font-size: 12px; opacity: .8; padding-right: 44px; }
.hero-value { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.hero-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: auto; padding-top: 10px; font-weight: 700; }
.hero-foot small { color: inherit; opacity: .7; font-size: 11px; }
.hero-foot a { color: inherit; text-decoration: none; border-radius: 4px; }
.hero-foot a:hover small, .hero-foot a:focus-visible small { text-decoration: underline; opacity: 1; }
.hero-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow);
}
.tile-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.badge {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--brand-text); background: var(--surface-2);
}
:root[data-theme="dark"] .badge { color: var(--accent); }
.tile strong { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.tile .label { color: var(--muted); font-size: 12px; }

.chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.chip.good { background: var(--lime-soft); color: var(--lime-ink); }
.chip.warn { background: var(--amber-soft); color: var(--amber); }
.chip.bad { background: var(--red-soft); color: var(--red); }

/* Segmented filter */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg a { padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 13px; color: var(--muted); }
.seg a span { margin-left: 6px; font-size: 11px; opacity: .8; }
.seg a[aria-current] { background: var(--brand); color: var(--brand-ink); }
.filter-note { margin: -4px 0 12px; color: var(--muted); font-size: 13px; }

/* Client table */
.table-wrap { overflow-x: auto; margin: 0 -20px -18px; }
table.clients { width: 100%; border-collapse: collapse; }
.clients th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); padding: 10px 8px; border-block: 1px solid var(--line); white-space: nowrap;
}
.clients th:first-child, .clients td:first-child { padding-left: 20px; }
.clients th:last-child, .clients td:last-child { padding-right: 20px; }
.clients td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.clients tbody tr:last-child td { border-bottom: 0; }
.clients tbody tr { position: relative; }
.clients tbody tr:hover { background: var(--surface-2); }
.nowrap { white-space: nowrap; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.num small { font-weight: 500; }
.num small.per { display: inline; }
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.row-link { font-weight: 700; text-decoration: none; }
/* Whole row is clickable via the name link. */
.row-link::after { content: ""; position: absolute; inset: 0; }
.next-cell { min-width: 142px; max-width: 260px; }
.clients .flags, .clients .dot, .clients .pill { position: relative; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; background: var(--surface-2); color: var(--muted); }
.pill.pill-plain { text-transform: none; }
.status-active { background: var(--lime-soft); color: var(--lime-ink); }
.status-building { background: var(--info-soft); color: var(--info); }
.status-paused, .status-lead { background: var(--amber-soft); color: var(--amber); }
.status-lost, .status-ended { background: var(--red-soft); color: var(--red); }

.dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dot.up { color: var(--lime-ink); }
.dot.up::before { background: #5dbb3f; }
.dot.down { color: var(--red); }
.dot.unknown, .dot.none { color: var(--muted); }

.flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.flag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.flag.red { background: var(--red-soft); color: var(--red); }
.flag.amber { background: var(--amber-soft); color: var(--amber); }
.flag.info { background: var(--info-soft); color: var(--info); }
.flag.more { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.clients .flags { flex-wrap: nowrap; }
.flags.big { margin: 0 0 16px; gap: 6px; }
.flags.big .flag { font-size: 13px; padding: 5px 12px; }
.empty { color: var(--muted); margin: 0; }

/* Donut */
.donut { position: relative; width: 190px; margin: 4px auto 16px; }
.donut svg { display: block; width: 100%; transform: none; }
.donut circle { fill: none; stroke-width: 6.5; }
.arc-track { stroke: var(--surface-2); }
.a0 { stroke: var(--brand-text); background: var(--brand-text); }
.a1 { stroke: var(--accent); background: var(--accent); }
.a2 { stroke: var(--sage); background: var(--sage); }
.a3 { stroke: #4e7d63; background: #4e7d63; }
.a4 { stroke: var(--stone); background: var(--stone); }
.donut-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-centre strong { font-size: 22px; font-weight: 800; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.legend .key { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Activity */
.activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.activity li { display: flex; gap: 10px; font-size: 13px; line-height: 1.4; }
.activity a { font-weight: 700; text-decoration: none; }
.activity small { margin-top: 2px; font-size: 11px; }
/* The pipeline has no side column: five lanes get the full width and
   Recently closed sits under the kanban as a grid. */
.pipeline-board { grid-template-columns: minmax(0, 1fr); }
.activity.closed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px 18px; }
.closed-grid li { align-items: flex-start; }
.closed-grid li > span:nth-child(2) { flex: 1; min-width: 0; }
.closed-del { margin: 0; flex: none; }
.closed-del button.secondary { padding: 4px 10px; font-size: 12px; }
.closed-del button.secondary:hover { background: var(--red-soft, #fde8e8); color: var(--red); }

/* ---- Client detail -------------------------------------------------------- */
.crumb { margin: 0 0 12px; }
.crumb a { text-decoration: none; color: var(--muted); font-weight: 600; }
.client-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px;
}
.client-hero h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.client-hero p { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.client-hero p a { color: var(--muted); text-decoration: none; font-weight: 600; }
.client-hero-stats { margin-left: auto; display: flex; gap: 12px; }
.client-hero-stats span {
  background: var(--brand); color: var(--brand-ink); border-radius: 14px; padding: 10px 16px;
  font-weight: 800; font-size: 18px; min-width: 120px;
}
.client-hero-stats small { color: inherit; opacity: .7; font-size: 11px; }

.detail { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
.detail label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { outline-color: var(--lime-ink); border-color: var(--lime-ink); }
button {
  font: inherit; font-weight: 700; background: var(--brand); color: var(--brand-ink);
  border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer;
}
button:hover { background: var(--brand-deep); }
dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font-size: 13px; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
dd a { color: var(--brand-text); }
:root[data-theme="dark"] dd a { color: var(--accent); }
.notice { padding: 10px 14px; border-radius: 12px; margin: 0 0 14px; font-weight: 600; }
.notice.ok { background: var(--lime-soft); color: var(--lime-ink); }
.notice.err { background: var(--red-soft); color: var(--red); }
.notice.warn { background: var(--amber-soft); color: var(--amber); }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.url-field form { margin: 0; }

/* ---- Pipeline ------------------------------------------------------------- */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lane { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-width: 0; }
.lane-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lane-head h3 { margin: 0; font-size: 13px; font-weight: 700; }
.lane-head small { width: 100%; margin-left: 16px; }
.lane-count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.lane-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; margin-top: 6px; }
.lane-head .lane-dot { margin-top: 0; }
.lane-empty { margin: 4px 0; color: var(--muted); font-size: 12px; }
.stage-new.lane-dot { background: var(--stone); }
.stage-draft.lane-dot { background: var(--info); }
.stage-contacted.lane-dot { background: var(--sage); }
.stage-call.lane-dot { background: var(--accent); }
.stage-proposal.lane-dot { background: var(--brand); }
.stage-won.lane-dot { background: #5dbb3f; }
.stage-lost.lane-dot { background: var(--red); }

.deals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.deal { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.deal:hover { border-color: var(--sage); }
.deal-link { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; text-decoration: none; }
.deal-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.deal-top b { display: block; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.deal-top small { font-size: 11px; }
.deal-top > span:last-child { min-width: 0; }
.deal-value { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.deal-value small.per { display: inline; }
.deal-next { font-size: 12px; }
.deal-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 11px; }

.pill.stage-pill { text-transform: none; }
.stage-pill.stage-new { background: var(--surface-2); color: var(--muted); }
.stage-pill.stage-draft { background: var(--accent-soft); color: var(--accent-ink); }
.stage-pill.stage-contacted, .stage-pill.stage-call { background: var(--info-soft); color: var(--info); }
.stage-pill.stage-proposal { background: var(--amber-soft); color: var(--amber); }
.stage-pill.stage-won { background: var(--lime-soft); color: var(--lime-ink); }
.stage-pill.stage-lost { background: var(--red-soft); color: var(--red); }
.muted-av { background: var(--surface-2); color: var(--muted); }

.progress.light { margin-top: 8px; }
.progress.light .track { fill: var(--surface-2); }
.progress.light .fill { fill: var(--brand-text); }
:root[data-theme="dark"] .progress.light .fill { fill: var(--accent); }

.stack { display: flex; flex-direction: column; }
.stack label, .stack-col label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.stack .grid2 { gap: 0 10px; }
.hint { font-weight: 400; }
.stack-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.link-btn { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--brand-text); }
:root[data-theme="dark"] .link-btn { color: var(--accent); }

.stepper-card { margin-bottom: 16px; }
.stepper { display: flex; flex-wrap: wrap; gap: 6px; }
.step {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  padding: 8px 14px; font-size: 13px; font-weight: 600;
}
.step:hover { background: var(--lime-soft); color: var(--lime-ink); }
.step.current { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); cursor: default; }
.step.stage-won:not(.current) { margin-left: auto; }
.step.stage-won.current { background: var(--series-in); border-color: var(--series-in); }
.step.stage-lost.current { background: var(--red); border-color: var(--red); }
.hint-line { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ---- Money ---------------------------------------------------------------- */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .baseline { stroke: var(--stone); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .bar.in { fill: var(--series-in); }
.chart .bar.out { fill: var(--series-out); }
.chart .hit { fill: transparent; }
.chart .month:hover .hit { fill: var(--surface-2); }
.chart-legend { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; font-size: 12px; color: var(--muted); }
.chart-legend li { display: flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; }
.swatch.in { background: var(--series-in); }
.swatch.out { background: var(--series-out); }
.chart-empty { padding: 40px 0; text-align: center; }

.data-table { margin-top: 10px; }
.data-table summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.table-wrap.tight { margin: 10px 0 0; }
table.plain { width: 100%; border-collapse: collapse; font-size: 13px; }
.plain th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.plain td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.neg { color: var(--red); }
.num.pos { color: var(--lime-ink); }

.issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.issues li { padding: 8px 10px 8px 12px; border-radius: 10px; border-left: 3px solid; }
.issues li.red { background: var(--red-soft); border-color: var(--red); }
.issues li.amber { background: var(--amber-soft); border-color: var(--amber); }
.issues a { color: inherit; }

.steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.sync-line { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
button.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); padding: 8px 16px; }
button.secondary:hover { background: var(--lime-soft); color: var(--lime-ink); }
.upload { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.upload label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); width: 100%; }
.upload input[type=file] { padding: 8px; font-size: 13px; }
.costs li { gap: 10px; }
.costs .legend-name { white-space: normal; }
.costs small { font-size: 11px; }

/* ---- Sites ---------------------------------------------------------------- */
small.inline { display: inline; margin-left: 4px; }
label.check { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--ink) !important; font-size: 14px !important; }
label.check input { width: auto; }
.sites-table td { white-space: nowrap; }
.sites-table .flags { max-width: 190px; }
.sites-table .flag:first-child { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.sites-table .who-td { white-space: normal; }
.neg.muted, span.neg { color: var(--red); }

/* ---- Today ---------------------------------------------------------------- */
.tile-link { text-decoration: none; color: inherit; }
.tile-link:hover { border-color: var(--sage); }
.agenda { list-style: none; margin: 0 -20px -18px; padding: 0; }
.agenda-item a {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  border-top: 1px solid var(--line); text-decoration: none; color: inherit;
}
.agenda-item a:hover { background: var(--surface-2); }
.agenda-icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.agenda-item.red .agenda-icon { background: var(--red-soft); color: var(--red); border-color: transparent; }
.agenda-item.amber .agenda-icon { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.agenda-icon .ic { width: 17px; height: 17px; }
.agenda-text { flex: 1; min-width: 0; }
.agenda-text b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.agenda-text small { overflow-wrap: anywhere; }
.date-badge {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px;
  background: var(--lime-soft); color: var(--lime-ink); line-height: 1;
}
.date-badge b { font-size: 14px; }
.date-badge small { color: inherit; font-size: 10px; margin-top: 1px; }
.fresh { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.fresh li { display: flex; justify-content: space-between; gap: 12px; }
.fresh a { text-decoration: none; font-weight: 600; }

/* ---- Ventures ------------------------------------------------------------- */
.gate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; margin: 0 0 16px; font-size: 13px; }
.gate.ok { background: var(--lime-soft); color: var(--lime-ink); }
.gate.warn { background: var(--amber-soft); color: var(--amber); }
.gate a { font-weight: 700; }
.kpis.four { grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
.venture-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.venture { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.venture:hover { border-color: var(--sage); }
.venture-link { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; text-decoration: none; color: inherit; height: 100%; }
.venture-top { display: flex; align-items: flex-start; gap: 10px; }
.venture-top > span:nth-child(2) { flex: 1; min-width: 0; }
.venture-top b { display: block; font-size: 15px; }
.venture-facts { grid-template-columns: 44px 1fr; gap: 6px 10px; font-size: 13px; }
.venture-facts dd { font-weight: 500; }
.pill.venture-live { background: var(--lime-soft); color: var(--lime-ink); }
.pill.venture-building { background: var(--info-soft); color: var(--info); }
.pill.venture-paused { background: var(--amber-soft); color: var(--amber); }
.pill.venture-retired { background: var(--surface-2); color: var(--muted); }

/* ---- Pipeline drag and drop --------------------------------------------- */
.deal[draggable="true"] { cursor: grab; }
.deal.dragging { opacity: .45; }
.lane.drag-over { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--lime-soft); }
:root[data-theme="dark"] .lane.drag-over { outline-color: var(--lime-ink); }
.lane .deals:empty + .lane-empty { display: block; }
.closers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.closer {
  border: 2px dashed var(--line); border-radius: 14px; padding: 12px 14px; text-align: center; color: var(--muted);
  transition: background .12s, border-color .12s;
}
.closer b { display: block; font-family: var(--font-head); color: var(--ink); }
.closer small { font-size: 12px; }
.closer.won.drag-over { border-color: var(--brand); background: var(--lime-soft); }
.closer.lost.drag-over { border-color: var(--red); background: var(--red-soft); }
.drag-status { margin: 10px 0 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }
.drag-status.error { color: var(--red); }
@media (hover: none) { .closers { display: none; } }

/* ---- Tickets -------------------------------------------------------------- */
.tickets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ticket + .ticket { border-top: 1px solid var(--line); }
.ticket-link { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 6px; text-decoration: none; color: inherit; border-radius: var(--radius-sm); }
.ticket-link:hover { background: var(--surface-2); }
.ticket-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ticket-ref { font-weight: 700; font-size: 12px; color: var(--brand-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ticket-ref.big { font-size: .75em; margin-right: 6px; color: var(--muted); }
.ticket-main b { display: block; font-size: 14px; }
.ticket-main small { color: var(--muted); font-size: 12px; }
.ticket-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill.tstat { text-transform: none; }
.tstat-new { background: var(--accent-soft); color: var(--accent-ink); }
.tstat-in_progress { background: var(--info-soft); color: var(--info); }
.tstat-waiting { background: var(--amber-soft); color: var(--amber); }
.tstat-done { background: var(--lime-soft); color: var(--lime-ink); }
.step.tstep-done:not(.current) { margin-left: auto; }
.step.tstep-done.current { background: var(--series-in); border-color: var(--series-in); }
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.note { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.note-aeroy { background: var(--lime-soft); border-color: transparent; }
.note.private { background: transparent; border-style: dashed; }
.note-system { background: transparent; border: 0; padding: 2px 14px; }
.note-head { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.note-head small { margin-left: auto; color: var(--muted); }
.note p { margin: 6px 0 0; white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.note-sys { font-size: 12px; color: var(--muted); }
.small-text { font-size: 13px; margin: 0 0 12px; }
.block { display: block; margin-top: 2px; }
@media (max-width: 640px) { .ticket-link { grid-template-columns: 1fr; gap: 6px; } .ticket-tags { justify-content: flex-start; } }

/* ---- Client project link ------------------------------------------------ */
a.button {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; text-decoration: none;
  background: var(--brand); color: var(--brand-ink); border-radius: 999px; padding: 9px 18px; white-space: nowrap;
}
a.button:hover { background: var(--brand-deep); }
a.button.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
a.button.secondary:hover { background: var(--lime-soft); color: var(--lime-ink); }
.client-hero .project-open { margin-top: 10px; font-size: 13px; padding: 7px 14px; }
.detail label.field-label { margin-bottom: 6px; }
.url-field { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.url-field input { flex: 1; min-width: 0; }

/* ---- Leads ---------------------------------------------------------------- */
.kpis.three { grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; }
td.lead-actions { min-width: 132px; white-space: nowrap; }
/* The cell stays a table cell (so row lines meet); the stack of actions sits in a box inside it. */
.lead-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.start-menu > summary.button.secondary {
  display: inline-flex; align-items: center; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; font-weight: 600; text-decoration: none;
}
.start-menu > summary.button.secondary:hover, .start-menu[open] > summary.button.secondary { background: var(--lime-soft); color: var(--lime-ink); }
.start-menu > summary:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.lead-actions form { margin: 0; }
.lead-actions button.secondary { padding: 6px 14px; font-size: 13px; }
button.link-button {
  background: none; border: 0; padding: 0; color: var(--muted); font-size: 12px; font-weight: 600;
  text-decoration: underline; cursor: pointer; border-radius: 4px;
}
button.link-button:hover { color: var(--ink); background: none; }
table.leads td[data-label="Contact"] a { color: var(--ink); }
table.leads small.why { display: block; color: var(--warn-ink, var(--muted)); font-style: italic; }

/* ---- UX pass, 25 Sep 2026 ------------------------------------------------- */
/* Boards with no side column: the page gets the full width. */
.board.wide { grid-template-columns: minmax(0, 1fr); }
/* Clients: the table takes the full width, the side cards sit in a row under it. */
.board.stacked { grid-template-columns: minmax(0, 1fr); }
.board.stacked .col-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.board.stacked .health-why { max-width: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar: data age pill and the ⌘K button. */
.fresh-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-decoration: none;
  padding: 6px 12px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); white-space: nowrap;
}
.fresh-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fresh-pill[hidden] { display: none; }
button.jump {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px 8px 14px; font-weight: 600; font-size: 13px;
}
button.jump:hover { background: var(--surface-2); color: var(--ink); }
button.jump, .fresh-pill { flex: none; white-space: nowrap; }
.top-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
}
.top-icon:hover, .top-icon:focus-visible { background: var(--surface-2); color: var(--ink); }
.top-icon[aria-current] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.top-icon .ic { width: 18px; height: 18px; }
.topbar .search { min-width: 160px; flex: 1 1 180px; width: auto; max-width: 320px; }
/* With a page search in the bar, Jump to shrinks to its icon so tabs, search and the controls share one row. */
.topbar .search ~ .jump span, .topbar .search ~ .jump kbd { display: none; }
.topbar .search ~ .jump { padding: 8px; }
.topbar .crm-head ~ .search { max-width: 260px; }
button.jump .ic { width: 16px; height: 16px; }
button.jump kbd { font: inherit; font-size: 11px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 6px; padding: 1px 6px; }
.topbar h1 { margin-right: auto; }

/* CRM: Leads, Pipeline and Clients as tabs beside the heading. */
.crm-head { display: flex; align-items: center; gap: 18px; margin-right: auto; flex-wrap: wrap; min-width: 0; }
.crm-head h1 { margin-right: 0; }
.crm-tabs { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.crm-tabs a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 14px; color: var(--muted);
}
.crm-tabs a:hover { color: var(--ink); background: var(--surface-2); }
.crm-tabs a[aria-current] { background: var(--brand); color: var(--brand-ink); }
.crm-tabs .ic { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .crm-head { width: 100%; gap: 10px; }
  .crm-tabs { flex: 1 1 100%; }
  .crm-tabs a { flex: 1; justify-content: center; padding: 7px 10px; }
  .crm-tabs .ic { display: none; }
}
/* Five tabs on a phone: tighter, and allowed to wrap onto a second line rather than scroll sideways. */
@media (max-width: 420px) {
  .crm-tabs { flex-wrap: wrap; border-radius: 18px; min-width: 0; }
  .crm-tabs a { flex: 1 1 auto; padding: 7px 8px; font-size: 13px; gap: 4px; }
}

.palette-scrim { position: fixed; inset: 0; z-index: 20; background: rgba(5, 20, 17, .45); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.palette-scrim[hidden] { display: none; }
.palette { width: min(600px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden; }
.palette input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); padding: 16px 18px; font-size: 16px; }
.palette input:focus { outline: none; }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 55vh); overflow-y: auto; }
.palette li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; cursor: pointer; }
.palette li[aria-selected="true"] { background: var(--lime-soft); color: var(--lime-ink); }
.palette-main { flex: 1; min-width: 0; }
.palette-main b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-main small { color: var(--muted); font-size: 12px; }
.palette-kind { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.palette-empty { color: var(--muted); cursor: default; }
.palette-hint { margin: 0; padding: 9px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* Today: next three weeks. */
.weeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.week { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.week h3 { margin: 0 0 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }
.week-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.week-list li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.week-list li:first-child { border-top: 0; }
.week-list a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.week-list small { display: block; }
.week-day { width: 52px; flex: none; font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; }
.week-list li.late .week-day { color: var(--red); }

/* Today: Needs you, grouped by what you'd do. */
.action-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.action-group { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; }
.action-group h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; font-size: 14px; background: var(--surface-2); }
.action-group h3 .chip { margin-left: auto; }
.action-group .agenda { margin: 0; }
.action-group .agenda-item { display: flex; align-items: center; border-top: 1px solid var(--line); }
.action-group .agenda-item a { flex: 1; min-width: 0; border-top: 0; padding: 10px 8px 10px 14px; }
.dismiss { display: flex; gap: 6px; padding-right: 12px; margin: 0; flex: none; }
.dismiss button { padding: 4px 10px; font-size: 12px; }
.head-action { margin: 0 0 0 auto; }

/* Pipeline: compact new leads, the fold, and days in stage. */
.deal.compact .deal-link { padding: 8px 10px; }
.lane-more summary { list-style: none; cursor: pointer; margin-top: 8px; text-align: center; font-size: 12px; font-weight: 700; padding: 7px; border-radius: 10px; border: 1px dashed var(--stone); color: var(--muted); }
.lane-more summary::-webkit-details-marker { display: none; }
.lane-more summary:hover { color: var(--ink); border-color: var(--sage); }
.lane-more[open] summary { margin-bottom: 8px; }
.stage-age { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }

/* Clients: inline next action and one health word. */
/* Sits above the row's stretched link so a click types instead of opening the client. */
.inline-next, form.row-action { position: relative; z-index: 1; margin: 0; }
/* The next action wraps over as many lines as it needs, so nothing is cut off. Enter saves (app.js). */
.inline-next textarea {
  display: block; width: 100%; min-height: 0; resize: none; overflow: hidden; field-sizing: content;
  padding: 6px 10px; font: inherit; font-size: 13px; line-height: 1.4; color: var(--ink);
  background: transparent; border: 1px dashed transparent; border-radius: 8px;
}
.inline-next textarea:placeholder-shown { border-color: var(--stone); }
.inline-next textarea:hover { border-color: var(--sage); background: var(--surface-2); }
.inline-next textarea:focus { background: var(--surface); border-style: solid; }
.inline-next:focus-within::after { content: "Enter to save"; display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.health { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.health-ok { background: var(--lime-soft); color: var(--lime-ink); }
.health-todo { background: var(--amber-soft); color: var(--amber); }
.health-overdue { background: var(--red-soft); color: var(--red); }
.health-why { display: block; margin-top: 3px; max-width: 280px; text-wrap: pretty; }

/* Sites: Broken, Renewing soon and Healthy. */
.site-group + .site-group { margin-top: 16px; }
.site-group summary { list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; padding: 6px 0 10px; }
.site-group summary::-webkit-details-marker { display: none; }
.site-group summary h3 { margin: 0; font-size: 14px; }
.site-group summary .lane-count { margin-left: 0; }
.site-group summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s; }
.site-group[open] summary::before { transform: rotate(90deg); }
form.row-action { display: block; margin-top: 2px; }

/* Leads and Tickets: the add form sits behind a button. */
.add-panel { padding: 14px 20px; }
.add-panel > summary { list-style: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; cursor: pointer; }
.add-panel > summary::-webkit-details-marker { display: none; }
.add-panel > summary .button {
  display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; background: var(--brand); color: var(--brand-ink);
  border-radius: 999px; padding: 9px 18px; white-space: nowrap;
}
.add-panel > summary:hover .button { background: var(--brand-deep); }
.add-panel[open] > summary { margin-bottom: 16px; }
.add-panel[open] > summary .button { background: var(--surface-2); color: var(--ink); }
.form-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; align-items: end; }
.form-wide .grid2 { grid-column: span 2; }
.form-wide .span-all { grid-column: 1 / -1; }
.form-wide button[type="submit"] { justify-self: start; grid-column: 1 / -1; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 16px; }
.empty-state h3 { margin: 0; font-size: 18px; }
.empty-state p { margin: 0; max-width: 46ch; color: var(--muted); }
.empty-state a { font-weight: 700; }
.empty-mark { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--lime-soft); color: var(--lime-ink); }
.empty-mark .ic { width: 28px; height: 28px; }
.support-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .weeks, .action-groups { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  button.jump span, button.jump kbd { display: none; }
  button.jump { padding: 8px; }
  .form-wide .grid2 { grid-column: 1 / -1; }
  .action-group .agenda-item { flex-wrap: wrap; }
  .dismiss { padding: 0 14px 10px; width: 100%; justify-content: flex-end; }
}

/* Back button, top left of every page but Today. */
.back-btn {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.back-btn:hover { background: var(--lime-soft); color: var(--lime-ink); border-color: var(--sage); }
.back-btn .ic { width: 18px; height: 18px; }
.dismiss form { margin: 0; }

/* ---- Projects and tasks (25 Sep 2026) -------------------------------------- */
.kanban.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tstatus-todo.lane-dot { background: var(--stone); }
.tstatus-doing.lane-dot { background: var(--accent); }
.tstatus-waiting.lane-dot { background: var(--info); }
.tstatus-done.lane-dot { background: #5dbb3f; }
.tstatus-pill.tstatus-doing { background: var(--accent-soft); color: var(--accent-ink); }
.tstatus-pill.tstatus-waiting { background: var(--info-soft); color: var(--info); }
.tstatus-pill.tstatus-done { background: var(--lime-soft); color: var(--lime-ink); }
.task-card .task-title { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.chip.plain { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

.quick-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.quick-add input[name="title"] { flex: 1 1 260px; }
.quick-add select, .quick-add input[type="date"] { flex: 0 1 auto; width: auto; }
.quick-add button { padding: 9px 20px; }
.card > .quick-add:only-child { margin: 0; }

.task-group + .task-group { margin-top: 18px; }
.task-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.task-group.bucket-overdue h3 { color: var(--red); }
.task-group h3 .lane-count { margin-left: 0; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task-line { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); }
.task-line:first-child { border-top: 0; }
.task-line.is-high .task-main b::after { content: "High"; margin-left: 8px; font-size: 10px; font-weight: 800; color: var(--red); background: var(--red-soft); padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.task-line.is-done .task-main b { text-decoration: line-through; color: var(--muted); }
.task-main { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.task-main b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.task-main small { color: var(--muted); }
.tick { margin: 0; flex: none; }
button.tick-box {
  width: 22px; height: 22px; padding: 0; border-radius: 7px; border: 2px solid var(--stone); background: var(--surface);
  color: var(--lime-ink); font-size: 13px; line-height: 1; display: grid; place-items: center;
}
button.tick-box:hover { border-color: var(--brand); background: var(--lime-soft); }
.is-done button.tick-box { background: var(--lime-soft); border-color: var(--sage); }

.project-kind + .project-kind { margin-top: 20px; }
.project-kind h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.project-kind h3 .lane-count { margin-left: 0; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.project-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; background: var(--surface); }
.project-card:hover { border-color: var(--sage); }
.project-top { display: flex; gap: 10px; align-items: flex-start; }
.project-top > span:nth-child(2) { flex: 1; min-width: 0; }
.project-top b { display: block; overflow-wrap: anywhere; }
.project-top small { color: var(--muted); }
.progress-line { display: flex; align-items: center; gap: 10px; }
.progress-line .bar { flex: 1; }
.progress-line svg { display: block; width: 100%; height: 6px; }
.progress-line .track { fill: var(--surface-2); }
.progress-line .fill { fill: var(--brand-text); }
.progress-line small { color: var(--muted); white-space: nowrap; }
.project-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.project-foot small { color: var(--muted); }
.project-foot b { color: var(--ink); font-weight: 600; }

label.check { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 13px; color: var(--ink) !important; }
label.check input { width: auto; }
.prewrap { white-space: pre-wrap; margin: 0; }
.danger-zone { margin: 16px 0 0; }
.button-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.button-row form { margin: 0; }

.inline-label { align-self: center; font-weight: 600; font-size: 13px; }
.quick-add input[type="number"] { width: 90px; flex: 0 0 90px; }
.quick-add > .muted { align-self: center; font-size: 13px; }
@media (max-width: 1240px) { .kanban.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .kanban.four { grid-template-columns: 1fr; }
  .quick-add select, .quick-add input[type="date"] { flex: 1 1 40%; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1240px) {
  .board { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .col-side { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1020px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-column: 1 / -1; }
  .kpis.four, .kpis.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  /* The chart's viewBox scales down roughly 2x on a phone; keep axis labels legible. */
  .chart .axis { font-size: 20px; }
  .chart .axis.month-label.alt { display: none; }
  .chart-legend { width: 100%; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis:not(.four) .tile:last-child { grid-column: 1 / -1; }
  .venture-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: sticky; top: 0; z-index: 3; height: auto; flex-direction: row; align-items: center;
    padding: 10px 16px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .logo span:last-child, .side-card, .side-nav .soon { display: none; }
  .logo { padding: 8px 10px; border-radius: 12px; }
  .logo img { width: 60px; }
  .side-nav { flex-direction: row; overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: none; }
  .side { min-width: 0; max-width: 100vw; }
  .side-nav a { padding: 8px 12px; }
  .topbar { position: static; padding: 14px 16px; flex-wrap: wrap; }
  /* Phone: the theme switch and Jump to stay on the first row, top right. */
  .topbar .theme-switch { order: 1; margin-left: auto; }
  .topbar .jump, .topbar .top-icon { order: 2; }
  .topbar .fresh-pill, .topbar .search { order: 3; }
  .topbar .search { flex-basis: 100%; max-width: none; }
  .search { order: 3; width: 100%; margin-left: 0; }
  .me-text { display: none; }
  .topbar h1 + .search + .me, .topbar h1 + .me { margin-left: auto; }
  main { padding: 0 16px 20px; }
  .foot { margin: 0 16px; }
  .col-side, .board.stacked .col-side, .detail, .grid2 { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .step.stage-won:not(.current) { margin-left: 0; }
  .client-hero-stats { margin-left: 0; width: 100%; }
  .client-hero-stats span { flex: 1; min-width: 0; }

  /* Table becomes stacked rows. */
  .table-wrap { overflow: visible; margin: 0; }
  .table-wrap.tight { overflow-x: auto; margin-top: 10px; }
  .clients thead { display: none; }
  .clients, .clients tbody, .clients tr, .clients td { display: block; width: 100%; }
  .clients tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .clients tbody tr:last-child { border-bottom: 0; }
  .clients td, .clients th:first-child, .clients td:first-child, .clients td:last-child { padding: 3px 0; border: 0; }
  .clients td[data-label] { display: flex; gap: 12px; align-items: baseline; text-align: left; }
  .clients td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; min-width: 56px; }
  .who-cell { min-width: 0; margin-bottom: 6px; }
  .next-cell { max-width: none; }
  .num { text-align: left; }
}

/* Proposal pack card: the lead's preview links as buttons */
.pack-links{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.pack-pw{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.pack-pw label{display:grid;gap:6px}
.pack-pw small{font-weight:400}
.pack-activity{margin:6px 0 10px}
.pack-activity summary{cursor:pointer;font-size:.9em}
.pack-activity ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px}
.pack-activity li{display:flex;justify-content:space-between;gap:10px;font-size:.9em}

/* Email marketing */
/* Section tabs shared by Campaigns, Audience, Automatic emails and Outbox. Same look as the CRM tabs. */
.mail-tabs { margin: 0 0 16px; flex-wrap: wrap; }
.mail-tabs a { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--muted); }
.mail-tabs.small { margin: 0; }
.mail-tabs.small a { padding: 5px 12px; font-size: 12px; }
.mail-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.mail-bar .mail-tabs { margin: 0; }
.mail-help { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 70ch; }
.mail-help + .mail-help { margin-top: 6px; }
.stack > .mail-help { margin: 0 0 12px; }

/* Lists of campaigns, templates and Outbox emails: one row each, status on the right. */
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-list > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.mail-list > li:first-child { border-top: 0; padding-top: 2px; }
.mail-list .mail-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mail-list .mail-row-main a { font-weight: 700; text-decoration: none; color: var(--ink); }
.mail-list .mail-row-main a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.mail-list small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.mail-list .pill, .mail-list form { flex: none; }
.mail-list button.secondary { padding: 6px 14px; font-size: 13px; }
.pill.plain-case { text-transform: none; white-space: nowrap; }
.pill.sub-subscribed { background: var(--lime-soft); color: var(--lime-ink); }
.pill.sub-pending { background: var(--amber-soft); color: var(--amber); }
.pill.sub-bounced, .pill.sub-complained { background: var(--red-soft); color: var(--red); }
.mail-new { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.mail-new .mail-new-row { display: flex; gap: 8px; align-items: stretch; }
.mail-new .mail-new-row input { flex: 1; min-width: 0; }
.mail-new .mail-new-row button { flex: none; }
.detail .mail-new label { margin-bottom: 8px; }

/* Audience: six small counts in one strip, not six hero tiles. */
.mail-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 0 18px; padding: 14px 4px; }
.mail-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; border-left: 1px solid var(--line); }
.mail-stats > div:first-child { border-left: 0; }
.mail-stats strong { font-family: var(--font-head); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mail-stats span { font-size: 12px; color: var(--muted); }
.mail-stats .quiet strong { color: var(--muted); }
.mail-search { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; }
.mail-search input { flex: 1; min-width: 0; }
.mail-search button { flex: none; padding: 9px 16px; }
.mail-search a { font-size: 13px; font-weight: 700; color: var(--muted); }
.mail-people td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.mail-people .nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail-people .mail-email { overflow-wrap: anywhere; font-weight: 600; min-width: 180px; }
.mail-people td small { display: block; }
.mail-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 130px; }
.mail-actions button.secondary { padding: 5px 12px; font-size: 12px; }
.mail-danger > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); }
.mail-danger > summary:hover, .mail-danger[open] > summary { color: var(--red); }
.mail-danger form { margin-top: 8px; padding: 10px; border-radius: var(--radius-sm); background: var(--red-soft); }
.mail-danger label { color: var(--red); margin-bottom: 8px; }
.mail-danger button.secondary:hover { background: var(--red); color: var(--surface); border-color: var(--red); }

/* Editors: form on the left, the saved email on the right. */
.mail-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mail-edit + .mail-edit { margin-top: 18px; }
.mail-edit h3 { margin: 18px 0 6px; font-size: 14px; }
.mail-edit .card-head + h3, .mail-edit .card-head + p + h3 { margin-top: 4px; }
.mail-edit .card-head h2 { overflow-wrap: anywhere; }
.mail-edit > .mail-preview-card { position: sticky; top: 16px; }
.mail-block { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; margin: 0 0 10px; display: grid; gap: 8px; }
.mail-block legend { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.mail-block label { margin-bottom: 0; }
.mail-block textarea, .mail-block input { width: 100%; }
.mail-block p.muted { margin: 0; font-size: 12px; }
.mail-block-tools, .mail-add, .mail-send { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mail-block-tools button { padding: 4px 10px; }
.mail-block-tools button[value^="remove"] { margin-left: auto; }
.mail-add { margin: 4px 0 14px; }
.mail-add button.secondary { padding: 6px 14px; font-size: 13px; }
.mail-send { gap: 10px; margin-top: 14px; }
.mail-seg, .mail-pick { display: grid; gap: 6px; margin: 8px 0 12px; }
.mail-pick { max-height: 320px; overflow: auto; }
.detail label.opt, .stack label.opt { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); margin: 0; text-align: left; }
.detail label.opt input[type=checkbox], .stack label.opt input[type=checkbox] { width: auto; flex: none; margin: 0; accent-color: var(--brand); }
.mail-block label.opt { font-size: 12px; color: var(--muted); }
.mail-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #F3F6F5; }
.mail-preview .mail-subject { margin: 0; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.mail-subject .mail-subject-text { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mail-subject small { flex-basis: 100%; }
.mail-frame { display: block; width: 100%; height: 640px; border: 0; background: #F3F6F5; }
.mail-status { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; }
.mail-status p { margin: 0; }
.mail-status button { padding: 8px 16px; }
.mail-off-warning { display: grid; gap: 10px; }
.mail-off-warning form { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.mail-off-warning p { margin: 0; flex: 1 1 280px; }
.mail-off-warning button { padding: 8px 16px; width: auto; }
.mail-not-sent { margin: 0 0 14px; }
.notice.muted-note { background: var(--surface-2); color: var(--ink); font-weight: 500; }
.mail-edit button.link-btn { background: none; border: 0; padding: 0; color: var(--brand-text); font-weight: 700; text-decoration: none; cursor: pointer; width: auto; min-height: 0; }
.mail-edit button.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .mail-edit button.link-btn { color: var(--accent); }
.mail-edit button[disabled] { opacity: .45; cursor: not-allowed; }
.mail-why { margin: 10px 0 0; font-size: 13px; }

/* Outbox: each email opens in place. */
.mail-outbox > li { display: block; padding: 0; }
.mail-outbox summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.mail-outbox summary::-webkit-details-marker { display: none; }
.mail-outbox summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 6px 4px 0; transition: transform .15s ease-out; }
.mail-outbox details[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.mail-outbox summary b { overflow-wrap: anywhere; }
.mail-outbox details[open] .mail-preview { margin: 0 0 14px; }
.mail-outbox > li:first-child summary { padding-top: 2px; }

@media (max-width: 1100px) { .mail-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .mail-stats > div:nth-child(4) { border-left: 0; } }
@media (max-width: 900px) { .mail-edit { grid-template-columns: 1fr; } .mail-edit > .mail-preview-card { position: static; } .mail-frame { height: 560px; } }
@media (max-width: 560px) {
  .mail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mail-stats > div:nth-child(odd) { border-left: 0; }
  .mail-stats > div:nth-child(4) { border-left: 1px solid var(--line); }
  .mail-list > li { flex-wrap: wrap; }
  .mail-new .mail-new-row { flex-direction: column; }
}

/* ---- Settings ------------------------------------------------------------- */
.detail.settings { grid-template-columns: minmax(0, 1fr) minmax(580px, 1fr); }
.sig-card { position: sticky; top: 16px; }
.settings-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 6px; }
.sig-frame { display: block; width: 100%; height: 250px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sig-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
.sig-actions button { width: auto; }
.sig-actions button.secondary { background: var(--surface); color: var(--ink, #1A2421); border: 1px solid var(--line); }
.sig-status { font-size: 13px; color: var(--lime-ink); font-weight: 600; }
.sig-status.error { color: var(--red); }
.sig-how { margin-top: 10px; font-size: 14px; }
.sig-how summary { cursor: pointer; font-weight: 600; }
.sig-how ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
.sig-how textarea { width: 100%; margin-top: 8px; font: 12px/1.4 ui-monospace, Menlo, monospace; }
@media (max-width: 1240px) { .detail.settings { grid-template-columns: 1fr; } .sig-card { position: static; } }

/* ---- User card (bottom of the sidebar) ------------------------------------ */
/* Same box as the old progress card: photo where the icon was, bell on the right. */
.side-user { overflow: visible; }
.side-user .progress { position: relative; }
.side-user-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; position: relative; z-index: 1; }
.side-user-menu-wrap > summary { list-style: none; cursor: pointer; display: block; border-radius: 10px; }
.side-user-menu-wrap > summary::-webkit-details-marker { display: none; }
.side-user-menu-wrap > summary:focus-visible, .side-bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-user-photo { display: block; width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.side-bell {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.12); color: var(--accent);
}
.side-bell:hover { background: rgba(255,255,255,.2); }
.side-bell .ic { width: 18px; height: 18px; }
.side-bell-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--brand);
}
.side-bell-count.amber { background: var(--accent); color: var(--on-accent); }
.side-user-menu {
  position: absolute; left: -16px; bottom: calc(100% + 10px); width: 220px; z-index: 20;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-pop); padding: 6px;
}
.side-user-menu > a, .side-user-menu > div {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  font-size: 13px; color: var(--ink); text-decoration: none;
}
.side-user-menu > a:hover, .side-user-menu > a:focus-visible, .side-user-menu > a[aria-current="page"] { background: var(--surface-2); }
.side-user-menu span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.side-user-menu small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.side-user-menu .ic { width: 18px; height: 18px; flex: none; color: var(--brand-text); }
.side-user-me, .side-user-time { border-bottom: 1px solid var(--line); border-radius: 0 !important; }
.side-user-time b { font-size: 15px; font-variant-numeric: tabular-nums; }
.num-field { display: flex; align-items: center; gap: 8px; }
.num-field input { flex: 1; min-width: 0; }
.num-field em { font-style: normal; font-weight: 500; color: var(--muted); }
/* Settings tabs: one row, scrolls sideways on small screens. */
.settings-tabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 16px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; scrollbar-width: none; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs a { flex: none; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.settings-tabs a:hover { color: var(--ink); background: var(--surface-2); }
.settings-tabs a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); }
.settings-panel > form.card, .settings-panel > section.card { max-width: 760px; }
.settings-panel .detail label, .settings-panel form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.settings-panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0 0 12px; font-size: 14px; }
.settings-panel dt { font-weight: 600; color: var(--muted); }
.settings-panel dd { margin: 0; }
.settings-gap { margin-top: 16px; }
.settings-panel > .card, .settings-panel > form.card, .settings-panel > section.card { max-width: 900px; }
.settings-panel select { width: 100%; }
/* On/off switches */
fieldset.toggles { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 4px; margin: 0 0 14px; }
fieldset.toggles legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 6px; }
label.toggle { flex-direction: row !important; align-items: center; gap: 10px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--ink) !important; cursor: pointer; margin-bottom: 10px !important; }
label.toggle input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--brand); }
label.toggle.sm { font-size: 12px !important; margin: 0 !important; white-space: nowrap; }
/* Templates */
.tpl-list { display: flex; flex-direction: column; }
.tpl-row { display: grid; grid-template-columns: minmax(180px, 1fr) 120px auto auto auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tpl-row button { width: auto; }
.tpl-add { border-bottom: 0; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line); }
.tpl-add .link-button { display: none; }
@media (max-width: 900px) { .tpl-row { grid-template-columns: 1fr 1fr; } .tpl-row input[name="title"] { grid-column: 1 / -1; } }
/* Connections */
.conn-list { list-style: none; margin: 0; padding: 0; }
.conn-list li { display: grid; grid-template-columns: 12px minmax(160px, 1fr) minmax(200px, 1.4fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.conn-list li:last-child { border-bottom: 0; }
.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.conn-dot.ok { background: var(--series-in); } .conn-dot.error { background: var(--red); } .conn-dot.off { background: var(--stone); }
.conn-main, .conn-state { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.conn-main small, .conn-state small { font-size: 12px; color: var(--muted); }
.conn-state .pill { align-self: flex-start; text-transform: none; }
.pill.conn-ok { background: var(--lime-soft); color: var(--lime-ink); } .pill.conn-error { background: var(--red-soft); color: var(--red); }
.conn-go { font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .conn-list li { grid-template-columns: 12px 1fr; } .conn-state, .conn-go { grid-column: 2; } }
/* Security tables */
.set-table-wrap { overflow-x: auto; margin: 0 -20px -18px; }
table.set-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.set-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 9px 8px; border-block: 1px solid var(--line); white-space: nowrap; }
.set-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.set-table th:first-child, .set-table td:first-child { padding-left: 20px; }
.set-table tbody tr:last-child td { border-bottom: 0; }
.set-table code { font-size: 12px; }

.avatar.logo { background: #fff; border: 1px solid var(--line, #e3e7e5); overflow: hidden; }
.avatar.logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.avatar.logo.on-dark { background: var(--brand); border-color: var(--brand); }

.enquiry-message { white-space: pre-line; margin: 0; font-size: 15px; line-height: 1.6; max-width: 70ch; overflow-wrap: anywhere; }
/* Enquiry page: who and what to do in the header, their words first, details beside. */
.enquiry-hero p span + span::before { content: "·"; margin-right: 12px; color: var(--muted); }
.enquiry-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enquiry-actions form { margin: 0; }
.enquiry-actions .button, .enquiry-actions button { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 9px 16px; }
.card-stack { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 860px) { .enquiry-actions { margin-left: 0; width: 100%; } }
dl.answers { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

/* ---- Polish pass, 7 Oct 2026 ------------------------------------------------ */
/* The parts the browser draws: selection, caret, native controls, scrollbars, focus. */
:root { accent-color: var(--brand); scrollbar-color: var(--stone) transparent; }
::selection { background: var(--accent); color: var(--on-accent); }
input, textarea { caret-color: var(--brand-text); }
::placeholder { color: var(--muted); opacity: 1; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
/* Headings break evenly, small print avoids one word last lines. */
h1, h2, h3 { text-wrap: balance; }
p, small, .muted { text-wrap: pretty; }
/* State changes ease in instead of snapping. */
.side-nav a, .crm-tabs a, .seg a, button, .theme-switch button, input, select, textarea, .clients tbody tr {
  transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Enquiries: new rows read heavier, handled rows stay at the default weight. */
.clients tr.is-new .row-link { font-weight: 800; }

/* ---- CRM UI: shared list page pieces ---- */
.crm-label { font-size: 22px; font-weight: 700; }
.crm-tabs .cnt { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.crm-tabs a[aria-current] .cnt { background: rgba(255, 255, 255, .22); color: var(--brand-ink); }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
.page-title h1 { margin: 0; font-size: 26px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sum { color: var(--muted); margin: 0 0 20px; }
.sum a { color: inherit; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.tag.k-lead { background: var(--info-soft); color: var(--info); }
.tag.k-deal { background: var(--amber-soft); color: var(--amber); }
.tag.k-client { background: var(--lime-soft); color: var(--lime-ink); }
.tag.k-task { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.btns { display: inline-flex; gap: 6px; align-items: center; }
.btns form { margin: 0; }
button.sm, .button.sm { min-height: 32px; padding: 4px 12px; font-size: 13px; }
button.btn-done { min-height: 32px; padding: 4px 14px; font-size: 13px; font-weight: 600; border: 0; border-radius: 999px; background: var(--brand); color: var(--brand-ink); cursor: pointer; }
button.btn-done:hover { background: var(--brand-deep); }
.agenda-row { display: grid; grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.agenda-row:first-of-type { border-top: 0; }
.agenda-row .when { font-weight: 600; font-size: 13px; }
.agenda-row .when.late { color: var(--red); }
.agenda-row .co { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.agenda-row .co a { font-weight: 600; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.agenda-row .sub { display: block; color: var(--muted); font-size: 12px; }
.agenda-more { padding: 8px 0 4px; font-size: 13px; }
.card-head .sub { color: var(--muted); font-size: 13px; }
:where(.crm-tabs a, button.sm, button.btn-done, .agenda-row a):focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
@media (max-width: 600px) {
  .agenda-row, .agenda-row.task-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .agenda-row .tags:empty { display: none; }
  .agenda-row > .when { grid-column: 1; grid-row: 1; }
  .agenda-row > .btns { grid-column: 2; grid-row: 1; justify-self: end; }
  .agenda-row > :not(.when):not(.btns) { grid-column: 1 / -1; }
  button.sm, button.btn-done, .button.sm { min-height: 44px; }
  .quick-add { display: grid; grid-template-columns: minmax(0, 1fr); }
  form.quick-add > *, form.quick-add input:not([type="hidden"]), form.quick-add select, form.quick-add button { width: 100%; min-width: 0; max-width: 100%; flex: none; box-sizing: border-box; }
}
.clients td .late { color: var(--red); font-weight: 600; }
.clients td .flag { margin-left: 6px; }
.start-menu { position: relative; display: inline-block; }
.start-menu > summary { list-style: none; cursor: pointer; }
.start-menu > summary::-webkit-details-marker { display: none; }
.start-menu-list { position: absolute; right: 0; z-index: 5; margin-top: 4px; display: grid; gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); min-width: 150px; }
.start-menu-list form { margin: 0; }
.start-menu-list button { width: 100%; justify-content: flex-start; text-align: left; }
.lead-acts form { display: inline-block; margin: 0; }
.deal-next.muted { font-size: 12px; }
.start-deal { margin: 6px 0; }
@media (max-width: 600px) { .start-menu-list { position: static; box-shadow: none; } }

/* ---- CRM UI: record header, quick links, next action box ---- */
.record-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.record-id { min-width: 0; flex: 1 1 240px; }
.record-id .page-title { margin: 0 0 6px; }
.record-id .page-title h1 { font-size: 22px; font-weight: 800; }
.record-id h1 { overflow-wrap: anywhere; }
.record-tags { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.record-tags a:not(.button) { color: var(--muted); text-decoration: none; font-weight: 600; }
.record-tags form { margin: 0; }
.record-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qlinks { display: flex; gap: 8px; align-items: center; }
.qlinks form { margin: 0; }
.qlink { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--brand-text); cursor: pointer; text-decoration: none; }
.qlink:hover { background: var(--lime-soft); }
.qlink .ic { width: 18px; height: 18px; }
.next-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--amber-soft); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; }
.next-main { flex: 1 1 260px; min-width: 0; }
.next-lab { font-size: 12px; font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.next-lab .when { text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--ink); }
.next-lab .when.late { color: var(--red); }
.next-edit { margin: 0; }
.next-edit input { width: 100%; font-size: 16px; font-weight: 600; background: transparent; border: 1px solid transparent; padding: 6px 8px; margin-left: -8px; }
.next-edit input:hover, .next-edit input:focus { background: var(--surface); border-color: var(--line); }
.next-box .btns button.secondary { background: var(--surface); }
@media (max-width: 600px) { .record-right { margin-left: 0; width: 100%; } .qlink { width: 44px; height: 44px; } }

/* ---- CRM UI: read cards with section edit ---- */
.read-card dl { margin: 0; }
.section-form .form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.section-form input, .section-form select { width: 100%; }
.section-form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.section-form label.check input { width: auto; }
.read-card .link-btn { min-height: 32px; display: inline-flex; align-items: center; }
@media (max-width: 600px) { .read-card .link-btn { min-height: 44px; } }

/* ---- CRM UI: notes card ---- */
.note-add { display: grid; gap: 8px; margin-bottom: 14px; }
.note-add textarea { width: 100%; }
.note-add button { justify-self: start; }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.note-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 12px; }
.note-meta form { margin: 0; }
.link-btn.danger { color: var(--red); background: none; border: 0; padding: 4px 6px; min-height: 32px; cursor: pointer; font: inherit; font-weight: 600; }
@media (max-width: 600px) { .link-btn.danger { min-height: 44px; } }

/* ---- CRM UI: timeline ---- */
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.tl li:first-child { border-top: 0; padding-top: 0; }
.tl-about { font-weight: 700; }

/* ---- CRM UI: Basecamp card and switches ---- */
.sw-form { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw span { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--stone); transition: background-color .15s ease-out; flex: none; }
.sw span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease-out; }
.sw input:checked + span { background: var(--brand); }
.sw input:checked + span::after { transform: translateX(16px); }
.sw input:focus-visible + span { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.bc-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.bc-link form { margin: 0; }
.people { list-style: none; margin: 0 0 12px; padding: 0; }
.people li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.person-id { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.row-menu { position: relative; }
.row-menu summary { list-style: none; cursor: pointer; padding: 4px 10px; border-radius: 8px; min-height: 32px; display: inline-flex; align-items: center; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu form { position: absolute; right: 0; z-index: 5; margin: 4px 0 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.addp summary { list-style: none; display: inline-flex; cursor: pointer; }
.addp summary::-webkit-details-marker { display: none; }
.addp form { margin-top: 10px; }
@media (max-width: 600px) { .row-menu summary { min-height: 44px; } .people li { flex-wrap: wrap; } }

/* ---- CRM UI: deal page ---- */
.step.done:not(.current) { background: var(--lime-soft); color: var(--lime-ink); border-color: transparent; }
.mark-btns { display: inline-flex; gap: 8px; align-items: center; }
.mark-btns form { margin: 0; }
.record-right .mark-btns button { white-space: nowrap; }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- CRM UI: Projects tab ---- */
.card-head.filters { flex-wrap: wrap; gap: 10px; }
.tag.warn { background: var(--amber-soft); color: var(--amber); }
.tag.ok { background: var(--lime-soft); color: var(--lime-ink); }
.tag.done { background: var(--surface-2); color: var(--muted); }
.tag.wait { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.prog { display: inline-flex; align-items: center; gap: 8px; }
.prog .bar { width: 96px; flex: none; }
.prog svg { display: block; width: 100%; height: 6px; }
.prog .track { fill: var(--surface-2); stroke: var(--line); stroke-width: .5; }
.prog .fill { fill: var(--brand-text); }
.prog small { color: var(--muted); white-space: nowrap; }
.projects-table td small { display: block; color: var(--muted); font-size: 12px; }
.projects-table td .prog small { display: inline; }
.projects-table tbody tr.rowlink:hover { background: var(--surface-2); }
.row-link:focus-visible { outline: 2px solid var(--brand-text); outline-offset: -2px; }
@media (max-width: 600px) {
  .projects-table td small { display: inline; margin-left: 8px; }
}

/* ---- CRM UI: Tasks tab ---- */
.pagefilter { margin: 0 0 16px; flex-wrap: wrap; }
.task-row { grid-template-columns: 96px minmax(0, 1fr) auto auto; }
.task-row .tk { min-width: 0; }
.task-row .tk a { font-weight: 600; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.task-row .tk a:hover { text-decoration: underline; text-underline-offset: 3px; }
.task-row .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.task-row:target { background: var(--amber-soft); }
.card.fold > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.card.fold > summary::-webkit-details-marker { display: none; }
.card.fold > summary h2 { margin: 0; }
.card.fold > summary .sub { color: var(--muted); font-size: 13px; }
.card.fold > summary .link-btn { margin-left: auto; }
.card.fold[open] > summary { margin-bottom: 8px; }
.card.fold > summary:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 4px; }

/* ---- CRM UI: project page ---- */
.launch { display: grid; gap: 4px; justify-items: end; text-align: right; }
.launch b { font-size: 15px; }
.launch .prog.slim .bar { width: 140px; }
.launch .prog.slim svg { height: 4px; }
.next-text { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.proj-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .proj-cols { grid-template-columns: minmax(0, 1fr); } }
.checklist .legend { display: inline-flex; flex-direction: row; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.checklist .legend .li { display: inline-flex; align-items: center; gap: 5px; }
.ic-ms { color: var(--ms); flex: none; }
.ic-eye { color: var(--muted); flex: none; vertical-align: -3px; }
ul.tasks { list-style: none; margin: 0; padding: 0; }
ul.tasks > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); position: relative; }
ul.tasks > li:first-child { border-top: 0; }
ul.tasks > li:target { background: var(--amber-soft); }
ul.tasks .tick { margin: 0; flex: none; }
ul.tasks .tt { flex: 1; min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
ul.tasks .tt b { font-weight: 700; }
ul.tasks li.done .tt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--stone); }
ul.tasks .tdue { font-size: 13px; color: var(--muted); white-space: nowrap; }
ul.tasks .tdue.late { color: var(--amber); font-weight: 700; }
ul.tasks li.editing { display: block; }
button.chk-box { width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 7px; border: 2px solid var(--stone); background: var(--surface); position: relative; cursor: pointer; }
button.chk-box:hover { border-color: var(--brand); background: var(--lime-soft); }
button.chk-box[aria-pressed="true"] { background: var(--lime-soft); border-color: var(--sage); }
button.chk-box[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--lime-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
button.chk-box:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
@media (max-width: 600px) { button.chk-box { width: 44px; height: 44px; min-height: 44px; } button.chk-box[aria-pressed="true"]::after { left: 15px; top: 9px; } }
.done-fold { margin-top: 10px; }
.done-fold > summary { cursor: pointer; color: var(--brand-text); font-weight: 700; font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
.done-fold > summary:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
details.task-menu { position: relative; flex: none; }
details.task-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
details.task-menu > summary::-webkit-details-marker { display: none; }
details.task-menu > summary:hover, details.task-menu[open] > summary { background: var(--surface-2); color: var(--ink); }
details.task-menu > summary:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
details.task-menu .menu { position: absolute; right: 0; z-index: 5; margin-top: 4px; min-width: 190px; display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
details.task-menu .menu form { margin: 0; }
.menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; min-height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.menu-item:hover { background: var(--surface-2); }
.menu-item.danger { color: var(--red); }
.menu-item:focus-visible { outline: 2px solid var(--brand-text); outline-offset: -2px; }
@media (max-width: 600px) { details.task-menu > summary { width: 44px; height: 44px; } .menu-item { min-height: 44px; } }
.task-edit { display: grid; gap: 4px; padding: 6px 0; }
.task-edit input:not([type=checkbox]), .task-edit select, .task-edit textarea { width: 100%; }
.task-row.editing { display: block; }

/* ---- CRM UI: project details and Shown in Basecamp ---- */
.shift-box { margin: 14px 0 0; }
.shift-box fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px 12px; margin: 0; }
.shift-box legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.shift-box .shift-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.shift-box input[type=number] { width: 90px; }
.shift-box small { display: block; }
.bc-note { margin: 0 0 10px; }

/* ---- CRM UI: Projects card on the client page ---- */
.projects-card .cp-project { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.projects-card .cp-project:first-of-type { border-top: 0; padding-top: 0; }
.cp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cp-title { font-weight: 700; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.cp-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cp-tasks li { display: flex; align-items: center; gap: 10px; }
.cp-tasks form { margin: 0; }
.cp-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cp-tasks .tdue { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cp-tasks .tdue.late { color: var(--amber); font-weight: 700; }

.cs-form { margin: 0; flex: none; }
button.cs-btn { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--stone); background: var(--surface); color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; opacity: .6; position: relative; }
button.cs-btn:not([aria-pressed="true"])::after { content: ""; position: absolute; width: 18px; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 1px; }
button.cs-btn:hover { opacity: 1; border-color: var(--brand); }
button.cs-btn[aria-pressed="true"] { opacity: 1; background: var(--lime-soft); border-color: var(--sage); color: var(--brand-text); }
button.cs-btn:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
@media (max-width: 600px) { button.cs-btn { width: 44px; height: 44px; min-height: 44px; } }

/* Client replies on a task (from a Basecamp project page). Read only. */
.task-replies { grid-column: 1 / -1; margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--panel, transparent); }
li > .task-replies { flex-basis: 100%; width: 100%; }
.task-replies .tr-head { margin: 0; font-size: 12px; color: var(--muted); }
.task-replies .tr-text { margin: 2px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-replies .tr-text:last-child { margin-bottom: 0; }

/* ---- Sandbox (sandboxdcadmin.aeroy.co.uk only, src/lib/sandbox.ts) ---- */
.sandbox-banner { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 6px 14px; background: var(--amber-soft); color: var(--amber); font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line); }
.sandbox-banner a { color: inherit; }
.sandbox-signin { min-height: 80vh; display: grid; place-items: center; padding: 24px; }
.sandbox-signin form { display: grid; gap: 14px; width: min(360px, 100%); }
.sandbox-signin h1 { margin: 0; font-size: 22px; }
.sandbox-signin .sub { margin: 0; color: var(--muted); }
.sandbox-signin label { display: grid; gap: 6px; font-weight: 600; }
.sandbox-signin .notice { margin: 0; }

/* ---- Phone navigation and header (loop 2) ----------------------------------
   Above 860px the side menu does the job. On a phone the side menu becomes a
   bar along the bottom: Today, CRM, Projects, Money and More. More opens a
   sheet with the rest of the side menu, Settings, the theme switch and Sign
   out, so every section is one or two taps away and nothing hides off screen.
   The top bar keeps one row: back, the page or group name, and Jump to. */
.tabbar { display: none; }
@media (max-width: 860px) {
  .side { display: none; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .tabbar > a, .tab-more > summary {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; padding: 4px 2px; border-radius: 14px; list-style: none; cursor: pointer;
    text-decoration: none; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.2;
  }
  .tab-more > summary::-webkit-details-marker { display: none; }
  .tabbar .ic { width: 22px; height: 22px; padding: 3px 14px; box-sizing: content-box; border-radius: 999px; transition: background-color .2s ease-out; }
  .tabbar > a[aria-current], .tab-more > summary.is-current, .tab-more[open] > summary { color: var(--brand-text); }
  .tabbar > a[aria-current] .ic, .tab-more > summary.is-current .ic, .tab-more[open] > summary .ic { background: var(--lime-soft); color: var(--lime-ink); }
  .tabbar > a:focus-visible, .tab-more > summary:focus-visible { outline: 2px solid var(--brand-text); outline-offset: -2px; }
  .tab-more { position: static; }
  .tab-sheet {
    position: fixed; left: 8px; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 16;
    max-height: calc(100dvh - 120px); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-pop); padding: 14px;
  }
  .tab-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; }
  .tab-sheet-head b { font-size: 17px; }
  .tab-sheet-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tab-sheet-list a {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: 14px;
    text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--surface-2);
  }
  .tab-sheet-list a[aria-current] { background: var(--brand); color: var(--brand-ink); }
  .tab-sheet-list .ic { width: 20px; height: 20px; color: var(--muted); }
  .tab-sheet-list a[aria-current] .ic { color: inherit; }
  .tab-signout {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; min-height: 44px;
    border-top: 1px solid var(--line); padding-top: 12px; text-decoration: none; font-weight: 600; color: var(--muted);
  }
  .tab-signout .ic { width: 18px; height: 18px; }
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .foot { margin-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Top bar: one tidy row (back, name, Jump to), then the group tabs, then any page search. */
  .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px 10px; }
  .topbar .theme-switch, .topbar .top-icon { display: none; }
  .topbar .crm-head { display: contents; }
  .topbar .crm-label, .topbar h1 { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
  .topbar .back-btn { order: 0; }
  .topbar .fresh-pill { order: 2; }
  .topbar .jump { order: 2; margin-left: auto; width: 38px; height: 38px; padding: 0; justify-content: center; }
  .topbar .crm-tabs { order: 3; flex: 1 1 100%; display: flex; flex-wrap: nowrap; border-radius: 999px; min-width: 0; }
  .topbar .crm-tabs a { flex: 1 1 auto; justify-content: center; padding: 8px 6px; font-size: 13px; gap: 4px; white-space: nowrap; min-width: 0; }
  .topbar .crm-tabs .cnt { padding: 0 5px; }
  .topbar .search { order: 4; flex: 1 1 100%; max-width: none; }
}
.sandbox-banner { flex-wrap: wrap; text-align: center; }
@media (max-width: 480px) { .sandbox-banner { font-size: 12px; padding: 6px 16px; } }
/* Tile badges take the tone of their chip: a good result is never drawn as a warning. */
.badge.warn { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.badge.bad { color: var(--red); background: var(--red-soft); border-color: transparent; }
:root[data-theme="dark"] .badge.warn { color: var(--amber); }
:root[data-theme="dark"] .badge.bad { color: var(--red); }
/* Today, Next three weeks: the CRM figure due today or late, the same number as the hero, before the weeks. */
.weeks-due {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 12px 16px; border-radius: 14px;
  background: var(--red-soft); color: var(--red); text-decoration: none;
}
.weeks-due strong { font-family: var(--font-head); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.weeks-due span { flex: 1; font-weight: 700; }
.weeks-due small { color: inherit; opacity: .85; font-weight: 500; }
.weeks-due .ic { width: 18px; height: 18px; }
.weeks-due:hover { filter: brightness(.98); }
.weeks-due:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Laptop widths: the group tabs and the controls keep one row. Tab icons go first, then the group name
   (the side menu already shows which section you are in). */
@media (min-width: 861px) and (max-width: 1280px) {
  .topbar .crm-tabs .ic { display: none; }
  .topbar .crm-tabs a { padding: 7px 13px; }
  .topbar .jump span, .topbar .jump kbd { display: none; }
  .topbar .jump { padding: 8px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .topbar .crm-label { display: none; }
  .topbar .crm-head ~ .search { min-width: 120px; }
}
table.leads td[data-label="Contact"] small { white-space: nowrap; }