:root {
  /* Kent Ridge Clinical: navy and white, colour as thin lines, square panels, rounded controls */
  --bg: #ffffff;            /* n-bg */
  --panel: #ffffff;         /* n-bg */
  --ink: #333333;           /* n-ink */
  --muted: #6e747c;         /* n-muted */
  --line: #dddddd;          /* n-line */
  --line-input: #ced4da;    /* n-line-input */
  --navy: #002f6c;          /* n-navy */
  --navy-hover: #2c6597;    /* n-navy-hover */
  --cyan: #00a9e0;          /* n-cyan: marks only, never text on white */
  --stripe-blue: #178fd7;   /* n-stripe-blue: third quarter of the top band */
  --link: #337ab7;          /* n-blue */
  --link-hover: #d7340b;    /* n-hover-light */
  --orange: #e57200;        /* n-orange */
  --red: #e4002b;           /* n-red */
  --ok: #1d7a3a;
  --accent: var(--navy);
  --accent-ink: #ffffff;
  --chip: #d5e3ef;          /* n-bg-blue */
  --chip-on: var(--navy);
  --err: #5c0c1b;           /* n-alert-ink */
  --err-bg: #ffebeb;        /* n-alert-bg */
  --err-line: #ffdadf;      /* n-alert-line */
  --warn: #333333;
  --warn-bg: #e6dbce;       /* n-bg-beige */
  --info: #002f6c;
  --info-bg: #d5e3ef;       /* n-bg-blue */
  --row-alt: #f6f9fc;
  --disabled-bg: #cecece;   /* n-disabled-bg */
  --disabled-ink: #6e747c;  /* n-disabled-ink */
  --radius: 5px;            /* n-radius: controls only */
  --radius-sm: 3px;         /* n-radius-sm: badges */
  --shadow-card: 2px 4px 6px 0 #e9e9e9; /* n-shadow-card */
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root { color-scheme: light; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font-sans); }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
button, input, select, textarea { font: inherit; color: inherit; }

.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 17px 16px 12px; }
/* NUHS four-colour band along the top of the header, as on the logbook */
.top { background: linear-gradient(90deg, var(--orange) 0 25%, var(--red) 25% 50%, var(--stripe-blue) 50% 75%, var(--navy) 75% 100%) top / 100% 5px no-repeat, var(--panel); border-bottom: 1px solid var(--line); }
.top h1 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--navy); }
.privacy { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.team { display: flex; gap: 8px; flex-wrap: wrap; }

button, .btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--line-input); background: var(--panel); color: var(--navy);
}
button:hover, .btn:hover { border-color: var(--navy); }
button.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
button.primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
button:disabled, button:disabled:hover { background: var(--disabled-bg); color: var(--disabled-ink); border-color: var(--disabled-bg); cursor: default; }
button.small { padding: 2px 8px; font-size: 12px; }
button.link { border: 0; background: none; color: var(--link); padding: 0; }
button.link:hover { color: var(--link-hover); }

.tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 10px 14px; white-space: nowrap; color: var(--muted); }
.tabs button:hover { color: var(--navy); }
.tabs button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--cyan); font-weight: 600; }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }
section.card { background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 16px; margin-bottom: 16px; }
section.card h2 { margin: 0 0 6px; font-size: 1.125rem; font-weight: 600; color: var(--navy); }
.hint { color: var(--muted); margin: 0 0 12px; font-size: 13px; }
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.bar .grow { flex: 1; }
.stats { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 13px; }
.stats b { color: var(--ink); }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--navy); font-weight: 600; white-space: nowrap; position: sticky; top: 0; background: var(--panel); }
tbody tr:nth-child(even) { background: var(--row-alt); }
td input[type="text"], td input:not([type]), td select { width: 100%; min-width: 80px; padding: 3px 6px; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--panel); }
td input.narrow { min-width: 60px; width: 70px; }
input[type="text"], input:not([type]), input[type="date"], input[type="number"], select, textarea {
  padding: 4px 8px; border: 1px solid var(--line-input); border-radius: var(--radius); background: var(--panel);
}
textarea { width: 100%; min-height: 56px; resize: vertical; }
tr.off td { opacity: .45; }
tr.off td:first-child { opacity: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; padding: 1px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--chip); cursor: pointer; user-select: none; white-space: nowrap; }
.chip.on { background: var(--chip-on); color: var(--accent-ink); border-color: var(--chip-on); }
.chip.static { cursor: default; }
.seen { font-size: 12px; color: var(--muted); }

.paste { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.paste label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }

/* roster grid, styled after the paper roster */
.sheet { font-family: Arial, sans-serif; font-size: 13px; }
.sheet td { border-bottom: 1px solid var(--line); }
.sheet td.room { font-weight: 700; text-align: right; white-space: nowrap; width: 1%; padding-right: 12px; }
.sheet td.cell { min-width: 160px; text-align: center; outline: none; cursor: text; }
.sheet td.cell.over { background: var(--chip); box-shadow: inset 0 0 0 2px var(--accent); }
.sheet td.editing { padding: 2px; }
.sheet .cell-input { width: 100%; text-align: center; font: inherit; }
.names { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.names .name { border-color: var(--line); background: var(--panel); text-align: center; }
.add-name { align-self: center; padding: 0 8px; font-size: 12px; line-height: 18px; border-style: dashed; color: var(--muted); opacity: .5; }
.cell:hover .add-name { opacity: 1; }
.name { padding: 1px 8px; border-radius: var(--radius); border: 1px solid transparent; user-select: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.names .name .label { flex: 1; }
@media (hover: hover) and (pointer: fine) { .name { cursor: grab; touch-action: none; } }
@media (hover: none), (pointer: coarse) { .names .name { cursor: pointer; } }
.name .icon { font-size: 10px; line-height: 1; border-radius: 3px; padding: 1px 3px; opacity: .45; }
.name:hover .icon { opacity: 1; }
.name .icon.cover { cursor: grab; color: var(--red); font-weight: 700; border: 1px solid currentColor; }
.name .icon.dbl { cursor: grab; font-weight: 700; font-size: 12px; color: var(--muted); border: 1px dashed currentColor; }
.name .icon.dbl.on { color: var(--ink); border-style: solid; opacity: 1; }
.name .icon.del { cursor: pointer; color: var(--muted); font-size: 13px; }
.name .icon.del:hover { color: var(--red); background: var(--chip); }
.tag-editor .where { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 2px; font-size: 13px; }
.tag-editor .where ul { margin: 4px 0 0; padding-left: 18px; }
/* header date: the date in words over the native picker, steps either way, save state below */
.datebar { display: grid; gap: 4px; justify-items: start; }
.date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.date-row button.small { padding: 4px 10px; font-size: 13px; }
.date-row button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.date-pick { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 10px; font-weight: 600; color: var(--navy); background: var(--panel); cursor: pointer; }
.date-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.date-pick input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.date-pick:focus-within { outline: 2px solid var(--navy); outline-offset: 1px; }
.date-notes { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; align-items: center; }
.date-warn { color: var(--warn); background: var(--warn-bg); padding: 1px 6px; font-weight: 600; }
.save-state .saved { color: var(--ok); }
.save-state .unsaved { color: var(--red); font-weight: 600; }
@media print { .datebar { display: none; } }
.name:hover { border-color: var(--line); background: var(--chip); }
.name.over { border-color: var(--accent); background: var(--chip); box-shadow: 0 0 0 1px var(--accent); }
.name.dragging { opacity: .35; }
.name.ghost { position: fixed; z-index: 10; pointer-events: none; background: var(--panel); border-color: var(--accent); box-shadow: var(--shadow-card); cursor: grabbing; font-family: var(--font-sans); font-size: 13px; }
.names .sep { color: var(--muted); align-self: center; }
.empty-cell { color: var(--muted); opacity: .5; }
.sheet td.notes { color: var(--muted); min-width: 120px; }
.sheet tr.gap td { border: 0; height: 12px; background: var(--panel); }
.sheet tr.flagged td.room { color: var(--err); }

.warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.warnings li { padding: 4px 8px; border-radius: 0; font-size: 13px; }
.warnings li.error { background: var(--err-bg); color: var(--err); border: 1px solid var(--err-line); }
.warnings li.warn { background: var(--warn-bg); color: var(--warn); }
.warnings li.info { background: var(--info-bg); color: var(--info); }

.cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.cols > div:last-child { align-self: stretch; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.empty { text-align: center; color: var(--muted); padding: 32px 16px; }

#toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; }
#toast.actionable.show { pointer-events: auto; display: flex; align-items: center; gap: 10px; }
#toast button { background: transparent; color: inherit; border-color: currentColor; font-weight: 600; }

@media (max-width: 600px) {
  .top, main { padding: 12px 16px; }
  .tabs { padding: 0 8px; }
}

.seg { display: inline-flex; }
.seg button { border-radius: 0; }
.seg button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.seg button:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600; }

/* sheet preview: a white page like Excel, in both themes */
.sheet-wrap { background: #fff; color: #000; }
table.xl { border-collapse: collapse; table-layout: fixed; width: auto; font-family: Arial, sans-serif; color: #000; background: #fff; }
table.xl { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
table.xl td { border: 0; padding: 1px 3px; height: 17px; line-height: 1.2; overflow: hidden; white-space: normal; word-break: break-word; }
table.xl tbody tr:nth-child(even) { background: none; }
table.xl td.box { border: 1px solid #000; }
table.xl td.spill { overflow: visible; white-space: nowrap; }
.sheet-wrap { padding-right: 120px; }
@media print {
  body { background: #fff; }
  .top, .tabs, .no-print, #toast, #demo-bar, .foot { display: none !important; }
  main { padding: 0; max-width: none; }
  section.card { border: 0; padding: 0; margin: 0; }
  @page { size: A4 portrait; margin: 10mm; }
}

.btn-group { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.dbl { margin-left: 1px; font-weight: 700; }
.sheet td.notes { cursor: text; outline: none; }
.sheet td.notes:focus { background: var(--chip); box-shadow: inset 0 0 0 2px var(--accent); }
table.xl td.editable:focus { background: #d5e3ef; box-shadow: inset 0 0 0 2px #002f6c; }
table.xl td.editable { cursor: text; outline: none; }
table.xl td.editable:hover { background: #eef4f9; }
.tag-editor { position: fixed; z-index: 20; width: 280px; max-width: calc(100vw - 16px); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: 0; padding: 12px; box-shadow: var(--shadow-card); display: grid; gap: 4px; }
.tag-editor label { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.tag-editor input { width: 100%; }
.tag-editor label.check { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 400; }
.tag-editor label.check input { width: auto; margin: 0; }
@media print { .tag-editor { display: none; } }

.cloud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cloud:empty { display: none; }
ul.history { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
ul.history li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px solid var(--line); }
details summary { cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 8px; }
@media print { .cloud { display: none; } }

.bar.sync { padding: 8px 12px; border-radius: 0; background: var(--info-bg); color: var(--info); font-size: 13px; }
.bar.sync.dirty { background: var(--warn-bg); color: var(--warn); }
.bar.sync span { flex: 1; min-width: 200px; }

dialog.changes { border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: 0; padding: 16px; max-width: min(640px, calc(100vw - 32px)); width: 100%; background: var(--panel); color: var(--ink); }
dialog.changes::backdrop { background: rgba(0,0,0,.35); }
dialog.changes h2 { margin: 0 0 8px; font-size: 16px; }
dialog.changes ul { max-height: 50vh; overflow: auto; margin: 0 0 12px; padding-left: 18px; font-size: 13px; }
ul.log { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
ul.log ul { margin: 2px 0 0; padding-left: 18px; }

.foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 24px 16px 32px; color: var(--muted); font-size: 13px; }
.btn.small { padding: 2px 8px; font-size: 12px; }
@media print { .foot { display: none; } }

.sheet tr.special td.room { color: var(--accent); }
.card.pool { position: sticky; top: 8px; z-index: 2; max-height: 60vh; overflow: auto; }
.card.pool.over { box-shadow: inset 0 0 0 2px var(--accent); }
.pool-group { margin-top: 6px; }
.pool-group > b { font-size: 12px; color: var(--muted); }
.pool-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pool-names .name { border-color: var(--line); background: var(--panel); }

.seg.subtabs { margin-bottom: 12px; }

/* Monthly: manpower board and roster grids */
.board { display: grid; grid-template-columns: 2fr repeat(4, minmax(140px, 1fr)); gap: 10px; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr 1fr; } }
.board-col { border: 1px solid var(--line); padding: 8px; min-height: 80px; background: var(--panel); }
.board-col.over { box-shadow: inset 0 0 0 2px var(--navy); background: var(--chip); }
.board-col h3 { margin: 0 0 6px; font-size: 14px; color: var(--navy); }
.board-chip { cursor: grab; font-size: 13px; }
.board-chip.senior { font-weight: 600; }
.board-chip.manual { border: 2px solid var(--navy) !important; }
input.unmatched, td.unmatched { color: var(--red); }
input.unmatched { border-color: var(--red); }
table.monthly td { padding: 2px 4px; }
table.monthly td input { min-width: 150px; }
table.monthly tr.weekend td { background: #f3f5f8; }
table.monthly tr.today td { background: var(--chip); }
dialog.changes.wide { max-width: min(900px, calc(100vw - 32px)); }
.import-review { max-height: 62vh; overflow: auto; margin-bottom: 12px; }
.import-review h3 { margin: 12px 0 4px; font-size: 14px; color: var(--navy); }
.import-review td { vertical-align: middle; }
.import-review select { max-width: 420px; }
.calls-list { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 4px 8px; align-items: center; }
.calls-list label { font-size: 12px; }
.calls-list input { padding: 2px 6px; font-size: 13px; }
.lock-chip { border-color: var(--line); background: var(--panel); }
.split { position: relative; display: inline-flex; }
.split > button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.split > button.caret { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; padding: 6px 8px; }
.split .menu { position: absolute; top: 100%; right: 0; z-index: 30; margin-top: 2px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: grid; min-width: 160px; }
.split .menu button { border: 0; border-radius: 0; justify-content: flex-start; }
.split .menu button.on { font-weight: 600; background: var(--chip); }
@media print { .split { display: none; } }
fieldset.lock { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.lock[disabled] .chip, fieldset.lock[disabled] [draggable] { pointer-events: none; }
fieldset.lock[disabled] input, fieldset.lock[disabled] select, fieldset.lock[disabled] textarea { background: var(--row-alt); }
.import-review .section-head { margin: 12px 0 4px; } .import-review .section-head h3 { margin: 0; }
.demo-bar { display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: var(--chip); color: var(--navy); font-size: 13px; border-bottom: 1px solid var(--line); }
.demo-bar .grow { flex: 1; }
@media print { .demo-bar { display: none; } }
a.btn { text-decoration: none; }
/* the person chip and box on the daily tabs */
.pchip .marks { font-size: 11px; color: var(--muted); }
.person-box { width: 320px; }
.person-box .btn-group button { margin: 0; }
tr.highlight td { background: #fff4c2 !important; transition: background 1s; }
.status-pick { flex-wrap: wrap; } .status-pick button[aria-pressed=true] { background: var(--navy); color: #fff; border-color: var(--navy); }

.add-flag { padding: 0 8px; font-size: 12px; line-height: 20px; border-style: dashed; color: var(--muted); background: none; }
.add-flag:hover { color: var(--navy); border-color: var(--navy); }

/* roster cells: the + and the & / C handles appear on hover; an empty cell always shows its + */
.sheet .cell .add-name { opacity: 0; }
.sheet .cell:hover .add-name, .sheet .cell:focus-within .add-name, .sheet .cell:not(:has(.name)) .add-name { opacity: 1; }
@media (hover: none), (pointer: coarse) { .sheet .cell .add-name { opacity: .35; } .sheet .cell:not(:has(.name)) .add-name { opacity: 1; } }
.name .icon { opacity: 0; }
.name:hover .icon, .name:focus-within .icon, .name .icon.dbl.on { opacity: 1; }
.name.hl, .pchip.hl { background: #fff3c4; border-color: #c99a06; box-shadow: 0 0 0 1px #c99a06; }

/* tabs: the daily ones in work order, the set-up ones (Staff, Settings) to the right */
.tabs button.setup { display: inline-flex; align-items: center; gap: 6px; }
.tabs button.setup:first-of-type, .tabs button[data-tab="staff"] { margin-left: auto; }
@media (max-width: 560px) {
  .tabs { gap: 0; }
  .tabs button { padding: 10px 9px; }
  .tabs button.setup .tab-text { display: none; }
}
.next-step { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; margin: 8px 0 12px; background: var(--chip); border-left: 4px solid var(--navy); }
.next-step span { flex: 1 1 260px; }

/* long tables: the header row stays on screen (wide screens, where the table needs no sideways scroll);
   the room column stays put when a narrow screen scrolls sideways */
@media (min-width: 900px) { .card.scroll:has(> table.sheet) { overflow: visible; } }
.sheet thead th { z-index: 2; box-shadow: 0 1px 0 var(--line); }
@media (max-width: 899px) { .sheet td.room { position: sticky; left: 0; z-index: 1; background: var(--panel); } }

/* Calls and clinics: person chips; dashed ones come from the monthly rosters */
.call-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 28px; }
.call-field .cell-input { flex: 1 1 180px; text-align: left; }
.pchip.inherited { border-style: dashed; border-color: var(--muted); background: transparent; }
.pchip.unknown { color: var(--red); border-color: var(--red); }
.call-field .from { font-size: 11px; color: var(--muted); }
.call-field .add-name { opacity: .6; }
.call-field:hover .add-name, .call-field:not(:has(.name)) .add-name { opacity: 1; }
.call-field .icon.del { opacity: 0; }
.call-field .name:hover .icon.del { opacity: 1; }

/* problems card */
.problems .warnings li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; }
.problems .warnings li > span:first-child { flex: 1 1 200px; }
.problems .fixes { display: flex; gap: 6px; flex-wrap: wrap; }
.ok-note { color: var(--ok); font-weight: 600; margin: 4px 0; }
@keyframes flash-row { from { background: #fff3c4; } to { background: transparent; } }
tr.flash td { animation: flash-row 2s ease-out; }

/* the day's steps, under the tabs */
.steps { display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; background: var(--panel); border-bottom: 1px solid var(--line); }
.steps .step { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); background: var(--panel); text-align: left; flex: 1 0 auto; min-width: 140px; }
.steps .step:hover { border-color: var(--navy); }
.steps .step.here { box-shadow: inset 0 -3px 0 var(--cyan); }
.steps .dot { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid var(--muted); color: var(--muted); flex: none; }
.steps .what { display: grid; line-height: 1.2; }
.steps .what b { font-size: 13px; color: var(--navy); }
.steps .what small { font-size: 11px; color: var(--muted); }
.steps .ok .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps .bad .dot { background: var(--red); border-color: var(--red); color: #fff; }
.steps .bad small { color: var(--red); font-weight: 600; }
.steps .off { opacity: .55; }
@media (max-width: 560px) { .steps { padding: 8px; } .steps .step { min-width: 0; padding: 4px 8px; } .steps .what small { display: none; } }
@media print { .steps { display: none !important; } }

/* rotations: a year of weeks per junior */
.rot-palette { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 10px; position: sticky; top: 0; background: var(--panel); padding: 6px 0; z-index: 3; }
.rot-palette .post { min-width: 40px; font-weight: 600; border-color: var(--line); color: var(--ink); }
.rot-palette.idle .post { opacity: .55; }
.rot-wrap { padding-top: 8px; }
table.rot { border-collapse: separate; border-spacing: 0; font-size: 11px; user-select: none; }
table.rot th, table.rot td { padding: 0; border-bottom: 1px solid var(--line); }
table.rot th.mon { text-align: left; padding: 2px 4px; border-left: 1px solid var(--line); font-size: 12px; }
table.rot th.day { width: 36px; min-width: 36px; text-align: center; font-weight: 400; color: var(--muted); }
table.rot th.day.now { color: var(--navy); font-weight: 700; }
table.rot .who { position: sticky; left: 0; z-index: 2; background: var(--panel); padding: 2px 6px 2px 0; min-width: 150px; text-align: left; box-shadow: -24px 0 0 var(--panel), 1px 0 0 var(--line); }
table.rot .usual { padding: 2px 6px; }
table.rot .usual select { font-size: 11px; padding: 1px 2px; }
table.rot td.wk { width: 36px; min-width: 36px; height: 26px; font-size: 10.5px; white-space: nowrap; text-align: center; cursor: cell; border-left: 1px solid #fff; }
table.rot td.wk.usual { color: var(--muted); opacity: .55; }
table.rot td.wk.now { box-shadow: inset 2px 0 0 var(--cyan), inset -2px 0 0 var(--cyan); }
table.rot td.wk.sel { outline: 2px solid var(--navy); outline-offset: -2px; opacity: 1; }
table.rot td.wk:hover { outline: 1px solid var(--navy); outline-offset: -1px; }

/* move or swap by tapping */
.swap-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; display: flex; gap: 10px; align-items: center; background: var(--navy); color: #fff; padding: 8px 14px; max-width: calc(100vw - 32px); box-shadow: var(--shadow-card); }
.swap-bar button { background: transparent; color: #fff; border-color: #fff; }
body.swapping #app td.cell, body.swapping #app .card.pool { cursor: crosshair; }
body.swapping #app td.cell:hover, body.swapping #app .card.pool:hover { box-shadow: inset 0 0 0 2px var(--cyan); }
/* select several on the manpower board */
.pick-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; margin: 8px 0; background: var(--chip); }
.pchip.picked { background: var(--navy); color: #fff; border-color: var(--navy); }
/* keyboard shortcuts */
kbd { font-family: var(--font-sans); font-size: 12px; border: 1px solid var(--line); border-bottom-width: 2px; padding: 1px 6px; background: var(--panel); white-space: nowrap; }
.foot .grow { flex: 1; }
/* the tour */
.tour-ring { position: fixed; z-index: 60; border: 3px solid var(--cyan); box-shadow: 0 0 0 9999px rgba(10, 25, 60, .45); pointer-events: none; transition: all .2s; }
.tour-card { position: fixed; z-index: 61; left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 32px)); background: var(--panel); border-top: 4px solid var(--navy); padding: 12px 14px; box-shadow: var(--shadow-card); }
.tour-card h3 { margin: 2px 0 4px; color: var(--navy); }
.tour-card p { margin: 0 0 8px; }
.tour-card .bar { margin: 0; }
@media (prefers-reduced-motion: reduce) { .tour-ring { transition: none; } }
@media print { .swap-bar, #tour { display: none !important; } }

/* phones: the roster as one card per room, and the person box as a sheet from the bottom */
@media (max-width: 600px) {
  table.roster-edit, table.roster-edit tbody { display: block; width: 100%; }
  table.roster-edit thead { display: none; }
  table.roster-edit tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 8px 4px 10px; border-bottom: 1px solid var(--line); }
  table.roster-edit tr.gap { display: none; }
  table.roster-edit td { display: block; border: 0; padding: 0; min-width: 0; }
  table.roster-edit td.room { grid-column: 1 / -1; position: static; text-align: left; font-size: 15px; color: var(--navy); background: none; }
  table.roster-edit td.cell { min-width: 0; }
  table.roster-edit td.cell::before { display: block; font-size: 11px; color: var(--muted); text-align: left; margin-bottom: 2px; }
  table.roster-edit td.cell[data-key=senior]::before { content: 'Senior'; }
  table.roster-edit td.cell[data-key=junior]::before { content: 'Junior'; }
  table.roster-edit td.notes { grid-column: 1 / -1; font-style: italic; }
  table.roster-edit td.notes:empty, table.roster-edit td:empty { display: none; }
  .tag-editor { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100% !important; max-width: 100%; max-height: 85vh; overflow: auto; border-radius: 12px 12px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); animation: sheet-up .18s ease-out; }
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tag-editor { animation: none; } }

/* viewers: My day and the saved roster only */
body.viewer .tabs, body.viewer #steps, body.viewer .foot, body.viewer #practice-link { display: none !important; }
.myday-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; font-size: 15px; }
.myday-list li { padding: 8px 10px; border-left: 4px solid var(--navy); background: var(--chip); }
.myday-list li b { color: var(--navy); }

.moved-bar { background: var(--warn-bg); }