/* =========================================================================
   Scheduler — design system overrides
   Loaded AFTER app.css to retheme the existing scheduler structure with the
   Ocean Builders design tokens (Manrope display + Poppins UI, blue palette,
   priority-tinted event tiles, etc.). Minimal DOM changes — most existing
   class names keep working, just looking different.
   ========================================================================= */

@import url('/ob-tokens.css');

html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans) !important;
  font-size: 14px;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Top nav (.ob-nav redesigned) ──────────────────────────────── */
.ob-nav {
  height: 56px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 12px;
}
.ob-nav-logo img { height: 22px; width: auto; }
.ob-nav-divider { width: 1px; height: 22px; background: var(--border-2); }
.ob-nav-app-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-1);
  padding: 0 4px;
}

/* View switcher (Calendar / Kanban / Gantt) — icon + label tabs */
.sc-view-switcher { display: flex; gap: 4px; padding-left: 12px; }
.sc-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-3); font-size: 13px; font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-out);
}
.sc-view-btn:hover { background: var(--neutral-50); color: var(--fg-1); }
.sc-view-btn.active {
  background: var(--ob-blue-50);
  color: var(--ob-blue-700);
  border-color: var(--ob-blue-200);
}
.sc-view-icon { width: 14px; height: 14px; flex-shrink: 0; }

.ob-nav-spacer { flex: 1; }

/* App switcher (rebuild the launcher button + dropdown) */
.ob-app-switcher { position: relative; }
.ob-app-switcher-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-out);
}
.ob-app-switcher-btn:hover { border-color: var(--border-3); color: var(--fg-1); }
.ob-app-switcher-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 280px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  box-shadow: var(--sh-3);
  padding: 6px;
  z-index: 100;
  display: none;
}
.ob-app-switcher-dropdown.open { display: block; }
.ob-app-switcher-label {
  font-size: 10px; font-weight: 600; color: var(--fg-4);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 10px 4px;
}
.ob-app-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 10px;
  background: transparent;
  border: none; border-radius: 8px;
  color: var(--fg-1); text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.ob-app-item:hover { background: var(--neutral-50); }
.ob-app-item.active { background: var(--ob-blue-50); }
.ob-app-item-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--ob-blue-50);
  color: var(--ob-blue-700);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.ob-app-item.active .ob-app-item-icon { background: var(--ob-blue); color: #fff; }
.ob-app-item-info { flex: 1; min-width: 0; }
.ob-app-item-name { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.ob-app-item-desc { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.ob-app-item-badge {
  font-size: 10px; font-weight: 600; color: var(--ob-blue-700);
  background: #fff; border: 1px solid var(--ob-blue-200);
  border-radius: 999px; padding: 2px 6px;
  letter-spacing: 0.04em;
}

/* User chip — circular avatar with initials + name as one button */
.ob-user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px 0 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--fg-1, #1F2630);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-out);
}
.ob-user-chip:hover {
  background: var(--neutral-50, #F5F7FA);
  border-color: var(--border-1, #EEF1F5);
}
.ob-user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ob-blue, #2870B0);
  color: #fff;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
}
.ob-user-chip-name {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Legacy id keeps working for code that sets .textContent */
.ob-user-name {
  font-size: 12.5px; color: var(--fg-2);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Menu button — borderless, just an icon. Subtle hover background. */
.ob-hamburger-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-3, #6B7685);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-1) var(--ease-out);
}
.ob-hamburger-btn:hover {
  background: var(--neutral-50, #F5F7FA);
  color: var(--fg-1, #1F2630);
}

/* ── Main layout ────────────────────────────────────────────── */
.sc-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: calc(100vh - 56px);
  background: var(--bg-page);
}

/* ── Side rail (sc-sidebar) ─────────────────────────────────── */
.sc-sidebar {
  background: var(--neutral-25);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid var(--border-1);
  min-width: 0;
}
/* Drop-target hint shown while a calendar tile is being dragged
   over the sidebar. Triggers the "drop to Ready" path on mouseup
   regardless of which rail tab (Tasks vs Battle Reports) is active. */
.sc-sidebar.is-rail-drop-target {
  background: rgba(40, 112, 176, 0.10);
  outline: 2px dashed var(--ob-blue, #2870B0);
  outline-offset: -8px;
}

/* Mini-month — refined ------------------------------------- */
.sc-mini-cal {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 10px 8px;
}
.sc-mini-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 6px;
}
.sc-mini-cal-title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--fg-1);
}
.sc-mini-nav {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--fg-3);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-mini-nav:hover { background: var(--neutral-100); color: var(--fg-1); }
.sc-mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.sc-mini-cal-grid .dow {
  font-size: 10px; color: var(--fg-4);
  text-align: center; padding: 4px 0; font-weight: 500;
}
.sc-mini-cal-grid .day {
  border: none; background: transparent;
  padding: 4px 0;
  font-size: 12px; color: var(--fg-2);
  border-radius: 6px;
  aspect-ratio: 1; min-height: 24px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.sc-mini-cal-grid .day:hover { background: var(--ob-blue-50); }
.sc-mini-cal-grid .day.today {
  background: var(--ob-blue);
  color: #fff;
  font-weight: 600;
}
.sc-mini-cal-grid .day.selected {
  background: var(--ob-blue-100);
  color: var(--ob-blue-700);
  font-weight: 600;
}
.sc-mini-cal-grid .day.empty { visibility: hidden; }

/* Primary "+ New" button in sidebar */
.sc-add-btn {
  width: 100%; height: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--ob-blue); color: #fff;
  border: 1px solid var(--ob-blue);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.sc-add-btn:hover { background: var(--ob-blue-600); border-color: var(--ob-blue-600); }

/* ── Main canvas area ───────────────────────────────────────── */
.sc-main {
  background: #fff;
  border-left: 1px solid var(--border-1);
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - 56px);
}

/* Top filter bar within main (date nav + people filter) ----- */
.sc-cal-filter-bar,
.sc-kanban-filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-1);
  background: #fff;
}

.sc-date-nav {
  display: flex; align-items: center; gap: 4px;
}
.sc-nav-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--fg-3);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-1) var(--ease-out);
}
.sc-nav-btn:hover { border-color: var(--border-3); color: var(--fg-1); }

.sc-date-label {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--fg-1);
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
  min-width: 220px; text-align: center;
}

.sc-today-btn {
  height: 30px; padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-out);
}
.sc-today-btn:hover { border-color: var(--border-3); color: var(--fg-1); background: var(--neutral-50); }

/* People filter dropdown */
.sc-people-filter { position: relative; }
.sc-people-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--fg-2);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.sc-people-filter-btn:hover { border-color: var(--border-3); }
.sc-people-filter-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  box-shadow: var(--sh-3);
  padding: 6px;
  min-width: 200px;
  z-index: 50;
}

/* ── Calendar week grid ─────────────────────────────────────── */
.sc-cal-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; }

.sc-cal-header {
  display: flex;
  border-bottom: 1px solid var(--border-1);
  background: #fff;
  position: sticky; top: 0; z-index: 5;
}
.sc-cal-gutter, .sc-cal-day-hd {
  font-family: var(--font-sans);
}
.sc-cal-day-hd {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: 2px;
}
.sc-cal-day-hd:last-child { border-right: none; }
.sc-cal-day-hd .dow {
  font-size: 11px; font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sc-cal-day-hd .num {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.sc-cal-day-hd.today .dow { color: var(--ob-blue-700); }
.sc-cal-day-hd.today .num {
  color: #fff;
  background: var(--ob-blue);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}

.sc-cal-body { flex: 1; overflow-y: auto; min-height: 0; }
.sc-cal-days { display: flex; min-height: 100%; }
.sc-day-col {
  flex: 1; min-width: 0;
  position: relative;
  border-right: 1px solid var(--border-1);
}
.sc-day-col:last-child { border-right: none; }
.sc-day-col.today-col {
  background: linear-gradient(to bottom, rgba(40, 112, 176, 0.025), transparent 25%);
}

.sc-cal-gutter {
  width: 60px; flex: 0 0 60px;
  border-right: 1px solid var(--border-1);
  position: relative;
  background: #fff;
}
.sc-hour-line {
  border-top: 1px solid var(--border-1);
  pointer-events: none;
}
.sc-hour-line:nth-child(odd) { border-top-color: var(--neutral-100); }

.sc-now-line {
  border-top: 2px solid var(--ob-coral) !important;
  z-index: 3;
}
.sc-now-line::before {
  content: '';
  position: absolute; left: -5px; top: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ob-coral);
}

/* ── Event tiles ────────────────────────────────────────────── */
/* Layout already done in app.js: top, height, left%, width%.
   We override the visual: priority-tinted bg, project-colored left bar. */
.sc-task-block {
  border-radius: 6px !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  font-family: var(--font-sans);
  overflow: hidden;
  transition: box-shadow var(--dur-1) var(--ease-out);
  display: flex; flex-direction: column;
  padding: 6px 8px !important;
}
.sc-task-block:hover { box-shadow: var(--sh-2); z-index: 2; cursor: pointer; }

.sc-task-block-title {
  font-size: 12px; font-weight: 600;
  color: var(--fg-1);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-task-block-time {
  font-size: 11px; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  font-weight: 400;
}

/* Block-time / busy stripe */
.sc-task-block.is-block {
  background: repeating-linear-gradient(135deg,
    var(--neutral-100) 0 6px,
    var(--neutral-150) 6px 12px) !important;
  font-style: italic;
  opacity: 0.85;
}
.sc-task-block.is-block .sc-task-block-title { color: var(--fg-3); font-weight: 500; }

/* Google Calendar event tile (full column width, blue) */
.sc-task-block.is-gcal {
  background: linear-gradient(to right, var(--ob-blue-50), var(--ob-blue-100)) !important;
  border-left-color: var(--ob-blue) !important;
  color: var(--ob-blue-700);
}
.sc-task-block.is-gcal .sc-task-block-title { color: var(--ob-blue-700); }
.sc-task-block.is-gcal .sc-task-block-time { color: var(--ob-blue-600); }

/* Resize handle */
.sc-task-resize-handle {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px;
  cursor: ns-resize;
  background: transparent;
  transition: background var(--dur-1) var(--ease-out);
}
.sc-task-block:hover .sc-task-resize-handle {
  background: rgba(0,0,0,0.06);
}

/* Calendar hover tooltip — appended to <body> by app.js so it can
   escape the calendar's overflow clipping. */
.sc-cal-tooltip {
  position: fixed;
  z-index: 9999;
  display: none;
  pointer-events: none;
  background: rgba(24, 24, 24, 0.96);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 6px;
  max-width: 320px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-family: var(--font-sans);
}
.sc-cal-tooltip.is-visible { display: block; }
.sc-cal-tooltip .sc-tt-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  white-space: normal;
  word-break: break-word;
}
.sc-cal-tooltip .sc-tt-row {
  opacity: 0.85;
  font-size: 11.5px;
}
.sc-cal-tooltip .sc-tt-row strong {
  font-weight: 500;
  opacity: 0.7;
  margin-right: 4px;
}
.sc-cal-tooltip .sc-tt-notes {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  opacity: 0.75;
  white-space: pre-wrap;
  max-height: 100px;
  overflow: hidden;
}

/* Priority dot */
.sc-task-block-pri {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── Kanban board ───────────────────────────────────────────── */
.sc-kanban {
  display: flex; gap: 12px;
  padding: 16px;
  overflow-x: auto;
  flex: 1;
}
.sc-kanban-col {
  flex: 1 1 240px;
  min-width: 240px;
  background: var(--neutral-50);
  border-radius: 12px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.sc-kanban-col-header {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 8px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  color: var(--fg-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-1);
}
.sc-kanban-col-header .count {
  margin-left: auto;
  font-size: 10px; font-weight: 700;
  color: var(--fg-3);
  background: var(--neutral-150);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0;
}
.sc-kanban-col[data-status="Ready"]  .sc-kanban-col-header { color: var(--status-ready); }
.sc-kanban-col[data-status="Doing"]  .sc-kanban-col-header { color: var(--status-doing); }
.sc-kanban-col[data-status="Review"] .sc-kanban-col-header { color: var(--status-review); }
.sc-kanban-col[data-status="Hold"]   .sc-kanban-col-header { color: var(--status-hold); }
.sc-kanban-col[data-status="Done"]   .sc-kanban-col-header { color: var(--status-done); }

.sc-kanban-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: grab;
  transition: all var(--dur-1) var(--ease-out);
  display: flex; flex-direction: column; gap: 4px;
}
.sc-kanban-card:hover { border-color: var(--border-2); box-shadow: var(--sh-1); transform: translateY(-1px); }

/* ── Modals ─────────────────────────────────────────────────── */
.sc-modal-overlay {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(2px);
}
.sc-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--sh-4);
  font-family: var(--font-sans);
}
.sc-modal-header {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  color: var(--fg-1);
  border-bottom: 1px solid var(--border-1);
  padding: 14px 18px;
}
.sc-modal-close {
  border-radius: 6px;
  color: var(--fg-4);
}
.sc-modal-close:hover { background: var(--neutral-100); color: var(--fg-1); }

/* Field labels in modal */
.sc-modal-body label {
  font-size: 11px; font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.sc-modal-body input[type=text],
.sc-modal-body input[type=date],
.sc-modal-body input[type=time],
.sc-modal-body input[type=email],
.sc-modal-body select,
.sc-modal-body textarea,
.sc-notes-editable {
  font-family: var(--font-sans);
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
/* Lists inside the contenteditable — give the bullets / numbers a sane
   left indent and tighten the vertical rhythm so they don't crowd the
   field edge or stretch the editor. */
.sc-notes-editable ul,
.sc-notes-editable ol {
  margin: 4px 0;
  padding-left: 24px;
}
.sc-notes-editable ul { list-style: disc outside; }
.sc-notes-editable ol { list-style: decimal outside; }
.sc-notes-editable li {
  margin: 2px 0;
  padding-left: 2px;
}
.sc-modal-body input[type=text]:focus,
.sc-modal-body input[type=date]:focus,
.sc-modal-body input[type=time]:focus,
.sc-modal-body input[type=email]:focus,
.sc-modal-body select:focus,
.sc-modal-body textarea:focus,
.sc-notes-editable:focus {
  border-color: var(--ob-blue-500);
  box-shadow: 0 0 0 3px rgba(40, 112, 176, 0.15);
  outline: none;
}

/* Create-type picker — small centered modal (not a full sheet). Restyled
   with the new design tokens to feel consistent with the Edit Task /
   Edit Report sheets. */
#create-picker-modal.sc-modal-overlay {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(2px);
}
#create-picker-modal .sc-modal {
  max-width: 420px !important;
  width: 100% !important;
  max-height: none !important;
  border-radius: 14px !important;
  background: #fff;
  box-shadow: var(--sh-4);
  margin: 16px !important;
  overflow: hidden;
}
#create-picker-modal .sc-modal-header {
  padding: 18px 22px 12px !important;
  border-bottom: 1px solid var(--border-1);
}
#create-picker-modal .sc-modal-header > span {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--fg-1); line-height: 1.2;
}
#create-picker-modal .sc-modal-body {
  padding: 14px !important;
}

/* ── Create-new type picker (V1 Minimal — HANDOFF/design_handoff_creator_mobile) ───
   Phase 1: replace the legacy emoji-tile picker with the design's
   icon-chip + name + description + kbd-hint layout. Markup uses the
   same .sc-create-* classes the existing JS click handlers bind to,
   so no JS changes needed. */
.sc-create-picker-head {
  align-items: flex-start !important;
  padding: 18px 20px 14px !important;
}
.sc-create-picker-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  line-height: 1.2;
}
.sc-create-picker-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
  margin-top: 2px;
}

.sc-create-picker {
  display: flex; flex-direction: column; gap: 4px;
}
.sc-create-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--dur-1) var(--ease-out);
  width: 100%;
}
.sc-create-option:hover {
  background: var(--neutral-50);
}
.sc-create-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--icon-bg, var(--neutral-100));
  color: var(--icon-fg, var(--fg-2));
  font-size: 22px; /* legacy emoji fallback if any caller still uses one */
}
.sc-create-icon svg { width: 20px; height: 20px; }
.sc-create-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.sc-create-label {
  font-size: 14px; font-weight: 600;
  color: var(--fg-1);
  line-height: 1.2;
}
.sc-create-desc {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg-3);
  margin-top: 2px;
}
.sc-create-kbd {
  flex-shrink: 0;
  font: 600 10px/1 var(--font-mono, ui-monospace, monospace);
  color: var(--fg-3);
  background: var(--neutral-100);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  padding: 3px 6px;
}

/* Generic small buttons inside modal */
.sc-btn-primary {
  height: 34px; padding: 0 14px;
  background: var(--ob-blue); color: #fff;
  border: 1px solid var(--ob-blue);
  border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-1);
}
.sc-btn-primary:hover { background: var(--ob-blue-600); }

.sc-btn-secondary {
  height: 34px; padding: 0 14px;
  background: #fff;
  color: var(--fg-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.sc-btn-secondary:hover { background: var(--neutral-50); border-color: var(--border-3); color: var(--fg-1); }

/* ── Task modal → transformed into a right-side sheet ───────────────── */
/* The DOM stays the same (.sc-modal-overlay > .sc-modal), but we re-layout
   the overlay to align right and turn the modal into a 460px full-height
   panel that slides in from the right edge. Same close button, same fields,
   same save/cancel handlers. */

#task-modal.sc-modal-overlay {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(2px);
  align-items: stretch;
  justify-content: flex-end;
  padding: 0 !important;
  z-index: 200;
}

#task-modal .sc-modal {
  max-width: 460px !important;
  width: 460px !important;
  height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: var(--sh-4);
  animation: scSheetIn var(--dur-3) var(--ease-out);
}
@keyframes scSheetIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Header: sheet style with display-font title + close × */
#task-modal .sc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-1);
  background: #fff;
  flex-shrink: 0;
}
#task-modal .sc-modal-header > span {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--fg-1) !important;
  line-height: 1.2;
}
#task-modal .sc-modal-close {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--fg-4);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#task-modal .sc-modal-close:hover { background: var(--neutral-100); color: var(--fg-1); }

/* Body scrolls; footer pinned to bottom */
#task-modal .sc-modal-body {
  flex: 1; overflow-y: auto;
  padding: 20px 22px !important;
  display: flex; flex-direction: column; gap: 18px;
  line-height: 1.4;
}

/* The body's gap only reaches its direct children. The actual fields live
   inside #task-fields / #appointment-fields / #recurrence-options wrappers,
   so make those flex-column containers too — otherwise sibling fields
   collapse against each other. */
#task-modal #task-fields,
#task-modal #appointment-fields,
#task-modal #recurrence-options,
#task-modal #chunking-section {
  display: flex; flex-direction: column; gap: 18px;
}

/* Field rows + label/input refinements inside the sheet */
#task-modal .sc-field {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0;
}
#task-modal .sc-field > label {
  font-size: 11px; font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.2;
}
/* Slightly taller, more breathable inputs to match the design sample. */
#task-modal input[type=text],
#task-modal input[type=email],
#task-modal input[type=date],
#task-modal input[type=time],
#task-modal input[type=number],
#task-modal select {
  height: 38px;
  padding: 8px 12px !important;
}
#task-modal .sc-notes-editable,
#task-modal textarea {
  min-height: 72px !important;
  padding: 10px 12px !important;
}
#task-modal .sc-field-row {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
}
#task-modal .sc-field-row > .sc-field { min-width: 0; }
/* Reserve 2 lines for every label in a row so wrapping labels
   ("End Date", "Scheduling Window") don't shove their input down
   relative to single-line neighbours. */
#task-modal .sc-field-row > .sc-field > label {
  min-height: 2.4em;
  display: flex;
  align-items: flex-end;
}
#task-modal input[type=text],
#task-modal input[type=email],
#task-modal input[type=date],
#task-modal input[type=time],
#task-modal input[type=number],
#task-modal select,
#task-modal textarea,
#task-modal .sc-notes-editable {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  width: 100%;
}
#task-modal input:focus,
#task-modal select:focus,
#task-modal textarea:focus,
#task-modal .sc-notes-editable:focus {
  border-color: var(--ob-blue-500);
  box-shadow: 0 0 0 3px rgba(40, 112, 176, 0.15);
}
#task-modal .sc-notes-editable {
  min-height: 64px;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 600px;
  /* Native resize handle in the bottom-right corner — same look as the
     Battle Reports modal's textarea. Requires overflow !== visible. */
  resize: vertical;
}

/* The original modal places `.sc-modal-footer` as a direct child of
   .sc-modal (sibling of .sc-modal-body), so it naturally pins to the
   bottom of our flex column. We just retheme it. */
#task-modal .sc-modal-footer {
  flex-shrink: 0;
  display: flex; gap: 8px; align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--border-1);
  background: var(--neutral-25);
}
/* Footer buttons cluster on the right. Verified via Puppeteer that
   the previous fix WAS being applied (justify-content:flex-end did
   compute correctly), but the buttons were overflowing the available
   width — five buttons + four 8px gaps + 40px footer padding totalled
   more than the modal's 460px footer, leaving zero space for flex-end
   to act on. Tighten the gap, reduce the footer's horizontal padding,
   and trim button padding from 14px to 10px so the cluster physically
   fits, then flex-end pushes them right with breathing room. */
#task-modal .sc-modal-footer {
  justify-content: flex-end !important;
  gap: 6px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
#task-modal .sc-modal-footer .sc-btn-primary,
#task-modal .sc-modal-footer .sc-btn-secondary,
#task-modal .sc-modal-footer .sc-btn-danger,
#task-modal .sc-modal-footer .sc-btn-complete {
  padding: 0 10px !important;
}
#task-modal .sc-modal-footer #btn-delete-task {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Restyle footer buttons to use design tokens */
#task-modal .sc-modal-footer .sc-btn-primary {
  background: var(--ob-blue); color: #fff;
  border: 1px solid var(--ob-blue); border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  height: 34px; padding: 0 14px;
  cursor: pointer; transition: background var(--dur-1);
}
#task-modal .sc-modal-footer .sc-btn-primary:hover { background: var(--ob-blue-600); border-color: var(--ob-blue-600); }
#task-modal .sc-modal-footer .sc-btn-secondary {
  background: #fff; color: var(--fg-2);
  border: 1px solid var(--border-2); border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  height: 34px; padding: 0 14px;
  cursor: pointer;
}
#task-modal .sc-modal-footer .sc-btn-secondary:hover { background: var(--neutral-50); border-color: var(--border-3); color: var(--fg-1); }
#task-modal .sc-modal-footer .sc-btn-danger {
  background: #fff; color: #A53428;
  border: 1px solid #E8B6AC; border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  height: 34px; padding: 0 14px;
  cursor: pointer;
}
#task-modal .sc-modal-footer .sc-btn-danger:hover { background: #FCEDEA; }
#task-modal .sc-modal-footer .sc-btn-complete {
  background: #fff; color: #1F6740;
  border: 1px solid #B6DBC2; border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  height: 34px; padding: 0 14px;
  cursor: pointer;
}
#task-modal .sc-modal-footer .sc-btn-complete:hover { background: #E6F2EB; }

/* Section dividers (recurrence / chunking blocks the JS toggles) */
#task-modal #recurrence-section,
#task-modal #chunking-section {
  border-top: 1px solid var(--border-1);
  padding-top: 14px !important;
  margin-top: 6px !important;
}

/* ── Left-rail Tasks / Battle Reports section ──────────────────────── */
/* No horizontal padding — the sidebar already provides 14px, and the
   mini-cal + "+ New" button span the same content width. Anything extra
   here would visibly inset the rail. */
.sc-rail-section {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1; min-height: 0;
}
.sc-rail-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--neutral-100, #EEF1F5);
  padding: 3px; border-radius: 8px;
}
.sc-rail-tab {
  appearance: none; border: 0; background: transparent;
  padding: 6px 8px; border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--fg-3, #6B7685); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.sc-rail-tab:hover { color: var(--fg-1, #1F2630); }
.sc-rail-tab.is-active {
  background: #fff; color: var(--ob-blue-700, #1B4D7C);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.sc-rail-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  border-radius: 999px; background: var(--neutral-200, #D5DCE4);
  color: var(--fg-2, #4D5764); font-size: 10px; font-weight: 600;
}
.sc-rail-tab.is-active .sc-rail-tab-count {
  background: var(--ob-blue-100, #DAE7F4); color: var(--ob-blue-700, #1B4D7C);
}

/* Inactive chips render as plain text + colour dot — only the selected
   chip gets the rounded pill border. Frees enough horizontal space to
   keep all four chips (All / High / Med / Low) on a single line. */
.sc-rail-filters {
  display: flex; gap: 4px; align-items: center;
  min-width: 0; flex-wrap: nowrap;
}
.sc-rail-chip {
  appearance: none; border: 1px solid transparent;
  background: transparent; color: var(--fg-3, #6B7685);
  font: inherit; font-size: 11px; font-weight: 500;
  padding: 3px 7px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color var(--dur-1) var(--ease-out);
  white-space: nowrap;
}
.sc-rail-chip:hover { color: var(--fg-1, #1F2630); }
.sc-rail-chip.is-active {
  background: #fff;
  border-color: var(--border-2, #D5DCE4);
  color: var(--fg-1, #1F2630);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sc-rail-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  flex-shrink: 0;
}

.sc-rail-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 2px;
}
.sc-rail-list::-webkit-scrollbar { width: 6px; }
.sc-rail-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15); border-radius: 3px;
}

/* Card uses a 4px inset box-shadow strip on the left for the priority
   colour bar. This follows the card's border-radius automatically (no
   floaty overhang like an absolute-positioned span) and matches the
   Kanban card pattern. */
.sc-rail-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-1, #EEF1F5);
  border-radius: 8px;
  padding: 9px 12px 9px 16px;
  cursor: grab;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.sc-rail-item:hover {
  border-color: var(--border-3, #B7C0CC);
  box-shadow: inset 4px 0 0 var(--rail-bar, transparent), 0 1px 3px rgba(0,0,0,0.06);
}
.sc-rail-item:active { cursor: grabbing; }
.sc-rail-item.is-paused { opacity: 0.55; background: var(--neutral-25, #FAFBFD); }
.sc-rail-item-bar { display: none; }
.sc-rail-item-pri-3 { --rail-bar: #D4493A; box-shadow: inset 4px 0 0 #D4493A; }
.sc-rail-item-pri-2 { --rail-bar: #D89A1A; box-shadow: inset 4px 0 0 #D89A1A; }
.sc-rail-item-pri-1 { --rail-bar: #2E8A5A; box-shadow: inset 4px 0 0 #2E8A5A; }
.sc-rail-item-name {
  font-size: 13px; font-weight: 500; color: var(--fg-1, #1F2630);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-rail-item-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-3, #6B7685);
}
.sc-rail-item-meta .sep { color: var(--border-3, #B7C0CC); }
.sc-rail-empty {
  padding: 16px 8px; text-align: center;
  font-size: 12px; color: var(--fg-3, #6B7685);
}
.sc-rail-empty .sc-link {
  display: inline-block; margin-top: 6px; color: var(--ob-blue, #2870B0);
  background: none; border: 0; font: inherit; cursor: pointer;
  text-decoration: underline;
}

/* ── Edit Report modal — borrow #task-modal styling ───────────────── */
#report-modal.sc-modal-overlay {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(2px);
  align-items: stretch; justify-content: flex-end;
  padding: 0 !important; z-index: 200;
}
#report-modal .sc-modal {
  max-width: 460px !important; width: 460px !important;
  height: 100vh !important; max-height: none !important;
  margin: 0 !important; border-radius: 0 !important;
  display: flex; flex-direction: column;
  background: #fff; box-shadow: var(--sh-4);
  animation: scSheetIn var(--dur-3) var(--ease-out);
}
#report-modal .sc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px !important; border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
}
#report-modal .sc-modal-header > span {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--fg-1); line-height: 1.2;
  display: flex; flex-direction: column; gap: 2px;
}
.sc-modal-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  color: var(--ob-blue-700, #1B4D7C);
  letter-spacing: 0.12em; text-transform: uppercase;
}
#report-modal .sc-modal-body {
  flex: 1; overflow-y: auto;
  padding: 20px 22px !important;
  display: flex; flex-direction: column; gap: 18px;
  line-height: 1.4;
}
#report-modal #report-fields {
  display: flex; flex-direction: column; gap: 18px;
}
#report-modal .sc-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
#report-modal .sc-field > label {
  font-size: 11px; font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
}
#report-modal .sc-field-row {
  display: grid; gap: 10px; grid-template-columns: 1fr 1fr;
  align-items: end;
}
#report-modal .sc-field-row > .sc-field { min-width: 0; }
#report-modal input, #report-modal select, #report-modal textarea {
  font-family: var(--font-sans); font-size: 13px;
  padding: 8px 12px; height: 38px;
  background: #fff; border: 1px solid var(--border-2);
  border-radius: 6px; color: var(--fg-1); outline: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
  width: 100%;
}
#report-modal textarea { min-height: 96px; height: auto; padding: 10px 12px; resize: vertical; }
/* Battle-report description is a contenteditable div (not a textarea)
   so URLs auto-link to clickable blue anchors. Same general look as
   the task-notes editable. */
#report-modal .sc-notes-editable {
  font-family: var(--font-sans); font-size: 13px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--fg-1); outline: none;
  width: 100%;
  min-height: 96px;
  max-height: 400px;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
#report-modal .sc-notes-editable:focus {
  border-color: var(--ob-blue-500);
  box-shadow: 0 0 0 3px rgba(40,112,176,0.15);
}
#report-modal input:focus, #report-modal select:focus, #report-modal textarea:focus {
  border-color: var(--ob-blue-500);
  box-shadow: 0 0 0 3px rgba(40,112,176,0.15);
}
#report-modal .sc-modal-footer {
  flex-shrink: 0;
  display: flex; gap: 8px; align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--border-1);
  background: var(--neutral-25);
}
#report-modal .sc-btn-danger { margin-right: auto; }

/* ── Google Calendar event viewer modal ──────────────────────────── */
#gcal-modal.sc-modal-overlay {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(2px);
  align-items: stretch; justify-content: flex-end;
  padding: 0 !important; z-index: 200;
}
#gcal-modal .sc-modal {
  max-width: 460px !important; width: 460px !important;
  height: 100vh !important; max-height: none !important;
  margin: 0 !important; border-radius: 0 !important;
  display: flex; flex-direction: column;
  background: #fff; box-shadow: var(--sh-4);
  animation: scSheetIn var(--dur-3) var(--ease-out);
}
#gcal-modal .sc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px !important; border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
}
#gcal-modal .sc-modal-header > span {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--fg-1); line-height: 1.2;
  display: flex; flex-direction: column; gap: 2px;
}
#gcal-modal .sc-modal-body {
  flex: 1; overflow-y: auto;
  padding: 20px 22px !important;
  display: flex; flex-direction: column; gap: 18px;
  line-height: 1.4;
}
#gcal-modal #gcal-fields {
  display: flex; flex-direction: column; gap: 18px;
}
#gcal-modal .sc-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
#gcal-modal .sc-field > label {
  font-size: 11px; font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
}
.sc-readonly {
  font-size: 13px; color: var(--fg-1, #1F2630);
  padding: 8px 0; line-height: 1.4;
}
.sc-readonly-block {
  background: var(--neutral-25, #FAFBFD);
  border: 1px solid var(--border-1, #EEF1F5);
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow-y: auto;
}
.sc-readonly a, .sc-readonly-block a {
  color: var(--ob-blue, #2870B0); text-decoration: none;
}
.sc-readonly a:hover, .sc-readonly-block a:hover { text-decoration: underline; }
.sc-meet-link {
  display: inline-block;
  background: var(--ob-blue, #2870B0); color: #fff !important;
  padding: 8px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.sc-meet-link:hover { background: var(--ob-blue-600, #225F97); text-decoration: none !important; }
#gcal-modal .sc-modal-footer {
  flex-shrink: 0;
  display: flex; gap: 8px; align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--border-1);
  background: var(--neutral-25);
}
#gcal-modal .sc-btn-danger { margin-right: auto; }

/* ── Calendar day headers — design-system two-line layout ──────────
   Uppercase weekday on top (small, muted), large date number below.
   "Today" gets a filled blue circle around the number, NOT a tinted
   column background. */
.sc-cal-day-head {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 10px 6px 12px !important;
  border-left: 1px solid var(--border-1) !important;
  background: #fff;
  text-align: center;
  font-weight: normal !important;
}
.sc-cal-day-head.today-col {
  background: #fff !important;
  color: inherit !important;
}
.sc-cal-day-dow {
  font-size: 11px; font-weight: 600;
  color: var(--fg-3, #6B7685);
  letter-spacing: 0.08em;
  line-height: 1;
}
.sc-cal-day-num {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  color: var(--fg-1, #1F2630);
  line-height: 1;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.sc-cal-day-head.today-col .sc-cal-day-num {
  background: var(--ob-blue, #2870B0);
  color: #fff;
}
.sc-cal-day-head.today-col .sc-cal-day-dow {
  color: var(--ob-blue-700, #1B4D7C);
}

/* ── Kanban view: hide the sidebar so all 5 columns fit ─────────── */
body.view-kanban .sc-sidebar { display: none; }
body.view-kanban .sc-layout {
  grid-template-columns: 1fr;
}

/* ── Team view: same — sidebar is calendar-specific, not relevant. */
body.view-team .sc-sidebar { display: none; }
body.view-team .sc-layout {
  grid-template-columns: 1fr;
}

/* ── Gantt view: same — the mini calendar + Ready/Battle Reports rail
   are calendar-only and just steal horizontal space the chart needs.
   Hide the sidebar and let the gantt chart fill the full width. */
body.view-gantt .sc-sidebar { display: none; }
body.view-gantt .sc-layout {
  grid-template-columns: 1fr;
}

/* ── Battle view: standalone single-card UI, no rail. Same treatment
   as kanban/team/gantt — hide the sidebar so the card has the full
   viewport width on every breakpoint. */
body.view-battle .sc-sidebar { display: none; }
body.view-battle .sc-layout {
  grid-template-columns: 1fr;
}
/* The mobile FAB ("+ New") would overlap the Battle view's own
   action bar (Snooze / Reviewed / Save / Archive) and is redundant
   in this view anyway — every entry point creates a Battle Report
   from elsewhere, not from the FAB. */
body.view-battle .sc-mob-fab { display: none !important; }
/* Let the kanban board breathe horizontally so the rightmost column
   ("Done") stops getting clipped. */
body.view-kanban .sc-kanban {
  padding: 16px;
  gap: 12px;
}

/* ── Settings panel — match Edit Task / Edit Report sheet style ──── */
/* Override the legacy .sc-settings-panel rules from app.css so the
   panel slides in full-height (no nav-height inset, no max-height
   clipping), uses the design's box shadow, and reads as part of the
   same sheet family as #task-modal / #report-modal / #gcal-modal. */
.sc-panel-overlay {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(2px);
  z-index: 200 !important;
}
.sc-settings-panel {
  top: 0 !important;
  height: 100vh !important;
  width: 460px !important;
  background: #fff !important;
  border-left: none !important;
  box-shadow: var(--sh-4) !important;
  z-index: 201 !important;
  transition: transform var(--dur-3) var(--ease-out) !important;
}
.sc-settings-panel .sc-panel-header {
  padding: 16px 20px !important;
  height: auto !important;
  border-bottom: 1px solid var(--border-1) !important;
  background: #fff;
}
.sc-panel-header-titles {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--fg-1, #1F2630); line-height: 1.2;
}
.sc-settings-panel .sc-panel-body {
  padding: 6px 20px 16px !important;
  background: #fff;
}
.sc-settings-panel .sc-panel-section {
  border-bottom: 1px solid var(--border-1, #EEF1F5) !important;
}
.sc-settings-panel .sc-panel-section:last-child { border-bottom: none !important; }
.sc-settings-panel .sc-panel-section-header {
  padding: 14px 0 !important;
  min-height: 0 !important;
  font-family: var(--font-sans);
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg-1, #1F2630) !important;
  letter-spacing: 0;
}
.sc-settings-panel .sc-panel-section-header:hover {
  color: var(--ob-blue-700, #1B4D7C) !important;
}
.sc-settings-panel .sc-panel-section-content {
  padding-bottom: 16px !important;
}
.sc-settings-panel .sc-settings-hint {
  font-size: 12px;
  color: var(--fg-3, #6B7685);
  line-height: 1.4;
}

/* Account avatar block (Settings → Account). Round preview + actions. */
.sc-account-avatar-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 4px;
}
.sc-account-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--ob-blue-100, #DCEBF7);
  color: var(--ob-blue-700, #1B4D7C);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600;
  font-family: var(--font-sans);
  background-size: cover; background-position: center;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
}
.sc-account-avatar-actions {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
}
.sc-account-avatar-actions .sc-btn-secondary { font-size: 12px; padding: 6px 10px; }

/* Crop modal: square stage, Cropper.js fills it. */
#avatar-crop-modal .sc-avatar-crop-stage {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0a0a0a;
  border-radius: 8px;
  overflow: hidden;
  max-height: 60vh;
}
#avatar-crop-modal .sc-avatar-crop-stage img {
  display: block;
  max-width: 100%;
}

/* Section-header SVG icons (replaces the old emoji headers). Sized to
   sit comfortably next to the text label. */
.sc-settings-panel .sc-panel-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 8px;
  stroke: var(--fg-2, #475569);
  fill: none;
  stroke-width: 1.75;
  flex-shrink: 0;
}

/* Account section info rows: a label on the left and a value on the
   right, separated cleanly. Used for email + time zone display. */
.sc-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border-1, #EEF1F5);
}
.sc-info-row:last-of-type { border-bottom: none; }
.sc-info-label {
  color: var(--fg-3, #6B7685);
  font-weight: 500;
}
.sc-info-value {
  color: var(--fg-1, #1F2630);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  text-align: right;
  word-break: break-all;
}

/* Toggle row used in Preferences. Checkbox sits left, text + hint right. */
.sc-toggle-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  cursor: pointer;
}
.sc-toggle-row input[type=checkbox] {
  margin-top: 3px;
  flex-shrink: 0;
}
.sc-toggle-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1, #1F2630);
  margin-bottom: 2px;
}
.sc-toggle-row .sc-settings-hint {
  display: block;
  margin: 0;
}
/* Radio rows for Settings → Preferences (Comment emails / New task
   emails). High-specificity selectors with !important on the layout
   props so legacy app.css rules like `.sc-field label { ... }` and
   any parent flex behaviour can't push the input + text-block apart
   to opposite ends of a wide panel — which was the symptom users
   reported (radio centred in empty space, text wrapping letter-by-
   letter at the far right edge of the modal). */
.sc-settings-panel .sc-field > label.sc-radio-row,
label.sc-radio-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  cursor: pointer;
  width: 100% !important;
  text-align: left !important;
}
.sc-settings-panel .sc-radio-row input[type=radio],
.sc-radio-row input[type=radio] {
  margin: 3px 0 0 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}
.sc-settings-panel .sc-radio-row > span,
.sc-radio-row > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  text-align: left !important;
}
.sc-radio-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1, #1F2630);
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.sc-radio-row .sc-settings-hint {
  display: block;
  margin: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Edit Task — extra polish on section grouping ─────────────────── */
/* Recurring/chunking blocks render as collapsible row-groups inside
   #task-fields. Make them feel like grouped cards rather than an
   inline divider line, so they don't visually "interrupt" the form. */
#task-modal #recurrence-section,
#task-modal #chunking-section {
  background: var(--neutral-25, #FAFBFD);
  border: 1px solid var(--border-1, #EEF1F5);
  border-top: 1px solid var(--border-1, #EEF1F5) !important;
  border-radius: 8px;
  padding: 12px 14px !important;
  margin-top: 4px !important;
}
#task-modal #recurrence-options,
#task-modal #chunking-options {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-1, #EEF1F5);
}
/* The "is recurring" / "is chunked" toggles look better with a touch
   of weight + colour on the label so they read as section headers. */
#task-modal #recurrence-section > label,
#task-modal #chunking-section > label {
  font-weight: 600 !important;
  color: var(--fg-1, #1F2630) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
}

/* ── Battle Report panel: editable inline title + top actions row ─── */
/* Header column wrapper so the eyebrow + title stack tightly. */
.sc-modal-header-titles {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1; min-width: 0;
}
/* The actual title is a contenteditable span — looks like text, becomes
   editable when clicked. Empty state shows a soft placeholder via
   data-placeholder, so a new report doesn't render as a blank line. */
.sc-modal-editable-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--fg-1, #1F2630);
  line-height: 1.2;
  outline: none;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;        /* keep visual baseline despite padding */
  cursor: text;
  word-break: break-word;
  transition: background var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.sc-modal-editable-title:hover {
  background: var(--neutral-50, #F5F7FA);
}
.sc-modal-editable-title:focus {
  background: #fff;
  box-shadow: 0 0 0 2px var(--ob-blue-200, #B6D2EC);
}
.sc-modal-editable-title:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-4, #8E99A8);
  font-weight: 600;
}

/* Override the generic header span styles for the report modal so the
   editable title isn't constrained by the parent's flex-column rules. */
#report-modal .sc-modal-header > span,
#report-modal .sc-modal-header > .sc-modal-header-titles {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display);
}

/* Actions row pinned right under the header — no label, just the two
   buttons full-width so rapid-fire processing feels obvious. */
.sc-report-actions {
  display: flex; gap: 8px;
  margin-bottom: 4px;     /* small gap before the form fields */
}
.sc-report-actions button { height: 36px; }

/* ── URL input with inline "open in new tab" button ───────────────── */
/* Wraps the input + a tiny anchor that mirrors the input's value, so
   the user can click straight through without copy/paste while the
   field itself stays editable. The anchor is hidden when the value
   isn't a parseable http(s) URL. */
.sc-url-input {
  position: relative;
  display: flex; align-items: center;
}
.sc-url-input input {
  flex: 1;
  padding-right: 40px !important;  /* room for the button */
}
.sc-url-open-btn {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--ob-blue, #2870B0);
  background: transparent;
  text-decoration: none !important;
  transition: background var(--dur-1) var(--ease-out);
}
.sc-url-open-btn:hover {
  background: var(--ob-blue-50, #ECF2FA);
  color: var(--ob-blue-700, #1B4D7C);
}

/* ── Segmented controls (Edit Task: Status, Priority) ─────────────── */
/* Shadow select is the canonical value holder — visually hidden but
   stays in the DOM so the existing form-read JS keeps working. */
.sc-segmented-shadow {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.sc-segmented {
  display: flex; gap: 2px;
  padding: 2px;
  background: var(--neutral-100, #EEF1F5);
  border-radius: 8px;
  width: 100%;
}
.sc-seg-btn {
  flex: 1;
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--fg-3, #6B7685);
  height: 28px; padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.sc-seg-btn:hover { color: var(--fg-1, #1F2630); }
.sc-seg-btn.is-active {
  background: #fff;
  color: var(--ob-blue-700, #1B4D7C);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Priority variant — coloured dots before each label, like the Kanban
   cards. The active state still uses the white pill so the colour read
   stays subtle (the dot does the work, not the background). */
.sc-segmented-pri .sc-seg-btn {
  padding: 0 6px;
  min-width: 0;
}
.sc-segmented-pri .sc-seg-btn::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; flex-shrink: 0;
}
.sc-segmented-pri .sc-seg-pri-1::before { background: #2E8A5A; }
.sc-segmented-pri .sc-seg-pri-2::before { background: #D89A1A; }
.sc-segmented-pri .sc-seg-pri-3::before { background: #D4493A; }

/* Inside the Edit Task sheet, give Priority more room than Duration so
   3 dotted segments comfortably fit. Only rows that actually contain a
   priority control are affected — date rows etc. stay 1:1:1. */
#task-modal .sc-field-row:has(.sc-segmented-pri) {
  grid-template-columns: 2fr 1fr;
}

/* ── Calendar gutter alignment ─────────────────────────────────────
   The body's time gutter was widened to 60px in this stylesheet (line
   ~399), but the header gutter (52px) and the multi-day banner gutter
   (48px) still came from app.css — so the day columns started at three
   different x-positions. Lock all three to the same 60px so the day
   headers, multi-day banners, and hour grid stack pixel-aligned. */
.sc-cal-gutter-head {
  width: 60px !important;
  flex: 0 0 60px;
}
.sc-cal-banner-gutter {
  width: 60px !important;
  flex: 0 0 60px;
}

/* ── Battle Reports: "needs categorization" affordances ───────────── */
/* Small inline pill on the rail card so unsorted items are visible at
   a glance during the rapid-fire flow, and the user doesn't have to
   open each one to discover it's missing a priority. */
.sc-rail-item-flag {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.02em;
  color: #8B5A2B;
  background: #FBF3DC;
  border: 1px solid #F0DCA0;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.sc-rail-item.is-unset-pri { /* subtle right-edge nudge to draw the eye */
  background: linear-gradient(to right, #fff 90%, #FFFBEC);
}

/* Soft-amber banner at the top of the panel body so the prompt is
   impossible to miss when the user opens an unsorted report. */
.sc-priority-banner {
  background: #FBF3DC;
  border: 1px solid #F0DCA0;
  color: #6B4A0F;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
}


/* ── Gantt: completed task styling ────────────────────────────────
   Greyscale + strike + reduced opacity so finished work fades into the
   background but is still visible if you scroll over it. */
.sc-gantt-bar-done {
  background: #EEF1F5 !important;
  border-color: #B7C0CC !important;
  color: #6B7685 !important;
  opacity: 0.6;
}
.sc-gantt-bar-done .sc-gantt-bar-label {
  text-decoration: line-through;
  color: #6B7685;
}
.sc-gantt-bar-done .sc-gantt-bar-pri-stripe { display: none; }

.sc-gantt-name-row-done .sc-gantt-task-name {
  color: #8E99A8;
  text-decoration: line-through;
}
.sc-gantt-name-row-done { opacity: 0.7; }

/* (Removed: overflow-y:auto override on .sc-gantt-left-rows. The Gantt
   already syncs left scroll via a CSS transform driven by the right
   container's onscroll handler — adding a real scroll on top of that
   doubles the offset and the content moves at 2x the rate.) */

/* ── Gantt toolbar filters (Status / People) ──────────────────────
   Two dropdown buttons next to Today/Link. Click to expand a small
   panel with checkboxes. Filter applies live to the rendered rows. */
.sc-gantt-filter { position: relative; display: inline-block; }
.sc-gantt-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
}
.sc-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px;
  border-radius: 999px;
  background: var(--ob-blue-100, #DAE7F4);
  color: var(--ob-blue-700, #1B4D7C);
  font-size: 10px; font-weight: 600;
}
.sc-filter-count:empty { display: none; }
.sc-gantt-filter-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px; max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-1, #EEF1F5);
  border-radius: 10px;
  box-shadow: var(--sh-3);
  padding: 8px;
  z-index: 100;
  display: flex; flex-direction: column; gap: 4px;
}
.sc-gantt-filter-menu label {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px; color: var(--fg-1, #1F2630);
}
.sc-gantt-filter-menu label:hover { background: var(--neutral-50, #F5F7FA); }
.sc-gantt-filter-menu input[type=checkbox] {
  width: 14px; height: 14px; flex-shrink: 0;
  cursor: pointer;
}
.sc-gantt-filter-actions {
  display: flex; gap: 8px;
  padding: 6px 8px 2px;
  border-top: 1px solid var(--border-1, #EEF1F5);
  margin-top: 4px;
}
.sc-gantt-filter-actions .sc-link {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ob-blue, #2870B0);
  padding: 0;
}
.sc-gantt-filter-actions .sc-link:hover { text-decoration: underline; }

/* ── Dependency search inside Edit Task modal ────────────────────── */
#task-modal #task-deps-search {
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-2, #D5DCE4);
  border-radius: 6px;
  font: inherit; font-size: 13px;
  color: var(--fg-1, #1F2630);
  outline: none;
}
#task-modal #task-deps-search:focus {
  border-color: var(--ob-blue-500, #3D85C4);
  box-shadow: 0 0 0 3px rgba(40,112,176,0.15);
}
.sc-deps-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border-1, #EEF1F5);
  border-radius: 8px;
  box-shadow: var(--sh-3);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.sc-deps-suggestion {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-1, #1F2630);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-deps-suggestion:hover { background: var(--neutral-50, #F5F7FA); }
.sc-deps-suggestion-empty {
  color: var(--fg-3, #6B7685);
  cursor: default;
}
.sc-deps-suggestion-empty:hover { background: transparent; }

.sc-deps-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sc-deps-group-label {
  font-size: 10px; font-weight: 600;
  color: var(--fg-3, #6B7685);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 6px; margin-bottom: 2px;
}
.sc-deps-group-label:first-child { margin-top: 0; }
.sc-deps-empty {
  font-size: 12px;
  color: var(--fg-3, #6B7685);
  padding: 6px 0;
}

/* Task comments thread inside the Edit Task modal. Each comment is a
   small card with author + relative time on top and the body below. */
.sc-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  max-height: 320px;
  overflow-y: auto;
}
/* Collapse the empty list so the margin-bottom doesn't push the
   "+ Comment" trigger away from the field below it. */
.sc-comments-list:empty {
  margin: 0;
  display: none;
}

/* When the comments section is showing only the "+ Comment" trigger
   (no comments, input collapsed), pull the next field up to tighten
   the gap. The parent uses a 18px flex gap which is too much for
   what's effectively a single small button. */
#task-comments-section.is-empty {
  margin-bottom: -10px;
}
.sc-comment {
  background: var(--neutral-25, #FAFBFD);
  border: 1px solid var(--border-1, #EEF1F5);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.sc-comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-3, #6B7685);
  margin-bottom: 4px;
}
.sc-comment-author { font-weight: 600; color: var(--fg-2, #475569); }
.sc-comment-actions {
  display: flex;
  gap: 6px;
  font-size: 11px;
}
.sc-comment-actions button {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg-3, #6B7685);
  cursor: pointer;
  font-size: 11px;
}
.sc-comment-actions button:hover { color: var(--ob-blue-600, #2870B0); }
.sc-comment-actions .sc-comment-delete:hover { color: var(--ob-coral, #D4493A); }
.sc-comment-body {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg-1, #1F2630);
  line-height: 1.4;
}
.sc-comments-empty {
  font-size: 12px;
  color: var(--fg-3, #6B7685);
  padding: 4px 0;
}

/* "+ Comment" trigger button — shown when there are no comments yet
   and the user hasn't expanded the input. Reuses the secondary button
   look but in a small, low-weight form. */
.sc-comments-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 12px !important;
  padding: 6px 10px !important;
}

/* Compact lock toggle button — replaces the older verbose
   "🔒 Lock to this time today" checkbox + hint pair. Two visual states:
   default (off, neutral) and pressed/active (on, warm-amber accent so
   it reads as "locked"). aria-pressed drives the styling. */
.sc-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--fg-2, #475569);
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.sc-lock-btn:hover {
  border-color: var(--ob-blue-500);
  color: var(--ob-blue-700, #1B4D7C);
}
.sc-lock-btn[aria-pressed="true"] {
  background: #FAEFC9;
  border-color: #D89A1A;
  color: #6F4A0F;
}
.sc-lock-btn[aria-pressed="true"]:hover {
  background: #F7E5A8;
  border-color: #B07F0E;
  color: #5A3A0A;
}
.sc-comments-add {
  margin-top: 4px;
}
.sc-comments-add textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.sc-comments-add textarea:focus {
  border-color: var(--ob-blue-500);
  box-shadow: 0 0 0 3px rgba(40, 112, 176, 0.15);
}
/* Contenteditable comment editor — mirrors the textarea look so the
   field doesn't visually shift compared to other text inputs. The
   `data-placeholder` attribute drives the empty-state hint via :empty. */
.sc-comments-add .sc-comment-editor {
  width: 100%;
  min-height: 36px;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--fg-1);
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.sc-comments-add .sc-comment-editor:focus {
  border-color: var(--ob-blue-500);
  box-shadow: 0 0 0 3px rgba(40, 112, 176, 0.15);
}
.sc-comments-add .sc-comment-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-4, #94a3b8);
  pointer-events: none;
}
/* @-mention chip rendered inline. Non-editable as a unit so the user
   can backspace-delete the whole chip in one keystroke. */
.sc-mention {
  display: inline-block;
  padding: 0 5px;
  background: rgba(40, 112, 176, 0.10);
  color: var(--ob-blue-500, #2870B0);
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
  -webkit-user-modify: read-only;
  user-select: all;
}
.sc-mention:focus { outline: 2px solid var(--ob-blue-500); }
/* Floating typeahead under the caret. Position computed by JS using
   viewport coords — must stay `fixed` (NOT absolute) because the menu
   lives inside the task-modal, which is itself position:fixed; an
   absolute child would be positioned relative to the modal's origin
   and the JS's viewport math would push it off-screen. */
.sc-mention-menu {
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid var(--border-2, #d1d5db);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  min-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.sc-mention-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-1);
}
.sc-mention-menu-item:hover,
.sc-mention-menu-item.is-active {
  background: rgba(40, 112, 176, 0.08);
}
.sc-mention-menu-item .sc-mention-name { font-weight: 500; }
.sc-mention-menu-item .sc-mention-email {
  font-size: 11.5px;
  color: var(--fg-3, #6B7685);
  margin-left: auto;
}
.sc-mention-menu-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-3, #6B7685);
}


/* ════════════════════════════════════════════════════════════════════
   Multi-assignee picker (task modal)
   ──────────────────────────────────────────────────────────────────── */
.sc-assignees-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  min-height: 36px;
  background: #fff;
  border: 1px solid var(--border-2, #d1d5db);
  border-radius: 6px;
}
.sc-assignees-chips {
  display: contents; /* lay out chips at the wrapper level so they wrap with the button */
}
.sc-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  background: rgba(40, 112, 176, 0.10);
  color: var(--ob-blue-500, #2870B0);
  border: 1px solid rgba(40, 112, 176, 0.20);
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 500;
  /* Cap individual chip width so a long full-name doesn't overflow
     the column. Past the cap the name truncates with an ellipsis;
     the chip's tooltip (set via title attr in JS) still shows the
     full string on hover. */
  max-width: 100%;
  min-width: 0;
}
.sc-assignee-chip > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-assignee-chip-remove {
  background: transparent;
  border: none;
  color: var(--ob-blue-500, #2870B0);
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 50%;
  line-height: 1;
}
.sc-assignee-chip-remove:hover {
  background: rgba(40, 112, 176, 0.18);
}
.sc-assignees-add-wrap {
  position: relative;
  display: inline-block;
}
.sc-assignees-add-btn {
  background: transparent;
  border: 1px dashed var(--border-2, #cbd5e1);
  color: var(--fg-3, #6B7685);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 14px;
  cursor: pointer;
}
.sc-assignees-add-btn:hover {
  border-color: var(--ob-blue-500, #2870B0);
  color: var(--ob-blue-500, #2870B0);
}
.sc-assignees-add-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-2, #d1d5db);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  padding: 4px;
}
.sc-assignees-add-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-1);
}
.sc-assignees-add-item:hover { background: rgba(40, 112, 176, 0.08); }
.sc-assignees-add-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-3, #6B7685);
}
/* Search input at the top of the assignee menu — lets the user type a
   name/email to filter instead of scrolling through 30+ rows. */
.sc-assignees-add-search {
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: var(--neutral-50, #F5F7FA);
  border: 1px solid var(--border-1, #E3E8EE);
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-1);
  outline: none;
  box-sizing: border-box;
}
.sc-assignees-add-search:focus { border-color: var(--ob-blue-500, #3D85C4); }

/* ════════════════════════════════════════════════════════════════════
   Read-only task modal (mention-only access)
   ──────────────────────────────────────────────────────────────────── */
/* Banner pinned to the top of the modal body — explains the access
   level so the user understands why fields are dimmed. */
.sc-readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 16px;
  background: rgba(40, 112, 176, 0.08);
  border: 1px solid rgba(40, 112, 176, 0.20);
  border-radius: 8px;
  color: var(--ob-blue-500, #2870B0);
  font-size: 12.5px;
  line-height: 1.4;
}
.sc-readonly-banner svg { flex-shrink: 0; }

/* Generic disable: every form input under the read-only modal is
   visually dimmed and non-interactive. The contenteditable bits go
   read-only via JS too (CSS pointer-events alone won't stop a stale
   focus/typing combo on contenteditable). */
.sc-modal--read-only .sc-field input,
.sc-modal--read-only .sc-field select,
.sc-modal--read-only .sc-field textarea,
.sc-modal--read-only .sc-field [contenteditable="true"],
.sc-modal--read-only .sc-segmented,
.sc-modal--read-only .sc-subtask-text,
.sc-modal--read-only .sc-subtask-checkbox,
.sc-modal--read-only #task-modal-title-edit {
  pointer-events: none !important;
  background: var(--neutral-50, #f8fafc) !important;
  opacity: 0.65;
  user-select: text;
}

/* Action-bar buttons: hide everything that mutates the task, leave
   Cancel + the comment trigger/post visible. */
.sc-modal--read-only #btn-save-task,
.sc-modal--read-only #btn-mark-complete,
.sc-modal--read-only #btn-archive-task,
.sc-modal--read-only #btn-delete-task,
.sc-modal--read-only #btn-snooze-task,
.sc-modal--read-only #btn-snooze,
.sc-modal--read-only #task-snooze-wrap,
.sc-modal--read-only #task-lock-btn,
.sc-modal--read-only .sc-subtasks-add,
.sc-modal--read-only #task-deps-add-row {
  display: none !important;
}

/* Mention-only viewers don't care about scheduling/assignment fields —
   they're here to read the conversation and reply. Hide the rows that
   only matter to assignees: dates (start/end/deadline), scheduling
   window + assignees, duration, and the dependencies section. The
   description, status, priority, comments, and subtasks remain so
   they can read the task's substance. */
.sc-modal--read-only #task-dates-row,
.sc-modal--read-only #task-window-row,
.sc-modal--read-only #task-duration-field,
.sc-modal--read-only #task-deps-section {
  display: none !important;
}

/* The comment editor and its surrounding controls stay fully
   interactive — mentioned users CAN comment back on the task. */
.sc-modal--read-only #task-comments-section,
.sc-modal--read-only #task-comments-section *,
.sc-modal--read-only #btn-comment-trigger,
.sc-modal--read-only #btn-comment-post,
.sc-modal--read-only #btn-comment-cancel {
  pointer-events: auto !important;
}
.sc-modal--read-only #task-comments-input {
  background: #fff !important;
  opacity: 1 !important;
}
.sc-dep-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--neutral-25, #FAFBFD);
  border: 1px solid var(--border-1, #EEF1F5);
  border-radius: 6px;
}
.sc-dep-name {
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--fg-1, #1F2630);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-dep-remove {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--fg-3, #6B7685);
  font-size: 16px; line-height: 1;
  width: 24px; height: 24px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-dep-remove:hover {
  background: #FCEDEA; color: #A53428; border-color: #E8B6AC;
}

/* ── Calendar lock icon ───────────────────────────────────────────
   Renders inside the block title, before the task name. Subtle but
   visible — slate-grey on the priority-tinted background. */
.sc-task-block-lock {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 4px;
  color: var(--fg-3, #6B7685);
  vertical-align: -1px;
  flex-shrink: 0;
}
.sc-task-block-lock svg { display: block; }

/* ── Tab badges (overdue counter on Calendar tab) ─────────────── */
.sc-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0;
  margin-left: 2px;
}
.sc-tab-badge-overdue {
  background: var(--pri-high, #D4493A);
  color: #fff;
}

/* ── Mini-month: density dots ─────────────────────────────────
   Days that have at least one scheduled (non-block, non-completed)
   task get a small blue dot beneath the date number. Lets the user
   see where their week is busy at a glance. */
.sc-mini-day { position: relative; }
.sc-mini-day.has-tasks::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ob-blue, #2870B0);
  pointer-events: none;
}
.sc-mini-day.today.has-tasks::after,
.sc-mini-day.selected.has-tasks::after {
  background: #fff;        /* contrast against blue today/selected fill */
}

/* ── Lock-to-today toggle in Edit Task modal ──────────────────────
   Renders as a checkbox + title + hint, visually distinct from form
   field rows so users notice it. */
.sc-toggle-label {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--neutral-25, #FAFBFD);
  border: 1px solid var(--border-1, #EEF1F5);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.sc-toggle-label input[type=checkbox] {
  width: 16px; height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.sc-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.sc-toggle-title { font-weight: 500; color: var(--fg-1, #1F2630); }
.sc-toggle-hint  { font-size: 12px; color: var(--fg-3, #6B7685); }

/* ── Snooze menu (Edit Task footer) ────────────────────────────── */
/* Force every footer button to stay single-line. The Snooze "▾" and the
   "✓ Complete" checkmark were wrapping onto two lines when the button
   cluster ran out of horizontal room. Plus a uniform height so they
   all line up. */
#task-modal .sc-modal-footer button {
  white-space: nowrap;
  height: 34px;
}
.sc-snooze-wrap { display: inline-flex; }
.sc-snooze-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--border-1, #EEF1F5);
  border-radius: 10px;
  box-shadow: var(--sh-3);
  padding: 4px;
  z-index: 100;
  display: flex; flex-direction: column;
}
.sc-snooze-menu button {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 6px;
  font: inherit; font-size: 13px;
  color: var(--fg-1, #1F2630);
  cursor: pointer;
  white-space: nowrap;
  height: auto !important;
}
.sc-snooze-menu button:hover { background: var(--neutral-50, #F5F7FA); }

/* ── Deadline icon on calendar blocks ─────────────────────────────
   Small flag SVG to flag tasks due today or overdue. Red for overdue,
   amber for due-today. */
.sc-task-block-deadline {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 4px;
  vertical-align: -1px;
  flex-shrink: 0;
}
.sc-task-block-deadline.is-overdue { color: #D4493A; }
.sc-task-block-deadline.is-today   { color: #B57D00; }

/* ── App-wide search overlay (Cmd palette style) ──────────────── */
.sc-search-overlay {
  position: fixed; inset: 0;
  background: rgba(14, 45, 68, 0.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  z-index: 300;
}
.sc-search-panel {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-4);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.sc-search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1, #EEF1F5);
  color: var(--fg-3, #6B7685);
}
.sc-search-bar input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit; font-size: 15px;
  color: var(--fg-1, #1F2630);
}
.sc-search-kbd {
  display: inline-flex; align-items: center;
  background: var(--neutral-100, #EEF1F5);
  color: var(--fg-3, #6B7685);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════════
   Topbar search trigger
   ──────────────────────────────────────────────────────────────────── */
/* "Search… ⌘K" pill that lives in the topbar between the app
   switcher and the user chip. Same look as the search box on Linear
   / Stripe / Vercel. Click opens the overlay; the kbd hint reminds
   users of the shortcut. Hidden on narrow viewports where it'd
   crowd the bell + hamburger. */
.sc-topbar-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 6px 0 10px;
  background: #fff;
  border: 1px solid var(--border-2, #d1d5db);
  border-radius: 8px;
  color: var(--fg-3, #6B7685);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.sc-topbar-search:hover {
  background: var(--neutral-50, #f8fafc);
  border-color: var(--ob-blue-300, #93c5fd);
  color: var(--fg-2, #475569);
}
.sc-topbar-search-label { font-weight: 400; padding-right: 32px; }
.sc-topbar-search-kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--neutral-100, #EEF1F5);
  color: var(--fg-3, #6B7685);
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
}
@media (max-width: 820px) {
  .sc-topbar-search-label { display: none; }
  .sc-topbar-search { padding: 0 8px; gap: 4px; }
}
@media (max-width: 640px) {
  .sc-topbar-search-kbd { display: none; }
}
.sc-search-results {
  flex: 1; overflow-y: auto;
  padding: 6px;
}
.sc-search-hint {
  padding: 16px; text-align: center;
  color: var(--fg-3, #6B7685); font-size: 13px;
}
.sc-search-result {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.sc-search-result:hover,
.sc-search-result.is-active { background: var(--neutral-50, #F5F7FA); }
.sc-search-result-title {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 500;
  color: var(--fg-1, #1F2630);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-search-result-sub {
  font-size: 11px; color: var(--fg-3, #6B7685);
}
.sc-search-result-pill {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.sc-search-result-pill.pill-task      { background: #EEF2FF; color: #3730A3; border-color: #C7D2FE; }
.sc-search-result-pill.pill-report    { background: #FFF7ED; color: #9A3412; border-color: #FED7AA; }
.sc-search-result-pill.pill-gcal      { background: #ECFEFF; color: #0E7490; border-color: #A5F3FC; }
.sc-search-result-pill.pill-shortcuts { background: rgba(40, 112, 176, 0.10); color: #2870B0; border-color: rgba(40, 112, 176, 0.25); }
/* Per-task state pill (Ready / Doing / Review / Hold / Done /
   Archived). Sits to the LEFT of the kind pill on task rows; battle
   reports + gcal events render without a state pill (they don't have
   one in the same sense — see _searchTaskStatePill). Tones match
   the kanban column accents so a "Doing" task in search reads the
   same color as the Doing column on the board. */
.sc-search-result-pill.pill-state-ready    { background: #EEF2FF; color: #4338CA; border-color: #C7D2FE; }
.sc-search-result-pill.pill-state-doing    { background: #E0F2FE; color: #0369A1; border-color: #BAE6FD; }
.sc-search-result-pill.pill-state-review   { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.sc-search-result-pill.pill-state-hold     { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.sc-search-result-pill.pill-state-done     { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.sc-search-result-pill.pill-state-archived { background: #F4F4F5; color: #52525B; border-color: #D4D4D8; }

/* ════════════════════════════════════════════════════════════════════
   Keyboard shortcuts overlay (opened from /-search)
   ──────────────────────────────────────────────────────────────────── */
.sc-shortcuts-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 16px 16px;
  background: rgba(15, 23, 42, 0.45);
  z-index: 10000;
  outline: none;
}
.sc-shortcuts-card {
  width: 720px; max-width: 100%;
  max-height: calc(100vh - 96px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.20);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sc-shortcuts-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-1, #eef1f5);
}
.sc-shortcuts-header h3 {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--fg-1);
}
.sc-shortcuts-close {
  background: transparent; border: none;
  font-size: 22px; line-height: 1;
  color: var(--fg-3, #6B7685); cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 6px;
}
.sc-shortcuts-close:hover { background: var(--neutral-50, #f1f5f9); color: var(--fg-1); }
.sc-shortcuts-body {
  flex: 1; overflow-y: auto;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
}
.sc-shortcuts-section { min-width: 0; }
.sc-shortcuts-section-title {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3, #6B7685);
}
.sc-shortcuts-list {
  list-style: none; margin: 0; padding: 0;
}
.sc-shortcuts-item {
  display: flex; align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border-1, #eef1f5);
}
.sc-shortcuts-item:last-child { border-bottom: none; }
.sc-shortcuts-keys {
  flex-shrink: 0;
  min-width: 96px;
  display: inline-flex; align-items: center; gap: 2px;
}
.sc-shortcuts-label {
  margin-left: 12px;
  color: var(--fg-1);
}
.sc-kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: #fff;
  border: 1px solid var(--border-2, #d1d5db);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--fg-1);
  text-align: center;
}
.sc-kbd-plus {
  margin: 0 4px;
  color: var(--fg-3, #6B7685);
  font-size: 11px;
}
/* Quiet "or" between a primary shortcut and its alt variant — e.g.
   "⌘ + K  or  /" for search. Matches sc-kbd-plus's tone but italic
   to read as prose, not a key. */
.sc-kbd-or {
  margin: 0 8px;
  color: var(--fg-3, #6B7685);
  font-size: 11px;
  font-style: italic;
}
@media (max-width: 640px) {
  .sc-shortcuts-body { grid-template-columns: 1fr; }
}

/* App switcher: highlight the keyboard-active item the same way as
   hover so arrow-key navigation is visible. */
.ob-app-item.is-active { background: var(--neutral-50, #F5F7FA); }

/* ── Multi-day banner: GCal variant ──────────────────────────────
   Soft Google Calendar blue rather than the project palette. Still
   uses the same .sc-cal-multi-banner positioning. */
.sc-cal-multi-banner.is-gcal {
  background: var(--ob-blue, #2870B0) !important;
  color: #fff;
  font-weight: 500;
}

/* ── Subtasks (in Edit Task modal) ─────────────────────────────────
   Compact list of checkbox + editable text rows. Done items get a
   strikethrough so they fade visually without being hidden. */
/* All subtask UI lives inside #task-modal so we boost specificity to
   beat the modal-wide input[type=text] / button rules — without this
   the subtask text input gets a 38px white-on-white look that hides
   its content, and the remove button picks up modal-button styling. */
#task-modal .sc-subtasks-list {
  display: flex; flex-direction: column; gap: 4px;
}
#task-modal .sc-subtask-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border-1, #EEF1F5) !important;
  border-radius: 6px;
  background: #fff;
}
#task-modal .sc-subtask-row.is-done { opacity: 0.6; }
#task-modal .sc-subtask-row.is-done .sc-subtask-text {
  text-decoration: line-through;
}
#task-modal .sc-subtask-grip {
  cursor: grab; color: var(--fg-3, #6B7685);
  flex-shrink: 0; font-size: 14px;
  user-select: none; line-height: 1;
  padding: 0 2px;
}
#task-modal .sc-subtask-row.is-dragging { opacity: 0.4; }
#task-modal .sc-subtask-row.is-drag-over {
  border-top: 2px solid var(--ob-blue, #2870B0) !important;
}
#task-modal .sc-subtask-check {
  width: 16px !important; height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0; cursor: pointer;
}
#task-modal .sc-subtask-text {
  flex: 1 1 auto !important;
  min-width: 0;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit; font-size: 13px;
  color: var(--fg-1, #1F2630) !important;
  padding: 2px 0 !important;
  /* Contenteditable span: takes exactly the lines it needs. Wraps
     long content (including unbreakable strings via overflow-wrap)
     and stays on one line when the text is short. */
  display: block;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-family: var(--font-sans);
}
/* Vertically center the row's flex children. Most rows are single-line
   so center reads as "balanced top to bottom." Multi-line rows still
   read fine — the checkbox/grip sit centered against the text block. */
#task-modal .sc-subtask-row { align-items: center; }
#task-modal .sc-subtask-row .sc-subtask-grip,
#task-modal .sc-subtask-row .sc-subtask-check,
#task-modal .sc-subtask-row .sc-subtask-remove { margin-top: 0; }
#task-modal .sc-subtask-text:focus {
  background: transparent !important;
  box-shadow: none !important;
}
#task-modal .sc-subtask-remove {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: var(--fg-3, #6B7685) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#task-modal .sc-subtask-remove:hover {
  background: #FCEDEA !important;
  color: #A53428 !important;
  border-color: #E8B6AC !important;
}
#task-modal .sc-subtasks-add { margin-top: 6px; }
#task-modal #task-subtasks-input {
  width: 100% !important;
  height: 32px !important;
  padding: 6px 10px !important;
  background: #fff !important;
  border: 1px solid var(--border-2, #D5DCE4) !important;
  border-radius: 6px !important;
  font: inherit; font-size: 13px;
  outline: none;
}
#task-subtasks-input:focus {
  border-color: var(--ob-blue-500, #3D85C4);
  box-shadow: 0 0 0 3px rgba(40,112,176,0.15);
}
#task-subtasks-progress {
  font-weight: 400;
  color: var(--fg-3, #6B7685);
  font-size: 11px;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}
/* Tiny progress badge on calendar tile titles. */
.sc-task-block-subprog {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  background: rgba(0,0,0,0.08);
  color: var(--fg-2, #4D5764);
}

/* "Doing (on calendar)" hint on the Kanban Doing column header. Smaller
   and lighter than the column name so it reads as a clarifier. */
.sc-kanban-col-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-3, #6B7685);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   Mobile shell (≤ 768px) — phase 1 of the mobile redesign
   ────────────────────────────────────────────────────────────────────
   Hidden by default; the @media block below shows the chrome and
   hides the desktop equivalents. Markup lives at the end of
   index.html (#sc-mob-topbar / #sc-mob-drawer / #sc-mob-fab /
   #sc-mob-tabbar).

   Phase 2 (calendar week strip + day view) and phase 3 (Battle tab
   content) ride on top of the same shell; this file establishes the
   chrome only.
   ──────────────────────────────────────────────────────────────────── */

/* Always-hidden on desktop. The @media at the bottom switches them
   on at ≤ 768px. */
.sc-mob-topbar,
.sc-mob-drawer,
.sc-mob-scrim,
.sc-mob-fab { display: none; }

@media (max-width: 768px) {
  /* ── Hide desktop chrome that the mobile shell replaces ─────── */
  /* The shared-nav top bar is replaced by .sc-mob-topbar. The
     existing notification panel + apps dropdown still live inside
     #ob-shared-nav so we keep the element in the DOM (visually
     hidden) — the mobile bell button delegates clicks into it. */
  #ob-shared-nav { display: none !important; }

  /* Push the SPA layout below the mobile top bar (52px). The bottom
     tab bar was dropped — drawer covers nav — so no bottom padding
     is needed beyond iOS safe-area for the home indicator.
     overflow: hidden + 100dvh height keeps iOS Safari from
     shifting the page after the keyboard dismisses — without this,
     focusing a contenteditable in the Battle view and tapping out
     left the top of the screen scrolled out of view. The view's
     own scrollable surfaces (e.g. .sc-bat-cardwrap, .sc-panel-body)
     still scroll independently. */
  body {
    padding-top: 52px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow: hidden;
    height: 100dvh;
  }
  /* Reparented notification panel — see bell-button handler in
     app.js. When the bell is tapped on mobile we move the panel
     out of the (hidden) desktop nav and onto <body>, then position
     it as a fixed dropdown beneath the mobile top bar. */
  .sc-notif-panel--mobile {
    position: fixed !important;
    top: calc(52px + env(safe-area-inset-top, 0) + 6px) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0)) !important;
    z-index: 250 !important;
  }

  /* ── Top bar ────────────────────────────────────────────────── */
  .sc-mob-topbar {
    display: flex;
    align-items: center;
    gap: 4px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    padding: 0 8px;
    background: #fff;
    border-bottom: 1px solid var(--border-1, #EEF1F5);
    z-index: 200;
  }
  .sc-mob-icon-btn {
    flex-shrink: 0;
    width: 40px; height: 40px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--fg-1, #1F2630);
    display: inline-flex;
    align-items: center; justify-content: center;
    cursor: pointer;
  }
  .sc-mob-icon-btn:active { background: var(--neutral-100, #EEF1F5); }
  .sc-mob-titlewrap {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    line-height: 1.1;
    padding-left: 4px;
  }
  .sc-mob-eyebrow {
    font: 700 9px/1 var(--font-sans);
    color: var(--fg-3, #6B7685);
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .sc-mob-title {
    font: 600 16px/1.2 var(--font-display, var(--font-sans));
    color: var(--fg-1, #1F2630);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sc-mob-bell-btn { position: relative; }
  .sc-mob-bell-badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: #DC2626;
    color: #fff;
    font: 700 10px/16px var(--font-sans);
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
  }

  /* ── Drawer + scrim ────────────────────────────────────────── */
  .sc-mob-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
    z-index: 300;
  }
  .sc-mob-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .sc-mob-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(78vw, 320px);
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
    z-index: 400;
    box-shadow: 4px 0 20px rgba(15, 23, 42, 0.10);
  }
  .sc-mob-drawer.is-open { transform: translateX(0); }
  .sc-mob-drawer-head {
    display: flex; align-items: center;
    height: 60px;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-1, #EEF1F5);
  }
  .sc-mob-drawer-logo { height: 24px; width: auto; }
  .sc-mob-drawer-nav {
    display: flex; flex-direction: column;
    padding: 12px 8px;
    gap: 2px;
  }
  .sc-mob-drawer-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 14px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font: 500 14px/1 var(--font-sans);
    color: var(--fg-1, #1F2630);
    cursor: pointer;
    text-align: left;
  }
  .sc-mob-drawer-item:active { background: var(--neutral-100, #EEF1F5); }
  .sc-mob-drawer-item.is-active {
    background: rgba(40, 112, 176, 0.10);
    color: var(--ob-blue, #2870B0);
    font-weight: 600;
  }
  .sc-mob-drawer-item.is-active svg { color: var(--ob-blue, #2870B0); }
  .sc-mob-drawer-divider {
    border: 0;
    border-top: 1px solid var(--border-1, #EEF1F5);
    margin: 8px 0;
  }

  /* ── Floating + FAB ─────────────────────────────────────────── */
  /* Bottom tab bar was dropped, so the FAB sits closer to the
     bottom edge — clear of the iOS home indicator via safe-area. */
  .sc-mob-fab {
    display: inline-flex;
    align-items: center; justify-content: center;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0));
    right: 16px;
    width: 52px; height: 52px;
    background: var(--ob-blue, #2870B0);
    color: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(40, 112, 176, 0.40);
    cursor: pointer;
    z-index: 250;
  }
  .sc-mob-fab:active { transform: scale(0.96); }

  /* ── Hide pieces of the desktop UI that don't fit the mobile shell ─ */
  /* The sidebar (.sc-sidebar) is purely calendar chrome — mini-cal
     + Ready/Battle Reports rail. On a phone there's no room and
     the new mobile shell + Battle view in the drawer cover what
     it provided. app.css already has a @media rule for this, but
     sc-redesign.css's later base .sc-sidebar { display: flex }
     was winning on source-order — re-state here so it sticks.
     The desktop kanban/team/gantt views render their own toolbars
     that already cope reasonably well with narrow widths — we leave
     them visible and rely on each view's own @media tweaks. Phase 2
     polishes the calendar's date-nav specifically. */
  .sc-sidebar { display: none !important; }

  /* The desktop layout reserves a 248px column for the sidebar. On
     mobile we hide the sidebar (above) but the grid column stays —
     so the calendar view ended up squeezed into the right "1fr"
     leaving 248px of empty space on the left. Collapse to a single
     full-width column at every view (kanban/team/gantt/battle
     already do this via body-class rules; we cover all views here). */
  .sc-layout { grid-template-columns: 1fr !important; }

  /* Team view doesn't fit usefully on a phone — column rail with
     six bucket rows per person is unreadable below ~900px. Hide
     it from the mobile drawer; if a user lands on /team via URL
     applyRoute() bounces them to /calendar. */
  .sc-mob-drawer-item[data-mob-view="team"] { display: none !important; }

  /* ── Create-new type picker (V1 Minimal full-screen on mobile) ─
     Picker is the front door for + New on every view. Mobile
     gets a full-screen takeover so tap targets are generous and
     the user isn't squinting at a centered modal on 375px.
     Block Time is dropped on mobile per the design spec — all
     calendar block-creation lives on the desktop drag-to-create
     gesture; on mobile it's an edge case. */
  #create-picker-modal .sc-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .sc-create-picker-head {
    padding: calc(env(safe-area-inset-top, 0) + 14px) 18px 14px !important;
  }
  .sc-create-picker-title { font-size: 18px; }
  .sc-create-option { padding: 16px 12px; gap: 16px; }
  .sc-create-icon { width: 44px; height: 44px; }
  .sc-create-icon svg { width: 22px; height: 22px; }
  .sc-create-label { font-size: 15px; }
  .sc-create-desc { font-size: 13px; }
  /* kbd hints are desktop affordances — on a phone the user taps,
     not types, so save the visual real estate. */
  .sc-create-kbd { display: none !important; }
  /* Block Time hidden on mobile per the creator-design handoff. */
  #create-picker-modal #picker-option-block { display: none !important; }

  /* ── Calendar single-day view ─────────────────────────────────
     The desktop calendar lays out 7 day columns side-by-side. On
     a 375px phone each column is ~50px and tasks are unreadable.
     Mobile shows ONE day at a time, picked via the day-pill strip
     rendered above the grid (see _renderMobileDayStrip). The 7
     columns stay in the DOM; we hide all but .is-mob-active so
     no DOM rebuild is needed when the user switches days. */

  /* Hide the desktop day-name header row (replaced by the pill
     strip below) and any stray day-head buttons. */
  #view-calendar .sc-cal-header { display: none !important; }

  /* Day-pill strip: 7 pills laid out in a row, each tappable. */
  .sc-mob-day-strip {
    display: flex;
    gap: 2px;
    padding: 8px 6px 10px;
    background: #fff;
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
  }
  .sc-mob-day-pill {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: var(--fg-2);
    font-family: var(--font-sans);
  }
  .sc-mob-day-pill:active { background: var(--neutral-50); }
  .sc-mob-day-pill-dow {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--fg-3);
    letter-spacing: 0.06em;
    line-height: 1;
  }
  .sc-mob-day-pill-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 700 16px/1 var(--font-display, var(--font-sans));
    color: var(--fg-1);
    transition: background 0.12s ease-out, color 0.12s ease-out;
  }
  .sc-mob-day-pill.is-active .sc-mob-day-pill-num {
    background: var(--ob-blue, #2870B0);
    color: #fff;
  }
  .sc-mob-day-pill.is-today:not(.is-active) .sc-mob-day-pill-num {
    color: var(--ob-blue, #2870B0);
  }
  .sc-mob-day-pill-dots {
    display: flex;
    gap: 3px;
    height: 6px;
    align-items: center;
  }
  .sc-mob-day-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
  }
  .sc-mob-day-dot--high { background: #D4493A; }
  .sc-mob-day-dot--med  { background: #D89A1A; }
  .sc-mob-day-dot--low  { background: #2E8A5A; }

  /* Single-day view: hide every day column except the active one.
     The active column expands to fill the grid via flex:1 (the
     base .sc-day-col rule already sets flex: 1). */
  #view-calendar .sc-cal-days .sc-day-col { display: none !important; }
  #view-calendar .sc-cal-days .sc-day-col.is-mob-active {
    display: block !important;
    flex: 1 !important;
  }
  /* Same single-day filter for the all-day-event banner row above
     the grid (one .sc-cal-banner-col per day, same order as the
     day-cols). */
  #view-calendar .sc-cal-banner-col { display: none !important; }
  #view-calendar .sc-cal-banner-col.is-mob-active {
    display: block !important;
    flex: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Battle view (phase 3 of mobile redesign)
   ────────────────────────────────────────────────────────────────────
   Single-card view of today's due battle reports. Reached from the
   mobile bottom-tab "Battle" button; the view itself is also valid
   on desktop if a user pastes /battle, just less natural.
   Layout (top → bottom):
     filter chips → counter row → card body (scrollable, swipeable) →
     action bar (4 buttons: Snooze / Reviewed / Save / Archive).
   ──────────────────────────────────────────────────────────────────── */
#view-battle { background: var(--neutral-25); }

.sc-bat-chiprow {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border-1, #EEF1F5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.sc-bat-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border-2, #d1d5db);
  border-radius: 999px;
  font: 600 12.5px/1 var(--font-sans);
  color: var(--fg-2, #475569);
  cursor: pointer;
}
.sc-bat-chip.is-active {
  background: rgba(40, 112, 176, 0.10);
  border-color: var(--ob-blue, #2870B0);
  color: var(--ob-blue, #2870B0);
}
.sc-bat-chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.sc-bat-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border-1, #EEF1F5);
  flex-shrink: 0;
}
.sc-bat-counter-text {
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-3, #6B7685);
  letter-spacing: 0.02em;
}
.sc-bat-nav {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-2, #d1d5db);
  border-radius: 8px;
  color: var(--fg-1, #1F2630);
  cursor: pointer;
}
.sc-bat-nav:active { background: var(--neutral-100, #EEF1F5); }
.sc-bat-nav:disabled { opacity: 0.4; cursor: not-allowed; }

.sc-bat-cardwrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 88px;     /* bottom pad clears the action bar */
  /* touch-action: pan-y so the browser handles vertical scroll
     natively while we capture horizontal swipes for navigation. */
  touch-action: pan-y;
}
.sc-bat-card {
  background: #fff;
  border: 1px solid var(--border-1, #EEF1F5);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sc-bat-title {
  font: 600 18px/1.3 var(--font-display, var(--font-sans));
  color: var(--fg-1, #1F2630);
  outline: none;
  min-height: 1.3em;
  word-break: break-word;
}
.sc-bat-title:empty:before {
  content: attr(data-placeholder);
  color: var(--fg-4, #94a3b8);
  font-weight: 500;
}
.sc-bat-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-bat-field > label {
  font: 600 11px/1 var(--font-sans);
  color: var(--fg-3, #6B7685);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sc-bat-field input[type="number"],
.sc-bat-field input[type="url"] {
  height: 36px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--border-2, #d1d5db);
  border-radius: 8px;
  font: 500 14px/1 var(--font-sans);
  color: var(--fg-1, #1F2630);
}
.sc-bat-meta {
  font: 500 13px/1.3 var(--font-sans);
  color: var(--fg-2, #475569);
  padding: 6px 0;
}

/* Empty state — shown when the queue is empty. */
.sc-bat-empty {
  margin: 40px auto;
  text-align: center;
  padding: 24px;
  max-width: 320px;
}
.sc-bat-empty-emoji { font-size: 48px; line-height: 1; margin-bottom: 12px; }
.sc-bat-empty-title {
  font: 600 18px/1.3 var(--font-display, var(--font-sans));
  color: var(--fg-1, #1F2630);
  margin-bottom: 4px;
}
.sc-bat-empty-sub {
  font: 500 13px/1.4 var(--font-sans);
  color: var(--fg-3, #6B7685);
}

/* Sticky-ish action bar at the bottom of the view. On mobile, sits
   above the .sc-mob-tabbar (which is itself fixed at the viewport
   bottom). On desktop (where /battle is reachable but rare), it sits
   at the bottom of the view's flex chain. */
.sc-bat-actionbar {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border-top: 1px solid var(--border-1, #EEF1F5);
  flex-shrink: 0;
}
.sc-bat-action {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  height: 56px;
  background: #fff;
  border: 1px solid var(--border-2, #d1d5db);
  border-radius: 10px;
  font: 600 11px/1 var(--font-sans);
  color: var(--fg-1, #1F2630);
  cursor: pointer;
}
.sc-bat-action:active { transform: scale(0.97); }
.sc-bat-action-reviewed {
  background: var(--ob-blue, #2870B0);
  border-color: var(--ob-blue, #2870B0);
  color: #fff;
}
.sc-bat-action-archive { color: #B91C1C; border-color: #FCA5A5; }
.sc-bat-action[disabled] { opacity: 0.4; cursor: not-allowed; }

/* The view body sits between the mobile top bar (52px) and the
   tab bar (60px), with breathing room handled by body padding in
   the mobile shell. The action bar sticks at the bottom of the
   view's own flex chain so the user's thumb doesn't have to leave
   the bottom edge to act on a report. */
.sc-bat-actionbar {
  position: sticky;
  bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Mobile (≤ 768px): iOS Safari viewport-fit fixes
   ────────────────────────────────────────────────────────────────────
   The page uses viewport-fit=cover, which lets content extend behind
   the iPhone status bar at the top and the Safari URL bar at the
   bottom. Fixed sheets sized to 100vh end up clipped at both edges.
   This block applies the same two-fix pattern (100dvh + safe-area
   insets) the task modal and settings panel already use:
     - 100dvh for height so the sheet shrinks when the URL bar shows.
     - env(safe-area-inset-top) padding on the header so titles aren't
       hidden behind the status bar / Dynamic Island.
     - env(safe-area-inset-bottom) padding on action bars / footers
       so buttons sit clear of the home indicator + URL bar.

   Also hides the mobile + FAB whenever a modal sheet is open (it sits
   at z-index 250 and was overlapping the rightmost modal button).
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Report modal — same right-side sheet as task modal on desktop;
     same full-screen treatment on mobile. */
  #report-modal .sc-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
  }
  #report-modal .sc-modal-header {
    padding: calc(env(safe-area-inset-top, 0) + 14px) 16px 14px !important;
  }
  #report-modal .sc-modal-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
  }
  /* Same iOS auto-zoom fix as the task modal. */
  #report-modal input[type=text],
  #report-modal input[type=email],
  #report-modal input[type=date],
  #report-modal input[type=time],
  #report-modal input[type=number],
  #report-modal input[type=url],
  #report-modal select,
  #report-modal textarea,
  #report-modal [contenteditable="true"] {
    font-size: 16px !important;
  }
  /* Stack date / period rows on mobile. */
  #report-modal .sc-field-row {
    grid-template-columns: 1fr !important;
  }

  /* Google Calendar event viewer — same shape. */
  #gcal-modal .sc-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
  }
  #gcal-modal .sc-modal-header {
    padding-top: calc(env(safe-area-inset-top, 0) + 14px) !important;
  }

  /* Battle view: fill the body's content area (which is already
     bounded by `body { height: 100dvh; padding-top: 52px }` above —
     so content height is 100dvh − 52px − safe-area-bottom). The
     previous rules forced 100dvh on .sc-layout and #view-battle
     directly, which overflowed the body by exactly 52px and clipped
     the action bar at the bottom on first load. After the keyboard
     cycle iOS recomputes 100dvh against a different bound and the
     overflow flips to the top instead — same root cause both ways.
     Filling 100% of body's content box keeps the math correct
     regardless of URL-bar / keyboard state. */
  body.view-battle .sc-layout {
    height: 100%;
    min-height: 0;
  }
  #view-battle {
    height: 100%;
  }
  /* Action bar pads for the home indicator + URL bar overlap. */
  .sc-bat-actionbar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)) !important;
  }
  /* Same iOS auto-zoom fix as the task / report modals. The Battle
     view's URL + period inputs default to 14px and the description
     (.sc-notes-editable) defaults to 13px — both under the 16px
     threshold that stops iOS Safari from zooming on focus. Force
     16px across every editable surface inside #view-battle. */
  #view-battle input[type=text],
  #view-battle input[type=number],
  #view-battle input[type=url],
  #view-battle input[type=email],
  #view-battle select,
  #view-battle textarea,
  #view-battle .sc-notes-editable,
  #view-battle [contenteditable="true"] {
    font-size: 16px !important;
  }

  /* Hide the mobile shell chrome while any sheet is open. The mobile
     top bar (z-index 200) was peeking through above the modal title
     even though the modal overlay is at z-index 500 — this could be a
     iOS Safari containing-block quirk with body padding-top + fixed.
     Either way, hiding the top bar entirely while a sheet is open is
     the right UX (the sheet has its own X close button) and side-
     steps the issue. Same treatment for the FAB so it doesn't sit
     on top of modal action buttons. iOS 16+ supports :has(). */
  body:has(#task-modal.sc-modal-overlay[style*="flex"]) .sc-mob-topbar,
  body:has(#task-modal.sc-modal-overlay[style*="flex"]) .sc-mob-fab,
  body:has(#report-modal.sc-modal-overlay[style*="flex"]) .sc-mob-topbar,
  body:has(#report-modal.sc-modal-overlay[style*="flex"]) .sc-mob-fab,
  body:has(#gcal-modal.sc-modal-overlay[style*="flex"]) .sc-mob-topbar,
  body:has(#gcal-modal.sc-modal-overlay[style*="flex"]) .sc-mob-fab,
  body:has(#create-picker-modal.sc-modal-overlay[style*="flex"]) .sc-mob-topbar,
  body:has(#create-picker-modal.sc-modal-overlay[style*="flex"]) .sc-mob-fab,
  body:has(#settings-panel.open) .sc-mob-topbar,
  body:has(#settings-panel.open) .sc-mob-fab {
    display: none !important;
  }
  /* When the top bar is hidden, drop body's 52px padding-top so the
     modal doesn't have an empty strip at the top from leftover
     padding. The modal's own header padding handles the safe-area
     inset for the iPhone status bar. */
  body:has(#task-modal.sc-modal-overlay[style*="flex"]),
  body:has(#report-modal.sc-modal-overlay[style*="flex"]),
  body:has(#gcal-modal.sc-modal-overlay[style*="flex"]),
  body:has(#create-picker-modal.sc-modal-overlay[style*="flex"]),
  body:has(#mob-task-creator.sc-modal-overlay[style*="flex"]),
  body:has(#mob-appt-creator.sc-modal-overlay[style*="flex"]),
  body:has(#mob-report-creator.sc-modal-overlay[style*="flex"]),
  body:has(#settings-panel.open) {
    padding-top: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Creator (KBC) — design tokens & shared chrome
   ────────────────────────────────────────────────────────────────────
   Phase 2 of HANDOFF/design_handoff_creator_mobile, V1 Minimal.
   The creator owns its own full-screen sheet on mobile; .kbc-overlay
   is the dim-and-dismiss backdrop, .kbc--mobile is the sheet.
   ──────────────────────────────────────────────────────────────────── */

.kbc-overlay {
  /* Reuses .sc-modal-overlay's fixed/inset/z-index from app.css. */
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}

.kbc {
  display: flex; flex-direction: column;
  background: #fff;
  font-family: var(--font-sans);
  color: var(--fg-1, #1B232C);
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  --type-color: #2876BD;
}

/* Top bar — back arrow · type-color dot + eyebrow · close */
.kbc-top {
  display: flex; align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0) + 8px) 8px 8px;
  border-bottom: 1px solid var(--border-1, #E1E5EA);
  background: #fff;
  flex-shrink: 0;
  height: auto;
  min-height: 48px;
}
.kbc-top-back, .kbc-top-close {
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: 8px;
  color: var(--fg-2, #4A5560);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.kbc-top-back:active, .kbc-top-close:active { background: var(--neutral-100, #EFF1F4); }
.kbc-top-eyebrow {
  display: inline-flex; align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2, #4A5560);
}
.kbc-top-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--type-color);
}
.kbc-top-spacer { flex: 1; }

/* Body — scrollable */
.kbc-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 18px;
  display: flex; flex-direction: column;
  gap: 14px;
}

.kbc-title {
  width: 100%;
  border: 0; outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  padding: 0;
}
.kbc-title::placeholder {
  color: #B5BCC5;
  font-weight: 600;
}

.kbc-desc {
  width: 100%;
  border: 0; outline: 0; resize: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px; /* prevent iOS zoom */
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-2, #4A5560);
  padding: 0;
}
.kbc-desc::placeholder {
  color: var(--fg-3, #6B7785);
}

.kbc-divider {
  height: 1px;
  background: var(--border-1, #E1E5EA);
  margin: 4px -16px;
  border: 0;
}

.kbc-fields {
  display: flex; flex-direction: column;
  gap: 2px;
}

/* Field row — icon-chip + label + value + chevron + hidden native input */
.kbc-field {
  position: relative;
  display: flex; align-items: center;
  gap: 10px;
  padding: 10px 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font-sans);
}
.kbc-field:active { background: var(--neutral-50, #F5F7F8); }
.kbc-field-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3, #6B7785);
}
.kbc-field-icon svg { width: 16px; height: 16px; }
.kbc-field-label {
  width: 88px; flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3, #6B7785);
  white-space: nowrap;
}
.kbc-field-value {
  flex: 1; min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-1, #1B232C);
  text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kbc-field-value.is-empty {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3, #6B7785);
}
.kbc-field-chev {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--fg-3, #6B7785);
}
/* Hidden native input — sits on top of the row, transparent, so a
   tap on the row triggers the native picker (date / select / number). */
.kbc-field-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  background: transparent;
  font-size: 16px; /* prevents iOS zoom on focus */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Inline value pill (project / priority / status) */
.kbc-pill {
  display: inline-flex; align-items: center;
  gap: 5px;
  height: 22px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  font: 600 11.5px/1 var(--font-sans);
  background: var(--pill-bg, var(--neutral-100));
  color: var(--pill-fg, var(--fg-2));
}
.kbc-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pill-dot, currentColor);
}
.kbc-pill.pri-3 { --pill-bg: #FCE8E3; --pill-fg: #B53D2C; --pill-dot: #D4493A; }
.kbc-pill.pri-2 { --pill-bg: #FBF1D8; --pill-fg: #8E5F00; --pill-dot: #D89A1A; }
.kbc-pill.pri-1 { --pill-bg: #DCEEE2; --pill-fg: #1F6740; --pill-dot: #2E8A5A; }

/* Footer — Cancel · spacer · Create */
.kbc-foot {
  display: flex; align-items: center;
  gap: 8px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--border-1, #E1E5EA);
  background: #fff;
  flex-shrink: 0;
}
.kbc-foot-spacer { flex: 1; }
.kbc-btn {
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  border: 0;
}
.kbc-btn--ghost {
  background: transparent;
  color: var(--fg-2, #4A5560);
}
.kbc-btn--ghost:active { background: var(--neutral-100, #EFF1F4); }
.kbc-btn--primary {
  background: var(--type-color);
  color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
}
.kbc-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Block (segmented priority + URL row) ─────────────── */
/* The "PRIORITY" + "SOURCE URL" sections in the Battle Report
   creator each render as a labeled block (uppercase eyebrow above
   the control). Keeps them visually distinct from regular field
   rows — these aren't taps-to-pick, they're inline. */
.kbc-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kbc-block-label {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3, #6B7785);
}

/* Segmented priority — three equal cells, white-active with hairline. */
.kbc-segpri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 3px;
  background: var(--neutral-100, #EFF1F4);
  border-radius: 8px;
}
.kbc-segpri button {
  height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 600 12.5px/1 var(--font-sans);
  color: var(--fg-2, #4A5560);
  cursor: pointer;
}
.kbc-segpri button.is-active {
  background: #fff;
  color: var(--fg-1, #1B232C);
  box-shadow:
    0 1px 2px rgba(15, 30, 45, 0.06),
    0 0 0 1px rgba(15, 30, 45, 0.04);
}
.kbc-segpri-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* URL row — link icon + transparent input, on a tinted card. */
.kbc-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--neutral-50, #F5F7F8);
  border: 1px solid var(--border-1, #E1E5EA);
  border-radius: 8px;
}
.kbc-url-row svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--fg-3, #6B7785);
}
.kbc-url-row input {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px; /* prevents iOS zoom */
  font-weight: 500;
  color: var(--fg-1, #1B232C);
}
.kbc-url-row input::placeholder { color: var(--fg-3, #6B7785); }