@font-face {
  font-family: 'Berkeley Mono';
  src: url('BerkeleyMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* ─── Theme ─────────────────────────────────────────────────── */
:root {
  --bg:        #0d0d0d;
  --bg2:       #111111;
  --bg3:       #1c1c1c;
  --fg:        #e8e4de;
  --fg2:       #888880;
  --fg3:       #4a4a46;
  --border:    #1e1e1e;
  --border2:   #2a2a2a;
  --border-hi: #e8e4de;
  --tr:        0.1s ease;
  --q-grey:    #2a2a2a;
  /* today row inverted */
  --today-bg:  #e8e4de;
  --today-fg:  #0d0d0d;
  --today-fg2: #444440;
  --today-fg3: #888880;
}
[data-theme="light"] {
  --bg:        #ffffff;
  --bg2:       #fafafa;
  --bg3:       #f0f0f0;
  --fg:        #111111;
  --fg2:       #777777;
  --fg3:       #bbbbbb;
  --border:    #ebebeb;
  --border2:   #d8d8d8;
  --border-hi: #111111;
  --q-grey:    #e0e0e0;
  --today-bg:  #111111;
  --today-fg:  #ffffff;
  --today-fg2: #aaaaaa;
  --today-fg3: #666666;
}

/* ─── Analyst palette ────────────────────────────────────────── */
[data-theme="dark"] {
  --c0:#1a2e1a;--c0b:#2e5e2e;--c0t:#7ecf7e;
  --c1:#1a1a2e;--c1b:#2e2e5e;--c1t:#8e8ecf;
  --c2:#2e1a1a;--c2b:#5e2e2e;--c2t:#cf8e8e;
  --c3:#2e2a1a;--c3b:#5e502e;--c3t:#cfba8e;
  --c4:#1a2a2e;--c4b:#2e505e;--c4t:#8ec4cf;
  --c5:#2a1a2e;--c5b:#502e5e;--c5t:#b07ad0;
  --c6:#2a2a1a;--c6b:#50502e;--c6t:#c4c45a;
  --c7:#1a2e2a;--c7b:#2e5e50;--c7t:#5ac8b4;
}
[data-theme="light"] {
  --c0:#d4f0d4;--c0b:#5cad5c;--c0t:#1a6b1a;
  --c1:#d4d4f0;--c1b:#5c5cad;--c1t:#1a1a6b;
  --c2:#f0d4d4;--c2b:#ad5c5c;--c2t:#6b1a1a;
  --c3:#f0ead4;--c3b:#ada05c;--c3t:#6b601a;
  --c4:#d4eaf0;--c4b:#5ca0ad;--c4t:#1a606b;
  --c5:#ead4f0;--c5b:#a05cad;--c5t:#601a6b;
  --c6:#f0f0d4;--c6b:#adad5c;--c6t:#6b6b1a;
  --c7:#d4f0ea;--c7b:#5cad9f;--c7t:#1a6b60;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{
  height:100%;
  font-family:'Berkeley Mono','Courier New',monospace;
  font-size:13px; line-height:1;
  background:var(--bg); color:var(--fg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;}

/* ─── Header ─────────────────────────────────────────────────── */
.header{
  height:40px;
  display:flex;align-items:stretch;
  border-bottom:1px solid var(--border2);
  flex-shrink:0;
}
.hdr-brand{
  display:flex;align-items:center;
  padding:0 18px;
  border-right:1px solid var(--border2);
  flex-shrink:0;
}
.hdr-title{
  font-size:16px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--fg);white-space:nowrap;
}
.hdr-date{
  font-size:9px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--fg3);white-space:nowrap;
}
/* Curator link — small bordered badge */
.hdr-curator{
  display:flex;align-items:center;
  padding:0 14px;
  font-size:9px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--fg3);text-decoration:none;
  border-right:1px solid var(--border2);
  border-left:1px solid var(--border2);
  transition:color var(--tr),background var(--tr);
  white-space:nowrap;
}
.hdr-curator:hover{color:var(--fg);background:var(--bg3);}

.hdr-right{display:flex;align-items:stretch;margin-left:auto;}
.hdr-clock{
  display:flex;align-items:center;gap:12px;
  padding:0 16px;
  border-left:1px solid var(--border2);
}
.hdr-clk-lbl{font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg3);}
.hdr-clk-val{font-size:11px;letter-spacing:0.06em;color:var(--fg);font-variant-numeric:tabular-nums;}
.hdr-clk-sep{width:1px;height:14px;background:var(--border2);flex-shrink:0;}


/* Curator-style box toggle */
.hdr-theme{
  display:flex;align-items:center;padding:0 14px;
  font-family:inherit;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;
  background:var(--border-hi);color:var(--bg);
  border:none;border-left:1px solid var(--border2);
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:opacity var(--tr);
}
.hdr-theme:hover{opacity:0.8;}

/* ─── Analyst bar ────────────────────────────────────────────── */
.analyst-bar{
  height:44px;
  display:flex;align-items:stretch;
  border-bottom:1px solid var(--border2);
  flex-shrink:0;overflow-x:auto;scrollbar-width:none;
}
.analyst-bar::-webkit-scrollbar{display:none;}

.ab-label{
  display:flex;align-items:center;
  padding:0 18px;flex-shrink:0;
  font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--fg3);
  border-right:1px solid var(--border2);
  white-space:nowrap;
}
.ab-chips{display:flex;align-items:center;flex:1;}

.chip{
  display:flex;align-items:center;gap:7px;
  padding:0 14px;height:100%;
  font-family:inherit;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  background:transparent;border:none;
  border-right:1px solid var(--border);
  color:var(--fg2);cursor:pointer;
  white-space:nowrap;position:relative;
  transition:color var(--tr),background var(--tr);
}
/* First chip flush against the label — no left gap or extra border */
.chip:hover{color:var(--fg);background:var(--bg3);}
.chip.on{color:var(--fg);background:var(--bg3);}
.chip.on::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:2px;background:var(--fg);
}
.chip-dot{width:9px;height:9px;flex-shrink:0;}
.chip.on .chip-dot{outline:1px solid var(--fg);outline-offset:1px;}

.ab-add{
  display:flex;align-items:center;
  padding:0 16px;margin-left:auto;flex-shrink:0;
  font-family:inherit;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  background:transparent;border:none;border-left:1px solid var(--border2);
  color:var(--fg3);cursor:pointer;
  transition:color var(--tr),background var(--tr);
}
.ab-add:hover{color:var(--fg);background:var(--bg3);}

/* ─── Main layout ────────────────────────────────────────────── */
.main{display:flex;flex:1;overflow:hidden;}

/* ─── Grid wrapper ───────────────────────────────────────────── */
.gwrap{
  flex:1;overflow:auto;position:relative;
  scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
}
.gwrap::-webkit-scrollbar{width:6px;height:6px;}
.gwrap::-webkit-scrollbar-thumb{background:var(--border2);}

.sgrid{
  display:grid;
  min-width:max-content;
  position:relative; /* for time needle */
}

/* ─── Column headers ─────────────────────────────────────────── */
.gh-corner{
  position:sticky;left:0;top:0;z-index:30;
  background:var(--bg);
  border-right:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  height:36px;min-width:148px;
  display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 14px;
}
.gh-corner-lbl{font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--fg3);}
.gh-corner-tz{
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex-shrink:0;
  font-size:13px;line-height:1;
  font-family:inherit;
  background:transparent;
  border:1px solid var(--border2);
  color:var(--fg3);
  cursor:pointer;
  transition:color var(--tr),border-color var(--tr),background var(--tr);
}
.gh-corner-tz:hover{color:var(--fg);border-color:var(--fg2);background:var(--bg3);}
[data-tz="local"] .gh-corner-tz{color:var(--fg);border-color:var(--border-hi);}

.gh-hr{
  position:sticky;top:0;z-index:20;
  background:var(--bg);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border2);
  height:36px;width:56px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:0.1em;color:var(--fg2);
  user-select:none;
}

/* ─── Row labels ─────────────────────────────────────────────── */
.row-lbl{
  position:sticky;left:0;z-index:10;
  background:var(--bg);
  border-right:1px solid var(--border2);
  border-bottom:1px solid var(--border);
  min-width:148px;height:52px;
  display:flex;align-items:center;padding:0 14px;
  cursor:default;user-select:none;
  transition:background var(--tr);
}
.row-lbl:hover{background:var(--bg3);}

/* Week-start: stronger top rule */
.row-lbl.week-start{border-top:1px solid var(--border2);}
.cell.week-start-top{border-top:1px solid var(--border2);}

/* Today: full inversion */
.row-lbl.today{
  background:var(--today-bg) !important;
  border-right-color:var(--today-bg);
}
.row-lbl.today .rl-date{color:var(--today-fg);}
.row-lbl.today .rl-dow{color:var(--today-fg3);}

.rl-inner{display:flex;flex-direction:column;gap:4px;}
.rl-date{font-size:12px;letter-spacing:0.05em;color:var(--fg);}
.rl-dow{font-size:8px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg3);}

/* ─── Cells ──────────────────────────────────────────────────── */
.cell{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  height:52px;width:56px;
  cursor:pointer;position:relative;overflow:visible;
  display:flex;flex-direction:column;
}
/* Today row cells: inverted bg */
.cell.today-bg{background:rgba(232,228,222,0.07);}
[data-theme="light"] .cell.today-bg{background:rgba(17,17,17,0.06);}

/* Hover glint */
.cell::before{
  content:'';position:absolute;inset:0;
  background:var(--fg);opacity:0;pointer-events:none;
  transition:opacity var(--tr);mix-blend-mode:overlay;z-index:2;
}
.cell:hover::before{opacity:0.07;}

/* ─── Occupant stack (horizontal slices per analyst) ────────── */
/* Each analyst gets a horizontal band; within that band,        */
/* quarter marks are shown as vertical fills                     */
.cocc{
  display:flex;flex-direction:column;
  height:100%;width:100%;
  position:absolute;inset:0;
  z-index:1;
}
.occ{
  flex:1;
  display:flex;align-items:stretch;
  min-height:0;
  border-left:2px solid var(--occ-bd);
  background:var(--occ-bg);
  position:relative;
  overflow:hidden;
}
/* Initials label */
.occ-label{
  display:flex;align-items:center;
  padding:0 4px;
  font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--occ-tx);
  white-space:nowrap;
  z-index:2;
  flex-shrink:0;
}
/* Quarter segments — 4 equal vertical slices inside each analyst band */
.occ-quarters{
  position:absolute;inset:0;
  display:flex;
  z-index:0;
}
.occ-q{
  flex:1;
  height:100%;
  transition:background var(--tr);
}
.occ-q.active{ background:var(--occ-bg); }
.occ-q.inactive{ background:transparent; }


/* ─── Time needle ────────────────────────────────────────────── */
#time-needle{
  position:absolute;
  top:36px; /* below header row */
  width:2px;
  background:var(--border-hi);
  pointer-events:none;
  z-index:25;
  transform:translateX(-50%);
  opacity:0.9;
}
#needle-dot{
  position:absolute;
  top:-4px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;
  background:var(--border-hi);
  border-radius:50%;
}

body.painting *{cursor:crosshair !important;}

/* ─── UTC day boundary ───────────────────────────────────────── */
.utc-boundary{
  position:absolute;
  width:1px;
  background:var(--fg3);
  opacity:0.35;
  pointer-events:none;
  z-index:10;
  top:0;
}
.utc-boundary-label{
  position:absolute;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg3);
  pointer-events:none;
  z-index:10;
  white-space:nowrap;
}

/* ─── Side panel ─────────────────────────────────────────────── */
.side{
  width:400px;flex-shrink:0;
  border-left:1px solid var(--border2);
  display:flex;flex-direction:column;overflow:hidden;
}
.side-hd{
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border2);flex-shrink:0;
}
.side-eyebrow{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--fg3);margin-bottom:9px;}
.side-name{font-size:16px;letter-spacing:0.05em;color:var(--fg);margin-bottom:8px;}
.side-inits{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg3);}
.side-bd{flex:1;overflow-y:auto;padding:14px 16px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}

.empty-st{display:flex;flex-direction:column;height:100%;padding:20px 0;}
.welcome-title{font-size:16px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border2);}
.welcome-body{font-size:12px;letter-spacing:0.08em;color:var(--fg2);line-height:2;text-transform:uppercase;}
.welcome-hint{
  margin-top:20px;padding:12px;
  border:1px solid var(--border2);
  font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--fg3);line-height:1.9;
}
.welcome-hint strong{color:var(--fg2);font-weight:400;}

.sec-lbl{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg2);margin-bottom:8px;margin-top:16px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.sec-lbl:first-child{margin-top:0;}
.frow{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.frow:last-child{margin-bottom:0;}
.flbl{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg2);width:60px;flex-shrink:0;}
.finp{flex:1;background:var(--bg2);border:1px solid var(--border2);padding:6px 8px;font-family:inherit;font-size:11px;letter-spacing:0.07em;color:var(--fg);outline:none;transition:border-color var(--tr);}
.finp:focus{border-color:var(--border-hi);}
.st-row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--border);}
.st-row:last-child{border-bottom:none;}
.st-l{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg2);}
.st-v{font-size:14px;color:var(--fg);letter-spacing:0.04em;}
.sh-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border:1px solid var(--border);font-size:10px;letter-spacing:0.07em;margin-bottom:4px;}
.sh-item:last-child{margin-bottom:0;}
.sh-dt{color:var(--fg2);}
.sh-hr{color:var(--fg);}
.btn-row{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border2);}
.btn{flex:1;font-family:inherit;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;background:transparent;border:1px solid var(--border-hi);color:var(--fg);padding:10px 0;cursor:pointer;transition:background var(--tr),color var(--tr);}
.btn:hover{background:var(--border-hi);color:var(--bg);}
.btn.sec{border-color:var(--border2);color:var(--fg2);}
.btn.sec:hover{background:var(--border2);color:var(--fg);}
.btn.dng{border-color:#5e2e2e;color:#cf8e8e;}
.btn.dng:hover{background:#5e2e2e;color:#fddede;}

/* ─── Tooltip ────────────────────────────────────────────────── */
.tip{
  position:fixed;z-index:900;
  background:var(--bg);border:1px solid var(--border2);
  padding:8px 12px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--fg);pointer-events:none;display:none;
  line-height:1.9;
}
.tip-date{color:var(--fg3);font-size:8px;margin-bottom:3px;}

/* ─── Paint pill ─────────────────────────────────────────────── */
.paint-pill{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--bg);border:1px solid var(--border2);
  padding:9px 22px;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--fg);display:none;align-items:center;gap:14px;
  z-index:50;pointer-events:none;
}
.paint-pill.show{display:flex;}
.pp-dot{width:9px;height:9px;}
.pp-esc{font-size:8px;color:var(--fg3);}

/* ─── Quarter picker popup ───────────────────────────────────── */
.qpick{
  position:fixed;z-index:800;
  background:var(--bg);border:1px solid var(--border2);
  display:none;flex-direction:column;
  width:220px;
}
.qpick.open{display:flex;}
.qpick-head{
  padding:10px 14px 8px;
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg3);
  border-bottom:1px solid var(--border2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.5;
}
.qpick-analyst{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  border-bottom:1px solid var(--border2);
  background:var(--bg2);
}
.qpick-analyst-dot{width:9px;height:9px;flex-shrink:0;}
.qpick-analyst-name{font-size:11px;letter-spacing:0.07em;text-transform:uppercase;color:var(--fg);}
/* The 4-block toggle row */
.qpick-blocks{
  display:flex;
  padding:12px 14px;
  gap:4px;
}
.qpick-block{
  flex:1;height:36px;
  cursor:pointer;
  border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:8px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--fg3);
  background:var(--q-grey);
  transition:background var(--tr),border-color var(--tr),color var(--tr);
  user-select:none;
}
.qpick-block:hover{ border-color:var(--fg2); color:var(--fg2); }
.qpick-block.on{
  background:var(--qb-color);
  border-color:var(--qb-border);
  color:var(--qb-text);
}
.qpick-block.on:hover{ opacity:0.85; }
/* Time labels under the blocks */
.qpick-labels{
  display:flex;
  padding:0 14px 12px;
  gap:4px;
}
.qpick-label{
  flex:1;text-align:center;
  font-size:8px;letter-spacing:0.06em;color:var(--fg3);
}
/* Clear/done footer */
.qpick-footer{
  display:flex;border-top:1px solid var(--border2);
}
.qpick-footer-btn{
  flex:1;padding:9px 0;
  font-family:inherit;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;
  background:transparent;border:none;cursor:pointer;
  color:var(--fg3);
  transition:background var(--tr),color var(--tr);
}
.qpick-footer-btn:hover{background:var(--bg3);color:var(--fg);}
.qpick-footer-btn.clear:hover{color:#cf8e8e;background:rgba(94,46,46,0.12);}
.qpick-footer-btn+.qpick-footer-btn{border-left:1px solid var(--border2);}
/* No-analyst state */
.qpick-no-analyst{
  padding:14px;
  font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--fg2);line-height:1.9;
}

/* ─── Modal ──────────────────────────────────────────────────── */
.mback{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:100;align-items:center;justify-content:center;}
[data-theme="light"] .mback{background:rgba(0,0,0,0.28);}
.mback.open{display:flex;}
.modal{background:var(--bg);border:1px solid var(--border2);width:360px;padding:24px;}
.m-title{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border2);}
.mf{margin-bottom:12px;}
.ml{display:block;font-size:8px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg2);margin-bottom:5px;}
.mi{width:100%;background:var(--bg2);border:1px solid var(--border2);padding:7px 10px;font-family:inherit;font-size:11px;letter-spacing:0.07em;color:var(--fg);outline:none;transition:border-color var(--tr);}
.mi:focus{border-color:var(--border-hi);}
.swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
.sw{width:28px;height:28px;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .1s;}
.sw:hover{transform:scale(1.1);}
.sw.on{border-color:var(--border-hi);}
.m-acts{display:flex;gap:8px;margin-top:20px;}