/* era film brand layer, loaded after style.css on every page.
   Black canvas, flat colour cards, outlined pills. Each colour means one area of the business:
   yellow = money, orange-red = clients, lavender = tasks, mint = projects and weddings, olive = insight and team.
   Urgency is never a card colour: it is a black chip. See design/ui-design-prompt.md. */

:root {
  color-scheme: dark;
  --black: #000; --char: #141414; --char2: #1D1D1B;
  --off: #E8E8DF; --grey: #9A9A92;
  --money: #F8EA3B; --clients: #FF5128; --tasks: #9B8DB0; --projects: #DAE5D8; --insight: #8F8200;
  --canvas: #000; --canvas-ink: #E8E8DF; --panel: #0F0F0E; --me-bg: #E8E8DF; --me-ink: #000; --primary-hover: #E8E8DF;
  --ground: var(--canvas); --surface: var(--canvas); --ink: #E8E8DF; --ink2: #C8C8BF; --muted: #8E8E86;
  --line: #2A2A28; --line2: #48483F;
  --accent: #DAE5D8; --accent-dark: #E8E8DF; --accent-soft: rgba(218, 229, 216, .13);
  --danger: #FF5128; --danger-dark: #FF7A5C; --danger-line: rgba(255, 81, 40, .55); --warn: #F8EA3B;
  --font: 'Inter Tight', system-ui, sans-serif;
  --display: 'Archivo', 'Inter Tight', system-ui, sans-serif;
  --r-card: 26px;
}
body { background: var(--canvas); color: var(--ink); font: 400 15px/1.45 var(--font); letter-spacing: -.005em; }
::selection { background: var(--money); color: #000; }
a { color: var(--accent); }
a:hover { color: var(--canvas-ink); }
h2 { font-weight: 500; }
.danger-text, .warn-text, .ok-text { font-weight: 500; }
.ok-text { color: var(--projects); }
.error { color: var(--danger-dark); font-weight: 500; }

/* ---------- area colours: a card takes the colour of its topic, everything inside turns black ---------- */
.area-money, .area-clients, .area-tasks, .area-projects, .area-insight, .report-cards > .panel {
  --ink: #0B0B0B; --ink2: #1E1E1C; --muted: rgba(0, 0, 0, .62); --line: rgba(0, 0, 0, .17); --line2: rgba(0, 0, 0, .38);
  --accent: #000; --accent-dark: #000; --accent-soft: rgba(0, 0, 0, .08); --surface: transparent; --ground: rgba(0, 0, 0, .06);
  --danger: #000; --danger-dark: #000; --danger-line: rgba(0, 0, 0, .45); --warn: #000;
  color: #0B0B0B; border-color: transparent !important;
}
.area-money { background: var(--money) !important; }
.area-clients { background: var(--clients) !important; }
.area-tasks, .report-cards > .panel { background: var(--tasks) !important; }
.area-projects { background: var(--projects) !important; }
.area-insight { background: var(--insight) !important; }
[class*="area-"] a:not(.btn) { color: inherit; }
[class*="area-"] a:not(.btn):hover { color: inherit; text-decoration: underline; }
[class*="area-"] .btn.primary { background: #000; border-color: #000; color: var(--off); }
[class*="area-"] .btn.primary:hover { background: #222; }
[class*="area-"] .pill, .kpi-card .pill, .kcard .pill, .card .pill, [class*="area-"] .w-chip:not(.bad) { color: #000 !important; border-color: currentColor !important; background: transparent !important; }
[class*="area-"] input[type=checkbox] { accent-color: #000; }

/* black chip: the one way to say "late", "overdue", "conflict" */
.urgent-chip { display: inline-flex; align-items: center; gap: 6px; background: #000; color: var(--off); border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.urgent-chip::before { content: "!"; font-weight: 700; }

/* ---------- headlines: extra-wide uppercase, an outlined line over a solid one ---------- */
h1 { font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 4.6vw, 76px); line-height: .94; letter-spacing: -.01em; color: var(--canvas-ink); }
h1 .ol { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--canvas-ink); }
h1 .solid { display: block; }
.page-head { align-items: flex-end; gap: 16px 20px; }
.page-head > div:first-child > .muted, .page-head > div:first-child > #counts {
  display: inline-flex; margin-top: 14px; padding: 6px 16px; border: 1px solid var(--line2); border-radius: 999px; color: var(--ink); font-size: 14px; }
.page-head > div:first-child > .muted:empty { display: none; }

/* ---------- layout ---------- */
main { padding: 28px 36px 48px; gap: 14px; }
.panel { background: transparent; border: 1px solid var(--line2); border-radius: var(--r-card); padding: 28px; gap: 16px; }
.panel.late { border-color: var(--line2); }
.panel.late > h2, .panel.late > .panel-head > h2 { background: var(--off); border-color: var(--off); color: #000; }
.panel > h2, .panel-head > h2, .panel-head > .fold-head > h2, .panel-head > div > h2, .t-head h2 {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border: 1px solid currentColor; border-radius: 999px; padding: 5px 16px; font-size: 15px; font-weight: 400; line-height: 1.25; }
.panel-head h2 .muted { font-size: 13px; }

/* ---------- side menu ---------- */
.side { background: var(--canvas); border-right: 0; padding: 30px 18px 20px; gap: 3px; flex-basis: 236px; }
.side .brand { font-family: var(--font); font-size: 34px; font-weight: 500; letter-spacing: -.035em; padding: 0 14px 30px; color: var(--canvas-ink); text-transform: lowercase; }
.side a { padding: 11px 16px; border-radius: 999px; font-size: 16px; font-weight: 400; color: var(--canvas-ink); gap: 14px; }
.side a svg { flex-basis: 22px; width: 22px; height: 22px; }
.side a:hover { background: var(--char2); color: var(--canvas-ink); }
.side a[aria-current="page"] { background: var(--projects); color: #000; font-weight: 500; }
.side a[aria-current="page"] svg { color: #000 !important; }
.side a.sub { padding: 8px 16px 8px 52px; font-size: 14px; color: var(--ink2); }
.side a.sub[aria-current="page"] { color: #000; }
.side .nav-section { border-top: 0; margin-top: 18px; padding: 6px 16px; font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--canvas-ink); }
.side .count, nav.side a .count { margin-left: auto; background: var(--clients); color: #000; }
.nav-key { margin-top: auto; padding: 18px 16px 6px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.nav-key span { display: flex; align-items: center; gap: 10px; }
.nav-key i { width: 12px; height: 12px; border-radius: 50%; }
.side .who { display: none; }
.count { background: var(--clients); color: #000; font-weight: 600; }

/* ---------- top bar: alerts ticker, search, bell, who ---------- */
.topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ticker { display: inline-flex; align-items: center; gap: 14px; min-height: 38px; padding: 4px 6px 4px 18px; border: 1px solid var(--line2); border-radius: 999px; font-size: 14px; color: var(--ink); max-width: 100%; }
.ticker:empty { display: none; }
.ticker a { border: 1px solid var(--line2); border-radius: 999px; padding: 3px 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.ticker a:hover { background: var(--char2); }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 1px solid var(--line2); border-radius: 999px; }
.top-search input { border: 0 !important; background: transparent; height: 40px; padding: 0; width: 170px; font-size: 15px; outline: none; }
.top-search:focus-within { border-color: var(--off); }
.top-pill { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 1px solid var(--line2); border-radius: 999px; color: var(--ink); font-size: 15px; }
.top-pill:hover { background: var(--char2); color: var(--ink); }
.top-pill b { font-weight: 500; }
.top-me .icon-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line2); color: var(--ink); font-size: 15px; font-weight: 500; }
.top-me .menu-list .who-line { padding: 10px 12px 6px; font-size: 13px; color: var(--muted); }

/* ---------- controls ---------- */
.btn { min-height: 44px; padding: 0 20px; border: 1px solid var(--line2); border-radius: 999px; background: transparent; color: var(--ink); font-weight: 500; }
.btn:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.btn.primary { background: var(--projects); border-color: var(--projects); color: #000; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { border-color: var(--danger-line); color: var(--danger-dark); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 13px; }
.link-btn { color: var(--accent); }
input[type=text], input[type=password], input[type=url], input[type=search], input[type=email], input[type=tel], input[type=date], input[type=number], select {
  background: transparent; border: 1px solid var(--line2); border-radius: 999px; padding: 0 16px; color: var(--ink); }
textarea { background: transparent; border: 1px solid var(--line2); border-radius: 18px; color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; }
select option { background: var(--panel); color: var(--canvas-ink); }
input[type=checkbox] { accent-color: var(--projects); }
:focus-visible { outline-color: var(--money); }
.search input { border-radius: 999px; padding-left: 44px; }
.search svg { stroke: var(--muted); top: 13px; left: 16px; }
label.field { color: var(--muted); }
.icon-btn { color: var(--ink); border-radius: 999px; }
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.pill { background: transparent; border: 1px solid currentColor; color: var(--ink2); font-weight: 500; letter-spacing: .06em; padding: 4px 11px; }
.pill.green { color: var(--projects); background: transparent; }
.pill.amber { color: var(--money); background: transparent; }
.pill.red { color: var(--clients); background: transparent; }
.pill.blue { color: var(--tasks); background: transparent; }
.chips span { border-color: var(--line2); border-radius: 999px; color: var(--ink); padding: 2px 10px; }
.chip { background: var(--accent-soft); color: var(--accent); border-radius: 999px; }
.seg, .segmented { border: 1px solid var(--line2); border-radius: 999px; background: transparent; padding: 3px; gap: 2px; }
.seg button, .segmented button { background: transparent; color: var(--ink); border-radius: 999px; min-height: 36px; font-weight: 400; }
.seg button[aria-pressed="true"], .segmented button[aria-pressed="true"] { background: #000; color: var(--off); font-weight: 500; }
:not([class*="area-"]) > .seg button[aria-pressed="true"], main > .page-head .segmented button[aria-pressed="true"], .page-head .segmented button[aria-pressed="true"] { background: var(--projects); color: #000; }
.tabs { border-bottom: 0; gap: 8px; }
.tabs button { border: 1px solid var(--line2); border-radius: 999px; padding: 0 18px; min-height: 40px; margin: 0; font-size: 15px; color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--projects); border-color: var(--projects); color: #000; font-weight: 500; }
.filter summary { background: transparent; border-radius: 999px; padding: 0 18px; }
.filter summary.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.filter-panel, .menu-list, .bell-panel { background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
.filter-panel label:hover, .menu-list button:hover, .menu-list a:hover { background: var(--char2); }
.menu-list button, .menu-list a { color: var(--canvas-ink); border-radius: 12px; }
.menu-list .danger { color: var(--danger-dark); }
.bar { background: var(--line); height: 3px; }
.bar i { background: var(--ink); }
.test-banner { background: transparent; border: 1px solid var(--money); color: var(--money); border-radius: 999px; padding: 8px 18px; }
.check-note { background: transparent; border: 1px solid var(--money); color: var(--money); }

/* ---------- tables ---------- */
table.pay th { color: var(--muted); font-weight: 500; letter-spacing: .1em; border-bottom-color: var(--line2); }
table.pay td { border-bottom-color: var(--line); }
table.pay tr.clickable-row:hover { background: var(--char2); }
[class*="area-"] table.pay tr.clickable-row:hover { background: rgba(0, 0, 0, .06); }
.stats { gap: 12px; }
.stat { border: 1px solid var(--line2); border-radius: 22px; padding: 16px 22px; min-width: 150px; }
.stat .label i { background: var(--projects); }
.stat.upcoming .label i { background: var(--money); }
.stat.late .label i { background: #000; box-shadow: 0 0 0 1.5px var(--clients); }
.stat .value { font-size: 34px; font-weight: 500; letter-spacing: -.02em; }
[class*="area-"] .stat { border-color: var(--line2); }

/* ---------- dialogs and side panels ---------- */
dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: 28px; padding: 30px; }
dialog::backdrop, .inv-backdrop, .sheet-backdrop:not([hidden]) { background: rgba(0, 0, 0, .72); }
dialog h2 { font-size: 22px; font-weight: 500; }
.form-section h3 { color: var(--muted); font-weight: 500; letter-spacing: .12em; }
.inv-panel { background: var(--panel); box-shadow: none; border-left: 1px solid var(--line2); }
.inv-panel.full { border-left: 0; }
.inv-panel h2 { font-weight: 500; border-bottom-color: var(--line2); }
.inv-bar { background: var(--panel); border-bottom-color: var(--line2); }
.inv-edit-item, .inv-details, .breakdown-lines { background: var(--char); border-radius: 18px; }
.wants-box, .form-original, .cal-box { border-color: var(--line2); border-radius: 20px; }
.draft-box { background: transparent; border-color: var(--clients); border-radius: 22px; }
.bulk-bar { background: var(--char2); border-radius: 999px; padding: 8px 10px 8px 20px; }
.login-card { background: transparent; border: 1px solid var(--line2); border-radius: var(--r-card); }
.login-card .brand { font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
.login-card h1 { font-size: 30px; }
.login-note { background: var(--accent-soft); color: var(--accent); border-radius: 18px; }

/* ---------- lists ---------- */
.item, .note, .doc, .lead-row, .report-line, .kpi-ms, .kpi-note, .s-row { border-top-color: var(--line); }
.clickable:hover, .clickable:focus-within, .task-row:hover, .task-row:focus-within, #tasks .item:hover, .lead-row:hover, .lead-row:focus-visible {
  background: color-mix(in srgb, currentColor 7%, transparent); box-shadow: inset 3px 0 0 currentColor; }
.doc-icon { border-color: var(--line2); border-radius: 8px; color: var(--ink2); }
.avatar { background: var(--char2); color: var(--off); font-weight: 500; }
.tag-chip { background: transparent; border: 1px solid var(--line2); border-radius: 999px; color: var(--ink2); }
.tag-pick label span { border-radius: 999px; }
.tag-pick label input:checked + span { background: var(--tasks); border-color: var(--tasks); color: #000; }
.history-line::before { background: var(--line2); }
.history-line i { background: var(--grey); }
.history-line i.green { background: var(--projects); }
.history-line i.amber { background: var(--money); }
.notif { border-top-color: var(--line); }
.notif i { background: var(--money); }
.notif.urgent i { background: #000; box-shadow: 0 0 0 2px var(--clients); }
.notif.event i { background: var(--projects); }
.notif.email i, .notif.message i { background: var(--clients); }
.notif.urgent .sub { color: var(--ink); }
.bell-badge { background: #000; color: var(--off); border: 1px solid var(--line2); border-radius: 999px; font-weight: 500; }
.bell-badge.urgent { background: #000; color: var(--off); border-color: #000; }
.bell-btn { background: transparent; border-color: var(--line2); border-radius: 999px; color: var(--ink); }
.bell-btn .count { background: var(--clients); color: #000; }
.new-chip { background: var(--clients); color: #000; border-color: var(--clients); }
.fold-chev, .fold-btn svg { color: var(--muted); }
.fold-btn { font-size: 15px; }

/* ---------- Today ---------- */
.today-head h1 { font-size: clamp(34px, 4.6vw, 76px); }
.safe-chip { background: transparent; border: 1px solid var(--line2); color: var(--ink); font-weight: 400; padding: 8px 18px; font-size: 14px; }
.safe-chip.bad { border-color: var(--clients); color: var(--clients); background: transparent; }
.today { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 12px; }
.today-main, .today-side, .today-open { gap: 12px; }
.today-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1400px) { .today-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t-card { background: transparent; border: 1px solid var(--line2); border-radius: var(--r-card); padding: 30px 32px; gap: 0; }
.t-card.hot { border-color: var(--line2); }
.t-card.big { padding: 32px 36px; }
.t-head { border-bottom: 0; padding-bottom: 0; align-items: flex-start; }
.t-title { flex-direction: row; align-items: center; gap: 8px; }
.t-title .muted { display: none; }
.t-expand { border: 1px solid var(--line2); border-radius: 50%; background: transparent; color: var(--ink); width: 36px; height: 36px; }
.t-expand:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.t-expand.on { background: #000; color: var(--off); border-color: #000; }
.t-big { display: flex; align-items: center; gap: 22px; margin: 34px 0 26px; min-height: 64px; }
.t-big .t-count { font-size: 72px; line-height: .9; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; color: inherit; }
.t-big .t-count.money { font-size: 64px; }
.t-big span { font-size: 22px; line-height: 1.2; max-width: 220px; }
.t-big .urgent-chip { align-self: center; }
.t-line { border-bottom: 0; border-top: 1px solid var(--line); padding: 16px 0; gap: 12px; }
.t-text b { font-size: 16px; font-weight: 500; }
.t-text .muted { font-size: 14px; }
.t-dot { margin-top: 7px; }
.t-dot.red { background: #000; box-shadow: none; }
.t-dot.amber { background: transparent; border: 2px solid #000; }
.t-dot.grey { background: rgba(0, 0, 0, .3); }
.t-dot.none { border-color: rgba(0, 0, 0, .3); }
:not([class*="area-"]) > .t-line .t-dot.red, .t-card:not([class*="area-"]) .t-dot.red { background: var(--clients); }
.t-card:not([class*="area-"]) .t-dot.amber { border-color: var(--money); }
.t-text .pill { border: 0; background: #000; color: var(--off); border-radius: 999px; padding: 3px 10px; letter-spacing: .06em; }
.t-text .pill.red::before { content: "! "; font-weight: 700; }
.t-more { color: inherit; font-weight: 500; padding-top: 16px; text-decoration: underline; text-underline-offset: 3px; }
.t-more:hover { color: inherit; }
.t-empty { font-size: 15px; }
.t-wed { border-top: 1px solid var(--line); border-bottom: 0; padding: 16px 0; }
.t-date small { color: var(--muted); }
.w-chip { background: transparent; border: 1px solid currentColor; color: inherit; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; }
.w-chip.bad { background: #000; color: var(--off); border-color: #000; }
.w-chip.warn { background: transparent; border-style: dashed; color: inherit; }
.ag-cap { color: var(--ink); font-weight: 500; letter-spacing: .16em; margin: 4px 0 12px; }
.agenda-rail { display: flex; flex-direction: column; gap: 12px; }
.ev { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 24px; color: #0B0B0B; }
a.ev:hover { color: #0B0B0B; filter: brightness(1.04); }
.ev-top { display: flex; align-items: center; gap: 10px; }
.ev-top .kind { border: 1px solid currentColor; border-radius: 999px; padding: 3px 14px; font-size: 14px; }
.ev-top .day { margin-left: auto; font-size: 14px; }
.ev-title { font-size: 19px; font-weight: 500; line-height: 1.25; }
.ev-sub { font-size: 14px; opacity: .75; margin-top: -8px; }
.ev-time { display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(0, 0, 0, .17); padding-top: 14px; font-size: 15px; flex-wrap: wrap; }
.ev-time .urgent-chip { margin-left: auto; }
.ev.google { background: transparent; border: 1px solid var(--line2); color: var(--ink); }
.ev.google .ev-time { border-top-color: var(--line); }
.ev-add { background: transparent; cursor: pointer; font: inherit; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 76px; border: 1.5px dashed var(--line2); border-radius: 24px; color: var(--ink); font-size: 16px; }
.ev-add:hover { color: var(--canvas-ink); border-color: var(--canvas-ink); }
.ag-line { border-top: 1px solid var(--line); padding: 10px 0; }
.ag-bar { border-left-color: var(--projects); }
.ag-bar.gc { border-left-color: var(--grey); } .ag-bar.amber { border-left-color: var(--money); } .ag-bar.crm { border-left-color: var(--clients); }
.ag-bar.conflict { border-left-color: #000; } .ag-bar.conflict b { color: var(--ink); }
.md { border-color: var(--line); border-radius: 14px; }
.md.past { background: transparent; color: var(--muted); opacity: .55; }
.md.now { border: 1.5px solid var(--off); }
.month .wd { color: var(--muted); font-weight: 500; }
.ag-ev { background: var(--char2); color: var(--off); border-radius: 999px; padding: 3px 9px; }
.ag-ev.wed { background: var(--projects); color: #000; }
.ag-ev.crm { background: var(--clients); color: #000; }
.ag-ev.amber { background: var(--money); color: #000; }
.ag-ev.gc { background: transparent; border: 1px solid var(--line2); color: var(--ink); }
.ag-ev.conflict { background: #000; color: var(--off); border: 1px solid var(--clients); }
.s-row { border-bottom: 0; border-top: 1px solid var(--line); padding: 12px 0; }

/* ---------- Projects: timeline and board ---------- */
.tl .line { background: var(--line2); height: 1px; }
.tl .today-line { background: var(--clients); width: 2px; }
.tl .today-pill { background: transparent; color: var(--clients); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.tl .dot { background: var(--projects); width: 12px; height: 12px; margin-left: -6px; top: 63px; }
.tl .dot.past, .tl .dot.eng.past { background: var(--canvas); border: 2px solid var(--grey); }
.tl .dot.eng { background: var(--canvas); border: 2px solid var(--projects); border-radius: 50%; transform: none; }
.tl .dot.eng:hover { transform: scale(1.3); }
.tl .lbl b { display: inline-block; background: var(--projects); color: #000; border-radius: 999px; padding: 3px 12px; font-weight: 500; }
.tl .lbl.eng b { background: transparent; color: var(--projects); border: 1px solid var(--projects); }
.tl .lbl span { display: block; margin-top: 3px; color: var(--muted); }
.tl .lbl.past b { background: var(--char2); color: var(--muted); border: 0; }
.tl .tick { border-left-color: var(--line2); color: var(--muted); }
.key { background: var(--projects); }
.key.eng { background: var(--canvas); border: 2px solid var(--projects); border-radius: 50%; transform: none; }
.key.past { background: var(--canvas); border-color: var(--grey); }
.board { gap: 12px; }
.column { flex: 1 0 270px; max-width: 380px; gap: 12px; }
.column-head { padding: 0; min-height: 50px; }
.column-head h2 { flex: 1; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line2); border-radius: 999px; padding: 9px 10px 9px 20px; font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.column-head h2 .cnt { flex: 0 0 auto; background: var(--money); color: #000; border-radius: 999px; min-width: 28px; padding: 0 8px; text-align: center; font-size: 13px; letter-spacing: 0; line-height: 24px; }
.column-head h2 .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column-head > .muted { display: none; }
.column-head button { color: var(--ink); border-radius: 50%; }
.column-head button:hover { background: var(--char2); }
.cards { gap: 12px; border-radius: 26px; }
.cards.over { outline: 1.5px dashed var(--projects); outline-offset: 4px; }
.cards .drop-hint { border: 1.5px dashed var(--line2); border-radius: 24px; padding: 32px 16px; color: var(--ink2); font-size: 15px; }
.card { height: auto; min-height: 0; background: var(--projects); border: 0; border-radius: 24px; padding: 22px 24px; gap: 14px; color: #0B0B0B;
  --ink: #0B0B0B; --ink2: #1E1E1C; --muted: rgba(0, 0, 0, .6); --line: rgba(0, 0, 0, .17); --line2: rgba(0, 0, 0, .4); --accent: #000; --surface: transparent;
  transition: transform .16s ease, box-shadow .16s ease; }
.card:hover { border: 0; color: #0B0B0B; transform: translateY(-2px); }
/* a card whose "..." menu is open stays flat and above its neighbours, so the whole menu shows and can be clicked */
:is(.card, .kcard, .kpi-card, .t-card, .member-card):has(.menu-list:not([hidden])) { transform: none !important; transition: none; position: relative; z-index: 30; }
.card.late { border: 0; }
.card h3 { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.card .sub { color: rgba(0, 0, 0, .65); font-size: 14px; }
.card .chips { height: auto; max-height: 64px; gap: 6px; }
.card .chips span { border-color: rgba(0, 0, 0, .45); color: #0B0B0B; height: 26px; line-height: 20px; padding: 2px 12px; font-size: 13px; }
.card .chips .cover { background: transparent; border-color: #000; color: #000; font-weight: 500; }
.card .fin { border-top: 0; padding-top: 0; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; }
.card .fin .card-menu { margin: 0 -6px 0 auto; }
.mono { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: #000; color: var(--projects); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 15px; letter-spacing: .02em; }
.thumb { width: 46px; height: 46px; }
.mp { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #000; white-space: nowrap; }
.mp.money { background: var(--money); } .mp.tasks { background: var(--tasks); } .mp.clients { background: var(--clients); }
.mp.quiet { background: transparent; border: 1px solid rgba(0, 0, 0, .4); font-weight: 400; }
.card .bell-badge { background: #000; color: var(--projects); border-color: #000; }
.card .bell-badge.urgent { color: var(--off); }
.add-column { border: 1px solid var(--line2); border-style: solid; border-radius: 999px; color: var(--ink); font-weight: 400; min-height: 50px; flex-basis: 130px; }
.add-column:hover { background: var(--char2); }
#archived summary { color: var(--muted); }

/* ---------- project page ---------- */
.hero { border: 0; padding: 0 0 6px; gap: 22px; }
.hero h1 { font-size: clamp(30px, 3.8vw, 62px); }
.hero .photo, .photo-add { width: 104px; height: 104px; }
.photo-add { background: transparent; border-color: var(--line2); color: var(--ink2); }
.photo-pen { background: #000; border-color: var(--line2); color: var(--off); box-shadow: none; }
.back-arrow { color: var(--ink); border-radius: 50%; }
.back-arrow:hover { background: var(--char2); color: var(--ink); }
.col-badge { background: var(--projects); color: #000; border-radius: 999px; font-weight: 500; }
.col-badge i { background: #000; }
.col-badge.lead { background: var(--clients); color: #000; }
.col-badge.lead i { background: #000; }
.details dt { color: var(--muted); }
.cols { gap: 12px; }
.cols > .wide, .cols > .narrow { gap: 12px; }
.msg { border-top-color: var(--line); }
.msg .body { background: var(--char); border-radius: 16px; }

/* ---------- messages with a couple ---------- */
.inbox { background: transparent; border: 0; padding: 0; gap: 12px; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); min-height: calc(100vh - 330px); overflow: visible; }
.inbox-list { border-right: 0; gap: 12px; overflow: visible; }
.inbox-item { border: 1px solid var(--line2); border-radius: 22px; padding: 18px 20px; gap: 14px; align-items: center; }
.inbox-item:hover { background: var(--char); }
.inbox-item[aria-current="true"] { background: var(--clients); border-color: var(--clients); color: #000; --muted: rgba(0, 0, 0, .65); --ink: #000; }
.inbox-item[aria-current="true"] .count { background: #000; color: var(--off); }
.inbox-item b { font-size: 17px; font-weight: 500; }
.mono-ring { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; }
.inbox-item .snippet { font-size: 14px; margin-top: 2px; }
.inbox-item.unread .snippet { font-weight: 500; }
.inbox-thread { border: 1px solid var(--line2); border-radius: var(--r-card); padding: 26px 28px; gap: 14px; }
.inbox-thread h2 { font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.thread-date { display: inline-flex; margin-top: 6px; padding: 4px 14px; border-radius: 999px; background: var(--projects); color: #000; font-size: 14px; }
.stat-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat-trio > div { display: flex; align-items: center; gap: 22px; min-height: 96px; padding: 16px 30px; border-radius: 24px; font-size: 20px; }
.stat-trio b { font-size: 60px; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.stat-trio .dash { border: 1.5px dashed var(--line2); color: var(--ink); }
.chat-msg.them .chat-bubble { background: var(--clients); color: #000; border-bottom-left-radius: 6px; }
.chat-msg.me .chat-bubble { background: var(--me-bg); color: var(--me-ink); border-bottom-right-radius: 6px; }
.chat-bubble { border-radius: 20px; padding: 11px 16px; font-size: 15px; }
.chat-meta { color: var(--muted); }
.chat-file { border-color: var(--line2); border-radius: 999px; color: var(--ink); padding: 8px 16px; }
.chat-pic { border-color: var(--line2); border-radius: 18px; }
.chat-email { background: transparent; border: 1px dashed var(--line2); border-radius: 999px; color: var(--muted); }
.chat-email[open] { border-radius: 18px; }
.chat-email-body { color: var(--ink2); }
.chat-compose { border: 0; background: transparent; padding: 0; gap: 10px; align-items: center; }
.chat-compose textarea { scrollbar-width: none; overflow-y: auto; border: 1px solid var(--line2) !important; border-radius: 999px; padding: 14px 22px; min-height: 54px; max-height: 160px; font-size: 15px; }
.chat-compose:focus-within textarea { border-color: var(--off) !important; }
.chat-compose:focus-within { border-color: transparent; }
.chat-attach { order: 2; width: 54px; height: 54px; border: 1px solid var(--line2); color: var(--ink); }
.chat-attach:hover { background: var(--char2); }
.chat-send { order: 3; width: 54px; height: 54px; background: var(--clients); color: #000; }
.chat-send svg { width: 20px; height: 20px; }
#couple-panel.has-new { border-color: var(--clients); }

/* ---------- tasks, reports, KPIs, team, contacts, leads ---------- */
.kcol { background: transparent; border: 1px solid var(--line2); border-radius: var(--r-card); padding: 14px; }
.kcol.over { outline-color: var(--tasks); }
.kcol h2 { text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.kcard { background: var(--tasks); border: 0; border-radius: 20px; color: #0B0B0B; padding: 16px 12px 16px 18px;
  --ink: #0B0B0B; --muted: rgba(0, 0, 0, .62); --accent: #000; --line: rgba(0, 0, 0, .17); --line2: rgba(0, 0, 0, .4); }
.kcard.late { border: 0; box-shadow: inset 0 0 0 2px #000; }
.kcard[data-open-task]:hover, .kcard[data-open-task]:focus-within { box-shadow: none; transform: translateY(-2px); }
.kcard .title { font-weight: 500; }
.kcard .tag-chip { border-color: rgba(0, 0, 0, .4); color: #000; }
.sprint-block.current { border: 1.5px solid var(--tasks); }
.sprint-block.current .eyebrow { color: var(--tasks); }
.eyebrow { color: var(--muted); font-weight: 500; letter-spacing: .14em; }
.kpi-card { background: var(--insight); border: 0; border-radius: var(--r-card); padding: 26px; color: #0B0B0B;
  --ink: #0B0B0B; --ink2: #1E1E1C; --muted: rgba(0, 0, 0, .62); --line: rgba(0, 0, 0, .2); --accent: #000; }
.kpi-card:hover, .kpi-card:focus-visible { border: 0; box-shadow: none; transform: translateY(-2px); }
.kpi-card .figure { font-size: 40px; letter-spacing: -.03em; }
.kpi-card .name { font-weight: 500; }
.kpi-bar { background: rgba(127, 127, 127, .25); height: 4px; }
.kpi-bar i { background: var(--ink); }
.kpi-bar i.amber { background: var(--money); } .kpi-bar i.red { background: var(--clients); }
.kpi-card .kpi-bar i, .kpi-card .kpi-bar i.amber, .kpi-card .kpi-bar i.red { background: #000; }
.kpi-tip { background: var(--canvas-ink); color: var(--canvas); }
.kpi-step { background: var(--canvas-ink); color: var(--canvas); }
.kpi-figure { font-size: 44px; letter-spacing: -.03em; }
.member-card { background: transparent; border: 1px solid var(--line2); border-radius: var(--r-card); padding: 24px; }
.member-card:hover, .member-card:focus-visible { border-color: var(--insight); box-shadow: inset 0 0 0 1px var(--insight); }
.member-card .foot { border-top-color: var(--line); }
.avatar.big { background: var(--insight); color: #000; }
.report-nums b, .kpi-nums b { font-size: 34px; letter-spacing: -.02em; }
.lead-bar .track i { background: var(--clients); }
.lead-row .said { color: var(--ink2); }

/* ---------- phone ---------- */
@media (max-width: 700px) {
  main { padding: 16px 14px 20px; }
  h1 { font-size: 34px; }
  .topbar .ticker, .top-search, .top-pill.alerts span { display: none; }
  .tabbar { background: var(--canvas); border-top-color: var(--line2); }
  .tabbar .tab { color: var(--muted); }
  .tabbar .tab[aria-current="page"] { color: var(--projects); }
  .tab-add { background: var(--projects); color: #000; border-color: var(--canvas); box-shadow: none; }
  .phone-sheet:not([hidden]) { background: var(--canvas); border: 1px solid var(--line2); box-shadow: none; }
  .sheet-item, .sheet-row { border-color: var(--line2); color: var(--ink); }
  .sheet-item.on { background: var(--projects); border-color: var(--projects); color: #000; }
  .today-cards { grid-template-columns: minmax(0, 1fr); }
  .t-card { padding: 24px; }
  .t-big .t-count { font-size: 56px; }
  .stat-trio { grid-template-columns: minmax(0, 1fr); }
  .stat-trio b { font-size: 44px; }
  .inbox-thread { border-radius: 22px; padding: 18px; }
  table.pay tr { border-bottom-color: var(--line); }
}
@media (prefers-reduced-motion: reduce) { .card, .kcard, .kpi-card { transition: none; } .card:hover, .kcard:hover, .kpi-card:hover { transform: none; } }

/* ---------- printable invoice and quote: a white sheet of paper on the black page ---------- */
.sheet:not(.phone-sheet) { --ink: #111; --ink2: #333; --muted: #6A6A64; --line: #E3E3DD; --line2: #CBCBC4; --accent: #000; --accent-dark: #000; --surface: #F4F3EC;
  color: #111; border-radius: 22px; }
.sheet:not(.phone-sheet) h1 { color: #111; font-size: clamp(26px, 3vw, 40px); }
.sheet:not(.phone-sheet) .pill { color: #111; }
@media print { .sheet { border-radius: 0; } body { background: #fff !important; } }
@media (max-width: 1100px) { .today { grid-template-columns: minmax(0, 1fr); } }

/* ---------- motion: cards rise in with a short stagger, bars grow, numbers count up (common.js), pills slide.
   Only while the page opens (html.era-enter), so the refresh every minute does not replay it.
   Fill mode "backwards": no transform stays on the cards afterwards, so the fixed "..." menus keep their place. ---------- */
@keyframes era-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes era-fade { from { opacity: 0; } }
@keyframes era-grow { from { transform: scaleX(0); } }
.era-enter :is(.t-card, .ev, .ev-add, .card, .kcard, .kpi-card, .member-card, main > .panel, .cols .panel, .lead-stack > .panel, .stat-trio > div, .inbox-item, .inbox-thread, .column-head, .report-cards > .panel) {
  animation: era-rise .55s cubic-bezier(.2, .75, .25, 1) backwards; }
.era-enter :is(.today-cards, .agenda-rail, .cards, .stat-trio, .inbox-list, .kpi-cards, .member-cards, .board, .cols > .wide, .cols > .narrow, .report-cards) > :nth-child(2) { animation-delay: .06s; }
.era-enter :is(.today-cards, .agenda-rail, .cards, .stat-trio, .inbox-list, .kpi-cards, .member-cards, .board, .cols > .wide, .cols > .narrow, .report-cards) > :nth-child(3) { animation-delay: .12s; }
.era-enter :is(.today-cards, .agenda-rail, .cards, .stat-trio, .inbox-list, .kpi-cards, .member-cards, .board, .cols > .wide, .cols > .narrow, .report-cards) > :nth-child(4) { animation-delay: .18s; }
.era-enter :is(.today-cards, .agenda-rail, .cards, .stat-trio, .inbox-list, .kpi-cards, .member-cards, .board, .cols > .wide, .cols > .narrow, .report-cards) > :nth-child(5) { animation-delay: .24s; }
.era-enter :is(.today-cards, .agenda-rail, .cards, .stat-trio, .inbox-list, .kpi-cards, .member-cards, .board, .cols > .wide, .cols > .narrow, .report-cards) > :nth-child(n+6) { animation-delay: .3s; }
.era-enter h1, .era-enter .topbar { animation: era-fade .6s ease backwards; }
.era-enter h1 .solid { animation: era-rise .6s .08s cubic-bezier(.2, .75, .25, 1) backwards; }
.era-enter :is(.bar i, .kpi-bar i, .lead-bar .track i, .tl .line) { transform-origin: left center; animation: era-grow .9s .25s cubic-bezier(.2, .75, .25, 1) backwards; }
.btn, .seg button, .segmented button, .tabs button, .side a, .top-pill, .t-expand, .icon-btn, .mp, .inbox-item, .ev, .chat-send, .add-column {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.btn:active, .chat-send:active, .t-expand:active { transform: scale(.97); }
.t-card[class*="area-"], .ev, .kpi-card, .member-card { transition: transform .2s ease; }
.t-card[class*="area-"]:hover, a.ev:hover { transform: translateY(-2px); }
.chat-msg { animation: era-rise .35s cubic-bezier(.2, .75, .25, 1) backwards; }
.menu-list:not([hidden]), .filter-panel { animation: era-rise .18s ease-out backwards; }
dialog[open] { animation: era-rise .28s cubic-bezier(.2, .75, .25, 1); }
.inv-panel:not([hidden]) { animation: era-slide .32s cubic-bezier(.2, .75, .25, 1); }
@keyframes era-slide { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.contact-pick > label.field, dialog form > label.field { flex: 0 0 auto; }
.kcard, .card, .kpi-card { --danger: #000; --danger-dark: #000; --warn: #000; }
.kcard .danger-text, .card .danger-text { font-weight: 600; }

/* ---------- dashboards: each page's band of charts (js/dashboards.js, js/era-charts.js) ---------- */
.dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1250px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dash { grid-template-columns: minmax(0, 1fr); } .dash-card { grid-column: auto !important; } }
.dash-card { position: relative; border: 1px solid var(--line2); border-radius: var(--r-card); padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-head { display: flex; align-items: center; gap: 8px; }
.dash-head h2 { border: 1px solid currentColor; border-radius: 999px; padding: 5px 16px; font-size: 15px; font-weight: 400; line-height: 1.25; }
.dash-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dash-big strong { font-size: 48px; line-height: 1; font-weight: 500; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.dash-big span { font-size: 15px; color: var(--muted); }
.ec { position: relative; }
.ec svg { display: block; width: 100%; height: auto; overflow: visible; }
.ec-grid { stroke: var(--line); stroke-width: 1; }
.ec-axis { fill: var(--muted); font: 500 12px var(--font); font-variant-numeric: tabular-nums; }
.ec-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ec-dot { stroke: var(--canvas); stroke-width: 2; }
[class*="area-"] .ec-dot { stroke: var(--money); }
.ec-hit { fill: transparent; cursor: crosshair; }
.ec-cross { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.ec-peak rect { fill: var(--ink); }
.ec-peak text { fill: var(--canvas); font: 600 11px var(--font); }
[class*="area-"] .ec-peak text { fill: var(--off); }
.ec-tip { position: absolute; z-index: 5; pointer-events: none; background: #000; color: var(--off); border: 1px solid #48483F; border-radius: 999px; padding: 5px 12px; font-size: 13px; white-space: nowrap; }
.ec-tracks, .ec-funnel { display: flex; flex-direction: column; }
.ec-track, .ec-stage { display: grid; grid-template-columns: minmax(70px, 38%) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 7px 0; font-size: 14px; cursor: default; }
.ec-stage { grid-template-columns: minmax(70px, 30%) minmax(0, 1fr) auto 42px; }
.ec-track .lbl, .ec-stage .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-track b, .ec-stage b { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.ec-stage .pct { color: var(--muted); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.ec-track .trk, .ec-stage .bar { position: relative; height: 1px; background: var(--line2); }
.ec-track .trk i, .ec-stage .bar i { position: absolute; left: 0; top: -3px; height: 7px; border-radius: 4px; }
.ec-track:hover .lbl, .ec-stage:hover .lbl { text-decoration: underline; text-underline-offset: 3px; }
.ec-ring { position: relative; display: grid; place-items: center; align-self: center; margin: 4px 0; }
.ec-ring-track { fill: none; stroke: var(--line); stroke-width: 12; }
.ec-ring-mid { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 96px; }
.ec-ring-mid b { font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.ec-ring-mid small { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.2; }
.ec-split { display: flex; flex-direction: column; gap: 12px; }
.ec-split-row { display: flex; gap: 3px; height: 72px; }
.ec-split-row span { border-radius: 8px; min-width: 6px; }
.ec-split .pa { background: var(--ink); }
.ec-split .pb { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.ec-split-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.ec-split-key span { display: inline-flex; align-items: center; gap: 8px; }
.ec-split-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ec-split-key b { font-weight: 500; }
.ec-data { font-size: 13px; margin-top: -4px; }
.ec-data summary { cursor: pointer; color: var(--muted); width: max-content; }
.ec-data summary:hover { color: var(--ink); }
.ec-data table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.ec-data td, .ec-data th { padding: 4px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.ec-data td:last-child, .ec-data th:last-child { text-align: right; }
.ec-data th { color: var(--muted); font-size: 12px; }
.ec-empty { color: var(--muted); font-size: 14px; margin: 6px 0; }
/* motion: the first drawing of a dashboard */
@keyframes era-up { from { transform: scaleY(0); } }
@keyframes era-draw { from { stroke-dashoffset: 1400; } }
@keyframes era-ring { from { stroke-dasharray: 0 400; } }
.dash-in .dash-card { animation: era-rise .55s cubic-bezier(.2, .75, .25, 1) backwards; }
.dash-in .dash-card:nth-child(2) { animation-delay: .07s; } .dash-in .dash-card:nth-child(3) { animation-delay: .14s; }
.dash-in .dash-card:nth-child(4) { animation-delay: .21s; } .dash-in .dash-card:nth-child(n+5) { animation-delay: .28s; }
.dash-in .ec-bar { transform-box: fill-box; transform-origin: bottom; animation: era-up .8s .2s cubic-bezier(.2, .75, .25, 1) backwards; }
.dash-in .ec-line { stroke-dasharray: 1400; animation: era-draw 1.3s .2s cubic-bezier(.3, .6, .2, 1) backwards; }
.dash-in .ec-ring-fill { animation: era-ring 1.1s .2s cubic-bezier(.2, .75, .25, 1) backwards; }
.dash-in :is(.ec-track i, .ec-stage i) { transform-origin: left center; animation: era-grow .9s .2s cubic-bezier(.2, .75, .25, 1) backwards; }
.dash-in .ec-split-row span { transform-origin: left center; animation: era-grow .9s .2s cubic-bezier(.2, .75, .25, 1) backwards; }
@media (prefers-reduced-motion: reduce) { .dash-in * { animation: none !important; } }

/* ---------- light theme: off-white canvas, black ink; the area colours stay the same (html[data-theme="light"], js/theme.js) ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #ECEBE3; --canvas-ink: #0B0B0B; --panel: #F4F3EC; --me-bg: #0B0B0B; --me-ink: #E8E8DF; --primary-hover: #C8D6C5;
  --char: #E2E1D8; --char2: #DAD9CF;
  --ink: #0B0B0B; --ink2: #2B2B28; --muted: #66665E; --line: #D2D1C7; --line2: #ADACA2;
  --accent: #0B0B0B; --accent-dark: #000; --accent-soft: rgba(0, 0, 0, .06);
  --danger: #E0441B; --danger-dark: #B5330F; --danger-line: rgba(224, 68, 27, .5); --warn: #6E6000;
  /* marks and menu icons drawn on the off-white canvas: the pale area colours need a deeper step to be seen */
  --mark-projects: #86A882; --mark-money: #D4C21C; --mark-tasks: #8A7AA3; --mark-insight: #8F8200; --mark-clients: #FF5128;
}
:root[data-theme="light"] .area-projects, :root[data-theme="light"] .card, :root[data-theme="light"] .ev.area-projects { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
:root[data-theme="light"] .pill.green { background: var(--projects); color: #000; border-color: transparent; }
:root[data-theme="light"] .pill.amber { background: var(--money); color: #000; border-color: transparent; }
:root[data-theme="light"] .pill.red { background: var(--clients); color: #000; border-color: transparent; }
:root[data-theme="light"] .pill.blue { background: var(--tasks); color: #000; border-color: transparent; }
:root[data-theme="light"] .ok-text { color: var(--ink); }
:root[data-theme="light"] .test-banner, :root[data-theme="light"] .check-note { background: var(--money); border-color: var(--money); color: #000; }
:root[data-theme="light"] .tl .lbl.eng b { color: var(--ink); border-color: var(--mark-projects); }
:root[data-theme="light"] .tl .dot, :root[data-theme="light"] .key { background: var(--mark-projects); }
:root[data-theme="light"] .tl .dot.eng, :root[data-theme="light"] .key.eng { background: var(--canvas); border-color: var(--mark-projects); }
:root[data-theme="light"] .ec-tip { border-color: #000; }
:root[data-theme="light"] .safe-chip.bad { color: var(--danger-dark); border-color: var(--danger); }
:root[data-theme="light"] .side a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
/* switching themes cross-fades the colours */
.theme-shift, .theme-shift * { transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, stroke .4s ease !important; }
/* the switch in the top bar */
.theme-btn { cursor: pointer; font: inherit; background: transparent; }
.theme-btn svg { width: 20px; height: 20px; }

/* ---------- Messages (one timeline per person) and its settings, in the brand: works in dark and light ---------- */
.msg, .msg-list, .msg-list-head, .msg-panel, .thread-top, .comp { background: var(--canvas); }
.msg-thread { background: var(--panel); }
.msg-filters .f { background: transparent; color: var(--ink); border-color: var(--line2); }
.msg-filters .f.on { background: var(--canvas-ink); color: var(--canvas); border-color: var(--canvas-ink); }
.msg-item:hover { background: var(--panel); }
.msg-item.on { background: var(--accent-soft); }
.msg-av { background: var(--char2, #1D1D1B); color: var(--canvas-ink); border: 1px solid var(--line2); }
:root[data-theme="light"] .msg-av { background: #fff; }
.kind, .ch { background: transparent !important; border: 1px solid currentColor; border-radius: 999px; font-weight: 600; }
.kind { color: var(--ink2); padding: 1px 7px; }
.kind.client { color: var(--mark-projects, var(--projects)); } .kind.lead { color: var(--mark-clients, var(--clients)); }
.kind.keep { color: var(--mark-tasks, var(--tasks)); }
.ch { color: var(--ink2); } .ch-email { color: var(--mark-clients, var(--clients)); } .ch-portal { color: var(--mark-projects, var(--projects)); }
.ch-form { color: var(--mark-money, var(--money)); } .ch-instagram, .ch-facebook { color: var(--mark-tasks, var(--tasks)); }
.unk { background: transparent; border-color: var(--mark-clients, var(--clients)); color: var(--ink); }
.unk > b { color: var(--mark-clients, var(--clients)); } .unk-row { border-top-color: var(--line); }
.bub { background: var(--canvas); border-color: var(--line2); color: var(--ink); border-radius: 18px; }
.bub.me { background: var(--me-bg); border-color: var(--me-bg); color: var(--me-ink); --muted: rgba(127, 127, 120, .95); }
.bub.me .ch { color: inherit; } .bub.me a { color: inherit; }
.bub.memo { background: var(--money); border-color: var(--money); color: #000; }
.att { background: transparent; color: inherit; border-color: currentColor; }
.stage::before, .stage::after { border-top-color: var(--line2); }
.warn-box, a.warn-box { background: var(--money); border-color: var(--money); color: #000; --muted: rgba(0, 0, 0, .65); }
.warn-box a, .warn-box .link-btn { color: #000; text-decoration: underline; }
.msg-panel h3 { color: var(--muted); }

/* Today: cards never narrower than they can hold. Three columns only on very wide screens; the caption goes
   under the big number and the button under the line when space runs out. */
.today-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 1400px) { .today-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.t-big { flex-wrap: wrap; row-gap: 8px; }
.t-big span { flex: 1 1 140px; min-width: 0; }
.t-line { flex-wrap: wrap; }
.t-line .t-text { flex: 1 1 160px; }
.t-line .btn { margin-left: auto; }

/* Messages: title and charts on top, then the conversations fill the rest of the screen */
main.msg-main { padding: 20px 24px 0; gap: 12px; }
main.msg-main .topbar, main.msg-main .page-head, main.msg-main .dash, main.msg-main .error { flex: 0 0 auto; }
main.msg-main .dash { max-height: 320px; }
main.msg-main .dash .dash-card { padding: 16px 20px; gap: 8px; }
main.msg-main .dash svg { max-height: 150px; }
body.dash-folded main.msg-main .dash { display: none; }
.msg { border: 1px solid var(--line2); border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; }
@media (max-width: 800px) { main.msg-main { padding: 16px 12px 0; } .msg { border-radius: 18px; } }
/* the page scrolls past the title and charts; the conversations then take a full screen height,
   with the list and the conversation each scrolling on their own */
main.msg-main { height: auto; overflow: visible; }
main.msg-main .msg { flex: 0 0 auto; height: calc(100vh - 24px); min-height: 520px; }
body.dash-folded main.msg-main .msg { height: calc(100vh - 345px); }
@media (max-width: 800px) { main.msg-main .msg, body.dash-folded main.msg-main .msg { height: auto; } }

/* Project page journey: the dot sits on the page background; light theme uses the darker marks */
.pj-dot { background: var(--canvas); }
:root[data-theme="light"] .pj-steps li.done::before, :root[data-theme="light"] .pj-steps li.now::before { background: var(--mark-projects); }
:root[data-theme="light"] .pj-steps li.done .pj-dot { background: var(--mark-projects); border-color: var(--mark-projects); }
:root[data-theme="light"] .pj-steps li.now .pj-dot { border-color: #0B0B0B; box-shadow: 0 0 0 4px rgba(212, 194, 28, .45); }
:root[data-theme="light"] .pj-steps li.now b { color: #0B0B0B; }
:root[data-theme="light"] .opened-yes::before { color: var(--mark-projects); }

/* charts turned off in Today › Customize: no band, and no fold button on Messages */
body.dash-off #dash-toggle { display: none; }

/* the logo: off-white on the dark theme, black on the light one */
.brand .logo { display: block; height: 46px; width: auto; max-width: 100%; }
.brand .logo-light { display: none; }
:root[data-theme="light"] .brand .logo-dark { display: none; }
:root[data-theme="light"] .brand .logo-light { display: block; }
.side .brand { padding-top: 4px; }
.side .brand a { display: inline-block; border-radius: 8px; }
.login-card .brand .logo { height: 54px; margin: 0 auto; }

/* Templates > Tasks: the tag picker looks like the other fields */
.tt-tags summary { border-color: var(--line2); border-radius: 999px; padding: 4px 12px; min-height: 100%; }
.tt-row { align-items: stretch; }
.tt-tag-menu { border-radius: 16px; }
/* Settings: a folded box is just its title row */
.panel.folded { padding-top: 16px; padding-bottom: 16px; }
/* light theme on a phone: the current bottom tab in black ink (the pale green is unreadable on the light canvas) */
:root[data-theme="light"] .tabbar .tab[aria-current="page"] { color: var(--ink); }
/* a "..." menu opened from a coloured card keeps the page's red for "Delete", not the card's black */
:is(.card, .kcard, .kpi-card, [class*="area-"]) .menu-list .danger { color: #FF7A5C; }
:root[data-theme="light"] :is(.card, .kcard, .kpi-card, [class*="area-"]) .menu-list .danger { color: #B5330F; }

/* stacked columns (narrow screens): every panel takes the full width instead of shrinking to its content */
@media (max-width: 700px) { .cols { align-items: stretch; } }