/* Layout: operations board — header bar, two filter toolbars, summary strip, then either day rows (07–21 track per resource) or a week grid (resources × days) */
:root{
  --bg:#eef1f3; --surface:#ffffff; --surface-2:#f6f8f9; --line:#d6dde2; --fg:#16222a; --muted:#5a6873;
  --accent:#1d5a74; --accent-fg:#ffffff; --today:#e3eef3;
  --free:#25744a; --free-bg:#e1f0e7; --soon:#9a6206; --soon-bg:#f7ecd3; --busy:#ad3a2f; --busy-bg:#f5e0dc;
  --block:#c45a4e; --block-tent:#d9a59e; --now:#1d5a74; --track:#e8edf0;
  --heat-1:#fbf1e4; --heat-2:#f6dcd5;
  --f-display:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#10181d; --surface:#172229; --surface-2:#1c2830; --line:#2b3a44; --fg:#e4ebef; --muted:#93a3ae;
  --accent:#6fb3d0; --accent-fg:#0d1519; --today:#1b3240;
  --free:#6cc893; --free-bg:#16352a; --soon:#e4b45a; --soon-bg:#3a2f17; --busy:#ef8a7e; --busy-bg:#3d211e;
  --block:#c76a5f; --block-tent:#7d4a44; --now:#6fb3d0; --track:#22313a;
  --heat-1:#2c2a1f; --heat-2:#3a2421; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#10181d; --surface:#172229; --surface-2:#1c2830; --line:#2b3a44; --fg:#e4ebef; --muted:#93a3ae;
  --accent:#6fb3d0; --accent-fg:#0d1519; --today:#1b3240;
  --free:#6cc893; --free-bg:#16352a; --soon:#e4b45a; --soon-bg:#3a2f17; --busy:#ef8a7e; --busy-bg:#3d211e;
  --block:#c76a5f; --block-tent:#7d4a44; --now:#6fb3d0; --track:#22313a;
  --heat-1:#2c2a1f; --heat-2:#3a2421; color-scheme:dark }

*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.45}
.wrap{max-width:1400px;margin:0 auto;padding-inline:16px;padding-block:20px 40px;display:flex;flex-direction:column;gap:14px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted)}

header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;border-bottom:2px solid var(--fg);padding-bottom:12px}
.brand{display:flex;flex-direction:column;gap:2px}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
h1{font-family:var(--f-display);font-weight:700;font-size:32px;line-height:1;margin:0;text-wrap:balance}
.clock{font-family:var(--f-mono);font-size:28px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.top-right{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;color:var(--muted)}
.mode{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:3px;background:var(--soon-bg);color:var(--soon)}
.mode.live{background:var(--free-bg);color:var(--free)}
.btn{border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:4px;cursor:pointer;font-weight:500}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.icon{padding:7px 11px;font-size:16px;line-height:1}
.btn[disabled]{opacity:.55;cursor:default}

.toolbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface);flex-wrap:wrap}
.seg:empty{display:none}
.seg button{border:0;background:transparent;padding:7px 12px;cursor:pointer;border-right:1px solid var(--line);font-weight:500;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.datenav{display:inline-flex;gap:6px;align-items:center}
.range-label{font-family:var(--f-display);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.chk{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}
input[type=search],input[type=date],input[type=text],textarea{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:6px 9px}
input[type=search]{width:220px;max-width:100%}
.spacer{flex:1}

.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.sum{background:var(--surface);padding:12px 16px;display:flex;align-items:baseline;gap:10px;border:0;text-align:left;min-width:0}
button.sum{cursor:pointer}
.sum[aria-pressed="true"]{box-shadow:inset 0 -3px 0 var(--fg)}
.sum .n{font-family:var(--f-display);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.sum .n.txt{font-size:20px;white-space:normal;overflow-wrap:anywhere}
.sum .l{font-size:13px;color:var(--muted)}
.sum.free .n{color:var(--free)} .sum.soon .n{color:var(--soon)} .sum.busy .n{color:var(--busy)}

.notice{padding:10px 14px;border-radius:4px;border:1px solid var(--line);background:var(--surface-2);font-size:13px}
.notice.err{border-color:var(--busy);background:var(--busy-bg);color:var(--fg)}

/* ---------- day view ---------- */
.board{background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.scale,.row{display:grid;grid-template-columns:minmax(0,1.2fr) 190px minmax(0,1.3fr) minmax(0,2.2fr);gap:16px;align-items:center;padding-inline:16px}
.scale{padding-block:8px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.ticks{position:relative;height:14px;font-family:var(--f-mono);letter-spacing:0;text-transform:none;font-weight:400}
.ticks span{position:absolute;transform:translateX(-50%)}
.ticks span:first-child{transform:none} .ticks span:last-child{transform:translateX(-100%)}
.campus{display:flex;align-items:baseline;gap:10px;padding:14px 16px 8px;border-top:1px solid var(--line)}
.campus:first-of-type{border-top:0}
.campus h2{font-family:var(--f-display);font-size:20px;font-weight:600;margin:0}
.campus .c{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.row{padding-block:10px;border-top:1px solid var(--line);cursor:pointer;background:var(--surface)}
.row:hover{background:var(--surface-2)}
.name{min-width:0}
.name b{font-family:var(--f-display);font-size:17px;font-weight:600;display:block;line-height:1.15;overflow-wrap:anywhere}
.name small{color:var(--muted);font-size:12px}
.tag{display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;border:1px solid var(--line);border-radius:2px;padding:0 4px;margin-right:6px;color:var(--muted);vertical-align:1px}
.pill{display:inline-flex;flex-direction:column;gap:1px;padding:5px 10px;border-radius:3px;border-left:4px solid;font-size:13px;line-height:1.25;min-width:0}
.pill strong{font-weight:600}
.pill span{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums}
.pill.free{background:var(--free-bg);border-color:var(--free);color:var(--free)}
.pill.soon{background:var(--soon-bg);border-color:var(--soon);color:var(--soon)}
.pill.busy{background:var(--busy-bg);border-color:var(--busy);color:var(--busy)}
.pill.day{background:var(--surface-2);border-color:var(--muted);color:var(--fg)}
.pill.na{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.next{min-width:0;font-size:13px}
.next .t{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--muted);margin-right:6px}
.next .s{overflow-wrap:anywhere}
.none{color:var(--muted)}
.track{position:relative;height:22px;background:var(--track);border-radius:2px;overflow:hidden}
.track .hr{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.track .b{position:absolute;top:3px;bottom:3px;background:var(--block);border-radius:2px}
.track .b.tent{background:repeating-linear-gradient(135deg,var(--block-tent) 0 4px,transparent 4px 7px);border:1px solid var(--block)}
.track .now{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--now)}
.detail{grid-column:1/-1;padding:4px 0 6px;cursor:default}
.detail table{border-collapse:collapse;width:100%;font-size:13px}
.detail td{padding:5px 8px;border-top:1px dashed var(--line);vertical-align:top}
.detail td.t{font-family:var(--f-mono);white-space:nowrap;font-variant-numeric:tabular-nums;width:1%}
.detail td.st{color:var(--muted);white-space:nowrap;width:1%}
.detail .addr{color:var(--muted);font-size:12px;margin-top:6px;font-family:var(--f-mono);overflow-wrap:anywhere}
.empty{padding:28px 16px;color:var(--muted);text-align:center}

/* ---------- week / two-week view ---------- */
.wk{overflow-x:auto}
.wk-grid{display:grid;min-width:min-content}
.wk-h{position:sticky;top:0;z-index:2;background:var(--surface-2);border-bottom:1px solid var(--line);border-left:1px solid var(--line);padding:8px 6px;font-size:12px;font-weight:600;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.wk-h .wd{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wk-h.first{text-align:left;padding-left:16px;border-left:0;left:0;z-index:3;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--muted);display:flex;align-items:flex-end}
.wk-h.today{background:var(--today)}
.wk-h.today .wd{color:var(--accent)}
.wk-group{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;padding:14px 16px 6px;border-top:1px solid var(--line);position:sticky;left:0}
.wk-group h2{font-family:var(--f-display);font-size:20px;font-weight:600;margin:0}
.wk-group .c{font-size:12px;color:var(--muted)}
.wk-name{position:sticky;left:0;z-index:1;background:var(--surface);border-top:1px solid var(--line);padding:8px 12px 8px 16px;min-width:0}
.wk-name b{font-size:15px}
.wk-cell{border:0;border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--surface);padding:7px 6px;display:flex;flex-direction:column;gap:5px;justify-content:center;cursor:pointer;text-align:left;min-width:0}
.wk-cell:hover{outline:2px solid var(--accent);outline-offset:-2px}
.wk-cell.we{background:var(--surface-2)}
.wk-cell.today{background:var(--today)}
.wk-cell.warm{background:var(--heat-1)}
.wk-cell.hot{background:var(--heat-2)}
.wk-cell.sep,.wk-h.sep{border-left:3px solid var(--fg)}
.wk-cell .mini{position:relative;height:12px;background:var(--track);border-radius:2px;overflow:hidden}
.wk-cell .mini .b{position:absolute;top:2px;bottom:2px;background:var(--block);border-radius:1px}
.wk-cell .mini .b.tent{background:var(--block-tent)}
.wk-cell .mini .now{position:absolute;top:0;bottom:0;width:2px;background:var(--now)}
.wk-cell .lbl{font-family:var(--f-mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.wk-cell.hot .lbl{color:var(--busy)}
.wk-cell.na .lbl{color:var(--muted)}
.wk-tot{border-top:1px solid var(--line);border-left:1px solid var(--line);padding:7px 10px;font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;background:var(--surface)}
.wk-tot span{color:var(--muted);font-size:11px}
.legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:14px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:5px;border:1px solid var(--line)}

/* ---------- setup ---------- */
details.setup{background:var(--surface);border:1px solid var(--line);border-radius:4px}
details.setup summary{cursor:pointer;padding:12px 16px;font-weight:600;font-family:var(--f-display);font-size:18px}
.setup-body{padding:0 16px 16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.setup-body h3{font-family:var(--f-display);font-size:16px;margin:4px 0 8px}
.setup-body ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;max-width:65ch}
.setup-body code{font-family:var(--f-mono);font-size:12px;background:var(--surface-2);padding:1px 4px;border-radius:2px;overflow-wrap:anywhere}
.form{display:flex;flex-direction:column;gap:10px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.form input[type=text],.form textarea{width:100%;color:var(--fg)}
.form textarea{min-height:110px;font-family:var(--f-mono);font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

@media (max-width:900px){
  .scale{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .row .next,.row .track{grid-column:1/-1}
  .summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .setup-body{grid-template-columns:1fr}
}
@media (max-width:480px){ .clock{font-size:22px} h1{font-size:26px} .meta{align-items:flex-start} input[type=search]{width:100%} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }