/* JA Tracker — "Plotter" design language from jakobsenanalytics.dk */
@font-face{font-family:'Hanken Grotesk';font-weight:400;font-display:swap;src:url('fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:500;font-display:swap;src:url('fonts/hanken-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:600;font-display:swap;src:url('fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:700;font-display:swap;src:url('fonts/hanken-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-weight:400;font-display:swap;src:url('fonts/spline-sans-mono-400.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-weight:500;font-display:swap;src:url('fonts/spline-sans-mono-500.woff2') format('woff2')}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ground:#0E1116; --ground-2:#12161D; --panel:#161B23;
  --paper:#EAEBE6;
  --line:rgba(150,164,178,.14); --line-2:rgba(150,164,178,.07);
  --hi:#ECEEEA; --mid:#959FAA; --low:#5E6873;
  --a:#C7A357; --a-deep:#A8853B; --a-soft:rgba(199,163,87,.14);
  --b:#6E9BA8; --b-deep:#507f8c; --b-soft:rgba(110,155,168,.14);
  --risk:#C46A55; --risk-soft:rgba(196,106,85,.16);
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --sans:'Hanken Grotesk',-apple-system,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ground);color:var(--hi);line-height:1.55;
  -webkit-font-smoothing:antialiased;padding-bottom:84px}
::selection{background:var(--a);color:#16110a}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:var(--mono);font-size:.85rem;color:var(--hi);
  background:var(--ground-2);border:1px solid var(--line);border-radius:3px;padding:.45rem .6rem}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--a);outline-offset:2px;
  position:relative;z-index:3}  /* outline paints outside the box — lift it above neighbours */

.mono{font-family:var(--mono)}
.fig{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--a)}
.dim{color:var(--low)}

/* ── Top bar ── */
.top{position:sticky;top:0;z-index:50;background:rgba(14,17,22,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:.55rem 1rem;display:flex;flex-wrap:wrap;
  align-items:center;gap:.6rem 1.2rem}
.brand{display:flex;align-items:center;gap:.5rem}
.brand img{width:26px;height:26px;display:block}
.brand span{font-family:var(--mono);font-size:.82rem;color:var(--b)}
.brand span em{color:var(--a);font-style:normal}
.tabs{display:flex;gap:.15rem;margin-left:auto}
.tab{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;padding:.42rem .7rem;
  border-radius:3px;color:var(--mid)}
.tab:hover{color:var(--hi)}
.tab.on{background:var(--a);color:#16110a;font-weight:500}
.modes{display:flex;gap:2px;border:1px solid var(--line);border-radius:3px;padding:2px}
.mode-btn{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.3rem .55rem;border-radius:2px;color:var(--mid)}
.mode-btn.on{background:var(--b);color:#0c1418;font-weight:500}
@media (max-width:640px){
  .top{padding:.5rem .7rem}
  .tabs{width:100%;order:3;margin-left:0;justify-content:space-between}
  .tab{flex:1;text-align:center}
  .modes{margin-left:auto}
}

main{max-width:1140px;margin:0 auto;padding:1.2rem 1rem 2rem}
h2.viewtitle{font-weight:700;font-size:1.25rem;letter-spacing:-.01em;margin:.4rem 0 1rem}
h2.viewtitle small{font-family:var(--mono);font-size:.68rem;color:var(--low);font-weight:400;margin-left:.6rem}

/* ── Panels / cards ── */
.panel{background:var(--ground-2);border:1px solid var(--line);border-radius:6px;padding:1rem 1.1rem;margin-bottom:1rem}
.panel h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--a);font-weight:500;margin-bottom:.7rem}

/* ── Week grid ── */
.weeknav{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;flex-wrap:wrap}
.weeknav .wk{font-family:var(--mono);font-size:.9rem;color:var(--hi)}
.navbtn{font-family:var(--mono);font-size:.8rem;border:1px solid var(--line);border-radius:3px;
  padding:.35rem .7rem;color:var(--mid);min-width:44px}
.navbtn:hover{color:var(--hi);border-color:var(--mid)}
.gridwrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--ground-2)}
table.grid{border-collapse:collapse;width:100%;min-width:560px}
.grid th,.grid td{border-bottom:1px solid var(--line-2);text-align:center;font-family:var(--mono);
  font-size:.8rem;padding:0}
.grid thead th{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--low);
  padding:.55rem .3rem;border-bottom:1px solid var(--line)}
.grid thead th.today{color:var(--a)}
.grid td.lbl,.grid th.lbl{text-align:left;font-family:var(--sans);font-size:.8rem;color:var(--mid);
  padding:.35rem .6rem;position:sticky;left:0;background:var(--ground-2);max-width:150px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--line-2)}
.grid td.lbl.proj{color:var(--a);padding-left:1.1rem}
.grid .cell{width:100%;min-width:44px;min-height:44px;padding:.6rem .2rem;color:var(--hi)}
.grid .cell:hover{background:var(--line-2)}
.grid .cell.zero{color:var(--low)}
.grid .cell.sel{outline:2px solid var(--a);outline-offset:-2px;background:var(--a-soft)}
.grid td.today-col{background:rgba(110,155,168,.05)}
.grid .tot,.grid tfoot td{color:var(--mid);font-size:.72rem;padding:.5rem .3rem}
.grid tfoot td{border-bottom:none;border-top:1px solid var(--line)}
.grid tfoot td.lbl{font-family:var(--mono)}

/* bottom action bar */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--panel);
  border-top:1px solid var(--line);padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:center}
.actionbar.show{display:flex}
.actionbar .who{font-family:var(--mono);font-size:.68rem;color:var(--mid);width:100%;text-align:center}
.abtn{font-family:var(--mono);font-size:.9rem;min-width:52px;min-height:44px;border:1px solid var(--line);
  border-radius:4px;color:var(--hi);background:var(--ground-2)}
.abtn:active{background:var(--a);color:#16110a}
.abtn.p{background:var(--a);color:#16110a;font-weight:500;border-color:var(--a)}
.abtn.x{color:var(--low)}
.absep{width:1px;height:28px;background:var(--line)}

/* ── Portfolio cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1rem}
.card{background:var(--ground-2);border:1px solid var(--line);border-radius:6px;padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.6rem}
.card .head{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.card .pid{font-family:var(--mono);font-size:.7rem;color:var(--a)}
.card .name{font-weight:600;font-size:.98rem}
.chip{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.14rem .5rem;border-radius:2px;margin-left:auto}
.chip.parked{color:var(--low);border:1px solid var(--line)}
.chip.active{background:var(--a);color:#16110a}
.chip.finishing{background:var(--b);color:#0c1418}
.chip.gated{background:var(--b-deep);color:#ECEEEA}
.chip.killed{background:var(--risk);color:#1a0d09}
.card .blurb{font-size:.8rem;color:var(--mid);line-height:1.55}
.card .win{font-family:var(--mono);font-size:.65rem;color:var(--low)}

.budget{position:relative;height:10px;background:var(--line-2);border-radius:3px;overflow:visible}
.budget .fill{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--a)}
.budget .fill.over{background:var(--a-deep)}
.budget .fill.kill{background:var(--risk)}
.budget .tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--mid)}
.budget .tick.kill{background:var(--risk)}
.budget-lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;color:var(--low);margin-top:.25rem}

.gates{display:flex;flex-direction:column;gap:.3rem}
.gate{display:flex;gap:.5rem;align-items:flex-start;font-size:.78rem;color:var(--mid);cursor:pointer}
.gate input{accent-color:#C7A357;width:16px;height:16px;margin-top:.15rem;flex-shrink:0}
.gate.done{color:var(--hi)}
.gate .gd{font-family:var(--mono);font-size:.62rem;color:var(--low);margin-left:auto;flex-shrink:0}

.probs{display:flex;flex-direction:column;gap:.35rem}
.prob{font-size:.78rem;color:var(--mid);display:flex;gap:.5rem;align-items:baseline}
.prob .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.prob .k.problem,.prob .k.blocker{color:var(--risk)}
.prob .k.note{color:var(--low)} .prob .k.decision{color:var(--b)}
.prob.open{color:var(--hi)}
.prob button{font-family:var(--mono);font-size:.62rem;color:var(--low);margin-left:auto;white-space:nowrap}
.prob .gd,.gate .gd{white-space:nowrap}
.prob button:hover{color:var(--a)}

.card .row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.newproj .row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.55rem}
.smallbtn{font-family:var(--mono);font-size:.66rem;padding:.3rem .6rem;border:1px solid var(--line);
  border-radius:3px;color:var(--mid);min-height:32px}
.smallbtn:hover{color:var(--hi);border-color:var(--mid)}
.smallbtn.warn{color:var(--risk);border-color:var(--risk-soft)}
.smallbtn.go{color:var(--a);border-color:var(--a-deep)}
.counter{font-family:var(--mono);font-size:.75rem;color:var(--hi)}
.addnote{display:flex;gap:.5rem;flex-wrap:wrap}
.addnote textarea{flex:1;font-size:.75rem;line-height:1.45}
.seclabel{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--a);margin:.9rem 0 .35rem}
.cols>div>.seclabel:first-child{margin-top:0}
/* stacked form rows inside a focus card need room for the focus outline */
.card.focus .cols>div{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.addnote input[type=date]{min-width:0}
.addnote input[type=text]{flex:1;min-width:0}
.addnote select{width:auto}

.banner{border:1px solid var(--line);border-left:3px solid var(--b);border-radius:4px;
  padding:.6rem .9rem;font-size:.82rem;color:var(--mid);margin-bottom:1rem}
.banner.red{border-left-color:var(--risk);background:var(--risk-soft);color:var(--hi)}
.banner.amber{border-left-color:var(--a);background:var(--a-soft);color:var(--hi)}

/* ── Dashboard ── */
.warnlist{display:flex;flex-direction:column;gap:.45rem}
/* warning banners — div-scoped so .smallbtn.warn buttons don't inherit
   the banner's flex display and padding (they used to stack on their own line) */
div.warn{display:flex;gap:.6rem;align-items:baseline;font-size:.82rem;padding:.5rem .7rem;border-radius:4px}
div.warn .lv{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;width:44px}
div.warn.red{background:var(--risk-soft)} div.warn.red .lv{color:var(--risk)}
div.warn.amber{background:var(--a-soft)} div.warn.amber .lv{color:var(--a)}
div.warn.info{background:var(--line-2)} div.warn.info .lv{color:var(--b)}
.allok{color:var(--b);font-size:.85rem}

.bal{display:flex;flex-direction:column;gap:.7rem}
.balrow{display:grid;grid-template-columns:110px 1fr 130px;gap:.7rem;align-items:center}
.balrow .l{font-size:.78rem;color:var(--mid)}
.balrow .n{font-family:var(--mono);font-size:.68rem;color:var(--low);text-align:right}
.baltrack{position:relative;height:12px;background:var(--line-2);border-radius:3px}
.baltrack .f{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--b)}
.baltrack .f.amber{background:var(--a)} .baltrack .f.red{background:var(--risk)}
.baltrack .goal{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--mid)}
.balrow .kindtag{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--low)}
@media (max-width:560px){.balrow{grid-template-columns:86px 1fr 96px;gap:.4rem}}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.tile{background:var(--ground-2);border:1px solid var(--line);border-radius:6px;padding:1rem 1.1rem}
.tile .v{font-family:var(--sans);font-weight:700;font-size:1.7rem;color:var(--a);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.tile .v.good{color:var(--b)} .tile .v.bad{color:var(--risk)} .tile .v.na{color:var(--low)}
.tile .l{font-size:.72rem;color:var(--mid);margin-top:.35rem;line-height:1.45}
.tile .d{font-family:var(--mono);font-size:.62rem;color:var(--low);margin-top:.3rem}

.targets-table{width:100%;border-collapse:collapse}
.targets-table th,.targets-table td{font-family:var(--mono);font-size:.72rem;padding:.4rem .45rem;
  text-align:center;border-bottom:1px solid var(--line-2)}
.targets-table th{color:var(--low);font-weight:400;text-transform:uppercase;font-size:.6rem;letter-spacing:.06em}
.targets-table td:first-child{text-align:left;color:var(--mid);font-family:var(--sans);font-size:.78rem}
.targets-table input{width:58px;text-align:center;padding:.3rem .2rem}
.targets-table select{padding:.3rem .2rem;font-size:.66rem}

/* ── Events ── */
.tablewrap{overflow-x:auto;margin:0 -0.2rem}
table.evt{width:100%;min-width:540px;border-collapse:collapse}
.evt th,.evt td{font-size:.8rem;padding:.5rem .55rem;border-bottom:1px solid var(--line-2);text-align:left}
.evt th{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--low);font-weight:400}
.evt .date,.evt .left{font-family:var(--mono);font-size:.72rem;color:var(--mid);white-space:nowrap}
.evt .left.soon{color:var(--a)} .evt .left.now{color:var(--risk)}
.evt tr.done td{color:var(--low);text-decoration:line-through}
.evt tr.done td .kchip{opacity:.4}
.evt td:last-child{white-space:nowrap}
.kchip{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.1rem .45rem;border-radius:2px;border:1px solid var(--line);color:var(--mid)}
.kchip.exam{color:var(--b);border-color:var(--b-soft)}
.kchip.client{color:var(--a);border-color:var(--a-soft)}
.kchip.writeup{color:var(--hi)}
.evt-add{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.evt-add input[type=text]{flex:1;min-width:140px}

.footer-note{font-family:var(--mono);font-size:.62rem;color:var(--low);text-align:center;margin-top:1.6rem}

.card.compact{padding:.65rem 1.1rem;gap:.3rem;cursor:pointer}
.card.focus{border-color:var(--a);box-shadow:0 0 0 1px var(--a),0 12px 40px rgba(0,0,0,.35);
  margin-bottom:1.4rem;position:relative;z-index:2}
.card.focus .cols{display:grid;grid-template-columns:1.1fr 1fr;gap:.6rem 1.6rem}
@media (max-width:760px){.card.focus .cols{grid-template-columns:1fr}}
@media (max-width:560px){
  /* keep the close button in the corner instead of wrapping to its own line */
  .card.focus [data-unfocus],.card.focus [data-cunfocus],.card.focus [data-clunfocus]{
    position:absolute;top:.55rem;right:.6rem;margin-left:0}
  .card.focus .head{padding-right:2.1rem}
  .prob{flex-wrap:wrap}
}
.hoursline{font-size:.74rem;color:var(--mid)}
.hoursline b{color:var(--hi);font-weight:500}
.notedot{display:block;width:5px;height:5px;border-radius:50%;background:var(--a);margin:.2rem auto 0}
.grid .cell{position:relative}
.grid .cell.auto{color:var(--low);font-style:italic}
.grid .cell.noted::after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;
  border-radius:50%;background:var(--a)}
.dayhead{cursor:pointer}
.card.coursedone{opacity:.55}
.kchip.assignment{color:var(--a-deep);border-color:var(--a-soft)}
.card.compact:hover{border-color:var(--mid)}
details.tgt{border:1px solid var(--line);border-radius:4px;margin:.5rem 0;padding:.2rem .7rem}
details.tgt summary{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--b);cursor:pointer;padding:.35rem 0}
details.tgt table{margin:.3rem 0 .6rem}

/* ── Timeline (inline SVG) ── */
.tl-lbl{font-family:var(--mono);font-size:10px;fill:var(--low)}
.tl-name{font-family:var(--sans);font-size:11px;fill:var(--mid)}
.card .plan input[type=date]{padding:.3rem .35rem;font-size:.7rem}
@media (max-width:640px){.tab{padding:.42rem .45rem;font-size:.66rem}}
@media (max-width:560px){
  .grid td.lbl,.grid th.lbl{max-width:112px;font-size:.72rem;padding:.35rem .45rem}
  .grid td.lbl.proj{padding-left:.8rem}
}

/* ── Live timer ── */
.timer-ind{color:var(--a);border-color:var(--a);font-size:.62rem;padding:.3rem .5rem;
  font-variant-numeric:tabular-nums}

/* ── Revenue & cashflow (Clients) ── */
.revrow{display:flex;align-items:center;gap:.6rem;margin:.32rem 0;font-size:.78rem}
.revrow .l{min-width:64px;max-width:130px;color:var(--mid);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.revrow .n{font-family:var(--mono);font-size:.64rem;color:var(--low);white-space:nowrap}
.revtrack{position:relative;height:10px;background:var(--line-2);border-radius:3px;
  flex:1;min-width:70px}
.revtrack .inv{position:absolute;inset:0 auto 0 0;background:var(--b);opacity:.45;border-radius:3px}
.revtrack .rec{position:absolute;inset:0 auto 0 0;background:var(--a);border-radius:3px}

/* ── Design pass 14-07-2026 ── */
/* action buttons in a row cluster right as one group — only the first
   pushes; the rest sit beside it (flex gap provides the spacing) */
.prob :is(button,a)+:is(button,a){margin-left:0}
/* revenue breakdowns: two columns when there is room, one on phones */
.revcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:.2rem 2rem}
/* wide inline charts scroll inside their panel, never the page */
#history-box,#burn-box{overflow-x:auto}
/* a long client/project name must not blow up the sticky header */
.timer-ind{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.timer-ind{max-width:130px}}
/* collapsed how-to under the grid */
details.howto{border:none;padding:0;margin:.35rem 0 1rem}
details.howto summary{font-family:var(--mono);font-size:.62rem;color:var(--low);
  text-transform:none;letter-spacing:.04em}
details.howto summary:hover{color:var(--mid)}