/* Desk: see docs/desk-ui-spec.md */
:root {
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
    --r: 6px;
    --bg: #F5F5F2; --surface: #FFFFFF; --line: #E4E2DC; --line-2: #F0EEE9;
    --ink: #1B1F24; --muted: #5B616B; --accent: #1F5F8B; --accent-bg: #EAF1F7;
    --intake: #4A5B6E; --execution: #1F5F8B; --qa: #6B4FA3; --done: #2F6B4F;
    --ok: #1E6B43; --ok-bg: #E3F1E8; --due: #8A4B00; --due-bg: #FCEBD2; --late: #A3261A; --late-bg: #FBE1DD;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0; display: flex; flex-direction: column;
    background: var(--bg); color: var(--ink);
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* Top bar */
.top {
    height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: var(--s4);
    padding: 0 var(--s4); background: var(--ink); color: #fff;
}
.brand { color: #fff; font-weight: 600; font-size: 18px; text-decoration: none; }
.nav { display: flex; gap: var(--s1); }
.nav > a, .nav > span { height: 32px; padding: 0 var(--s3); border-radius: var(--r); display: inline-flex; align-items: center; font-weight: 600; text-decoration: none; color: #C9CDD3; }
.nav a.on { background: #fff; color: var(--ink); }
.nav .soon { opacity: .45; cursor: default; }
.search { position: relative; width: 360px; margin-left: var(--s4); }
.search i { position: absolute; left: 10px; top: 9px; color: var(--muted); }
.search input { width: 100%; height: 32px; border: 0; border-radius: var(--r); padding: 0 var(--s3) 0 32px; color: var(--ink); }
.me { margin-left: auto; color: #C9CDD3; }

/* Bars */
.bar { height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: var(--s1); }
.tab { height: 32px; padding: 0 var(--s3); border: 1px solid transparent; border-radius: var(--r); background: none; display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; }
.tab .n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tab:hover { background: var(--bg); }
.tab[aria-selected="true"] { background: var(--c, var(--ink)); color: #fff; }
.tab[aria-selected="true"] .n { color: #fff; opacity: .8; }
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ink)); }
.tab[aria-selected="true"] .dot { background: #fff; }
.clock { margin-left: auto; display: flex; gap: var(--s1); }
.chip { height: 28px; padding: 0 var(--s2); border-radius: 999px; border: 2px solid transparent; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: var(--s1); }
.chip.on { border-color: currentColor; }

.filters { gap: var(--s2); }
.subs { display: flex; gap: var(--s1); padding-right: var(--s2); margin-right: var(--s2); border-right: 1px solid var(--line); }
.sub { height: 28px; padding: 0 var(--s2); border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; }
.sub.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.f { height: 32px; max-width: 170px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.f.on { border-color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.link { border: 0; background: none; color: var(--accent); font-weight: 600; padding: 0 var(--s2); }
.group { margin-left: auto; }

/* Desk layout */
.desk { flex: 1; min-height: 0; display: flex; gap: var(--s4); padding: var(--s4); }
.grid-wrap { flex: 1; min-width: 0; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.panel { width: 400px; flex-shrink: 0; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.panel[hidden] { display: none; }
.empty { padding: var(--s6); text-align: center; color: var(--muted); }

/* Grid */
.grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grid th { position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 var(--s3); background: #F1F0EC; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); }
.grid td { height: 44px; padding: 0 var(--s3); border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid td:last-child { border-right: 0; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover td { background: #FAFAF8; }
.grid tbody tr.sel td { background: var(--accent-bg); }
.grid tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.grid tr.grp td { height: 36px; background: #F1F0EC; font-weight: 600; cursor: pointer; }
.grid tr.grp .muted { font-weight: 400; margin-left: var(--s2); }
.w-no { width: 136px; } .w-client { width: 150px; } .w-status { width: 156px; }
.w-people { width: 104px; } .w-hours { width: 84px; } .w-clock { width: 88px; }
td.no { font-family: var(--mono); font-size: 12px; }
td.hours { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.st { font-weight: 600; }
.st::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--s2); background: var(--c); }
.pill { display: inline-block; padding: 2px var(--s2); border-radius: var(--r); font-size: 12px; font-weight: 600; font-family: var(--mono); }
.ok { color: var(--ok); background: var(--ok-bg); } .due { color: var(--due); background: var(--due-bg); } .late { color: var(--late); background: var(--late-bg); }

.av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; border: 2px solid var(--surface); vertical-align: middle; }
.av + .av { margin-left: -6px; }
.av.none { background: var(--line) !important; color: var(--muted); }

/* Panel */
.p-head { padding: var(--s4); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.p-meta { display: flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--muted); }
.p-meta .x { margin-left: auto; border: 0; background: none; width: 28px; height: 28px; border-radius: var(--r); color: var(--muted); }
.p-meta .x:hover { background: var(--bg); }
.p-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); }
.steps span { height: 4px; border-radius: 2px; background: var(--line); }
.steps span.on { background: var(--c); }
.p-body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s6); }
.p-sec h3 { margin: 0 0 var(--s2); font-size: 12px; font-weight: 600; color: var(--muted); }
.kv { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s2) var(--s3); align-items: center; }
.kv .k { font-size: 12px; color: var(--muted); }
.kv .v { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.kv .h { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.clockbox { display: flex; align-items: baseline; justify-content: space-between; padding: var(--s3); border-radius: var(--r); }
.clockbox b { font-size: 18px; font-family: var(--mono); }
.desc { margin: 0; white-space: pre-wrap; color: #30353C; max-height: 7.2em; overflow: hidden; }
.desc.open { max-height: none; }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.log li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s2); font-size: 13px; }
.log time { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.log .who { color: var(--muted); }
.btn { height: 32px; padding: 0 var(--s3); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s1); color: var(--ink); }
.btn:hover { background: var(--bg); }

/* ── Phase 2 ─────────────────────────────────────────────── */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view[hidden] { display: none; }
.nav button { height: 32px; padding: 0 var(--s3); border: 0; border-radius: var(--r); background: none; font-weight: 600; color: #C9CDD3; }
.nav button.on { background: #fff; color: var(--ink); }
.nav > span { height: 32px; padding: 0 var(--s3); display: inline-flex; align-items: center; font-weight: 600; color: #C9CDD3; opacity: .45; }

/* Timer */
.timer { margin-left: auto; display: flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s1) 0 var(--s3); border-radius: var(--r); background: #27313B; }
.timer[hidden] { display: none; }
.timer .live { width: 8px; height: 8px; border-radius: 50%; background: #5FD08A; }
.timer .t { font-family: var(--mono); font-weight: 600; }
.timer button { height: 28px; padding: 0 var(--s2); border: 0; border-radius: var(--r); background: #3A4652; color: #fff; font-weight: 600; }
.timer a { color: #C9CDD3; font-family: var(--mono); font-size: 12px; text-decoration: none; }
.me { margin-left: var(--s2); }
.timer + .me { margin-left: var(--s2); }
.timer[hidden] + .me { margin-left: auto; }

/* Actions */
.acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.pri:hover { background: #16476A; }
.btn.good { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.bad { color: var(--late); border-color: var(--late); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.kv .edit { border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 600; padding: 0; }
.kv .v button.name { border: 0; background: none; padding: 0; font-weight: 400; text-align: left; }
.instr { margin: 0; padding: var(--s3); border-radius: var(--r); background: #F4F1FA; white-space: pre-wrap; }

/* Dialog */
.dlg { width: 440px; border: 0; border-radius: var(--r); padding: 0; box-shadow: 0 16px 48px rgba(0,0,0,.25); }
.dlg::backdrop { background: rgba(20,22,26,.45); }
.dlg form { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4); }
.dlg h2 { margin: 0; font-size: 18px; }
.dlg label { display: flex; flex-direction: column; gap: var(--s1); font-size: 12px; font-weight: 600; color: var(--muted); }
.dlg input, .dlg select, .dlg textarea { height: 36px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; color: var(--ink); background: #fff; }
.dlg textarea { height: auto; min-height: 96px; padding: var(--s2); resize: vertical; }
.dlg .row { display: grid; grid-template-columns: 1fr 96px; gap: var(--s3); }
.dlg .foot { display: flex; justify-content: flex-end; gap: var(--s2); }
.dlg .err { color: var(--late); font-size: 12px; min-height: 16px; }
.preview { padding: var(--s3); border-radius: var(--r); font-weight: 600; display: flex; justify-content: space-between; gap: var(--s2); }
.meter { position: relative; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.meter i { position: absolute; top: 0; height: 8px; }
.meter .m50 { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); left: 83.33%; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: var(--s6); transform: translateX(-50%); max-width: 560px; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--ink); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 10; }
.toast.err { background: var(--late); }

/* Team week */
.bar .legend { margin-left: auto; display: flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--muted); }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: var(--s2); }
.lg.logged, .seg.logged { background: #D0CDC4; }
.lg.dev, .seg.dev { background: #BFD5E8; }
.lg.qa, .seg.qa { background: #D9CDEE; }
.lg.run, .seg.run { background: var(--accent); }
.team-wrap { flex: 1; min-height: 0; overflow: auto; padding: var(--s4); }
.team { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.trow { display: grid; grid-template-columns: 200px 1fr 120px; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-2); }
.trow.head { padding-top: var(--s2); padding-bottom: var(--s2); font-size: 12px; font-weight: 600; color: var(--muted); background: #F1F0EC; }
.trow .who { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.trow .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.days { display: grid; grid-template-columns: repeat(6, 1fr); }
.days span:last-child { color: var(--due); }
.track { position: relative; height: 32px; border-radius: var(--r); background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 6 - 1px), var(--line) calc(100% / 6 - 1px), var(--line) calc(100% / 6)); }
.track::after { content: ""; position: absolute; top: 0; bottom: 0; left: 83.33%; right: 0; background: rgba(252, 235, 210, .6); border-radius: 0 var(--r) var(--r) 0; }
.seg { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); font-size: 11px; font-weight: 600; font-family: var(--mono); padding: 0 var(--s1); overflow: hidden; white-space: nowrap; display: flex; align-items: center; cursor: pointer; z-index: 1; }
.seg.run { color: #fff; }
.now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--late); z-index: 2; }
.num { font-family: var(--mono); font-weight: 600; text-align: right; }
.num small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.num.over { color: var(--due); } .num.spill { color: var(--late); }

/* ── Phase 3 ─────────────────────────────────────────────── */
.btn.light { background: #fff; border-color: #fff; color: var(--ink); margin-left: auto; }
.nav .badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--late); color: #fff; font-size: 11px; line-height: 18px; }
.nav .badge:empty { display: none; }
.me { margin-left: var(--s2) !important; }
.btn.sm { height: 28px; padding: 0 var(--s2); font-size: 12px; }
.warn { padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--due-bg); color: var(--due); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: var(--s2); }
.warn .btn { margin-left: auto; }
.clockbox { flex-wrap: wrap; gap: var(--s2); align-items: center; }
.clockbox .acts { width: 100%; }

/* Bottom timer bar */
body.timing { padding-bottom: 56px; }
.timerbar { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 5; display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s4); background: var(--ink); color: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.15); }
.timerbar[hidden] { display: none; }
.timerbar .live { width: 10px; height: 10px; border-radius: 50%; background: #5FD08A; box-shadow: 0 0 0 4px rgba(95,208,138,.25); }
.timerbar .t { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.timerbar .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.timerbar .what b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timerbar .what span { font-size: 12px; color: #C9CDD3; }
.timerbar .what a { color: #fff; text-decoration: none; }
.timerbar .spent { width: 160px; display: flex; flex-direction: column; gap: var(--s1); font-size: 12px; color: #C9CDD3; font-family: var(--mono); }
.timerbar .spent .meter { background: #3A4652; }
.timerbar .btn { background: #3A4652; border-color: #3A4652; color: #fff; }
.timerbar .btn.pri { background: #fff; border-color: #fff; color: var(--ink); }

/* Mine */
.bar.week { gap: var(--s4); }
.bar.week .meter { width: 320px; }
.bar.week b { font-family: var(--mono); font-size: 16px; }
.mine-wrap { flex: 1; min-height: 0; overflow: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s6); }
.mine-sec h3 { margin: 0 0 var(--s2); font-size: 14px; display: flex; align-items: center; gap: var(--s2); }
.mine-sec h3 .n { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 400; }
.mine-sec .grid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.mine-sec td.act { text-align: right; overflow: visible; }
.mine-sec td.act .btn { margin-left: var(--s1); }

/* Dialog variants */
.dlg.wide { width: 600px; }
.dlg .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.dlg .grid3 { display: grid; grid-template-columns: 1fr 1fr 96px; gap: var(--s3); }
.seg-radio { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg-radio label { flex: 1; flex-direction: row; justify-content: center; align-items: center; height: 36px; cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 600; }
.seg-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-radio label:has(input:checked) { background: var(--ink); color: #fff; }
.seg-radio label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.checks { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.checks label { flex-direction: row; align-items: center; gap: var(--s1); color: var(--ink); font-weight: 400; font-size: 13px; }
.checks input { height: auto; }
.ackbox { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: #FAFAF8; }
.inline { flex-direction: row !important; align-items: center; gap: var(--s2) !important; color: var(--ink) !important; font-size: 14px !important; }
.inline input { height: auto !important; }

/* Inbox */
.mail { margin: 0; white-space: pre-wrap; font-size: 13px; color: #30353C; max-height: 320px; overflow: auto; padding: var(--s3); border-radius: var(--r); background: #FAFAF8; }
.match { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.match span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Notes & files on every action; client history ───────── */
.kv { grid-template-columns: 96px 1fr auto; }
.files { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s1); }
.file { display: inline-flex; align-items: center; gap: 2px; padding: 2px var(--s2); border-radius: var(--r); background: var(--bg); color: var(--accent); font-size: 12px; text-decoration: none; }
.file:hover { background: var(--accent-bg); }
.gclock { display: inline-flex; align-items: center; gap: var(--s2); margin-left: var(--s4); font-weight: 400; }
.gclock .link { font-size: 12px; padding: 0; }
.dlg input[type=file] { height: auto; padding: var(--s2); }
.dlg .log li { grid-template-columns: 64px 1fr; }

/* Mine: hours cell edit */
button.icon { width: 24px; height: 24px; margin-left: var(--s1); padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--muted); vertical-align: middle; }
button.icon:hover { background: var(--accent-bg); color: var(--accent); }
.mine-sec td.hours b { color: var(--ink); }

/* Access grid (admin) */
[hidden] { display: none !important; }
.access-wrap { flex: 1; min-height: 0; overflow: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s6); }
.grid.access { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.grid.access th.what { width: 340px; }
.grid.access th.chk { text-align: center; white-space: normal; line-height: 1.2; height: auto; padding: var(--s2) var(--s1); }
.grid.access th small { display: block; font-weight: 400; }
.grid.access td { cursor: default; white-space: normal; height: auto; padding-top: var(--s2); padding-bottom: var(--s2); }
.grid.access td small { display: block; color: var(--muted); font-size: 12px; }
.grid.access td small.inline { display: inline; }
.grid.access td.chk { text-align: center; }
.grid.access td.chk input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.grid.access td.chk input:disabled { cursor: not-allowed; }
.grid.access tr.head td { background: var(--ink); color: #fff; font-weight: 600; }
.grid.access tr.grp td { background: #F1F0EC; font-weight: 600; font-size: 12px; color: var(--muted); }
.grid.access tr.sgrp td:first-child { font-weight: 600; }
.grid.access .indent { display: inline-block; width: var(--s4); }
.grid.access tbody tr:hover td { background: #FAFAF8; }

/* Sales */
.w-value { width: 130px; }
.steps.s7 { grid-template-columns: repeat(7, 1fr); }
.tag { display: inline-block; padding: 0 var(--s1); border-radius: 4px; background: var(--due-bg); color: var(--due); font-size: 11px; font-weight: 600; vertical-align: middle; }
#s-new { margin-left: var(--s2); }
.w-act { width: 150px; }
td.act { text-align: right; overflow: visible; }
td.act .btn { margin-left: var(--s1); }

/* Finance */
.grid.mini { border: 1px solid var(--line); border-radius: var(--r); }
.grid.mini td, .grid.mini th { height: 30px; font-size: 12px; cursor: default; }
.dlg .grid4 { display: grid; grid-template-columns: 1fr 1fr 64px 110px; gap: var(--s2); }
.bar .warn { padding: 4px var(--s2); font-size: 12px; }

/* Account menu */
.menu { position: relative; margin-left: var(--s2); }
.menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s1); height: 32px; padding: 0 var(--s2); border-radius: var(--r); color: #C9CDD3; margin-left: 0 !important; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: #27313B; color: #fff; }
.menu-pop { position: absolute; right: 0; top: 40px; z-index: 20; min-width: 190px; padding: var(--s1); border-radius: var(--r); background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,.2); display: flex; flex-direction: column; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s3); border: 0; border-radius: var(--r); background: none; color: var(--ink); text-decoration: none; font-weight: 600; text-align: left; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--bg); }
.menu-pop #logout { color: var(--late); }

/* Projects list */
#projects-view .bar { gap: var(--s2); }
#projects-view .bar .clock { margin-left: auto; }
.pbar { position: relative; display: inline-block; width: 150px; height: 8px; margin-right: var(--s2); border-radius: 4px; background: var(--line); vertical-align: middle; }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--execution); }
.pbar b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); }
.seg-zoom { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg-zoom button { height: 30px; padding: 0 var(--s3); border: 0; background: var(--surface); font-weight: 600; font-size: 12px; }
.seg-zoom button.on { background: var(--ink); color: #fff; }

/* Gantt: one scroll area; the grid on the left stays put while the timeline scrolls */
.gantt { position: relative; height: 100%; overflow: auto; font-size: 13px; }
.g-head, .g-row { display: flex; min-width: max-content; }
.g-head { position: sticky; top: 0; z-index: 4; height: 44px; background: #F1F0EC; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.g-left { position: sticky; left: 0; z-index: 3; width: var(--lw); flex-shrink: 0; display: grid; grid-template-columns: 44px 1fr 40px 64px 64px 52px; align-items: center; background: inherit; border-right: 1px solid var(--line); }
.g-head .g-left { background: #F1F0EC; }
.g-left > span { padding: 0 var(--s2); overflow: hidden; white-space: nowrap; }
.g-time { position: relative; flex-shrink: 0; }
.g-months span, .g-ticks span { position: absolute; white-space: nowrap; }
.g-months span { top: 4px; padding-left: 4px; border-left: 1px solid var(--line); color: var(--ink); }
.g-ticks span { top: 24px; font-weight: 400; font-size: 11px; padding-left: 3px; }
.g-ticks span.we { color: #9A9EA5; }
.g-body { position: relative; min-width: max-content; }
.g-grid { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.g-grid i { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.03); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--late); opacity: .7; }
.g-links { position: absolute; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.g-links path { fill: none; stroke: #8A8F98; stroke-width: 1.2; }
.g-links path.bad { stroke: var(--late); stroke-dasharray: 3 2; }
.g-links marker path { fill: #8A8F98; stroke: none; }
.g-row { height: var(--rh); background: var(--surface); border-bottom: 1px solid var(--line-2); cursor: pointer; }
.g-row:hover { background: #FAFAF8; }
.g-row.sel { background: var(--accent-bg); }
.g-row.sel .g-left { box-shadow: inset 3px 0 0 var(--accent); }
.g-row.is-parent .g-name { font-weight: 600; }
.g-wbs { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.g-name { display: flex; align-items: center; gap: 2px; min-width: 0; }
.g-caret { width: 16px; height: 16px; flex-shrink: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; line-height: 16px; }
.g-d { font-size: 12px; color: var(--muted); }
.g-p { font-size: 12px; text-align: right; }
.g-p.late-t { color: var(--late); font-weight: 600; }
.g-in { width: 100%; height: 26px; padding: 0 4px; border: 1px solid var(--accent); border-radius: 4px; font-size: 12px; }
.g-bar { position: absolute; top: 8px; height: 18px; border-radius: 4px; overflow: hidden; z-index: 1; display: flex; align-items: center; }
.g-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.g-bar span { position: relative; padding-left: 6px; font-size: 11px; font-weight: 600; font-family: var(--mono); }
.g-bar.todo { background: #D6E4EF; } .g-bar.todo i { background: #9DBCD6; } .g-bar.todo span { color: #16476A; }
.g-bar.run  { background: #BFD5E8; } .g-bar.run i  { background: var(--execution); } .g-bar.run span { color: #fff; }
.g-bar.late { background: var(--late-bg); box-shadow: inset 0 0 0 1.5px var(--late); } .g-bar.late i { background: #E8A49B; } .g-bar.late span { color: var(--late); }
.g-bar.done { background: #CFE5D7; } .g-bar.done i { background: #7DB795; } .g-bar.done span { color: var(--ok); }
.g-bar.sum  { top: 12px; height: 10px; background: #6B7078; border-radius: 2px; } .g-bar.sum i { background: var(--ink); }
.g-bar.drag { cursor: grab; touch-action: none; }
.g-bar.drag:active { cursor: grabbing; }
.g-bar .grip { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: rgba(0,0,0,.12); }
.prog-row { display: flex; align-items: center; gap: var(--s3); }
.prog-row input[type=range] { flex: 1; accent-color: var(--accent); }
#p-main { overflow: hidden; }
/* Gantt layering: grid column above lines, lines under bars */
.g-left { z-index: 5; background: var(--surface); }
.g-row.sel .g-left { background: var(--accent-bg); }
.g-row:hover .g-left { background: #FAFAF8; }
.g-links { z-index: 1; }
.g-bar { z-index: 2; }
/* Row separators drawn by the cells, so no gap lets the dependency lines through */
.g-row { border-bottom: 0; }
.g-left { box-shadow: inset 0 -1px 0 var(--line-2); }
.g-time { box-shadow: inset 0 -1px 0 var(--line-2); }
.g-row.sel .g-left { box-shadow: inset 3px 0 0 var(--accent), inset 0 -1px 0 var(--line-2); }

/* Home: what needs attention today */
.bar.hello { gap: var(--s3); }
.bar.hello .hw { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2); }
.bar.hello .hw .meter { width: 160px; }
.home { flex: 1; min-height: 0; overflow: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s3); }
.tile { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4);
        display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile:hover { border-color: var(--accent); }
.tile .tn { font-size: 26px; font-weight: 600; line-height: 1.1; display: flex; align-items: center; gap: var(--s2); font-variant-numeric: tabular-nums; }
.tile .tn .pill { font-family: inherit; font-size: 11px; }
.tile .tl { font-weight: 600; }
.tile .ts { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.home-side { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4) var(--s4); min-width: 0; }
.card h3 { margin: 0 0 var(--s3); font-size: 14px; display: flex; align-items: center; gap: var(--s2); }
.card h3 .n { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 400; }
.card .grid tr[data-home] { cursor: pointer; }
.card .empty { padding: var(--s4); }
.card .more { margin-top: var(--s2); padding: 0; }
.hlist { display: flex; flex-direction: column; }
.hrow { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s1); border: 0; border-top: 1px solid var(--line-2); background: none; text-align: left; min-width: 0; }
.hrow:first-child { border-top: 0; }
.hrow:hover { background: var(--bg); }
.hrow > .ti { font-size: 18px; color: var(--muted); flex-shrink: 0; }
.hrow .ht { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hrow .ht > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .ht .muted { font-size: 12px; }
.hrow .pill { flex-shrink: 0; }
.legend2 { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; font-size: 13px; margin-bottom: var(--s2); }
.legend2 i, .chart .tip i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend2 b { font-variant-numeric: tabular-nums; }
.legend2 .muted { margin-left: auto; }
.chart { position: relative; }
.flow { width: 100%; height: auto; display: block; }
.flow text { font-size: 11px; fill: var(--muted); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.flow line.gl { stroke: var(--line-2); }
.flow line.base { stroke: var(--line); }
.flow .hit { fill: transparent; }
.flow g.on .hit { fill: var(--line-2); }
.chart .tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; border-radius: var(--r); padding: 6px 10px; font-size: 12px;
              display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.tview { margin-top: var(--s2); font-size: 12px; }
.tview summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.tview .grid { margin-top: var(--s2); }
@media (max-width: 900px) { .home-cols { grid-template-columns: 1fr; } .bar.hello .hw .meter { display: none; } }

/* Home · clients table */
.ctable .num { width: 84px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ctable th.num { font-family: inherit; }
.ctable .w-call { width: 44px; text-align: center; overflow: visible; }
.ctable tr[data-home] { cursor: pointer; }
.ctable tr.hot td { background: #FDF3F1; }
.ctable tr.hot td:first-child { box-shadow: inset 3px 0 0 var(--late); font-weight: 600; }
.ctable tr.idle td { color: var(--muted); }
.card h3 .pill { font-family: inherit; }

/* Sales · pipeline stages: one connected row */
.bar.stages { gap: 0; overflow-x: auto; }
.stg { flex: 1 1 0; min-width: 118px; height: 32px; margin-left: -1px; padding: 0 var(--s2) 0 6px; border: 1px solid var(--line); background: var(--surface);
       display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; }
.stg:first-child { margin-left: 0; border-radius: var(--r) 0 0 var(--r); }
.stg:last-child { border-radius: 0 var(--r) var(--r) 0; }
.stg.all { flex: 0 0 auto; min-width: 0; padding-left: var(--s3); }
.stg:hover { background: var(--bg); }
.stg .sn { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--line-2); color: var(--muted); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.stg .sl { overflow: hidden; text-overflow: ellipsis; }
.stg .sc { margin-left: auto; padding-left: var(--s1); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.stg.zero .sl { color: var(--muted); font-weight: 400; }
.stg.on { background: var(--ink); border-color: var(--ink); color: #fff; position: relative; z-index: 1; }
.stg.on .sl, .stg.on .sc { color: #fff; }
.stg.on .sn { background: #fff; color: var(--ink); }

/* Header: never wrap; the search box gives way first */
.nav button, .btn, .me, .tab { white-space: nowrap; }
.nav { flex-shrink: 0; }
.search { width: auto; flex: 0 1 360px; min-width: 120px; }
@media (max-width: 1400px) { #log-call .lbl { display: none; } #log-call { padding: 0 var(--s2); } }
.pill { white-space: nowrap; }
.ctable th.w-clock { width: 104px; }

/* Areas: sub-tabs under the header (Support: Tickets · Inbox · Team week; Admin: Users · Access) */
.subnav { height: 40px; flex-shrink: 0; display: flex; align-items: flex-end; gap: var(--s1); padding: 0 var(--s4); background: var(--ink); border-top: 1px solid #27313B; }
.subnav[hidden] { display: none; }
.subnav button { height: 32px; padding: 0 var(--s3); border: 0; border-radius: var(--r) var(--r) 0 0; background: none; color: #C9CDD3; font-weight: 600; white-space: nowrap; }
.subnav button:hover { color: #fff; }
.subnav button.on { background: var(--surface); color: var(--ink); }
.subnav .badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--late); color: #fff; font-size: 11px; line-height: 18px; }
.menu .gear { padding: 0 var(--s2); font-size: 18px; }
.menu.on .gear { background: #fff; color: var(--ink); }
.menu-pop small { margin-left: auto; font-weight: 400; }
.menu-pop [hidden] { display: none; }
.soon-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }

/* Calendar */
.cbar .ctitle { font-size: 16px; margin: 0 var(--s2); min-width: 150px; }
.sgc { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sgc button { height: 30px; padding: 0 var(--s3); border: 0; border-left: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13px; }
.sgc button:first-child { border-left: 0; }
.sgc button.on { background: var(--ink); color: #fff; }
.cbar .sgc + .sgc { margin-left: var(--s2); }
.cbar [data-cnew] { margin-left: auto; }
.ctypes { gap: var(--s1); overflow-x: auto; }
.ctype { height: 28px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ctype .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ctype .n { font-family: var(--mono); color: var(--muted); font-weight: 400; }
.ctype.offt { opacity: .45; text-decoration: line-through; }
.cal-wrap { flex: 1; min-width: 0; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.cgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 100%; }
.cgrid.month { grid-template-rows: 32px repeat(6, minmax(112px, 1fr)); }
.cgrid.week { grid-template-rows: 32px minmax(420px, 1fr); }
.chead { display: flex; align-items: center; padding: 0 var(--s2); font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); background: #FAFAF8; position: sticky; top: 0; z-index: 1; }
.cday { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cday:nth-child(7n) { border-right: 0; }
.cday.wkend { background: #FBFBF9; }
.cday.out .dn { color: #B5B8BD; }
.cday .dn { font-size: 12px; font-weight: 600; padding: 2px 4px; align-self: flex-start; border-radius: 999px; }
.cday.today .dn { background: var(--accent); color: #fff; }
.ce { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; padding: 2px 6px 2px 4px; border: 0; border-left: 3px solid var(--c); border-radius: 3px;
      background: color-mix(in srgb, var(--c) 9%, #fff); color: var(--ink); text-align: left; font-size: 12px; line-height: 18px; flex-wrap: wrap; }
.ce:hover { background: color-mix(in srgb, var(--c) 18%, #fff); }
.ce > .ti { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.ce .ct { font-family: var(--mono); font-size: 11px; color: var(--muted); flex-shrink: 0; }
.ce .cn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce .lt { color: var(--late); font-size: 13px; }
.ce .cs { flex-basis: 100%; padding-left: 17px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce.off .cn { text-decoration: line-through; color: var(--muted); }
.cgrid.week .ce { padding: 4px 6px; }
.cgrid.week .ce .cn { white-space: normal; }
.cmore { font-size: 12px; padding: 0 4px; align-self: flex-start; }
.cagenda { padding: var(--s2) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.cagenda h3 { margin: var(--s2) 0 var(--s1); font-size: 13px; display: flex; gap: var(--s2); align-items: center; }
.cagenda section { display: flex; flex-direction: column; gap: 3px; }
.cagenda .ce { padding: 6px 8px; font-size: 13px; }
.mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.mlist li { display: flex; align-items: flex-start; gap: var(--s2); font-size: 13px; }
.mlist li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mlist li > span:nth-child(2) { flex: 1; }
.mlist li.done b, .mlist li.done > div { color: var(--muted); text-decoration: line-through; }
.mlist .muted { font-size: 12px; text-decoration: none; }
.mlist input[type=checkbox] { margin-top: 2px; width: 16px; height: 16px; }
.mlist .x { border: 0; background: none; color: var(--muted); }
.mtext { white-space: pre-wrap; font-size: 13px; }
textarea.minutes { width: 100%; min-height: 140px; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r); font: inherit; font-size: 13px; resize: vertical; }
#cal-panel { width: 420px; }
@media (max-width: 1100px) { .cgrid.month .ce .ct { display: none; } }

/* Inbox: folders, unread, threads */
.ibar .tab .ti { font-size: 15px; }
.ibar .chip { margin-left: auto; }
.w-icon { width: 36px; text-align: center; }
#inbox-grid td.w-icon .ti { font-size: 16px; color: var(--muted); }
#inbox-grid tr.unread td { font-weight: 700; color: var(--ink); }
#inbox-grid tr.unread td.w-icon .ti { color: var(--accent); }
#inbox-grid tr.unread { box-shadow: inset 3px 0 0 var(--accent); }
.tkt { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: var(--r); background: var(--accent-bg); color: var(--accent); font-size: 12px; font-weight: 600; font-family: var(--mono); }
.thread { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--accent); font-family: var(--mono); }
.thread .ti { font-size: 14px; }
.note { font-size: 13px; padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--accent-bg); }
.note.bad { background: var(--late-bg); color: var(--late); }
.mlist li.here { font-weight: 600; }
.dlg .kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px var(--s3); font-size: 13px; }
.dlg .kv > span { color: var(--muted); }
.dlg .pv-desc { max-height: 160px; overflow: auto; white-space: pre-wrap; font-size: 13px; padding: var(--s2) var(--s3); background: var(--bg); border-radius: var(--r); }
#inbox-grid .w-icon { width: 40px; padding: 0; text-overflow: clip; overflow: visible; }

/* New ticket */
#new-ticket { margin-left: auto; }
#new-ticket + #log-call { margin-left: var(--s2); }
@media (max-width: 1400px) { #new-ticket .lbl { display: none; } #new-ticket { padding: 0 var(--s2); } }
.dlg .similar { display: flex; flex-direction: column; gap: 4px; padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--due-bg); font-size: 13px; }
.dlg .similar > b { color: var(--due); font-size: 12px; }
.dlg .similar .match { display: flex; align-items: center; gap: var(--s2); }
.dlg .similar .match > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg .seg-radio label { font-size: 13px; }

/* Clients and Users */
.panel.wide { width: 460px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
#us-panel .p-body .kv, #cl-panel .p-body .kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px var(--s3); font-size: 13px; }
#us-panel .p-body .kv > span, #cl-panel .p-body .kv > span { color: var(--muted); }
details.wk { font-size: 13px; border-top: 1px solid var(--line-2); padding: 6px 0; }
details.wk summary { cursor: pointer; display: flex; gap: var(--s2); }
details.wk summary b { margin-left: auto; font-family: var(--mono); }
details.wk .mlist { margin: 6px 0 0 var(--s3); }
.checks.col { flex-direction: column; gap: 6px; }
.copyrow { display: flex; gap: var(--s2); }
.copyrow input { flex: 1; font-family: var(--mono); font-size: 12px; }
#users-main .av { vertical-align: middle; }
.ctable th.first { width: 260px; }
.desk.has-panel .ctable .nar { display: none; }

/* Ticket clean-up */
.w-chk { width: 36px; text-align: center; padding: 0 !important; }
.w-chk input { width: 16px; height: 16px; vertical-align: middle; }
#grid.nochk .w-chk { display: none; }
#grid tr.picked td { background: var(--accent-bg); }
.bar.bulk { background: var(--accent-bg); border-bottom-color: #C9DCEB; gap: var(--s2); }
.bar.bulk[hidden] { display: none; }
.bar.bulk b { margin-right: var(--s2); }
.bar.bulk .link { margin-left: auto; }
.acts.minor { gap: var(--s3); margin-top: calc(var(--s4) * -1); }
.acts.minor .link { padding: 0; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.dlg label.inline .mono { white-space: nowrap; }
.desk.has-panel #grid .w-hours, .desk.has-panel #grid td.hours { display: none; }

/* Products */
.mlist.mods li.sub { padding-left: var(--s4); }
.mlist.mods li > .mono { flex-shrink: 0; }
.chips a.pill { text-decoration: none; color: var(--ink); background: var(--bg); }

/* Settings */
#settings .card { display: flex; flex-direction: column; gap: var(--s3); }
#settings .card h3 { margin-bottom: 0; }
#settings label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
#settings label.inline { flex-direction: row; align-items: center; gap: var(--s2); font-size: 14px; color: var(--ink); font-weight: 600; }
#settings input:not([type=checkbox]) { height: 34px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; color: var(--ink); background: #fff; }
#settings input:disabled { background: var(--bg); color: var(--muted); }
#settings .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
#settings .acts { margin-top: 0; }
.kvline { display: flex; gap: var(--s3); font-size: 13px; align-items: center; }
.kvline > span:first-child { color: var(--muted); font-weight: 600; font-size: 12px; min-width: 110px; }
.okline { color: var(--ok); } .warnline { color: var(--due); } .badline { color: var(--late); }
.mailhealth { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.mailhealth > div { background: var(--bg); border-radius: var(--r); padding: var(--s2) var(--s3); display: flex; flex-direction: column; }
.mailhealth b { font-size: 18px; }
.mailhealth span { font-size: 12px; color: var(--muted); }
.mailhealth .bad b { color: var(--late); }
#settings tr.clickable { cursor: pointer; }
.dlg.xwide { width: min(1000px, 94vw); }
.tplgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tplgrid > div { display: flex; flex-direction: column; gap: 4px; }
.tplpv { width: 100%; flex: 1; min-height: 260px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.pvsubj { font-size: 13px; }

/* Bank */
.grid.recon td { padding: 6px 8px; font-size: 13px; }
.grid.recon td.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.grid.recon tr.sum td { background: var(--bg); font-weight: 600; }
.diffbox { align-self: end; padding: var(--s2) var(--s3); border-radius: var(--r); font-size: 13px; background: var(--bg); }
.diffbox.ok { background: var(--ok-bg); color: var(--ok); }
.diffbox.late { background: var(--late-bg); color: var(--late); }
.diffbox span { font-size: 12px; }
.chips button.pill { border: 0; cursor: pointer; }
#finance-view .desk.has-panel .nar { display: none; }
.grid.recon td.num { width: 150px; }

/* Reports */
.rpbar { gap: var(--s3); overflow-x: auto; }
.rpbar .tab .ti { font-size: 15px; }
.rperiod { margin-left: auto; display: flex; align-items: center; gap: var(--s2); white-space: nowrap; font-size: 12px; }
.rperiod .f { max-width: 160px; }
.rtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.rtile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rtile b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.rtile span { font-weight: 600; font-size: 13px; }
.rtile small { color: var(--muted); font-size: 12px; }
.rtile.bad b { color: var(--late); }
.rnote { margin: -6px 0 var(--s2); font-size: 12px; }
.rtable .rt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 12px; }
.rtable .rt-head .link { padding: 0; font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.rtable th[data-sortby] { cursor: pointer; user-select: none; }
.rtable th.sorted { color: var(--ink); }
.rtable th.num, .rtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rtable td small { font-size: 11px; }
.hbars { display: flex; flex-direction: column; gap: var(--s2); }
.hb { display: grid; grid-template-columns: 200px 1fr 90px 90px; align-items: center; gap: var(--s3); font-size: 13px; }
.hb .bar { height: 12px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.hb .bar i { display: block; height: 100%; background: #2a78d6; border-radius: 0 4px 4px 0; }
.hb b { text-align: right; font-variant-numeric: tabular-nums; }
.flow .pt { opacity: 0; }
.flow g.on .pt { opacity: 1; }

/* Reports: filters and drill-in */
.rpfilters { gap: var(--s2); overflow-x: auto; }
.rpfilters > .ti { font-size: 16px; }
.rscope { font-size: 13px; color: var(--accent); background: var(--accent-bg); padding: var(--s2) var(--s3); border-radius: var(--r); }
button.rtile { text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.rtile:hover { border-color: var(--accent); }
.chart.clickable .hit { cursor: pointer; }
.chart.clickable path { cursor: pointer; }
.chart .tip small { opacity: .7; font-size: 11px; }
.grid.rowlink tbody tr { cursor: pointer; }
.grid.rowlink tbody tr:hover td { background: var(--accent-bg); }
.lnk { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
span.lnk { text-decoration: none; margin-left: 4px; }
button.hb { border: 0; background: none; padding: 4px; border-radius: var(--r); text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.hb:hover { background: var(--accent-bg); }
.drill .rtable { max-height: 60vh; overflow: auto; }
.rp-back { position: fixed; left: var(--s4); bottom: var(--s4); z-index: 30; height: 36px; padding: 0 var(--s3); border: 0; border-radius: 999px;
           background: var(--ink); color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.rp-back[hidden] { display: none; }
body.timing .rp-back { bottom: 72px; }

/* Sign in (index.php) */
body.signin { display: block; min-height: 100%; background: var(--bg); }
.signin-wrap { max-width: 400px; margin: 0 auto; padding: 10vh 16px 32px; display: flex; flex-direction: column; gap: var(--s3); }
.signin-brand { font-size: 26px; font-weight: 700; text-align: center; letter-spacing: -.01em; }
.signin-dev { text-align: center; color: var(--late); font-size: 12px; font-weight: 600; }
.signin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s6); box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.signin-card form { display: flex; flex-direction: column; gap: var(--s3); }
.signin-card h1 { margin: 0; font-size: 20px; }
.signin-card h2 { margin: 0; font-size: 15px; }
.signin-card p { margin: 0; font-size: 14px; line-height: 1.5; }
.signin-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.signin-card input { height: 40px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r); font-size: 15px; color: var(--ink); background: #fff; }
.signin-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.signin-card input.code { font-family: var(--mono); font-size: 22px; letter-spacing: .3em; text-align: center; }
.signin-card .btn { height: 40px; justify-content: center; font-size: 15px; }
.signin-card .link { align-self: center; padding: 0; }
.signin-err { color: var(--late); background: var(--late-bg); padding: var(--s2) var(--s3); border-radius: var(--r); font-size: 13px; }
.signin-ok { color: var(--ok); background: var(--ok-bg); padding: var(--s2) var(--s3); border-radius: var(--r); }
.signin-foot { text-align: center; font-size: 12px; color: var(--muted); margin: 0; }
.qr { display: flex; justify-content: center; }
.qr svg { width: 180px; height: 180px; }
.steps-list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.secret { font-size: 12px; color: var(--muted); }
.secret summary { cursor: pointer; }
.secret code { font-family: var(--mono); word-break: break-all; color: var(--ink); }
.twofa { display: flex; flex-direction: column; gap: var(--s3); border-top: 1px solid var(--line-2); padding-top: var(--s3); }
.pwrules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s3); font-size: 12px; color: var(--muted); }
.pwrules li::before { content: '○ '; }
.pwrules li.ok { color: var(--ok); }
.pwrules li.ok::before { content: '✓ '; }

/* Priority and due */
.prio { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: 1px; }
.prio.p5 { background: var(--late-bg); color: var(--late); }
.prio.p4 { background: var(--due-bg); color: var(--due); }
.w-due { width: 72px; }
.desk.has-panel #grid .w-due { display: none; }
.kv.dkv { margin-bottom: 0; }
#filters { height: auto; min-height: 48px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
#filters .f { max-width: 150px; }

/* Access roles, imports */
.rolesbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.rolesbar .pill { border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-family: inherit; font-size: 12px; }
.rolesbar .pill:hover { border-color: var(--accent); }
.imperr { margin: 4px 0 0; padding-left: 18px; max-height: 220px; overflow: auto; }