/* A time clock on a phone: one big action within thumb reach, soft cards, numbers in tabular figures. */
:root {
  --bg: #0a0c0f;
  --card: #14181d;
  --raised: #1c2128;
  --today-bg: #1f3540;
  --glass: rgb(20 24 29 / 0.8);
  --ink: #f1f4f8;
  --muted: #98a3b3;
  --line: #262c35;
  --accent: #34d399;
  --accent-2: #22d3ee;
  --accent-soft: #123327;
  --on-accent: #03140d;
  --go: #34d399;
  --stop: #f87171;
  --warn: #fbbf24;
  --warn-bg: #33270d;
  --mine: #123327;
  --filled: #34d399;
  --filled-bg: #11291f;
  --partial: #fbbf24;
  --partial-bg: #33270d;
  --empty: #f87171;
  --empty-bg: #361717;
  --bar: #4ade80;
  --bar-bg: #12301f;
  --kitchen: #b3a1ff;
  --kitchen-bg: #251f45;
  --hero: linear-gradient(140deg, #064e3b 0%, #0c4a5e 100%);
  --hero-on: linear-gradient(140deg, #047857 0%, #0e7490 100%);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px rgb(0 0 0 / 0.35);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f5f7;
  --card: #ffffff;
  --raised: #f4f5f7;
  --today-bg: #d9f0f6;
  --glass: rgb(255 255 255 / 0.82);
  --ink: #101418;
  --muted: #5b6573;
  --line: #e3e6ea;
  --accent: #047857;
  --accent-2: #0e7490;
  --accent-soft: #dff5ec;
  --on-accent: #ffffff;
  --go: #047857;
  --stop: #c62828;
  --warn: #92500a;
  --warn-bg: #fdf0d8;
  --mine: #dff5ec;
  --filled: #0f7a55;
  --filled-bg: #e3f6ee;
  --partial: #c77700;
  --partial-bg: #fdf0d8;
  --empty: #d03a30;
  --empty-bg: #fde8e6;
  --bar: #047857;
  --bar-bg: #dff5ec;
  --kitchen: #5b3fc4;
  --kitchen-bg: #ece8fb;
  --hero: linear-gradient(140deg, #059669 0%, #0e7490 100%);
  --hero-on: linear-gradient(140deg, #10b981 0%, #0891b2 100%);
  --shadow: 0 1px 2px rgb(16 20 24 / 0.05), 0 8px 24px rgb(16 20 24 / 0.06);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.45 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent); }

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(112px + env(safe-area-inset-bottom));
}
.page.narrow { max-width: 420px; padding-top: calc(48px + env(safe-area-inset-top)); padding-bottom: 32px; display: flex; flex-direction: column; gap: 20px; }
.page.is-wide { max-width: 1100px; }
/* After a swipe the new tab slides in from the side the finger came from. Vertical scrolling stays the browser's. */
main.page:not(.narrow) { touch-action: pan-y pinch-zoom; }
#app { overflow-x: clip; }
/* The next tab, drawn ahead, riding beside the page under the finger during a swipe. */
.swipe-panel { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.page.slide-from-right { animation: slide-from-right 200ms ease-out; }
.page.slide-from-left { animation: slide-from-left 200ms ease-out; }
@keyframes slide-from-right { from { opacity: 0.35; transform: translateX(40%); } }
@keyframes slide-from-left { from { opacity: 0.35; transform: translateX(-40%); } }
@media (prefers-reduced-motion: reduce) { .page.slide-from-right, .page.slide-from-left { animation: none; } }
.brand {
  align-self: flex-start;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.stack { display: flex; flex-direction: column; gap: 14px; }
.muted { color: var(--muted); }
.help { color: var(--muted); font-size: 14px; }

.card {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.card > h3 { margin-bottom: 6px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 13px;
  font: 600 15px/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 6px 16px rgb(16 185 129 / 0.25);
}
.btn.danger { background: transparent; color: var(--stop); border-color: var(--stop); }
.btn.link { border-color: transparent; background: transparent; color: var(--accent); box-shadow: none; }
.btn.wide { width: 100%; }
.btn.small { min-height: 36px; padding: 6px 12px; border-radius: 10px; font-size: 14px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { color: var(--muted); font-weight: 600; font-size: 13px; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 13px;
  font: 400 16px var(--font);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { display: block; resize: vertical; line-height: 1.4; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-error { color: var(--stop); font-weight: 600; }
.notice { padding: 12px 14px; background: var(--warn-bg); color: var(--warn); border-radius: 13px; font-weight: 500; }
.warn { display: block; color: var(--warn); font-size: 13px; font-weight: 600; }
.is-on { color: var(--go); font-weight: 600; }

/* Clock: the one thing a worker does every day, so it gets the whole top of the screen. */
.clock {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 22px 18px 18px;
  background: var(--hero);
  color: #ffffff;
  border-radius: 24px;
  box-shadow: var(--shadow);
  text-align: center;
}
.clock.is-working { background: var(--hero-on); box-shadow: 0 12px 32px rgb(16 185 129 / 0.3); }
.clock-status { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; opacity: 0.9; }
.clock.is-working .clock-status::before { content: ""; width: 9px; height: 9px; background: #ffffff; border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .clock.is-working .clock-status::before { animation: none; } .btn { transition: none; } }
.timer { font-size: 54px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.clock-btn { min-height: 72px; margin-top: 8px; border: 0; border-radius: 18px; font-size: 22px; font-weight: 800; box-shadow: 0 8px 20px rgb(0 0 0 / 0.18); }
.clock-btn.go { background: #ffffff; color: #065f46; }
.clock-btn.stop { background: #ffffff; color: #b91c1c; }

/* Numbers */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 3px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.small-value .stat-value { font-size: 15px; font-weight: 600; }
.stat-sub { color: var(--accent); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.next-shift { background: var(--accent-soft); border-color: transparent; }
.headline { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
.headline-value {
  align-self: flex-start;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pager { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 8px; text-align: center; }
.pager h2 { font-size: 18px; }
.pager > .btn { min-height: 46px; padding: 0; border-radius: 50%; font-size: 24px; line-height: 1; }
.pager-title { display: flex; flex-direction: column; align-items: center; font-size: 14px; }

/* Lists */
.rows > li + li { border-top: 1px solid var(--line); }
.row, .person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 0;
  color: inherit;
  text-decoration: none;
}
.row-button { min-height: 46px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.row-main { display: block; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.row-sub { display: block; color: var(--muted); font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
.row-sub.is-on { color: var(--go); font-weight: 600; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; }
.row-kind { display: block; font-size: 14px; font-weight: 700; }
.row-kind.unavailable { color: var(--stop); }
.row-kind.preferred { color: var(--go); }
.row-amount { flex: none; max-width: 50%; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.back { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding-right: 12px; font-weight: 600; text-decoration: none; }
.rows > li.is-today .row-main { color: var(--accent); font-weight: 700; }

/* A day shown in full */
.day.is-today { border-color: var(--accent); }
.day-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.day-head > .btn { flex: none; white-space: nowrap; }
.day-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.day-title h3 { font-size: 18px; }
.badge { padding: 3px 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); border-radius: 999px; font-size: 12px; font-weight: 700; }
.day.is-past .day-title h3 { color: var(--muted); }
.day.is-past .shift, .day.is-past .mark { opacity: 0.6; }
.day.is-closed { background: var(--raised); }

/* The month's name and arrows stay at the top of the screen while the page scrolls under them. */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 -16px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.shifts, .marks { display: flex; flex-direction: column; gap: 6px; }
.marks { margin-top: 6px; }
.shift, .mark {
  display: block;
  width: 100%;
  padding: 9px 11px;
  background: var(--raised);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  text-align: left;
}
button.shift, button.mark { cursor: pointer; }
.shift.is-mine { background: var(--mine); }
.shift-time { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.shift-name { display: block; overflow-wrap: anywhere; }
.mark { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; border: 1px dashed var(--line); font-size: 14px; }
.mark-kind { font-weight: 700; }
.mark.unavailable { background: var(--empty-bg); border-color: transparent; }
.mark.unavailable .mark-kind { color: var(--stop); }
.mark.preferred .mark-kind { color: var(--go); }
.mark .row-sub { width: 100%; }

/* Shifts a worker asked for, until the administrator confirms them. */
.shift.is-pending { background: var(--partial-bg); border: 1px dashed var(--partial); }
.pending-text { display: block; color: var(--warn); font-size: 13px; font-weight: 700; }
.requests { border-color: var(--partial); }
.request { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 0; }
.request-actions { display: flex; gap: 8px; }

/* Two columns: bar left, kitchen right. Lines stack to fit a phone. */
.columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.column { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.column.card { padding: 12px; }
.columns .person, .columns .row { flex-direction: column; align-items: flex-start; gap: 2px; }
.columns .row-amount { max-width: none; text-align: left; }
.columns .cover-group + .cover-group { margin-top: 0; }
.columns .cover-group { min-width: 0; }
.columns .shift, .columns .mark { padding: 8px 10px; }
@media (min-width: 700px) {
  .columns { gap: 14px; }
  .columns .person, .columns .row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .columns .row-amount { text-align: right; }
}

/* Calendar */
.open-count { padding: 11px 14px; border-radius: 14px; font-weight: 700; }
.open-count.has-open { background: var(--empty-bg); color: var(--empty); }
.open-count.all-covered { background: var(--filled-bg); color: var(--filled); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13px; }
.legend li { display: flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 4px; }
.swatch.bar { background: var(--bar); }
.swatch.kitchen { background: var(--kitchen); }
.swatch.has-shift { background: var(--accent); }
.swatch.has-pending { background: var(--partial-bg); border: 1.5px dashed var(--partial); }
.swatch.has-off { background: var(--empty); }
.swatch.needs-people { background: var(--empty); border-radius: 50%; }
.swatch.partly-filled { background: var(--partial); border-radius: 50%; }
.swatch.fully-filled { border: 2px solid var(--filled); }

/* Closed days: diagonal stripes, so they read differently from the shift colours. */
.closed-note { padding: 10px 12px; background: var(--raised); border-left: 4px solid var(--muted); border-radius: 12px; overflow-wrap: anywhere; }
.closed-swatch, .cell.is-closed { background: repeating-linear-gradient(45deg, var(--line) 0 3px, transparent 3px 7px); }
.closed-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--line); border-radius: 4px; }
.cell-closed { color: var(--muted); font-size: 10px; font-weight: 700; text-align: center; }
.closed-action { color: var(--accent); font-size: 14px; }

.holiday-list { display: flex; flex-direction: column; gap: 2px; max-height: 42dvh; overflow-y: auto; }
.holiday { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-weight: 500; }
.holiday.is-done { padding-left: 34px; color: var(--muted); }

.cover-group + .cover-group { margin-top: 10px; }
.group-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 6px;
  padding: 4px 10px 4px 2px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  font: 700 15px var(--font);
  cursor: pointer;
}
.group-toggle::before { content: ""; width: 9px; height: 9px; margin-right: 7px; background: var(--muted); border-radius: 50%; }
[data-column="bar"] > .group-toggle::before { background: var(--bar); }
[data-column="kitchen"] > .group-toggle::before { background: var(--kitchen); }
.group-toggle.is-current { padding-left: 10px; background: var(--accent-soft); color: var(--accent); }
.covers { display: flex; flex-direction: column; gap: 8px; }
/* One shift of the day: hours and a status pill on top, who works in large type below. */
.cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  padding: 11px 12px 12px;
  background: var(--raised);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit;
  text-align: left;
}
button.cover { cursor: pointer; transition: transform 0.08s ease; }
button.cover:active { transform: scale(0.98); }
.cover.partial { background: var(--partial-bg); }
.cover.empty { background: transparent; border: 1.5px dashed var(--empty); }
.cover.is-past { opacity: 0.55; }
.cover-main { display: contents; }
.cover-time { color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.cover .row-sub { grid-column: 1 / -1; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.cover.empty .row-sub { color: var(--muted); font-weight: 500; }
.cover .warn { grid-column: 1 / -1; }
.cover-state { grid-column: 2; grid-row: 1; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cover.filled .cover-state { background: var(--filled-bg); color: var(--filled); }
.cover.partial .cover-state { background: var(--card); color: var(--partial); }
.cover.empty .cover-state { background: var(--empty-bg); color: var(--empty); }
.cover.closed .cover-state { color: var(--muted); font-weight: 500; }

/* A month of days. Each day is a soft tile; today's date sits in a filled circle. */
/* Phones show the month and then the chosen day under it. A landscape tablet or a computer puts them side by side,
   with the chosen day staying in view while the month scrolls. */
.month-and-day, .month-side, .day-side { display: contents; }
@media (orientation: landscape) and (min-width: 900px) {
  .month-and-day { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 16px; align-items: start; }
  .month-side, .day-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .day-side { position: sticky; top: 96px; max-height: calc(100dvh - 96px - 112px); overflow-y: auto; }
}
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 760px; margin: 0 auto; }
.weekday { padding-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; }
.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 66px;
  padding: 5px 2px;
  background: var(--card);
  color: var(--ink);
  border: 0;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
}
div.cell { cursor: default; }
.cell-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cell.is-today .cell-date { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.cell.is-outside { background: transparent; }
.cell.is-outside .cell-date { color: var(--muted); font-weight: 500; }
.cell.is-past > * { opacity: 0.45; }
.cell.is-selected { box-shadow: inset 0 0 0 2px var(--accent); }

/* A worker's own month: days they work are filled in. */
.my-cell.has-shift { background: var(--accent-soft); }
.my-cell.has-pending { background: var(--partial-bg); box-shadow: inset 0 0 0 1.5px var(--partial); }
.my-cell.has-off { background: var(--empty-bg); }
.cell-shift { display: flex; flex-direction: column; align-items: center; color: var(--accent); font-size: 11px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cell-shift.is-pending { color: var(--warn); }
.cell-off { color: var(--empty); font-size: 11px; font-weight: 700; }

/* The team's month: each day lists who works, as small chips in the group's colour. */
.team-cell { align-items: stretch; min-height: 88px; padding: 4px 3px 5px; }
.cell-name {
  display: block;
  overflow: hidden;
  padding: 1px 4px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-name.bar { background: var(--bar-bg); color: var(--bar); }
.cell-name.kitchen { background: var(--kitchen-bg); color: var(--kitchen); }
.cell-name.none { background: var(--raised); color: var(--muted); }
.cell-name.bar.is-mine { background: var(--bar); color: var(--on-accent); font-weight: 800; }
.cell-name.kitchen.is-mine { background: var(--kitchen); color: var(--card); font-weight: 800; }
.cell-name.is-pending, .cell-name.is-pending.is-mine { background: transparent; color: var(--warn); box-shadow: inset 0 0 0 1px var(--partial); font-style: italic; font-weight: 600; }
/* A day that still needs people gets a dot in its corner: orange when partly filled, red with nobody. */
.team-cell.partly-filled::after, .team-cell.needs-people::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.team-cell.partly-filled::after { background: var(--partial); }
.team-cell.needs-people::after { background: var(--empty); }
.team-cell.needs-people { background: var(--empty-bg); }

/* Bottom tabs: a rounded bar floating above the page. */
.tabs {
  position: fixed;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 12px;
  z-index: 6;
  display: flex;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 5px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px 5px;
  color: var(--muted);
  border-radius: 19px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tab .icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab.is-current { background: var(--accent-soft); color: var(--accent); }
.tab { position: relative; }
.tab-count {
  position: absolute;
  top: 2px;
  left: calc(50% + 5px);
  min-width: 18px;
  padding: 0 5px;
  background: var(--stop);
  color: var(--bg);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
}
.tab-count[hidden] { display: none; }

/* Six tabs have to fit a small phone, so the labels shrink a little with the screen. */
.tab { min-width: 0; padding-right: 0; padding-left: 0; font-size: clamp(10px, 3vw, 12px); white-space: nowrap; }

/* Reservations: each day shows how many people are expected, and the times. */
.booking-cell { align-items: stretch; min-height: 88px; padding: 4px 3px 5px; }
.booking-cell.has-bookings { border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.booking-cell.is-today:not(.is-closed) { background: var(--today-bg); }
.cell-people { display: flex; justify-content: center; align-items: center; gap: 2px; color: var(--accent); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cell-people .icon { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.booking-chip { padding: 1px 0; background: var(--raised); color: var(--ink); font-size: 10px; letter-spacing: -0.02em; text-align: center; text-overflow: clip; font-variant-numeric: tabular-nums; }
.booking { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 0; overflow-wrap: anywhere; }
.booking:first-child { padding-top: 4px; }
.booking:last-child { padding-bottom: 0; }
.booking-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; }
.booking-time { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.booking-people { padding: 2px 10px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; font-size: 14px; font-weight: 700; }
.booking-note { align-self: stretch; margin: 6px 0 0; padding: 8px 10px; background: var(--warn-bg); color: var(--ink); border-radius: 10px; white-space: pre-wrap; }
.booking-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin-top: 6px; }
.booking-foot .btn { flex: none; }

/* Shopping list: what each group needs, and picking from its saved items. */
.shop-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; }
.shop-name { min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.shop-tick {
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--raised);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 50%;
  font: 700 18px var(--font);
  cursor: pointer;
}
.shop-tick:hover { border-color: var(--accent); }
/* On the narrowest phones, more room for the name so words stay whole. */
@media (max-width: 350px) {
  .shop-row { gap: 6px; }
  .shop-name { font-size: 14px; }
  .shop-tick { width: 32px; height: 32px; font-size: 15px; }
}
.picker-title:focus { outline: none; }
.picker-list { display: flex; flex-direction: column; gap: 8px; }
.picker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 0;
  background: none;
  color: inherit;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.picker-state { flex: none; color: var(--muted); font-size: 18px; font-weight: 700; }
.picker-row.is-on-list .picker-state { color: var(--accent); font-size: 14px; }
.picker-manage { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; padding: 8px 0; }
.picker-manage .row-main { flex: 1 1 100%; }
.picker-heading { margin-top: 8px; color: var(--muted); font-size: 14px; }

/* Message board */
.message { padding: 12px 0; }
.message:first-child { padding-top: 0; }
.message:last-child { padding-bottom: 0; }
.message-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.message-name { font-weight: 700; overflow-wrap: anywhere; }
.message-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message .btn.link { min-height: 36px; margin-top: 4px; padding: 0; color: var(--muted); font-size: 14px; font-weight: 500; }

/* Dialogs */
.dialog {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 20px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}
.dialog::backdrop { background: rgb(5 8 12 / 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog form { display: flex; flex-direction: column; gap: 12px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.confirm-text { margin-bottom: 14px; font-size: 17px; }

.toast {
  position: fixed;
  right: 16px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  left: 16px;
  z-index: 10;
  max-width: 488px;
  margin: 0 auto;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-weight: 600;
}

/* Day tiles get a thin border in the colour of what the day holds. */
.cell { border: 1px solid var(--line); }
.cell.is-outside { border-color: transparent; }
.cell.is-today { border-color: var(--accent); }
.team-cell.partly-filled { border-color: var(--partial); border-color: color-mix(in srgb, var(--partial) 55%, transparent); }
.team-cell.needs-people { border-color: var(--empty); border-color: color-mix(in srgb, var(--empty) 60%, transparent); }
.team-cell.fully-filled { border-color: var(--filled); }
.my-cell.has-shift { border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.my-cell.has-pending { border: 1px dashed var(--partial); box-shadow: none; }
.my-cell.has-off { border-color: var(--empty); border-color: color-mix(in srgb, var(--empty) 60%, transparent); }
.cell.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* In the team's month, green means filled, so today and the tapped day take the colour of how full the day is. */
.team-cell { --day-ring: var(--muted); }
.team-cell.partly-filled { --day-ring: var(--partial); }
.team-cell.needs-people { --day-ring: var(--empty); }
.team-cell.fully-filled { --day-ring: var(--filled); }
.team-cell.is-today { border-color: var(--day-ring); }
.team-cell.is-selected { border-color: var(--day-ring); box-shadow: 0 0 0 2px var(--day-ring); }
.team-cell.is-today:not(.is-closed) { background: var(--today-bg); }
/* Keeps the corner dot clear of today's round number on a narrow phone. */
.team-cell.is-today::after { top: 4px; right: 4px; }

/* In a narrow column the status pill drops under the hours instead of squeezing them onto two lines. */
.cover { display: flex; flex-wrap: wrap; }
.cover-time { flex: 1 0 auto; order: 0; white-space: nowrap; }
.cover-state { order: 1; }
.cover .row-sub { flex: 0 0 100%; order: 2; }
.cover .warn { flex: 0 0 100%; order: 3; }
.cover-ask { flex: 0 0 100%; order: 4; color: var(--accent); font-size: 13px; font-weight: 700; }

/* Printing (administrator only): a plain black-and-white A4 sheet drawn just for the printer. */
.print-row { display: flex; justify-content: flex-end; }
.print-sheet { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; }
  body.printing > :not(.print-sheet) { display: none !important; }
  .print-sheet { display: block; color: #000; font: 9.5pt/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
  .print-sheet header { display: flex; justify-content: space-between; align-items: baseline; gap: 8mm; border-bottom: 1.5pt solid #000; margin-bottom: 3mm; padding-bottom: 1.5mm; }
  .print-sheet h1 { font-size: 15pt; margin: 0; }
  .print-sheet header span { font-size: 8pt; color: #444; white-space: nowrap; }
  .print-sheet h2 { font-size: 12pt; margin: 0 0 2mm; }
  .print-sheet table { width: 100%; border-collapse: collapse; }
  .print-sheet th, .print-sheet td { border: 0.75pt solid #888; padding: 1mm 1.8mm; text-align: left; vertical-align: top; }
  .print-sheet th { border-bottom: 1.5pt solid #000; }
  .print-sheet tr { break-inside: avoid; }
  .print-sheet .is-weekend td.date { font-weight: 700; }
  .print-sheet .is-closed td, .print-closed { color: #555; font-style: italic; }
  .print-shifts td.date { width: 14mm; white-space: nowrap; }
  .print-person { white-space: nowrap; }
  .print-person + .print-person::before { content: " · "; }
  .print-gap { display: block; font-weight: 700; }
  .print-gap::before { content: "⚠ "; }
  .print-sheet .summary { margin: 0 0 2mm; font-weight: 600; }
  .print-bookings td.time, .print-bookings td.people { width: 12mm; white-space: nowrap; font-weight: 700; }
  .print-bookings td.phone { white-space: nowrap; }
  .print-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; }
  .print-sheet .checklist { list-style: none; margin: 0; padding: 0; }
  .print-sheet .checklist li { padding: 1.6mm 0; border-bottom: 0.5pt solid #bbb; break-inside: avoid; }
  .print-sheet .checklist li::before { content: ""; display: inline-block; width: 3.5mm; height: 3.5mm; border: 1pt solid #000; margin-right: 2.5mm; vertical-align: -0.5mm; }
}