/* ==========================================================================
   Team Calendar Overview – design tokens & base
   Light-first token set; dark mode swaps tokens on [data-theme="dark"].
   ========================================================================== */
:root {
  --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ground: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef0f4;
  --surface-3: #e3e6ec;
  --line: #e2e5eb;
  --line-strong: #c9ceD8;
  --ink: #1b1f26;
  --ink-2: #4b515d;
  --muted: #697083;
  --muted-2: #9aa1b1;
  --accent: #2f5bea;
  --accent-hover: #2448c2;
  --accent-soft: #e6ecfd;
  --accent-ink: #ffffff;
  --today: #ffb224;
  --today-soft: #fff4dc;
  --today-line: #f59e0b;
  --danger: #e5484d;
  --danger-soft: #fde8e9;
  --ok: #12a594;
  --ok-soft: #e0f5f1;
  --away: #e6a700;
  --vip: #e6b422;
  --vip-soft: #fcf3d6;
  --vip-ink: #3d2e00;
  --event: #5b6b8c;
  --event-ink: #ffffff;
  --free-outline: #9aa1b1;
  --weekend: #f0f1f4;
  --workband: #ffffff;
  --offhours: #f3f4f7;
  --shadow-1: 0 1px 2px rgba(20, 24, 33, .06), 0 1px 1px rgba(20, 24, 33, .04);
  --shadow-2: 0 12px 32px rgba(20, 24, 33, .14), 0 2px 6px rgba(20, 24, 33, .08);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --topbar-h: 60px;
  --sidebar-w: 300px;
  --row-h: 56px;
  --day-min-w: 132px;
  --name-col-w: 248px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
[data-theme="dark"] {
  --ground: #111418;
  --surface: #181c22;
  --surface-2: #1f242c;
  --surface-3: #2a303a;
  --line: #262c36;
  --line-strong: #3a4150;
  --ink: #e8eaee;
  --ink-2: #c3c8d2;
  --muted: #8d95a6;
  --muted-2: #667085;
  --accent: #6b8cff;
  --accent-hover: #86a0ff;
  --accent-soft: #1e2a4d;
  --accent-ink: #0c1120;
  --today: #ffb224;
  --today-soft: #33290f;
  --today-line: #ffb224;
  --danger: #ff6b6f;
  --danger-soft: #3a1c1e;
  --ok: #2ec4b0;
  --ok-soft: #10302b;
  --away: #f0b429;
  --vip: #f5c842;
  --vip-soft: #3a3010;
  --vip-ink: #231a00;
  --event: #7d8db0;
  --event-ink: #0c1120;
  --free-outline: #667085;
  --weekend: #14171c;
  --workband: #181c22;
  --offhours: #14171c;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%;
  font-family: var(--font-body); font-size: 14px; line-height: 1.45;
  color: var(--ink); background: var(--ground);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   App frame
   -------------------------------------------------------------------------- */
.app { display: grid; grid-template-rows: var(--topbar-h) 1fr; height: 100vh; height: 100dvh; overflow: hidden; }
.app-body { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 0; transition: grid-template-columns .22s var(--ease); }
.app-body.menu-collapsed { grid-template-columns: 0 1fr; }
.app-body.menu-collapsed .sidebar { overflow: hidden; border-right-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 12px; padding: 0 16px 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar h1 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.topbar .brand-mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.topbar .grow { flex: 1; }
.topbar .daterange { font-family: var(--font-display); font-weight: 600; font-size: 16px; white-space: nowrap; letter-spacing: -.01em; }
.sync-state { font-size: 12px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.sync-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.sync-state.busy .dot { background: var(--today); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  cursor: default; white-space: nowrap; font-weight: 500; transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.success { --btn-green: #0f8a7a; background: var(--btn-green); border-color: var(--btn-green); color: #ffffff; }
[data-theme="dark"] .btn.success { --btn-green: #17a08b; color: #06201b; }
.btn.success:hover { background: color-mix(in srgb, var(--btn-green) 82%, #000); border-color: color-mix(in srgb, var(--btn-green) 82%, #000); }
.btn.success:disabled { background: var(--btn-green); border-color: var(--btn-green); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { height: 28px; padding: 2px 9px 0; font-size: 13px; line-height: 1; } /* the font sits a touch high: text 2px down, the icon stays put */
.btn.sm > .icon { margin-top: -2px; }
.btn.icon { width: 34px; padding: 0; }
.btn.icon.sm { width: 28px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.input, .select, textarea.input {
  height: 34px; padding: 0 10px; border-radius: var(--radius-sm); width: 100%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
textarea.input { height: auto; padding: 8px 10px; resize: vertical; }
.input:focus, .select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.input::placeholder { color: var(--muted-2); }
.select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px; background-size: 5px 5px; background-repeat: no-repeat; cursor: default; }
.select.inline { width: auto; height: 32px; }
label.field { display: block; margin-bottom: 14px; }
label.field > span, .field-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; letter-spacing: .01em; }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.field-error { font-size: 12px; color: var(--danger); margin-top: 5px; }
.row { display: flex; gap: 10px; align-items: center; }
.grow { flex: 1; }
.row.wrap { flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: default; user-select: none; }
.switch.block { display: flex; width: fit-content; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 34px; height: 20px; border-radius: 10px; background: var(--surface-3); position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); transition: transform .15s var(--ease); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

.seg { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: 8px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 10px; border-radius: 6px; cursor: default; color: var(--muted); font-weight: 500; }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg button:hover:not(.active) { color: var(--ink); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 4px; border-radius: 13px; background: var(--surface-2); font-size: 13px; max-width: 100%; }
.chip .avatar { width: 20px; height: 20px; }
.chip button { border: 0; background: transparent; cursor: default; color: var(--muted); padding: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.chip button:hover { background: var(--surface-3); color: var(--ink); }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface-3); flex: none; display: block; }
.avatar.lg { width: 40px; height: 40px; }
.avatar.sm { width: 24px; height: 24px; }

.dropdown { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: 6px; animation: pop .14s var(--ease);
}
.menu.left { right: auto; left: 0; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes pop-centered { from { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
.menu .item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 6px; cursor: default; text-align: left; color: var(--ink); }
.menu .item:hover { background: var(--surface-2); }
.menu .item svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.menu .item .grow { flex: 1; }
.menu .item.danger { color: var(--danger); }
.menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu .head { padding: 8px 6px 6px 10px; display: flex; align-items: center; gap: 8px; }
.menu .head .who { flex: 1; min-width: 0; }
.menu .head .who strong, .menu .head .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .head .theme-toggle, .menu .head .sync-dir { flex: none; height: 30px; width: 30px; }
.menu .head .sync-dir.busy .icon { animation: spin 1s linear infinite; }
.menu .head strong { display: block; font-weight: 600; }
.menu .head small { color: var(--muted); }
.menu .inline-seg { padding: 4px 10px 8px; }

.kbd { font-family: var(--font-mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px; }
.menu .item .kbds { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; flex: none; }
.menu .item .kbds .plus { font-size: 11px; color: var(--muted); line-height: 16px; }
.menu .item .kbds .kbd { line-height: 16px; }

/* Tips and tricks (lightbulb dropdown left of the profile button) */
.menu.tips-menu { min-width: min(360px, calc(100vw - 24px)); width: 400px; max-width: calc(100vw - 24px); max-height: calc(100vh - var(--topbar-h, 56px) - 24px); overflow: auto; padding: 12px 14px 14px; }
.tips-menu .tips-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; }
.tips-menu .sep { margin: 12px 0; }
.tips-entry h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.tips-entry p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.tips-entry img { display: block; }
.tip-keys { display: grid; gap: 6px; margin: 0 0 10px; }
.tip-key { display: flex; align-items: center; gap: 3px; font-size: 13px; line-height: 1.4; }
.tip-key .kbd { font-size: 12px; color: var(--ink); background: var(--surface-2); min-width: 22px; text-align: center; padding: 1px 6px; line-height: 18px; flex: none; }
.tip-key .plus { color: var(--muted); font-size: 12px; }
.tip-key .lbl { margin-left: 8px; color: var(--ink); min-width: 0; }
.tip-steps { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.tip-steps li + li { margin-top: 4px; }
/* The lightbulb is twice the size of the other top bar icons; unread tips add a count badge and an
   occasional hop-and-wiggle (1.2 s of motion, then a rest), still under reduced motion. */
/* Same height as the profile picture next to it (.avatar is 32px; the profile button is 38px high) */
.topbar .tips-btn { position: relative; width: 38px; height: 38px; }
.topbar .tips-btn svg { width: 32px; height: 32px; }
.topbar .tips-btn.nudge .icon { display: inline-flex; transform-origin: 50% 90%; animation: tips-nudge 7s var(--ease) 1s infinite; }
@keyframes tips-nudge {
  0% { transform: none; }
  3% { transform: translateY(-3px) rotate(-8deg); }
  6% { transform: translateY(-3px) rotate(8deg); }
  9% { transform: translateY(-2px) rotate(-6deg); }
  12% { transform: translateY(0) rotate(4deg); }
  17%, 100% { transform: none; }
}
.tips-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .topbar .tips-btn.nudge .icon { animation: none; } }
.tips-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.tips-head .tips-title { margin: 0; }
/* Each tip is an accordion row: the read control (dot when unread, green check when read), then the
   title, which opens and closes the tip, with a chevron at the right. */
.tip-head { display: flex; align-items: center; gap: 8px; margin: -4px -6px; padding: 4px 6px; border-radius: 8px; cursor: default; }
.tip-head:hover { background: var(--surface-2); }
.tips-entry.open .tip-head { margin-bottom: 6px; }
.tip-head h3 { margin: 0; flex: 1; min-width: 0; }
.tip-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; color: inherit; cursor: default; }
.tip-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tip-toggle .tip-name { flex: 1; min-width: 0; }
.tip-toggle .icon { flex: none; color: var(--muted); display: inline-flex; }
.tip-read { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: default; background: var(--surface-2); color: #ffffff; }
.tip-read .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.tip-read.read { background: var(--ok); }
.tip-read .icon { display: inline-flex; }
.tip-read svg, .tips-head .btn svg { width: 14px; height: 14px; }
.tip-read:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tip-head:hover .tip-read.unread { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tips-entry.read h3 { color: var(--muted); }
.tips-notify { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.tips-notify .switch { width: auto; }
.tips-notify .i-info { display: inline-flex; color: var(--muted); line-height: 0; border-radius: 4px; }
.tips-notify .i-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) { .menu.tips-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 4px); width: auto; min-width: 0; max-width: none; } }

/* Shortcuts window */
.shortcuts { list-style: none; margin: 0; padding: 0; }
.shortcut { display: grid; grid-template-columns: minmax(120px, 150px) 1fr; gap: 16px; align-items: center; padding: 9px 2px; }
.shortcut + .shortcut { border-top: 1px solid var(--line); }
.shortcut .keys { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.shortcut .kbd { font-size: 12px; color: var(--ink); background: var(--surface-2); min-width: 22px; text-align: center; padding: 2px 6px; }
.shortcut .plus { color: var(--muted); font-size: 11px; font-weight: 300; }
.shortcut .desc { font-size: 13px; line-height: 1.45; }

/* Command palette (Ctrl/Cmd+K): a box near the top, above every window (.backdrop is z-index 50) */
.cmdk-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(15, 18, 24, .32); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fade .12s; }
.cmdk { width: min(100%, 620px); max-height: min(560px, 76vh); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden; animation: rise .16s var(--ease); }
.cmdk-field { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; padding: 4px 0; }
.cmdk-input::placeholder { color: var(--muted-2); }
.cmdk-list { overflow: auto; padding: 6px; min-height: 0; flex: 1 1 auto; }
.cmdk-none { padding: 18px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.cmdk-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cmdk-section + .cmdk-section { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 2px; }
.cmdk-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; min-height: 40px; color: var(--ink); }
.cmdk-row.active { background: var(--accent-soft); }
.cmdk-ico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); color: var(--muted); }
.cmdk-row.active .cmdk-ico { background: var(--surface); color: var(--accent); }
.cmdk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk-txt b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-txt small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-check { flex: none; display: inline-flex; color: var(--ok); }
.cmdk-side { flex: none; display: none; gap: 4px; }
.cmdk-row.active .cmdk-side, .cmdk-row:hover .cmdk-side { display: inline-flex; }
.cmdk-act { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; line-height: 18px; white-space: nowrap; }
.cmdk-act:hover, .cmdk-act.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cmdk-row .kbds { flex: none; display: inline-flex; align-items: center; gap: 3px; }
.cmdk-row .kbds .kbd { line-height: 16px; background: var(--surface); }
.cmdk-row .kbds .plus { font-size: 11px; color: var(--muted); }
.cmdk-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cmdk-foot .kbd { margin-right: 3px; line-height: 16px; }
/* Sentence → "Command" row: the summary may wrap; greyed while nobody could be found */
.cmdk-row.kind-command .cmdk-txt b { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.cmdk-row.kind-command .cmdk-txt small { white-space: normal; }
.cmdk-row.disabled { color: var(--muted); }
.cmdk-row.disabled .cmdk-txt b { color: var(--muted); }
.cmdk-row.disabled.active { background: var(--surface-2); }
.cmdk-row.disabled .cmdk-ico, .cmdk-row.disabled.active .cmdk-ico { color: var(--muted-2); background: var(--surface-2); }
/* A side action that would open a window over an editing one: greyed, no accent on hover; chosen = a darker outline */
.cmdk-act.disabled, .cmdk-act.disabled:hover { background: var(--surface-2); border-color: var(--line); color: var(--muted-2); }
.cmdk-act.disabled.on { background: var(--surface-2); border-color: var(--muted-2); color: var(--muted); }
/* Calendar search: the person's photo in place of the icon; "Searching…" / "unavailable" as a muted line */
.cmdk-ico.photo { background: transparent; }
.cmdk-ico.photo .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.cmdk-status { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; color: var(--muted); }
.cmdk-status.error { color: var(--muted-2); }
/* A row picked in the palette: highlighted for a moment in the overview */
.grid .name.flash { animation: row-flash 1.8s var(--ease); }
@keyframes row-flash { 0%, 55% { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } }
@media (prefers-reduced-motion: reduce) { .cmdk, .cmdk-backdrop { animation: none; } .grid .name.flash { animation: none; background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } }
/* end command palette */

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; width: var(--sidebar-w); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 8px; }
.sidebar-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font-body); font-weight: 600; }
.sidebar-scroll { overflow: auto; flex: 1; padding: 0 8px 12px; }
.group { border-radius: var(--radius); margin-bottom: 2px; }
.group-row { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 4px; border-radius: var(--radius); }
.group-row:hover { background: var(--surface-2); }
.group-row { cursor: default; }
.group-row .caret { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: default; flex: none; }
.group-row .caret svg { width: 14px; height: 14px; transition: transform .16s var(--ease); }
.group-row .caret.open svg { transform: rotate(90deg); }
.group-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; cursor: default; }
.group-row .name small { color: var(--muted); font-weight: 400; font-size: 12px; white-space: pre; }
.group-row.hidden-group .name { color: var(--muted); font-weight: 500; }
.group-row .tools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.group-row:hover .tools, .group-row:focus-within .tools { opacity: 1; }
.group-row .eye { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: default; }
.group-row .eye:hover { background: var(--surface-3); color: var(--ink); }
.group-row .eye.on { color: var(--accent); }
.group-row .eye.vis { flex: none; margin-right: -2px; }
.group-row .eye.vis:not(.on) { color: var(--muted-2); }
.group-row .eye svg { width: 16px; height: 16px; }
/* Live reordering (util/reorder.js): a fixed clone of the row (.drag-ghost) follows the pointer while the
   real row stays in the list as a dimmed placeholder and slides into the would-be order with the others
   (<transition-group name="glist">). Swiping a row still scrolls (pan-y); a touch drag starts after a
   250 ms hold. */
.group, .rule { position: relative; touch-action: pan-y; -webkit-touch-callout: none; }
.group.dragging, .rule.dragging { opacity: .35; }
.drag-ghost { z-index: 1000; pointer-events: none; margin: 0; opacity: .97; transform: scale(1.02); box-shadow: var(--shadow-2); background: var(--surface); border-radius: var(--radius-sm); transition: none; }
.drag-ghost .group-row { background: var(--surface-2); }
.glist-move { transition: transform .18s var(--ease); }
@media (prefers-reduced-motion: reduce) { .glist-move { transition: none; } }
.member { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 30px; border-radius: 6px; cursor: default; }
.member:hover { background: var(--surface-2); }
.member input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; cursor: default; }
.member .avatar { width: 22px; height: 22px; }
.member .txt { min-width: 0; flex: 1; line-height: 1.2; }
.member .txt b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.member .txt small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.member.me .txt b::after { content: "•"; color: var(--accent); margin-left: 5px; }
.members-empty { padding: 4px 6px 8px 30px; color: var(--muted); font-size: 12px; }
.sidebar-foot { border-top: 1px solid var(--line); padding: 8px 10px 10px; }
.minical { padding-right: 0; }
.minical-head { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
.minical-head .expand { width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: default; display: grid; place-items: center; }
.minical-head .expand:hover { background: var(--surface-2); color: var(--ink); }
.minical-head .expand.up { margin-left: 0; }
.minical-head .expand.down, .minical .findtime-head .expand { margin-right: 0; } /* same right edge as the sections above */
.minical .findtime-head { margin-bottom: 0; }
.minical-head .minical-title { padding: 0 4px; min-width: 0; white-space: nowrap; }
.minical-month + .minical-month { margin-top: 8px; }
.minical-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; text-transform: capitalize; padding: 2px 4px 4px; }
.minical-grid { display: grid; grid-template-columns: 22px repeat(7, 1fr); gap: 1px; }
.minical-grid.no-wk { grid-template-columns: repeat(7, 1fr); }
.minical-grid .dow { text-align: center; font-size: 10px; color: var(--muted); text-transform: uppercase; padding: 2px 0; }
.minical-grid .dow.weekend { color: var(--muted-2); }
.minical-grid .wk { font-family: var(--font-mono); font-size: 9px; color: var(--muted-2); display: flex; align-items: center; justify-content: center; }
.minical-grid .day { height: 26px; border: 0; border-radius: 6px; background: transparent; cursor: default; font-family: var(--font-mono); font-size: 12px; color: var(--ink); padding: 0; position: relative; }
.minical-grid .day:hover { background: var(--surface-2); }
/* Same specificity throughout, so later rules win: weekend < outside < range < start < today. */
.minical-grid .day.weekend { color: var(--muted); }
.minical-grid .day.outside { color: var(--muted-2); }
.minical-grid .day.range { background: var(--accent-soft); color: var(--ink); border-radius: 0; }
.minical-grid .day.start { background: var(--accent); color: var(--accent-ink); border-radius: 6px 0 0 6px; }
.minical-grid .day.start:hover { background: var(--accent); }
/* Today: bold amber number inside an amber ring, so it reads on any background (plain, range, start, weekend). */
.minical-grid .day.today { font-weight: 700; color: var(--today-line); box-shadow: inset 0 0 0 1.5px var(--today); }
.minical-grid .day.start.today { color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--today); }
.selection-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); font-size: 13px; animation: pop .14s var(--ease); }
.selection-bar .grow { flex: 1; }
.selection-bar .avatars { display: flex; }
.selection-bar .avatars .avatar { width: 22px; height: 22px; margin-left: -6px; border: 2px solid var(--accent-soft); }
.selection-bar .avatars .avatar:first-child { margin-left: 0; }
.findtime, .menu-section { padding: 4px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.findtime-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.findtime-head h2 { flex: 1; }
.findtime.collapsed { padding-bottom: 6px; }
.findtime-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font-body); font-weight: 600; }
.findtime-head .muted { font-size: 12px; font-family: var(--font-mono); }
.findtime-head .expand { width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: default; display: grid; place-items: center; margin-right: -4px; }
.findtime-head.clickable { cursor: default; user-select: none; border-radius: 6px; }
.findtime-head.clickable:hover h2 { color: var(--ink); }
.findtime-head .expand:hover { background: var(--surface-2); color: var(--ink); }
.menu-section.collapsed { padding-bottom: 6px; }
.findtime-body { min-height: 28px; display: flex; align-items: center; margin-bottom: 8px; }
.findtime-body .hint { font-size: 12px; line-height: 1.35; }
.findtime .avatars { display: flex; }
.findtime .avatars .avatar { width: 26px; height: 26px; margin-left: -6px; border: 2px solid var(--surface); }
.findtime .avatars .avatar:first-child { margin-left: 0; }
.btn.warm { background: var(--today-soft); border-color: transparent; color: var(--ink); }
.btn.warm:hover { background: color-mix(in srgb, var(--today) 35%, var(--surface)); }
/* Vacation calendar timeline */
.vac-toolbar { margin-bottom: 12px; gap: 10px; }
.vac-toolbar .field.inline { display: flex; align-items: center; gap: 6px; margin: 0; }
.vac-toolbar .field.inline > span { margin: 0; }
.vac-toolbar .vac-period { width: auto; }
.picker .opt .in-groups { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; padding-left: 8px; }
.lookup-memberof { font-size: 12px; flex-basis: 100%; }
.vac-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.vac-groups .field-label { margin: 0 4px 0 0; }
.vac-groups button.vac-group { border: 0; background: var(--surface-2); color: var(--muted); padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.vac-groups button.vac-group:hover { color: var(--ink); }
.vac-groups button.vac-group[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .14); }
.vac-groups button.vac-sel { margin-right: 6px; }
.vac-groups button.vac-group .n { font-family: var(--font-mono); font-size: 10px; opacity: .8; }
.vac-groups .vac-reset { border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: default; text-decoration: underline; text-underline-offset: 2px; padding: 4px 6px; }
.vac-groups .vac-reset:hover { color: var(--ink); }
.vac-today { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 12px; padding: 8px 10px; border-radius: var(--radius); background: var(--surface-2); }
.vac-today .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; }
.vac-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: 60vh; }
.vac-wrap.reloading { opacity: .55; transition: opacity .2s; pointer-events: none; }
.vac { min-width: 640px; --vac-name-w: 200px; }
.vac-head, .vac-row { display: grid; grid-template-columns: var(--vac-name-w) 1fr; border-bottom: 1px solid var(--line); }
.vac-head { position: sticky; top: 0; background: var(--surface); z-index: 2; font-size: 12px; }
.vac-head .vac-track { height: 44px; background: var(--surface); }
.vac.with-weeks .vac-head .vac-track { height: 58px; }
.vac-week { position: absolute; top: 24px; height: 16px; display: flex; align-items: center; padding-left: 4px; border-left: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); white-space: nowrap; overflow: hidden; pointer-events: none; }
.vac-daynum { position: absolute; bottom: 0; height: 18px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.vac-daynum.today { color: var(--today); font-weight: 700; }
.vac.grid .vac-row .vac-track { background-image: linear-gradient(90deg, var(--line) 0 1px, transparent 1px); background-size: var(--vac-step) 100%; background-position: var(--vac-off) 0; }
.vac-head .vac-name { display: flex; align-items: center; padding: 0 10px; font-size: 12px; }
.vac-month { position: absolute; top: 0; height: 24px; display: flex; align-items: center; padding-left: 6px; border-left: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; text-transform: capitalize; white-space: nowrap; overflow: hidden; }
.vac-row:last-child { border-bottom: 0; }
.vac-row.me .vac-name { box-shadow: inset 3px 0 0 var(--accent); }
.vac-name { display: flex; align-items: center; gap: 10px; padding: 6px 10px; position: sticky; left: 0; background: var(--surface); z-index: 1; border-right: 1px solid var(--line); min-width: 0; }
.vac-name .txt { min-width: 0; line-height: 1.25; }
.vac-name .txt b { display: block; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vac-name .txt small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vac-track { position: relative; min-height: 44px; background: var(--offhours); overflow: hidden; }
.vac-weekend { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--weekend) 0 5px, var(--surface-2) 5px 6px); }
.vac-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--today-line); z-index: 1; }
.vac-bar { position: absolute; top: 10px; height: 24px; border-radius: 6px; background: var(--vac-bar, #e5484d); color: #fff; font-size: 11px; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); z-index: 1; cursor: default; }
.vac-bar.current { box-shadow: 0 0 0 2px var(--today); }
.vac-bar.sk { background: var(--surface-2); color: transparent; box-shadow: none; }
.vac-none { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; white-space: nowrap; z-index: 1; pointer-events: none; }
.vac-empty { padding: 30px; text-align: center; grid-column: 1 / -1; }
.menu-toggle { display: none; }

/* --------------------------------------------------------------------------
   Overview grid – the wall planner
   -------------------------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.grid-wrap { flex: 1; overflow: auto; position: relative; overflow-anchor: none; } /* rows come and go while scrolling (see .vspace): no scroll anchoring */
.grid { display: grid; grid-template-columns: var(--name-col-w) repeat(var(--days), minmax(var(--day-min-w), 1fr)); min-width: max-content; width: 100%; }
.grid .h { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line-strong); height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; padding: 0 8px 14px; }
.grid .h .hours { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; overflow: hidden; }
.grid .h .hl { position: absolute; bottom: 1px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; line-height: 10px; color: var(--muted); }
.grid .h .hl::before { content: ""; position: absolute; left: 50%; top: -4px; width: 1px; height: 3px; background: var(--line-strong); }
.grid .h .hl.minor { font-size: 0; }
.grid .h .hl.start { transform: none; }
.grid .h .hl.start::before { left: 0; }
.grid .h .hl.end { transform: translateX(-100%); }
.grid .h .hl.end::before { left: auto; right: 0; }
.grid .h.corner { padding-bottom: 0; }
.grid.skeleton .h .hours { display: none; }
.grid .h.corner { left: 0; z-index: 4; border-right: 1px solid var(--line); }
.grid .h.corner { display: flex; flex-direction: row; align-items: center; gap: 8px; padding-left: 10px; padding-right: 10px; }
.grid .h.corner .corner-search { position: relative; flex: 1; min-width: 0; }
.grid .h.corner .corner-search .ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.grid .h.corner .corner-search .input.search { width: 100%; height: 30px; font-size: 12px; padding-left: 28px; }
/* Room for the key chips only while they are shown, so the browser's clear (x) stays at the right edge when typing */
.grid .h.corner .corner-search.with-keys .input.search { padding-right: 78px; }
/* The shortcut shown as key chips at the right of the filter field while it is empty */
.grid .h.corner .corner-search .kbds { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 3px; pointer-events: none; }
.grid .h.corner .corner-search .kbds .kbd { line-height: 16px; background: var(--surface); }
.grid .h.corner .corner-search .kbds .plus { font-size: 11px; color: var(--muted); }
.grid .h.corner .pick-all { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; cursor: default; opacity: .55; transition: opacity .12s; }
.grid .h.corner .pick-all:hover, .grid .h.corner .pick-all:has(input:checked), .grid .h.corner .pick-all:has(input:indeterminate) { opacity: 1; }
.grid .h.corner .pick-all input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: default; }
.grid .h .dow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; grid-column: 1; justify-self: start; white-space: nowrap; }
.grid .h .date { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; grid-column: 2; justify-self: center; white-space: nowrap; }
.grid .h.weekend .date { color: var(--muted); }
.grid .h .wkno { grid-column: 3; justify-self: end; white-space: nowrap; font-family: var(--font-mono); font-size: 10px; color: var(--muted); background: var(--surface-2); border-radius: 4px; padding: 1px 5px; }
.grid .h { position: sticky; }
.grid .h.today { background: var(--today-soft); }
.grid .h.today .date { color: var(--ink); }
.grid .h.today .date::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--today); margin-left: 7px; vertical-align: middle; }
.grid .name { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 10px; height: var(--row-h); min-width: 0; }
.grid .name .txt { min-width: 0; line-height: 1.25; }
.grid .name .txt b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.grid .name .txt small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.grid .name .txt .warn { color: var(--danger); }
.grid.rh-sm .name .txt small { display: none; }
.grid.rh-sm .name .avatar { width: 22px; height: 22px; }
.grid .name.me { box-shadow: inset 3px 0 0 var(--accent); }
.grid .name .pick { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: default; opacity: 0; transition: opacity .12s; flex: none; }
.grid .name:hover .pick, .grid .name.selected .pick, .grid .name .pick:focus-visible { opacity: 1; }
.grid .name .cal, .vac-name .cal { margin-left: auto; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: default; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.grid .name:hover .cal, .grid .name .cal:focus-visible, .vac-row:hover .cal, .vac-name .cal:focus-visible { opacity: 1; }
.grid .name .cal:hover, .vac-name .cal:hover { background: var(--surface-3); color: var(--ink); }
.grid.rh-sm .name .cal { width: 22px; height: 22px; }
/* Vacation calendar: remove a person from the list (hover-only, like .heat-remove) */
.vac-remove { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: default; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.vac-name .cal + .vac-remove { margin-left: -6px; }
.vac-row:hover .vac-remove, .vac-row:focus-within .vac-remove { opacity: 1; }
.vac-remove:hover, .vac-remove:focus-visible { color: var(--danger); background: var(--surface-2); }
@media (hover: none) { .vac-remove { opacity: 1; } }
/* Presence dot (util/presence.js): sits where the hover-only calendar button is, centred on it, and
   gives way to the button whenever that shows (name cell hovered or focused). Absolutely placed, so
   it takes no room and never changes the row height. */
.prow .name .dot { position: absolute; right: 19px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--muted); pointer-events: none; }
.grid.rh-sm .prow .name .dot { right: 17px; }
.prow .name .dot.p-busy { background: var(--danger); }
.prow .name .dot.p-free { background: var(--ok); }
.prow .name .dot.p-away { background: var(--away); }
.prow .name .dot.p-none { background: var(--muted); opacity: .45; }
[data-theme="dark"] .prow .name .dot.p-none { opacity: .6; }
.grid .name:hover .dot, .grid .name:focus-within .dot { display: none; }
.grid .name.selectable { cursor: default; user-select: none; }
.grid .name.selectable:hover { background: var(--surface-2); }
.grid .name.selected:hover { background: var(--accent-soft); }
.grid .name.selected { background: var(--accent-soft); }
.grid .cell { position: relative; height: var(--row-h); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--offhours); overflow: hidden; }
/* One person per .prow: display: contents keeps the name and the day cells items of the page grid.
   Only the rows on screen are rendered; a .vspace above and below spans all columns and takes the
   height of the rows it stands in for, so the scrollbar matches the whole list. */
.grid .prow { display: contents; }
/* Row lines in the spacer, so a fast flick shows empty rows rather than a blank area until the next frame. */
.grid .vspace { grid-column: 1 / -1; min-height: 0; pointer-events: none; background: linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) 0) 0 0 / 100% var(--row-h); }
/* A month is wider than the screen: let the browser skip paint for the day cells scrolled out of view
   sideways. Cells have a fixed height and take their width from the grid. */
.grid .cell { content-visibility: auto; contain-intrinsic-size: auto 0px auto var(--row-h); }
.grid .cell.weekend { background: repeating-linear-gradient(135deg, var(--weekend) 0 6px, var(--surface-2) 6px 7px); }
.grid .cell.today { box-shadow: inset 0 0 0 999px rgba(255, 178, 36, .07); }
.grid .cell .band { position: absolute; top: 0; bottom: 0; background: var(--workband); }
.grid.hour-grid .cell::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px var(--hour-w)); background-position: var(--hour-off) 0; background-size: 100% 100%; opacity: .9; }
.grid .cell .band .loc { position: absolute; top: 3px; left: 4px; line-height: 0; color: var(--muted); opacity: .8; pointer-events: auto; }
.grid.rh-sm .cell .band .loc { display: none; }
.hours-info { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: default; height: 34px; }
.hours-info .i { color: var(--muted); line-height: 0; }
.hours-pop { position: fixed; z-index: 70; min-width: 260px; max-height: calc(100vh - 16px); overflow: auto; cursor: default; }
.hours-pop .hd { font-weight: 600; margin-bottom: 8px; color: var(--ink-2); }
.hours-pop table { border-collapse: collapse; width: 100%; }
.hours-pop th { text-align: left; font-weight: 600; font-size: 11px; color: var(--muted); padding: 0 12px 4px 0; border-bottom: 1px solid var(--line); }
.hours-pop td { padding: 4px 12px 4px 0; vertical-align: top; white-space: nowrap; border-bottom: 1px solid var(--line); }
.hours-pop tr:last-child td { border-bottom: 0; }
.hours-pop td.d { text-transform: capitalize; color: var(--ink-2); }
.hours-pop td.h { font-family: var(--font-mono); }
.hours-pop td.l { color: var(--muted); }
.hours-pop td.l .loc { display: inline-flex; align-items: center; gap: 5px; }
.hours-pop td.l .loc svg { flex: none; }
.hours-pop tr.off td { color: var(--muted-2); }
.hours-pop tr.today td.d { color: var(--today-line); font-weight: 600; }
.steps.compact { margin-bottom: 12px; max-width: 260px; }
/* Settings: menu on the left, the chosen section on the right; the layout fills the fixed-size window. */
.settings-layout { display: flex; margin: -4px -20px -16px; height: calc(100% + 20px); min-height: 0; }
.settings-nav { flex: none; width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--surface-2); overflow: auto; }
.settings-nav button { border: 0; background: transparent; text-align: left; padding: 9px 12px; border-radius: 8px; cursor: default; color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-nav button:hover { background: var(--surface); color: var(--ink); }
.settings-nav button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.settings-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.settings-content { flex: 1; min-width: 0; padding: 14px 22px 16px; overflow: auto; }
.settings-panel { padding-bottom: 6px; }
.steps button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .14); }
.grid .cell .now { position: absolute; top: 0; bottom: 0; left: var(--now-pct); width: 2px; background: var(--today-line); z-index: 3; opacity: .9; }
.grid .cell .blk { z-index: 2; } /* appointments sit on top of the hour grid */
.grid .strip { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.grid .blk {
  position: absolute; border-radius: 4px; background: var(--blk, var(--event)); color: var(--blk-ink, var(--event-ink));
  font-size: 11px; line-height: 1.2; padding: 2px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  cursor: default; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); opacity: 0; animation: blk-in .25s var(--ease) forwards;
}
[data-theme="dark"] .grid .blk { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.grid.no-anim .blk { opacity: 1; animation: none; }
@keyframes blk-in { to { opacity: 1; } }
.grid .blk.tentative { background: repeating-linear-gradient(135deg, var(--blk, var(--event)) 0 4px, color-mix(in srgb, var(--blk, var(--event)) 55%, transparent) 4px 8px); }
.grid .blk.free { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--blk, var(--free-outline)); }
.grid .blk.oof:not([style*="--blk"]) { background: var(--muted); }
.grid .blk.private { font-style: italic; }
.grid .blk .t { font-family: var(--font-mono); font-size: 10px; opacity: .85; display: none; }
.grid .blk.allday { left: 2px !important; right: 2px; width: auto !important; }
/* Row heights */
/* Lanes: S one appointment per row, M two, L three (--lane is set per block). */
.grid .blk { top: calc(var(--lane-top) + var(--lane, 0) * var(--lane-step)); height: var(--lane-h); }
.grid.rh-sm { --row-h: 34px; --lane-top: 11px; --lane-h: 16px; --lane-step: 0px; }
.grid.rh-sm .blk { padding: 0 4px; font-size: 10px; line-height: 16px; }
.grid.rh-sm .blk.allday { top: 3px; height: 4px; padding: 0; border-radius: 2px; font-size: 0; }
.grid.rh-md { --row-h: 56px; --lane-top: 16px; --lane-h: 18px; --lane-step: 20px; }
.grid.rh-md .blk { padding: 0 5px; font-size: 10.5px; line-height: 18px; }
.grid.rh-md .blk.allday { top: 3px; height: 10px; padding: 0 5px; font-size: 9px; line-height: 10px; }
.grid.rh-lg { --row-h: 92px; --lane-top: 24px; --lane-h: 20px; --lane-step: 23px; }
.grid.rh-lg .blk { padding: 0 6px; font-size: 11px; line-height: 20px; }

.grid.rh-lg .blk.allday { top: 4px; height: 16px; font-size: 10px; line-height: 16px; padding: 0 6px; }
.grid .cell .err { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; }

.grid-empty { display: grid; place-items: center; height: 100%; padding: 40px; text-align: center; color: var(--muted); }
.grid-empty .card { max-width: 420px; }
.grid-empty h3 { font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.grid-empty p { margin: 0 0 16px; }
/* Skeletons: shown until the first data arrives; later loads keep the old data and show the top bar. */
.sk { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 6px; display: block; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent), transparent); animation: sk-shimmer 1.4s ease-in-out infinite; }
@keyframes sk-shimmer { to { transform: translateX(100%); } }
.sk.circle { border-radius: 50%; }
.sk-groups { padding: 2px 6px 8px; display: grid; gap: 6px; }
.sk-groups .row { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; }
.sk-groups .row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.grid.skeleton .cell .sk-blk, .grid .cell.sk-cell .sk-blk { position: absolute; top: 22%; height: 56%; border-radius: 4px; }
.grid.skeleton .h .sk, .grid.skeleton .name .txt .sk { margin: 3px 0; }
/* The overview's own progress bar along the top of the grid: same look as the page bar (.loadbar). */
.loading-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--ok) 16%, transparent); z-index: 5; }
@keyframes slide { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* Info boxes: every hover box on the site shares the card used by the free/busy lists in "Find a time". */
.tooltip, .tip, .heat-pop, .hours-pop { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2); padding: 8px 10px; font-size: 12px; line-height: 1.4; }
.tooltip, .tip { position: fixed; z-index: 80; max-width: 300px; pointer-events: none; animation: pop .12s var(--ease); }
.tooltip .time { font-family: var(--font-mono); color: var(--muted); display: block; margin-bottom: 2px; }
.tooltip .sub, .tip .tip-title { font-weight: 600; display: block; }
.tooltip .loc, .tooltip .st, .tip .tip-line { color: var(--muted); display: block; }
.tip .sync-state { display: flex; margin-top: 4px; }
.tip .tip-keys { display: flex; gap: 3px; align-items: center; margin: 4px 0 0; }
.tip .tip-keys .kbd { line-height: 16px; }
.tip .tip-keys .plus { font-size: 11px; line-height: 16px; }

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; animation: fade .14s; }
/* The dim + blur live on a layer of their own so a spotlight can cut a sharp, undimmed hole in it. */
.backdrop::before { content: ""; position: absolute; inset: 0; background: rgba(15, 18, 24, .45); backdrop-filter: blur(2px); clip-path: var(--hole, none); }
.spotlight { position: absolute; border: 2px solid #e5484d; border-radius: 8px; pointer-events: none; animation: fade .14s, beam 1.8s ease-in-out .14s infinite; }
@keyframes beam {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 6px 0 rgba(229, 72, 77, .45); }
  50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 18px 4px rgba(229, 72, 77, .7); }
}
@media (prefers-reduced-motion: reduce) { .spotlight { animation: fade .14s; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 12px 2px rgba(229, 72, 77, .55); } }
@keyframes fade { from { opacity: 0; } }
.modal { position: relative; z-index: 1; width: min(100%, var(--modal-w, 560px)); height: var(--modal-h, auto); max-height: calc(100vh - 40px); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); display: flex; flex-direction: column; animation: rise .18s var(--ease); border: 1px solid var(--line); }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; }
.modal-head h2 { font-size: 20px; flex: 1; }
.modal-head .head-keys { display: inline-flex; align-items: center; gap: 3px; margin-right: auto; margin-left: -4px; }
.modal-head .head-keys .plus { font-size: 11px; color: var(--muted); }
.modal-head h2:has(+ .head-keys) { flex: 0 0 auto; }
.modal-head .close { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; cursor: default; color: var(--muted); display: grid; place-items: center; }
.modal-head .close:hover { background: var(--surface-2); color: var(--ink); }
.modal-body { padding: 4px 20px 16px; overflow: auto; min-height: 0; flex: 1 1 auto; }
.modal { overflow: hidden; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--line); }
.modal-foot .grow { flex: 1; }
/* The shake is a second animation next to the entry "rise", at the same index with or without .shake,
   so removing the class does not restart "rise" (that restart was a visible blink). */
.modal.shake { animation: rise .18s var(--ease), shake .3s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.modal-note { font-size: 12px; color: var(--muted); }
.callout { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; margin-bottom: 12px; }
.callout.warn { background: var(--today-soft); }
.callout.danger { background: var(--danger-soft); color: var(--danger); }
.callout.ok { background: var(--ok-soft); }
.callout code { font-family: var(--font-mono); font-size: 12px; user-select: all; }

.picker { position: relative; }
.picker .results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); max-height: 260px; overflow: auto; padding: 4px; }
.picker .results .opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: default; }
.picker .results .opt:hover, .picker .results .opt.active { background: var(--surface-2); }
.picker .results .opt .txt, .heat-add-group .txt { min-width: 0; line-height: 1.2; }
.picker .results .opt .txt b, .heat-add-group .txt b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.picker .results .opt .txt small, .heat-add-group .txt small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker .results .none { padding: 8px; color: var(--muted); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Multi-select picker: rows get a checkbox and the list ends in a sticky "n selected · Done" bar. */
.picker.multi .results { padding-bottom: 0; }
.picker .results .opt .opt-check { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); pointer-events: none; flex: none; }
.picker .results .opt.picked .txt b { font-weight: 600; }
.picker-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px -4px 0; padding: 6px 8px 6px 12px; background: var(--surface); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.picker-foot .picker-done { color: var(--accent); font-weight: 600; }
/* Groups offered above the people (Find a time → Add more): a small section label, an icon avatar */
.picker .results .picker-sec { padding: 6px 8px 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.picker .results .opt .opt-group-ico, .heat-add-group .opt-group-ico { display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
/* Create / edit group: form on the left, what is chosen on the right. */
.group-layout { display: grid; grid-template-columns: 1fr 360px; gap: 18px; height: 100%; min-height: 0; }
.group-layout.single { grid-template-columns: 1fr; }
.group-form { min-width: 0; min-height: 0; overflow-y: auto; padding: 2px 2px 8px; }
.group-name-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.group-name-row label.field { flex: 1 1 220px; margin: 0; }
.group-type .seg { height: 34px; align-items: stretch; }
.group-picked { min-height: 0; display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gp-empty { margin: auto; padding: 24px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 8px 10px; }
.gp-head { margin: 10px 4px 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.gp-head:first-child { margin-top: 4px; }
.gp-head .n { font-family: var(--font-mono); font-weight: 400; color: var(--muted); }
.gp-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; }
.gp-row:hover { background: var(--surface); }
.gp-row .txt { flex: 1; min-width: 0; line-height: 1.25; }
.gp-row .txt b { display: block; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-row .txt small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-row .txt .gp-note { font-style: italic; }
.gp-remove { border: 0; background: transparent; cursor: default; color: var(--muted); padding: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; }
.gp-remove:hover { background: var(--surface-3); color: var(--ink); }
@media (max-width: 760px) { .group-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(180px, 1fr); } }

.rule-list { display: flex; flex-direction: column; gap: 6px; }
.rule { display: grid; grid-template-columns: 20px 24px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rule .grip { color: var(--muted-2); cursor: default; display: grid; place-items: center; }
.rule .swatch { width: 24px; height: 24px; border-radius: 6px; }
.rule .txt { min-width: 0; }
.rule .txt b { display: block; font-weight: 600; font-size: 13px; }
.rule .txt small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule .txt small code { font-family: var(--font-mono); }
.rule.off .txt { opacity: .55; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatches button { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: default; }
.swatches button.active { border-color: var(--ink); }
.preview-blk { display: inline-block; border-radius: 4px; padding: 3px 8px; font-size: 12px; color: #fff; }

/* Heatmap */
.heat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; height: 100%; min-height: 0; }
.heat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-x: clip; }
.heat-main .heat-wrap { flex: 1 1 auto; min-height: 160px; }
.heat-side { border-left: 1px solid var(--line); padding-left: 16px; overflow: auto; min-height: 0; font-size: 13px; display: flex; flex-direction: column; }
.heat-side > * { flex: none; }
/* Meeting details: sits at the bottom of the panel when there is room, else simply follows the lists. */
/* The people lists scroll on their own; Meeting details is a footer that always stays at the bottom of the column. */
.heat-side-lists { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 16px; }
.heat-meeting { flex: none; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; overflow: visible; }
.heat-meeting .heat-meeting-head { margin: 0; }
.heat-meeting-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.heat-meeting-field > span { font-size: 11px; color: var(--muted); }
.heat-meeting .heat-onbehalf { margin-top: 0; }
.heat-organizer-you { flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-organizer-you b { font-weight: 600; }
.heat-meeting .heat-onbehalf .picker { min-width: 0; max-width: none; }
.heat-meeting .picker .results { top: auto; bottom: calc(100% + 4px); }
.heat-meeting-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.heat-meeting-facts dt { color: var(--muted); font-size: 12px; }
.heat-meeting-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.heat-meeting.empty .heat-meeting-facts dd { color: var(--muted); }
.heat-meeting-facts .hm-free { color: var(--ok); }
.heat-meeting-facts .hm-optional { color: var(--muted); }
.heat-meeting .heat-online { font-size: 13px; width: fit-content; }
.heat-meeting-note { margin: 0; font-size: 12px; line-height: 1.4; }
button.heat-add.active { background: var(--accent-soft); color: var(--accent); }
.heat-side .field-label .n { font-family: var(--font-mono); font-weight: 400; color: var(--muted); margin-left: 4px; }
.heat-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.heat-people li { display: flex; align-items: flex-start; gap: 8px; }
.heat-people li .txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.heat-people li .txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-people li .txt small { font-size: 12px; }
.heat-item { display: flex; align-items: baseline; gap: 6px; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); border-left: 3px solid var(--danger); min-width: 0; }
.heat-item.tentative { border-left-style: dashed; }
.heat-item.oof { border-left-color: var(--today-line); }
.heat-item .mono { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.heat-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-item small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.heat-side .hint { font-size: 12px; }
/* Panel header: "People · n" with "Add more"; it stays in view while the list scrolls. */
.heat-side-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding-bottom: 6px; background: var(--surface); border-bottom: 1px solid var(--line); }
.heat-side-head .field-label { margin: 0; }
/* Remove a person from the list: shown on row hover or keyboard focus, always on touch screens. */
.heat-remove { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: default; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.heat-people li:hover .heat-remove, .heat-people li:focus-within .heat-remove { opacity: 1; }
.heat-remove:hover, .heat-remove:focus-visible { color: var(--danger); background: var(--surface-2); }
@media (hover: none) { .heat-remove { opacity: 1; } }
/* Optional attendee (cc in Outlook): the same hover-only button as remove, always shown while on. */
.heat-optional { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.heat-optional + .heat-remove { margin-left: 0; }
.heat-people li:hover .heat-optional, .heat-people li:focus-within .heat-optional, .heat-optional.active { opacity: 1; }
.heat-optional:hover, .heat-optional:focus-visible { color: var(--ink); background: var(--surface-2); }
.heat-optional.active { color: var(--accent); background: var(--accent-soft); }
@media (hover: none) { .heat-optional { opacity: 1; } }
.heat-opt-pill { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 500; line-height: 16px; vertical-align: 1px; }
/* VIP (must attend): star toggle before the optional one, gold and always shown when on; gold pill after the name */
.heat-vip { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.heat-vip + .heat-optional { margin-left: 0; }
.heat-people li:hover .heat-vip, .heat-people li:focus-within .heat-vip, .heat-vip.active { opacity: 1; }
.heat-vip:hover, .heat-vip:focus-visible { color: var(--vip); background: var(--surface-2); }
.heat-vip.active { color: var(--vip); background: var(--vip-soft); }
.heat-vip.active svg { fill: currentColor; }
@media (hover: none) { .heat-vip { opacity: 1; } }
.heat-vip-pill { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--vip); color: var(--vip-ink); font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .02em; vertical-align: 1px; }
.heat-meeting-facts .hm-vip { color: var(--vip); font-weight: 600; }
.heat-count.vip-block { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); font-weight: 600; }
.tooltip .vip-block { color: var(--danger); font-weight: 600; display: block; }
.heat-empty { padding: 32px 16px; text-align: center; font-size: 13px; }
.heat-toolbar { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.heat-toolbar .field { flex: none; }
/* Fixed widths so the eight fields fit the column (about 920px at the modal's 1280px); anything wider
   would make the modal body scroll sideways and carry the grid's frozen time column out of view. */
.heat-toolbar .field > input[type="date"] { width: 132px; }
.heat-toolbar .heat-slot { width: 80px; }
.heat-toolbar .heat-duration { width: 92px; }
.heat-toolbar .heat-workonly, .heat-toolbar .heat-weekends { width: 72px; }
/* One rule for every heading in the toolbar, label- and div-based alike, so they look identical. */
.heat-toolbar label.field > span, .heat-toolbar .field > span { display: block; font-size: 11px; font-weight: 500; line-height: 16px; color: var(--muted); margin: 0 0 4px; white-space: nowrap; letter-spacing: 0; }
/* Weekday filter: a select-looking button with a popover of checkboxes. */
.heat-wd { position: relative; }
.heat-weekdays { width: 110px; min-width: 0; max-width: none; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; font-size: 13px; }
.heat-weekdays[aria-expanded="true"] { border-color: var(--accent); }
.heat-weekdays-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 170px; display: flex; flex-direction: column; gap: 1px; padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2); font-size: 13px; animation: pop .12s var(--ease); }
.heat-wd-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: default; text-transform: capitalize; user-select: none; }
.heat-wd-row:hover { background: var(--surface-2); }
.heat-wd-row input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; cursor: default; }
.heat-wd-clear { margin-top: 4px; justify-content: flex-start; color: var(--muted); }
.heat-wd-clear:hover { color: var(--ink); }
/* "Add more": a person picker beside a box for pasted or imported e-mail addresses. */
.heat-add-pop { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 10px; padding: 8px; border-radius: var(--radius); background: var(--surface-2); }
.heat-add-bar { display: flex; align-items: center; gap: 4px; }
.heat-add-tabs { flex: 1; min-width: 0; display: flex; gap: 2px; }
.heat-add-tab { border: 0; background: transparent; padding: 4px 8px; border-radius: 6px; color: var(--muted); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; }
.heat-add-tab:hover { color: var(--ink); }
.heat-add-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.heat-add-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.heat-add-close { flex: none; width: 24px; height: 24px; }
.heat-add-panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.heat-add-panel .picker, .heat-add-panel .input { width: 100%; max-width: none; min-width: 0; }
.heat-add-glist { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.heat-add-group { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: var(--ink); }
.heat-add-group:hover, .heat-add-group.active { background: var(--surface); }
.heat-add-group:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.heat-add-group .txt { flex: 1; }
.heat-add-group .heat-add-group-plus { flex: none; color: var(--muted); }
.heat-add-none { padding: 4px 2px; }
.heat-emails { min-height: 52px; resize: vertical; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
.heat-add-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.heat-add-actions .hint { font-size: 12px; }
.heat-csv { position: relative; }
.heat-csv input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.heat-csv:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.heat-add-csv-hint { font-size: 12px; line-height: 1.4; }
.heat-emails-result { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.heat-emails-result .ok { color: var(--ok); font-weight: 600; }
.heat-emails-result .bad { color: var(--danger); overflow-wrap: anywhere; }
.heat-count.unavail b { color: var(--muted); }
.heat-people li.unavail { opacity: .8; }
/* The Unavailable heading, with Retry for people whose request failed */
.heat-unavail-head { display: flex; align-items: center; gap: 8px; margin-top: 14px; margin-bottom: 6px; }
.heat-unavail-head .field-label { margin: 0; }
.heat-unavail-head .heat-retry { margin-left: auto; }
.heat-people li .warn { color: var(--danger); }
.heat-period { width: 104px; }
.btn.disabled { opacity: .5; pointer-events: none; }
.heat-toolbar label.field { margin: 0; }
.heat-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
/* The grid is as wide as its columns (max-content), never just the scrollport: sticky elements are held
   inside their containing block, so a grid narrower than its tracks would drag the frozen time column
   and the corner away once you scroll past its edge. min-width keeps short periods filling the width. */
.heat { display: grid; grid-template-columns: 56px repeat(var(--hdays), minmax(72px, 1fr)); width: max-content; min-width: 100%; font-size: 12px; user-select: none; }
.heat .hh { position: sticky; top: 0; background: var(--surface); padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--line); z-index: 3; }
/* The empty corner above the times stays put both ways, over the day headers and the time column. */
.heat .hh.hcorner { left: 0; z-index: 4; border-right: 1px solid var(--line); }
.heat .hh .dow { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: block; }
.heat .hh .date { font-family: var(--font-display); font-weight: 600; }
.heat .hh.weekend { color: var(--muted); }
.heat .hh.today { background: var(--today-soft); }
.heat .hh.today .date { color: var(--today-line); }
/* "Now" line in today's column: absolutely placed in that grid area, so it never takes a cell's place. */
.heat { position: relative; }
.heat-now { position: absolute; grid-column: var(--now-col); grid-row: var(--now-row); left: 0; right: 0; top: var(--now-top, 0%); height: 2px; margin-top: -1px; background: var(--today-line); z-index: 1; pointer-events: none; }
.heat-now::before { content: ''; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--today-line); }
.heat .ht { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding: 0 6px; display: flex; align-items: center; justify-content: flex-end; border-right: 1px solid var(--line); height: 22px; position: sticky; left: 0; z-index: 2; background: var(--surface); }
.heat .hc { height: 22px; border-right: 1px solid rgba(255, 255, 255, .45); border-bottom: 1px solid rgba(255, 255, 255, .45); cursor: default; position: relative; }
[data-theme="dark"] .heat .hc { border-color: rgba(0, 0, 0, .35); }
.heat .hc.hour { border-top: 1px solid var(--line-strong); }
.heat .hc.weekend { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .10) 0 5px, transparent 5px 6px); }
.heat .hc.sel { box-shadow: inset 0 0 0 2px var(--ink); z-index: 1; }
.heat .hc:hover { filter: brightness(.96); }
.heat.skeleton .hc { cursor: default; border-radius: 0; border-color: var(--surface); }
.heat.skeleton .hc.sk::after { animation-duration: 1.8s; }
.heat.skeleton .ht { justify-content: flex-end; }
/* Find a time / vacation calendar loading in chunks: the people so far, dimmed, and placeholders for the rest */
.heat.partial { opacity: .6; transition: opacity .2s; }
.heat-pending .heat-sk li { align-items: center; }
.heat-pending .heat-sk .txt { gap: 5px; }
.vac-row.vac-pending .vac-name { font-size: 12px; }
.vac-row.vac-pending .vac-track { opacity: .7; }
.heat-wrap.reloading { opacity: .55; transition: opacity .2s; pointer-events: none; }
.suggest { margin: 0 0 12px; }
/* Three suggestions per row; See more / See fewer take the slots after them */
.suggest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.suggest-grid .suggest-btn { justify-content: flex-start; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.suggest-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.suggest-head .field-label { margin: 0; }
.suggest-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.suggest-btn .suggest-count { font-family: var(--font-mono); font-size: 11px; color: var(--ok); margin-left: 4px; }
.suggest-btn.partial .suggest-count { color: var(--today-line); }
.heat-legend { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.heat-legend .bar { width: 140px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgb(229 85 96), rgb(245 190 60), rgb(46 176 114)); }
.heat-detail { margin: 0 0 12px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); flex: none; }
.heat-detail.empty h3 { font-weight: 500; }
.heat-detail h3 { font-size: 15px; margin-bottom: 8px; }
/* One line: "label - [n free] [n busy] …" with the clear button at the right; 30px keeps the box still when deselecting. */
.heat-detail-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 30px; }
.heat-detail-line h3.heat-detail-label { margin: 0; line-height: 1.3; }
.heat-detail-line .heat-detail-sep { white-space: pre; margin: 0 -8px; font-size: 15px; color: var(--muted); }
.heat-detail-line .heat-detail-clear { margin-left: auto; align-self: flex-start; }
.heat-detail ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.heat-detail li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.heat-detail li .loc { line-height: 0; color: var(--muted); }
.heat-detail li .st { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.heat-detail li.busy .st { color: var(--danger); }
.heat-count { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; cursor: default; outline-offset: 2px; }
.heat-count b { font-family: var(--font-display); font-size: 16px; line-height: 1; }
.heat-count.free b { color: var(--ok); }
.heat-count.busy b { color: var(--danger); }
.heat-count.off b { color: var(--muted); }
.heat-pop { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; min-width: 240px; max-height: 260px; overflow: auto; }
.heat-count:hover .heat-pop, .heat-count:focus .heat-pop, .heat-count:focus-within .heat-pop { display: block; }
.heat-detail .heat-pop ul { grid-template-columns: 1fr; }
.heat-onbehalf { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.heat-onbehalf .picker { flex: 1; min-width: 220px; max-width: 320px; }
.heat-onbehalf .i-info { display: inline-flex; color: var(--muted); line-height: 0; cursor: default; border-radius: 4px; }
.heat-onbehalf .i-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Saved searches: the dropdown in the Find a time header and the save field in its footer */
.heat-saved-btn { color: var(--muted); }
.heat-saved-btn:hover, .heat-saved-btn[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
.heat-saved-menu { width: 400px; max-width: calc(100vw - 48px); padding: 8px; }
.heat-saved-head { display: flex; align-items: center; gap: 8px; padding: 2px 6px 8px; }
.heat-saved-head .field-label { margin: 0; }
.heat-saved-head .grow { flex: 1; }
.heat-saved-info { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; line-height: 1; border-radius: 4px; }
.heat-saved-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.heat-saved-status, .heat-saved-empty { padding: 6px 6px 10px; font-size: 13px; }
.heat-saved-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.heat-saved-row { display: flex; align-items: center; gap: 4px; border-radius: 6px; }
.heat-saved-row:hover, .heat-saved-row:focus-within { background: var(--surface-2); }
.heat-saved-row.current { box-shadow: inset 2px 0 0 var(--accent); }
.heat-saved-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 8px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; border-radius: 6px; }
.heat-saved-open b, .heat-saved-open small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-saved-open b { font-size: 13px; font-weight: 600; }
.heat-saved-open small { font-size: 12px; }
.heat-saved-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.heat-saved-acts { display: flex; gap: 2px; padding-right: 4px; opacity: 0; transition: opacity .12s var(--ease); }
.heat-saved-row:hover .heat-saved-acts, .heat-saved-row:focus-within .heat-saved-acts { opacity: 1; }
.heat-saved-act { color: var(--muted); }
.heat-saved-act:hover { color: var(--ink); background: var(--surface-3); }
.heat-saved-act.danger:hover { color: var(--danger); }
.heat-saved-row.renaming { padding: 4px; gap: 6px; background: var(--surface-2); }
.heat-saved-rename { flex: 1; min-width: 0; height: 30px; }
.heat-save { display: flex; align-items: center; gap: 6px; min-width: 0; }
.heat-save-name { width: 260px; max-width: 40vw; }
.heat-save-new { color: var(--accent); }

/* Person lookup */
.lookup-search { position: relative; display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.lookup-search .input { padding-left: 34px; height: 40px; font-size: 15px; }
.lookup-search .lookup-icon { position: absolute; left: 11px; top: 12px; color: var(--muted); }
.lookup-results { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; }
.lookup-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--radius); cursor: default; text-align: left; color: var(--ink); width: 100%; }
.lookup-row.active, .lookup-row:hover { background: var(--surface-2); }
.lookup-row .txt { flex: 1; min-width: 0; line-height: 1.25; }
.lookup-row .txt b, .lookup-head .txt b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup-row .txt small, .lookup-head .txt small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lookup-head .txt b { font-family: var(--font-display); font-size: 18px; }
.lookup-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-radius: var(--radius); background: var(--surface-2); margin-bottom: 12px; }
.lookup-range { font-size: 12px; margin: 0 2px 6px; }
.lookup-days { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: min(440px, 52vh); overscroll-behavior: contain; }
.lookup-more { display: flex; justify-content: center; padding: 8px; font-size: 12px; }
.lookup-day { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.lookup-day:last-child { border-bottom: 0; }
.lookup-day.weekend { background: var(--surface-2); }
.lookup-day.today .lookup-date .date { color: var(--today-line); }
.lookup-date .dow { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.lookup-date .date { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.lookup-date .hours { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.lookup-date .hours .loc { line-height: 0; }
/* "Find a time" for that day: sits at the row's right end, shown while the row is hovered or focused */
/* Sits over the day's items: fully opaque (the .btn.ghost rule would otherwise make it transparent) and above them */
.lookup-day .btn.lookup-find { position: absolute; top: 6px; right: 8px; z-index: 2; gap: 5px; box-shadow: var(--shadow-2); opacity: 0; transition: opacity .12s; }
.lookup-day:hover .lookup-find, .lookup-day:focus-within .lookup-find { opacity: 1; }
@media (hover: none) { .lookup-find { opacity: 1; } }
.lookup-items { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.lookup-items .free { font-size: 12px; align-self: center; }
.lookup-item { display: inline-flex; gap: 6px; align-items: center; padding: 2px 8px; border-radius: 5px; background: var(--event); color: var(--event-ink); font-size: 12px; max-width: 100%; }
.lookup-item .mono { font-size: 11px; opacity: .85; }
.lookup-item.free { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--free-outline); }
.lookup-item.tentative { background: repeating-linear-gradient(135deg, var(--event) 0 4px, color-mix(in srgb, var(--event) 55%, transparent) 4px 8px); }

/* Toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 70; }
.toast { background: var(--ink); color: var(--ground); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow-2); font-size: 13px; max-width: 360px; animation: rise .18s var(--ease); display: flex; gap: 10px; align-items: center; }
[data-theme="dark"] .toast { background: #f1f3f7; color: #1b1f26; }
.toast.danger { background: var(--danger); color: #fff; }
.toast > span { min-width: 0; overflow-wrap: anywhere; user-select: text; } /* a long link (Copy this link: …) wraps and can be selected */
.toast button { border: 0; background: transparent; color: inherit; cursor: default; opacity: .8; }
.toast .btn { height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; border-radius: 6px; opacity: 1; }
.toast .btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

/* Loading bar: a thin green bar along the very top while a heavy load runs (components/LoadBar.js).
   With progress it fills up (calendars in / calendars asked for) with a soft shimmer sliding across;
   without, it slides back and forth. Fixed and click-through, so it never moves content; above
   everything, modals (50), toasts (70) and info boxes (80) included. */
.loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; overflow: hidden; background: color-mix(in srgb, var(--ok) 16%, transparent); }
.loadbar-run { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; border-radius: 0 2px 2px 0; background: var(--ok); animation: loadbar-run 1.2s ease-in-out infinite alternate; }
@keyframes loadbar-run { from { transform: translateX(-100%); } to { transform: translateX(286%); } } /* 35% wide: 1 / .35 = 286% of its own width crosses the screen */
@keyframes loadbar-pulse { 50% { opacity: .35; } }
.loadbar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; overflow: hidden; border-radius: 0 2px 2px 0; background: var(--ok); transition: width .25s ease-out; }
.loadbar-fill::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: loadbar-shimmer 1.4s ease-in-out infinite; }
@keyframes loadbar-shimmer { to { transform: translateX(100%); } }
/* Reduced motion: no sliding, the full width pulses gently instead (overrides the global near-zero
   duration); the progress fill has no shimmer and jumps instead of growing. */
@media (prefers-reduced-motion: reduce) {
  .loadbar .loadbar-run { width: 100%; border-radius: 0; transform: none; animation: loadbar-pulse 1.6s ease-in-out infinite !important; }
  .loadbar .loadbar-fill { transition: none; }
  .loadbar .loadbar-fill::after { content: none; animation: none; }
}

/* --------------------------------------------------------------------------
   Stand-alone pages (login, setup)
   -------------------------------------------------------------------------- */
.page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 440px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 32px; }
.card.wide { width: min(100%, 760px); }
.card h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.card .lead { color: var(--muted); margin: 0 0 22px; }
.brand-lg { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.brand-lg .brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.brand-lg span { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--muted); }
.btn.ms { height: 44px; width: 100%; font-size: 15px; gap: 10px; }
.btn.ms svg { width: 18px; height: 18px; }
.btn.ms + form { margin-top: 18px; }
.page-foot { margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center; }
.steps { display: flex; gap: 6px; margin-bottom: 22px; }
.steps button { flex: 1; border: 0; background: var(--surface-2); padding: 8px; border-radius: 8px; cursor: default; color: var(--muted); font-weight: 500; font-size: 13px; }
.steps button.active { background: var(--accent-soft); color: var(--accent); }
.steps button.done { color: var(--ok); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; margin-bottom: 16px; }
.checks span::before { content: "✓"; color: var(--ok); margin-right: 6px; font-weight: 700; }
.checks span.bad::before { content: "✕"; color: var(--danger); }
.perm-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.perm-list li { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); padding: 3px 8px; border-radius: 6px; }
.steps-help { font-size: 13px; color: var(--muted); }
.steps-help ol { padding-left: 18px; margin: 6px 0 0; }
.steps-help li { margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --sidebar-w: 280px; --name-col-w: 170px; --day-min-w: 110px; }
  .app-body { grid-template-columns: 1fr; }
  .app-body:not(.menu-collapsed) .sidebar { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 30; box-shadow: var(--shadow-2); }
  .menu-toggle { display: inline-flex; }
  .topbar .daterange { font-size: 14px; }
  .grid-2 { grid-template-columns: 1fr; }
  .heat-detail ul { grid-template-columns: 1fr; }
  .heat-layout { grid-template-columns: 1fr; height: auto; }
  .heat-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; max-height: 320px; }
  .heat-side-lists { flex: none; overflow: visible; }
  .heat-remove, .heat-optional, .heat-vip, .vac-remove { opacity: 1; }
  .card { padding: 22px; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Selection bar: floats at the top while people are selected */
.selbar { position: fixed; top: calc(var(--topbar-h) / 2); left: 50%; transform: translate(-50%, -50%); z-index: 45; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-2); animation: pop-centered .14s var(--ease); max-width: calc(100vw - 24px); }
.selbar .avatars { display: inline-flex; }
.selbar .avatars .avatar { width: 26px; height: 26px; margin-left: -8px; border: 2px solid var(--surface); }
.selbar .avatars .avatar:first-child { margin-left: 0; }
.selbar .count { font-size: 12px; color: var(--muted); white-space: nowrap; margin-right: 4px; }
/* "Show people": every calendar but the selected ones is blurred; the name column stays sharp */
.grid .cell.dim .strip, .grid .cell.dim .band, .grid .cell.dim .now { filter: blur(2.5px); opacity: .45; }
.grid .cell.dim { background: var(--surface-2); }
.btn.danger-text { color: var(--danger); }
.btn.danger-text:hover { background: var(--danger-soft); }
@media (prefers-reduced-motion: reduce) { .selbar { animation: none; } }

/* Profile menu: discreet version line under Sign out; opens the release notes */
.menu .version { display: block; width: 100%; padding: 2px 10px 4px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-family: var(--font-mono); text-align: right; cursor: default; }
.menu .version:hover { text-decoration: underline; color: var(--ink); }

/* Release notes */
.releases { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.release { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.release + .release { border-top-color: var(--line); border-radius: 0; }
.release h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 14px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.release .date { margin-left: auto; font-family: inherit; font-size: 12px; font-weight: 400; color: var(--muted); }
.release .now { font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.release ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 13px; line-height: 1.5; }
.release.current { background: var(--accent-soft); border-color: var(--accent); border-radius: var(--radius-sm); }
.release.current + .release { border-top-color: transparent; }

/* Organisations: the organisation under the e-mail in the profile menu, the trial note above it */
.menu .head .who .org { display: block; margin-top: 1px; font-size: 11px; color: var(--muted-2); letter-spacing: .01em; }
.menu .trial-note { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px 8px 8px 10px; border-radius: var(--radius-sm); background: var(--today-soft); color: var(--ink); font-size: 12px; font-weight: 500; }
.menu .trial-note > .icon, .menu .trial-note > svg { color: var(--today-line); flex: none; }
.menu .trial-note .btn.warm { background: var(--surface); border-color: var(--line); }
.menu .trial-note .btn.warm:hover { background: var(--surface-2); }
.menu .trial-note.expired { background: var(--danger-soft); }
.menu .trial-note.expired > .icon, .menu .trial-note.expired > svg { color: var(--danger); }

/* Status pills (Settings → Organisation / Organisations) */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.ok, .pill.st-active { background: var(--ok-soft); color: var(--ok); }
.pill.warn, .pill.st-pending { background: var(--today-soft); color: color-mix(in srgb, var(--today-line) 70%, var(--ink)); }
.pill.st-blocked { background: var(--danger-soft); color: var(--danger); }
.trial-warn { color: color-mix(in srgb, var(--today-line) 70%, var(--ink)); font-weight: 600; }
.secret-expired { color: var(--danger); font-weight: 600; }

/* Settings → Organisation */
.org-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 6px; font-size: 13px; }
.org-facts dt { color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 1px; }
.org-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.org-facts dd.mono { font-size: 12px; }
.org-panel .org-head { margin-top: 18px; }
.org-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-row .input { flex: 1; min-width: 180px; }
.org-row .input.mono { font-size: 12px; }
/* The new secret and its expiry date side by side, one Save under both (wraps on narrow screens) */
.org-secret-row { align-items: flex-end; margin-top: 18px; }
.org-secret-row .org-cell { display: flex; flex-direction: column; min-width: 0; }
.org-secret-row .org-cell.wide { flex: 1 1 180px; }
.org-secret-row .org-cell .field-label.org-head { margin-top: 0; }
.org-secret-row .org-cell .input { flex: none; min-width: 0; }
.org-secret-row .input.org-expiry { width: 10.5rem; }
.org-secret-row > .btn.sm { margin-bottom: 3px; }
.org-panel .modal-note { margin: 6px 0 0; }
.org-panel .chips { margin-top: 2px; }
.org-panel .chip { padding: 0 10px; font-family: var(--font-mono); font-size: 12px; }
.org-admins { margin-top: 4px; }
.org-users-filter { width: 100%; max-width: 320px; margin: 10px 0 6px; }
.org-users-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.org-user { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.org-user .who { flex: 1; min-width: 0; }
.org-user .who .line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.org-user .who strong { font-weight: 600; overflow-wrap: anywhere; }
.org-user .who .you { color: var(--muted); font-size: 12px; }
.org-user .who small { display: block; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.org-user .who small.seen { color: var(--muted-2); }
.pill.org-admin-badge { height: 18px; padding: 0 7px; font-size: 11px; background: var(--accent-soft); color: var(--accent); }
.pill.org-admin-badge::before { display: none; }
.org-users-none { margin: 8px 0 0; font-size: 13px; }

/* Settings → Organisations: one row of facts per organisation, its buttons on a row underneath */
.orgs-wrap { overflow-x: auto; margin: 0 -4px; }
table.orgs { width: 100%; border-collapse: collapse; font-size: 13px; }
table.orgs th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 10px 6px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.orgs td { padding: 8px 10px 2px 4px; vertical-align: top; }
table.orgs .num { text-align: right; }
table.orgs td small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
table.orgs td small.mono { font-size: 10.5px; color: var(--muted-2); }
table.orgs td.trial-warn small, table.orgs td.secret-expired small { color: inherit; font-weight: 500; }
table.orgs td.secret { white-space: nowrap; }
table.orgs td.who strong { font-weight: 600; }
table.orgs tr.org-acts td { padding: 6px 4px 10px; border-bottom: 1px solid var(--line); }
table.orgs tr.org-acts td > * + * { margin-left: 6px; }
table.orgs tr.own td.who strong::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.tip-wrap { display: inline-block; border-radius: var(--radius-sm); }
.tip-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The pointer never changes shape on hover: every control keeps the normal arrow (text fields keep the I-beam). */
button, a, label, select, summary, [role="button"], [role="tab"], [tabindex], .clickable { cursor: default; }