/* Radiology day board. Borders carry the structure. Color is a status. */
:root {
  --ink: #1c1915;
  --soft: #3f3830;
  --muted: #5e574e;
  --line: #d4cdc2;
  --bg: #e7e1d6;
  --surface: #f7f4ee;
  --rail: #fbf9f4;
  --study: #243044;
  --study-text: #f7f4ee;
  --reserve: #7a4e0d;
  --reserve-bg: #f3e6cf;
  --danger: #8c2f2c;
  --danger-bg: #f8e6e3;
  --ok: #1d5c3d;
  --ok-bg: #e4f0e7;
  --warn: #8a5a12;
  --now: #8c2f2c;
  --sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--study); outline-offset: 2px; }

.shell { max-width: 1180px; margin: 0 auto; padding: 20px 20px 48px; }
.top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.kicker { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 2px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.when { margin: 0; font-family: var(--mono); font-size: 13px; }
.when strong { display: block; font-size: 28px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.who { margin: 0; color: var(--muted); text-align: right; }

.nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.nav button, .filters button, .counts button, .choice, .text-btn, .danger-btn, .ok-btn {
  min-height: 40px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  padding: 0 12px;
}
.nav button[aria-pressed="true"], .filters button[aria-pressed="true"], .counts button[aria-pressed="true"] {
  background: var(--study);
  color: var(--study-text);
  border-color: var(--study);
}
.filters, .counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.counts button { font-variant-numeric: tabular-nums; }

.notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-left: 3px solid var(--study);
}
.notice.bad { border-left-color: var(--danger); background: var(--danger-bg); }
.notice.good { border-left-color: var(--ok); background: var(--ok-bg); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.key { display: inline-block; width: 18px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--study); }
.key-study { background: var(--study); }
.key-buf { background: repeating-linear-gradient(-45deg, #c8c2b6, #c8c2b6 2px, #fbf9f4 2px, #fbf9f4 4px); }
.key-reserve { background: var(--reserve-bg); border-color: var(--reserve); }
.key-block { background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(140, 47, 44, 0.35) 3px, rgba(140, 47, 44, 0.35) 4px); border-color: var(--danger); }

.rail { background: var(--rail); border: 1px solid var(--line); margin: 0 0 10px; }
.rail header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.rail header p { margin: 0; }
.code { font-weight: 600; font-size: 16px; letter-spacing: 0.02em; }
.meta { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.util { text-align: right; font-variant-numeric: tabular-nums; }
.util b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.util span { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.rail-tools { display: flex; gap: 6px; align-items: center; }
.ghost { min-height: 32px; padding: 0 8px; border: 1px solid var(--line); background: transparent; border-radius: 4px; }

.track-scroll { overflow-x: auto; }
.track { position: relative; height: 72px; min-width: 880px; margin: 8px 12px 0; border-top: 1px solid var(--line); }
.tick { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--line); }
.tick i { position: absolute; top: 2px; left: 4px; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--now); z-index: 4; pointer-events: none; }
.now b { position: absolute; top: -2px; left: 4px; font-size: 10px; color: var(--now); font-family: var(--mono); font-weight: 500; }
.block, .notch { position: absolute; top: 22px; height: 36px; z-index: 1; }
.block { background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(140, 47, 44, 0.28) 4px, rgba(140, 47, 44, 0.28) 5px); border: 1px solid var(--danger); }
.notch { background: var(--reserve-bg); border: 1px dashed var(--reserve); z-index: 1; }
.block button, .notch span { position: absolute; inset: 0; border: 0; background: transparent; color: var(--danger); font-size: 11px; text-align: left; padding: 4px; }
.notch span { color: var(--reserve); pointer-events: none; }
.study { position: absolute; top: 22px; height: 36px; z-index: 2; display: flex; padding: 0; overflow: hidden; border: 0; border-radius: 2px; background: var(--study); color: var(--study-text); }
.study .acq { flex: 1; min-width: 0; text-align: left; padding: 4px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.study .buf { background: repeating-linear-gradient(-45deg, rgba(247, 244, 238, 0.55), rgba(247, 244, 238, 0.55) 2px, transparent 2px, transparent 4px); }
.study.started { background: var(--ok); }
.study.done { background: #5c6b7a; }
.study.delayed { border-left: 3px solid var(--warn); }
.study.quiet { background: transparent; color: var(--muted); border: 1px dashed var(--muted); }
.caption { margin: 0; padding: 6px 12px 10px; color: var(--soft); font-size: 13px; }
.inactive .track { opacity: 0.45; }

.panel { border: 1px solid var(--line); background: var(--surface); padding: 12px; margin-top: 8px; }
.panel h2, .split h2, .room h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.rows button.link { border: 0; background: transparent; padding: 0; min-height: 40px; text-align: left; }

.split { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.study-list { display: flex; flex-direction: column; gap: 6px; }
.study-list button { text-align: left; min-height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 4px; padding: 8px 10px; }
.study-list button[aria-pressed="true"] { border-color: var(--study); background: var(--study); color: var(--study-text); }
.assign { margin: 0 0 8px; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.assign.bad { font-size: 18px; color: var(--danger); font-weight: 500; }
.why { margin: 0 0 10px; color: var(--soft); }
.prep { margin: 0 0 12px; padding: 8px 10px; background: var(--reserve-bg); border-left: 3px solid var(--reserve); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
label.wide { grid-column: 1 / -1; }
input, select, textarea { min-height: 40px; border: 1px solid #b7b0a4; background: white; border-radius: 2px; padding: 6px 8px; }
textarea { min-height: 64px; }
.check { flex-direction: row; align-items: center; min-height: 40px; color: var(--ink); font-size: 14px; }
.openings { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.choice { text-align: left; display: flex; justify-content: space-between; gap: 8px; }
.choice[aria-pressed="true"] { border-color: var(--study); }
.choice em { font-style: normal; color: var(--reserve); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ok-btn { background: var(--study); color: var(--study-text); border-color: var(--study); min-height: 44px; }
.danger-btn { border-color: var(--danger); color: var(--danger); }

.stepper { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.stepper li { font-size: 12px; color: var(--muted); padding: 4px 0; border-top: 2px solid var(--line); }
.stepper li.on { color: var(--ink); font-weight: 600; border-top-color: var(--study); }
.stepper li.done { border-top-color: var(--ok); color: var(--ok); }
.gates { margin: 12px 0; }
.gate { padding: 8px 10px; border: 1px solid var(--line); margin: 0 0 6px; }
.gate.blocked, .gate.missing { background: var(--danger-bg); border-color: #e3c2be; }
.gate.clear { background: var(--ok-bg); }
.checks { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.room-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { border-bottom: 1px solid var(--line); text-align: left; padding: 8px; vertical-align: top; font-variant-numeric: tabular-nums; }
th { font-size: 12px; color: var(--muted); font-weight: 500; }
.matrix { overflow-x: auto; }
.matrix table { min-width: 760px; }
.num { font-family: var(--mono); font-size: 20px; font-weight: 500; }
.foot { margin-top: 18px; color: var(--muted); font-size: 12px; }

@media (max-width: 800px) {
  .shell { padding: 14px 12px 32px; }
  .top, .split, .grid, .room-head, .rail header { display: block; }
  .who, .util { text-align: left; margin-top: 8px; }
  .when strong { font-size: 22px; }
  .assign { font-size: 22px; }
}