/* Billfish, September 2026. Semantic colors cover every legacy component.
   Legacy geometry is isolated in @layer legacy; this is the current visual contract. */
:root {
  color-scheme: light;
  --surface: #ffffff; --shell: #f6f7fa; --shell-2: #edf0f5; --paper: var(--shell);
  --ink: #202434; --ink-muted: #60697c; --ink-soft: #525d72;
  --rule: #e5e8f0; --rule-strong: #d5dbe6; --control-border: #8791a4;
  --brand: #000059; --accent: #373d9b; --accent-hi: #242978; --accent-weak: #eeeffb;
  --hover: #f1f3f8; --hover-strong: #e6eaf3;
  --clear: #237452; --due-soon: #886112; --overdue: #ae3c45; --neutral: #647086;
  --delta-up: #226d4a; --delta-up-bg: #e7f5ec; --delta-down: #a73542; --delta-down-bg: #fbecef;
  --warn-soft: #faf3df; --bad-soft: #fbecef; --good-soft: #e7f5ec;
  --fs-title: 26px; --fs-h2: 16px; --fs-body: 14px; --fs-dense: 13px; --fs-label: 12px;
  --radius: 8px; --radius-lg: 12px; --side-w: 232px; --row: 46px;
  --shadow-xs: 0 1px 2px #17204708; --shadow-sm: var(--shadow-xs);
  --shadow-md: 0 5px 18px #17204710; --shadow-float: 0 16px 48px #14193626, 0 2px 8px #1419360a;
  --top-h: 0px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #171717; --shell: #0a0a0a; --shell-2: #222222;
  --ink: #f5f5f5; --ink-muted: #a8a8a8; --ink-soft: #bdbdbd;
  --rule: #303030; --rule-strong: #454545; --control-border: #808080;
  --brand: #ffffff; --accent: #eeeeee; --accent-hi: #ffffff; --accent-weak: #303030;
  --hover: #252525; --hover-strong: #353535;
  --clear: #82d5ae; --due-soon: #e6bf74; --overdue: #ff9da7; --neutral: #a8a8a8;
  --delta-up: #91dfb4; --delta-up-bg: #203d32; --delta-down: #ffadb7; --delta-down-bg: #482d37;
  --warn-soft: #3d3422; --bad-soft: #482d37; --good-soft: #203d32;
  --shadow-xs: 0 1px 2px #0000001f; --shadow-md: 0 5px 18px #00000026;
  --shadow-float: 0 16px 48px #00000066, 0 2px 8px #00000033;
  --status-gray: #dedede; --status-gray-bg: #353535;
  --status-brown: #e5c4a6; --status-brown-bg: #43352e;
  --status-orange: #ffc28e; --status-orange-bg: #493425;
  --status-yellow: #f2d78e; --status-yellow-bg: #403922;
  --status-green: #a0dfb0; --status-green-bg: #293e31;
  --status-blue: #abcfff; --status-blue-bg: #293b54;
  --status-purple: #cdb8ff; --status-purple-bg: #3b3152;
  --status-pink: #f4b8d8; --status-pink-bg: #482f43;
  --status-red: #ffb3b1; --status-red-bg: #492e34;
}
html, body { background: var(--shell); color: var(--ink); }
.app { background:var(--surface); color:var(--ink); }
body { font-size: var(--fs-body); }
main { max-width: 1600px; padding: 32px 36px 64px; }
main:focus { outline: none; }
h1, .page-head h1, .identity-head h1, .record-head h1 { font-size: var(--fs-title); line-height: 1.25; letter-spacing: -.025em; }
h2, .section-head h2, .set h2, .set-section h2 { font-size: var(--fs-h2); letter-spacing: 0; }
h3, .set h3 { font-size: var(--fs-body); }
.page-head { margin-bottom: 26px; align-items: center; }
.page-head .sub { margin-top: 7px; font-size: 13px; line-height: 1.6; }
a { color: var(--accent); }
.caption, .label, .filters label, .toolbar label { font-size: var(--fs-label); color: var(--ink-muted); letter-spacing: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 500; background: var(--surface); color: var(--accent); padding: 12px 20px; border: 2px solid var(--accent); border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-weak); color: var(--ink); }

/* Workspace chrome */
.sidebar { position: sticky; top: 0; height: 100dvh; margin: 0; border: 0; border-right: 1px solid var(--rule); border-radius: 0; box-shadow: none; background: var(--shell); overflow: visible; padding: 0 12px; }
.brand-lockup { display:flex; align-items:center; min-height:60px; padding:12px 12px 8px; }
.brand-lockup img { display:block; width:108px; height:auto; }
.brand-dark { display: none; }
.brand-lockup .brand-dark { display:none; }
[data-theme="dark"] .brand-light { display: none; }
[data-theme="dark"] .brand-dark { display: block; }
[data-theme="dark"] .brand-lockup .brand-dark { display:block; }
.side-firm { margin:0 2px 24px; padding:9px 10px; gap:9px; min-height:42px; border:1px solid var(--rule); border-radius:9px; background:var(--surface); font-size:12px; }
.side-firm.workspace-brand::before { display:none; }
.side-firm::after { display: none; }
.side-firm > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.workspace-brand:hover { background:var(--hover); border-color:var(--rule-strong); }
.workspace-logo, .side-firm.workspace-brand > span.workspace-fallback { width:24px; height:24px; flex:0 0 24px; }
.workspace-logo { display:block; object-fit:contain; }
.workspace-fallback { display:grid; place-items:center; border-radius:6px; background:var(--ink); color:var(--surface); font-size:10px; font-weight:700; }
.workspace-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; color:var(--ink); }
.workspace-wordmark { display:block; width:auto; max-width:166px; height:auto; max-height:28px; object-fit:contain; object-position:left center; }
.workspace-brand[data-brand-mode="logo"] { justify-content:flex-start; }
.nav-section-label { padding: 0 12px 8px; color: var(--ink-muted); font-size: 11px; font-weight: 500; }
.side-nav { gap: 4px; padding: 0; }
.side-link, .side-link[data-key="leads"] { min-height: 39px; border: 0; margin: 0; padding: 0 12px; border-radius: 7px; background: transparent; box-shadow: none; color: var(--ink-soft); font-size: 13px; font-weight: 500; overflow: visible; }
.side-link::before, .side-link::after { display: none; }
.side-link .label { font: inherit; color: inherit; }
.side-link .icon, .side-link[data-key="leads"] .icon { width: 17px; height: 17px; color: var(--ink-muted); }
.side-link:hover, .side-link[data-key="leads"]:hover { background: var(--hover); box-shadow: none; }
.side-link[aria-current="page"], .side-link[data-key="leads"][aria-current="page"] { background: var(--accent-weak); color: var(--accent); box-shadow: none; font-weight: 600; }
.side-link[aria-current="page"] .icon { color: var(--accent); }
.side-link[data-key="leads"] { margin-top: 16px; }
.side-link .count { padding: 0 5px; min-width: 20px; border-radius: 5px; background: var(--bad-soft); color: var(--overdue); text-align: center; }
.side-bottom { margin-top: auto; padding: 24px 0 16px; display: grid; gap: 6px; }
.side-bottom a { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 12px; border-radius: 7px; color: var(--ink-muted); font-size: 12px; }
.side-bottom a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.side-bottom a[aria-current] { background: var(--accent-weak); color: var(--accent); }
.side-user { margin: 0 -2px 8px; border-top: 1px solid var(--rule); border-radius: 0; }
.side-user > summary { min-height: 64px; padding: 12px 8px; }
.side-user .name { font-size: 12px; }
.side-user .caption { font-size: 11px; }
.side-user.menu .sheet { bottom: 70px; left: 0; right: 0; }
.avatar { border-radius: 50%; background: var(--accent-weak); color: var(--accent); }
.frame { background: var(--surface); }
.topbar { display: flex; position: relative; align-items: center; justify-content: space-between; height: 62px; min-height: 62px; padding: 0 36px; border-bottom: 1px solid var(--rule); background: var(--surface); gap: 16px; }
.workspace-crumb { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); font-size: 12px; min-width: 0; }
.workspace-crumb strong { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.notification-btn { color: var(--ink-muted); }
.notification-btn:hover { color: var(--ink); background: var(--hover); }
.leads-tabs { margin: -12px 0 22px; }
.workspace-search { width: 250px; justify-content: flex-start; background: var(--shell); color: var(--ink-muted); border-color: var(--rule); font-size: 12px; box-shadow: none; }
.workspace-search .key { margin-left: auto; font-size: 10px; }
.theme-toggle { font-size: 23px; width: 34px; min-height: 34px; }
.theme-sun, [data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: inline; }
.open-auth-banner { position: relative; background: var(--warn-soft); color: var(--due-soon); border: 0; border-bottom: 1px solid var(--rule); padding: 10px 24px; font-size: 12px; text-align: center; }
.open-auth-banner a { color: inherit; text-decoration: underline; }

/* Shared controls. Native inputs, persistent labels, visible keyboard focus. */
button, .btn { min-height: 34px; border: 1px solid var(--rule-strong); border-radius: 7px; padding: 6px 11px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); font-size: 13px; }
button:hover, .btn:hover { background: var(--hover); border-color: var(--control-border); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); box-shadow: var(--shadow-xs); }
button.primary:hover, .btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--surface); }
button.quiet, .btn.quiet, .icon-btn.quiet, .text-link { box-shadow: none; background: transparent; border-color: transparent; }
button.small, .btn.small { min-height: 30px; font-size: 12px; }
button.danger, .btn.danger { color: var(--overdue); }
button:disabled { cursor: not-allowed; }
input, select, textarea { border-color: var(--control-border); background-color: var(--surface); min-height: 36px; border-radius: 7px; font-size: 13px; padding: 7px 10px; }
select { padding-right: 28px; }
input[type=search] { background: var(--shell); border-color: var(--control-border); }
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; min-height: 17px; padding: 0; border-color: var(--control-border); box-shadow: none; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--accent); }
input[type=checkbox]:checked, input[type=radio]:checked { background-color: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after { border-color: var(--surface); }
input[type=radio]:checked { box-shadow: inset 0 0 0 3px var(--surface); }
.seg { padding: 3px; border: 1px solid var(--rule); background: var(--shell); border-radius: 8px; gap: 2px; }
.seg a, .seg button { min-height: 28px; border: 0; padding: 4px 12px; border-radius: 5px; background: transparent; color: var(--ink-muted); font-size: 12px; box-shadow: none; }
.seg a[aria-current], .seg .on, .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.tabrow, .tabs { border-bottom: 1px solid var(--rule); gap: 22px; }
.tabrow a, .tabs > a { padding: 12px 0; min-height: 42px; font-size: 13px; color: var(--ink-muted); }
.tabrow a[aria-current], .tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* Lists, tables and records */
.list-top, .list-bulk { min-height: 60px; padding: 12px 0; background: var(--surface); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.list-top::before, .list-top::after, .list-table thead th::before, .list-table thead th::after { display: none; }
.list-top h1, .list-top .view-menu h1 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.today-page .list-top h1 { font-size: 16px; letter-spacing: 0; }
.list-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.list-top .search input, .list-top .btn, .list-bulk .btn { height: 34px; min-height: 34px; }
.list-top .search { width: 195px; }
.list-top .search input { width: 100%; }
.list-bulk { padding: 12px; background: var(--accent-weak); border-radius: 8px 8px 0 0; }
.list-table, .table-plain, .table-wrap { background: var(--surface); border-color: var(--rule); border-radius: 10px; box-shadow: none; }
.list-table table, table { font-size: 13px; }
th, .list-table thead th { height: 40px; padding: 9px 14px; background: var(--shell); color: var(--ink-muted); border-color: var(--rule); font-size: 12px; font-weight: 500; letter-spacing: 0; box-shadow: inset 0 -1px var(--rule); backdrop-filter: none; -webkit-backdrop-filter: none; }
th a { color: inherit; }
td, .list-table td, .list.dense td { height: var(--row); padding: 10px 14px; border-color: var(--rule); font-size: 13px; }
.list-table td + td, .list-table th + th { border-left: 0; }
.list-table td.check, .list-table th.check { width: 40px; padding-left: 14px; padding-right: 8px; }
tbody tr:hover, .list-table tr:hover td { background: var(--hover); }
.list-table tr.selected td, .list-table tr.peeked td { background: var(--accent-weak); }
.list-table tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.list-pagination { padding: 14px 2px; font-size: 12px; color: var(--ink-muted); }
.list + .list, .today-main > .list + .list { margin-top: 20px; }
.toolbar { padding: 12px; background: var(--shell); border: 1px solid var(--rule); border-radius: 9px; }
.list-layout { gap: 28px; }
aside.list-rail, aside.filters-rail { background: var(--shell); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 14px; }
.list-rail h2, .filters-rail h2 { font-size: 12px; color: var(--ink-muted); }
.list-rail a, .filters-rail a { padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.list-rail a[aria-current], .filters-rail a[aria-current] { background: var(--accent-weak); color: var(--accent); }
.card, .widget, .panel, .record-main, .peek-panel { background: var(--surface); border-color: var(--rule); box-shadow: none; }
.card { border-radius: 12px; padding: 22px; }
.card.flat { padding: 0; }
.record-head { padding-bottom: 0; }
.record-body { gap: 32px; }
.record-rail { background: var(--shell); border-color: var(--rule); padding: 20px; border-radius: 10px; }
.field-cell { border-color: var(--rule); }
.field-label { color: var(--ink-muted); font-size: 12px; }
.board-col, .kanban-col { background: var(--shell); border-color: var(--rule); border-radius: 10px; }
.board-card, .kanban-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 9px; box-shadow: var(--shadow-xs); }
.board-col-head { padding: 14px; }
.empty, .today-empty { color: var(--ink-muted); padding: 32px 20px; }
.empty .empty-mark { background: var(--accent-weak); color: var(--accent); border-color: var(--rule); }
.empty::before { border-color: var(--rule-strong); }
.notice, .flash { background: var(--shell); color: var(--ink); padding: 14px 18px; border: 1px solid var(--rule); border-radius: 9px; }
.notice .icon { color: var(--ink-muted); }
.status-pill, select.status-select { min-height: 24px; font-size: 12px; }
.swatch-picker label { width: 26px; height: 26px; }
.row-actions { opacity: 1; }
[data-density="compact"] { --row: 34px; }
[data-density="compact"] td, [data-density="compact"] .list-table td, [data-density="compact"] .list.dense td { padding-top: 5px; padding-bottom: 5px; }

/* Overview: each number has a destination, each section a job. */
.today-page .page-head h1 { font-size: 28px; }
.today-page .cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.today-page .cards .card-stat { min-height:104px; padding:12px 14px; }
.today-page .cards .card-stat .foot { min-height:24px; padding-top:4px; }
.card-stat { border: 1px solid var(--rule); border-radius: 10px; padding: 15px 16px; box-shadow: none; min-height: 104px; background: var(--surface); }
.card-stat:last-child { border-right: 1px solid var(--rule); }
.card-stat:hover { background: var(--shell); box-shadow: none; }
.card-stat .l { font-size: 12px; color: var(--ink-muted); }
.card-stat .n { font-size: clamp(22px, 2vw, 29px); line-height: 1.15; margin: 6px 0; letter-spacing: -.03em; }
.card-stat .foot { gap: 7px; }
.card-stat .sub, .card-stat .foot .sub { font-size: 11px; line-height: 1.45; }
.card-stat .delta { font-size: 11px; border-radius: 5px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.stats > .card-stat { border:1px solid var(--rule); border-radius:10px; min-height:104px; }
.chart .bar rect.base, .chart .bar rect.fill { shape-rendering:crispEdges; }
.chart .bar rect.base { rx:0; }
.chart .bar rect.fill { rx:0; }
.today-page .panels { gap: 24px; margin-top: 28px; }
.panel, .widget { border: 1px solid var(--rule); border-radius: 10px; padding: 20px; }
.panel h2, .widget h2 { font-size: 14px; background: transparent; padding: 0 0 12px; }
.panel h2 a { font-size: 12px; }
.queue-disclosure { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 14px; }
.queue-disclosure > summary { font-weight: 500; color: var(--ink-muted); cursor: pointer; padding: 10px 0; }
.first-run { border: 1px solid var(--rule); background: var(--shell); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.first-run-steps { margin: 18px 0 0; gap: 24px; }

/* Menus are opaque: no records bleeding through controls. */
.menu .sheet, .side-user.menu .sheet, dialog.cmdk, dialog.shortcuts-help, .toast { background: var(--surface); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-float); border-radius: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu .sheet::before, .menu .sheet::after, dialog.cmdk::before, dialog.cmdk::after, .toast::before, .toast::after { display: none; }
.menu .sheet a:hover, .menu .sheet button:hover, .cmdk-item.active { background: var(--hover); }
.cmdk-search-row { border-color: var(--rule); }
.cmdk-search-row input { background: transparent; box-shadow: none; }
.cmdk-hints { background: var(--shell); }
.peek-head { background: var(--surface); border-color: var(--rule); }
.peek-scrim, dialog::backdrop { background: #05091880; }
.peek-panel.report-peek .peek-body { padding:24px 24px 40px; }
.peek-panel.report-peek .peek-body > .page-head { margin-top:6px; }
@media(max-width:600px) { .peek-panel.report-peek .peek-body { padding:18px 16px 32px; } }
.chart .grid { stroke: var(--rule); }
.chart .tip rect { fill: var(--ink); }
.chart .tip text { fill: var(--surface); }
.chart .bar .base, .chart .bar .fill { fill: var(--accent); }

/* Settings: searchable destinations, then focused forms. */
.set, .set-index { max-width: 1120px; margin: 0 auto; }
.set .page-head { margin-bottom: 20px; }
.set > .tabrow { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; margin-bottom: 28px; gap: 4px; }
.set > .tabrow a { min-height: 36px; padding: 8px 10px; border-radius: 7px 7px 0 0; font-size: 12px; }
.set-back { color: var(--ink-muted); margin-bottom: 16px; }
.settings-search { display: block; margin-bottom: 26px; max-width: 480px; }
.settings-search input { width: 100%; height: 40px; }
.settings-section-label { margin: 28px 0 14px; font-size: 13px; color: var(--ink-muted); font-weight: 500; }
.set-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.set-group { padding: 22px; }
.set-group h2 { margin-bottom: 6px; }
.set-group .blurb { color: var(--ink-muted); font-size: 13px; margin-bottom: 16px; }
.set-group-status { margin: 10px 0; padding: 10px 12px; background: var(--shell); color: var(--ink-muted); font-size: 12px; border-radius: 7px; border: 0; }
.set-item { display: flex; flex-direction: column; margin: 0 -10px; padding: 11px 10px; border-top: 1px solid var(--rule); border-radius: 8px; color: var(--ink); gap: 3px; }
.set-item:hover { background: var(--hover); text-decoration: none; }
.set-item .t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.set-item .d { font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
.set-tag, .set-tag.admin { border: 0; border-radius: 4px; background: var(--shell-2); color: var(--ink-muted); font-size: 10px; }
.set-section { padding: 26px; }
.set-form { gap: 20px 24px; margin-top: 20px; }
.set-form label { font-size: 13px; color: var(--ink); gap: 7px; }
.set-form .hint { font-size: 12px; color: var(--ink-muted); }
.set-form input { min-height: 40px; }
.set-file { border: 1px solid var(--rule); border-radius: 7px; padding: 12px; margin-top: 16px; background: var(--shell); }
.set-file summary { font-size: 12px; cursor: pointer; color: var(--ink-muted); }
.set-file p { margin-top: 10px; }
.theme-options, .density-options { margin: 22px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.theme-option { position: relative; cursor: pointer; }
.theme-option > input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.theme-preview { display: flex; height: 116px; border: 2px solid var(--rule-strong); border-radius: 10px; overflow: hidden; background: #ffffff; padding: 10px; gap: 10px; }
.theme-preview > i { width: 26%; background: #eceff5; border-radius: 4px; }
.theme-preview > span { display: grid; gap: 9px; width: 74%; align-content: center; }
.theme-preview b { height: 12px; background: #e5e8f0; border-radius: 3px; }
.theme-preview b:first-child { width: 55%; background: #7078ba; }
.preview-dark { background: #171717; }.preview-dark > i { background: #303030; }.preview-dark b { background: #383838; }.preview-dark b:first-child { background: #eeeeee; }
.preview-system { background: linear-gradient(90deg, #ffffff 50%, #171717 50%); }.preview-system b { background: #838ba0; }
.theme-option input:checked + .theme-preview { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
.theme-option input:focus-visible + .theme-preview { outline: 2px solid var(--accent); outline-offset: 4px; }
.theme-label { display: flex; justify-content: space-between; margin-top: 10px; color: var(--ink); font-size: 13px; }
.theme-check { visibility: hidden; color: var(--accent); }.theme-option input:checked ~ .theme-label .theme-check { visibility: visible; }
.density-options { grid-template-columns: 1fr 1fr; }
.density-options label { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--rule-strong); border-radius: 9px; cursor: pointer; color: var(--ink); }
.density-options label:has(input:checked) { background: var(--accent-weak); border-color: var(--accent); }
.density-options strong { font-size: 13px; font-weight: 500; }.density-options .caption { display: block; margin-top: 4px; }
.preference-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; color: var(--ink-muted); font-size: 12px; }

/* Authentication and first visit */
main.bare { max-width: none; min-height: 100dvh; display: grid; place-items: center; padding: 32px; background: var(--shell); }
.auth-page { margin: 0; width: 100%; max-width: 440px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); padding: 42px; box-shadow: var(--shadow-md); text-align: left; }
.auth-brand { display: block; margin-bottom: 38px; }
.auth-brand img { width: 170px; height: auto; }
.auth-page h1 { font-size: 26px; margin-bottom: 12px; }
.auth-page > .muted { line-height: 1.65; font-size: 14px; margin-bottom: 26px; }
.auth-page form { width: 100%; margin: 0; }
.auth-page label { color: var(--ink); font-size: 13px; }
.auth-page input { margin-top: 8px; min-height: 44px; font-size: 15px; }
.auth-page .primary { min-height: 44px; width: 100%; margin-top: 20px; }
.auth-page .caption { line-height: 1.6; margin-top: 18px; }
.auth-help { border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 24px; font-size: 12px; color: var(--ink-muted); }
.auth-help summary { cursor: pointer; font-weight: 500; color: var(--ink); min-height: 28px; }
.auth-page .tile { width: 42px; height: 42px; background: var(--accent-weak); color: var(--accent); margin-bottom: 20px; border: 0; border-radius: 12px; }

@media (max-width: 1200px) {
  main { padding: 26px 24px 48px; }
  .topbar { padding: 0 24px; }
  .card-stat { padding: 18px 12px; }
  .workspace-search { width: 210px; }
  .list-top { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; height: 100dvh; z-index: 40; transform: translateX(-100%); overflow-y: auto; }
  html[data-drawer="open"] .sidebar { transform: translateX(0); }
  .menu-btn { display: inline-flex; }
  .topbar { display: flex; height: 58px; padding: 0 18px; }
  .workspace-crumb > span { display: none; }
  .workspace-crumb { margin-right: auto; }
  .workspace-search { width: auto; background: transparent; border: 0; padding: 7px; }
  .workspace-search span, .workspace-search .key { display: none; }
  .topbar-actions { gap: 5px; }
  .today-page .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-stat { border-bottom: 1px solid var(--rule); }
  .list-layout { grid-template-columns: 1fr; }
  .filters-rail, .list-rail { position: static; display: flex; gap: 24px; flex-wrap: wrap; }
  .list-rail .group { flex: 1; min-width: 160px; }
  .set-groups { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  main { padding: 22px 16px 40px; }
  .open-auth-banner { font-size: 11px; padding: 10px 16px; text-align: left; }
  .today-page .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-stat { min-height: 125px; padding: 16px; }
  .card-stat:last-child { grid-column: 1 / -1; min-height: 110px; }
  .card-stat .n { font-size: 27px; }
  .list-tools { width: 100%; margin: 0; flex-wrap: wrap; }
  .list-top .search { flex: 1; min-width: 100px; width: auto; }
  .list-top h1 { font-size: 22px; }
  .list-top .btn { font-size: 12px; }
  .theme-options { gap: 10px; }
  .theme-preview { height: 86px; padding: 6px; gap: 5px; }
  .density-options { grid-template-columns: 1fr; }
  .set-section, .set-group, .card { padding: 18px; }
  .card.flat { padding: 0; }
  .set-form, .grid.cols-2, .grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .preference-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  main.bare { padding: 20px; }.auth-page { padding: 28px; }
  .record-body { display: block; }.record-rail { margin-top: 24px; }
  .page-head .actions { width: 100%; }
  button, .btn { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --rule: var(--control-border); --rule-strong: var(--control-border); }
}
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --surface: #fff; --shell: #fff; --ink: #111; --ink-muted: #444; --ink-soft: #444; --rule: #ddd; --accent: #000059; }
  .sidebar, .topbar, .open-auth-banner, .skip-link, .toasts, .actions, .list-tools, .set-back { display: none !important; }
  body, .app, .frame, main { background: #fff; color: #111; display: block; width: 100%; margin: 0; padding: 0; }
  [data-theme="dark"] .brand-light { display: block; }[data-theme="dark"] .brand-dark { display: none; }
  .card, .card-stat, .list-table { box-shadow: none; break-inside: avoid; }
}
/* Numeric summaries and record identities retain the primary text color. */
.card-stat .n, .list-table td a:not(.btn):not(.caption), .side-firm { color: var(--ink); }
.list-table td a:hover { color: var(--accent); }
input[type=checkbox] { border-radius: 4px; }
input[type=radio] { border-radius: 50%; }
/* The rail remains operable at short viewport heights. */
.side-nav { flex-shrink: 0; }
@media (min-width: 901px) and (max-height: 680px) {
  .sidebar { overflow-y: auto; }
  .brand-lockup { min-height: 60px; padding-top: 14px; padding-bottom: 14px; }
  .side-firm { margin-bottom: 12px; }.side-link { min-height: 32px; }.side-bottom { padding-top: 12px; padding-bottom: 8px; }
}
.drawer-close { display: none; }
@media (max-width: 900px) { .drawer-close { display: inline-flex; position: absolute; right: 10px; top: 8px; width: 32px; min-height: 32px; font-size: 23px; z-index: 1; } }
/* Wide data stays inside a keyboard-scrollable table, never off the page. */
.list-table, .table-wrap, .table-plain { overflow-x: auto; max-width: 100%; }
.leads-main, .list-layout > *, .record-main, .record-body > * { min-width: 0; }
@media (max-width: 900px) { .list-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .list-chips { flex-wrap: wrap; }.list-chips .chip { white-space: normal; max-width: 100%; }
  .list-top { position: relative; }.list-table { width: 100%; }
  .filters-rail .group, .list-rail .group { min-width: 130px; }
}
.lead-facets { width: 100%; }.lead-facets > summary { display: none; cursor: pointer; min-height: 32px; font-weight: 500; }
@media (max-width: 900px) {
  .lead-facets > summary { display: list-item; padding: 4px 0; }
  .facet-groups { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 14px; }
  .facet-groups .group { margin: 0; border: 0; flex: 1; }
  .lead-facets:not([open]) > .facet-groups { display: none; }
  aside.filters-rail { padding: 10px 16px; }
}
.set-groups > a.set-item { margin: 0; padding: 20px; border: 1px solid var(--rule); }
.inline-form { flex-wrap: wrap; max-width: 100%; gap: 8px; }
.inline-form input[type=file] { width: 100%; max-width: 320px; min-width: 0; }
.auth-theme-toggle { position: absolute; top: 22px; right: 24px; }
.board-col:not(.collapsed) { flex-basis: 260px; width: 260px; }
.bc-title { color: var(--ink); }
/* Sticky column headers are relative to their table's horizontal scrollport. */
.list-table thead th { top: 0; }
/* Fitting desktop tables keep document-sticky headers; only wide tables get a scrollport. */
.list-table { overflow: clip; }
.list-table > .table-wrap { overflow: clip; width: 100%; margin: 0; border: 0; }
.list-table > .table-wrap.scrolls-x { overflow-x: auto; }
.list-table thead th { top: var(--top-h, 0px); }
.list-table > .table-wrap.scrolls-x thead th { position: static; }
.list.selecting .list-chips { display: flex; }
@media (max-width: 900px) {
  .list-table > .table-wrap { overflow-x: auto; }.list-table thead th { position: static; }
}
.list-bulk { margin-bottom: 0; min-height: var(--selection-height, 60px); }
.invoice-lines-scroll { position: relative; overflow-x: auto; margin-top: 16px; }
.lines-table { min-width: 600px; }
@media print { .auth-theme-toggle { display: none; } }

/* Workspace seat viewer: existing profile images with initials when no photo is set. */
.seat-cluster { display:flex; align-items:center; }
.seat-viewer { position: relative; }
.seat-viewer > summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; padding:4px 6px; border-radius:8px; }
.seat-viewer > summary::-webkit-details-marker { display:none; }
.seat-viewer .avatars { display:flex; padding-left:10px; }
.seat-viewer .avatars .avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid var(--surface); margin-left:-10px; }
.seat-viewer .sheet { position:absolute; top:calc(100% + 10px); right:0; width:280px; max-height:380px; overflow:auto; padding:8px; background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow-float); z-index:100; }
.seat-viewer .sheet a { display:flex; align-items:center; gap:10px; padding:10px; border-radius:6px; color:var(--ink); }
.seat-viewer .sheet a:hover { background:var(--hover); }
.seat-viewer .sheet .avatar { margin:0; flex-shrink:0; }
.seat-viewer .seat-role { display:block; color:var(--ink-muted); font-size:12px; }
.seat-viewer .seat-overflow { font-size:12px; color:var(--ink-muted); }
.seat-add { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; margin-left:-16px; border:2px solid var(--surface); border-radius:50%; background:var(--shell-2); color:var(--ink); position:relative; z-index:2; box-shadow:inset 0 0 0 1px var(--rule-strong); }
.seat-add:hover { background:var(--hover); text-decoration:none; }
.seat-add .icon { width:14px; height:14px; }

/* Selection occupies one stable toolbar slot, with no discrete-display animation. */
.list-top, .list-bulk { transition: none; animation: none; }
.list.selecting .list-top { display: none; }
.list > form { width: 100%; max-width: none; display: block; }
.list-bulk { width: 100%; box-sizing: border-box; height: auto; overflow: visible; flex-wrap: wrap; border-radius: 10px; gap: 10px; }
.list.selecting .list-bulk { opacity: 1; }
.list-bulk > span:first-child { white-space: nowrap; padding-right: 8px; }
.list-table td.check input, .list-table th.check input { opacity: 1; }
.list-chips { padding: 10px 0; }
.stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:10px; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.stat.card-stat .n { font-size: clamp(23px, 2vw, 29px); color:var(--ink); }
.stat.card-stat .stat-top { padding:0; }
.stat.card-stat { padding:12px 14px; }
.stat.card-stat .stat-top { margin-bottom:2px; }
.stat.card-stat .stat-row { margin-top:3px; }
.stat.card-stat .n { margin:4px 0 2px; }
.stat.card-stat .delta { margin-top:3px; padding:1px 6px; line-height:1.35; }
.stat.card-stat .n a { color:var(--ink); }
.billing-metrics { grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); margin-bottom:20px; }
.billing-metrics .card-stat { min-height:96px; padding:14px 16px; }
.billing-aging-detail { margin:-12px 0 24px; }
.billing-aging-detail > summary { font-size:12px; color:var(--ink-muted); cursor:pointer; margin-bottom:14px; }
.notification-menu { position:relative; }
.notification-menu > summary { list-style:none; cursor:pointer; position:relative; }
.notification-menu > summary::-webkit-details-marker { display:none; }
.notification-dot { position:absolute; right:5px; top:5px; width:6px; height:6px; border-radius:50%; background:var(--overdue); }
.notification-sheet { position:absolute; right:0; top:calc(100% + 12px); width:320px; max-width:calc(100vw - 36px); background:var(--surface); border:1px solid var(--rule); box-shadow:var(--shadow-float); padding:16px; border-radius:12px; z-index:110; }
.notification-sheet h2 { margin:0 0 12px; }
.notification-sheet a { display:flex; flex-direction:column; gap:5px; padding:12px 0; color:var(--ink); border-top:1px solid var(--rule); }
.notification-sheet p, .notification-sheet a span { color:var(--ink-muted); font-size:12px; }
.engagement-summary { border:1px solid var(--rule); border-radius:12px; padding:20px; margin:20px 0; background:var(--surface); }
.engagement-summary-top, .engagement-summary-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-muted); }
.engagement-summary h2 { font-size:18px; margin:18px 0 24px; }
.engagement-summary a { color:var(--ink); }
.engagement-meta { display:flex; flex-wrap:wrap; gap:24px; margin:0 0 20px; }
.engagement-meta dt { font-size:12px; color:var(--ink-muted); }
.engagement-meta dd { margin:6px 0 0; font-size:14px; }
.engagement-cards .engagement-summary { margin:12px 0; }
.chart .cost-bar .base { opacity:.4; }
.chart-legend { display:inline-flex; gap:6px; align-items:center; margin-right:14px; }
.chart-legend::before { content:""; width:8px; height:8px; background:var(--ink); }
.chart-legend.cost::before { opacity:.25; }
.finance-page .stat .sub { display:none; }
.finance-page td .caption { display:none; }
.email-preview dl { display:grid; grid-template-columns:85px 1fr; gap:12px; padding-bottom:20px; margin:0 0 20px; border-bottom:1px solid var(--rule); }
.email-preview dt { color:var(--ink-muted); font-size:12px; }
.email-preview dd { margin:0; overflow-wrap:anywhere; }
.email-preview p { line-height:1.7; }
.send-setup { color:var(--ink-muted); font-size:13px; line-height:1.6; margin-top:18px; }
.list .selection-form { display:none; margin:0 0 0 auto; width:auto; }
.list.selecting .list-top { display:flex; opacity:1; }
.list.selecting .list-top > .list-tools, .list.selecting .list-top > .btn { display:none; }
.list.selecting .selection-form { display:block; }
.list .list-bulk { position:static; min-height:34px; padding:0; margin:0; border:0; border-radius:0; background:transparent; gap:12px; font-size:12px; }
.list-bulk .spacer { display:none; }
.list-bulk > span:first-child { color:var(--ink-muted); padding:0; }
.list-bulk button { min-height:30px; padding:4px 8px; box-shadow:none; }
.list-bulk [data-clear-selection] { font-size:12px; }
.chart-card .chart .grid { stroke:var(--rule); stroke-width:1; stroke-dasharray:2 4; }
.chart-card .chart .bar .base { fill:var(--ink); opacity:.24; stroke:none; shape-rendering:geometricPrecision; transition:opacity 150ms ease, filter 150ms ease; }
.chart-card .chart .bar.cur .base { fill:var(--ink); opacity:.92; }
.chart-card .chart .bar:hover .base, .chart-card .chart .bar:focus .base { opacity:.7; filter:none; }
.chart-card .chart .bar.cur:hover .base, .chart-card .chart .bar.cur:focus .base { opacity:1; }
.finance-page .chart.pnl { width:min(100%, 640px); margin:0 auto; overflow:visible; }
.finance-page .chart.pnl .grid { stroke:var(--rule); stroke-width:1; stroke-dasharray:2 4; }
.finance-page .chart.pnl .bar .base { stroke:none; shape-rendering:geometricPrecision; transition:opacity 150ms ease, filter 150ms ease; }
.finance-page .chart.pnl .revenue-bar .base { fill:var(--ink); opacity:.92; }
.finance-page .chart.pnl .cost-bar .base { fill:var(--ink); opacity:.22; }
.finance-page .chart.pnl .bar:hover .base, .finance-page .chart.pnl .bar:focus .base { filter:brightness(.82); opacity:1; }
.finance-page .chart.pnl .lab { font-size:10px; }
.finance-primary-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr); gap:14px; margin-top:16px; align-items:stretch; }
.finance-primary-grid > .card { min-width:0; margin:0; }
.outstanding-card { display:flex; flex-direction:column; }
.outstanding-head { align-items:flex-start; margin-bottom:8px; }
.outstanding-head h2 { margin-bottom:3px; }
.outstanding-head p { margin:0; }
.outstanding-list { list-style:none; margin:0; padding:0; }
.outstanding-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--rule); }
.outstanding-main, .outstanding-value { display:flex; flex-direction:column; min-width:0; gap:3px; }
.outstanding-main > a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-weight:600; }
.outstanding-main .caption { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.outstanding-value { align-items:flex-end; text-align:right; white-space:nowrap; }
.outstanding-more { display:block; padding-top:14px; margin-top:auto; border-top:1px solid var(--rule); font-size:12px; color:var(--ink-muted); }
@media(max-width:980px) { .finance-primary-grid { grid-template-columns:minmax(0,1fr); } }
.team-month-card { padding:20px; }
.team-month-card > h2 { margin-bottom:14px; }
.card > .team-month-table { width:100%; max-width:100%; margin:0; border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-sizing:border-box; }
.team-month-table table { width:100%; table-layout:fixed; }
.team-month-table th:first-child, .team-month-table td:first-child { width:42%; }
.team-month-table th:not(:first-child), .team-month-table td:not(:first-child) { width:19.333%; }
@media(max-width:600px) {
  .team-month-card { padding:18px; }
  .team-month-table th, .team-month-table td { padding-left:4px; padding-right:4px; font-size:11px; }
  .team-month-table th:first-child, .team-month-table td:first-child { width:39%; }
  .team-month-table th:not(:first-child), .team-month-table td:not(:first-child) { width:20.333%; }
  .team-month-table th:first-child, .team-month-table td:first-child { padding-left:12px; }
  .team-month-table th:last-child, .team-month-table td:last-child { padding-right:12px; }
  .team-month-table td:first-child a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* Floating navigation rail. The shell remains visible around all four edges, so the sidebar reads as a
   separate piece of workspace chrome instead of the left edge of the page. */
@media(min-width:901px) {
  .sidebar {
    top:12px;
    height:calc(100dvh - 24px);
    margin:12px;
    border:1px solid var(--rule-strong);
    border-radius:16px;
    box-shadow:var(--shadow-md);
    overflow:visible;
  }
  .open-auth-banner + .app .sidebar { height:calc(100dvh - 62px); }
  .side-nav { padding:0 4px; }
  .side-link, .side-link[data-key="leads"] {
    margin-left:0;
    margin-right:0;
    border-radius:10px;
  }
  .side-link:hover, .side-link[data-key="leads"]:hover {
    background:var(--hover-strong);
  }
  .side-link[aria-current="page"], .side-link[data-key="leads"][aria-current="page"] {
    background:var(--surface);
    color:var(--ink);
    box-shadow:var(--shadow-xs), inset 0 0 0 1px var(--rule);
  }
  .side-link[aria-current="page"] .icon { color:var(--ink); }
  .side-bottom { padding-left:4px; padding-right:4px; }
  .side-bottom a, .side-user > summary { border-radius:10px; padding-left:12px; padding-right:12px; }
  .side-bottom a:hover, .side-user > summary:hover { background:var(--hover-strong); }
  .side-user { margin-left:4px; margin-right:4px; }
}
@media(max-width:600px) {
  .stats, .billing-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card-stat, .stats > .card-stat { min-height:96px; padding:13px; }
  .card-stat:last-child { min-height:96px; }
  .today-page .cards { gap:8px; margin-bottom:18px; }
  .list-bulk .spacer { display:none; }
}