/* Hallmark · macrostructure: Command Console (horizontal deck, no sidebar) · tone: industrial-utilitarian · anchor hue: amber (~75°)
 * genre: utilitarian · design-system: design.md · designed-as-app
 * IBM Plex (Sans/Condensed/Mono) · squared corners · flat surfaces · mono data labels.
 * Colour/space/type/motion tokens live in tokens.css (loaded before this file).
 * contrast: pass (46–50) · focus rings + reduced-motion handled in tokens.css
 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; outline: none; transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
input:focus, textarea:focus, select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
input[type="checkbox"] { accent-color: var(--amber); cursor: pointer; }

/* ============ APP LAYOUT ============ */
.app {
  display: grid;
  grid-template-rows: 64px 1fr;
  grid-template-columns: 240px 1fr;
  height: 100vh;
  background: var(--bg);
  /* User-controlled zoom via topbar slider — scales the whole interface
     including layout dimensions (unlike transform: scale). Chromium-based
     browsers + Safari support this; Firefox falls back to 1 silently. */
  zoom: var(--ui-scale, 1);
}
.app > .topbar { grid-column: 1 / -1; grid-row: 1; }
.app > .deck   { grid-column: 1;     grid-row: 2; }
.app > .main   { grid-column: 2;     grid-row: 2; min-width: 0; }

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: var(--bg);
  border-bottom: none;
  z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.logo { width: 34px; height: 34px; border-radius: var(--radius-md); background: oklch(20% 0.01 70); display: flex; align-items: center; justify-content: center; }
.logo i { font-size: 20px; color: var(--amber); }
.brand-name { font-family: var(--font-body); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
.brand-sub { font-family: var(--font-body); font-size: 10.5px; color: var(--ink-3); margin-top: 1px; text-transform: none; letter-spacing: 0; font-weight: 500; }

.topbar-right { display: flex; align-items: center; gap: 8px; }
.search { position: relative; display: flex; align-items: center; }
.search i { position: absolute; left: 14px; font-size: 14px; color: var(--ink-3); pointer-events: none; }
.search input { width: 260px; padding-left: 36px; font-size: 12px; height: 36px; background: var(--surface); border-color: var(--border); border-radius: var(--radius-pill); }
.search input:focus { background: var(--surface); border-color: var(--amber); }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; color: var(--ink); background: var(--surface); border: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.icon-btn:hover { background: var(--bg-2); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn i { font-size: 16px; }
.icon-btn .dot {
  position: absolute; top: 1px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 5px;
  background: var(--rust); color: oklch(99% 0 0);
  border-radius: 999px;
  border: 2px solid var(--surface);
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  line-height: 12px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Clock widget */
.clock-widget {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  /* Fixed min-width so the idle "Clock in" label and the running timer occupy
     the same footprint — the topbar no longer reflows on clock in/out. */
  min-width: 108px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  user-select: none;
}
.clock-widget .clock-timer { font-variant-numeric: tabular-nums; }
.clock-widget i { font-size: 13px; color: var(--green); }
.clock-widget:hover { background: var(--bg-3); color: var(--ink); }
.clock-widget:active { transform: scale(0.97); }
.clock-widget.running {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green-ink);
}
.clock-widget.running i { color: var(--green); }
.clock-timer { font-family: var(--font-mono); font-size: 11px; }

/* Company switcher — sits in the topbar between search and the clock widget. */
.company-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}
.company-switcher.hidden { display: none; }
.company-switcher i { font-size: 14px; color: var(--ink-2); }
.company-switcher select {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  padding: 0 2px;
  cursor: pointer;
  outline: none;
}

/* Developer "view as role" switcher — same shell as the company switcher,
   turns amber while a role is being previewed. */
.viewas-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}
.viewas-switcher.hidden { display: none; }
.viewas-switcher i { font-size: 14px; color: var(--ink-2); }
.viewas-switcher .viewas-label { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.viewas-switcher select {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  padding: 0 2px;
  cursor: pointer;
  outline: none;
}
.viewas-switcher.active {
  background: var(--amber-bg);
  border-color: var(--amber);
}
.viewas-switcher.active i,
.viewas-switcher.active .viewas-label,
.viewas-switcher.active select { color: var(--amber-ink); }

/* Thin reminder strip while a developer is previewing another role. */
body.viewing-as-role .topbar { box-shadow: inset 0 -2px 0 var(--amber); }

/* Body grid */
.body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
}

/* Sidebar */
.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 16px 10px;
  overflow-y: auto;
}
.side-group { margin-bottom: 18px; }
.side-label { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 4px 10px; margin-bottom: 4px; font-weight: 500; }
.side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  user-select: none;
}
.side-item:hover { background: var(--bg-3); color: var(--ink); }
.side-item.active { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm), inset 3px 0 0 var(--amber); }
.side-item i { font-size: 15px; opacity: 0.85; }
.side-count { margin-left: auto; font-size: 10px; color: var(--ink-3); font-weight: 400; }
.side-item.active .side-count { color: var(--ink-2); }
.side-item .dot-co { width: 8px; height: 8px; border-radius: 50%; }
.dot-roof    { background: var(--rust);  }
.dot-draft   { background: var(--blue);  }
.dot-lumen   { background: var(--amber); }
.dot-website { background: var(--green); }
.danger-text { color: var(--rust); }

.quick-add {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.quick-add-title { font-weight: 500; margin-bottom: 3px; }
.quick-add-text { color: var(--ink-3); line-height: 1.4; font-size: 10.5px; }
kbd { background: var(--bg-2); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 10px; }

/* Main */
.main {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  overflow: hidden;
}
.main.with-detail { grid-template-columns: 1fr var(--detail-width, 340px); }
.list-pane { overflow-y: auto; min-width: 0; }

/* Drag handle that resizes the detail pane on wide screens. Lives just to the
   left of .detail; absolutely positioned so it doesn't perturb the grid. */
.resize-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 8px;
  margin-left: -4px;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.resize-handle::before {
  content: '';
  position: absolute;
  top: 50%; left: 3px;
  width: 2px; height: 38px;
  background: var(--border-strong);
  border-radius: var(--radius-sm);
  transform: translateY(-50%);
  opacity: 0.55;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.resize-handle:hover::before,
.resize-handle.dragging::before { background: var(--amber); opacity: 1; }
.resize-handle.dragging { background: color-mix(in oklch, var(--amber) 12%, transparent); }
.main { position: relative; }
body.is-resizing,
body.is-resizing * { cursor: col-resize !important; user-select: none !important; }

/* List header / toolbar */
.page-head { padding: 20px 24px 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.page-title-block { flex: 1; min-width: 0; }
.progress-widget-mount { flex-shrink: 0; }
.page-eyebrow { font-family: var(--font-body); font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-weight: 500; }
.page-title { font-family: var(--font-body); font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; margin: 4px 0 0; letter-spacing: -0.02em; text-transform: none; }
.page-actions { display: flex; gap: 6px; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 500; color: var(--ink); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--bg-2); border-color: var(--border-strong); }
.btn:active { transform: scale(0.97); }
.btn i { font-size: 14px; }
.btn-primary { background: oklch(20% 0.01 70); color: oklch(98% 0 0); border-color: oklch(20% 0.01 70); }
.btn-primary:hover { background: oklch(15% 0.01 70); border-color: oklch(15% 0.01 70); filter: none; }
.btn-sm { padding: 6px 11px; font-size: 11px; }
.btn-danger { background: var(--rust-bg); color: var(--rust-ink); border-color: var(--rust); }
.btn-danger:hover { background: var(--rust); color: white; }

/* Layout switcher tabs (Table / Timeline / Kanban) */
.layout-switcher {
  display: flex;
  gap: 6px;
  padding: 0 24px 14px;
}
.layout-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.layout-btn i { font-size: 15px; }
.layout-btn:hover { background: var(--bg-2); color: var(--ink); }
.layout-btn:active { transform: scale(0.97); }
.layout-btn.active {
  background: oklch(20% 0.01 70);
  color: var(--amber);
  border-color: oklch(20% 0.01 70);
}

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 24px 16px; background: transparent; overflow: visible; border: none; }
.stat {
  padding: 16px 18px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.stats .stat:nth-child(1) { background: var(--pastel-pink); }
.stats .stat:nth-child(1) .stat-label { color: var(--pastel-pink-ink); }
.stats .stat:nth-child(1) .stat-value { color: var(--pastel-pink-ink); }
.stats .stat:nth-child(2) { background: var(--pastel-yellow); }
.stats .stat:nth-child(2) .stat-label { color: var(--pastel-yellow-ink); }
.stats .stat:nth-child(2) .stat-value { color: var(--pastel-yellow-ink); }
.stats .stat:nth-child(3) { background: var(--pastel-blue); }
.stats .stat:nth-child(3) .stat-label { color: var(--pastel-blue-ink); }
.stats .stat:nth-child(3) .stat-value { color: var(--pastel-blue-ink); }
.stats .stat:nth-child(4) { background: var(--pastel-green); }
.stats .stat:nth-child(4) .stat-label { color: var(--pastel-green-ink); }
.stats .stat:nth-child(4) .stat-value { color: var(--pastel-green-ink); }
.stat-label { font-family: var(--font-body); font-size: 11px; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-weight: 500; }
.stat-value { font-family: var(--font-body); font-size: 28px; font-weight: 700; margin-top: 5px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat.danger .stat-value { color: var(--rust); }
.stat.good .stat-value { color: var(--green); }

/* List */
.list-row {
  display: grid;
  grid-template-columns: 28px 1fr 150px 116px 100px 110px 124px 80px 88px 28px 36px;
  gap: 12px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--bg-3);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  transition: background var(--dur-fast) var(--ease-out);
}
.list-row:hover { background: var(--bg-2); }
.list-row.selected { background: var(--bg-2); }
.list-row.selected .task-title-cell { color: var(--ink); }
.list-header {
  display: grid;
  grid-template-columns: 28px 1fr 150px 116px 100px 110px 124px 80px 88px 28px 36px;
  gap: 12px;
  padding: 10px 48px;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
  font-weight: 700;
  font-family: var(--font-body);
  background: transparent;
  border-bottom: none;
  cursor: default;
}
/* ============================================================
   Monday-style task groups — a colored left rail + sticky head
   + collapse chevron. Each .task-group sets --group-color via
   inline style so the rail and pill pick up the bucket's hue.
   ============================================================ */
.task-group {
  position: relative;
  background: var(--surface);
  margin: 0 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.task-group::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--group-color, var(--ink-3));
  pointer-events: none;
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}
.task-group + .task-group { margin-top: 14px; }
.task-group.collapsed { box-shadow: var(--shadow-sm); }
.task-group .list-row:last-child { border-bottom: none; }

/* Bare group head (worker view) — minimal, no sticky / chevron */
.group-head {
  padding: 9px 24px;
  background: var(--bg-3);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--border);
}
.group-head.danger { color: var(--rust); }
.group-head.danger i { color: var(--rust); }

/* Monday-style group head (table view) — overrides the above */
.task-group > .group-head {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 18px 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: none;
}
.task-group.collapsed > .group-head { border-bottom: none; }
.group-chevron {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.group-chevron:hover { background: var(--bg-3); color: var(--ink); }
.group-chevron i { font-size: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.task-group.collapsed .group-chevron i { transform: rotate(-90deg); }
.group-pill {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--group-color, var(--ink-3)) 30%, transparent);
}
.group-title { color: var(--ink); }
.group-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--bg-3);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.group-body { background: var(--surface); }
.task-group.collapsed .group-body { display: none; }

/* Skeleton loading primitives — shared by the list, sidebar, and detail-pane
   boot states. A gentle opacity pulse (theme-agnostic; reduced-motion disables it). */
.sk { display: block; height: 12px; border-radius: 6px; background: var(--bg-3); animation: sk-pulse 1.3s ease-in-out infinite; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Task list rows */
.skeleton-list { background: var(--surface); }
.skeleton-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--bg-3);
}
.skeleton-row .sk { flex: none; }
.skeleton-row:nth-child(even) .sk { animation-delay: 0.15s; }
.sk-check   { width: 18px; height: 18px; border-radius: 5px; }
.sk-title   { flex: 1 1 auto; height: 14px; max-width: 340px; }
.sk-avatar  { width: 22px; height: 22px; border-radius: 50%; }
.sk-pill    { width: 84px; height: 18px; border-radius: 999px; }
.sk-pill-sm { width: 60px; }
.sk-date    { width: 56px; }

/* Sidebar dynamic sections (on the dark deck → tint from the text colour) */
.side-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 4px; }
.side-skeleton .sk { background: color-mix(in oklch, currentColor 16%, transparent); }
.sk-side-label { width: 64px; height: 10px; opacity: 0.8; }
.sk-side-item  { width: 100%; height: 16px; }

/* Detail pane */
.detail-skeleton { display: flex; flex-direction: column; }
.detail-skeleton .sk-line { height: 12px; margin: 7px 0; }

.task-title-cell { min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; }
.task-title-cell .tt-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-title-cell.done { color: var(--ink-3); font-weight: 600; }
.task-title-cell.done .tt-text { text-decoration: line-through; }

/* Subtask expander chevron + count badge inside the title cell */
.subtask-toggle {
  flex: none; display: inline-grid; place-items: center;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.subtask-toggle:hover { background: var(--bg-3); color: var(--ink-2); }
.subtask-toggle i { font-size: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.subtask-toggle.expanded i { transform: rotate(90deg); }
.subtask-badge {
  flex: none; font-size: 11px; font-weight: 700; color: var(--ink-3);
  background: var(--bg-3); border-radius: 999px; padding: 1px 7px; text-decoration: none;
}

/* Collapsible subtask drawer under a list row */
.subtask-drawer {
  background: var(--bg-2); border-bottom: 1px solid var(--bg-3);
  padding: 6px 24px 10px 64px; display: flex; flex-direction: column; gap: 4px;
}
.subtask-drawer.hidden { display: none; }
.subtask-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.subtask-line input { cursor: pointer; }
.subtask-line.done span { text-decoration: line-through; color: var(--ink-3); }

/* New task modal — subtask entry row + chips */
.subtask-add-row { display: flex; gap: 8px; }
.subtask-add-row input { flex: 1; padding: 6px 10px; font-size: 12px; }
.subtask-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.subtask-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--bg-3); border-radius: 6px;
  padding: 4px 8px; color: var(--ink-2);
}
.subtask-chip > .ti-circle { color: var(--ink-3); font-size: 13px; }
.subtask-chip .remove { cursor: pointer; color: var(--ink-3); font-size: 14px; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.subtask-chip .remove:hover { color: var(--rust); }
.subtask-chip .remove:active { transform: scale(0.85); }

/* Detail Edit form — subtask rows with a remove button */
.edit-subtask-row { display: flex; align-items: center; gap: 6px; }
.subtask-remove {
  flex: none; border: 0; background: transparent; color: var(--ink-3);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.subtask-remove:hover { color: var(--rust); background: var(--bg-3); }

/* Kanban / timeline card — subtask completion badge */
.kanban-subtask-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--ink-3);
}
.kanban-subtask-badge i { font-size: 13px; }

/* Worker task view — scheduled Time and Task name side-by-side */
.worker-task-list { background: var(--surface); }
.worker-row {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  gap: 14px;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  transition: background 0.1s;
}
.worker-row:hover { background: var(--bg-2); }
.worker-row.selected { background: var(--amber-bg); border-left: 3px solid var(--amber); padding-left: 21px; }
.worker-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.worker-time.all-day { font-size: 11px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.worker-task { min-width: 0; }
.worker-task-title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-task-desc { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-row.done .worker-task-title { text-decoration: line-through; color: var(--ink-3); font-weight: 400; }
.meta-cell { font-size: 14px; color: var(--ink-2); }
.due-cell { font-size: 13.5px; }
.due-today { color: var(--rust); font-weight: 500; }
.due-overdue { color: var(--rust); font-weight: 600; }
.due-time { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 1px; }

.pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 13px; padding: 4px 11px; border-radius: var(--radius-pill); font-weight: 700; letter-spacing: 0.01em; }
.pill-roof    { background: var(--pastel-peach);  color: var(--pastel-peach-ink); }
.pill-draft   { background: var(--pastel-blue);   color: var(--pastel-blue-ink); }
.pill-lumen   { background: var(--pastel-yellow); color: var(--pastel-yellow-ink); }
.pill-website { background: var(--pastel-green);  color: var(--pastel-green-ink); }

/* Task type / label — plain text (pill design removed), each in its own column */
.type-cell { display: flex; align-items: center; justify-content: center; gap: 6px 8px; flex-wrap: wrap; }
.type-text { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; white-space: nowrap; }
.label-cell { display: flex; align-items: center; justify-content: center; min-width: 0; }
.label-text {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  line-height: 1.25; text-align: center; text-wrap: balance;
}
.label-empty { font-size: 12.5px; color: var(--ink-3); opacity: 0.55; }

/* Legacy task type pills — soft filled pastel (retained for backward compat) */
.pill-type {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--bg-3);
  border: none;
}
.type-lead      { background: var(--type-lead);      color: var(--type-lead-ink); }
.type-bid       { background: var(--type-bid);       color: var(--type-bid-ink); }
.type-admin     { background: var(--type-admin);     color: var(--type-admin-ink); }
.type-invoicing { background: var(--type-invoicing); color: var(--type-invoicing-ink); }
.type-ar        { background: var(--type-ar);        color: var(--type-ar-ink); }
.type-meeting   { background: var(--type-meeting);   color: var(--type-meeting-ink); }
.type-web-dev   { background: var(--type-web-dev);   color: var(--type-web-dev-ink); }

/* Bid status sub-pill (only shown when type=bid) */
.pill-bid-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--bg-3); color: var(--ink-2);
}
.pill-bid-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.bid-queue    { color: var(--ink-3); }
.bid-started  { color: var(--blue); }
.bid-supplier { color: var(--amber); }
.bid-ready    { color: var(--green); }
.pill-status { padding: 4px 11px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.status-todo    { background: var(--pastel-blue);   color: var(--pastel-blue-ink); }
.status-doing   { background: var(--pastel-blue);   color: var(--pastel-blue-ink); }
.status-review  { background: var(--pastel-yellow); color: var(--pastel-yellow-ink); }
.status-done    { background: var(--pastel-green);  color: var(--pastel-green-ink); }
.status-hold    { background: var(--pastel-peach);  color: var(--pastel-peach-ink); }
.status-pending { background: var(--bg-3);          color: var(--ink-2); }

/* Inline status pill — a real button that opens the shared .status-menu popover
   (replaces the old native <select>, whose arrow spacing + auto-width to the
   longest option could never be tamed). Only the CURRENT status shows, so the
   pill stays short and the column width is predictable. */
.status-pill-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  /* Tighter right padding leaves room for the caret without widening the pill
     (overrides .pill-status' 11px). */
  padding: 4px 9px 4px 11px;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.status-pill-trigger .status-pill-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill-trigger .status-pill-caret { flex: none; font-size: 13px; opacity: 0.65; margin-right: -2px; transition: transform var(--dur-fast) var(--ease-out); }
.status-pill-trigger:hover { filter: brightness(0.96); }
.status-pill-trigger:active { transform: scale(0.97); }
.status-pill-trigger[aria-expanded="true"] .status-pill-caret { transform: rotate(180deg); opacity: 0.85; }

/* The popover itself — mounted on <body>, positioned with JS (position:fixed). */
.status-menu {
  position: fixed;
  z-index: 220;
  min-width: 168px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  transform-origin: var(--menu-origin, top) center;
  animation: statusMenuIn var(--dur-fast) var(--ease-out);
}
.status-menu.hidden { display: none; }
@keyframes statusMenuIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.status-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.status-menu-item:hover { background: var(--bg-2); }
.status-menu-item:focus-visible { outline: none; background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--amber); }
.status-menu-item .status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.status-menu-item .status-dot.status-doing   { background: var(--blue); }
.status-menu-item .status-dot.status-pending { background: var(--ink-3); }
.status-menu-item .status-dot.status-hold    { background: var(--rust); }
.status-menu-item .status-dot.status-review  { background: var(--amber); }
.status-menu-item .status-dot.status-done    { background: var(--green); }
.status-menu-label { flex: 1; min-width: 0; }
.status-menu-check { flex: none; font-size: 15px; color: var(--amber); opacity: 0; }
.status-menu-item[aria-selected="true"] .status-menu-check { opacity: 1; }
@media (hover: none) and (pointer: coarse) {
  .status-menu-item { padding: 11px 12px; font-size: 13.5px; }
}

/* Pastel-soft priority pills (intelly vibe) */
.priority-block {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  min-width: 80px;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  user-select: none;
}
.priority-block:hover { filter: brightness(0.97); }
.priority-block:active { transform: scale(0.97); }
.priority-critical { background: var(--pastel-pink);   color: var(--pastel-pink-ink); }
.priority-urgent   { background: var(--pastel-peach);  color: var(--pastel-peach-ink); }
.priority-high     { background: var(--pastel-yellow); color: var(--pastel-yellow-ink); }
.priority-medium   { background: var(--pastel-blue);   color: var(--pastel-blue-ink); }
.priority-low      { background: var(--pastel-green);  color: var(--pastel-green-ink); }

.avatar-sm { width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; color: var(--surface); }
.avatar-xs { width: 18px; height: 18px; border-radius: 50%; font-size: 8px; font-weight: 600; display: flex; align-items: center; justify-content: center; color: var(--surface); }

.timer-btn {
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.timer-btn:hover { background: var(--bg-3); color: var(--ink); }
.timer-btn:active { transform: scale(0.92); }
.timer-btn.active { color: var(--green); background: var(--green-bg); }
.timer-btn.active:hover { color: var(--rust); }
.timer-btn i { font-size: 14px; }

/* Finish-task button (replaces the old 3-dots) — visible at rest, pill shape,
   greens-out when the task is done. */
.finish-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.finish-btn i { font-size: 16px; }
.finish-btn:hover { background: var(--pastel-green); color: var(--pastel-green-ink); border-color: var(--pastel-green-ink); }
.finish-btn:active { transform: scale(0.92); }
.finish-btn.is-done { background: var(--pastel-green); color: var(--pastel-green-ink); border-color: var(--pastel-green-ink); }
.finish-btn.is-done:hover { filter: brightness(0.97); }

/* Detail panel */
.detail {
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.detail-head { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.detail-head-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.detail-title { font-family: var(--font-display); font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.detail-body { padding: 16px 18px; flex: 1; }
.detail-row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 7px 0; font-size: 12px; align-items: center; }
.detail-row .label { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.detail-section { margin-top: 18px; }
.detail-section-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.detail-desc { font-size: 13px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; }
.subtask { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; cursor: pointer; }
.subtask i { font-size: 16px; color: var(--ink-3); }
.subtask.done { color: var(--ink-3); text-decoration: line-through; }
.subtask.done i { color: var(--green); }

.activity-item { display: flex; gap: 8px; font-size: 11.5px; color: var(--ink-3); padding: 5px 0; line-height: 1.5; }
.activity-item .who { color: var(--ink); font-weight: 500; }

.delegation-banner { display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: var(--blue-bg); border-radius: var(--radius-sm); font-size: 11.5px; color: var(--blue-ink); margin-bottom: 12px; }
.delegation-banner i { font-size: 14px; }

.timer-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--green-ink);
  margin-bottom: 12px;
}
.timer-banner .live-time {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  margin-left: auto;
}

/* Time-tracking pages */
.time-page { padding: 0 24px 32px; }
.time-section { margin-top: 18px; }
.time-section-title { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; margin-bottom: 10px; }

.time-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.time-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.time-card-label { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.time-card-value { font-family: var(--font-display); font-size: 28px; margin-top: 2px; }
.time-card-sub { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

.time-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.time-table th, .time-table td { padding: 9px 14px; text-align: left; font-size: 12px; border-bottom: 1px solid var(--border); }
.time-table th { background: var(--bg-2); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; font-size: 10px; font-weight: 600; font-family: var(--font-mono); }
.time-table tr:last-child td { border-bottom: none; }
.time-table tr.live td { background: color-mix(in oklch, var(--green) 8%, transparent); }
.time-table .mono { font-family: var(--font-mono); font-size: 11.5px; }
.approval-table select { min-width: 140px; }
.approval-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.approval-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.approval-head .time-section-title { margin-bottom: 0; }
.approval-head-actions { display: flex; gap: 8px; align-items: center; }
.ap-result { margin-top: 12px; font-size: 12px; }
.ap-result.error { color: var(--danger, #c0392b); }
.ap-result.hidden { display: none; }
.approval-scroll { overflow-x: auto; }
.approval-scroll .time-table { min-width: 920px; }
.approval-actions { display: inline-flex; align-items: center; gap: 6px; }
.approval-actions .btn-danger { padding: 7px 9px; }

/* Approvals table → stacked cards on phones, tablets & small laptops.
   The 7-column table needs ~920px of content width; with the inline 240px
   sidebar that means a ~1180px viewport before it fits. Below that the
   horizontal-scroll wrapper pushed the Status/Save columns off-screen (you had
   to two-finger scroll to reach them, and phone/tablet landscape was no better
   since the sidebar still ate width). At ≤1200px each row collapses into a
   self-contained card with the column name (from the cell's data-label) shown
   beside each control — no sideways scroll. The full table returns >1200px. */
@media (max-width: 1200px) {
  .approval-scroll { overflow-x: visible; }
  .approval-scroll .approval-table { min-width: 0; }
  .approval-table,
  .approval-table tbody,
  .approval-table tr,
  .approval-table td { display: block; width: 100%; }
  .approval-table thead { display: none; }
  .approval-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .approval-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
  }
  .approval-table td:last-child { border-bottom: none; }
  .approval-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-3);
  }
  .approval-table td.approval-actions-cell::before { content: none; }
  /* Controls sit on the right and take the remaining width. */
  .approval-table select { min-width: 0; flex: 1 1 auto; max-width: 62%; }
  .approval-table .company-multi { flex: 1 1 auto; justify-content: flex-end; }
  .approval-table .approval-actions { width: 100%; justify-content: flex-end; }
  /* Long emails break instead of forcing the card wider. */
  .approval-table .approval-email { min-width: 0; text-align: right; overflow-wrap: anywhere; }
}

/* Team hierarchy / org chart */
.org-sub { font-size: 12px; color: var(--ink-3); margin: -4px 0 14px; }
.org-chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.org-node {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.org-node-pool { border-style: dashed; }
.org-super {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.org-super-meta { flex: 1; min-width: 0; }
.org-super-name { font-weight: 600; font-size: 13px; }
.org-super-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.org-super-role { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); }
.org-super-sub .pill { font-size: 9px; }
.org-count {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-2); background: var(--bg-3);
  border-radius: var(--radius-sm); padding: 2px 8px;
}
.org-pool-icon { background: var(--bg-3); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.org-reports { padding: 4px 0; }
.org-report {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-template-areas: "avatar name meta" "avatar email email";
  column-gap: 9px; row-gap: 2px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.org-report:last-child { border-bottom: none; }
.org-report .avatar-xs { grid-area: avatar; }
.org-report-name { grid-area: name; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-report-meta { grid-area: meta; display: flex; align-items: center; gap: 6px; justify-self: end; }
.org-report-role { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.org-report-meta .pill { font-size: 9px; }
.org-report-co-empty { font-size: 9px; color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-style: italic; opacity: 0.6; }
.org-report-email { grid-area: email; font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-empty { padding: 12px 14px; font-size: 11.5px; color: var(--ink-3); }

.bar-row { display: grid; grid-template-columns: 110px 1fr 80px; gap: 12px; align-items: center; padding: 8px 0; font-size: 12px; }
.bar-track { background: var(--bg-2); border-radius: var(--radius-sm); height: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-sm); }
.bar-fill.roofing { background: var(--rust); }
.bar-fill.drafting { background: var(--blue); }
.bar-fill.lumen { background: var(--amber); }
.bar-value { text-align: right; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh;
  z-index: 100; animation: fadeIn var(--dur-short) var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal {
  width: 100%; max-width: 540px; background: var(--surface);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  animation: slideUp var(--dur-mid) var(--ease-out);
  overflow: hidden; max-height: 84vh; display: flex; flex-direction: column;
}
.modal-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; }
.modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--bg-2); display: flex; justify-content: space-between; align-items: center; }

/* Task detail rendered as a centered popup (same shell as the New task modal)
   instead of a right-hand side panel. The #detailPane markup is moved into a
   .modal panel at runtime, so we just drop the side-panel border and let the
   detail body scroll within the modal's height cap. */
#taskDetailModal .modal { max-width: 560px; }
.modal-detail .detail {
  border-left: 0;
  background: transparent;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* New task modal: a comfortable default that scales up on widescreen, plus a
   drag handle (bottom-right) so it can be resized by hand. Uses `width` (not
   `max-width`) for the breakpoints so a manual drag can still grow it up to the
   viewport cap below. */
#newTaskModal .modal {
  position: relative;
  width: 540px;
  min-width: 380px;
  min-height: 320px;
  max-width: 96vw;
  max-height: 92vh;
  /* Live zoom factor — updated by the resize handler so text grows/shrinks
     with the popup. Defaults to 1 (no scaling) until the user drags. */
  --nt-scale: 1;
}
/* Scale the popup with the screen: comfortable on normal displays, bigger on a
   genuinely wide one (boss) — without ever dominating the viewport. The grip is
   still there for manual fine-tuning. */
@media (min-width: 1280px) {
  #newTaskModal .modal { width: 560px; }
}
@media (min-width: 1600px) {
  #newTaskModal .modal { width: 600px; }
}
@media (min-width: 2000px) {
  #newTaskModal .modal { width: 760px; }
}
/* Bottom-LEFT grip — kept clear of the Cancel/Create buttons on the right. */
.modal-resize-handle {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  z-index: 6;
  cursor: nesw-resize;
  opacity: 0.5;
  background:
    linear-gradient(225deg, transparent 0 46%, var(--ink-3) 46% 54%, transparent 54%),
    linear-gradient(225deg, transparent 0 71%, var(--ink-3) 71% 79%, transparent 79%);
  transition: opacity var(--dur-short) var(--ease-out);
}
.modal-resize-handle:hover { opacity: 0.9; }
/* Make room so the grip doesn't sit on top of the "Press Ctrl ↵" hint. */
#newTaskModal .modal-foot { padding-left: 30px; }

/* Larger, more readable type throughout the New task popup. Each size is
   multiplied by --nt-scale so the whole popup zooms as it's resized. */
#newTaskModal .modal-title { font-size: calc(22px * var(--nt-scale)); }
#newTaskModal .field-title input { font-size: calc(22px * var(--nt-scale)) !important; }
#newTaskModal .field-label { font-size: calc(12px * var(--nt-scale)); }
#newTaskModal input,
#newTaskModal select,
#newTaskModal textarea { font-size: calc(14px * var(--nt-scale)) !important; }
#newTaskModal .locked-field { font-size: calc(14px * var(--nt-scale)); }
#newTaskModal .notify-title { font-size: calc(14px * var(--nt-scale)); }
#newTaskModal .notify-option { font-size: calc(13px * var(--nt-scale)); }
#newTaskModal .notify-option i { font-size: calc(16px * var(--nt-scale)); }
#newTaskModal .user-menu-hint { font-size: calc(12px * var(--nt-scale)); }
#newTaskModal .field-optional { font-size: calc(10px * var(--nt-scale)); }
#newTaskModal .watcher-add { font-size: calc(12.5px * var(--nt-scale)); }
#newTaskModal .watcher-tag { font-size: calc(13px * var(--nt-scale)); }
#newTaskModal .modal-foot .btn { font-size: calc(13px * var(--nt-scale)); }
#newTaskModal .modal-foot kbd { font-size: calc(11px * var(--nt-scale)); }
#newTaskModal .modal-foot > span { font-size: calc(11px * var(--nt-scale)) !important; }

.field { margin-bottom: 14px; }
.field-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 5px; display: flex; align-items: center; gap: 4px; font-weight: 600; }
.field input, .field textarea, .field select { width: 100%; }
.field-title input { font-family: var(--font-display); font-size: 22px; font-weight: 400; border: none; padding: 4px 0; background: transparent; letter-spacing: -0.01em; }
.field-title input:focus { box-shadow: none; border-bottom: 1px solid var(--border); border-radius: 0; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Optional badge on field labels (e.g. the optional Time input) */
.field-optional {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1px 5px; margin-left: 4px;
}

/* Date/time inputs: clicking anywhere on the box opens the native picker */
.picker-input { cursor: pointer; }
.picker-input::-webkit-calendar-picker-indicator { cursor: pointer; }

.locked-field {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; background: var(--bg-2); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); font-size: 12px;
}
.assigned-field { border-color: var(--amber) !important; background: var(--amber-bg) !important; }
.assigned-field .field-label { color: var(--amber-ink); }

.notify-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.notify-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.notify-option {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; margin: 0 -8px;
  border-radius: var(--radius-sm);
  font-size: 12px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.notify-option:hover { background: var(--bg-3); }
.notify-option:active { transform: scale(0.99); }
.notify-option i { font-size: 14px; color: var(--ink-2); }
.notify-option .email-hint { margin-left: auto; font-size: 10.5px; color: var(--ink-3); font-family: var(--font-mono); }

.watcher-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 32px; align-items: center; }
.watcher-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-2); padding: 3px 8px; border-radius: var(--radius-sm); font-size: 11px; }
.watcher-tag .remove { cursor: pointer; opacity: 0.5; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.watcher-tag .remove:hover { opacity: 1; color: var(--rust); }
.watcher-tag .remove:active { transform: scale(0.85); }
.watcher-add { font-size: 11px; color: var(--ink-3); padding: 3px 6px; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.watcher-add:hover { color: var(--ink); }
.watcher-add:active { transform: scale(0.96); }
.watcher-picker { position: relative; }
.watcher-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 10; padding: 4px; }
.watcher-dropdown-item { padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.watcher-dropdown-item:hover { background: var(--bg-2); }

/* Toast notification */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--bg-3); color: var(--ink); padding: 12px 16px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); font-size: 12.5px; max-width: 380px;
  border: 1px solid var(--border-strong);
  display: flex; gap: 10px; align-items: flex-start;
  /* Transition (not keyframe) so stacked toasts retarget smoothly when several
     arrive or leave at once. @starting-style animates insertion with no JS
     timing; browsers without it just show the toast instantly. Exit is driven
     by the .leaving class so it shares the same easing as the entrance. */
  opacity: 1; transform: translateX(0);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
@starting-style {
  .toast { opacity: 0; transform: translateX(16px); }
}
.toast.leaving { opacity: 0; transform: translateX(16px); }
.toast i.icon-main { font-size: 16px; margin-top: 1px; color: var(--amber); }
.toast-body { flex: 1; line-height: 1.4; }
.toast-title { font-weight: 600; margin-bottom: 2px; }
.toast-sub { font-size: 11px; opacity: 0.7; }
.toast-close { opacity: 0.5; cursor: pointer; }
.toast-close:hover { opacity: 1; }
.toast-action {
  flex: none;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: var(--amber);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  opacity: 0.9;
}
.toast-action:hover { opacity: 1; }

/* Empty state */
.empty {
  padding: 60px 24px; text-align: center; color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center;
}
.empty i { font-size: 48px; color: var(--border-strong); }
.empty-title { font-family: var(--font-display); font-size: 22px; color: var(--ink-2); margin-top: 8px; }
.empty-sub { font-size: 12.5px; margin-top: 4px; max-width: 44ch; }
.empty-cta { margin-top: 18px; }

/* User menu (avatar dropdown) */
.user-menu {
  width: 280px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); z-index: 200; overflow: hidden;
}
.user-menu-head { padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.user-menu-name { font-weight: 600; font-size: 13px; }
.user-menu-meta { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.user-menu-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.user-menu-hint { font-size: 10.5px; color: var(--ink-3); margin-top: 6px; }
.user-menu-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; cursor: pointer; }
.user-menu-item:hover { background: var(--bg-2); }
.user-menu-item i { font-size: 14px; color: var(--ink-2); }
.theme-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.theme-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--border);
  font-size: 12px; color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.theme-opt i { font-size: 14px; }
.theme-opt:hover { background: var(--bg-3); color: var(--ink); }
.theme-opt:active { transform: scale(0.97); }
.theme-opt.active { background: var(--surface); color: var(--amber); border-color: var(--amber); }

/* Notif inbox */
.notif-panel { position: absolute; top: 44px; right: 0; width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 30; overflow: hidden; }
.notif-head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.notif-head-title { font-family: var(--font-display); font-size: 18px; }
.notif-list { max-height: 400px; overflow-y: auto; }
.notif-item { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.notif-item:hover { background: var(--bg-2); }
.notif-item.unread { background: var(--amber-bg); }
.notif-item.unread:hover { background: color-mix(in oklch, var(--amber-bg), var(--ink) 8%); }
.notif-meta { font-size: 10.5px; color: var(--ink-3); margin-bottom: 3px; }
.notif-text { font-size: 12px; line-height: 1.4; }
.notif-empty { padding: 40px 14px; text-align: center; color: var(--ink-3); font-size: 12px; }

/* Helper */
.hidden { display: none !important; }

/* Priority dropdown inside the detail panel: hides the native select
   under the colored pill so the value reads as a Monday-style chip but
   stays clickable to change. */
.detail-priority-cell {
  position: relative; display: inline-flex; align-items: center;
}
.detail-priority-cell .priority-block { pointer-events: none; }
.detail-priority-cell .detail-priority-select {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ============ KANBAN ============ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 24px 32px;
  align-items: start;
}
.kanban-col {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.kanban-col-count {
  background: var(--bg-3);
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
}
.kanban-col.col-todo    .kanban-col-title { color: var(--ink); }
.kanban-col.col-pending .kanban-col-title { color: var(--ink-3); }
.kanban-col.col-hold    .kanban-col-title { color: var(--rust-ink); }
.kanban-col.col-review  .kanban-col-title { color: var(--amber-ink); }
.kanban-col.col-done    .kanban-col-title { color: var(--green-ink); }
.kanban-col-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.kanban-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
  box-shadow: var(--shadow-sm);
}
.kanban-card:hover { background: var(--bg-2); border-color: var(--border-strong); }
.kanban-card:active { transform: scale(0.985); }
.kanban-card.selected { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-bg); }
.kanban-card.done .kanban-card-title { text-decoration: line-through; color: var(--ink-3); }
.kanban-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.kanban-card-title { font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.kanban-card-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 11px;
}
.kanban-card-foot {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--ink-2);
}
.priority-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.priority-dot.priority-critical { background: var(--u-critical); }
.priority-dot.priority-urgent   { background: var(--u-urgent); }
.priority-dot.priority-high     { background: var(--u-high); }
.priority-dot.priority-medium   { background: var(--u-medium); }
.priority-dot.priority-low      { background: var(--u-low); }

/* ============ TIMELINE ============ */
.timeline-board {
  padding: 0 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.timeline-lane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.timeline-lane-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
}
.timeline-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-3);
}
.timeline-dot.past { background: var(--rust); }
.timeline-dot.today { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
.timeline-dot.future { background: var(--blue); }
.timeline-lane-date { flex: 1; }
.timeline-lane-count { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.timeline-lane-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  padding: 12px;
}

/* When the layout switcher hides the table header */
.list-header.hidden { display: none !important; }

/* ============ LEFT SIDEBAR (vertical nav console) ============ */
.deck {
  background: oklch(17% 0.012 70);
  color: oklch(92% 0.012 80);
  padding: 18px 12px;
  overflow-y: auto;
  z-index: 9;
  transition: width var(--dur-short) var(--ease-out);
}
.deck .sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
  border: none;
  padding: 0;
  height: 100%;
}

.side-minimize-btn {
  align-self: flex-end;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: oklch(22% 0.014 70);
  color: oklch(85% 0.012 80);
  border: 1px solid oklch(28% 0.014 70);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  margin-bottom: 4px;
}
.side-minimize-btn:hover { background: oklch(28% 0.014 70); color: oklch(98% 0.01 80); }
.side-minimize-btn i { font-size: 16px; }

.deck .side-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.deck .side-label {
  padding: 4px 12px 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: oklch(60% 0.012 80);
  text-transform: uppercase;
}

/* Collapsible section heading (Company / Time / Org / Admin) */
.side-group-collapsible { margin-top: 8px; }
.side-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 4px 12px 6px;
  background: transparent;
  color: oklch(60% 0.012 80);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.side-group-head:hover { color: oklch(85% 0.012 80); }
.side-group-head .side-label { padding: 0; }
.side-group-chevron {
  font-size: 14px;
  color: oklch(55% 0.012 80);
  transition: transform var(--dur-fast) var(--ease-out);
}
.side-group-collapsible.collapsed .side-group-chevron { transform: rotate(-90deg); }
.side-group-body {
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
  max-height: 600px;
  transition: max-height var(--dur-short) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.side-group-collapsible.collapsed .side-group-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* full-width sidebar pill items */
.deck .side-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: var(--radius-md);
  color: oklch(85% 0.012 80);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.deck .side-item i { font-size: 16px; opacity: 0.85; }
.deck .side-item:hover { background: oklch(23% 0.014 70); color: oklch(98% 0.01 80); }
.deck .side-item.active {
  background: var(--amber);
  color: oklch(20% 0.04 70);
  font-weight: 600;
}
.deck .side-item.active i { color: oklch(20% 0.04 70); opacity: 1; }
.deck .side-item.active .side-count {
  background: oklch(20% 0.04 70 / 0.18);
  color: oklch(20% 0.04 70);
}
.deck .side-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck .side-count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: oklch(70% 0.012 80);
  background: oklch(24% 0.014 70);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  min-width: 22px;
  text-align: center;
}

/* ============ MINIMIZED SIDEBAR (icons-only) ============ */
body.sidebar-minimized .app { grid-template-columns: 68px 1fr; }
.deck.minimized { padding: 14px 8px; }
.deck.minimized .sidebar { gap: 0; }
.deck.minimized .side-minimize-btn { align-self: center; margin-bottom: 10px; }
.deck.minimized .side-label,
.deck.minimized .side-item-label,
.deck.minimized .side-count,
.deck.minimized .side-group-chevron,
.deck.minimized .side-group-head { display: none; }
.deck.minimized .side-item {
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}
.deck.minimized .side-item i { font-size: 18px; opacity: 1; }
.deck.minimized .side-group { gap: 2px; }
.deck.minimized .side-group-body { max-height: none; opacity: 1; }
.deck.minimized .side-group-collapsible.collapsed .side-group-body {
  max-height: none;
  opacity: 1;
  pointer-events: auto;  /* collapsed-state click block doesn't apply when minimized */
}
/* Group separator — thin rule between each section when minimized */
.deck.minimized .side-group-collapsible {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid oklch(28% 0.014 70);
}
.deck.minimized .dot-co {
  width: 12px; height: 12px; border-radius: 50%; margin: 0 auto;
}

/* "Views" sidebar button — opens the multi-section dropdown */
.side-views-btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: oklch(23% 0.014 70);
  color: oklch(90% 0.012 80);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid oklch(28% 0.014 70);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.side-views-btn:hover { background: oklch(27% 0.014 70); border-color: oklch(32% 0.014 70); }
.side-views-btn span { flex: 1; text-align: left; }
.side-views-btn .chevron { font-size: 14px; transition: transform var(--dur-fast) var(--ease-out); margin-left: auto; }
.side-views-btn.open .chevron { transform: rotate(180deg); }
.side-views-btn.active { background: oklch(27% 0.014 70); border-color: var(--amber); color: oklch(98% 0.01 80); }
.side-views-btn i { font-size: 16px; }

/* "Views" anchored popover (same structure as before, light card) */
.more-menu {
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 1000;
}
.more-menu-section { padding: 4px 2px; }
.more-menu-section + .more-menu-section { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.more-menu-section .side-label {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink-3);
  padding: 4px 10px;
  text-transform: uppercase;
}
.more-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-md);
  font-size: 13px; cursor: pointer;
  color: var(--ink);
}
.more-menu-item:hover { background: var(--bg-2); }
.more-menu-item.active { background: var(--amber-bg); color: var(--amber-ink); }
.more-menu-item i { font-size: 14px; color: var(--ink-2); }
.more-menu-label { flex: 1; }
.more-menu-item .side-count {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--ink-3); background: var(--bg-3);
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.more-menu-empty { padding: 10px; font-size: 12px; color: var(--ink-3); }

/* ============ WORK TOOLBAR (action bar at top of work surface) ============ */
.work-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px 6px;
}
.work-toolbar-spacer { flex: 1; }
.work-toolbar .layout-switcher { padding: 0; gap: 4px; }
.work-toolbar .layout-btn { padding: 7px 10px; }

/* full-bleed work surface header */
.page-head { padding: 8px 24px 14px; }

/* ============================================================
   RESPONSIVE — phones & small tablets
   The app was built for wide monitors; these rules keep it
   usable on a phone (the field-worker case) and stop any
   horizontal page overflow.
   ============================================================ */
@media (max-width: 720px) {
  /* Topbar: tighten, drop the sub-label, let search shrink */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-left { gap: 8px; min-width: 0; }
  .brand-name { font-size: 16px; white-space: nowrap; }
  .brand-sub { display: none; }
  .topbar-right { gap: 6px; min-width: 0; }
  /* Search is the flexible element: it absorbs the shrink so the fixed-width
     controls (clock, icon buttons, avatar) always stay on-screen. */
  .search { flex: 1 1 56px; min-width: 0; max-width: 200px; }
  .search input { width: 100%; min-width: 0; }
  .clock-widget { padding: 6px 10px; min-width: 92px; flex: none; }
  /* The developer "View as" switcher is space-hungry; drop its label and cap
     its width on phones so it can't shove the clock/icons off the right edge. */
  .viewas-switcher { gap: 4px; padding: 0 8px; max-width: 150px; }
  .viewas-switcher .viewas-label { display: none; }
  .viewas-switcher select { max-width: 110px; text-overflow: ellipsis; }

  /* Deck: stack the two control rows; let chip rows swipe horizontally
     instead of pushing the page wider than the screen */
  .deck-primary {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
  }
  .grp-views,
  .deck-scope {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .grp-views::-webkit-scrollbar,
  .deck-scope::-webkit-scrollbar { display: none; }
  .deck .side-item { flex-shrink: 0; }
  .deck-actions { justify-content: flex-start; flex-wrap: wrap; }
  .deck-scope { gap: var(--space-md); }

  /* Work surface */
  .list-pane { overflow-x: auto; } /* lets the wide kanban board scroll */

  /* The desktop task table has fixed px columns that don't fit a phone and
     collapse the title to nothing. Stack each row into a card instead:
     line 1 = checkbox + title, line 2 = type · due · status. */
  #taskViewWrap .list-header { display: none; }
  .list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
  }
  .list-row > input[type="checkbox"] { order: 0; }
  .list-row .task-title-cell {
    order: 1;
    flex: 1 1 calc(100% - 40px);
    white-space: normal;
    font-size: 14px;
  }
  .list-row .type-cell { order: 3; }
  .list-row .due-cell  { order: 4; }
  .list-row > div:nth-child(9) { order: 5; } /* status pill */
  /* Hide the lower-signal columns on a phone */
  .list-row > div:nth-child(5),  /* company */
  .list-row > div:nth-child(7),  /* priority */
  .list-row .timer-btn,
  .list-row .more-btn { display: none; }
  /* .meta-cell carries an inline display:flex, so override needs !important */
  .list-row .meta-cell { display: none !important; }

  .page-head { padding: 14px 14px 8px; }
  .page-title { font-size: 26px; }
  .time-page { padding: 0 14px 24px; }

  /* Detail panel becomes a full-screen overlay rather than a side column */
  .main.with-detail { grid-template-columns: 1fr; }
  .detail:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 60;
    border-left: none;
  }

  /* Modal: breathing room from the screen edges */
  .modal-backdrop { padding: 6vh 12px 12px; }

  /* Org chart stacks to a single column */
  .org-chart { grid-template-columns: 1fr; }
}

/* ============================================================
   FILTER BAR — Monday-style chip filters (assignee / company /
   status / priority / type / due range). Lives below the page
   head; toggled by the Filter button in the command deck.
   ============================================================ */
.filter-bar {
  margin: 0 24px 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}
.filter-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.filter-group {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 0;
  border-right: 1px solid var(--border);
}
.filter-group:last-of-type { border-right: none; }
.filter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-right: 4px;
  font-weight: 600;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  user-select: none;
}
.filter-chip:hover { background: var(--bg-3); color: var(--ink); }
.filter-chip.active {
  background: var(--amber-bg);
  color: var(--amber-ink);
  border-color: var(--amber);
}
.filter-chip .swatch {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.filter-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.filter-summary { font-size: 11px; color: var(--ink-3); }
.filter-clear {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  color: var(--rust-ink);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.filter-clear:hover { background: var(--rust-bg); }
.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px;
  margin-left: 4px;
  background: var(--amber);
  color: var(--color-accent-ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700;
}

/* ============================================================
   Toolbar dropdown menus — Sort + Group anchored popovers
   ============================================================ */
.toolbar-menu {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: 6px;
  z-index: 9999;
}
.toolbar-menu-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: 6px 10px 8px;
  font-weight: 600;
}
.toolbar-menu-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.toolbar-menu-item:hover { background: var(--bg-2); }
.toolbar-menu-item.active { background: var(--amber-bg); color: var(--amber-ink); }
.toolbar-menu-item i { font-size: 14px; color: var(--ink-3); }
.toolbar-menu-item.active i { color: var(--amber); }
.toolbar-menu-hint {
  font-size: 10.5px;
  color: var(--ink-3);
  padding: 8px 10px 4px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}

.btn.active {
  background: var(--amber-bg);
  border-color: var(--amber);
  color: var(--amber-ink);
}

/* Soft row hover (subtle, monday-style) */
.list-row { transition: background var(--dur-fast) var(--ease-out); }
.list-row:hover { background: var(--bg-2); }

/* ============================================================
   Today's Progress card — dark mini-dashboard pinned to page-head
   ============================================================ */
.progress-card {
  width: 340px;
  background: linear-gradient(135deg, oklch(20% 0.01 70) 0%, oklch(25% 0.02 70) 100%);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  color: oklch(95% 0.01 80);
  box-shadow: var(--shadow-md);
}
.progress-card-head { margin-bottom: 10px; }
.progress-card-eyebrow {
  font-size: 11px;
  font-weight: 500;
  color: oklch(70% 0.02 80);
  letter-spacing: 0;
  text-transform: none;
}
.progress-card-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: oklch(98% 0.01 80);
  margin-top: 2px;
}
.progress-card-body {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 14px;
}
.progress-ring { position: relative; width: 100px; height: 100px; }
.progress-ring svg { display: block; }
.progress-ring-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 24px; font-weight: 700;
  color: oklch(96% 0.01 80);
  letter-spacing: -0.02em;
}
.progress-ring-num span {
  font-size: 12px;
  font-weight: 500;
  color: oklch(70% 0.02 80);
  margin-left: 1px;
  margin-top: 6px;
}
.progress-metrics {
  display: flex; flex-direction: column; gap: 7px;
}
.progress-metric {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
}
.progress-metric-num {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  color: oklch(98% 0.01 80);
  min-width: 18px;
}
.progress-metric-label {
  font-size: 11px; color: oklch(70% 0.02 80);
  font-weight: 500;
}

/* Celebration toast variant — warmer accent, slightly larger title */
.toast.toast-celebrate { border-left: 4px solid var(--amber); }
.toast.toast-celebrate .icon-main { color: var(--amber); }
.toast.toast-celebrate .toast-title { font-size: 14.5px; font-weight: 700; }

/* ============================================================
   UI scale popover — slider that drives --ui-scale on :root
   ============================================================ */
.scale-popover {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  width: 280px;
  padding: 14px 16px;
  z-index: 9999;
}
.scale-pop-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 10px;
}
.scale-pop-row { display: flex; align-items: center; gap: 8px; }
.scale-pop-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  outline: none;
  padding: 0;
  border: none;
  cursor: pointer;
}
.scale-pop-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.scale-pop-row input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.scale-pop-row input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--surface);
  cursor: grab;
}
.scale-step {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.scale-step:hover { background: var(--bg-3); color: var(--ink); }
.scale-step i { font-size: 14px; }
.scale-pop-readout {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}
.scale-reset {
  font-size: 11px;
  color: var(--amber-ink);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.scale-reset:hover { background: var(--amber-bg); }
.scale-pop-hint {
  font-size: 10.5px;
  color: var(--ink-3);
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  line-height: 1.5;
}

/* ============================================================
   Onboarding tour — spotlight + anchored tooltip
   ============================================================ */
.tour-catch { position: fixed; inset: 0; z-index: 9997; }
.tour-highlight {
  position: fixed;
  z-index: 9998;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px var(--amber), 0 0 0 9999px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: left 0.18s var(--ease-out), top 0.18s var(--ease-out),
              width 0.18s var(--ease-out), height 0.18s var(--ease-out), opacity 0.15s;
}
.tour-tooltip {
  position: fixed;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  animation: fadeIn var(--dur-short) var(--ease-out);
}
.tour-arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-right: none; border-bottom: none;
  transform: rotate(45deg);
  top: -7px;
}
.tour-arrow.down { top: auto; bottom: -7px; transform: rotate(225deg); }
.tour-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tour-body { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.tour-dot.on { background: var(--amber); }
.tour-actions { display: flex; gap: 6px; }

@media (max-width: 460px) {
  /* On the smallest screens the search and the redundant sign-out icon
     (sign-out also lives in the avatar menu) just take space */
  .topbar .search { display: none; }
  #signOutBtn { display: none; }
  .clock-widget span:not(.clock-timer) { display: none; }
}

/* ============================================================
   VISUAL REFRESH — denser header, sharper group cards, avatars
   in the group rail. Overrides earlier rules; keeps cream/amber.
   ============================================================ */

/* Tighter, more editorial page header */
.work-toolbar { padding: 12px 24px 4px; gap: 6px; }
.btn { padding: 7px 13px; font-size: 12px; box-shadow: none; }
/* Default buttons only — primary/danger keep their own (darker/rust) hover.
   Without the :not() guards this generic rule overrides .btn-primary:hover /
   .btn-danger:hover (same specificity, declared later), washing the button
   light while its text stays near-white → invisible on hover. */
.btn:not(.btn-primary):not(.btn-danger):hover { background: var(--bg-3); }
.btn i { font-size: 13px; }
.btn-primary { padding: 7px 14px; box-shadow: var(--shadow-sm); }

.page-head {
  /* Left padding = task-group margin (24px) + group-head padding-left (14px)
     so the title sits flush with the chevron column below. */
  padding: 18px 24px 18px 38px;
  gap: 16px;
  align-items: center;
  /* Wrap the title block + widgets onto separate lines when the work
     surface narrows (typically when the detail pane is open on a
     mid-width viewport). Without this the 360px widgets stayed
     flex-shrink:0 and visually overlapped the page title. */
  flex-wrap: wrap;
}
.page-title-block { overflow: hidden; }
.page-head-widgets { flex-shrink: 1; min-width: 0; }
.page-title-block { padding-left: 0; }
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-title {
  font-size: 52px;
  margin-top: 8px;
  letter-spacing: -0.025em;
  line-height: 1.0;
}

/* Make the list header line up with the task-group cards' left edge */
.list-header { padding-left: 24px; padding-right: 24px; }

/* Container for the page-head widgets (Up next + Today's progress) */
.page-head-widgets {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-shrink: 0;
}
/* Force both cards to identical width and height, regardless of inner content. */
.page-head-widgets > .up-next-mount,
.page-head-widgets > .progress-widget-mount { width: 360px; flex-shrink: 0; }
.page-head-widgets > * > .up-next-card,
.page-head-widgets > * > .progress-card {
  width: 100%;
  height: 88px;
  box-sizing: border-box;
}

/* "Up next" card — dark mini-dashboard sibling of the progress card.
   Same gradient, same radius, same shadow, same height — they read as a set. */
.up-next-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, oklch(20% 0.01 70) 0%, oklch(25% 0.02 70) 100%);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  width: 340px;
  box-sizing: border-box;
  color: oklch(95% 0.01 80);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.up-next-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* (Priority is already signalled by the chip — no left rail needed.) */

/* ============================================================
   Watching view — team supervision dashboard.
   Direct reports rendered as cards; each shows their workload at
   a glance and a Ping button that sends an in-app notification.
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  padding: 14px 24px 24px;
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.team-card.is-flagged {
  border-color: color-mix(in oklch, var(--rust) 45%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--rust) 10%, transparent), var(--shadow-sm);
}
.team-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.team-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: oklch(99% 0 0);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.team-info { flex: 1; min-width: 0; }
.team-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-role {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.team-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--green-bg);
  color: var(--green-ink);
  flex-shrink: 0;
}
.team-status i { font-size: 13px; }
.team-card.is-flagged .team-status {
  background: var(--rust-bg);
  color: var(--rust-ink);
}

.team-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.team-stat {
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
}
.team-stat.is-warn {
  background: var(--rust-bg);
  color: var(--rust-ink);
}
.team-stat-num {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.team-stat.is-warn .team-stat-num { color: var(--rust-ink); }
.team-stat-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-stat.is-warn .team-stat-label { color: var(--rust-ink); opacity: 0.85; }

.team-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--rust-ink);
  background: var(--rust-bg);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.team-note i { font-size: 14px; }

.team-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.team-actions .btn { flex: 1; justify-content: center; }

/* Icon medallion — single amber accent regardless of priority */
.up-next-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--amber);
}
.up-next-icon i { font-size: 18px; }

.up-next-text { flex: 1; min-width: 0; }
.up-next-eyebrow {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: oklch(70% 0.02 80);
  text-transform: none;
}
.up-next-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: oklch(98% 0.01 80);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.up-next-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}
.up-next-prio {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  color: oklch(99% 0 0);
  line-height: 1.5;
}
/* All priority chips use the same amber accent — one color story. */
.up-next-prio {
  background: var(--amber);
  color: oklch(22% 0.06 70);
}
.up-next-due {
  font-size: 11px;
  font-weight: 500;
  color: oklch(70% 0.02 80);
}
.up-next-due.overdue { color: var(--amber); font-weight: 600; }

/* Circular Start button — sits on the dark card */
.up-next-start {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: oklch(20% 0.04 70);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.up-next-start i { font-size: 16px; margin-left: 1px; }
.up-next-start span { display: none; }
.up-next-start:hover {
  transform: scale(1.08);
  background: oklch(82% 0.14 78);
}
.up-next-start.running {
  background: oklch(70% 0.18 28);
  color: oklch(99% 0 0);
}
.up-next-start.running i { margin-left: 0; }

/* Empty state — caught up */
.up-next-empty { cursor: default; }
.up-next-empty .up-next-icon { color: oklch(80% 0.14 140); }
.up-next-empty:hover { transform: none; box-shadow: var(--shadow-md); }
.up-next-empty-row {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: oklch(98% 0.01 80);
  margin-top: 1px;
  letter-spacing: -0.01em;
}

@media (max-width: 1200px) {
  .up-next-card { width: 260px; }
}
/* On phones (≤720px) the widgets get their own full-width row stacked
   vertically — the 360px desktop widths don't fit a 360-430px viewport,
   and the previous "display: none" hid them entirely. Tablets in
   721-900px get the existing 50/50-split flex row layout from the
   small-tablet block further down. */
@media (max-width: 720px) {
  /* Side-by-side instead of stacked so the two widgets take one short row, not
     two tall ones — they were eating too much vertical space above the list. */
  .page-head-widgets {
    width: 100%;
    flex-direction: row;
    gap: 8px;
  }
  .page-head-widgets > .up-next-mount,
  .page-head-widgets > .progress-widget-mount {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .page-head-widgets > * > .up-next-card,
  .page-head-widgets > * > .progress-card {
    width: 100%;
    height: 64px;
  }
}
/* Tiny phones: one column is too narrow for two cards — drop the secondary
   progress widget and let "Up next" use the full width. */
@media (max-width: 430px) {
  .page-head-widgets > .progress-widget-mount { display: none; }
}
/* When the detail pane is open on a mid-width viewport the list-pane
   is too narrow for the widgets to coexist with the page title, so
   hide them in that combination. Widgets reappear once you close the
   detail pane or widen the window past 1300px. */
@media (max-width: 1300px) {
  .main.with-detail .page-head-widgets { display: none; }
}

/* Progress card — flat horizontal strip, sized to match Up Next */
.progress-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
}
.progress-card-text { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; }
.progress-card-head { margin: 0; }
.progress-card-eyebrow { font-size: 10.5px; letter-spacing: 0.05em; }
.progress-card-title { font-size: 13px; margin-top: 1px; white-space: nowrap; }
.progress-ring { width: 48px; height: 48px; flex-shrink: 0; }
.progress-ring svg { width: 48px; height: 48px; }
.progress-ring-num { font-size: 12px; font-weight: 700; }
.progress-ring-num span { font-size: 8px; margin-top: 1px; margin-left: 1px; }
.progress-metrics {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.progress-metric {
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  min-width: 0;
}
.progress-metric-num { font-size: 12px; line-height: 1.1; }
.progress-metric-label { font-size: 9.5px; }

/* Hide the "Today's progress / 0 of 4 done" label across the whole tablet
   range, not just ≤900px. Between 901–1200px the widget shrinks to ~220px and
   the label would otherwise collide with the Total/Done/Pending metrics. Only
   full desktop (>1200px) has room for the text. */
@media (max-width: 1200px) {
  .progress-card .progress-card-text { display: none; }
}

/* List header — line up with the new card padding */
.list-header {
  padding: 8px 40px 6px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Task group cards — distinct, framed, denser stack */
.task-group {
  margin: 0 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(45, 31, 14, 0.03);
}
.task-group + .task-group { margin-top: 8px; }
.task-group::before { width: 4px; border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }

/* Hide the per-row checkbox column AND collapse the 28px column it lived in,
   so the task title is the first column instead.
   Column order: Task | Type | Label | Assignee | Priority | Status | Due | Description | timer | finish */
.list-row > input[type="checkbox"] { display: none; }
#taskViewWrap .list-header > span:first-child { display: none; }
.list-row,
#taskViewWrap .list-header {
  grid-template-columns: minmax(150px, 1fr) 86px 118px 124px 90px 118px 78px minmax(110px, 1.3fr) 28px 36px;
  gap: 10px;
  padding-left: 18px;
  padding-right: 18px;
}
/* The .list-header sits outside the .task-group cards (which have 24px side
   margins). Mirror those margins on the header so its column labels line up
   with the cell content inside each card. */
#taskViewWrap .list-header { margin: 0 24px; }

/* All roles share the same clean task-table layout (the Assignee column and
   grid template are identical for workers, supervisors, admins, developers).
   Workers simply only have their own tasks in the list. */

/* Center the middle columns (Type / Assignee / Priority / Status / Due) —
   keep Task and Description left-aligned since they're prose. nth-child counts
   the hidden checkbox/empty-span as the first child. */
#taskViewWrap .list-header > span:nth-child(3),
#taskViewWrap .list-header > span:nth-child(4),
#taskViewWrap .list-header > span:nth-child(5),
#taskViewWrap .list-header > span:nth-child(6),
#taskViewWrap .list-header > span:nth-child(7),
#taskViewWrap .list-header > span:nth-child(8) {
  text-align: center;
}
.list-row > :nth-child(3),
.list-row > :nth-child(4),
.list-row > :nth-child(5),
.list-row > :nth-child(6),
.list-row > :nth-child(7),
.list-row > :nth-child(8) {
  justify-self: center;
  text-align: center;
}

/* Description cell — truncate to one line so the row stays compact */
.list-row .desc-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
  font-size: 12.5px;
}
.list-row.selected .desc-cell { color: var(--ink-2); }

.task-group > .group-head {
  padding: 10px 16px 10px 14px;
  background: color-mix(in oklch, var(--group-color, var(--ink-3)) 5%, var(--surface));
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: -0.005em;
}
.task-group.collapsed > .group-head {
  border-bottom: none;
  border-radius: var(--radius-md);
}

/* Group "avatar" — initial chip sitting on the colored rail */
.task-group > .group-head .group-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: oklch(99% 0 0);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklch, var(--group-color, var(--ink-3)) 55%, transparent),
    0 0 0 3px color-mix(in oklch, var(--group-color, var(--ink-3)) 14%, transparent);
}

/* Count badge — pill chip, picks up the group hue subtly */
.task-group > .group-head .group-count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: color-mix(in oklch, var(--group-color, var(--ink-3)) 12%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--group-color, var(--ink-3)) 18%, var(--border));
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0;
}

/* Roomier rows inside each card */
.task-group .list-row {
  padding: 18px 24px;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
}
.task-group .list-row:hover {
  background: color-mix(in oklch, var(--group-color, var(--ink-3)) 4%, var(--surface));
}

@media (max-width: 720px) {
  .page-title { font-size: 22px; }
  .progress-card { width: 100%; }
  .task-group { margin: 0 12px; }
}

/* ============================================================
   Extend the dark sidebar color up into the topbar's left section
   so the dark column reaches the top of the page behind the logo.
   ============================================================ */
.topbar { padding: 0; background: var(--bg); }
.topbar-left {
  background: oklch(17% 0.012 70);
  width: 240px;
  height: 64px;
  padding: 0 22px;
  gap: 12px;
  box-sizing: border-box;
}
.topbar-left .brand-name { color: oklch(94% 0.013 85); }
.topbar-left .brand-sub  { color: oklch(62% 0.012 80); }
.topbar-right { padding-right: 22px; }

body.sidebar-minimized .topbar-left {
  width: 68px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
body.sidebar-minimized .topbar-left .brand-name,
body.sidebar-minimized .topbar-left .brand-sub { display: none; }
/* The brand text is wrapped in an unnamed <div>; hide that wrapper too
   so the logo can truly center (otherwise it leaves a 0-width sibling
   that the flex gap still spaces against). */
body.sidebar-minimized .topbar-left > div:not(.logo) { display: none; }

/* ============================================================
   Minimized sidebar — explicitly center the icons (and the
   collapse button) within the 68px column.
   ============================================================ */
.deck.minimized {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: hidden;
  scrollbar-width: none;
}
.deck.minimized::-webkit-scrollbar { display: none; }
.deck.minimized .sidebar {
  width: 100%;
  align-items: center;
  gap: 0;
}
.side-minimize-btn { display: none !important; }
.topbar-left { transition: background var(--dur-fast) var(--ease-out); }
.topbar-left:hover { background: oklch(22% 0.014 70); }
.deck.minimized .side-group,
.deck.minimized .side-group-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.deck.minimized .side-group { margin-bottom: 0; }
.deck.minimized .side-group-collapsible {
  margin-top: 4px;
  padding-top: 4px;
}
.deck.minimized .side-item {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-sm);
  justify-content: center;
  align-items: center;
}
.deck.minimized .side-item i { font-size: 16px; }
/* Match the dot's visual weight to the 16px Tabler icons around it —
   the previous 10px made the company dots look noticeably smaller
   than the workspace icons stacked above them. */
.deck.minimized .dot-co { width: 14px; height: 14px; }

/* ============================================================
   MOBILE POLISH — appended last so the cascade wins without
   touching every earlier rule. Three breakpoints:
     • ≤1200px tablets — keep header widgets useful, tighten chrome
     • ≤900px  small tablets — single column overlay-style detail
     • ≤720px  phones (landscape & portrait) — card list, touch sizes
     • ≤460px  small phones — full-bleed everything
   Plus a (hover: none) block for touch behaviour cleanup.
   ============================================================ */

/* iOS Safari zooms text fields whose font-size is <16px. Keep the
   visual density on desktop but bump on phones so focus doesn't jump. */
@media (max-width: 720px) {
  input, textarea, select { font-size: 16px; }
  .search input { font-size: 14px; }
}

/* Honor iPhone safe-area insets so the topbar/sidebar/detail panes
   don't get clipped by the notch or home indicator. */
.topbar { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
@media (max-width: 720px) {
  .detail:not(.hidden) {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-backdrop {
    padding-top: max(6vh, env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---- Tablet range (901-1200px) — bring back hidden widgets ---- */
@media (max-width: 1200px) and (min-width: 901px) {
  /* Don't fully hide the progress card on tablets; shrink it instead */
  .page-head-widgets > .up-next-mount,
  .page-head-widgets > .progress-widget-mount { width: 220px; }
  .up-next-card { width: 100%; }
  .page-title { font-size: 40px; }
  .work-toolbar { gap: 4px; padding-left: 16px; padding-right: 16px; }
  .btn { padding: 7px 11px; }
  /* The full desktop grid (~1030px) doesn't fit the ~686px content column at
     1024px (after the task-card 24px side margins), so it clipped Status/Due
     off the right edge. There isn't room for all 7 data columns here without
     cramming, so drop the two lowest-value ones — Description and Label (both
     empty/"—" in most rows) — and size the rest to their real content widths.
     The Status <select> ("Working on it") gets a track that actually holds it
     instead of spilling into Due. Task flexes to fill extra room up at 1200px;
     Description returns in the laptop tier below, Label on full desktop. */
  .list-row,
  #taskViewWrap .list-header {
    grid-template-columns: minmax(80px, 1fr) 92px 84px 80px 146px 74px 28px 34px;
    gap: 6px;
  }
  #taskViewWrap .list-header > span:nth-child(4),   /* Label label */
  #taskViewWrap .list-header > span:nth-child(9) {  /* Description label */
    display: none;
  }
  .list-row .label-cell,
  .list-row .desc-cell { display: none; }
}

/* ---- Laptop band (1201-1365px) ----
   The full desktop grid (~1030px of tracks) needs a ~1340px+ window to fit;
   below that it overflowed and clipped Status/Due/Description off the right
   edge (the 1280px laptop was the worst case). This range has more room than
   a tablet, so keep Description but drop the mostly-empty Label, and give the
   Status select a track wide enough to not collide with Due. The untouched
   desktop grid takes over at ≥1366px, where it provably fits. */
@media (min-width: 1201px) and (max-width: 1365px) {
  .list-row,
  #taskViewWrap .list-header {
    grid-template-columns: minmax(110px, 1fr) 76px 100px 86px 150px 80px minmax(110px, 1.3fr) 28px 34px;
    gap: 8px;
  }
  #taskViewWrap .list-header > span:nth-child(4) { display: none; } /* Label label */
  .list-row .label-cell { display: none; }
}

/* ---- Small tablets (721-900px) — collapse second-row widgets ---- */
@media (max-width: 900px) and (min-width: 721px) {
  .page-head { flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
  .page-title { font-size: 32px; }
  .work-toolbar {
    flex-wrap: wrap;
    overflow: visible;
    padding: 10px 16px 4px;
  }
  .work-toolbar > .btn { flex: 0 0 auto; }
  /* The flex spacer pushes the buttons (incl. "New task") off the right edge
     of the narrow tablet toolbar; drop it so they left-align and wrap. */
  .work-toolbar-spacer { display: none; }
  /* Keep the primary "New task" action visible at the start rather than
     scrolled off the right edge (matches the phone toolbar). */
  .work-toolbar > .btn-primary { order: -1; }
  /* Side column gets narrower so list has more room */
  .app { grid-template-columns: 200px 1fr; }
  .topbar-left { width: 200px; }
  body.sidebar-minimized .topbar-left { width: 60px; }
  /* Trim widget heights to fit two-line header */
  .page-head-widgets { width: 100%; }
  .page-head-widgets > .up-next-mount,
  .page-head-widgets > .progress-widget-mount { flex: 1; width: auto; min-width: 0; }
}

/* ---- Tablet portrait (721-900px) — task list becomes cards ----
   With a 200px sidebar the content column is only ~560-700px wide, far too
   narrow for the ~9-column table (columns were being silently clipped off the
   right edge). Reuse the phone card layout here: title on its own line, meta
   chips wrapping below, finish button pinned top-right. The surrounding chrome
   (sidebar, topbar, modals) stays in its tablet form — only the list reflows. */
@media (max-width: 900px) and (min-width: 721px) {
  #taskViewWrap .list-header { display: none; }
  .task-group .list-row,
  .list-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 14px 56px 14px 18px; /* right pad reserves room for the finish btn */
    position: relative;
  }
  .list-row > input[type="checkbox"] { display: none !important; }
  .list-row .task-title-cell {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    order: 2;
  }
  /* Force the meta chips onto a fresh line below the title. */
  .list-row::after { content: ''; flex-basis: 100%; height: 0; order: 3; }
  .list-row > :not(input):not(.task-title-cell):not(.finish-btn) {
    flex: 0 0 auto;
    font-size: 12px;
    order: 4;
    justify-self: start;
    text-align: left;
  }
  .list-row .meta-cell {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .list-row .finish-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px; height: 40px;
    flex: 0 0 auto;
    z-index: 3;
    touch-action: manipulation;
  }
  /* Hide the noisy/secondary cells; keep Assignee (there's room on a tablet). */
  .list-row .desc-cell,
  .list-row .timer-btn,
  .list-row .more-btn { display: none !important; }
}

/* ---- Phones (≤720px) — biggest mobile rule block ---- */
@media (max-width: 720px) {
  /* Layout: stack — sidebar collapses to icon strip via existing
     .deck.minimized mechanism, but here we hide it by default and
     surface it via a bottom dock-style bar. Simpler: drop sidebar
     entirely; the topbar logo can act as the menu affordance.
     `body.x .app` selector covers both the unminimized and minimized
     state so the `body.sidebar-minimized .app { grid-template-columns: 68px 1fr }`
     at line 1026 — which has higher specificity than a bare `.app` —
     can't keep a phantom sidebar column on phones. */
  body .app {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr;
    height: 100vh;
    /* Use dynamic viewport height where supported so the address bar
       collapsing doesn't make the layout overflow. */
    height: 100dvh;
  }
  .app > .deck { display: none; }
  .app > .main { grid-column: 1; }
  .topbar { height: 56px; }
  .topbar-left { width: auto; padding: 0 12px; background: oklch(17% 0.012 70); height: 56px; }
  body.sidebar-minimized .topbar-left { width: auto; padding: 0 12px; justify-content: flex-start; }
  body.sidebar-minimized .topbar-left .brand-name { display: block; color: oklch(94% 0.013 85); font-size: 15px; }
  body.sidebar-minimized .topbar-left > div:not(.logo) { display: block; }
  .topbar-right { padding-right: 12px; gap: 4px; }

  /* Touch-target minimums (WCAG 2.5.5 AAA = 44×44) */
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn i { font-size: 18px; }
  .avatar { width: 40px; height: 40px; font-size: 12px; }
  .clock-widget { padding: 10px 14px; min-height: 40px; font-size: 13px; }
  .clock-widget i { font-size: 15px; }

  /* Toolbar buttons — wrap onto multiple rows so every control stays visible
     and reachable. (Was a hidden-scrollbar horizontal scroll, which silently
     clipped Sort/Group off the right edge and read as broken.) */
  .work-toolbar {
    flex-wrap: wrap;
    overflow: visible;
    padding: 10px 12px 4px;
    gap: 6px;
  }
  .work-toolbar-spacer { display: none; }
  .work-toolbar > .btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
  }
  .work-toolbar > .btn i { font-size: 15px; }
  /* New task leads on its own full-width row; the view controls wrap below. */
  .work-toolbar > .btn-primary { order: -1; flex: 1 0 100%; justify-content: center; }

  /* Page header — tighter, no oversized title */
  .page-head { padding: 12px 14px 8px; gap: 6px; }
  .page-eyebrow { font-size: 11px; letter-spacing: 0.1em; }
  .page-title { font-size: 22px; margin-top: 4px; }

  /* ===== Task list: real card layout (override the existing
     flex-wrap rule from line ~1174 with something more structured) ===== */
  #taskViewWrap .list-header { display: none; }
  .task-group { margin: 0 10px; border-radius: var(--radius-md); }
  .task-group + .task-group { margin-top: 8px; }
  .task-group > .group-head { padding: 10px 12px; font-size: 13px; }
  /* Card layout: row 1 holds the checkbox + title (with the finish
     button pinned to the right via absolute positioning); row 2 holds
     pills/chips that wrap as needed. A 100%-width pseudo-element
     between the two zones forces the line break.

     The previous version used `grid-template-areas` with every pill
     assigned to a single `meta` area, which stacked Type / Priority /
     Status / Due on top of each other (the "Admin" + "May 28"
     overlap bug). Flex with an explicit break flows them properly. */
  .task-group .list-row,
  .list-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 12px 58px 12px 14px; /* right pad reserves room for absolute finish-btn */
    position: relative;
    border-bottom: 1px solid var(--bg-3);
  }
  /* Mobile cards don't need the checkbox — the finish-btn (top-right)
     is the touch-friendly equivalent and the row itself opens detail. */
  .list-row > input[type="checkbox"] { display: none !important; }
  .list-row .task-title-cell {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    order: 2;
  }
  /* Force pills to wrap onto a fresh visual row below the title. */
  .list-row::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 3;
  }
  .list-row > :not(input):not(.task-title-cell):not(.finish-btn) {
    flex: 0 0 auto;
    font-size: 12px;
    order: 4;
    justify-self: start;
    text-align: left;
  }
  /* The .meta-cell wrapper itself becomes a flex container of chips */
  .list-row .meta-cell {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .list-row .finish-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 44px; height: 44px;
    flex: 0 0 auto;
    z-index: 3;                  /* sit above the wrapped title/pills so taps land on it */
    touch-action: manipulation;  /* no double-tap-zoom / tap delay swallowing the tap */
  }
  .list-row .finish-btn i { font-size: 19px; }
  /* Hide noisy/duplicated columns on phones */
  .list-row > div:nth-child(5),   /* assignee (often = current user) */
  .list-row .desc-cell,
  .list-row .timer-btn,
  .list-row .more-btn { display: none !important; }
  /* Bigger touch chips */
  .list-row .pill,
  .list-row .pill-status,
  .list-row .priority-block {
    font-size: 11px;
    padding: 5px 11px;
  }
  .list-row .type-text { font-size: 12px; }
  .list-row .label-text { font-size: 11px; }
  .list-row .priority-block { min-width: 0; }

  /* Detail panel — slide-up sheet feel rather than abrupt overlay */
  .main.with-detail { grid-template-columns: 1fr; }
  .detail:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 60;
    border-left: none;
    animation: slideUpMobile var(--dur-short) var(--ease-out);
  }
  @keyframes slideUpMobile {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  /* Hide resize handle entirely on phones */
  .resize-handle { display: none !important; }

  /* Detail head — bigger close button, tighter padding */
  .detail-head { padding: 14px 14px; padding-top: calc(14px + env(safe-area-inset-top)); }
  .detail-body { padding: 14px 14px 28px; }
  .detail-title { font-size: 19px; }
  .detail-row { grid-template-columns: 88px 1fr; font-size: 13px; }

  /* Modal: full-bleed on phones with bottom-sheet feel */
  .modal-backdrop { padding: 4vh 8px 8px; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-md);
    animation: slideUp var(--dur-short) var(--ease-out);
  }
  .modal-head { padding: 12px 14px; }
  .modal-title { font-size: 19px; }
  .modal-body { padding: 14px; max-height: calc(92vh - 110px); }
  .modal-foot { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .field-row { grid-template-columns: 1fr; }

  /* Notification panel — clip to viewport so it never overflows */
  .notif-panel {
    position: fixed;
    top: 56px;
    right: 6px;
    left: 6px;
    width: auto;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .notif-list { max-height: none; }

  /* Filter bar — chips bigger, easier to tap */
  .filter-bar { margin: 0 12px 10px; padding: 10px 10px; }
  .filter-chip { padding: 7px 12px; font-size: 13px; min-height: 32px; }
  .filter-group { border-right: none; padding-right: 0; }
  .filter-group + .filter-group { border-top: 1px solid var(--bg-3); padding-top: 6px; margin-top: 2px; }

  /* Toolbar menus (Sort/Group dropdowns) — bigger items, fit screen */
  .toolbar-menu { min-width: 240px; max-width: calc(100vw - 24px); padding: 8px; }
  .toolbar-menu-item { padding: 12px 12px; font-size: 14px; }

  /* Toast container — slot above the safe area */
  .toast-container { bottom: max(16px, env(safe-area-inset-bottom)) !important; left: 12px; right: 12px; }

  /* Worker row — touch sizing */
  .worker-row { padding: 14px 16px; }
  .worker-task-title { font-size: 15px; }
}

/* ---- Small phones (≤460px) — already exists at line 1559 for
        topbar; add list-density & modal tightening here ---- */
@media (max-width: 460px) {
  .page-title { font-size: 20px; }
  .page-head { padding: 10px 10px 6px; }
  .work-toolbar { padding: 8px 10px 4px; }
  .work-toolbar > .btn { padding: 8px 12px; font-size: 12.5px; min-height: 38px; }
  .task-group { margin: 0 6px; }
  .list-row { padding: 10px 12px; }
  .list-row .task-title-cell { font-size: 14px; }
  .modal-backdrop { padding: 0; }
  .modal { max-height: 100vh; height: auto; border-radius: 0; }
  .filter-bar { margin: 0 6px 8px; }
  .topbar-right { gap: 2px; }
  .clock-widget { padding: 8px 10px; }
}

/* ---- Touch device cleanup: remove hover-only feedback that
        sticks after tap, add active-state feedback instead ---- */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover lifts/colors that get stuck on touch */
  .list-row:hover { background: var(--surface); }
  .task-group .list-row:hover { background: var(--surface); }
  .icon-btn:hover,
  .btn:hover,
  .filter-chip:hover,
  .toolbar-menu-item:hover,
  .side-item:hover,
  .group-chevron:hover,
  .timer-btn:hover,
  .finish-btn:hover { background: inherit; }
  .up-next-card:hover { transform: none; box-shadow: var(--shadow-md); }

  /* Tap feedback — momentary press state */
  .btn:active { background: var(--bg-3); transform: scale(0.98); }
  .icon-btn:active { background: var(--bg-2); transform: scale(0.96); }
  .filter-chip:active { background: var(--bg-3); }
  .list-row:active { background: var(--bg-2); }
  .side-item:active { background: var(--bg-3); }
  .toolbar-menu-item:active { background: var(--bg-2); }

  /* Make sure interactive elements respond to touch immediately
     (-webkit-tap-highlight-color is iOS Safari's gray flash) */
  button, .list-row, .side-item, .filter-chip,
  .toolbar-menu-item, .icon-btn, .clock-widget,
  .worker-row, .subtask, .notif-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* ============================================================
   RESPONSIVE POLISH PASS — targeted fixes layered on top of the
   existing breakpoint tiers (1200/900/720/460 + coarse-pointer).
   Each block names the gap it closes so future edits can grep by
   symptom.
   ============================================================ */

/* (0) "Clear done" button on the Done group header — sits right of the
   count chip; subtle until hovered so it doesn't compete with the
   group title. */
.group-clear-btn {
  margin-left: 8px;
  font-size: 11.5px;
  padding: 5px 10px;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--border);
}
.group-clear-btn:hover {
  color: var(--rust-ink);
  background: var(--rust-bg);
  border-color: var(--rust);
}
.group-clear-btn i { font-size: 13px; }

/* (1) Kanban / wide tables horizontal overflow.
   The Kanban board is `repeat(5, minmax(220px, 1fr))` = 1100px+ minimum,
   and the desktop list-row's 9-column grid sits around 940px minimum.
   Without overflow-x on the pane, narrow viewports push the whole page
   sideways. Allowing scroll inside the pane means content that fits
   shows no scrollbar; only the wide views opt-in. */
.list-pane { overflow-x: auto; }

/* (2) Stats grid: 4 columns squashes to ~80px each on tablet widths.
   2×2 below 1100px, single column on the smallest phones. */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
}

/* (3) Form field-rows: two columns is fine on desktop modals but
   collides on portrait-tablet modals. Collapse at 900px. */
@media (max-width: 900px) {
  .field-row,
  .field-row-3 { grid-template-columns: 1fr; }
}

/* (4) Notification panel — was only `position: fixed` on phones.
   At 721-900 the absolute panel can clip when the topbar shrinks. */
@media (max-width: 900px) and (min-width: 721px) {
  .notif-panel {
    position: fixed;
    top: 64px;
    right: 12px;
    left: auto;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}

/* (5) Touch targets — when the primary pointer is coarse, enforce
   WCAG 2.5.5 minimums on the main button shapes regardless of
   viewport width. Phones already get 44px in the ≤720 block; this
   catches tablets in the 721-1200 range that were stuck at ~30px. */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 40px; padding: 10px 14px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn i { font-size: 17px; }
  .filter-chip { min-height: 36px; padding: 7px 12px; }
  .toolbar-menu-item { min-height: 40px; }
  .timer-btn,
  .finish-btn { min-width: 36px; min-height: 36px; }
  /* The detail-close & similar small icon-only buttons share .icon-btn
     so they pick up the 40×40 above. */
}

/* (6) Detail panel on tablets (721-900) — side-by-side at this
   width leaves the list squashed to ~250px once you account for
   sidebar (200) + detail (340). Float the detail as a fixed
   overlay instead, matching the ≤720 pattern. */
@media (max-width: 900px) and (min-width: 721px) {
  .main.with-detail { grid-template-columns: 1fr; }
  .detail:not(.hidden) {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    width: min(460px, 100%);
    z-index: 60;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .resize-handle { display: none; }
}

/* (7) Topbar right cluster at narrow widths — let it shrink
   cleanly instead of wrapping or pushing icons off-screen.
   Search input gets a final clamp between 460-600px so it
   doesn't dominate the 36px icon buttons. */
@media (max-width: 720px) {
  .topbar-right { flex-shrink: 1; min-width: 0; flex-wrap: nowrap; }
  .search { flex-shrink: 1; min-width: 0; }
  .search input { min-width: 0; }
}
/* Search width on phones is handled by the flexible .search rule above
   (flex: 1 1 56px), so no fixed override is needed here. */

/* ---- Resize handle: hide on coarse pointers regardless of width
        (it's pixel-hunting territory) ---- */
@media (pointer: coarse) {
  .resize-handle { display: none !important; }
}

/* ============================================================
   MOBILE SIDEBAR DRAWER (≤720px)
   Replaces the earlier `.app > .deck { display: none }` rule —
   the sidebar slides in from the left as a drawer triggered by
   tapping the topbar-left logo area (body.sidebar-open).
   Backdrop, Esc, and item-tap all dismiss it (wired in JS).
   ============================================================ */
.mobile-menu-hint   { display: none; }
.sidebar-backdrop   { display: none; }

@media (max-width: 720px) {
  .app > .deck {
    display: flex !important;
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.22s var(--ease-out);
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.35);
    padding: 14px 10px 18px;
    overflow-y: auto;
  }
  body.sidebar-open .app > .deck { transform: translateX(0); }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s var(--ease-out);
  }
  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Tap-target hint in the topbar */
  .mobile-menu-hint {
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    margin-left: 6px;
    color: oklch(75% 0.012 80);
  }

  /* The desktop icon-strip "minimized" mode doesn't apply inside the
     drawer — force full pill items even if body.sidebar-minimized
     happens to be set from a prior desktop session. */
  body.sidebar-minimized .app > .deck,
  .app > .deck.minimized {
    padding: 8px 10px 18px;
    align-items: stretch;
  }
  body.sidebar-minimized .deck .sidebar,
  .deck.minimized .sidebar { align-items: stretch; gap: 14px; }
  body.sidebar-minimized .deck .side-label,
  body.sidebar-minimized .deck .side-item-label,
  body.sidebar-minimized .deck .side-count,
  body.sidebar-minimized .deck .side-group-chevron,
  body.sidebar-minimized .deck .side-group-head,
  .deck.minimized .side-label,
  .deck.minimized .side-item-label,
  .deck.minimized .side-count,
  .deck.minimized .side-group-chevron,
  .deck.minimized .side-group-head { display: revert; }
  body.sidebar-minimized .deck .side-item,
  .deck.minimized .side-item {
    width: auto;
    height: auto;
    padding: 10px 12px;
    justify-content: flex-start;
    gap: 11px;
    border-radius: var(--radius-md);
  }
  /* The collapse-to-icons button has no role inside a drawer */
  .side-minimize-btn { display: none !important; }
}

/* ============================================================
   MOBILE TOPBAR — single dark band, hamburger on the left.
   Desktop splits the topbar into a dark left brand column and a
   light right action area; on phones we unify both into one dark
   bar and put the menu affordance on the far left.
   ============================================================ */
@media (max-width: 720px) {
  .topbar { background: oklch(17% 0.012 70); }
  .topbar-left { background: transparent; }

  /* Right-side icon buttons: transparent glyphs on the dark bar
     instead of light pills that would clash with the new bg. */
  .topbar-right .icon-btn {
    background: transparent;
    border-color: transparent;
    color: oklch(92% 0.012 80);
  }
  .topbar-right .icon-btn:hover {
    background: oklch(24% 0.014 70);
    border-color: transparent;
  }

  /* Swap visual order to: ☰  Quest HQ  ⚡
     DOM stays the same — flex `order` does the reshuffle so the
     existing click handler on .topbar-left still fires correctly. */
  .topbar-left { display: flex; align-items: center; }
  .topbar-left .mobile-menu-hint { order: 1; margin-left: 0; margin-right: 4px; }
  .topbar-left > div:not(.logo)   { order: 2; }
  .topbar-left .logo              { order: 3; }

  /* Drop the drawer's box-shadow — its vertical blur was bleeding
     up into the topbar's bottom edge and creating a visible "seam"
     even though both surfaces share the same background color. The
     backdrop (rgba over the page) already provides enough visual
     separation when the drawer is open. */
  .app > .deck { box-shadow: none; }

  /* Tighter drawer padding so the WORKSPACE label sits closer to
     the topbar without a big empty band. */
  .app > .deck { padding: 8px 10px 18px; }

  /* Align nav items with section labels. Both now sit at 22px from
     the drawer's outer edge (10px drawer padding + 12px element
     padding), matching the WORKSPACE / COMPANY / TIME headers. */
  .app > .deck .side-item { padding: 10px 12px; }

  /* Tighter vertical rhythm between sections on a phone-sized
     drawer — the desktop 18px gap leaves the bottom items
     (Admin / Clock dashboard) below the fold on common viewports. */
  .app > .deck .side-group { margin-bottom: 10px; }
  .app > .deck .side-group-collapsible { margin-top: 4px; }
}

/* ============================================================
   PROFILE MODAL — avatar preview + upload + display-name edit.
   Reuses .modal-backdrop / .modal / .field shells from the
   existing modal system; only the avatar row needs new styles.
   ============================================================ */
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.profile-avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-initials {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink-3);
}
.profile-avatar-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.profile-avatar-actions .btn { cursor: pointer; }
.profile-hint {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.btn-link {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--rust);
  cursor: pointer;
  text-decoration: underline;
}
.btn-link:hover { color: var(--rust-ink); }
.profile-inline-error {
  margin: 10px 0;
  padding: 8px 12px;
  background: var(--rust-bg);
  border: 1px solid var(--rust);
  color: var(--rust-ink);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
@media (max-width: 480px) {
  .profile-avatar-row { flex-direction: column; align-items: center; text-align: center; }
  .profile-avatar-actions { align-items: center; }
}

/* ============================================================
   TASK DETAIL — destructive "Delete task" action at the very
   bottom of the panel. Subtle on purpose: a small red link
   that demands a window.confirm before doing anything, since
   the data path is a hard delete (no soft-delete grace).
   ============================================================ */
.detail-danger-zone {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.btn-link-danger {
  background: transparent;
  border: none;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--rust);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.btn-link-danger:hover {
  color: var(--rust-ink);
  text-decoration: underline;
}
.btn-link-danger { transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn-link-danger:active { transform: scale(0.97); }
.btn-link-danger i { font-size: 14px; }

/* ============================================================
   TASK DETAIL — header actions (Edit / Close).
   ============================================================ */
.detail-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   TASK DETAIL — Watchers row: chip-with-x to remove + an
   inline select to add new watchers without opening any modal.
   ============================================================ */
.watchers-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.watcher-chip-detail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-2);
  padding: 2px 4px 2px 7px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--ink);
}
.watcher-chip-detail .avatar-xs { width: 16px; height: 16px; font-size: 9px; }
.watcher-remove {
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 50%;
}
.watcher-remove:hover { color: var(--rust); background: var(--bg-3); }
.watcher-add-select {
  font-size: 11px;
  padding: 3px 6px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--ink-3);
  cursor: pointer;
  max-width: 140px;
}
.watcher-add-select:hover { border-color: var(--amber); color: var(--ink); }
.watcher-add-select:focus { outline: none; border-color: var(--amber); }

/* ============================================================
   APPROVAL TABLE — multi-company chip-checkbox group.
   Replaces the single-select Company dropdown so admins can
   assign a person to 0..N companies in one click.
   ============================================================ */
.company-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.company-chk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 11px;
  cursor: pointer;
  background: var(--bg-2);
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.company-chk:hover { background: var(--bg-3); }
.company-chk input { margin: 0; }
.company-chk input:checked + span { color: var(--ink); font-weight: 600; }
.company-chk:has(input:checked) {
  background: var(--amber-bg, oklch(96% 0.04 80));
  border-color: var(--amber);
}

/* ============================================================
   GLOBAL READABILITY OVERRIDES (requested)
   - Bold every piece of text in the app.
   Larger type comes from the enlarged type-scale tokens in tokens.css.
   We intentionally do NOT set `zoom` here: the app already has its own
   zoom (.app { zoom: var(--ui-scale) }, the topbar scale slider). A second
   zoom on <body> compounded with it and broke the 100vh grid layout
   (blank strip on the right, widgets overlapping the title).
   Icons use an icon font, so font-weight doesn't affect them.
   ============================================================ */
body, body * { font-weight: 700 !important; }