/* ============================================================
   Dayflame Design System — dark-mode-first, blue accents,
   rounded-square containers, filled icons, Inter type.
   ============================================================ */

:root {
  /* Backgrounds (neutral dark grey) */
  --bg: #0a0a0a;
  --bg-deep: #0a0a0a;
  --surface: #131313;
  --surface-2: #262626;
  --surface-3: #333333;
  --elevated: #1F1F1F;

  /* Borders */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --dash-border: #363637;

  /* Text */
  --text: #F4F4F5;
  --text-muted: #A1A1AA;
  --text-dim: #71717A;

  /* Accent (blue family) */
  --accent: #253BB3;
  --accent-strong: #1E3299;
  --accent-deep: #16266E;
  --accent-soft: rgba(37, 59, 179, 0.22);
  --accent-softer: rgba(37, 59, 179, 0.12);
  --accent-glow: rgba(37, 59, 179, 0.45);

  /* Feedback */
  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, 0.14);
  --success: #10B981;
  --warning: #F59E0B;
  --wc-accent: #7C3AED;

  /* Radius — rounded-square system */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 8px 24px rgba(37, 59, 179, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.22s;

  /* Layout */
  --sidebar-w: 280px;
  --sidebar-rail: 76px;
  --bottomnav-h: 64px;
  --header-h: 60px;
  --tap: 48px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  /* On-screen keyboard height, set by the Sheet via visualViewport (0 otherwise). */
  --kb: 0px;
  /* Floating pill/FAB clearance above the home indicator. Sits just above the
     safe-area inset; keep a small floor so it clears the home indicator. */
  --nav-clear: max(6px, calc(var(--safe-bottom) - 10px));

  color-scheme: dark;
}

* { box-sizing: border-box; }
/* The document/window is the single, native scroll container — no inner scroller.
   This avoids macOS Chrome's nested-scroller "scroll latching" stalls. */
/* The root canvas also paints outside the CSS viewport into iOS safe areas.
   Keep the aurora here so the home-indicator area cannot fall through to black.
   `fixed` + cover pins it to the viewport so desktop never shows a bare strip
   under the floating glass card (100vh/100% mismatches used to leave a line). */
html {
  scroll-behavior: auto;
  background-color: #06070d;
  background-image: url("bg3.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100%;
  min-height: 100dvh;
}
body {
  margin: 0; min-height: 100%;
  min-height: 100dvh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: transparent;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05", "ss01";
  overflow-anchor: none;
}
#root { min-height: 100vh; min-height: 100dvh; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--accent-glow); }

/* No focus outline anywhere (inputs still show a focus glow via their own styles). */
:focus, :focus-visible { outline: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.h-xl { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.h-lg { font-size: 22px; }
.h-md { font-size: 18px; }
.h-sm { font-size: 15px; font-weight: 650; }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.tiny { font-size: 12px; }
.small { font-size: 13px; }
.mono-num { font-variant-numeric: tabular-nums; }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand-mark {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: linear-gradient(150deg, #2F47C9, #16266E);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,0.25);
}
.brand-mark svg { width: 20px; height: 20px; color: #fff; }
.brand-logo { display: block; width: auto; height: 28px; }
.brand-logo-mobile { height: 30px; }

/* Dashboard team switcher (mobile: icon; desktop: photo + name + caret) */
.team-switcher { position: relative; flex-shrink: 0; }
.team-switcher-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  color: var(--text);
}
.team-switcher-btn.is-multi { cursor: pointer; }
.team-mark {
  background: linear-gradient(140deg, #2F47C9, #16266E) !important;
  color: #fff;
  display: grid;
  place-items: center;
}
.team-switcher-btn .avatar {
  width: 34px;
  height: 34px;
  font-size: 0;
  border-radius: var(--r-md);
}
.team-switcher-name,
.team-switcher-caret { display: none; }
.team-switcher-chevron {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid #181818;
  display: grid;
  place-items: center;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.team-switcher-btn.is-open .team-switcher-chevron {
  background: var(--accent);
  color: #fff;
  transform: rotate(180deg);
}
.team-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 28px));
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.team-switcher-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.team-switcher-option:hover,
.team-switcher-option.is-active {
  background: var(--accent-softer);
}
.team-switcher-option .avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.team-switcher-option svg:last-child {
  color: var(--accent);
  flex-shrink: 0;
}
@media (min-width: 901px) {
  .team-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 260px;
    height: 40px;
    padding: 0 10px 0 4px;
    border-radius: var(--r-md);
    color: var(--text);
  }
  .team-switcher-btn.is-multi:hover,
  .team-switcher-btn.is-open {
    background: var(--surface-2);
  }
  .team-switcher-btn .avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
  }
  .team-switcher-name {
    display: block;
    min-width: 0;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.01em;
  }
  .team-switcher-chevron { display: none; }
  .team-switcher-caret {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--dur) var(--ease-out);
  }
  .team-switcher-btn.is-open .team-switcher-caret {
    color: var(--text);
    transform: rotate(180deg);
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  transition: transform var(--dur) var(--ease), background var(--dur), box-shadow var(--dur), opacity var(--dur);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn svg,
.btn .icon-mask { width: 19px !important; height: 19px !important; }
.btn-primary {
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
  color: #fff; box-shadow: var(--shadow-accent);
}
.btn-primary:hover { box-shadow: 0 10px 28px rgba(37,59,179,0.55); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-soft { background: var(--accent-soft); color: var(--accent); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-remind-ok { background: rgba(16, 185, 129, 0.18); color: var(--success); }
.btn.is-confirm,
.btn.btn-primary.is-confirm,
.btn.btn-ghost.is-confirm {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
  box-shadow: none;
  opacity: 1 !important;
  pointer-events: none;
}
.btn.btn-primary.is-confirm:hover { box-shadow: none; }
.inline-confirm {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--success); font-weight: 600; font-size: 13.5px;
}
.btn-block { width: 100%; }
.btn-lg { min-height: 54px; font-size: 16px; border-radius: var(--r-lg); }
.btn-icon { min-height: 44px; width: 44px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); }
.btn-icon:hover { background: var(--surface-2); color: var(--text); }
.btn-icon svg,
.btn-icon .icon-mask { width: 22px !important; height: 22px !important; }
.btn-icon.icon-sm svg,
.btn-icon.icon-sm .icon-mask { width: 19.8px !important; height: 19.8px !important; }
.btn-sm { min-height: 38px; padding: 0 13px; font-size: 13.5px; border-radius: var(--r-sm); }

/* ---------- Cards / surfaces ---------- */
.card {
  background: var(--surface); border: 0;
  border-radius: var(--r-lg); padding: 18px;
}
.card-2 { background: var(--surface-2); }
.panel { background: var(--surface); border: 0; border-radius: var(--r-xl); }
/* Faded 1px stroke (opaque at top → transparent at bottom) for shared card surfaces. */
.dash-container,
.mgr-block,
.desk,
.mgr-zone,
.perm-card,
.list-row,
.choice-card,
.sheet,
.wc-swipe,
.cal-skyline-switch {
  position: relative;
  border: 0;
}
.dash-container::before,
.mgr-block::before,
.desk::before,
.mgr-zone::before,
.perm-card::before,
.list-row::before,
.choice-card::before,
.sheet::before,
.wc-swipe::before,
.cal-skyline-switch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, var(--dash-border), transparent);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.list-row.unread::before {
  background: linear-gradient(to bottom, rgba(37, 59, 179, 0.55), transparent);
}
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.input, .textarea, .select {
  width: 100%; min-height: var(--tap); padding: 0 14px;
  background: var(--bg-deep); border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md); color: var(--text); font-size: 15px;
  transition: border var(--dur), box-shadow var(--dur), background var(--dur);
  outline: none;
}
.textarea { padding: 12px 14px; min-height: 84px; resize: vertical; line-height: 1.5; }
.textarea.is-auto {
  min-height: 54px;
  resize: none;
  overflow: hidden;
  field-sizing: content;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--bg);
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
/* iOS/webkit date & time inputs carry an intrinsic min-width that overflows the sheet on mobile. */
.input[type="date"],
.input[type="time"],
.input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.input[type="date"]::-webkit-date-and-time-value,
.input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
.input[type="datetime-local"]::-webkit-datetime-edit,
.input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
.input[type="datetime-local"]::-webkit-datetime-edit-text,
.input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
.input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
  min-width: 0;
  padding: 0;
}
.otask-due-input-wrap {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 900px) {
  .input[type="datetime-local"] {
    font-size: 16px; /* avoid iOS focus-zoom; also fits value better in the sheet */
    padding-left: 12px;
    padding-right: 10px;
  }
}
.auth-card .input { border-color: transparent; }
.auth-card .input:focus { border-color: var(--accent); }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--text-dim); pointer-events: none; }
.input-icon .input { padding-left: 44px; }

/* ---------- Segmented control ---------- */
.segmented { display: inline-flex; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; gap: 2px; }
.segmented button {
  min-height: 38px; padding: 0 16px; border: 0; background: transparent; color: var(--text-muted);
  font-size: 14px; font-weight: 600; border-radius: var(--r-sm); transition: all var(--dur) var(--ease);
}
.segmented button.active { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.segmented.fill { display: flex; width: 100%; }
.segmented.fill button { flex: 1; }

/* ---------- Avatars ---------- */
.avatar {
  border-radius: var(--r-sm); display: grid; place-items: center;
  font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: -0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.avatar { overflow: hidden; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-edit { position: relative; border: 0; background: transparent; padding: 0; flex-shrink: 0; }
.avatar-edit-badge { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); border: 2px solid var(--surface); }
.avatar.sm { width: 32px; height: 32px; font-size: 13px; }
.avatar.md { width: 40px; height: 40px; font-size: 15px; border-radius: var(--r-md); }
.avatar.lg { width: 52px; height: 52px; font-size: 19px; border-radius: var(--r-md); }
.avatar.xl { width: 100px; height: 100px; font-size: 36px; border-radius: var(--r-lg); }
.avatar.profile {
  width: 69px; height: 69px; font-size: 25px; border-radius: var(--r-md);
}
.avatar-edit-badge.profile-badge {
  width: 28px; height: 28px; right: -4px; bottom: -4px;
}
.profile-name-input {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  min-height: 36px;
  padding: 2px 0 !important;
  border-radius: 0 !important;
}
.profile-name-input:focus {
  outline: none;
}

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 0;
  background: var(--surface-2); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.dot { width: 10px; height: 10px; border-radius: 4px; flex-shrink: 0; }
.badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
}
.badge.danger { background: var(--danger); }
.pill-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--r-xs); }
.pill-role.admin { background: var(--accent-soft); color: var(--accent); }
.pill-role.manager { background: rgba(245, 158, 11, 0.18); color: var(--warning); }
.pill-role.member { background: var(--surface-2); color: var(--text-muted); }
/* The Office: admin-editable manager/admin tag — blue filled, white text. */
.office-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--r-xs); background: var(--accent); color: #fff; white-space: nowrap; }

/* ============================================================
   App shell
   ============================================================ */
.app {
  min-height: 100vh;
  position: relative;
  background: transparent;
}

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
  width: var(--sidebar-rail);
  /* Glass fill lives on ::after so opacity can tween hard/noticeably. */
  background: transparent;
  border-right: 0; display: flex; flex-direction: column;
  padding: 18px 12px; gap: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
  /* Longer, softer spring so expand/collapse doesn’t snap. */
  --sidebar-dur: 0.52s;
  --sidebar-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-fade: 0.58s;
  --sidebar-fade-delay: 0.16s;
  transition:
    width var(--sidebar-dur) var(--sidebar-ease),
    padding var(--sidebar-dur) var(--sidebar-ease),
    box-shadow var(--sidebar-dur) var(--sidebar-ease);
  will-change: width;
}
/* Keep chrome above the glass fill / stroke layers. */
.sidebar > * {
  position: relative;
  z-index: 2;
}
/* Solid glass overlay — opacity 0→1 is much more readable than tweening rgba alpha. */
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(12, 12, 16, 0.62);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--sidebar-fade) var(--sidebar-ease);
}
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, var(--dash-border), transparent);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--sidebar-fade) var(--sidebar-ease);
}
.sidebar .brand {
  padding: 6px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-height: 56px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transition: padding var(--sidebar-dur) var(--sidebar-ease);
}
/* Layered marks: bolt centered, wordmark left — crossfade opacity only (no slide/scale). */
.sidebar .brand-logo,
.sidebar .brand-logo-collapsed {
  position: absolute;
  top: 50%;
  display: block;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.sidebar .brand-logo {
  left: 10px;
  height: 32px;
  max-width: calc(100% - 20px);
  opacity: 0;
  transform: translateY(-50%);
}
.sidebar .brand-logo-collapsed {
  left: 50%;
  height: 34px;
  max-width: 40px;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.sidebar.is-expanded .brand {
  justify-content: flex-start;
  padding: 6px 10px 18px;
}
.sidebar.is-expanded .brand-logo {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.14s ease;
}
.sidebar.is-expanded .brand-logo-collapsed {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.nav-item {
  display: flex; align-items: center; gap: 13px; min-height: var(--tap); padding: 0 14px;
  border-radius: var(--r-md); color: var(--text-muted); font-weight: 600; font-size: 15px;
  border: 0; background: transparent; width: 100%; text-align: left;
  position: relative;
  transform: scale(1);
  transform-origin: center left;
  transition:
    background var(--dur),
    color var(--dur),
    padding var(--sidebar-dur) var(--sidebar-ease),
    gap var(--sidebar-dur) var(--sidebar-ease),
    transform 0.28s var(--sidebar-ease),
    box-shadow 0.28s var(--sidebar-ease);
}
.nav-item svg,
.nav-item .icon-mask { width: 22px; height: 22px; flex-shrink: 0; }
.nav-item-tracking .icon-mask,
.nav-item-wildcards .icon-mask {
  width: calc(22px * 1.05 * 1.05) !important;
  height: calc(22px * 1.05 * 1.05) !important;
}
.nav-item .nav-label {
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  max-width: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.22s ease,
    max-width var(--sidebar-dur) var(--sidebar-ease),
    transform var(--sidebar-dur) var(--sidebar-ease);
}
.nav-item .badge {
  margin-left: auto;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.22s ease,
    transform var(--sidebar-dur) var(--sidebar-ease);
}
.nav-item .nav-kbd {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  padding-inline: 0;
  transform: translateX(4px);
  transition:
    opacity 0.22s ease,
    max-width var(--sidebar-dur) var(--sidebar-ease),
    transform var(--sidebar-dur) var(--sidebar-ease),
    padding var(--sidebar-dur) var(--sidebar-ease),
    color var(--dur),
    border-color var(--dur),
    background var(--dur);
}
.nav-item:hover .nav-kbd {
  color: var(--text-muted);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}
.nav-item:hover { background: rgba(10, 10, 10, 0.4); color: var(--text); }
.nav-item.active { background: linear-gradient(140deg, var(--accent), var(--accent-strong)); color: #fff; box-shadow: var(--shadow-sm); }
.nav-item.active:hover { background: linear-gradient(140deg, var(--accent), var(--accent-strong)); color: #fff; }
.sidebar.is-expanded .nav-item:hover {
  transform: scale(1.045);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar.is-expanded .nav-item:hover { transform: none; }
}
.sidebar-avatar {
  border: 0; background: transparent; padding: 0; cursor: pointer; flex-shrink: 0;
  border-radius: var(--r-sm); line-height: 0;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow var(--dur);
}
.sidebar-avatar:hover { box-shadow: 0 0 0 2px var(--border-strong); }
.sidebar-avatar.active { box-shadow: 0 0 0 2px var(--accent); }
.sidebar-user {
  background: transparent !important;
  border: 0;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition:
    padding var(--sidebar-dur) var(--sidebar-ease),
    gap var(--sidebar-dur) var(--sidebar-ease);
}
.sidebar-user:hover { background: transparent !important; }
.sidebar-user::before { display: none; }
.sidebar-user-meta {
  min-width: 0; opacity: 0; max-width: 0; overflow: hidden;
  transform: translateX(-8px);
  transition:
    opacity 0.22s ease,
    max-width var(--sidebar-dur) var(--sidebar-ease),
    transform var(--sidebar-dur) var(--sidebar-ease);
}
.sidebar-user .btn-icon {
  opacity: 0; width: 0; min-width: 0; padding: 0; overflow: hidden; pointer-events: none;
  transition:
    opacity 0.22s ease,
    width var(--sidebar-dur) var(--sidebar-ease),
    min-width var(--sidebar-dur) var(--sidebar-ease);
}
.sidebar .divider {
  opacity: 0.35;
  transition: margin var(--sidebar-dur) var(--sidebar-ease);
}

/* Compact rail: icon-centered rows */
.sidebar:not(.is-expanded) .nav-item {
  justify-content: center;
  padding: 0;
  gap: 0;
}
.sidebar:not(.is-expanded) .sidebar-user {
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  gap: 0;
  width: 100%;
}
.sidebar:not(.is-expanded) .sidebar-avatar {
  margin: 0 auto;
}
.sidebar:not(.is-expanded) .nav-item .badge {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  opacity: 1;
  transform: scale(0.9);
  min-width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
}
/* Kbd keeps min-width: 22px when collapsed, which left-aligns the + — force it away. */
.sidebar:not(.is-expanded) .nav-item .nav-kbd {
  min-width: 0;
  width: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.sidebar:not(.is-expanded) .nav-item-create {
  justify-content: center;
}

/* Expanded on hover (class toggled in JS so it can collapse on tab click) */
.sidebar.is-expanded {
  width: var(--sidebar-w);
  padding: 18px 14px;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.28);
}
.sidebar.is-expanded::after {
  opacity: 1;
}
.sidebar.is-expanded::before {
  opacity: 1;
  transition: opacity var(--sidebar-fade) var(--sidebar-ease) 0.1s;
}
.sidebar.is-expanded .nav-item .nav-label {
  opacity: 1;
  max-width: 180px;
  transform: translateX(0);
  /* Staggered top→bottom via --label-delay on each .nav-item */
  transition:
    opacity 0.34s ease var(--label-delay, 0.1s),
    max-width var(--sidebar-dur) var(--sidebar-ease),
    transform 0.34s ease var(--label-delay, 0.1s);
}
.sidebar.is-expanded .nav-item-create {
  justify-content: center;
  gap: 10px;
}
.sidebar.is-expanded .nav-item-create .nav-kbd {
  margin-left: 0;
}
.sidebar.is-expanded .nav-item .nav-kbd {
  opacity: 1;
  max-width: 40px;
  padding-inline: 6px;
  transform: translateX(0);
  transition:
    opacity 0.34s ease var(--label-delay, 0.1s),
    max-width var(--sidebar-dur) var(--sidebar-ease),
    transform 0.34s ease var(--label-delay, 0.1s),
    padding var(--sidebar-dur) var(--sidebar-ease),
    color var(--dur),
    border-color var(--dur),
    background var(--dur);
}
.sidebar.is-expanded .nav-item .badge {
  position: static;
  opacity: 1;
  transform: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  margin-left: auto;
  transition:
    opacity 0.34s ease var(--label-delay, 0.1s),
    transform 0.34s ease var(--label-delay, 0.1s);
}
.sidebar.is-expanded .sidebar-user-meta {
  opacity: 1;
  max-width: 160px;
  transform: translateX(0);
  transition:
    opacity 0.34s ease var(--label-delay, 0.5s),
    max-width var(--sidebar-dur) var(--sidebar-ease),
    transform 0.34s ease var(--label-delay, 0.5s);
}
.sidebar.is-expanded .sidebar-user .btn-icon {
  opacity: 1;
  width: 44px;
  min-width: 44px;
  pointer-events: auto;
  transition:
    opacity 0.34s ease var(--label-delay, 0.5s),
    width var(--sidebar-dur) var(--sidebar-ease),
    min-width var(--sidebar-dur) var(--sidebar-ease);
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar::before,
  .sidebar::after,
  .sidebar .brand-logo,
  .sidebar .brand-logo-collapsed,
  .nav-item,
  .nav-item .nav-label,
  .nav-item .badge,
  .sidebar-user,
  .sidebar-user-meta,
  .sidebar-user .btn-icon {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

.main { min-width: 0; margin-left: var(--sidebar-rail); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: var(--header-h); flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; border-bottom: 1px solid var(--border);
  /* Explicit background-color so iOS Safari tints the status bar from this bar. */
  background-color: #181818;
  background: #181818;
  position: sticky; top: 0; z-index: 30;
}
.content { flex: 1; }
/* Sticky header row for people/week timelines — pin sticks against the page
   scroller; horizontal offset is mirrored from .cal-body-scroll via transform. */
.cal-head-pin {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  overflow: visible;
  background: transparent;
  border-bottom: 0;
}
.cal-head-clip {
  /* Clip the transformed head row — do not scroll here. Dual native scrollers
     synced via scrollLeft kill mobile momentum. */
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.cal-head {
  display: flex;
  background: var(--bg);
  border-bottom: 0;
  position: relative;
  will-change: transform;
}
.cal-body-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Prefer free horizontal pan; vertical page scroll still works on .main. */
  touch-action: pan-x pan-y;
  /* Keep event stacking below the sticky member/profile header. */
  position: relative;
  z-index: 0;
}
.cal-colhead { flex-shrink: 0; padding: 9px 8px; display: flex; align-items: center; gap: 9px; border-left: 1px solid transparent; transition: box-shadow var(--dur), background var(--dur); }
.tz-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--text-muted);
}
.tz-chip > svg { flex-shrink: 0; opacity: 0.85; }
.tz-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tz-inline > svg { flex-shrink: 0; }
.cal-tz-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 0;
  padding-bottom: 10px;
}
.tz-chip-cal {
  max-width: min(100%, 280px);
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
}
.tz-chip-cal-name {
  max-width: 72px;
  font-weight: 700;
  color: var(--text);
}
.tz-select { display: flex; flex-direction: column; gap: 8px; }
.tz-select-search {
  position: relative;
  display: flex;
  align-items: center;
}
.tz-select-search > svg {
  position: absolute;
  left: 12px;
  color: var(--text-dim);
  pointer-events: none;
}
.tz-select-search .input {
  padding-left: 38px;
  min-height: 44px;
}
.tz-select-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-deep);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tz-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.tz-select-option:hover { background: var(--surface-2); }
.tz-select-option.is-active {
  background: var(--accent-softer);
  color: var(--text);
}
.tz-select-option svg:last-child { color: var(--accent); flex-shrink: 0; }

.profile-place-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  border: 1px solid var(--border);
}
.profile-place-current-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.profile-place-current-city {
  font-weight: 650;
  font-size: 15px;
  color: var(--text);
}
.col-drag { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 28px; margin-left: -2px; color: var(--text-dim); cursor: grab; border-radius: 6px; -webkit-tap-highlight-color: transparent; transition: color var(--dur), background var(--dur); }
.col-drag:hover { color: var(--text); background: var(--surface-2); }
.col-drag:active { cursor: grabbing; }
.cal-colhead.reorder-dragging { opacity: 0.95; background: var(--surface-2); border-radius: 12px; box-shadow: var(--shadow-lg); cursor: grabbing; }
.cal-colhead.reorder-target { box-shadow: inset 0 -3px 0 var(--accent); background: var(--accent-soft); border-radius: 8px; }
.content-pad { padding: 22px 38px; max-width: 1100px; margin: 0 auto; width: 100%; }
/* Full-bleed variant: no centering, so the left/right inset stays a flat 38px
   (matching the vertical gap between stacked containers) instead of growing
   into large gutters on wide screens. */
.content-pad.flush { max-width: none; }

/* ---------- Bottom nav (mobile) ---------- */
/* Floating "liquid glass" pill nav — a centered, translucent capsule lifted off
   the bottom edge. The outer strip is click-through; only the pill is interactive. */
.bottomnav {
  display: none; position: fixed; left: 0; right: 0; z-index: 40;
  /* Anchor to the shell bottom; pad by safe-area so the pill stays inside the
     phone frame above the home indicator (standalone PWAs). */
  bottom: 0;
  padding: 0 16px var(--nav-clear);
  justify-content: center;
  pointer-events: none;
}
.bottomnav-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 7px;
  height: 67px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(24, 24, 27, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  max-width: 100%;
}
.bottomnav-shell {
  position: relative;
  display: flex;
  max-width: 100%;
  pointer-events: auto;
  overflow: visible;
}
.bottomnav-shell > .bottomnav-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.bn-item {
  border: 0; background: transparent; color: rgba(255, 255, 255, 0.72);
  display: flex; align-items: center; justify-content: center;
  height: 53px; min-width: 53px; padding: 0 9px; border-radius: var(--r-pill);
  position: relative; -webkit-tap-highlight-color: transparent;
  transition: color var(--dur), background var(--dur);
}
.bn-item svg,
.bn-item .icon-mask { width: 34px; height: 34px; flex-shrink: 0; }
.bn-item-dashboard svg {
  width: calc(34px * 0.95 * 0.95);
  height: calc(34px * 0.95 * 0.95);
}
.bn-item-tracking .icon-mask,
.bn-item-wildcards .icon-mask {
  width: calc(34px * 1.15 * 0.9 * 0.96) !important;
  height: calc(34px * 1.15 * 0.9 * 0.96) !important;
}
.bn-item.active {
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bn-item .badge { position: absolute; top: 3px; right: 8px; left: auto; }

/* Expandable overflow slot — Docs / Wildcards + full tab sheet */
.bn-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(5, 9, 18, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
  opacity: 0;
  animation: overlayIn var(--dur) var(--ease) forwards;
}
.bn-overflow {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.bn-overflow-chevron {
  min-width: 36px;
  padding: 0 6px;
  color: rgba(255, 255, 255, 0.72);
}
.bn-overflow-chevron svg {
  width: 18px !important;
  height: 18px !important;
}
.bn-overflow-trigger svg {
  width: 28px;
  height: 28px;
}
.bottomnav.is-expanded {
  z-index: 50;
  align-items: flex-end;
  overflow: visible;
}
.bottomnav.is-expanded .bottomnav-inner {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  gap: 4px;
  border-radius: calc(var(--r-2xl) * 1.15);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 0.5px rgba(147, 164, 255, 0.16);
  /* Resting open styles — required so swapping enter→exit animations does not
     flash through a hidden pre-animation state and kill the reverse close. */
  opacity: 1;
  transform: translateY(0) scale(1);
}
.bottomnav.is-expanded:not(.is-closing) .bottomnav-inner {
  animation: bnSheetIn 0.28s var(--ease-out) both;
}
/* Exit: items fade (staggered top→bottom) while the container simultaneously
   shrinks to the collapsed pill height (67px). Both share --bn-close-dur so
   the last item and the height settle together, then JS unmounts. */
.bottomnav.is-expanded.is-closing {
  --bn-close-dur: 0.369s;
  --bn-item-stagger: 46ms;
  /* Soft ease-out: even motion with a gentle settle (less front-loaded snap). */
  --bn-close-ease: cubic-bezier(0.33, 0.0, 0.2, 1);
  /* Last item (i = n-1) finishes at the same moment as the height collapse. */
  --bn-item-dur: calc(var(--bn-close-dur) - (var(--bn-n, 6) - 1) * var(--bn-item-stagger));
}
.bottomnav.is-expanded.is-closing .bn-sheet-item {
  /* `both` keeps each item at opacity 1 during its delay so they don't snap to
     the old opacity:0 pre-enter base style before their turn to leave. */
  opacity: 1;
  transform: translateY(0);
  animation: bnItemOut var(--bn-item-dur) var(--bn-close-ease) both !important;
  animation-delay: calc(var(--bn-i, 0) * var(--bn-item-stagger)) !important;
}
.bottomnav.is-expanded.is-closing .bottomnav-inner {
  /* Height collapses from the measured open size (--bn-from-h) to the pill.
     Stay opaque — the morph into the collapsed bar is the exit, not a fade. */
  animation: bnSheetCollapse var(--bn-close-dur) var(--bn-close-ease) both !important;
  overflow: hidden;
  pointer-events: none;
  box-sizing: border-box;
}
/* Mid-close: collapsed icons swap in while the height animation keeps running.
   Switch back to the horizontal pill layout so icons don't stack in a column. */
.bottomnav.is-expanded.is-closing.is-pill-icons .bottomnav-inner {
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.bottomnav.is-expanded.is-closing .bn-backdrop {
  opacity: 1;
  animation: overlayOut var(--bn-close-dur) var(--bn-close-ease) both !important;
}
.bottomnav.is-expanded.is-closing .bn-glow {
  animation: bnGlowFadeOut var(--bn-close-dur) var(--bn-close-ease) both !important;
}
.bottomnav.is-expanded.is-closing .bn-stars {
  /* Pin to the open footprint so stars fade in place instead of crawling down
     as the shell height collapses with the pill. */
  top: auto;
  bottom: -64px;
  height: calc(var(--bn-from-h, 320px) + 116px);
  animation: bnGlowFadeOut var(--bn-close-dur) var(--bn-close-ease) both !important;
}
.bottomnav.is-expanded.is-closing .bn-star {
  /* Freeze twinkle so only the container opacity fade is visible. */
  animation: none !important;
}
.bottomnav.is-expanded.is-closing .bn-stars .planet-shooter {
  animation: none !important;
}
@keyframes bnGlowFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* Animated organic blue glow — sibling layer behind the nav container */
.bn-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(34px);
  will-change: transform, border-radius, opacity, filter;
}
.bn-glow-a {
  /* Bias downward so the glow sits under / below the menu */
  top: 18%;
  right: -32%;
  bottom: -52%;
  left: -32%;
  border-radius: 58% 42% 52% 48% / 48% 54% 46% 52%;
  background:
    radial-gradient(ellipse 78% 70% at 30% 55%, rgba(37, 59, 179, 0.9), transparent 68%),
    radial-gradient(ellipse 62% 74% at 78% 70%, rgba(59, 91, 220, 0.62), transparent 70%),
    radial-gradient(ellipse 55% 52% at 50% 95%, rgba(30, 50, 153, 0.7), transparent 66%);
  opacity: 1;
  animation: bnOrganicGlowA 5.5s ease-in-out infinite;
}
.bn-glow-b {
  top: 28%;
  right: -40%;
  bottom: -62%;
  left: -20%;
  border-radius: 44% 56% 48% 52% / 56% 44% 58% 42%;
  background:
    radial-gradient(ellipse 65% 60% at 70% 48%, rgba(93, 120, 240, 0.55), transparent 70%),
    radial-gradient(ellipse 75% 68% at 24% 85%, rgba(37, 59, 179, 0.72), transparent 68%);
  opacity: 0.95;
  animation: bnOrganicGlowB 7s ease-in-out infinite;
}
/* Soft white shimmer layered over the blue glow */
.bn-glow-white {
  top: 20%;
  right: -28%;
  bottom: -54%;
  left: -28%;
  z-index: 0;
  border-radius: 50% 50% 48% 52% / 52% 48% 55% 45%;
  background:
    radial-gradient(ellipse 48% 40% at 36% 56%, rgba(255, 255, 255, 0.55), transparent 68%),
    radial-gradient(ellipse 38% 34% at 70% 70%, rgba(255, 255, 255, 0.38), transparent 70%),
    radial-gradient(ellipse 32% 28% at 52% 90%, rgba(255, 255, 255, 0.3), transparent 66%);
  opacity: 0.9;
  mix-blend-mode: soft-light;
  filter: blur(22px);
  animation: bnWhiteGlow 5.5s ease-in-out infinite;
}
/* Dark blue accent for more color variety in the backglow */
.bn-glow-deep {
  top: 30%;
  right: -36%;
  bottom: -58%;
  left: -18%;
  z-index: 0;
  border-radius: 48% 52% 44% 56% / 58% 42% 55% 45%;
  background:
    radial-gradient(ellipse 70% 62% at 72% 78%, rgba(14, 22, 72, 0.95), transparent 68%),
    radial-gradient(ellipse 55% 50% at 28% 88%, rgba(22, 38, 110, 0.75), transparent 70%),
    radial-gradient(ellipse 40% 36% at 50% 95%, rgba(10, 16, 56, 0.85), transparent 65%);
  opacity: 0.9;
  filter: blur(36px);
  animation: bnDeepGlow 8s ease-in-out infinite;
}
/* Twinkling stars + skyline shooting stars — around the glass pill, above the glow */
.bn-stars {
  position: absolute;
  z-index: 1;
  /* Frame the expanded menu so stars sit around its edges */
  top: -52px;
  right: -58px;
  bottom: -64px;
  left: -58px;
  pointer-events: none;
  overflow: visible;
}
.bn-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s) * 1.2px);
  height: calc(var(--s) * 1.2px);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 2.5px 0.75px rgba(255, 255, 255, 0.95),
    0 0 6px 1.5px rgba(180, 200, 255, 0.65),
    0 0 10px 2px rgba(37, 59, 179, 0.35);
  opacity: 0.36;
  animation: bnStarBlink 2.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.bn-stars .planet-shooter {
  width: 96px;
  z-index: 1;
  /* Shorter travel so streaks stay near the nav frame */
  animation-name: bnNavShoot;
}
@keyframes bnStarBlink {
  0%, 100% { opacity: 0.2; transform: scale(0.75); }
  40% { opacity: 0.8; transform: scale(1.35); }
  70% { opacity: 0.4; transform: scale(1); }
}
@keyframes bnNavShoot {
  0% {
    opacity: 0;
    transform: rotate(var(--shoot-angle, -35deg)) translate3d(0, 0, 0) scaleX(0.35);
  }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(var(--shoot-angle, -35deg)) translate3d(160px, 0, 0) scaleX(1);
  }
}
@keyframes bnSheetIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bnSheetOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.96); }
}
/* Collapse the expanded sheet to the collapsed pill height. --bn-from-h is the
   measured open height set inline when closing starts. */
@keyframes bnSheetCollapse {
  from {
    height: var(--bn-from-h);
    border-radius: calc(var(--r-2xl) * 1.15);
    padding: 10px;
  }
  to {
    height: 67px;
    border-radius: var(--r-pill);
    padding: 0 12px;
  }
}
@keyframes bnOrganicGlowA {
  0% {
    border-radius: 58% 42% 52% 48% / 48% 54% 46% 52%;
    transform: translate3d(-4%, 6%, 0) scale(0.92) rotate(-8deg);
    opacity: 0.7;
    filter: blur(28px);
  }
  25% {
    border-radius: 42% 58% 40% 60% / 60% 40% 62% 38%;
    transform: translate3d(10%, 14%, 0) scale(1.18) rotate(10deg);
    opacity: 1;
    filter: blur(40px);
  }
  50% {
    border-radius: 55% 45% 58% 42% / 38% 62% 40% 60%;
    transform: translate3d(2%, 22%, 0) scale(1.08) rotate(2deg);
    opacity: 0.85;
    filter: blur(32px);
  }
  75% {
    border-radius: 48% 52% 44% 56% / 55% 45% 58% 42%;
    transform: translate3d(-12%, 10%, 0) scale(1.22) rotate(-12deg);
    opacity: 1;
    filter: blur(42px);
  }
  100% {
    border-radius: 58% 42% 52% 48% / 48% 54% 46% 52%;
    transform: translate3d(-4%, 6%, 0) scale(0.92) rotate(-8deg);
    opacity: 0.7;
    filter: blur(28px);
  }
}
@keyframes bnOrganicGlowB {
  0% {
    border-radius: 44% 56% 48% 52% / 56% 44% 58% 42%;
    transform: translate3d(6%, 10%, 0) scale(1) rotate(6deg);
    opacity: 0.55;
    filter: blur(30px);
  }
  50% {
    border-radius: 60% 40% 55% 45% / 40% 60% 42% 58%;
    transform: translate3d(-14%, 24%, 0) scale(1.28) rotate(-14deg);
    opacity: 1;
    filter: blur(44px);
  }
  100% {
    border-radius: 44% 56% 48% 52% / 56% 44% 58% 42%;
    transform: translate3d(6%, 10%, 0) scale(1) rotate(6deg);
    opacity: 0.55;
    filter: blur(30px);
  }
}
@keyframes bnWhiteGlow {
  0% {
    border-radius: 50% 50% 48% 52% / 52% 48% 55% 45%;
    transform: translate3d(-4%, 10%, 0) scale(0.92) rotate(-4deg);
    opacity: 0.55;
    filter: blur(18px);
  }
  35% {
    border-radius: 44% 56% 52% 48% / 48% 56% 44% 52%;
    transform: translate3d(10%, 18%, 0) scale(1.2) rotate(10deg);
    opacity: 1;
    filter: blur(26px);
  }
  65% {
    border-radius: 56% 44% 48% 52% / 55% 45% 52% 48%;
    transform: translate3d(-8%, 24%, 0) scale(1.1) rotate(-8deg);
    opacity: 0.8;
    filter: blur(22px);
  }
  100% {
    border-radius: 50% 50% 48% 52% / 52% 48% 55% 45%;
    transform: translate3d(-4%, 10%, 0) scale(0.92) rotate(-4deg);
    opacity: 0.55;
    filter: blur(18px);
  }
}
@keyframes bnDeepGlow {
  0% {
    border-radius: 48% 52% 44% 56% / 58% 42% 55% 45%;
    transform: translate3d(8%, 12%, 0) scale(1) rotate(4deg);
    opacity: 0.55;
    filter: blur(30px);
  }
  40% {
    border-radius: 56% 44% 52% 48% / 42% 58% 45% 55%;
    transform: translate3d(-12%, 26%, 0) scale(1.24) rotate(-10deg);
    opacity: 1;
    filter: blur(42px);
  }
  70% {
    border-radius: 42% 58% 48% 52% / 55% 45% 58% 42%;
    transform: translate3d(6%, 18%, 0) scale(1.1) rotate(8deg);
    opacity: 0.75;
    filter: blur(36px);
  }
  100% {
    border-radius: 48% 52% 44% 56% / 58% 42% 55% 45%;
    transform: translate3d(8%, 12%, 0) scale(1) rotate(4deg);
    opacity: 0.55;
    filter: blur(30px);
  }
}
.bn-sheet {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.bn-sheet-item {
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur), color var(--dur);
  /* Resting = visible. Enter uses fill-mode `both` so the from-keyframe hides
     items during their stagger delay; do NOT leave opacity:0 here — that made
     the reverse-close snap invisible the instant the enter animation was swapped. */
  opacity: 1;
  transform: translateY(0);
  animation: bnItemIn 0.85s var(--ease-out) both;
  animation-delay: calc(var(--bn-i, 0) * 110ms + 80ms);
}
@keyframes bnItemIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bnItemOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(4px);
  }
}
.bottomnav.is-closing {
  pointer-events: none;
}
.bn-sheet-item svg,
.bn-sheet-item .icon-mask {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.bn-sheet-item-tracking .icon-mask,
.bn-sheet-item-wildcards .icon-mask {
  width: calc(22px * 1.1) !important;
  height: calc(22px * 1.1) !important;
}
.bn-sheet-label {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
/* Touch: opening the sheet puts the last row under the finger and sticky
   :hover would make Wildcards look preselected — only hover on fine pointers. */
@media (hover: hover) and (pointer: fine) {
  .bn-sheet-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
  }
}
.bn-sheet-item.active {
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bn-sheet-item.active svg,
.bn-sheet-item.active .icon-mask {
  color: #fff;
}
.bn-sheet-item .badge {
  position: static;
  margin-left: auto;
}
@media (prefers-reduced-motion: reduce) {
  .bottomnav.is-expanded .bottomnav-inner,
  .bottomnav.is-expanded:not(.is-closing) .bottomnav-inner {
    animation: none !important;
    transition: none !important;
  }
  .bottomnav.is-expanded.is-closing .bottomnav-inner,
  .bottomnav.is-expanded.is-closing .bn-sheet-item,
  .bottomnav.is-expanded.is-closing .bn-backdrop,
  .bottomnav.is-expanded.is-closing .bn-glow,
  .bottomnav.is-expanded.is-closing .bn-stars {
    animation: none !important;
    transition: none !important;
  }
  .bn-glow {
    animation: none !important;
    transform: none !important;
    opacity: 0.85;
  }
  .bn-glow-white { opacity: 0.65; }
  .bn-glow-deep { opacity: 0.7; }
  .bn-star {
    animation: none !important;
    opacity: 0.56;
    transform: none;
  }
  .bn-sheet-item {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .bn-backdrop { animation: none; opacity: 1; }
}

/* ---------- FAB ---------- */
.fab {
  position: fixed; z-index: 45; right: 18px; bottom: calc(var(--nav-clear) + 72px);
  width: 58px; height: 58px; border-radius: var(--r-xl); border: 0;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep)); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-accent);
  transition: transform var(--dur) var(--ease);
}
.fab:active { transform: scale(0.92); }
.fab svg,
.fab .icon-mask { width: 28px; height: 28px; }
.fab.desktop { display: none; }
/* Skyline toggle — sits just left of the calendar + FAB on mobile.
   Stays position:fixed (even on mobile where .fab goes absolute) because it
   renders inside .main, not as a direct .app child like the + FAB. */
.fab.fab-skyline {
  position: fixed;
  right: calc(18px + 58px + 12px);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-md);
}
.fab.fab-skyline.on {
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: var(--shadow-accent);
}

/* Mobile action pill — liquid glass capsule matching .bottomnav-inner.
   The + control is always the rightmost (or only) child so it shares one
   screen position across Calendar, Tracking, Office, and Wildcards. */
.fab-dock {
  display: none;
}
.fab-dock-btn {
  border: 0;
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur), box-shadow var(--dur);
}
.fab-dock-btn:active { transform: scale(0.92); }
.fab-dock-btn svg,
.fab-dock-btn .icon-mask {
  width: 28px;
  height: 28px;
}
.fab-dock-notify {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
}
.fab-dock-skyline {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
}
.fab-dock-skyline.is-on {
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fab-dock-add {
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.fab-dock-save {
  width: auto;
  min-width: 118px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.fab-dock-save svg,
.fab-dock-save .icon-mask {
  width: 20px;
  height: 20px;
}

/* ============================================================
   Bottom sheet / modal
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(5, 9, 18, 0.6);
  backdrop-filter: blur(3px); opacity: 0; animation: overlayIn var(--dur) var(--ease) forwards;
  display: flex; align-items: flex-end; justify-content: center;
  /* Reserve space for the on-screen keyboard so the sheet lifts above it. */
  padding-bottom: var(--kb);
}
.overlay.closing { animation: overlayOut 0.2s var(--ease) forwards; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }

.sheet {
  width: 100%; max-width: 560px; background: var(--surface); color: var(--text);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0; border: 0;
  max-height: calc(92vh - var(--kb)); display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(100%); animation: sheetUp var(--dur) var(--ease-out) forwards;
  box-shadow: var(--shadow-lg); padding-bottom: var(--safe-bottom);
}
.overlay.closing .sheet { animation: sheetDown 0.2s var(--ease) forwards; }
@keyframes sheetUp { to { transform: translateY(0); } }
@keyframes sheetDown { to { transform: translateY(100%); } }
/* Clear composited transform after open — required for iOS <video> playback. */
.sheet.is-settled {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.sheet-grip { width: 40px; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); margin: 10px auto 4px; flex-shrink: 0; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sheet-head h3 { font-size: 17px; }
.sheet-save-btn {
  margin-left: auto;
  flex-shrink: 0;
}
.sheet-body {
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0; /* allow flex child to shrink so overflow scrolls */
}
.sheet-foot { padding: 14px 18px calc(14px + var(--safe-bottom)); border-top: 1px solid var(--border); display: flex; gap: 10px; flex-shrink: 0; }
.sheet.event-editor-sheet .sheet-foot {
  padding-bottom: calc(40px + var(--safe-bottom));
}
@media (max-width: 900px) {
  /* Foot owns the bottom inset so actions sit 40px from the screen edge. */
  .sheet.task-detail-sheet,
  .sheet.streak-editor-sheet,
  .sheet.confirm-sheet {
    padding-bottom: 0;
  }
  .sheet.task-detail-sheet .sheet-foot,
  .sheet.streak-editor-sheet .sheet-foot,
  .sheet.confirm-sheet .sheet-foot {
    padding-bottom: 40px;
  }
}
.sheet.fullscreen { max-height: 100vh; height: 100%; border-radius: 0; }

/* Centered modal variant — opens in the middle of the screen (fade + scale)
   instead of sliding up from the bottom. Used for small dialogs on mobile. */
.overlay.centered { align-items: center; padding-left: 18px; padding-right: 18px; }
.sheet.centered {
  max-width: 440px; border-radius: var(--r-2xl); border: 0;
  max-height: calc(88vh - var(--kb)); padding-bottom: 0;
  transform: translateY(0) scale(0.96); opacity: 0;
  animation: modalIn var(--dur) var(--ease-out) forwards;
}
.overlay.centered.closing .sheet { animation: modalOut 0.18s var(--ease) forwards; }
.sheet.centered .sheet-grip { display: none; }

/* ============================================================
   Calendar — day timeline
   ============================================================ */
.cal-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.content-pad.cal-toolbar { background: #0A0A0A; padding-bottom: 8px; }
.content-pad.cal-flush { padding-top: 6px; }

/* Soft blur + fade at scroll edges so content dissolves gently */
.scroll-fade {
  pointer-events: none;
  z-index: 8;
  height: 72px;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.scroll-fade-top {
  position: sticky;
  top: 0;
  margin-bottom: -72px;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.92) 0%,
    rgba(10, 10, 10, 0.55) 40%,
    rgba(10, 10, 10, 0.18) 72%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 100%);
}
.scroll-fade-bottom {
  position: sticky;
  bottom: 0;
  height: 128px;
  margin-top: -128px;
  /* Gentler blur + long mask so the dissolve has no hard edge */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(
    to top,
    rgba(4, 8, 24, 0.97) 0%,
    rgba(6, 10, 28, 0.82) 18%,
    rgba(8, 14, 34, 0.55) 40%,
    rgba(10, 16, 40, 0.28) 62%,
    rgba(12, 18, 44, 0.1) 82%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0, 0, 0, 0.85) 18%,
    rgba(0, 0, 0, 0.5) 42%,
    rgba(0, 0, 0, 0.22) 68%,
    rgba(0, 0, 0, 0.06) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0, 0, 0, 0.85) 18%,
    rgba(0, 0, 0, 0.5) 42%,
    rgba(0, 0, 0, 0.22) 68%,
    rgba(0, 0, 0, 0.06) 88%,
    transparent 100%
  );
}
@media (min-width: 901px) {
  .scroll-fade {
    height: 88px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .scroll-fade-top {
    margin-bottom: -88px;
    background: linear-gradient(
      to bottom,
      rgba(17, 17, 20, 0.94) 0%,
      rgba(17, 17, 20, 0.58) 40%,
      rgba(17, 17, 20, 0.2) 72%,
      transparent 100%
    );
  }
  .scroll-fade-bottom {
    height: 148px;
    /* Pin to the glass card's bottom edge (not in-flow sticky, which can leave a gap). */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    z-index: 8;
    border-radius: 0 0 var(--r-2xl) var(--r-2xl);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: linear-gradient(
      to top,
      rgba(5, 9, 26, 0.97) 0%,
      rgba(8, 12, 32, 0.84) 18%,
      rgba(10, 16, 40, 0.56) 40%,
      rgba(12, 20, 46, 0.28) 62%,
      rgba(14, 22, 50, 0.1) 82%,
      transparent 100%
    );
  }
}
.cal-toolbar-stack {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.cal-toolbar-views {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.cal-view-segmented {
  min-width: 0;
  transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.cal-view-segmented.is-blocked {
  opacity: 0.38;
  filter: grayscale(0.55);
  pointer-events: none;
  user-select: none;
}
.cal-skyline-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin: 0 0 0 12px;
  background: var(--bg-deep);
  border-radius: var(--r-md);
  padding: 4px 12px;
  height: 48px;
  box-sizing: border-box;
}
.cal-skyline-switch > * {
  position: relative;
  z-index: 2;
}
.cal-skyline-switch .switch { margin-left: 2px; }
.cal-skyline-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}
.cal-skyline-icon {
  color: #fff;
}
.cal-skyline-switch:has(.switch.on) .cal-skyline-label {
  color: var(--text);
}

/* ---------- Skyline enter: simple opacity crossfade ---------- */
.cal-content.is-sky-entering {
  overflow: hidden;
  pointer-events: none;
}
.cal-stage {
  position: relative;
  isolation: isolate;
  min-height: 40vh;
}
.cal-stage-skyline.is-emerging {
  animation: skylineFadeIn 0.65s ease-in-out both;
}
.cal-stage-skyline.is-awaiting-stagger .planet-colhead,
.cal-stage-skyline.is-awaiting-stagger .planet-col {
  opacity: 0;
}
@keyframes skylineFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cal-stage-depart {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.cal-stage-depart.is-pulling {
  animation: calFadeOut 0.65s ease-in-out forwards;
}
@keyframes calFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-stage-skyline.is-emerging,
  .cal-stage-depart.is-pulling {
    animation: none !important;
  }
  .cal-stage-depart { display: none; }
}

.cal-toolbar-filters {
  margin-left: auto;
}
.cal-toolbar-filters:empty { display: none; }
.cal-today-btn {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 0;
}
.cal-today-btn:hover { background: var(--surface-3); color: var(--text); }
.date-nav { display: flex; align-items: center; gap: 4px; }
.date-title { display: flex; flex-direction: column; }
.date-title .d-day { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.date-title .d-sub { font-size: 12.5px; color: var(--text-muted); }
.date-title .d-tz { font-size: 11.5px; color: var(--text-dim); font-weight: 600; letter-spacing: -0.01em; }

.timeline {
  position: relative; padding: 8px 0 40px;
}
.tl-row { display: grid; grid-template-columns: 58px 1fr; min-height: 56px; }
.tl-time {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;
  font-size: 11.5px; color: var(--text-dim); text-align: right; padding-right: 12px;
  transform: translateY(-7px); font-variant-numeric: tabular-nums; line-height: 1.05; gap: 0;
}
.tl-hour-num { font-weight: 600; }
.tl-hour-ap { font-size: 9px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.85; }
.tl-line { border-top: 1px solid var(--border); position: relative; }
.tl-track { position: relative; }

.tl-now { position: absolute; left: 58px; right: 0; z-index: 6; pointer-events: none; display: flex; align-items: center; }
.tl-now .now-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; margin-left: -5px; box-shadow: 0 0 0 4px var(--accent-glow); }
.tl-now .now-line { flex: 1; height: 2.3px; background: #fff; }
.tl-now .now-label { position: absolute; left: -52px; font-size: 10.5px; font-weight: 700; color: #fff; background: transparent; padding: 1px 0; }

/* ---------- Planet View (team eagle-eye) ---------- */
.planet-board {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transform-origin: center top;
  position: relative;
  isolation: isolate;
}
.planet-board.planet-zoom {
  animation: planetZoomOut 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes planetZoomOut {
  from {
    transform: scale(1.08);
    opacity: 0.7;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.planet-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.planet-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 3px rgba(255, 255, 255, 0.95),
    0 0 8px rgba(180, 200, 255, 0.55),
    0 0 14px rgba(37, 59, 179, 0.35);
  opacity: 0;
  animation-name: planetTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Soft plus / cross — thin arms via box-shadow. */
.planet-star-plus {
  border-radius: 1px;
  background: #fff;
  box-shadow:
    0 0 0 0 transparent,
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 10px rgba(180, 200, 255, 0.45);
  clip-path: polygon(
    35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%,
    65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%
  );
}
/* Soft diamond / rhombus. */
.planet-star-diamond {
  border-radius: 1px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 10px rgba(180, 200, 255, 0.5),
    0 0 16px rgba(37, 59, 179, 0.3);
}
/* 4-point sparkle — classic star silhouette. */
.planet-star-spark {
  border-radius: 0;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
  box-shadow:
    0 0 5px rgba(255, 255, 255, 1),
    0 0 12px rgba(197, 212, 255, 0.65),
    0 0 18px rgba(37, 59, 179, 0.4);
}
@keyframes planetTwinkle {
  0%, 100% { opacity: 0.08; transform: scale(0.55); }
  35% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
  65% { opacity: 0.55; transform: scale(0.95); }
}
.planet-shooter {
  position: absolute;
  width: 110px;
  height: 2.5px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 15%,
    rgba(255, 255, 255, 1) 52%,
    #c5d4ff 72%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(197, 212, 255, 0.7),
    0 0 18px rgba(37, 59, 179, 0.35);
  transform: rotate(var(--shoot-angle, -35deg));
  transform-origin: left center;
  opacity: 0;
  animation-name: planetShoot;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  pointer-events: none;
}
@keyframes planetShoot {
  0% {
    opacity: 0;
    transform: rotate(var(--shoot-angle, -35deg)) translate3d(0, 0, 0) scaleX(0.35);
  }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(var(--shoot-angle, -35deg)) translate3d(42vw, 0, 0) scaleX(1);
  }
}
.planet-board > :not(.planet-stars):not(.planet-head) {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .planet-board.planet-zoom { animation: none; }
  .planet-star { animation: none; opacity: 0.4; }
  .planet-shooter { display: none; }
}
.planet-head {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.planet-gutter {
  width: 34px;
  flex: 0 0 34px;
}
.planet-colhead {
  flex: 1 1 0;
  min-width: 52px;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 10px;
  border-left: 1px solid var(--border);
}
.planet-colhead .avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
  border-radius: var(--r-sm);
}
.planet-colhead.is-stagger-in,
.planet-col.is-stagger-in {
  opacity: 0;
  /* Delay via --stagger-i so it can't be wiped by the animation shorthand */
  animation: planetColFadeIn 0.85s ease-out calc(var(--stagger-i, 0) * 0.32s) both;
}
@keyframes planetColFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .planet-colhead.is-stagger-in,
  .planet-col.is-stagger-in {
    animation: none;
    opacity: 1;
  }
}
.planet-name {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-muted);
  max-width: 100%;
  text-align: center;
  line-height: 1.15;
}
.planet-body {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.planet-track {
  position: relative;
  display: flex;
  min-width: 100%;
}
.planet-hours {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
}
.planet-hour {
  position: absolute;
  left: 0;
  right: 2px;
  transform: translateY(-50%);
  text-align: right;
}
.planet-hour-label {
  font-size: 9px;
  font-weight: 650;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.planet-cols {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
  min-height: 100%;
}
.planet-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid color-mix(in srgb, var(--border-strong) 25%, transparent);
  pointer-events: none;
  z-index: 0;
}
.planet-col {
  position: relative;
  flex: 1 1 0;
  min-width: 52px;
  max-width: 120px;
  border-left: 1px solid color-mix(in srgb, var(--border-strong) 25%, transparent);
  z-index: 1;
}
.planet-block {
  position: absolute;
  left: 2px;
  right: 2px;
  margin: 0;
  padding: 0 3px;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  z-index: 2;
  opacity: 0.95;
  transition: opacity 0.12s var(--ease-out), filter 0.12s var(--ease-out);
}
.planet-block:hover { opacity: 1; filter: brightness(1.08); }
.planet-block-title {
  display: block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planet-now {
  position: absolute;
  left: 34px;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  pointer-events: none;
  transform: translateY(-50%);
}
.planet-now-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin-left: -3px;
  box-shadow: 0 0 0 3px var(--accent-glow);
  flex-shrink: 0;
}
.planet-now-line {
  flex: 1;
  height: 1.5px;
  background: #fff;
}

/* Frosted event fills — hue comes from --event-color set inline per event. */
.event,
.week-ev,
.allday-chip,
.month-ev,
.planet-block {
  --event-color: #253BB3;
  background: color-mix(in srgb, var(--event-color) 46%, rgba(18, 18, 22, 0.42));
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 0.5px solid color-mix(in srgb, var(--event-color) 62%, rgba(255, 255, 255, 0.32));
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--event-color) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.event {
  position: absolute; left: 4px; right: 8px; border-radius: var(--r-md);
  padding: 7px 11px; overflow: hidden; color: #fff; cursor: pointer;
  transition: transform 0.1s var(--ease);
  min-height: 0;
}
.event:active { transform: scale(0.985); }
/* Hover dim handled by a cheap inset overlay (no filter repaint) so scrolling
   under the cursor on desktop stays smooth. */
.event::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 0.1s; pointer-events: none; border-radius: inherit; }
@media (hover: hover) { .event:hover::after { opacity: 0.08; } }
.event .ev-title { font-size: 13.5px; font-weight: 650; line-height: 1.25; }
.event .ev-meta { font-size: 11.5px; opacity: 0.85; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.event.compact { padding: 4px 10px; }
.event.compact .ev-title { font-size: 12.5px; }

.allday-row { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 0 6px 58px; }
.allday-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-sm); color: #fff; font-size: 12.5px; font-weight: 600; }

/* Week view */
.week-grid { display: grid; grid-template-columns: 48px repeat(7, 1fr); min-width: 680px; }
.week-head { position: sticky; top: 0; background: var(--bg); z-index: 5; display: grid; grid-template-columns: 48px repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.week-daycol { text-align: center; padding: 8px 2px; }
.week-daycol .wd-name { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.week-daycol .wd-num { font-size: 17px; font-weight: 700; margin-top: 2px; width: 32px; height: 32px; line-height: 32px; border-radius: var(--r-sm); margin-inline: auto; }
.week-daycol.today .wd-num { background: var(--accent); color: #fff; }
.week-col { border-left: 1px solid var(--border); position: relative; }
.week-ev { position: absolute; left: 2px; right: 2px; border-radius: var(--r-sm); padding: 3px 5px; color: #fff; font-size: 10.5px; font-weight: 600; overflow: hidden; }

/* Month view */
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.month-dow { text-align: center; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; font-weight: 700; }
.month-cell {
  min-height: 96px; background: var(--surface); border: 0; border-radius: var(--r-md);
  padding: 7px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: background var(--dur);
}
.month-cell:hover { background: var(--surface-2); }
.month-cell.dim { opacity: 0.4; }
.month-cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.month-cell .mc-num { font-size: 13px; font-weight: 700; align-self: flex-start; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-xs); }
.month-cell.today .mc-num { background: var(--accent); color: #fff; }
.month-ev { font-size: 11px; font-weight: 600; color: #fff; padding: 2px 6px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.month-more { font-size: 11px; color: var(--text-muted); font-weight: 600; padding-left: 2px; }

/* Agenda */
.agenda-day { margin-bottom: 18px; }
.agenda-date { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.agenda-date .ad-num { font-size: 24px; font-weight: 800; }
.agenda-item { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.agenda-time { width: 76px; flex-shrink: 0; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.agenda-body { flex: 1; display: flex; align-items: center; gap: 10px; }

/* ============================================================
   Team / matrix / misc
   ============================================================ */
.list-row {
  display: flex; align-items: center; gap: 13px; padding: 13px; background: var(--surface);
  border-radius: var(--r-md); transition: background var(--dur);
}
.list-row:hover { background: var(--surface-2); }
.grid-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Dashboard metrics — compact single-viewport layout on desktop */
.dash-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.dash-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 29.5px 20px;
  min-height: 163px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: #050508;
}
.dash-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.dash-hero > :not(.dash-hero-bg) {
  position: relative;
  z-index: 2;
}
.dash-hero-greet {
  margin: 0;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-hero-name {
  font-size: inherit;
  font-weight: 800;
  color: #fff;
}
.dash-hero-chips { margin-top: 10px; }
.dash-hero-chips .chip {
  height: 36px;
  padding: 0 14px;
  font-size: 14.5px;
  border-radius: var(--r-xs);
  gap: 8px;
}
.dash-hero-chips .chip svg {
  width: 18px;
  height: 18px;
}
.dash-hero > .avatar.lg {
  width: calc(95px * 1.15);
  height: calc(95px * 1.15);
  font-size: calc(28px * 1.15);
  flex-shrink: 0;
}
.dash-topbar-actions {
  margin-left: auto;
  gap: 0;
}
.dash-topbar-actions .btn-icon {
  width: 34px;
  min-height: 44px;
}

.dash-columns {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  flex: 1;
  min-height: 0;
  margin: 0;
}
.dash-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  height: 100%;
  padding: 6px 8px;
  background: rgba(19, 19, 19, 0.55);
  border-radius: var(--r-xl);
}
.dash-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  flex-shrink: 0;
}
.dash-col-head .h-md { margin: 0; font-size: 14px; }
.dash-col-head .btn-sm { min-height: 26px; padding: 0 6px; font-size: 11px; }
.dash-col-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.dash-col-block { display: flex; flex-direction: column; min-width: 0; }
.dash-col-block .h-sm,
.dash-inset-label {
  font-size: 12.6px;
  margin: 0;
  font-weight: 650;
  align-self: flex-start;
  text-align: left;
  line-height: 1.2;
}
.dash-col .card { padding: 6px 8px; }
.dash-col .dash-stat { padding: 12px 12px 27.5px; }
.dash-col .dash-upnext,
.dash-col .dash-col-link {
  padding: 8px 10px 8px;
}
.dash-col .dash-metric-panel { padding: 11px; }
.dash-col-grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dash-col-fill {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-col-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  flex-shrink: 0;
}
.dash-col-link-body {
  align-items: center;
  gap: 8px;
  width: 100%;
}
.dash-col-link-ic { width: 24px; height: 24px; border-radius: var(--r-sm); }
.dash-col-link-num { font-size: 14px; font-weight: 800; line-height: 1.1; }
.dash-inset {
  background: rgba(10, 10, 10, 0.62);
  border: 0;
  border-radius: var(--r-md);
}
.dash-upnext {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 0;
}
.dash-upnext-body {
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.dash-upnext-time { min-width: 44px; }
.dash-upnext-time .h-md { font-size: 14px; }
.dash-upnext-rule { width: 1px; align-self: stretch; background: var(--border); }
.dash-upnext-title { font-weight: 700; font-size: 13px; }
.dash-upnext-empty { justify-content: center; flex: 1; font-size: 12px; }
.dash-metric-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
}
.dash-metric-panel:has(.dash-donut) {
  gap: 10px;
}
.dash-metric-panel .dash-donut,
.dash-metric-panel .dash-list,
.dash-metric-panel .dash-done-list,
.dash-metric-panel .empty { width: 100%; }
.dash-donut {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  flex: 1; min-height: 0; width: 100%;
  overflow: visible;
  padding-top: 10px;
}
.dash-donut.empty { text-align: center; gap: 8px; justify-content: center; padding-top: 0; }
.dash-donut.empty p { font-size: 12px; }
.dash-donut-ring {
  position: relative;
  flex: 0 1 auto;
  width: 160px;
  max-width: min(160px, 100%);
  aspect-ratio: 1;
  min-width: 0;
}
.dash-donut-ring svg {
  display: block;
  width: 100%;
  height: 100%;
}
.dash-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0; pointer-events: none;
}
.dash-donut-center .h-lg { font-size: 39px; line-height: 1; font-weight: 800; }
.dash-donut-center .tiny { font-size: 10px; }
.dash-donut-legend {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 96px; overflow-y: auto; flex-shrink: 0;
  /* Sit near the bottom of the Today's events panel */
  margin-top: auto;
  padding-bottom: 2px;
  /* Soft edge fade so rows dissolve as they scroll out of view */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
}
.dash-donut-legend li {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
}
.dash-donut-legend li.is-past { opacity: 0.5; }
.dash-stat-stack {
  display: flex; flex-direction: column; gap: 12px; flex-shrink: 0;
}
.dash-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 0;
  width: 100%;
}
.dash-stat-head {
  width: 100%;
  align-items: center;
  gap: 8px;
}
.dash-stat-head .dash-inset-label { margin: 0; }
.dash-consist-head {
  align-items: center;
  gap: 8px;
}
.dash-stat .segmented { margin-left: auto; flex-shrink: 1; min-width: 0; }
.dash-consist-head .segmented {
  margin-left: auto;
  flex-shrink: 0;
  gap: calc(1px * 1.15);
  padding: 2px calc(2px * 1.15);
  border-radius: var(--r-sm);
}
.dash-stat .segmented button { min-width: 0; padding: 0 3px; font-size: 10px; min-height: 22px; }
.dash-consist-head .segmented button {
  min-width: 0;
  padding: 0 calc(5px * 1.15);
  font-size: 10px;
  font-weight: 650;
  min-height: 22px;
  border-radius: 6px;
}
.dash-stat-num {
  font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-top: 0; color: var(--text);
}
.dash-stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.dash-stat-unit {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  line-height: 1;
}
.dash-consist-chart {
  position: relative;
  width: 100%;
  height: 92px;
  margin-top: 4px;
  overflow: visible;
}
.dash-consist-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.dash-consist-current {
  stroke: var(--accent);
  stroke-width: 2.5;
}
.dash-consist-prior {
  stroke: rgba(161, 161, 170, 0.55);
  stroke-width: 1.5;
}
.dash-consist-xlabel {
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dash-consist-xlabels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  pointer-events: none;
}
.dash-consist-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dash-consist-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.dash-consist-dot::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}
.dash-consist-dot.is-last,
.dash-consist-dot.is-active {
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-color: var(--accent);
}
.dash-consist-tip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, calc(-100% - 12px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--elevated), var(--elevated)) padding-box,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)) border-box;
  background-clip: padding-box, border-box;
  box-shadow: none;
  pointer-events: none;
  white-space: nowrap;
}
.dash-consist-tip strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.dash-consist-tip span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}
.dash-consist-legend {
  position: absolute;
  top: 10px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  pointer-events: none;
  z-index: 1;
}
.dash-consist-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.dash-consist-pill.is-current {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.dash-consist-pill.is-prior {
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed rgba(161, 161, 170, 0.55);
}
.dash-consist-chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}
.dash-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0;
  flex: 1; min-height: 0; overflow-y: auto;
}
.dash-list-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 2px;
  border-bottom: 1px solid var(--border);
}
.dash-list-row:last-child { border-bottom: 0; }
.dash-list-ic {
  width: 28px; height: 28px; border-radius: var(--r-xs);
  display: grid; place-items: center; flex-shrink: 0;
}
.dash-done-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-height: 0; overflow-y: auto; width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Soft bottom fade only — top stays crisp under the section label */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 28px),
    transparent 100%
  );
}
.dash-done-list::-webkit-scrollbar { display: none; }
.dash-done-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: #fff;
  min-width: 0;
}
.dash-done-row svg,
.dash-done-row .icon-mask { flex-shrink: 0; color: #fff; }
.dash-done-name { flex: 1; min-width: 0; font-weight: 650; font-size: 13px; line-height: 1.2; }
.dash-done-streak { flex-shrink: 0; font-size: 12px; font-weight: 700; opacity: 0.9; }
.dash-done-row-office {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: #fff;
}
.dash-done-row-office svg,
.dash-done-row-office .icon-mask { color: #fff; }
.dash-done-meta {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 1px;
}
.dash-col .empty { padding: 14px 8px; }
.dash-col .empty-mark { width: 40px; height: 40px; border-radius: var(--r-md); margin-bottom: 8px; }
.dash-col .empty-mark svg { width: 18px; height: 18px; }
.dash-col .empty h3 { font-size: 13px; margin-bottom: 2px; }
.dash-col .empty p { font-size: 11.5px; line-height: 1.35; }
.dash-empty-center {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-empty-center .empty {
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dash-empty-center .empty-mark {
  width: 46px;
  height: 46px;
  margin-bottom: 9px;
}
.dash-empty-center .empty-mark svg { width: 21px; height: 21px; }
.dash-empty-center .empty h3 { font-size: 15px; margin-bottom: 3px; }
.dash-empty-center .empty p { font-size: 13.2px; line-height: 1.35; max-width: 240px; }
/* Empty Done today: flame left, title + body stacked left-aligned on the right */
.dash-empty-inline {
  align-items: center;
  justify-content: flex-start;
}
.dash-empty-inline .empty {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  width: auto;
  max-width: 100%;
  padding: 0;
}
.dash-empty-inline .empty-mark {
  margin: 0;
  flex-shrink: 0;
}
.dash-empty-inline .empty-mark .icon-mask,
.dash-empty-inline .empty-mark svg {
  width: 25.5px;
  height: 25.5px;
}
.dash-empty-inline .empty-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: none;
  /* Kill the default centered auto margins that were shoving text far from the icon */
  margin: 0;
  text-align: left;
}
.dash-empty-inline .empty h3 {
  margin: 0 0 3px;
  text-align: left;
}
.dash-empty-inline .empty p {
  margin: 0;
  max-width: none;
  text-align: left;
}

.streak-dow {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.streak-dow-btn {
  flex: 1 1 0; min-width: 40px; min-height: 40px; padding: 0 6px;
  border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--bg-deep); color: var(--text-muted);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.streak-dow-btn.on { color: #fff; }
.streak-cal {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px;
}
.streak-cal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px;
}
.streak-cal-title { font-size: 14px; font-weight: 700; }
.streak-cal-dows {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px;
  text-align: center; font-size: 11px; font-weight: 700; color: var(--text-dim);
}
.streak-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.streak-cal-day {
  aspect-ratio: 1; min-height: 36px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--surface-2); color: var(--text);
  font-size: 13px; font-weight: 650; cursor: pointer;
  display: grid; place-items: center;
}
.streak-cal-day:hover:not(:disabled) { border-color: var(--border-strong); }
.streak-cal-day.today:not(.done) { box-shadow: inset 0 0 0 1.5px var(--accent); }
.streak-cal-day.off:not(.done) { opacity: 0.45; }
.streak-cal-day.muted,
.streak-cal-day:disabled {
  opacity: 0.28; cursor: default; background: transparent; color: var(--text-dim);
}
.streak-cal-day.done { font-weight: 750; }

@media (min-width: 901px) {
  /* Dashboard fills the glass card — no page scroll; columns scroll inside. */
  .main:has(.dash-content) {
    display: flex;
    flex-direction: column;
  }
  .main:has(.dash-content) > .dash-content,
  .dash-content {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
  }
  .dash-screen {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow: hidden;
    padding: 10px 22px 12px;
  }
  .dash-columns {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
  }
  .dash-col {
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow: hidden;
  }
  .dash-col-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 900px) {
  /* Fit the dashboard between the fixed header and the floating nav.
     Panels swipe horizontally; only inner lists scroll vertically. */
  .main:has(.dash-content) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .main:has(.dash-content) > .dash-content,
  .dash-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* Override the global mobile content padding — the screen itself clears the nav. */
    padding-bottom: 0 !important;
  }
  .dash-screen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }
  /* Must beat the later `.content-pad { padding: 16px }` in this media query —
     without this the panels only get 16px of bottom pad and tuck under the nav. */
  .content-pad.dash-screen {
    padding-top: 12px;
    padding-left: 16px;
    padding-right: 16px;
    /* 67px pill + 16px gap, sitting on --nav-clear */
    padding-bottom: calc(var(--nav-clear) + 83px);
  }
  .dash-hero {
    margin-top: 2px;
    min-height: 0;
    padding: 14px 12px;
    gap: 12px;
    flex-shrink: 0;
  }
  .dash-hero > .avatar.lg {
    width: calc(56px * 1.15 * 1.15 * 1.07 * 1.07 * 1.03);
    height: calc(56px * 1.15 * 1.15 * 1.07 * 1.07 * 1.03);
    font-size: calc(20px * 1.15 * 1.15 * 1.07 * 1.07 * 1.03);
  }
  .dash-hero-greet { font-size: 18px; }
  .dash-hero-chips { margin-top: 6px; }
  .dash-col-open {
    min-width: 36px;
    padding: 0 4px;
    gap: 0;
  }
  .dash-col-open svg {
    width: calc(16px * 1.2);
    height: calc(16px * 1.2);
  }
  .dash-hero-chips .chip {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }
  .dash-consist-legend {
    top: 2px;
  }
  .dash-donut-ring {
    width: min(135px, 70%);
    max-width: 100%;
  }
  .dash-donut-center .h-lg { font-size: 32px; }
  .dash-donut-legend {
    max-height: 72px;
    /* Hide the thin scrollbar “line” that shows while scrolling on mobile */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .dash-donut-legend::-webkit-scrollbar { display: none; }

  /* Calendar / Streaks / Office as a swipeable row that fills leftover height */
  .dash-columns {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    gap: 12px;
    margin: 8px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .dash-columns::-webkit-scrollbar { display: none; }
  .dash-col {
    flex: 0 0 85%;
    width: 85%;
    max-width: 85%;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
  }
  .dash-col:last-child {
    /* trailing inset so the last card can snap with peek padding */
    margin-right: 0;
  }
  .dash-col-body {
    min-height: 0;
    overflow: hidden;
  }
  .dash-col .dash-stat { padding: 12px; }
}

.matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.matrix th, .matrix td { padding: 0; }
.matrix .corner { position: sticky; left: 0; background: var(--bg); z-index: 3; }
.matrix thead th { padding: 10px 8px; vertical-align: bottom; }
.matrix .owner-cell { position: sticky; left: 0; background: var(--bg); z-index: 2; padding-right: 14px; white-space: nowrap; }
.matrix td.cell { text-align: center; padding: 5px; }
.perm-toggle {
  width: 44px; height: 44px; border-radius: var(--r-sm); border: 1.5px solid var(--border-strong);
  background: var(--surface); display: grid; place-items: center; transition: all var(--dur) var(--ease); color: var(--text-dim);
}
.perm-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.perm-toggle.self { background: var(--surface-2); border-style: dashed; opacity: 0.6; pointer-events: none; }
.perm-toggle svg { width: 20px; height: 20px; }

/* Matrix cards (mobile) */
.perm-card { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }
.perm-card-head { display: flex; align-items: center; gap: 11px; padding: 14px; }
.perm-viewer-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--border); }
.switch { width: 50px; height: 30px; border-radius: var(--r-pill); background: var(--surface-3); border: 0; position: relative; transition: background var(--dur); flex-shrink: 0; margin-left: auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-sm); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(20px); }

/* QR */
.qr-frame { background: #fff; border-radius: var(--r-lg); padding: 16px; display: inline-block; }
.qr-frame canvas, .qr-frame img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }

/* Empty states */
.empty { text-align: center; padding: 48px 22px; color: var(--text-muted); }
.empty-mark { width: 72px; height: 72px; border-radius: var(--r-xl); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 16px; }
.empty-mark svg,
.empty-mark .icon-mask { width: 34px; height: 34px; }
.empty-copy { max-width: 320px; margin: 0 auto; }
.empty h3 { color: var(--text); font-size: 17px; margin-bottom: 6px; }
.empty p { margin: 0; line-height: 1.5; }

/* Color picker */
.color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch { width: 40px; height: 40px; border-radius: var(--r-sm); border: 2px solid transparent; position: relative; transition: transform var(--dur) var(--ease); }
.color-swatch:active { transform: scale(0.9); }
.color-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.color-swatch.sel::after { content: ""; position: absolute; inset: 0; display: grid; place-items: center; }

/* Toast */
.toasts { position: fixed; left: 0; right: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 16px); }
.toast {
  background: var(--elevated); border: 1px solid var(--border-strong); color: var(--text);
  padding: 12px 18px; border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 10px; animation: toastIn var(--dur) var(--ease-out);
  max-width: 90vw;
}
.toast svg { width: 19px; height: 19px; }
.toast.error { border-color: var(--danger); }
.toast.error svg { color: var(--danger); }
.toast.success svg { color: var(--success); }
@keyframes toastIn { from { transform: translateY(14px); opacity: 0; } }

/* Utility */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.center { align-items: center; }
.gap-sm { gap: 8px; } .gap-lg { gap: 18px; }
.mt-sm { margin-top: 8px; } .mt { margin-top: 16px; } .mt-lg { margin-top: 24px; }
.mb { margin-bottom: 16px; } .mb-sm { margin-bottom: 8px; }
.hide { display: none !important; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dayflame mark loader — outline draw loop */
.df-spinner {
  display: block;
  flex-shrink: 0;
  overflow: visible;
  color: inherit;
}
.df-spinner-ghost,
.df-spinner-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.df-spinner-ghost {
  opacity: 0.18;
}
.df-spinner-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dfSpinnerDraw 0.945s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.df-spinner-path.is-b {
  animation-delay: 0.126s;
}
@keyframes dfSpinnerDraw {
  0% { stroke-dashoffset: 1; opacity: 0.45; }
  42% { stroke-dashoffset: 0; opacity: 1; }
  58% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .df-spinner-path {
    animation: dfSpinnerPulse 0.84s ease-in-out infinite;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .df-spinner-path.is-b { animation-delay: 0.105s; }
  @keyframes dfSpinnerPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
  }
}
.fade-in { animation: fadeIn var(--dur) var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } }

/* ============================================================
   Auth / onboarding
   ============================================================ */
.auth-screen { height: 100%; min-height: 100dvh; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 24px; padding-top: calc(24px + var(--safe-top)); position: relative; background: #0a0a0a url("auth-bg.jpg") center / cover no-repeat fixed; }
.boot-splash {
  height: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #06070d url("bg3.jpg") center / cover no-repeat fixed;
  padding: var(--safe-top) 24px var(--safe-bottom);
}
.boot-splash-mark {
  display: block;
  width: min(66.15px, 16.54vw);
  height: auto;
  object-fit: contain;
  background: transparent;
  /* Belt-and-suspenders: any residual black in the asset disappears over the aurora. */
  mix-blend-mode: screen;
}
.auth-glow { display: none; }
.auth-card { width: 100%; max-width: 420px; position: relative; z-index: 1; }
.auth-card .panel {
  padding: 26px;
  background: rgba(24, 24, 27, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-2xl);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.auth-card-onboard { max-width: 440px; }
.onboard-steps { display: flex; gap: 6px; margin-bottom: 22px; }
.onboard-steps .step { flex: 1; height: 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.onboard-steps .step.done { background: var(--accent); }
.onboard-steps .step.active { background: rgba(255, 255, 255, 0.08); }
.onboard-steps .step.active::after { content: ""; display: block; height: 100%; width: 60%; background: var(--accent); border-radius: var(--r-pill); }
.onboard-step .h-lg { letter-spacing: -0.03em; }
.onboard-lead { margin: 6px 0 20px; line-height: 1.45; }
.onboard-signout { margin-top: 14px; opacity: 0.7; }
.onboard-place-current,
.onboard-info-row,
.onboard-invite-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
}
.onboard-place-ic {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
}
.onboard-invite-link { margin-bottom: 12px; color: var(--text-muted); }
.auth-card .choice-card {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
}
.auth-card .choice-card:hover,
.auth-card .choice-card.sel {
  background: var(--accent-softer);
  border-color: rgba(37, 59, 179, 0.35);
}
.auth-card .tz-select {
  background: rgba(0, 0, 0, 0.22);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.auth-card .tz-select-list { max-height: 200px; }
.choice-card {
  display: flex; align-items: center; gap: 14px; padding: 18px; width: 100%; text-align: left;
  background: var(--surface); border: 0; border-radius: var(--r-lg); transition: all var(--dur) var(--ease);
}
.choice-card:hover, .choice-card.sel { background: var(--accent-softer); }
.choice-card:hover::before, .choice-card.sel::before {
  background: linear-gradient(to bottom, rgba(37, 59, 179, 0.55), transparent);
}
.choice-card .choice-ic, .choice-ic { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.create-chooser { display: flex; flex-direction: column; gap: 10px; }
.create-choice {
  color: #fff;
  transform: scale(1);
  transform-origin: center;
  transition:
    background var(--dur) var(--ease),
    transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.create-choice-event { background: rgba(37, 59, 179, 1); }
.create-choice-streak { background: rgba(37, 59, 179, 0.75); }
.create-choice-wildcard { background: rgba(37, 59, 179, 0.5); }
.create-choice-office { background: rgba(37, 59, 179, 0.22); }
.create-choice:hover {
  transform: scale(1.035);
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.create-choice-event:hover { background: rgba(30, 50, 153, 1); }
.create-choice-streak:hover { background: rgba(37, 59, 179, 0.88); }
.create-choice-wildcard:hover { background: rgba(37, 59, 179, 0.62); }
.create-choice-office:hover { background: rgba(37, 59, 179, 0.34); }
.create-choice .choice-ic {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
}
.create-choice .choice-ic svg,
.create-choice .choice-ic .icon-mask {
  width: 26px;
  height: 26px;
}
.create-choice .text-muted,
.create-choice .small.text-muted {
  color: rgba(255, 255, 255, 0.72);
}
.create-choice::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.28), transparent);
}
.create-choice:hover::before,
.create-choice.sel::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent);
}
@media (prefers-reduced-motion: reduce) {
  .create-choice,
  .create-choice:hover { transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1023px) {
  :root { --sidebar-w: 240px; }
}

/* Tablet & mobile: hide persistent sidebar, show bottom nav */
@media (max-width: 900px) {
  /* In standalone edge-to-edge mode, the gray topbar paints behind the status
     bar while safe-top keeps its controls below the notch. */
  :root { --mobile-header: calc(var(--header-h) + var(--safe-top)); }
  /* The WINDOW must never scroll on mobile: .main is the scroll container. This
     keeps window.scrollY pinned at 0, so opening a sheet needs no body-lock
     offset and closing it needs no scroll-restore — which is what reflowed the
     fixed top bar / nav on iOS after saving an event. */
  /* --app-height (visible viewport) and --screen-height (full display) are set
     from index.html in standalone mode. Paint layers use --screen-height to reach
     the physical bottom edge; the interactive .app uses --app-height so the nav
     and content stay on screen. Browsers without the override keep 100dvh, and a
     solid dark backstop on html guarantees no strip can fall through to black. */
  html { background-color: #06070d; }
  /* Paint layer fills the full physical display (--screen-height) so the aurora
     reaches the very bottom edge — no black bar — even when the visible viewport
     is shorter than the screen. */
  html, body { height: var(--screen-height, var(--app-height, 100dvh)); overflow: hidden; }
  body { background: transparent; }
  #root { height: var(--screen-height, var(--app-height, 100dvh)); min-height: 0; background: transparent; }
  .app {
    position: relative;
    /* Interactive shell tracks the *visible* viewport so the nav + content can
       never spill off the bottom edge; 100dvh clamps any over-report. The area
       between .app and the screen bottom shows the aurora painted behind it. */
    height: min(var(--app-height, 100dvh), 100dvh);
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: transparent;
  }
  /* Anchor nav/FAB to .app so a cold-launch under-reported layout viewport
     can't float them above a black strip. .app height tracks the visible frame. */
  .bottomnav { position: absolute; }
  .fab:not(.in-sheet) { position: absolute; }
  .fab.fab-skyline:not(.in-sheet) { position: fixed; }
  .auth-screen { height: 100%; min-height: 0; }
  .sidebar { display: none; }
  .main {
    margin-left: 0; height: 100%; min-height: 0;
    overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-top: var(--mobile-header);
  }
  /* Prevent the .main scroller from moving while a sheet is open. */
  body.sheet-lock .main { overflow: hidden; }
  .bottomnav { display: flex; }
  .fab:not(.in-sheet) { display: grid; }
  .fab-dock.mobile {
    display: flex;
    position: absolute;
    z-index: 45;
    /* --nav-pill-right is measured from the centered bottom-nav pill in app.jsx */
    right: var(--nav-pill-right, 16px);
    bottom: calc(var(--nav-clear) + 72px);
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    height: 67px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    background: rgba(24, 24, 27, 0.55);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  .fab-dock.mobile.fab-dock-upload {
    width: min(210px, calc(100vw - var(--nav-pill-right, 16px) - 92px));
    height: auto;
    min-height: 67px;
    padding: 10px 16px;
    justify-content: stretch;
    align-items: stretch;
  }
  .fab-dock-upload-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
  }
  .fab-dock-upload-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
  }
  .fab-dock-upload-pct {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .fab-dock.mobile.fab-dock-upload .vault-upload-bar {
    margin-top: 2px;
    height: 5px;
  }
  .fab-dock-upload-eta {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }
  .fab-dock-upload-success {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--success);
  }
  .fab-dock-upload-success svg,
  .fab-dock-upload-success .icon-mask {
    width: 18px;
    height: 18px;
    color: var(--success);
  }
  .fab-dock.mobile.fab-dock-upload.is-success {
    width: auto;
    min-width: 132px;
    max-width: min(240px, calc(100vw - var(--nav-pill-right, 16px) - 24px));
    padding: 0 18px;
    height: 67px;
    align-items: center;
    justify-content: center;
  }
  .fab-dock-upload-success {
    white-space: nowrap;
  }
  /* Soften the calendar page scrollbar on mobile. */
  .main:has(.cal-toolbar)::-webkit-scrollbar-thumb,
  .main:has(.cal-content)::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--surface-3) 50%, transparent);
  }
  .main:has(.cal-toolbar),
  .main:has(.cal-content) {
    scrollbar-color: color-mix(in srgb, var(--surface-3) 50%, transparent) transparent;
  }
  .content { padding-bottom: calc(var(--safe-bottom) + 120px); }
  .content-pad { padding: 16px; }
  /* A "fullscreen" sheet (e.g. the event editor) must stay a bottom sheet that
     stops below the status bar / notch instead of sliding under it. Capping the
     height also keeps the tall form scrolling inside .sheet-body, so focusing a
     field doesn't make iOS scroll the whole window (which shifted the nav). */
  .sheet.fullscreen {
    height: auto;
    max-height: calc(100dvh - var(--safe-top) - 10px - var(--kb));
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    /* Foot owns the bottom inset so Cancel / Create sit 30px from the screen edge. */
    padding-bottom: 0;
  }
  .sheet.fullscreen .sheet-foot {
    padding-bottom: 30px;
  }
  /* Pin the header to the viewport so horizontal scrolling of the wide team/week
     grid can't drag it out of place. Explicit background-color so iOS samples
     the gray for the status-bar tint. */
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 14px;
    padding-top: var(--safe-top);
    height: var(--mobile-header);
    background-color: #181818;
    background: #181818;
    gap: 10px;
  }
  /*
    Mobile browser / demo tabs only: keep original title/icon sizes, cut more of
    the empty safe-area gap, and vertically center controls in the content band.
    Standalone PWA keeps the full safe-area treatment.
  */
  @media (display-mode: browser), (display-mode: minimal-ui) {
    :root {
      --header-h: 48px;
      --browser-top-inset: max(0px, calc(env(safe-area-inset-top, 0px) - 44px));
      --mobile-header: calc(var(--header-h) + var(--browser-top-inset));
    }
    .topbar {
      padding-top: var(--browser-top-inset);
      height: var(--mobile-header);
      align-items: center;
    }
    body::before {
      height: var(--browser-top-inset);
    }
  }
  html.is-browser {
    --header-h: 48px;
    --browser-top-inset: max(0px, calc(var(--safe-top) - 44px));
    --mobile-header: calc(var(--header-h) + var(--browser-top-inset));
  }
  html.is-browser .topbar {
    padding-top: var(--browser-top-inset);
    height: var(--mobile-header);
    align-items: center;
  }
  html.is-browser body::before {
    height: var(--browser-top-inset);
  }
  html.is-browser .topbar .date-title {
    justify-content: center;
  }
  @media (display-mode: standalone), (display-mode: fullscreen) {
    :root {
      --header-h: 60px;
      --mobile-header: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    }
    .topbar {
      padding-top: env(safe-area-inset-top, 0px);
      height: var(--mobile-header);
    }
    body::before {
      height: env(safe-area-inset-top, 0px);
    }
  }
  html.is-standalone {
    --header-h: 60px;
    --mobile-header: calc(var(--header-h) + var(--safe-top));
  }
  html.is-standalone .topbar {
    padding-top: var(--safe-top);
    height: var(--mobile-header);
  }
  html.is-standalone body::before {
    height: var(--safe-top);
  }
  .topbar .brand {
    flex-shrink: 0;
  }
  .topbar .date-title {
    min-width: 0;
    justify-content: center;
  }
  .topbar .date-title .d-day {
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar .date-title .d-sub {
    font-size: 12.1px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar .date-title .d-tz {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Guaranteed status-bar fill: paint the safe-area (notch) strip gray on every
     tab so the header background always reaches the very top of the screen in
     standalone mode, even when a screen's own scroll container doesn't. */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--safe-top);
    background: #181818;
    z-index: 35;
    pointer-events: none;
  }
  /* .main's padding-top already offsets the fixed top bar, so sticky top:0 pins
     the member-names row right under the bar. */
  .cal-head-pin { top: 0; }
  .hide-mobile { display: none !important; }
  /* Keep Day/Week + My day/Team in normal document flow so they scroll away
     vertically. Horizontal swipe lives on .cal-body-scroll (head mirrors it). */
  .main:has(.cal-toolbar) {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .main:has(.cal-toolbar) > .content {
    flex: 0 0 auto;
    overflow: visible;
  }
  /* Pin the bottom dissolve to the physical screen edge. */
  .scroll-fade-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    z-index: 25;
  }
  /* The day/week timeline scrolls horizontally; drop the side inset so the grid
     (time gutter + people columns) starts flush at the screen edge. */
  .content-pad.cal-flush { padding-left: 0; padding-right: 0; padding-top: 0; }
  .content-pad.cal-toolbar {
    position: static;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .cal-toolbar-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cal-toolbar-views {
    width: 100%;
    gap: 10px;
    justify-content: space-between;
  }
  .cal-view-segmented {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cal-view-segmented > .segmented {
    display: flex;
    width: 100%;
  }
  .cal-view-segmented > .segmented button {
    flex: 1;
  }
  .cal-skyline-switch {
    display: none;
  }
  .cal-toolbar-views > .segmented {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  .cal-toolbar-views > .segmented button {
    flex: 1;
  }
  .planet-head { top: 0; }
  /* Fill the viewport so column borders run to the screen bottom. */
  .main:has(.planet-board) > .content {
    min-height: calc(100dvh - var(--mobile-header));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .main:has(.planet-board) > .content > .cal-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .cal-stage-skyline {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .planet-board {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: calc(100dvh - var(--mobile-header));
  }
  .planet-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .planet-track {
    flex: 1 1 auto;
    /* Grow past the 24h day so vertical cell borders reach the screen bottom. */
    min-height: max(672px, calc(100dvh - var(--mobile-header) - 56px));
    align-items: stretch;
  }
  .planet-hours,
  .planet-cols {
    align-self: stretch;
    min-height: 100%;
  }
  .planet-col {
    align-self: stretch;
    min-height: 100%;
  }
  /* Keep hour rules painting for the full stretched height (not just 24h). */
  .planet-cols {
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      color-mix(in srgb, var(--border-strong) 25%, transparent) 27px,
      color-mix(in srgb, var(--border-strong) 25%, transparent) 28px
    );
  }
  .planet-gridline { display: none; }
  .cal-toolbar-filters {
    margin-left: 0;
    width: 100%;
    align-items: stretch;
  }
  /* Match Day/Week/Month/Agenda track height and chrome */
  .cal-toolbar-filters .segmented {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    min-height: 48px;
    padding: 4px;
    border-radius: var(--r-md);
    box-sizing: border-box;
  }
  .cal-toolbar-filters .segmented button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: var(--r-sm);
  }
  .cal-toolbar-filters .btn {
    flex-shrink: 0;
    min-height: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-deep);
    color: var(--text-muted);
    box-sizing: border-box;
  }
  .cal-toolbar-filters .btn:hover {
    background: var(--surface-2);
    color: var(--text);
  }
  .month-cell { min-height: 64px; padding: 4px; }
  .month-cell .mc-num { width: 22px; height: 22px; font-size: 12px; }
}
@media (min-width: 901px) {
  .only-mobile { display: none !important; }
  .fab.mobile { display: none; }
}

/* Desktop: sidebar present — the main column becomes a floating glass card that
   sits to the right of the (transparent) sidebar, letting the texture show in a
   margin all the way around it. The card is a fixed-height, clipped surface: the
   window itself never scrolls, only .content scrolls inside the rounded card. */
@media (min-width: 901px) {
  html, body {
    height: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    background-color: #06070d;
  }
  html {
    background-image: url("bg3.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  body { background: transparent; }
  #root { height: 100%; height: 100dvh; min-height: 0; background: transparent; }
  .app { height: 100vh; height: 100dvh; min-height: 100dvh; overflow: hidden; background: transparent; }
  .main {
    margin: 16px 20px 16px calc(var(--sidebar-rail) + 3px);
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    min-height: 0;
    overflow: hidden;
    position: relative;
    border-radius: var(--r-2xl);
    border: 1px solid var(--border-strong);
    background: rgba(17, 17, 20, 0.55);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    backdrop-filter: blur(30px) saturate(150%);
  }
  .topbar {
    position: static;
    background: transparent;
    border: 0; border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 0 26px;
  }
  .content {
    flex: 1; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* Timeline/week header sits at the top of .content's own scrollport now that
     the topbar is a static row above it (no longer a sticky window overlay). */
  .cal-head-pin { top: 0; }
  /* Day/week timeline runs edge-to-edge: drop the side inset (and the centered
     max-width cap) so the member row + grid start flush at the card's left edge. */
  .content-pad.cal-flush { padding-left: 0; padding-right: 0; max-width: none; padding-top: 0; }
  /* Calendar view toolbar: push the view toggle toward the left card edge and the
     scope toggle toward the right, with a small inset so they don't touch the edge. */
  .content-pad.cal-toolbar { padding-left: 16px; padding-right: 16px; max-width: none; padding-bottom: 0; }
}

/* Desktop: render sheets as centered modals */
@media (min-width: 901px) {
  .overlay { align-items: center; }
  .sheet {
    max-width: 540px; border-radius: var(--r-2xl); border: 0;
    max-height: 88vh; transform: translateY(0) scale(0.96); opacity: 0; animation: modalIn var(--dur) var(--ease-out) forwards;
  }
  .overlay.closing .sheet { animation: modalOut 0.18s var(--ease) forwards; }
  .sheet-grip { display: none; }
  .sheet.wide { max-width: 880px; }
  .sheet.fullscreen { max-width: 720px; height: auto; border-radius: var(--r-2xl); }
  /* New Event desktop height — 15% taller than the prior 70.4vh cap. */
  .sheet.fullscreen.event-editor-sheet {
    max-height: 80.96vh; /* 70.4vh × 1.15 */
  }
  /* New Event footer: center Cancel / Create; 25% shorter than the default foot. */
  .sheet.event-editor-sheet .sheet-foot {
    align-items: center;
    /* Default foot is 14px vertical pad; event-editor also used a 40px mobile
       bottom inset — reset both and shrink vertical pad by 25%. */
    padding: 10.5px 18px; /* 14px × 0.75 */
  }
}
@keyframes modalIn { to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes modalOut { to { transform: translateY(0) scale(0.96); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   The Office (team task distribution)
   ============================================================ */
.office-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 16px; }
.office-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ofilter { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--dur); }
.ofilter:hover { border-color: var(--border-strong); }
.ofilter.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Managers block: the admin + promoted managers live at the top of the Office,
   and hold the shared pending pile + review queue. */
.mgr-block {
  border-radius: var(--r-xl);
  background: rgba(19, 19, 19, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 16px;
  margin-bottom: 22px;
}
/* Approval-history button pinned to the top-right corner of a manager container. */
.mgr-history-btn { position: absolute; top: 14px; right: 14px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; transition: color var(--dur), border-color var(--dur), background var(--dur); }
.mgr-history-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* Managers grid: single column by default; two columns on desktop. A lone
   manager spans the full width so it doesn't sit awkwardly at half size. */
.mgr-grid { display: grid; gap: 18px; margin-bottom: 22px; }
.mgr-grid > .mgr-block { margin-bottom: 0; }
@media (min-width: 901px) {
  .mgr-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .mgr-grid > .mgr-block:only-child { grid-column: 1 / -1; }
}
.office-section-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin: 0 0 12px; }
.office-section-head .oshead-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.office-section-head .count { margin-left: auto; color: var(--text-dim); font-size: 13px; font-weight: 600; }
.desk-group { margin-bottom: 18px; }
/* Desktop: lay the desk groups out as side-by-side columns and let the row
   scroll horizontally when there are more desks than fit the viewport. */
@media (min-width: 901px) {
  .desk-board {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 10px;
  }
  .desk-board > .desk-group {
    flex: 0 0 300px;
    margin-bottom: 0;
    scroll-snap-align: start;
  }
  /* Inside a column, stack the member desk cards vertically. */
  .desk-board > .desk-group .desk-grid { grid-template-columns: 1fr; }
}
.mgr-station { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Members only see the review queue — let it span the full width. */
.mgr-station.solo { grid-template-columns: 1fr; }
/* The manager's own desk card sits at the top of their container as its header —
   blend it in (no nested border/background) and separate the queues below. */
.mgr-block > .desk {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
}
.mgr-block > .desk:hover { background: transparent; }
.mgr-block > .desk::before { display: none; }
.mgr-block > .desk.drop-over { background: var(--accent-softer); border-radius: var(--r-md); padding: 10px; }
.mgr-block .mgr-station { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
/* A desk card representing a manager gets a warm accent to set it apart. */
/* Settings popup helpers */
.settings-section { margin-bottom: 22px; }
.settings-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border); }
.desk-chip-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.desk-edit { padding: 12px 0; border-top: 1px solid var(--border); }
/* Match event-notifications soft-frost sheet surface. */
.mgr-zone {
  border-radius: var(--r-lg);
  background: rgba(24, 24, 27, 0.55);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  backdrop-filter: blur(15px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  padding: 14px;
}
.mgr-zone::before { display: none; }
.mgr-zone.drop-over {
  background: rgba(37, 59, 179, 0.28);
  border-color: rgba(255, 255, 255, 0.18);
}
.mgr-zone.drop-over::before { display: none; }
.mgr-zone-add {
  margin-left: auto; flex-shrink: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent);
  cursor: pointer; transition: background var(--dur), color var(--dur);
}
.mgr-zone-add svg { width: 18px; height: 18px; }
.mgr-zone-add:hover { background: var(--accent); color: #fff; }
.mgr-zone-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 700; }
.mgr-zone-head .choice-ic { width: 34px; height: 34px; }
.mgr-zone-head .mgr-zone-count { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mgr-zone-head .count { margin-left: auto; color: var(--text-dim); font-size: 13px; font-weight: 600; }
.mgr-view-all { display: block; width: 100%; margin-top: 8px; text-align: center; }
.pile { display: flex; flex-direction: column; gap: 8px; }
.zone-empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 18px 8px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }

.desk-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.desk {
  border-radius: var(--r-xl);
  background: rgba(19, 19, 19, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: background var(--dur), box-shadow var(--dur);
}
.desk:hover {
  background: rgba(19, 19, 19, 0.55);
}
/* Members/managers with an in-progress task get a blue stroke that travels around
   the container: a masked conic-gradient ring whose bright segment rotates via
   the animatable --office-angle custom property. */
@property --office-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --wc-shine { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes officeTrace { to { --office-angle: 360deg; } }
.desk.has-inprogress::before,
.mgr-block.has-inprogress::before { display: none; }
.desk.has-inprogress::after,
.mgr-block.has-inprogress::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  z-index: 2;
  background: conic-gradient(from var(--office-angle),
    rgba(37, 59, 179, 0) 0deg,
    rgba(37, 59, 179, 0) 205deg,
    rgba(59, 90, 235, 0.5) 300deg,
    #7aa2ff 346deg,
    #b9cdff 358deg,
    rgba(37, 59, 179, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: officeTrace 2.4s linear infinite;
  pointer-events: none;
}
.mgr-block.has-inprogress > .mgr-history-btn { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .desk.has-inprogress::after,
  .mgr-block.has-inprogress::after { animation: none; }
}
.desk.drop-over { background: var(--accent-softer); }
.desk.drop-over::before { background: linear-gradient(to bottom, var(--accent), transparent); }
.desk-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.desk.is-admin .desk-head > .avatar.md,
.desk.is-manager .desk-head > .avatar.md {
  width: 57.6px;
  height: 57.6px;
  font-size: 21.6px;
}
.desk-add-btn {
  flex-shrink: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent);
  cursor: pointer; transition: background var(--dur), color var(--dur);
}
.desk-add-btn svg { width: 18px; height: 18px; }
.desk-add-btn:hover { background: var(--accent); color: #fff; }
.desk-name { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.desk-sub { font-size: 11px; color: var(--text-dim); }
.desk-cards { display: flex; flex-direction: column; gap: 8px; }
.desk-empty { border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-dim); font-size: 12px; text-align: center; padding: 16px 8px; }
.desk-more { background: transparent; border: 0; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; padding: 2px; }

/* Soft blur + fade pinned to the bottom of expanded Office task sheets only */
.otask-sheet-scroll {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}
.otask-sheet-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.otask-sheet-scroll > .task-list-fade {
  pointer-events: none;
  position: sticky;
  bottom: -18px; /* flush with .sheet-body padding edge */
  z-index: 4;
  flex-shrink: 0;
  height: 88px;
  margin-top: -88px;
  margin-left: -18px;
  margin-right: -18px;
  width: calc(100% + 36px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(
    to top,
    rgba(19, 19, 19, 0.98) 0%,
    rgba(19, 19, 19, 0.72) 28%,
    rgba(19, 19, 19, 0.3) 58%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0, 0, 0, 0.85) 22%,
    rgba(0, 0, 0, 0.4) 55%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0, 0, 0, 0.85) 22%,
    rgba(0, 0, 0, 0.4) 55%,
    transparent 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .otask-sheet-scroll > .task-list-fade {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.otask {
  position: relative;
  border: 0;
  border-radius: var(--r-md);
  background: rgba(37, 59, 179, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  padding: 10px 12px;
  cursor: pointer;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform var(--dur), opacity var(--dur), background var(--dur);
}
.otask:hover {
  background: rgba(37, 59, 179, 0.32);
}
.otask.in_progress {
  background: rgba(37, 59, 179, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(122, 162, 255, 0.28);
}
.otask.in_progress:hover {
  background: rgba(37, 59, 179, 0.62);
}
.otask.in_progress::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  z-index: 2;
  background: conic-gradient(from var(--office-angle),
    rgba(37, 59, 179, 0) 0deg,
    rgba(37, 59, 179, 0) 205deg,
    rgba(59, 90, 235, 0.55) 300deg,
    #7aa2ff 346deg,
    #b9cdff 358deg,
    rgba(37, 59, 179, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: officeTrace 2.4s linear infinite;
  pointer-events: none;
}
.otask.in_progress > * { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .otask.in_progress::after { animation: none; background: rgba(122, 162, 255, 0.85); padding: 1.5px; }
}
.otask.in_review {
  background: rgba(139, 92, 246, 0.07);
}
.otask.in_review:hover {
  background: rgba(139, 92, 246, 0.1);
}
.otask-desk-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.otask-desk-section-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.otask-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Suppress iOS callout/selection so long-press can enter reorder mode.
   Keep pan-y so the sheet can scroll when the gesture starts on a task;
   only disable touch scrolling while actively reordering. */
.otask-list .otask,
.pile .otask,
.desk-cards .otask {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
.otask-list.is-editing .otask,
.otask-list.is-dragging-active .otask {
  touch-action: none;
}
.otask-list.is-editing .otask {
  cursor: grab;
  animation: trackJiggle 0.28s ease-in-out infinite alternate;
}
.otask-list.is-editing .otask:nth-child(2n) { animation-delay: -0.08s; }
.otask-list.is-editing .otask:nth-child(3n) { animation-delay: -0.16s; }
.otask-list.is-editing .otask:nth-child(4n) { animation-delay: -0.04s; }
.otask-list.is-editing .otask:active,
.otask-list.is-editing .otask.is-dragging { transform: none; }
.otask-list.is-dragging-active {
  touch-action: none;
  user-select: none;
}
.otask-list.is-dragging-active .otask {
  animation: none !important;
  transition: background var(--dur), opacity var(--dur) !important;
}
.otask.is-dragging {
  z-index: 1;
  opacity: 0;
  cursor: grabbing;
  box-shadow: none;
  animation: none !important;
  pointer-events: none;
}
.otask-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 110;
  margin: 0;
  pointer-events: none;
  touch-action: none;
  visibility: hidden;
  will-change: transform;
  transform: translate3d(-9999px, -9999px, 0);
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5));
}
.otask-drag-ghost .otask {
  width: 100%;
  margin: 0;
  cursor: grabbing;
  animation: none !important;
  transition: none !important;
  transform: scale(1.03) rotate(1deg);
  pointer-events: none;
  touch-action: none;
}
.otask.is-ghost {
  animation: none !important;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .otask-list.is-editing .otask { animation: none; }
  .otask-drag-ghost .otask { transform: none; }
}
.otask-title { font-weight: 600; font-size: 14px; line-height: 1.3; word-break: break-word; color: #fff; }
.otask-meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.otask-meta .small,
.otask-meta .text-muted,
.otask .small.text-muted { color: rgba(255, 255, 255, 0.72) !important; }
.otask-due { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.otask-reminders-field { gap: 8px; }
.otask-reminders-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-deep);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border var(--dur), background var(--dur), box-shadow var(--dur);
}
.otask-reminders-toggle:hover { border-color: var(--border-strong); background: var(--bg); }
.otask-reminders-toggle.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.otask-reminders-toggle-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
}
.otask-reminders-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.otask-reminders-toggle svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease);
}
.otask-reminders-toggle.is-open svg { transform: rotate(180deg); }
.otask-reminders-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: fadeIn var(--dur) var(--ease-out);
}
.otask-reminders {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.otask-reminder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--dur), color var(--dur);
  user-select: none;
  min-width: 0;
}
.otask-reminder:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.otask-reminder.is-on { color: var(--text); }
.otask-reminder input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.otask-reminder-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.otask-reminder-box.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.otask-reminder:focus-within .otask-reminder-box {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.otask-reminder-label {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ochip { border: 0; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-xs); cursor: default; }
button.ochip { cursor: pointer; }
.ochip.todo { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ochip.in_progress { background: rgba(122, 162, 255, 0.35); color: #fff; }
.ochip.in_review { background: rgba(167, 139, 250, 0.1); color: #fff; }
.ochip.done { background: rgba(34, 197, 94, 0.35); color: #fff; }

.odetail-title.is-editable { cursor: text; border-radius: var(--r-sm); }
.odetail-title.is-editable:hover { background: rgba(255, 255, 255, 0.04); }
.odetail-title {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.odetail-title-input {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  min-height: 44px;
  white-space: pre-wrap;
  word-break: break-word;
}
.ostatus-slider {
  --ostatus-i: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  border: 1px solid var(--border);
}
.ostatus-slider-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: calc(4px + var(--ostatus-i) * ((100% - 8px) / 3));
  width: calc((100% - 8px) / 3);
  border-radius: calc(var(--r-md) - 2px);
  background: var(--accent);
  box-shadow: var(--shadow-sm);
  transition: left 0.14s var(--ease-out), background 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
/* In progress: outlined (not filled) with a traveling blue stroke */
.ostatus-slider.is-in-progress .ostatus-slider-thumb {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.ostatus-slider.is-in-progress .ostatus-slider-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--office-angle, 0deg),
    transparent 0deg,
    var(--accent) 40deg,
    #5B7CFF 70deg,
    var(--accent) 100deg,
    transparent 140deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: officeTrace 2.2s linear infinite;
  pointer-events: none;
}
.ostatus-slider.is-in-progress button.is-active {
  color: var(--accent);
}
.ostatus-slider button {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: calc(var(--r-md) - 2px);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.12s var(--ease-out);
}
.ostatus-slider button.is-active { color: #fff; }
.ostatus-slider.is-in-progress button.is-active { color: var(--accent); }
.ostatus-slider button:disabled:not(.is-active) { cursor: default; opacity: 0.45; }
.ostatus-slider button.is-active:disabled { cursor: default; }
.ostatus-slider.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ostatus-slider-thumb { transition: none; }
  .ostatus-slider.is-in-progress .ostatus-slider-thumb::after { animation: none; background: var(--accent); padding: 1.5px; }
}
.effort-fires { display: inline-flex; gap: 2px; margin-left: auto; align-items: center; color: #fff; opacity: 0.25; }
.effort-fires > * { display: block; flex-shrink: 0; }
.effort-opt { display: inline-flex; gap: 2px; align-items: center; color: #fff; }
.effort-opt > * { display: block; flex-shrink: 0; }
.segmented button.active .effort-opt { color: #fff; }
.review-actions { display: flex; gap: 6px; margin-top: 9px; }
.otask .review-actions .btn-primary {
  background: #fff;
  color: var(--accent);
  box-shadow: none;
  justify-content: center;
  text-align: center;
}
.otask .review-actions .btn-primary:hover {
  background: #fff;
  color: var(--accent-strong);
  box-shadow: none;
}
.otask .review-actions .btn-ghost {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}
.otask .review-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 700px) {
  .mgr-station { grid-template-columns: 1fr; }
}

/* Mobile Office: each desk group scrolls its member desks horizontally with
   momentum + snap, instead of stacking them down the page. Cards bleed to the
   screen edges (negative margin cancels the 16px content padding). */
@media (max-width: 900px) {
  .mgr-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -16px 22px;
    padding: 2px 16px 8px;
  }
  .mgr-grid::-webkit-scrollbar { display: none; }
  .mgr-grid > .mgr-block {
    scroll-snap-align: start;
    flex: 0 0 93.5%;
    min-width: 0;
  }
  .mgr-grid > .mgr-block:only-child { flex-basis: 100%; }

  .desk-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 2px 16px 8px;
  }
  .desk-grid::-webkit-scrollbar { display: none; }
  .desk-grid > .desk {
    scroll-snap-align: start;
    flex: 0 0 80%;
    min-width: 0;
  }
}

/* ============================================================
   Tracking (habit streaks)
   ============================================================ */
.track-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.track-card {
  position: relative; display: flex; flex-direction: column; min-height: 210px; padding: 20px;
  border-radius: var(--r-xl); border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(19, 19, 19, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: left; cursor: pointer; color: var(--text);
  transition: transform var(--dur) var(--ease), background var(--dur), border-color var(--dur), box-shadow var(--dur);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.track-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(19, 19, 19, 0.55);
}
.track-card:active { transform: scale(0.99); }
.track-grid.is-editing .track-card {
  cursor: grab;
  touch-action: none;
  animation: trackJiggle 0.28s ease-in-out infinite alternate;
}
.track-grid.is-editing .track-card:nth-child(2n) { animation-delay: -0.08s; }
.track-grid.is-editing .track-card:nth-child(3n) { animation-delay: -0.16s; }
.track-grid.is-editing .track-card:nth-child(4n) { animation-delay: -0.04s; }
.track-grid.is-editing .track-card:active,
.track-grid.is-editing .track-card.is-dragging { transform: none; }
.track-grid.is-dragging-active {
  touch-action: none;
  user-select: none;
}
.track-grid.is-dragging-active .track-card {
  animation: none !important;
  /* FLIP owns transform; keep other transitions quiet. */
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur) !important;
}
.track-card.is-dragging {
  z-index: 1;
  opacity: 0;
  cursor: grabbing;
  box-shadow: none;
  animation: none !important;
  border-color: transparent;
  background: transparent !important;
  pointer-events: none;
}
.track-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  margin: 0;
  pointer-events: none;
  touch-action: none;
  visibility: hidden;
  will-change: transform;
  transform: translate3d(-9999px, -9999px, 0);
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5));
}
.track-drag-ghost .track-card {
  width: 100%;
  height: auto;
  margin: 0;
  cursor: grabbing;
  animation: none !important;
  transition: none !important;
  box-shadow: none;
  border-color: var(--accent);
  transform: scale(1.045) rotate(1deg);
  pointer-events: none;
  touch-action: none;
}
.track-card.is-ghost {
  animation: none !important;
  pointer-events: none;
}
@keyframes trackJiggle {
  from { transform: rotate(-0.7deg); }
  to { transform: rotate(0.7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .track-grid.is-editing .track-card { animation: none; }
  .track-drag-ghost .track-card { transform: none; }
}
.track-save-btn {
  margin-left: auto;
  flex-shrink: 0;
}
.track-streak { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px; }
.track-days { font-size: 11px; letter-spacing: 0.14em; font-weight: 700; color: var(--text-dim); margin-top: 7px; }
.track-name { font-size: 23px; font-weight: 750; margin-top: auto; padding-top: 18px; line-height: 1.15; word-break: break-word; }
.track-week { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.track-days-row { display: flex; gap: 5px; flex-wrap: nowrap; }
.track-day { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.track-count { font-size: 15px; font-weight: 600; color: var(--text-dim); flex-shrink: 0; }
/* Streak detail popup — all-time stats + 365-day heatmap. */
.streak-stats { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.streak-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); padding: 16px; }
.streak-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; }
.streak-row .k { color: var(--text-muted); }
.streak-row .v { font-weight: 600; text-align: right; }
.streak-heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(12px, 1fr)); gap: 3px; margin-bottom: 12px; }
.streak-heat i { aspect-ratio: 1; border-radius: 3px; }
.track-check {
  position: absolute; top: 18px; right: 18px; width: 51px; height: 51px; border-radius: var(--r-md);
  display: grid; place-items: center; border: 2px solid var(--border-strong); background: transparent;
  color: var(--text-dim); cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur), border-color var(--dur), color var(--dur);
}
.track-check:hover { transform: scale(1.08); }
.track-check.done { border-color: transparent; color: #fff; }
.track-check svg {
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
/* Mobile / tablet: force a 2-up grid and let the day cells flex to fit the
   narrower card (they stay square via aspect-ratio, so the M–S strip never
   overflows regardless of phone width). */
@media (max-width: 900px) {
  /* Hide the vertical scrollbar track on the streaks tab. */
  .main:has(.track-content) {
    scrollbar-width: none;
  }
  .main:has(.track-content)::-webkit-scrollbar {
    display: none;
  }
  .track-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .track-card { padding: 13px; min-height: 143px; }
  .track-streak { font-size: 32px; }
  .track-days { font-size: 10px; margin-top: 4px; }
  .track-name { font-size: 18px; padding-top: 10px; }
  .track-check { width: 39px; height: 39px; top: 12px; right: 12px; border-radius: var(--r-sm); }
  .track-week { margin-top: 10px; gap: 6px; }
  .track-days-row { flex: 1; gap: 3px; min-width: 0; }
  .track-day { flex: 1; width: auto; height: auto; aspect-ratio: 1; min-width: 0; font-size: 11px; border-radius: 6px; }
  .track-count { font-size: 12px; }
}
@media (min-width: 901px) {
  .track-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}

/* ---------- Wildcards (gamified swipe deck) ---------- */
.wc-content { display: flex; flex-direction: column; min-height: 0; position: relative; }
.wc-top-right { margin-left: auto; }
.wc-stage {
  flex: 1; width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; padding: 14px 16px 0; overflow: hidden;
  min-height: 0;
  position: relative; z-index: 1;
}
.wc-seg {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
  /* Keep above the deck / empty state (cards use z-index up to 30 and are
     translated upward), otherwise taps on Sent never reach the control. */
  position: relative;
  z-index: 40;
  pointer-events: auto;
}
.wc-seg .segmented { width: 100%; max-width: 420px; position: relative; z-index: 1; }
.wc-seg .segmented button {
  touch-action: manipulation;
  cursor: pointer;
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 12px;
}

/* Empty incoming state — center in the space below the toggle */
.wc-empty {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-56px);
  position: relative;
  z-index: 1;
}
.wc-empty .empty { padding: 16px; }

/* Play area groups the deck + action buttons so they sit as one unit */
.wc-play {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 28px;
  padding: 0 0 40px;
  position: relative;
  z-index: 1;
}

/* Deck holds the stacked cards; peeks sit above the front card */
.wc-deck {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 490px; /* card ~448 + 3 × 14px peek */
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px;
  perspective: 1400px;
}

/* Swipe card — reference invite layout over glitch background art */
.wc-swipe {
  position: absolute;
  left: 0; right: 0;
  bottom: 4px;
  margin-inline: auto;
  width: min(340px, 90vw);
  aspect-ratio: 804 / 1024;
  height: auto;
  min-height: 0;
  display: flex; flex-direction: column;
  border-radius: var(--r-2xl);
  background-color: #071018;
  background-image: var(--wc-bg, url("/icons/wc-card-bg-0.png"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 0;
  box-shadow: 0 28px 56px -20px rgba(0, 0, 0, 0.75), 0 10px 24px rgba(7, 40, 70, 0.45);
  padding: 0; transform-style: preserve-3d;
  touch-action: none; user-select: none; cursor: grab; z-index: 10;
  will-change: transform;
  overflow: hidden;
  transform-origin: top center;
  color: #fff;
}
.wc-swipe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(0, 0, 0, 0.62) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.wc-swipe.dragging {
  cursor: grabbing;
  transition: none !important;
  will-change: transform;
}
.wc-swipe.settling { transition: transform 0.4s var(--ease-out), opacity 0.4s ease; }
.wc-swipe.flying { transition: transform 0.42s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.42s ease; }
.wc-swipe.behind {
  pointer-events: none;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65), 0 6px 16px rgba(7, 40, 70, 0.35);
}
/* Idle hint: one tilt pulse every 6s after the JS arm delay. */
.wc-swipe.wc-idle-nudge {
  transform-origin: center 88%;
  animation: wcIdleTilt 6s ease-in-out infinite;
}
@keyframes wcIdleTilt {
  /* Active wiggle in the first ~1.85s; rest of the 6s cycle is still. */
  0% { transform: rotate(0deg); }
  5% { transform: rotate(-6.5deg); }
  12% { transform: rotate(6.5deg); }
  20% { transform: rotate(-3.5deg); }
  26% { transform: rotate(2.5deg); }
  31%, 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wc-swipe.wc-idle-nudge { animation: none; }
}
.wc-swipe > * { position: relative; z-index: 2; }

/* Drag / commit fire rim — intensity via --wc-fire (0→1), speed via --wc-fire-speed */
.wc-swipe-ember {
  position: absolute !important;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 6 !important;
  opacity: calc(var(--wc-fire, 0) * 1);
  transition: opacity 0.1s linear;
  overflow: visible;
}
.wc-swipe.wc-fire-extinguish .wc-swipe-ember {
  opacity: 0 !important;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.wc-ember-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: calc(1.5px + (var(--wc-fire, 0) * 2.5px));
  background: conic-gradient(
    from var(--wc-ember-angle, 0deg),
    var(--wc-ember-a) 0deg,
    var(--wc-ember-b) 55deg,
    var(--wc-ember-c) 120deg,
    var(--wc-ember-a) 180deg,
    var(--wc-ember-b) 250deg,
    var(--wc-ember-c) 310deg,
    var(--wc-ember-a) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: wcEmberSpin var(--wc-fire-speed, 1s) linear infinite;
  filter: blur(0.2px) saturate(1.15);
  box-shadow:
    0 0 calc(10px + var(--wc-fire, 0) * 22px) var(--wc-ember-glow),
    0 0 calc(4px + var(--wc-fire, 0) * 10px) var(--wc-ember-glow-soft);
}
.wc-swipe.wc-fire-accept {
  --wc-ember-a: #93C5FD;
  --wc-ember-b: #38BDF8;
  --wc-ember-c: #1D4ED8;
  --wc-ember-glow: rgba(56, 189, 248, 0.65);
  --wc-ember-glow-soft: rgba(37, 99, 235, 0.4);
}
.wc-swipe.wc-fire-decline {
  --wc-ember-a: #FDBA74;
  --wc-ember-b: #F97316;
  --wc-ember-c: #DC2626;
  --wc-ember-glow: rgba(249, 115, 22, 0.7);
  --wc-ember-glow-soft: rgba(220, 38, 38, 0.45);
}
.wc-swipe.wc-fire-reschedule {
  --wc-ember-a: #FDE68A;
  --wc-ember-b: #F59E0B;
  --wc-ember-c: #D97706;
  --wc-ember-glow: rgba(245, 158, 11, 0.7);
  --wc-ember-glow-soft: rgba(217, 119, 6, 0.45);
}
.wc-ember-tongue {
  position: absolute;
  width: calc(14px + var(--wc-fire, 0) * 16px);
  height: calc(22px + var(--wc-fire, 0) * 28px);
  background: linear-gradient(to top, var(--wc-ember-c), var(--wc-ember-b) 45%, transparent);
  -webkit-mask: url("/icons/flame-streaks.png") center / contain no-repeat;
  mask: url("/icons/flame-streaks.png") center / contain no-repeat;
  opacity: calc(var(--wc-fire, 0) * 0.95);
  filter: drop-shadow(0 0 6px var(--wc-ember-glow));
  animation: wcTongueFlick calc(0.35s + (1 - var(--wc-fire, 0)) * 0.55s) ease-in-out infinite alternate;
  transform-origin: bottom center;
}
.wc-ember-tongue.t1 { left: 8%;  bottom: -6px; animation-delay: 0s; }
.wc-ember-tongue.t2 { left: 28%; bottom: -8px; animation-delay: 0.08s; width: calc(12px + var(--wc-fire, 0) * 12px); }
.wc-ember-tongue.t3 { left: 48%; bottom: -5px; animation-delay: 0.16s; }
.wc-ember-tongue.t4 { left: 68%; bottom: -9px; animation-delay: 0.04s; }
.wc-ember-tongue.t5 { left: 86%; bottom: -6px; animation-delay: 0.22s; }
.wc-ember-tongue.t6 { top: 18%; left: -8px; height: calc(18px + var(--wc-fire, 0) * 20px); width: calc(12px + var(--wc-fire, 0) * 12px); transform: rotate(-90deg); transform-origin: center; }
.wc-ember-tongue.t7 { top: 18%; right: -8px; left: auto; height: calc(18px + var(--wc-fire, 0) * 20px); width: calc(12px + var(--wc-fire, 0) * 12px); transform: rotate(90deg); transform-origin: center; }
.wc-ember-tongue.t8 { top: -8px; left: 40%; height: calc(16px + var(--wc-fire, 0) * 18px); animation-delay: 0.12s; }
.wc-swipe.wc-fire-ignite .wc-swipe-ember {
  opacity: 1;
  animation: wcIgnitePulse 0.42s var(--ease-out) both;
}
.wc-swipe.wc-fire-ignite .wc-ember-ring {
  animation:
    wcEmberSpin 0.28s linear infinite,
    wcIgniteRing 0.42s var(--ease-out) both;
}
.wc-swipe.wc-fire-ignite .wc-ember-tongue {
  opacity: 1;
  animation: wcTongueBurst 0.42s var(--ease-out) both;
}
@property --wc-ember-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes wcEmberSpin { to { --wc-ember-angle: 360deg; } }
@keyframes wcTongueFlick {
  from { transform: scaleY(0.85) translateY(2px); opacity: calc(var(--wc-fire, 0) * 0.7); }
  to { transform: scaleY(1.15) translateY(-2px); opacity: calc(var(--wc-fire, 0) * 1); }
}
.wc-ember-tongue.t6 { animation-name: wcTongueFlickSide; }
.wc-ember-tongue.t7 { animation-name: wcTongueFlickSide; }
@keyframes wcTongueFlickSide {
  from { transform: rotate(var(--side-rot, -90deg)) scaleY(0.85); }
  to { transform: rotate(var(--side-rot, -90deg)) scaleY(1.15); }
}
.wc-ember-tongue.t6 { --side-rot: -90deg; }
.wc-ember-tongue.t7 { --side-rot: 90deg; }
@keyframes wcIgnitePulse {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.45); }
  100% { filter: brightness(1.15); }
}
@keyframes wcIgniteRing {
  0% { padding: 2px; filter: brightness(1); }
  45% { padding: 5px; filter: brightness(1.5) saturate(1.3); }
  100% { padding: 3.5px; filter: brightness(1.2); }
}
@keyframes wcTongueBurst {
  0% { transform: scaleY(0.6); opacity: 0.5; }
  50% { transform: scaleY(1.45); opacity: 1; }
  100% { transform: scaleY(1.15); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-ember-ring { animation: none; }
  .wc-ember-tongue { animation: none; }
  .wc-swipe.wc-fire-ignite .wc-swipe-ember,
  .wc-swipe.wc-fire-ignite .wc-ember-ring,
  .wc-swipe.wc-fire-ignite .wc-ember-tongue { animation: none; }
}
/* Streaks flame motif — faint tile + randomly blinking sparks */
.wc-flame-pattern {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.wc-flame-pattern::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-mask-image: url("/icons/flame-streaks.png");
  mask-image: url("/icons/flame-streaks.png");
  -webkit-mask-size: 28px 28px;
  mask-size: 28px 28px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transform: rotate(-8deg);
  opacity: 0.352;
}
.wc-flame-spark {
  position: absolute;
  width: 34px;
  height: 34px;
  background-color: #c8d0dc;
  background-image:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(210, 218, 230, 0.55) 38%,
      rgba(140, 150, 168, 0.45) 68%,
      rgba(230, 236, 245, 0.7) 100%
    ),
    url("/icons/wc-metal-tile.png");
  background-size: auto, 28px 32px;
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, var(--flame-top, 1)) 0%, rgba(0, 0, 0, var(--flame-top, 1)) 45%, #000 58%, #000 100%),
    url("/icons/flame-streaks.png");
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, var(--flame-top, 1)) 0%, rgba(0, 0, 0, var(--flame-top, 1)) 45%, #000 58%, #000 100%),
    url("/icons/flame-streaks.png");
  -webkit-mask-size: 100% 100%, contain;
  mask-size: 100% 100%, contain;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0;
  animation: wcFlameBlink var(--blink-dur, 7.5s) ease-in-out var(--blink-delay, 0s) infinite;
  will-change: opacity, transform;
  filter: drop-shadow(0 0 4px rgba(200, 215, 255, 0.25));
  --spark-max: 1;
  --spark-mid: 0.75;
  --flame-top: 1;
}
.wc-flame-spark.s1  { left: 8%;  bottom: 8%;  --blink-dur: 7.2s; --blink-delay: 0s;    width: 38px; height: 38px; --spark-max: 0.98; --spark-mid: 0.76; --flame-top: 1; }
.wc-flame-spark.s2  { left: 38%; bottom: 4%;  --blink-dur: 8.0s; --blink-delay: 1.1s;  width: 28px; height: 28px; --spark-max: 0.98; --spark-mid: 0.76; --flame-top: 1; }
.wc-flame-spark.s3  { right: 10%; bottom: 14%; --blink-dur: 6.5s; --blink-delay: 2.2s;  width: 36px; height: 36px; --spark-max: 0.9;  --spark-mid: 0.67; --flame-top: 0.8; }
.wc-flame-spark.s4  { left: 18%; bottom: 34%; --blink-dur: 8.8s; --blink-delay: 0.5s;  width: 26px; height: 26px; --spark-max: 0.69; --spark-mid: 0.47; --flame-top: 0.65; }
.wc-flame-spark.s5  { right: 22%; bottom: 28%; --blink-dur: 7.0s; --blink-delay: 3.2s;  width: 32px; height: 32px; --spark-max: 0.74; --spark-mid: 0.51; --flame-top: 0.55; }
.wc-flame-spark.s6  { left: 52%; bottom: 42%; --blink-dur: 9.2s; --blink-delay: 1.7s;  width: 24px; height: 24px; --spark-max: 0.39; --spark-mid: 0.25; --flame-top: 0.4; }
/* Top 50% of card — big flames: soft top of glyph + lower peak opacity */
.wc-flame-spark.s7  { left: 72%; bottom: 52%; --blink-dur: 7.6s; --blink-delay: 4.0s;  width: 30px; height: 30px; --spark-max: 0.16; --spark-mid: 0.1;  --flame-top: 0.18; }
.wc-flame-spark.s8  { left: 6%;  bottom: 58%; --blink-dur: 8.4s; --blink-delay: 2.6s;  width: 22px; height: 22px; --spark-max: 0.14; --spark-mid: 0.08; --flame-top: 0.2; }
.wc-flame-spark.s9  { right: 14%; bottom: 68%; --blink-dur: 6.8s; --blink-delay: 1.4s;  width: 28px; height: 28px; --spark-max: 0.115; --spark-mid: 0.069; --flame-top: 0.14; }
.wc-flame-spark.s10 { left: 44%; bottom: 72%; --blink-dur: 9.0s; --blink-delay: 3.5s;  width: 26px; height: 26px; --spark-max: 0.098; --spark-mid: 0.058; --flame-top: 0.12; }
@keyframes wcFlameBlink {
  0%, 18%, 100% { opacity: 0; transform: scale(0.88); }
  28%, 42% { opacity: var(--spark-max); transform: scale(1); }
  50% { opacity: calc(var(--spark-max) * 0.22); transform: scale(0.96); }
  58%, 70% { opacity: var(--spark-mid); transform: scale(1.04); }
  80%, 90% { opacity: 0; transform: scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .wc-flame-spark { animation: none; opacity: calc(var(--spark-max) * 0.4); transform: none; }
  .wc-swipe::before { animation: none; }
}
/* Soft rim (overrides shared dashed/fade stroke from .wc-swipe::before above).
   Animate the conic angle — not element rotation — so the highlight travels
   along the outline instead of spinning the masked box through the interior. */
@property --wc-stroke-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.wc-swipe::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--wc-stroke-angle),
    rgba(255, 255, 255, 0.12) 0deg,
    rgba(255, 255, 255, 0.22) 40deg,
    rgba(255, 255, 255, 0.85) 68deg,
    #fff 78deg,
    rgba(255, 255, 255, 0.85) 88deg,
    rgba(255, 255, 255, 0.18) 130deg,
    rgba(255, 255, 255, 0.1) 200deg,
    rgba(255, 255, 255, 0.55) 245deg,
    rgba(255, 255, 255, 0.14) 290deg,
    rgba(255, 255, 255, 0.12) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  animation: wcStrokeDrift 12s linear infinite;
  opacity: 1;
  filter: none;
}
@keyframes wcStrokeDrift {
  to { --wc-stroke-angle: 360deg; }
}

.wc-swipe-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 15px; font-weight: 300; letter-spacing: 0.02em;
  color: #fff; flex-shrink: 0;
  pointer-events: none;
}
.wc-swipe-tag-reschedule {
  font-weight: 700;
  color: var(--warning);
}

.wc-swipe-people {
  display: flex; align-items: flex-start; justify-content: center; gap: 36px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
  background: transparent;
  pointer-events: none;
}
.wc-swipe-person {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 0;
}
.wc-swipe-person .avatar {
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.wc-swipe-uname {
  font-size: 14px; font-weight: 500; color: #fff;
  text-align: center; max-width: 96px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wc-swipe-body {
  position: relative;
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 22px; padding: 22px 26px 28px;
  background: transparent;
  border-top: 0;
  overflow: hidden;
  pointer-events: none;
}
.wc-swipe-title {
  font-size: 28px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; text-align: center;
  color: #fff; line-height: 1.15; margin: 0;
  max-width: 100%;
  word-break: break-word;
}
.wc-swipe-rows {
  display: flex; flex-direction: column; gap: 16px;
  align-self: center; width: max-content; max-width: 100%;
}
.wc-swipe-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 300; color: #fff;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.wc-swipe-row span { min-width: 0; }
.wc-swipe-row > svg {
  flex-shrink: 0;
  color: #fff;
}
.wc-swipe-row-loc {
  align-items: flex-start;
}
.wc-swipe-row-loc > svg { margin-top: 2px; }
.wc-swipe-row-loc span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}
.wc-swipe-orig {
  font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.7);
  text-align: center;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-top: -6px;
}

/* Legacy helpers still used on Sent rows */
.wc-swipe-mode { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.wc-mode-ic { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(59, 130, 246, 0.26); color: #93C5FD; }
.wc-avatars { display: inline-flex; flex-shrink: 0; }
.wc-avatars .avatar { width: 64px; height: 64px; font-size: 24px; border-radius: var(--r-md); border: 2px solid #16225C; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.wc-avatars .avatar:not(:first-child) { margin-left: -18px; }
.wc-arrow { color: #60A5FA; font-weight: 700; }

/* Side fades wash the whole Wildcards pane as the card is dragged */
.wc-side-fade {
  position: absolute; inset-block: 0; width: 50%;
  pointer-events: none; z-index: 25;
  transition: opacity 0.1s linear;
}
.wc-side-fade-decline {
  left: 0;
  background: linear-gradient(90deg,
    rgba(220, 38, 38, 0.48) 0%,
    rgba(239, 68, 68, 0.35) 38%,
    rgba(239, 68, 68, 0) 100%);
}
.wc-side-fade-accept {
  right: 0;
  background: linear-gradient(270deg,
    rgba(37, 59, 179, 0.38) 0%,
    rgba(59, 130, 246, 0.22) 45%,
    rgba(59, 130, 246, 0) 100%);
}
.wc-side-fade-reschedule {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 48%;
  background: linear-gradient(0deg,
    rgba(245, 158, 11, 0.48) 0%,
    rgba(245, 158, 11, 0.29) 36%,
    rgba(245, 158, 11, 0) 100%);
}

/* Desktop: let the card slide past the deck without a hard clip;
   wash covers the full glass card and matches its corner radius.
   Sent view keeps overflow clipped so the list can scroll inside the card. */
@media (min-width: 901px) {
  .main:has(.wc-content) {
    overflow: hidden;
    position: relative;
  }
  .content.wc-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .content.wc-content.is-deck {
    overflow: visible;
  }
  .main:has(.wc-content.is-deck) {
    overflow: visible;
  }
  .wc-stage {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .wc-content.is-deck .wc-stage,
  .wc-play,
  .wc-deck { overflow: visible; }
  .wc-play {
    /* Lift the deck + actions (half of the prior −36px nudge). */
    transform: translateY(-18px);
    padding-bottom: 16px;
  }
  .wc-sent {
    padding-bottom: 24px;
  }
  .wc-side-fade {
    top: calc(-1 * var(--header-h));
    bottom: 0;
    width: 50%;
  }
  .wc-side-fade-decline {
    border-radius: var(--r-2xl) 0 0 var(--r-2xl);
  }
  .wc-side-fade-accept {
    border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
  }
  .wc-side-fade-reschedule {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 42%;
    border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  }
}

/* Action buttons */
.wc-actions { display: flex; justify-content: center; gap: 28px; padding: 0; flex-shrink: 0; }
.wc-act {
  width: 62px; height: 62px; border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--surface); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease-out), background var(--dur), box-shadow var(--dur);
}
.wc-act svg { width: 28px; height: 28px; }
.wc-act.accept svg,
.wc-act.decline svg {
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
.wc-act:hover:not(:disabled) { transform: scale(1.12); }
.wc-act:active:not(:disabled) { transform: scale(0.9); }
.wc-act.accept { color: #fff; background: var(--accent); border-color: transparent; }
.wc-act.accept:hover:not(:disabled) { background: var(--accent-strong); color: #fff; }
.wc-act.decline { color: #fff; background: var(--danger); border-color: transparent; }
.wc-act.decline:hover:not(:disabled) { background: #dc2626; color: #fff; }
.wc-act.reschedule { color: #fff; background: var(--warning); border-color: transparent; }
.wc-act.reschedule:hover:not(:disabled) { background: #d97706; color: #fff; }
.wc-act.reschedule .icon-mask { width: 28px; height: 28px; }
.wc-offer-pill {
  margin-left: 8px; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(245, 158, 11, 0.22); color: #FBBF24;
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 800;
}
.wc-act:disabled { opacity: 0.5; pointer-events: none; }

/* Sent list — frosted containers matching Office `.otask` cards */
.wc-sent {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px calc(var(--nav-clear) + 90px);
  position: relative;
  z-index: 1;
}
.wc-sent-card {
  border: 0;
  border-radius: var(--r-md);
  background: rgba(37, 59, 179, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  padding: 10px 12px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background var(--dur), opacity var(--dur);
}
.wc-sent-card:hover { background: rgba(37, 59, 179, 0.32); }
.wc-sent-card.declined,
.wc-sent-card.cancelled { opacity: 0.55; }
.wc-sent-title {
  font-weight: 600; font-size: 14px; line-height: 1.3;
  word-break: break-word; color: #fff;
}
.wc-sent-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 9px; flex-wrap: wrap;
}
.wc-sent-mode {
  font-size: 11px; font-weight: 600;
  color: rgba(255, 255, 255, 0.55); white-space: nowrap;
}
.wc-sent-cancel {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 500;
  min-height: 28px; padding: 0 8px;
}
.wc-sent-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9) !important;
}
.wc-sent-detail {
  margin-top: 6px;
  font-size: 12px; font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wc-to-field { margin-bottom: 16px; }
.wc-to-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.wc-to-head > label:first-child {
  margin: 0;
  flex-shrink: 0;
}
.wc-everyone {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 650;
}
.wc-everyone:hover { color: var(--text); }
.wc-everyone-label { line-height: 1; }
.wc-everyone input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.wc-everyone-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-strong);
  color: transparent;
  background: transparent;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.wc-everyone-box.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.wc-everyone:focus-within .wc-everyone-box {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.wc-recipients { display: flex; flex-direction: column; gap: 8px; }
.wc-recipient-list-wrap {
  position: relative;
  max-height: 220px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.wc-recipient-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 28px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wc-recipient-list::-webkit-scrollbar { display: none; }
.wc-recipient-list-fade {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  z-index: 1;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: linear-gradient(
    to top,
    rgba(19, 19, 19, 0.95) 0%,
    rgba(19, 19, 19, 0.5) 42%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
}
.wc-recipient {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-deep); color: var(--text);
  text-align: left; cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
}
.wc-recipient:hover { border-color: var(--border-strong); background: var(--surface-2); }
.wc-recipient.is-selected {
  border-color: var(--accent);
  background: var(--accent-softer);
}
.wc-recipient:disabled { cursor: default; opacity: 1; }
.wc-recipient-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.wc-recipient-check {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1.5px solid var(--border-strong);
  color: transparent; background: transparent;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.wc-recipient-check.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.wc-sent-detail.muted { color: rgba(255, 255, 255, 0.48); font-weight: 500; }
.wc-badge {
  border: 0; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-xs);
  letter-spacing: 0; text-transform: none; cursor: default;
  background: #fff;
  color: var(--accent);
}
.wc-badge.pending,
.wc-badge.reschedule_proposed,
.wc-badge.accepted,
.wc-badge.declined,
.wc-badge.cancelled {
  background: #fff;
  color: var(--accent);
}

/* Bottom-nav pending dot */
.bn-item { position: relative; }
.bn-dot {
  position: absolute; top: 12px; right: 12px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); border: 2px solid rgba(24, 24, 27, 0.9);
}

@media (max-width: 900px) {
  .main:has(.wc-content) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .content.wc-content {
    flex: 1;
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
  .wc-top-right { padding-right: 8px; }
  .wc-stage {
    flex: 1;
    min-height: 0;
    padding: 8px 16px calc(var(--nav-clear) + 12px);
  }
  /* Sent list: drop stage bottom inset so the scrollport reaches the screen edge;
     nav/FAB clearance stays inside the list's own padding (under the fade). */
  .wc-stage:has(.wc-sent) {
    padding-bottom: 0;
  }
  .wc-sent {
    padding-bottom: calc(var(--nav-clear) + 110px);
  }
  /* Center the card + action buttons in the space below the toggle. */
  .wc-play {
    flex: 1;
    min-height: 0;
    justify-content: center;
    gap: 14px;
    padding: 0;
    /* Slight lift so the deck + actions clear the bottom nav. */
    transform: translateY(-22px);
  }
  .wc-deck {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: min(
      450px,
      calc(min(311px, 82.2vw) * (1024 / 804) + 40px),
      calc(100dvh - var(--mobile-header) - var(--nav-clear) - 210px)
    );
    max-height: none;
    padding-bottom: 0;
    overflow: visible;
  }
  .wc-swipe {
    top: 0;
    bottom: 0;
    margin-block: auto;
    min-height: 0;
    max-height: calc(100% - 36px);
    /* ~8.5% smaller than default (was −15%, now +7.5% from that). */
    width: min(311px, 82.2vw);
  }
  .wc-swipe-rows { gap: 9px; }
  .wc-swipe-row-loc span { line-height: 1.25; }
  .wc-actions {
    padding: 0;
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wc-act:hover:not(:disabled) { transform: none; }
}

/* ========== Docs ========== */
.docs-screen { display: flex; flex-direction: column; min-height: 0; }
/* Desktop HyperVault — flash confirmation in the top-right Save control. */
.docs-screen .topbar .btn.is-vault-notice {
  background: var(--success);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
  pointer-events: none;
  min-width: 9.5rem;
}
.docs-filters { padding: 22px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) {
  .docs-filters { padding-top: 8px; }
}
.docs-search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; min-height: 44px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
}
.docs-search svg { color: var(--text-dim); flex-shrink: 0; }
.docs-search .input {
  border: 0 !important; background: transparent !important;
  box-shadow: none !important; min-height: 40px; padding-left: 0;
}
.docs-search .docs-type-filter {
  flex: 0 0 auto;
  width: auto;
  max-width: 7.5rem;
  padding-right: 4px;
  color: var(--text-muted);
  font-size: 13px;
}
.vault-usage {
  display: flex; align-items: center; gap: 10px;
}
.vault-usage-bar {
  flex: 1; height: 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.vault-usage-bar > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

/* HyperVault upload progress — fixed bottom-right frosted glass (survives tab switches) */
.vault-upload-toast {
  position: fixed;
  z-index: 420;
  right: 18px;
  bottom: calc(18px + var(--safe-bottom));
  width: min(320px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-2xl);
  border: 0.5px solid rgba(255, 255, 255, 0.09);
  background: rgba(24, 24, 27, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: var(--text);
  pointer-events: none;
  animation: vaultUploadIn var(--dur) var(--ease-out);
}
.vault-upload-toast.is-success {
  align-items: center;
}
@keyframes vaultUploadIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.vault-upload-toast-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-softer);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.vault-upload-toast-icon.is-success {
  background: rgba(16, 185, 129, 0.16);
  color: var(--success);
}
.vault-upload-toast-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vault-upload-toast-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.vault-upload-toast-top h3,
.vault-upload-toast-success-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.vault-upload-toast-success-title {
  color: var(--success);
}
.vault-upload-toast-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.vault-upload-toast-name {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.vault-upload-toast-count {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}
.vault-upload-bar {
  width: 100%;
  height: 6px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.vault-upload-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.18s var(--ease-out);
}
.vault-upload-toast-eta {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .vault-upload-toast {
    right: 14px;
    bottom: calc(var(--nav-clear) + 88px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vault-upload-toast { animation: none; }
  .vault-upload-bar > span { transition: none; }
}

.docs-file-ic { background: rgba(255,255,255,0.06) !important; color: var(--text-muted) !important; }
.vault-preview {
  min-height: 240px; display: flex; align-items: center; justify-content: center;
}
.vault-preview img,
.vault-preview video,
.vault-preview-video {
  width: 100%;
  max-width: 100%;
  max-height: min(70vh, 560px);
  border-radius: var(--r-md);
  background: #000;
  object-fit: contain;
}
.vault-preview-video-wrap {
  position: relative;
  width: 100%;
  z-index: 2;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.vault-preview-video {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  display: block;
  touch-action: manipulation;
}
.vault-preview-play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.28);
  border-radius: var(--r-md);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.vault-preview-play-icon {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}
.vault-preview-video-error {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
/* backdrop-filter on the sheet breaks iOS video — opaque stand-in on mobile only.
   Desktop keeps real frosted glass for file (and video) previews. */
@media (max-width: 900px) {
  .sheet.vault-preview-sheet.has-video-preview {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(18, 18, 20, 0.94);
  }
  .sheet.vault-preview-sheet.has-video-preview,
  .sheet.vault-preview-sheet.has-video-preview .sheet-body,
  .sheet.vault-preview-sheet.has-video-preview .sheet-head,
  .sheet.vault-preview-sheet.has-video-preview .sheet-foot {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
}
/* sheet-body defaults to touch-action: pan-y which steals taps from video controls. */
.sheet.vault-preview-sheet.has-video-preview .sheet-body {
  touch-action: manipulation;
  overflow-x: hidden;
  overflow-y: auto;
}
.vault-preview iframe {
  width: 100%; min-height: min(70vh, 560px); border: 0; border-radius: var(--r-md);
  background: var(--bg-deep);
}
.vault-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.vault-preview-action {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  padding: 8px 6px;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.vault-preview-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vault-preview-download {
  flex: 1 1 100%;
  justify-content: center;
  min-height: var(--tap);
  text-decoration: none;
}
.sheet.vault-preview-sheet .sheet-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
@media (max-width: 900px) {
  .sheet.vault-preview-sheet {
    padding-bottom: 0;
  }
  .sheet.vault-preview-sheet .sheet-foot {
    padding: 12px 14px 40px;
  }
  .vault-preview img,
  .vault-preview video {
    max-height: min(52vh, 420px);
  }
  .vault-preview iframe {
    min-height: min(48vh, 380px);
  }
}
@media (min-width: 901px) {
  /* Desktop HyperVault file preview — inherits soft-frost glass + outside dim. */
  .sheet.vault-preview-sheet.soft-frost-sheet {
    max-width: 640px;
  }
  .vault-preview-actions {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .vault-preview-action {
    flex: 0 0 auto;
    flex-direction: row;
    padding: 0 12px;
    font-size: 13px;
    gap: 6px;
  }
  .vault-preview-download {
    flex: 1 1 auto;
    width: auto;
  }
}
.docs-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px calc(var(--nav-clear) + 24px); }
.docs-list .docs-row {
  text-align: left;
  width: 100%;
  gap: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(19, 19, 19, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform var(--dur) var(--ease), background var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.docs-list .docs-row::before {
  display: none;
}
.docs-list .docs-row:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(19, 19, 19, 0.55);
}
.docs-list .docs-row:active {
  transform: scale(0.99);
}
.docs-list.is-editing .docs-row {
  animation: docsJiggle 0.28s ease-in-out infinite alternate;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.docs-list.is-editing .docs-row:nth-child(2n) { animation-delay: -0.08s; }
.docs-list.is-editing .docs-row:nth-child(3n) { animation-delay: -0.16s; }
.docs-list.is-editing .docs-row:nth-child(4n) { animation-delay: -0.04s; }
.docs-list.is-editing .docs-row:active {
  transform: none;
}
.docs-list.is-editing .docs-row-delete {
  width: 40px;
  height: 40px;
  color: var(--danger);
  background: var(--danger-soft);
}
/* 60% milder than trackJiggle (±0.7deg → ±0.28deg) */
@keyframes docsJiggle {
  from { transform: rotate(-0.28deg); }
  to { transform: rotate(0.28deg); }
}
@media (prefers-reduced-motion: reduce) {
  .docs-list.is-editing .docs-row { animation: none; }
}
.docs-list .docs-row > * {
  position: relative;
  z-index: 1;
}
.docs-row-ic {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--accent-softer); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.docs-row-title { font-weight: 650; font-size: 15px; }
.docs-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.docs-move-btn {
  flex-shrink: 0;
  color: var(--text-muted);
}
.docs-row-delete {
  flex-shrink: 0;
  color: var(--danger);
}
.docs-row-delete:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.docs-editor-screen { padding: 0 !important; position: relative; }
.docs-editor-screen .docs-editor-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  z-index: 20;
  pointer-events: none;
}
/* Desktop: fill the glass card so the fade pins to the card bottom, not mid-content. */
@media (min-width: 901px) {
  .main:has(.docs-editor-screen) {
    display: flex;
    flex-direction: column;
  }
  .docs-editor-screen {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .docs-editor-screen .docs-editor-bar {
    position: relative;
    top: auto;
    flex-shrink: 0;
  }
  .docs-editor-screen .docs-editor-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  /* Toolbar stays in flow under the title bar; surface scrolls underneath. */
  .docs-editor-screen .doc-toolbar {
    position: relative;
    top: auto;
    flex-shrink: 0;
    z-index: 4;
  }
  .docs-editor-screen .docs-editor-fade {
    border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  }
}
@media (max-width: 900px) {
  body.docs-doc-open .docs-editor-fade {
    position: fixed;
    z-index: 20;
  }
}
.docs-editor-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(16px);
}
.docs-editor-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.docs-editor-bar .btn-icon.is-active {
  color: var(--text);
  background: var(--accent-soft);
}
.doc-title-input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--text); font-size: 16px; font-weight: 700;
  letter-spacing: -0.02em; outline: none; min-height: 40px;
}
.doc-title-input:disabled { opacity: 0.7; }
.doc-save-pill {
  font-size: 11px; font-weight: 650; color: var(--text-dim);
  padding: 4px 8px; border-radius: var(--r-xs);
  background: rgba(255,255,255,0.04); white-space: nowrap;
}
.doc-save-pill.is-error { color: var(--danger); background: var(--danger-soft); }

.docs-editor-layout {
  display: flex; flex: 1; min-height: 0; gap: 0;
}
.doc-editor {
  flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0;
}
.doc-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  margin: 10px 12px 0; padding: 6px; position: sticky; top: 58px; z-index: 4;
  background: var(--surface);
  border-radius: var(--r-md);
}
.doc-tb-btn {
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 750; cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.doc-tb-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.doc-tb-btn.is-active { background: var(--accent-soft); color: var(--text); }
.doc-tb-btn:disabled { opacity: 0.4; cursor: default; }
.doc-tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

.doc-editor-surface { flex: 1; min-height: 0; overflow: auto; }
.doc-editor-surface .tiptap,
.doc-prose {
  outline: none; min-height: 60vh;
  padding: 18px 20px calc(var(--nav-clear) + 48px);
  max-width: 760px; margin: 0 auto;
  color: var(--text); font-size: 16px; line-height: 1.65;
}
.doc-prose p { margin: 0 0 0.85em; }
.doc-prose h1 { font-size: 1.85rem; font-weight: 750; letter-spacing: -0.03em; margin: 1.2em 0 0.45em; line-height: 1.2; }
.doc-prose h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 1.1em 0 0.4em; line-height: 1.25; }
.doc-prose h3 { font-size: 1.15rem; font-weight: 700; margin: 1em 0 0.35em; }
.doc-prose ul, .doc-prose ol { padding-left: 1.35em; margin: 0 0 0.85em; }
.doc-prose li { margin: 0.2em 0; }
.doc-prose blockquote {
  margin: 0 0 0.85em; padding: 8px 14px;
  border-left: 3px solid var(--accent);
  color: var(--text-muted); background: rgba(255,255,255,0.03);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.doc-prose pre {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px; overflow-x: auto;
  font-size: 13px; line-height: 1.5; margin: 0 0 0.85em;
}
.doc-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.doc-prose hr { border: 0; border-top: 1px solid var(--border-strong); margin: 1.4em 0; }
.doc-prose .doc-link { color: #93A4FF; text-decoration: underline; text-underline-offset: 2px; }
.doc-prose .doc-image { max-width: 100%; border-radius: var(--r-md); margin: 0.6em 0; }
.doc-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; overflow: hidden; border-radius: var(--r-sm); }
.doc-prose th, .doc-prose td {
  border: 1px solid var(--border-strong); padding: 8px 10px;
  vertical-align: top; min-width: 80px;
}
.doc-prose th { background: rgba(255,255,255,0.05); font-weight: 700; text-align: left; }
.doc-prose ul[data-type="taskList"] { list-style: none; padding-left: 0; }
.doc-prose ul[data-type="taskList"] li {
  display: flex; align-items: flex-start; gap: 10px;
}
.doc-prose ul[data-type="taskList"] li > label { margin-top: 4px; }
.doc-prose ul[data-type="taskList"] input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent);
}
.doc-prose .doc-mention {
  background: var(--accent-soft); color: #c5ceff;
  border-radius: 6px; padding: 1px 6px; font-weight: 650;
  cursor: pointer; white-space: nowrap;
}
/* Only show the writing hint when the whole document is empty. */
.doc-prose .is-editor-empty::before {
  color: var(--text-dim); content: attr(data-placeholder); float: left; height: 0; pointer-events: none;
}
.doc-prose .ProseMirror-selectednode { outline: 2px solid var(--accent); }

.doc-editor.is-focus .doc-toolbar { opacity: 0; pointer-events: none; height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; }
.docs-editor-screen.is-focus .docs-editor-bar > :not(.doc-exit-focus-bar) {
  opacity: 0.35;
  transition: opacity var(--dur);
}
.docs-editor-screen.is-focus .docs-editor-bar:hover > :not(.doc-exit-focus-bar),
.docs-editor-screen.is-focus .docs-editor-bar:focus-within > :not(.doc-exit-focus-bar) {
  opacity: 1;
}
.docs-editor-screen.is-focus .doc-exit-focus-bar {
  opacity: 1;
}
.doc-exit-focus {
  position: sticky;
  top: 12px;
  align-self: center;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--elevated);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.doc-exit-focus:hover { background: var(--surface-2); }
.doc-exit-focus svg { flex-shrink: 0; }
.doc-exit-focus-bar {
  flex-shrink: 0;
}
/* Desktop: Exit focus lives in the editor bar — hide the floating control. */
@media (min-width: 901px) {
  .doc-exit-focus { display: none; }
}
/* Mobile: Exit Focus mode lives in the editor bar (top right) — hide the floating control. */
@media (max-width: 900px) {
  .doc-exit-focus { display: none !important; }
  .docs-editor-screen.is-focus .doc-exit-focus-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.doc-mention-pop {
  width: min(300px, calc(100vw - 24px));
  max-height: 280px; overflow: auto;
  background: var(--elevated); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.doc-mention-group { margin-bottom: 4px; }
.doc-mention-group-label {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 4px; font-size: 11px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em;
}
.doc-mention-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
}
.doc-mention-item:hover, .doc-mention-item.is-active { background: rgba(255,255,255,0.06); }
.doc-mention-ic {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
}

.doc-comments {
  width: min(300px, 38vw); flex-shrink: 0;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(0,0,0,0.25);
}
.doc-comments-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 10px;
}
.doc-comments-head .btn-icon { margin-left: auto; }
.doc-comments-list { flex: 1; overflow: auto; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.doc-comments-list.is-sheet { padding: 0; max-height: none; }
.doc-comment { display: flex; gap: 10px; align-items: flex-start; }
.doc-comments-compose { padding: 12px 14px calc(var(--safe-bottom) + 12px); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; position: relative; }
.doc-comments-compose.is-sheet {
  padding: 0;
  border-top: 0;
  width: 100%;
}
.doc-comments-input.is-auto {
  min-height: 54px;
  max-height: 220px;
  overflow-y: auto;
}
.doc-comments-sheet .sheet-body {
  display: flex;
  flex-direction: column;
  min-height: min(52vh, 420px);
}
.doc-comments-sheet .sheet-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
@media (max-width: 900px) {
  .sheet.doc-comments-sheet {
    padding-bottom: 0;
  }
  .sheet.doc-comments-sheet .sheet-foot {
    padding: 12px 14px 40px;
  }
}
.docs-editor-bar .doc-exit-focus-bar {
  margin-left: auto;
}
.doc-comment-tag {
  display: inline; font-weight: 650; color: #c5ceff;
  background: var(--accent-soft); border-radius: 5px; padding: 0 5px;
}
.doc-comment-tag.is-task { color: #fcd34d; background: rgba(245, 158, 11, 0.18); }
.doc-share-row { gap: 10px; }
.doc-backlinks {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 16px calc(var(--nav-clear) + 12px);
  border-top: 1px solid var(--border);
}
.doc-backlink {
  border: 0; background: var(--accent-softer); color: var(--text);
  border-radius: var(--r-xs); padding: 4px 10px; font-size: 12px; font-weight: 650; cursor: pointer;
}
.doc-backlink:hover { background: var(--accent-soft); }

@media (max-width: 900px) {
  /* Desktop sidebar comments → mobile uses Sheet instead */
  .doc-comments {
    display: none;
  }
  .docs-editor-bar { padding-right: 6px; gap: 6px; }
  .docs-editor-actions {
    gap: 0;
    margin-right: -2px;
  }
  .docs-editor-actions .btn-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  /* Hide desktop Share label button on mobile (Share is icon-only in actions) */
  .docs-editor-bar .btn-soft { display: none; }
  .docs-editor-bar .doc-save-pill {
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .doc-prose { padding-left: 16px; padding-right: 16px; font-size: 16px; }

  /* Hide mobile nav on Notifications / Team / Profile subpages */
  body.mobile-subpage .bottomnav,
  body.mobile-subpage .fab-dock.mobile {
    display: none !important;
  }
  body.mobile-subpage .content {
    padding-bottom: calc(var(--safe-bottom) + 32px);
  }

  /* Hide mobile nav while reading/editing a document */
  body.docs-doc-open .bottomnav,
  body.docs-doc-open .fab-dock.mobile {
    display: none !important;
  }
  /* Match status-bar safe-area strip to editor chrome (override the global #181818 fill) */
  body.docs-doc-open::before {
    background: #0a0a0a;
  }
  /* Darken the aurora background so editor text stays readable */
  body.docs-doc-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.30);
  }
  body.docs-doc-open .app {
    position: relative;
    z-index: 1;
  }
  /*
    Title-bar top inset:
    - Standalone PWA needs the FULL notch safe-area (black-translucent status bar).
    - Mobile browser can use the tighter browser inset (Safari already clears the notch).
    Never apply the browser inset while standalone — that tucks the back/title/actions
    under the status bar and leaves only the formatting toolbar visible.
  */
  body.docs-doc-open {
    --docs-editor-inset: var(--safe-top);
    --docs-editor-bar-h: 52px;
  }
  html.is-standalone body.docs-doc-open {
    --docs-editor-inset: env(safe-area-inset-top, 0px);
    --docs-editor-bar-h: 52px;
  }
  @media (display-mode: standalone), (display-mode: fullscreen) {
    body.docs-doc-open {
      --docs-editor-inset: env(safe-area-inset-top, 0px);
      --docs-editor-bar-h: 52px;
    }
  }
  html.is-browser body.docs-doc-open {
    --docs-editor-inset: var(--browser-top-inset, 0px);
    --docs-editor-bar-h: 40px;
  }
  @media (display-mode: browser), (display-mode: minimal-ui) {
    html:not(.is-standalone) body.docs-doc-open {
      --docs-editor-inset: var(--browser-top-inset, 0px);
      --docs-editor-bar-h: 40px;
    }
  }
  /* Editor owns chrome; hide main scroll so iOS fixed title/toolbar stay pinned. */
  body.docs-doc-open .main {
    padding-top: 0;
    overflow: hidden;
  }
  body.docs-doc-open .docs-editor-screen {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* Pin title bar to the physical top of the screen (under the notch) */
  body.docs-doc-open .docs-editor-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 36;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: calc(var(--docs-editor-inset) + var(--docs-editor-bar-h));
    padding: calc(var(--docs-editor-inset) + 6px) 8px 6px;
    background: #0a0a0a;
    border-bottom: 1px solid var(--border);
  }
  body.docs-doc-open .docs-editor-bar .doc-title-input {
    min-height: 0;
    height: 36px;
    font-size: 15px;
  }
  body.docs-doc-open .docs-editor-bar .btn-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  /* Single-row formatting toolbar — scroll sideways instead of wrapping over prose */
  body.docs-doc-open .doc-toolbar {
    position: fixed;
    top: calc(var(--docs-editor-inset) + var(--docs-editor-bar-h));
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px 10px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    z-index: 35;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    background: rgba(19, 19, 19, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  body.docs-doc-open .doc-toolbar::-webkit-scrollbar { display: none; }
  body.docs-doc-open .doc-tb-btn {
    flex: 0 0 auto;
    min-width: 40px;
    height: 40px;
  }
  body.docs-doc-open .doc-tb-sep { flex: 0 0 auto; }
  body.docs-doc-open .docs-editor-layout {
    padding-top: calc(var(--docs-editor-inset) + var(--docs-editor-bar-h) + 52px);
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.docs-doc-open .docs-editor-screen.is-focus .docs-editor-layout {
    padding-top: calc(var(--docs-editor-inset) + var(--docs-editor-bar-h));
  }
  body.docs-doc-open .docs-editor-screen.is-focus .doc-toolbar {
    display: none;
  }
  body.docs-doc-open .doc-prose {
    padding-bottom: calc(var(--safe-bottom) + 40px);
  }
  body.docs-doc-open .doc-exit-focus {
    top: calc(var(--safe-top) + 64px);
  }
  body.docs-doc-open .doc-backlinks {
    padding-bottom: calc(var(--safe-bottom) + 16px);
  }
}

/* Docs share invite */
.doc-share-invite { margin-bottom: 4px; }
.doc-share-invite-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
}
.doc-share-search-ic { color: var(--text-dim); flex-shrink: 0; margin-left: 2px; }
.doc-share-search {
  flex: 1; min-width: 0; border: 0 !important; background: transparent !important;
  box-shadow: none !important; min-height: 40px; padding-left: 0;
}
.doc-share-perm {
  width: auto; min-width: 118px; max-width: 148px;
  min-height: 40px; padding: 6px 8px; font-size: 12px; font-weight: 650;
  border-radius: var(--r-sm);
}
.doc-share-suggest-wrap {
  position: relative;
  margin-top: 6px;
  max-height: 220px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.doc-share-suggest {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 220px; overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 28px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.doc-share-suggest::-webkit-scrollbar { display: none; }
.doc-share-suggest-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
}
.doc-share-suggest-item:hover { background: rgba(255,255,255,0.06); }
.doc-share-suggest-item:disabled { opacity: 0.5; cursor: default; }
.doc-share-team-ic {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--accent-softer); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.docs-filters .segmented.fill { width: 100%; }
.docs-filters .segmented.fill button { font-size: 12px; padding: 8px 6px; }
@media (max-width: 420px) {
  .docs-filters .segmented.fill button { font-size: 11px; letter-spacing: -0.01em; }
}

.docs-folder-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 10px;
}
.docs-folder-bar-title { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; }
.docs-folder-ic { background: var(--accent-softer) !important; color: var(--accent) !important; }
.docs-section-label {
  margin: 8px 4px 2px; font-size: 11px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em;
}
.docs-move-btn:hover { color: var(--text); }


/* HyperVault copy-link share */
.doc-share-link {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: 4px;
}
.doc-share-link-head {
  display: flex; align-items: flex-start; gap: 10px;
}
.doc-share-link-ic {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--accent-softer); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.doc-share-link .segmented { width: 100%; }

.share-landing {
  min-height: var(--app-height, 100dvh);
  padding: calc(var(--safe-top) + 20px) 16px calc(var(--safe-bottom) + 24px);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  box-sizing: border-box;
}
.share-landing-top {
  width: 100%; max-width: 720px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.share-landing-brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 15px;
}
.share-landing-mark {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-accent);
}
.share-landing-card {
  width: 100%; max-width: 560px;
  background: var(--surface);
  border-radius: var(--r-2xl);
  padding: 22px 20px 20px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 18px;
}
.share-landing-card.is-wide { max-width: 820px; }
.share-landing-meta {
  display: flex; align-items: flex-start; gap: 12px;
}
.share-landing-kind {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--accent-softer); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.share-landing-title {
  margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25;
}
.share-landing-title-input {
  font-size: 22px; font-weight: 750; letter-spacing: -0.02em;
  padding: 6px 10px; min-height: 44px;
}
.share-landing-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.share-landing-save { margin-left: 4px; }
.share-landing-doc {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin: 0 -4px;
}
.share-landing-doc .doc-editor-loading,
.share-landing-doc .doc-prose {
  min-height: 180px;
}
.share-landing-file-hint {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 28px 12px 12px;
  color: var(--text-dim);
}
@media (max-width: 900px) {
  .share-landing-card { padding: 18px 16px; border-radius: var(--r-xl); }
  .share-landing-title, .share-landing-title-input { font-size: 19px; }
}


/* Shared-link guest preview — centered frosted signup card + demo unlock */
.share-signup-banner {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  padding: 20px 20px 18px;
  border-radius: var(--r-2xl);
  background: rgba(24, 24, 27, 0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  pointer-events: auto;
}
.share-signup-banner-copy {
  display: flex; flex-direction: column; gap: 6px;
  text-align: center;
}
.share-signup-banner-title {
  font-size: 17px; font-weight: 750; letter-spacing: -0.02em;
  color: var(--text); line-height: 1.3;
}
.share-signup-banner-sub {
  font-size: 13px; color: var(--text-muted); line-height: 1.4;
}
.share-signup-banner .btn {
  width: 100%;
  justify-content: center;
}
.share-demo-gate {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px; padding: 6px 4px 8px;
}
.share-demo-gate-mark {
  width: 56px; height: 56px; border-radius: var(--r-xl);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.share-demo-gate-mark img {
  display: block;
  width: 44px;
  height: auto;
  object-fit: contain;
  /* Drop the asset’s black plate over the frosted sheet. */
  mix-blend-mode: screen;
}
.share-demo-gate-title {
  margin: 0; font-size: 20px; font-weight: 750;
  letter-spacing: -0.025em; line-height: 1.3; color: var(--text);
}
.share-demo-gate-body {
  margin: 0; font-size: 14px; line-height: 1.45; max-width: 34ch;
}
.sheet.share-demo-gate-sheet,
.sheet.soft-frost-sheet {
  /* Glass samples the page — overlay must stay fully opaque (opacity:1) and
     transparent-filled so it isn't a backdrop root that isolates the blur. */
  background: rgba(24, 24, 27, 0.52);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  /* Allow the 100vmax dim scrim; .sheet-body still owns scrolling. */
  overflow: visible;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    /* Dim outside the container without painting over the glass backdrop. */
    0 0 0 100vmax rgba(5, 9, 18, 0.5);
}
.sheet.share-demo-gate-sheet::before,
.sheet.soft-frost-sheet::before {
  display: none;
}
/* Transparent click-catcher. Never animate opacity here — an ancestor with
   opacity < 1 (or an opacity animation) makes child backdrop-filter a no-op. */
.overlay:has(.soft-frost-sheet),
.overlay:has(.share-demo-gate-sheet) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  animation: none;
}
.overlay:has(.soft-frost-sheet).closing,
.overlay:has(.share-demo-gate-sheet).closing {
  animation: none;
}
/* Desktop: open with scale only — don't tween opacity on the glass element. */
@media (min-width: 901px) {
  .sheet.soft-frost-sheet,
  .sheet.share-demo-gate-sheet {
    opacity: 1;
    transform: translateY(0) scale(0.96);
    animation: softFrostModalIn var(--dur) var(--ease-out) forwards;
  }
  .overlay.closing .sheet.soft-frost-sheet,
  .overlay.closing .sheet.share-demo-gate-sheet {
    animation: softFrostModalOut 0.18s var(--ease) forwards;
  }
}
@keyframes softFrostModalIn {
  to { transform: translateY(0) scale(1); }
}
@keyframes softFrostModalOut {
  to { transform: translateY(0) scale(0.96); opacity: 0; }
}
/* Soft, smooth bottom-sheet rise on mobile (sheet only — not the overlay). */
@media (max-width: 900px) {
  .sheet.soft-frost-sheet {
    animation: softSheetUp 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .overlay.closing .sheet.soft-frost-sheet {
    animation: softSheetDown 0.36s cubic-bezier(0.33, 0, 0.2, 1) forwards;
  }
  /* Tall creators (event / task) open to ~75% of the viewport. */
  .sheet.fullscreen.soft-frost-sheet {
    height: 75dvh;
    max-height: calc(75dvh - var(--kb));
  }
}
@keyframes softSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes softSheetDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
.sheet.share-demo-gate-sheet .sheet-head,
.sheet.soft-frost-sheet .sheet-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: transparent;
}
.sheet.share-demo-gate-sheet .sheet-body,
.sheet.soft-frost-sheet .sheet-body {
  background: transparent;
}
.sheet.share-demo-gate-sheet .sheet-foot,
.sheet.soft-frost-sheet .sheet-foot {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: transparent;
}
.sheet.share-demo-gate-sheet .sheet-foot {
  align-items: center;
  justify-content: center;
  /* Centered modal — equal padding so the CTA isn’t shifted by safe-area. */
  padding: 14px 18px;
}
.sheet.soft-frost-sheet .list-row {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
}
/* HyperVault Create — Document / Folder rows match notify sheet frost cells. */
.sheet.vault-create-sheet .create-choice {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  box-shadow: none;
  transform: none;
}
.sheet.vault-create-sheet .create-choice:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  transform: none;
  z-index: auto;
}
.sheet.vault-create-sheet .create-choice .text-muted,
.sheet.vault-create-sheet .create-choice .small.text-muted {
  color: var(--text-muted);
}
.sheet.vault-create-sheet .create-choice .choice-ic {
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.sheet.vault-create-sheet .create-choice::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), transparent);
}
.sheet.vault-create-sheet .create-choice:hover::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), transparent);
}
@media (max-width: 900px) {
  .app.has-share-signup-banner {
    --share-signup-banner-h: 52px;
  }
  .share-signup-banner {
    top: var(--mobile-header);
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    min-height: var(--share-signup-banner-h);
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  .share-signup-banner-copy {
    text-align: left;
    flex: 1;
    min-width: 0;
    gap: 0;
  }
  .share-signup-banner .btn {
    width: auto;
    flex-shrink: 0;
  }
  .app.has-share-signup-banner .main {
    padding-top: calc(var(--mobile-header) + var(--share-signup-banner-h));
  }
  .share-signup-banner.is-docs-tab {
    display: none !important;
  }
  .share-signup-banner-title { font-size: 14.5px; }
  .share-demo-gate-title { font-size: 17px; }
  .share-demo-gate-body { font-size: 13px; max-width: 28ch; }
}
@media (min-width: 901px) {
  .share-signup-banner {
    /* Nudge optical center in the main column (past the sidebar). */
    left: calc(50% + (var(--sidebar-w) / 2));
  }
}