/* The Roster — mobile-first app styling. System fonts only (no CDN). */

:root {
  --bg: #f4f1ea;
  --bg-card: #ffffff;
  --bg-elev: #faf7f0;
  --ink: #1a1612;
  --ink-dim: #6b6258;
  --ink-faint: #a39a8e;
  --line: #d9d2c4;
  --accent: #c8553d;
  --accent-deep: #8b3a26;
  --accent-soft: #fdf0ec;
  --green: #5a7a3a;
  --green-soft: #e8f0d8;
  --amber: #c89544;
  --amber-soft: #fef3e0;
  --blue: #3d5a7a;
  --blue-soft: #e0e8f0;
  --purple: #6b4a7a;
  --purple-soft: #ede4f0;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --maxw: 560px;
  --tabh: 62px;
}

/* ───────── theme: slate (grey/silver + blue, opt-in per business) ───────── */
body.theme-slate {
  --bg: #eceef1;
  --bg-card: #ffffff;
  --bg-elev: #f5f6f8;
  --ink: #1c2b4a;
  --ink-dim: #5b6b85;
  --ink-faint: #9aa5b5;
  --line: #dde1e7;
  --accent: #3a7bd5;
  --accent-deep: #2456a0;
  --accent-soft: #e7f0fb;
}

/* ───────── dark mode: follows the device automatically, keeps each
   business's accent color (warm rust for Classic, blue for Slate) ───────── */
@media (prefers-color-scheme: dark) {
  body:not(.theme-slate) {
    --bg: #211c16;
    --bg-card: #2b241c;
    --bg-elev: #342c22;
    --ink: #f1ebe0;
    --ink-dim: #b7ab99;
    --ink-faint: #7d7261;
    --line: #453b2e;
    --accent: #e2896a;
    --accent-deep: #c86a4a;
    --accent-soft: #3a2a20;
    --green: #8ec26c;
    --green-soft: #26301c;
    --amber: #dcb15c;
    --amber-soft: #3a2f18;
    --blue: #7badd9;
    --blue-soft: #202c3a;
    --purple: #b891d1;
    --purple-soft: #2d2438;
  }

  body.theme-slate {
    --bg: #171a20;
    --bg-card: #1f232b;
    --bg-elev: #262b34;
    --ink: #e7ebf1;
    --ink-dim: #a6afbd;
    --ink-faint: #707a89;
    --line: #333a45;
    --accent: #5b9ee6;
    --accent-deep: #3d7bc4;
    --accent-soft: #1c2a3d;
    --green: #8ec26c;
    --green-soft: #212b1c;
    --amber: #dcb15c;
    --amber-soft: #332a19;
    --blue: #6fa8dc;
    --blue-soft: #1c2733;
    --purple: #b48ed1;
    --purple-soft: #2a2233;
  }

  /* these were hardcoded for light pastel backgrounds (#8a5a1c on pale
     amber, #3d5520 on pale green) and went dark-on-dark once the soft
     backgrounds flipped — reuse the theme's own amber/green instead */
  .badge-pending, .swapbadge-accepted-pending-mgr, .btn-amber {
    color: var(--amber);
  }
  .badge-approved, .swapbadge-approved {
    color: var(--green);
  }

  /* blackout used a near-black fixed color that read fine against a light
     page but nearly disappears against an already-dark background */
  .cal-cell.is-blackout, .sw-blackout, .blackout-box {
    background: #120d0a;
    border-color: #120d0a;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ic { display: inline-block; vertical-align: -0.18em; flex: none; }
.mono { font-family: var(--font-mono); }
.display-lg { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
.display-xl { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.display-xl em { font-style: italic; color: var(--accent); }
.kicker { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.35rem; }
.muted { color: var(--ink-dim); font-size: 0.9rem; }
.muted.sm { font-size: 0.78rem; color: var(--ink-faint); }
.hint { color: var(--ink-faint); font-size: 0.78rem; margin: 0.6rem 0 0; }

/* ───────── app frame ───────── */
.app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: calc(env(safe-area-inset-top) + 0.6rem) 1rem 0.6rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.appbar-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--bg); flex: none;
}
.brand-mark.lg { width: 44px; height: 44px; border-radius: 11px; }
.appbar-brand .brand-mark { border: 2px solid var(--accent); }
.brand-text { min-width: 0; display: flex; flex-direction: column; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-name.lg { font-size: 1.35rem; }
.brand-sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-action {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim); border: 1px solid var(--line); background: var(--bg-card);
}
.appbar-action:active { background: var(--ink); color: var(--bg); }

.screen {
  flex: 1;
  padding: 1.1rem 1rem calc(var(--tabh) + env(safe-area-inset-bottom) + 1.4rem);
}

/* ───────── bottom tab bar ───────── */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--maxw);
  z-index: 40;
  display: flex;
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--tabh);
  color: var(--ink-dim);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
}
.tab.is-active { color: var(--ink); }
.tab.is-active .tab-ic { color: var(--accent); }
.tab-ic { position: relative; }
.tab-label { text-transform: uppercase; }
.tab-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 0.64rem; line-height: 16px; text-align: center;
}

/* ───────── home screen ───────── */
.home-list { display: flex; flex-direction: column; gap: 0.7rem; }
.home-row {
  display: flex; align-items: center; gap: 0.9rem; padding: 1rem;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px;
}
.home-row:active { background: var(--bg-elev); }
.home-icon {
  position: relative; width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--bg);
}
.home-label { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--accent); }
.home-chevron { color: var(--ink-faint); flex: none; }

/* ───────── headings / sections ───────── */
.lead { margin-bottom: 1.1rem; }
.lead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.section-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 0.6rem; }
.block { margin: 1.4rem 0; scroll-margin-top: calc(env(safe-area-inset-top) + 4.5rem); }
.block > .kicker { margin-bottom: 0.5rem; }

/* ───────── buttons ───────── */
.btn-dark, .btn-outline, .btn-green, .btn-amber, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; padding: 0 1rem; border-radius: 11px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  border: 2px solid transparent; transition: opacity .15s, background .15s;
}
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:active { opacity: 0.85; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline.danger { color: var(--accent-deep); border-color: var(--accent-deep); }
.btn-green { background: var(--green); color: #fff; }
.btn-amber { background: transparent; color: #8a5a1c; border-color: var(--amber); }
.btn-ghost { background: transparent; color: var(--ink-dim); min-height: 40px; padding: 0 0.7rem; border-radius: 9px; text-transform: uppercase; font-size: 0.72rem; }
.btn-ghost.danger { color: var(--accent-deep); }
.btn-dark[disabled], .btn-green[disabled] { opacity: 0.4; }
.block { /* override for buttons */ }
.btn-dark.block, .btn-outline.block, .btn-green.block, .btn-amber.block { display: flex; width: 100%; margin-top: 0.6rem; }
.grow { flex: 1; display: flex; }
.grow > .block { margin-top: 0; }

/* ───────── forms ───────── */
.field, .passcode-input, .composer-input {
  width: 100%; padding: 0.7rem 0.8rem; font-size: 16px;
  border: 2px solid var(--line); border-radius: 11px; background: var(--bg-elev);
  color: var(--ink); outline: none;
}
.field { margin-bottom: 0.6rem; }
.field:focus { border-color: var(--ink); }
.field::placeholder { color: var(--ink-faint); }
textarea.field { resize: vertical; line-height: 1.4; }
.field-label { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin: 0.9rem 0 0.35rem; }
.field-label.blue { color: var(--blue); }
.field-label.accent { color: var(--accent-deep); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.grid-add { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; margin-top: 0.6rem; }
.seg { display: flex; gap: 0.4rem; margin: 0.2rem 0 0.4rem; }
.seg-wrap { flex-wrap: wrap; }
.seg-opt { flex: 1; position: relative; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span {
  display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 0.6rem;
  border: 2px solid var(--line); border-radius: 10px; background: transparent;
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; text-align: center;
}
.seg-opt input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ───────── cards ───────── */
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem; margin-bottom: 1rem; }
.card.is-archived { background: var(--bg-elev); opacity: 0.9; }
.cardlist { display: flex; flex-direction: column; gap: 0.7rem; }
.cardgrid { display: flex; flex-direction: column; gap: 0.8rem; }

/* ───────── chips / filters ───────── */
.chips { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.5rem; margin: 0.2rem 0 1rem; -webkit-overflow-scrolling: touch; }
.chip {
  flex: none; padding: 0.4rem 0.75rem; border: 1px solid var(--accent); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent);
  white-space: nowrap; background: var(--bg-card);
}
.chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ───────── badges / tags ───────── */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.5rem; border-radius: 7px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.badge-pending { background: var(--amber-soft); color: #8a5a1c; }
.badge-approved { background: var(--green-soft); color: #3d5520; }
.badge-denied { background: var(--accent-soft); color: var(--accent-deep); }
.badge-canceled { background: var(--bg-elev); color: var(--ink-dim); }
.swapbadge-open { background: var(--blue-soft); color: var(--blue); }
.swapbadge-accepted-pending-mgr { background: var(--amber-soft); color: #8a5a1c; }
.swapbadge-approved { background: var(--green-soft); color: #3d5520; }
.tag-archived { padding: 0.2rem 0.45rem; border-radius: 6px; background: var(--ink-faint); color: #fff; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; text-transform: uppercase; }
.role-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); }
.role-FOH { color: var(--blue); }
.role-BOH { color: var(--accent-deep); }

/* ───────── avatars ───────── */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none; }
.av-sm { width: 30px; height: 30px; font-size: 0.7rem; }
.av-md { width: 42px; height: 42px; font-size: 0.85rem; }
.av-lg { width: 52px; height: 52px; font-size: 1rem; }
.av-mgr { background: var(--purple); }
.av-foh { background: var(--blue); }
.av-boh { background: var(--accent-deep); }
.av-none { background: var(--ink); }
.av-group { background: var(--ink); }
.av-new { background: var(--bg-card); border: 2px dashed var(--line); color: var(--ink-dim); }

/* ───────── empty / dashed ───────── */
.empty { border: 2px dashed var(--line); border-radius: 16px; padding: 2rem 1.2rem; text-align: center; margin: 1rem 0; }
.empty-ic { color: var(--ink-faint); display: flex; justify-content: center; margin-bottom: 0.6rem; }
.empty-title { color: var(--ink-dim); margin: 0 0 0.3rem; }
.empty-hint { color: var(--ink-faint); font-size: 0.85rem; margin: 0; }
.dashed { border: 2px dashed var(--line); border-radius: 16px; padding: 1.6rem; text-align: center; color: var(--ink-dim); margin: 1rem 0; }
.dashed .ic { color: var(--ink-faint); margin-bottom: 0.5rem; }
.dashed p { margin: 0; font-size: 0.9rem; }

/* ───────── stats ───────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 1.1rem 0; }
.stat { background: var(--bg-card); padding: 1rem 0.8rem; text-align: left; }
.stat-l { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.stat-v { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; margin-top: 0.3rem; }
.stat-amber .stat-v { color: var(--amber); }
.stat-green .stat-v { color: var(--green); }
.stat-faint .stat-v { color: var(--ink-faint); }

/* ───────── calendar ───────── */
.cal { margin: 0.5rem 0; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.cal-arrow { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); }
.cal-arrow:active { background: var(--ink); color: var(--bg); }
.cal-month { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; text-align: center; }
.cal-kicker { display: block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-wd { text-align: center; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim); padding-bottom: 4px; }
.cal-blank { aspect-ratio: 1; }
.cal-cell {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--ink); font-family: var(--font-display); font-weight: 500; position: relative;
}
.cal-day { font-size: 0.95rem; }
.cal-sub { font-family: var(--font-mono); font-size: 0.6rem; opacity: 0.85; }
.cal-event-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.cal-cell.is-past { background: transparent; border-color: transparent; color: var(--ink-faint); }
.cal-cell.is-blackout { background: #2a2622; border-color: #2a2622; color: #fff; }
.cal-cell.is-selected { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cal-cell.is-mine { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
.cal-cell.is-full { background: var(--bg-elev); color: var(--ink-faint); }
.cal-cell.is-filling { background: var(--amber-soft); border-color: #e8c891; }
.cal-cell.is-mfull { background: var(--accent-soft); border-color: var(--accent); }
.cal-cell.readonly { cursor: default; }
.c-foh { color: var(--blue); }
.c-boh { color: var(--accent-deep); }

/* ───────── weekly schedule grid ───────── */
.sched-wrap { overflow: auto; -webkit-overflow-scrolling: touch; margin: 0.5rem 0 1rem; border: 1px solid var(--line); border-radius: 14px; max-height: 62vh; }
.sched-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
.sched-grid th, .sched-grid td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; text-align: left; vertical-align: top; }
.sched-grid thead th { border-top: 1px solid var(--line); }
.sched-grid th:first-child, .sched-grid td:first-child { border-left: 1px solid var(--line); }
.sched-corner { background: var(--bg-card); position: sticky; left: 0; top: 0; z-index: 3; min-width: 108px; }
.sched-dh { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); background: var(--bg-elev); white-space: nowrap; padding: 0.5rem; position: sticky; top: 0; z-index: 2; }
.sched-dh-date { display: block; font-size: 0.64rem; color: var(--ink-faint); margin-top: 2px; }
.sched-dh.is-today { background: var(--accent-soft); color: var(--accent-deep); }
.sched-dh.is-today .sched-dh-date { color: var(--accent); }
.sched-name { position: sticky; left: 0; z-index: 1; background: var(--bg-card); font-weight: 600; font-size: 0.85rem; white-space: nowrap; padding: 0.5rem; }
.sched-name.is-mine { background: color-mix(in srgb, var(--accent) 15%, var(--bg-card)); }
.sched-section td { background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45rem 0.5rem; }
.sched-cell { min-width: 84px; }
.sched-cell.is-mine { background: color-mix(in srgb, var(--accent) 15%, var(--bg-card)); }
.sched-cell.is-off { background: var(--bg-elev); }
.sched-cell.is-selected { background: var(--accent-soft); }
.sched-cell-link { display: block; padding: 0.5rem; min-height: 44px; color: inherit; text-decoration: none; }
.off-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.shift-block { display: block; margin-bottom: 0.3rem; }
.shift-start { font-weight: 600; font-size: 0.8rem; color: var(--ink); }
.shift-sep { font-size: 0.72rem; color: var(--ink-faint); margin: 0 0.15rem; }
.shift-end { font-size: 0.78rem; color: var(--ink-faint); }
.shift-note { display: block; font-size: 0.68rem; color: var(--ink-dim); font-style: italic; white-space: normal; }
.shift-form { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.sched-cell.is-partial-off { background: color-mix(in srgb, var(--bg-elev) 55%, transparent); }
.off-partial-label { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.15rem; }
.posted-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; }
.posted-tag { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.4rem 0.7rem; border-radius: 8px; background: var(--bg-elev); color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; width: fit-content; }
.btn-outline.sm, .btn-green.sm { min-height: 36px; padding: 0 0.7rem; font-size: 0.72rem; }

/* time-off partial-day toggle + window display */
.toggle-row { display: flex; gap: 1rem; margin: 0 0 0.6rem; font-size: 0.85rem; }
.toggle-opt { display: flex; align-items: center; gap: 0.35rem; }
.req-window, .minirow-window { display: block; font-size: 0.76rem; color: var(--ink-dim); }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.8rem; font-size: 0.72rem; color: var(--ink-dim); }
.legend .lg { display: flex; align-items: center; gap: 0.3rem; }
.sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); display: inline-block; }
.sw-open { background: var(--bg-card); }
.sw-filling { background: var(--amber-soft); border-color: #e8c891; }
.sw-full { background: var(--bg-elev); }
.sw-mfull { background: var(--accent-soft); border-color: var(--accent); }
.sw-blackout { background: #2a2622; border-color: #2a2622; }
.sw-event { background: var(--purple); border-color: var(--purple); border-radius: 50%; }
.sw-mine { background: var(--accent); border-color: var(--accent-deep); }

/* ───────── selected day panel ───────── */
.sel-date { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin: 0.2rem 0 0.6rem; }
.counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.6rem 0 1rem; }
.count { border: 1px solid var(--line); border-radius: 11px; padding: 0.6rem; text-align: center; }
.count-foh { background: var(--blue-soft); }
.count-boh { background: var(--accent-soft); }
.count-l { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; }
.count-foh .count-l { color: var(--blue); }
.count-boh .count-l { color: var(--accent-deep); }
.count-v { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.blackout-box { background: #2a2622; color: #fff; border-radius: 12px; padding: 1.1rem; }
.full-box { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px; padding: 1.1rem; color: var(--accent-deep); }
.event-box { background: var(--purple-soft); border: 1px solid var(--purple); border-radius: 12px; padding: 1.1rem; color: var(--purple); margin-bottom: 0.8rem; }
.bx-title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 0.4rem 0 0.2rem; }
.blackout-box p, .full-box p, .event-box p { margin: 0; font-size: 0.85rem; opacity: 0.9; }
.sel-existing { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 11px; padding: 0.8rem; margin-bottom: 0.7rem; }

/* mini list */
.minilist { display: flex; flex-direction: column; gap: 0.5rem; }
.minirow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-card); }

/* checkbox list (new-group participant picker) */
.check-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 1rem; max-height: 320px; overflow-y: auto; }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-card); font-size: 0.9rem; }
.check-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.minirow-main { min-width: 0; }
.minirow-date { display: block; font-weight: 600; font-size: 0.9rem; }
.minirow-reason { display: block; font-size: 0.76rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───────── request cards ───────── */
.req-top, .swap-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.req-meta { display: flex; align-items: center; gap: 0.4rem; }
.req-name, .swap-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.req-when { font-weight: 600; font-size: 0.9rem; margin-top: 0.1rem; }
.req-reason { font-style: italic; color: var(--ink-dim); font-size: 0.88rem; margin: 0.5rem 0; }
.req-note { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-dim); background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.5rem; margin: 0.5rem 0; }
.req-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; align-items: stretch; }
.req-actions form { display: flex; }

/* ───────── swaps ───────── */
.swap-from { margin-bottom: 0.6rem; }
.swap-name { display: block; }
.swap-leg { border-left: 3px solid var(--accent); padding-left: 0.7rem; margin: 0.5rem 0; }
.swap-leg.leg-blue { border-left-color: var(--blue); }
.swap-when { font-weight: 600; font-size: 0.9rem; }
.swap-shift { font-size: 0.82rem; color: var(--ink-dim); }
.swap-offer { display: flex; align-items: center; gap: 0.4rem; background: var(--amber-soft); border-radius: 9px; padding: 0.5rem 0.6rem; font-size: 0.82rem; margin: 0.6rem 0; }
.waiting { width: 100%; text-align: center; font-style: italic; color: var(--ink-dim); font-size: 0.82rem; padding: 0.5rem; }
.newswap-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.link-muted { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; color: var(--ink-dim); }

/* ───────── messages / chat ───────── */
.chat { display: flex; flex-direction: column; height: calc(100dvh - var(--tabh) - env(safe-area-inset-bottom) - 110px); min-height: 420px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg-card); }
.rail { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.6rem; border-bottom: 1px solid var(--line); background: var(--bg-elev); -webkit-overflow-scrolling: touch; }
.rail-item { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; position: relative; }
.rail-item.is-active .avatar { outline: 2px solid var(--ink); outline-offset: 2px; }
.rail-name { font-size: 0.64rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 54px; }
.rail-badge { position: absolute; top: -3px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 0.62rem; line-height: 16px; text-align: center; }
.chat-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.chat-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.chat-sub { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-dim); }
.stream { flex: 1; overflow-y: auto; padding: 0.9rem; background: var(--bg-card); display: flex; flex-direction: column; gap: 0.5rem; }
.stream-empty { margin: auto; text-align: center; color: var(--ink-faint); }
.stream-empty .ic { opacity: 0.5; margin-bottom: 0.5rem; }
.sysnotice { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.sysnotice span { background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-dim); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.72rem; }
.sysnotice .bubble-img { max-width: 160px; margin: 0; cursor: pointer; }
.bubble-row { display: flex; }
.bubble-row.right { justify-content: flex-end; }
.bubble { max-width: 78%; padding: 0.5rem 0.7rem; border-radius: 13px; background: var(--bg-elev); border: 1px solid var(--line); }
.bubble.mine { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bubble-from { font-size: 0.68rem; font-weight: 700; margin-bottom: 2px; }
.from-manager { color: var(--purple); }
.from-FOH { color: var(--blue); }
.from-BOH { color: var(--accent-deep); }
.bubble-body { margin: 0; font-size: 0.9rem; word-break: break-word; }
.bubble-img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin-bottom: 0.35rem; }
.bubble-time { display: block; text-align: right; font-family: var(--font-mono); font-size: 0.62rem; opacity: 0.6; margin-top: 2px; }
.composer { display: flex; padding: 0.6rem; border-top: 1px solid var(--line); }
.composer-form { display: flex; width: 100%; align-items: center; gap: 0.5rem; }
.composer-input { flex: 1; border-radius: 999px; }
.composer-send { width: 46px; height: 46px; padding: 0; flex: none; border: none; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; }
.composer-attach { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-card); color: var(--ink-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.composer-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ───────── admin lists ───────── */
.sec-head { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); margin-bottom: 0.6rem; }
.sec-purple { color: var(--purple); }
.sec-blue { color: var(--blue); }
.sec-accent { color: var(--accent); }
.userlist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-card); }
.userrow { border-top: 1px solid var(--line); padding: 0.7rem 0.8rem; }
.userrow:first-child { border-top: none; }
.userrow-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.userrow-id { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.userrow-name { font-weight: 600; }
.userrow-role { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); }
.actual-adjusted { font-weight: 700; font-size: 0.76rem; color: var(--accent-deep); }
.userrow-act { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.link-danger { background: none; border: none; color: var(--accent-deep); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; }
.userrow-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.btnset { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.optform { display: inline-flex; }
.optbtn { padding: 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; }
.optbtn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.preview { border-top: 1px solid var(--line); margin-top: 0.9rem; padding-top: 0.8rem; font-size: 0.85rem; }
.preview .kicker { margin-bottom: 0.3rem; }

/* ───────── appearance picker swatches ───────── */
.theme-preview { display: flex; gap: 0.4rem; margin: 0.7rem 0; }
.theme-dot { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); display: inline-block; }
.theme-dot-classic-bg { background: #f4f1ea; }
.theme-dot-classic-accent { background: #c8553d; }
.theme-dot-slate-bg { background: #eceef1; }
.theme-dot-slate-accent { background: #3a7bd5; }

/* ───────── login ───────── */
.login-body { background: var(--bg); }
.login-wrap { max-width: var(--maxw); margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 0.5rem) 1.1rem env(safe-area-inset-bottom); }
.login-head { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.brand-italic { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent); font-size: 0.95rem; }
.brand-kicker { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); margin-top: 3px; }
.login-main { flex: 1; padding: 1.6rem 0; }
.login-lead { margin-bottom: 1.8rem; }
.login-section { margin-bottom: 1.8rem; }
.pick-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.pick-card-form { display: block; }
.pick-card { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-card); color: var(--ink); }
.pick-card:active { background: var(--ink); color: var(--bg); }
.pick-meta { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.55; }
.pick-name { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; flex: 1; margin-left: 0.2rem; }
.pick-card .pick-meta { order: 0; }
.pick-card { flex-wrap: wrap; }
.pick-name { flex-basis: 100%; }
.pick-go { opacity: 0.4; }
.back-link { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); margin-bottom: 1.4rem; }
.passcode-card { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); padding: 1.6rem; max-width: 420px; }
.passcode-ic { color: var(--accent); display: block; margin-bottom: 0.6rem; }
.passcode-input { font-family: var(--font-mono); letter-spacing: 0.3em; font-size: 1.3rem; text-align: center; margin: 1rem 0; }
.login-foot { padding: 1rem 0; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }

/* ───────── toast ───────── */
.toast {
  position: fixed; top: calc(env(safe-area-inset-top) + 0.8rem); left: 50%; transform: translateX(-50%);
  z-index: 60; max-width: calc(var(--maxw) - 2rem); width: max-content;
  padding: 0.7rem 1rem; border-radius: 11px; color: #fff; font-size: 0.85rem; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); animation: toastIn .25s ease-out;
}
.toast-info { background: var(--ink); }
.toast-success { background: var(--green); }
.toast-error { background: var(--accent-deep); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ───────── personal section (details) ───────── */
.personal { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); margin-bottom: 1.2rem; overflow: hidden; }
.personal > summary { list-style: none; display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; cursor: pointer; }
.personal > summary::-webkit-details-marker { display: none; }
.personal-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.personal-head { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.personal-title { font-family: var(--font-display); font-weight: 600; }
.personal-sub { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-dim); }
.personal-caret { color: var(--ink-dim); transition: transform .2s; }
.personal[open] .personal-caret { transform: rotate(90deg); }
.personal-body { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }