/*
 * styles.css - Vacation Lottery MOCKUP (seed year 2027; the year shown follows the lottery).
 * Calm, clinical: neutral background, one accent (navy), the established status colours, always with
 * a text label. System fonts only, no external requests. Light and dark (prefers-color-scheme).
 */

:root {
  color-scheme: light;
  --bg: #f3f5f7;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --ink: #18202a;
  --ink-2: #2d3744;
  --muted: #586473;
  --line: #d3dae2;
  --line-soft: #e6ebf0;
  --line-strong: #8a96a3;  /* form-field borders: 3.0:1 on white */
  --accent: #1f4e79;
  --accent-hover: #173c5e;
  --accent-ink: #ffffff;
  --accent-soft: #e6eef7;
  --focus: #2563b0;

  /* status colours (old system: vacation teal, No Call yellow, Request Call dark red) + holiday call purple */
  --v: #17606b;  --v-ink: #ffffff; --v-soft: #e2f0f1; --v-text: #135560;
  --nc: #f2d33f; --nc-ink: #362c00; --nc-soft: #fff7cc; --nc-text: #6a5600; --nc-line: #b39a00;
  --rc: #8c1d1d; --rc-ink: #ffffff; --rc-soft: #fbe8e8; --rc-text: #8c1d1d;
  --hc: #5b3fa8; --hc-ink: #ffffff; --hc-soft: #efebfb; --hc-text: #4a3290;
  --pt: #8a5a00; --pt-soft: #fff1d6; --pt-line: #c98a12;
  --hol: #b42318;
  --full-hatch: rgba(70, 80, 92, 0.2);
  --hc-hatch: rgba(91, 63, 168, 0.28);

  --ok: #1d6b3a; --ok-soft: #e7f4ec;
  --warn: #7a4f00; --warn-soft: #fff4dc; --warn-line: #dcae4f;
  --err: #a61b1b; --err-soft: #fdecec;

  --hm1: #e0eef0; --hm2: #b4d6db; --hm-cap: #17606b; --hm-cap-ink: #ffffff; --hm-over: #8c1d1d; --hm-over-ink: #ffffff;

  --demo-bg: #262b33; --demo-ink: #f1f3f5; --demo-muted: #bcc4ce; --demo-chip: #39414b; --demo-line: #5a6470; --demo-accent: #f5c542;

  /* locked calendar (confirmed weeks): your own days in one neutral fill, white text 5.6:1 */
  --lock-mine: #5f6873; --lock-mine-ink: #ffffff;

  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07);
  --radius: 10px;
  --sticky-top: 0px;
  --sb-h: 0px;
  --ny-bar-h: 0px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1419; --surface: #171d24; --surface-2: #1d252e; --ink: #e7ebf0; --ink-2: #cfd6de; --muted: #9ba7b5;
    --line: #313c48; --line-soft: #252f39; --line-strong: #6b7887;
    --accent: #8db8e8; --accent-hover: #a9caef; --accent-ink: #0b1a2a; --accent-soft: #1b2b3d; --focus: #9cc4f0;
    --v: #1f7783; --v-ink: #ffffff; --v-soft: #12343a; --v-text: #8ad3dc;
    --nc: #e8c93a; --nc-ink: #2b2400; --nc-soft: #3a3210; --nc-text: #f0d870; --nc-line: #b39a00;
    --rc: #a83232; --rc-ink: #ffffff; --rc-soft: #3d1919; --rc-text: #f3a5a5;
    --hc: #6c51c4; --hc-ink: #ffffff; --hc-soft: #261f42; --hc-text: #c9bbf7;
    --pt: #f0b84a; --pt-soft: #33280f; --pt-line: #c98a12;
    --hol: #ff8f80;
    --full-hatch: rgba(210, 220, 230, 0.16);
    --hc-hatch: rgba(160, 135, 235, 0.42);
    --ok: #86d9a3; --ok-soft: #143222; --warn: #f2c66d; --warn-soft: #30250e; --warn-line: #8a6420; --err: #ff9e9e; --err-soft: #3a1717;
    --hm1: #16353a; --hm2: #1f525a; --hm-cap: #1f7783; --hm-cap-ink: #ffffff; --hm-over: #a83232; --hm-over-ink: #ffffff;
    --demo-bg: #05080b; --demo-ink: #eef1f4; --demo-muted: #aeb8c4; --demo-chip: #20262e; --demo-line: #48525e; --demo-accent: #f5c542;
    --lock-mine: #4a535e; --lock-mine-ink: #ffffff;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1419; --surface: #171d24; --surface-2: #1d252e; --ink: #e7ebf0; --ink-2: #cfd6de; --muted: #9ba7b5;
  --line: #313c48; --line-soft: #252f39; --line-strong: #6b7887;
  --accent: #8db8e8; --accent-hover: #a9caef; --accent-ink: #0b1a2a; --accent-soft: #1b2b3d; --focus: #9cc4f0;
  --v: #1f7783; --v-ink: #ffffff; --v-soft: #12343a; --v-text: #8ad3dc;
  --nc: #e8c93a; --nc-ink: #2b2400; --nc-soft: #3a3210; --nc-text: #f0d870; --nc-line: #b39a00;
  --rc: #a83232; --rc-ink: #ffffff; --rc-soft: #3d1919; --rc-text: #f3a5a5;
  --hc: #6c51c4; --hc-ink: #ffffff; --hc-soft: #261f42; --hc-text: #c9bbf7;
  --pt: #f0b84a; --pt-soft: #33280f; --pt-line: #c98a12;
  --hol: #ff8f80;
  --full-hatch: rgba(210, 220, 230, 0.16);
  --hc-hatch: rgba(160, 135, 235, 0.42);
  --ok: #86d9a3; --ok-soft: #143222; --warn: #f2c66d; --warn-soft: #30250e; --warn-line: #8a6420; --err: #ff9e9e; --err-soft: #3a1717;
  --hm1: #16353a; --hm2: #1f525a; --hm-cap: #1f7783; --hm-cap-ink: #ffffff; --hm-over: #a83232; --hm-over-ink: #ffffff;
  --demo-bg: #05080b; --demo-ink: #eef1f4; --demo-muted: #aeb8c4; --demo-chip: #20262e; --demo-line: #48525e; --demo-accent: #f5c542;
  --lock-mine: #4a535e; --lock-mine-ink: #ffffff;
  --shadow: none;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3 { line-height: 1.25; color: var(--ink); }
h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3, .h3 { font-size: 15px; margin: 14px 0 6px; }
.h3 { margin-top: 0; }
p { margin: 0 0 10px; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus, h1:focus, h2:focus { outline: none; }
main:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible { outline: none; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
/* Side gutters clear of a notch in landscape (index.html uses viewport-fit=cover). */
.container { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.container { padding-bottom: 32px; min-height: 60vh; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--surface); color: var(--accent); padding: 8px 12px; border-radius: 8px; border: 2px solid var(--accent); font-weight: 600; }
.skip-link:focus { top: 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.lead { font-size: 16px; color: var(--ink-2); max-width: 70ch; }
.eyebrow { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 6px; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.plain li:last-child { border-bottom: 0; }
.pt-extra li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.empty { margin: 4px 0 8px; font-size: 13.5px; }
.warn-text { color: var(--warn); }

/* ------------------------------------------------------------------ demo bar */
.demobar { background: var(--demo-bg); color: var(--demo-ink); font-size: 13px; border-bottom: 3px solid var(--demo-accent); position: relative; z-index: 30; }
@media (min-width: 980px) and (min-height: 640px) {
  .demobar { position: sticky; top: env(safe-area-inset-top, 0px); }
}
.demobar-inner { max-width: 1240px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.demo-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.demo-badge { background: var(--demo-accent); color: #1d1d1d; font-weight: 800; letter-spacing: 0.14em; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.demo-note { color: var(--demo-muted); }
.demo-field { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.demo-field span { color: var(--demo-muted); }
.demobar select, .demobar input {
  font: inherit; font-size: 13px; min-height: 30px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--demo-chip); color: var(--demo-ink); max-width: 100%;
}
.demo-now { white-space: nowrap; }
.demo-k { color: var(--demo-muted); }
.demo-phase { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1px solid var(--demo-line); border-radius: 999px; font-size: 12px; white-space: nowrap; }
.demo-presets { position: relative; display: flex; align-items: flex-start; gap: 6px; overflow-x: auto; max-width: 100%; min-width: 0; padding: 6px 6px; scrollbar-width: thin; }
.chip {
  font: inherit; font-size: 12.5px; line-height: 1.3; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--demo-line);
  background: var(--demo-chip); color: var(--demo-ink); cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--demo-accent); }
.chip[aria-pressed="true"] { background: var(--demo-accent); color: #1d1d1d; border-color: var(--demo-accent); font-weight: 700; }
.chip:focus-visible { outline-color: var(--demo-accent); }
.chip-reset { margin-left: auto; border-color: #d98a8a; }
/* Setup > Phase: Pause or skip the rounds (2026-10-16) */
.rounds-ctl { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rounds-ctl h3 { margin-top: 0; }
.rounds-ctl .btn-row { margin: 8px 0 4px; }
.demo-more { flex: none; padding-top: 4px; }
.demo-more summary { cursor: pointer; color: var(--demo-muted); white-space: nowrap; }
.demo-more[open] summary { color: var(--demo-ink); }
.demo-custom { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.demo-hint { max-width: 1240px; margin: 0 auto; padding: 0 16px 8px; color: var(--demo-muted); font-size: 12px; }
.demo-warn { max-width: 1240px; margin: 0 auto; padding: 0 16px 8px; color: var(--demo-accent); font-size: 12.5px; }
.demobar-inner, .demo-hint, .demo-warn {
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
/* Shared demo (2026-10-11): connection status as text plus a dot, and the host's People list. */
.shared-pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border: 1px solid var(--demo-line); border-radius: 999px; font-size: 12px; white-space: nowrap; }
.shared-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--demo-muted); flex: none; }
.shared-live .shared-dot { background: #4cc38a; }
.shared-save .shared-dot { background: var(--demo-accent); }
.shared-off { border-color: #d98a8a; }
.shared-off .shared-dot { background: #e5484d; }
#demo-people { position: relative; }
.demo-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(400px, calc(100vw - 32px)); padding: 10px 12px; border: 1px solid var(--demo-line);
  border-radius: 8px; background: var(--demo-chip); color: var(--demo-ink); white-space: normal; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
@media (min-width: 980px) { .demo-pop { left: auto; right: 0; } }
.demo-pop p { margin: 0 0 8px; }
.demo-pop p:last-child { margin-bottom: 0; }
.demo-seats { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.demo-seats li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Focus on the dark demo bar: the accent ring (8.8:1), not the page's blue (2.4:1). */
.demobar :focus-visible { outline-color: var(--demo-accent); }

/* ------------------------------------------------------------------ app bar */
.appbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.appbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 10px; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1.2; padding-bottom: 6px; }
/* Capnography waveform strip across the screen, between the menu and the page (decorative). */
.capno-strip { height: 20px; color: var(--accent); opacity: .32; pointer-events: none; margin-top: 2px; }
.capno-strip svg { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .capno-strip { opacity: .45; } }
:root[data-theme="dark"] .capno-strip { opacity: .45; }
@media print { .capno-strip { display: none; } }
.brand:hover { color: var(--ink); }
.brand-title { font-weight: 700; font-size: 16px; }
.brand-sub { font-size: 13px; color: var(--muted); }
.who { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; padding-bottom: 6px; }
.who-name { font-weight: 600; }
.mainnav { flex-basis: 100%; display: flex; gap: 2px; }
.nav-link { padding: 10px 12px 9px; border-bottom: 3px solid transparent; color: var(--ink-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav-link:hover { color: var(--accent); }
.nav-link[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 650; }
.phase-pill {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
}
.appbar .phase-pill { margin-bottom: 6px; }
.phase-pill.phase-beta, .phase-pill.phase-setup { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.phase-pill.phase-open { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.phase-pill.phase-closed { background: var(--surface-2); color: var(--muted); border-color: var(--line); }

/* ------------------------------------------------------------------ layout pieces */
.page-head { margin: 22px 0 14px; }
.page-head-tight { margin: 18px 0 10px; }
.page-head .lead { margin-top: 4px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 16px; box-shadow: var(--shadow); min-width: 0; }
.card-quiet { background: var(--surface-2); box-shadow: none; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
/* A menu row in a card head (Audit log's filters) never runs wider than the card: a long option shrinks its menu instead. */
.card-head > .btn-row { min-width: 0; max-width: 100%; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-2 > .card { margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notice { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--ink); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.card.notice { padding: 16px 18px; }
.status-ok { border-left: 4px solid var(--ok); }
.status-todo { border-left: 4px solid var(--warn-line); }
.gate { border-left: 4px solid var(--hc); }
/* the admin note on admins' Home (beta practice records still stored after the live draw started) */
.pb-warn { color: var(--warn); margin: 0 0 8px; }

/* ------------------------------------------------------------------ buttons, inputs, tags */
.btn {
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-danger { color: var(--err); border-color: var(--err); background: var(--surface); }
.btn-danger:hover { background: var(--err-soft); color: var(--err); border-color: var(--err); }
.btn-quiet { background: transparent; }
.btn-demo { border-style: dashed; border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.btn-sm { min-height: 34px; padding: 5px 10px; font-size: 13px; }
.btn-xs { min-height: 30px; padding: 3px 8px; font-size: 12.5px; border-radius: 6px; }
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover {
  background: var(--surface-2); color: var(--muted); border-style: dashed; border-color: var(--line); cursor: not-allowed;
}
.linklike { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

input, select, textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  min-height: 40px; padding: 6px 10px; max-width: 100%;
}
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }
input[readonly] { background: var(--surface-2); color: var(--muted); }
/* A locked menu (for example the group menus once the live draw has started) looks locked; its reason is in the text next to it. */
main select:disabled { background: var(--surface-2); color: var(--muted); border-style: dashed; cursor: not-allowed; opacity: 1; }
.inline-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); max-width: 100%; min-width: 0; }
.inline-field select { color: var(--ink); min-width: 0; }
.check, .radio { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin: 6px 0; cursor: pointer; }
.check input, .radio input { margin-top: 2px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; margin: 0 0 8px; }
legend { font-weight: 650; padding: 0 4px; }
.stack > * + * { margin-top: 8px; }
.field-label { display: block; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.form-grid > * + * { margin-top: 0; }
.form-grid > label, .form-grid > span { font-weight: 600; font-size: 14px; }
.form-grid p { margin: 4px 0 0; }
.form-grid + .form-grid { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Setup and next-year dates: "Open season length (hours)" with the end it gives next to it (2026-10-09) */
.os-hours { width: 6.5em; }
.os-end { color: var(--ink-2); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; }

.tag {
  display: inline-block; font-size: 11.5px; font-weight: 650; line-height: 1.55; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; vertical-align: 1px;
}
.tag-v { background: var(--v-soft); color: var(--v-text); border-color: var(--v); }
.tag-nc { background: var(--nc-soft); color: var(--nc-text); border-color: var(--nc-line); }
.tag-rc { background: var(--rc-soft); color: var(--rc-text); border-color: var(--rc); }
.tag-hc { background: var(--hc-soft); color: var(--hc-text); border-color: var(--hc); }
.tag-hc-soft { background: var(--hc-soft); color: var(--hc-text); border-color: transparent; }
.tag-hc-lock { background: var(--hc-soft); color: var(--hc-text); border-color: var(--hc); }
.tag-pt { background: var(--pt-soft); color: var(--pt); border-color: var(--pt-line); }
.tag-hol { background: var(--surface); color: var(--hol); border-color: var(--hol); }
.tag-full { background: var(--surface-2); color: var(--ink-2); border-color: var(--ink-2); }
.tag-admin { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.tag-now { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tag-you { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tag-demo { background: transparent; color: var(--warn); border: 1px dashed var(--warn-line); font-weight: 600; }
.tag-beta { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.tag-sim { background: transparent; color: var(--warn); border: 1px dashed var(--warn-line); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; }
.tag-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.tag-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.tag-none { background: var(--surface-2); color: var(--muted); border-color: var(--line); border-style: dashed; }
.tag-err { background: var(--err-soft); color: var(--err); border-color: var(--err); }
.err-text { color: var(--err); }

/* ------------------------------------------------------------------ tables */
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; }
.table-wrap { position: relative; overflow: auto; max-width: 100%; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-soft); border-radius: 8px; }
.table-wrap.tall { max-height: 70vh; }
.data th, .data td, .rtable th, .rtable td, .mini th, .mini td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 14px; }
.data thead th, .rtable thead th, .mini thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 650; border-bottom: 1px solid var(--line);
}
.data thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.data tbody th { font-weight: 600; }
.table-wrap .data { min-width: 620px; }
/* Pick windows: three window columns plus Confirmed (2026-10-07); the wrapper scrolls sideways on a phone, the page does not. */
.table-wrap .data.win-table { min-width: 780px; }
.data.compact th, .data.compact td { padding: 5px 8px; font-size: 13px; }
.data .num, .rtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.data td.is-open { background: var(--accent-soft); }
.rtable tbody th { font-weight: 600; }
.rtable tr.is-current th, .rtable tr.is-current td { background: var(--accent-soft); }
.mini th, .mini td { padding: 5px 8px; font-size: 13.5px; }
.rounds { margin: 6px 0 8px; }

/* ------------------------------------------------------------------ home */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); min-width: 0; }
.stat-n { font-size: 24px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-of { font-size: 13px; font-weight: 500; color: var(--muted); }
.stat-l { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 650; margin-top: 2px; }
.stat-s { font-size: 12.5px; color: var(--muted); }
.wstatus { font-weight: 600; }
.wstatus.st-open { color: var(--ok); }
.wstatus.st-upcoming { color: var(--ink-2); }
.wstatus.st-closed { color: var(--muted); }
.asg-list { list-style: none; padding: 0; margin: 6px 0 8px; display: grid; gap: 6px; }
.asg-label { display: block; font-weight: 600; }
.asg-days { display: block; font-size: 13px; color: var(--muted); }
.mydates { list-style: none; padding: 0; margin: 0; }
.mydates li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.mydates li:last-child { border-bottom: 0; }
.mydates-sub { font-size: 14px; font-weight: 700; margin: 14px 0 2px; }
.md-date { font-weight: 600; min-width: 13.5em; }
.notes { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }

/* Home: blocks of the top card (now, your steps, admins' lottery phase) and the primetime weeks card */
.home-block + .home-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.home-block h2 { margin-bottom: 6px; }
.lp-now { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hstepper-wrap { overflow-x: auto; padding: 2px 4px 8px; margin: 0 -4px; }
.hstepper { list-style: none; display: flex; margin: 0; padding: 0; min-width: 100%; }
.hs-step { position: relative; flex: 1 0 116px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 22px 8px 0 0; min-width: 0; }
.hs-step::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--line); }
.hs-step.is-done::before { background: var(--accent); }
.hs-step:last-child::before { right: auto; width: 14px; }
.hs-dot { position: absolute; top: 1px; left: 0; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); z-index: 1; }
.hs-step.is-done .hs-dot { background: var(--accent); border-color: var(--accent); }
.hs-step.is-now .hs-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hs-label { font-weight: 650; font-size: 13.5px; line-height: 1.25; }
.hs-step.is-now .hs-label { color: var(--accent); }
.hs-step:not(.is-done):not(.is-now) .hs-label { color: var(--ink-2); }
.hs-when { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.hs-state { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ptw-group { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.home-block h2 + .ptw-group { border-top: 0; padding-top: 2px; }
.ptw-group p { margin: 0; }
.ptw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ptw-limits { margin: 4px 0 0; }
/* Home (Patrick, 2026-10-13): what matters now for this physician, their own timeline (horizontal; a vertical list on
   phones, below) and one line about the whole lottery. The states are written out (Done, Now, Paused; Upcoming for screen
   readers), never colour alone. */
.now-box { padding: 12px 16px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--line); }
.now-box h2 { margin: 0 0 2px; font-size: 18px; color: var(--accent); }
.now-box p { margin: 0; max-width: 75ch; }
.now-box .btn-row { margin-top: 10px; }
.mytl { list-style: none; margin: 14px 0 0; padding: 0; display: flex; }
.mt-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 22px 10px 0 0; overflow-wrap: anywhere; }
.mt-step::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--line); }
.mt-step.is-done::before { background: var(--accent); }
.mt-step:last-child::before { right: auto; width: 14px; }
.mt-dot { position: absolute; top: 1px; left: 0; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); z-index: 1; }
.mt-step.is-done .mt-dot { background: var(--accent); border-color: var(--accent); }
.mt-step.is-now .mt-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.mt-step.is-paused .mt-dot { border-style: dashed; border-color: var(--warn-line); }
.mt-label { font-weight: 650; font-size: 13.5px; line-height: 1.25; }
.mt-step.is-now .mt-label { color: var(--accent); }
.mt-when { color: var(--muted); font-size: 12.5px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.mt-when.mt-me { color: var(--ink-2); font-weight: 600; }
.mt-step .btn-demo { margin-top: 4px; min-height: 26px; padding: 2px 8px; }
.lottery-line { margin: 10px 0 0; }
/* Home: your steps for the current round (Patrick, 2026-10-07), right below the phase timeline. Each light carries a symbol
   and the status is always written next to it, so nothing rests on colour alone. */
.light {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 13px; font-weight: 800; line-height: 1; border: 2px solid transparent; box-sizing: border-box;
}
.light-green { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.light-red { background: var(--err); border-color: var(--err); color: var(--surface); }
.light-grey { background: var(--surface-2); border-color: var(--line-strong); color: var(--muted); }
.light-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.ls-step { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); }
.ls-step.ls-green { border-left-color: var(--ok); }
.ls-step.ls-red { border-left-color: var(--err); }
.ls-body { flex: 1 1 auto; min-width: 0; }
.ls-body p { margin: 0 0 4px; }
.ls-body p:last-child { margin-bottom: 0; }
.ls-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ls-label { font-weight: 650; }
.ls-status { font-weight: 750; color: var(--ink-2); }
.ls-green .ls-status { color: var(--ok); }
.ls-red .ls-status { color: var(--err); }
.ls-link { padding-top: 4px; }
.tag-lock { background: var(--surface-2); color: var(--ink-2); border-color: var(--ink-2); border-style: dashed; }


/* ------------------------------------------------------------------ sign-in */
.signin { max-width: 540px; margin: 0 auto; }
.signin input[type="email"] { width: 100%; }
.sim-email { border: 2px dashed var(--warn-line); background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
.sim-label { font-size: 13px; color: var(--muted); }
.sim-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 13.5px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.sim-head dt { color: var(--muted); }
.sim-head dd { margin: 0; overflow-wrap: anywhere; }
/* The sticky demo bar (wide screens) must not cover a simulated email scrolled into view. */
.sim-email { scroll-margin-top: calc(var(--sticky-top) + 12px); }
/* Admin > Users: a field the engine refused, and the list heading focused after Remove, stay clear of the sticky demo bar. */
.user-form input, .user-form select, .user-form button, #users-h { scroll-margin-top: calc(var(--sticky-top) + 12px); }
.sim-email:focus { outline: none; }
.sim-email:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ the real site (server mode, 2026-10-20) */
/* No demo bar there (app.js hides #demobar). */
.demobar[hidden] { display: none; }
/* The app bar's save status, in words: "Saving…" while a change is on its way, "Not connected" when the server can't be reached. */
.save-wrap:empty { display: none; }
.save-status { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; margin-bottom: 6px; }
.save-busy { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.save-off { background: var(--err-soft); color: var(--err); border-color: var(--err); }
/* Sign in, Set up my account, My account: full-width fields; a form's message only once there is one. */
.signin input[type="text"], .signin input[type="password"], .account input[type="password"] { width: 100%; }
.signin .field-err:empty, .account .field-err:empty { display: none; }
/* Admin > Users: a setup code just given, shown once, large enough to read out or copy by hand. */
.setup-code-card { border: 2px solid var(--accent); scroll-margin-top: calc(var(--sticky-top) + 12px); }
.setup-code-card:focus { outline: none; }
.setup-code-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.setup-code { font: 700 30px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.12em; margin: 4px 0 12px; color: var(--ink); overflow-wrap: anywhere; }
/* The text to send with the code (real site, 2026-10-20): read-only, full width, easy to select. */
.setup-code-msg { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 10px; resize: vertical; line-height: 1.4; background: var(--surface-2); color: var(--ink); }

/* ------------------------------------------------------------------ holiday call */
.pkg-list { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pkg-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 210px; gap: 4px 12px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.pkg-row input[type="radio"] { width: 20px; height: 20px; margin-top: 2px; }
.pkg-main { cursor: pointer; min-width: 0; }
.pkg-row input:disabled + .pkg-main { cursor: default; }
.pkg-row input:disabled { opacity: 0.4; }
.pkg-id { font-weight: 700; }
.pkg-row.is-taken { background: var(--surface-2); }
.pkg-row.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.pkg-row.is-mine { border-color: var(--hc); box-shadow: inset 0 0 0 1px var(--hc); background: var(--hc-soft); }
.pkg-holder { font-size: 14px; min-width: 0; }
.pkg-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 650; }
.pkg-why { grid-column: 2 / -1; margin: 0; font-size: 13px; color: var(--warn); }
.confirm-bar {
  position: sticky; bottom: 0; z-index: 2; background: var(--surface); margin: 12px -18px -16px; padding: 12px 18px;
  border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.confirm-bar p { margin: 0; flex: 1 1 240px; }

/* ------------------------------------------------------------------ calendar: status header */
.statusbar {
  position: sticky; top: var(--sticky-top); z-index: 20; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}
.sb-grid { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(220px, 2.2fr) repeat(3, minmax(110px, 1fr)); gap: 6px 16px; }
.sb-item { min-width: 0; }
.sb-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 650; }
.sb-v { display: block; font-weight: 600; font-size: 14.5px; }
.sb-v small { font-weight: 500; color: var(--muted); font-size: 12px; }
.sb-full .sb-v { color: var(--warn); }
.sb-mode { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* calendar: Confirm my Round N weeks / Edit my Round N weeks (Patrick, 2026-10-07) */
.round-confirm { border-left: 4px solid var(--line-strong); padding-top: 12px; padding-bottom: 12px; }
.round-confirm.wkc-green { border-left-color: var(--ok); }
.round-confirm.wkc-red { border-left-color: var(--err); }
.round-confirm.is-locked { background: var(--surface-2); }
.wkc-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wkc-text { flex: 1 1 240px; min-width: 0; }
.wkc-text h2 { margin: 0 0 2px; }
.wkc-status { margin: 0; }
.round-confirm.wkc-green .wkc-status b { color: var(--ok); }
.round-confirm.wkc-red .wkc-status b { color: var(--err); }
.wkc-btn { flex: 0 0 auto; }
.wkc-why { margin: 8px 0 0; max-width: 90ch; }
/* Locked: the month greys out (days still open, to see who is off) under a plain-text banner (cell rules: after .day). */
.cal-locked-note { margin: 0 4px 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--line-strong); font-size: 13.5px; }

/* ------------------------------------------------------------------ calendar: layout and grid */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "month panel" "extra panel"; gap: 0 18px; align-items: start; }
.cal-month { grid-area: month; }
.cal-extra { grid-area: extra; min-width: 0; }
.cal-card { padding: 12px 12px 10px; }
.cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 4px 8px; }
.cal-title { font-size: 20px; margin: 0; flex: 1 1 auto; text-align: center; }
.cal-tip { margin: 6px 4px 0; }
.cal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; }
.cal th { font-size: 12px; color: var(--muted); font-weight: 650; padding: 2px 0; text-align: center; }
.cal th abbr { text-decoration: none; }
.cal td { padding: 0; vertical-align: top; }
.cal td.cal-out { color: var(--muted); opacity: 0.55; font-size: 12px; padding: 6px 8px; }
.day {
  width: 100%; min-height: 78px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 5px 6px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; text-align: left;
  cursor: pointer; position: relative;
}
.day:hover { border-color: var(--accent); }
.d-top { display: flex; justify-content: space-between; align-items: center; gap: 2px; min-width: 0; }
.d-num { font-weight: 650; font-size: 14px; line-height: 1.1; }
.d-marks { display: flex; gap: 3px; align-items: center; }
.mk { font-size: 10.5px; font-weight: 750; line-height: 1; }
.mk-pt { color: var(--pt); border: 1px solid var(--pt-line); border-radius: 4px; padding: 1px 3px; background: var(--pt-soft); }
.mk-hol { color: var(--hol); font-size: 13px; }
.d-code { align-self: center; font-weight: 800; font-size: 14px; letter-spacing: 0.03em; min-height: 18px; line-height: 18px; }
.d-bot { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 11px; color: var(--muted); margin-top: auto; line-height: 1.25; }
.d-off { font-variant-numeric: tabular-nums; }
.d-full { font-weight: 800; color: var(--ink-2); text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; }
.d-nc { color: var(--nc-text); font-weight: 650; }
.d-nc.is-high { background: var(--nc); color: var(--nc-ink); border-radius: 4px; padding: 0 3px; }
.day.is-weekend { background: var(--surface-2); }
.day.is-pt { box-shadow: inset 0 3px 0 var(--pt-line); }
.day.is-hol .d-num { color: var(--hol); }
.day.is-full:not(.mine) { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--full-hatch) 6px 8px); }
.day.in-week:not(.mine) { background-color: var(--accent-soft); }
.day.in-week { border-color: var(--accent); }
.day.mine-v { background: var(--v); color: var(--v-ink); border-color: var(--v); }
.day.mine-nc { background: var(--nc); color: var(--nc-ink); border-color: var(--nc-line); }
.day.mine-rc { background: var(--rc); color: var(--rc-ink); border-color: var(--rc); }
.day.mine-hc { background: var(--hc); color: var(--hc-ink); border-color: var(--hc); }
/* inside a holiday window you cover, on a day you do not work: closed to No Call and Request Call */
.day.hc-lock:not(.mine) { background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--hc-hatch) 5px 7px); border-color: var(--hc); }
.day.hc-lock.mine { box-shadow: inset 0 0 0 2px var(--hc); }
.d-code-lock { color: var(--hc-text); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.day.mine .d-bot, .day.mine .d-full, .day.mine .d-nc, .day.mine .mk-hol, .day.mine.is-hol .d-num { color: inherit; }
.day.mine.is-hol .d-num { text-decoration: underline; }
.day.mine .mk-pt { background: #fff7e6; color: #6b4500; border-color: #fff7e6; }
.day.mine .d-nc.is-high { background: rgba(255, 255, 255, 0.85); color: #362c00; }
.day.is-selected { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 1; }
.day:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 2; }
/* Locked month: only the cells' fills, borders and contents are greyed, never a whole day button or the table (a filter
   or opacity there would grey the focus ring and the selected-day outline too), so both keep their full colour. */
.cal-month.is-locked .day { background-color: var(--surface-2); color: var(--ink-2); border-style: dashed; }
.cal-month.is-locked .day.mine { background: var(--lock-mine); color: var(--lock-mine-ink); border-color: var(--lock-mine); border-style: solid; }
.cal-month.is-locked .day.is-pt { box-shadow: inset 0 3px 0 var(--line-strong); }
.cal-month.is-locked .day > * { filter: grayscale(1); }

/* legend */
.legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.legend li { display: inline-flex; align-items: center; }
.sw {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 20px; padding: 0 4px; margin-right: 6px;
  flex: none; white-space: nowrap; border-radius: 4px; font-size: 11px; font-weight: 750; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.sw-v { background: var(--v); color: var(--v-ink); border-color: var(--v); }
.sw-nc { background: var(--nc); color: var(--nc-ink); border-color: var(--nc-line); }
.sw-rc { background: var(--rc); color: var(--rc-ink); border-color: var(--rc); }
.sw-hc { background: var(--hc); color: var(--hc-ink); border-color: var(--hc); }
.sw-lock { background-image: repeating-linear-gradient(135deg, transparent 0 4px, var(--hc-hatch) 4px 6px); color: var(--hc-text); border-color: var(--hc); font-size: 9.5px; text-transform: uppercase; }
.sw-pt { background: var(--pt-soft); color: var(--pt); border-color: var(--pt-line); }
.sw-hol { color: var(--hol); font-size: 13px; }
.sw-off { color: var(--muted); }
.sw-full { background-image: repeating-linear-gradient(135deg, transparent 0 4px, var(--full-hatch) 4px 6px); color: var(--ink-2); font-size: 9.5px; text-transform: uppercase; }
.sw-ncc { color: var(--nc-text); }
.sw-nc-high { background: var(--nc); color: var(--nc-ink); border-color: var(--nc-line); }
.legend-card .legend { margin-bottom: 6px; }

/* day panel (desktop: side column; narrow screens: bottom sheet) */
.day-panel {
  grid-area: panel; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  position: sticky; top: calc(var(--sticky-top) + var(--sb-h) + 12px);
  max-height: calc(100vh - var(--sticky-top) - var(--sb-h) - 24px); overflow: auto; overscroll-behavior: contain; min-width: 0;
}
.dp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dp-head h2 { font-size: 17px; margin: 0 0 6px; }
.dp-close { display: none; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.dp-you { margin: 0 0 10px; font-size: 14px; }
.dp-k { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 650; margin-right: 6px; }
.dp-actions { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 10px 0 2px; margin-bottom: 10px; }
.act-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.act-btn { width: 100%; min-height: 44px; padding: 6px 4px; font-size: 13.5px; }
.act-v:not([aria-disabled="true"]) { background: var(--v); color: var(--v-ink); border-color: var(--v); }
.act-nc:not([aria-disabled="true"]) { background: var(--nc); color: var(--nc-ink); border-color: var(--nc-line); }
.act-rc:not([aria-disabled="true"]) { background: var(--rc); color: var(--rc-ink); border-color: var(--rc); }
.act-del:not([aria-disabled="true"]) { background: var(--surface); color: var(--err); border-color: var(--err); }
.act-btn:not([aria-disabled="true"]):hover { filter: brightness(1.08); }
.act-notes { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; font-size: 13px; }
.act-notes li { padding: 7px 10px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--line); }
.act-notes .note-no { background: var(--warn-soft); border-left-color: var(--warn-line); }
.act-notes .note-ok { background: var(--ok-soft); border-left-color: var(--ok); }
.dp-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--line-strong); font-size: 13px; }
.dp-locked p { margin: 0; flex: 1 1 200px; min-width: 0; }
.dp-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 4px 0 6px; font-size: 14px; }
.dp-big { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.day-panel h3 { margin: 12px 0 4px; font-size: 14px; }
.count { color: var(--muted); font-weight: 500; }
.names { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.names li { padding: 3px 0; }
.rc-form { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 4px 0 10px; }
.rc-form h3 { margin: 0 0 8px; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr)); gap: 8px; }
.rc-field { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.rc-field select { width: 100%; color: var(--ink); }
.rc-bad { color: var(--warn); margin: 8px 0; }
.rc-good { color: var(--ok); margin: 8px 0; }

/* ------------------------------------------------------------------ admin */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.subnav a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-size: 14px; background: var(--surface); }
.subnav a:hover { border-color: var(--accent); }
.subnav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; }
/* Next lottery year wizard in progress (Patrick, 2026-10-07): its chip, the banner on the other admin screens and Home,
   and the frame around the wizard. Always with the words "In progress", never colour alone. */
.wiz-flag {
  display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  font-size: 11px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.6; vertical-align: 0.12em; white-space: nowrap;
}
.subnav a.is-progress { border: 2px solid var(--accent); padding: 5px 11px; background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.subnav a.is-progress[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.subnav a.is-progress[aria-current="page"] .wiz-flag, .wiz-head h2 .wiz-flag { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); }
.page-head h1 .wiz-flag { font-size: 12px; vertical-align: 0.3em; }
.wiz-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 14px; padding: 10px 14px;
  border: 2px solid var(--accent); border-left-width: 6px; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink);
}
.wiz-banner p { margin: 0; flex: 1 1 260px; min-width: 0; overflow-wrap: break-word; }
.wiz-frame { border: 3px solid var(--accent); border-radius: calc(var(--radius) + 4px); padding: 0 12px 12px; margin: 0 0 16px; background: var(--accent-soft); min-width: 0; }
.wiz-frame > .card:last-child { margin-bottom: 0; }
.wiz-head { margin: 0 -12px 14px; padding: 12px 14px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius) var(--radius) 0 0; }
.wiz-head h2 { margin: 0 0 4px; color: var(--accent-ink); font-size: 18px; }
.wiz-head p { margin: 4px 0 0; max-width: 90ch; overflow-wrap: break-word; }
.wiz-head:focus { outline: none; }
#wiz-h, #nys-packages { scroll-margin-top: calc(var(--sticky-top) + 12px); }
.timeline { list-style: none; padding: 0; margin: 10px 0 14px 6px; border-left: 2px solid var(--line); }
.timeline li { padding: 4px 0 4px 14px; position: relative; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 13.5px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.timeline li.is-now::before { background: var(--accent); }
.timeline li.is-now .tl-label { color: var(--accent); }
.tl-label { font-weight: 650; min-width: 160px; }
.tl-when { color: var(--muted); }
.kv li b { display: inline-block; min-width: 80px; }
.blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px 16px; }
.block h3 { margin: 4px 0 6px; }
.block .table-wrap .data { min-width: 0; }
.csv { font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; overflow: auto; max-height: 300px; white-space: pre; }
.is-pt-row th, .is-pt-row td { background: var(--pt-soft); }
.busy li.is-high { border-left: 3px solid var(--nc-line); padding-left: 8px; }
/* Admin > Users and the group-size rule (2026-10-06) */
.field-err { color: var(--err); font-size: 13.5px; font-weight: 600; margin: 4px 0 0; }
/* A field the engine names as wrong: Add user, and next year's dates (Admin > Next lottery year wizard). */
.form-grid input[aria-invalid="true"], .form-grid select[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.user-form input[type="text"], .user-form input[type="email"] { width: 100%; max-width: 360px; }
.why { margin: 4px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); max-width: 30ch; }
details.why summary { cursor: pointer; }
details.why p { margin: 4px 0 0; }
.data.users { min-width: 900px; }
.data.users td, .data.users th { vertical-align: top; }
.data.users .u-email { overflow-wrap: anywhere; max-width: 24ch; }
.data.users tr.is-you th, .data.users tr.is-you td { background: var(--accent-soft); }
.data.users .btn-row { flex-wrap: nowrap; }
.rm-list { margin: 4px 0 10px; padding-left: 20px; }
.rm-list li { margin: 2px 0; }
.cap-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--ink-2); }
.cap-chip { display: inline-block; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 12.5px; white-space: nowrap; }
.cap-chip.is-full { border-color: var(--ink-2); font-weight: 650; }
.data tr.grp-row th { background: var(--surface-2); font-size: 13px; font-weight: 650; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.heat { min-width: 560px; }
.heat td { text-align: center; padding: 0; }
.heat td a { display: block; padding: 6px 4px; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.heat td a:hover { text-decoration: underline; }
.hm-l0 { color: var(--muted); }
.hm-l1 { background: var(--hm1); }
.hm-l2 { background: var(--hm2); }
.hm-cap { background: var(--hm-cap); color: var(--hm-cap-ink); font-weight: 700; }
.hm-over { background: var(--hm-over); color: var(--hm-over-ink); font-weight: 700; }
.hm-na { color: var(--muted); }
.nc-some { background: var(--nc-soft); }
.nc-high { background: var(--nc); color: var(--nc-ink); }
.nc-high .muted { color: inherit; }
.hm-legend { margin: 0 0 10px; }
.sw.hm-l1 { background: var(--hm1); } .sw.hm-l2 { background: var(--hm2); }
.sw.hm-cap { background: var(--hm-cap); color: var(--hm-cap-ink); border-color: var(--hm-cap); }
.sw.hm-over { background: var(--hm-over); color: var(--hm-over-ink); border-color: var(--hm-over); }
.sw.nc-high { background: var(--nc); color: var(--nc-ink); border-color: var(--nc-line); min-width: 40px; }
.steps { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.step { display: flex; gap: 8px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.step-mark { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); font-size: 12px; font-weight: 750; flex: none; }
.step-done .step-mark { background: var(--ok); color: var(--surface); border-color: var(--ok); }
.step-now .step-mark { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.step-now { font-weight: 650; }
.banner-sim { border: 2px dashed var(--warn-line); background: var(--warn-soft); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; }
.banner-sim p { margin: 0; }
.ez-p { border-bottom: 1px solid var(--line-soft); padding: 8px 0; }
.ez-p summary { cursor: pointer; }
.ez-p .table-wrap { margin-top: 8px; }
.ez-p .data { min-width: 520px; }
.warn-list { color: var(--warn); margin: 6px 0; padding-left: 18px; }
/* Next year's holiday packages (2026-10-06), inline in the Next lottery year wizard's holiday packages step (2026-10-07) */
#ny-h, #ny-std, #ny-pk-h, #ny-bl-h { scroll-margin-top: calc(var(--sticky-top) + 12px); }
.nyp { margin-top: 10px; min-width: 0; }
.nyp-block { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 12px; min-width: 0; }
.nyp-block:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.nyp h4 { margin: 0 0 6px; font-size: 15px; line-height: 1.25; }
.nyp h5 { margin: 12px 0 6px; font-size: 14px; }
.nyp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 6px; }
.nyp-head h4 { margin: 0; }
.nyp-head .btn-row { margin: 0; }
.ny-step-body .nyp .btn-row { margin-top: 8px; }
.ny-step-body .nyp-head .btn-row { margin-top: 0; }
.nyp .form-grid { margin-top: 8px; }
.nyp .table-wrap { margin-top: 6px; }
.nyp details { margin-top: 8px; }
/* the save/swap bar sticks to the bottom of the screen while the packages are in view (no card edges to bleed to here) */
.nyp .confirm-bar { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 -6px 16px rgba(16, 24, 40, 0.08); }
.nyp .confirm-bar.is-swapping { border: 2px solid var(--accent); }
.lbl-short { display: none; }
/* Tab scrolls a Swap button clear of the sticky save/swap bar (app.js updateStickyTop measures it; 0 without the bar). */
html { scroll-padding-bottom: var(--ny-bar-h); }
.ny-status { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ny-status p { margin: 0 0 4px; }
/* The standard pairings: status line, Changed count, Make these the standard pairings, Restore default pairings */
.ny-standard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 12px 0; background: var(--surface-2); }
.ny-standard p { margin: 0 0 4px; }
.ny-standard p:last-child { margin-bottom: 0; }
.ny-standard .btn-row { margin: 8px 0 0; }
.ny-standard .btn-row + p { margin-top: 6px; }
.ny-checks { border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.ny-checks p { margin: 0; }
.ny-checks.is-ok { border-left-color: var(--ok); background: var(--ok-soft); }
.ny-checks.is-bad { border-left-color: var(--err); background: var(--err-soft); }
.ny-checks ul { margin: 6px 0 0; }
/* Patrick's pairing rules (2026-10-06): how many packages are in-house + backup and warm + cold weather */
.ny-checks .ny-mix { list-style: none; padding: 0; margin: 8px 0 0; }
.ny-mix li { margin: 2px 0 0; overflow-wrap: break-word; }
.ny-checks .ny-mix + p { margin-top: 8px; }
.err-list { color: var(--err); padding-left: 18px; }
.ny-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ny-row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; align-items: start;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.ny-row.is-changed { border-left: 4px solid var(--warn-line); }
.ny-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding-top: 6px; }
.ny-asg { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; }
.ny-asg .btn { margin-top: 4px; }
.ny-asg.is-chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.ny-bar.is-swapping { background: var(--accent-soft); border-top: 2px solid var(--accent); }
.ny-swap-to { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; min-width: 0; max-width: 100%; flex: 1 1 100%; }
/* width 0 + grow: the long option texts must not set the bar's width (no sideways scroll on phones) */
.ny-swap-to select { flex: 1 1 260px; width: 0; min-width: 0; max-width: 100%; min-height: 36px; color: var(--ink); }
@media (max-width: 560px) { .ny-swap-to select { flex-basis: 100%; } }
/* Admin > Next lottery year wizard (2026-10-06): the checklists, the dates form and its window preview, the archives, Start */
#ny-started-h, #ny-check-h, #ny-order-h, #ny-dates-h, #ny-limits-h, #ny-start-h, #ny-arch-h { scroll-margin-top: calc(var(--sticky-top) + 12px); }
.ny-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ny-step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; background: var(--surface); min-width: 0;
}
.ny-step-done { border-left-color: var(--ok); }
.ny-step-todo { border-left-color: var(--warn-line); }
.ny-step-recommended { border-left-color: var(--accent); }
.ny-step-problem { border-left-color: var(--err); background: var(--err-soft); }
.ny-step-done .step-mark { background: var(--ok); color: var(--surface); border-color: var(--ok); }
.ny-step-problem .step-mark { background: var(--err); color: var(--surface); border-color: var(--err); }
.ny-step-todo .step-mark { border-color: var(--warn-line); color: var(--warn); }
.ny-step-body { min-width: 0; }
.ny-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ny-step-head h3, .ny-step-head h4 { margin: 0; font-size: 15px; line-height: 1.25; }
.ny-step-body p { margin: 4px 0 0; max-width: 80ch; overflow-wrap: break-word; }
.ny-step-body .btn-row { margin-top: 8px; }
.ny-step-body .ny-why { max-width: 60ch; }
.ny-req { font-size: 12px; color: var(--muted); }
/* Next lottery year wizard, step 4: next year's groups, editable in place (a list, so a phone never scrolls sideways) */
.nyg { margin-top: 8px; }
.nyg .notice { margin: 8px 0; }
.nyg-groups { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.nyg-group { border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; background: var(--surface); }
.nyg-group.is-changed { border-left: 4px solid var(--warn-line); }
.nyg-ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 10px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.nyg-ghead b { color: var(--ink); }
.nyg-members { list-style: none; padding: 0; margin: 0; }
.nyg-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line-soft); }
.nyg-row:first-child { border-top: 0; }
.nyg-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.nyg-who { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.nyg-was { display: block; }
.nyg-ctl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nyg-ctl select { min-width: 0; max-width: 16em; }
.nyg-h { margin: 14px 0 0; font-size: 14px; }
.nyg-out { margin-top: 4px; }
.nyg-out li.nyg-out-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.nyg-out .nyg-ctl { flex: 0 1 18em; }
.nyg-out .nyg-ctl select { flex: 1 1 auto; width: 0; max-width: none; }
.nyg-nhc { margin-top: 10px; }
/* a Group menu or ↑/↓ whose physician moved is scrolled into view after the change: not under the sticky bars */
#ny-groups select, #ny-groups button { scroll-margin-top: calc(var(--sticky-top) + 12px); }
.ny-kv { margin: 0 0 8px; }
.ny-kv li { overflow-wrap: break-word; }
.ny-kv li b { min-width: 110px; }
.ny-dates-status { margin: 8px 0 0; }
.ny-preview details { margin-top: 6px; }
.ny-preview summary { cursor: pointer; }
.ny-preview .table-wrap { margin-top: 8px; }
.ny-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin-bottom: 8px; }
.ny-lists h3 { margin-top: 6px; }
.ny-lists ul { margin: 0; padding-left: 18px; }
.ny-lists li { margin: 2px 0; overflow-wrap: break-word; }
.ny-start-bar p { min-width: 0; overflow-wrap: break-word; }
.ny-arch li { padding: 10px 0; }
.ny-arch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ny-arch p { margin: 2px 0 6px; }
/* Start's typed confirmation ("START 2028") */
.modal-typed { margin-top: 12px; }
.modal-typed input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.modal-typed p { margin: 4px 0 0; }
.modal-body .rm-list, .modal-body .warn-list { overflow-wrap: break-word; }
/* Print dates of an archived year */
.print-archived { flex-basis: 100%; margin: 0; }
.sheet-missing { max-width: 8.5in; margin: 12px auto 32px; }

/* ------------------------------------------------------------------ toast + modal */
.toast-region { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(440px, calc(100vw - 32px)); }
@media (min-width: 980px) { body[data-route="calendar"] .toast-region { right: auto; left: 16px; } }
.toast {
  display: flex; gap: 10px; align-items: flex-start; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-left: 5px solid var(--accent); border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}
.toast-ok { border-left-color: var(--ok); }
.toast-warn { border-left-color: var(--warn-line); }
.toast-error { border-left-color: var(--err); }
.toast-body { flex: 1; min-width: 0; }
.toast-kind { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 750; }
.toast-error .toast-kind { color: var(--err); }
.toast-title { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.toast p.toast-warn, .toast-sim { font-size: 13px; margin: 6px 0 0; color: var(--ink-2); }
.toast p.toast-warn { color: var(--warn); }
.toast-x { font: inherit; font-size: 20px; line-height: 1; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 18, 0.5); z-index: 70; }
.modal {
  position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow: auto; background: var(--surface); color: var(--ink); border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); border: 1px solid var(--line);
}
.modal h2 { margin: 0 0 10px; }
/* The buttons stay in view when a dialog is taller than the screen (a landscape phone): the body scrolls under them,
   so the focused button (Holiday call: “Confirm and proceed to vacation calendar”) is never out of sight. */
.modal-actions {
  justify-content: flex-end; margin-top: 4px; position: sticky; bottom: -18px; z-index: 1;
  background: var(--surface); padding: 10px 0 18px; margin-bottom: -18px;
}
/* Holiday call's two buttons (Cancel, Confirm and proceed to vacation calendar) share the row; on a phone the long one wraps
   under a full-width Cancel. */
.modal-actions-wide .btn { flex: 1 1 auto; }

.sitefoot { color: var(--muted); font-size: 12.5px; padding-top: 8px; padding-bottom: 28px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ print dates (paper: always light) */
.print-toolbar { max-width: 8.5in; margin: 18px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.print-toolbar p { margin: 0; }
.sheet {
  width: 8.5in; max-width: 100%; margin: 12px auto 32px; background: #ffffff; color: #1b1b1b; padding: 0.6in 0.65in;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); font-size: 14px; line-height: 1.45; border-radius: 2px;
}
.sheet h1 { margin: 0; font-size: 22px; color: #1f4e79; }
.sheet h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #1f4e79; margin: 18px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #cfd5dc; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid #1f4e79; padding-bottom: 10px; margin-bottom: 14px; }
.ps-sub { color: #5b6470; font-size: 12.5px; }
.ps-who { text-align: right; font-size: 13px; }
.ps-who b { font-size: 16px; }
.ps-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.ps-stat { border: 1px solid #cfd5dc; border-radius: 6px; padding: 8px 10px; background: #f3f5f8; }
.ps-stat .n { font-size: 20px; font-weight: 650; }
.ps-stat .n span { font-size: 13px; font-weight: 400; }
.ps-stat .l { font-size: 11.5px; color: #5b6470; text-transform: uppercase; letter-spacing: 0.04em; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sheet th { text-align: left; font-weight: 600; color: #5b6470; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 8px; border-bottom: 1px solid #cfd5dc; }
.sheet td { padding: 6px 8px; border-bottom: 1px solid #e6e9ee; vertical-align: top; }
.sheet tr { break-inside: avoid; }
.sheet .num { text-align: right; white-space: nowrap; }
.sheet .pempty { color: #5b6470; font-style: italic; }
.ptag { display: inline-block; font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 10px; border: 1px solid; white-space: nowrap; }
.ptag.v  { color: #17606b; border-color: #17606b; background: #e6f2f3; }
.ptag.pt { color: #8a5a00; border-color: #b07a10; background: #fff4de; }
.ptag.os { color: #1f4e79; border-color: #1f4e79; background: #eef3f9; }
.ptag.nc { color: #6b5d00; border-color: #b8a200; background: #fffbd6; }
.ptag.rc { color: #8c1d1d; border-color: #8c1d1d; background: #fbe9e9; }
.ptag.h  { color: #3b2f7a; border-color: #3b2f7a; background: #eeeafc; }
.pnote { color: #5b6470; font-size: 12px; margin-top: 6px; }
.pnote-inline { color: #5b6470; font-size: 11.5px; margin-top: 2px; }
.ps-sign { margin-top: 26px; display: flex; gap: 40px; font-size: 12px; color: #5b6470; }
.ps-sign div { flex: 1; border-top: 1px solid #1b1b1b; padding-top: 4px; }
.ps-foot { margin-top: 20px; padding-top: 8px; border-top: 1px solid #cfd5dc; display: flex; justify-content: space-between; gap: 12px; color: #5b6470; font-size: 11.5px; }

@page { size: letter; margin: 0.5in; }
@media print {
  :root { color-scheme: light; }
  body { background: #ffffff !important; color: #000000; font-size: 12px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .demobar, #appbar, .sitefoot, .toast-region, #modal, .skip-link, .print-toolbar, .day-panel .dp-close { display: none !important; }
  main.container { padding: 0; max-width: none; min-height: 0; }
  .sheet { box-shadow: none; margin: 0; padding: 0; width: auto; max-width: none; font-size: 12px; }
  .sheet h2 { break-after: avoid; }
  .statusbar, .day-panel { position: static; box-shadow: none; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-wide { grid-column: span 2; }
}

/* Narrow: the day panel becomes a bottom sheet. */
@media (max-width: 979px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "month" "extra"; }
  .day-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; margin: 0;
    max-height: 50vh; max-height: min(50vh, 50dvh); border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.22);
    transform: translateY(105%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s;
  }
  .day-panel.is-open { transform: none; visibility: visible; }
  .day-panel::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: -4px auto 8px; }
  .dp-close { display: inline-flex; }
  body.sheet-open main.container { padding-bottom: 52vh; }
  /* scrollIntoView keeps a selected day below the sticky header and above the sheet */
  .day { scroll-margin-top: calc(var(--sticky-top) + var(--sb-h) + 8px); scroll-margin-bottom: calc(50vh + 8px); }
  .toast-region { top: 8px; bottom: auto; left: 16px; right: 16px; width: auto; }
}

@media (max-width: 860px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .form-grid > span:empty { display: none; }
  .form-grid > label { margin-top: 8px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: 22px; }
  .page-head { margin: 16px 0 12px; }
  .card { padding: 14px 14px; }
  .confirm-bar { margin: 12px -14px -14px; padding: 12px 14px; }
  input, select, textarea, .demobar select, .demobar input { font-size: 16px; } /* no zoom on iOS */
  .demo-note, .demo-hint { display: none; }
  .demobar-inner { gap: 6px 8px; padding-top: 6px; padding-bottom: 6px; }
  .demo-field { flex: 1 1 0; min-width: 0; }
  .demo-field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .demo-field select { width: 100%; }
  .chip-reset { order: 2; }
  .demo-now { order: 3; flex-basis: 100%; font-size: 12.5px; white-space: normal; min-width: 0; }
  .demo-presets { order: 4; flex-basis: 100%; }
  .toast { padding: 8px 10px; }
  .toast-title { font-size: 13.5px; }
  .appbar .who { margin-left: 0; }

  .appbar-inner { gap: 4px 10px; }
  .mainnav { flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
  .nav-link { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
  .nav-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  .statusbar { padding: 8px 10px; margin-left: 0; margin-right: 0; }
  .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
  .sb-wide { grid-column: span 2; }
  .sb-k { font-size: 10px; letter-spacing: 0.03em; }
  .sb-v { font-size: 13px; line-height: 1.3; }
  .sb-mode { display: none; }
  /* With the day sheet open the status header scrolls away, so header + sheet never hide the month. */
  body.sheet-open .statusbar { position: static; }

  .cal-card { padding: 10px 4px 8px; }
  .cal { border-spacing: 2px; }
  .cal-title { font-size: 17px; }
  .cal-jump { flex-basis: 100%; justify-content: center; }
  .day { min-height: 60px; padding: 3px 3px; border-radius: 6px; gap: 0; }
  .d-num { font-size: 13px; }
  .d-marks { gap: 1px; }
  .d-top { flex-wrap: wrap; row-gap: 0; }
  .mk { font-size: 10px; }
  .mk-pt { padding: 0 1px; border: 0; background: none; }
  .day.mine .mk-pt { background: none; color: inherit; }
  .mk-hol { font-size: 10px; }
  .d-code { font-size: 12px; min-height: 16px; line-height: 16px; }
  .d-bot { font-size: 10.5px; gap: 0 3px; line-height: 1.2; }
  .d-full { font-size: 10px; letter-spacing: 0; }
  .cal td.cal-out { padding: 4px 3px; font-size: 11px; }
  .act-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wkc-btn { flex: 1 1 100%; }
  .wkc-btn .btn { width: 100%; }
  .rc-grid { grid-template-columns: minmax(0, 1fr); }

  .pkg-row { grid-template-columns: 24px minmax(0, 1fr); }
  .pkg-holder { grid-column: 2; }
  .ny-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ny-num { padding-top: 0; }
  .ny-asg { padding: 6px 0; border-radius: 0; border-width: 1px 0 0; border-top-color: var(--line-soft); }
  .ny-asg.is-chosen { padding: 6px 8px; border-radius: 6px; border-width: 1px; }
  .ny-bar.is-swapping p { font-size: 13px; }
  .ny-lists { grid-template-columns: minmax(0, 1fr); }
  .ny-step { padding: 8px 10px; gap: 2px 8px; }
  /* next year's groups and packages: use the step's full width (under its number); the Group menu on its own line */
  .ny-step-body .nyg-groups, .ny-step-body .nyg-out, .ny-step-body .nyp { margin-left: -32px; }
  .wiz-frame { padding: 0 6px 6px; border-width: 2px; }
  .wiz-head { margin: 0 -6px 10px; padding: 10px 12px; }
  .wiz-head h2 { font-size: 16px; }
  .wiz-banner { padding: 8px 10px; margin-bottom: 12px; }
  .wiz-banner .btn { width: 100%; justify-content: center; }
  /* the packages' sticky bar inside the step: compact, so the list it saves stays in view */
  .nyp .confirm-bar { padding: 8px 10px; gap: 4px 10px; }
  .nyp .confirm-bar .btn { min-height: 34px; padding: 5px 10px; font-size: 13px; }
  .nyp .confirm-bar .btn-row { gap: 6px; }
  /* Save / Reset / Discard on one row (the full names are their accessible names) */
  .nyp .confirm-bar .lbl-long { display: none; }
  .nyp .confirm-bar .lbl-short { display: inline; }
  .nyg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 8px; }
  .nyg-num { flex: 0 0 auto; min-width: 1.4em; }
  .nyg-who { flex: 1 1 0; }
  .nyg-ctl { flex: 1 1 100%; }
  .nyg-ctl select { flex: 1 1 auto; width: 0; max-width: none; }
  .nyg-out .nyg-ctl { flex: 1 1 100%; }
  .ny-kv li b { display: block; min-width: 0; }
  .md-date { min-width: 0; }
  /* Home: your own timeline as a vertical list (no sideways scrolling): label and state, then the dates */
  .mytl { flex-direction: column; }
  .mt-step { flex: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding: 0 0 12px 26px; }
  .mt-step:last-child { padding-bottom: 0; }
  .mt-step::before { top: 14px; bottom: -2px; left: 6px; right: auto; width: 2px; height: auto; }
  .mt-step:last-child::before { display: none; }
  .mt-dot { top: 2px; }
  .mt-when { flex: 1 1 100%; order: 2; }
  .mt-step .btn-demo { margin-top: 0; }

  /* simple two-column tables stack into labelled rows */
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtable, .rtable tbody, .rtable tr, .rtable th, .rtable td { display: block; width: 100%; }
  .rtable tr { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
  .rtable th, .rtable td { padding: 1px 0; border: 0; }
  .rtable td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12.5px; }

  .sheet { padding: 18px 14px; }
  .ps-summary { grid-template-columns: repeat(2, 1fr); }
  .ps-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ps-who { text-align: left; }
  .ps-foot { flex-direction: column; }
  .tl-label { min-width: 0; }
  .blocks { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .day-panel { transition: none; }
}

/* CSV copy box (shared-link fallback for downloads) */
.csv-box { width: 100%; min-height: 10em; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow: auto; }