:root {
  --lead-gap: 8px;
  --cal-ctl-h: 32px;
  --cal-head-h: 34px;
  --cal-date-h: 30px;
  --bg: #eceae6;
  --bg-elevated: #fdfcfa;
  --sidebar-bg: #2a2e33;
  --panel-bg: var(--bg-elevated);
  --sheet-shadow: 0 1px 2px rgba(28, 27, 25, 0.04), 0 10px 28px rgba(28, 27, 25, 0.05);
  --nav-h: 42px;
  --border-emphasis: color-mix(in srgb, var(--text-faint) 75%, var(--border-strong));
  --icon: 15px;
  --icon-sm: 12px;
  --row-h: calc(14.5px * 1.55 + 6px);
  --border: rgba(28, 27, 25, 0.08);
  --border-strong: rgba(28, 27, 25, 0.12);
  --text: #1b1d20;
  --text-muted: #5c6168;
  --text-faint: #8a8680;
  --accent: #1b1d20;
  --accent-soft: rgba(27, 29, 32, 0.06);
  --accent-contrast: #fbfaf7;
  --danger: #b5523e;
  --success: #2c7a5e;
  --cal-done: #2c7a5e;
  --tab-hover: #efece7;
  --tab-active: #f7f5f1;
  --row-hover: rgba(42, 46, 51, 0.04);
  --control-active-bg: rgba(0, 0, 0, 0.08);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-popover: 0 4px 10px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.1);
  --scrollbar: #d3d0c9;
  --checkbox-border: #b5b1a8;
  --badge-bg: var(--row-hover);
  --badge-text: var(--text-muted);
  --seg-track: color-mix(in srgb, var(--text) 5%, var(--bg-elevated));
  --seg-active: var(--bg-elevated);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --seg-track: #232321;
  --seg-active: #3a3936;
  --bg: #141413;
  --bg-elevated: #1c1c1a;
  --sidebar-bg: #141413;
  --sheet-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  --border: #2b2a27;
  --border-strong: #3c3b37;
  --text: #e9e7e2;
  --text-muted: #a6a29a;
  --text-faint: #6f6c66;
  --accent: #e9e7e2;
  --accent-soft: rgba(233, 231, 226, 0.1);
  --accent-contrast: #141413;
  --danger: #de8575;
  --success: #74b792;
  --cal-done: #74b792;
  --tab-hover: #1f1f1d;
  --tab-active: #1c1c1a;
  --row-hover: rgba(255, 255, 255, 0.04);
  --control-active-bg: rgba(255, 255, 255, 0.1);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-popover: 0 4px 14px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.4);
  --scrollbar: #3c3b37;
  --checkbox-border: #57554f;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --seg-track: #232321;
    --seg-active: #3a3936;
    --bg: #141413;
    --bg-elevated: #1c1c1a;
    --sidebar-bg: #141413;
    --sheet-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    --border: #2b2a27;
    --border-strong: #3c3b37;
    --text: #e9e7e2;
    --text-muted: #a6a29a;
    --text-faint: #6f6c66;
    --accent: #e9e7e2;
    --accent-soft: rgba(233, 231, 226, 0.1);
    --accent-contrast: #141413;
    --danger: #de8575;
    --success: #74b792;
    --cal-done: #74b792;
    --tab-hover: #1f1f1d;
    --tab-active: #1c1c1a;
    --row-hover: rgba(255, 255, 255, 0.04);
    --control-active-bg: rgba(255, 255, 255, 0.1);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-popover: 0 4px 14px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.4);
    --scrollbar: #3c3b37;
    --checkbox-border: #57554f;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.app {
  display: flex;
  width: 100vw;
  height: 100vh;
}

svg {
  display: block;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: 240px;
  min-width: 256px;
  max-width: 480px;
  background: transparent;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 10px 16px;
  flex-shrink: 0;
}

.sidebar-title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  line-height: 1;
  color: var(--text-muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  background: var(--tab-hover);
  color: var(--text);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.tab-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  min-height: 34px;
  cursor: pointer;
  user-select: none;
  color: var(--text);
  position: relative;
  min-width: 0;
}

.tab-item:hover {
  background: var(--tab-hover);
}

.tab-item.active {
  background: var(--tab-active);
  box-shadow: 0 0 0 1px var(--border-strong);
}

.tab-item.dragging {
  opacity: 0.4;
}

.tab-item.drag-over-tab {
  box-shadow: inset 0 2px 0 0 var(--text-muted);
}

.tab-item.pinned {
  font-weight: 500;
}

.tab-number {
  flex-shrink: 0;
  min-width: 17px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.tab-item.active .tab-number {
  color: var(--text-muted);
}

.pinned-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tab-divider {
  height: 0;
  margin: 6px 0;
  flex-shrink: 0;
}

/* ---------- Task Manager block (Open / Scheduled) ---------- */

.task-manager-block {
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.task-manager-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
  padding: 0 12px 6px;
}

.tab-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  outline: none;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  padding: 0;
}

.tab-name.editing {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  background: var(--row-hover);
  border-radius: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  min-width: 8px;
  text-align: center;
  flex-shrink: 0;
}

/* A checkbox glyph on a task-count badge (sidebar tabs, "All Tasks") makes
   it unmistakable that the number is tasks, not something else — e.g. the
   Structure section's own, differently-colored flagged-changes count. */
.badge svg {
  display: block;
  flex-shrink: 0;
}

.tab-delete {
  opacity: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tab-item:hover .tab-delete {
  opacity: 1;
}

.tab-delete:hover {
  color: var(--danger);
  background: var(--row-hover);
}

.add-tab-btn {
  margin: 4px 12px 8px;
  padding: 0 12px;
  min-height: 34px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: inherit;
}

.add-tab-btn:hover {
  background: var(--tab-hover);
  color: var(--text);
}

.add-tab-btn .plus {
  font-size: 15px;
  line-height: 1;
}

/* ---------- Resizer ---------- */

.resizer {
  width: 5px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
}

.resizer::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: transparent;
}

.resizer:hover::after,
.resizer.dragging::after {
  background: var(--text-muted);
  width: 2px;
  left: 1.5px;
}

/* ---------- Main (full width working area) ---------- */

.main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 24px);
  margin: 12px 12px 12px 0;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--sheet-shadow);
}

.main-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 40px 12px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Header + formatting toolbar (+ Structure tabs) are one interface layer:
   no rule between them while the toolbar is showing. */
.main-header:has(+ .toolbar:not(.hidden)) {
  border-bottom-color: transparent;
}

.main-header-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-header-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-header-controls-row .person-selector-btn,
.main-header-top-row .person-selector-btn {
  margin-left: auto;
}

/* Open Tasks: title and its All Tasks / High Priority switch side by side */
.main-header-top-row.title-with-controls {
  gap: 8px;
}

.main-header-top-row.title-with-controls .general-title {
  flex: 0 1 auto;
  margin-right: 4px;
}

.tab-title-display {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  flex: 0 1 auto;
  max-width: 240px;
  min-width: 32px;
  padding: 3px 5px;
  margin-left: -5px;
  margin-right: 4px;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-title-display:hover {
  background: var(--tab-hover);
}

.tab-title-display.editing {
  cursor: text;
  background: var(--row-hover);
  white-space: normal;
}

.general-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.main-header-top-row > .segmented-control {
  flex-shrink: 0;
}

.general-title-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

/* ---------- Archive view (full-page Back button + title) ---------- */

.archive-header-row {
  gap: 14px;
}

.archive-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-strong);
  background: var(--sidebar-bg);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}

.archive-back-btn:hover {
  background: var(--tab-hover);
}

.archive-back-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

.archive-title {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: 24px;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  white-space: pre;
}

.archive-title-tab {
  min-width: 2ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-title-sep {
  flex-shrink: 0;
  color: var(--text-faint);
}

.archive-title-view {
  flex-shrink: 0;
}

/* ---------- Shared segmented-control component ----------
   Used for both the layout switch (stacked/split) and the primary/secondary
   view switch, so the two read as one consistent design language and never
   change shape when their surrounding content changes. */

.segmented-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: none;
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 0;
}

.segmented-control.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Positioned in pixels via left/width (set from JS after layout) rather
   than a fixed CSS percentage, so the same sliding-thumb control works
   for any number of options — 2 (Workspace/Structure) or 3 (the layout
   switch) alike. */
.segmented-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 4px);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--border-strong);
  border-radius: 8px;
  transition: left 0.18s ease, width 0.18s ease;
  z-index: 0;
}

.segmented-option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 26px;
  padding: 0 13px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
  font-family: inherit;
  white-space: nowrap;
}

.segmented-option.active {
  color: var(--text);
}

.segmented-option.icon-only {
  padding: 0;
  width: 30px;
}

/* The view-switch labels are "<Section> Workspace" / "<Section> Structure"
   — dynamic per tab, so no fixed pixel width can be hardcoded for them.
   They render at natural size here; renderTabHeader() measures both after
   layout and pins them to an equal pixel width (whichever needs more
   room), which is what the 50%-wide sliding thumb needs to line up with
   either one. */
.segmented-option.view-option {
  padding: 0 14px;
}

.segmented-option svg {
  width: 13px;
  height: 13px;
}

/* ---------- Toolbar ---------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 36px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-strong);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.toolbar.hidden {
  display: none;
}

.tb-btn.hidden {
  display: none;
}

.tb-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  white-space: nowrap;
  gap: 5px;
}

.tb-btn.tb-glyph {
  font-size: 14px;
  min-width: 28px;
  padding: 0;
}

.tb-btn:hover {
  background: var(--tab-hover);
}

.tb-btn.active {
  background: var(--control-active-bg);
  color: var(--text);
  border-color: transparent;
}

/* Font color and Highlight color: a compact glyph with a thin bar of the
   currently-picked color underneath it, instead of a text label — the
   same idea for both, so the two controls read as a matched pair. */
.tb-color-btn {
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  min-width: 32px;
  height: 32px;
}

.tb-color-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.tb-color-glyph svg {
  width: 18px;
  height: 18px;
  display: block;
}

.tb-color-bar {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.tb-caret {
  font-size: 9px;
  color: var(--text-faint);
  margin-left: 1px;
}

.tb-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 5px;
  flex-shrink: 0;
}

/* ---------- Structure sub-tabs ---------- */
/* Rounded, book-style tabs below the formatting toolbar — each one a
   separate named Structure section, with its own content and markers. */

.structure-tabs-row {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: var(--nav-h);
  padding: 0 44px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.structure-tabs-row.hidden {
  display: none;
}

.structure-tabs-list {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.structure-tab-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.structure-tab-name.editing {
  outline: none;
  overflow: visible;
  cursor: text;
}

.structure-tab-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: var(--text-faint);
  opacity: 0;
  flex-shrink: 0;
  margin-right: -3px;
}

.panel-tab:hover .structure-tab-delete {
  opacity: 1;
}

.structure-tab-delete:hover {
  background: var(--control-active-bg);
  color: var(--text);
}

.structure-tab-delete svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.structure-tab-add {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  flex-shrink: 0;
}

.structure-tab-add:hover {
  background: var(--row-hover);
  color: var(--text);
}

.structure-tab-add svg {
  width: var(--icon);
  height: var(--icon);
  display: block;
}

/* Holds whichever single control belongs at the toolbar's far right for
   the current view — the layout switch in Workspace, Mark Change in
   Structure — so that control always lives in the same fixed spot
   instead of jumping between different rows depending on the view. */
.toolbar-right-slot {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* No border or fill at rest — same weight as the rest of the toolbar
   (dark text, not a muted/faded label) and the same subtle gray
   hover-background every other toolbar control uses. */
.mark-change-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}

.mark-change-link.hidden {
  display: none;
}

.mark-change-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.mark-change-link:hover {
  background: var(--tab-hover);
}

.tb-dropdown-wrap {
  position: relative;
}

.tb-dropdown {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-popover);
  padding: 10px;
  display: none;
  align-items: center;
  gap: 6px;
  z-index: 20;
}

.tb-dropdown.open {
  display: flex;
}

.tb-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  width: 11px;
  height: 11px;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

/* ---------- Text style menu (replaces the boxed select) ---------- */

.tb-menu-dropdown {
  flex-direction: column;
  align-items: stretch;
  min-width: 150px;
  gap: 2px;
}

.tb-menu-item {
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
}

.tb-menu-item:hover {
  background: var(--tab-hover);
}

/* ---------- Modern color pickers (macOS / Word style) ---------- */

.color-dropdown {
  flex-direction: column;
  align-items: stretch;
  padding: 8px;
  border-radius: 12px;
}

.color-swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 30px);
  gap: 6px;
}

.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 0;
  transition: box-shadow 0.12s ease;
}

:root[data-theme="dark"] .color-swatch {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .color-swatch {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  }
}

.color-swatch:hover,
.color-swatch:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--bg-elevated), 0 0 0 3.5px var(--text-muted);
}

.color-swatch-none {
  background: var(--bg-elevated);
  background-image: linear-gradient(
    135deg,
    transparent calc(50% - 0.75px),
    var(--text-muted) calc(50% - 0.75px),
    var(--text-muted) calc(50% + 0.75px),
    transparent calc(50% + 0.75px)
  );
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.color-swatch-custom-wrap {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  background: conic-gradient(
    from 200deg, #e05555, #e8993f, #e6cf4a, #2fa86b, #2f7de1, #8f5fe8, #d1568b, #e05555
  );
}

.color-swatch-custom-wrap:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--bg-elevated), 0 0 0 3.5px var(--text-muted);
}

.color-swatch-custom-wrap input[type="color"] {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

.tb-table-dropdown,
.tb-link-dropdown {
  flex-direction: column;
  align-items: stretch;
  min-width: 200px;
}

.tb-table-dropdown label,
.tb-link-dropdown label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-muted);
  gap: 8px;
  margin-bottom: 6px;
}

.tb-table-dropdown input,
.tb-link-dropdown input {
  padding: 4px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
}

.tb-table-dropdown input {
  width: 60px;
}

.tb-link-dropdown input {
  flex: 1;
  min-width: 0;
}

.tb-table-dropdown #insertTableBtn,
.tb-link-dropdown #insertLinkBtn {
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg-elevated);
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
}

/* ---------- Working area (full width, minimal margins) ---------- */

.main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 44px 140px 44px;
}

.main-scroll::-webkit-scrollbar,
.tab-list::-webkit-scrollbar {
  width: 9px;
}

.main-scroll::-webkit-scrollbar-thumb,
.tab-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.main-scroll::-webkit-scrollbar-track,
.tab-list::-webkit-scrollbar-track {
  background: transparent;
}

.empty-state {
  color: var(--text-faint);
  font-size: 14px;
  text-align: center;
  padding: 50px 20px;
  line-height: 1.6;
}

.empty-state .big {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
}

.no-tab-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-faint);
  font-size: 15px;
}

/* ---------- Zone headings (Tasks / Information) ---------- */

.zone-heading {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.zone-heading.info-zone {
  margin-top: 26px;
}

/* In split mode each pane starts its own column, so the Notes heading must
   not inherit the top margin meant to separate it from the Tasks section
   above it in the stacked layout — otherwise the two headings misalign. */
.split-container .zone-heading.info-zone {
  margin-top: 0;
}

.zone-heading.pane-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
}

/* ---------- Workspace: Tasks / Notes side by side ---------- */

.main-scroll.split-layout {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.split-container {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 0 44px 30px;
  /* Too narrow for both panels at their minimum: scroll, never clip. */
  overflow-x: auto;
}

@media (max-width: 1000px) {
  .split-container {
    padding: 0 20px 24px;
  }
}

.split-container .tasks-pane:not(.panel-collapsed) {
  padding-right: 24px;
}

.split-container .info-pane:not(.panel-collapsed) {
  padding-left: 24px;
}

.split-container .notes-pane {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

/* Each of the two outer panels (never the Scheduled Tasks subsection
   inside Tasks) can collapse down to a narrow edge strip — animated by
   transitioning its own width, which is why it has to be the same
   element before and after rather than rebuilt. Suppressed during a
   manual splitter drag so live resizing doesn't fight the transition. */
.workspace-panel {
  transition: width 0.22s ease;
  display: flex;
  flex-direction: column;
}

.workspace-panel.dragging-resize {
  transition: none;
}

.workspace-panel .panel-full-content {
  flex: 1;
  min-height: 0;
  min-width: 260px;
  overflow-x: hidden;
}

.split-container .workspace-panel {
  overflow-x: hidden;
}

.workspace-panel.panel-collapsed {
  overflow: hidden;
}

.workspace-panel.panel-collapsed .panel-full-content {
  display: none;
}

.workspace-panel .panel-collapsed-strip {
  display: none;
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-top: calc(var(--nav-h) + 8px);
  color: var(--text-faint);
  border-radius: 8px;
}

.workspace-panel.panel-collapsed .panel-collapsed-strip {
  display: flex;
}

.panel-collapsed-strip:hover {
  background: var(--row-hover);
  color: var(--text);
}

.panel-collapsed-strip svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.panel-collapsed-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Two horizontal tabs (or, for Notes, a single static one) sharing the
   panel heading's own bottom rule — the active tab's underline sits on
   top of it. */
.zone-heading.panel-tabs-heading {
  height: var(--nav-h);
  align-items: flex-end;
  padding-bottom: 0;
  border-bottom-color: var(--border);
  gap: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.panel-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--lead-gap);
  padding: 5px 9px 7px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  white-space: nowrap;
}

.panel-tab svg {
  width: var(--icon);
  height: var(--icon);
  flex-shrink: 0;
}

.panel-tab:hover {
  color: var(--text-muted);
  background: var(--row-hover);
}

.panel-tab.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--text);
}

.panel-tab.active:not([tabindex="-1"]) {
  cursor: default;
}

.panel-tab[tabindex="-1"] {
  cursor: default;
}

.panel-tab[tabindex="-1"]:hover {
  background: transparent;
  color: var(--text);
}

.panel-heading-spacer {
  flex: 1;
}

.panel-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 5px;
  flex-shrink: 0;
}

.panel-expand-btn:hover,
.panel-expand-btn.active {
  color: var(--text);
  background: var(--row-hover);
}

.zone-heading.panel-tabs-heading .history-toggle-btn {
  margin-bottom: 4px;
}

.pane-splitter {
  margin-top: 0;
  width: 9px;
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
}

.pane-splitter::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  transition: background 0.12s;
}

.pane-splitter:hover::after,
.pane-splitter.dragging::after {
  background: var(--text-muted);
  width: 2px;
  left: 3.5px;
}

/* ---------- Task rows (fixed Tasks block) ---------- */

.block-row {
  position: relative;
  display: flex;
  /* Rows can grow to several lines (multi-line notes); children must anchor
     to the top so the gutter icon lines up with the first line only, never
     centered across the whole block. */
  align-items: flex-start;
  gap: var(--lead-gap);
  padding: 2px 6px 2px 4px;
  min-height: calc(var(--row-h) + 4px);
  box-sizing: border-box;
  border-radius: 6px;
  transition: background 1.6s ease-out;
}

.block-row:hover {
  background: var(--row-hover);
}

.gutter {
  width: var(--icon);
  flex-shrink: 0;
  /* Same box as one line of .editable-text (3px padding above and below a
     14.5px/1.55 line box), so centering inside it lines the icon up with the
     first line's own center. */
  height: var(--row-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-checkbox {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.6px solid var(--text-muted);
  background: var(--bg-elevated);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}

.task-checkbox:hover {
  border-color: var(--text);
}

.task-checkbox:checked {
  background: var(--text);
  border-color: var(--text);
}

.task-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid var(--bg-elevated);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.note-bullet {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.task-done .note-bullet {
  background: var(--text-faint);
}

.recur-slot {
  flex-shrink: 0;
  width: var(--icon);
  height: var(--row-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recur-icon {
  flex-shrink: 0;
  width: var(--icon);
  height: var(--icon);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.9;
}

.recur-icon:hover {
  opacity: 1;
  color: var(--text);
}

.recur-icon svg {
  width: 100%;
  height: 100%;
}

.task-schedule-line {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

.recur-next-hint {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
}

/* Stands in for the checkbox on a repeating task's own row — it isn't a
   control (occurrences are only completed from the Calendar), just a
   status indicator, so it's a plain dot rather than something clickable. */
.recur-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}

.recur-status-dot.overdue {
  background: var(--danger);
}

.task-text-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.task-title-row {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.completion-meta {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
  position: relative;
  top: -2px;
  margin-left: 3px;
  white-space: nowrap;
  padding-top: 4px;
  cursor: default;
}

.editable-text {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.55;
  outline: none;
  word-break: break-word;
  padding: 3px 2px 3px 0;
  /* Anchors floating (behind/in front of text) image attachments, whose
     left/top are positioned relative to this container. The explicit
     z-index (not just position) makes this field its own stacking
     context, so a "behind text" image is scoped to sitting behind this
     field's own text specifically — not behind unrelated sibling panels
     elsewhere on the page, which a bare position:relative wouldn't stop. */
  position: relative;
  z-index: 0;
}

.editable-text ul,
.editable-text ol {
  padding-left: 22px;
  margin: 4px 0;
}

.editable-text ul {
  list-style: disc outside;
}

.editable-text ol {
  list-style: decimal outside;
}

.editable-text li {
  margin: 2px 0;
}

.editable-text table {
  border-collapse: collapse;
  margin: 8px 0;
}

.editable-text table td,
.editable-text table th {
  border: 1px solid var(--border-strong);
  padding: 6px 10px;
  min-width: 60px;
  font-size: 14px;
  vertical-align: top;
}

.editable-text a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
}

.task-done .editable-text {
  color: var(--text-faint);
}

/* Fixed grid of action slots: every row reserves the same width and each
   icon has its own column, so showing/hiding icons never changes the row's
   height, the text width, or where any icon sits. */
.row-actions {
  display: grid;
  grid-template-columns: repeat(4, 24px);
  align-items: center;
  height: var(--row-h);
  gap: 0;
  flex-shrink: 0;
  margin-left: 4px;
  opacity: 0;
}

.note-row .row-actions {
  grid-template-columns: repeat(3, 24px);
}

.row-actions > * {
  grid-row: 1;
}

.block-row:hover .row-actions,
.row-dragging .row-actions {
  opacity: 1;
}

.row-recur-btn,
.block-remove,
.row-drag-handle {
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.row-drag-handle {
  grid-column: 1;
  cursor: grab;
  touch-action: none;
}

.row-drag-handle:hover {
  color: var(--text);
  background: var(--row-hover);
}

.row-drag-handle svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}

.row-priority-btn {
  grid-column: 2;
}

.row-recur-btn:not(.row-priority-btn) {
  grid-column: 3;
}

.block-remove {
  grid-column: 4;
}

.note-row .row-recur-btn {
  grid-column: 2;
}

.note-row .block-remove {
  grid-column: 3;
}

/* ---------- Drag-to-reorder ---------- */

.row-shifting {
  transition: transform 0.18s ease, background 1.6s ease-out;
}

.row-dragging {
  z-index: 6;
  background: var(--bg-elevated);
  /* Panes clip horizontal overflow, so the outline is drawn inside the row and
     the lift shadow is pulled in (negative spread) to stay fully visible. */
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 8px 14px -8px rgba(0, 0, 0, 0.28);
  transition: none;
}

.row-dragging.row-settling {
  transition: transform 0.16s ease;
}

body.row-reordering,
body.row-reordering * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.row-recur-btn:hover {
  color: var(--text);
  background: var(--row-hover);
}

.row-recur-btn svg {
  width: var(--icon);
  height: var(--icon);
}

.block-remove {
  font-size: 12px;
}

.block-remove:hover {
  color: var(--danger);
  background: var(--row-hover);
}

@keyframes flashHighlight {
  0% {
    background: var(--row-hover);
  }
  100% {
    background: transparent;
  }
}

.flash-highlight {
  animation: flashHighlight 1.8s ease-out;
}

/* ---------- Add task row ---------- */

.add-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 0;
  margin-bottom: 4px;
}

.add-task-plus {
  width: 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 15px;
  flex-shrink: 0;
}

.add-task-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--text);
  padding: 4px 2px;
}

.add-task-input::placeholder {
  color: var(--text-faint);
}

.cal-add-task-row {
  margin-bottom: 4px;
}

.cal-add-task-tab-select {
  flex-shrink: 0;
  width: 190px;
  max-width: 45%;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  padding: 3px 4px;
  cursor: pointer;
}

.cal-add-task-tab-select:hover {
  background: var(--row-hover);
  color: var(--text);
}

/* A category is required before a scheduled task can be created — pressing
   Enter with none selected flashes this instead of silently doing nothing. */
@keyframes select-invalid-flash {
  0%, 100% { border-color: transparent; background: transparent; }
  25%, 75% { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); }
}

.invalid-flash {
  animation: select-invalid-flash 0.4s ease-in-out 2;
}

/* ---------- Information field (Word-like, continuous) ---------- */

.info-field {
  min-height: 280px;
  padding: 10px 2px;
}

.info-field:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
}

/* ---------- Drag-and-drop insertion indicator ----------
   No cursor/line is shown. Instead a single invisible inline spacer is
   inserted right at the snapped word boundary and animated from 0 width up
   to its target width, so the words on either side physically part to make
   room — an iOS-style "make space" cue instead of a static caret mark. */

.dnd-word-gap {
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: -0.15em;
  transition: width 0.16s cubic-bezier(0.32, 1.15, 0.6, 1);
}

/* ---------- File attachment chips ---------- */

.file-attachment {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin: 0 2px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
}

.file-attachment:hover {
  color: var(--text);
  background: var(--row-hover);
}

.file-attachment.dnd-source {
  opacity: 0.35;
}

/* An image attachment must always render at full opacity — dimming makes
   sense for a small icon chip mid-drag, but not for a visible photo, and
   it must look identical no matter which wrap mode it's in. */
.file-attachment-image,
.file-attachment-image.dnd-source {
  opacity: 1;
}

.file-attachment svg {
  width: 19px;
  height: 19px;
}

.file-ext-label {
  position: absolute;
  right: -3px;
  bottom: -3px;
  font-size: 6.5px;
  font-weight: 800;
  line-height: 1;
  padding: 1.5px 2.5px;
  border-radius: 3px;
  background: var(--text);
  color: var(--bg-elevated);
  letter-spacing: 0.01em;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.file-attachment-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.1s, transform 0.1s;
  transform: scale(0.85);
}

.file-attachment-delete svg {
  width: 8px;
  height: 8px;
}

.file-attachment:hover .file-attachment-delete {
  opacity: 1;
  transform: scale(1);
}

.attachment-mode-toggle {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-muted);
  color: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.1s, transform 0.1s;
  transform: scale(0.85);
}

.attachment-mode-toggle:hover {
  background: var(--text);
}

.attachment-mode-toggle svg {
  width: 8px;
  height: 8px;
}

.file-attachment:hover .attachment-mode-toggle {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Image attachments: inline or floating, resizable ---------- */

.file-attachment-image {
  width: auto;
  height: auto;
  min-width: 60px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  margin: 2px 4px;
  cursor: default;
}

.file-attachment-image:hover {
  background: transparent;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.file-attachment-image.wrap-behind,
.file-attachment-image.wrap-front {
  cursor: grab;
  margin: 0;
}

.file-attachment-image.wrap-behind:active,
.file-attachment-image.wrap-front:active {
  cursor: grabbing;
}

.attachment-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--row-hover);
  min-height: 24px;
  pointer-events: none;
  -webkit-user-drag: none;
}

.attachment-resize-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-elevated);
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.1s;
}

.file-attachment-image:hover .attachment-resize-handle {
  opacity: 1;
}

.file-attachment-image .file-attachment-delete {
  top: -7px;
  right: -7px;
}

.attachment-options-menu {
  position: fixed;
  z-index: 60;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-popover);
  padding: 6px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.attachment-menu-item {
  text-align: left;
  padding: 7px 9px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  font-family: inherit;
}

.attachment-menu-item:hover {
  background: var(--tab-hover);
}

.attachment-menu-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.attachment-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 5px 2px;
}

.attachment-menu-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 4px 9px 2px;
}

.search-match-highlight {
  background: var(--control-active-bg);
  border-radius: 2px;
  animation: searchMatchFade 2.2s ease-out forwards;
}

@keyframes searchMatchFade {
  0%,
  60% {
    background: var(--control-active-bg);
  }
  100% {
    background: transparent;
  }
}

.attach-hint-tooltip {
  position: fixed;
  background: var(--text);
  color: var(--bg-elevated);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 7px;
  box-shadow: var(--shadow-popover);
  pointer-events: none;
  z-index: 600;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.attach-hint-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Completed section ---------- */

/* A single discreet icon (tucked into the Tasks heading itself, not on its
   own line) hides Completed tasks + Recurring history so they never take up
   permanent space in the working area. */
.history-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}

.history-toggle-btn:hover,
.history-toggle-btn.open {
  color: var(--text);
  background: var(--tab-hover);
}

.history-toggle-btn svg {
  width: var(--icon);
  height: var(--icon);
}

.history-subsection-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin: 10px 0 4px;
}

.history-subsection-label:first-child {
  margin-top: 2px;
}

/* ---------- General / Recurring aggregate views ---------- */

.general-section {
  margin-bottom: 18px;
}

.general-section:last-child {
  margin-bottom: 0;
}

.general-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.general-task-row {
  display: flex;
  align-items: flex-start;
  gap: var(--lead-gap);
  padding: 4px 4px;
  border-radius: 6px;
}

.general-task-row:hover {
  background: var(--row-hover);
}

.general-task-row .task-checkbox {
  margin-top: 3.75px;
}

.general-task-text {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
  word-break: break-word;
  display: flex;
  align-items: flex-start;
  gap: var(--lead-gap);
}

.general-task-text .recur-icon {
  margin-top: 3.75px;
}

.general-task-text:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
}

/* ---------- Recurrence / reminder popover ---------- */

.recur-popover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 260;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-popover);
  padding: 12px 14px;
  width: 270px;
  display: none;
  flex-direction: column;
  gap: 10px;
}

.recur-popover.open {
  display: flex;
}

.recur-popover-arrow {
  position: absolute;
  top: -6px;
  left: 20px;
  width: 11px;
  height: 11px;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

.recur-mode-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 8px;
  padding: 3px;
}

.recur-mode-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}

.recur-mode-btn.active {
  background: var(--control-active-bg);
  color: var(--text);
}

.recur-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.recur-month-warn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid #c9862f;
  border-radius: 6px;
  background: var(--sidebar-bg);
  font-size: 12px;
  color: var(--text);
}

.recur-month-warn-title {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-weight: 600;
  line-height: 1.35;
}

.recur-month-warn-title svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #c9862f;
}

.recur-radio {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--text-muted);
}

.recur-radio input {
  margin: 0;
  accent-color: var(--accent);
}

.recur-fields,
.recur-once-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recur-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.recur-num {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  /* Safari's native number-input spinner is a large, permanently-visible
     split up/down control (unlike Chrome's minimal hover-only one) — drop
     it everywhere so the field looks identical across browsers. */
  -moz-appearance: textfield;
  appearance: textfield;
}

.recur-num::-webkit-outer-spin-button,
.recur-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.recur-select,
.recur-time {
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
}

/* A day/month/year trio, always in that fixed order — used anywhere a
   date needs entering, instead of a native <input type="date">, whose
   displayed field order follows the browser/OS locale rather than
   anything this app controls, and silently becomes mm/dd/yyyy for a
   us-locale browser no matter what lang/pattern is set on it. */
.dmy-input-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.dmy-part {
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  text-align: center;
  padding: 4px 2px;
}

.dmy-part::-webkit-outer-spin-button,
.dmy-part::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dmy-day,
.dmy-month {
  width: 32px;
}

.dmy-year {
  width: 50px;
}

.dmy-sep {
  color: var(--text-faint);
  font-weight: 600;
}

.recur-select {
  /* Safari (macOS) draws native <select> elements with its own chunky
     up/down arrow glyph instead of Chrome's slim chevron. Supply one
     consistent thin-line chevron ourselves so the control matches the
     app's icon language in every browser. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 24px;
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .recur-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9892' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .recur-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9892' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

.recur-weekdays {
  gap: 4px;
}

.recur-day {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}

.recur-day.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg-elevated);
}

.recur-lead-row {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 2px;
}

.recur-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}

.recur-remove-btn,
.recur-save-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
}

.recur-remove-btn {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
}

.recur-remove-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.recur-save-btn {
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg-elevated);
}

/* ---------- Search modal ---------- */

.search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 200;
  padding-top: 12vh;
}

.search-modal-overlay.open {
  display: flex;
}

.search-modal {
  width: 560px;
  max-width: calc(100vw - 40px);
  max-height: 60vh;
  background: var(--bg-elevated);
  border-radius: 14px;
  box-shadow: var(--shadow-popover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.search-input-icon {
  display: flex;
  align-items: center;
  color: var(--text-faint);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
}

.search-input::placeholder {
  color: var(--text-faint);
}

.search-results {
  overflow-y: auto;
  padding: 6px;
}

.search-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13.5px;
}

.search-result-row {
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.search-result-row:hover {
  background: var(--row-hover);
}

.search-result-kind {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-right: 8px;
}

.search-result-tab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.search-result-snippet {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-result-snippet mark {
  background: var(--control-active-bg);
  color: var(--text);
  border-radius: 2px;
}

/* ---------- Export modal ---------- */

.export-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.export-modal-overlay.open {
  display: flex;
}

.export-modal {
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: 84vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border-radius: 14px;
  box-shadow: var(--shadow-popover);
  padding: 22px 22px 18px;
}

/* Export dialog: fixed header, scrolling middle, fixed footer — the frame
   itself never changes size or position. */
.export-handoff-modal {
  display: flex;
  flex-direction: column;
  height: min(640px, calc(100vh - 40px));
  max-height: none;
  overflow: hidden;
  padding: 0;
}

.export-fixed-top {
  flex-shrink: 0;
  padding: 22px 22px 4px;
  border-bottom: 1px solid var(--border);
}

.export-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 22px 4px;
}

.export-handoff-modal .export-tabs-list {
  max-height: none;
  overflow: visible;
}

.export-handoff-modal .export-modal-actions.export-fixed-bottom {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--border);
}

.export-modal h3 {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.export-section {
  margin-bottom: 18px;
}

.export-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.export-handover-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text);
}

.export-handover-from {
  font-weight: 600;
  white-space: nowrap;
}

.export-handover-arrow {
  color: var(--text-faint);
}

.export-select {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

.export-choice-row {
  display: flex;
  gap: 8px;
}

.export-choice-btn {
  flex: 1;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.export-choice-btn.active {
  border-color: var(--text);
  background: var(--control-active-bg);
  color: var(--text);
}

.export-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}

.export-sort-row {
  position: relative;
  padding-left: 2px;
}

.export-sort-row .row-drag-handle {
  flex-shrink: 0;
}

.export-drag-spacer {
  width: 24px;
  flex-shrink: 0;
}

.export-attach-row {
  padding-left: 2px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 7px 7px;
}

.export-inline-note {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
}

.export-check-row:hover {
  background: var(--row-hover);
}

.export-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.export-label-row .export-label {
  margin-bottom: 0;
}

.export-toggle-all-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  font-family: inherit;
}

.export-toggle-all-btn:hover {
  color: var(--text);
  text-decoration: underline;
}

.export-tabs-list {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}

.export-tab-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
}

.export-tab-check-row:hover {
  background: var(--row-hover);
}

.export-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.export-cancel-btn,
.export-confirm-btn {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.export-cancel-btn {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
}

.export-cancel-btn:hover {
  background: var(--row-hover);
  color: var(--text);
}

.export-confirm-btn {
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg-elevated);
}

/* ---------- Current person / shift selector ---------- */

.person-selector-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  max-width: 200px;
  flex-shrink: 0;
}

.person-selector-btn:hover {
  background: var(--row-hover);
}

.person-selector-btn .person-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-selector-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.person-popover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-popover);
  padding: 8px;
  width: 240px;
  display: none;
  flex-direction: column;
  gap: 4px;
}

.person-popover.open {
  display: flex;
}

.person-popover-arrow {
  position: absolute;
  top: -6px;
  right: 20px;
  width: 11px;
  height: 11px;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

.person-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.person-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
}

.person-row:hover {
  background: var(--row-hover);
}

.person-row.active {
  background: var(--control-active-bg);
  color: var(--text);
  font-weight: 600;
}

.person-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-row-delete {
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 5px;
  opacity: 0;
  flex-shrink: 0;
}

.person-row:hover .person-row-delete {
  opacity: 1;
}

.person-row-delete:hover {
  color: var(--danger);
  background: var(--row-hover);
}

.person-add-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.person-add-row input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
}

/* ---------- Shift handover ---------- */

.handover-now {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.handover-parties {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.handover-parties-arrow {
  color: var(--text-faint);
  font-weight: 400;
}

/* A shift boundary in the Completed Tasks archive: everything above it
   was completed in the new shift, everything below in the previous one.
   A thin rule with the label inline — deliberately quiet next to the
   task rows around it, not a filled block competing with them. */
.handover-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 16px 0;
  box-sizing: border-box;
}

.handover-divider-line {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--border-strong);
}

.handover-divider-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-faint);
}

.handover-divider-icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.handover-divider-text {
  flex-shrink: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
}

.handover-divider-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 5px;
  flex-shrink: 0;
}

.handover-divider-delete:hover {
  background: var(--row-hover);
  color: var(--danger);
}

.handover-divider-delete svg {
  width: 10px;
  height: 10px;
  display: block;
}

.person-add-row button {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg-elevated);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
}

/* ---------- Storage usage indicator ---------- */

.storage-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px 8px;
  flex-shrink: 0;
}

.storage-usage-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 6px 9px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-size: 11.5px;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  text-align: left;
  flex-shrink: 0;
}

.storage-usage-btn:hover {
  background: var(--tab-hover);
  color: var(--text-muted);
}

.storage-usage-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.storage-usage-icon svg {
  width: 12px;
  height: 12px;
}

.storage-usage-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Attached files list modal ---------- */

.files-modal-total {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.files-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 16px;
}

.files-list-empty {
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
  padding: 24px 10px;
}

.files-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 7px;
}

.files-list-row:hover {
  background: var(--row-hover);
}

.files-list-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.files-list-icon svg {
  width: 16px;
  height: 16px;
}

.files-list-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text);
}

.files-list-size {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--text-faint);
}

.files-list-delete {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
}

.files-list-delete:hover {
  color: var(--danger);
  background: var(--row-hover);
}

/* ---------- Calendar ---------- */

.icon-btn.active {
  background: var(--tab-hover);
  color: var(--text);
}

.cal-controls-row {
  justify-content: flex-start;
  gap: 14px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-today-btn {
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  height: var(--cal-ctl-h);
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 4px;
}

.cal-today-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.cal-nav-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  width: var(--cal-ctl-h);
  height: var(--cal-ctl-h);
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal-nav-btn:hover {
  background: var(--tab-hover);
  color: var(--text);
}

.cal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-left: 6px;
  white-space: nowrap;
  /* keeps the Month / Week / Day switch from jumping as the title changes */
  min-width: 150px;
}

.categories-label {
  margin-top: 4px;
}

.cal-view-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: none;
  border-radius: 10px;
  height: var(--cal-ctl-h);
  padding: 3px;
  flex-shrink: 0;
}

.cal-view-switch button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  height: 100%;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
}

.cal-view-switch button.active {
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--border-strong);
  color: var(--text);
}

.main-scroll.calendar-layout {
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}

.calendar-view {
  padding: 20px 40px 0;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.cal-month-grid.cal-panel {
  display: block;
  max-width: 860px;
  width: 100%;
}

.cal-panel-body {
  padding: 6px 8px 8px;
}

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cal-weekday-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cal-head-h);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow: hidden;
  white-space: nowrap;
  color: var(--text-muted);
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.cal-date-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cal-date-h);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cal-date-strip.today .cal-date-label {
  background: var(--text);
  color: var(--bg-elevated);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 700;
}

.cal-date-strip.has-overdue:not(.today) {
  color: var(--danger);
}

.cal-date-strip.has-overdue.today .cal-date-label {
  background: var(--danger);
  color: #fff;
}

.cal-month-grid > .cal-weekday-header:not(:nth-child(7n)),
.cal-month-grid > .cal-date-strip:not(:nth-child(7n)) {
  border-right: 1px solid var(--border);
}

.cal-day-cell {
  height: 132px;
  overflow: hidden;
  padding: 7px 7px 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.12s;
}

.cal-day-cell:hover {
  background: var(--row-hover);
}

.cal-day-cell.cal-drop-target {
  background: var(--tab-hover);
  box-shadow: inset 0 0 0 2px var(--text-muted);
}

.cal-day-cell:nth-child(7n) {
  border-right: none;
}

.cal-day-cell.other-month {
  background: color-mix(in srgb, var(--bg) 40%, var(--bg-elevated));
}

.cal-day-cell.other-month .cal-day-number {
  color: var(--text-faint);
}

.cal-day-number {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cal-day-cell.today .cal-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg-elevated);
}

/* A day that ends with something triggered and still incomplete stays
   flagged this way regardless of month-view chip limits — an inset
   outline rather than a border, so it doesn't disturb the grid's own
   shared cell borders. */
.cal-day-cell.has-overdue {
  box-shadow: inset 0 0 0 1.5px var(--danger);
}

.cal-day-cell.has-overdue .cal-day-number {
  color: var(--danger);
}

.cal-day-cell.has-overdue.today .cal-day-number {
  background: var(--danger);
  color: #fff;
}

.cal-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cal-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: var(--row-hover);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  min-width: 0;
  text-align: left;
}

.cal-chip:hover {
  background: var(--control-active-bg);
}

.cal-chip-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.cal-chip-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  stroke-width: 2.4;
}

.cal-chip-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-chip-time {
  flex-shrink: 0;
  color: var(--text-faint);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Status: gray/neutral (not due yet) is the plain default look above;
   red once the reminder's own moment has passed and it's still open —
   no matter how long ago — green once it's done. */
.cal-chip.status-overdue {
  background: color-mix(in srgb, var(--danger) 18%, var(--row-hover));
}

.cal-chip.status-overdue .cal-chip-icon,
.cal-chip.status-overdue .cal-chip-time {
  color: var(--danger);
}

.cal-chip.status-done {
  opacity: 0.85;
}

.cal-chip.status-done .cal-chip-icon {
  color: var(--cal-done);
}

.cal-more-link {
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  cursor: pointer;
  text-align: left;
}

.cal-more-link:hover {
  color: var(--text-muted);
}

.cal-week-grid {
  grid-template-rows: var(--cal-head-h) var(--cal-date-h) 1fr;
  flex: 1 0 auto;
}

.cal-week-cell {
  height: auto;
  min-height: 240px;
  overflow: visible;
  border-bottom: none;
}

.cal-day-agenda {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-agenda-row {
  display: flex;
  align-items: center;
  gap: var(--lead-gap);
  padding: 8px 10px;
  border-radius: 8px;
}

.cal-agenda-row:hover {
  background: var(--row-hover);
}

.cal-agenda-row.status-overdue .cal-agenda-time,
.cal-agenda-row.status-overdue .recur-icon {
  color: var(--danger);
}

.cal-agenda-row.status-done .recur-icon {
  color: var(--cal-done);
}

/* The clock/bell status glyphs are the primary way to tell gray, red and
   green states apart in the calendar — bigger and bolder than the same
   icon elsewhere in the app so that distinction reads clearly at a glance. */
.cal-agenda-row .recur-icon,
.cal-day-agenda .recur-icon {
  width: var(--icon);
  height: var(--icon);
}

.cal-agenda-row .recur-icon svg,
.cal-day-agenda .recur-icon svg {
  stroke-width: 2.4;
}

.cal-agenda-time {
  flex-shrink: 0;
  width: 52px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}


.cal-agenda-text {
  flex: 1;
}

.cal-agenda-tab {
  flex-shrink: 0;
  align-self: center;
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
  background: var(--badge-bg);
  padding: 2px 7px;
  border-radius: 6px;
}

/* ---------- Change markers (Structure) ---------- */

/* A quiet trailing indicator — a colored dot and the number, sitting in
   the row's own flow (no floating corner badge). Shared by every
   remaining counter in the app: All Tasks in the sidebar, and Structure's
   unread-changes count, so they read as the same kind of thing. */
.minimal-counter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.minimal-counter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
  flex-shrink: 0;
}

/* Scheduled Tasks' own counter — red rather than green, since its number
   is "how many things are overdue right now", not a neutral count. */
.minimal-counter-danger {
  color: var(--danger);
}

.minimal-counter-danger .minimal-counter-dot {
  background: var(--danger);
}

.structure-jump-counter {
  cursor: pointer;
}

/* A marked change is one clean green container around the whole marked
   text: the same green as the counter and the NEW tag, as a thin, soft border and a
   faint tint fill. It is an inline-block so a phrase, a wrapped
   sentence or a whole line is a single rounded rectangle rather than
   per-line fragments; the top margin reserves the room the NEW tag sits in,
   so the tag never covers neighbouring text. */
.change-marker {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  vertical-align: baseline;
  margin: 10px 2px 1px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--success) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--success) 7%, transparent);
}

.change-marker.resolved {
  border-color: var(--text-faint);
  background: var(--row-hover);
}

/* Text marked across several paragraphs: the per-paragraph pieces are
   full-width blocks that butt against each other, so together they read as
   one container — only the first piece has a top edge, only the last a
   bottom edge. */
.change-marker.marker-block {
  display: block;
  margin: 0;
}

.change-marker.marker-block.marker-start {
  margin-top: 10px;
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.change-marker.marker-block.marker-mid {
  border-top-width: 0;
  border-bottom-width: 0;
  border-radius: 0;
}

.change-marker.marker-block.marker-end {
  margin-bottom: 1px;
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Marked text through several blocks (bullets, table cells, paragraphs): the
   pieces carry no box of their own. One frame is drawn around the whole area
   by layoutMarkerFrames, in a layer that never touches the saved text. */
.info-wrap {
  position: relative;
}

.marker-frames {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.marker-frame {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--success) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--success) 6%, transparent);
}

.marker-frame.resolved {
  border-color: var(--text-faint);
  background: var(--row-hover);
}

.marker-frame .change-marker-tag {
  pointer-events: auto;
}

.change-marker.marker-multi {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.change-marker-tag {
  position: absolute;
  top: -10px;
  left: 8px;
  background: var(--success);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1.5px 5px;
  border-radius: 999px;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  /* .editable-text sets word-break: break-word for ordinary long-word
     wrapping, which this absolutely-positioned tag inherits. If the marked
     selection happens to cross a block boundary, the tag's computed
     containing block can end up razor-thin, and that inherited break mode
     then splits "NEW"/"READ" one letter per line. It's three fixed
     characters that must never wrap, so both are reset explicitly. */
  white-space: nowrap;
  word-break: normal;
}

.change-marker.resolved .change-marker-tag {
  background: var(--text-faint);
}

/* This popover doesn't anchor to the marked text (it always opens in a
   fixed spot below the toolbar and can be dragged anywhere), so it needs
   its own fixed width plus room to grow downward — and, being a flex
   column, its direct children need min-width: 0 or a long unbroken
   comment can force the whole card wider than its own border instead of
   wrapping inside it. */
.marker-popover {
  width: 300px;
}

#markerCreateFields,
#markerViewFields {
  min-width: 0;
}

.marker-popover-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -12px -14px 10px;
  padding: 7px 8px 7px 12px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border);
  border-radius: 11px 11px 0 0;
  cursor: grab;
  user-select: none;
}

.marker-popover-handle:active {
  cursor: grabbing;
}

.marker-popover-grip {
  display: flex;
  align-items: center;
  color: var(--text-faint);
}

.marker-popover-grip svg {
  width: 13px;
  height: 13px;
}

.marker-popover-close {
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-popover-close:hover {
  background: var(--row-hover);
  color: var(--text);
}

.marker-field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin: -8px 0 1px;
}

.marker-field-hint {
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 13px;
}

.marker-field-error {
  font-size: 11.5px;
  color: var(--danger);
  margin-top: 5px;
}

.marker-field-error[hidden] {
  display: none;
}

.marker-comment-input {
  width: 100%;
  min-height: 64px;
  max-height: 45vh;
  resize: vertical;
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.marker-view-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.marker-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg-elevated);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.marker-who {
  font-weight: 700;
  color: var(--text);
  font-size: 12px;
}

.marker-when {
  color: var(--text-faint);
  font-size: 10.5px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.marker-view-body {
  color: var(--text);
  line-height: 1.5;
  font-size: 12.5px;
  /* The textarea's newlines (Shift+Enter) are real \n characters in
     marker.comment — pre-wrap renders them as line breaks instead of
     collapsing them, while still wrapping normally at the edge. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  max-height: 45vh;
  overflow-y: auto;
}

/* High Priority */
.priority-high .task-checkbox {
  border-color: var(--danger);
  border-width: 2px;
}

.priority-high .task-checkbox:hover {
  border-color: var(--danger);
}

.priority-high .task-checkbox:checked {
  background: var(--danger);
}

.priority-high .recur-status-dot {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  align-self: center;
  margin-right: var(--lead-gap);
  padding: 1px 6px 1px 4px;
  border: 1px solid var(--danger);
  border-radius: 999px;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.priority-badge svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.priority-badge.static {
  cursor: inherit;
  vertical-align: 1px;
}

.row-priority-btn.active {
  color: var(--danger);
}

.row-priority-btn.active svg {
  fill: currentColor;
}


/* ---------- Toast, confirm dialog, task detail ---------- */

.app-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  background: var(--text);
  color: var(--bg-elevated);
  border-radius: 10px;
  box-shadow: var(--shadow-popover);
  font-size: 13px;
  transition: opacity 0.16s, transform 0.16s;
}

.app-toast.open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.app-toast-action {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
}

.app-toast-action:hover {
  background: rgba(127, 127, 127, 0.25);
}

.app-toast-close {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  border-radius: 5px;
}

.app-toast-close:hover {
  opacity: 1;
}

.app-toast-close svg {
  width: 12px;
  height: 12px;
}

.confirm-overlay {
  z-index: 320;
}

.confirm-modal {
  width: 440px;
}

.confirm-title {
  margin: 0 0 12px;
}

.confirm-what {
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.confirm-effects-wrap {
  margin-bottom: 12px;
}

.confirm-effects-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.confirm-effects {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.confirm-permanence {
  font-size: 12.5px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--badge-bg);
  color: var(--text-muted);
  margin-bottom: 14px;
}

.confirm-permanence.is-permanent {
  background: rgba(224, 85, 85, 0.12);
  color: var(--danger);
  font-weight: 600;
}

.export-confirm-btn.confirm-danger-btn {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.task-detail-overlay {
  z-index: 240;
}

.task-detail-modal {
  width: 520px;
  padding: 18px 22px 16px;
}

.td-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.td-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.td-close {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  display: inline-flex;
}

.td-close:hover {
  background: var(--row-hover);
  color: var(--text);
}

.td-close svg {
  width: 14px;
  height: 14px;
}

.td-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 14px;
}

.td-badge-slot {
  display: contents;
}

.td-badge-slot .priority-badge {
  margin-top: 5px;
}

.td-title-field {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 6px;
  margin-left: -6px;
  border-radius: 6px;
  border: 1px solid transparent;
  outline: none;
  overflow-wrap: anywhere;
}

.td-title-field:hover {
  border-color: var(--border);
}

.td-title-field:focus {
  border-color: var(--accent);
  background: var(--bg);
}

.td-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}

.td-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  padding-top: 4px;
}

.td-value {
  min-width: 0;
}

.td-schedule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.td-schedule-primary {
  font-size: 14px;
  font-weight: 700;
}

.td-schedule-secondary {
  font-size: 12px;
  color: var(--text-faint);
}

.td-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.td-inline-btn:hover {
  background: var(--row-hover);
  color: var(--text);
}

.td-inline-btn svg {
  width: 13px;
  height: 13px;
}

.td-priority-btn {
  margin-top: 0;
}

.td-priority-btn.active {
  color: var(--danger);
  border-color: var(--danger);
}

.td-priority-btn.active svg {
  fill: currentColor;
}

.td-check {
  display: flex;
  align-items: center;
  gap: var(--lead-gap);
  font-size: 13.5px;
  cursor: pointer;
  padding-top: 2px;
}

.td-check.status-overdue {
  color: var(--danger);
}

.td-check.status-done {
  color: var(--cal-done);
}

.td-select {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  max-width: 100%;
}

.td-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.td-footer-spacer {
  flex: 1;
}

.td-delete-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
}

.td-delete-btn:hover {
  background: rgba(224, 85, 85, 0.1);
}

.cal-panel > .cal-weekday-header {
  border-right: none;
}

.general-task-text .priority-badge {
  margin-right: 0;
}

.note-row .gutter {
  margin-right: calc(var(--lead-gap) - 13px);
}

/* ---------- Shared icon size ----------
   Every ordinary UI icon (nav, tabs, toolbar, row actions, calendar
   status glyphs) uses one size so they line up across the app. */
.pinned-icon svg,
.icon-btn svg,
.panel-tab svg,
.panel-expand-btn svg,
.person-selector-icon svg,
.tb-btn svg,
.row-recur-btn svg,
.history-toggle-btn svg,
.recur-icon svg {
  width: var(--icon);
  height: var(--icon);
  display: block;
  flex-shrink: 0;
}

.block-remove svg,
.tab-delete svg,
.storage-usage-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* ---------- App banner (save failures, read-only window, recovery) ---------- */

.app-banner {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 10px;
  /* A fixed box placed at left: 50% can only grow to half the screen unless it is given a width: max-content makes it as wide as its
     text wants, up to max-width. A long explanation then wraps at the screen's width, and scrolls inside the banner if it is taller
     than the screen, instead of being cut off. */
  width: max-content;
  max-width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px 10px 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow-popover);
  font-size: 13px;
  line-height: 1.4;
}

.app-banner.open {
  display: flex;
}

.app-banner.tone-danger {
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}

.app-banner.tone-danger .app-banner-text::before,
.app-banner.tone-warning .app-banner-text::before,
.app-banner.tone-info .app-banner-text::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--text-muted);
}

.app-banner.tone-danger .app-banner-text::before {
  background: var(--danger);
}

.app-banner.tone-warning .app-banner-text::before {
  background: #d08a00;
}

.app-banner-text {
  flex: 1;
  min-width: 0;
}

.app-banner-btn {
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.app-banner-btn:hover {
  background: var(--tab-hover);
}

body.app-read-only #app {
  opacity: 0.6;
}

/* Missed: past, never completed, older than the overdue window — kept
   visible but no longer counted as overdue. */
.cal-chip.status-missed {
  opacity: 0.7;
}

.cal-chip.status-missed .cal-chip-label {
  text-decoration: underline dotted var(--text-faint);
  text-underline-offset: 3px;
}

.cal-agenda-row.status-missed .cal-agenda-time,
.td-check.status-missed {
  color: var(--text-faint);
}

/* Recurring history: one row per completed occurrence */
.occurrence-row .occurrence-title {
  font-size: 14.5px;
  line-height: 1.55;
  padding: 3px 0 0;
  color: var(--text-faint);
}

/* Files & Backup dialog */
.files-backup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  margin-bottom: 14px;
  border-top: 1px solid var(--border);
}

.files-backup .export-label {
  margin-bottom: 0;
}

.files-backup-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.files-backup-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.kept-copies-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kept-copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.kept-copy-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.kept-copy-row .kept-copy-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.files-backup-status {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 16px;
}

.files-retry-btn {
  display: block;
  margin: 0 auto 16px;
}

/* Keyboard focus for rows that act as buttons */
.tab-item:focus-visible,
.search-result-row:focus-visible {
  outline: 2px solid var(--text-muted);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Search: match count and "Show more" */
.search-summary {
  padding: 6px 12px 4px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.search-more-btn {
  display: block;
  margin: 8px auto 10px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.search-more-btn:hover {
  background: var(--tab-hover);
}


/* ---------- Yacht Workspace: home screen & module tiles ---------- */

[hidden] {
  display: none !important;
}

.sidebar-title {
  border: none;
  background: transparent;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 7px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.sidebar-title {
  font-size: 15px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.sidebar-title:hover {
  background: var(--tab-hover);
}

.sidebar-title:focus-visible {
  outline: 2px solid var(--text-muted);
  outline-offset: 1px;
}

.home-screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
}

.home-topbar {
  flex-shrink: 0;
  height: calc(56px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top, 0px) 24px 0;
}

.home-topbar .home-theme-btn {
  margin-left: auto;
}

.home-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.home-back-btn:hover {
  background: var(--tab-hover);
}

.home-back-btn svg {
  width: 14px;
  height: 14px;
}

.home-content {
  width: 100%;
  max-width: 960px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 40px 32px 64px;
}

.home-heading {
  text-align: center;
}

.home-heading h1 {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.home-heading p {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--text-muted);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}

.module-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 220px;
  padding: 28px 28px 26px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-elevated);
  box-shadow: var(--sheet-shadow);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.module-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-popover);
}

.module-tile:active {
  transform: translateY(0);
}

.module-tile:focus-visible {
  outline: 2px solid var(--text-muted);
  outline-offset: 3px;
}

.module-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--text);
}

.module-icon svg {
  width: 28px;
  height: 28px;
}

.module-icon.large {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  margin: 0 auto 18px;
}

.module-icon.large svg {
  width: 36px;
  height: 36px;
}

.module-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.module-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.module-chip {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tab-hover);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.module-soon .module-icon {
  color: var(--text-muted);
}

.module-placeholder {
  text-align: center;
  padding-top: 72px;
}

.module-placeholder h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.module-placeholder p {
  margin: 10px 0 0;
  font-size: 15.5px;
  color: var(--text-muted);
}

.module-chip-live {
  background: var(--inv-amber-soft, #fbeccc);
  color: var(--inv-amber, #9a6a00);
}

/* ---------- shared sidebar: collapse, resize, bottom tools (Workspace and Inventory) ---------- */

.sidebar {
  transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease,
    visibility 0s linear 0s;
}

/* While the edge is being dragged the width follows the pointer exactly. */
.side-resizing .sidebar,
.side-resizing .main-header {
  transition: none !important;
}

/* The content keeps its width while the sidebar shrinks, so it slides out
   instead of re-wrapping. */
.sidebar > * {
  min-width: var(--side-w, 264px);
}

.side-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease,
    visibility 0s linear 0.24s;
}

.side-collapsed .resizer {
  display: none;
}

.app .main-header {
  transition: padding-left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.side-collapsed .main-header {
  padding-left: 62px;
}

.side-toggle svg {
  width: 17px;
  height: 17px;
}

.side-expand {
  position: absolute;
  top: 16px;
  left: 14px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.side-collapsed .side-expand {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.1s;
}

.resizer:focus-visible {
  outline: none;
}

.resizer:focus-visible::after {
  background: var(--text-muted);
  width: 2px;
  left: 1.5px;
}

/* Tools at the bottom of every sidebar: module tools, Export, then Files. */
.side-util {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.side-util .add-tab-btn {
  margin-top: 0;
  margin-bottom: 2px;
}

.side-util .add-tab-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.side-util .storage-row {
  margin-top: 4px;
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .side-collapsed .sidebar,
  .app .main-header,
  .side-expand {
    transition: none;
  }
}


/* ============ One look for every switch: a soft pill track, with the active
   option raised in white, a little larger than the others ============ */

:root {
  --seg-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent), 0 2px 4px rgba(0, 0, 0, 0.1), 0 6px 14px rgba(0, 0, 0, 0.07);
}

.segmented-control,
.cal-view-switch,
.recur-mode-tabs,
.export-choice-row {
  box-sizing: border-box;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--seg-track);
}

.segmented-control,
.recur-mode-tabs,
.export-choice-row {
  height: 32px;
}

/* the moving raised pill of the Workspace / Structure switch */
.segmented-thumb {
  top: -3px;
  bottom: -3px;
  left: 0;
  border-radius: 999px;
  background: var(--seg-active);
  box-shadow: var(--seg-shadow);
  transition: left 0.22s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.22s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.segmented-option {
  height: 32px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
}

.segmented-option.view-option {
  padding: 0 20px;
}

.segmented-option.icon-only {
  width: 34px;
  padding: 0;
}

.segmented-option.active {
  font-weight: 700;
}

.cal-view-switch button,
.recur-mode-btn,
.export-choice-btn {
  position: relative;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 0 18px;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.cal-view-switch button:hover:not(.active),
.recur-mode-btn:hover:not(.active),
.export-choice-btn:hover:not(.active) {
  color: var(--text);
}

.recur-mode-btn,
.export-choice-btn {
  height: 100%;
  flex: 1;
}

/* The active option: white, raised, and a little larger than its neighbours. */
.cal-view-switch button.active,
.recur-mode-btn.active,
.export-choice-btn.active {
  z-index: 1;
  height: calc(100% + 6px);
  margin: -3px -2px;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  background: var(--seg-active);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--seg-shadow);
}

.export-choice-row {
  margin: 4px 3px;
}

@media (prefers-reduced-motion: reduce) {
  .segmented-thumb,
  .cal-view-switch button,
  .recur-mode-btn,
  .export-choice-btn {
    transition: none;
  }
}

/* ---------- Soft ink: graphite sidebar, quiet sheet. Fonts unchanged. ---------- */

:root[data-theme="light"] .app {
  background: #dedbd4;
  padding: 12px;
  gap: 2px; /* sidebar | divider | sheet: about 9px in all, down from 29px */
}

:root[data-theme="light"] .sidebar {
  background: #2a2e33;
  color: #e7e4de;
  border-radius: 20px;
}

:root[data-theme="light"] .sidebar .sidebar-title,
:root[data-theme="light"] .sidebar .icon-btn,
:root[data-theme="light"] .sidebar .add-tab-btn,
:root[data-theme="light"] .sidebar .tab-item,
:root[data-theme="light"] .sidebar .tab-name,
:root[data-theme="light"] .sidebar .storage-usage-btn,
:root[data-theme="light"] .sidebar .inv-group-head {
  color: #c9c6c0;
}

:root[data-theme="light"] .sidebar .tab-number,
:root[data-theme="light"] .sidebar .storage-usage-text,
:root[data-theme="light"] .sidebar .inv-group-empty,
:root[data-theme="light"] .sidebar .pinned-icon {
  color: #8d949c;
}

:root[data-theme="light"] .sidebar .tab-item {
  min-height: 34px;
  border-radius: 12px;
}

:root[data-theme="light"] .sidebar .tab-item:hover,
:root[data-theme="light"] .sidebar .add-tab-btn:hover,
:root[data-theme="light"] .sidebar .icon-btn:hover,
:root[data-theme="light"] .sidebar .sidebar-title:hover,
:root[data-theme="light"] .sidebar .inv-group-head:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

:root[data-theme="light"] .sidebar .tab-item.active {
  background: #f7f5f1;
  color: #1b1d20;
  min-height: 40px;
  font-weight: 600;
  box-shadow: none;
}

:root[data-theme="light"] .sidebar .tab-item.active .tab-name,
:root[data-theme="light"] .sidebar .tab-item.active .tab-number {
  color: #1b1d20;
}

:root[data-theme="light"] .sidebar .inv-group-head {
  background: transparent;
}

:root[data-theme="light"] .sidebar .inv-group-head.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] .sidebar .inv-cat-list {
  border-left-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] .sidebar .side-util {
  border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .main {
  margin: 0;
  border: none;
  border-radius: 20px;
  background: #fdfcfa;
  box-shadow: 0 1px 2px rgba(28, 27, 25, 0.05);
}

:root[data-theme="light"] .home-screen {
  background: #dedbd4;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .app {
    background: #dedbd4;
    padding: 12px;
    gap: 2px;
  }
  :root:not([data-theme="dark"]) .sidebar {
    background: #2a2e33;
    color: #e7e4de;
    border-radius: 20px;
  }
  :root:not([data-theme="dark"]) .sidebar .sidebar-title,
  :root:not([data-theme="dark"]) .sidebar .icon-btn,
  :root:not([data-theme="dark"]) .sidebar .add-tab-btn,
  :root:not([data-theme="dark"]) .sidebar .tab-item,
  :root:not([data-theme="dark"]) .sidebar .tab-name,
  :root:not([data-theme="dark"]) .sidebar .storage-usage-btn,
  :root:not([data-theme="dark"]) .sidebar .inv-group-head {
    color: #c9c6c0;
  }
  :root:not([data-theme="dark"]) .sidebar .tab-number,
  :root:not([data-theme="dark"]) .sidebar .storage-usage-text,
  :root:not([data-theme="dark"]) .sidebar .inv-group-empty,
  :root:not([data-theme="dark"]) .sidebar .pinned-icon {
    color: #8d949c;
  }
  :root:not([data-theme="dark"]) .sidebar .tab-item {
    min-height: 34px;
    border-radius: 12px;
  }
  :root:not([data-theme="dark"]) .sidebar .tab-item:hover,
  :root:not([data-theme="dark"]) .sidebar .add-tab-btn:hover,
  :root:not([data-theme="dark"]) .sidebar .icon-btn:hover,
  :root:not([data-theme="dark"]) .sidebar .sidebar-title:hover,
  :root:not([data-theme="dark"]) .sidebar .inv-group-head:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }
  :root:not([data-theme="dark"]) .sidebar .tab-item.active {
    background: #f7f5f1;
    color: #1b1d20;
    min-height: 40px;
    font-weight: 600;
    box-shadow: none;
  }
  :root:not([data-theme="dark"]) .sidebar .tab-item.active .tab-name,
  :root:not([data-theme="dark"]) .sidebar .tab-item.active .tab-number {
    color: #1b1d20;
  }
  :root:not([data-theme="dark"]) .sidebar .inv-group-head {
    background: transparent;
  }
  :root:not([data-theme="dark"]) .sidebar .inv-group-head.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
  }
  :root:not([data-theme="dark"]) .sidebar .inv-cat-list {
    border-left-color: rgba(255, 255, 255, 0.1);
  }
  :root:not([data-theme="dark"]) .sidebar .side-util {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  :root:not([data-theme="dark"]) .main {
    margin: 0;
    border: none;
    border-radius: 20px;
    background: #fdfcfa;
    box-shadow: 0 1px 2px rgba(28, 27, 25, 0.05);
  }
  :root:not([data-theme="dark"]) .home-screen {
    background: #dedbd4;
  }
}

/* ---------- The brand logo: one composition, used everywhere ----------
   The yacht is centred above the name, 70% of the name's width, with a fixed
   gap. Everything is in em, so the home screen and the sidebars are the same
   logo at different sizes. */

.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-lockup .brand-mark {
  display: block;
  width: 5.63em;
  margin: 0 0 0.237em;
  color: inherit;
}

.brand-lockup .brand-mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.brand-lockup .brand-name {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: normal;
  white-space: nowrap;
  text-rendering: geometricPrecision; /* the letters scale exactly with the size */
}

.home-lockup {
  font-size: 38px;
  color: var(--text);
}

.sidebar-header {
  align-items: flex-end;
}

/* At small sizes the system font sets the name about 5% wider than a pure
   scale-down of the home screen, so the yacht is widened by the same amount.
   The result: yacht-to-name proportion identical to the home logo. */
.sidebar-title.brand-lockup .brand-mark {
  width: 5.9em;
}

.sidebar-title.brand-lockup {
  font-size: 15px;
  flex-shrink: 1;
  cursor: pointer;
}


/* ---------- Shared workspace: access code, first-time questions, status ---------- */

.sync-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
}

.sync-card {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 18px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-popover);
  color: var(--text);
}

.sync-card h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.sync-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.sync-input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 18px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
}

.sync-err {
  min-height: 1.2em;
  color: var(--danger) !important;
}

.sync-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.sync-btn {
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sync-btn.primary {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg-elevated);
}

.sync-pill {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 900;
  padding: 4px 11px;
  border: none;
  border-radius: 999px;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--border-strong), 0 2px 8px rgba(0, 0, 0, 0.08);
  color: var(--text-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.92;
}

.sync-pill:hover,
.sync-pill:focus-visible {
  opacity: 1;
  color: var(--text);
}

.sync-pill::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--success);
  vertical-align: 0;
}

.sync-pill[data-state="busy"]::before {
  background: var(--text-faint);
}

.sync-pill[data-state="pending"]::before {
  background: #d99a2b;
}

.sync-pill[data-state="off"]::before {
  background: var(--text-muted);
}

.sync-pill[data-state="error"]::before {
  background: var(--danger);
}

/* Phones: the status is a small dot (everything is fine) or a short pill (it needs a look). It sits in
   the corner, and lifts above the change navigator when that is open, so it never covers a control. */
@media (max-width: 760px) {
  .sync-pill {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 20px);
    padding: 3px 9px;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sync-pill[data-state="ok"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0;
  }

  .sync-pill[data-state="ok"]::before {
    width: 9px;
    height: 9px;
    margin: 0;
  }

  body:has(.structure-nav:not([hidden])) .sync-pill {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
}

/* dialogs opened from the status pill */
.sync-gate.sync-dim {
  background: rgba(20, 20, 19, 0.45);
}

.sync-status {
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.sync-lead {
  color: var(--text) !important;
  font-weight: 600;
}

.sync-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sync-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--text-muted);
}

.sync-line span:last-child {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sync-line[data-ok="0"] span:last-child {
  color: #b7791f;
}

.sync-sep {
  height: 1px;
  margin: 6px 0;
  background: var(--border);
}

.sync-note {
  min-height: 1.2em;
  font-size: 12.5px !important;
}

.sync-conflicts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sync-conflict {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* new version / restored data notice */
.pwa-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 100001;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg-elevated);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

.pwa-banner button {
  height: 28px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pwa-banner .pwa-banner-x {
  width: 28px;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
}


/* The weekday as a full name; small screens switch to its first letter (see responsive.css). */
.cal-weekday-header .wd-short {
  display: none;
}

.mo-short {
  display: none;
}


/* ---------- Backup button beside the storage counter ---------- */

.storage-backup-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  height: 24px;
  padding: 0 10px 0 8px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #e6e4df;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.storage-backup-btn svg {
  width: 14px;
  height: 14px;
}

.storage-backup-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.storage-backup-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}


/* ---------- Structure counter and the change navigator ---------- */

.structure-jump-counter {
  border-radius: 999px;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

/* The change that is open right now: its number sits in a soft green pill. */
.structure-jump-counter.cycling {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent);
}

/* The navigator: a floating bar with big Previous / Next buttons. */
.structure-nav {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  max-width: calc(100% - 24px);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-elevated);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.structure-nav[hidden] {
  display: none;
}

.sn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--tab-hover);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.sn-btn:hover {
  background: var(--border-strong);
}

.sn-next {
  background: var(--text);
  color: var(--bg-elevated);
}

.sn-next:hover {
  background: var(--text);
  opacity: 0.88;
}

.sn-btn svg,
.sn-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sn-mid {
  min-width: 108px;
  max-width: 220px;
  padding: 0 4px;
  text-align: center;
  line-height: 1.25;
}

.sn-count {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sn-where {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.sn-close:hover {
  background: var(--tab-hover);
  color: var(--text);
}

.sn-btn:focus-visible,
.sn-close:focus-visible {
  outline: 2px solid var(--success);
  outline-offset: 2px;
}

/* Phones: one slim row in the thumb zone: [<] [1 of 2 · section] [>] [x]. With a single change
   there is nothing to step to, so the arrows are left out and the bar is just the label and close. */
@media (max-width: 760px) {
  .structure-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    max-width: none;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px 40px;
    grid-template-areas: "prev mid next close";
    align-items: center;
    gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    border-width: 1px 0 0;
  }

  .structure-nav.sn-single {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas: "mid close";
  }

  .structure-nav.sn-single .sn-prev,
  .structure-nav.sn-single .sn-next {
    display: none;
  }

  .sn-mid {
    grid-area: mid;
    min-width: 0;
    max-width: none;
    padding: 0 4px;
    text-align: center;
  }

  .sn-close {
    grid-area: close;
    justify-self: end;
    width: 40px;
    height: 40px;
  }

  .sn-prev {
    grid-area: prev;
  }

  .sn-next {
    grid-area: next;
  }

  /* arrows only: the words are not needed beside "1 of 2" */
  .sn-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
  }

  .sn-btn span {
    display: none;
  }

  .sn-count {
    font-size: 14px;
  }

  .structure-nav-open .main-scroll {
    padding-bottom: 76px;
  }
}

/* A short ring around the change that was just opened. */
@keyframes marker-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent);
  }
  100% {
    box-shadow: 0 0 0 9px transparent;
  }
}

.change-marker.marker-pulse,
.marker-frame.marker-pulse {
  animation: marker-pulse 0.9s ease-out 2;
}


/* ---------- Change navigator on a computer: a pill beside the Structure button ---------- */

.structure-nav-chip {
  position: absolute; /* over the header, outside its layout */
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--seg-active);
  box-shadow: var(--seg-shadow);
}

.main-header-controls-row {
  position: relative;
}

.snc-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.snc-btn svg,
.snc-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.snc-btn:hover {
  background: var(--tab-hover);
  color: var(--success);
}

.snc-num {
  min-width: 56px;
  text-align: center;
  color: var(--success);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.snc-num small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.snc-close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}

.snc-close svg {
  width: 11px;
  height: 11px;
}

.snc-close:hover {
  background: var(--tab-hover);
  color: var(--text);
}

.snc-btn:focus-visible,
.snc-close:focus-visible {
  outline: 2px solid var(--success);
  outline-offset: 1px;
}

/* While the pill is out, the counter's place inside the button is left empty. */
.counter-detached .structure-jump-counter {
  visibility: hidden;
}

/* The droplet that leaves the counter. */
.sn-goo {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  filter: url(#ywGoo);
}

.sn-goo i {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: var(--success);
}

/* ---------- Sidebar rows: the same pill shape as the active Workspace | Structure button ---------- */
/* Selected and hovered rows (categories, Task Manager rows, Inventory groups and categories). */

:root:not([data-sidebar-shape]) .sidebar .tab-item,
:root:not([data-sidebar-shape]) .sidebar .inv-group-head {
  border-radius: 999px;
}