/* Team Desk 1.5 design system.
   Stone canvas, a darker sidebar strip, white work surfaces, pine green for action and completion.
   One family (IBM Plex Sans, bundled for offline offices) with tabular figures for every time and count.
   The one loud element is the sidebar workday panel, which turns pine while a timer runs. */

@font-face{font-family:"Plex Sans";src:url(fonts/plex-sans-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/plex-sans-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/plex-sans-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/plex-sans-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/plex-sans-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* surfaces */
  --bg:#F2F3F0; --rail:#E7EAE5; --surface:#FFFFFF; --sunk:#EDEFEB; --hover:#F5F6F3;
  /* text */
  --ink:#15201B; --muted:#56615B; --faint:#86908A; --line:#DCE0DA; --line-strong:#C6CCC5;
  /* action: pine */
  --accent:#1D5C47; --accent-hover:#174B3A; --accent-ink:#FFFFFF; --accent-soft:#E1EDE7; --accent-line:#A9CBBC;
  /* signals */
  --info:#2F4FA2; --info-soft:#E4E9F6;
  --ok:#1D6B4C; --ok-soft:#DFEFE6;
  --warn:#8F5600; --warn-soft:#F7EAD2;
  --bad:#B0281F; --bad-soft:#F9E3E0;
  --idle:#C3C9C3;
  --shadow:0 18px 50px -12px rgba(18,32,26,.28),0 2px 6px rgba(18,32,26,.06);
  --font-body:"Plex Sans","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-display:var(--font-body);
  --font-mono:"Plex Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --r-sm:6px; --r:8px; --r-lg:12px;
  --t1:30px; --t2:22px; --t3:17px; --t4:15px; --t5:14px; --t6:13px; --t7:12px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111614; --rail:#0C110F; --surface:#18201C; --sunk:#1E2723; --hover:#1C2420;
  --ink:#E4EAE6; --muted:#A0ACA6; --faint:#6E7A74; --line:#27312C; --line-strong:#36423C;
  --accent:#7FD0AC; --accent-hover:#97DBBC; --accent-ink:#0A1C14; --accent-soft:#16302A; --accent-line:#2E5A4A;
  --info:#9CB2F0; --info-soft:#1B2541; --ok:#7FD0AC; --ok-soft:#163026;
  --warn:#E8B263; --warn-soft:#30261A; --bad:#F2958B; --bad-soft:#3A201D; --idle:#3A443F;
  --shadow:0 18px 50px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#111614; --rail:#0C110F; --surface:#18201C; --sunk:#1E2723; --hover:#1C2420;
  --ink:#E4EAE6; --muted:#A0ACA6; --faint:#6E7A74; --line:#27312C; --line-strong:#36423C;
  --accent:#7FD0AC; --accent-hover:#97DBBC; --accent-ink:#0A1C14; --accent-soft:#16302A; --accent-line:#2E5A4A;
  --info:#9CB2F0; --info-soft:#1B2541; --ok:#7FD0AC; --ok-soft:#163026;
  --warn:#E8B263; --warn-soft:#30261A; --bad:#F2958B; --bad-soft:#3A201D; --idle:#3A443F;
  --shadow:0 18px 50px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3); color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--t5);line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
a{color:var(--accent);text-underline-offset:2px}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft)}
.mono{font-family:var(--font-mono);font-size:.94em}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.boot{padding:40px;color:var(--muted)}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- sign-in and first-run screens ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:40px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));background:var(--bg)}
.auth-card{width:min(420px,100%);display:flex;flex-direction:column;gap:20px}
.auth-card.wide{width:min(620px,100%)}
.auth h1{font-size:var(--t2);font-weight:600;letter-spacing:-.01em}
.auth p{margin:0;color:var(--muted)}
.auth form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:16px}
.auth .err{color:var(--bad);font-size:var(--t6);min-height:1em}
.auth .server{font-size:var(--t7);color:var(--faint);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.auth .brand{font-size:var(--t3)}
.credit{margin:28px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center;font-size:var(--t7);color:var(--faint)}
.credit img{width:16px;height:16px}
.credit b{color:var(--muted);font-weight:600}
.auth .credit{margin-top:4px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;align-self:start;height:100vh;overflow:hidden;background:var(--rail);padding:16px 12px 12px;display:flex;flex-direction:column;gap:12px}
.brand{font-weight:700;font-size:var(--t4);letter-spacing:-.005em;display:flex;align-items:center;gap:10px;padding:4px 8px;min-width:0}
.brand img{width:24px;height:24px;flex:none}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-btn{all:unset;box-sizing:border-box;cursor:pointer;margin-left:auto;flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r);color:var(--muted)}
.theme-btn:hover{background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--ink)}
.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;margin:0 -4px;padding:0 4px}
.nav button{all:unset;cursor:pointer;padding:6px 10px;border-radius:var(--r);color:var(--muted);display:flex;align-items:center;gap:11px;font-weight:500;font-size:var(--t5)}
.nav button .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button:hover{background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--ink)}
.nav button[aria-current="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(18,32,26,.06)}
.nav button[aria-current="true"] .ico{color:var(--accent)}
.nav button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav .grp{font-size:var(--t7);color:var(--faint);font-weight:600;padding:12px 10px 3px}
.nav .grp:first-child{padding-top:2px}
.count{font-size:11.5px;font-weight:600;color:var(--muted);background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:999px;padding:0 7px;line-height:18px;min-width:18px;text-align:center}
.count.hot{color:#fff;background:var(--bad)}
.rail-foot{flex:none;display:flex;flex-direction:column;gap:8px}
.me-chip{min-width:0}
.me-btn{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:var(--t6);padding:7px 8px;border-radius:var(--r);color:var(--muted)}
.me-btn:hover{background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--ink)}
.me-btn[aria-current="true"]{background:var(--surface);color:var(--ink)}
.me-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.me-btn .who-t{flex:1;min-width:0;display:flex;flex-direction:column}
.me-btn .n{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-btn .r{font-size:var(--t7);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tracker{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:0 8px;flex-wrap:wrap}
.tracker .btn{margin-left:auto}

/* The workday panel: quiet when nothing runs, solid pine while a timer runs. */
#workday{display:flex;flex-direction:column;gap:10px}
#workday:empty{display:none}
.office{background:var(--surface);border-radius:var(--r-lg);padding:10px 12px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line)}
.office .actions{gap:6px}
.office .ot{font-size:var(--t6);color:var(--muted)}
.office .ot b{color:var(--ink);font-weight:600}
.office.on{border-color:transparent}
.lbl{font-size:var(--t7);color:var(--muted);font-weight:600}
.mini-timer{border-radius:var(--r-lg);padding:12px 14px;display:flex;flex-direction:column;gap:4px;background:var(--accent);color:var(--accent-ink)}
.mini-timer .lbl{font-size:var(--t7);font-weight:500;opacity:.85;text-transform:none;letter-spacing:0;color:inherit}
.mini-timer .tt{font-weight:600;overflow-wrap:anywhere;line-height:1.35}
.mini-timer .clock{font-size:28px;font-weight:500;letter-spacing:-.01em;line-height:1.1;margin:2px 0 6px}
.mini-timer .btn{background:color-mix(in srgb,var(--accent-ink) 14%,transparent);border-color:transparent;color:inherit;justify-content:center}
.mini-timer .btn:hover{background:color-mix(in srgb,var(--accent-ink) 24%,transparent)}
.mini-timer.meet{background:var(--info);color:#fff}
:root[data-theme="dark"] .mini-timer.meet{color:#0E1630}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mini-timer.meet{color:#0E1630}}

main{min-width:0;padding:30px clamp(18px,3vw,48px) 80px;display:flex;flex-direction:column;gap:24px;width:100%;max-width:1680px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.head h1{font-size:var(--t1);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.head p{margin:6px 0 0;color:var(--muted);max-width:68ch}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- controls ---------- */
.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r);padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;line-height:1.35;font-weight:500;color:var(--ink);transition:background-color .12s,border-color .12s}
.btn:hover{background:var(--hover);border-color:var(--faint)}
.btn .ico{width:16px;height:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.instant{background:var(--surface);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.btn.instant:hover{background:var(--accent-soft)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--sunk);color:var(--ink)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:var(--r-sm)}
.btn.block{width:100%;justify-content:center;padding:9px 12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.play{width:32px;height:32px;padding:0;justify-content:center;border-radius:50%;border-color:var(--line-strong)}
.play:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.play.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.play svg{width:12px;height:12px;fill:currentColor}
.row-acts{display:inline-flex;gap:6px;align-items:center}
.play.tick svg{width:15px;height:15px;fill:none}
.play.tick:hover:not(:disabled),.play.tick.on{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.play.tick:disabled{opacity:.35;cursor:not-allowed}
.step.free .num{background:var(--sunk);color:var(--muted)}
.field{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r);padding:7px 10px;min-width:0;transition:border-color .12s,box-shadow .12s}
.field:hover{border-color:var(--faint)}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field:disabled{background:var(--sunk);color:var(--muted)}
.field.sm{padding:4px 8px}
select.field{padding-right:28px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:var(--t6);color:var(--muted);font-weight:500;min-width:0}
label.f .field{width:100%;color:var(--ink);font-size:var(--t5);font-weight:400}
.hint{font-size:var(--t7);color:var(--faint);font-weight:400}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:var(--t5);color:var(--ink);cursor:pointer}
.check input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}
input[type=radio],input[type=checkbox]{accent-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);background:var(--sunk);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{all:unset;cursor:pointer;padding:4px 11px;border-radius:var(--r-sm);color:var(--muted);font-size:var(--t6);font-weight:500}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(18,32,26,.08)}
.seg button:focus-visible{outline:2px solid var(--accent)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search{flex:1 1 220px;max-width:max(340px,26vw)}

.banner{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:11px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.banner.warn{background:var(--warn-soft);border-color:transparent}
.banner.info{background:var(--info-soft);border-color:transparent}
.banner.ok{background:var(--ok-soft);border-color:transparent}
.banner.off{background:var(--accent-soft);border-color:transparent}

/* ---------- surfaces ---------- */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.stats.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{padding:16px 18px;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.stat b{font-size:var(--t2);font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat b.txt{font-size:var(--t4);line-height:33px}
.stat span{font-size:var(--t7);color:var(--muted)}
.stat.alert b{color:var(--bad)}
.grid2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
.grid2.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.panel h2{font-size:var(--t4);font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:8px;letter-spacing:-.005em}
.panel h2 .faint,.panel h2 .muted{font-size:var(--t6);font-weight:400}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.card.pad{padding:20px;display:flex;flex-direction:column;gap:16px}
.card.pad>b:first-child{font-size:var(--t4)}
.rows>*{border-top:1px solid var(--line)}
.rows>*:first-child{border-top:0}
.empty{padding:36px 24px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:60ch;margin:0 auto}
.empty b{color:var(--ink);font-weight:600;font-size:var(--t4)}
.empty.sm{padding:18px}
.sect{font-size:var(--t4);font-weight:600;display:flex;gap:10px;align-items:baseline}

.person-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;cursor:pointer}
.person-row:hover{background:var(--hover)}
.person-row .sub{font-size:var(--t6);color:var(--muted);overflow-wrap:anywhere}
.person-row .sub b{color:var(--ink);font-weight:600}
.live{font-size:var(--t6);font-weight:600;color:var(--accent);display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.live .dot{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.st-active{color:var(--ok)} .st-idle{color:var(--warn)} .st-paused{color:var(--faint)} .st-off{color:var(--idle)}

.av{width:30px;height:30px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;color:#fff;letter-spacing:.02em}
.av.sm{width:22px;height:22px;font-size:9.5px}
.av.lg{width:48px;height:48px;font-size:16px}
.av.none{background:var(--sunk);color:var(--faint)}
img.av{object-fit:cover;background:var(--sunk)}
.av.sys{background:var(--sunk);color:var(--muted);font-size:11px}
.who{display:inline-flex;align-items:center;gap:8px;min-width:0}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.task-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:11px 16px;align-items:center;cursor:pointer}
.task-line:hover{background:var(--hover)}
.task-line .t{font-weight:600;overflow-wrap:anywhere}
.task-line .m{font-size:12.5px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:3px}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--t7);padding:2px 9px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap;font-weight:600;line-height:18px}
.pill.doing{background:var(--info-soft);color:var(--info)}
.pill.blocked{background:var(--bad-soft);color:var(--bad)}
.pill.done{background:var(--ok-soft);color:var(--ok)}
.pill.admin{background:var(--accent-soft);color:var(--accent)}
.pill.p-urgent{background:var(--bad-soft);color:var(--bad)}
.pill.p-high{background:var(--warn-soft);color:var(--warn)}
.pill.p-low{background:transparent;color:var(--faint);font-weight:500}
.pill.off{background:var(--accent-soft);color:var(--accent)}
.tag{font-size:11.5px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;line-height:18px}
.tag.ok{color:var(--ok);border-color:transparent;background:var(--ok-soft)}
.tag.draft{color:var(--warn);border-color:transparent;background:var(--warn-soft);font-weight:600}
.pri-high{color:var(--warn);font-weight:600} .pri-urgent{color:var(--bad);font-weight:700}
.due-over{color:var(--bad);font-weight:600} .due-soon{color:var(--warn);font-weight:600}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table{border-collapse:collapse;width:100%}
table.wide{min-width:960px}
table.mid{min-width:620px}
th{text-align:left;font-size:var(--t7);color:var(--muted);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--sunk);position:sticky;top:0}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--hover)}
td.title{font-weight:600;max-width:max(360px,34vw)}
td.title small{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-weight:400;color:var(--muted);font-size:var(--t7);margin-top:4px}
.num{text-align:right}
.trunc{max-width:max(460px,40vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dim td{color:var(--faint)}
td.nw,th.nw{white-space:nowrap}

.bars{display:flex;flex-direction:column;padding-block:6px}
.bar-row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 72px;gap:14px;align-items:center;padding:7px 16px}
.bar-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track{height:8px;background:var(--sunk);border-radius:4px;overflow:hidden}
.track i{display:block;height:100%;background:var(--accent);border-radius:4px}
.bar-row .v{text-align:right;font-size:var(--t6)}

.hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;align-items:end;height:140px;padding:16px 16px 0}
.hours .col{display:flex;flex-direction:column-reverse;height:100%;border-radius:3px;overflow:hidden;background:var(--sunk)}
.hours .col i{display:block;width:100%}
.hours .a{background:var(--accent)} .hours .i{background:var(--warn);opacity:.55} .hours .p{background:var(--faint);opacity:.6}
.hours-axis{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;padding:4px 16px 12px;font-size:10.5px;color:var(--faint)}
.legend{display:flex;gap:14px;font-size:var(--t7);color:var(--muted);padding:0 16px 12px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

.cad-group{display:flex;flex-direction:column;gap:8px}
.cad-group h3{font-size:var(--t4);font-weight:600;display:flex;gap:8px;align-items:baseline}
.cad-group h3 .count{background:var(--sunk)}

/* team */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pcard .top{display:flex;gap:12px;align-items:center;min-width:0}
.pcard .nm{font-weight:600;font-size:var(--t4);overflow-wrap:anywhere}
.pcard .ds{font-size:var(--t6);color:var(--muted)}
.pcard dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;margin:0;font-size:var(--t6)}
.pcard dt{color:var(--faint)}
.pcard dd{margin:0;overflow-wrap:anywhere}
.pcard .foot{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.pcard.off{opacity:.65}

/* ---------- task sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(12,20,16,.36);z-index:20;animation:fade .16s ease-out}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(max(640px,38vw),100%);background:var(--bg);z-index:21;box-shadow:var(--shadow);display:flex;flex-direction:column;animation:slide .2s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{transform:translateX(24px);opacity:.4}}
@keyframes fade{from{opacity:0}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.sheet-body{overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:22px}
.title-input{border:0;background:transparent;font-size:var(--t2);font-weight:600;letter-spacing:-.01em;width:100%;padding:2px 0;line-height:1.25;resize:none;overflow:hidden}
.title-input:focus{outline:none;box-shadow:0 2px 0 var(--accent)}
.desc{width:100%;min-height:76px;resize:vertical}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.meta .ro{padding:7px 0;color:var(--ink);font-size:var(--t5);display:flex;align-items:center;gap:6px}
.timer-box{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.timer-box .big{font-size:28px;font-weight:500;letter-spacing:-.01em}
.timer-box .sub{font-size:var(--t7);color:var(--muted)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{all:unset;cursor:pointer;padding:9px 12px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-size:var(--t6);font-weight:500}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--accent);font-weight:600}
.tabs button:focus-visible{outline:2px solid var(--accent)}
.feed{display:flex;flex-direction:column;gap:14px}
.note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.note .body{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:9px 13px;overflow-wrap:anywhere;white-space:pre-wrap}
.note .hd{font-size:var(--t7);color:var(--muted);margin-bottom:3px;display:flex;gap:8px;justify-content:space-between;align-items:center}
.note.blocker .body{border-left:3px solid var(--bad)}
.note.blocker.resolved .body{border-left-color:var(--ok);color:var(--muted)}
.note.blocker.resolved .txt{text-decoration:line-through}
.composer{display:flex;flex-direction:column;gap:8px}
.composer textarea{width:100%;min-height:64px;resize:vertical}
.composer .row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.file{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px}
.file .thumb{width:44px;height:44px;border-radius:var(--r);background:var(--sunk);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--muted);overflow:hidden}
.file .thumb img{width:100%;height:100%;object-fit:cover}
.file .n{font-weight:600;overflow-wrap:anywhere}
.drop{border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);padding:18px;text-align:center;color:var(--muted);cursor:pointer;display:block}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.crumb{font-size:12.5px;color:var(--muted)}
.linkish{all:unset;cursor:pointer;color:var(--accent);font-weight:600}
.linkish:hover{text-decoration:underline}
.linkish:focus-visible{outline:2px solid var(--accent)}

/* repeat editor */
.repeat{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.repeat .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.repeat input[type=number]{width:72px}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chips button{all:unset;cursor:pointer;min-width:34px;text-align:center;padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--line-strong);font-size:12.5px;color:var(--muted);background:var(--surface);font-weight:500}
.chips button:hover{border-color:var(--accent);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.chips button:focus-visible{outline:2px solid var(--accent)}
.chips.dates{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.chips.dates button{min-width:0}
.chips.dates .last{grid-column:span 3}
.preview{font-size:12.5px;color:var(--muted)}
.preview b{color:var(--ink);font-weight:600}

/* modal */
.modal{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-start;justify-content:center;padding:56px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));background:rgba(12,20,16,.36);overflow-y:auto;animation:fade .14s ease-out}
.dialog{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);width:min(620px,100%);padding:24px;display:flex;flex-direction:column;gap:16px;animation:rise .18s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(8px);opacity:.3}}
.dialog h2{font-size:var(--t3);font-weight:600;letter-spacing:-.005em}
.dialog .foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding-top:4px}
.dialog .err{color:var(--bad);font-size:var(--t6)}
.dialog.narrow{width:min(460px,100%)}
.dialog .f,.dialog label.f{display:flex;flex-direction:column;gap:6px;font-size:var(--t6);color:var(--muted)}
.dialog .repeat,.dialog .drop{background:var(--bg)}
.secret{display:flex;gap:8px;align-items:center}
.secret .field{flex:1}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-size:var(--t6);font-weight:500;z-index:50;max-width:calc(100% - 32px);box-shadow:var(--shadow);animation:rise .18s ease-out}
.confirm{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--t6)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 18px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0}

/* checklist */
.progress{height:6px;background:var(--sunk);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s ease}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.step .num,.st-row .num{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t7);font-weight:600;background:var(--sunk);color:var(--muted)}
.step .tick,.st-row .num.ok{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--ok);color:var(--surface)}
.step.done{background:var(--ok-soft);border-color:transparent}
.step.done .tx{color:var(--muted)}
.step.next{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.step.next .num{background:var(--accent);color:var(--accent-ink)}
.step.next .lbl{font-size:var(--t7);color:var(--accent);font-weight:600}
.step.next .tx{font-weight:600}
.step.later{opacity:.55}
.step.pop{animation:steppop .45s ease-out}
@keyframes steppop{0%{transform:translateY(8px) scale(.98);opacity:0}100%{transform:none;opacity:1}}
.st-edit{display:flex;flex-direction:column;gap:8px}
.st-list{display:flex;flex-direction:column;gap:6px}
.st-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto auto;gap:6px;align-items:center}
.st-add{display:flex;gap:8px}
.st-add input{flex:1}

/* sub-tasks */
.sub-add{display:flex;gap:8px;padding:12px 14px;flex-wrap:wrap;border-top:1px solid var(--line)}
#sh-subs:empty + .sub-add{border-top:0}
.sub-add #sub-title{flex:1 1 220px}

/* chart palette (validated categorical order) */
:root{
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100; --series-5:#e87ba4; --series-6:#008300; --series-7:#6250d6; --series-8:#e34948;
  --gain:#1D6B4C; --loss:#B0281F;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500; --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
  --gain:#7FD0AC; --loss:#F2958B;
}}
:root[data-theme="dark"]{
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500; --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
  --gain:#7FD0AC; --loss:#F2958B;
}
.card.chart{padding:14px 14px 8px;min-width:0}
.viz{width:100%;height:auto;display:block;overflow:visible}
.viz .grid{stroke:var(--line);stroke-width:1}
.viz .base{stroke:var(--faint);stroke-width:1}
.viz .ax{fill:var(--muted);font-size:11px;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.viz .line{stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz .dot{stroke:var(--surface);stroke-width:2}
.viz .hit{fill:transparent;cursor:crosshair}
.viz .hit:hover{fill:var(--ink);fill-opacity:.04}
.viz .cross{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.viz-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--t7);color:var(--muted);padding:2px 4px 10px}
.viz-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.viz-legend i.ln{height:3px;width:14px;border-radius:2px;vertical-align:3px}
.viz-tip{position:fixed;z-index:60;pointer-events:none;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:9px 11px;font-size:12.5px;min-width:150px}
.viz-tip .h{font-weight:600;margin-bottom:4px}
.viz-tip .g{display:grid;grid-template-columns:1fr auto;gap:3px 14px}
.viz-tip .k{color:var(--muted);display:flex;align-items:center;gap:6px}
.viz-tip .k i{width:9px;height:9px;border-radius:2px;display:inline-block}
.viz-tip .k i.ln{height:3px;width:12px;background:var(--ink)}
.viz-tip b{text-align:right;font-weight:600}

/* numbers */
.neg{color:var(--bad)} .pos{color:var(--ok)}
.up{color:var(--ok);font-size:11px} .down{color:var(--bad);font-size:11px}
.insights ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.insights li{line-height:1.5}

/* points */
.appeal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 16px}
.appeal-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.appeal-act input{width:260px;max-width:100%}
.quote{margin-top:4px;font-style:italic;color:var(--ink)}
.note-txt{white-space:pre-wrap;font-size:var(--t6);margin-top:4px;color:var(--ink)}
.tp-head{display:flex;flex-direction:column;gap:4px}
.tp-list{display:flex;flex-direction:column;gap:8px}
.tp{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:start;padding-top:8px;border-top:1px solid var(--line)}
.tp b{font-size:var(--t4)}
.tp.dim{opacity:.6}
#sh-points h2 .actions{gap:4px}

/* journal */
.jr-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.jr{gap:12px}
.jr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.jr-read{white-space:pre-wrap;line-height:1.7;font-size:var(--t5);background:var(--bg);border-radius:var(--r);padding:16px 18px;overflow-wrap:anywhere;max-width:80ch}
.jr-edit{width:100%;min-height:280px;line-height:1.7;resize:vertical;font-size:var(--t5);padding:16px 18px}
.jr-foot{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.jr-actions{justify-content:flex-end}

/* meetings */
.mt-list{display:flex;flex-direction:column;gap:12px}
.card.mt{padding:18px;display:flex;flex-direction:column;gap:10px}
.card.mt header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.card.mt h3{font-size:var(--t4);font-weight:600}
.disc{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border-radius:var(--r);padding:11px 13px}
ul.ai{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.ai-list{display:flex;flex-direction:column;gap:8px}
.ai-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ai-row [data-ai="text"]{flex:1 1 220px}
.check.sm{font-size:12.5px;align-items:center;white-space:nowrap}
.check.sm input{margin-top:0}
.people-chips button{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px}

/* history */
ol.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
ol.hist li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start}
.hist-txt{overflow-wrap:anywhere}

/* assignment trail */
.assignee{display:flex;flex-direction:column;gap:3px;min-width:0}
.chain{font-size:var(--t7);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trail{gap:8px}
.trail ol{list-style:none;margin:0 0 0 6px;padding:0;display:flex;flex-direction:column;border-left:2px solid var(--line)}
.trail li{display:flex;justify-content:space-between;gap:12px;padding:5px 0 5px 14px;position:relative;font-size:13.5px}
.trail li::before{content:'';position:absolute;left:-6px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.trail li:last-child::before{background:var(--accent)}

/* ---------- 1.5: Today ---------- */
.today-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 28px;flex-wrap:wrap}
.today-date{display:flex;flex-direction:column;gap:2px}
.today-date .d{font-size:var(--t3);font-weight:600}
.today-date .s{color:var(--muted)}
.dayline{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;flex-wrap:wrap}
.dayline>div{padding:12px 18px;display:flex;flex-direction:column;gap:1px;box-shadow:-1px 0 0 var(--line);min-width:120px}
.dayline b{font-size:var(--t3);font-weight:600}
.dayline span{font-size:var(--t7);color:var(--muted)}
.tgroup{display:flex;flex-direction:column;gap:8px}
.tgroup>header{display:flex;align-items:baseline;gap:10px}
.tgroup>header h2{font-size:var(--t4);font-weight:600}
.tgroup>header .hint{font-size:var(--t6)}
.trow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 16px;cursor:pointer}
.trow:hover{background:var(--hover)}
.trow .t{font-weight:600;overflow-wrap:anywhere}
.trow .m{font-size:12.5px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:3px}
.trow.done .t{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.trow .when{font-size:var(--t6);font-weight:600;white-space:nowrap;text-align:right}
.trow .when small{display:block;font-weight:400;color:var(--faint);font-size:var(--t7)}
.daysoff-banner{display:flex;gap:14px;align-items:center;background:var(--accent-soft);border-radius:var(--r-lg);padding:14px 18px}
.daysoff-banner b{font-size:var(--t4)}

/* ---------- 1.5: holidays and leave ---------- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line)}
.cal .wd{font-size:var(--t7);color:var(--muted);font-weight:600;padding:8px 10px;background:var(--sunk);border-bottom:1px solid var(--line)}
.cal .wd.off{color:var(--accent)}
.cal .c{min-height:92px;padding:6px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.cal .c:nth-child(7n){border-right:0}
.cal .c .n{font-size:var(--t6);font-weight:600;color:var(--muted)}
.cal .c.other .n{color:var(--faint);font-weight:400}
.cal .c.today .n{color:var(--accent-ink);background:var(--accent);border-radius:999px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}
.cal .c.weekly{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--accent-soft) 80%,transparent) 6px 7px)}
.cal .ev{font-size:11.5px;line-height:1.3;padding:2px 6px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.cal .ev.holiday{background:var(--accent);color:var(--accent-ink)}
.cal .ev.leave{background:var(--info-soft);color:var(--info)}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap}
.cal-head b{font-size:var(--t4)}
.off-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 16px}
.off-row .k{width:10px;height:10px;border-radius:3px}
.off-row .k.holiday{background:var(--accent)} .off-row .k.leave{background:var(--info)}
.off-row .t{font-weight:600}
.off-row .m{font-size:12.5px;color:var(--muted)}

/* settings options */
.opt{display:flex;flex-direction:column;gap:8px}
.opt>.lb{font-weight:600}
.radio-row{display:flex;flex-direction:column;gap:6px}
.radio-row label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.radio-row label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.radio-row input{margin-top:3px}
.off-screen{max-width:520px;margin:12vh auto 0;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.off-screen h1{font-size:var(--t2);font-weight:600}
.off-screen p{margin:0;color:var(--muted)}

/* ---------- layout ---------- */
#view,#act-body,#team-body,#rem,#mt-body,#pt-body,#db-body,#hs-body,#today-body{display:flex;flex-direction:column;gap:20px;min-width:0}
#banner:empty{display:none}
@media (max-width:1100px){
  .grid2,.grid2.even,.jr-grid{grid-template-columns:minmax(0,1fr)}
  .stats,.stats.six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;height:auto;padding:12px 16px 8px;gap:10px}
  .nav{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:4px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav .grp{display:none}
  .nav button{white-space:nowrap}
  .nav button .lb{overflow:visible}
  .rail-foot{margin-top:0}
  main{padding:18px 16px 64px}
  .stats,.stats.four,.stats.six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meta,.two{grid-template-columns:minmax(0,1fr)}
  .bar-row{grid-template-columns:minmax(0,110px) minmax(0,1fr) 62px}
  .head h1{font-size:var(--t2)}
  .hours-axis span:nth-child(odd){visibility:hidden}
  .appeal{grid-template-columns:minmax(0,1fr)} .appeal-act{align-items:stretch} .appeal-act input{width:100%}
  .trow{grid-template-columns:auto minmax(0,1fr);}
  .trow .when{grid-column:2;text-align:left}
  .cal .c{min-height:64px}
}
@media (min-width:1800px){
  .people{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .bar-row{grid-template-columns:minmax(0,260px) minmax(0,1fr) 80px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* times and counts use the body face with tabular figures, not a code font */
.mono[data-task-time],.mono[data-live],td.num .mono,.timer-box .mono{font-family:var(--font-body);font-size:inherit}
.pri-normal{color:var(--faint);font-size:var(--t7)}

/* ===================== 1.8: notice board, live, feedback, team review ===================== */
.av.xs{width:18px;height:18px;font-size:8px}
.dialog.wide{width:min(760px,100%)}
.dialog.wide .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tag.neg{color:var(--bad);border-color:transparent;background:var(--bad-soft)}
.tag .ico{width:12px;height:12px}
.stat.warn b{color:var(--warn)}
.stat b small{font-size:var(--t6);color:var(--muted);font-weight:500}
.stars{color:#E0A100;letter-spacing:1px;font-size:13px;white-space:nowrap}.stars .off{color:var(--line-strong)}
.star-pick{display:flex;gap:2px}.star-pick button{all:unset;cursor:pointer;font-size:24px;line-height:1;color:var(--line-strong);padding:0 2px}
.star-pick button.on{color:#E0A100}.star-pick button:hover{transform:scale(1.12)}.star-pick button:focus-visible{outline:2px solid var(--accent);border-radius:4px}
.b18-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(60px,1fr) auto;gap:10px;align-items:center;font-size:var(--t6);padding:4px 0}
.b18-track{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}.b18-track i{display:block;height:100%;background:var(--accent);border-radius:99px}
.ai-card{border:1px solid var(--accent-line);background:linear-gradient(180deg,var(--accent-soft),var(--surface) 70%);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ai-card .ai-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ai-card .ai-h .ico{width:18px;height:18px;color:var(--accent)}.ai-card .ai-h .btn{margin-left:auto}
.ai-card .ai-text{white-space:normal;line-height:1.5}
.ai-card h4{font-size:var(--t6);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 2px}
.ai-card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.btn .ico{width:15px;height:15px}

/* notice board */
.nb{display:flex;flex-direction:column;gap:18px;max-width:980px}
.nb-up h2{margin:0 0 8px}
.nb-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.nb-chip{all:unset;cursor:pointer;display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);min-width:0}
.nb-chip:hover{border-color:var(--accent)}.nb-chip:focus-visible{outline:2px solid var(--accent)}
.nb-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:56px;border-radius:10px;background:var(--accent);color:var(--accent-ink);flex:none;line-height:1}
.nb-date b{font-size:22px;font-weight:700}.nb-date span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.nb-date.sm{width:40px;height:44px}.nb-date.sm b{font-size:17px}
.nb-feed{display:flex;flex-direction:column;gap:14px}
.nb-card{padding:16px 18px;display:flex;flex-direction:column;gap:10px;border-left:3px solid transparent;transition:box-shadow .3s}
.nb-card.unread{border-left-color:var(--accent)}
.nb-card.imp{border-left-color:var(--bad)}
.nb-card.pinned{background:linear-gradient(180deg,var(--accent-soft),var(--surface) 40%)}
.nb-card.focus{box-shadow:0 0 0 3px var(--accent-line)}
.nb-head{display:flex;gap:10px;align-items:flex-start}.nb-head>div:nth-child(2){flex:1}
.nb-head .tag{margin-left:6px}
.nb-k.meeting{color:var(--accent);background:var(--accent-soft);border-color:transparent}.nb-k.poll{color:var(--info);background:var(--info-soft);border-color:transparent}.nb-k.imp{color:var(--bad);background:var(--bad-soft);border-color:transparent;font-weight:600}
.nb-title{font-size:var(--t3);font-weight:600;margin:0;letter-spacing:-.005em}
.nb-body{line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.nb-meet{display:flex;gap:14px;align-items:center;padding:10px;border-radius:var(--r);background:var(--sunk);flex-wrap:wrap}
.nb-meet>div:nth-child(2){flex:1;min-width:180px}.nb-meet .nb-when{font-weight:600}
.nb-meet.cancelled .nb-date{background:var(--faint)}
.nb-poll{display:flex;flex-direction:column;gap:6px}.nb-q{font-weight:600}
.nb-opt{all:unset;cursor:pointer;position:relative;display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.nb-opt:hover:not(:disabled){border-color:var(--accent)}.nb-opt:focus-visible{outline:2px solid var(--accent)}
.nb-opt:disabled{cursor:default}
.nb-opt i{position:absolute;inset:0 auto 0 0;background:var(--accent-soft);z-index:0;transition:width .4s ease}
.nb-opt>*:not(i){position:relative;z-index:1}
.nb-opt .tx{flex:1;min-width:0}.nb-opt b{font-variant-numeric:tabular-nums}
.nb-opt.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.nb-opt .nb-box{color:var(--accent);width:16px}
.nb-voters{display:inline-flex;gap:2px;align-items:center}
.nb-rsvp{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.nb-rs{display:inline-flex;gap:14px;margin-left:auto;font-size:var(--t6);color:var(--muted)}.nb-rs>span{display:inline-flex;gap:3px;align-items:center}
.nb-foot{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:8px;font-size:var(--t6)}.nb-foot .hint{margin-left:auto}
.nb-comments{display:flex;flex-direction:column;gap:10px}
.nb-c{display:flex;gap:8px;align-items:flex-start;font-size:var(--t6)}.nb-c>div{flex:1;min-width:0;overflow-wrap:anywhere}
.nb-cform{display:flex;gap:8px}.nb-cform input{flex:1}
.nb-menu{position:relative}
.nb-pop{position:absolute;right:0;top:100%;z-index:30;display:flex;flex-direction:column;min-width:180px;padding:4px;box-shadow:var(--shadow)}
.nb-pop button{all:unset;cursor:pointer;padding:8px 10px;border-radius:var(--r-sm);font-size:var(--t6)}.nb-pop button:hover{background:var(--hover)}.nb-pop button.danger{color:var(--bad)}
.nb-compose .nc-opts{display:flex;flex-direction:column;gap:6px}
.nb-seen{display:grid;grid-template-columns:1fr 1fr;gap:20px}.nb-seen h3{font-size:var(--t6);color:var(--muted);margin:0 0 6px}
.nb-seen .person-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:4px 0}

/* live */
.live-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
.live-pref{margin:14px 0}
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.live-card{padding:14px;display:flex;flex-direction:column;gap:8px;border-top:3px solid var(--line)}
.live-card.working{border-top-color:var(--ok)}.live-card.meeting{border-top-color:var(--info)}.live-card.idle{border-top-color:var(--warn);background:linear-gradient(180deg,var(--warn-soft),var(--surface) 55%)}
.live-card.offline,.live-card.done,.live-card.off{opacity:.72}
.live-top{display:flex;gap:10px;align-items:center}
.live-pill{font-weight:600}.live-pill.ok{color:var(--ok);background:var(--ok-soft)}.live-pill.info{color:var(--info);background:var(--info-soft)}.live-pill.warn{color:var(--warn);background:var(--warn-soft)}.live-pill.muted,.live-pill.faint{color:var(--muted);background:var(--sunk)}
.live-what{font-weight:500;overflow-wrap:anywhere}
.live-meta{display:flex;gap:10px;flex-wrap:wrap}

/* feedback */
.fb-grid{align-items:start}
.fb-form{display:flex;flex-direction:column;gap:12px}
.fb-list{display:flex;flex-direction:column;gap:10px}
.fb-item{display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}
.fb-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sk-list{display:flex;flex-direction:column;gap:8px}
.sk-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr) auto;gap:8px;align-items:center}
.sk-dots{display:inline-flex;gap:4px}.sk-dots button{all:unset;cursor:pointer;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--accent-line);background:var(--surface)}
.sk-dots button.on{background:var(--accent);border-color:var(--accent)}.sk-dots button:focus-visible{outline:2px solid var(--accent)}
.port-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.port-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}
.rv-q-read{border-top:1px solid var(--line);padding-top:8px;margin-top:8px;display:flex;flex-direction:column;gap:4px}

/* team review */
.rv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rv-item{all:unset;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:8px}
.rv-item:hover{border-color:var(--accent)}.rv-item:focus-visible{outline:2px solid var(--accent)}
.rv-people{display:flex;gap:2px}
.rv-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.rv-top{margin-bottom:8px}.rv-top .card{display:flex;flex-direction:column;gap:10px}
.rv-agenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.rv-agenda li{display:flex;justify-content:space-between;align-items:center;gap:8px}.rv-agenda li.done span{text-decoration:line-through;color:var(--muted)}
.rv-table tr[aria-selected="true"] td{background:var(--accent-soft)}
.rv-mhead{display:flex;gap:14px;align-items:center;margin:26px 0 12px;flex-wrap:wrap}
.rv-final{margin-left:auto;display:flex;align-items:baseline;gap:6px;padding:10px 16px;border-radius:var(--r-lg);background:var(--accent);color:var(--accent-ink)}
.rv-final b{font-size:30px;font-weight:700}.rv-final span{font-size:var(--t6)}
.rv-final.sm{margin:8px 0 0;display:inline-flex}.rv-final.sm b{font-size:22px}
.rv-stats{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:16px}
#rv-member .grid2{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px}
#rv-member .card h3{font-size:var(--t5);margin:0 0 8px}
.rv-li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--t6)}.rv-li:last-child{border-bottom:0}
.rv-q{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.rv-score{display:flex;gap:4px;flex-wrap:wrap}
.rv-score button{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line-strong);font-variant-numeric:tabular-nums;font-size:var(--t6)}
.rv-score button:hover{border-color:var(--accent)}.rv-score button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}.rv-score button:focus-visible{outline:2px solid var(--accent)}
.rv-journals{margin-bottom:16px}.rv-journals summary{cursor:pointer}
.rv-jr{margin-top:10px}.rv-jr pre{white-space:pre-wrap;font-family:var(--font-body);font-size:var(--t6);background:var(--sunk);padding:10px;border-radius:var(--r);margin:4px 0 0}
.ai-card.big{margin-bottom:16px}
@media (max-width:900px){
  .live-stats,.rv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .port-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #rv-member .grid2,.nb-seen,.dialog.wide .two{grid-template-columns:minmax(0,1fr)}
  .sk-row{grid-template-columns:minmax(0,1fr) auto auto}.sk-row input[data-sk="note"]{display:none}
}
div.f{display:flex;flex-direction:column;gap:6px;font-size:var(--t6);color:var(--muted);font-weight:500;min-width:0}
.stat .stars{color:#E0A100;font-size:14px}.stat .stars .off{color:var(--line-strong);font-size:14px}
.card.pad.port-head{flex-direction:row;align-items:center}

/* =================== 1.9 =================== */
/* personal colour themes: only the action colour changes; surfaces and signals stay the same */
:root[data-accent="ocean"]{--accent:#0B6478;--accent-hover:#08515F;--accent-soft:#DDEEF1;--accent-line:#9FCBD5}
:root[data-accent="indigo"]{--accent:#3A48A6;--accent-hover:#2F3B8C;--accent-soft:#E3E6F6;--accent-line:#B1B8E6}
:root[data-accent="plum"]{--accent:#7A3B78;--accent-hover:#642F62;--accent-soft:#F1E3F0;--accent-line:#D5B0D3}
:root[data-accent="ember"]{--accent:#A3461B;--accent-hover:#873915;--accent-soft:#F7E4DA;--accent-line:#E3B49C}
:root[data-accent="graphite"]{--accent:#38424C;--accent-hover:#2A323A;--accent-soft:#E4E7EA;--accent-line:#B7BEC5}
:root[data-accent="ocean"][data-theme="dark"]{--accent:#6FC6DA;--accent-hover:#8AD3E3;--accent-ink:#06212A;--accent-soft:#12303A;--accent-line:#2A5664}
:root[data-accent="indigo"][data-theme="dark"]{--accent:#9AA6F2;--accent-hover:#B0B9F5;--accent-ink:#0E1433;--accent-soft:#1C2347;--accent-line:#36407A}
:root[data-accent="plum"][data-theme="dark"]{--accent:#D79CD4;--accent-hover:#E2B3DF;--accent-ink:#2A0F29;--accent-soft:#33192F;--accent-line:#5A3457}
:root[data-accent="ember"][data-theme="dark"]{--accent:#F0A27A;--accent-hover:#F4B492;--accent-ink:#2E1205;--accent-soft:#3A2115;--accent-line:#6A3A22}
:root[data-accent="graphite"][data-theme="dark"]{--accent:#B9C3CD;--accent-hover:#CBD3DB;--accent-ink:#11161B;--accent-soft:#242B32;--accent-line:#46505A}
@media (prefers-color-scheme: dark){
  :root[data-accent="ocean"]:not([data-theme="light"]){--accent:#6FC6DA;--accent-hover:#8AD3E3;--accent-ink:#06212A;--accent-soft:#12303A;--accent-line:#2A5664}
  :root[data-accent="indigo"]:not([data-theme="light"]){--accent:#9AA6F2;--accent-hover:#B0B9F5;--accent-ink:#0E1433;--accent-soft:#1C2347;--accent-line:#36407A}
  :root[data-accent="plum"]:not([data-theme="light"]){--accent:#D79CD4;--accent-hover:#E2B3DF;--accent-ink:#2A0F29;--accent-soft:#33192F;--accent-line:#5A3457}
  :root[data-accent="ember"]:not([data-theme="light"]){--accent:#F0A27A;--accent-hover:#F4B492;--accent-ink:#2E1205;--accent-soft:#3A2115;--accent-line:#6A3A22}
  :root[data-accent="graphite"]:not([data-theme="light"]){--accent:#B9C3CD;--accent-hover:#CBD3DB;--accent-ink:#11161B;--accent-soft:#242B32;--accent-line:#46505A}
}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 10px 6px;border-radius:var(--r);border:1px solid var(--line);min-width:62px;font-size:var(--t7);color:var(--muted)}
.swatch i{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.swatch:hover{background:var(--hover)}
.swatch[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);color:var(--ink);font-weight:600}
.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* shared pieces */
.grow{flex:1}
.toolbar .lbl,.td-tools .lbl{font-size:var(--t7);color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kpi-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kpi-row.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.kpi{all:unset;box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0;position:relative}
.kpi b{font-size:var(--t2);font-weight:600;letter-spacing:-.01em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi span{font-size:var(--t7);color:var(--muted)}
.kpi.ok b{color:var(--ok)} .kpi.bad b{color:var(--bad)} .kpi.warn b{color:var(--warn)}
.kpi.bad{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
button.kpi{cursor:pointer;transition:border-color .12s,box-shadow .12s}
button.kpi:hover{border-color:var(--line-strong)}
button.kpi[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.search19{display:flex;align-items:center;gap:6px;position:relative;min-width:220px;flex:0 1 320px}
.search19 .ico{position:absolute;left:10px;color:var(--faint);width:16px;height:16px;pointer-events:none}
.search19 .field{padding-left:32px;width:100%}
.av-stack{display:inline-flex;align-items:center}
.av-stack .av{box-shadow:0 0 0 2px var(--surface)}
.av-stack .av+.av{margin-left:-6px}
.av.xs.more{background:var(--sunk);color:var(--muted);font-size:8px}
.pill.todo{background:var(--sunk);color:var(--muted)}
.pill.warnp{background:var(--warn-soft);color:var(--warn)}
.pill.sched{background:transparent;border:1px dashed var(--line-strong);color:var(--muted)}
.legend19{display:inline-flex;align-items:center;gap:6px;font-size:var(--t7);color:var(--muted);flex-wrap:wrap}
.legend19 i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-left:6px}
.legend19 i:first-child{margin-left:0}

/* date range picker */
.drp-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:6px 10px 6px 11px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);min-height:36px;transition:border-color .12s,box-shadow .12s}
.drp-btn:hover{border-color:var(--accent-line)}
.drp-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drp-btn .ico{width:17px;height:17px;color:var(--accent)}
.drp-btn .chev{width:15px;height:15px;color:var(--faint)}
.drp-l{display:flex;flex-direction:column;line-height:1.2}
.drp-l b{font-size:var(--t6);font-weight:600}
.drp-l span{font-size:11.5px;color:var(--muted)}
.drp-pop{position:fixed;z-index:80;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;max-width:calc(100vw - 24px)}
.drp-presets{display:flex;flex-direction:column;padding:8px;gap:2px;border-right:1px solid var(--line);background:var(--sunk);min-width:132px}
.drp-presets button{all:unset;cursor:pointer;padding:7px 10px;border-radius:var(--r-sm);font-size:var(--t6);color:var(--ink);white-space:nowrap}
.drp-presets button:hover{background:var(--hover)}
.drp-presets button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.drp-main{padding:12px 14px;display:flex;flex-direction:column;gap:8px;position:relative}
.drp-nav{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;pointer-events:none}
.drp-nav .btn{pointer-events:auto;padding:4px 6px}
.drp-cals{display:flex;gap:22px}
.drp-cal{width:238px}
.drp-mn{text-align:center;font-weight:600;font-size:var(--t6);height:28px;line-height:28px}
.drp-wk,.drp-grid{display:grid;grid-template-columns:repeat(7,34px)}
.drp-wk span{font-size:11px;color:var(--faint);text-align:center;padding:4px 0;font-weight:600}
.drp-d{all:unset;box-sizing:border-box;cursor:pointer;height:32px;display:flex;align-items:center;justify-content:center;font-size:var(--t6);border-radius:var(--r-sm);position:relative}
.drp-d:hover:not(:disabled){background:var(--hover);box-shadow:inset 0 0 0 1px var(--line-strong)}
.drp-d:disabled{color:var(--faint);opacity:.45;cursor:default}
.drp-d.now{font-weight:700;color:var(--accent)}
.drp-d.in{background:var(--accent-soft);border-radius:0}
.drp-d.lo,.drp-d.hi{background:var(--accent);color:var(--accent-ink);font-weight:600}
.drp-d.lo{border-radius:var(--r-sm) 0 0 var(--r-sm)} .drp-d.hi{border-radius:0 var(--r-sm) var(--r-sm) 0} .drp-d.lo.hi{border-radius:var(--r-sm)}
.drp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:10px;flex-wrap:wrap}
.drp-foot .hint b{color:var(--ink);font-weight:600}
@media (max-width:720px){.drp-cals .drp-cal:first-child{display:none}.drp-presets{min-width:0}}

/* Today */
.today19{display:flex;flex-direction:column;gap:18px}
.td-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:18px 22px}
.td-prog{position:relative;width:92px;height:92px}
.td-pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.td-pct b{font-size:20px;font-weight:700}
.td-pct span{font-size:10.5px;color:var(--muted)}
.ring-bg{fill:none;stroke:var(--sunk);stroke-width:9}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.td-hi h2{font-size:var(--t2);font-weight:600;letter-spacing:-.01em}
.td-hi p{margin:4px 0 0}
.td-kpis{display:grid;grid-template-columns:repeat(6,auto);gap:0;border-left:1px solid var(--line)}
.td-kpis .kpi{border:0;border-radius:0;background:none;padding:4px 18px;box-shadow:-1px 0 0 var(--line)}
.td-kpis .kpi:first-child{box-shadow:none}
.td-kpis .kpi b{font-size:var(--t3)}
.td-now{display:flex;align-items:center;gap:14px;padding:12px 16px;border-color:var(--accent-line);background:var(--accent-soft)}
.td-now .td-now-t{font-weight:600;color:var(--ink);flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-now .clock{font-size:var(--t3);font-weight:600;color:var(--accent)}
.td-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.td-tools .legend19{margin-left:auto}
.legend19 .p-urgent{background:var(--bad)} .legend19 .p-high{background:var(--warn)} .legend19 .p-normal{background:var(--accent-line)} .legend19 .p-low{background:var(--line-strong)}
.td-col{display:flex;flex-direction:column;gap:20px}
.tg19{display:flex;flex-direction:column;gap:8px}
.tg19>header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tg19>header h2{font-size:var(--t4);font-weight:600;display:flex;align-items:center;gap:8px}
.tg19 .cnt{font-size:var(--t7);font-weight:600;background:var(--sunk);color:var(--muted);border-radius:999px;padding:0 8px;line-height:20px}
.tg-overdue .cnt{background:var(--bad-soft);color:var(--bad)}
.tg-today .cnt{background:var(--accent-soft);color:var(--accent)}
.trow19{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,auto);gap:14px;align-items:center;padding:12px 16px 12px 18px;cursor:pointer;position:relative}
.trow19::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:transparent}
.trow19.prs-urgent::before{background:var(--bad)} .trow19.prs-high::before{background:var(--warn)} .trow19.prs-low::before{background:var(--line-strong)}
.trow19:hover{background:var(--hover)}
.trow19 .t{font-weight:600;overflow-wrap:anywhere}
.trow19 .m{font-size:12.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:3px}
.trow19 .when{font-size:var(--t6);font-weight:600;white-space:nowrap;text-align:right}
.trow19 .when small{display:block;font-weight:400;color:var(--faint);font-size:var(--t7)}
.trow19.done .t{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.trow19 .done-mark{width:30px;height:30px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.trow19 .tstate:empty{display:none}
@media (max-width:1100px){.td-hero{grid-template-columns:auto minmax(0,1fr)}.td-kpis{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding-top:12px;grid-template-columns:repeat(6,minmax(0,1fr))}.td-kpis .kpi{padding:4px 12px}}
@media (max-width:640px){.td-kpis{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:10px}.trow19{grid-template-columns:auto minmax(0,1fr)}.trow19 .when,.trow19 .tstate{grid-column:2;text-align:left}.td-tools .legend19{margin-left:0}}

/* Overview */
.ov-tools .field{width:auto;min-width:170px}
.ov-people{display:flex;flex-direction:column;gap:14px}
.ov-person{overflow:hidden}
.ov-person>header{display:grid;grid-template-columns:auto minmax(140px,1fr) minmax(160px,260px) auto auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.ov-who{display:flex;flex-direction:column;min-width:0}
.ov-who b{font-size:var(--t4)}
.ov-meter{display:flex;flex-direction:column;gap:5px}
.ov-time{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.ov-person .table-wrap.flat{border:0;border-radius:0}
.ov-none{margin:0;padding:14px 18px}
tr.pri-row-urgent td:first-child{box-shadow:inset 3px 0 0 var(--bad)} tr.pri-row-high td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
@media (max-width:900px){.ov-person>header{grid-template-columns:auto minmax(0,1fr) auto}.ov-meter{grid-column:1/-1}}

/* Live */
.live19{display:flex;flex-direction:column;gap:14px}
.lv-alerts{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;flex-wrap:wrap}
.lv-alerts>div:first-child{display:flex;gap:12px;align-items:flex-start;max-width:78ch}
.lv-alerts>div:first-child .ico{color:var(--accent);margin-top:2px}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.lv-card{padding:16px;display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--line)}
.lv-card.st-working{border-top-color:var(--ok)} .lv-card.st-meeting{border-top-color:var(--info)} .lv-card.st-idle{border-top-color:var(--warn)} .lv-card.st-break{border-top-color:var(--line-strong)}
.lv-card>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.lv-who{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.lv-bell{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--faint);border:1px solid var(--line)}
.lv-bell:hover{background:var(--hover)}
.lv-bell.on{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
.lv-bell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lv-state{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.lv-what{font-weight:600;overflow-wrap:anywhere}
.lv-app{font-size:var(--t7)}
.lv-tl{position:relative;height:12px;border-radius:6px;background:var(--sunk);overflow:hidden}
.lv-tl.empty{height:auto;background:none}
.lv-tl i{position:absolute;top:0;bottom:0}
.k-work{background:var(--ok)} .k-meeting{background:var(--info)} .k-break{background:var(--line-strong)} .k-idle{background:var(--warn)}
.lv-tl i.k-idle{opacity:.75}
.lv-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:-6px}
.lv-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}
.lv-nums div{background:var(--sunk);border-radius:var(--r-sm);padding:6px 8px;min-width:0}
.lv-nums dt{font-size:10.5px;color:var(--muted)} .lv-nums dd{margin:0;font-weight:600;font-size:var(--t6)}
.lv-nums div.bad dd{color:var(--bad)}
.lv-card footer{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.lv-card footer .ico{width:15px;height:15px}
@media (max-width:900px){.lv-leg{display:none}}

/* Meetings */
.mt19{display:flex;flex-direction:column;gap:22px}
.mt-day{display:flex;flex-direction:column;gap:10px}
.mt-day>h3{display:flex;align-items:baseline;gap:10px;font-size:var(--t5);font-weight:600;position:sticky;top:0;background:var(--bg);padding:4px 0;z-index:2}
.mt2{display:grid;grid-template-columns:112px minmax(0,1fr);overflow:hidden}
.mt2-time{display:flex;flex-direction:column;gap:2px;padding:16px;background:var(--sunk);border-right:1px solid var(--line);font-size:var(--t6);color:var(--muted)}
.mt2-time b{color:var(--ink);font-size:var(--t5)}
.mt2-dur{margin-top:auto;align-self:flex-start;font-size:var(--t7);font-weight:600;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 9px}
.mt2-body{padding:14px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mt2-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.mt2-h h4{margin:0;font-size:var(--t4);font-weight:600;overflow-wrap:anywhere}
.mt2-meta{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;font-size:var(--t6);color:var(--muted)}
.mt2-meta b{color:var(--ink);font-weight:600}
.mt2-ppl{display:inline-flex;align-items:center;gap:8px}
.mt2-disc{background:var(--bg);border-radius:var(--r);padding:10px 14px}
.mt2-disc summary{cursor:pointer;font-weight:600;font-size:var(--t6);color:var(--muted)}
.mt2-disc>div{white-space:pre-wrap;margin-top:6px;overflow-wrap:anywhere;line-height:1.6}
.mt2-ai-h{font-weight:600;font-size:var(--t6);color:var(--muted);display:flex;gap:8px;align-items:baseline}
.mt2-ai ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.mt2-ai li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-left:22px;position:relative}
.mt2-ai li::before{content:"";position:absolute;left:2px;top:5px;width:11px;height:11px;border:1.5px solid var(--line-strong);border-radius:3px}
.mt2-ai li.ok::before{background:var(--ok);border-color:var(--ok)}
.mt-up{display:flex;flex-direction:column;gap:8px}
.mt-up h2{font-size:var(--t5);font-weight:600;display:flex;gap:8px;align-items:baseline}
.mt-up-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mt-up-c{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.mt-up-c:hover{border-color:var(--accent-line)}
.mt-up-t{display:flex;flex-direction:column;min-width:0}
@media (max-width:640px){.mt2{grid-template-columns:1fr}.mt2-time{flex-direction:row;gap:10px;align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:10px 14px}.mt2-dur{margin:0 0 0 auto}}

/* Journal: team list */
.jr-th{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.jr-team{overflow:hidden}
.jr-trow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;cursor:pointer;border-top:1px solid var(--line)}
.jr-trow:first-child{border-top:0}
.jr-trow:hover{background:var(--hover)}
.jr-trow.sel{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.jr-trow.none .jr-tw b{color:var(--muted)}
.jr-tw{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.jr-tn{display:flex;gap:10px}
.jr-tn span{display:flex;flex-direction:column;align-items:flex-end;font-size:10.5px;color:var(--faint);line-height:1.2}
.jr-tn b{font-size:var(--t6);color:var(--ink);font-weight:600}
@media (max-width:1300px){.jr-tn span:nth-child(2){display:none}}

/* Dashboard trends */
#db-trends{display:flex;flex-direction:column;gap:22px}

/* Points reviews */
.pr-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.pr-row:first-child{border-top:0}
.pr-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.pr-pts{font-size:var(--t6);color:var(--muted);margin-left:6px}
.pr-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.pr-done{margin-top:6px}
.pr-done summary{cursor:pointer}
@media (max-width:700px){.pr-row{grid-template-columns:1fr}.pr-act{align-items:flex-start}}

/* Activity */
.act-head{display:flex;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap}
.act-head>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.act-head b{font-size:var(--t4)}
.act-t .trunc{max-width:520px}
.share{display:block;height:3px;background:var(--sunk);border-radius:2px;margin-top:5px;max-width:520px}
.share i{display:block;height:100%;background:var(--accent);border-radius:2px;opacity:.7}

/* All tasks: running timer */
.run-time{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600}
.run-time .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite}

/* Settings: AI */
.ai-free{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);padding:12px 14px;font-size:var(--t6)}
.ai-free ol{margin:6px 0;padding-left:20px;display:flex;flex-direction:column;gap:3px}

@media (max-width:1100px){.kpi-row,.kpi-row.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.kpi-row,.kpi-row.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ov-person table{table-layout:fixed}
.ov-person th:nth-child(2){width:150px}.ov-person th:nth-child(3){width:110px}.ov-person th:nth-child(4){width:130px}.ov-person th:nth-child(5){width:96px}
@media (max-width:760px){.ov-person table{table-layout:auto}}
.lv-tl.empty{height:auto;display:block}.lv-tl.empty .hint{font-size:var(--t7)}
.lv-card footer{margin-top:auto}
.tp-head .btn{align-self:flex-start}

/* =================== 2.0 =================== */
/* backgrounds (per person) */
:root[data-bg="soft"] body{background:radial-gradient(900px 620px at 0% 0%,color-mix(in srgb,#F6C9B0 55%,transparent),transparent 70%),radial-gradient(900px 640px at 100% 100%,color-mix(in srgb,#BFE6D9 60%,transparent),transparent 70%),radial-gradient(700px 500px at 100% 0%,color-mix(in srgb,#F7E3C5 45%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
:root[data-bg="mesh"] body{background:radial-gradient(800px 600px at 10% 10%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),radial-gradient(800px 600px at 90% 90%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
:root[data-bg="glow"] body{background:radial-gradient(640px 480px at 8% 96%,color-mix(in srgb,var(--accent) 48%,transparent),transparent 72%),radial-gradient(520px 420px at 92% 4%,rgba(245,165,36,.42),transparent 72%),radial-gradient(560px 460px at 78% 100%,rgba(20,184,166,.34),transparent 72%),var(--bg);background-attachment:fixed}
:root[data-bg="dusk"] body{background:radial-gradient(700px 520px at 100% 0%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 72%),radial-gradient(600px 460px at 0% 100%,rgba(120,72,40,.38),transparent 72%),var(--bg);background-attachment:fixed}
:root[data-preset="lime"][data-theme="dark"]{--bg:#0B0D09;--rail:#080A07;--surface:#141711;--sunk:#1B1F17;--hover:#1A1E16;--line:#252B20;--line-strong:#343C2D}
:root[data-preset="glass-night"][data-theme="dark"]{--bg:#070C16;--rail:#0A1120;--surface:#101828;--sunk:#162033;--hover:#152036;--line:#1E2A40;--line-strong:#2B3A55}
:root[data-preset="ember"][data-theme="dark"]{--bg:#141110;--rail:#100D0C;--surface:#1D1917;--sunk:#25201D;--hover:#231E1B;--line:#30291F;--line-strong:#40372C}
:root[data-preset="mint"]:not([data-theme="dark"]){--bg:#F3F6F2;--rail:#E9EFE8}
/* glass cards */
:root[data-glass="1"] .card,:root[data-glass="1"] .stats,:root[data-glass="1"] .table-wrap,:root[data-glass="1"] .kpi,:root[data-glass="1"] .dayline,:root[data-glass="1"] .drp-btn,:root[data-glass="1"] .office,:root[data-glass="1"] .seg{background:color-mix(in srgb,var(--surface) 58%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-color:color-mix(in srgb,var(--line-strong) 55%,transparent)}
:root[data-glass="1"] .rail{background:color-mix(in srgb,var(--rail) 55%,transparent);backdrop-filter:blur(22px) saturate(140%);border-right:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
:root[data-glass="1"] .dialog,:root[data-glass="1"] .drp-pop,:root[data-glass="1"] .nb-pop{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(24px)}
:root[data-glass="1"] .table-wrap thead th{background:transparent}
:root[data-radius="round"]{--r-sm:8px;--r:12px;--r-lg:18px}
:root[data-radius="sharp"]{--r-sm:3px;--r:4px;--r-lg:6px}
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.look{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:3px;padding:8px;border:1px solid var(--line);border-radius:var(--r);font-size:var(--t7);color:var(--muted)}
.look b{font-size:var(--t6);color:var(--ink)}
.look:hover{background:var(--hover)}
.look.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.look:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.look-sw{height:46px;border-radius:calc(var(--r) - 2px);position:relative;overflow:hidden;margin-bottom:4px;border:1px solid var(--line)}
.look-sw i{position:absolute;right:8px;bottom:8px;width:22px;height:22px;border-radius:50%}
.look-sw em{position:absolute;left:8px;top:8px;width:34px;height:22px;border-radius:6px;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.45)}
.look-sw.custom{background:conic-gradient(from 90deg,#F5A524,#E5484D,#8E4EC6,#3E63DD,#12A594,#46A758,#F5A524)}
.look-custom{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.look-custom input[type="color"]{width:44px;height:32px;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:2px;background:var(--surface);cursor:pointer}

/* sidebar: meetings, visits */
.mini-acts{display:flex;gap:6px;margin-top:4px}
.mini-acts .btn{flex:1;justify-content:center;background:color-mix(in srgb,#fff 16%,transparent);border-color:transparent;color:inherit}
.mini-timer.visit{background:var(--warn);color:#fff}
.mini-timer.visit .btn{background:color-mix(in srgb,#fff 18%,transparent);border-color:transparent;color:inherit;justify-content:center}
.office.joinable{border-color:var(--info);background:var(--info-soft)}
.office .actions{flex-wrap:wrap}

/* steps with tags */
.st-row.v20{grid-template-columns:24px minmax(0,1fr) auto auto auto auto}
.st-mode{display:flex;gap:8px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.st-mode label{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.st-mode.off{opacity:.45}
.st-mode.off label{cursor:default}
.mention-pop{position:fixed;z-index:90;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:4px;display:flex;flex-direction:column}
.mention-pop button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);font-size:var(--t6)}
.mention-pop button .hint{margin-left:auto}
.mention-pop button.on,.mention-pop button:hover{background:var(--accent-soft)}
b.mention{color:var(--accent);font-weight:600}
.tag.st-for{border-color:var(--accent-line);color:var(--accent);margin-left:6px}
.tag.step-me{border-color:var(--info);color:var(--info);background:var(--info-soft)}
@media (max-width:700px){.st-row.v20{grid-template-columns:24px minmax(0,1fr) auto}.st-row.v20 .st-mode{grid-column:2}}

/* profile */
.pf{display:flex;flex-direction:column;gap:18px}
.av.xl{width:84px;height:84px;font-size:26px}
.pf-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px 24px}
.pf-id h2{font-size:var(--t1);font-weight:600;letter-spacing:-.015em}
.pf-facts{display:flex;flex-wrap:wrap;gap:6px 24px;margin:10px 0 0}
.pf-facts dt{font-size:var(--t7);color:var(--faint)}
.pf-facts dd{margin:0;font-size:var(--t6);font-weight:500}
.pf-score{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:120px;padding:14px 18px;border-radius:var(--r-lg);background:var(--accent-soft);color:var(--accent)}
.pf-score b{font-size:34px;font-weight:700;line-height:1}
.pf-score b small{font-size:15px;font-weight:600;opacity:.7}
.pf-score span{font-size:var(--t7);margin-top:4px}
.pf-sum span{line-height:1.7}
.pf-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.pf-row:first-child{border-top:0}
.pf-row.click{cursor:pointer}.pf-row.click:hover{background:var(--hover)}
.pf-rec{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line)}
.pf-rec:first-child{border-top:0}
@media (max-width:760px){.pf-head{grid-template-columns:auto minmax(0,1fr)}.pf-score{grid-column:1/-1}}

/* update bar */
#upd:empty{display:none}
.upd-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--r-lg);background:var(--accent);color:var(--accent-ink)}
.upd-bar>.ico{width:22px;height:22px}
.upd-t{display:flex;flex-direction:column;flex:1;min-width:0}
.upd-t span{font-size:var(--t6);opacity:.9}
.upd-bar .btn{border-color:transparent}
.upd-bar .btn.primary{background:var(--accent-ink);color:var(--accent)}
.upd-bar .btn.ghost{color:inherit}

/* =================== 2.1 =================== */
/* running timer: stop or finish */
.mini-steps{font-size:var(--t7);opacity:.85;margin:-4px 0 4px}
.mini-timer .btn.mini-done{background:var(--accent-ink);color:var(--accent);font-weight:600}
.mini-timer .btn.mini-done:hover{background:color-mix(in srgb,var(--accent-ink) 88%,var(--accent))}
.btn.play.tick.locked{opacity:.55}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* gradient colours: g1 to g2 (g3 is the middle of a cover) */
:root{--g1:var(--accent);--g2:var(--accent);--rail-a:color-mix(in srgb,var(--g1) 70%,#0B1020);--rail-b:color-mix(in srgb,var(--g2) 62%,#0B1020);
  --c1:#2563EB;--c2:#EA580C;--c3:#16A34A;--c4:#DB2777;--c5:#7C3AED}
:root[data-theme="dark"]{--c1:#60A5FA;--c2:#FB923C;--c3:#4ADE80;--c4:#F472B6;--c5:#A78BFA}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c1:#60A5FA;--c2:#FB923C;--c3:#4ADE80;--c4:#F472B6;--c5:#A78BFA}}
@media (prefers-color-scheme: light){:root[data-rail="white"]:not([data-theme]){--rail:#FFFFFF}}
:root[data-preset="sunrise"]{--g1:#E8453C;--g2:#F59E42}
:root[data-preset="sunrise"][data-theme="light"]{--bg:#FBF7F4;--rail:#FFFFFF;--accent-soft:#FCE6E1}
:root[data-preset="pop"]{--g1:#4F46E5;--g2:#C026D3;--rail-a:#1E3A8A;--rail-b:#5B21B6}
:root[data-preset="pop"][data-theme="light"]{--bg:#F3F4F9}
:root[data-preset="studio"]{--g1:#F97316;--g2:#F59E0B}
:root[data-preset="studio"][data-theme="light"]{--bg:#F5F5F6}
:root[data-preset="aurora"]{--g1:#06B6D4;--g3:#6366F1;--g2:#EC4899}
:root[data-preset="aurora"][data-theme="light"]{--bg:#F6F7FB;--rail:#FFFFFF}
:root[data-preset="harbor"]{--g1:#0E8A5A;--g2:#14B8A6;--rail-a:#0F2B46;--rail-b:#11506A}
:root[data-preset="harbor"][data-theme="light"]{--bg:#F2F6F7}
:root[data-preset="tulip"]{--g1:#E11D74;--g2:#FB7A3C}
:root[data-preset="tulip"][data-theme="light"]{--bg:#FCF6F8;--rail:#FFFFFF}

/* sidebar styles */
:root[data-rail="white"][data-theme="light"]{--rail:#FFFFFF}
:root[data-rail="white"] .rail{border-right:1px solid var(--line)}
:root[data-rail="white"][data-theme="light"] .nav button[aria-current="true"]{background:var(--accent-soft);box-shadow:none}
:root[data-rail="dark"] .rail,:root[data-rail="grad"] .rail{--ink:#F4F6FA;--muted:rgba(255,255,255,.74);--faint:rgba(255,255,255,.5);--surface:rgba(255,255,255,.1);--hover:rgba(255,255,255,.16);--sunk:rgba(255,255,255,.08);--line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.26);color:var(--ink)}
:root[data-rail="dark"] .rail{background:#1F2329}
:root[data-rail="grad"] .rail{background:linear-gradient(180deg,var(--rail-a),var(--rail-b))}
:root[data-rail="dark"] .nav button[aria-current="true"],:root[data-rail="grad"] .nav button[aria-current="true"]{background:rgba(255,255,255,.16);box-shadow:inset 3px 0 0 var(--g2)}
:root[data-rail="dark"] .nav button[aria-current="true"] .ico,:root[data-rail="grad"] .nav button[aria-current="true"] .ico{color:#fff}
:root[data-rail="dark"] .rail .office.joinable,:root[data-rail="grad"] .rail .office.joinable{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}

/* page headers */
:root[data-head="line"] .head{padding-bottom:16px;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--g1),var(--g2) 55%,transparent) 1}
:root[data-head="line"] .head h1{background:linear-gradient(90deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:2px}
:root[data-head="band"] .head,:root[data-head="cover"] .head{color:#fff;border-radius:var(--r-lg);padding:20px 24px;align-items:center;background:linear-gradient(120deg,var(--g1),var(--g2));box-shadow:0 12px 30px -16px color-mix(in srgb,var(--g1) 80%,transparent)}
:root[data-head="cover"] .head{position:relative;min-height:156px;align-items:flex-end;padding:24px 28px;overflow:hidden;
  background:radial-gradient(circle at 86% 18%,rgba(255,255,255,.26) 0 58px,transparent 59px),radial-gradient(circle at 70% 118%,rgba(255,255,255,.16) 0 96px,transparent 97px),radial-gradient(circle at 97% 88%,rgba(255,255,255,.12) 0 38px,transparent 39px),linear-gradient(115deg,var(--g1),var(--g3,var(--g2)) 55%,var(--g2))}
:root[data-head="cover"] .head h1{font-size:34px;letter-spacing:-.025em}
:root[data-head="band"] .head p,:root[data-head="cover"] .head p{color:rgba(255,255,255,.88)}
:root[data-head="band"] .head .btn,:root[data-head="cover"] .head .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
:root[data-head="band"] .head .btn:hover,:root[data-head="cover"] .head .btn:hover{background:rgba(255,255,255,.28)}
:root[data-head="band"] .head .btn.primary,:root[data-head="cover"] .head .btn.primary{background:#fff;border-color:#fff;color:color-mix(in srgb,var(--g1) 80%,#000)}
:root[data-head="band"] .head .seg,:root[data-head="cover"] .head .seg{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
:root[data-head="band"] .head .seg button,:root[data-head="cover"] .head .seg button{color:rgba(255,255,255,.85)}
:root[data-head="band"] .head .seg button[aria-pressed="true"],:root[data-head="cover"] .head .seg button[aria-pressed="true"]{background:#fff;color:#111}

/* layout: coloured top bar */
.app.lay-top{grid-template-columns:236px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.topbar{grid-column:1/-1;position:sticky;top:0;z-index:19;display:flex;align-items:center;gap:14px;height:56px;padding:0 14px 0 18px;background:linear-gradient(90deg,var(--g1),var(--g2));color:#fff;box-shadow:0 2px 12px -6px rgba(0,0,0,.25)}
.topbar .brand{padding:0;color:#fff;font-size:var(--t4)}
.topbar .brand img{width:30px;height:30px;background:#fff;border-radius:8px;padding:3px}
.tb-date{font-size:var(--t6);color:rgba(255,255,255,.88);padding-left:14px;border-left:1px solid rgba(255,255,255,.3);white-space:nowrap}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.topbar .theme-btn{color:#fff;margin:0}
.topbar .theme-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.topbar .tb-new{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff;font-weight:600}
.topbar .tb-new:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.6)}
.topbar .me-btn{width:auto;color:#fff;padding:4px 10px 4px 4px}
.topbar .me-btn .n{color:#fff}.topbar .me-btn .r{color:rgba(255,255,255,.8)}
.topbar .me-btn>.ico{display:none}
.topbar .me-btn:hover,.topbar .me-btn[aria-current="true"]{background:rgba(255,255,255,.2);color:#fff}
.topbar .av{box-shadow:0 0 0 2px rgba(255,255,255,.75)}
.lay-top .rail{top:56px;height:calc(100vh - 56px);padding-top:14px}

/* layout: slim icon rail, timers in a strip above the page */
.app.lay-icons{grid-template-columns:76px minmax(0,1fr)}
.lay-icons .rail{padding:14px 0 12px;align-items:center}
.lay-icons .brand{padding:2px 0 6px;justify-content:center}
.lay-icons .brand img{width:32px;height:32px}
.lay-icons .nav{align-items:center;gap:4px;margin:0;padding:0 0 4px;width:100%}
.lay-icons .nav .grp{height:1px;width:34px;padding:0;margin:6px auto;background:var(--line);font-size:0;flex:none}
.lay-icons .nav button{justify-content:center;width:46px;height:44px;padding:0;flex:none;position:relative;border-radius:12px}
.lay-icons .nav button .ico{width:22px;height:22px}
.lay-icons .nav button .lb{display:none}
.lay-icons .nav .count{position:absolute;top:1px;right:-1px;min-width:17px;line-height:17px;padding:0 4px;font-size:10px}
:root[data-rail="dark"] .lay-icons .nav button[aria-current="true"],:root[data-rail="grad"] .lay-icons .nav button[aria-current="true"]{box-shadow:none;background:rgba(255,255,255,.2)}
.lay-icons .rail-foot{align-items:center;gap:6px}
.lay-icons .theme-btn{margin:0}
.lay-icons .me-chip{min-width:0}
.lay-icons .me-btn{padding:4px;width:auto}
.lay-icons .me-btn .who-t,.lay-icons .me-btn>.ico{display:none}
.dock{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.dock #workday{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 auto}
.dock #mini:empty,.dock #tracker-line:empty{display:none}
.dock .office{flex-direction:row;align-items:center;gap:12px;padding:8px 12px}
.dock .office .btn.block{width:auto}
.dock .mini-timer{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:8px 14px}
.dock .mini-timer .lbl{flex-basis:100%}
.dock .mini-timer .tt{max-width:340px}
.dock .mini-timer .clock{font-size:20px;margin:0}
.dock .mini-steps{margin:0}
.dock .mini-acts{margin:0}
.dock #tracker-line{align-self:center;margin-left:auto}
.dock .tracker{padding:0}

/* colourful details */
:root[data-color="1"] .btn.primary{background:linear-gradient(135deg,var(--g1),var(--g2));border-color:transparent;color:#fff}
:root[data-color="1"] .btn.primary:hover{filter:brightness(1.07)}
:root[data-color="1"] .mini-timer:not(.meet):not(.visit){background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;box-shadow:0 10px 24px -14px color-mix(in srgb,var(--g1) 90%,transparent)}
:root[data-color="1"] .mini-timer:not(.meet):not(.visit) .btn.mini-done{background:#fff;color:color-mix(in srgb,var(--g1) 80%,#000)}
:root[data-color="1"] .kpi:nth-child(5n+1),:root[data-color="1"] .stat:nth-child(5n+1){--kc:var(--c1)}
:root[data-color="1"] .kpi:nth-child(5n+2),:root[data-color="1"] .stat:nth-child(5n+2){--kc:var(--c2)}
:root[data-color="1"] .kpi:nth-child(5n+3),:root[data-color="1"] .stat:nth-child(5n+3){--kc:var(--c3)}
:root[data-color="1"] .kpi:nth-child(5n+4),:root[data-color="1"] .stat:nth-child(5n+4){--kc:var(--c4)}
:root[data-color="1"] .kpi:nth-child(5n+5),:root[data-color="1"] .stat:nth-child(5n+5){--kc:var(--c5)}
:root[data-color="1"] .kpi{border-top:3px solid var(--kc)}
:root[data-color="1"] .kpi:not(.ok):not(.bad):not(.warn) b,:root[data-color="1"] .stat b{color:var(--kc)}
:root[data-color="1"] .stat{box-shadow:inset 0 3px 0 var(--kc),-1px 0 0 var(--line),0 -1px 0 var(--line)}
:root[data-color="1"] .card.pad,:root[data-color="1"] .card.chart{background-image:linear-gradient(90deg,var(--g1),var(--g2));background-size:100% 3px;background-repeat:no-repeat}
:root[data-color="1"] th{background:color-mix(in srgb,var(--g1) 9%,var(--surface));color:color-mix(in srgb,var(--g1) 70%,var(--ink));border-bottom-color:color-mix(in srgb,var(--g1) 25%,var(--line))}
:root[data-color="1"] .pill.doing{background:var(--c1);color:#fff}
:root[data-color="1"] .pill.done{background:var(--c3);color:#fff}
:root[data-color="1"] .pill.blocked,:root[data-color="1"] .pill.p-urgent{background:#DC2626;color:#fff}
:root[data-color="1"] .pill.p-high{background:var(--c2);color:#fff}
:root[data-color="1"][data-theme="dark"] .pill.doing,:root[data-color="1"][data-theme="dark"] .pill.done,:root[data-color="1"][data-theme="dark"] .pill.p-high{color:#111}
:root[data-color="1"] .seg button[aria-pressed="true"]{background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff}
:root[data-color="1"] .nav button[data-view] .ico{color:var(--nc,var(--muted))}
:root[data-color="1"] .nav button[data-view="today"]{--nc:#F97316}
:root[data-color="1"] .nav button[data-view="notices"]{--nc:#EC4899}
:root[data-color="1"] .nav button[data-view="overview"]{--nc:#3B82F6}
:root[data-color="1"] .nav button[data-view="live"]{--nc:#EF4444}
:root[data-color="1"] .nav button[data-view="tasks"]{--nc:#6366F1}
:root[data-color="1"] .nav button[data-view="meetings"]{--nc:#0EA5E9}
:root[data-color="1"] .nav button[data-view="journal"]{--nc:#14B8A6}
:root[data-color="1"] .nav button[data-view="dashboard"]{--nc:#8B5CF6}
:root[data-color="1"] .nav button[data-view="points"]{--nc:#F59E0B}
:root[data-color="1"] .nav button[data-view="activity"]{--nc:#22C55E}
:root[data-color="1"] .nav button[data-view="team"]{--nc:#06B6D4}
:root[data-color="1"] .nav button[data-view="profile"]{--nc:#0EA5E9}
:root[data-color="1"] .nav button[data-view="feedback"]{--nc:#10B981}
:root[data-color="1"] .nav button[data-view="reviews"]{--nc:#E11D48}
:root[data-color="1"] .nav button[data-view="daysoff"]{--nc:#A855F7}
:root[data-color="1"] .nav button[data-view="history"]{--nc:#64748B}
:root[data-color="1"][data-rail="dark"] .nav button[data-view] .ico,:root[data-color="1"][data-rail="grad"] .nav button[data-view] .ico{color:color-mix(in srgb,var(--nc,#fff) 70%,#fff)}
:root[data-color="1"] .nav .grp{color:color-mix(in srgb,var(--g1) 70%,var(--faint))}
:root[data-color="1"][data-rail="dark"] .nav .grp,:root[data-color="1"][data-rail="grad"] .nav .grp{color:rgba(255,255,255,.55)}


/* appearance picker */
.look-grp{font-size:var(--t7);font-weight:600;color:var(--faint);margin-top:4px}
.look-sw.mini{height:64px;background:#F4F5F8}
.look-sw.mini u{position:absolute;display:block;text-decoration:none}

@media (max-width:820px){
  .app.lay-top,.app.lay-icons{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .topbar{position:static;height:auto;flex-wrap:wrap;padding:10px 14px}
  .tb-date{display:none}
  .lay-top .rail{position:static;height:auto}
  .lay-icons .rail{position:static;height:auto;flex-direction:row;padding:8px 12px}
  .lay-icons .nav{flex-direction:row;overflow-x:auto}
  .lay-icons .nav .grp{display:none}
  .lay-icons .rail-foot{flex-direction:row}
  :root[data-head="cover"] .head{min-height:110px}
}

/* =================== 2.2 profile =================== */
.pf-ai{gap:12px}
.pf-ai-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-ai-h b{font-size:var(--t4)}
.pf-ai-h .btn{margin-left:auto}
.pf-ai-sum{margin:0;font-size:var(--t4);line-height:1.6;max-width:110ch}
.pf-ai-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pf-ai-col{border-radius:var(--r);padding:12px 14px;background:var(--sunk)}
.pf-ai-col h3{font-size:var(--t6);font-weight:600;margin-bottom:4px}
.pf-ai-col ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:var(--t6)}
.pf-ai-col.st{background:var(--ok-soft)}.pf-ai-col.st h3{color:var(--ok)}
.pf-ai-col.su{background:var(--info-soft)}.pf-ai-col.su h3{color:var(--info)}
.pf-ai-col.gr{background:var(--warn-soft)}.pf-ai-col.gr h3{color:var(--warn)}
.pf-resp{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.pf-sub{padding:12px 16px 4px;font-weight:600}
.pf-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-trend h2 .seg{margin-left:auto;font-size:var(--t6)}
.pf-trend .grid2{margin-bottom:12px}
.pf-print-title{display:none}
@media (max-width:900px){.pf-ai-cols{grid-template-columns:minmax(0,1fr)}}

/* printing the profile (Download PDF) */
@media print{
  html,body{background:#fff!important}
  .rail,.topbar,.dock,#upd,#banner,.head,.toolbar,.no-print,#toast-root,#sheet-root,#modal-root{display:none!important}
  .app,.app.lay-top,.app.lay-icons{display:block}
  main{padding:0!important;max-width:none;gap:14px}
  .card,.kpi,.stats{box-shadow:none!important;break-inside:avoid}
  .pf-ai,.pf-head,.pf-chart,.pf-row,.kpi-row,tr{break-inside:avoid}
  h2,h3{break-after:avoid}
  .pf-head{grid-template-columns:auto minmax(0,1fr) auto!important}.pf-score{grid-column:auto!important}
  .pf-ai-cols{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .grid2,.grid2.even{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pf-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pf-print-title{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-bottom:2px solid var(--accent);padding-bottom:6px}
  .pf-print-title b{font-size:18px}
  .pf-print-title span{color:var(--muted);font-size:12px}
  .pf-row.click{cursor:default}
}
.pf-chart h3{font-size:var(--t6);font-weight:600;margin:0 0 6px;display:flex;gap:8px;align-items:baseline}
.pf-row .when{display:flex;flex-direction:column;align-items:flex-end;text-align:right;white-space:nowrap}
.pf-row .when small{font-size:var(--t7);color:var(--muted);font-weight:400}

/* =================== 2.3 =================== */
.stats.two-up .stat.jr-total{background:var(--accent-soft)}
.stats.two-up .stat.jr-total b{color:var(--accent)}
.lv-warn{font-size:var(--t7);color:var(--warn);background:var(--warn-soft);border-radius:var(--r-sm);padding:6px 9px;line-height:1.4}

/* =================== 2.4 =================== */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.pager .btn .ico{width:14px;height:14px}
.bar-row.pick{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 72px;gap:14px;align-items:center;width:100%;padding:7px 16px;cursor:pointer}
.bar-row.pick .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row.pick:hover{background:var(--hover)}
.bar-row.pick.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.bar-row.pick.on .name{font-weight:600;color:var(--accent)}
.bar-row.pick:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.act-pick{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:var(--t6)}
.act-t th.sn,.act-t td.sn{width:44px}
.jr-all-h{display:flex;align-items:baseline;gap:10px}
.jr-mem{gap:12px}.jr-mem header{display:flex;align-items:center;gap:10px}.jr-mem-who{display:flex;flex-direction:column;flex:1;min-width:0}
.jr-mem .jr-read{max-height:320px;overflow:auto}
.pf-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pf-tcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 16px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);min-width:0}
.pf-tcard:hover{border-color:var(--accent-line);box-shadow:var(--shadow)}.pf-tcard:focus-visible{outline:2px solid var(--accent)}
.pf-tcard>b{font-size:var(--t4);max-width:100%;margin-top:6px}.pf-tcard>.hint{max-width:100%}
.pf-tcard dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;margin:12px 0 0;width:100%}
.pf-tcard dt{font-size:var(--t7);color:var(--faint)}.pf-tcard dd{margin:0;font-weight:600}

/* =================== 2.5 plans =================== */
.nav button.locked{opacity:.62}.nav button .nav-lock{width:13px;height:13px;margin-left:auto;opacity:.8}
.lock-card{align-items:flex-start;gap:10px;max-width:720px}.lock-card h2{font-size:var(--t3)}.lock-card p{margin:0}
.lock-card .lock-ico{width:28px;height:28px;color:var(--accent)}.lock-card.sm{max-width:none}.lock-card.sm .lock-ico{width:20px;height:20px}
.lic-card{gap:14px}.lic-h{display:flex;align-items:center;gap:10px}.lic-h b{font-size:var(--t4)}
.lic-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 18px;margin:0}
.lic-facts dt{font-size:var(--t7);color:var(--faint)}.lic-facts dd{margin:0;font-weight:600}
#lic-key{word-break:break-all;font-size:12px}

a.btn{text-decoration:none}

/* 2.6: move to a server */
.mv-box{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1.5px dashed var(--accent-line);border-radius:12px;background:var(--accent-soft)}
.mv-code-row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
.mv-code{font-size:22px;font-weight:700;letter-spacing:.06em}
.mv-addr{font-size:13px;color:var(--faint);word-break:break-all}
.mv-or{margin:0}
.mv-card{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.mv-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}