/* Vectis dark tokens (02 factory/design/tokens.json). IBM Plex Sans for UI, IBM Plex Mono for dates and numbers. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-SemiBold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexSans-Bold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexMono-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/IBMPlexMono-Medium.woff2) format("woff2")}

:root{
  --bg:#0A0A0A;--bg-elevated:#1E1E1E;--bg-sunken:#050505;--fg:#FFFFFF;--fg-2:#B8B8B8;--fg-3:#6E6E6E;
  --border:#3A3A3A;--border-strong:#6E6E6E;--accent:#C1121F;--accent-hover:#D81525;--accent-pressed:#9A0E18;
  --accent-tint:rgba(193,18,31,.12);--success:#2F9E5C;--warning:#D7861A;--info:#B8B8B8;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--r-sm:4px;--r-md:8px;
  --tabbar:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);color-scheme:dark}
body{margin:0;font:16px/1.55 var(--sans);color:var(--fg);background:var(--bg);min-height:100dvh;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:22px;margin:var(--s4) 0 var(--s4)}h2{font-size:18px;margin:var(--s6) 0 var(--s3)}h3{font-size:16px;margin:var(--s4) 0 var(--s2)}
p{margin:var(--s2) 0;text-wrap:pretty}
a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
a:hover{text-decoration-color:var(--fg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:var(--r-sm)}
.mono,.num,time{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px}
.mute{color:var(--fg-2)}.faint{color:var(--fg-3)}.small{font-size:14px}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}.sp{flex:1}
.stack>*+*{margin-top:var(--s3)}
.grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);margin:var(--s3) 0}
.card.flat{margin:0}
.card.alert{border-color:var(--accent)}
hr{border:0;border-top:1px solid var(--border);margin:var(--s5) 0}

/* Header, nav, tab bar */
header.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--border);padding:calc(env(safe-area-inset-top) + var(--s2)) var(--s4) var(--s2)}
header.top .inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:var(--s4);min-height:44px}
header.top .logo{display:flex;align-items:center;text-decoration:none;min-height:44px}
header.top .logo img{height:26px;width:auto;display:block}
nav.main{display:none;gap:var(--s1);flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--fg-2);padding:var(--s2) var(--s3);border-radius:var(--r-sm);min-height:44px;display:inline-flex;align-items:center;font-weight:500;font-size:14px}
nav.main a:hover{color:var(--fg);background:var(--bg-elevated)}
nav.main a[aria-current=page]{color:var(--fg);background:var(--bg-elevated)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--accent);color:#fff;font:500 12px/1 var(--mono)}
.badge.zero{background:var(--border);color:var(--fg-2)}
.followups{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--fg-2);font-size:14px;min-height:44px}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--bg);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tabbar);text-decoration:none;color:var(--fg-3);font-size:11px;font-weight:500;letter-spacing:.02em}
nav.tabs a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
nav.tabs a[aria-current=page]{color:var(--fg)}
nav.tabs a .dot{position:absolute;margin-left:28px;margin-top:-4px}
main{max-width:1440px;margin:0 auto;padding:var(--s3) var(--s4) calc(var(--tabbar) + env(safe-area-inset-bottom) + var(--s6))}
main.narrow{max-width:720px}
@media(min-width:900px){nav.main{display:flex}nav.tabs{display:none}main{padding-bottom:var(--s7)}}

/* Controls */
button,.btn{font:inherit;font-weight:500;font-size:15px;border:1px solid var(--border-strong);background:var(--bg-elevated);color:var(--fg);border-radius:var(--r-sm);min-height:44px;padding:var(--s2) var(--s4);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);white-space:nowrap}
button:hover,.btn:hover{border-color:var(--fg-2)}
button:active,.btn:active{background:var(--bg-sunken)}
.btn-primary,button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover,button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-primary:active,button.primary:active{background:var(--accent-pressed)}
.btn-text,button.text{background:transparent;border-color:transparent;color:var(--fg-2)}
.btn-text:hover,button.text:hover{color:var(--fg);border-color:transparent}
.btn-sm{min-height:36px;padding:var(--s1) var(--s3);font-size:14px}
.btn-wide{width:100%}
.btn-big{min-height:56px;font-size:17px;font-weight:600}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{font:inherit;font-size:16px;padding:10px var(--s3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);width:100%;min-height:44px;color:var(--fg)}
input:focus,select:focus,textarea:focus{border-color:var(--fg-2);outline:none}
textarea{min-height:96px;line-height:1.45;resize:vertical}
label{display:block;margin:var(--s3) 0 var(--s1);font-size:13px;color:var(--fg-2);font-weight:500}
label.inline{display:inline-flex;align-items:center;gap:var(--s2);margin:0}
input[type=checkbox]{width:20px;height:20px;min-height:0}
form.inline{display:inline}
.fields{display:grid;gap:0 var(--s4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.chip{display:inline-flex;align-items:center;font-size:12px;line-height:1;padding:5px 8px;border-radius:var(--r-sm);background:var(--bg-sunken);border:1px solid var(--border);color:var(--fg-2);white-space:nowrap}
.chip.stage{color:var(--fg);border-color:var(--border-strong)}
.chip.red{background:var(--accent-tint);border-color:var(--accent);color:#fff}
.chip.green{border-color:var(--success);color:var(--success)}
.chip.amber{border-color:var(--warning);color:var(--warning)}
.flash{border:1px solid var(--success);color:var(--fg);border-radius:var(--r-sm);padding:var(--s2) var(--s3);margin:var(--s2) 0;font-size:14px}
.flash.warn{border-color:var(--warning)}
.flash.error{border-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.seg a{text-decoration:none;color:var(--fg-2);padding:0 var(--s3);min-height:36px;display:inline-flex;align-items:center;font-size:13px;font-weight:500}
.seg a+a{border-left:1px solid var(--border)}
.seg a[aria-current=true]{background:var(--bg-elevated);color:var(--fg)}
details>summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;font-weight:500;color:var(--fg-2)}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"+";font-family:var(--mono);margin-right:var(--s2);color:var(--fg-3)}
details[open]>summary::before{content:"-"}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:var(--s2) var(--s2);border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{font-weight:600;color:var(--fg-2);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
td.num,th.num{text-align:right}
pre{white-space:pre-wrap;font:13px/1.5 var(--mono);background:var(--bg-sunken);border:1px solid var(--border);padding:var(--s3);border-radius:var(--r-sm);margin:var(--s2) 0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--s1) var(--s4);font-size:14px}
.kv dt{color:var(--fg-2)}.kv dd{margin:0}
.login{max-width:360px;margin:15vh auto 0;padding:0 var(--s4)}
.login img{height:40px}

/* Today */
.hero{border:1px solid var(--accent);background:var(--bg-elevated);border-radius:var(--r-md);padding:var(--s4);margin:var(--s3) 0}
.hero h2{margin:var(--s1) 0 var(--s2);font-size:20px}
.score{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s2)}
.score .tile{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3)}
.score .v{font:500 22px/1.1 var(--mono);display:block;margin-top:var(--s1)}
.score .v.bad{color:var(--accent)}.score .v.ok{color:var(--success)}
.task{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.task:last-child{border-bottom:0}
.task .t{flex:1;min-width:0}
.task .t .who{color:var(--fg-2);font-size:14px}
.task .due{font-family:var(--mono);font-size:13px;color:var(--fg-2);white-space:nowrap}
.task.overdue{border-left:3px solid var(--accent);padding-left:var(--s3);margin-left:-3px}
.task.hero-task{border:0;padding:0}
.task.overdue .due{color:var(--accent)}
.task .actions{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
.banner{border:1px solid var(--warning);border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-size:14px;margin:var(--s3) 0}

/* Kanban */
.board{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s1) 0 var(--s4);-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--s4));padding-left:var(--s4);padding-right:var(--s4)}
.col{flex:0 0 min(86vw,300px);scroll-snap-align:start;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);display:flex;flex-direction:column;max-height:calc(100dvh - 200px)}
.col h3{margin:0;padding:var(--s3) var(--s3) var(--s2);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);display:flex;justify-content:space-between;position:sticky;top:0;background:var(--bg-sunken)}
.col .cards{padding:0 var(--s2) var(--s2);overflow-y:auto;flex:1;min-height:60px}
.col.over{border-color:var(--fg-2)}
.kcard{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--s2) var(--s3);margin-bottom:var(--s2);touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none}
.kcard.dragging{opacity:.5}
.kcard .name{font-weight:500;display:block;text-decoration:none}
.kcard .org{font-size:13px;color:var(--fg-2)}
.kcard .next{font:12px var(--mono);color:var(--fg-3);margin-top:var(--s1)}
.kcard .next.overdue{color:var(--accent)}
.kcard .handle{cursor:grab}
.kcard button{min-height:36px}
@media(min-width:900px){.kcard{cursor:grab}.kcard .move{display:none}}
.ghost{position:fixed;pointer-events:none;z-index:50;opacity:.9;width:260px}

/* Sheet */
.sheetwrap{overflow-x:auto;margin:0 calc(-1 * var(--s4));padding:0 var(--s4)}
table.sheet th{cursor:pointer;user-select:none}
table.sheet th[data-sort]:after{content:"";margin-left:4px;color:var(--fg-3)}
table.sheet th.asc:after{content:"\2191"}table.sheet th.desc:after{content:"\2193"}
table.sheet td[contenteditable]{min-width:90px;outline:none;border-radius:2px}
table.sheet td[contenteditable]:focus{background:var(--bg-sunken);box-shadow:inset 0 0 0 1px var(--fg-2)}
table.sheet td.saved{box-shadow:inset 0 0 0 1px var(--success)}
table.sheet td.failed{box-shadow:inset 0 0 0 1px var(--accent)}
table.sheet tr.overdue td:first-child{border-left:3px solid var(--accent)}
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:end;margin:var(--s3) 0}
.filters select,.filters input{width:auto;min-width:120px;min-height:40px;padding:6px 10px;font-size:14px}
@media(max-width:899px){table.sheet .desk{display:none}}

/* Tiles */
.tiles{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tile-c{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3);display:block;text-decoration:none;color:var(--fg)}
.tile-c.overdue{border-left:3px solid var(--accent)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-sunken);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font:500 14px var(--mono);color:var(--fg-2);flex:none}
.tile-c .head{display:flex;gap:var(--s3);align-items:center}
.tile-c .tags{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2)}
.tile-c .next{font:12px var(--mono);color:var(--fg-2);margin-top:var(--s2)}
.tile-c.overdue .next{color:var(--accent)}

/* Funnel */
.funnel td.bar{width:40%}
.bar i{display:block;height:8px;background:var(--fg-2);border-radius:2px}
.bar i.me{background:var(--accent)}

/* Timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:120px 1fr;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--border)}
.tl time{color:var(--fg-2);font-size:13px}
.tl .type{font-weight:500}
@media(max-width:600px){.tl li{grid-template-columns:1fr}}

/* Sheet dialog (Move) */
dialog{background:var(--bg-elevated);color:var(--fg);border:1px solid var(--border);border-radius:var(--r-md) var(--r-md) 0 0;width:100%;max-width:100%;margin:auto 0 0;padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));position:fixed;bottom:0}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog .opts{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media(min-width:900px){dialog{max-width:420px;border-radius:var(--r-md);margin:auto;bottom:auto;position:fixed}}
.copyok{color:var(--success)}
.list-links a{display:flex;align-items:center;min-height:52px;padding:0 var(--s2);text-decoration:none;border-bottom:1px solid var(--border);justify-content:space-between}
.list-links a span{color:var(--fg-3);font-family:var(--mono)}
.red{color:var(--accent)}.green{color:var(--success)}.amber{color:var(--warning)}
.warnbox{border:1px solid var(--warning);border-radius:var(--r-sm);padding:var(--s3);margin:var(--s3) 0}
.just-met{margin:var(--s3) 0;display:grid;gap:var(--s2)}
