/* ProjectFlow — ultra-minimal, clean white / Google-like design system. */

:root {
  color-scheme: light;          /* keep native scrollbars + controls light in light mode (else the OS dark pref bleeds in) */
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #f1f3f4;
  --text: #202124;
  --text-2: #5f6368;
  --text-3: #80868b;
  --border: #e8eaed;
  --border-strong: #dadce0;
  --accent: #1a73e8;
  --accent-hover: #1b66c9;
  --accent-weak: #e8f0fe;
  --accent-solid: var(--accent);          /* filled-control bg (buttons); presets override */
  --accent-solid-hover: var(--accent-hover);
  --danger: #d93025;
  --green: #1e8e3e;
  --orange: #e8710a;
  --radius: 5px;
  --radius-sm: 4px;
  --radius-pill: 5px;
  --shadow-1: 0 1px 2px rgba(60, 64, 67, 0.16), 0 1px 3px 1px rgba(60, 64, 67, 0.06);
  --shadow-2: 0 1px 3px rgba(60, 64, 67, 0.18), 0 4px 8px 3px rgba(60, 64, 67, 0.1);
  --shadow-pop: 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.3);
  --font: "Google Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --sidebar-w: 248px;
  --topbar-h: 60px;
}

/* ---------- Dark mode (matches the Fit-CRM / Attribution palette: near-black + violet) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0c;
  --surface: #15151a;
  --surface-2: #20202a;
  --text: #ededf0;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --border: #25252d;
  --border-strong: #34343e;
  --accent: #a78bfa;
  --accent-hover: #c4b5fd;
  --accent-weak: rgba(167, 139, 250, 0.14);
  --accent-solid: #8b5cf6;    /* solid violet for filled controls (white text stays legible) */
  --accent-solid-hover: #7c3aed;
  --danger: #fb923c;          /* CRM convention: orange, no red */
  --green: #4ade80;
  --orange: #fbbf24;
  --shadow-1: 0 1px 0 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -14px rgba(0, 0, 0, 0.7);
  --shadow-2: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, 0.85);
}
/* Solid accent (not the light text-accent) for filled controls, so white text stays legible.
   Driven by --accent-solid so the Appearance presets recolor buttons too. */
:root[data-theme="dark"] .btn-primary { background: var(--accent-solid); border-color: var(--accent-solid); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); }
:root[data-theme="dark"] .project-pill .pill-unread { background: var(--accent-solid); }

/* ---------- Appearance presets (Settings → Appearance; saved per-device in localStorage) ----------
   Accent presets recolor links/icons (--accent), the weak tint (--accent-weak) and filled buttons
   (--accent-solid). Tuned for high contrast on the dark background. They apply in any theme but are
   dark-first (the app defaults to dark). 'violet' is the default and needs no attribute. */
:root[data-accent="neon"] {
  --accent: #39ff14; --accent-hover: #6dff5a; --accent-weak: rgba(57, 255, 20, 0.13);
  --accent-solid: #1f8a0c; --accent-solid-hover: #176a09;
}
:root[data-accent="cyan"] {
  --accent: #22d3ee; --accent-hover: #67e8f9; --accent-weak: rgba(34, 211, 238, 0.14);
  --accent-solid: #0891b2; --accent-solid-hover: #0e7490;
}
:root[data-accent="magenta"] {
  --accent: #f472b6; --accent-hover: #f9a8d4; --accent-weak: rgba(236, 72, 153, 0.14);
  --accent-solid: #db2777; --accent-solid-hover: #be185d;
}
:root[data-accent="amber"] {
  --accent: #fbbf24; --accent-hover: #fcd34d; --accent-weak: rgba(251, 191, 36, 0.14);
  --accent-solid: #d97706; --accent-solid-hover: #b45309;
}
/* Background depth — only meaningful in dark mode. 'true' = OLED pure black, max contrast. */
:root[data-theme="dark"][data-bg="true"] {
  --bg: #000000; --surface: #0b0b0d; --surface-2: #16161c;
  --border: #1c1c24; --border-strong: #2a2a34;
}
/* Timeline + misc light backgrounds that aren't token-driven. */
:root[data-theme="dark"] .tl-month { background: #1a1a20; }
:root[data-theme="dark"] .tl-month.alt { background: #20202a; }
:root[data-theme="dark"] .tl-month:not(:first-child),
:root[data-theme="dark"] .tl-day.month-start,
:root[data-theme="dark"] .tl-cell.month-start { border-left-color: #3a3a45; }
:root[data-theme="dark"] .tl-day.weekend,
:root[data-theme="dark"] .tl-cell.weekend { background: rgba(255, 255, 255, 0.025); }
:root[data-theme="dark"] .tl-cell.today { background: rgba(167, 139, 250, 0.10); }
:root[data-theme="dark"] .progress-expected { background: rgba(255, 255, 255, 0.35); }
:root[data-theme="dark"] .pw-badge { background: rgba(251, 191, 36, 0.14); }
:root[data-theme="dark"] .login-body { background: radial-gradient(1200px 600px at 50% -10%, rgba(139, 92, 246, 0.16) 0%, var(--bg) 60%); }

/* ---------- "Motion" design package (Settings → Appearance → Design) ----------
   A cool near-black dark skin with an indigo-blue accent, modeled on the Motion app. Applied as
   data-skin="motion" ALONGSIDE data-theme="dark" (it forces dark), so every dark component rule
   still applies; these token overrides are declared LAST so they win over the dark/accent/bg
   blocks above. Enabling Motion clears data-accent/data-bg (it owns the whole palette). */
:root[data-skin="motion"] {
  color-scheme: dark;
  --bg: #0e0e11;                 /* main canvas — near-black, faint cool tint */
  --surface: #16161a;           /* topbar / cards / panels */
  --surface-2: #1d1e24;         /* hover + task-event card surface */
  --text: #ededee;              /* near-white headings/body */
  --text-2: #8a8b93;            /* muted (times, sidebar labels) */
  --text-3: #61626a;
  --border: #25262c;
  --border-strong: #34353d;
  --accent: #6e86f0;            /* soft blue for links/icons */
  --accent-hover: #94a6f7;
  --accent-weak: rgba(86, 110, 230, 0.16);
  --accent-solid: #3f57c4;      /* selected / buttons — muted indigo */
  --accent-solid-hover: #4a63d8;
  --danger: #fa5252;            /* Motion shows real red for overdue (not the CRM orange) */
  --green: #51cf66;
  --orange: #ff922b;
  --ev-meeting: #36456a;        /* MUTED slate-blue filled events — the real Motion block colour */
}
/* The sidebar sits a touch darker than the canvas (the Motion look). */
:root[data-skin="motion"] .sidebar { background: #0a0a0d; }
/* Motion's "now" line is a light dot/line, not red. */
:root[data-skin="motion"] .cal2-now,
:root[data-skin="motion"] .cal2-now::before { background: #e6e6e9; }
:root[data-skin="motion"] .login-body { background: radial-gradient(1200px 600px at 50% -10%, rgba(86, 110, 230, 0.16) 0%, var(--bg) 60%); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Scrollbars ----------
   Soft, token-driven scrollbars so the timeline (and every scroll area) reads light in light
   mode and dark in dark mode — no more black native track. Thumb floats as a rounded pill via a
   transparent border + padding-box clip, so it adapts to whatever surface it sits on. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1;
  transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); box-shadow: none; }
.btn-danger { color: var(--danger); border-color: var(--border-strong); }
.btn-danger:hover { background: #fce8e6; border-color: #fad2cf; }
.btn-sm { padding: 5px 12px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }
.btn .ic { width: 18px; height: 18px; }

/* ---------- Login ---------- */
.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(1200px 600px at 50% -10%, #eaf1fe 0%, var(--bg) 60%);
}
.login-card {
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px 28px;
  box-shadow: var(--shadow-2);
}
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand h1 { font-size: 30px; margin: 0; font-weight: 600; letter-spacing: -0.2px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: var(--radius);
  background: #111114 url('/icons/icon-192.png') center / cover no-repeat;
  position: relative; flex: 0 0 auto;
}
.login-sub { color: var(--text-2); font-size: 17.5px; margin: 10px 0 24px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 16px; color: var(--text-2); font-weight: 500; }
.field input, .input, textarea, select {
  font-family: inherit;
  font-size: 17.5px;
  color: var(--text);
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  width: 100%;
}
.field input:focus, .input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.login-error { color: var(--danger); font-size: 16px; margin: 0; }
.login-quick { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.login-quick-label { font-size: 15px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.login-quick-btns { display: flex; gap: 10px; margin-top: 12px; }
.quick-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--radius-pill); padding: 6px 14px 6px 6px; font-size: 17.5px; font-weight: 500;
}
.quick-chip:hover { background: var(--surface-2); }

/* ---------- Avatar ---------- */
.avatar {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-size: 16px; font-weight: 600; flex: 0 0 auto;
  text-transform: uppercase;
}
.avatar.sm { width: 22px; height: 22px; font-size: 14px; }
.avatar.lg { width: 36px; height: 36px; font-size: 19px; }
img.avatar { object-fit: cover; background: var(--surface-2); }

/* Profile-photo control in Settings → Your account */
.avatar.xl { width: 72px; height: 72px; font-size: 34px; }
.avatar-edit { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.avatar-edit .avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- App shell ---------- */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; height: 100dvh; overflow: hidden; transition: grid-template-columns 0.18s ease; }
.boot { display: grid; place-items: center; height: 100vh; height: 100dvh; color: var(--text-2); grid-column: 1 / -1; }

/* Sidebar collapse (desktop): zero the sidebar column to give the main view full width. The
   sidebar content is clipped by the 0-width column (app-shell already clips overflow). */
.app-shell.sidebar-collapsed { grid-template-columns: 0 1fr; }
.app-shell.sidebar-collapsed .sidebar { overflow: hidden; border-right: none; padding-left: 0; padding-right: 0; }
.app-shell.no-anim { transition: none; }
/* Collapse control sits beside Settings. A matching restore control appears in the topbar only
   while the sidebar is collapsed. Mobile uses the hamburger drawer instead. */
.sidebar-footer .sidebar-toggle { display: inline-grid; flex: 0 0 auto; }
.topbar .sidebar-expand { display: none; flex: 0 0 auto; margin-left: -4px; }
.app-shell.sidebar-collapsed .topbar .sidebar-expand { display: inline-grid; }

/* Hamburger + drawer backdrop: inert on desktop, activated in the mobile media query. */
/* Hidden on desktop. Needs `.topbar` specificity to beat `.iconbtn { display: inline-grid }`
   (defined later), which otherwise forces the hamburger visible on desktop. */
.topbar .nav-toggle { display: none; }
.scrim { display: none; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 16px 12px;
  overflow-y: auto;
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; border-radius: var(--radius-pill);
  color: var(--text-2); font-size: 17.5px; font-weight: 500;
  border: none; background: transparent; text-align: left; width: 100%;
}
.nav-item .ic { width: 20px; height: 20px; flex: 0 0 auto; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--accent-weak); color: var(--accent); }

.side-section-label { font-size: 14px; color: var(--text-3); font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; padding: 18px 14px 8px; }
.project-pill { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 17.5px; color: var(--text-2); }
.project-pill .ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--text-3); }
/* Single line separating the project list from the nav tabs above. */
.side-divider { height: 1px; background: var(--border); margin: 12px 14px; }
.project-pill .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.project-pill.active { background: var(--surface-2); font-weight: 500; color: var(--text); }

.side-spacer { flex: 1; }

/* ---------- Main ---------- */
.main { display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.topbar h2 { font-size: 25px; margin: 0; font-weight: 600; letter-spacing: -0.3px; }
.view-tabs { display: flex; gap: 4px; margin-left: 8px; }
.view-tab {
  border: none; background: transparent; color: var(--text-2);
  font-size: 17.5px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-pill);
}
.view-tab:hover { background: var(--surface-2); }
.view-tab.active { color: var(--accent); background: var(--accent-weak); }
.topbar-spacer { flex: 1; }

/* "Time-block remaining" countdown pill (project boards only). */
.block-countdown {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--accent-weak); color: var(--accent);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
@media (max-width: 720px) { .block-countdown { padding: 6px 9px; font-size: 13px; } }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--radius-pill); padding: 7px 14px; width: 240px;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.search:focus-within { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.search input { border: none; outline: none; background: transparent; font-size: 17.5px; width: 100%; }
.search .ic { width: 18px; height: 18px; color: var(--text-3); }

.gchip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 6px 12px; font-size: 16px; font-weight: 500; color: var(--text-2); background: var(--surface);
}
.gchip:hover { background: var(--surface-2); }
.gchip .gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.gchip.connected { color: var(--green); border-color: #c6e7cd; background: #e7f5ea; }
.gchip.connected .gdot { background: var(--green); }

.content { flex: 1; overflow: auto; padding: 24px; }

/* Light-mode surfaces: a faint-grey sidebar against a pure-white main canvas (modern, airy). */
:root[data-theme="light"] .sidebar { background: #f9fafb; }
:root[data-theme="light"] .main { background: #ffffff; }

/* "My Tasks" / project board: a calm, spacious main view. The board itself runs edge-to-edge (no
   outer frame) so the day-calendar rail can sit flush against the top / right / bottom; all the
   breathing room lives on the task list (.board-main) instead — see its generous gutters below.
   Tagged via els.content.dataset.view in app.js, with a :has() fallback so it still applies if that
   JS hasn't loaded yet. Desktop-only (mobile keeps its compact padding). */
@media (min-width: 861px) {
  .content[data-view="board"] { padding: 0; }
  .content:has(> .board-layout) { padding: 0; }
}

/* ---------- Banner ---------- */
.banner {
  display: flex; align-items: center; gap: 12px;
  background: #fef7e0; border: 1px solid #feefc3; color: #5f4a00;
  border-radius: var(--radius); padding: 12px 16px; font-size: 17px; margin-bottom: 18px;
}
.banner .ic { width: 20px; height: 20px; flex: 0 0 auto; }
.banner.info { background: var(--accent-weak); border-color: #cfe0fb; color: #174ea6; }

/* ---------- Board ---------- */
/* Columns stretch to equal height (tallest column sets it) so a short column still offers a
   full-height drop target — you can drop a card anywhere over the column, not just near the top. */
.board { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 24px; align-items: stretch; }
.column { background: transparent; display: flex; flex-direction: column; min-height: 120px; }
.column-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
.column-head .badge { width: 9px; height: 9px; border-radius: 50%; }
.column-head h3 { font-size: 17.5px; font-weight: 600; margin: 0; }
.column-head .count { color: var(--text-3); font-size: 16px; font-weight: 500; }
.column-head .add { margin-left: auto; }
.column-drop { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: var(--radius); flex: 1 1 auto; min-height: 240px; transition: background 0.12s; }
.column-drop.drag-over { background: var(--accent-weak); outline: 2px dashed #aac4f5; outline-offset: -4px; }

/* ---- Motion-style task rows: a check circle (click = complete) + title + meta (click = open) ---- */
.task-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 18px; border-radius: var(--radius); cursor: grab;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.task-row:last-of-type { border-bottom: 0; }
.task-row:hover { background: var(--surface-2); }
.task-row.dragging { opacity: 0.5; cursor: grabbing; }
.task-row.has-unread .task-row-title { font-weight: 600; }
.task-row-title { flex: 1; min-width: 0; font-size: 17px; line-height: 1.35; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row-title .unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
.task-row-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.task-due { font-size: 15px; color: var(--text-3); white-space: nowrap; }
.task-due.overdue { color: var(--danger); }

/* Clickable quick-action chips on a task card (due date + move-to-project) — quiet until hovered. */
.chip-btn { border: 1px solid transparent; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; line-height: 1.4; }
.chip-btn:hover { background: var(--surface-2); border-color: var(--border); }
.task-proj.chip-btn { font-size: 13.5px; color: var(--text-3); white-space: nowrap; max-width: 170px; }
.task-proj.chip-btn > span { overflow: hidden; text-overflow: ellipsis; }
.task-proj.chip-btn.compact { padding: 3px 6px; opacity: 0.5; }
.task-row:hover .task-proj.chip-btn.compact { opacity: 1; }
.chip-ghost { opacity: 0; }                       /* "Due" ghost chip only appears on row hover */
.task-row:hover .chip-ghost { opacity: 0.55; }
.chip-ghost:hover { opacity: 1; }

/* Anchored popover (openPopover): compact inline menus for the card quick actions. */
.pop-layer { position: fixed; inset: 0; z-index: 1000; }
.pop-panel { position: fixed; min-width: 176px; max-width: 264px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32); padding: 6px; z-index: 1001; }
.pop-scroll { max-height: 320px; overflow-y: auto; }
.pop-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; white-space: nowrap; }
.pop-item:hover { background: var(--surface-2); }
.pop-item.on { color: var(--accent); }
.pop-item.pop-danger { color: var(--danger); }
.pop-sep { height: 1px; background: var(--border); margin: 5px 6px; }
.pop-date-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.task-est { font-size: 15px; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.task-row-meta .avatar { margin-left: 2px; }
.task-row-project { font-size: 14px; color: var(--text-3); white-space: nowrap; flex: 0 0 auto; }

/* Completed task: dulled + struck through. */
.task-row.is-done .task-row-title { color: var(--text-3); text-decoration: line-through; }
.task-row.is-done .task-due, .task-row.is-done .task-est { opacity: 0.6; }
.task-row.is-done:hover { background: transparent; }
.input.title-done { text-decoration: line-through; color: var(--text-3); }

/* The check circle. Empty outline by default; green filled with a white check when done. */
.task-check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: transparent;
  display: grid; place-items: center; padding: 0; color: #fff; cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.task-check:hover { border-color: var(--green); }
.task-check.done { background: var(--green); border-color: var(--green); }
.task-check .ic { width: 13px; height: 13px; }
.modal-head .task-check { width: 22px; height: 22px; margin-right: 2px; }
.modal-head .task-check .ic { width: 14px; height: 14px; }
/* Shared-with-me rows reuse .task-row but aren't draggable. */
.shared-tasks-list .task-row { border-bottom: 0; cursor: pointer; }

/* ---- Board = single task list (In progress → To do → Done) + a minimal day calendar on the right ---- */
/* No column gap: the task-list scrollbar (board-main's right edge) sits flush against the
   calendar pane. The list keeps its breathing room via board-main's own right padding below,
   so killing the gap only closes the scrollbar→calendar space, not the text→scrollbar space. */
.board-layout { display: flex; gap: 0; align-items: flex-start; }
.board-main { flex: 1 1 auto; min-width: 0; padding: 6px 6px 28px; }
/* The In progress / To do list gets generous, Motion-style breathing room on every side + top.
   Desktop-only; the side gutters scale with the viewport via clamp() so wide screens feel airy
   without cramping the list on narrower laptops. (Placed after the base rule so it wins.) */
@media (min-width: 861px) {
  .board-main { padding: 80px clamp(48px, 9vw, 180px); }
}
.task-list { display: flex; flex-direction: column; gap: 32px; }
.tl-section { display: flex; flex-direction: column; }
.tl-head { display: flex; align-items: baseline; gap: 8px; padding: 0 18px 12px; }
.tl-head h3 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: 0.2px; }
.tl-count { color: var(--text-3); font-size: 15px; font-weight: 500; }
.tl-drop { display: flex; flex-direction: column; gap: 4px; min-height: 4px; border-radius: var(--radius); transition: background 0.12s; }
.tl-drop.drag-over { background: var(--accent-weak); outline: 2px dashed var(--accent); outline-offset: -3px; }
.tl-sec-empty { color: var(--text-3); font-size: 14px; padding: 10px 18px; display: flex; align-items: center; gap: 4px; }
.tl-sec-empty .ic { width: 13px; height: 13px; vertical-align: middle; }
.tl-done .tl-head h3, .tl-done .tl-count { color: var(--text-3); }
.tl-completed-head { align-items: center; padding-bottom: 0; }
.tl-completed-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.tl-completed-toggle .ic { color: var(--text-3); transition: transform 120ms ease; }
.tl-done.is-open .tl-completed-toggle .ic { transform: rotate(90deg); }
.tl-completed-toggle:hover h3, .tl-completed-toggle:hover .tl-count { color: var(--text-2); }
.tl-done-summary { margin-left: auto; color: var(--text-3); font-size: 12.5px; font-weight: 500; }
.tl-completed-body { padding-top: 10px; }
.tl-completed-body[hidden] { display: none; }
.tl-completed-tools { display: flex; align-items: center; gap: 8px; padding: 0 18px 10px; }
.tl-completed-searchwrap {
  min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--text-3);
}
.tl-completed-searchwrap:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.tl-completed-search { min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; }
.tl-completed-search::placeholder { color: var(--text-3); }
.tl-completed-period { width: auto; max-width: 180px; padding: 7px 28px 7px 10px; font-size: 13.5px; }
.tl-completed-rows { max-height: min(52vh, 540px); overflow-y: auto; }

@media (max-width: 560px) {
  .tl-completed-tools { align-items: stretch; flex-direction: column; }
  .tl-completed-period { width: 100%; max-width: none; }
}

/* Quick "mark in progress" bolt on each row — hidden until hover, always lit when active. */
.task-flag {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--radius); padding: 0;
  border: 0; background: transparent; color: var(--text-3); display: grid; place-items: center;
  opacity: 0; transition: opacity 0.1s, color 0.1s, background 0.1s; cursor: pointer;
}
.task-row:hover .task-flag { opacity: 1; }
.task-flag:hover { background: var(--surface-2); color: var(--accent); }
.task-flag.on { opacity: 1; color: var(--accent); }

/* Right-hand minimal day calendar. Sticks (flush to the top, under the topbar) while the task list
   scrolls, and runs full height so it touches the bottom edge. The board view has zero content
   padding, so it also sits flush against the right edge. */
.board-cal {
  flex: 0 0 380px; min-width: 0; position: sticky; top: 0;
  height: calc(100vh - var(--topbar-h));
}
.board-cal-inner { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.board-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 15px; flex: 0 0 auto; }
.bch-nav { display: flex; align-items: center; gap: 2px; }
.bch-nav .iconbtn { width: 22px; height: 22px; padding: 0; }
.bch-nav .iconbtn .ic { width: 13px; height: 13px; }
.bch-nav .prev .ic { transform: rotate(180deg); }
.bch-today { border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 13px; padding: 3px 9px; border-radius: var(--radius); cursor: pointer; }
.bch-today:hover { background: var(--surface-2); color: var(--text); }
.board-cal-scroll { flex: 1 1 auto; overflow-y: auto; }
.board-cal-empty { padding: 20px 16px; }

@media (max-width: 1000px) {
  /* Not enough room side-by-side → drop the calendar BELOW the task list (don't hide it). */
  .board-layout { display: block; }
  .board-cal { position: static; flex: none; width: auto; height: 540px; margin-top: 24px; }
}

/* Split scroll like Motion: the task list and the calendar scroll independently. The main scrollbar
   sits at the right edge of the task list (just left of the calendar); the calendar keeps its own
   scrollbar on its far-right edge. The outer content no longer scrolls, so there's no third scrollbar
   sitting over the calendar. (Side-by-side regime only — below 1000px the calendar stacks and the
   page scrolls normally.) */
@media (min-width: 1001px) {
  /* Outer content doesn't scroll; the board fills a fixed height. Keep content as a normal block
     (NOT display:flex — that mis-sized the nested flex and pushed the calendar off-screen). */
  .content[data-view="board"] { overflow: hidden; }
  .content:has(> .board-layout) { overflow: hidden; }
  /* Explicit height (board view has zero content padding, so this equals the visible content area).
     align-items:stretch makes both columns full height; min-width:0 lets the task list shrink so the
     fixed 380px calendar always keeps its room. */
  .board-layout { height: calc(100vh - var(--topbar-h)); min-height: 0; align-items: stretch; }
  .board-main { overflow-y: auto; min-height: 0; min-width: 0; }
  /* board-cal keeps its DEFINITE height (the embedded calendar is height:100% and collapses without
     it) and its own internal scroll; just drop the now-pointless sticky. */
  .board-cal { position: static; }
}

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 14px; box-shadow: var(--shadow-1); cursor: grab;
  transition: box-shadow 0.12s, transform 0.06s, border-color 0.12s;
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.card.dragging { opacity: 0.5; cursor: grabbing; }
.card.has-unread { border-color: var(--accent); }
.card-title { font-size: 17.5px; font-weight: 500; line-height: 1.35; margin: 0 0 8px; }
/* Unread-comment dot on a task card. */
.card-title .unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
/* "Small notification about it" banner shown inside the task modal on open. */
.task-notif { display: flex; align-items: center; gap: 8px; background: var(--accent-weak); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 16px; margin-bottom: 8px; }
.task-notif .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.task-notif .when { color: var(--text-3); font-size: 15px; flex: 0 0 auto; }
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; color: var(--text-2); background: var(--surface-2);
  padding: 3px 9px; border-radius: var(--radius-pill);
}
.tag .ic { width: 13px; height: 13px; }
.tag.due-soon { background: #fce8e6; color: var(--danger); }
.tag.has-file { background: #e6f4ea; color: var(--green); }
.card-meta .avatar { margin-left: auto; }
.empty-col { color: var(--text-3); font-size: 16px; text-align: center; padding: 18px 6px; }

.add-card-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2);
  border-radius: var(--radius); padding: 12px 18px; font-size: 16px; font-weight: 500; margin-top: 4px;
}
.add-card-btn:hover { background: var(--surface); color: var(--accent); border-color: #aac4f5; }

/* ---------- Timeline ---------- */
.timeline-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.timeline-scroll { overflow-x: auto; }
.tl-grid { position: relative; }
.tl-headwrap { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.tl-monthband { display: flex; }
.tl-monthband .tl-rowlabel-col { border-right: 1px solid var(--border); }
.tl-month { flex: 0 0 auto; box-sizing: border-box; padding: 5px 0; font-size: 14px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-2); white-space: nowrap; background: #fafbfc; }
.tl-month.alt { background: #eef0f3; }
.tl-month:not(:first-child) { border-left: 2px solid #cdd2d9; }
/* Label hugs the left of the viewport so the month name stays visible while any of its days are on-screen */
.tl-month-label { position: sticky; left: 208px; padding-left: 8px; display: inline-block; }
.tl-header { display: flex; border-bottom: 1px solid var(--border); background: var(--surface); }
.tl-rowlabel-col { width: 252px; flex: 0 0 252px; border-right: 1px solid var(--border); background: var(--surface); position: sticky; left: 0; z-index: 3; }
.tl-day { width: 44px; flex: 0 0 44px; text-align: center; padding: 8px 0; font-size: 14px; color: var(--text-2); border-right: 1px solid var(--border); }
.tl-day.weekend { background: #fafbfc; }
.tl-day.today { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.tl-day.month-start, .tl-cell.month-start { border-left: 2px solid #cdd2d9; }
.tl-day .dnum { font-size: 17.5px; font-weight: 600; color: var(--text); display: block; }
.tl-day.today .dnum { color: var(--accent); }
.tl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); min-height: 46px; }
.tl-row:last-child { border-bottom: none; }
.tl-rowlabel { width: 252px; flex: 0 0 252px; border-right: 1px solid var(--border); padding: 0 14px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.tl-track { position: relative; display: flex; }
.tl-cell { width: 44px; flex: 0 0 44px; border-right: 1px solid var(--border); }
.tl-cell.weekend { background: #fafbfc; }
.tl-cell.today { background: rgba(26,115,232,0.06); }
.tl-bar {
  position: absolute; top: 9px; height: 26px; border-radius: var(--radius-pill);
  display: flex; align-items: center; padding: 0 12px; color: #fff; font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: var(--shadow-1);
}
.tl-bar:hover { filter: brightness(0.95); }
.tl-bar.done { opacity: 0.7; }
.tl-empty { padding: 40px; text-align: center; color: var(--text-3); }

/* ----- Timeline 2.0: dual-deadline health bars ----- */
.tl-row { min-height: 52px; }
.tl-rowlabel-rich { gap: 9px; }
.tl-rl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl-rl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tl-rl-meta { font-size: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.2px; }

.tl-today-line { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: var(--accent); opacity: 0.5; pointer-events: none; }

.tl-bar2 { position: absolute; top: 50%; transform: translateY(-50%); height: 24px; border-radius: 7px; display: flex; overflow: hidden; cursor: grab; box-shadow: var(--shadow-1); touch-action: none; }
.tl-bar2.dragging { cursor: grabbing; z-index: 5; box-shadow: var(--shadow-2); opacity: 0.92; }
.tl-bar2:hover { filter: brightness(1.07); }
/* Health palette — vivid but mature; reads clearly on both the light and dark canvas. */
.tl-bar2.h-on_track, .tl-bar2.h-done, .tl-flag.h-on_track, .tl-flag.h-done, .tl-pf.h-on_track, .tl-pf.h-done { color: #16a366; }
.tl-bar2.h-buffer, .tl-flag.h-buffer, .tl-pf.h-buffer { color: #e1922b; }
.tl-bar2.h-late, .tl-flag.h-late, .tl-pf.h-late { color: #e2554a; }
.tl-bar2.h-none, .tl-flag.h-none, .tl-pf.h-none { color: #6b7280; }
.tl-bar2.h-done { opacity: 0.74; }
/* A faint top-down sheen gives the bar depth without muddying the health colour. */
.tl-seg-solid { height: 100%; background: linear-gradient(180deg, color-mix(in srgb, currentColor 86%, #fff), currentColor); }
.tl-seg-buffer { height: 100%;
  background-color: color-mix(in srgb, currentColor 20%, transparent);
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, currentColor 55%, transparent) 0 5px, transparent 5px 10px); }
.tl-bar-pct { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; }

.tl-flag { position: absolute; top: 50%; transform: translateY(-50%); font-size: 19px; line-height: 1; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.tl-pf { position: absolute; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(45deg);
  background: #fff; border: 2px solid currentColor; border-radius: 2px; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,0.35); }

.tl-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-3); }
.tl-leg { display: inline-flex; align-items: center; gap: 5px; }
.tl-leg-sw { width: 18px; height: 9px; border-radius: 3px; display: inline-block; }
.tl-leg-sw.solid { background: #5f6368; }
.tl-leg-sw.buffer { background-color: color-mix(in srgb, #5f6368 22%, transparent);
  background-image: repeating-linear-gradient(45deg, #5f6368 0 4px, transparent 4px 8px); border: 1px solid var(--border); }
.tl-leg-flag { color: var(--text-2); font-size: 16px; }
.tl-leg-pf { width: 9px; height: 9px; transform: rotate(45deg); background: #fff; border: 2px solid var(--text-2); border-radius: 2px; display: inline-block; }
.tl-leg-today { width: 2px; height: 12px; background: var(--accent); opacity: 0.7; display: inline-block; }
.tl-leg-gap { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--border); }
.tl-leg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: currentColor; }
.tl-leg-dot.h-on_track { color: #16a366; }
.tl-leg-dot.h-buffer { color: #e1922b; }
.tl-leg-dot.h-late { color: #e2554a; }

/* ---------- Documents ---------- */
.docs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.docs-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.docs-head .sub { color: var(--text-3); font-size: 16px; }
/* Documents / SOP variant: a big title + breadcrumb on top, a left-aligned toolbar below. */
.docs-head-stack { flex-direction: column; align-items: stretch; }
.docs-titlebar { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.docs-title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--text); }
/* Toolbar holds the New… buttons and the selection bar (they swap) — both left-aligned. Fixed
   min-height so showing/hiding the selection bar never shifts the grid (CLS). */
.docs-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 34px; }
/* Google-Drive-style cards: a big type-COLOURED thumbnail (the whole top is the type indicator — no
   tiny corner icon) over a white footer with the name. Type is read instantly by colour. */
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.doc-card {
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; background: var(--surface); cursor: pointer; position: relative;
  transition: box-shadow 0.12s, transform 0.12s, outline-color 0.12s;
}
.doc-card:hover { box-shadow: var(--shadow-2); }
.doc-card.selected { outline: 2px solid var(--accent, #1a73e8); outline-offset: -1px; }
.doc-card-art { height: 116px; display: grid; place-items: center; position: relative; }
.doc-glyph { font-size: 46px; line-height: 1; filter: saturate(1.1); display: inline-flex; }
.doc-glyph .ic { width: 46px; height: 46px; }
/* Map cards show the Excalidraw brand logo as a rounded app-style badge. */
.doc-glyph-img { width: 72px; height: 72px; object-fit: cover; border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.doc-card-foot { padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.doc-name { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.doc-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
/* Type colours fill the whole thumbnail (stronger tint + a matching accent-coloured icon). */
.doc-card.type-doc    .doc-card-art { background: #c9ddfc; }
.doc-card.type-doc    .doc-glyph { color: #1559c4; }
.doc-card.type-sheet  .doc-card-art { background: #c2e7cd; }
.doc-card.type-sheet  .doc-glyph { color: #137333; }
.doc-card.type-map    .doc-card-art { background: #f3e8fd; }
.doc-card.type-folder .doc-card-art { background: #fef7e0; }
/* Status badges overlay the thumbnail's top-right (NOT the type indicator). */
.doc-card .doc-badges { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.doc-card .doc-badge { background: rgba(255,255,255,0.9); border-radius: 6px; padding: 1px 5px; font-size: 12px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.12); display: inline-flex; align-items: center; }
/* Selected-item actions live in the HEADER (not on the card), so a double-click never hits them. */
.docs-actions-group { display: flex; gap: 8px; flex-wrap: wrap; }
/* Selection bar sits left-aligned in the toolbar (it replaces the New… buttons when an item is
   selected). */
.docs-selbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.docs-selbar[hidden] { display: none; }
.docs-selbar .btn-sm { padding: 5px 11px; font-size: 13px; }
.docs-empty { text-align: center; padding: 60px 20px; color: var(--text-2); grid-column: 1 / -1; }
.docs-empty .big { font-size: 55.5px; margin-bottom: 10px; }

/* Small rounded type icon — still used by SOP cards + the Drive sync list. */
.doc-icon { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; }
/* SOP library (Drive-style folder manager — reuses .docs-grid / .doc-card). */
.sops-head { margin-bottom: 6px; }
.sops-title { margin: 0; font-size: 20px; }
.sops-sub { margin: 2px 0 0; font-size: 13px; max-width: 70ch; }

/* ---------- Calendar list ---------- */
.cal-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.cal-item {
  display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-1);
}
.cal-date { text-align: center; width: 52px; flex: 0 0 52px; }
.cal-date .d { font-size: 25px; font-weight: 700; line-height: 1; color: var(--accent); }
.cal-date .m { font-size: 14px; text-transform: uppercase; color: var(--text-3); letter-spacing: 0.5px; }
.cal-body { flex: 1; }
.cal-body .t { font-size: 17.5px; font-weight: 500; }
.cal-body .time { font-size: 15px; color: var(--text-3); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: grid; place-items: center; z-index: 1100; padding: 24px; /* above .editor-overlay (1000) so Share dialog isn't trapped behind the editor */
  animation: fade 0.12s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-pop);
  width: 640px; max-width: 100%; max-height: calc(100vh - 48px); overflow: auto;
  animation: pop 0.14s ease;
}
@keyframes pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-sm { width: 420px; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; }
.modal-head h3 { margin: 0; font-size: 22.5px; font-weight: 600; flex: 1; line-height: 1.3; }
.modal-head .btn-ghost { margin: -6px -8px 0 0; padding: 6px; }
.modal-body { padding: 0 22px 8px; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 16px 22px 20px; }
.modal-foot .spacer { flex: 1; }

/* Task editor: a compact writing surface, not a settings form. */
.task-modal { width: 560px; }
.task-modal .modal-head { align-items: center; padding-bottom: 10px; }
.task-title-input {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.015em;
  box-shadow: none;
}
.task-title-input:focus { border: 0; box-shadow: none; }
.task-modal .modal-body { gap: 12px; }
.task-modal .task-description { gap: 0; }
.task-modal .rt-toolbar { margin-bottom: 6px; }
.task-modal .rt-editor { min-height: 82px; }
.task-modal .detail-section { padding-top: 11px; }

.form-row { display: flex; gap: 12px; }
.form-row > .field { flex: 1; }
.status-select { display: flex; gap: 8px; }
.status-opt {
  flex: 1; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px; font-size: 16px; font-weight: 500; color: var(--text-2); background: var(--surface);
}
.status-opt.active { color: #fff; border-color: transparent; }
.status-opt.todo.active { background: var(--text-2); }
.status-opt.doing.active { background: var(--accent); }
.status-opt.done.active { background: var(--green); }

textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

.detail-section { border-top: 1px solid var(--border); padding-top: 14px; }
.detail-section h4 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin: 0 0 10px; }
.attach-list { display: flex; flex-direction: column; gap: 8px; }
.attach-row { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.attach-row .doc-icon { width: 26px; height: 26px; font-size: 16px; }
.attach-row .x { margin-left: auto; }

.comments { display: flex; flex-direction: column; gap: 12px; }
.comment { display: flex; gap: 10px; }
.comment .body { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 17px; line-height: 1.4; }
.comment .who { font-size: 15px; color: var(--text-2); font-weight: 600; margin-bottom: 2px; }
.comment .when { font-size: 14px; color: var(--text-3); font-weight: 400; margin-left: 6px; }
.comment-form { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; }
.comment-form textarea { min-height: 40px; }

.picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.picker-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 17.5px; }
.picker-row:hover { background: var(--surface-2); cursor: pointer; }
.picker-row .doc-icon { width: 28px; height: 28px; font-size: 17.5px; }
/* Folder-browsing breadcrumb inside a picker modal (Attach a document). */
.picker-crumbs { margin: 2px 0 10px; font-size: 15px; flex-wrap: wrap; }
.picker-crumbs .crumb { border-radius: 6px; }
.picker-crumbs .crumb:hover { background: var(--accent-weak, #eef4ff); }
.picker-crumbs + .picker-list .picker-row .ic { color: var(--muted, #9aa0a6); }

/* ---------- Toast ---------- */
.toast-root { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: #323639; color: #fff; padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: 17px; box-shadow: var(--shadow-pop); animation: toastin 0.18s ease;
  display: flex; align-items: center; gap: 10px;
}
.toast.err { background: #5f1410; }
@keyframes toastin { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Misc ---------- */
.muted { color: var(--text-3); }
.dropdown { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop);
  min-width: 200px; padding: 6px; z-index: 50;
}
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 17.5px; color: var(--text); }
.menu button:hover { background: var(--surface-2); }
.menu .ic { width: 18px; height: 18px; color: var(--text-2); }
.menu hr { border: none; border-top: 1px solid var(--border); margin: 6px 4px; }

.ic { display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Vault (links + passwords) ---------- */
.vault-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vault-toolbar h3 { margin: 0; font-size: 20px; font-weight: 600; }
.vault-toolbar .sub { color: var(--text-3); font-size: 16px; }

.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.link-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: box-shadow 0.12s, border-color 0.12s;
}
.link-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.link-card .lc-head { display: flex; align-items: center; gap: 10px; }
.link-card .lc-title { font-size: 17.5px; font-weight: 600; line-height: 1.25; flex: 1; word-break: break-word; }
.link-card .lc-url { font-size: 15px; color: var(--text-3); word-break: break-all; }
.link-card .lc-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.link-card .lc-foot .spacer { flex: 1; }

.cat-tag { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--accent); background: var(--accent-weak); padding: 3px 9px; border-radius: var(--radius-pill); letter-spacing: 0.3px; }

.pw-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.pw-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 12px 16px; box-shadow: var(--shadow-1); }
.pw-row:hover { border-color: var(--border-strong); }
.pw-badge { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; background: #fff3e0; color: var(--orange); }
.pw-main { flex: 1; min-width: 0; }
.pw-main .label { font-size: 17.5px; font-weight: 600; }
.pw-main .sub { font-size: 15.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pw-main .sub .secret { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 1.5px; color: var(--text); }
.pw-main .sub .uname { display: inline-flex; align-items: center; gap: 4px; }
.pw-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.iconbtn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); color: var(--text-2);
  transition: background 0.12s, color 0.12s;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn.primary { color: var(--accent); }
.iconbtn.danger:hover { background: #fce8e6; color: var(--danger); }
.iconbtn.flash { background: #e6f4ea; color: var(--green); }

.gen-row { display: flex; gap: 8px; align-items: stretch; }
.gen-row .input { flex: 1; }

/* ---------- Avatar stack ---------- */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); margin-left: -7px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

.collab-row { display: flex; flex-wrap: wrap; gap: 6px; }
.collab-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface); font-size: 15.5px; font-weight: 500; color: var(--text-2);
}
.collab-chip:hover { background: var(--surface-2); }
.collab-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
kbd { font-family: var(--font); font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: var(--text-2); }

/* ---------- Rich-text description ---------- */
.rt-toolbar { display: flex; gap: 4px; margin-bottom: 6px; }
.rt-btn { display: inline-grid; place-items: center; height: 28px; min-width: 30px; padding: 0 8px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 6px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.rt-btn:hover { background: var(--surface-2); color: var(--text); }
.rt-editor {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 13px;
  min-height: 84px; font-size: 17.5px; line-height: 1.5; outline: none; transition: border-color 0.12s, box-shadow 0.12s;
}
.rt-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.rt-editor:empty::before { content: attr(data-placeholder); color: var(--text-3); }
.rt-editor h2, .rt-view h2 { font-size: 20px; margin: 6px 0 4px; font-weight: 600; }
.rt-editor h3, .rt-view h3 { font-size: 17.5px; margin: 6px 0 4px; font-weight: 600; }
.rt-editor ul, .rt-view ul { margin: 4px 0; padding-left: 22px; }
.rt-editor li, .rt-view li { margin: 2px 0; }
.rt-view { font-size: 17.5px; line-height: 1.5; color: var(--text); }

/* ============================================================
   Task popup 2.0 — minimal, high-contrast in dark + light.
   (Appended last so these win over the base rules above.)
   ============================================================ */
.modal { border: 1px solid var(--border); }
.modal-head { padding: 22px 24px 12px; align-items: center; }
.modal-head input::placeholder { color: var(--text-3); }
.modal-body { padding: 4px 24px 12px; gap: 18px; }
.modal-foot { padding: 14px 24px 18px; border-top: 1px solid var(--border); }

/* Quiet, uppercase field labels — a calmer hierarchy that reads well in both themes. */
.modal-body .field > span { font-size: 14.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-3); }
.modal-body .field input, .modal-body .input, .modal-body textarea, .modal-body select { border-radius: 9px; }

.detail-section { border-top: 1px solid var(--border); padding-top: 18px; }
.detail-section h4 { font-size: 14.5px; letter-spacing: 0.6px; color: var(--text-3); margin: 0 0 12px; }

/* Description editor + toolbar */
.rt-toolbar { gap: 5px; margin-bottom: 8px; }
.rt-btn {
  height: 30px; min-width: 32px; padding: 0 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: 16px; font-weight: 600; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rt-btn:hover { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.rt-editor {
  border: 1px solid var(--border-strong); border-radius: 11px; padding: 13px 15px;
  min-height: 96px; font-size: 17.5px; line-height: 1.6; color: var(--text); background: var(--surface);
}
.rt-editor a { color: var(--accent); }

/* Checklist item: a tickable box in the left gutter; checked = filled + struck-through. */
.rt-check { position: relative; padding-left: 30px; margin: 5px 0; line-height: 1.5; min-height: 22px; }
.rt-check::before {
  content: ''; position: absolute; left: 1px; top: 2px; width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface);
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.rt-check::after {
  content: ''; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform 0.12s; pointer-events: none;
}
.rt-check:hover::before { border-color: var(--accent); }
.rt-check[data-checked="true"]::before { background: var(--accent); border-color: var(--accent); }
.rt-check[data-checked="true"]::after { transform: rotate(45deg) scale(1); }
.rt-check[data-checked="true"] { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); }

/* Comments — clearer bubbles on both themes */
.modal-body .comment .body { background: var(--surface-2); border: 1px solid var(--border); }

/* ---------- Notifications ---------- */
.notif-list { display: flex; flex-direction: column; gap: 8px; max-width: 680px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; box-shadow: var(--shadow-1); cursor: pointer;
}
.notif-item:hover { border-color: var(--border-strong); }
.notif-item.unread { background: var(--accent-weak); border-color: #cfe0fb; }
.notif-item .ntext { flex: 1; font-size: 17px; line-height: 1.45; }
.notif-item .ntext b { font-weight: 600; }
.notif-item .nwhen { font-size: 15px; color: var(--text-3); margin-top: 3px; }
.notif-item .ndot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: 0 0 auto; }
.notif-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.notif-toolbar h3 { margin: 0; font-size: 20px; font-weight: 600; }

.nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 14px; font-weight: 700; display: inline-grid; place-items: center;
}

/* ---------- Project switcher (sidebar) ---------- */
.project-pill { border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; }
.project-pill:hover { background: var(--surface-2); }
.project-pill .pname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-pill .pcount { font-size: 14px; color: var(--text-3); }
/* Unread-comment count per project (replaces the global notifications page). */
.project-pill .pill-unread { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; display: inline-grid; place-items: center; flex: 0 0 auto; }
/* Folder icon wrapper so the red "due soon" badge can sit on its corner (app-icon style). */
.project-pill .pill-folder { position: relative; display: inline-flex; flex: 0 0 auto; }
.project-pill .pill-due { position: absolute; top: -5px; right: -6px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--danger, #e5484d); color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.project-pill.dragging { opacity: 0.5; cursor: grabbing; }
/* Drag a task card onto a Project/Space pill to move it there. */
.project-pill.drop-target { background: var(--accent-weak, #eef4ff); box-shadow: inset 0 0 0 2px var(--accent, #1a73e8); }
.add-project { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 16px; color: var(--text-2); border: none; background: transparent; width: 100%; text-align: left; }
.add-project:hover { background: var(--surface-2); color: var(--accent); }

/* Sidebar Projects / Spaces sections (collapsible, hyper-minimal). Unique pf-sec* prefix to avoid
   the legacy `.side-section-label` rule (line ~301).
   Label on the left (aligned to the same 14px edge as the pill folder icons); the caret + add
   button sit together on the right. Title case, not uppercase. */
.pf-sec { margin-top: 2px; }
.pf-sec-head {
  display: flex; align-items: center;
  cursor: pointer; user-select: none;
  padding: 9px 14px 5px; color: var(--text-3);
  font-size: 12.5px;
}
.pf-sec-head:hover .pf-sec-label,
.pf-sec-head:hover .pf-sec-caret { color: var(--text-2); }
.pf-sec-label { font-weight: 600; }
.pf-sec-body { display: flex; flex-direction: column; }

/* Caret + add grouped on the right edge — identical 22x22 boxes, evenly spaced + aligned. */
.pf-sec-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }

/* Both controls share the exact same box so they're the same size and perfectly aligned. */
.pf-sec-caret,
.pf-sec-add {
  width: 22px; height: 22px; flex: 0 0 auto; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 6px;
  color: var(--text-3); box-sizing: border-box;
}

/* Disclosure caret: a crisp triangle, rotates down when the section is open. */
.pf-sec-caret { transition: transform 0.12s ease; }
.pf-sec-caret::before {
  content: ""; width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.pf-sec:not(.collapsed) .pf-sec-caret { transform: rotate(90deg); }

/* Inline add (+) button. */
.pf-sec-add { cursor: pointer; }
.pf-sec-add svg { width: 16px; height: 16px; }
.pf-sec-add:hover { color: var(--accent); background: var(--surface-2); }

/* Toggle chips for picking people / documents in the New space form. */
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chip {
  font-size: 13.5px; padding: 5px 11px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); cursor: pointer;
}
.pick-chip:hover { border-color: var(--accent); color: var(--text); }
.pick-chip.on { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }

/* A Space's description, shown atop its board. */
.ph-desc { font-size: 15px; color: var(--text-2); line-height: 1.5; white-space: pre-wrap; margin-bottom: 4px; }

/* ---------- Project task-list modal (timeline click) ---------- */
.ptl-list { display: flex; flex-direction: column; gap: 8px; }
.ptl-group-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); font-weight: 600; margin: 10px 0 2px; }
.ptl-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; }
.ptl-row:hover { background: var(--surface-2); }
.ptl-row .pt-title { flex: 1; font-size: 17.5px; }
.ptl-row .pt-badge { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- Project progress header (board) ---------- */
.proj-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 20px 22px; margin-bottom: 26px; }

/* ---------- Compact project resources bar (people · documents · SOPs · meetings) ---------- */
/* Sits under the goal as supporting metadata; the divider only shows when something precedes it. */
.proj-header > .res-bar:not(:first-child) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.res-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 22px; }
.res-grp { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.res-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 240px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font-size: 14.5px; line-height: 1.4; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.res-chip:hover { border-color: var(--accent); background: var(--surface); }
.res-chip:hover > .ic { color: var(--accent); }
.res-chip > .ic { color: var(--text-3); flex: 0 0 auto; }
/* People are shown as just their avatar (name on hover), with a removable × badge for members. */
.res-person { display: inline-flex; align-items: center; flex: 0 1 auto; gap: 5px; min-width: 0; max-width: 144px; min-height: 32px; padding: 0 4px; border-radius: 16px; background: var(--surface-2); }
.res-person .avatar { width: 20px; height: 20px; font-size: 10px; }
.res-person-name { min-width: 0; overflow: hidden; color: var(--text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.res-person-x { position: static; display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; }
.res-person-x:hover { background: var(--surface); color: var(--text); }
.res-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-chip-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--accent); }
.res-chip-x { color: var(--text-3); font-size: 16px; line-height: 1; margin-left: 1px; padding: 0 1px; cursor: pointer; border-radius: 4px; }
.res-chip-x:hover { color: var(--danger); }
/* On pointer devices the remove "×" is revealed on hover to keep chips clean; always shown on touch. */
@media (hover: hover) {
  .res-chip-x { opacity: 0; max-width: 0; margin-left: 0; overflow: hidden; transition: opacity 0.12s; }
  .res-chip:hover .res-chip-x, .res-chip:focus-within .res-chip-x { opacity: 1; max-width: 20px; margin-left: 1px; }
}
.res-empty { color: var(--text-3); font-size: 14.5px; }
.res-attach { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 9px; border-radius: var(--radius-pill); border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.res-attach:hover { border-color: var(--accent); color: var(--accent); border-style: solid; background: var(--surface); }
.res-attach > .ic { flex: 0 0 auto; }
/* "+ Attach" menu popup rows. */
.attach-opt { align-items: center; }
.attach-opt-emoji { font-size: 22px; line-height: 1; width: 30px; text-align: center; flex: 0 0 auto; }
.attach-opt-text { display: flex; flex-direction: column; min-width: 0; }
.attach-opt-label { font-size: 16.5px; font-weight: 600; }
.attach-opt-sub { font-size: 13px; color: var(--text-3); }
@media (max-width: 600px) { .res-bar { gap: 8px 16px; } }

/* Attached meeting-notes strip at the top of a project board. */
.proj-meetings { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 24px; }
.pm-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.pm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 16px; cursor: pointer; box-shadow: var(--shadow-1); }
.pm-chip:hover { border-color: var(--accent); }
.pm-chip-ico { font-size: 16px; line-height: 1; }
.pm-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-chip-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 700; color: var(--accent); }
/* ---------- Shared-with-me strip (inbox/My Tasks board only) ---------- */
.shared-strip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 12px 16px; margin-bottom: 18px; }
.shared-strip-header { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.shared-tasks-list { display: flex; flex-direction: column; gap: 2px; }
.shared-task-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 7px 10px; font-size: 17.5px; color: var(--text); cursor: pointer; transition: background 0.1s, border-color 0.1s; }
.shared-task-row:hover { background: var(--surface-2); border-color: var(--border); }
.shared-task-status { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-3); }
.shared-task-status--doing { background: var(--accent); }
.shared-task-status--done { background: var(--green); }
.shared-task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-task-project { font-size: 15px; color: var(--text-3); white-space: nowrap; flex: 0 0 auto; }
.proj-header .ph-top { display: flex; align-items: flex-start; gap: 14px; }
.proj-header .ph-main { flex: 1; min-width: 0; }
.proj-header .ph-kind { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); }
.proj-header .ph-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.proj-header .ph-obj { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.3; letter-spacing: -0.01em; }
.proj-header .ph-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.progress-line { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.progress-track { flex: 1; height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; position: relative; }
.progress-fill { height: 100%; border-radius: 6px; transition: width 0.4s ease; }
.progress-expected { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(60,64,67,0.45); }
.progress-pct { font-size: 17.5px; font-weight: 600; width: 42px; text-align: right; }
.health-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); color: #fff; }
/* Projected-finish forecast line (replaces the in-header progress bar). */
.ph-forecast { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.ph-forecast.empty { color: var(--text-3); font-size: 16px; }

/* Project header meta: who's on it + reference documents. */
.ph-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.ph-people, .ph-docs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ph-people > .ic, .ph-docs > .ic { color: var(--text-3); flex: 0 0 auto; }
.ph-avatars { display: flex; align-items: center; }
.ph-avatars .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.ph-avatars .avatar:first-child { margin-left: 0; }
.ph-empty { color: var(--text-3); font-size: 16px; }
.ph-add { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2); cursor: pointer; flex: 0 0 auto; }
.ph-add:hover { color: var(--accent); border-color: var(--accent); }
.ph-doc-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ph-doc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-size: 15.5px; cursor: pointer; }
.ph-doc-chip:hover { border-color: var(--accent); }
.ph-doc-emoji { flex: 0 0 auto; }
.ph-doc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-doc-x { color: var(--text-3); font-size: 19px; line-height: 1; padding: 0 1px; }
.ph-doc-x:hover { color: var(--danger); }
.ph-forecast .fc-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; color: var(--text-2); }
.ph-forecast .fc-finish { font-size: 17.5px; font-weight: 600; }
.ph-forecast .fc-pill { margin-left: auto; display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); color: #fff; }
.kr-list { display: flex; flex-direction: column; gap: 1px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.kr-row { display: flex; align-items: center; gap: 12px; font-size: 16px; cursor: pointer; padding: 7px 9px; margin: 0 -9px; border-radius: var(--radius-sm); transition: background 0.12s; }
.kr-row:hover { background: var(--surface-2); }
/* The left box is the checkbox AND the target badge: a number until done, a check when done. */
.kr-check { min-width: 22px; height: 24px; padding: 0 7px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--text-2); font-size: 12.5px; font-weight: 700; line-height: 1; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.kr-check.has-target { min-width: 30px; }
.kr-row:hover .kr-check { border-color: var(--accent); }
.kr-row.done .kr-check { background: var(--green); border-color: var(--green); color: #fff; }
.kr-row.done .kr-text { color: var(--text-3); text-decoration: line-through; }
.kr-text { flex: 1; min-width: 0; }

.tag.effort { background: #f3e8fd; color: #8430ce; }

/* ---------- OKR creation toggle ---------- */
.seg { display: flex; gap: 6px; }
.seg-opt { flex: 1; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px; font-size: 16px; font-weight: 500; color: var(--text-2); background: var(--surface); cursor: pointer; }
.seg-opt.active { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
.kr-inputs { display: flex; flex-direction: column; gap: 8px; }
.kr-input-row { display: flex; gap: 8px; }
.kr-input-row .input:first-child { flex: 2; }
.kr-input-row .input:nth-child(2) { flex: 1; }

/* ---------- Settings ---------- */
.provider-status { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.settings-wrap { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.set-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 20px 22px; }
.set-card-head { margin-bottom: 14px; }
.set-card-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.set-card-head p { margin: 4px 0 0; font-size: 16px; }
.set-card .field { margin-bottom: 14px; }
.set-card .field:last-child { margin-bottom: 0; }
.set-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 17px; }

/* Appearance swatches (accent + background pickers). */
.appearance-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius); font-size: 16px; color: var(--text); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.swatch:hover { border-color: var(--accent); }
.swatch.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 500; }
.swatch-dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(127,127,127,0.35); }
.swatch-label { line-height: 1; }
.botfather { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px; }
.botfather summary { cursor: pointer; padding: 10px 0; font-size: 16px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 8px; list-style: none; }
.botfather summary::-webkit-details-marker { display: none; }
.botfather ol { margin: 0 0 12px; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.botfather li { margin: 4px 0; }
.team-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.team-row:last-child { border-bottom: none; }
.admin-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--text-2); cursor: pointer; }
.team-add { border-top: 1px solid var(--border); padding-top: 14px; }
.nav-item.settings-nav { margin-top: 4px; }

/* ---------- Meetings ---------- */
.meeting-modal { width: 680px; }
.meeting-summary { font-size: 17.5px; line-height: 1.5; margin-bottom: 16px; }
.meeting-banner { margin-bottom: 14px; padding: 8px 12px; border-radius: var(--radius-sm); background: #e7f5ea; color: #1e6b35; font-size: 15.5px; }
.meet-list { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.meet-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-1); cursor: pointer; }
.meet-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.meet-icon { width: 38px; height: 38px; border-radius: 10px; background: #f3e8fd; display: grid; place-items: center; font-size: 22.5px; flex: 0 0 auto; }
.meet-title { font-size: 17.5px; font-weight: 600; }
.meet-sub { font-size: 15.5px; color: var(--text-3); }
.meet-speaker { margin-bottom: 10px; }
.meet-speaker-name { font-size: 16px; font-weight: 600; color: var(--accent); }
.meet-speaker ul { margin: 4px 0 0; padding-left: 20px; font-size: 17px; line-height: 1.5; }
.meet-action { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 17px; }
.meet-action:last-child { border-bottom: none; }

.rec-bar { display: flex; align-items: center; gap: 10px; background: #323639; color: #fff; padding: 10px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-pop); font-size: 17px; }
.rec-bar .btn { margin-left: 6px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ea4335; animation: pulse 1.2s infinite; }
.rec-dot.processing { background: #4285f4; } /* recording (red) → transcribing/working (blue) */
.rec-label { font-weight: 600; }
.rec-timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-status { color: #cfd2d6; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ============================================================
   Responsive / mobile — off-canvas sidebar, collapsing topbar,
   bottom-sheet modals, safe-area insets, and touch tuning.
   ============================================================ */
@media (max-width: 860px) {
  :root { --topbar-h: 56px; }

  /* Single-column shell; the sidebar becomes an off-canvas drawer. The desktop collapse toggle and
     its persisted state are irrelevant here — neutralise both so a collapsed desktop session that's
     later opened narrow still shows the drawer normally. */
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar-footer .sidebar-toggle,
  .topbar .sidebar-expand { display: none; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    z-index: 60;
    box-shadow: var(--shadow-pop);
    padding-top: max(16px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .app-shell.nav-open .sidebar { transform: none; }

  .scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
  }
  .app-shell.nav-open .scrim { opacity: 1; visibility: visible; }

  /* Topbar: hamburger + title + primary actions; drop desktop-only chrome. */
  .topbar .nav-toggle { display: inline-grid; margin-left: -6px; flex: 0 0 auto; }
  .topbar {
    gap: 10px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
  }
  .topbar h2 { font-size: 21.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .search { display: none; }       /* per-view filter hidden on mobile to save room */
  .topbar .btn-label { display: none; }     /* New task / Edit project collapse to icon-only */
  .topbar .btn { padding: 9px; }
  .topbar .gchip-label { display: none; }   /* Google chip → icon-only */
  .topbar .gchip { padding: 8px; }

  /* Content padding + safe areas. */
  .content {
    padding: 16px max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  /* Single-column board. */
  .board { grid-template-columns: 1fr; gap: 14px; }

  /* Prevent iOS zoom-on-focus (inputs must be >=16px). */
  .field input, .input, textarea, select { font-size: 20px; }

  /* Larger touch targets. */
  .iconbtn { width: 40px; height: 40px; }
  .nav-item { padding: 11px 14px; }

  /* Forms stack instead of sitting side-by-side. */
  .form-row { flex-direction: column; gap: 14px; }

  /* Modals become bottom sheets. */
  .modal-overlay { padding: 0; place-items: end stretch; }
  .modal {
    width: 100%; max-width: 100%;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheet 0.22s ease;
  }
  .modal-sm, .meeting-modal { width: 100%; }
  @keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
  .modal-head { padding: 18px 18px 12px; }
  .modal-body { padding: 0 18px 8px; }
  .modal-foot { padding: 14px 18px max(16px, env(safe-area-inset-bottom)); flex-wrap: wrap; }

  /* Toasts clear the safe area and never overflow. */
  .toast-root { bottom: max(20px, env(safe-area-inset-bottom)); left: 16px; right: 16px; transform: none; }
  .toast { width: fit-content; max-width: 100%; margin: 0 auto; }

  .rec-bar { flex-wrap: wrap; }

  /* Timeline: tighter sticky label column so day cells stay visible. */
  .tl-rowlabel-col, .tl-rowlabel { width: 132px; flex-basis: 132px; }
  .tl-month-label { left: 140px; }

  /* Settings team rows: avatar + name on the first line, the Admin/Super/Remove controls wrap below. */
  .team-row { flex-wrap: wrap; row-gap: 8px; }
  .team-row > div[style*="flex"] { min-width: 60%; }

  /* Metrics: drop the non-essential Owner + Source columns on phones (table still scrolls if needed). */
  .metrics-table .col-owner, .metrics-table .col-source { display: none; }
  .metrics-table th, .metrics-table td { padding: 11px 10px; font-size: 14px; }

  /* Documents / SOP header: title + breadcrumb stack, the toolbar buttons wrap full-width below. */
  .docs-title { font-size: 24px; }
  .docs-actions-group, .docs-selbar { width: 100%; flex-wrap: wrap; }
  .docs-actions-group .btn { flex: 1 1 auto; justify-content: center; }

  /* Mobile is view-only for account chrome — Settings (and appearance) are desktop-only. */
  .sidebar .nav-system { display: none; }

  /* Document editor — tabs become an off-canvas drawer; the page takes the full width.
     NOTE: prefixed with .editor-overlay so these beat the base .editor-bar / .doc-tabs rules, which
     appear LATER in the file (equal specificity → later wins, which would otherwise clobber these). */
  .editor-overlay .editor-body { position: relative; }
  .editor-overlay .doc-tabs { position: absolute; top: 0; left: 0; bottom: 0; width: min(78vw, 280px); z-index: 30; box-shadow: var(--shadow-pop); }
  /* Clear the notch / Dynamic Island: push the bar's content below the safe-area inset (+ a little gap). */
  .editor-overlay .editor-bar { gap: 4px; padding: 6px 8px; padding-top: calc(env(safe-area-inset-top) + 8px); }
  .editor-overlay .editor-bar .editor-title { min-width: 0; flex: 1 1 auto; }
  .editor-overlay .editor-bar > div[style*="flex"] { display: none; }   /* desktop spacer */
  .editor-overlay .editor-bar .page-indicator { display: none; }        /* "Page X of Y" — too verbose for phones */
  .editor-overlay .editor-bar .btn { padding: 8px 10px; }
  /* Keep the page clear of the home indicator at the bottom. */
  .editor-overlay .univer-host, .editor-overlay .quill-host { padding-bottom: env(safe-area-inset-bottom); }
}

/* Very small phones. */
@media (max-width: 400px) {
  .content { padding: 12px 10px max(16px, env(safe-area-inset-bottom)); }
  .login-card { padding: 28px 20px 22px; }
  .status-select { flex-wrap: wrap; }
}

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

.editor-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--surface, #fff); }
.editor-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border, #e5e7eb); font-size: 14px; }
/* Every text item on the top bar is the SAME size (the Share .btn was 17.5px — much bigger). */
.editor-bar .editor-title { font-size: 14px; }
.editor-bar .btn { font-size: 14px; padding: 6px 13px; }
.editor-bar .zoom-select { font-size: 14px; }
.editor-bar .page-indicator { font-size: 14px; }
.editor-title { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; min-width: 220px; background: transparent; color: inherit; }
.editor-title:focus { border-color: var(--border, #e5e7eb); outline: none; }
.univer-host { flex: 1; min-height: 0; min-width: 0; position: relative; }
/* Opaque so it fully covers the host while the editor mounts underneath — no empty "flicker to nothing". */
.editor-loading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: var(--text-3, #9aa0a6); font-size: 15px; background: #fff; }
.editor-overlay.editor-dark .editor-loading { background: #16161c; }
/* Excalidraw (map) host — fill the available space; Excalidraw sizes to its container. */
.excalidraw-host { height: 100%; min-height: 0; background: #fff; }
.excalidraw-host > div, .excalidraw-host .excalidraw { height: 100%; width: 100%; }
/* Editor body = left Document Tabs panel + the editor host. */
.editor-body { flex: 1; min-height: 0; display: flex; }
.doc-tabs { flex: 0 0 240px; width: 240px; overflow-y: auto; padding: 10px 8px; }
.editor-overlay.tabs-hidden .doc-tabs { display: none; }
.tabs-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px 10px; }
.tabs-add { background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1; color: inherit; padding: 0 6px; border-radius: 6px; }
.tabs-add:hover { background: rgba(128, 128, 128, 0.16); }
.tabs-list { display: flex; flex-direction: column; gap: 2px; }
.doc-tab { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.doc-tab .tab-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-tab.editing { padding: 4px 6px; }
.tab-rename { width: 100%; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid #1a73e8; border-radius: 6px; outline: none; }
.tab-menu-btn { background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1; opacity: 0; padding: 0 4px; color: inherit; border-radius: 4px; }
.doc-tab:hover .tab-menu-btn, .doc-tab.active .tab-menu-btn { opacity: .6; }
.tab-menu-btn:hover { opacity: 1; }
.tab-menu { background: #fff; border: 1px solid #e3e5ea; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); padding: 4px; z-index: 1200; min-width: 124px; }
.tab-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: 6px; color: #3c4043; }
.tab-menu-item:hover { background: #eef0f2; }
.tab-menu-item.danger { color: #d93025; }
.zoom-select { font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid #e3e5ea; border-radius: 6px; cursor: pointer; width: auto; flex: 0 0 auto; }
.page-indicator { font-size: 12.5px; margin-right: 10px; white-space: nowrap; }

/* The editor presents as a LIGHT document by default (Google-Docs style), independent of the app's
   dark theme. Settings → Editor theme = Dark switches it to .editor-dark. */
.editor-overlay.editor-light { background: #fff; }
.editor-overlay.editor-light .editor-bar { background: #fff; border-bottom-color: #e3e5ea; color: #1f2330; }
.editor-overlay.editor-light .editor-title { color: #1f2330; }
.editor-overlay.editor-light .editor-title:focus { border-color: #cfd3d9; }
.editor-overlay.editor-light .doc-tabs { background: #f8f9fa; border-right: 1px solid #e3e5ea; }
.editor-overlay.editor-light .tabs-head { color: #5f6368; }
.editor-overlay.editor-light .doc-tab { color: #3c4043; }
.editor-overlay.editor-light .doc-tab:hover { background: #eef0f2; }
.editor-overlay.editor-light .doc-tab.active { background: #d3e3fd; color: #041e49; }
.editor-overlay.editor-light .zoom-select { background: #fff; color: #1f2330; }
.editor-overlay.editor-light .page-indicator, .editor-overlay.editor-light .save-state { color: #5f6368; }
.editor-overlay.editor-light .editor-bar .btn-ghost { color: #444746; background: none; }
.editor-overlay.editor-light .editor-bar .btn-ghost:hover { background: #eef0f2; }
.editor-overlay.editor-light .editor-bar .btn { background: #f1f3f4; color: #1f2330; border-color: #e3e5ea; }
.editor-overlay.editor-light .editor-bar .btn:hover { background: #e3e6ea; }
/* Univer's font-name / font-size toolbar fields render plain (un-coloured) text that INHERITS the
   page colour — in the app's dark theme that's white, which vanishes on Univer's white light-mode
   toolbar. Force dark text for the whole sheet UI in light editor mode. The canvas cells are
   unaffected (Univer paints them via its own renderer, not CSS colour). */
.editor-overlay.editor-light .univer-host { color: #1f2330; }
/* ⚠️ THE real white-on-white fix. The app's dark theme sets `color-scheme: dark` on :root (for dark
   scrollbars/native controls). Univer renders each dropdown OPTION as an `appearance-none <button>`
   with NO explicit text colour — so it falls back to the UA `ButtonText` system colour, which under
   `color-scheme: dark` is WHITE. On Univer's white light-mode panels that's white-on-white (the font /
   number-format menus showed blank with only their grey ⓘ icons). Univer's light surfaces are always
   light-panelled, so pin a light colour-scheme on them → native button text defaults to dark. Covers
   the in-host editor AND the dropdowns, which Univer PORTALS to <body> via Radix (escaping .univer-host
   and .univer-dark, so they're white in BOTH editor themes → light scheme is always correct for them). */
.editor-overlay.editor-light .univer-host,
.univer-popup,
[data-radix-popper-content-wrapper] { color-scheme: light; }

.editor-overlay.editor-dark { background: #16161c; }
.editor-overlay.editor-dark .editor-bar { background: #1e1e24; border-bottom-color: #33333d; color: #e6e6ea; }
.editor-overlay.editor-dark .editor-title { color: #e6e6ea; }
.editor-overlay.editor-dark .editor-title:focus { border-color: #44444f; }
.editor-overlay.editor-dark .doc-tabs { background: #1a1a20; border-right: 1px solid #33333d; }
.editor-overlay.editor-dark .tabs-head { color: #9aa0a6; }
.editor-overlay.editor-dark .doc-tab { color: #c7c7d1; }
.editor-overlay.editor-dark .doc-tab:hover { background: #26262e; }
.editor-overlay.editor-dark .doc-tab.active { background: #1f3a5f; color: #d3e3fd; }
.editor-overlay.editor-dark .zoom-select { background: #1e1e24; color: #e6e6ea; border-color: #33333d; }
.editor-overlay.editor-dark .page-indicator, .editor-overlay.editor-dark .save-state { color: #9aa0a6; }
.editor-overlay.editor-dark .tab-menu { background: #1e1e24; border-color: #33333d; }
.editor-overlay.editor-dark .tab-menu-item { color: #e6e6ea; }
.editor-overlay.editor-dark .tab-menu-item:hover { background: #2a2a33; }
.editor-overlay.editor-dark .editor-bar .btn-ghost { color: #c7c7d1; background: none; }
.editor-overlay.editor-dark .editor-bar .btn-ghost:hover { background: #26262e; }
.editor-overlay.editor-dark .editor-bar .btn { background: #2a2a33; color: #e6e6ea; border-color: #33333d; }
/* Docs + sheets both mount full-width into the host; Univer paints its own canvas (a doc renders the
   centred A4 page itself). NB: the old .doc-desk/.doc-sheet 794px wrapper was removed — it boxed
   Univer's whole UI into 794px, cramping the toolbar and adding a stray horizontal scrollbar. */
.docs-crumbs { display: flex; align-items: center; gap: 6px; }
.crumb { background: none; border: 0; color: var(--accent, #1a73e8); cursor: pointer; font: inherit; padding: 2px 4px; }
.crumb-sep { color: var(--muted, #9aa0a6); }
/* Breadcrumbs sit beside the big "Documents" title, so size them up to match. */
.docs-titlebar .docs-crumbs { font-size: 16px; }
.docs-titlebar .crumb { padding: 2px 5px; border-radius: 6px; }
.docs-titlebar .crumb:hover { background: var(--accent-weak, #eef4ff); }
.folder-card { cursor: pointer; }
.editor-lock-banner { font-size: 16px; color: #b45309; background: #fef3c7; padding: 4px 10px; border-radius: 6px; }
.share-list { margin-top: 14px; display: flex; flex-direction: column; }
.share-row { display:flex; align-items:center; gap:8px; padding:6px 0; }
.share-row .share-url { flex:1; font-size: 15px; padding:4px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); }
.share-perm { font-size: 15px; color: var(--text-2); min-width:58px; }
.share-actions { display:flex; gap:8px; }
.share-section-label { font-size: 15px; font-weight: 600; color: var(--text-2); margin: 0 0 8px; }
.share-people { display: flex; flex-direction: column; gap: 6px; }
.share-person-wrap { display: flex; flex-direction: column; gap: 4px; }
.share-person { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 12px 7px 7px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius); font-size: 15.5px; color: var(--text); cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.share-person:hover { border-color: var(--accent); }
.share-person:disabled { opacity: 0.6; cursor: default; }
.share-person-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-person-state { font-size: 12.5px; color: var(--text-3, #9aa0a6); }
/* Granted = persistent glow/outline. */
.share-person.granted { border-color: var(--accent); background: var(--accent-weak); box-shadow: 0 0 0 2px var(--accent-weak); }
.share-person.granted .share-person-state { color: var(--accent); font-weight: 600; }
.share-email-row { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 2px 38px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.share-restrict { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; color: var(--text); cursor: pointer; }
.share-link-chips { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.share-link-chip { font-size: 13px; color: var(--text-2); }
.linklike { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; padding: 0; text-decoration: underline; }
.share-sep { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
/* View-only share page: hide the editing toolbar (typing is already blocked in shareApp.js). */
.share-readonly .univer-toolbar, .share-readonly [class*="univer-menubar"], .share-readonly [class*="univer-ribbon"] { display: none !important; }

/* ---------- Calendar time-grid (today / 3-day / week) ---------- */
.cal2 { display: flex; height: calc(100dvh - var(--topbar-h) - 36px); min-height: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
/* Timeline roadmap and the Calendar time-block workspace. */
.plan-wrap { display: flex; flex-direction: column; gap: 44px; padding: 16px 16px 48px; }
/* Time-block = a 50/50 split: My-Tasks-style task panel | calendar. align-items:flex-start so the
   (very tall) full-day calendar doesn't stretch the task panel to match. */
.plan-timeblock { display: flex; gap: 30px; align-items: flex-start; }
/* The calendar is bounded + scrollable, and sticks while you scroll the task list to drag onto it. */
.plan-timeblock > .plan-cal { flex: 1 1 50%; min-width: 0; position: sticky; top: 0; align-self: flex-start; }
.plan-cal .cal2.cal2-embedded { height: calc(100dvh - 200px); min-height: 520px; }
/* The task panel shows ALL projects + tasks in full — no internal scrollbars, roomy spacing. */
.plan-tasks { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.plan-tasks-sel { display: flex; flex-direction: column; gap: 5px; padding: 16px 14px 12px; border-bottom: 1px solid var(--border); }
.plan-tasks-sel .cal2-rail-sel { padding: 9px 12px; }
.plan-tasks-list { padding: 14px 14px 22px; }
.plan-tasks-list .task-row { padding: 14px 16px; }
.plan-tasks-list .cal2-rail-label { padding: 16px 8px 6px; }
.plan-tasks-list .cal2-rail-label:first-child { padding-top: 4px; }
/* Timeline calendar grows to fit the WHOLE day — the page scrolls, no internal scrollbar. */
.cal2.cal2-fit { height: auto; min-height: 0; overflow: visible; }
.cal2.cal2-fit .cal2-scroll { flex: 0 0 auto; overflow: visible; }
/* Board calendar fills its (fixed-height) sticky panel and scrolls internally. */
.cal2.cal2-embedded { height: 100%; min-height: 0; }
/* Board calendar: a flush right-hand rail, not a floating card. Drop the card border/radius/shadow
   and the toolbar underline so it joins the top cleanly (no doubled line at the top); keep a single
   left divider to separate it from the task list. */
.board-cal .cal2-embedded { border: none; border-radius: 0; box-shadow: none; border-left: 1px solid var(--border); }
.board-cal .cal2-toolbar-min { border-bottom: none; }
@media (max-width: 900px) {
  .plan-timeblock { flex-direction: column; }
}

/* ============================================================================
   Keyboard-first creation and quiet secondary workspaces
   ========================================================================== */

.project-modal { width: 600px; }
.project-modal .modal-head { align-items: center; padding: 17px 18px 11px; }
.project-name-input {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.015em;
  box-shadow: none;
}
.project-name-input:focus { border: 0; box-shadow: none; }
.project-modal .modal-body { gap: 13px; }
.project-modal .project-okr-block { display: flex; flex-direction: column; gap: 13px; }
.project-modal textarea { min-height: 66px; }
.project-modal .field > span { color: var(--text-3); font-size: 11px; font-weight: 500; }
.project-modal .project-dates { gap: 8px; }
.project-modal .project-dates .input { padding-inline: 8px; font-size: 12px; }
.project-modal .seg { padding: 2px; border: 1px solid var(--border); border-radius: 8px; }
.project-modal .seg-opt { padding: 5px 8px; }
.project-modal .seg-opt.active { background: var(--surface-2); }
.project-modal .kr-inputs { gap: 4px; }
.project-modal .kr-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 106px 24px; gap: 6px; }
.project-modal .kr-input-row .input { min-width: 0; padding: 7px 9px; background: transparent; }
.project-modal .kr-remove { width: 24px; height: 32px; padding: 0; color: var(--text-3); opacity: 0; }
.project-modal .kr-input-row:hover .kr-remove,
.project-modal .kr-remove:focus { opacity: 1; }
.project-add-kr,
.project-doc-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  min-height: 28px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  text-align: left;
}
.project-add-kr:hover,
.project-doc-picker-btn:hover { background: var(--surface-2); color: var(--text); }
.project-doc-picker-btn .ic:last-child { margin-left: 4px; color: var(--text-3); }
.project-doc-picker-list { min-height: 180px; max-height: 330px; }
.project-picker-row { width: 100%; border: 0; background: transparent; color: var(--text-2); text-align: left; }
.project-picker-row:hover,
.project-picker-row.selected { background: var(--surface-2); color: var(--text); }
.project-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-doc-picker .modal-foot { border-top: 1px solid var(--border); }
.project-modal .pick-chip { padding: 5px 8px; border-color: var(--border); background: transparent; font-size: 12px; }
.project-modal .pick-chip.on { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }

/* SOPs read like a file list: the icon already communicates folder/type. */
.content[data-view="sop"] .docs-grid { max-width: 820px; }
.content[data-view="sop"] .doc-card { min-height: 48px; }
.content[data-view="sop"] .doc-card-art { height: 47px; }
.content[data-view="sop"] .doc-card-foot { padding-left: 5px; }
.content[data-view="sop"] .doc-name { font-size: 13.5px; }
.content[data-view="sop"] .doc-meta { margin-top: 1px; color: var(--text-3); }

/* Assets use the same restrained connection-row language as Codex integrations. */
.content[data-view="assets"] { max-width: 900px; }
.assets-section-label { color: var(--text-3); font-size: 11px; font-weight: 550; }
.assets-apps { margin: 0 0 24px; }
.assets-app-list { margin-top: 7px; border-top: 1px solid var(--border); }
.asset-app-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.asset-app-row:hover { background: var(--surface-2); }
.asset-app-row .lc-head { display: flex; align-items: center; gap: 9px; }
.asset-app-row .lc-title { font-size: 13.5px; font-weight: 550; }
.asset-app-row .lc-url { color: var(--text-3); font-size: 12px; }
.asset-app-row.unavailable { cursor: default; }
.asset-app-state { color: var(--text-3); font-size: 11px; }
.assets-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.content[data-view="assets"] .vsec { margin: 0; padding: 12px 4px; }
.content[data-view="assets"] .vsec-head { gap: 9px; }
.content[data-view="assets"] .vsec-sym { display: inline-flex; color: var(--text-2); }
.content[data-view="assets"] .vsec-actions { opacity: 0; transition: opacity 120ms ease; }
.content[data-view="assets"] .vsec:hover .vsec-actions,
.content[data-view="assets"] .vsec:focus-within .vsec-actions { opacity: 1; }
.content[data-view="assets"] .vsec-add { gap: 2px; border-top-style: solid; }
.content[data-view="assets"] .vsec-add .btn { border: 0; background: transparent; color: var(--text-3); }
.content[data-view="assets"] .vsec-add .btn:hover { background: var(--surface-2); color: var(--text); }

/* Metrics stay data-dense without looking like a dashboard card. */
.content[data-view="metrics"] { max-width: 980px; }
.metrics-toolbar { margin-bottom: 8px; }
.metrics-table-wrap,
.metrics-table { border-radius: 0; }
.metrics-table { border-width: 1px 0 0; background: transparent; }
.metrics-table th { padding: 8px 12px; }
.metrics-table td { padding: 11px 12px; }
.metric-row:hover td { background: var(--surface-2); }
.src { padding: 0; border: 0; background: transparent; color: var(--text-3); }

/* Preferences are grouped as deliberate rows instead of a loose stack of pills. */
.settings-pages .appearance-swatches { gap: 4px; }
.settings-pages .set-card[data-settings-section="appearance"] > .field {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.settings-pages .set-card[data-settings-section="appearance"] > .field > span { color: var(--text-2); }
.settings-pages .set-card[data-settings-section="appearance"] .swatch { border-color: transparent; background: transparent; }
.settings-pages .set-card[data-settings-section="appearance"] .swatch:hover,
.settings-pages .set-card[data-settings-section="appearance"] .swatch.on { background: var(--surface-2); }
.settings-pages .team-row { min-height: 48px; padding: 8px 0; }
.settings-pages .team-add { padding: 12px 0; border-top: 1px solid var(--border); }

/* Ascend retains its identity, but the controls use the app's quiet surfaces and typography. */
.content[data-view="forge"] .forge-vista { border-radius: 10px 10px 0 0; box-shadow: none; }
.content[data-view="forge"] .forge-hud { border-color: var(--border); border-radius: 0 0 10px 10px; background: var(--surface); }
.content[data-view="forge"] .hud-card,
.content[data-view="forge"] .goal-row .forge-goal,
.content[data-view="forge"] .ql-note { border-color: var(--border); background: var(--bg); box-shadow: none; }
.content[data-view="forge"] .forge-lbl { font-family: inherit; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.content[data-view="forge"] .ql-chip { border-color: var(--border); border-radius: 7px; background: transparent; color: var(--text-2); }
.content[data-view="forge"] .ql-chip.on { background: var(--surface-2); color: var(--text); box-shadow: none; }
.content[data-view="forge"] .ql-log { padding: 9px 12px; border: 0; border-radius: 7px; background: var(--text); color: var(--bg); box-shadow: none; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.content[data-view="forge"] .ql-log:hover { transform: none; box-shadow: none; }

@media (max-width: 720px) {
  .project-modal .project-dates { display: grid; grid-template-columns: 1fr 1fr; }
  .project-modal .project-dates .field:last-child { grid-column: 1 / -1; }
  .asset-app-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .asset-app-row .lc-url { grid-column: 1 / -1; }
  .settings-pages .set-card[data-settings-section="appearance"] > .field { display: flex; align-items: stretch; }
}
.cal2-side { width: 210px; flex: 0 0 210px; border-right: 1px solid var(--border); overflow-y: auto; padding: 12px; }
.cal2-side-h { font-size: 15px; color: var(--text-2); margin-bottom: 12px; font-weight: 600; line-height: 1.35; }
.cal2-rail-group { margin-bottom: 16px; }
.cal2-rail-label { font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-bottom: 6px; }
.cal2-rail-item { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); margin-bottom: 5px; cursor: grab; font-size: 16px; }
.cal2-rail-item:hover { border-color: var(--accent); }
.cal2-rail-item.dragging { opacity: 0.5; }
.ri-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ri-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rail selector: "My Tasks" + project rows. Click selects whose tasks show below. */
.cal2-rail-sel-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.cal2-rail-sel { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border-radius: var(--radius); background: transparent; border: 0; color: var(--text-2); font-size: 15px; text-align: left; cursor: grab; }
.cal2-rail-sel .ic { color: var(--text-3); flex: 0 0 auto; }
.cal2-rail-sel .ri-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal2-rail-sel:hover { background: var(--surface-2); color: var(--text); }
.cal2-rail-sel.active { background: var(--surface-2); color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.cal2-rail-sel.dragging { opacity: 0.5; }
/* A faint vertical grip on hover — signals "drag me onto the calendar". */
.ri-grip { margin-left: auto; color: var(--text-3); opacity: 0; transform: rotate(90deg); flex: 0 0 auto; transition: opacity 0.1s; }
.cal2-rail-sel:hover .ri-grip { opacity: 0.5; }
.cal2-rail-divider { height: 1px; background: var(--border); margin: 6px 0 12px; }
.cal2-rail-tasks { display: flex; flex-direction: column; }
.cal2-rail-tasks .cal2-rail-label { margin-top: 10px; }
.cal2-rail-tasks .cal2-rail-label:first-child { margin-top: 0; }

/* Quill document editor fills the overlay and reflows full-width (mobile-friendly; no A4 page).
   The LIGHT skin sets explicit light colours (NOT var(--surface)/inherited) so a light document
   stays light even when the whole app is in dark mode — otherwise Quill Snow's transparent bg +
   inherited text made a "Light" editor render dark inside the dark app. .quill-dark overrides below. */
.quill-host { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #f1f3f4; }
.quill-host .ql-toolbar { position: sticky; top: 0; z-index: 1; flex-wrap: wrap; background: #f8f9fa; border-color: #e3e5ea; }
/* The scroll area is the "desk": a neutral grey behind the page, like Google Docs. */
.quill-host .ql-container { flex: 1; overflow-y: auto; font-size: 16px; border: none; background: #f1f3f4; }
/* .ql-editor is the PAGE — a centred white sheet with real margins, a soft edge + drop shadow, and
   breathing room above so text doesn't butt against the toolbar. */
.quill-host .ql-editor {
  /* position:relative so Quill's absolute "Start writing…" placeholder anchors to THIS page, not the
     full-width .ql-container (otherwise it floats off to the far left of the desk). */
  position: relative;
  /* Override Quill's default height:100% + overflow-y:auto so the PAGE grows to its content height and
     the .ql-container scrolls instead — required for a tall multi-page sheet, page guides, and the page
     counter to work (otherwise the page is a fixed-height box that scrolls internally). */
  height: auto; overflow: visible;
  max-width: 816px; width: 100%; margin: 28px auto 64px; padding: 64px 72px; min-height: 600px;
  background: #fff; color: #1f2330;
  border: 1px solid #e3e5ea; border-radius: 2px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.16), 0 6px 18px rgba(60, 64, 67, 0.1);
}
/* Keep the empty-doc placeholder aligned with the page's left/right margins. */
.quill-host .ql-editor.ql-blank::before { left: 72px; right: 72px; }
/* On phones, drop the page chrome and go edge-to-edge. */
@media (max-width: 640px) {
  .quill-host .ql-editor { margin: 0; padding: 16px; max-width: 100%; min-height: 0; border: none; border-radius: 0; box-shadow: none; }
  .quill-host .ql-editor.ql-blank::before { left: 16px; right: 16px; }
}

/* Phones: a compact 2-up card grid for Documents/SOP (one giant card per screen looks broken). */
@media (max-width: 560px) {
  .docs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .doc-card-art { height: 84px; }
  .doc-glyph { font-size: 34px; }
  .doc-glyph .ic { width: 38px; height: 38px; }
  .doc-glyph-img { width: 54px; height: 54px; border-radius: 12px; }
  .doc-card-foot { padding: 8px 10px; }
}

/* Univer (sheet) light-theme dropdowns/popups ship only a near-white border (#E3E5EA) and a
   box-shadow that resolves to fully transparent in the vendored build — so they have no visible
   edge against a white sheet. Restore a real shadow via the popup wrapper; drop-shadow follows the
   opaque panel's shape through Univer's transparent wrappers, and is harmless in dark mode. */
.univer-popup { filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.22)); }

/* ── Univer colour palette (vendored) ─────────────────────────────────────────────────────────
   Univer colours every bit of its text via Tailwind utilities like `.univer-text-gray-900 {
   color: var(--univer-gray-900) }`. Those palette variables are NOT in Univer's <link>ed CSS — the
   bundle defines them at runtime by injecting a `<style>:root{--univer-gray-900:#1B1C1F;…}` tag. In
   production that injected tag does not take effect (the toolbar font field needed a manual dark-text
   patch above for the same reason), so every `var(--univer-*)` text colour resolved to nothing and
   FELL BACK to the inherited page colour. In the app's dark theme that's near-white — so Univer's
   white light-mode dropdowns (portalled to <body>, escaping .univer-host) showed white-on-white: the
   font / number-format menus rendered as blank panels with only their grey ⓘ icons visible.
   FIX: define the palette ourselves, here in the reliably-<link>ed app CSS. Values are copied
   verbatim from Univer 0.25.0's own injected block, so if its runtime injection DOES land the values
   are identical (no conflict). One palette serves both editor themes — dark mode uses `dark:` variant
   utilities that pick the dark entries (gray-800/900), so nothing here needs inverting. */
:root {
  --univer-white: #FFFFFF; --univer-black: #000000;
  --univer-primary-50: #F3F5FF; --univer-primary-100: #E9EDFF; --univer-primary-200: #D2DAFA; --univer-primary-300: #BAC6F8; --univer-primary-400: #6280F9; --univer-primary-500: #466AF7; --univer-primary-600: #2C53F1; --univer-primary-700: #143EE3; --univer-primary-800: #083AD1; --univer-primary-900: #1033BF;
  --univer-gray-50: #F9FAFB; --univer-gray-100: #EEEFF1; --univer-gray-200: #E3E5EA; --univer-gray-300: #A8B0BD; --univer-gray-400: #7D8698; --univer-gray-500: #4E5565; --univer-gray-600: #31363F; --univer-gray-700: #272A2F; --univer-gray-800: #1F2124; --univer-gray-900: #1B1C1F;
  --univer-blue-50: #EBF5FF; --univer-blue-100: #E1EFFE; --univer-blue-200: #C3DDFD; --univer-blue-300: #A4CAFE; --univer-blue-400: #76A9FA; --univer-blue-500: #3F83F8; --univer-blue-600: #1C64F2; --univer-blue-700: #1A56DB; --univer-blue-800: #1E429F; --univer-blue-900: #233876;
  --univer-red-50: #FDF2F2; --univer-red-100: #FDE8E8; --univer-red-200: #FBD5D5; --univer-red-300: #F8B4B4; --univer-red-400: #F98080; --univer-red-500: #F05252; --univer-red-600: #E02424; --univer-red-700: #C81E1E; --univer-red-800: #9B1C1C; --univer-red-900: #771D1D;
  --univer-orange-50: #FFF8F1; --univer-orange-100: #FEECDC; --univer-orange-200: #FCD9BD; --univer-orange-300: #FDBA8C; --univer-orange-400: #FF8A4C; --univer-orange-500: #FF5A1F; --univer-orange-600: #D03801; --univer-orange-700: #B43403; --univer-orange-800: #8A2C0D; --univer-orange-900: #771D1D;
  --univer-yellow-50: #FDFCEA; --univer-yellow-100: #FFF4B9; --univer-yellow-200: #FCDC6A; --univer-yellow-300: #FAC815; --univer-yellow-400: #F1B312; --univer-yellow-500: #D49D0F; --univer-yellow-600: #AB7F0E; --univer-yellow-700: #9A6D15; --univer-yellow-800: #725213; --univer-yellow-900: #634312;
  --univer-green-50: #F3FAF7; --univer-green-100: #DEF7EC; --univer-green-200: #BCF0DA; --univer-green-300: #84E1BC; --univer-green-400: #31C48D; --univer-green-500: #0DA471; --univer-green-600: #057A55; --univer-green-700: #046C4E; --univer-green-800: #03543F; --univer-green-900: #014737;
  --univer-jiqing-50: #EDFAFA; --univer-jiqing-100: #D5F5F6; --univer-jiqing-200: #AFECEF; --univer-jiqing-300: #7EDCE2; --univer-jiqing-400: #16BDCA; --univer-jiqing-500: #0694A2; --univer-jiqing-600: #047481; --univer-jiqing-700: #036672; --univer-jiqing-800: #05505C; --univer-jiqing-900: #014451;
  --univer-indigo-50: #F3F5FF; --univer-indigo-100: #E9EDFF; --univer-indigo-200: #D2DAFA; --univer-indigo-300: #BAC6F8; --univer-indigo-400: #6280F9; --univer-indigo-500: #466AF7; --univer-indigo-600: #2C53F1; --univer-indigo-700: #143EE3; --univer-indigo-800: #083AD1; --univer-indigo-900: #1033BF;
  --univer-purple-50: #F6F5FF; --univer-purple-100: #EDEBFE; --univer-purple-200: #DCD7FE; --univer-purple-300: #CABFFD; --univer-purple-400: #AC94FA; --univer-purple-500: #9061F9; --univer-purple-600: #7E3AF2; --univer-purple-700: #6C2BD9; --univer-purple-800: #5521B5; --univer-purple-900: #4A1D96;
  --univer-pink-50: #FDF2F8; --univer-pink-100: #FCE8F3; --univer-pink-200: #FAD1E8; --univer-pink-300: #F8B4D9; --univer-pink-400: #F17EB8; --univer-pink-500: #E74694; --univer-pink-600: #D61F69; --univer-pink-700: #BF125D; --univer-pink-800: #99154B; --univer-pink-900: #751A3D;
}

/* Dark editor skin for documents (Settings → Editor theme = Dark). Quill's Snow theme is light-only,
   so we recolour it into a true dark editor: dark page + light text + dark toolbar/icons. */
.quill-host.quill-dark { background: #0e0e12; }
.quill-host.quill-dark .ql-toolbar { background: #1e1e24; border-color: #33333d; }
.quill-host.quill-dark .ql-container { background: #0e0e12; border: none; }
.quill-host.quill-dark .ql-editor { background: #16161c; color: #e6e6ea; border-color: #2a2a33; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.quill-host.quill-dark .ql-editor.ql-blank::before { color: #8a8a96; }
.quill-host.quill-dark .ql-editor a { color: #8ab4f8; }
.quill-host.quill-dark .ql-editor blockquote { border-left-color: #44444f; color: #c7c7d1; }
.quill-host.quill-dark .ql-editor pre.ql-syntax { background: #0d0d12; color: #e6e6ea; }
/* Toolbar icons + controls (Quill draws them as SVG stroke/fill) */
.quill-host.quill-dark .ql-snow .ql-stroke { stroke: #c7c7d1; }
.quill-host.quill-dark .ql-snow .ql-fill, .quill-host.quill-dark .ql-snow .ql-stroke.ql-fill { fill: #c7c7d1; }
.quill-host.quill-dark .ql-snow .ql-picker { color: #c7c7d1; }
.quill-host.quill-dark .ql-snow .ql-picker-options { background: #1e1e24; border-color: #33333d; }
.quill-host.quill-dark .ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: #44444f; color: #fff; }
.quill-host.quill-dark .ql-snow.ql-toolbar button:hover .ql-stroke,
.quill-host.quill-dark .ql-snow .ql-active .ql-stroke { stroke: #fff; }
.quill-host.quill-dark .ql-snow.ql-toolbar button:hover .ql-fill,
.quill-host.quill-dark .ql-snow .ql-active .ql-fill { fill: #fff; }
.quill-host.quill-dark .ql-snow.ql-toolbar button:hover,
.quill-host.quill-dark .ql-snow .ql-active { color: #fff; }

/* Cosmetic page guides: a faint line every PAGE_HEIGHT (1056px) down the sheet so it reads as pages
   without splitting text. Placed AFTER the base .ql-editor rules so the background-image wins over
   their `background:#fff` shorthand. Scales with the editor's CSS `zoom`. */
.quill-host .ql-editor { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1054px, rgba(60, 64, 67, 0.16) 1054px, rgba(60, 64, 67, 0.16) 1056px); }
.quill-host.quill-dark .ql-editor { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1054px, rgba(255, 255, 255, 0.10) 1054px, rgba(255, 255, 255, 0.10) 1056px); }

.cal2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal2-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
/* Stripped toolbar for embedded calendars: just ‹ date › */
.cal2-toolbar-min { gap: 6px; flex-wrap: nowrap; padding: 8px 12px; }
.cal2-toolbar-min .cal2-label { font-size: 16px; font-weight: 600; }
.cal2-views { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.cal2-seg { padding: 5px 12px; background: transparent; border: none; color: var(--text-2); cursor: pointer; font-size: 16px; }
.cal2-seg.on { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.cal2-nav { display: inline-flex; align-items: center; gap: 4px; }
.cal2-nav .prev .ic,
.cal2-toolbar-min .prev .ic { transform: rotate(180deg); }
.cal2-label { font-size: 17.5px; font-weight: 600; }

.cal2-dayhead { display: flex; border-bottom: 1px solid var(--border); }
.cal2-gutter-sp { width: 52px; flex: 0 0 52px; }
.cal2-dh { flex: 1; min-width: 0; text-align: center; padding: 6px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border-left: 1px solid var(--border); }
.dh-dow { font-size: 14px; color: var(--text-3); text-transform: uppercase; }
.dh-num { font-size: 19px; font-weight: 600; }
.cal2-dh.is-today .dh-dow { color: var(--accent); }
.cal2-dh.is-today .dh-num { background: var(--accent-solid, var(--accent)); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }

.cal2-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.cal2-body { display: flex; position: relative; }
.cal2-gutter { width: 52px; flex: 0 0 52px; }
.cal2-hr-label { height: var(--hour-h, 48px); font-size: 14px; color: var(--text-3); text-align: right; padding-right: 6px; transform: translateY(-6px); }
.cal2-cols { flex: 1; display: flex; min-width: 0; }
.cal2-col { flex: 1; min-width: 0; position: relative; border-left: 1px solid var(--border); }
.cal2-col.drop { background: var(--accent-weak); }
.cal2-hr-line { height: var(--hour-h, 48px); border-bottom: 1px solid var(--border); }
.cal2-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--text) 42%, transparent);
  z-index: 12;
  pointer-events: none;
}
.cal2-now::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 65%, transparent);
  box-shadow: 0 0 0 2px var(--bg);
}
.cal2-event { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 5px 10px; font-size: 16px; line-height: 1.3; overflow: hidden; cursor: pointer; z-index: 2; user-select: none; }
/* MEETING / real event — filled, coloured block. Text colour (--ev-text) is chosen per-event by
   luminance so a light Google colour (graphite, banana, sage…) gets dark text instead of unreadable white. */
.cal2-event.meeting { background: var(--ev-color, var(--ev-meeting, #039be5)); color: var(--ev-text, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
/* TASK / time-block — subdued: faint tint, a coloured left rail, a checkbox circle. */
.cal2-event.task { background: var(--surface-2, #1c1d22); color: var(--text, #e8e8ea); border: 1px solid var(--border, #2a2b31); border-left: 3px solid var(--ev-color, var(--accent, #8b8d98)); }

/* ---- Forge (Grind) proof-of-work tracker ---- */
.forge { max-width: 760px; }
.forge-hero { display: flex; align-items: center; gap: 26px; margin-bottom: 28px; }
.forge-ring { width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.forge-ring-inner { width: 74px; height: 74px; border-radius: 50%; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.forge-ring-inner b { font-size: 30px; line-height: 1; }
.forge-ring-inner u { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8a8f99); text-decoration: none; margin-top: 3px; }
.forge-herotxt { flex: 1; }
.forge-herotxt h3 { margin: 0 0 4px; }
.forge-cta { white-space: nowrap; }
.forge-lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #8a8f99); margin: 26px 0 12px; }
.forge-day { display: flex; gap: 10px; flex-wrap: wrap; }
.forge-goal { flex: 1; min-width: 180px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.forge-team { display: flex; gap: 14px; flex-wrap: wrap; }
.forge-mon { width: 60px; height: 60px; border-radius: 14px; background: var(--surface-2, #1b1b21); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.forge-mon img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.forge-mon.r-rare { border-color: var(--accent); }
.forge-mon.r-legendary { border-color: #a78bfa; box-shadow: 0 0 14px -2px rgba(167, 139, 250, .55); }
.forge-quest { margin-bottom: 16px; }
.forge-quest-top { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.forge-quest-top em { font-style: normal; color: var(--muted, #8a8f99); }
.forge-track { height: 9px; background: #222229; border-radius: 6px; overflow: hidden; }
.forge-track > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-solid, #3f57c4), var(--accent, #6e86f0)); border-radius: 6px; }
.forge-rating { display: flex; gap: 4px; }
.forge-star { background: none; border: none; font-size: 22px; color: #3a3a44; cursor: pointer; padding: 0; }
.forge-star.on { color: var(--accent, #6e86f0); }
.forge-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 13px; }
.forge-add-action { margin-top: 8px; }
.cal2-event.task .ce-time { color: var(--text-3, #9aa0a6); opacity: 1; }
.ce-title { font-weight: 600; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.ce-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-check { flex: 0 0 auto; width: 14px; height: 14px; border: 1.5px solid var(--ev-color, var(--text-3, #9aa0a6)); border-radius: 50%; }
.cal2-event.demo { background: #6b7280; color: #fff; border: 0; }
.cal2-event.pending { opacity: 0.55; }
/* Drag preview ghost: shows where a 1-hour block will land. */
.cal2-ghost { position: absolute; top: 0; left: 3px; right: 3px; border-radius: 6px; background: var(--accent-weak, rgba(124, 58, 237, 0.18)); border: 1.5px dashed var(--accent, #8b8d98); z-index: 4; pointer-events: none; padding: 4px 9px; font-size: 14.5px; color: var(--text-2, #c7c9d1); overflow: hidden; contain: layout paint; will-change: transform; }
.cal2-ghost-t { font-weight: 600; opacity: 0.95; }
/* Live selection block painted while click-dragging blank grid space to create a new time block. */
.cal2-draw { position: absolute; left: 3px; right: 3px; border-radius: 6px; background: var(--accent-weak, rgba(124, 58, 237, 0.22)); border: 1.5px solid var(--accent, #8b8d98); z-index: 6; pointer-events: none; padding: 4px 9px; font-size: 14.5px; color: var(--text-2, #c7c9d1); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.cal2-draw-t { font-weight: 600; opacity: 0.95; }
body.cal-drawing, body.cal-drawing .cal2-col { user-select: none; -webkit-user-select: none; cursor: ns-resize; }
.cal2-event.editable { cursor: grab; }
.cal2-event.editable.dragging { cursor: grabbing; opacity: 0.92; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); z-index: 5; }
/* Resize grips at the top/bottom edges of an editable event. */
.ce-handle { position: absolute; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 1; }
.ce-handle-top { top: -2px; }
.ce-handle-bot { bottom: -2px; }
.cal2-event.editable:hover .ce-handle::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 2px; width: 26px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.7); }
.cal2-event.editable:hover .ce-handle-top::after { top: 2px; bottom: auto; }
/* While dragging a rail item, let drops pass THROUGH event blocks to the day column underneath. */
body.cal-dragging .cal2-event { pointer-events: none; }
body.cal-pointer-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
/* Selected event (single click/tap) + its ✕ delete affordance. */
.cal2-event.selected { outline: 2px solid var(--accent, #8b8d98); outline-offset: 1px; z-index: 6; }
.ce-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 8; }
.ce-del:hover { background: var(--danger, #d93025); }
.cal2-zoom { display: inline-flex; gap: 4px; margin-right: 6px; }
.cal2-zoom .btn { min-width: 28px; font-size: 19px; line-height: 1; padding: 4px 8px; }
.ce-time { font-size: 15px; opacity: 0.92; }
@media (max-width: 860px) {
  /* Ultra-minimal mobile calendar: drop the projects/tasks rail and zoom/refresh chrome, and let the
     day grid fill the screen with a single easy vertical scroll. */
  .cal2 { height: calc(100dvh - var(--topbar-h) - 16px); }
  .cal2-side { display: none; }
  .cal2-zoom, .cal2-refresh { display: none; }
  .cal2-toolbar { gap: 8px; padding: 8px 10px; }
  .cal2-label { font-size: 16px; }
  .ce-del { width: 26px; height: 26px; font-size: 13px; } /* bigger touch target */
}

/* ---------- Vault (sections of links + passwords) ---------- */
.vsec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 14px 16px; margin-bottom: 16px; }
.vsec-head { display: flex; align-items: center; gap: 12px; }
.vsec-sym { font-size: 27.5px; flex: 0 0 auto; line-height: 1; }
.vsec-name { font-size: 19px; font-weight: 600; }
.vsec-meta { font-size: 15px; color: var(--text-3); margin-top: 1px; }
.vsec-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.vsec-items { margin: 12px 0 6px; display: flex; flex-direction: column; }
.vitem { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--border); }
.vitem:first-child { border-top: none; }
.vitem-ico { color: var(--text-3); flex: 0 0 auto; }
.vitem-main { flex: 1; min-width: 0; }
.vitem-title { font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitem-sub { font-size: 15px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
a.vitem-sub { color: var(--accent); text-decoration: none; }
.vitem-secret { font-family: ui-monospace, Menlo, Consolas, monospace; }
.vsec-add { display: flex; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.share-person.on { border-color: var(--accent); background: var(--accent-weak); }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.modal-input { width:100%; box-sizing:border-box; font:inherit; padding:8px 10px; border:1px solid var(--border,#e5e7eb); border-radius:6px; }
.btn-danger { background:#d93025; color:#fff; }

/* Native desktop app (Tauri): always use the full two-column layout — never the phone chrome
   (off-canvas sidebar + hamburger), even when Windows DPI scaling drops the CSS width under 860px.
   Set at boot via window.__TAURI__ → <html class="desktop-app">. Higher specificity than the
   max-width:860px rules, so it wins regardless of viewport width. */
.desktop-app .app-shell { grid-template-columns: var(--sidebar-w) 1fr; }
.desktop-app .app-shell.sidebar-collapsed { grid-template-columns: 0 1fr; }
.desktop-app .sidebar { position: relative; transform: none; width: auto; box-shadow: none; transition: none; z-index: auto; }
.desktop-app .nav-toggle { display: none; }
.desktop-app .sidebar-footer .sidebar-toggle { display: inline-grid; }
.desktop-app .app-shell.sidebar-collapsed .topbar .sidebar-expand { display: inline-grid; }
.desktop-app .scrim { display: none; }

/* "New version available" prompt (posted by the service worker after a deploy). */
.toast.update-toast { cursor: pointer; background: var(--accent-solid, var(--accent)); color: #fff; font-weight: 600; border: none; }
.doc-badges { display:flex; gap:6px; margin-top:4px; }
.doc-badge { font-size: 14px; padding:1px 6px; border-radius:8px; background:#f1f3f4; color:#5f6368; }
.doc-badge.lock { background:#fef3c7; color:#b45309; }
.doc-badge.shared { background:#e0e7ff; color:#3730a3; }
/* Library drag-to-folder + selection */
.doc-card[draggable="true"] { cursor: pointer; }
.doc-card.dragging { opacity: 0.4; }
.doc-card.selected { outline: 2px solid var(--accent, #1a73e8); outline-offset: -2px; }
.doc-card.drop-target { outline: 2px dashed var(--accent, #1a73e8); outline-offset: -2px; background: var(--accent-weak, #eef4ff); }
.crumb.drop-target { outline: 2px dashed var(--accent, #1a73e8); border-radius: 6px; background: var(--accent-weak, #eef4ff); }

/* ---------- Metrics ---------- */
.metrics-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.metrics-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.metrics-custom { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--text-3); }
.metrics-custom .input { width: auto; }
.metrics-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.metrics-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
.metrics-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text); vertical-align: middle; }
.metrics-table tr:last-child td { border-bottom: 0; }
.metric-row { cursor: pointer; }
.metric-row:hover td { background: var(--surface-2); }
.mt-name { font-weight: 600; }
.mt-val { font-variant-numeric: tabular-nums; }
.mt-delta.up { color: #33b679; }
.mt-delta.down { color: #e67c73; }
.mt-delta.flat { color: var(--text-3); }
.mt-spark.up { color: #33b679; } .mt-spark.down { color: #e67c73; } .mt-spark.flat { color: var(--text-3); }
.src { font-size: 11px; color: var(--text-3); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.src-fitcrm { color: var(--accent, #8b5cf6); border-color: var(--accent-weak, #3a2e63); }
.metric-log { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.metric-log .input { flex: 1; }
.mh-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 8px 0 4px; }
.mh-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.mh-row .mt-val { margin-left: auto; }
.assets-apps { margin-bottom: 22px; }


/* ===== Ascend game ===== */
@font-face { font-family: 'Cinzel'; src: url('/fonts/cinzel.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

.forge.game { max-width: 1280px; width: 100%; display: flex; flex-direction: column; gap: 0; min-height: calc(100vh - 120px); }

/* -- world vista: canvas-rendered scene; generated art fades in over it when present -- */
.forge-vista { position: relative; flex: 0 0 46vh; min-height: 320px; overflow: hidden; border-radius: 18px 18px 0 0; background: #0a0714; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.vista-embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.vista-art { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 1.2s ease; opacity: 0; }
.vista-art.has-art { opacity: 1; }
/* film grain + edge fade */
.forge-vista::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.forge-vista::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 -80px 100px -50px rgba(0,0,0,.8), inset 0 50px 80px -50px rgba(0,0,0,.55); }
.vista-title { position: absolute; top: 20px; left: 24px; z-index: 4; display: flex; align-items: baseline; gap: 14px; color: #fff; }
.vista-title b { font-family: 'Cinzel', serif; font-weight: 800; font-size: 34px; letter-spacing: 2px; color: #ffd700;
  background: linear-gradient(180deg, #fff3c4, #ffd24a 45%, #b8860b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.9)) drop-shadow(0 0 22px rgba(255,210,74,.35)); }
.vista-title span { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600; letter-spacing: 5px; color: #e8ddf8; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.vista-streak { position: absolute; top: 20px; right: 24px; z-index: 4; color: #ffd700; font-weight: 800; font-size: 16px; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.vista-roam { position: absolute; bottom: 12px; left: 0; right: 0; height: 100px; z-index: 2; pointer-events: none; }
.vista-roam .forge-mon.roaming { position: absolute; bottom: 0; width: 84px; height: 84px; font-size: 58px; background: transparent; border: none; box-shadow: none;
  animation: roam-bob 3.4s ease-in-out infinite; filter: drop-shadow(0 12px 16px rgba(0,0,0,.75)) drop-shadow(0 0 18px color-mix(in srgb, var(--rcolor, #fff) 55%, transparent)); pointer-events: auto; }
.vista-roam .forge-mon.roaming img { border-radius: 14px; border: 1.5px solid var(--rcolor, #3d2a5e); }
@keyframes roam-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* -- HUD -- */
.forge-hud { flex: 1; min-height: 0; position: relative; background: linear-gradient(180deg, #120b22, #0b0716 70%); border: 1px solid rgba(150,120,255,.14); border-top: none; border-radius: 0 0 18px 18px; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.hud-band { display: flex; align-items: center; gap: 18px; }
.hud-orb { width: 68px; height: 68px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 22px rgba(255,215,0,.35), inset 0 0 8px rgba(0,0,0,.6); }
.hud-orb-in { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1a1230, #0c0817); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hud-orb-in b { font-family: 'Cinzel', serif; font-size: 21px; font-weight: 800; line-height: 1; color: #ffd700; }
.hud-orb-in u { font-size: 7px; letter-spacing: .2em; color: #8a7ab0; text-decoration: none; margin-top: 2px; }
.hud-xp { flex: 1; }
.hud-xp-track { height: 14px; border-radius: 7px; background: rgba(0,0,0,.5); overflow: hidden; border: 1px solid rgba(150,120,255,.16); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.hud-xp-track span { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #ff6a00, #ffb300 60%, #ffd700); box-shadow: 0 0 16px rgba(255, 150, 0, .8); transition: width .6s cubic-bezier(.2, .8, .2, 1); position: relative; }
.hud-xp-track span::after { content: ''; position: absolute; inset: 0 0 55% 0; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent); }
.hud-xp-lbl { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; color: #b9aed4; letter-spacing: .4px; }
.hud-row { display: grid; grid-template-columns: 1.1fr 1.4fr .9fr; gap: 16px; align-items: stretch; }

/* glass cards */
.hud-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid rgba(150,120,255,.16); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 30px -18px rgba(0,0,0,.9); backdrop-filter: blur(10px); }
.hud-col { display: flex; flex-direction: column; gap: 14px; }
.hud-col .forge-cta { padding: 15px; font-size: 15px; font-weight: 700; letter-spacing: .3px; border-radius: 13px; background: linear-gradient(135deg, #6d5dfc, #9a5cff); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 26px -8px rgba(122, 92, 255, .8), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .12s, box-shadow .2s; }
.hud-col .forge-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -8px rgba(122, 92, 255, .95), inset 0 1px 0 rgba(255,255,255,.25); }
.binder-open { justify-content: center; padding: 12px; border-radius: 13px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(150,120,255,.2); letter-spacing: .3px; }
.binder-open:hover { border-color: rgba(190,160,255,.45); }
.forge-lbl { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 2px;
  background: linear-gradient(180deg, #f0e6c8, #c8a84a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* next-unlock tease */
.unlock-card { align-items: center; text-align: center; border-color: color-mix(in srgb, var(--rcolor, #3d2a5e) 50%, rgba(150,120,255,.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 26px -6px color-mix(in srgb, var(--rcolor, #3d2a5e) 45%, transparent); flex: 1; justify-content: center; gap: 12px; }
.unlock-sil { width: 92px; height: 92px; border-radius: 14px; background: radial-gradient(circle at 50% 38%, #241a3a, #0c0817 75%); border: 1.5px dashed color-mix(in srgb, var(--rcolor, #5e4a8a) 75%, transparent); display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 46px; font-weight: 800; color: var(--rcolor, #5e4a8a); text-shadow: 0 0 20px var(--rcolor, #5e4a8a); animation: sil-breathe 3s ease-in-out infinite; }
@keyframes sil-breathe { 0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--rcolor, #5e4a8a) 25%, transparent); } 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--rcolor, #5e4a8a) 55%, transparent); } }
.unlock-meta { display: flex; align-items: baseline; gap: 9px; }
.unlock-meta b { font-family: 'Cinzel', serif; color: #fff; font-size: 16px; letter-spacing: 1px; }
.unlock-rarity { font-size: 10px; letter-spacing: 3px; color: var(--rcolor, #8a7ab0); font-weight: 700; }
.unlock-togo { font-style: normal; font-size: 12px; color: #b9aed4; }

/* goals + chest */
.goal-row { display: flex; align-items: center; gap: 9px; }
.goal-row .forge-goal { background: rgba(0,0,0,.35); border: 1px solid rgba(150,120,255,.14); border-radius: 9px; }
.goal-row .forge-goal:focus { border-color: rgba(190,160,255,.5); }
.goal-check { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid #5e4a8a; background: transparent; color: #ffd700; font-size: 13px; line-height: 1; cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.goal-check:hover { border-color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,.4); }
.goal-check.on { background: #2c2140; border-color: #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, .45); }
.forge-goal.done { text-decoration: line-through; opacity: .55; }
.chest { margin-top: auto; border-radius: 11px; padding: 11px; text-align: center; font-weight: 700; letter-spacing: 1.5px; font-size: 12px; }
.chest.locked { border: 1px dashed rgba(150,120,255,.3); color: #6f5f92; }
.chest.ready { border: 1px solid #ffd700; background: linear-gradient(135deg, #3a2c07, #17102a); color: #ffd700; cursor: pointer; animation: chest-pulse 1.6s ease-in-out infinite; }
.chest.opened { border: 1px solid rgba(150,120,255,.16); color: #6f5f92; }
@keyframes chest-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, .35); } 50% { box-shadow: 0 0 24px rgba(255, 215, 0, .85); } }

/* rarity accents (shared) */
.r-common { --rcolor: #b8c0c8; }
.r-uncommon { --rcolor: #33d17a; }
.r-rare { --rcolor: #b388ff; }
.r-legendary { --rcolor: #ffd700; }

/* creature faces */
.forge-mon { width: 44px; height: 44px; border-radius: 11px; border: 1.5px solid var(--rcolor, #3d2a5e); background: #0c0817; display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; box-shadow: 0 0 10px color-mix(in srgb, var(--rcolor, #3d2a5e) 45%, transparent); }
.forge-mon img { width: 100%; height: 100%; object-fit: cover; }

/* quests */
.forge-quest-top { letter-spacing: .2px; }
.forge-track { background: rgba(0,0,0,.4); border: 1px solid rgba(150,120,255,.1); }

/* -- binder -- */
.binder { padding: 14px; max-width: 1280px; }
.binder-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.binder-head h3 { font-family: 'Cinzel', serif; letter-spacing: 2px; }
.binder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; }
.binder-card { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; border: 1.5px solid var(--rcolor, #3d2a5e); background: linear-gradient(180deg, #1d1230, #0c0817); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 12px color-mix(in srgb, var(--rcolor, #3d2a5e) 30%, transparent); transition: transform .15s, box-shadow .2s; }
.binder-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px -6px color-mix(in srgb, var(--rcolor, #3d2a5e) 60%, transparent); }
.binder-card .forge-mon.binder-art { width: 70px; height: 70px; font-size: 38px; border: none; box-shadow: none; background: transparent; }
.binder-name { font-size: 11px; color: #e8e0f5; letter-spacing: .3px; }
.binder-lv { font-size: 9px; letter-spacing: 1.5px; color: #8a7ab0; }
.binder-card.silhouette { cursor: default; opacity: .55; }
.binder-card.silhouette:hover { transform: none; }
.binder-card.silhouette .binder-q { font-family: 'Cinzel', serif; font-size: 38px; font-weight: 800; color: color-mix(in srgb, var(--rcolor, #3d2a5e) 65%, #1d1230); text-shadow: 0 0 14px color-mix(in srgb, var(--rcolor, #3d2a5e) 40%, transparent); }
.card-modal { text-align: center; }
.card-modal h3 { font-family: 'Cinzel', serif; letter-spacing: 2px; }
.card-modal .forge-mon.card-big { width: 200px; height: 200px; margin: 0 auto 10px; font-size: 100px; }
.card-flavour { font-style: italic; color: #b9aed4; }


/* -- full-card modal + binder art tiles -- */
.card-modal { background: linear-gradient(180deg, #171027, #0c0817) !important; border: 1px solid color-mix(in srgb, var(--rcolor, #3d2a5e) 45%, #2c2140); box-shadow: 0 0 60px -10px color-mix(in srgb, var(--rcolor, #3d2a5e) 55%, transparent); }
.card-full { display: block; width: min(272px, 70vw); aspect-ratio: 3 / 4; object-fit: cover; margin: 4px auto 12px; border-radius: 16px; cursor: pointer;
  box-shadow: 0 0 40px -6px color-mix(in srgb, var(--rcolor, #3d2a5e) 70%, transparent), 0 18px 40px -18px rgba(0,0,0,.9); animation: card-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes card-in { 0% { transform: scale(.86) rotateX(6deg); opacity: 0; } 100% { transform: scale(1) rotateX(0); opacity: 1; } }
.card-meta { display: flex; justify-content: center; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.card-pill { padding: 4px 12px; border-radius: 999px; font-size: 11px; letter-spacing: 1.5px; color: #cfc4e8; background: rgba(0,0,0,.4); border: 1px solid rgba(150,120,255,.2); }
.card-pill.rarity { color: var(--rcolor); border-color: color-mix(in srgb, var(--rcolor) 55%, transparent); font-weight: 800; box-shadow: 0 0 10px color-mix(in srgb, var(--rcolor) 30%, transparent); }
.binder-card.artful { padding: 0; overflow: hidden; background: #0c0817; }
.binder-card.artful img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.binder-card.artful:hover img { transform: scale(1.04); }
.binder-badge { position: absolute; right: 6px; bottom: 6px; min-width: 22px; padding: 2px 6px; border-radius: 8px; background: rgba(5,3,12,.8); border: 1px solid color-mix(in srgb, var(--rcolor, #5e4a8a) 60%, transparent); color: var(--rcolor, #cfc4e8); font-family: 'Cinzel', serif; font-size: 11px; font-weight: 800; text-align: center; }
/* roaming creatures with card art read as mini-cards (3:4), not squares */
.vista-roam .forge-mon.roaming:has(img) { width: 68px; height: 90px; border-radius: 9px; }

/* -- pack opening -- */
.pack-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(4, 2, 10, .92); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; }
.pack-overlay.in { opacity: 1; }
.pack-burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pack-wrap { background: none; border: none; cursor: pointer; animation: pack-shake .9s ease-in-out infinite; }
@keyframes pack-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } }
.pack { width: 164px; height: 230px; border-radius: 16px; border: 2px solid #ffd700; background: linear-gradient(160deg, #2a1a4a, #0c0817); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 0 50px rgba(255, 180, 0, .45), inset 0 1px 0 rgba(255,255,255,.15); }
.pack-glyph { font-size: 58px; color: #ffd700; filter: drop-shadow(0 0 14px rgba(255,215,0,.6)); }
.pack-lbl { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: 4px; color: #e8ddf8; }
.pack-card { width: 256px; border-radius: 18px; border: 2px solid var(--rcolor); background: linear-gradient(180deg, #1d1230, #0c0817); padding: 16px; text-align: center; transform: rotateY(90deg); transition: transform .45s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 80px color-mix(in srgb, var(--rcolor) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.1); }
.pack-card.flip { transform: rotateY(0); }
.pack-card .pack-art { width: 216px; height: 216px; border-radius: 13px; object-fit: cover; font-size: 112px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.pack-card-name { margin-top: 12px; font-family: 'Cinzel', serif; font-size: 20px; font-weight: 800; letter-spacing: 1px; color: #fff; }
.pack-card-rarity { font-size: 11px; letter-spacing: 4px; color: var(--rcolor); margin: 5px 0 12px; font-weight: 700; }
.pack-overlay.fanfare .pack-card { animation: fanfare .6s ease-out; }
@keyframes fanfare { 0% { transform: scale(.6) rotateY(0); } 60% { transform: scale(1.12) rotateY(0); } 100% { transform: scale(1) rotateY(0); } }


/* -- quick log -- */
.ql-card { gap: 11px; }
.ql-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ql-chip { padding: 6px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .3px; color: #cfc4e8; background: rgba(0,0,0,.35); border: 1px solid rgba(150,120,255,.2); cursor: pointer; transition: all .15s; }
.ql-chip:hover { border-color: rgba(190,160,255,.5); }
.ql-chip.on { color: #120b22; font-weight: 800; background: linear-gradient(135deg, #ffd24a, #ff9a3c); border-color: transparent; box-shadow: 0 0 12px rgba(255, 190, 60, .5); }
.ql-flames { gap: 2px; }
.ql-flame { background: none; border: none; font-size: 17px; padding: 1px 2px; cursor: pointer; filter: grayscale(1) brightness(.5); transition: filter .15s, transform .15s; }
.ql-flame:hover { transform: scale(1.2); }
.ql-flame.on { filter: none; }
.ql-log { margin-top: 2px; padding: 14px; border-radius: 13px; font-size: 16px; font-weight: 900; letter-spacing: 2px; font-family: 'Cinzel', serif; color: #120b22; background: linear-gradient(135deg, #ffd24a, #ff8a2a); border: 1px solid rgba(255,255,255,.25); cursor: pointer; box-shadow: 0 8px 28px -8px rgba(255, 170, 40, .8), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .1s, box-shadow .2s; }
.ql-log:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -8px rgba(255, 170, 40, .95), inset 0 1px 0 rgba(255,255,255,.4); }
.ql-log:active, .ql-log.striking { transform: scale(.97); }
.xp-fly { position: fixed; z-index: 400; transform: translate(-50%, 0); font-family: 'Cinzel', serif; font-weight: 900; font-size: 22px; color: #ffd700; text-shadow: 0 0 14px rgba(255,215,0,.8), 0 2px 6px rgba(0,0,0,.9); pointer-events: none; opacity: 0; }
.xp-fly.go { animation: xp-rise 1.3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes xp-rise { 0% { transform: translate(-50%, 0) scale(.8); opacity: 0; } 15% { opacity: 1; transform: translate(-50%, -18px) scale(1.15); } 75% { opacity: 1; } 100% { transform: translate(-50%, -120px) scale(1); opacity: 0; } }


/* -- forge strike fx + note + sound -- */
.ql-head { display: flex; align-items: center; justify-content: space-between; }
.sound-toggle { background: none; border: none; font-size: 14px; cursor: pointer; opacity: .7; }
.sound-toggle:hover { opacity: 1; }
.ql-note { background: rgba(0,0,0,.35); border: 1px solid rgba(150,120,255,.14); border-radius: 9px; padding: 8px 10px; color: #e8e0f5; font-size: 12.5px; }
.ql-note:focus { border-color: rgba(190,160,255,.5); outline: none; }
.forge-spark { position: fixed; z-index: 401; width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, #ffd700, #ff7a2a); box-shadow: 0 0 8px #ffb300; pointer-events: none; animation: spark-fly .7s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes spark-fly { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.hud-links { display: flex; gap: 10px; }
.hud-links .binder-open { flex: 1; }

/* -- history -- */
.hist-list { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border: 1px solid rgba(150,120,255,.14); }
.hist-ico { font-size: 20px; flex: 0 0 auto; }
.hist-main { flex: 1; min-width: 0; }
.hist-main b { font-size: 13px; color: #e8e0f5; font-weight: 600; }
.hist-note { margin: 2px 0 0; font-size: 12px; color: #9a8fc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-main em { display: block; font-style: normal; font-size: 11px; color: #6f5f92; margin-top: 2px; }
.hist-xp { font-family: 'Cinzel', serif; font-weight: 800; color: #ffd700; font-size: 14px; flex: 0 0 auto; }
.hist-del { background: none; border: none; font-size: 15px; cursor: pointer; opacity: .45; flex: 0 0 auto; transition: opacity .15s, transform .15s; }
.hist-del:hover { opacity: 1; transform: scale(1.15); }


/* -- level-up cinematic -- */
.lvlup-overlay { position: fixed; inset: 0; z-index: 299; display: flex; align-items: center; justify-content: center; background: rgba(4,2,10,.55); opacity: 0; transition: opacity .2s; pointer-events: none; }
.lvlup-overlay.go { opacity: 1; }
.lvlup-overlay.out { opacity: 0; transition: opacity .4s; }
.lvlup-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(255,215,0,.5), rgba(255,150,0,.15) 35%, transparent 65%); opacity: 0; }
.lvlup-overlay.go .lvlup-flash { animation: lvlflash 1.5s ease-out forwards; }
@keyframes lvlflash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.lvlup-ring { position: absolute; left: 50%; top: 46%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid rgba(255,215,0,.85); opacity: 0; }
.lvlup-overlay.go .lvlup-ring { animation: lvlring 1.35s cubic-bezier(.1,.6,.3,1) forwards; }
.lvlup-overlay.go .lvlup-ring.r2 { animation-delay: .14s; border-color: rgba(255,170,60,.7); }
.lvlup-overlay.go .lvlup-ring.r3 { animation-delay: .28s; border-color: rgba(255,240,180,.55); }
@keyframes lvlring { 0% { transform: scale(.2); opacity: 0; } 10% { opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
.lvlup-txt { position: relative; text-align: center; transform: scale(.4); opacity: 0; filter: blur(6px); }
.lvlup-overlay.go .lvlup-txt { animation: lvltxt 1.5s cubic-bezier(.15,.9,.25,1) forwards; }
@keyframes lvltxt { 0% { transform: scale(.4); opacity: 0; filter: blur(6px); } 25% { transform: scale(1.12); opacity: 1; filter: blur(0); } 38% { transform: scale(1); } 82% { opacity: 1; } 100% { transform: scale(1.04); opacity: 0; } }
.lvlup-txt u { display: block; font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700; letter-spacing: 12px; color: #e8ddf8; text-decoration: none; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.lvlup-txt b { display: block; font-family: 'Cinzel', serif; font-size: 110px; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #fff7d6, #ffd24a 45%, #c98a12); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(255,200,50,.7)) drop-shadow(0 4px 14px rgba(0,0,0,.9)); }

/* -- card reveal rays + shine -- */
.pack-reveal { position: relative; display: flex; align-items: center; justify-content: center; }
.pack-rays { position: absolute; width: 640px; height: 640px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rcolor) 28%, transparent) 0deg 9deg, transparent 9deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%); mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  animation: rays-spin 14s linear infinite; }
@keyframes rays-spin { to { transform: rotate(360deg); } }
.pack-card { position: relative; overflow: hidden; }
.pack-card.flip::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent); animation: card-shine 1.1s ease-out .45s forwards; }
@keyframes card-shine { to { left: 130%; } }


/* -- gamified calendar tick (green conquest state) -- */
button.ce-check { display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; color: transparent; transition: all .15s; }
button.ce-check:hover { border-color: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); background: transparent; }
button.ce-check.on, .cal2-event.done .ce-check { background: #22c55e !important; border-color: #22c55e !important; color: #04130a; font-weight: 900; box-shadow: 0 0 10px rgba(34,197,94,.7); }
.cal2-event.done { border-left-color: #22c55e !important; }
.cal2-event.done .ce-name { text-decoration: line-through; opacity: .62; }
.cal2-event.just-done { animation: conquer .5s cubic-bezier(.2,.8,.2,1); }
@keyframes conquer { 0% { transform: scale(1); } 35% { transform: scale(1.04); box-shadow: 0 0 24px rgba(34,197,94,.7); } 100% { transform: scale(1); } }

/* -- forge modal -- */
.forge-log-modal { width: min(400px, 92vw); }
.forge-log-modal .ql-log { margin-top: 6px; }
.ql-skip { background: none; border: none; color: #6f5f92; font-size: 12px; cursor: pointer; margin-top: 2px; }
.ql-skip:hover { color: #b9aed4; }

/* -- calendar tick -- */
button.ce-check { cursor: pointer; background: transparent; padding: 0; }
button.ce-check:hover { background: var(--ev-color, #9aa0a6); box-shadow: 0 0 6px var(--ev-color, #9aa0a6); }
.cal2-event.done .ce-name { text-decoration: line-through; opacity: .6; }
.cal2-event.done .ce-check { background: var(--ev-color, #9aa0a6); }

@media (max-width: 900px) { .hud-row { grid-template-columns: 1fr; } .forge-vista { flex-basis: 260px; } }

/* ============================================================================
   Navigation upgrades — command palette, notifications bell, quick-assign chip,
   keyboard board selection, "More" nav group.
   ========================================================================== */

/* -- Command palette (Ctrl/⌘+K), modelled on the Codex desktop surface. -- */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(2px);
}
.cmdk-panel {
  width: min(606px, 100%);
  max-height: min(620px, 78vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  background: #2b2b2b;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.48);
}
:root[data-theme="light"] .cmdk-panel { border-color: rgba(0, 0, 0, 0.1); background: #f7f7f7; }
.cmdk-inputwrap {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 13px 15px 9px;
  border: 0;
}
.cmdk-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 22px;
}
.cmdk-input::placeholder { color: var(--text-3); opacity: 1; }
.cmdk-input:focus,
.cmdk-input:focus-visible { outline: 0 !important; box-shadow: none !important; }
.cmdk-list { overflow-y: auto; padding: 4px 5px 9px; }
.cmdk-group {
  padding: 8px 10px 4px;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 450;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.cmdk-item.sel { background: rgba(255, 255, 255, 0.075); }
:root[data-theme="light"] .cmdk-item.sel { background: rgba(0, 0, 0, 0.065); }
.cmdk-ic {
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}
.cmdk-ic .ic { width: 15px; height: 15px; stroke-width: 1.75; }
.cmdk-task-ring { width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; }
.cmdk-item.sel .cmdk-ic { color: var(--text-2); }
.cmdk-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-item.sel .cmdk-label { color: var(--text); }
.cmdk-hint {
  flex: 0 0 auto;
  max-width: 150px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-shortcut {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-3);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 17px;
  box-shadow: none;
}
:root[data-theme="light"] .cmdk-shortcut { background: rgba(0, 0, 0, 0.06); }
.cmdk-empty { padding: 28px 20px 34px; text-align: center; color: var(--text-3); font-size: 13px; }

/* -- Notifications bell + inbox popover -- */
.bell-btn { position: relative; }
.bell-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.notif-panel { width: min(340px, 88vw); max-height: 70vh; display: flex; flex-direction: column; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; border-bottom: 1px solid var(--border); }
.notif-title { font-weight: 600; font-size: 14.5px; }
.notif-readall { border: none; background: transparent; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.notif-readall:hover { background: var(--surface-2); }
.notif-list { overflow-y: auto; padding: 4px; }
.notif-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px 8px; border-radius: 8px; cursor: pointer; }
.notif-item:hover { background: var(--surface-2); }
.notif-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: transparent; }
.notif-item.unread .notif-dot { background: var(--accent); }
.notif-item.unread .notif-task, .notif-item.unread .notif-text { color: var(--text); }
.notif-main { flex: 1; min-width: 0; }
.notif-task { font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-text { font-size: 13px; color: var(--text-2); line-height: 1.35; }
.notif-when { flex: 0 0 auto; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; color: var(--text-3); font-size: 14px; text-align: center; }
.notif-empty .ic { color: var(--green); }

/* -- Quick-assign collaborators chip on task cards -- */
.task-collab { padding: 2px 6px; }
.task-collab .avatar-stack { pointer-events: none; }
.task-collab.chip-ghost .ic { color: var(--text-3); }
.pop-check { display: inline-flex; width: 16px; justify-content: center; color: var(--accent); }

/* -- Keyboard-selected board card -- */
.task-row.kbd-sel { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 9px; }

/* -- "More" nav group spacing -- */
.pf-sec-more { margin-top: 6px; }
.pf-sec-more .nav-item { width: 100%; }

/* Task-card inline content disclosure */
.task-card { display: flex; flex-direction: column; }
.task-caret {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 2px; padding: 0;
  background: none; border: none; cursor: pointer; color: var(--text-3);
  transition: transform 120ms ease;
}
.task-caret:hover { color: var(--text-1); }
.task-caret.open { transform: rotate(90deg); }
.task-inline {
  margin: -2px 0 8px 30px; padding: 10px 12px;
  border-left: 2px solid var(--accent-weak); background: var(--surface-2, rgba(127, 127, 127, .06));
  border-radius: 0 8px 8px 0; display: flex; flex-direction: column; gap: 10px;
  font-size: 13px; color: var(--text-2);
}
.task-inline-desc { line-height: 1.5; }
.task-inline-files { display: flex; flex-direction: column; gap: 4px; }
.task-inline-file { display: flex; align-items: center; gap: 6px; }
.task-inline-comments { display: flex; flex-direction: column; gap: 8px; }
.task-inline-comment { display: flex; gap: 8px; }
.task-inline-comment .who { font-weight: 600; font-size: 12px; color: var(--text-1); }
.task-inline-comment .body { white-space: pre-wrap; }

/* ============================================================================
   Codex-inspired desktop refinement

   The product remains ProjectFlow: this is a quieter, more precise treatment of the existing UI,
   not a replica. It uses native/system fonts, neutral charcoal layers, compact controls, restrained
   selection states and nearly flat surfaces. Motion and explicit accent presets remain available.
   ========================================================================== */

:root {
  --font: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sidebar-w: 248px;
  --topbar-h: 56px;
}

/* Codex-like neutral dark canvas. Keep custom accents and the Motion skin working as before. */
:root[data-theme="dark"]:not([data-skin="motion"]) {
  --bg: #181818;
  --surface: #202020;
  --surface-2: #2a2a2a;
  --text: #ececec;
  --text-2: #b4b4b4;
  --text-3: #858585;
  --border: #2c2c2c;
  --border-strong: #3a3a3a;
  --danger: #ef6a6a;
  --green: #5bbd7a;
  --orange: #e3a04f;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-pill: 8px;
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.015);
  --shadow-2: 0 8px 24px -18px rgba(0, 0, 0, 0.75);
  --shadow-pop: 0 18px 60px -22px rgba(0, 0, 0, 0.95);
}
:root[data-theme="dark"]:not([data-skin="motion"]):not([data-accent]) {
  --accent: #d6d6d6;
  --accent-hover: #f1f1f1;
  --accent-weak: rgba(255, 255, 255, 0.085);
  --accent-solid: #e7e7e7;
  --accent-solid-hover: #f5f5f5;
}

html, body {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.008em;
}
button, input, textarea, select { letter-spacing: inherit; }

/* Compact, confident controls. The previous 17.5px default made every action compete for focus. */
.btn {
  min-height: 34px;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 550;
  box-shadow: none;
}
.btn:hover { box-shadow: none; }
.btn-sm { min-height: 30px; padding: 5px 9px; font-size: 13px; }
.btn .ic { width: 16px; height: 16px; }
:root[data-theme="dark"]:not([data-skin="motion"]) .btn-primary {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #171717;
}
:root[data-theme="dark"]:not([data-skin="motion"]) .btn-primary:hover {
  background: var(--accent-solid-hover);
  border-color: var(--accent-solid-hover);
}
:root[data-theme="dark"]:not([data-skin="motion"]) .btn-danger {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--danger);
}
:root[data-theme="dark"]:not([data-skin="motion"]) .btn-danger:hover {
  background: rgba(239, 106, 106, 0.09);
  border-color: rgba(239, 106, 106, 0.35);
}

.field { gap: 5px; }
.field > span { font-size: 13px; font-weight: 550; }
.field input, .input, textarea, select {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.field input:focus, .input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 2px var(--accent-weak);
}

/* Fixed desktop frame: work nav and Settings stay put; only the long middle rail scrolls. */
.sidebar {
  padding: 10px 8px;
  overflow: hidden;
  background: var(--surface);
}
.side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0 8px;
  scrollbar-gutter: stable;
}
.nav { gap: 1px; }
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.sidebar-footer .nav-system { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; }
.sidebar-footer .sidebar-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 7px;
}
.sidebar-footer .sidebar-toggle:hover { background: var(--surface-2); }
.nav-item,
.project-pill {
  min-height: 34px;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 450;
}
.nav-item .ic,
.project-pill .ic { width: 17px; height: 17px; }
.nav-item.active,
.project-pill.active {
  background: var(--accent-weak);
  color: var(--text);
  font-weight: 550;
}
.project-pill:hover,
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.side-divider { margin: 10px 8px 7px; }
.pf-sec { margin-top: 1px; }
.pf-sec-head { padding: 8px 9px 4px; font-size: 12px; }
.pf-sec-label { font-weight: 550; }
.pf-sec-tools { gap: 1px; }
.pf-sec-caret,
.pf-sec-add { width: 20px; height: 20px; }
.pf-sec-caret::before { border-left-width: 6px; border-top-width: 5px; border-bottom-width: 5px; }
.project-pill .pill-due {
  top: -5px;
  right: -7px;
  min-width: 14px;
  height: 14px;
  font-size: 9px;
  box-shadow: 0 0 0 2px var(--surface);
}

.topbar {
  gap: 10px;
  padding: 0 18px;
  background: var(--bg);
}
.topbar h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.topbar .sidebar-expand { margin-left: -3px; }
.search {
  width: 240px;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface);
  border-color: var(--border);
}
.search:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--accent-weak); }
.search input { font-size: 14px; color: var(--text); }
.search .ic { width: 16px; height: 16px; }
.iconbtn {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  color: var(--text-2);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.content { padding: 22px 24px; }

/* Task rows read like Codex thread rows: quiet by default, legible on hover, dense without feeling cramped. */
@media (min-width: 861px) {
  .board-main { padding: 58px clamp(28px, 5vw, 96px); }
}
.task-list { gap: 26px; }
.tl-head { padding: 0 12px 8px; }
.tl-head h3 { font-size: 14px; font-weight: 600; }
.tl-count { font-size: 13px; }
.tl-sec-empty { padding: 8px 12px; font-size: 13px; }
.task-row {
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 7px;
}
.task-row-title { font-size: 14.5px; line-height: 1.35; }
.task-row-meta { gap: 5px; }
.task-due,
.task-est { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.task-proj.chip-btn { max-width: 130px; font-size: 12px; }
.chip-btn { padding: 2px 6px; border-radius: 6px; }
.task-check { width: 19px; height: 19px; border-width: 1.5px; }
.task-flag { width: 22px; height: 22px; }
.board-cal { flex-basis: 360px; }
.board-cal-head { min-height: 40px; padding: 6px 8px 6px 12px; font-size: 13px; }

/* Panels, cards and popovers: borders carry hierarchy; shadows no longer make every item float. */
.card,
.meet-card,
.set-card,
.cal-item,
.plan-tasks,
.metrics-table,
.doc-card {
  box-shadow: none;
}
.card:hover,
.meet-card:hover,
.doc-card:hover { box-shadow: none; border-color: var(--border-strong); }
.set-card { padding: 18px 20px; border-radius: 10px; }
.set-card-head { margin-bottom: 12px; }
.set-card-head h3 { font-size: 17px; }
.set-card-head p { font-size: 13.5px; line-height: 1.45; }
.settings-wrap { gap: 14px; }
.meet-list { gap: 7px; }
.meet-card { gap: 11px; padding: 10px 12px; border-radius: 9px; }
.meet-icon { width: 34px; height: 34px; border-radius: 8px; font-size: 19px; }
.meet-title { font-size: 14.5px; }
.meet-sub { font-size: 12.5px; }

.modal-overlay {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal { border-radius: 12px; }
.modal-head { padding: 18px 20px 10px; }
.modal-head h3 { font-size: 18px; }
.modal-body { padding: 4px 20px 12px; gap: 15px; }
.modal-foot { padding: 12px 20px 16px; }
.modal-body .field > span { font-size: 11.5px; letter-spacing: 0.045em; }
.pop-panel { border-radius: 10px; box-shadow: var(--shadow-pop); }
.pop-item { padding: 7px 9px; font-size: 13px; }

/* The library keeps useful type colour but no longer presents large pastel billboards in dark mode. */
.docs-title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.docs-toolbar { gap: 6px; }
.docs-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.doc-card { border-radius: 9px; }
.doc-card-art { height: 100px; }
.doc-card-foot { padding: 9px 10px; }
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-doc .doc-card-art,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-sheet .doc-card-art,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-map .doc-card-art,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-folder .doc-card-art { background: #252525; }
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-doc .doc-glyph { color: #8ea8dc; }
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-sheet .doc-glyph { color: #79b88d; }
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-map .doc-glyph { color: #b499d0; }
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-folder .doc-glyph { filter: saturate(0.6) brightness(0.9); }

.metrics-toolbar { gap: 8px; }
.metrics-table-wrap,
.metrics-table { border-radius: 9px; }
.metrics-table th { padding: 8px 12px; font-size: 10px; }
.metrics-table td { padding: 10px 12px; font-size: 14px; }
.seg { gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.seg-opt { padding: 6px 10px; border: 0; border-radius: 6px; font-size: 13px; }
.seg-opt.active { border-color: transparent; background: var(--surface-2); color: var(--text); }

/* Use the actual content width, not the window width, when deciding whether task list + calendar fit. */
.content.board-narrow[data-view="board"] { overflow: auto; }
.content.board-narrow .board-layout { display: block; height: auto; }
.content.board-narrow .board-main { overflow-y: visible; padding: 44px clamp(20px, 5vw, 52px); }
.content.board-narrow .board-cal { position: static; width: auto; height: 520px; margin-top: 20px; }
.content.board-compact .board-main { padding-left: 14px; padding-right: 14px; }
.content.board-compact .task-row { gap: 7px; padding-left: 8px; padding-right: 8px; }
.content.board-compact .task-row-meta { gap: 2px; }
.content.board-compact .task-proj.chip-btn > span { display: none; }
.content.board-compact .task-due.chip-ghost,
.content.board-compact .task-collab.chip-ghost { display: none; }

@media (max-width: 860px) {
  :root { --topbar-h: 54px; }
  .sidebar { overflow: hidden; padding-top: max(10px, env(safe-area-inset-top)); }
  .side-scroll { padding-bottom: 6px; }
  .topbar { height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  .topbar h2 { font-size: 18px; }
  .nav-item,
  .project-pill { min-height: 38px; padding: 9px 10px; }
  .field input, .input, textarea, select { font-size: 16px; }
  .modal { border-radius: 14px 14px 0 0; }
}

/* ============================================================================
   Codex precision pass

   Mirrors the desktop app's actual typography tiers (11 / 12 / 14 / 16px and
   18 / 20 / 24px headings), native font stack, fine outline icon proportions,
   four-pixel spacing rhythm and low-contrast component hierarchy.
   ========================================================================== */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI", sans-serif;
  --type-xs: 11px;
  --type-sm: 12px;
  --type-base: 14px;
  --type-lg: 16px;
  --heading-sm: 18px;
  --heading-md: 20px;
  --heading-lg: 24px;
  --topbar-h: 52px;
}

:root[data-theme="dark"]:not([data-skin="motion"]) {
  --bg: #181818;
  --surface: #212121;
  --surface-2: #282828;
  --text: #ededed;
  --text-2: #afafaf;
  --text-3: #7f7f7f;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
}

html,
body {
  font-family: var(--font);
  font-size: var(--type-base);
  line-height: 1.5;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
button,
input,
textarea,
select { font-family: var(--font); }
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.28);
  outline-offset: 1px;
}
p { font-size: var(--type-base); line-height: 1.5; }
h1 { font-size: var(--heading-lg); line-height: 1.25; }
h2 { font-size: var(--heading-md); line-height: 1.3; }
h3 { font-size: var(--type-lg); line-height: 1.35; }
h4 { font-size: var(--type-base); line-height: 1.4; }

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.13); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); background-clip: padding-box; }

/* One fine, rounded outline language across navigation, actions and inline tools. */
.ic { flex: 0 0 auto; overflow: visible; }
.ic * { vector-effect: non-scaling-stroke; }
.nav-item .ic,
.project-pill .ic { width: 16px; height: 16px; color: var(--text-2); }
.nav-item.active .ic,
.project-pill.active .ic { color: var(--text); }
.btn .ic { width: 15px; height: 15px; }
.iconbtn { width: 30px; height: 30px; border-radius: 7px; }
.iconbtn .ic { width: 16px; height: 16px; }

/* Controls follow Codex's 32px default / 28px compact rhythm. */
.btn {
  min-height: 32px;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.btn-sm { min-height: 28px; padding: 4px 8px; font-size: var(--type-sm); }
.field { gap: 4px; }
.field > span,
.pm-label { font-size: var(--type-sm); font-weight: 500; letter-spacing: 0; text-transform: none; }
.field input,
.input,
textarea,
select {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: var(--type-base);
  line-height: 1.4;
}
kbd { font-size: var(--type-xs); border-radius: 4px; padding: 1px 4px; }

/* Sidebar and toolbar use the same row height and text metrics as Codex. */
.sidebar { padding: 8px 7px; }
.nav { gap: 0; }
.nav-item,
.project-pill {
  min-height: 34px;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: var(--type-base);
  line-height: 20px;
  font-weight: 400;
}
.nav-item.active,
.project-pill.active { background: #303030; font-weight: 500; }
.pf-sec-head { min-height: 28px; padding: 6px 8px 3px; font-size: var(--type-sm); }
.pf-sec-label { font-weight: 500; }
.pf-sec-caret,
.pf-sec-add { width: 18px; height: 18px; }
.add-project { gap: 8px; padding: 6px 8px; font-size: 13px; }
.project-pill .pcount { font-size: var(--type-xs); }

.topbar { gap: 8px; padding: 0 16px; }
.topbar h2 {
  font-size: var(--heading-sm);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.search { width: 220px; min-height: 32px; gap: 6px; padding: 5px 9px; border-radius: 7px; }
.search input { font-size: 13px; }
.search .ic { width: 15px; height: 15px; }
.topbar .btn-primary {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
.topbar .btn-primary:hover { background: #303030 !important; }
.content { padding: 20px 24px; }

/* Tasks: a 16px visual completion ring inside a 22px hit target, compact rows and quieter meta. */
.task-list { gap: 22px; }
.tl-head { padding: 0 10px 6px; }
.tl-head h3 { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0; }
.tl-count { font-size: var(--type-sm); font-weight: 500; }
.tl-sec-empty { padding: 7px 10px; font-size: var(--type-sm); }
.task-row {
  min-height: 40px;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
}
.task-row-title { font-size: var(--type-base); line-height: 20px; }
.task-row-meta { gap: 4px; opacity: 0.78; transition: opacity 0.12s ease; }
.task-row:hover .task-row-meta { opacity: 1; }
.task-due,
.task-est,
.task-row-project { font-size: var(--type-sm); }
.task-proj.chip-btn { max-width: 120px; font-size: var(--type-sm); }
.content.board-compact .task-proj.chip-btn { display: none; }
.chip-btn { min-height: 20px; padding: 1px 5px; border-radius: 5px; line-height: 18px; }
.task-flag { width: 20px; height: 20px; }
.task-flag .ic { width: 13px; height: 13px; }
.task-caret { width: 18px; height: 18px; margin-right: 1px; }
.task-caret .ic { width: 12px; height: 12px; }

.task-check,
.task-check.done {
  position: relative;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #181818;
  isolation: isolate;
}
.task-check::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.task-check:hover::before { border-color: var(--text-2); transform: scale(1.04); }
.task-check.done::before { border-color: var(--green); background: var(--green); }
.task-check .ic { position: relative; width: 10px; height: 10px; stroke-width: 2.2; }
.modal-head .task-check { width: 24px; height: 24px; margin-right: 0; }
.modal-head .task-check::before { inset: 4px; }
.modal-head .task-check .ic { width: 10px; height: 10px; }

.board-cal { flex-basis: 348px; }
.board-cal-head { min-height: 38px; padding: 5px 7px 5px 11px; font-size: 13px; }
.bch-today { font-size: var(--type-xs); padding: 2px 7px; }

/* Page, card and supporting text hierarchy. */
.banner { padding: 9px 12px; font-size: var(--type-base); }
.card-title,
.cal-body .t,
.pw-main .label,
.ptl-row .pt-title,
.shared-task-row { font-size: var(--type-base); }
.task-notif,
.empty-col { font-size: 13px; }
.task-notif .when,
.cal-body .time,
.pw-main .sub,
.shared-task-project { font-size: var(--type-sm); }

.docs-title { font-size: var(--heading-md); line-height: 1.3; font-weight: 600; }
.docs-head h3,
.sops-title,
.vault-toolbar h3,
.notif-toolbar h3 { font-size: var(--heading-sm); }
.docs-head .sub,
.sops-sub,
.vault-toolbar .sub { font-size: 13px; }
.doc-name { font-size: 13px; font-weight: 500; }
.doc-meta { font-size: var(--type-xs); }
.doc-card-foot { padding: 8px 9px; }
.link-card .lc-title,
.pw-main .label { font-size: var(--type-base); font-weight: 500; }
.link-card .lc-url,
.pw-main .sub { font-size: var(--type-sm); }
.cat-tag { font-size: var(--type-xs); padding: 2px 7px; }

.set-card { padding: 16px 18px; }
.set-card-head { margin-bottom: 10px; }
.set-card-head h3 { font-size: var(--type-lg); line-height: 1.4; }
.set-card-head p { margin-top: 3px; font-size: 13px; line-height: 1.5; }
.set-row { gap: 8px; margin-bottom: 12px; font-size: var(--type-base); }
.swatch,
.botfather summary,
.admin-toggle { font-size: 13px; }
.botfather ol { font-size: 13px; line-height: 1.55; }

.meet-icon { width: 32px; height: 32px; border-radius: 7px; font-size: 17px; }
.meet-title { font-size: var(--type-base); font-weight: 500; }
.meet-sub { font-size: var(--type-sm); }
.meet-speaker-name { font-size: 13px; }
.meet-speaker ul,
.meet-action,
.rec-bar { font-size: var(--type-base); }

.modal-head { padding: 16px 18px 9px; }
.modal-head h3 { font-size: var(--heading-sm); line-height: 1.35; }
.modal-body { padding: 3px 18px 11px; gap: 13px; font-size: var(--type-base); }
.modal-foot { padding: 10px 18px 14px; }
.modal-body .field > span,
.detail-section h4 { font-size: var(--type-sm); letter-spacing: 0; text-transform: none; }
.comment .body { padding: 7px 10px; font-size: var(--type-base); }
.comment .who { font-size: var(--type-sm); }
.comment .when { font-size: var(--type-xs); }
.picker-row,
.menu button { font-size: var(--type-base); }
.pop-item { gap: 7px; padding: 6px 8px; font-size: 13px; }
.toast { font-size: 13px; }
.notif-item .ntext { font-size: var(--type-base); }
.notif-item .nwhen { font-size: var(--type-sm); }

.tl-month { font-size: var(--type-xs); }
.tl-day { font-size: var(--type-sm); }
.tl-day .dnum { font-size: var(--type-base); }
.tl-rowlabel { font-size: var(--type-base); }
.tl-rl-meta,
.tl-bar-pct,
.tl-legend { font-size: var(--type-sm); }

.proj-header .ph-kind,
.proj-header .ph-eyebrow { font-size: var(--type-xs); }
.proj-header .ph-obj { font-size: var(--heading-sm); }
.proj-header:has(> .res-bar:only-child) {
  padding: 0;
  margin-bottom: 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.res-attach {
  gap: 5px;
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: var(--type-sm);
  font-weight: 500;
}
.res-attach:hover { background: var(--surface-2); color: var(--text); }
.ph-desc,
.meeting-summary { font-size: var(--type-base); }
.ptl-group-label { font-size: var(--type-sm); }
.progress-pct { font-size: var(--type-base); }
.health-pill,
.ph-forecast .fc-pill { font-size: var(--type-sm); }
.ph-forecast .fc-meta,
.ph-forecast .fc-finish,
.ph-empty,
.ph-forecast.empty { font-size: 13px; }

.metrics-table th { font-size: var(--type-xs); }
.metrics-table td { font-size: 13px; }
.seg-opt { padding: 5px 8px; font-size: var(--type-sm); }

@media (min-width: 861px) {
  .board-main { padding-top: 48px; padding-bottom: 48px; }
}

@media (max-width: 860px) {
  :root { --topbar-h: 50px; }
  .topbar h2 { font-size: 17px; }
  .nav-item,
  .project-pill { min-height: 38px; padding: 8px 9px; }
  .task-row { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
  .field input,
  .input,
  textarea,
  select { font-size: 16px; }
}

/* ============================================================================
   Hard-minimal refinement

   Remove dashboard chrome in favour of Codex-style hierarchy: one quiet toolbar,
   flat rows, restrained presence dots, and borders only where they explain structure.
   ========================================================================== */

:root { --topbar-h: 48px; }

/* Secondary actions read as actions without permanently looking like filled controls. */
.btn:not(.btn-primary):not(.btn-danger) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn:not(.btn-primary):not(.btn-danger):hover {
  background: var(--surface-2);
  border-color: transparent;
}

/* Sidebar urgency is a neutral presence signal, never a red counter. */
.project-pill .pill-due,
.project-pill .pill-unread {
  width: 5px;
  min-width: 5px;
  height: 5px;
  padding: 0;
  border-radius: 50%;
  background: var(--text-3);
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
}
.project-pill .pill-due { top: -1px; right: -3px; }
.project-pill .pill-unread { margin-left: auto; }
.project-pill.active .pill-due,
.project-pill.active .pill-unread { background: var(--text-2); }

/* Title-adjacent ellipsis, icon-only search, notification and creation actions. */
.topbar { gap: 5px; padding: 0 13px; }
.topbar h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-project-btn,
.topbar-new-task {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
}
.edit-project-btn { margin-left: -1px; color: var(--text-3); }
.edit-project-btn:hover,
.topbar-new-task:hover { background: var(--surface-2); color: var(--text); }
.search {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  gap: 0;
  justify-content: center;
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  cursor: text;
  transition: width 140ms ease, background 140ms ease, border-color 140ms ease, padding 140ms ease;
}
.search:hover { background: var(--surface-2); }
.search.search-trigger {
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.search.search-trigger:focus-within {
  width: 30px;
  min-width: 30px;
  padding: 0;
  border-color: transparent;
  background: var(--surface-2);
}
.search .ic { flex: 0 0 15px; pointer-events: none; }
.search input {
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width 140ms ease, opacity 100ms ease;
}
.search:focus-within,
.search:has(input:not(:placeholder-shown)) {
  width: min(220px, 34vw);
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 8px;
  border-color: var(--border);
  background: var(--surface);
}
.search:focus-within input,
.search:has(input:not(:placeholder-shown)) input {
  width: 100%;
  opacity: 1;
  pointer-events: auto;
}
.bell-badge {
  top: 4px;
  right: 4px;
  width: 5px;
  min-width: 5px;
  height: 5px;
  padding: 0;
  border-radius: 50%;
  background: var(--text-2);
  box-shadow: none;
}

/* Completion rings share the same weight as the 1.75px outline icon set. */
.task-check::before { border-width: 1.75px; border-color: var(--text-3); }
:root[data-theme="light"] .task-check::before { border-color: rgba(0, 0, 0, 0.32); }
.task-check:hover::before { border-color: var(--text-2); }

/* The section count already communicates emptiness; no instructional paragraph is needed. */
.tl-sec-empty-min { min-height: 2px; height: 2px; padding: 0; overflow: hidden; }
.add-card-btn {
  width: auto;
  min-height: 30px;
  align-self: flex-start;
  gap: 6px;
  margin: 3px 0 0 4px;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 450;
}
.add-card-btn:hover { border: 0; background: var(--surface-2); color: var(--text); }
.add-card-btn .ic { width: 14px; height: 14px; }

/* Documents become a compact native file list; creation moves behind one + menu. */
.docs-head-stack {
  max-width: 780px;
  min-height: 34px;
  margin-bottom: 5px;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.docs-titlebar { min-width: 0; flex: 1; }
.docs-toolbar { min-height: 30px; flex: 0 0 auto; }
.docs-create { color: var(--text-2); }
.docs-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 780px;
  border-top: 1px solid var(--border);
}
.doc-card {
  min-height: 43px;
  flex-direction: row;
  align-items: center;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.doc-card:hover { background: var(--surface-2); border-color: var(--border); box-shadow: none; }
.doc-card.selected { outline: 0; background: var(--surface-2); }
.doc-card-art,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-doc .doc-card-art,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-sheet .doc-card-art,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-map .doc-card-art,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-folder .doc-card-art,
.doc-card.type-doc .doc-card-art,
.doc-card.type-sheet .doc-card-art,
.doc-card.type-map .doc-card-art,
.doc-card.type-folder .doc-card-art {
  position: static;
  width: 34px;
  height: 42px;
  flex: 0 0 34px;
  background: transparent;
}
.doc-glyph,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-doc .doc-glyph,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-sheet .doc-glyph,
:root[data-theme="dark"]:not([data-skin="motion"]) .doc-card.type-map .doc-glyph {
  color: var(--text-2);
  font-size: 18px;
  filter: none;
}
.doc-glyph .ic { width: 18px; height: 18px; }
.doc-card-foot {
  min-width: 0;
  flex: 1;
  padding: 0 8px 0 2px;
  border: 0;
  background: transparent;
}
.doc-name { font-size: 14px; font-weight: 450; line-height: 20px; }
.doc-card .doc-badges {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.doc-card .doc-badge {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  box-shadow: none;
}
.pop-item:is(button) {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

/* A small local preferences rail replaces the long stack of settings cards. */
.settings-wrap {
  display: grid;
  grid-template-columns: 136px minmax(0, 680px);
  align-items: start;
  gap: 32px;
  max-width: 860px;
}
.settings-sections {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: none;
}
.settings-sections::-webkit-scrollbar { display: none; }
.settings-section-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
}
.settings-section-tab:hover { background: var(--surface-2); color: var(--text); }
.settings-section-tab.active { background: var(--surface-2); color: var(--text); }
.settings-section-tab .ic { width: 15px; height: 15px; }
.settings-pages { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.settings-pages > .set-card {
  margin: 0 0 22px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.settings-pages > .set-card:last-of-type { border-bottom: 0; }
.settings-pages .set-card-head { margin-bottom: 13px; }
.settings-pages .set-card-head h3 { font-size: 16px; font-weight: 600; }
.settings-pages .set-card-head p { max-width: 60ch; font-size: 12px; }
.settings-signout {
  margin: -8px 0 0 !important;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--border);
}
.settings-signout .btn-danger { border-color: transparent; }
.settings-pages .swatch { padding: 5px 8px 5px 6px; border-radius: 7px; }
.settings-pages .swatch-dot { width: 13px; height: 13px; }

/* Calendar keeps its information density while losing the surrounding card and button boxes. */
.content[data-view="calendar"] .cal2 {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cal2-toolbar { gap: 3px; padding: 0 0 9px; flex-wrap: nowrap; }
.cal2-toolbar-min { padding: 6px 8px; }
.cal2-toolbar-min .cal2-label { font-size: 13px; font-weight: 550; }
.cal2-toolbar-min > .iconbtn { width: 22px; height: 22px; padding: 0; }
.cal2-toolbar-min > .iconbtn .ic { width: 13px; height: 13px; }
.cal2-views { gap: 1px; overflow: visible; border: 0; border-radius: 0; }
.cal2-seg { padding: 5px 8px; border-radius: 6px; font-size: 12px; }
.cal2-seg.on { background: var(--surface-2); color: var(--text); font-weight: 550; }
.cal2-nav { gap: 0; margin-left: 3px; }
.cal2-label { margin-left: 5px; font-size: 14px; font-weight: 550; white-space: nowrap; }
.cal2-zoom { gap: 0; margin-right: 0; }
.cal2-zoom .btn { min-width: 27px; padding: 3px 7px; font-size: 16px; }
.cal2-dh { gap: 1px; padding: 5px 0; }
.dh-dow { font-size: 10px; letter-spacing: 0.04em; }
.dh-num { font-size: 14px; font-weight: 550; }
.cal2-dh.is-today .dh-num { width: 21px; height: 21px; }
/* Three columns need dates, but not a tall second title band. Keep each day on one balanced line;
   Today view omits this row entirely because its full date is already in the toolbar. */
.cal2-view-3day .cal2-dayhead { background: color-mix(in srgb, var(--surface-2) 28%, transparent); }
.cal2-view-3day .cal2-dh { flex-direction: row; justify-content: center; gap: 6px; padding: 7px 0; }
.cal2-view-3day .dh-dow { color: var(--text-3); }
.cal2-view-3day .cal2-dh.is-today .dh-dow { color: var(--text-2); }
/* The neutral dark theme uses a near-white filled accent. Its date number therefore needs the
   same dark foreground as other filled controls instead of the generic white-on-accent rule. */
:root[data-theme="dark"]:not([data-skin="motion"]) .cal2-dh.is-today .dh-num { color: #171717; }
.cal2-hr-label { font-size: 11px; }
.cal2-event { padding: 3px 6px; border-radius: 5px; font-size: 12px; }
.cal2-event.meeting { box-shadow: none; }
.ce-title { gap: 4px; font-size: 13px; font-weight: 550; }
.ce-time { font-size: 11px; }

/* Secondary views use rows and dividers instead of floating cards. */
.meet-list { gap: 0; }
.meet-card {
  padding: 9px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.meet-card:hover { background: var(--surface-2); border-color: var(--border); }
.meet-icon { width: 25px; height: 25px; border-radius: 0; background: transparent; font-size: 16px; }
.vsec {
  padding: 0 0 18px;
  margin-bottom: 20px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.vsec-sym { font-size: 18px; }
.vsec-name { font-size: 15px; }
.vsec-meta { font-size: 11px; }
.pw-list { gap: 0; }
.pw-row {
  padding: 9px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.notif-list { gap: 0; }
.notif-item {
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.timeline-wrap { border-radius: 0; box-shadow: none; }

@media (max-width: 860px) {
  .sidebar {
    box-sizing: border-box;
    height: 100dvh;
    max-height: 100dvh;
  }
  .sidebar .nav-system {
    display: block;
    flex: 0 0 auto;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    background: var(--surface);
  }
}

@media (max-width: 720px) {
  :root { --topbar-h: 46px; }
  .topbar { padding: 0 9px; }
  .search:focus-within,
  .search:has(input:not(:placeholder-shown)) { width: min(170px, 42vw); }
  .settings-wrap { display: block; max-width: none; }
  .settings-sections {
    position: static;
    flex-direction: row;
    gap: 2px;
    margin: -5px 0 20px;
    overflow-x: auto;
  }
  .settings-section-tab { width: auto; flex: 0 0 auto; }
  .docs-head-stack { align-items: center; }
}

/* ============================================================================
   Context-panel refinement

   Calendar meetings retain their source colour as a slim signal instead of a
   saturated tile. Project resources and task actions follow the Codex
   Environment pattern: one soft panel, flat icon rows, one quiet + / … entry.
   ========================================================================== */

/* Calendar: source colour is information, not the whole surface. */
.cal2-event.meeting {
  background: color-mix(in srgb, var(--ev-color, var(--ev-meeting, #6e86f0)) 14%, var(--surface-2));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--ev-color, var(--ev-meeting, #6e86f0)) 22%, var(--border));
  border-left: 2px solid color-mix(in srgb, var(--ev-color, var(--ev-meeting, #6e86f0)) 72%, var(--text-3));
  box-shadow: none;
}
.cal2-event.meeting:hover {
  background: color-mix(in srgb, var(--ev-color, var(--ev-meeting, #6e86f0)) 20%, var(--surface-2));
  border-color: color-mix(in srgb, var(--ev-color, var(--ev-meeting, #6e86f0)) 35%, var(--border));
}
.cal2-event.meeting .ce-title { color: var(--text); font-weight: 520; }
.cal2-event.meeting .ce-time { color: var(--text-2); opacity: 1; }
.cal2-event.meeting.editable:hover .ce-handle::after { background: var(--text-3); }
.cal2-event.selected {
  outline: 1px solid var(--border-strong);
  outline-offset: 1px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-color, var(--accent)) 14%, transparent);
}

/* Tasks: values are plain metadata; editing is consolidated behind one ellipsis. */
.task-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 2px;
  color: var(--text-3);
  white-space: nowrap;
}
.task-meta-item .ic { width: 12px; height: 12px; }
.task-meta-item.task-proj { max-width: 128px; }
.task-meta-item.task-proj > span { overflow: hidden; text-overflow: ellipsis; }
.task-collab.task-meta-item .avatar.sm { width: 18px; height: 18px; font-size: 10px; }
.task-collab.task-meta-item .avatar-stack .avatar { margin-left: -5px; box-shadow: 0 0 0 1px var(--surface); }
.task-collab.task-meta-item .avatar-stack .avatar:first-child { margin-left: 0; }
.task-menu {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease;
}
.task-row:hover .task-menu,
.task-row:focus-within .task-menu { opacity: 1; }
.task-menu:hover { color: var(--text); background: var(--surface-2); }
.task-menu .ic { width: 14px; height: 14px; }
.task-menu-list .pop-item { min-height: 32px; }
@media (hover: none) { .task-menu { opacity: 0.72; } }

/* Project context: a compact Codex-like panel instead of attachment pills. */
.proj-header,
.proj-header:has(> .res-bar:only-child) {
  width: min(100%, 760px);
  padding: 15px 16px;
  margin: 0 0 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
  box-shadow: none;
}
.proj-header > .res-bar:not(:first-child) {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}
.res-bar.res-panel {
  display: block;
  width: 100%;
}
.res-head {
  display: flex;
  align-items: center;
  min-height: 28px;
  color: var(--text-2);
  font-size: var(--type-base);
  font-weight: 450;
}
.res-add {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.res-add:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.res-add .ic { width: 16px; height: 16px; }
.res-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 6px;
}
.res-row,
.res-list > .res-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  min-height: 35px;
  padding: 6px 3px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: var(--type-base);
  font-weight: 400;
  text-align: left;
  box-shadow: none;
}
.res-list > .res-chip:hover { border: 0; background: rgba(255, 255, 255, 0.045); }
.res-row > .ic,
.res-list > .res-chip > .ic { width: 16px; height: 16px; color: var(--text-2); }
.res-row-trail { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.res-list .res-chip-x { margin-left: auto; }
.res-list .res-chip-tag + .res-chip-x { margin-left: 2px; }
.res-panel .res-person .avatar { width: 20px; height: 20px; font-size: 10px; }

@media (max-width: 720px) {
  .proj-header,
  .proj-header:has(> .res-bar:only-child) { width: 100%; border-radius: 14px; padding: 13px 14px; }
  .task-row-meta { max-width: 42%; }
  .task-meta-item.task-proj { display: none; }
  .task-menu { opacity: 0.72; }
}

/* ============================================================================
   Minimal roadmap

   The timeline is a planning surface, not a dashboard chart. Dates provide the
   grid; quiet rails show duration/progress; target, deadline and forecast are
   tiny focusable markers explained on hover. Orange is reserved for attention.
   ========================================================================== */

:root { --codex-orange: #ff7a1a; }
.task-due.overdue { color: var(--codex-orange); }

.content[data-view="timeline"] { padding: 18px 20px; }
.plan-wrap { gap: 36px; padding: 0 0 42px; }
.plan-section { min-width: 0; }
.plan-section-head {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 8px;
  padding: 0 4px;
}
.plan-section-head h3 {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0;
}

.timeline-wrap {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.timeline-scroll {
  overflow-x: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: transparent;
  scrollbar-gutter: stable;
}
.tl-grid { min-width: max-content; }
.tl-headwrap { background: var(--bg); z-index: 12; }
.tl-monthband { min-height: 27px; background: var(--bg); }
.tl-month,
:root[data-theme="dark"] .tl-month,
:root[data-theme="dark"] .tl-month.alt {
  height: 27px;
  padding: 6px 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.tl-month:not(:first-child) { border-left: 1px solid var(--border); }
.tl-month-label { position: static; padding-left: 9px; }
.tl-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.tl-rowlabel-col,
.tl-rowlabel {
  width: 220px;
  flex: 0 0 220px;
  left: 0;
  border-right: 1px solid var(--border);
  background: var(--bg);
  isolation: isolate;
}
.tl-rowlabel-col { z-index: 14; }
.tl-rowlabel { z-index: 10; }
.tl-project-label {
  display: flex;
  align-items: center;
  padding: 0 11px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
}
.tl-day {
  width: 38px;
  flex: 0 0 38px;
  min-height: 31px;
  padding: 4px 0 5px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 10px;
  line-height: 20px;
}
.tl-day.weekend,
:root[data-theme="dark"] .tl-day.weekend { background: transparent; }
.tl-day.week-start { border-left: 1px solid var(--border); }
.tl-day.month-start { border-left: 1px solid var(--border-strong); }
.tl-day .dnum {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}
.tl-day.today { background: transparent; color: var(--text-2); }
.tl-day.today .dnum { border-radius: 50%; background: var(--surface-2); color: var(--text); }

.tl-row { min-height: 48px; border-bottom: 1px solid var(--border); }
.tl-row:last-child { border-bottom: 0; }
.tl-rowlabel {
  gap: 8px;
  padding: 0 11px;
  color: var(--text);
  font-size: 13px;
  font-weight: 450;
  cursor: pointer;
}
.tl-rowlabel:hover { background: var(--surface-2); }
.tl-rowlabel:focus-visible { outline-offset: -2px; }
.tl-rl-text { gap: 0; }
.tl-rl-name { font-weight: 500; }
.tl-rl-progress { margin-left: auto; color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.tl-track { position: relative; display: flex; }
.tl-cell {
  width: 38px;
  flex: 0 0 38px;
  border: 0;
  background: transparent;
}
.tl-cell.weekend,
:root[data-theme="dark"] .tl-cell.weekend { background: transparent; }
.tl-cell.week-start { border-left: 1px solid var(--border); }
.tl-cell.month-start { border-left: 1px solid var(--border-strong); }
.tl-cell.today,
:root[data-theme="dark"] .tl-cell.today { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.tl-today-line {
  width: 1px;
  transform: none;
  background: color-mix(in srgb, var(--text) 34%, transparent);
  opacity: 1;
}

.tl-range {
  position: absolute;
  top: 50%;
  height: 20px;
  transform: translateY(-50%);
  overflow: visible;
  border-radius: 6px;
  cursor: grab;
  touch-action: none;
}
.tl-range.dragging { z-index: 8; cursor: grabbing; opacity: 0.82; }
.tl-range-track {
  position: absolute;
  inset: 7px 0;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 11%, transparent);
  transition: background 0.12s ease;
}
.tl-range-progress {
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--text) 42%, transparent);
}
.tl-range:hover .tl-range-track,
.tl-range:focus-visible .tl-range-track { background: color-mix(in srgb, var(--text) 17%, transparent); }
.tl-range.h-on_track .tl-range-track { background: color-mix(in srgb, #79a982 17%, transparent); }
.tl-range.h-on_track .tl-range-progress { background: #79a982; }
.tl-range.h-buffer .tl-range-track { background: color-mix(in srgb, var(--codex-orange) 16%, transparent); }
.tl-range.h-buffer .tl-range-progress { background: color-mix(in srgb, var(--codex-orange) 72%, #a58b72); }
.tl-range.h-late .tl-range-track { background: color-mix(in srgb, #cb6666 17%, transparent); }
.tl-range.h-late .tl-range-progress { background: #cb6666; }
.tl-range.h-done .tl-range-progress { background: var(--text-2); }

.tl-marker {
  position: absolute;
  top: 50%;
  z-index: 5;
  color: var(--text-3);
  cursor: help;
}
.tl-marker.h-on_track { color: #79a982; }
.tl-marker.h-buffer { color: color-mix(in srgb, var(--codex-orange) 76%, #a58b72); }
.tl-marker.h-late { color: #cb6666; }
.tl-marker.h-done { color: var(--text-2); }
.tl-target {
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: var(--bg);
}
.tl-deadline {
  width: 2px;
  height: 15px;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  background: currentColor;
}
.tl-deadline::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -2px;
  width: 6px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.tl-projection {
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: var(--bg);
}
.tl-hover-tip {
  position: fixed;
  z-index: 4000;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #2b2b2b;
  color: #ededed;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}

/* Schedule: one project selector and a flat task list replace the tall button tray. */
.plan-timeblock { gap: 24px; }
.plan-timeblock > .plan-cal { flex: 1 1 62%; }
.plan-tasks {
  flex: 0 1 38%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.plan-tasks-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  min-height: 38px;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
}
.plan-tasks-controls > .ic { width: 15px; height: 15px; }
.plan-tasks-controls.is-draggable { cursor: grab; }
.plan-tasks-controls.is-draggable.dragging { cursor: grabbing; opacity: 0.62; }
.plan-project-picker {
  flex: 1;
  min-width: 0;
  position: relative;
}
.plan-project-button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 30px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.plan-project-button:hover,
.plan-project-picker.open .plan-project-button { background: var(--surface-2); }
.plan-project-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-project-caret { display: inline-flex; color: var(--text-3); transform: rotate(90deg); transition: transform 0.12s ease; }
.plan-project-picker.open .plan-project-caret { transform: rotate(-90deg); }
.plan-project-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 5px);
  left: -29px;
  right: -32px;
  max-height: min(320px, 52vh);
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}
.plan-project-menu[hidden] { display: none; }
.plan-project-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.plan-project-option > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-project-option:hover { background: var(--surface-2); color: var(--text); }
.plan-project-option.active { color: var(--text); background: var(--surface-2); }
.plan-project-option.active::before { content: '✓'; width: 12px; color: var(--text-2); font-size: 11px; }
.plan-option-drag { display: inline-flex; color: var(--text-3); transform: rotate(90deg); opacity: 0; }
.plan-project-option:hover .plan-option-drag { opacity: 1; }
.plan-tasks-list { padding: 7px 0 18px; }
.plan-tasks-list .cal2-rail-label {
  margin: 0;
  padding: 12px 8px 5px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.plan-tasks-list .task-row {
  min-height: 38px;
  padding: 6px 8px;
  border-radius: 6px;
}
.plan-tasks-list .task-row-title { font-size: 13px; }
.plan-tasks-list .task-due { font-size: 11px; }
.plan-cal .cal2.cal2-embedded {
  height: calc(100dvh - 164px);
  min-height: 520px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ptl-list { gap: 0; }
.ptl-group-label { margin: 12px 4px 3px; font-size: 11px; letter-spacing: 0; text-transform: none; }
.ptl-row {
  min-height: 38px;
  padding: 7px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.ptl-row .pt-title { font-size: 13px; }
.ptl-row .pt-badge { width: 5px; height: 5px; }

@media (max-width: 900px) {
  .content[data-view="timeline"] { padding: 14px 12px; }
  .plan-wrap { gap: 30px; }
  .plan-timeblock { gap: 18px; }
  .plan-timeblock > .plan-cal,
  .plan-tasks { width: 100%; flex-basis: auto; }
  .plan-timeblock > .plan-cal { position: static; }
  .tl-rowlabel-col,
  .tl-rowlabel { width: 154px; flex-basis: 154px; }
  .tl-month-label { left: 162px; }
}

/* ============================================================================
   Compact task index

   Keep the task board at a readable Codex-like measure. A row leads with its
   title; completion and the overflow menu are trailing hover actions instead
   of permanent controls competing with the task itself.
   ========================================================================== */
.board-main > .task-list {
  width: min(100%, 760px);
  margin-inline: auto;
}
.board-main > .proj-header,
.board-main > .proj-header:has(> .res-bar:only-child),
.board-main > .shared-strip { margin-inline: auto; }
.board-main > .proj-header,
.board-main > .proj-header:has(> .res-bar:only-child) { margin-bottom: 34px; }

/* Key-result targets are data, not controls. Keep them as a small aligned
   number column; the whole row remains the completion target. */
.kr-check,
.kr-check.has-target {
  min-width: 26px;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: inline-block;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kr-row:hover .kr-check { border: 0; color: var(--text-2); }
.kr-row.done .kr-check { border: 0; background: transparent; color: var(--green); }

.task-list { gap: 32px; }
.task-list > .tl-section:nth-child(2) { position: relative; }
.task-list > .tl-section:nth-child(2)::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 8px;
  right: 8px;
  border-top: 2px solid var(--border-strong);
}
.tl-head { align-items: center; gap: 6px; padding: 0 8px 7px; }
.tl-head h3 { font-size: var(--heading-sm); line-height: 24px; font-weight: 600; }
.tl-count { font-size: 12px; }
.tl-sec-empty { min-height: 24px; padding: 3px 8px; }
.task-row {
  position: relative;
  min-height: 36px;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
}
.task-row-title {
  font-size: var(--heading-sm);
  line-height: 20px;
}
.task-row-title .unread-dot {
  width: 5px;
  height: 5px;
  margin-right: 6px;
}
.task-row-meta {
  gap: 6px;
  opacity: 0.64;
}
.task-meta-item {
  min-height: 18px;
  font-size: 11.5px;
}
.task-due.task-meta-item {
  min-height: 24px;
  font-size: var(--heading-sm);
  line-height: 24px;
}
.task-meta-item.task-proj {
  max-width: 112px;
  padding: 0;
}
.task-row-project { font-size: 11.5px; }

/* A compact trailing toolbar appears as one unit: due, project, more, done. */
.task-row-actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.task-row:hover .task-row-actions,
.task-row:focus-within .task-row-actions,
.task-row.kbd-sel .task-row-actions,
.task-row.is-done .task-row-actions { opacity: 1; }

.task-quick-action {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.task-quick-action:hover,
.task-quick-action:focus-visible { background: var(--surface-2); color: var(--text); }
.task-quick-action.has-value { color: var(--text-2); }
.task-quick-action .ic { width: 18px; height: 18px; stroke-width: 1.9; }

/* A 14px visual ring inside a comfortable 22px target. */
.task-check,
.task-check.done {
  order: 4;
  width: 28px;
  height: 28px;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.task-check::before { inset: 4px; border-width: 1.6px; }
.task-row:hover .task-check,
.task-row:focus-within .task-check,
.task-row.kbd-sel .task-check,
.task-check.done { opacity: 1; }
.task-row-actions .task-check { opacity: 1; }
.task-row-actions .task-check .ic { width: 13px; height: 13px; }
.task-row-meta { order: 2; }
.task-row-title { order: 1; }

/* The title already opens the full task, so the old permanent disclosure
   arrow has no place in the compact index. */
.task-caret { display: none; }

@media (hover: none) {
  .task-row-actions { opacity: 0.72; }
  .task-check { opacity: 0.58; }
}

@media (max-width: 720px) {
  .board-main > .task-list { width: 100%; }
  .task-row { min-height: 38px; padding: 7px 6px; }
  .task-row-meta { max-width: 34%; }
  .task-meta-item.task-proj,
  .task-row-project { display: none; }
}

/* ============================================================================
   Carbon-informed foundation pass

   Semantic aliases keep the product's own visual identity while giving layers,
   text, borders, focus and support states one predictable system.
   ========================================================================== */
/* Carbon's global-header relationship: one header spans both the side rail and content. */
.app-shell,
.desktop-app .app-shell {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "sidebar main";
}
.app-shell.sidebar-collapsed,
.desktop-app .app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.topbar { grid-area: header; min-width: 0; height: var(--topbar-h); }
.sidebar { grid-area: sidebar; min-width: 0; }
.main { grid-area: main; min-width: 0; min-height: 0; }
.shell-brand {
  box-sizing: border-box;
  width: calc(var(--sidebar-w) - 18px);
  flex: 0 0 calc(var(--sidebar-w) - 18px);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.app-shell.sidebar-collapsed .shell-brand { display: none; }
.topbar h1 {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: var(--heading-sm);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Keyboard access and visible focus use a full 2px high-contrast indicator. */
.skip-link {
  position: fixed;
  z-index: 2000;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 10px 16px;
  background: var(--cds-focus);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }
:where(button, a, input, textarea, select, [role="button"]):focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}
.topbar h1:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }

/* Native buttons preserve all row and disclosure interactions for keyboard users. */
.pf-sec-toggle {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.pf-sec-toggle .pf-sec-caret { margin-left: auto; }
.pf-sec-more > .pf-sec-toggle { width: 100%; }
.pf-sec-head { cursor: default; }
.pf-sec-head.pf-sec-toggle { cursor: pointer; }
.pf-sec-add { min-width: 28px; min-height: 28px; }
.task-row-open {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tl-drop,
.docs-grid { margin: 0; padding-left: 0; list-style: none; }
.pop-row,
.pick-row {
  box-sizing: border-box;
  width: 100%;
  border: 0;
  text-align: left;
}
.pop-empty { cursor: default; }

/* Status messages retain a readable label and a support-color edge without relying on color alone. */
.toast { border-left: 4px solid var(--cds-focus); }
.toast-success { border-left-color: var(--cds-support-success); }
.toast-warning { border-left-color: var(--cds-support-warning); }
.toast-error { border-left-color: var(--cds-support-error); }
.toast-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.view-loading,
.view-load-error {
  display: flex;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-2);
}
.view-load-error { flex-direction: column; }
.view-load-error p { margin: 0; }

/* Compact desktop visuals sit inside usable pointer targets; touch grows to Carbon's 48px size. */
.topbar .iconbtn { width: 40px; height: 40px; }
.sidebar-footer .sidebar-toggle { width: 40px; height: 40px; }

@media (max-width: 860px) {
  .app-shell,
  .app-shell.sidebar-collapsed,
  .desktop-app .app-shell,
  .desktop-app .app-shell.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: calc(var(--topbar-h) + env(safe-area-inset-top)) minmax(0, 1fr);
    grid-template-areas: "header" "main";
  }
  .shell-brand { display: none; }
  .sidebar {
    top: calc(var(--topbar-h) + env(safe-area-inset-top));
    bottom: 0;
    height: auto;
    max-height: none;
    padding-top: 10px;
  }
  .scrim { top: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  .topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .iconbtn,
  .sidebar-footer .sidebar-toggle,
  .nav-item,
  .project-pill { min-height: 48px; }
  .topbar .iconbtn { width: 48px; height: 48px; }
  .pf-sec-add { min-width: 44px; min-height: 44px; }
  /* Calendar is already a primary mobile destination; avoid duplicating it after a long task list. */
  .content[data-view="board"] .board-cal { display: none; }
}

@media (max-width: 480px) {
  /* Preserve task titles on phones; secondary editing remains available in task detail. */
  .task-row-actions .task-quick-action[data-action] { display: none; }
  .task-row-meta { max-width: 28%; }
}

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

/* Account setup follows the existing Carbon surfaces, type and controls. */
.account-setup { width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); overflow-y: auto; }
.account-setup::backdrop { background: rgb(0 0 0 / 65%); }
.account-setup h1 { font-size: 28px; line-height: 1.2; margin: 12px 0 16px; }
.account-setup p { line-height: 1.55; margin: 14px 0; }
.account-setup .setup-progress { font-size: 12px; letter-spacing: .08em; color: var(--text-2); }
.setup-email { overflow-wrap: anywhere; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.setup-benefits { display: grid; gap: 20px; padding: 20px 0; border-block: 1px solid var(--border); margin-top: 24px; }
.setup-benefits h2 { font-size: 16px; margin: 0; }
.setup-benefits p { margin: 6px 0 0; color: var(--text-2); }
.setup-note { padding: 12px 16px; background: var(--surface-2); }
.setup-help { margin-top: 20px; color: var(--text-2); }
.setup-help summary { cursor: pointer; }
@media (max-width: 600px) { .account-setup { padding: 24px; } .account-setup h1 { font-size: 24px; } }
.account-setup h1:focus { outline: none; }