/* Watch Rota — the "Shift" look: bright for day shifts, deep blue for nights. Its own look, nothing borrowed from
   Adam's planners. A riding board: each person a name tile, each appliance a board of numbered seats. */

:root {
  --f-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 18px; --r-sm: 12px; --r-tile: 12px; --tile-h: 40px;
  --p1: #ff5a4e; --p2: #4b7bff; --alp: #6cb33f; --tru: #12a99c; --kit: #f08a24; --add: #8f7cf7;
  --rk-wm: #c8951b; --rk-cm: #d0611a; --rk-tcm: #a8692c; --rk-ff: #4d5b6a; --rk-aff: #2c8a4e;
  --chev-a: #ff5a4e; --chev-b: #ffc94a;
  --lv-bg: #dbe6ff; --lv-ink: #23408e; --tr-bg: #ece4ff; --tr-ink: #4a35a3; --sk-bg: #ffdcd6; --sk-ink: #9b1c12;
  --til-bg: #ffe7a3; --til-ink: #6b4b00; --off-bg: #e6e8ee; --off-ink: #4a5164; --dt-bg: #d9f2ee; --dt-ink: #0b5f5a;
  color-scheme: light;
}
body[data-mood="day"] {
  --bg: #f4f6fb; --deco: radial-gradient(900px 420px at 85% -10%, rgba(255,166,77,.26), transparent 60%), radial-gradient(700px 380px at 0% 0%, rgba(255,106,61,.10), transparent 60%);
  --panel: rgba(255,255,255,.9); --panel-2: #ffffff; --line: #e4e7f0; --ink: #1d2233; --ink-soft: #52596e; --muted: #7c8398;
  --slot: #eef1f8; --slot-line: #e2e6f0; --slot-shadow: inset 0 1px 3px rgba(30,40,80,.08);
  --tile: #ffffff; --tile-ink: #1d2233; --tile-sub: #6b7287; --tile-shadow: 0 6px 16px rgba(40,50,90,.10), 0 1px 2px rgba(40,50,90,.12);
  --accent: #ff6a3d; --accent-ink: #fff; --accent-soft: #fff0ea; --btn: #fff; --btn-ink: #1d2233; --btn-line: #dde2ee;
  --rail: #ffffff; --rail-ink: #8b91a5; --rail-on: #ff6a3d; --ok: #12a06a; --warn-bg: #fff4dd; --warn-ink: #7a5300; --warn-line: #f3d48d;
  --chip-shift-bg: linear-gradient(120deg, #ffb347, #ff6a3d); --chip-shift-ink: #fff; --pip-bg: #f0f2f8; --pip-ink: #52596e;
  --cell-day: #fff6e8; --cell-day-line: #f6dcb4; --cell-night: #eceefb; --cell-night-line: #d4d8f3; --focus: #ff6a3d;
  color-scheme: light;
}
body[data-mood="night"] {
  --bg: #0c1030; --deco: radial-gradient(800px 420px at 90% -10%, rgba(124,92,255,.32), transparent 60%), radial-gradient(600px 300px at 0% 10%, rgba(255,181,71,.10), transparent 60%);
  --panel: rgba(25,30,72,.82); --panel-2: #1b2150; --line: #2a3170; --ink: #eef0ff; --ink-soft: #b3b9e4; --muted: #8a92c8;
  --slot: #11163d; --slot-line: #232a63; --slot-shadow: inset 0 2px 6px rgba(0,0,0,.35);
  --tile: #232a63; --tile-ink: #f1f2ff; --tile-sub: #aab1e0; --tile-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 20px rgba(0,0,0,.35);
  --accent: #ffb547; --accent-ink: #1b1440; --accent-soft: rgba(255,181,71,.14); --btn: #1d2356; --btn-ink: #eef0ff; --btn-line: #343c86;
  --rail: #0a0d27; --rail-ink: #7d85bf; --rail-on: #ffb547; --ok: #5be3a4; --warn-bg: rgba(255,181,71,.12); --warn-ink: #ffd590; --warn-line: rgba(255,181,71,.4);
  --chip-shift-bg: linear-gradient(120deg, #5b3fd0, #8a5cff); --chip-shift-ink: #fff; --pip-bg: #2d3577; --pip-ink: #c9cdf2;
  --cell-day: #1f2550; --cell-day-line: #3a3f7c; --cell-night: #191d4a; --cell-night-line: #343b88; --focus: #ffb547;
  --off-bg: #2d3577; --off-ink: #c9cdf2;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; background: var(--deco); pointer-events: none; z-index: 0; }
#app, #toasts { position: relative; z-index: 1; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg.ic { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; }
.mono { font-family: var(--f-mono); }
.eyebrow { font: 500 11px/1.25 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.noscript { padding: 24px; }

/* the mark: two boards of seats */
.mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #ffb547, #ff6a3d); color: #1b1440; }
.mark svg { width: 26px; height: 26px; fill: currentColor; }
.mark.big { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px; }
.mark.big svg { width: 36px; height: 36px; }

/* buttons and chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 15px; border-radius: 12px; background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn-line); font-weight: 700; font-size: 14px; white-space: nowrap; text-decoration: none; transition: transform .08s, box-shadow .15s; }
.btn:hover { box-shadow: 0 4px 12px rgba(20,30,70,.10); }
.btn:active { transform: translateY(1px); }
.btn.go { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 10px; }
.btn.quiet { background: transparent; border-color: transparent; }
.btn.danger { color: #d33a2c; }
.btn[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.btn.big { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--btn-line); background: var(--btn); color: var(--btn-ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border-radius: 999px; font: 700 12.5px var(--f-ui); white-space: nowrap; }
.chip.shift { background: var(--chip-shift-bg); color: var(--chip-shift-ink); }
.chip.saved { color: var(--ok); box-shadow: inset 0 0 0 1.5px currentColor; }
.chip.todo { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1.5px var(--warn-line); }
.chip.soft { background: var(--pip-bg); color: var(--pip-ink); }
.chip.in-count { color: var(--ok); box-shadow: inset 0 0 0 1.5px currentColor; }
.chip.til-count { background: var(--til-bg); color: var(--til-ink); }

/* the frame: a rail on wide screens, a top bar and tab bar on phones */
.frame { display: grid; grid-template-columns: 88px 1fr; min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0; background: var(--rail); border-right: 1px solid var(--line); }
.rail .mark { margin-bottom: 14px; }
.nav { display: grid; justify-items: center; gap: 5px; width: 72px; padding: 9px 0; border: 0; border-radius: 14px; background: none; color: var(--rail-ink); font: 700 11px var(--f-ui); text-decoration: none; }
.nav svg { width: 22px; height: 22px; }
.nav.on { color: var(--rail-on); background: var(--accent-soft); }
.rail .me { margin-top: auto; }
.av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); font: 800 12px var(--f-ui); }
button.av { padding: 0; }
.topbar, .tabbar { display: none; }
.main { min-width: 0; padding: 24px 28px 40px; }
.view { max-width: 1320px; margin: 0 auto; display: grid; gap: 14px; }

/* page head */
.head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.head h1 { margin: 6px 0 0; font: 700 44px/1.04 var(--f-display); letter-spacing: -.025em; }
.head .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.head .acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.stepper { display: inline-flex; gap: 6px; vertical-align: middle; margin-left: 10px; }
.stepper .icon-btn { width: 34px; height: 34px; border-radius: 10px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(6px); }
.pad { padding: 14px 16px; }
.panel h2 { margin: 0; font: 700 17px var(--f-display); letter-spacing: -.01em; }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.warns { padding: 12px 14px; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); font-size: 13.5px; }
.warns ul { margin: 6px 0 0; padding-left: 18px; }

/* name tiles */
.tile { display: flex; align-items: center; gap: 9px; width: 100%; height: var(--tile-h); min-width: 0; padding: 0 10px 0 5px; background: var(--tile); color: var(--tile-ink); border: 0; border-radius: var(--r-tile); box-shadow: var(--tile-shadow); text-align: left; transition: transform .12s, box-shadow .15s; }
.tile b { font: 700 14.5px/1 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .rk { flex: 0 0 auto; display: grid; place-items: center; height: 27px; padding: 0 8px; border-radius: 8px; font: 500 11px var(--f-mono); color: #fff; background: var(--rk); }
.tile .x { margin-left: auto; display: inline-flex; gap: 4px; flex: 0 0 auto; }
.tile .x span { padding: 2px 6px; border-radius: 5px; font: 500 10.5px var(--f-mono); background: var(--pip-bg); color: var(--pip-ink); }
.tile .x .til { background: var(--til-bg); color: var(--til-ink); }
.tile .x .lv { background: var(--lv-bg); color: var(--lv-ink); }
.tile .x .tr { background: var(--tr-bg); color: var(--tr-ink); }
.tile .x .sk { background: var(--sk-bg); color: var(--sk-ink); }
.tile .x .dt { background: var(--dt-bg); color: var(--dt-ink); }
.tile .x .of { background: var(--off-bg); color: var(--off-ink); }
.tile .star { color: #f2b21b; }
.tile .star svg { fill: currentColor; }
.r-wm { --rk: var(--rk-wm); } .r-cm { --rk: var(--rk-cm); } .r-tcm { --rk: var(--rk-tcm); } .r-ff { --rk: var(--rk-ff); } .r-aff { --rk: var(--rk-aff); }
.tile.picked { transform: rotate(-1.6deg) translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.30), 0 0 0 2px var(--accent); position: relative; z-index: 2; }
.tile.dragging { opacity: .45; }
.tile.empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--slot-line); color: var(--muted); justify-content: center; font-size: 13px; }
.picking .slot.can { border: 2px dashed var(--accent); padding: 3px; }
.picking .slot.can .tile { box-shadow: var(--tile-shadow), 0 0 0 1px var(--accent); }
.picking .slot.cannot { opacity: .55; }
.slot.over { background: var(--accent-soft); border: 2px solid var(--accent); padding: 3px; }

/* who's in */
.work { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 14px; align-items: start; }
.tray { display: grid; gap: 12px; }
.grp { display: grid; gap: 6px; }
.grp .eyebrow { display: flex; justify-content: space-between; padding: 0 2px; }
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.whos-sum { display: flex; flex-wrap: wrap; gap: 6px; }

/* the appliances */
.boards { display: grid; gap: 12px; min-width: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.appl { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.appl::before { content: ""; display: block; height: 5px; background: repeating-linear-gradient(135deg, var(--chev-a) 0 9px, var(--chev-b) 9px 18px); }
.appl-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.cs { font: 700 25px/1 var(--f-display); letter-spacing: -.01em; color: var(--c); }
.p1 { --c: var(--p1); } .p2 { --c: var(--p2); }
.appl-h .meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.seats { list-style: none; margin: 0; padding: 4px 12px 12px; display: grid; gap: 7px; }
.seat { display: grid; grid-template-columns: 30px 74px minmax(0, 1fr); gap: 9px; align-items: center; }
.seat .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 500 13px var(--f-mono); color: #fff; background: var(--c); }
.seat .l { font: 500 10.5px/1.15 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.slot { min-width: 0; padding: 4px; border-radius: calc(var(--r-tile) + 4px); background: var(--slot); box-shadow: var(--slot-shadow); border: 1px solid var(--slot-line); }
.minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mini { min-width: 0; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.mini-h { display: flex; align-items: center; gap: 7px; margin: 1px 2px 8px; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.mini-h i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.mini .stack { display: grid; gap: 6px; }
.mini .tile { --tile-h: 34px; }
.mini .tile b { font-size: 13.5px; }
.mini .tile .rk { height: 24px; font-size: 10px; padding: 0 6px; }
.mini .none { padding: 6px 4px; font-size: 13px; color: var(--muted); }
.c-alp { --c: var(--alp); } .c-tru { --c: var(--tru); } .c-kit { --c: var(--kit); } .c-add { --c: var(--add); }
small.on-truck { margin-left: auto; font: 500 10.5px var(--f-mono); color: var(--tile-sub); }

.notes { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 10px; }
.note { padding: 12px 14px; min-width: 0; }
.note p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.note textarea { display: block; width: 100%; min-height: 64px; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--slot); color: var(--ink); resize: vertical; font-size: 14px; line-height: 1.45; }
.note .saving { float: right; font: 500 10.5px var(--f-mono); color: var(--muted); }
.absent { display: grid; gap: 6px; margin-top: 8px; font-size: 13.5px; }
.absent div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.absent span { font: 500 10.5px var(--f-mono); padding: 2px 7px; border-radius: 5px; text-transform: uppercase; }
.st-Leave { background: var(--lv-bg); color: var(--lv-ink); } .st-Training { background: var(--tr-bg); color: var(--tr-ink); }
.st-Sick { background: var(--sk-bg); color: var(--sk-ink); } .st-Detached { background: var(--dt-bg); color: var(--dt-ink); }
.st-Unavailable { background: var(--off-bg); color: var(--off-ink); } .st-TIL { background: var(--til-bg); color: var(--til-ink); }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--ink-soft); }
.foot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(18,160,106,.18); }
.foot .sp { margin-left: auto; }

.gap-top { margin-top: 10px; }
.eyebrow.gap-top { margin-top: 12px; }
.picking .mini.can { border: 2px dashed var(--accent); }
.picking .mini.cannot { opacity: .55; }

/* the empty state: no sheet yet */
.make { display: grid; gap: 14px; justify-items: start; padding: 26px; }
.make h2 { font-size: 22px; }
.make p { margin: 0; color: var(--ink-soft); max-width: 56ch; }
.make textarea { width: min(560px, 100%); min-height: 76px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--slot); color: var(--ink); resize: vertical; }

/* popover (status, ALP/TRU pickers, people editor) */
.scrim { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(8,10,30,.45); }
.sheet-pop { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.sheet-pop h3 { margin: 0 0 4px; font: 700 19px var(--f-display); }
.sheet-pop .sub { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--btn-line); background: var(--btn); color: var(--btn-ink); font-weight: 700; text-align: left; }
.opt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.opt i { width: 10px; height: 10px; border-radius: 3px; background: var(--dotc, var(--ok)); }
.field { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.field input, .field select, .field textarea { min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--slot); color: var(--ink); font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.row > * { flex: 1 1 140px; }
.pop-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.check { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid var(--btn-line); border-radius: 10px; background: var(--btn); font-weight: 700; font-size: 13.5px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.pick-list { display: grid; gap: 6px; margin-top: 8px; }
.linkbox { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--slot); border: 1px dashed var(--accent); font: 500 12.5px/1.45 var(--f-mono); word-break: break-all; }

/* month */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.dow { padding: 0 4px; color: var(--muted); font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.cell { min-height: 96px; padding: 8px 9px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-align: left; color: var(--ink); }
button.cell:hover { box-shadow: 0 6px 16px rgba(20,30,70,.12); }
.cell .dn { font-weight: 800; font-size: 14px; }
.cell.out { opacity: .55; }
.cell.d { background: var(--cell-day); border-color: var(--cell-day-line); }
.cell.n { background: var(--cell-night); border-color: var(--cell-night-line); }
.cell .sh { display: block; margin-top: 4px; font-weight: 800; font-size: 13px; }
.cell .st { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 2px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 800; }
.st.made { background: rgba(18,160,106,.12); color: var(--ok); }
.st.tomake { background: var(--accent); color: var(--accent-ink); }
.st.later { color: var(--muted); padding-left: 0; }
.cell .by { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell.today { box-shadow: inset 0 0 0 2px var(--ink); }
.cell .tod { float: right; padding: 0 6px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 500 10px var(--f-mono); letter-spacing: .06em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--ink-soft); font-size: 12.5px; font-weight: 700; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 4px; vertical-align: -1px; }
.shift-list { display: none; }

/* fairness */
.fair { display: grid; gap: 8px; }
.fair-row { display: grid; grid-template-columns: 220px repeat(5, minmax(0, 1fr)) 120px; gap: 10px; align-items: center; padding: 10px 14px; }
.fair-row.head-row { padding-top: 0; padding-bottom: 0; }
.fair-row .who b { display: block; font-size: 14.5px; }
.fair-row .who span { font: 500 11px var(--f-mono); color: var(--muted); }
.bar { position: relative; height: 26px; border-radius: 8px; background: var(--slot); overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c, var(--accent)); opacity: .85; border-radius: 8px; }
.bar span { position: relative; display: block; padding: 0 8px; font: 500 12px/26px var(--f-mono); color: var(--ink); }
.k { font: 500 12.5px var(--f-mono); color: var(--ink-soft); white-space: nowrap; }

/* people */
.people { display: grid; gap: 8px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 11px 14px; }
.prow .nm { font-weight: 800; font-size: 15px; }
.prow .nm small { margin-left: 6px; font: 500 11px var(--f-mono); color: var(--muted); }
.prow .skills { display: flex; flex-wrap: wrap; gap: 5px; grid-column: 1; }
.prow .skills span { padding: 1px 7px; border-radius: 6px; background: var(--pip-bg); color: var(--pip-ink); font: 500 11px var(--f-mono); }
.prow .acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.role { padding: 2px 8px; border-radius: 6px; font: 700 11.5px var(--f-ui); }
.role.wm { background: var(--accent); color: var(--accent-ink); }
.role.cm { background: var(--pip-bg); color: var(--pip-ink); }
.role.owner { background: var(--til-bg); color: var(--til-ink); }

/* changes */
.acts-list { list-style: none; margin: 0; padding: 0; }
.acts-list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.acts-list li:first-child { border-top: 0; }
.acts-list .t { font: 500 12px var(--f-mono); color: var(--muted); padding-top: 2px; }

/* settings */
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.routine-day { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: start; margin-top: 8px; }
.routine-day span { font-weight: 800; font-size: 13px; padding-top: 10px; }
.routine-day textarea { min-height: 72px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--slot); color: var(--ink); resize: vertical; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 700; }
.toggle:first-of-type { border-top: 0; }
.toggle input { width: 20px; height: 20px; accent-color: var(--accent); }

/* the gate: open your link */
.gate { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.gate-card { position: relative; z-index: 1; width: min(420px, 100%); padding: 30px 26px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; }
.gate-card h1 { margin: 0 0 6px; font: 700 26px var(--f-display); }
.gate-card p { margin: 6px 0 0; color: var(--ink-soft); }
.gate-card .btn { margin-top: 16px; }

/* toasts */
#toasts { position: fixed; z-index: 60; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; width: min(520px, calc(100% - 24px)); pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 14px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.25); font-weight: 700; font-size: 14px; pointer-events: auto; }
.toast.bad { border-color: #e2554a; }
.toast.ok { border-color: var(--ok); }
.loading { padding: 60px 0; text-align: center; color: var(--muted); }
.offline { padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; font-weight: 700; }

/* narrower screens */
@media (max-width: 1240px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .tray .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
}
@media (max-width: 1060px) {
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes { grid-template-columns: minmax(0, 1fr); }
  .fair-row { grid-template-columns: 170px repeat(5, minmax(0, 1fr)) 100px; }
}
@media (max-width: 900px) {
  .frame { display: block; padding-bottom: 76px; }
  .rail { display: none; }
  .topbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px 4px; }
  .topbar .mark { width: 34px; height: 34px; border-radius: 10px; }
  .topbar .mark svg { width: 20px; height: 20px; }
  .topbar .w { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
  .topbar .sp { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  .tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(var(--tabs, 4), 1fr); padding: 8px 8px max(10px, env(safe-area-inset-bottom)); background: var(--rail); border-top: 1px solid var(--line); }
  .tabbar .nav { width: auto; }
  .main { padding: 8px 14px 30px; }
  .head h1 { font-size: 32px; }
  .head .acts { margin-left: 0; width: 100%; }
  .head .acts .btn { flex: 1 1 auto; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .seat { grid-template-columns: 30px 62px minmax(0, 1fr); }
  .month { display: none; }
  .shift-list { display: grid; gap: 8px; }
  .shift-list .cell { min-height: 0; display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; }
  .fair-row { grid-template-columns: 1fr; gap: 6px; }
  .fair-row.head-row { display: none; }
  .fair-row .bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .set-grid { grid-template-columns: minmax(0, 1fr); }
  .acts-list li { grid-template-columns: 1fr; gap: 2px; }
}
@media (min-width: 901px) { .fair-row .bars { display: contents; } }
@media (max-width: 420px) {
  .minis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .opts { grid-template-columns: minmax(0, 1fr); }
}

/* fixes after the first look at the real screens */
.stepper { font-size: 16px; }
.stepper .icon-btn svg { width: 18px; height: 18px; }
a.cell, a.chip, a.nav { text-decoration: none; }
.cell.d { box-shadow: inset 4px 0 0 #ffb547; }
.cell.n { box-shadow: inset 4px 0 0 #8a5cff; }
.cell.today.d { box-shadow: inset 4px 0 0 #ffb547, inset 0 0 0 2px var(--ink); }
.cell.today.n { box-shadow: inset 4px 0 0 #8a5cff, inset 0 0 0 2px var(--ink); }
.legend i.lg-d { background: #ffb547; }
.legend i.lg-n { background: #8a5cff; }
.tray .whos-sum, .tray .tray-toggle { display: none; }
@media (max-width: 900px) {
  .tray .whos-sum { display: flex; }
  .tray .tray-toggle { display: inline-flex; justify-self: start; }
  .tray:not(.open) .grp, .tray:not(.open) .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { body { display: none; } }

/* Wrexham's station welcome and shared-computer sign-in. */
.welcome{max-width:1440px;margin:auto;padding:28px 38px 32px;color:#142e31;background:#f5f7f4;min-height:100vh}
.welcome-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.welcome-top img{width:auto;max-width:55%;height:86px;object-fit:contain}.welcome-top>span{font-size:13px;font-weight:800;letter-spacing:.15em;text-align:right}.welcome-live{display:block;margin-top:7px;font-size:10px;color:#497868;letter-spacing:.12em}
.welcome-layout{display:grid;grid-template-columns:1.12fr 1fr;border-radius:24px;overflow:hidden;background:white;box-shadow:0 8px 40px #183c2912;min-height:640px}.welcome-hero{position:relative;background:#163935;min-height:520px;overflow:hidden}.station-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.welcome-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#102b3b16 10%,#0b292cf2 90%)}.welcome-hero-copy{position:absolute;bottom:42px;left:38px;right:32px;z-index:1;color:white}.welcome-kicker{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:800;color:#4a7f6c}.welcome-hero .welcome-kicker{color:#b8e2ce}.welcome-hero h1{font-size:clamp(30px,3.4vw,48px);line-height:1.1;margin:15px 0 22px;letter-spacing:-.04em}.welcome-hero p{font-size:17px;line-height:1.6;color:#e2eee7}.welcome-address{display:block;font-size:11px;letter-spacing:.1em;margin-top:36px;color:#c2d9ce}.welcome-signin{padding:40px 36px}.welcome-signin h2{font-size:30px;letter-spacing:-.04em;margin:10px 0}.welcome-signin>p{font-size:14px;line-height:1.6;color:#627575}.manager-grid{display:grid;gap:10px;margin-top:24px}.manager-choice{display:flex;align-items:center;gap:14px;padding:15px 14px;border:1px solid #dce6df;border-radius:13px;text-align:left;background:#fff;color:#183c36;cursor:pointer;width:100%;transition:background .15s,transform .15s}.manager-choice:hover{background:#edf5ef;transform:translateX(3px);border-color:#7ca58d}.manager-choice:focus-visible{outline:3px solid #368d6b;outline-offset:3px}.manager-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex-shrink:0;background:#e8f1eb;font-size:13px;font-weight:800}.manager-choice b{display:block;font-size:15px}.manager-choice small{display:block;margin-top:5px;font-size:11px;color:#6b7c75}.manager-arrow{margin-left:auto;font-size:23px;color:#3e745c}.welcome-audit{border-top:1px solid #e2e9e4;padding-top:18px;margin-top:24px;font-size:12px!important}.welcome-footer{display:flex;align-items:center;gap:24px;padding-top:24px;color:#3e5f52}.welcome-footer img{width:220px;height:80px;object-fit:cover;border-radius:12px}.welcome-footer b{font-size:14px}.welcome-footer p{font-size:12px;margin:7px 0}.welcome-footer a{font-size:10px;color:#6c8075;text-decoration:underline}.sheet-pop pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f1f3f7;color:#1b2340;padding:12px;max-height:180px;overflow:auto}.sheet-pop textarea[data-review-field]{width:100%;min-height:110px}
@media(max-width:760px){.welcome{padding:18px 16px 28px}.welcome-top{margin-bottom:18px}.welcome-top img{width:auto;height:72px}.welcome-top>span{font-size:10px}.welcome-live{font-size:8px}.welcome-layout{grid-template-columns:1fr}.welcome-hero{min-height:310px}.welcome-hero-copy{left:26px;bottom:26px}.welcome-hero h1{font-size:34px;margin:10px 0}.welcome-hero p{font-size:14px;margin:12px 0}.welcome-address{margin-top:18px}.welcome-signin{padding:28px 24px}.welcome-signin h2{font-size:28px}.welcome-footer{align-items:flex-start;gap:14px}.welcome-footer img{width:110px;height:88px}.welcome-footer p{line-height:1.5}}

/* One palette across pages. Only the selected shift or Appearance changes it. */
.appearance-bar { display: flex; justify-content: flex-end; }
.appearance-control { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.appearance-control select { min-height: 40px; max-width: 150px; border: 1px solid var(--btn-line); border-radius: 10px; padding: 6px 10px; background: var(--btn); color: var(--btn-ink); }
.welcome { color: var(--ink); background: var(--bg); }
.welcome-layout { background: var(--panel-2); }
.welcome-tools { display: grid; justify-items: end; gap: 12px; text-align: right; }
.welcome-tools > span { font-size: 13px; font-weight: 800; letter-spacing: .15em; }
.welcome-top img { background: white; border-radius: 12px; padding: 6px; }
.welcome-live, .welcome-kicker, .welcome-footer, .welcome-signin > p, .manager-choice small, .welcome-footer a { color: var(--ink-soft); }
.manager-choice { border-color: var(--line); background: var(--tile); color: var(--tile-ink); }
.manager-choice:hover { background: var(--accent-soft); border-color: var(--accent); }
.manager-choice:focus-visible { outline-color: var(--focus); }
.manager-avatar { background: var(--pip-bg); color: var(--pip-ink); }
.manager-arrow { color: var(--accent); }
.welcome-audit { border-color: var(--line); }
.sheet-pop pre { background: var(--slot); color: var(--ink); }
@media(max-width:760px) { .welcome-tools > span { font-size: 10px; } .welcome-top { align-items: flex-start; gap: 10px; } .welcome-tools .appearance-control { display: grid; justify-items: end; gap: 4px; font-size: 11px; } .appearance-control select { max-width: 140px; } }

/* Password access uses the same appearance as every rota page. */
.welcome-brand { display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:800; letter-spacing:.12em; text-decoration:none; }
.welcome-brand small { display:block; margin-top:6px; color:var(--ink-soft); font-size:10px; letter-spacing:.15em; }
.welcome-brand .mark { margin:0; }
.welcome-hero { background:#151719; }
.welcome-hero:after { background:linear-gradient(180deg,transparent 5%,#111318cc 90%); }
.welcome-hero .welcome-kicker { color:#ffe1ba; }
.welcome-hero p { color:#f5eeee; }
.auth-submit { width:100%; justify-content:center; margin-top:18px; min-height:46px; }
.auth-error { color:var(--danger, #b42318); min-height:1.4em; font-size:13px; line-height:1.5; margin:14px 0 0; overflow-wrap:anywhere; }
body[data-mood="night"] .auth-error { color:#ffb6ac; }
.login-help { margin-top:24px; font-size:13px; line-height:1.6; color:var(--ink-soft); }
.login-help summary { cursor:pointer; padding:8px 0; font-weight:700; }
.welcome-signin input { width:100%; min-width:0; }
.welcome-layout > * { min-width:0; }
@media(max-width:760px) { .welcome-brand { font-size:12px; gap:8px; } .welcome-brand small { font-size:8px; } .welcome-hero { min-height:280px; } }