/* ==========================================================================
   Cedar Shifts: design system

   Calm and flat, in the colours of the Cedar Shifts Hiring Deck (Evan's
   redesign kit, 2026-09-29): Mist pages with white cards and hairlines,
   Pine ink, Deep Juniper for the primary action and links, Juniper Tint
   for what's covered or picked, and Saffron, the one warm accent, used
   sparingly and never as text on a light ground. Grey-green fills for
   inputs and secondary buttons, soft radii, SVG icons, short, quiet motion.
   Montserrat for the interface; the name beside the hourglass mark is
   Georgia (Gelasio where Georgia is missing), as the kit's logo lockup is.

   The logo is web/img/mark.svg (mark-on-dark.svg on Pine, app-icon.svg for
   the favicon); never redrawn here, only placed.

   Every colour is a token with a dark twin, built on Pine. The page follows the device
   (prefers-color-scheme) unless someone picks Light or Dark in the account
   menu, which sets data-theme on <html> (a one-line script in each page's
   head applies it before first paint, so nothing flashes).
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #f4f5f1;          /* Mist */
  --card: #ffffff;
  --panel: #e9ece6;       /* Sunken */
  --panel-2: #e0e4dd;
  --panel-3: #d5dad3;
  --ink: #17201c;         /* Pine */
  --ink-2: #2e3833;
  --muted: #56615b;
  --faint: #7b8680;
  --line: #d5dad3;
  --line-2: #bcc4bb;

  --accent: #0a4f34;      /* Deep Juniper */
  --accent-2: #073e28;
  --accent-soft: #e1f2e8; /* Juniper Tint */
  --accent-ink: #ffffff;

  --inverse: #17201c;
  --inverse-2: #2e3833;
  --inverse-ink: #f4f5f1;

  --ok: #1b7a50;
  --ok-soft: #e1f2e8;
  --warn: #8a5d00;        /* Saffron is never text on a light ground */
  --warn-soft: #fcf0cc;
  --bad: #bf3a2d;
  --bad-soft: #fcebe8;
  --event: #6a4fd6;
  --event-soft: #f0ecfd;
  --amber: #f1c039;       /* Saffron: fills only */
  --busy: #2e3833;
  --on-solid: #ffffff;    /* text on a solid ok, warn or bad fill (accent fills use --accent-ink) */
  --sage: var(--ok);      /* older names kept so every rule still resolves */
  --sage-light: var(--ok);
  --sage-pale: var(--ok-soft);
  --mark: url("/img/mark.svg");

  --overlay: rgba(23, 32, 28, 0.44);
  --shadow-1: 0 1px 2px rgba(23, 32, 28, 0.08);
  --shadow-2: 0 10px 28px rgba(23, 32, 28, 0.12), 0 2px 6px rgba(23, 32, 28, 0.06);
  --shadow-3: 0 28px 72px rgba(23, 32, 28, 0.22), 0 6px 18px rgba(23, 32, 28, 0.1);

  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  --sans: "Montserrat", "Gotham SSm", "Gotham", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: var(--sans);   /* one family for the interface */
  --display: Georgia, "Gelasio", "Times New Roman", serif;  /* the name in the logo lockup */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --control: 40px;
  --control-sm: 32px;
  --control-lg: 48px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --topbar-h: 60px;
}

/* the dark twin, twice: once for "follow the device", once for "always dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1512;
    --card: #17201c;      /* Pine */
    --panel: #1f2a25;
    --panel-2: #27342e;
    --panel-3: #313f38;
    --ink: #f4f5f1;       /* Mist */
    --ink-2: #d5dad3;
    --muted: #a7b2ac;
    --faint: #7b8680;
    --line: #26322c;
    --line-2: #36443d;
    --accent: #8fd1ae;    /* Light Juniper: Bright Juniper is too dark for small text */
    --accent-2: #a8dec1;
    --accent-soft: rgba(143, 209, 174, 0.15);
    --accent-ink: #0f1512;
    --inverse: #f4f5f1;
    --inverse-2: #d5dad3;
    --inverse-ink: #17201c;
    --ok: #6cc796;
    --ok-soft: rgba(108, 199, 150, 0.15);
    --warn: #f1c039;      /* Saffron reads on Pine */
    --warn-soft: rgba(241, 192, 57, 0.14);
    --bad: #f27167;
    --bad-soft: rgba(242, 113, 103, 0.16);
    --event: #a693f6;
    --event-soft: rgba(166, 147, 246, 0.17);
    --amber: #f1c039;
    --busy: #c9d1cb;
    --mark: url("/img/mark-on-dark.svg");
    --on-solid: #0f1512;  /* these fills are light in the dark, so dark ink reads */
    --overlay: rgba(0, 0, 0, 0.62);
    --shadow-1: none;
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-3: 0 28px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1512;
  --card: #17201c;
  --panel: #1f2a25;
  --panel-2: #27342e;
  --panel-3: #313f38;
  --ink: #f4f5f1;
  --ink-2: #d5dad3;
  --muted: #a7b2ac;
  --faint: #7b8680;
  --line: #26322c;
  --line-2: #36443d;
  --accent: #8fd1ae;
  --accent-2: #a8dec1;
  --accent-soft: rgba(143, 209, 174, 0.15);
  --accent-ink: #0f1512;
  --inverse: #f4f5f1;
  --inverse-2: #d5dad3;
  --inverse-ink: #17201c;
  --ok: #6cc796;
  --ok-soft: rgba(108, 199, 150, 0.15);
  --warn: #f1c039;
  --warn-soft: rgba(241, 192, 57, 0.14);
  --bad: #f27167;
  --bad-soft: rgba(242, 113, 103, 0.16);
  --event: #a693f6;
  --event-soft: rgba(166, 147, 246, 0.17);
  --amber: #f1c039;
  --busy: #c9d1cb;
  --mark: url("/img/mark-on-dark.svg");
  --on-solid: #0f1512;
  --overlay: rgba(0, 0, 0, 0.62);
  --shadow-1: none;
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-3: 0 28px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* bigger targets for fingers */
@media (pointer: coarse) {
  :root { --control: 44px; --control-sm: 36px; }
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.sheet-open { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.005em; font-weight: 500; }
h2 { font-size: 22px; }
h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
h4 { font-size: 13px; font-weight: 600; }
p { margin: 0 0 10px; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: currentColor; }
b, strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
::selection { background: var(--accent-soft); }
[hidden] { display: none !important; }

.muted { color: var(--muted); font-size: 13px; }
.muted.lc { text-transform: none; letter-spacing: 0; font-weight: 400; }
.faint { color: var(--faint); }
.tnum { font-variant-numeric: tabular-nums; }
.tight { margin: 0; }
.tight-top { margin-top: -2px; }
.gap-top { margin-top: 14px; }
.gap-top-sm { margin-top: 10px; }
.gap-top-lg { margin-top: 26px; }
.gap-left { margin-left: 10px; }
.self-center { align-self: center; }
.nowrap { white-space: nowrap; }
.status-inline { margin-left: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- icons (inline SVG from ui.js) ---------- */

.i {
  width: 18px; height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -4px;
}
.i .fill { fill: currentColor; stroke: none; }
.i.sm { width: 16px; height: 16px; vertical-align: -3px; }
.i.xs { width: 14px; height: 14px; vertical-align: -2px; }
.i.lg { width: 22px; height: 22px; }
.i.xl { width: 28px; height: 28px; }

/* ---------- top bar ---------- */

header.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 28px;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* The logo lockup, in the kit's proportions: the hourglass mark (0.58 wide
   to 1 tall), then the name in Georgia at 0.66 of the mark's height, 0.24
   of it apart. The mark is the kit's art (--mark swaps it on Pine), never
   drawn in CSS. */
header.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  min-width: 0;
}
.brand-mark {
  width: 18.5px; height: 32px;
  background: var(--mark) center / contain no-repeat;
  flex: none;
}
.brand-name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.brand-biz { font-size: 13px; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.brand-biz:not(:empty)::before { content: "·"; margin: 0 10px 0 2px; color: var(--line-2); }
header.topbar .page-kicker { margin-left: auto; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 500; }

header.topbar nav { display: flex; gap: 4px; }
header.topbar nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
header.topbar nav a:hover { background: var(--panel); color: var(--ink); }
header.topbar nav a.active { background: var(--panel); color: var(--ink); font-weight: 600; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; }

.search-btn {
  height: 36px;
  gap: 8px;
  padding: 0 10px 0 12px;
  color: var(--muted);
  background: var(--panel);
  font-size: 13px;
  font-weight: 500;
  min-width: 190px;
  justify-content: flex-start;
}
.search-btn kbd {
  margin-left: auto;
  font: 600 11px var(--sans);
  color: var(--faint);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}

.user-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  height: auto;
}
.user-btn:hover { background: var(--panel); }
.user-btn .caret { opacity: 0.55; }
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--inverse);
  color: var(--inverse-ink);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
}
.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  padding: 6px;
  display: none;
  z-index: 50;
}
.user-menu.open { display: block; animation: pop-in 140ms var(--ease); }
.user-menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu .who b { display: block; font-size: 13px; font-weight: 600; word-break: break-all; }
.user-menu > button, .user-menu > a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left;
  padding: 0 10px;
  height: 38px;
  border: 0; background: none;
  border-radius: var(--r-sm);
  font: inherit; font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
  justify-content: flex-start;
}
.user-menu > button:hover, .user-menu > a:hover { background: var(--panel); color: var(--ink); }
.user-menu .menu-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 8px 10px 6px; }
.user-menu .seg { display: flex; margin: 0 6px 6px; }
.user-menu .seg > button { flex: 1; justify-content: center; }
.user-menu .menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* ---------- layout ---------- */

main { max-width: 1240px; margin: 30px auto 120px; padding: 0 28px; }
main.narrow { max-width: 760px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .title { font-size: 30px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 720px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; flex-wrap: wrap; }
.head-actions input { width: 260px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.card > h3:first-child { margin-top: 0; }
.card > h3:not(:first-child) { margin-top: 26px; }
.card-tight { padding: 16px 18px; }
.card.flat { background: var(--panel); border-color: transparent; }
.card-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.card-head-row h3 { margin-bottom: 4px; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 16px; }
.card-head .sub { color: var(--muted); font-size: 13px; }

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.section-label .tag, .section-label .count { text-transform: none; letter-spacing: 0; }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 150px; }
.row.align-end { align-items: flex-end; }
.row > .grow-0 { flex: 0 0 auto; min-width: 0; }
.stack > * + * { margin-top: 10px; }
.hstack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vstack { display: flex; flex-direction: column; gap: 12px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 18px; align-items: start; }

/* ---------- forms ---------- */

label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.field { margin-bottom: 14px; }
.field > .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.field > .err { font-size: 12.5px; color: var(--bad); margin-top: 6px; }
.field-label { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.field-label .opt { font-weight: 400; color: var(--faint); }

input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0 14px;
  height: var(--control);
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
textarea { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { background: var(--panel-2); }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background: var(--panel); opacity: 0.75; cursor: not-allowed; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237b8680' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
select[multiple] { height: auto; padding: 6px 8px; background-image: none; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; vertical-align: -3px; box-shadow: none; }
input[type="date"], input[type="time"], input[type="datetime-local"] { padding-right: 10px; }
input.narrow, select.narrow { max-width: 200px; }
input.tiny { max-width: 110px; }
.inline-select { width: auto; height: var(--control-sm); padding: 0 30px 0 10px; font-size: 13px; background-position: right 9px center; }
.inline-edit { height: var(--control-sm); font-size: 13px; padding: 0 10px; max-width: 170px; background: transparent; }
.inline-edit:hover { background: var(--panel); }
.inline-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; height: var(--control); cursor: pointer; }

/* an input with an icon or button tucked inside it */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > input { padding-right: 44px; }
.input-wrap > .i { position: absolute; left: 12px; color: var(--faint); pointer-events: none; }
.input-wrap > .i + input { padding-left: 38px; }
.input-wrap > button.icon { position: absolute; right: 4px; height: calc(var(--control) - 8px); width: calc(var(--control) - 8px); background: transparent; }
.input-wrap > button.icon:hover { background: var(--panel-2); }

/* ---------- buttons ---------- */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0 18px;
  height: var(--control);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
button:hover, .btn:hover { background: var(--panel-2); color: var(--ink); }
button:active:not(:disabled) { transform: scale(0.985); }
button:focus-visible, .btn:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

button.primary, .btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
button.primary:hover, .btn.primary:hover { background: var(--accent-2); color: var(--accent-ink); }
button.dark, .btn.dark { background: var(--inverse); color: var(--inverse-ink); font-weight: 600; }
button.dark:hover, .btn.dark:hover { background: var(--inverse-2); color: var(--inverse-ink); }
button.danger { color: var(--bad); }
button.danger:hover { background: var(--bad-soft); color: var(--bad); }
button.danger.solid { background: var(--bad); color: var(--on-solid); font-weight: 600; }
button.danger.solid:hover { filter: brightness(1.06); background: var(--bad); color: var(--on-solid); }
button.ghost, .btn.ghost { background: transparent; }
button.ghost:hover, .btn.ghost:hover { background: var(--panel); }
button.outline, .btn.outline { background: transparent; border-color: var(--line-2); }
button.outline:hover, .btn.outline:hover { background: var(--panel); }
button.small, .btn.small { height: var(--control-sm); padding: 0 12px; font-size: 13px; gap: 6px; }
button.large, .btn.large { height: var(--control-lg); padding: 0 24px; font-size: 15px; }
button.icon, .btn.icon { padding: 0; width: var(--control); flex: none; }
button.icon.small, .btn.icon.small { width: var(--control-sm); }
button.block, .btn.block { width: 100%; }
button.link { background: none; border: 0; padding: 0; height: auto; color: var(--accent); font-weight: 600; }
button.link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.row-actions, .btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.btn-row.end { justify-content: flex-end; }

/* a busy button keeps its size and shows a spinner */
button.is-busy { position: relative; color: transparent !important; pointer-events: none; }
button.is-busy::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: var(--muted) transparent var(--muted) transparent;
  animation: spin 0.8s linear infinite;
}
button.primary.is-busy::after { border-color: var(--accent-ink) transparent var(--accent-ink) transparent; }
button.dark.is-busy::after { border-color: var(--inverse-ink) transparent var(--inverse-ink) transparent; }
button.danger.solid.is-busy::after { border-color: var(--on-solid) transparent var(--on-solid) transparent; }

/* ---------- segmented control ---------- */

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel);
  border-radius: var(--r-full);
  max-width: 100%;
}
.seg > a, .seg > button {
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-full);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
}
.seg > a:hover, .seg > button:hover { color: var(--ink); background: var(--panel-2); }
.seg > a.active, .seg > button.active, .seg > button[aria-checked="true"], .seg > button[aria-pressed="true"] {
  background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1);
}
:root[data-theme="dark"] .seg > .active, :root[data-theme="dark"] .seg > [aria-checked="true"] { background: var(--panel-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg > .active, :root:not([data-theme="light"]) .seg > [aria-checked="true"] { background: var(--panel-3); }
}
.seg.block { display: flex; }
.seg.block > * { flex: 1; justify-content: center; }
.seg.sm > a, .seg.sm > button { height: 28px; padding: 0 12px; font-size: 12.5px; }
.subtabs { margin-bottom: 2px; }

/* ---------- chips (toggle buttons) ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  margin: 0;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}
.chip:hover { background: var(--panel-2); color: var(--ink); }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chip:has(input:checked), .chip.on, button.chip[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip .muted { color: inherit; opacity: 0.7; }
.chip.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
button.chip { height: 34px; }
button.chip.sm { height: 28px; }
.chip.day { min-width: 44px; justify-content: center; padding: 0 10px; font-weight: 600; }

/* ---------- switch ---------- */

.switch { display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-weight: 500; color: var(--ink); font-size: 14px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  position: relative; flex: none;
  width: 40px; height: 24px;
  border-radius: var(--r-full);
  background: var(--panel-3);
  transition: background 160ms var(--ease);
}
.switch .track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 180ms var(--ease);
}
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + .track { opacity: 0.5; }

/* ---------- stepper ---------- */

.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--panel); border-radius: var(--r-full); padding: 3px; }
.stepper button { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: transparent; font-size: 16px; }
.stepper button:hover { background: var(--card); }
.stepper output, .stepper input { min-width: 30px; width: 36px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; background: transparent; border: 0; height: 30px; padding: 0; box-shadow: none; }
.stepper input:focus { box-shadow: none; background: var(--card); }

/* ---------- tags / pills ---------- */

.pill, .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--panel);
  color: var(--ink-2);
  white-space: nowrap;
  line-height: 1.55;
}
.pill.ok, .tag.ok { background: var(--ok-soft); color: var(--ok); }
.pill.bad, .tag.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn, .tag.warn { background: var(--warn-soft); color: var(--warn); }
.pill.accent, .tag.accent { background: var(--accent-soft); color: var(--accent); }
.pill.event, .tag.event { background: var(--event-soft); color: var(--event); }
.pill.role, .tag.role { background: var(--panel-2); color: var(--ink-2); text-transform: capitalize; }
.pill.dot::before, .tag.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* a whole sentence in a pill wraps like a sentence */
p.pill { white-space: normal; max-width: 100%; border-radius: var(--r-sm); padding: 6px 12px; }
.count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--panel-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---------- avatars ---------- */

.av {
  --s: 28px;
  --h: 220;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  flex: none;
  font-size: calc(var(--s) * 0.38);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: hsl(var(--h) 24% 91%);
  color: hsl(var(--h) 26% 28%);
  user-select: none;
}
:root[data-theme="dark"] .av { background: hsl(var(--h) 14% 24%); color: hsl(var(--h) 30% 84%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .av { background: hsl(var(--h) 14% 24%); color: hsl(var(--h) 30% 84%); }
}
.av.sm { --s: 22px; }
.av.lg { --s: 40px; }
.av.xl { --s: 56px; }
.av-stack { display: inline-flex; }
.av-stack .av { box-shadow: 0 0 0 2px var(--card); }
.av-stack .av + .av { margin-left: -6px; }
.av-more { background: var(--panel-2); color: var(--muted); }

/* ---------- notices ---------- */

.warnings, .error-box, .notice, .callout {
  border-radius: var(--r);
  padding: 12px 15px;
  margin: 12px 0;
  font-size: 14px;
}
.warnings { background: var(--warn-soft); color: var(--warn); }
.warnings ul { margin: 6px 0 0; padding-left: 18px; }
.error-box { background: var(--bad-soft); color: var(--bad); }
.notice { background: var(--panel); color: var(--ink-2); }
.callout { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); color: var(--ink-2); }
.callout > .i { margin-top: 2px; }
.callout.accent { background: var(--accent-soft); color: var(--ink); }
.callout.accent > .i { color: var(--accent); }
.callout.warn { background: var(--warn-soft); color: var(--warn); }
.callout.ok { background: var(--ok-soft); color: var(--ok); }
.callout.bad { background: var(--bad-soft); color: var(--bad); }
.callout .grow > b { display: block; }
.editor-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 12px; }

.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--muted);
  font-size: 14px;
}
.empty.compact { padding: 20px 10px; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 20px;
  gap: 8px;
}
.empty-state .badge {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--panel); color: var(--ink-2);
  margin-bottom: 6px;
}
.empty-state h3 { font-size: 17px; margin: 0; }
.empty-state p { color: var(--muted); max-width: 420px; margin: 0; }
.empty-state .btn-row { justify-content: center; margin-top: 10px; }
.empty-state.compact { padding: 22px 12px; }

/* ---------- skeleton ---------- */

.skeleton {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 40%, var(--panel) 80%);
  background-size: 300% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.skeleton.block { height: 88px; border-radius: var(--r); }
.skeleton.title { height: 26px; width: 40%; }
.skeleton + .skeleton { margin-top: 10px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- meters ---------- */

.meter { height: 6px; border-radius: var(--r-full); background: var(--panel-2); overflow: hidden; }
.meter > i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: var(--ok); border-radius: inherit; transition: width 300ms var(--ease); }
.meter.bad > i { background: var(--bad); }
.meter.warn > i { background: var(--amber); }
.meter.accent > i { background: var(--accent); }

.ring {
  --p: 0;
  --c: var(--ok);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--panel-2) 0);
  display: grid; place-items: center;
  flex: none;
}
.ring::before { content: ""; grid-area: 1 / 1; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 50%; background: var(--card); }
.ring > span { grid-area: 1 / 1; z-index: 1; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.ring.sm { width: 40px; height: 40px; }
.ring.sm::before { width: calc(100% - 8px); height: calc(100% - 8px); }
.ring.sm > span { font-size: 11px; }

/* ---------- lists ---------- */

.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 10px;
  margin: 0 -10px;
  border-radius: var(--r);
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
.list-item + .list-item::before { content: ""; position: absolute; top: 0; left: 10px; right: 10px; border-top: 1px solid var(--line); }
.list-item.clickable { cursor: pointer; }
.list-item.clickable:hover { background: var(--panel); }
.list-item.clickable:hover::before, .list-item.clickable:hover + .list-item::before { border-color: transparent; }
.list-item .main { flex: 1 1 auto; min-width: 0; }
.list-item .main .t { font-weight: 600; font-size: 14.5px; }
.list-item .main .s { color: var(--muted); font-size: 13px; }
.list-item .chev { color: var(--faint); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.table-foot { padding: 14px 4px 2px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 12px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 100ms ease; }
tbody tr:hover { background: var(--panel); }
td .rowactions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0.7; transition: opacity 120ms ease; }
tr:hover .rowactions { opacity: 1; }
.link-cell { display: flex; align-items: center; gap: 8px; }
.link-cell + .link-cell { margin-top: 6px; }
td .person-name { white-space: nowrap; }
.dash-grid > * { min-width: 0; }

/* ---------- workspace header ---------- */

.schedule-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.schedule-bar .crumb { font-size: 13px; color: var(--muted); }
.schedule-bar .crumb a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.schedule-bar .crumb a:hover { color: var(--ink); }
.schedule-bar .title { font-size: 30px; font-weight: 500; letter-spacing: -0.015em; margin: 4px 0 8px; line-height: 1.15; }
.schedule-bar .meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- overview ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.stat .k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stat .v { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 14px; font-weight: 500; color: var(--muted); }
.stat.alert { background: var(--bad-soft); }
.stat.alert .v, .stat.alert .k { color: var(--bad); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.calendar-export { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; padding: 16px 20px; border-radius: var(--r-lg); background: var(--panel); }
.calendar-export .section-label { margin-bottom: 4px; }
.calendar-export p { margin: 3px 0 0; font-size: 13px; }
.calendar-export .calendar-export-status { font-size: 12px; }
.calendar-export button { flex-shrink: 0; background: var(--inverse); color: var(--inverse-ink); }
.calendar-export button:hover { background: var(--inverse-2); color: var(--inverse-ink); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 0; }
.timeline .when {
  flex: 0 0 50px;
  text-align: center;
  border-radius: var(--r-sm);
  background: var(--panel);
  padding: 5px 0 6px;
}
.timeline .when .d { font-size: 17px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.timeline .when .m { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.timeline .what { flex: 1; min-width: 0; }
.timeline .what .n { font-weight: 600; font-size: 14px; }
.timeline .what .sub { font-size: 12.5px; color: var(--muted); }
.timeline .past { opacity: 0.5; }

/* ---------- month calendar ---------- */

.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-head h2 { font-weight: 500; font-size: 20px; min-width: 190px; text-align: center; }
.cal-legend { margin-left: auto; display: flex; gap: 14px; font-size: 12px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.cal-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.cal-legend .sw.ok { background: var(--ok); }
.cal-legend .sw.event { background: var(--event); }
.cal-legend .sw.bad { background: var(--bad); }
.cal-legend .sw.mine { background: var(--inverse); }
.cal-legend .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 2px; vertical-align: 0; }
.cal-legend .dot.all { background: var(--ok); }
.cal-legend .dot.some { background: var(--amber); }
.cal-legend .dot.none { background: var(--bad); margin-right: 5px; }

/* minmax(0,1fr) is load-bearing: without it the columns size to their content
   and the grid overflows the card it sits in. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 2px 0 6px; }
.cal-cell {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 104px;
  min-width: 0;
  overflow: hidden;
  padding: 7px 8px;
  font-size: 12px;
}
.cal-cell.blank { background: transparent; border: none; }
.cal-cell.today { border-color: var(--ink); }
.cal-cell.out { background: var(--panel); opacity: 0.7; }
.cal-cell .daynum { font-weight: 600; font-size: 12px; margin-bottom: 5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-cell.today .daynum { color: var(--ink); }
.cal-item {
  position: relative;
  border-radius: var(--r-xs);
  padding: 4px 6px;
  margin-bottom: 4px;
  background: var(--ok-soft);
  line-height: 1.35;
  cursor: pointer;
  transition: filter 80ms ease, transform 80ms ease;
}
.cal-item:hover { filter: brightness(0.97); }
.cal-item.short { background: var(--bad-soft); }
.cal-item.event { background: var(--event-soft); }
.cal-item.event.short { background: var(--bad-soft); }
.cal-item.mine { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal-item .lbl {
  font-weight: 600; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-item .who {
  display: flex; align-items: baseline; gap: 5px;
  color: var(--muted); font-size: 10.5px;
  overflow: hidden;
}
.cal-item .who > .names { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item .cnt { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cal-item.short .cnt { color: var(--bad); }
/* top-right dot: have the people on this slot accepted it? green = all of them,
   amber = some, red = nobody yet. No dot when nobody is on it: nothing to accept. */
.cal-item .acc {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--card);
}
.cal-item .acc.all { background: var(--ok); }
.cal-item .acc.some { background: var(--amber); }
.cal-item .acc.none { background: var(--bad); }
.cal-item .acc ~ .lbl { padding-right: 10px; }
/* an assignment left on a day its slot no longer runs */
.cal-item.orphan { border: 1px dashed var(--line-2); background: transparent; opacity: 0.75; }
.cal-item.orphan .cnt { color: var(--warn); }

/* ---------- shifts (assignments editor, until Staffing replaces it) ---------- */

.schedule-day { margin-bottom: 16px; }
.schedule-day h4 {
  display: inline-block;
  background: var(--panel);
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-size: 12.5px;
  margin-bottom: 8px;
  color: var(--ink-2);
}
.slot-line {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 7px 10px;
  border-radius: var(--r-sm);
}
.slot-line:hover { background: var(--panel); }
.slot-line .slot-name { font-weight: 500; min-width: 210px; font-size: 14px; cursor: pointer; }
.slot-line .slot-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.slot-line .pill.ok button { margin-left: 2px; padding: 0 3px; border: 0; background: none; color: inherit; opacity: 0.6; font-size: 12px; height: auto; }
.slot-line .pill.ok button:hover { opacity: 1; background: none; }
.add-inline select { width: auto; height: var(--control-sm); padding: 0 28px 0 10px; font-size: 13px; background-position: right 9px center; }

.shift-row { display: grid; grid-template-columns: 1.4fr auto auto 1fr 64px auto auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.event-row { display: grid; grid-template-columns: 1.4fr auto auto 1fr 64px auto auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.row-more { white-space: nowrap; }
.save-first { font-size: 12px; }

/* a start-end pair of native time pickers, sized to their content */
.time-pair { display: inline-flex; align-items: center; gap: 6px; }
.time-pair input[type="time"] { width: auto; min-width: 0; }
.time-pair .dash { color: var(--muted); }

/* weekday toggles: Mon Tue Wed ... as small chips */
.wd-toggles { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.wd-toggle { position: relative; margin: 0; cursor: pointer; }
.wd-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.wd-toggle span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 32px; padding: 0 8px;
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px; font-weight: 600;
  user-select: none;
  transition: background 100ms ease, color 100ms ease;
}
.wd-toggle:hover span { background: var(--panel-2); color: var(--ink); }
.wd-toggle input:checked + span { background: var(--inverse); color: var(--inverse-ink); }
.wd-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.wd-toggles.compact .wd-toggle span { min-width: 30px; height: 28px; padding: 0 5px; font-size: 11px; }

/* ---------- availability grid ---------- */

.w2m-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.w2m-legend span { display: inline-flex; align-items: center; gap: 6px; }
.w2m-legend .sw { width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--line-2); }
.w2m-legend .sw.busy { background: var(--busy); border-color: var(--busy); }
.w2m-legend .sw.free { background: var(--card); }
.w2m-legend .sw.idle { background: repeating-linear-gradient(45deg, var(--card), var(--card) 3px, var(--panel-2) 3px, var(--panel-2) 6px); }

.w2m-wrap {
  overflow: auto;
  max-height: 68vh;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}
.w2m { border-collapse: separate; border-spacing: 0; width: 100%; user-select: none; }
.w2m.painting { touch-action: none; }

.w2m thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--line-2);
  padding: 8px 6px;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}
.w2m-dow { display: block; font-size: 12px; color: var(--ink); }
.w2m-date { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.w2m-all {
  margin-top: 5px; padding: 0 10px; height: 24px; font-size: 11px; font-weight: 600;
  border-radius: var(--r-full);
  background: var(--card); color: var(--muted); cursor: pointer;
}
.w2m-all:hover { color: var(--ink); background: var(--panel-2); }

.w2m-time {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  background: var(--panel);
  border-right: 1px solid var(--line-2);
  padding: 0 9px 0 8px;
  text-align: right;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 0;
}
.w2m thead .w2m-time { z-index: 3; }
.w2m-end th { border-right: 1px solid var(--line-2); }
.w2m-end td { height: 0; padding: 0; border: 0; border-top: 1px solid var(--line-2); }

.w2m td {
  height: 18px;
  min-width: 62px;
  padding: 0;
  border-bottom: 1px dotted var(--line);
  border-right: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  transition: background 60ms linear;
}
.w2m tr.hour td { border-top: 1px solid var(--line-2); }
.w2m tr:first-child td { border-top: 0; }
.w2m td.idle {
  background: repeating-linear-gradient(45deg, var(--card), var(--card) 3px, var(--panel-2) 3px, var(--panel-2) 6px);
}
.w2m td.out { background: var(--panel); cursor: default; border-right-color: var(--line); }
.w2m td.cell:hover { background: var(--panel-2); }
.w2m td.on, .w2m td.on.idle { background: var(--busy); }
.w2m td.on:hover { background: var(--ink); }
.w2m td.cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.w2m tbody tr:hover { background: transparent; }

.w2m-partials { margin-top: 12px; font-size: 13.5px; }
.w2m-partials:empty { display: none; }
.w2m-partials ul { margin: 6px 0 0; padding-left: 20px; }
.w2m-partials li { margin: 2px 0; }


.ev-hours { white-space: nowrap; }
.ev-parts { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; font-size: 12px; opacity: 0.85; }
.ev-recheck { margin-top: 6px; font-size: 12px; color: var(--warn); }

.copy-link {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  background: var(--panel);
  border-radius: var(--r-xs);
  padding: 4px 8px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
.link-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.check-chip {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 0 14px; height: 36px;
  border-radius: var(--r-full);
  background: var(--panel);
  font-weight: 500; font-size: 13.5px;
  margin: 0; cursor: pointer;
}
.check-chip:hover { background: var(--panel-2); }
.check-chip:has(input:checked) { background: var(--inverse); color: var(--inverse-ink); }
.check-chip:has(input:checked) .muted { color: inherit; opacity: 0.7; }

/* ---------- auth pages ---------- */

.auth-wrap { max-width: 420px; margin: 9vh auto; }
.auth-wrap.wide { max-width: 540px; }
.auth-card { padding: 32px 32px 28px; border-radius: var(--r-xl); }
.auth-wrap h2 { font-weight: 500; font-size: 28px; letter-spacing: -0.015em; margin-bottom: 6px; }
.auth-sub { margin-bottom: 24px; }
.brand-lockup { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; }
.brand-lockup .brand-mark { width: 23px; height: 40px; }
.brand-lockup .brand-name { font-size: 26px; }
.auth-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.auth-actions .primary { flex: 1; }
.auth-actions.wrap { flex-wrap: wrap; }
.auth-foot { margin: 20px 0 0; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-btn { justify-content: center; gap: 10px; }
.google-g { width: 18px; height: 18px; flex: none; }
.auth-done { text-align: center; }
.auth-done .badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: var(--ok-soft); color: var(--ok); }

/* ---------- overlays: sheet, dialog, menu, toast ---------- */

.sheet-layer { position: fixed; inset: 0; z-index: 70; }
.sheet-backdrop {
  position: absolute; inset: 0;
  background: var(--overlay);
  animation: fade-in 180ms ease;
}
.sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  display: flex; flex-direction: column;
  background: var(--card);
  box-shadow: var(--shadow-3);
  animation: sheet-in 240ms var(--ease);
  outline: none;
}
.sheet.sm { width: min(440px, 100vw); }
.sheet.lg { width: min(760px, 100vw); }
.sheet.xl { width: min(1040px, 100vw); }
/* a sheet on its way out must not catch the next click */
.sheet-layer.closing { pointer-events: none; }
.sheet-layer.closing .sheet { animation: sheet-out 180ms ease forwards; }
.sheet-layer.closing .sheet-backdrop { animation: fade-out 180ms ease forwards; }
.sheet-head {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.sheet-titles { flex: 1 1 auto; min-width: 0; }
.sheet-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.sheet-title { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; }
.sheet-sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.sheet-head-actions { display: flex; align-items: center; gap: 6px; margin: -4px -8px 0 0; }
.sheet-status { font-size: 12.5px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 26px; overscroll-behavior: contain; }
.sheet-foot {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.sheet-foot:empty { display: none; }
.sheet-foot .spacer { flex: 1; }
/* saving: the panel stays readable; a thin bar under the title says it's working */
.sheet.saving .sheet-body { pointer-events: none; }
.sheet.saving .sheet-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat;
  background-size: 40% 100%; animation: sheet-saving 900ms linear infinite;
}
@keyframes sheet-saving { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.sheet-section { padding: 18px 0; border-top: 1px solid var(--line); }
.sheet-section:first-child { border-top: 0; padding-top: 2px; }
.sheet-section > .section-label { display: flex; align-items: center; gap: 8px; }
.sheet-handle { display: none; }

@keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-out { to { transform: translateX(40px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

.dialog-layer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.dialog-layer .sheet-backdrop { z-index: 0; }
.dialog {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 22px 22px 18px;
  animation: pop-in 180ms var(--ease);
}
.dialog h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.dialog p { color: var(--ink-2); margin: 0 0 6px; white-space: pre-line; }
.dialog .btn-row { justify-content: flex-end; margin-top: 18px; }

.menu {
  position: fixed;
  z-index: 95;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  min-width: 210px;
  max-width: min(340px, calc(100vw - 16px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  padding: 6px;
  animation: pop-in 140ms var(--ease);
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  justify-content: flex-start;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--panel); outline: none; }
.menu-item.danger { color: var(--bad); }
.menu-item.danger:hover { background: var(--bad-soft); }
.menu-item .hint { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 500; }
.menu-item .check { margin-left: auto; color: var(--accent); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 8px 10px 4px; }

.popover {
  position: fixed;
  z-index: 95;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  animation: pop-in 140ms var(--ease);
  max-width: calc(100vw - 16px);
}

/* bottom-left on a desktop, clear of the sheets that slide in from the right;
   at the top on a phone, clear of a bottom sheet's buttons */
.toasts {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 100;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  width: min(440px, calc(100vw - 24px));
  pointer-events: none;
}
/* a toast never blocks a click on what's under it; only its own buttons take clicks */
.toast {
  pointer-events: none;
  display: flex; align-items: center; gap: 12px;
  min-height: 46px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--r);
  background: var(--inverse);
  color: var(--inverse-ink);
  box-shadow: var(--shadow-2);
  font-size: 14px;
  font-weight: 500;
  animation: rise-in 200ms var(--ease);
  max-width: 100%;
}
.toast .msg { flex: 1 1 auto; min-width: 0; padding: 4px 0; }
.toast .i { color: inherit; opacity: 0.85; }
.toast.ok .i { color: var(--ok); opacity: 1; }
.toast.error { background: var(--bad); color: var(--on-solid); }
.toast button { pointer-events: auto; height: 32px; padding: 0 12px; background: transparent; color: inherit; font-weight: 600; font-size: 13px; }
.toast button:hover { background: rgba(127, 127, 127, 0.22); color: inherit; }
.toast button.icon { width: 32px; padding: 0; opacity: 0.7; }
.toast.leaving { animation: fade-out 160ms ease forwards; }

/* ---------- workspace tabs ---------- */

.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 14px 11px;
  margin-bottom: -1px;
  color: var(--muted);
  font-weight: 500;
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tab .count { background: var(--panel); }
.tab.active .count { background: var(--inverse); color: var(--inverse-ink); }

/* ---------- schedules home ---------- */

.hero { padding: 24px 26px 22px; }
.hero-top { display: flex; align-items: flex-start; gap: 16px; }
.hero-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.hero-kicker.ok { color: var(--ok); }
.hero-kicker.accent { color: var(--accent); }
.hero-title { font-size: 26px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 4px; }
.hero-title a { text-decoration: none; }
.hero-title a:hover { text-decoration: underline; }
.hero-sub { color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
[data-hero-body] { margin-top: 20px; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 14px 14px 12px;
  border-radius: var(--r);
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
  transition: background 120ms ease;
}
.step:hover { background: var(--panel-2); }
.step-dot {
  grid-row: 1 / span 2;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--line-2);
}
.step.done .step-dot { background: var(--ok); color: var(--on-solid); border-color: transparent; }
.step-k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.step-v { font-size: 14px; font-weight: 600; }
.step .meter { grid-column: 1 / -1; margin-top: 8px; }

.next-step {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  margin-bottom: 18px;
}
.next-step.compact { margin: 14px 0 0; padding: 14px 16px; }
.next-step .ns-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card); color: var(--accent); flex: none; }
.next-step .ns-text { flex: 1 1 auto; min-width: 0; }
.next-step .ns-title { font-weight: 600; font-size: 15.5px; }
.next-step .ns-sub { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.next-step .ns-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.next-step.ok { background: var(--ok-soft); }
.next-step.ok .ns-icon { color: var(--ok); }
.next-step.warn { background: var(--warn-soft); }
.next-step.warn .ns-icon { color: var(--warn); }

.sched-list .list-item { gap: 14px; }
.sched-row .main .t a { text-decoration: none; font-weight: 600; }
.sched-row .main .t a:hover { text-decoration: underline; }
.sched-row .avail { min-width: 110px; text-align: right; font-size: 12.5px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none; }
.status-dot.running { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.status-dot.upcoming { background: var(--accent); }
.status-dot.finished { background: var(--faint); }

/* ---------- schedule workspace header ---------- */

.ws-head { margin-bottom: 8px; }
.ws-head .crumb { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; }
.ws-head .crumb:hover { color: var(--ink); }
.ws-title-row { display: flex; align-items: center; gap: 6px; margin: 6px 0 8px; min-width: 0; }
.ws-title { font-size: 30px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin: 0; cursor: text; border-radius: var(--r-sm); padding: 0 4px; margin-left: -4px; overflow-wrap: anywhere; }
.ws-title:hover { background: var(--panel); }
.ws-title-input { font-size: 26px; font-weight: 500; height: 46px; max-width: 560px; }
.ws-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.date-chip { height: 34px; padding: 0 12px; gap: 8px; border-radius: var(--r-full); font-size: 13.5px; font-weight: 500; background: var(--panel); }
.date-chip.empty { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tabs { margin-top: 18px; }

/* ---------- overview ---------- */

.stat-link { height: auto; padding: 16px 18px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; gap: 0; white-space: normal; font-weight: inherit; }
.stat-link:hover { background: var(--panel-2); }
.stat-link:active:not(:disabled) { transform: none; }
.stat .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.stat:has(.ring) { flex-direction: row; align-items: center; gap: 14px; }
.stat.alert .s { color: var(--bad); }
.stat.alert .ring::before { background: var(--bad-soft); }
.stat .ring::before { background: var(--panel); }
.stat-link:hover .ring::before { background: var(--panel-2); }

.cal-card { padding: 18px 18px 20px; }
.below-cal { align-items: start; }
.below-cal > .card { margin-bottom: 18px; }
.cal-head { justify-content: space-between; margin-bottom: 8px; }
.cal-nav-group { display: flex; align-items: center; gap: 6px; }
.cal-nav-group h2 { font-size: 19px; font-weight: 500; min-width: 0; text-align: left; margin-left: 6px; }
.cal-nav-group .icon { width: 34px; height: 34px; }
.cal-tools { display: flex; align-items: center; gap: 8px; }
.cal-card .cal-legend { margin: 0 0 10px; justify-content: flex-start; }
.calendar-export-status { font-size: 12px; margin: 0 0 8px; min-height: 0; }
.calendar-export-status:empty { display: none; }

.week-grid.cal-grid { gap: 6px; }
.week-day { min-height: 190px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.week-day .wd-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.week-day .dow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.week-day .daynum { font-size: 17px; font-weight: 600; margin: 0; color: var(--ink); }
.week-day.today .daynum { color: var(--accent-ink); background: var(--accent); border-radius: var(--r-full); min-width: 26px; height: 26px; display: inline-grid; place-items: center; font-size: 13px; }
.week-day .wd-empty { color: var(--faint); font-size: 12px; padding: 4px 2px; }
.week-day .cal-item { margin: 0; padding: 7px 8px 8px; border-radius: var(--r-sm); }
.week-day .cal-item .lbl { font-size: 12.5px; white-space: normal; line-height: 1.25; }
.week-day .cal-item .tm { font-size: 11px; color: var(--muted); margin: 1px 0 3px; }
.week-day .cal-item .who { font-size: 11.5px; }
.week-day .cal-item .who > .names { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal-item .meter { height: 3px; margin-top: 6px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cal-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.month-grid .cal-cell { min-height: 96px; }

.side-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.attn { list-style: none; margin: 0 -8px; padding: 0; }
.attn-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: auto;
  padding: 9px 8px;
  background: none;
  border-radius: var(--r-sm);
  text-align: left;
  white-space: normal;
  font-weight: 400;
  justify-content: flex-start;
}
.attn-item:hover { background: var(--panel); }
.attn-item .sub { display: block; color: var(--muted); font-size: 12.5px; }
.attn-item.warn > .i { color: var(--warn); }
.attn-item > .i:last-child { color: var(--faint); }
.attn-ok { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 500; margin: 0; }
.timeline li[role="button"] { cursor: pointer; border-radius: var(--r-sm); }
.timeline li[role="button"]:hover { background: var(--panel); }

/* ---------- pickers ---------- */

.date-popover { padding: 14px; width: 318px; }
.date-pop-title { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.date-presets { margin-bottom: 12px; gap: 6px; }
.date-popover .btn-row { margin-top: 10px; }
.cal-picker { user-select: none; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-title { font-weight: 600; font-size: 14px; }
.cal-week, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week span { text-align: center; font-size: 11px; font-weight: 600; color: var(--faint); padding: 4px 0; }
.cal-days { row-gap: 2px; }
.cal-day {
  height: 38px; padding: 0; border-radius: 10px;
  background: none; font-size: 13.5px; font-weight: 500; color: var(--ink);
  position: relative; font-variant-numeric: tabular-nums;
}
.cal-day:hover:not(:disabled) { background: var(--panel-2); }
.cal-day:disabled { color: var(--faint); opacity: 0.45; }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.cal-day.is-between { background: var(--accent-soft); border-radius: 0; }
.cal-day.is-selected, .cal-day.is-start, .cal-day.is-end { background: var(--accent); color: var(--accent-ink); }
.cal-day.is-start { border-radius: 10px 0 0 10px; }
.cal-day.is-end { border-radius: 0 10px 10px 0; }
.cal-day.is-start.is-end { border-radius: 10px; }
[data-mode="multi"] .cal-day.is-selected, [data-mode="single"] .cal-day.is-selected { border-radius: 10px; }
.cal-day[class*="mark-"]::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.cal-day.mark-bad::after { background: var(--bad); }
.cal-day.mark-off { text-decoration: line-through; color: var(--muted); }
.cal-day.is-selected::after { background: var(--accent-ink); }

.timefield { position: relative; display: flex; align-items: center; }
.timefield input { padding-right: 38px; font-variant-numeric: tabular-nums; }
.timefield > button { position: absolute; right: 4px; width: 32px; height: 32px; background: transparent; }
.time-popover { padding: 4px; }
.time-list { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; min-width: 180px; }
.time-list button {
  justify-content: space-between; height: 36px; padding: 0 12px; background: none; border-radius: var(--r-sm);
  font-weight: 500; font-variant-numeric: tabular-nums; flex: none;
}
.time-list button:hover, .time-list button.is-active { background: var(--panel); }
.time-list button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.time-list .dur { color: var(--faint); font-size: 12px; font-weight: 500; }

/* ---------- new schedule sheet ---------- */

.create-presets { margin-bottom: 12px; }
.create-cal { max-width: 340px; }
.range-summary { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 14px; min-height: 22px; }
.err-text { color: var(--bad); display: inline-flex; align-items: center; gap: 6px; }
.source-pick { display: grid; gap: 8px; }
.radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--panel); margin: 0; cursor: pointer; font-weight: 400; }
.radio-card:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.radio-card input { margin-top: 3px; }
.radio-card > span { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.radio-card b { font-size: 14px; color: var(--ink); }
.radio-card select { background-color: var(--card); }
.copy-opts { display: grid; gap: 12px; margin: 14px 2px 4px; }
.small-note { font-size: 12.5px; margin: 10px 0 0; }

/* ---------- editor sheets (shift, event, rules) ---------- */

.field-label .opt { font-weight: 400; color: var(--faint); margin-left: 6px; }
.chips.suggest { margin-top: 10px; gap: 6px; }
.time-pair-v2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
#f-dur { margin-top: 8px; font-size: 12.5px; }
.chips.days { gap: 6px; }
.chips.days .chip.day { min-width: 50px; height: 40px; border-radius: var(--r-sm); }
.day-presets { margin-top: 8px; gap: 14px; }
.small-link { font-size: 12.5px; }
.staff-mode { margin-top: 12px; }
.count-row { display: flex; align-items: center; gap: 12px; }
.pos-list { display: flex; flex-direction: column; gap: 2px; }
.pos-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: var(--r-sm); }
.pos-row:hover { background: var(--panel); }
.pos-row .pos-name { flex: 1 1 auto; min-width: 0; font-weight: 500; color: var(--muted); }
.pos-row.on .pos-name { color: var(--ink); font-weight: 600; }
.pos-row.custom { padding-left: 0; }
.pos-row.custom input { height: var(--control-sm); }
.pos-window { gap: 5px; }
.pos-total { margin: 10px 0 0; }
.note-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.note-item { display: flex; align-items: center; gap: 10px; padding: 7px 4px 7px 10px; border-radius: var(--r-sm); background: var(--panel); }
.note-item > .i { color: var(--muted); }
.note-item.other-day { opacity: 0.55; }
.inline-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-add input { flex: 1 1 200px; }
.form-error { color: var(--bad); font-weight: 500; font-size: 13.5px; margin: 12px 0 0; }
.days-off .cal-picker { max-width: 340px; }
.days-off .cal-day.is-selected { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; }
.days-off .cal-day:not(:disabled):not(.is-selected) { background: var(--ok-soft); }
.days-off .cal-day:not(:disabled):not(.is-selected):hover { filter: brightness(0.96); }

/* ---------- slot sheet ---------- */

.slot-sheet .sheet-sub { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.slot-when { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 14.5px; }
.slot-when .icon { width: 28px; height: 28px; }
.who-list { display: flex; flex-direction: column; }
.who-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.who-row:first-child { border-top: 0; }
.who-name { font-weight: 600; }
.who-name .muted { font-weight: 400; margin-left: 4px; }
.who-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; font-size: 12.5px; }
.who-meta .why { color: var(--warn); font-style: italic; }
.role-select { width: auto; min-width: 130px; height: var(--control-sm); font-size: 13px; padding: 0 30px 0 10px; background-position: right 9px center; }
.role-chip.full { background: var(--ok-soft); color: var(--ok); }
.role-chip.on { background: var(--accent); color: var(--accent-ink); }
.slot-sheet .slot-notes { border-left-color: var(--accent); }
.add-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.add-bar .input-wrap { min-width: 200px; }
.as-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--muted); }
.as-label select { width: auto; height: var(--control); }
.cand-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
/* a row with a third line (a limit, hours at both restaurants) keeps its height */
.cand-list > * { flex: none; }
.cand-group { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 12px 4px 6px; }
.cand {
  display: flex; align-items: center; gap: 12px;
  width: 100%; height: auto; min-height: 54px;
  padding: 8px 10px; margin: 0 0 2px;
  background: none; border-radius: var(--r);
  text-align: left; white-space: normal; justify-content: flex-start; font-weight: 400;
}
.cand:hover { background: var(--panel); }
.cand-name { display: flex; align-items: center; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.cand-name .muted { font-weight: 400; }
.cand-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.av-note.ok { color: var(--ok); font-weight: 500; }
.av-note.warn { color: var(--warn); font-weight: 500; }
.av-note.bad { color: var(--bad); font-weight: 500; }
.cand-add { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent); opacity: 0; transition: opacity 120ms ease; }
.cand:hover .cand-add, .cand:focus-visible .cand-add { opacity: 1; }
.empty-line { margin: 8px 0; }
.day-actions .small-note { margin-top: 8px; }

/* ---------- shifts tab ---------- */

.dates-card { padding: 16px 20px; }
.dates-row { display: flex; align-items: center; gap: 14px; }
.dates-row .ns-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel); color: var(--ink-2); flex: none; }
.dates-row .section-label { margin-bottom: 2px; }
.dates-val { font-size: 15px; }

.week-chart {
  display: grid;
  grid-template-columns: 58px repeat(7, minmax(0, 1fr));
  gap: 6px;
  height: 250px;
  margin: 4px 0 18px;
}
.wc-axis { position: relative; margin-top: 26px; }
.wc-axis span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--faint); white-space: nowrap; }
.wc-day { display: flex; flex-direction: column; min-width: 0; }
.wc-head { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; height: 20px; margin-bottom: 6px; }
.wc-track { position: relative; flex: 1; background: var(--panel); border-radius: var(--r-sm); }
.wc-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-2); opacity: 0.6; }
.wc-bar {
  position: absolute; left: 4px; right: 4px;
  min-height: 18px; height: auto;
  padding: 4px 6px;
  border-radius: 6px;
  background: hsl(var(--h) 30% 88%);
  color: hsl(var(--h) 30% 24%);
  font-size: 11.5px; font-weight: 600;
  align-items: flex-start; justify-content: flex-start;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border: 0;
}
.wc-bar:hover { filter: brightness(0.96); background: hsl(var(--h) 30% 85%); color: hsl(var(--h) 30% 21%); }
.wc-bar span { overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .wc-bar { background: hsl(var(--h) 16% 25%); color: hsl(var(--h) 34% 85%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wc-bar { background: hsl(var(--h) 16% 25%); color: hsl(var(--h) 34% 85%); } }

.shift-list { display: flex; flex-direction: column; }
.shift-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; height: auto; min-height: 60px;
  padding: 10px 12px; margin: 0 -12px; width: calc(100% + 24px);
  background: none; border-radius: var(--r);
  text-align: left; white-space: normal; justify-content: flex-start; font-weight: 400;
  position: relative;
}
.shift-item + .shift-item::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; border-top: 1px solid var(--line); }
.shift-item:hover { background: var(--panel); }
.shift-item .t { display: block; font-weight: 600; font-size: 15px; }
.shift-item .s { display: block; color: var(--muted); font-size: 13px; }
.shift-item .meta { max-width: 38%; text-align: right; font-size: 12.5px; }
.shift-item > .i:last-child { color: var(--faint); }
.swatch { width: 10px; height: 40px; border-radius: 5px; background: hsl(var(--h) 32% 62%); flex: none; }
.wd-dots { display: inline-flex; gap: 3px; flex: none; }
.wd-dots i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; background: var(--panel); color: var(--faint); }
.wd-dots i.on { background: var(--inverse); color: var(--inverse-ink); }
.date-badge { width: 46px; flex: none; text-align: center; border-radius: var(--r-sm); background: var(--event-soft); color: var(--event); padding: 5px 0; line-height: 1.1; }
.date-badge b { display: block; font-size: 17px; }
.date-badge small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.template-chip { flex-direction: column; align-items: flex-start; height: auto; padding: 10px 16px; gap: 2px; min-width: 150px; }
.template-chip span { color: var(--muted); font-size: 12px; font-weight: 500; }
.closed-chip { padding-right: 4px; background: var(--bad-soft); color: var(--bad); cursor: default; }
.closed-chip:hover { background: var(--bad-soft); color: var(--bad); }
.closed-chip .icon { width: 24px; height: 24px; color: inherit; }

/* ---------- staffing tab ---------- */

.staff-head { display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; }
.staff-head > :not(.sh-cov):not(.sh-actions) { grid-column: 1 / -1; }
.sh-cov { display: flex; align-items: center; gap: 16px; }
.sh-title { font-size: 17px; font-weight: 600; }
.sh-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.staff-head .rules-peek { margin: 0; }
.last-run summary { cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; list-style: none; }
.last-run summary::-webkit-details-marker { display: none; }
.last-run[open] summary { margin-bottom: 8px; }
.last-run p { margin: 0 0 8px; }
.warn-text { color: var(--warn); font-weight: 600; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin 0.8s linear infinite; flex: none; align-self: center; }

.board-card { padding: 16px 16px 18px; }
.board-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.week-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.wk-label { font-weight: 600; font-size: 14px; min-width: 120px; text-align: center; font-variant-numeric: tabular-nums; }

.board {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) repeat(var(--days), minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}
.person-board { grid-template-columns: minmax(170px, 1.4fr) repeat(var(--days), minmax(0, 1fr)) 58px; }
.b-corner { font-size: 12px; align-self: end; padding-bottom: 6px; }
.b-day { text-align: center; padding: 4px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.b-day span { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.b-day b { font-size: 16px; }
.b-day.today b { color: var(--accent-ink); background: var(--accent); border-radius: var(--r-full); min-width: 26px; height: 26px; display: grid; place-items: center; font-size: 13px; }
.b-day.out { opacity: 0.4; }
.b-head { display: flex; flex-direction: column; justify-content: center; padding: 8px 6px 8px 0; min-width: 0; }
.b-head b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-head span { font-size: 12px; color: var(--muted); }
.b-cell {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px;
  height: auto; min-height: 64px;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  background: var(--ok-soft);
  text-align: left; white-space: normal; font-weight: 400;
  position: relative;
  min-width: 0;
}
.b-cell.none { background: transparent; border: 1px dashed var(--line); }
.b-cell.none.dim { opacity: 0.4; }
.b-cell.short { background: var(--bad-soft); }
.b-cell.orphan { background: transparent; border: 1px dashed var(--line-2); }
.b-cell.event { background: var(--event-soft); min-height: 0; }
.b-cell.event.short { background: var(--bad-soft); }
button.b-cell:hover { filter: brightness(0.97); background-color: inherit; }
.b-cell.full:hover { background: var(--ok-soft); }
.b-cell.short:hover { background: var(--bad-soft); }
.b-fill { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.b-cell.short .b-fill { color: var(--bad); }
.b-fill .acc { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.b-fill .acc.all { background: var(--ok); }
.b-fill .acc.some { background: var(--amber); }
.b-fill .acc.none { background: var(--bad); }
.b-names { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.b-need { display: inline-flex; align-items: center; gap: 3px; color: var(--bad); font-weight: 600; }
.b-ev { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.b-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.board-list { display: none; }

.p-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px 4px 0; }
.p-head b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-head .muted { display: block; font-size: 12px; }
.p-cell {
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px;
  height: auto; min-height: 48px; padding: 4px;
  background: var(--panel); border-radius: var(--r-sm);
  font-weight: 400; min-width: 0;
}
.p-cell:hover { background: var(--panel-2); }
.p-cell.out { background: transparent; }
.p-cell.away { background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 4px, var(--panel-2) 4px, var(--panel-2) 8px); }
.p-chip { display: block; font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 5px; background: hsl(var(--h) 30% 88%); color: hsl(var(--h) 30% 24%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="dark"] .p-chip { background: hsl(var(--h) 16% 25%); color: hsl(var(--h) 34% 85%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-chip { background: hsl(var(--h) 16% 25%); color: hsl(var(--h) 34% 85%); } }
.p-add { color: var(--faint); opacity: 0; align-self: center; }
.p-cell:hover .p-add { opacity: 1; }
.p-away { font-size: 11px; color: var(--muted); align-self: center; font-weight: 600; }
.p-hours { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; padding-right: 4px; font-variant-numeric: tabular-nums; align-self: center; }

/* ---------- availability tab ---------- */

.av-head { display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; }
.av-head > .callout { grid-column: 1 / -1; margin: 0; }
.av-filters { margin-bottom: 8px; }
.person-row .main .t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.person-row .role-name { font-weight: 400; }
.person-row .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-row .status-tag, .person-row .duty-tag { flex: none; }
.form-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-card { background: var(--panel); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.form-card p { margin: 0; }
.form-card textarea { background: var(--card); min-height: 72px; }
.form-card .field-label { margin: 0; }

.link-rows { display: flex; flex-direction: column; gap: 8px; }
.link-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--r); background: var(--panel); }
.link-row .grow { display: flex; flex-direction: column; min-width: 0; }
.link-row .ellipsis { font-size: 12px; font-family: var(--mono); }
.link-row .btn.icon, .link-row a.btn { width: var(--control-sm); padding: 0; }

.week-strip { display: flex; flex-direction: column; gap: 6px; }
.ws-scale { display: flex; justify-content: space-between; margin-left: 46px; margin-right: 150px; font-size: 11px; color: var(--faint); }
.ws-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 144px; align-items: center; gap: 6px; }
.ws-day { font-size: 12px; font-weight: 600; color: var(--muted); }
.ws-track { position: relative; height: 18px; border-radius: 5px; background: var(--panel); overflow: hidden; }
.ws-track i { position: absolute; top: 0; bottom: 0; }
.ws-shift { background: var(--ok-soft); }
.ws-busy { background: var(--busy); border-radius: 3px; }
.ws-note { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-legend { display: flex; gap: 14px; margin-top: 4px; margin-left: 46px; font-size: 12px; }
.ws-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ws-legend i { position: static; display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.answer-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-weight: 400; }
.answer-row:first-of-type { border-top: 0; }
.answer-row.as-button { width: 100%; height: auto; background: none; text-align: left; white-space: normal; justify-content: flex-start; border-radius: 0; padding: 9px 0; }
.answer-row.as-button:hover { background: var(--panel); }
.answer-row .why { display: block; color: var(--warn); font-style: italic; font-size: 12.5px; }
.quote { font-style: italic; color: var(--ink-2); margin: 0; }
.chip.static { cursor: default; }
.chip.static:hover { background: var(--panel); color: var(--ink-2); }

.check-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; margin: 8px -6px 0; padding: 0 6px; }
.check-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r); cursor: pointer; margin: 0; font-weight: 400; }
.check-row:hover { background: var(--panel); }
.check-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-row .check-box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; flex: none; }
.check-row:has(input:checked) { background: var(--accent-soft); }
.check-row:has(input:checked) .check-box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.check-row:has(input:focus-visible) { outline: 2px solid var(--accent); }
.new-person { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.2fr) auto; gap: 8px; }
.title-filters { margin: 10px 0 4px; }

/* ---------- questions sheet ---------- */

.q-row { padding: 16px; border-radius: var(--r-lg); background: var(--panel); margin-bottom: 12px; }
.q-row.is-followup { margin-left: 28px; box-shadow: inset 3px 0 0 var(--accent); }
.q-row-head { display: flex; align-items: center; gap: 10px; }
.q-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: 12px; font-weight: 700; flex: none; }
.q-row-head input { background: var(--card); font-weight: 600; }
.q-grid { display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; margin-top: 14px; align-items: end; }
.q-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.q-field.wide { grid-column: 1 / -1; }
.q-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.q-field textarea, .q-field select, .q-field input { background: var(--card); }
.q-field .chip { background: var(--card); }
.q-field .chip:has(input:checked) { background: var(--inverse); }
.q-field-inline { margin: 0; align-self: center; }
.q-dep-row { display: flex; gap: 8px; flex-wrap: wrap; }
.q-dep-row select, .q-dep-row input { width: auto; flex: 1 1 200px; }

/* ---------- staff page ---------- */

.staff-row { gap: 14px; }
.name-edit { height: auto; padding: 0; background: none; font-weight: 600; font-size: 15px; color: var(--ink); border-radius: 4px; }
.name-edit:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.name-input { height: 34px; max-width: 280px; font-weight: 600; }
.staff-row .s { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.title-edit { width: auto; field-sizing: content; min-width: 7ch; max-width: 180px; height: 28px; padding: 0 8px; margin-left: -8px; color: var(--muted); }
.dotsep { color: var(--faint); }
.staff-row .email { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.add-email { font-size: 13px; display: inline-flex; align-items: center; gap: 3px; }
.inline-email { display: inline-flex; gap: 6px; align-items: center; }
.inline-email input { height: 30px; width: 220px; }
.access-tag, .role-tag { flex: none; }
.role-seg { flex: none; }
.row-actions-inline { display: flex; gap: 2px; flex: none; opacity: 0.55; transition: opacity 120ms ease; }
.staff-row:hover .row-actions-inline, .row-actions-inline:focus-within { opacity: 1; }
.title-picks { margin-bottom: 4px; }
.paste-preview { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 14px; max-height: 240px; overflow-y: auto; }
.pp-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--panel); font-size: 13px; min-width: 0; }
.pp-row.bad { background: var(--bad-soft); }

/* ---------- settings ---------- */

.settings-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); font-weight: 500; }
.settings-nav a:hover { background: var(--panel); color: var(--ink); }
.settings-body > .card, .settings-body > div > .card { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.save-state { font-size: 12.5px; font-weight: 600; color: var(--ok); }
.title-editor { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border-radius: var(--r-sm); background: var(--panel); min-height: var(--control); }
.title-chip { background: var(--card); padding-right: 4px; cursor: default; }
.title-chip:hover { background: var(--card); color: var(--ink-2); }
.title-chip .icon { width: 24px; height: 24px; }
#title-new { flex: 1 1 160px; width: auto; height: 32px; background: transparent; border: 0; box-shadow: none; }
.key-set { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ok); font-weight: 500; }
.email-card .callout { margin: 0 0 16px; }
.connect-steps { margin: 0 0 18px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.connect-steps li::marker { font-weight: 700; color: var(--accent); }

/* ---------- messages ---------- */

.comm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sender { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.sender b { font-weight: 600; overflow-wrap: anywhere; }
.sender.ok .status-dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.sender.warn .status-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.comm-seg { margin-bottom: 18px; }
.comm-seg .count { margin-left: 2px; background: var(--accent-soft); color: var(--accent); }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.quick-card {
  height: auto; padding: 18px; gap: 14px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  text-align: left; white-space: normal;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.quick-card:hover { background: var(--card); border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.qc-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.qc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qc-text b { font-size: 15px; font-weight: 600; color: var(--ink); }
.qc-text .muted { font-size: 13px; font-weight: 400; }
.row-glyph { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--panel); color: var(--muted); flex: none; }
.ask-bar { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 6px 6px 16px; background: var(--panel); border-radius: var(--r-full); }
.ask-bar > .i { color: var(--accent); flex: none; }
.ask-bar input { background: transparent; border: 0; box-shadow: none; height: 38px; padding: 0; min-width: 0; }
.ask-bar input:hover, .ask-bar input:focus { background: transparent; box-shadow: none; }
.ask-bar button { border-radius: var(--r-full); }
.is-flash { animation: row-flash 2.6s ease; }
@keyframes row-flash { 0%, 45% { background: var(--accent-soft); } 100% { background: transparent; } }
.rule-row { gap: 16px; }
.rule-row .switch { margin: 0; }
.rule-row .main.clickable { cursor: pointer; border-radius: var(--r-sm); }
.rule-row .main.clickable:hover .t { color: var(--accent); }
.rule-row .form-error { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.callout.legacy { align-items: center; margin-bottom: 16px; }
.hist-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.job-row { width: 100%; height: auto; justify-content: flex-start; text-align: left; white-space: normal; font-weight: 400; background: none; border: 0; }
.job-row:hover { background: var(--panel); }
.job-row > .tag { min-width: 104px; justify-content: center; flex: none; }
.job-row .main { display: flex; flex-direction: column; gap: 2px; }
.job-row .main .t, .job-row .main .s { display: block; overflow: hidden; text-overflow: ellipsis; }
.job-row .main .s.err { color: var(--bad); }
.job-row > .i { color: var(--faint); flex: none; }

/* the composer: write on the left, the email as it arrives on the right */
.composer-view { display: none; margin-bottom: 14px; }
.composer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.composer-form > .callout { margin: 0 0 12px; }
.composer-preview { position: sticky; top: 0; padding-top: 2px; }
.pv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pv-head .section-label { margin: 0; }
.pv-empty { display: grid; place-items: center; gap: 10px; text-align: center; padding: 48px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--muted); }
.pv-empty .i { color: var(--faint); }
.pv-empty p { margin: 0; max-width: 260px; }
.pv-count { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); }
.pv-who { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.pv-who select { flex: 1; min-width: 0; height: 34px; font-size: 13px; }
.email-preview { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; }
.ep-meta { display: grid; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 12.5px; }
.ep-row { display: flex; gap: 10px; min-width: 0; }
.ep-row span { width: 72px; flex: none; color: var(--muted); }
.ep-row b { font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.ep-subject { margin: 0; padding: 16px 16px 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ep-body { padding: 10px 16px 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.ep-body a { color: var(--accent); }
.composer-more summary, .pv-sample summary, .msg-csv summary { cursor: pointer; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.composer-more[open] summary { margin-bottom: 14px; }
.sched-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.sched-bar .timefield { width: 132px; }
.draft-state { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.draft-state.is-saved { color: var(--ok); }
.tok { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 0.92em; line-height: 1.55; white-space: nowrap; }

/* who gets it, and what it says */
.rcpt-aud { margin-bottom: 4px; }
.chip .n { font-size: 11.5px; font-weight: 600; opacity: 0.6; }
button.chip[aria-checked="true"] { background: var(--inverse); color: var(--inverse-ink); }
.rcpt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.rcpt-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rcpt-people { margin-top: 12px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); }
.rcpt-people-head { display: flex; align-items: center; gap: 14px; padding: 2px 6px 8px; font-size: 13px; }
.rcpt-people .check-list { max-height: 260px; margin: 0; padding: 0; }
.rcpt-sum { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.rcpt-sum b { color: var(--ink); }
.msg-bar { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.msg-bar label { margin: 0; }
.msg textarea { min-height: 260px; line-height: 1.6; }
.hint.warn { color: var(--warn); font-weight: 500; }
.msg-extra { margin: 2px 0 14px; }
.msg-addr { margin-top: 12px; padding: 14px; border-radius: var(--r); background: var(--panel); }
.msg-addr input { background: var(--card); }
.msg-csv { padding: 12px 14px; border-radius: var(--r); background: var(--panel); }
.msg-csv[open] summary { margin-bottom: 8px; }
.msg-csv p { margin: 6px 0; }
.small { font-size: 12.5px; }

/* an automatic email, as a sentence */
.sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px; border-radius: var(--r-lg); background: var(--panel); font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.sentence .pick { height: auto; min-height: 38px; padding: 6px 10px 6px 12px; gap: 4px; background: var(--card); color: var(--accent); font-weight: 600; font-size: 15px; box-shadow: var(--shadow-1); white-space: normal; text-align: left; }
.sentence .pick:hover { background: var(--card); box-shadow: var(--shadow-2); }
.sentence .timefield { width: 128px; }
.sentence .timefield input { background: var(--card); font-weight: 600; color: var(--accent); }
.sent-who { font-weight: 600; color: var(--ink); }
.slot-picks { margin-top: 12px; }
.days-pop { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.days-pop .small-note { margin: 0; }
.runs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.msg-peek { display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); }
.peek-subject { font-weight: 600; overflow-wrap: anywhere; }
.peek-body { margin: 4px 0 0; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.upcoming { list-style: none; margin: 0 0 10px; padding: 0; }
.upcoming li { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; min-width: 0; }
.upcoming li:first-child { border-top: 0; }
.upcoming .when { font-weight: 600; white-space: nowrap; }
.upcoming .ellipsis { max-width: 45%; }
.pv-sample { margin-top: 8px; }
.pv-sample[open] summary { margin-bottom: 10px; }
.rule-sheet .sheet-foot .switch { margin: 0; }
.on-note { font-size: 13px; color: var(--muted); }
.on-note b { color: var(--ink); }

/* ---------- the availability form ---------- */

.respond { max-width: 860px; margin: 0 auto; }
.respond > .card, .respond > div > .card { margin-bottom: 16px; }
.respond-hero { padding: 26px 26px 22px; }
.rh-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.rh-title { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; overflow-wrap: anywhere; }
.rh-lead { font-size: 16px; color: var(--ink-2); margin: 0 0 14px; max-width: 60ch; }
.rh-dates { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 14px; border-radius: var(--r-full); background: var(--panel); font-weight: 500; font-size: 14px; }
.respond-hero .callout { margin: 14px 0 0; }
.rh-note .grow > b { margin-bottom: 2px; }
.step-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.step-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--inverse); color: var(--inverse-ink); font-size: 11.5px; letter-spacing: 0; }
.respond-step h2 { font-size: 21px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.respond-step > p.muted { max-width: 68ch; }
.respond-foot { font-size: 12.5px; text-align: center; margin: 6px 0 14px; }

/* a whole shift in one tap */
.shift-toggles { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.st-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; }
.st-day { font-weight: 600; font-size: 13.5px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.st-chip {
  position: relative; height: auto; min-height: 48px; padding: 7px 16px;
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  text-align: left; white-space: normal;
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r);
}
.st-chip:hover { background: var(--card); border-color: var(--ink-2); }
.st-name { font-weight: 600; font-size: 13.5px; }
.st-time { font-size: 12px; color: var(--muted); font-weight: 500; }
.st-state { position: absolute; top: -9px; right: 10px; padding: 1px 7px; border-radius: var(--r-full); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--busy); color: var(--card); }
.st-state:empty { display: none; }
.st-chip.is-cant { background: var(--busy); border-color: var(--busy); color: var(--card); }
.st-chip.is-cant:hover { background: var(--busy); color: var(--card); }
.st-chip.is-cant .st-time { color: inherit; opacity: 0.75; }
.st-chip.is-cant .st-name { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.st-chip.is-cant .st-state { background: var(--card); color: var(--busy); }
.st-chip.is-partly { background: repeating-linear-gradient(45deg, var(--card), var(--card) 6px, var(--panel-2) 6px, var(--panel-2) 12px); }

/* days away */
.away-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 16px; }
.away-cal .cal-picker { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.cal-picker.weeks .cal-day { height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.1; }
.cal-picker.weeks .cal-mon { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.away-list { display: flex; flex-direction: column; gap: 8px; }
.away-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 10px; align-items: center; padding: 8px 8px 8px 14px; border-radius: var(--r); background: var(--panel); }
.away-when { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.away-when .muted { font-size: 12px; }
.away-row input { background: var(--card); height: 38px; }
.away-none { display: flex; align-items: center; gap: 8px; margin: 8px 0; }

/* events and questions: big answers to tap */
.ev-cards, #schedule-questions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ev-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.ev-when { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--event); }
.ev-title { font-size: 16px; font-weight: 600; margin-top: 2px; }
.ev-meta { font-size: 13px; }
.ev-parts { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; font-size: 12px; opacity: 0.85; }
.ev-recheck { font-size: 12.5px; color: var(--warn); font-weight: 500; }
.ev-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ev-opt, .q-opt {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; margin: 0; padding: 8px 12px;
  border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--card);
  font-weight: 600; font-size: 14.5px; color: var(--ink); text-align: center; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ev-opt input, .q-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ev-opt:hover, .q-opt:hover { border-color: var(--ink-2); }
.ev-opt:has(input:focus-visible), .q-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ev-opt.yes:has(input:checked) { background: var(--ok); border-color: var(--ok); color: var(--on-solid); }
.ev-opt.no:has(input:checked) { background: var(--bad); border-color: var(--bad); color: var(--on-solid); }
.ev-opt.maybe:has(input:checked) { background: var(--warn); border-color: var(--warn); color: var(--on-solid); }
.q-opt:has(input:checked) { background: var(--inverse); border-color: var(--inverse); color: var(--inverse-ink); }
.q-block { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.q-prompt { font-weight: 600; font-size: 15px; margin-bottom: 10px; color: var(--ink); }
.q-req { font-weight: 600; font-size: 10.5px; color: var(--warn); text-transform: uppercase; letter-spacing: 0.08em; }
.q-followup { margin-left: 22px; border-left: 3px solid var(--accent); }
.q-missing { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.q-missing .q-prompt { color: var(--bad); }

/* the bar that says what the answer adds up to, and sends it */
.respond-bar { position: sticky; bottom: 14px; z-index: 20; margin: 4px 0 18px; }
/* whatever is scrolled or tabbed to stops above the bar, not under it */
html:has(.respond-bar) { scroll-padding-bottom: 130px; }
.rb-inner { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.rb-sum { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.rb-inner > .primary { flex: none; height: 46px; padding: 0 22px; }

.done-card { text-align: center; padding: 52px 24px 44px; }
.done-badge { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: var(--ok-soft); color: var(--ok); animation: rise-in 360ms var(--ease); }
.done-card h1 { font-size: 28px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
.done-card p { max-width: 52ch; margin: 0 auto 12px; }
.done-said { font-size: 15px; color: var(--ink-2); }
.done-card .primary { margin-top: 10px; }

/* ---------- the command bar (⌘K) ---------- */

.palette-layer { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.palette-backdrop { position: absolute; inset: 0; background: var(--overlay); animation: fade-in 140ms ease; }
.palette { position: relative; width: min(620px, 100%); max-height: min(560px, 76vh); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; animation: pop-in 160ms var(--ease); }
.palette-search { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.palette-search > .i { color: var(--muted); flex: none; }
.palette-search input { height: 56px; border: 0; background: transparent; box-shadow: none; padding: 0; font-size: 16px; }
.palette-search input:hover, .palette-search input:focus { background: transparent; box-shadow: none; }
.palette kbd { font: 600 11px var(--sans); color: var(--faint); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.palette-list { overflow-y: auto; padding: 6px; }
.palette-group { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 10px 10px 4px; }
.palette-item { width: 100%; height: auto; min-height: 44px; justify-content: flex-start; gap: 12px; padding: 8px 10px; background: none; border-radius: var(--r-sm); text-align: left; font-weight: 500; }
.palette-item:hover { background: none; }
.palette-item > .i { color: var(--muted); flex: none; }
.palette-item.is-active { background: var(--accent-soft); }
.palette-item.is-active > .i { color: var(--accent); }
.pi-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pi-label, .pi-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.pi-hint { font-size: 12px; color: var(--faint); }
.palette-empty { padding: 18px; color: var(--muted); text-align: center; margin: 0; }
.palette-empty.small { padding: 8px; font-size: 12.5px; }
.palette-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); flex: none; }

/* ---------- floating scheduling assistant ---------- */

.assistant-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--inverse);
  color: var(--inverse-ink);
  border: 0;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-3);
  transition: transform 140ms var(--ease), background 140ms ease;
}
.assistant-fab:hover { background: var(--inverse-2); color: var(--inverse-ink); transform: translateY(-1px); }
/* Light Juniper on the Pine button; Deep Juniper when the button turns Mist in the dark */
.assistant-fab .spark { color: #8fd1ae; display: inline-flex; }
:root[data-theme="dark"] .assistant-fab .spark { color: #0a4f34; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .assistant-fab .spark { color: #0a4f34; } }

.assistant-dock {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 61;
  width: 440px;
  max-width: calc(100vw - 32px);
  height: min(660px, calc(100vh - 96px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rise-in 180ms var(--ease);
}
.assistant-dock.no-anim { animation: none; }

.dock-head {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.dock-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; margin-right: 6px; }
.dock-head .t { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; }
.dock-head .t small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-head button { width: 34px; height: 34px; padding: 0; background: transparent; }
.dock-head button:hover { background: var(--panel); }

.dock-sessions {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  max-height: 230px;
  overflow-y: auto;
  display: none;
}
.dock-sessions.open { display: block; }
.dock-sessions .s-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13.5px;
}
.dock-sessions .s-item:last-child { border-bottom: 0; }
.dock-sessions .s-item:hover { background: var(--panel-2); }
.dock-sessions .s-item.active { background: var(--card); font-weight: 600; }
.dock-sessions .s-item .s-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-sessions .s-item .s-when { font-size: 11.5px; color: var(--muted); }
.dock-sessions .s-item .s-del { opacity: 0.55; border: 0; background: none; padding: 0; width: 28px; height: 28px; color: var(--bad); }
.dock-sessions .s-item:hover .s-del { opacity: 0.9; }
.dock-sessions .s-item .s-del:hover { opacity: 1; background: var(--bad-soft); }

.dock-log { flex: 1; overflow-y: auto; padding: 16px; background: var(--panel); }
.dock-composer { border-top: 1px solid var(--line); padding: 10px 12px 12px; background: var(--card); }
.dock-composer .cbox { display: flex; gap: 8px; align-items: flex-end; }
.dock-composer textarea { min-height: 44px; max-height: 160px; font-size: 14px; padding: 11px 12px; resize: none; }
.dock-composer #dk-send { width: 44px; height: 44px; border-radius: var(--r); }
.dock-composer .hint { font-size: 11px; color: var(--muted); margin: 6px 2px 0; }

.chat-msg {
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 10px;
  max-width: 88%;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
.chat-msg.assistant:not(.error) { white-space: normal; }
.chat-msg p { margin: 0 0 8px; }
.chat-msg p:last-child, .chat-msg ul:last-child, .chat-msg ol:last-child { margin-bottom: 0; }
.chat-msg ul, .chat-msg ol { margin: 2px 0 8px; padding-left: 20px; }
.chat-msg a.chat-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.chat-msg li { margin: 2px 0; }
.chat-msg code { font-family: var(--mono); font-size: 12.5px; background: var(--panel); padding: 1px 5px; border-radius: 5px; }
.acts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.act { display: flex; align-items: center; gap: 8px; }
.act.done { color: var(--muted); }
.act.done .i { color: var(--ok); }
.act.now { color: var(--ink-2); font-weight: 500; }
.act.note { color: var(--warn); font-size: 12.5px; }
.act-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin 700ms linear infinite; flex: none; }
.chat-msg.user { background: var(--inverse); color: var(--inverse-ink); margin-left: auto; border-bottom-right-radius: 5px; }
.chat-msg.assistant { background: var(--card); border-bottom-left-radius: 5px; }
.chat-msg.pending { color: var(--muted); }
.chat-msg.error { background: var(--bad-soft); color: var(--bad); }

/* The composer's Send turns into Stop while a turn is running. Kept quiet rather
   than alarming: stopping is an ordinary thing to want, not a destructive act. */
#dk-send.stopping { background: var(--panel); color: var(--ink); }
#dk-send.stopping:hover:not(:disabled) { background: var(--bad-soft); color: var(--bad); }
#dk-send.stopping:disabled { opacity: 0.55; }
.chat-hint { color: var(--muted); font-size: 13px; line-height: 1.6; }
.chat-hint p { margin: 0 0 14px; }
.chat-examples { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.chat-example { height: auto; justify-content: flex-start; text-align: left; white-space: normal; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-2); font-size: 13px; font-weight: 500; line-height: 1.45; }
.chat-example:hover { background: var(--card); border-color: var(--accent); color: var(--ink); }

/* ---------- modals (the older dialog cards, until each becomes a sheet) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow-y: auto;
  animation: fade-in 120ms ease;
}
.modal {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: pop-in 180ms var(--ease);
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal-head h2 { font-weight: 500; font-size: 22px; margin: 2px 0 3px; }
.modal-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.modal-head .head-right { display: flex; align-items: center; gap: 10px; }
.modal-body { padding: 6px 24px 22px; overflow-y: auto; flex: 1 1 auto; }
.modal-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.modal-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.modal-section .section-label { display: flex; align-items: center; gap: 8px; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal button[disabled] { opacity: 0.45; cursor: not-allowed; }
.modal-body.busy { opacity: 0.6; }

.save-flash {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ok);
  white-space: nowrap;
  transition: opacity 400ms ease;
}
.save-flash.fade { opacity: 0; }

.role-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.duty-tally { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.assign-table { margin: 10px 0 12px; }
.assign-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); }
.assign-table tr:last-child td { border-bottom: 0; }
.assign-table .assign-role { width: 190px; }
.assign-table .assign-del { width: 40px; }
.assign-table select { height: var(--control-sm); padding: 0 28px 0 10px; font-size: 13px; background-position: right 9px center; }
.assign-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.assign-add select { flex: 1; min-width: 200px; }
.assign-add select.narrow { flex: 0 1 200px; min-width: 150px; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 4px 0 10px;
}
/* Scoped to dialogs on purpose: `.field` is also the app-wide form-row class,
   and an unscoped `min-width: 0` would silently override `.row > *`. */
.modal .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-bottom: 0; }
.modal .field.wide { grid-column: 1 / -1; }
.modal .field.narrow-input input { max-width: 240px; }
.modal .field > span { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.modal .field input, .modal .field textarea, .modal .field select { width: 100%; }

.field-error { display: none; margin: 0 0 10px; font-size: 12.5px; color: var(--bad); }
.field-error.show { display: block; }
.field-error.hint { color: var(--muted); }

.section-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

.role-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.role-row.dated { grid-template-columns: minmax(120px, 1fr) 80px 150px 150px auto; }

.slot-notes { margin: 10px 0 4px; padding: 10px 12px; border-left: 3px solid var(--ink); background: var(--panel); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 14px; }
.slot-notes div + div { margin-top: 6px; }
.note-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.note-row:last-child { border-bottom: 0; }
.note-text { overflow-wrap: anywhere; }
.note-meta { font-size: 12px; white-space: nowrap; }
.note-row.other-day .note-text { opacity: 0.55; }
.note-pin { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; white-space: nowrap; margin: 0; }

.remove-choice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.off-chip { display: inline-flex; align-items: center; gap: 4px; }
.off-chip button { border: 0; background: none; padding: 0 0 0 2px; cursor: pointer; color: inherit; opacity: 0.6; font-size: 12px; line-height: 1; height: auto; }
.off-chip button:hover { opacity: 1; background: none; }
.danger-zone .section-label { color: var(--bad); }

/* rules editor */
.gen-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rules-peek { margin: 8px 0 0; font-size: 13px; }
.name-chip { cursor: pointer; background: var(--panel); border: 0; height: auto; }
.name-chip:hover { background: var(--inverse); color: var(--inverse-ink); }
.rule-examples { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.example-rule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  padding: 11px 13px;
  height: auto;
  border-radius: var(--r);
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  white-space: normal;
}
.example-rule:hover { background: var(--panel-2); }
.example-rule b { font-size: 13px; }
.example-rule .muted { font-size: 12.5px; line-height: 1.45; }
#rules-text { font-size: 14px; line-height: 1.6; min-height: 150px; }

/* schedule-defined questions on the availability form */
.role-toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; margin: 0; text-transform: capitalize; }
.role-toggle input { margin: 0; }
.role-toggle:has(input:checked) { background: var(--inverse); color: var(--inverse-ink); }

/* ---------- the shifts page (duties) ---------- */

.shifts-page { max-width: 860px; margin: 0 auto; }
.shifts-page > .card { margin-bottom: 16px; }
.shifts-hero { padding: 26px 26px 22px; }
.accept-progress { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 4px; }
.accept-progress .meter { flex: 1 1 100%; height: 8px; }
.accept-progress .duty-tally { margin: 0; flex: 1 1 auto; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 18px; }
.summary-grid > div { padding: 12px 14px; border-radius: var(--r-lg); background: var(--panel); display: flex; flex-direction: column; gap: 2px; }
.summary-n { font-size: 26px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.summary-lines { margin-top: 10px; }
.summary-lines p { margin: 3px 0 0; font-size: 13px; }
.shifts-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.shifts-head h2 { flex: 1; margin: 0; font-size: 19px; font-weight: 600; }
.view-switch { margin: 0; }
.help-sheet .sheet-body p { margin: 0 0 12px; line-height: 1.6; }

.cal-month { margin: 12px 0 22px; }
.cal-month h3 { margin: 0 0 10px; }
.cal-head-duties { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-head-duties > div { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; text-align: center; }
.cal-grid-duties { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-grid-duties .cal-cell { min-height: 78px; padding: 4px; display: flex; flex-direction: column; gap: 3px; border-radius: var(--r-sm); }
.cal-grid-duties .cal-cell.empty { border: 0; padding: 4px; background: transparent; }
.cal-grid-duties .cal-cell.has { background: var(--panel); }
.cal-grid-duties .cal-day { font-size: 11px; color: var(--muted); }
.cal-chip { display: block; width: 100%; height: auto; text-align: left; font-size: 11px; line-height: 1.25;
  padding: 3px 5px; border-radius: 4px; cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; justify-content: flex-start;
  background: var(--panel-3); color: var(--ink); font-weight: 500; }
.cal-chip.accepted { background: var(--ok-soft); color: var(--ok); }
.cal-chip.reschedule { background: var(--warn-soft); color: var(--warn); }
.cal-chip:hover { filter: brightness(0.95); }
.duty.flash { animation: dutyflash 1.6s ease-out; }
@keyframes dutyflash { from { background: var(--accent-soft); } to { background: transparent; } }

.duty-list { display: flex; flex-direction: column; }
.duty { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.duty:last-child { border-bottom: 0; }
.duty-date { width: 58px; height: 64px; border-radius: var(--r); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; align-self: start; }
.dd-dow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.dd-day { font-size: 22px; font-weight: 600; }
.dd-mon { font-size: 11px; color: var(--muted); }
.duty.accepted .duty-date { background: var(--ok-soft); color: var(--ok); }
.duty.accepted .duty-date span { color: inherit; }
.duty.reschedule .duty-date { background: var(--warn-soft); color: var(--warn); }
.duty.reschedule .duty-date span { color: inherit; }
.duty-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.duty-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.duty.reschedule .duty-title b { opacity: 0.7; }
.duty.busy { opacity: 0.5; pointer-events: none; }
.duty-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.duty-note { margin-top: 5px; font-size: 13px; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--panel); border-left: 3px solid var(--ink); }
.duty-note.reschedule { border-left-color: var(--warn); background: var(--warn-soft); }
.duty-why { grid-column: 1 / -1; padding: 14px; border-radius: var(--r); background: var(--panel); }
.duty-why label { font-weight: 500; }
.duty-why textarea { width: 100%; background: var(--card); min-height: 72px; }
.duty-why .btn-row { margin-top: 10px; }
.rb-sum .muted { display: block; font-size: 12.5px; }

/* ---------- messages workspace ---------- */

[data-content] td small { display: block; }
.smtp-form { margin-top: 6px; }

/* ---------- misc ---------- */

.spin { display: inline-block; animation: spin 1s linear infinite; }
#board.busy { pointer-events: none; opacity: 0.55; }
footer.note { text-align: center; color: var(--muted); font-size: 12px; padding: 0 0 28px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .dash-grid, .split { grid-template-columns: 1fr; }
  /* too narrow for two columns: Write and Preview take turns */
  .composer-view { display: block; }
  .composer-grid { grid-template-columns: minmax(0, 1fr); }
  .composer-grid[data-view="write"] .composer-preview { display: none; }
  .composer-grid[data-view="preview"] .composer-form { display: none; }
  .composer-preview { position: static; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-btn { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .search-btn span, .search-btn kbd { display: none; }
  .palette-layer { padding: 8px; }
  .palette-foot { display: none; }
}
@media (max-width: 860px) {
  #user-label { display: none; }
  .brand-biz { display: none; }
}
@media (max-width: 700px) {
  header.topbar { padding: 0 14px; gap: 12px; }
  header.topbar nav a { padding: 8px 10px; font-size: 14px; }
  .brand-mark { width: 16px; height: 28px; }
  .brand-name { font-size: 18.5px; }
  main { padding: 0 16px; margin-top: 18px; }
  .page-head .title, .schedule-bar .title { font-size: 25px; }
  .head-actions input { width: 100%; }
  .card { padding: 18px 16px; border-radius: var(--r); }
  .assistant-dock { right: 0; bottom: 0; left: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .assistant-fab { right: 14px; bottom: 14px; }
  .shift-row, .event-row { grid-template-columns: 1fr; }
  .field-grid, .two-col { grid-template-columns: 1fr; }
  .w2m td { min-width: 52px; }
  .respond-hero { padding: 20px 18px; }
  .rh-title { font-size: 25px; }
  .st-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .st-chip { flex: 1 1 140px; }
  .away-grid { grid-template-columns: minmax(0, 1fr); }
  .away-row { grid-template-columns: minmax(0, 1fr) auto; }
  .away-row input { grid-column: 1 / -1; grid-row: 2; }
  .ev-choice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ev-opt { font-size: 13.5px; padding: 8px 6px; }
  .q-followup { margin-left: 10px; }
  .respond-bar { bottom: 8px; }
  .rb-inner { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .rb-sum { flex: 1 1 100%; }
  .rb-inner > .primary { flex: 1 1 auto; }
  .w2m-wrap { max-height: 60vh; }
  .time-pair { justify-content: space-between; }
  .time-pair input[type="time"] { flex: 1; }
  .seg { overflow-x: auto; }
  .subtabs.seg { width: 100%; }
  .comm-seg { display: flex; }
  .comm-seg > button { flex: 1; }
  .quick-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .quick-card { flex-direction: row; align-items: center; padding: 14px; }
  .hide-sm { display: none; }
  .job-row > .tag { min-width: 0; }
  .sentence { font-size: 15px; padding: 14px; }
  .msg-peek { flex-direction: column; }
  .hist-head { align-items: flex-start; }
  .calendar-export { align-items: stretch; flex-direction: column; gap: 12px; }
  .role-row.dated { grid-template-columns: 1fr 80px auto; }
  .role-row.dated .r-from, .role-row.dated .r-until { grid-column: span 2; }
  .shifts-hero { padding: 20px 18px; }
  .duty { grid-template-columns: 52px minmax(0, 1fr); gap: 8px 12px; }
  .duty-date { width: 52px; height: 58px; }
  .duty-act { grid-column: 1 / -1; justify-content: flex-start; }
  .duty-act > .primary { flex: 1; }
  .cal-grid-duties .cal-cell { min-height: 56px; }
  .cal-chip { font-size: 10px; }

  .hero { padding: 18px 16px; }
  .hero-top { flex-direction: column; }
  .hero-top .btn { align-self: stretch; }
  .next-step { flex-wrap: wrap; }
  .next-step .ns-actions { width: 100%; }
  .next-step .ns-actions > * { flex: 1; }
  .sched-row .avail, .sched-row .status-tag { display: none; }
  .ws-title { font-size: 25px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat .v { font-size: 24px; }
  .stat:has(.ring) { grid-column: 1 / -1; }
  .cal-card { padding: 14px 12px 16px; }
  .cal-head { flex-direction: column; align-items: stretch; }
  .cal-tools { justify-content: space-between; }
  /* the week becomes a list of days */
  .week-grid.cal-grid { grid-template-columns: 1fr; gap: 8px; }
  .week-day { min-height: 0; }
  .week-day .wd-empty { display: none; }
  .week-day.out:not(:has(.cal-item)) { display: none; }
  .month-grid .cal-cell { min-height: 58px; padding: 4px; }
  .month-grid .cal-item { padding: 2px 3px; }
  .month-grid .cal-item .lbl { font-size: 9.5px; }
  .month-grid .cal-item .who .names { display: none; }
  .date-popover { width: calc(100vw - 16px); }
  .av-head { grid-template-columns: 1fr; }
  .form-cards { grid-template-columns: 1fr; }
  .person-row { flex-wrap: wrap; }
  .person-row .main { flex-basis: calc(100% - 60px); }
  .person-row .status-tag { margin-left: 58px; }
  .person-row [data-row-menu] { position: absolute; top: 10px; right: 6px; }
  .new-person { grid-template-columns: 1fr; }
  .ws-row { grid-template-columns: 36px minmax(0, 1fr); }
  .ws-note { grid-column: 2; }
  .ws-scale { margin-right: 0; margin-left: 42px; }
  .staff-row { flex-wrap: wrap; }
  .staff-row .main { flex-basis: calc(100% - 60px); }
  .staff-row .access-tag { margin-left: 58px; }
  .row-actions-inline { opacity: 1; margin-left: auto; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
  .q-row.is-followup { margin-left: 12px; }
  .q-grid { grid-template-columns: 1fr; }
  .week-chart { display: none; }
  .shift-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
  .shift-item .swatch, .shift-item .date-badge { grid-row: 1 / span 3; align-self: start; }
  .shift-item .grow, .shift-item .wd-dots, .shift-item .meta { grid-column: 2; }
  .shift-item .meta { max-width: none; text-align: left; }
  .shift-item > .i:last-child { display: none; }
  .who-row { flex-wrap: wrap; row-gap: 8px; }
  .who-row .grow { flex: 1 1 calc(100% - 52px); }
  .who-row .role-select { margin-left: 44px; flex: 1 1 auto; }
  .who-meta .muted { display: none; }
  .staff-head { grid-template-columns: 1fr; }
  .sh-actions { justify-content: stretch; }
  .sh-actions > button { flex: 1; }
  .sh-actions > button.icon { flex: none; }
  /* the one thing to do goes first, full width */
  .av-head .sh-actions { display: grid; grid-template-columns: 1fr auto; }
  .av-head #send-links { grid-column: 1 / -1; order: -1; }
  .ws-note.is-free { display: none; }
  .week-nav { margin-left: 0; }
  .board-bar .seg { flex: 1 1 100%; }
  .board:not(.person-board) { display: none; }
  .board-list { display: flex; flex-direction: column; gap: 14px; }
  .bl-date { font-weight: 600; font-size: 13px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
  .bl-day.today .bl-date { color: var(--accent); }
  .bl-slot { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 56px; padding: 10px 12px; margin-bottom: 6px; text-align: left; white-space: normal; justify-content: flex-start; font-weight: 400; background: var(--ok-soft); }
  .bl-slot.short { background: var(--bad-soft); }
  .bl-names { display: block; font-size: 12.5px; color: var(--ink-2); }
  .person-board { grid-template-columns: 120px repeat(var(--days), minmax(38px, 1fr)) 40px; overflow-x: auto; }
  .person-board .p-head .av { display: none; }
  .p-chip { font-size: 9.5px; padding: 2px 3px; }
  .time-pair-v2 { grid-template-columns: 1fr; }
  .time-pair-v2 > .muted { display: none; }
  .cand-add { opacity: 1; }

  /* sheets rise from the bottom on a phone */
  .sheet, .sheet.sm, .sheet.lg, .sheet.xl {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: calc(100% - 28px);
    height: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation-name: sheet-up;
  }
  .sheet.tall { height: calc(100% - 28px); }
  .sheet-layer.closing .sheet { animation-name: sheet-down; }
  .sheet-handle { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto -6px; flex: none; }
  .sheet-head { padding: 14px 16px 12px; }
  .sheet-body { padding: 14px 16px 22px; }
  .sheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .sheet-foot > button.primary { flex: 1 1 auto; }
  .toasts { top: calc(var(--topbar-h) + 8px); bottom: auto; left: 50%; transform: translateX(-50%); align-items: center; }
}
@media (max-width: 520px) {
  header.topbar .brand-name { display: none; }
  header.topbar { gap: 10px; }
}

@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-down { to { transform: translateY(40px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   The solver's screens: build results, pre-flight, open shifts, swaps,
   call-outs, rules, a person's limits, and the assistant's cards.
   ========================================================================== */

.sh-top { display: flex; justify-content: space-between; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.pub-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--muted); }
.pub-line.live { color: var(--ink-2); }
.pub-line.live > .i { color: var(--ok); }
.pub-line.draft > .i { color: var(--warn); }
.ok-text { color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.bad-text { color: var(--bad); }

.verdict { border-radius: var(--r); padding: 14px 16px; background: var(--panel); border-left: 4px solid var(--line-2); }
.verdict p { margin: 6px 0 0; }
.verdict ul { margin: 8px 0 0; padding-left: 20px; }
.verdict li + li { margin-top: 4px; }
.verdict .btn-row { margin-top: 12px; }
.verdict.ok { background: var(--ok-soft); border-left-color: var(--ok); }
.verdict.warn { background: var(--warn-soft); border-left-color: var(--warn); }
.verdict.bad { background: var(--bad-soft); border-left-color: var(--bad); }
.v-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.verdict.ok .v-head > .i { color: var(--ok); }
.verdict.warn .v-head > .i { color: var(--warn); }
.verdict.bad .v-head > .i { color: var(--bad); }
.v-list { margin-top: 12px; }
.v-list.holes ul { margin-bottom: 0; }
.levers { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--card); }
.levers ul { margin: 6px 0 0; padding-left: 20px; }

.preflight { border-radius: var(--r); background: var(--panel); padding: 10px 14px; }
.preflight > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13.5px; list-style: none; }
.preflight > summary::-webkit-details-marker { display: none; }
.preflight ul { margin: 10px 0 2px; padding-left: 20px; font-size: 13.5px; }
.preflight li + li { margin-top: 5px; }
.preflight li.bad { color: var(--bad); }
.preflight li.warn { color: var(--warn); }
.preflight li.info { color: var(--ink-2); }

.open-list { display: flex; flex-direction: column; }
.open-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.open-row:first-child { border-top: 0; padding-top: 0; }
.open-row .row-actions-inline { display: flex; gap: 6px; align-items: center; flex: none; }
.claims { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.claim { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }

.two-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.way { border-radius: var(--r); background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.way p { margin: 0; }
@media (max-width: 720px) { .two-ways { grid-template-columns: 1fr; } }
ul.plain { list-style: none; padding: 0; margin: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
ul.plain li { display: flex; align-items: center; gap: 6px; }

.i.pinned { width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; color: var(--muted); }
.board-legend { margin-top: 10px; display: flex; align-items: center; gap: 6px; }
button.pin-btn.on { color: var(--accent); }

/* rules */
.rule-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.rule-row:first-child { border-top: 0; }
.rule-row > .i { margin-top: 2px; color: var(--muted); flex: none; }
.rule-row .small-note, .rule-card .small-note { margin-top: 2px; }
.rule-row.soft > .i { color: var(--amber); }
.rule-row.proposed { background: var(--warn-soft); border-radius: var(--r-sm); padding: 9px 10px; border-top: 0; margin-bottom: 6px; align-items: center; }
.rule-group + .rule-group { margin-top: 14px; }
.rule-who { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.proposals { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rule-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--panel); flex-wrap: wrap; }
.rule-card > .grow { min-width: 200px; }
.rule-card > .i { color: var(--accent); flex: none; }
.rule-card.question { background: var(--warn-soft); }
.rule-card.question > .i { color: var(--warn); }
.rule-card.accepted { background: var(--ok-soft); }
.rule-card.rejected { opacity: 0.6; }
.rule-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.rule-form select, .rule-form input:not([type="checkbox"]) { width: auto; min-width: 120px; }
.rule-form input[type="number"] { min-width: 80px; width: 80px; }
.day-chips { gap: 4px; }
.caps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; margin-top: 10px; }
.cap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.cap-row.default .stepper input { color: var(--faint); }
.cap-row.own > span { font-weight: 600; }
.weights { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.weight-row { display: grid; grid-template-columns: 1fr minmax(120px, 200px) 64px; gap: 12px; align-items: center; }
.weight-row .grow { display: flex; flex-direction: column; }
.weight-row .small-note { margin: 2px 0 0; }
.weight-row output { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.weight-row input[type="range"] { width: 100%; accent-color: var(--accent); }
@media (max-width: 560px) { .weight-row { grid-template-columns: 1fr 64px; } .weight-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; } }
.old-notes { margin: 8px 0; padding: 10px 12px; border-left: 3px solid var(--line-2); background: var(--panel); border-radius: var(--r-sm); white-space: pre-wrap; font-size: 13.5px; }

/* one person's sheet */
.tier-why { margin-top: 12px; padding: 12px; border-radius: var(--r); background: var(--panel); }
.tier-why input { width: 100%; }
.tier-why .btn-row { margin-top: 8px; }
.tier-history { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.tier-history .small-note { margin: 0; }

/* the assistant's cards */
.chat-card { margin: 4px 0 10px; padding: 12px 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); font-size: 13.5px; }
.chat-card .cc-title { display: flex; align-items: center; gap: 8px; }
.chat-card .cc-title > .i { color: var(--accent); flex: none; }
.chat-card .cc-lines { margin: 8px 0 0; padding-left: 18px; }
.chat-card .cc-lines li + li { margin-top: 3px; }
.chat-card .cc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-card .cc-result { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.chat-card .cc-result.done { color: var(--ok); }
.chat-card .cc-result.dismissed { color: var(--muted); font-weight: 400; }
.chat-card.state-dismissed { opacity: 0.75; }

/* the staff page's open shifts and swaps */
.duty.open-offer { align-items: center; }
.swap-option { display: block; width: 100%; text-align: left; height: auto; padding: 12px 14px; border-radius: var(--r); background: var(--panel); margin-bottom: 8px; font-weight: 400; }
.swap-option:hover { background: var(--panel-2); }

.callout-sheet .co-span { margin-top: 10px; }
.callout-sheet .co-until { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 600; }
.v-list.holes .more-holes summary { cursor: pointer; color: var(--accent); font-weight: 600; margin: 4px 0; }
.changes-sheet .change-people > li { margin-bottom: 12px; }
.changes-sheet .change-people ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 2px; }
.changes-sheet .change-log li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.pub-line .link { margin-left: 6px; }
.b-cell.over { background: var(--warn-soft); }
.b-cell.over .b-fill { color: var(--warn); }
.board-legend { margin-top: 12px; }
.cal-legend .sw.warn { background: var(--warn-soft); border: 1px solid var(--amber); }
/* cards on the shifts page with no date badge: the text gets the width */
.duty.no-date { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 560px) { .duty.no-date { grid-template-columns: minmax(0, 1fr); } .duty.no-date .duty-act { justify-content: flex-start; } }
.swap-option { white-space: normal; display: flex; flex-direction: column; gap: 2px; }
.swap-sheet .cand-group { margin-top: 10px; }
.summary-line { margin: 6px 0 0; }
.gone-card li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.gone-card li:last-child { border-bottom: 0; }
/* wording for one kind of pointer only */
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) { .no-touch { display: none; } .touch-only { display: inline; } }
.lead-instr { font-size: 1.05rem; margin: 0 0 6px; }
/* on a phone all five tabs fit, so none is hidden off the edge */
@media (max-width: 560px) {
  .tabs { gap: 0; }
  .tab { padding: 10px 7px 9px; font-size: 13px; gap: 4px; }
  .tab .count { display: none; }
}
.p-hours.idle b { color: var(--warn); }
/* on a narrow screen the button drops below the words instead of squeezing them */
.claim { flex-wrap: wrap; }
.toast { flex-wrap: wrap; }
.toast .msg { flex: 1 1 170px; }
.toast button { white-space: nowrap; }
.quick-row { display: flex; gap: 8px; margin: -8px 0 18px; }
.verdict.pending { background: var(--panel); border-left-color: var(--line-2); }
.cand.vetoed .cand-add { opacity: 1; visibility: visible; }
/* the toast's close sits in its corner, never on a line of its own */
.toast { position: relative; padding-right: 44px; }
.toast button.icon { position: absolute; right: 6px; top: 7px; }

/* ==========================================================================
   The week: a manager's home (page-week.js), the restaurant switcher,
   finding a person on the board, wishes a week gave way on, and weeks that
   repeat (the shift sheet's question, the Shifts tab's standard week)
   ========================================================================== */

/* the restaurant on screen, in the top bar */
.loc-btn {
  height: 34px; padding: 0 10px 0 11px; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--panel); border-radius: var(--r-full);
  max-width: 220px; min-width: 0;
}
.loc-btn[hidden] { display: none; }
.loc-btn > .i:first-child { color: var(--muted); }
.loc-btn #loc-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.loc-btn .caret { opacity: 0.55; flex: none; }
header.topbar.has-loc .brand-biz { display: none; }

/* the week's header */
.week-head { margin-bottom: 4px; }
.wh-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wh-loc { display: none; }
.wh-row { gap: 10px; margin: 4px 0 8px; }
.wh-nav { display: inline-flex; gap: 4px; flex: none; }
.wh-nav button.icon { width: 38px; height: 38px; border-radius: var(--r-full); }
.wh-title { cursor: default; min-width: 0; }
.wh-title:hover { background: none; }
.wh-meta { gap: 8px 12px; }
.wh-dates { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.wh-dates .i { color: var(--muted); }
.wh-fill { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wh-fill.short { color: var(--bad); }
.wh-fill.full { color: var(--ok); }
.wh-part { font-size: 13px; color: var(--muted); }

/* the steps a week goes through */
.wh-steps { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.wh-steps::-webkit-scrollbar { display: none; }
.wh-stp {
  display: inline-flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: max-content;
  padding: 8px 12px 8px 8px; border-radius: var(--r-full);
  background: var(--panel); color: var(--ink); text-decoration: none; font-size: 13px;
  transition: background 120ms ease;
}
.wh-stp:hover { background: var(--panel-2); }
.stp-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--card); color: var(--muted); border: 1px solid var(--line-2);
}
.stp-k { font-weight: 600; }
.stp-v { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.wh-stp.done .stp-dot { background: var(--ok); color: var(--on-solid); border-color: transparent; }
.wh-stp.now { background: var(--accent-soft); }
.wh-stp.now .stp-dot { border-color: var(--accent); color: var(--accent); }
.wh-stp.bad .stp-v { color: var(--bad); font-weight: 600; }
.wh-step.next-step.compact { margin-top: 12px; }

/* the week's own tab: the board, and what the rules say about the week */
.week-quick { margin: -6px 0 14px; }
.week-broken { margin: 0 0 14px; }
.week-gave { margin-bottom: 14px; }
.week-empty { margin-top: 18px; }
.week-empty .empty-state p { max-width: 460px; }

/* finding a person on the board */
.find-person { flex: 0 1 240px; min-width: 170px; }
.find-person input { height: var(--control-sm); font-size: 13.5px; }
.find-note { margin: -4px 0 12px; font-size: 13px; }
.find-note b { color: var(--ink); }
.person-board .found { background: var(--accent-soft); }
.person-board .p-head.found { border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--accent); padding-left: 8px; }
.person-board .p-cell.found:hover { background: var(--accent-soft); filter: brightness(0.97); }
.person-board .dim { opacity: 0.42; }
.person-board .p-hours.found { border-radius: var(--r-sm); }

/* wishes a week gave way on: said, never a broken rule */
.gave-way { margin-top: 10px; font-size: 13.5px; }
.gave-way summary { cursor: pointer; display: flex; gap: 8px; align-items: flex-start; list-style: none; color: var(--ink-2); }
.gave-way summary::-webkit-details-marker { display: none; }
.gave-way summary > .i { margin-top: 2px; color: var(--muted); flex: none; }
.gave-way ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gave-way li { line-height: 1.45; }
.gave-way .gw-where { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.week-gave .gave-way { margin-top: 0; }
.tag.prio-high { background: var(--warn-soft); color: var(--warn); }
.tag.prio-medium { background: var(--accent-soft); color: var(--accent); }
.tag.prio-low { background: var(--panel-2); color: var(--ink-2); }

/* every schedule: back to the week */
.page-head .crumb { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.page-head .crumb:hover { color: var(--ink); }

/* "Just this week, or every week from now on?" in a shift sheet's footer */
.scope-ask { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.scope-q { font-weight: 600; font-size: 14.5px; }
.scope-q .muted { display: block; font-weight: 400; font-size: 13px; margin-top: 2px; }
.scope-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.scope-btns .spacer { flex: 1 1 auto; }
/* the form above it waits for the answer */
.sheet-body.is-asking { opacity: .55; transition: opacity .15s; }

/* the Shifts tab: these shifts, every week */
.std-week { align-items: center; }
.std-week .grow { min-width: 0; }

/* a new schedule for a week that already has one */
.create-taken { align-items: center; }

/* a person's shifts on the Staff page */
.ps-weeks { display: flex; flex-direction: column; gap: 12px; }
.ps-week-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ps-week-head b { font-size: 13.5px; }
.ps-week-head a { font-size: 13px; margin-left: auto; }
.ps-shift { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--panel); font-size: 13.5px; }
.ps-shift + .ps-shift { margin-top: 4px; }
.ps-shift .grow { min-width: 0; }

@media (max-width: 860px) {
  /* narrow: "All schedules" moves into the ⋯ menu, when there is one */
  .wh-row:has(#ws-menu) .wh-all { display: none; }
}
@media (max-width: 700px) {
  .wh-row { flex-wrap: wrap; row-gap: 6px; }
  .wh-title.ws-title { font-size: 23px; flex: 1 1 auto; }
  .wh-stp { flex: 0 0 auto; padding: 6px 10px 6px 6px; font-size: 12.5px; }
  .board-bar .find-person { flex: 1 1 100%; order: 3; }
  /* the one thing to do, without its badge: the week comes sooner */
  .wh-step .ns-icon { display: none; }
  .week-quick { margin-top: -10px; }
}
@media (max-width: 520px) {
  /* on a phone the top bar keeps the restaurant's mark, and the week says its name */
  header.topbar.has-loc .brand { display: none; }
  .loc-btn { padding: 0 8px; gap: 4px; flex: none; }
  .loc-btn #loc-name { display: none; }
  .wh-loc { display: inline; }
  header.topbar nav a { padding: 8px 8px; }
  .wh-nav button.icon { width: 34px; height: 34px; }
  #wh-this { padding: 0 10px; }
}


/* ---------- the assistant on every page: its top-bar button, attachments ---------- */

/* "Assistant" next to the page links; the floating button stays too */
header.topbar nav .nav-assistant {
  display: inline-flex; align-items: center; gap: 7px;
  height: auto; padding: 8px 14px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
header.topbar nav .nav-assistant .i { color: var(--accent); }
header.topbar nav .nav-assistant:hover,
header.topbar nav .nav-assistant.active { background: var(--panel); color: var(--ink); }
header.topbar nav .nav-assistant.active { font-weight: 600; }

/* the paperclip, and what is waiting to be sent */
.dock-composer .dk-attach { width: 44px; height: 44px; flex: none; color: var(--muted); border-radius: var(--r); }
.dock-composer .dk-attach:hover { color: var(--ink); background: var(--panel); }
.dk-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.dk-files[hidden] { display: none; }
.dk-file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 3px 3px 4px; border-radius: var(--r-sm);
  background: var(--panel); border: 1px solid var(--line); font-size: 12.5px;
}
.dk-file img { width: 30px; height: 30px; object-fit: cover; border-radius: 5px; display: block; }
.dk-file .i { margin-left: 4px; color: var(--muted); }
.dk-file .nm { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-file button { width: 26px; height: 26px; padding: 0; background: transparent; }

/* a photo dragged over the dock */
.dk-drop {
  position: absolute; inset: 0; z-index: 2;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent-soft); color: var(--accent);
  border: 2px dashed var(--accent); border-radius: inherit;
  font-weight: 600; font-size: 14px; pointer-events: none;
}
.dk-drop .i { width: 28px; height: 28px; }
.assistant-dock.dropping .dk-drop { display: flex; }

/* "[photo: staff.jpg]" in a sent message, as a label */
.chat-att {
  display: inline-flex; align-items: center; gap: 5px; margin: 2px 0;
  padding: 2px 8px; border-radius: var(--r-full);
  background: color-mix(in srgb, currentColor 14%, transparent); font-size: 12.5px;
}
.dock-sessions .s-where { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 4px; }

@media (max-width: 700px) {
  header.topbar nav .nav-assistant { padding: 8px 10px; }
}
@media (max-width: 520px) {
  /* a phone has the floating button too: the top bar keeps only the mark */
  header.topbar nav .nav-assistant { padding: 8px; }
  header.topbar nav .nav-assistant span { display: none; }
  .dk-file .nm { max-width: 120px; }
}


/* ---------- the Rules page (page-rules.js), and the rules sheet's shared parts (rules-ui.js) ---------- */

.rules-page { max-width: 980px; }
.rules-page .page-head { align-items: flex-end; }
.rp-count { color: var(--muted); font-size: 14px; white-space: nowrap; }
.rp-count b { color: var(--ink); font-size: 30px; font-weight: 500; letter-spacing: -0.015em; margin-right: 6px; font-variant-numeric: tabular-nums; }
.rules-page .card-head { margin-bottom: 10px; }
.rules-page .card-head .tag { margin-left: -4px; }
.rp-tell textarea { min-height: 84px; }
.rp-search { margin-bottom: 10px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rp-chips .chip .n { opacity: 0.6; font-variant-numeric: tabular-nums; }
.rp-showing { margin: 6px 0 4px; }
.rp-none { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; }
.rp-none p { margin: 0; }
#rp-list .rule-group { margin-top: 18px; }
#rp-list .rule-who { display: flex; align-items: center; gap: 8px; }
#rp-list .rule-who .count { font-size: 11px; letter-spacing: 0; }
.rp-wish-note { margin: 2px 0 4px; }
.rp-tiers { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 4px; line-height: 1.5; }
.rp-tiers > .i { flex: none; margin-top: 2px; color: var(--accent); }

/* a rule as a row: the sentence, where it came from, then its pills and buttons */
.rule-row > .grow { flex: 1 1 240px; min-width: 0; }
.rule-row .rule-text { overflow-wrap: anywhere; }
.rule-row .rule-said { font-style: italic; }
.rule-actions { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.rule-actions > button.icon { margin: -4px 0; }
.rule-row.past > .i { color: var(--faint); }
.rule-row.past .rule-text { color: var(--ink-2); }
.rule-tag, .rule-where { font-size: 11.5px; }
.rule-where .i { color: var(--muted); }

/* how much a rule matters: a pill, and a button that opens the picker */
.tag.prio-must { background: var(--inverse); color: var(--inverse-ink); }
button.tag.prio-pick { height: auto; padding: 2px 6px 2px 9px; gap: 3px; border: 0; font-size: 12px; font-weight: 600; cursor: pointer; }
button.tag.prio-pick .i { opacity: 0.7; }
button.tag.prio-pick:hover { box-shadow: inset 0 0 0 1px currentColor; }
.prio-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.prio-dot.prio-must { background: var(--inverse); }
.prio-dot.prio-high { background: var(--warn); }
.prio-dot.prio-medium { background: var(--accent); }
.prio-dot.prio-low { background: var(--line-2); }
.chip.on .prio-dot.prio-must { background: var(--inverse-ink); }
.prio-popover { width: 340px; }
.prio-pop { display: flex; flex-direction: column; padding: 6px; }
.prio-opt {
  display: flex; align-items: flex-start; gap: 10px; justify-content: flex-start;
  height: auto; padding: 9px 10px; white-space: normal; text-align: left;
  background: none; border: 0; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-2);
}
.prio-opt:hover, .prio-opt:focus-visible { background: var(--panel); outline: none; }
.prio-opt.on { background: var(--panel); color: var(--ink); }
.prio-opt .tag { flex: none; min-width: 72px; justify-content: center; }
.prio-opt > .i { flex: none; color: var(--accent); margin-top: 1px; }
.prio-opt:disabled { opacity: 0.55; }

/* a proposal's pill sits before its buttons */
.rule-card > .tag.prio, .rule-card > button.prio-pick { flex: none; }

/* the hand-made forms: how much it matters, and where, then the buttons */
.rf-meta { display: inline-flex; align-items: center; gap: 6px; }
.rf-meta label { margin: 0; font-size: 13px; font-weight: 400; }
.rf-hours { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-hours[hidden] { display: none; }
.rule-form input[type="time"] { min-width: 0; width: 120px; }
.rf-buttons { display: inline-flex; gap: 6px; }
.rule-edit { margin: 0 0 10px 26px; padding: 4px 14px 12px; border-radius: var(--r); background: var(--panel); }
.rule-edit .rule-form select, .rule-edit .rule-form input:not([type="checkbox"]) { background-color: var(--card); }
.rule-edit .small-note { margin-top: 8px; }

/* History: closed until asked for */
.rp-history { padding-top: 16px; padding-bottom: 16px; }
.rp-history summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.rp-history summary::-webkit-details-marker { display: none; }
.rp-history summary h3 { margin: 0; font-size: 16px; }
.rp-history summary > .i { color: var(--muted); transition: transform 140ms var(--ease); }
.rp-history details[open] summary > .i { transform: rotate(90deg); }
.rp-history summary .muted { min-width: 200px; }
.rp-hist-list { margin-top: 10px; }
/* how much a past rule mattered: an outline in muted text, never a priority pill */
.tag.rp-was { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); font-weight: 400; }

/* the Staff page: a limit ranked below must, with its pill */
.cap-row .cap-name { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 560px) {
  .rules-page .page-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rp-count b { font-size: 24px; }
  /* the filter chips scroll sideways rather than stacking five rows deep */
  .rp-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 8px; padding: 0 16px 2px; scrollbar-width: none; }
  .rp-chips::-webkit-scrollbar { display: none; }
  .rp-chips .chip { flex: none; }
  .rule-row { flex-wrap: wrap; }
  .rule-row > .grow { flex-basis: calc(100% - 30px); }
  .rule-actions { width: 100%; justify-content: flex-end; margin-top: -2px; }
  .rule-edit { margin-left: 0; }
  .rule-form .rf-meta { width: 100%; }
  .rule-form .rf-meta select { flex: 1; }
  .prio-popover { width: calc(100vw - 16px); }
}
@media (max-width: 520px) {
  /* Schedule, Staff, Rules and the assistant: the top bar tightens so they all fit on a phone */
  header.topbar { gap: 8px; }
  header.topbar nav { gap: 0; }
  header.topbar nav a { padding: 8px 7px; }
  .user-btn { padding: 2px; gap: 0; }
  .user-btn .caret { display: none; }
}
@media (max-width: 380px) {
  /* the smallest phones: the floating button is the way to the assistant */
  header.topbar nav .nav-assistant { display: none; }
  header.topbar nav a { font-size: 13.5px; }
}

/* ---------- Switch from 7shifts (page-import.js), and its ways in (Staff, Settings, the week) ---------- */

.import-page { max-width: 920px; }
.imp-steps { display: flex; gap: 6px; list-style: none; margin: -6px 0 18px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.imp-steps::-webkit-scrollbar { display: none; }
.imp-steps li { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: max-content; padding: 7px 12px 7px 7px; border-radius: var(--r-full); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.imp-steps li.done .stp-dot { background: var(--ok); color: var(--on-solid); border-color: transparent; }
.imp-steps li.now { background: var(--accent-soft); color: var(--ink); }
.imp-steps li.now .stp-dot { border-color: var(--accent); color: var(--accent); }

.imp-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.imp-head h3 { margin: 2px 0 2px; font-size: 18px; }
.imp-head p { margin: 0; }
.imp-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--inverse); color: var(--inverse-ink); font-weight: 700; font-size: 14px; }
.imp-how { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.imp-how li + li { margin-top: 4px; }

.imp-drop {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center;
  margin: 0; padding: 26px 18px; border: 1.5px dashed var(--line-2); border-radius: var(--r);
  background: var(--panel); color: var(--ink-2); font-size: 14px; font-weight: 400; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.imp-drop:hover, .imp-drop.over { background: var(--accent-soft); border-color: var(--accent); }
.imp-drop > .i { color: var(--accent); width: 22px; height: 22px; }
.imp-drop u { color: var(--accent); text-underline-offset: 3px; }
.imp-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.imp-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.imp-files { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.imp-file { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 12px; border-radius: var(--r-sm); background: var(--panel); }
.imp-file > .i { color: var(--muted); flex: none; }
.imp-file .grow { display: flex; flex-direction: column; min-width: 0; }
.imp-file .grow b { font-size: 13.5px; font-weight: 600; }
.imp-file .muted { font-size: 12.5px; }
.imp-target { margin-top: 18px; }
.imp-target .seg.block > button { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.imp-target > select { max-width: 420px; }
.imp-new { margin-top: 10px; max-width: 420px; }
.imp-new .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.imp-for { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.imp-for .i { color: var(--muted); }
.import-page .btn-row { margin-top: 16px; }

.imp-q { margin-top: 14px; }
.imp-q > p { margin: 0 0 10px; font-size: 14px; }
.imp-q .seg.block > button { white-space: normal; height: auto; min-height: 32px; padding: 6px 12px; }
.imp-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }

.imp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; }
.imp-stat { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--r); background: var(--panel); min-width: 0; }
.imp-stat b { font-size: 26px; font-weight: 500; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.imp-stat span { font-size: 13px; color: var(--ink-2); }
.imp-stat small { font-size: 12px; margin-top: 2px; }

.imp-sec { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.imp-sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.imp-sec-head h4 { margin: 0; font-size: 15px; }
.imp-sec > .small-note { margin: 0 0 10px; }
.imp-rows { display: flex; flex-direction: column; }
.imp-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); margin: 0; font-weight: 400; font-size: 14px; color: var(--ink); }
.imp-row:first-child { border-top: 0; }
.imp-row > input[type="checkbox"] { margin-top: 6px; flex: none; }
.imp-row.compact { align-items: center; padding: 8px 2px; }
.imp-row.compact > input[type="checkbox"] { margin-top: 0; }
.imp-row .av { margin-top: 1px; }
.imp-row.off, .imp-rule-person.off { opacity: 0.5; }
.imp-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-name label { margin: 0; font-size: 14px; cursor: pointer; }
.imp-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }
/* a name as the file spells it: two spaces stay two, so a look-alike can be told apart */
.imp-row b, .imp-rule-who b, .imp-spelled { white-space: pre-wrap; }
.imp-alike { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: 13px; line-height: 1.45; }
.imp-alike > span { flex: 1 1 260px; }
.imp-alike select { width: auto; max-width: 100%; height: var(--control-sm); font-size: 13px; background-color: var(--card); color: var(--ink); }

.imp-week { display: flex; flex-direction: column; margin-bottom: 12px; }
.imp-shift { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 12px; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 13.5px; align-items: baseline; }
.imp-shift.head { border-top: 0; padding-top: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.imp-shift b { font-weight: 600; }
.imp-check { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.imp-check + .small-note { margin-top: 6px; }

.imp-every { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.imp-rule-list { display: flex; flex-direction: column; }
.imp-rule-person { padding: 10px 2px; border-top: 1px solid var(--line); }
.imp-rule-person:first-child { border-top: 0; }
.imp-rule-who { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.imp-rule { display: flex; align-items: center; gap: 10px; padding: 3px 0 3px 30px; }
.imp-rule label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 400; color: var(--ink-2); cursor: pointer; }
.imp-rule .small-note { margin: 0; }
.imp-notes { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }

.imp-go { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.imp-go p { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }

.imp-progress { list-style: none; margin: 0; padding: 0; }
.imp-progress li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.imp-progress li:first-child { border-top: 0; }
.imp-progress li b { font-weight: 600; min-width: 150px; }
.imp-progress li .muted { flex: 1 1 200px; }
.imp-dot { position: relative; top: 3px; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); }
.imp-progress li.wait { color: var(--muted); }
.imp-progress li.run .imp-dot { background: none; border: 2px solid var(--accent); border-right-color: transparent; animation: spin 0.8s linear infinite; }
.imp-progress li.done .imp-dot { background: var(--ok); color: var(--on-solid); }
.imp-progress li.skip .imp-dot { background: var(--panel-2); color: var(--muted); }
.imp-progress li.error .imp-dot { background: var(--bad); color: var(--on-solid); }
.imp-progress li.error .muted { color: var(--bad); }

.imp-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.imp-next-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r); background: var(--panel); min-width: 0; }
.imp-next-card b { font-size: 14.5px; line-height: 1.35; }
.imp-next-card p { margin: 0; font-size: 13px; line-height: 1.45; flex: 1; }
.imp-next-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--accent); }
.imp-next-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.imp-next-row select { width: auto; flex: 1 1 140px; background-color: var(--card); }
/* on the card's grey, a grey button would vanish */
.imp-next-row button:not(.primary), .imp-next-row .btn:not(.primary) { background: var(--card); }
.imp-next-row button:not(.primary):hover, .imp-next-row .btn:not(.primary):hover { background: var(--panel-2); }
.imp-again { margin-top: 12px; }

.imp-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.imp-vs-col { padding: 14px 16px; border-radius: var(--r); background: var(--panel); min-width: 0; }
.imp-vs-col.cedar { background: var(--accent-soft); }
.imp-vs-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--ink-2); }
.imp-vs-row b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.imp-vs-col .small-note { line-height: 1.45; }
.imp-findings { margin-top: 18px; }
.imp-findings h4 { margin: 0 0 8px; font-size: 15px; }
.imp-findings .callout ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.imp-findings .callout .small-note { color: var(--ink-2); }

/* the ways in: Settings, the week of a restaurant with nothing yet, the Staff page */
.set-import, .import-nudge { flex-wrap: wrap; }
.set-import { margin: 4px 0 0; }
.set-import .grow, .import-nudge .grow { flex: 1 1 260px; line-height: 1.5; }
.import-nudge { margin: 0 0 14px; }
.import-nudge .btn-row { margin: 0; }
.paste-file { margin-top: 10px; }

@media (max-width: 700px) {
  .imp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imp-next { grid-template-columns: minmax(0, 1fr); }
  .imp-vs { grid-template-columns: minmax(0, 1fr); }
  .imp-shift { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 12px; }
  .imp-shift.head { display: none; }
  .imp-shift b { grid-column: 1 / -1; }
  .imp-rule { padding-left: 0; flex-wrap: wrap; }
  .imp-progress li b { min-width: 0; }
  .imp-steps li { flex: none; }
  /* the Staff page's two buttons: a row of their own, wrapping when they don't fit */
  .page-head .head-actions:has(.staff-import) { flex: 1 1 100%; min-width: 0; }
  .head-actions .staff-import { white-space: normal; text-align: left; height: auto; min-height: var(--control); padding-top: 6px; padding-bottom: 6px; }
}

/* ---------- staff-started cover (duties.js, me.js, tab-staffing.js, page-settings.js) ----------
   "Find someone for me" under "What's in the way?", the offers and progress
   cards on the staff pages, the managers' panel on Staffing, and its
   settings. */
.cover-pill-slot:empty { display: none; }
.cover-ask:empty { display: none; }
.cover-ask { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cover-or { margin: 0 0 8px; font-size: 13.5px; }
.cover-step .small-note { margin: 0 0 12px; line-height: 1.5; }
/* the restaurant's cover bonus, said as a fact before they ask */
.cover-bonus-note { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--ink); font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.cover-card h2 { margin-bottom: 4px; }
.cover-offer .duty-title b { font-size: 15.5px; }
.cover-mine.expired .duty-title b { color: var(--ink); }
.cover-row .row-actions-inline { opacity: 1; }
.cover-row .cover-reason { font-style: italic; margin: 2px 0; overflow-wrap: anywhere; }
.cover-row .small-note { margin-top: 4px; }
.cover-set .hint { margin-top: 6px; }
.cover-more[data-off] { opacity: 0.55; }
.cover-bonus-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.cover-money { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; color: var(--ink-2); }
.cover-money[hidden] { display: none; }
.cover-money input { width: 84px; }
.cover-set .seg { max-width: 100%; flex-wrap: wrap; }
@media (max-width: 560px) {
  .cover-row { flex-wrap: wrap; }
  .cover-row .row-actions-inline { width: 100%; justify-content: flex-start; }
  .cover-set .seg > button { padding: 0 10px; }
}

/* ---------- several restaurants (page-settings.js Restaurants, page-staff.js, the board's shifts elsewhere) ----------
   Settings' list of restaurants and "Who works at …", the Staff page's
   restaurant filter and each person's restaurants, a person's "Works at",
   shared staff's shifts at another restaurant on the board, a cover's
   bonus on its shift, and the week's "a cover yes waits for you". */
/* one grid for every row (subgrid), so the names, zones and buttons line up */
.place-rows { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px 12px; margin: 4px 0 14px; }
.place-row {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 12px; align-items: end;
  padding: 12px 14px; border-radius: var(--r-sm); background: var(--panel);
}
.place-row .field { margin: 0; }
.place-row input { background: var(--card); }
.place-people { min-height: var(--control); display: flex; align-items: center; gap: 6px; }
.place-people .place-remove { flex: none; }
.place-people button { white-space: nowrap; background: var(--card); }
.place-people button:hover { background: var(--panel-2); }
.place-added { margin: 0 0 14px; flex-wrap: wrap; align-items: center; }
.place-added .grow { flex: 1 1 240px; }
.works-search { margin-bottom: 6px; }
.works-list { display: flex; flex-direction: column; }
.works-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); margin: 0; font-weight: 400; cursor: pointer; }
.works-row:first-child { border-top: 0; }
.works-row input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.works-row .grow { min-width: 0; }
.works-row .works-also { display: block; font-size: 12.5px; color: var(--muted); }
.works-row.locked { cursor: default; }
.works-row.locked input { opacity: 0.6; }

/* the Staff page: a filter by restaurant, and each person's */
.loc-filters { margin-bottom: 8px; }
.loc-filters .chip .i { margin-right: 4px; }
.staff-where { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.staff-where .i { flex: none; }
.works-at .chip .i, .add-where .chip .i { margin-right: 4px; }
.head-actions .phone-only { display: none; }

/* the board: shared staff at another restaurant, muted; a cover's bonus */
.b-bonus { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px; font-size: 10.5px; font-weight: 700; background: var(--accent-soft); color: var(--accent); vertical-align: 1px; }
.p-chip .b-bonus { margin-left: 3px; font-size: 10px; background: transparent; padding: 0; color: inherit; opacity: 0.85; }
.b-else-head b { color: var(--muted); }
.b-cell.b-else { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); font-size: 11.5px; line-height: 1.35; gap: 2px; }
.b-cell.b-else > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.b-else-t { color: var(--faint); }
.p-chip.p-else { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); font-weight: 500; padding: 2px 5px; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
:root[data-theme="dark"] .p-chip.p-else { background: transparent; color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-chip.p-else { background: transparent; color: var(--muted); } }
.p-chip.p-else .pe-short { display: none; }
.p-hours:has(.p-else-h) { flex-wrap: wrap; row-gap: 0; }
.p-else-h { flex: 1 0 100%; text-align: right; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.bl-else { display: flex; align-items: center; gap: 6px; padding: 4px 12px 8px; font-size: 12.5px; color: var(--muted); }
.bl-else .i { flex: none; }
.find-else { color: var(--muted); }
.week-covers { margin: 0 0 14px; flex-wrap: wrap; align-items: center; }
.week-covers .grow { flex: 1 1 260px; line-height: 1.5; }

@media (max-width: 700px) {
  /* a phone's narrow day: just the hours, the dashed edge says it's elsewhere */
  .p-chip.p-else { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .p-chip.p-else .pe-full { display: none; }
  .p-chip.p-else .pe-short { display: inline; }
  .place-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .place-people { min-height: 0; }
}
@media (max-width: 520px) {
  /* the Staff page's two buttons share one row on a phone */
  .page-head .head-actions:has(.staff-import) { flex-wrap: nowrap; }
  .head-actions .staff-import { white-space: nowrap; flex: 0 1 auto; min-width: 0; }
  .head-actions .staff-import .wide-only { display: none; }
  .head-actions .staff-import .phone-only { display: inline; }
  .head-actions:has(.staff-import) #p-open { flex: 1 1 auto; }
  .p-else-h { font-size: 9.5px; }
}

/* ---------- wave F2: assistant, import, rules (bucket assistant-import-rules) ---------- */

/* a card's box (ticked unless unticked), and what was chosen once it is done */
.chat-card .cc-option { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.4; cursor: pointer; }
.chat-card .cc-option input { margin-top: 2px; flex: none; }
.chat-card .cc-option.done { cursor: default; color: var(--muted); }
.chat-card .cc-option.done .i { color: var(--ok); flex: none; margin-top: 2px; }
.chat-card .cc-result + .cc-actions { margin-top: 8px; }

/* How to reach them */
.reach-sheet textarea { width: 100%; font-size: 14px; }
.reach-results { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.reach-results li { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }
.reach-results li .i { flex: none; margin-top: 2px; }
.reach-list { display: flex; flex-direction: column; margin-top: 10px; }
.reach-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.reach-row .grow { display: flex; flex-direction: column; min-width: 0; }
.reach-row .grow b { overflow-wrap: anywhere; }
.reach-row button { flex: none; }

/* the import: a doubled space shown, choices for shared staff, shift names, why a place stayed open */
.imp-gap { color: var(--warn); font-weight: 400; letter-spacing: -0.05em; }
.imp-either { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.imp-either .imp-check { margin: 0; font-size: 13px; font-weight: 500; }
.imp-label { width: 100%; height: var(--control-sm, 32px); padding: 4px 8px; font-size: 13.5px; font-weight: 600; }
.imp-next-card.attention { background: var(--warn-soft); }
.imp-next-card.attention .imp-next-icon { color: var(--warn); }
.imp-open ul { margin: 4px 0 0; padding-left: 18px; }
.imp-open li + li { margin-top: 3px; }
@media (max-width: 700px) {
  .imp-shift > span:first-child { grid-column: 1 / -1; }
}

/* Rules: which restaurant's, where a rule applies, and the one just added */
.rp-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.rp-where > .i { color: var(--muted); margin-right: 2px; }
.scope-pick { cursor: pointer; border: 1px dashed var(--line-2); background: transparent; }
.scope-pick:hover { border-color: var(--accent); color: var(--accent); }
.rule-row.flash { animation: rule-flash 2.4s var(--ease, ease) 1; border-radius: var(--r-sm); }
@keyframes rule-flash { 0%, 35% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); } 100% { background: transparent; box-shadow: none; } }
@media (max-width: 520px) {
  .rp-where { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 2px; scrollbar-width: none; }
  .rp-where::-webkit-scrollbar { display: none; }
  .rp-where .chip { flex: none; }
}

/* the assistant: a wide screen keeps the page beside the open dock; the
   floating button leaves room below the page, and is a round icon on a phone */
@media (min-width: 1100px) {
  body.assistant-docked main { margin-left: max(0px, calc((100vw - 484px - 1240px) / 2)); margin-right: 484px; }
}
main { padding-bottom: 24px; }
@media (max-width: 700px) {
  .assistant-fab { width: 52px; height: 52px; padding: 0; justify-content: center; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .assistant-fab > span:not(.spark) { display: none; }
  main { padding-bottom: 72px; }
}

/* ---------- wave F2: the manager's week (bucket manager-week) ----------
   page-week.js, tab-staffing.js, slot-sheet.js, tab-availability.js,
   tab-shifts.js, admin.js (switcher, All schedules), palette.js, ui.js */

/* the restaurant is always said on a week once there are several */
.wh-loc.always { display: inline; }
/* the switcher never shrinks to a stub: below 1100px the brand is its mark
   only, and below 700px the switcher is its icon, the week's kicker saying
   the restaurant instead */
.loc-btn { min-width: 108px; flex: none; }
@media (max-width: 1100px) {
  header.topbar.has-loc .brand-name { display: none; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  header.topbar.has-loc { gap: 16px; }
}
@media (max-width: 700px) {
  .loc-btn { min-width: 0; padding: 0 8px; gap: 4px; flex: none; }
  .loc-btn #loc-name { display: none; }
  .wh-loc { display: inline; }
}
@media (max-width: 640px) {
  /* as on a phone: the switcher is the restaurant's mark, the links closer */
  header.topbar.has-loc .brand { display: none; }
  header.topbar nav a { padding: 8px 8px; }
}

/* the week's header: the title's row, then its tools (on a phone, a row of their own) */
.wh-tools { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.wh-tools:not(:has(button, a:not([hidden]))) { display: none; }

/* what staff are waiting on the manager for */
.wh-waiting[hidden] { display: none; }
.waiting-step .ns-icon { align-self: flex-start; }
.waiting-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.waiting-list li { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-sm); background: var(--card); }
.waiting-list li .grow { flex: 1 1 220px; min-width: 0; line-height: 1.4; }
.waiting-list li .grow b { display: block; font-size: 14px; }
.waiting-list li .grow .muted { display: block; font-size: 12.5px; }
.waiting-list li.warn .grow .muted { color: var(--warn); }
.waiting-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.waiting-step .link { margin-top: 8px; }

/* a rule broken in the week, named, with a one-tap fix */
.wb-list { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wb-rule { font-weight: 600; }

/* the verdict: open places, and what posting them left */
.hole-posted { margin-left: 6px; font-size: 11px; }
.hole-why { overflow-wrap: anywhere; }
.gave-way.high summary { color: var(--ink); }

/* a shift sent back: the manager's two answers; someone booked twice */
.who-answer { margin-top: 8px; gap: 8px; }
.who-row.sent-back { background: var(--warn-soft); border-radius: var(--r-sm); padding-left: 8px; padding-right: 8px; }
.who-row.booked-twice .who-name { color: var(--bad); }
.who-clash { display: flex; align-items: center; gap: 4px; font-size: 12.5px; margin-top: 3px; font-weight: 600; }
.cand.asked-off { opacity: 0.72; }
.cand-over { display: flex; align-items: center; gap: 4px; font-size: 12px; margin-top: 2px; }

/* the board: double bookings in red, what a shift waits on */
.b-cell.clash { box-shadow: inset 0 0 0 2px var(--bad); }
.b-clash { color: var(--bad); font-weight: 700; text-decoration: underline wavy color-mix(in srgb, var(--bad) 60%, transparent); text-underline-offset: 2px; }
.bl-slot.clash { box-shadow: inset 3px 0 0 var(--bad); }
.p-chip.clash { box-shadow: inset 0 0 0 2px var(--bad); }
.b-mark { display: inline-block; max-width: 100%; margin-top: 1px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--panel); color: var(--ink-2); }
.b-mark.warn { background: var(--warn-soft); color: var(--warn); }
.b-mark.accent { background: var(--accent-soft); color: var(--accent); }
.bl-marks { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.swap-bends { display: flex; align-items: flex-start; gap: 4px; margin-top: 4px; }
/* a shared person at the other restaurant: name, then hours, on two lines */
.b-cell.b-else > .b-else-p { display: flex; flex-direction: column; white-space: normal; overflow: visible; line-height: 1.25; }
.b-else-p b { font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-else-p .b-else-t { white-space: nowrap; }
/* a person's shift: its name, then start to end */
.p-chip .p-chip-name { display: block; overflow: hidden; text-overflow: ellipsis; }
.p-chip .p-chip-t { display: block; font-weight: 500; font-size: 10.5px; opacity: 0.8; }
/* "3 needed" breaks between words, never inside one */
.b-names .b-need { word-break: normal; overflow-wrap: normal; flex-wrap: wrap; }
/* room under the last row for the floating assistant button */
#schedule-body { padding-bottom: 72px; }

/* the Shifts tab: shifts at the same time, side by side */
.wc-bar.side span { font-size: 10.5px; }

/* the restaurant switcher, with many restaurants: a box to find one */
.loc-pop { padding: 8px; max-width: min(340px, calc(100vw - 16px)); }
.loc-find .input-wrap { margin-bottom: 6px; }
.loc-find input { width: 100%; height: var(--control-sm); }
.loc-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.loc-list .menu-item .grow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-list .menu-item.is-checked { font-weight: 600; }
.loc-more { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; }

/* All schedules: every restaurant's this week and next */
.every-loc { margin-bottom: 16px; }
.every-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.every-row .grow { min-width: 0; }
.every-row .s { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.every-row .s.bad-text { color: var(--bad); }

/* the command bar's Esc hint means nothing without a keyboard */
@media (pointer: coarse) {
  .palette-search kbd { display: none; }
}

@media (max-width: 700px) {
  /* a steady two-row header: arrows and the title, then its tools */
  .wh-row { flex-wrap: wrap; row-gap: 8px; }
  .wh-row > .wh-title.ws-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wh-tools { flex: 1 1 100%; }
  .wh-nav button.icon { width: 44px; height: 44px; }
  .waiting-list li .grow { flex-basis: 100%; }
  /* toasts at the bottom, above the assistant's button, a sheet's buttons and the phone's own bar */
  .toasts { top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
  body.sheet-open .toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 520px) {
  .wh-nav button.icon { width: 44px; height: 44px; }
}
/* a finger needs 44px: the slot sheet's day arrows, position chips and row
   buttons, and the board's view switch */
@media (pointer: coarse) {
  .slot-sheet .slot-when button.icon { width: 44px; height: 44px; }
  .slot-sheet .role-chip { min-height: 44px; padding: 0 14px; }
  .slot-sheet .who-row > .icon.small { width: 44px; height: 44px; }
  .slot-sheet .role-select { min-height: 44px; }
  .board-bar .seg.sm > button { height: 44px; padding: 0 14px; }
  .wh-nav button.icon { width: 44px; height: 44px; }
}

/* ===== staff-settings-backend fixes (wave F2): staff pages, Staff, Settings ===== */
/* /duties: their week at a glance under the greeting */
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 14px 0 4px; }
.ws-day { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 4px; border-radius: var(--r-sm); background: var(--panel); font-size: 11.5px; line-height: 1.25; text-align: center; }
.ws-day > b { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.ws-day > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-day.on { background: var(--accent-soft); color: var(--ink); }
.ws-day.on > span:not(.ws-time) { font-weight: 600; }
.ws-day .ws-time { color: var(--muted); font-size: 11px; }
.ws-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ws-day.gone { opacity: 0.55; }
/* a day already gone: shown, not asked about */
.duty.past { opacity: 0.6; }
.cal-chip.past { opacity: 0.6; }
.cal-grid-duties .cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* Changes to your shifts: one sentence a row */
.change-list li { display: flex; gap: 10px; align-items: flex-start; }
.change-list li > .i { flex: none; margin-top: 3px; color: var(--muted); }
.change-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Can't make it: coworkers and manager side by side, the same weight */
.why-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.why-actions .cover-ask { display: contents; }
.duty-why .form-error { margin: 8px 0 0; }
.cover-step { margin-top: 12px; }
.cover-why { margin: 0 0 10px; line-height: 1.5; }
.manager-line { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.manager-line .i { flex: none; margin-top: 3px; color: var(--muted); }
.manager-line a { overflow-wrap: anywhere; }
.swap-asks { border-color: var(--accent); }
/* /me: what waits on a week's shifts page, what changed, and shifts a new
   usual week clashes with */
.me-week-head .has-news { text-decoration: none; }
.me-week-head .has-news .pill { white-space: normal; text-align: left; }
.me-changes { margin: 4px 0 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--panel); font-size: 13.5px; }
.me-changes li + li { margin-top: 6px; }
.me-clashes { margin: 14px 0 6px; text-align: left; }
.me-clashes ul { margin: 8px 0 0; }
.me-clashes li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 4px 0; }
input.invalid { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
/* Staff: the dot between job title and email moves with the email when it
   wraps; a shift another restaurant has them on at the same time */
.staff-row .with-sep::before { content: "·"; margin-right: 6px; color: var(--faint); }
.ps-shift.clash { box-shadow: inset 3px 0 0 var(--warn); }
.ps-shift .tag.warn { margin-left: 6px; white-space: normal; }
/* Settings, Who works at: who works here first */
.works-group { margin: 12px 0 4px; }
.works-group:first-child { margin-top: 0; }
@media (max-width: 560px) {
  /* Staff on a phone: a compact row, name and details on the left, the
     buttons and the login tag on the right */
  .staff-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 10px 0; }
  .staff-row > .av { display: none; }
  .staff-row .main { grid-column: 1; grid-row: 1 / span 2; flex-basis: auto; min-width: 0; }
  .staff-row .row-actions-inline { grid-column: 2; grid-row: 1; margin-left: 0; justify-self: end; }
  .staff-row .access-tag { grid-column: 2; grid-row: 2; margin-left: 0; justify-self: end; }
  .staff-row .role-seg, .staff-row .role-tag { grid-column: 1 / -1; justify-self: start; }
  .staff-row .row-actions-inline [data-details] { padding: 0 10px; }
  /* a day's chips in the calendar: the time, then the shift, never cut off */
  .cal-grid-duties { gap: 3px; }
  .cal-grid-duties .cal-cell { padding: 3px 2px; }
  .cal-grid-duties .cal-chip { white-space: normal; overflow-wrap: normal; padding: 3px 2px; font-size: 9.5px; letter-spacing: -0.01em; text-overflow: clip; text-align: center; }
  .cal-grid-duties .cal-chip .cc-t { display: block; font-weight: 600; }
  /* the calendar bar sits after the list on a phone, never over a button */
  .shifts-page .respond-bar.cal-bar { position: static; margin-top: 8px; }
  .week-strip { gap: 3px; }
  .ws-day { padding: 5px 2px; font-size: 10.5px; }
}

/* Settings, texts: Twilio's own words folded under "Setup details" */
.sms-more { margin: 14px 0 16px; }
.sms-more summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.sms-more[open] summary { margin-bottom: 10px; }

/* a formalizer question answered in place: names to tap, or words */
.rule-card.question .q-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.rule-card.question .q-answer input { flex: 1 1 160px; min-width: 0; min-height: 36px; }

/* a place on a day already over, that nobody was on: past filling, not short */
.b-cell.gone { background: transparent; border: 1px dashed var(--line); color: var(--muted); cursor: default; }
.b-cell.gone .b-fill { color: var(--muted); }

/* ---------- a new restaurant's three steps, and the one-click build (page-week.js, tab-staffing.js, page-import.js) ---------- */

/* the steps, in place of an empty week */
.setup-card { margin-top: 18px; padding: 22px; }
.setup-head h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.setup-head p { margin: 4px 0 0; font-size: 14px; }
.setup-steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.setup-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.setup-step .stp-dot { width: 28px; height: 28px; font-size: 12.5px; margin-top: 1px; }
.setup-step.now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.setup-step.now .stp-dot { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.setup-step.done { background: var(--panel); border-color: transparent; }
.setup-step.done .stp-dot { background: var(--ok); color: var(--on-solid); border-color: transparent; }
.setup-body { min-width: 0; }
.setup-body h3 { margin: 3px 0 4px; font-size: 16px; font-weight: 700; }
.setup-body > p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }
.setup-did { color: var(--ink-2); }
.setup-body > button.link { font-size: 13.5px; }
.setup-body .btn-row { margin-top: 12px; }

/* step 1: two ways in, side by side */
.setup-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.setup-way { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: var(--r); background: var(--panel); font-size: 13.5px; line-height: 1.45; min-width: 0; }
.setup-way b { font-size: 14.5px; color: var(--ink); }
.setup-way .sw-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--accent); margin-bottom: 2px; }
.setup-way .sw-go { padding-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.setup-way .sw-go > .btn, .setup-way .sw-go > button:not(.link) { background: var(--card); border-color: var(--line-2); }
.setup-way .sw-go > .btn:hover, .setup-way .sw-go > button:not(.link):hover { background: var(--panel-2); }
.setup-way .sw-go > button.link { font-size: 13px; }

/* step 3: the build, and what to know first */
.setup-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; cursor: pointer; color: var(--ink-2); }
.setup-check input { margin-top: 2px; flex: none; }
.setup-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--warn); }
.setup-note > .i { margin-top: 3px; flex: none; }
.setup-note a { color: inherit; font-weight: 600; }
.setup-why { margin: 8px 0 0; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.setup-body .build-now { margin-top: 14px; }
.setup-gap { margin-top: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--warn-soft); }
.setup-gap .setup-note { margin: 0; }
.setup-can { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.setup-can select { flex: 0 1 260px; min-width: 0; height: var(--control-sm); font-size: 13.5px; }

/* the one-click build: big, the obvious thing to press */
button.build-now { height: 52px; padding: 0 28px; font-size: 16px; font-weight: 700; border-radius: var(--r); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
button.build-now:disabled { box-shadow: none; }
.wh-step.wh-build { padding: 18px 20px; }
.wh-step.wh-build .ns-title { font-size: 17px; }
.build-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--ink); font-size: 14px; line-height: 1.5; }
.build-hero .grow { min-width: 0; }
.build-hero b { display: block; font-size: 16px; margin-bottom: 2px; }

/* the import: fewer than four weeks, said plainly */
.imp-few { margin: 0 0 14px; }
.imp-stat.few b { color: var(--warn); }
.imp-few-note { margin: 6px 0 0; }

@media (max-width: 700px) {
  .setup-card { padding: 16px; }
  .setup-head h2 { font-size: 19px; }
  .setup-step { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .setup-step .stp-dot { width: 24px; height: 24px; font-size: 11.5px; }
  .setup-ways { grid-template-columns: minmax(0, 1fr); }
  .setup-way .sw-go { align-self: stretch; align-items: stretch; }
  .setup-way .sw-go > button.link { align-self: center; }
  .setup-body .btn-row > button { flex: 1 1 auto; }
  button.build-now { width: 100%; height: 56px; }
  .build-hero { flex-direction: column; align-items: stretch; padding: 16px; }
  .wh-step.wh-build { padding: 16px; }
  .wh-step.wh-build .ns-actions { flex-direction: column-reverse; }
  .wh-step.wh-build .ns-actions > * { flex: none; width: 100%; }
}