/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --bg: #0f0f12;
  --surface: #1a1a1f;
  --surface-raised: #232329;
  --font-1-tone: 85;
  --font-1-alpha: 1;
  --font-2-tone: 60;
  --font-2-alpha: 1;
  /* Fixed UI strokes (content chrome, buttons, cards) — not theme-sliders */
  --border: rgba(255, 255, 255, 0.12);
  --border-hairline: rgba(255, 255, 255, 0.08);
  --desktop-card-height: 3.125rem;
  --window-header-band-height: 60px;
  /* Scrollbars: derive from shell surfaces (avoids fixed navy that reads “blue” vs window chrome). */
  --scrollbar-thumb: color-mix(in oklab, var(--surface-raised) 78%, var(--text) 22%);
  --scrollbar-thumb-hover: color-mix(in oklab, var(--surface-raised) 64%, var(--text) 36%);
  --scrollbar-thumb-pane: color-mix(in oklab, var(--surface) 76%, var(--text-muted) 24%);
  --scrollbar-thumb-pane-hover: color-mix(in oklab, var(--surface) 62%, var(--text) 38%);
  --text: hsl(0 0% calc(var(--font-1-tone) * 1%) / var(--font-1-alpha));
  --text-muted: hsl(0 0% calc(var(--font-2-tone) * 1%) / var(--font-2-alpha));
  --muted: hsl(0 0% calc(var(--font-2-tone) * 1%) / var(--font-2-alpha));
  /* Shared row highlight language (Nexus side panel is the visual source of truth). */
  --nexus-row-hover-highlight: rgba(255, 255, 255, 0.1);
  --nexus-row-selected-highlight: rgba(255, 255, 255, 0.14);
  --nexus-row-subtask-highlight: rgba(255, 255, 255, 0.06);
  --nexus-row-selected-text: var(--text);
  /* Finder folder glyphs align with Settings/Nexus panel icon tone. */
  --nexus-sidebar-folder-icon-color: var(--text-muted);
  --nexus-sidebar-folder-icon-empty: var(--nexus-sidebar-folder-icon-color);
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --success: #22c55e;
  --success-hover: #16a34a;
  --task-group-checked-bg: rgba(34, 197, 94, 0.22);
  --task-group-checked-bg-hover: rgba(34, 197, 94, 0.26);
  --page-padding: 1.25rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --os-window-padding: 0.75rem;
  /* Desktop shell inset for clock corner + app window viewport margins. */
  --nexus-desktop-shell-inset: max(8px, calc(var(--os-window-padding, 0.75rem) * 0.65));
  --os-header-min-height: 1.28rem;
  --os-header-gap: 0.3rem;
  --os-title-size: 0.88rem;
  --os-title-letter-spacing: 0.02em;
  --os-subtitle-size: 0.72rem;
  --os-subtitle-gap: 0.55rem;
  --os-grid-row-gap: 0.34rem;
  --os-grid-col-gap: 0.55rem;
  --os-card-padding-y: 0.32rem;
  --os-card-padding-x: 0.44rem;
  --os-card-radius: 8px;
  /* Save As + Settings credential modals — same fixed inset from viewport */
  --nexus-modal-viewport-gutter: 200px;

  /* OS Shell standards lock: single source for shared window typography/cards */
  --os-standard-title-size: var(--os-title-size);
  --os-standard-title-letter-spacing: var(--os-title-letter-spacing);
  --os-standard-subtitle-size: var(--os-subtitle-size);
  --os-standard-subtitle-gap: var(--os-subtitle-gap);
  --os-standard-grid-row-gap: var(--os-grid-row-gap);
  --os-standard-grid-col-gap: var(--os-grid-col-gap);
  --os-standard-card-height: var(--desktop-card-height);
  --os-standard-card-radius: var(--os-card-radius);
  --os-standard-card-padding-y: var(--os-card-padding-y);
  --os-standard-card-padding-x: var(--os-card-padding-x);
  --os-standard-card-label-size: 0.68rem;
  --os-standard-card-value-size: 0.82rem;
  --window-bg-h: 180;
  --window-bg-saturation: 0%;
  --window-bg-brightness: 13%;
  --window-bg-alpha: 0.95;
  --window-ui-hue: 180;
  --window-ui-saturation: 0%;
  --window-ui-brightness: 15%;
  --desktop-bg-angle: 180deg;
  --desktop-bg-1-hue: 0;
  --desktop-bg-1-saturation: 0%;
  --desktop-bg-1-brightness: 0%;
  --desktop-bg-2-hue: 0;
  --desktop-bg-2-saturation: 0%;
  --desktop-bg-2-brightness: 0%;
  /* Standard desktop selection box tint (Sundown-derived). */
  --desktop-selection-hue: 195;
  --desktop-selection-saturation: 25%;
  --desktop-selection-brightness: 20%;
  --window-bg: hsl(var(--window-bg-h) var(--window-bg-saturation) var(--window-bg-brightness) / var(--window-bg-alpha));
  --desktop-bg-color-1: hsl(var(--desktop-bg-1-hue) var(--desktop-bg-1-saturation) var(--desktop-bg-1-brightness));
  --desktop-bg-color-2: hsl(var(--desktop-bg-2-hue) var(--desktop-bg-2-saturation) var(--desktop-bg-2-brightness));

  /* Default inset for page chrome (main window content, etc.); framed apps use .content-window rules */
  --os-shell-content-padding: var(--os-window-padding);
  /* Square icon controls — hit target vs glyph size can differ (smaller box, same .material-icon--xs glyph) */
  --nexus-icon-btn-size: 1.25rem;
  --nexus-icon-btn-radius: calc(0.375rem * 1.25 / 1.75);
  --nexus-icon-btn-icon: 0.9375rem;
  /* Chrome + row icon clusters (add / save / close matches add / edit / delete) */
  --nexus-small-action-gap: 0.2rem;
}

* { box-sizing: border-box; }

/* Square icon buttons — shared by chrome, Finder rows, Tasks, save dialog (+), … */
.item-action-btn,
.row-plus,
.row-pencil,
.finder-folder-add-btn,
.settings-themes-item-action-btn,
.section-add-btn,
.db-health-back,
.db-health-close,
.settings-back,
.settings-close,
.tools-close-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nexus-icon-btn-size);
  height: var(--nexus-icon-btn-size);
  min-width: var(--nexus-icon-btn-size);
  min-height: var(--nexus-icon-btn-size);
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--nexus-icon-btn-radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.item-action-btn svg.material-icon,
.row-plus svg.material-icon,
.row-pencil svg.material-icon,
.finder-folder-add-btn svg.material-icon,
.settings-themes-item-action-btn svg.material-icon,
.section-add-btn svg.material-icon,
.db-health-back svg.material-icon,
.db-health-close svg.material-icon,
.settings-back svg.material-icon,
.settings-close svg.material-icon,
.settings-user-icon-btn svg.material-icon,
.tools-close-btn svg.material-icon {
  width: var(--nexus-icon-btn-icon);
  height: var(--nexus-icon-btn-icon);
  flex-shrink: 0;
  display: block;
  transform-origin: center center;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.desktop-side-panel-toggle svg.material-icon,
.row-save-here svg.material-icon,
.finder-tree__open-in-app svg.material-icon {
  transform-origin: center center;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Press feedback for buttons: only the pressed button icon shrinks. */
.item-action-btn:active svg.material-icon,
.row-plus:active svg.material-icon,
.row-pencil:active svg.material-icon,
.finder-folder-add-btn:active svg.material-icon,
.settings-themes-item-action-btn:active svg.material-icon,
.section-add-btn:active svg.material-icon,
.db-health-back:active svg.material-icon,
.db-health-close:active svg.material-icon,
.settings-back:active svg.material-icon,
.settings-close:active svg.material-icon,
.settings-user-icon-btn:active svg.material-icon,
.tools-close-btn:active svg.material-icon,
.row-save-here:active svg.material-icon,
.finder-tree__open-in-app:active svg.material-icon,
.desktop-side-panel-toggle:active svg.material-icon {
  transform: scale(0.78);
  transition: transform 75ms cubic-bezier(0.4, 0, 1, 1);
}

.item-action-btn:hover,
.item-action-btn:focus-visible,
.row-plus:hover,
.row-plus:focus-visible,
.row-pencil:hover,
.row-pencil:focus-visible,
.finder-folder-add-btn:hover,
.finder-folder-add-btn:focus-visible,
.settings-themes-item-action-btn:hover,
.settings-themes-item-action-btn:focus-visible,
.section-add-btn:hover,
.section-add-btn:focus-visible,
.db-health-back:hover,
.db-health-back:focus-visible,
.db-health-close:hover,
.db-health-close:focus-visible,
.settings-back:hover,
.settings-back:focus-visible,
.settings-close:hover,
.settings-close:focus-visible,
.settings-user-icon-btn:hover,
.settings-user-icon-btn:focus-visible,
.tools-close-btn:hover,
.tools-close-btn:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.calendar-app {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--surface);
}

.calendar-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.calendar-app__sidebar {
  border-right: 1px solid var(--border-hairline);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
  width: 260px;
}

/* Must beat later .finder-shell-pane--folders padding defaults. */
.calendar-shell .calendar-app__sidebar.finder-shell-pane--folders {
  padding: 12px 10px;
}

.calendar-app__new-btn {
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 0.5rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  width: 100%;
  justify-content: flex-start;
}

.calendar-app__mini-wrap {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-hairline);
  border-radius: 0.65rem;
  padding: 0.55rem;
}

.calendar-app__mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
}

.calendar-app__mini-nav {
  display: inline-flex;
  gap: 0.2rem;
}

.calendar-app__icon-btn {
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--border-hairline);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calendar-app__icon-btn:hover {
  color: var(--text);
}

.calendar-app__mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.18rem;
}

.calendar-app__mini-dow {
  font-size: 0.62rem;
  text-align: center;
  color: var(--text-muted);
}

.calendar-app__mini-day {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
}

.calendar-app__mini-day.is-current {
  color: var(--text);
  cursor: pointer;
}

.calendar-app__mini-day.is-selected {
  background: rgba(59, 130, 246, 0.24);
}

.calendar-app__mini-day.is-today {
  outline: 1px solid var(--accent);
}

.calendar-app__main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: color-mix(in oklab, var(--surface) 94%, #000 6%);
}

.calendar-app__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border-hairline);
}

.calendar-app__toolbar-left,
.calendar-app__toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.calendar-app__title {
  margin: 0 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.calendar-app__btn {
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.calendar-app__btn--primary {
  border-color: color-mix(in oklab, var(--accent) 72%, transparent);
  background: color-mix(in oklab, var(--accent) 30%, transparent);
}

.calendar-app__search {
  width: 9.5rem;
  border: 1px solid var(--border-hairline);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 0.34rem 0.48rem;
}

.calendar-app__view-toggle {
  display: inline-flex;
  gap: 0.2rem;
}

.calendar-app__view-btn {
  border: 1px solid var(--border-hairline);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  padding: 0.32rem 0.52rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.calendar-app__view-btn.is-active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.12);
}

.calendar-app__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.calendar-app__body--time {
  overflow: visible;
}

.calendar-app__month-view {
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.calendar-app__month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border-hairline);
}

.calendar-app__month-header > span {
  text-align: center;
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 0.35rem 0;
}

.calendar-app__month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, minmax(0, 1fr));
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.calendar-app__month-cell {
  min-height: 0;
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0.35rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.calendar-app__month-cell.is-selected {
  background: rgba(59, 130, 246, 0.12);
}

.calendar-app__month-cell.is-today {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
}

.calendar-app__month-cell.is-other {
  opacity: 0.5;
}

.calendar-app__month-day {
  display: block;
  line-height: 1.05;
  font-size: 0.72rem;
  margin-bottom: 0.12rem;
}

.calendar-app__month-events {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.1rem;
  min-height: 0;
  overflow: hidden;
}

.calendar-app__month-event {
  font-size: 0.65rem;
  color: #fff;
  border-radius: 0.25rem;
  padding: 0.08rem 0.3rem;
  border: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-app__calendars {
  margin-top: 12px;
}

.calendar-app__calendars-title {
  margin: 0 0 0.35rem;
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.calendar-app__cal-item {
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 0.4rem;
  color: var(--text);
  padding: 0.28rem 0.3rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.4rem;
  align-items: center;
  text-align: left;
}

.calendar-app__cal-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.calendar-app__cal-dot {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
}

.calendar-app__cal-name {
  font-size: 0.78rem;
}

.calendar-app__cal-check {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}

.calendar-app__time-layout {
  position: relative;
  height: 100%;
  min-height: 0;
}

.calendar-app__time-layout--inside-left {
  overflow: hidden;
}

.calendar-app__time-scroll {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.calendar-app__week-grid-time {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(0, 1fr));
  min-height: 100%;
  height: 100%;
}

.calendar-app__week-grid-time--day {
  grid-template-columns: 56px minmax(0, 1fr);
}

:root {
  --calendar-time-header-h: 29px;
}

.calendar-app__time-gutter {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-right: 1px solid var(--border-hairline);
}

.calendar-app__time-gutter > header {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--calendar-time-header-h);
  min-height: var(--calendar-time-header-h);
  box-sizing: border-box;
  padding: 0.28rem 0.35rem;
  border-bottom: 1px solid var(--border-hairline);
}

.calendar-app__time-gutter-track {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background-image: none;
}

.calendar-app__time-gutter-label {
  position: absolute;
  left: 4px;
  transform: none;
  font-size: 0.54rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.calendar-app__week-day-time {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-hairline);
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.calendar-app__week-day-time:last-child {
  border-right: none;
}

.calendar-app__week-day-time > header,
.calendar-app__day-time > header {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--calendar-time-header-h);
  min-height: var(--calendar-time-header-h);
  box-sizing: border-box;
  font-size: 0.7rem;
  color: var(--text-muted);
  background: transparent;
  border-bottom: 1px solid var(--border-hairline);
  padding: 0.28rem 0.35rem;
}

.calendar-app__week-day-time > header {
  cursor: pointer;
}

.calendar-app__week-track,
.calendar-app__day-track {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.calendar-app__hour-grid {
  position: absolute;
  inset: 0;
  background-image: none;
  pointer-events: none;
}

.calendar-app__week-event,
.calendar-app__day-event {
  border: none;
  border-radius: 0.35rem;
  color: #fff;
  text-align: left;
  padding: 0.24rem 0.34rem;
  font-size: 0.66rem;
  line-height: 1.15;
  cursor: grab;
  position: absolute;
  left: 0.28rem;
  right: 0.28rem;
  overflow: hidden;
}

.calendar-app__week-event:active,
.calendar-app__day-event:active {
  cursor: grabbing;
}

.calendar-app__event-origin-ghost {
  opacity: 0.35;
  filter: saturate(0.75);
}

.calendar-app__drag-proxy {
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  opacity: 0.9;
  transform: translate3d(0, 0, 0);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.calendar-app__week-event--timed,
.calendar-app__day-event--timed {
  z-index: 2;
}

.calendar-app__week-event small,
.calendar-app__day-event small {
  display: block;
  opacity: 0.9;
  font-size: 0.62rem;
}

.calendar-app__week-event--all-day,
.calendar-app__day-event--all-day {
  inset: 0.2rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.calendar-app__day-time {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  min-width: 0;
}

.calendar-app__empty--time {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  color: var(--text-muted);
}


.calendar-app__empty {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.calendar-app__modal {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
}

.calendar-app__modal.hidden {
  display: none;
}

.calendar-app__modal-card {
  width: min(360px, calc(100% - 1.5rem));
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface-raised);
  padding: 0.75rem;
}

.calendar-app__modal-card:focus {
  outline: none;
}

.calendar-app__modal-title {
  margin: 0 0 0.5rem;
}

.calendar-app__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.calendar-app__field input,
.calendar-app__field select {
  border: 1px solid var(--border-hairline);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  height: 2rem;
  min-height: 2rem;
  line-height: 1.15;
}

.calendar-app__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.calendar-app__modal-card > .calendar-app__field {
  margin-top: 0.5rem;
}

.calendar-app__modal-card > .calendar-app__field:first-of-type {
  margin-top: 0;
}

.calendar-app__color-row {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.calendar-app__color-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid transparent;
}

.calendar-app__color-dot.is-selected {
  border-color: var(--text);
}

.calendar-app__field-row.hidden {
  display: none;
}

.calendar-app__modal-actions {
  margin-top: 0.7rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

@media (max-width: 560px) {
  .calendar-shell {
    grid-template-columns: 1fr;
  }

  .calendar-app__sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-hairline);
  }
}

/* Material Symbols (SVG from app/assets/icons/material-symbol-*-24.svg, fill currentColor) */
svg.material-icon {
  display: block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

svg.material-icon--xs {
  width: 0.9375rem;
  height: 0.9375rem;
}

svg.material-icon--sm {
  width: 1.0625rem;
  height: 1.0625rem;
}

svg.material-icon--md {
  width: 1.25rem;
  height: 1.25rem;
}

svg.material-icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

.os-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--os-header-min-height);
  margin-bottom: var(--os-header-gap);
  padding: 0;
}

.os-window-title {
  margin: 0;
  font-size: var(--os-standard-title-size);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--os-standard-title-letter-spacing);
}

.os-window-subtitle {
  margin: 0 0 var(--os-standard-subtitle-gap);
  padding: 0;
  color: var(--text-muted);
  font-size: var(--os-standard-subtitle-size);
  line-height: 1.5;
}

.os-window-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.os-window-body-start {
  margin-top: 0;
}

.os-window-grid {
  display: grid;
  gap: var(--os-standard-grid-row-gap) var(--os-standard-grid-col-gap);
}

.os-window-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.os-window-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--os-standard-card-radius);
  padding: var(--os-standard-card-padding-y) var(--os-standard-card-padding-x);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  text-align: left;
  height: var(--os-standard-card-height);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}

.os-window-card:hover,
.os-window-card:focus-visible {
  border-color: rgba(121, 173, 255, 0.6);
  background: rgba(120, 171, 255, 0.08);
}

.os-window-card.is-active {
  border-color: rgba(59, 130, 246, 0.42);
  background: rgba(59, 130, 246, 0.12);
}

.os-window-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
}

.os-window-card-label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--os-standard-card-label-size);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.os-window-card-value {
  margin: 0.08rem 0 0;
  color: var(--text);
  font-size: var(--os-standard-card-value-size);
  font-weight: 600;
}

.os-window-card-value--icon {
  line-height: 1;
  min-height: 1.05rem;
}

.app-version {
  position: fixed;
  bottom: 0.25rem;
  right: 0.5rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.app-version-btn {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 400;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0.6;
}

.app-version-btn:hover,
.app-version-btn.is-active {
  font-weight: 700;
  opacity: 1;
  color: var(--text);
}

.db-health-window {
  width: min(320px, calc(100vw - 2rem));
  height: min(235px, calc(100vh - 2rem));
  z-index: 1500;
  overflow: hidden;
}

.db-health-panel {
  position: relative;
  width: 100%;
  background: transparent;
  border-radius: 12px;
  padding: var(--os-window-padding);
  box-sizing: border-box;
  max-height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.db-health-header {
  cursor: grab;
  user-select: none;
}

.db-health-header:active {
  cursor: grabbing;
}

.db-health-close {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  z-index: 65;
}

.db-health-back {
  position: absolute;
  top: 0.55rem;
  right: 2.35rem;
  z-index: 65;
}

.db-health-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.db-health-heartbeat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 185, 198, 0.7);
  transform-origin: center;
  animation: db-heartbeat 1s ease-in-out infinite;
}

.db-health-heartbeat svg.material-icon {
  width: 1rem;
  height: 1rem;
}

.db-health-header:has(.db-health-back:not(.hidden)) .db-health-heartbeat {
  display: none;
}

@keyframes db-heartbeat {
  0%   { opacity: 0.70; transform: scale(0.97); }
  15%  { opacity: 1;    transform: scale(1); }
  35%  { opacity: 0.70; transform: scale(0.97); }
  100% { opacity: 0.70; transform: scale(0.97); }
}

.db-health-stamp {
  margin-bottom: var(--os-subtitle-gap);
}

.db-health-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--os-grid-row-gap) var(--os-grid-col-gap);
}

.db-health-grid div {
  border: 1px solid var(--border);
  border-radius: var(--os-card-radius);
  padding: var(--os-card-padding-y) var(--os-card-padding-x);
  min-height: var(--desktop-card-height);
  background: rgba(255, 255, 255, 0.02);
}

.db-health-card.hidden,
.db-health-grid.hidden,
.db-health-detail.hidden,
.db-health-back.hidden,
.settings-back.hidden {
  display: none;
}

.db-health-card--selectable {
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.db-health-card--selectable:hover {
  border-color: rgba(121, 173, 255, 0.6);
  background: rgba(120, 171, 255, 0.08);
}

.db-health-grid dt {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-health-grid dd {
  margin: 0.08rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.db-health-detail {
  margin-top: 0;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.db-health-detail-list {
  --db-health-row-height: 35px;
  --db-health-list-padding: 0.38rem;
  margin: 0;
  padding: 0 var(--db-health-list-padding) 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overflow-y: hidden;
  overflow-x: hidden;
}

body.nexus-os .db-health-detail-list {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body.nexus-os .db-health-detail-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.nexus-os .db-health-detail-list::-webkit-scrollbar-track {
  background: transparent;
}

body.nexus-os .db-health-detail-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

body.nexus-os .db-health-detail-list.is-scrolling,
body.nexus-os .db-health-detail-list:hover {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

body.nexus-os .db-health-detail-list.is-scrolling::-webkit-scrollbar-thumb,
body.nexus-os .db-health-detail-list:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

.db-health-detail-list li {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  height: var(--db-health-row-height);
  min-height: var(--db-health-row-height);
  padding: 0 0.22rem;
  font-size: 0.79rem;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.db-health-detail-list li + li {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.db-health-detail-row {
  justify-content: space-between;
  gap: 0.5rem;
}

.db-health-detail-row-main {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.db-health-detail-row-size {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.1;
  flex-shrink: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

#export-toast { margin: var(--space-sm) 0 0 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid var(--border);
  text-decoration: none;
  margin-right: 0.5rem;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-secondary { background: var(--surface-raised); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); color: var(--text); }
.btn-toolbar { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); }
.btn-toolbar:hover { background: var(--border); color: var(--text); text-decoration: none; }
.btn-export { background: var(--success); color: #fff; border-color: var(--border); }
.btn-export:hover { background: var(--success-hover); color: #fff; text-decoration: none; }
.btn-save { background: var(--accent); color: #fff; border: 1px solid var(--border); padding: 0.4rem 0.9rem; border-radius: 6px; font: inherit; cursor: pointer; }

/* Home */
.home { max-width: 56rem; margin: 0 auto; padding: 2rem 1.5rem; text-align: center; }
.home-header { margin-bottom: 2rem; }
.home-header .app-title { margin: 0 0 0.35rem 0; }
.home-header .tagline { margin: 0; }
.app-title {
  position: relative;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: transparent;
  background: linear-gradient(100deg, var(--muted) 0%, var(--muted) 28%, #ffffff 40%, var(--muted) 52%, var(--muted) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0)) drop-shadow(0 0 32px rgba(255, 255, 255, 0));
  animation: title-sweep 10s ease-in-out infinite;
}
@keyframes title-sweep {
  0%, 40% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0)) drop-shadow(0 0 32px rgba(255, 255, 255, 0));
  }
  55% {
    background-position: 75% 50%;
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0)) drop-shadow(0 0 32px rgba(255, 255, 255, 0));
  }
  65% {
    background-position: 50% 50%;
    filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.14)) drop-shadow(0 0 56px rgba(255, 255, 255, 0.08));
  }
  75% {
    background-position: 25% 50%;
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.06)) drop-shadow(0 0 32px rgba(255, 255, 255, 0.03));
  }
  90%, 100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0)) drop-shadow(0 0 32px rgba(255, 255, 255, 0));
  }
}
.tagline { color: var(--muted); font-size: 0.95rem; }
.home-actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem; }

/* ─── Folder selection state ─────────────────────────────────────────────── */
.finder-item.is-folder-selected {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

/* ─── Create section ─────────────────────────────────────────────────────── */
.create-action {
  color: var(--text-muted);
}

.create-action:hover {
  color: var(--text);
}

/* ─── Modal system ───────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.modal-backdrop.hidden {
  display: none;
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-window {
  width: min(92vw, 400px);
  padding: 1.25rem;
  background: linear-gradient(180deg, #1b1c27 0%, #141520 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  transform: translateY(12px) scale(0.98);
  transition: transform 180ms ease;
}

.modal-backdrop.is-open .modal-window {
  transform: translateY(0) scale(1);
}

.modal-title {
  margin: 0 0 0.8rem;
  font-size: 1rem;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-label {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.modal-input,
.modal-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.65rem;
  outline: none;
}

.modal-input:focus,
.modal-select:focus {
  border-color: var(--accent);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.modal-cancel-btn,
.modal-submit-btn {
  border-radius: 8px;
  font: inherit;
  font-size: 0.84rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

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

.modal-cancel-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
}

.modal-submit-btn {
  background: var(--accent);
  border: 1px solid transparent;
  color: #fff;
}

.modal-submit-btn:hover {
  background: var(--accent-hover);
}

.modal-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.item-type-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.item-type-btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.84rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.item-type-btn:hover {
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--text);
}

.item-type-btn.is-selected {
  border-color: rgba(59, 130, 246, 0.7);
  color: #f2f6ff;
  background: rgba(59, 130, 246, 0.16);
}
.organizer-header {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.home .organizer-header {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.home .organizer-header .btn {
  margin-right: 0;
}

@media (max-width: 720px) {
  .organizer-header {
    margin-bottom: 0.5rem;
  }
}
.file-input-hidden { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; z-index: -1; }
.home-import-form { display: inline-block; }
.recent-docs { text-align: left; }
.recent-docs__content.recent-docs__content--fade-out { animation: recent-docs-fade-out 0.3s ease-out forwards; }
@keyframes recent-docs-fade-out {
  to { opacity: 0; }
}
.empty-state--fade-in { animation: empty-state-fade-in 0.35s ease-out; }
@keyframes empty-state-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.recent-docs h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.75rem 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.recent-docs ul { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); overflow: hidden; }
.recent-docs li { border-bottom: 1px solid var(--border); }
.recent-docs li:last-child { border-bottom: none; }
.recent-docs li.doc-row { outline: none; }
.recent-docs li.doc-row:focus { background: var(--surface-raised); }
.recent-docs li.folder-item:focus { background: transparent; }
.organizer .organizer-list { overflow: visible; }

/* On touch devices, disable focus styling so single tap opens/closes folders */
@media (hover: none) {
  .recent-docs li.doc-row:focus,
  .recent-docs li.folder-item:focus {
    background: transparent;
    outline: none;
  }
}
.folder-item { overflow: hidden; }
.folder-toggle {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  display: flex;
  padding: 0.54rem 0;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.folder-row,
.plc-header-row {
  font-size: 15px;
  font-weight: 500;
}
.file-row {
  font-size: 13.5px;
  font-weight: 400;
}
.folder-toggle .doc-name {
  line-height: 1.25;
  font-size: inherit;
  font-weight: inherit;
}
.organizer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.organizer-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.organizer-row-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.folder-row-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.folder-toggle:not(.folder-row--expanded) .folder-row-actions {
  display: none;
}
.folder-toggle.folder-collapsed {
  background: transparent;
}
.folder-toggle.folder-expanded {
  background: var(--surface-raised);
}
/* Only highlight on hover when folder is expanded */
.folder-toggle.folder-expanded:hover {
  background: var(--surface-raised);
}
.folder-dropdown {
  max-height: 0px;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height 280ms ease, opacity 180ms ease, transform 220ms ease;
  overflow: hidden;
  will-change: max-height, opacity, transform;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.12);
  padding-left: 0;
}
.folder-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.plc-header-row {
  padding: 0.45rem 0;
}
.plc-header-row .row-left,
.plc-header-row .row-right {
  flex: 0 0 auto;
}
.plc-header-row .row-left {
  gap: 8px !important;
}
.plc-header-label {
  font-size: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: inherit;
}
.plc-header-row .inline-action-form,
.plc-header-row .home-import-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.plc-header-row .row-right {
  margin-left: auto !important;
}
.folder-toolbar-hint { font-size: 0.78rem; color: var(--text-muted); }
.plc-file-list {
  margin: 0;
  padding: 0;
}

.no-tag-lists {
  font-size: 14px;
  line-height: normal;
  display: flex;
  align-items: center;
  color: inherit;
}

.plc-file-list > .organizer-row {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.plc-file-list.plc-file-list--has-items > .organizer-row:first-child {
  border-top: 1px solid var(--border);
}

.plc-file-list > .organizer-row:last-child {
  border-bottom: none;
}

.plc-empty-row {
  color: var(--muted);
  background: transparent;
  pointer-events: none;
}

.plc-empty-row:hover {
  background: transparent;
}
.file-row-actions-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.file-row .row-buttons svg {
  transform: translateY(1px);
}

.btn-tiny {
  margin-right: 0;
  padding: 0.18rem 0.45rem;
  font-size: 0.72rem;
}
.doc-row--file-inline .doc-link--static {
  width: 100%;
}
.file-row--empty .row-left { color: var(--muted); }
.file-link { color: var(--text); }
.file-link:hover { color: var(--text); text-decoration: underline; }
.unfiled-header .doc-link {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.folder-row--created { animation: organizer-row-in 320ms ease-out; }
.file-row--created { animation: organizer-file-in 260ms ease-out; }
.file-row--deleting { animation: organizer-file-out 220ms ease-out forwards; }
@keyframes organizer-row-in {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes organizer-file-in {
  0% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes organizer-file-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.recent-docs li.doc-row--new-untitled .doc-link,
.recent-docs li.doc-row--new-untitled .doc-link:hover { color: var(--danger, #c53030); }
.recent-docs li.doc-row--new-untitled .doc-count { color: var(--danger, #c53030); }
.recent-docs li.doc-row--empty .doc-link,
.recent-docs li.doc-row--empty .doc-link:hover,
.recent-docs li.doc-row--empty .doc-count {
  color: var(--muted);
}
.recent-docs li.doc-row--deleting { overflow: hidden; animation: doc-row-delete-poof 0.6s ease-out forwards; pointer-events: none; }
.recent-docs li.doc-row--deleting .doc-link { pointer-events: none; }
@keyframes doc-row-delete-poof {
  0% { background: rgba(255, 255, 255, 0.08); opacity: 1; max-height: 6rem; }
  40% { background: rgba(255, 255, 255, 0.04); opacity: 1; max-height: 6rem; }
  100% { background: transparent; opacity: 0; max-height: 0; border-bottom-width: 0; padding-top: 0; padding-bottom: 0; }
}
.recent-docs li.doc-row--replaced-ghost { overflow: hidden; pointer-events: none; animation: doc-row-replaced-collapse 0.5s linear forwards; }
@keyframes doc-row-replaced-collapse {
  0% { background: transparent; opacity: 1; max-height: 6rem; }
  1% { max-height: 5.85rem; }
  100% { background: transparent; opacity: 0; max-height: 0; border-bottom-width: 0; padding-top: 0; padding-bottom: 0; }
}
.recent-docs li.doc-row--just-imported { overflow: hidden; animation: doc-row-import-slide-in 0.5s ease-out forwards; }
.recent-docs li.doc-row--just-imported-delayed { animation-delay: 240ms; animation-fill-mode: both; }
@keyframes doc-row-import-slide-in {
  0% { max-height: 0; opacity: 0; border-bottom-width: 0; }
  100% { max-height: 6rem; opacity: 1; border-bottom-width: 1px; }
}
.recent-docs li.doc-row--existing-top-flash { animation: doc-row-existing-top-flash 0.95s ease-out forwards; }
@keyframes doc-row-existing-top-flash {
  0% { background: rgba(185, 28, 28, 0.52); }
  45% { background: rgba(185, 28, 28, 0.30); }
  100% { background: transparent; }
}
.doc-link { display: flex; justify-content: space-between; align-items: center; padding: 0.62rem 0.95rem; color: var(--text); }
.doc-link:hover { background: var(--surface-raised); text-decoration: none; color: var(--text); }
.doc-title-block { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.doc-name { font-weight: 500; }
.doc-disambiguator { font-size: 0.85rem; color: var(--muted); }
.doc-count { font-size: 0.85rem; color: var(--muted); }
.empty-state { color: var(--muted); font-size: 0.95rem; }

/* Import */
.import-page { max-width: 28rem; margin: 0 auto; padding: 2rem 1.5rem; }
.import-header { margin-bottom: 1.5rem; }
.import-header p { color: var(--muted); font-size: 0.9rem; margin: 0.35rem 0 0 0; }
.import-form .field { margin-bottom: 1.25rem; }
.import-form label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; }
.import-form .file-input-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  min-height: 2.25rem;
}
.import-form .file-input-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  margin-left: 0.35rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  line-height: 1.25;
}
.import-form .file-input-btn:hover { background: var(--border); }
.import-form .file-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}
.import-form .file-input-status {
  margin-right: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.import-form .form-actions { display: flex; gap: 0.5rem; margin-top: 1.25rem; }

/* Workspace (edit view) */
.workspace { padding: 0.25rem var(--page-padding) var(--page-padding); max-width: 1400px; margin: 0 auto; }
.workspace-form { display: flex; flex-direction: column; gap: var(--space-md); }

.note-editor-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 60vh;
  padding: 1rem;
}

.note-editor {
  min-height: 56vh;
  outline: none;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}

.note-editor:empty::before {
  content: "Start writing your note...";
  color: var(--text-muted);
}

.workspace-clock {
  min-width: 5.6rem;
  text-align: right;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.item-create-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 13, 0.6);
}

.item-create-modal-backdrop.hidden {
  display: none;
}

.item-create-modal {
  width: min(30rem, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
}

/* ============================================================
   NEXUS STANDARD LIST ROW (Finder file rows, Tasks, …)
   ============================================================ */

.nexus-standard-row,
.finder-file-row {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-radius: 8px;
  padding: var(--nexus-row-padding-block, 7px) var(--nexus-row-padding-inline, 9px);
  min-height: calc(var(--nexus-row-padding-block, 7px) * 2 + var(--nexus-row-min-inner-height, max(18px, calc(0.82rem * 1.2 + 6px + 2px))));
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.finder-file-row:hover,
.finder-file-row:focus-within {
  background: var(--nexus-row-hover-highlight);
}

.task-item-row.nexus-standard-row.is-hovered:not(.task-item-row--checked),
.task-item-row.nexus-standard-row:not(.task-item-row--checked):focus-within {
  background: var(--nexus-row-hover-highlight);
}

/*
 * Main row with subtasks expanded (JS sets .task-item-group--head when subtasks exist and not collapsed).
 * Slightly darker than plain hover so “expanded” reads as a state; hover/focus deepens further.
 */
.task-item-row.nexus-standard-row.task-item-row--main.task-item-group--head.is-hovered:not(.task-item-row--checked),
.task-item-row.nexus-standard-row.task-item-row--main.task-item-group--head:not(.task-item-row--checked):focus-within {
  background: var(--nexus-row-selected-highlight);
}

.task-item-row.nexus-standard-row.task-item-row--main.task-item-group--head:not(.task-item-row--checked) {
  background: var(--nexus-row-selected-highlight);
}

/* Checked main + expanded subtasks: step above flat checked fill, with clearer hover. */
.task-item-row.nexus-standard-row.task-item-row--main.task-item-group--head.task-item-row--checked {
  background: var(--task-group-checked-bg) !important;
}

.task-item-row.nexus-standard-row.task-item-row--main.task-item-group--head.task-item-row--checked.is-hovered,
.task-item-row.nexus-standard-row.task-item-row--main.task-item-group--head.task-item-row--checked:hover,
.task-item-row.nexus-standard-row.task-item-row--main.task-item-group--head.task-item-row--checked:focus-within {
  background: var(--task-group-checked-bg-hover) !important;
}

.nexus-standard-row__main {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--nexus-row-gap, 9px);
  padding-left: 0;
  margin-left: 0;
  text-align: left;
}

/* Row press feedback: only row text scales (icons/check circles stay static). */
.task-item-text,
.finder-file-name,
.settings-themes-item-meta,
.settings-themes-item .settings-themes-item-btn,
.doc-name,
.file-link,
.finder-folder-name,
.finder-tree__label,
.desktop-side-panel-app-label {
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nexus-standard-row:active:not(:has(.item-action-btn:active, .row-plus:active, .row-pencil:active, .finder-folder-add-btn:active, .settings-themes-item-action-btn:active)) .task-item-text,
.nexus-standard-row:active:not(:has(.item-action-btn:active, .row-plus:active, .row-pencil:active, .finder-folder-add-btn:active, .settings-themes-item-action-btn:active)) .finder-file-name,
.nexus-standard-row:active:not(:has(.item-action-btn:active, .row-plus:active, .row-pencil:active, .finder-folder-add-btn:active, .settings-themes-item-action-btn:active)) .settings-themes-item-meta,
.nexus-standard-row:active:not(:has(.item-action-btn:active, .row-plus:active, .row-pencil:active, .finder-folder-add-btn:active, .settings-themes-item-action-btn:active)) .settings-themes-item-btn,
.organizer-row:active:not(:has(.item-action-btn:active, .row-plus:active, .row-pencil:active)) .doc-name,
.organizer-row:active:not(:has(.item-action-btn:active, .row-plus:active, .row-pencil:active)) .file-link,
.organizer-row:active:not(:has(.item-action-btn:active, .row-plus:active, .row-pencil:active)) .finder-folder-name,
.finder-tree__row-line:active:not(:has(.item-action-btn:active, .row-plus:active, .row-save-here:active, .finder-tree__open-in-app:active)) .finder-tree__label,
.desktop-side-panel-app-row:active:not(:has(.desktop-side-panel-app-action:active)) .desktop-side-panel-app-label,
.settings-sections-list .finder-folder-link:active .finder-folder-name {
  transform: scale(0.94);
  transition: transform 75ms cubic-bezier(0.4, 0, 1, 1);
}

/* Whole-row main column: pointer + flex fill (Tasks, Finder, Settings saved themes). See NexusUiHelper / lib/nexus_ui.js. */
.nexus-clickable-row__main {
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}

.nexus-standard-row__leading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--nexus-list-leading-size, 18px);
  width: var(--nexus-list-leading-size, 18px);
  height: var(--nexus-list-leading-size, 18px);
  line-height: 0;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

.nexus-standard-row__leading .task-toggle {
  width: 100%;
  height: 100%;
}

.nexus-standard-row__leading .task-toggle svg.material-icon {
  width: 100%;
  height: 100%;
}

.finder-file-row .organizer-row-right {
  gap: var(--nexus-small-action-gap);
  justify-content: flex-end;
  flex: 0 0 auto !important;
  margin-left: 0.45rem !important;
}

/* Finder: fade action buttons in; Tasks use display:none so the progress rail can sit flush right. */
.finder-file-row .item-action-btn {
  display: inline-flex;
  appearance: none;
  border: none;
  font: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.finder-file-row:hover .item-action-btn,
.finder-file-row:focus-within .item-action-btn {
  opacity: 1;
  pointer-events: auto;
}

.finder-file-row .item-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
}

@media (hover: none) {
  .finder-file-row .item-action-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

.task-list-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 0;
  padding: 1rem;
}

.task-list-shell.task-list-shell--empty {
  display: none;
}

.task-list-rows {
  /* Whole-pixel row control height avoids 100% zoom seam artifacts from half-pixel accumulation. */
  --task-text-control-height: 24px;
  --task-list-row-gap: 0.55rem;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: var(--task-list-row-gap) var(--task-list-row-gap) var(--task-list-row-gap);
  margin: 0;
  width: 100%;
  gap: 0 !important;
}

.task-item-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 !important;
  position: relative;
  touch-action: manipulation;
  transition: background-color 140ms ease, border-color 140ms ease, max-height 220ms ease, opacity 180ms ease, transform 220ms ease, padding 220ms ease, border-width 220ms ease;
  cursor: grab;
}

.task-item-row:not(.nexus-standard-row) {
  padding: 0.5rem 0.7rem;
}

/* Match vertical inset on the leading icon; drop card borders (Finder-like). */
.task-item-row.nexus-standard-row {
  padding: var(--nexus-row-padding-block, 7px) var(--nexus-row-padding-inline, 9px);
  border: none;
  transition: background 140ms ease, color 140ms ease, max-height 220ms ease, opacity 180ms ease, transform 220ms ease, padding 220ms ease;
}

.task-item-row.nexus-standard-row .organizer-row-right {
  gap: 0.35rem;
  justify-content: flex-end;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.task-item-row--main {
  margin-top: var(--task-list-row-gap, 0.55rem) !important;
  --completion: 0;
}

.task-item-row--main:first-child {
  margin-top: var(--task-list-row-gap, 0.55rem) !important;
}

.task-item-row--main .task-item-text {
  font-weight: 600;
}

.task-item-row--subtask {
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-style: solid;
  border-color: var(--border);
  max-height: 3.4rem;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
}

.task-item-row.nexus-standard-row.task-item-row--subtask {
  border: none;
}

.task-item-row--subtask.is-collapsed {
  /* Must beat .nexus-standard-row min-height or max-height:0 is ignored and collapsed subtasks still stack full height. */
  max-height: 0;
  min-height: 0 !important;
  opacity: 0;
  transform: translateY(-6px);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none;
}

.task-item-row--dragging {
  opacity: 0.48;
  cursor: grabbing;
}

.task-list-rows--drag-active .task-item-row--drop-before::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  border-top: 2px dotted color-mix(in srgb, var(--accent) 40%, rgba(255, 255, 255, 0.72));
  pointer-events: none;
  z-index: 2;
}

.task-item-row--drop-after::after {
  content: none;
}

.task-list-rows--drag-active .task-item-row--drop-gap-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc((var(--task-list-row-gap, 0.55rem) / -2) - 1px);
  border-bottom: 2px dotted color-mix(in srgb, var(--accent) 40%, rgba(255, 255, 255, 0.72));
  pointer-events: none;
  z-index: 2;
}

.task-list-content-shell {
  position: relative;
}

.task-list-content-shell--drag-active {
  min-height: 56px;
}

.task-list-rows {
  position: relative;
}

.task-list-rows--drag-active.task-list-rows--drop-tail::after {
  content: "";
  position: absolute;
  left: var(--task-list-row-gap, 0.55rem);
  right: var(--task-list-row-gap, 0.55rem);
  bottom: calc((var(--task-list-row-gap, 0.55rem) / 2) - 1px);
  border-bottom: 2px dotted rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 3;
}

.task-list-content-shell--drag-active.task-list-content-shell--drop-empty::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  border-top: 2px dotted rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 2;
}

@keyframes task-row-drop-flash {
  0% { background: color-mix(in srgb, var(--accent) 30%, rgba(74, 144, 226, 0.55)); }
  100% { background: transparent; }
}

.task-item-row--drop-flash {
  animation: task-row-drop-flash 1s ease-out;
}

.task-item-row--main + .task-item-row--subtask {
  margin-top: 0 !important;
}

.task-item-row--subtask + .task-item-row--main {
  margin-top: var(--task-list-row-gap, 0.55rem) !important;
}

.task-item-row--main + .task-item-row--main {
  margin-top: var(--task-list-row-gap, 0.55rem) !important;
}

.task-item-text,
.task-item-text--subtask {
  margin-left: 0 !important;
  font-size: var(--os-title-size);
  height: var(--task-text-control-height);
  line-height: var(--task-text-control-height);
  display: inline-flex;
  align-items: center;
}

.task-item-text--subtask {
  color: var(--text);
}

.task-item-group--head {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.task-item-group--child {
  border-top: none;
  border-top-width: 0 !important;
  border-radius: 0;
}

.task-item-group--tail {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.task-item-row:not(.nexus-standard-row).is-hovered:not(.task-item-row--checked),
.task-item-row:not(.nexus-standard-row):not(.task-item-row--checked):focus-within {
  background: rgba(148, 163, 184, 0.05);
  border-color: #3b82f6;
}

.task-item-row--subtask:not(.nexus-standard-row).is-hovered:not(.task-item-row--checked),
.task-item-row--subtask:not(.nexus-standard-row):not(.task-item-row--checked):focus-within {
  border-color: #3b82f6;
  box-shadow: none;
}

.task-item-row:not(.nexus-standard-row):has(+ .task-item-row--subtask:hover),
.task-item-row:not(.nexus-standard-row):has(+ .task-item-row--subtask:focus-within) {
  border-bottom-color: #3b82f6 !important;
}

.task-item-row:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed)) {
  border-bottom-color: rgba(34, 197, 94, 0.42) !important;
}

.task-item-row:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed):hover),
.task-item-row:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed):focus-within) {
  border-bottom-color: rgba(34, 197, 94, 0.42) !important;
}

.task-item-row.task-item-row--checked:has(+ .task-item-row--subtask:not(.task-item-row--checked):hover),
.task-item-row.task-item-row--checked:has(+ .task-item-row--subtask:not(.task-item-row--checked):focus-within) {
  border-bottom-color: rgba(34, 197, 94, 0.42) !important;
}

.task-item-row--subtask:not(.task-item-row--checked):hover:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed)),
.task-item-row--subtask:not(.task-item-row--checked):focus-within:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed)) {
  border-bottom-color: rgba(34, 197, 94, 0.42) !important;
}

/* Standard task rows intentionally render borderless; suppress legacy border-bottom adjacency paint. */
.task-item-row.nexus-standard-row,
.task-item-row.nexus-standard-row:hover,
.task-item-row.nexus-standard-row:focus-within,
.task-item-row.nexus-standard-row.task-item-row--checked,
.task-item-row.nexus-standard-row.task-item-row--checked:hover,
.task-item-row.nexus-standard-row.task-item-row--checked:focus-within,
.task-item-row.nexus-standard-row:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed)),
.task-item-row.nexus-standard-row:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed):hover),
.task-item-row.nexus-standard-row:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed):focus-within),
.task-item-row.nexus-standard-row.task-item-row--checked:has(+ .task-item-row--subtask:not(.task-item-row--checked):hover),
.task-item-row.nexus-standard-row.task-item-row--checked:has(+ .task-item-row--subtask:not(.task-item-row--checked):focus-within),
.task-item-row--subtask.nexus-standard-row:not(.task-item-row--checked):hover:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed)),
.task-item-row--subtask.nexus-standard-row:not(.task-item-row--checked):focus-within:has(+ .task-item-row--subtask.task-item-row--checked:not(.is-collapsed)) {
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-bottom-color: transparent !important;
}

.task-item-row--checked {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
}

.task-item-row.nexus-standard-row.task-item-row--checked {
  border: none;
}

.task-item-row--checked:hover {
  background: rgba(34, 197, 94, 0.24) !important;
  border-color: rgba(34, 197, 94, 0.52) !important;
}

/* Main tasks only: subtler hover lift than checked subtasks. */
.task-item-row.task-item-row--main.task-item-row--checked:hover,
.task-item-row.task-item-row--main.task-item-row--checked:focus-within {
  background: rgba(34, 197, 94, 0.21) !important;
  border-color: rgba(34, 197, 94, 0.47) !important;
}

.task-item-row.nexus-standard-row.task-item-row--checked:hover {
  border: none;
}

/* Expanded subtasks: same family as main-row tint / checked fill, half opacity so they read as grouped, not top-level. */
.task-item-row.nexus-standard-row.task-item-row--subtask:not(.is-collapsed):not(.task-item-row--checked) {
  background: var(--nexus-row-subtask-highlight);
}

/* Hover/focus: match the standard list-row highlight (same as non-expanded main hover). */
.task-item-row.nexus-standard-row.task-item-row--subtask:not(.is-collapsed):not(.task-item-row--checked):hover,
.task-item-row.nexus-standard-row.task-item-row--subtask:not(.is-collapsed):not(.task-item-row--checked):focus-within {
  background: var(--nexus-row-hover-highlight);
}

.task-item-row.nexus-standard-row.task-item-row--subtask:not(.is-collapsed).task-item-row--checked {
  background: rgba(34, 197, 94, 0.09) !important;
}

.task-item-row.nexus-standard-row.task-item-row--subtask:not(.is-collapsed).task-item-row--checked:hover,
.task-item-row.nexus-standard-row.task-item-row--subtask:not(.is-collapsed).task-item-row--checked:focus-within {
  background: rgba(34, 197, 94, 0.12) !important;
}

.task-item-row--checked .task-item-text {
  opacity: 0.75;
}

.task-item-text {
  user-select: none;
}

.task-toggle {
  width: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1;
  touch-action: manipulation;
  cursor: pointer;
}

.task-item-row--checked .task-toggle {
  color: #22c55e;
}

/* ── Task toggle confetti burst ─────────────────────────────────────────────
   JS spawns .task-confetti-particle nodes directly on the toggle.
   Each particle gets --dx/--dy/--color/--dur/--delay custom props.
   They radiate outward ~14-22px, shrink, and vanish — a tight micro-burst.
   ──────────────────────────────────────────────────────────────────────────*/
/* Short radial strokes that begin at ~midpoint of their travel and slide outward */
@keyframes task-confetti-ray {
  0% {
    transform: translate(var(--start-x, 0px), var(--start-y, 0px)) rotate(var(--angle, 0deg));
    opacity: 1;
  }
  100% {
    transform: translate(var(--end-x, 0px), var(--end-y, 0px)) rotate(var(--angle, 0deg));
    opacity: 0;
  }
}

.task-toggle {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.task-confetti-particle {
  position: fixed;
  width: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--color, #22c55e);
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  animation: task-confetti-ray var(--dur, 375ms) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay, 0ms) forwards;
  transform-origin: left center;
  margin-top: -1.5px;
}

.task-item-row:not(.nexus-standard-row) .organizer-row-right {
  gap: var(--nexus-small-action-gap);
  justify-content: flex-end;
  flex: 0 0 auto !important;
  margin-left: 0.45rem !important;
}

.task-item-row--main.is-editing .organizer-row-right {
  gap: 0.12rem;
  margin-left: 0.2rem !important;
}

.task-item-row .item-action-btn,
.task-item-row .row-plus,
.task-item-row .item-action-delete {
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* Tasks: actions take no layout until hover — progress bar stays flush right. */
.task-item-row.nexus-standard-row .item-action-btn,
.task-item-row.nexus-standard-row .row-plus {
  display: none;
}

.task-item-row.nexus-standard-row.is-hovered .item-action-btn,
.task-item-row.nexus-standard-row.is-hovered .row-plus,
.task-item-row.nexus-standard-row:focus-within .item-action-btn,
.task-item-row.nexus-standard-row:focus-within .row-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-item-row:not(.nexus-standard-row) .item-action-btn,
.task-item-row:not(.nexus-standard-row) .row-plus {
  display: none;
}

.task-item-row:not(.nexus-standard-row).is-hovered .item-action-btn,
.task-item-row:not(.nexus-standard-row).is-hovered .row-plus,
.task-item-row:not(.nexus-standard-row):hover .item-action-btn,
.task-item-row:not(.nexus-standard-row):hover .row-plus,
.task-item-row:not(.nexus-standard-row):focus-within .item-action-btn,
.task-item-row:not(.nexus-standard-row):focus-within .row-plus {
  display: inline-flex;
}

.task-item-row.is-editing .item-action-btn,
.task-item-row.is-editing .row-plus,
.task-item-row.is-editing .item-action-delete {
  display: none !important;
}

.task-item-row.is-editing .organizer-row-right {
  display: none !important;
}

/* On touch devices (iPad, mobile), always show action buttons for single-tap functionality */
@media (hover: none) {
  .task-item-row.nexus-standard-row .item-action-btn,
  .task-item-row.nexus-standard-row .row-plus {
    display: inline-flex;
  }

  .task-item-row:not(.nexus-standard-row) .item-action-btn,
  .task-item-row:not(.nexus-standard-row) .row-plus {
    display: inline-flex;
  }
  
  /* Hide progress bar/label on touch to save space */
  .task-item-row .task-progress-bar,
  .task-item-row .task-progress-label {
    display: none;
  }
}

.task-item-row .task-progress-bar,
.task-item-row .task-progress-label {
  display: inline-flex;
}

.task-item-row:hover .task-progress-bar,
.task-item-row:hover .task-progress-label,
.task-item-row:focus-within .task-progress-bar,
.task-item-row:focus-within .task-progress-label {
  display: none;
}

.task-item-row.is-editing .task-progress-bar,
.task-item-row.is-editing .task-progress-label {
  display: none;
}

.task-item-row--subtask .row-plus {
  display: none;
}

.task-progress-bar {
  width: 2.5rem;
  height: 0.3rem;
  display: block;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-right: 0;
}

.task-progress-bar-fill {
  display: block;
  height: 100%;
  /* width driven by --completion CSS variable set per-row in JS.
     Using width (layout property) instead of transform: scaleX so that
     a forced layout flush reliably repaints the bar after DOM mutations.
     will-change: transform was creating a stale compositor layer that
     ignored CSS variable updates until hover triggered a style recalc. */
  width: calc(var(--completion, 0) * 100%);
  background: rgba(34, 197, 94, 0.9);
  border-radius: inherit;
  transition: width 180ms ease;
}

.task-progress-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 2rem;
  text-align: right;
  display: none !important;
}

.task-item-row--main[data-has-subtasks="false"] .task-progress-bar,
.task-item-row--main[data-has-subtasks="false"] .task-progress-label {
  display: none !important;
}

.task-edit-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  padding: 0 0.5rem;
  height: var(--task-text-control-height);
  line-height: var(--task-text-control-height);
  box-sizing: border-box;
  outline: none;
}

.task-item-row--subtask .task-edit-input {
  font-size: 0.93rem;
}

.task-item-row.nexus-standard-row .nexus-clickable-row__main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.task-item-row--main.nexus-standard-row.is-editing .nexus-standard-row__main {
  padding-right: 0.08rem !important;
}

.task-list-rows .organizer-row:not(.nexus-standard-row) {
  padding-left: 0 !important;
}

.workspace-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.375rem var(--space-lg);
  margin: 0;
}
.workspace-header .header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.workspace-header .header-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.workspace-title-input {
  font-size: 2.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0.15rem 0.12rem 0.15rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  width: auto;
  min-width: 10ch;
  max-width: 32rem;
  font-family: inherit;
  box-sizing: content-box;
}
.workspace-title-input:focus { outline: none; border-color: var(--accent); background: var(--surface-raised); }
.workspace-title-input::placeholder { color: var(--muted); }
.workspace-title-input:disabled { cursor: default; }

.workspace-header .connection-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.8125rem;
}
.connection-inline {
  padding: 0.15rem 0.2rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.8125rem;
  background: transparent;
  color: var(--text);
  box-sizing: content-box;
}
input.connection-inline {
  width: auto;
  min-width: 12ch;
}
.connection-inline:focus { outline: none; border-color: var(--accent); background: var(--surface-raised); }
.connection-inline.connection-select { cursor: pointer; }
.connection-inline.connection-select:focus:not(:focus-visible) { border-color: transparent; background: transparent; }
.connection-inline:disabled { cursor: default; }
.workspace-title-input.header-status-highlight,
.connection-inline.header-status-highlight {
  color: var(--success);
  border-color: rgba(34, 197, 94, 0.55);
}
.workspace-title-input.header-status-highlight-error,
.connection-inline.header-status-highlight-error {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.6);
}
.connection-inline.cell-invalid {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.6);
}

.workspace-header .header-actions {
  display: flex;
  align-items: center;
  gap: var(--nexus-small-action-gap);
  flex-shrink: 0;
}

.workspace-header .header-actions .btn {
  margin-right: 0;
}
.workspace-header .header-actions-lock-group {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.btn-toolbar-icon {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1;
}

.btn-toolbar-icon svg.material-icon {
  width: 1.2rem;
  height: 1.2rem;
}
.workspace-form.workspace-locked .btn-add-row,
.workspace-form.workspace-locked .btn-select-mode { display: none; }
.btn-select-mode { font-size: 1.1rem; }
.btn-select-mode:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-select-mode.btn-active { background: rgba(59, 130, 246, 0.35); color: #93c5fd; border-color: var(--accent); }
.btn-select-mode.btn-active:hover { background: rgba(59, 130, 246, 0.45); color: #93c5fd; border-color: var(--accent); }
/* Select mode: whole row clickable (clicks on .cell pass through to td); pointer cursor over row and fields */
.workspace-form.workspace-select-mode .tag-table tbody tr.tag-data-row { cursor: pointer; }
.workspace-form.workspace-select-mode .tag-table tbody tr.tag-data-row td { cursor: pointer; }
.workspace-form.workspace-select-mode .tag-table tbody tr.tag-data-row .cell { pointer-events: none; cursor: pointer; }
.workspace-form.workspace-select-mode .tag-table tbody tr.tag-data-row .data-type-trigger { pointer-events: none; cursor: pointer; }
.workspace-header .loaded-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--muted);
  margin: var(--space-sm) 0 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  user-select: text;
}
.workspace-header .loaded-status [data-tag-table-target="statusMessage"] {
  cursor: pointer;
  color: var(--text-muted);
}
.workspace-header .loaded-status [data-tag-table-target="statusMessage"].status-detailed {
  color: var(--success);
  font-weight: 500;
}
.workspace-header .loaded-status [data-tag-table-target="statusMessage"].status-detailed-deleted {
  color: #f87171;
}
.workspace-header .loaded-status [data-tag-table-target="statusMessage"].status-detailed-unique {
  color: #eab308;
}
.workspace-header .loaded-status [data-tag-table-target="statusMessage"].status-restored-flash {
  animation: status-restored-flash 0.8s ease-out;
}
@keyframes status-restored-flash {
  0% { color: #4ade80; text-shadow: 0 0 0 rgba(74, 222, 128, 0.0); }
  40% { color: #86efac; text-shadow: 0 0 8px rgba(74, 222, 128, 0.35); }
  100% { color: inherit; text-shadow: 0 0 0 rgba(74, 222, 128, 0.0); }
}
.workspace-header .loaded-status-count {
  margin-left: auto;
}

.table-container {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: var(--popup-padding-px, 0px);
}
.tag-table { width: 100%; border-collapse: collapse; min-width: 960px; font-size: 0.875rem; }
.tag-table th, .tag-table td { padding: 0.4rem 0.6rem; border: 1px solid var(--border); text-align: left; vertical-align: middle; }
.tag-table th { background: var(--surface-raised); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.tag-table tbody tr.drag-source { opacity: 0.5; }
/* Use border on cells so drop line is visible on Safari/macOS (inset box-shadow on tr often doesn't paint) */
.tag-table tbody tr.drop-before td { border-top: 3px solid var(--accent); }
.tag-table tbody tr.drop-after td { border-bottom: 3px solid var(--accent); }
.tag-table th:nth-child(8), .tag-table td:nth-child(8) { min-width: 7.5rem; }
.tag-table th a { color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.tag-table th a:hover { color: var(--accent); text-decoration: none; }
.workspace-locked .tag-table th a { pointer-events: none; cursor: default; opacity: 0.8; }
.tag-table th.sort-asc a::after { content: " ↑"; color: var(--accent); font-weight: 700; }
.tag-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
/* Row hover is JS-controlled (one row at a time) to avoid ghost highlights after drag on macOS */
.tag-table tbody tr.row-hover { background: rgba(255,255,255,0.05); }
.tag-table tbody tr.row-selected { background: rgba(59, 130, 246, 0.15) !important; }
.tag-table tbody tr.row-selected.row-hover { background: rgba(59, 130, 246, 0.2) !important; }
.tag-table tbody tr.row-status-highlight { background: rgba(34, 197, 94, 0.25) !important; }
.tag-table tbody tr.row-status-highlight.row-hover { background: rgba(34, 197, 94, 0.35) !important; }
.tag-table tbody tr.row-deleted-ghost td {
  padding: 0.4rem 0.6rem;
  line-height: 1.5;
}
.tag-table .cell.ghost-cell {
  display: block;
  pointer-events: none;
}
.tag-table tbody tr.row-status-highlight-deleted { background: rgba(239, 68, 68, 0.28) !important; }
.tag-table tbody tr.row-status-highlight-deleted.row-hover { background: rgba(239, 68, 68, 0.33) !important; }
.tag-table tbody tr.row-moved-ghost { cursor: pointer; }
.tag-table tbody tr.row-status-highlight-unique { background: rgba(234, 179, 8, 0.25) !important; }
.tag-table tbody tr.row-status-highlight-unique.row-hover { background: rgba(234, 179, 8, 0.33) !important; }
.tag-table tbody tr.row-change-flash-green { animation: row-change-flash-green 0.72s ease-out; }
.tag-table tbody tr.row-change-flash-yellow { animation: row-change-flash-yellow 0.72s ease-out; }
.tag-table tbody tr.row-change-flash-red { animation: row-change-flash-red 0.72s ease-out; }
.tag-table tbody tr.row-change-flash-green td { animation: row-cell-flash-green 0.72s ease-out; }
.tag-table tbody tr.row-change-flash-yellow td { animation: row-cell-flash-yellow 0.72s ease-out; }
.tag-table tbody tr.row-change-flash-red td { animation: row-cell-flash-red 0.72s ease-out; }
@keyframes row-change-flash-green {
  0% { background: rgba(34, 197, 94, 0.44); }
  100% { background: transparent; }
}
@keyframes row-change-flash-yellow {
  0% { background: rgba(234, 179, 8, 0.42); }
  100% { background: transparent; }
}
@keyframes row-change-flash-red {
  0% { background: rgba(239, 68, 68, 0.4); }
  100% { background: transparent; }
}
@keyframes row-cell-flash-green {
  0% { box-shadow: inset 0 0 0 999px rgba(34, 197, 94, 0.2); }
  100% { box-shadow: inset 0 0 0 999px rgba(34, 197, 94, 0.0); }
}
@keyframes row-cell-flash-yellow {
  0% { box-shadow: inset 0 0 0 999px rgba(234, 179, 8, 0.22); }
  100% { box-shadow: inset 0 0 0 999px rgba(234, 179, 8, 0.0); }
}
@keyframes row-cell-flash-red {
  0% { box-shadow: inset 0 0 0 999px rgba(239, 68, 68, 0.22); }
  100% { box-shadow: inset 0 0 0 999px rgba(239, 68, 68, 0.0); }
}
.tag-table tbody tr.row-restored-flash { animation: row-restored-flash 0.9s ease-out; }
@keyframes row-restored-flash {
  0% { background: rgba(34, 197, 94, 0.45); }
  100% { background: transparent; }
}

@keyframes content-window-focus-flash {
  0% { background: rgba(255, 255, 255, 0.7) !important; }
  100% { background: transparent; }
}

.content-window--focus-flash {
  animation: content-window-focus-flash 0.6s ease-out;
}
.tag-table tbody tr.tag-row-template { display: none !important; }
.tag-table .cell { width: 100%; min-width: 3rem; padding: 0.3rem 0.5rem; border: 1px solid transparent; border-radius: 4px; font: inherit; font-size: 0.875rem; background: transparent; color: var(--text); }
.tag-table .cell:focus { outline: none; border-color: var(--accent); background: var(--surface-raised); }
.tag-table select.cell { cursor: pointer; }
.tag-table select.cell:focus:not(:focus-visible) { border-color: transparent; background: transparent; }
.tag-table .cell.cell-invalid,
.tag-table .cell.cell-duplicate { color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
.workspace-title-input.cell-invalid { color: #f87171; border-color: rgba(248, 113, 113, 0.6); }
.tag-table .cell.field-change-flash-green,
.connection-inline.field-change-flash-green,
.workspace-title-input.field-change-flash-green,
.data-type-trigger.field-change-flash-green {
  animation: field-change-flash-green 0.72s ease-out;
}
.tag-table .cell.field-change-flash-yellow,
.connection-inline.field-change-flash-yellow,
.workspace-title-input.field-change-flash-yellow,
.data-type-trigger.field-change-flash-yellow {
  animation: field-change-flash-yellow 0.72s ease-out;
}
.tag-table .cell.field-change-flash-red,
.connection-inline.field-change-flash-red,
.workspace-title-input.field-change-flash-red,
.data-type-trigger.field-change-flash-red {
  animation: field-change-flash-red 0.72s ease-out;
}
@keyframes field-change-flash-green {
  0% { box-shadow: inset 0 0 0 999px rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.7); }
  100% { box-shadow: inset 0 0 0 999px rgba(34, 197, 94, 0.0); }
}
@keyframes field-change-flash-yellow {
  0% { box-shadow: inset 0 0 0 999px rgba(234, 179, 8, 0.2); border-color: rgba(234, 179, 8, 0.7); }
  100% { box-shadow: inset 0 0 0 999px rgba(234, 179, 8, 0.0); }
}
@keyframes field-change-flash-red {
  0% { box-shadow: inset 0 0 0 999px rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.7); }
  100% { box-shadow: inset 0 0 0 999px rgba(239, 68, 68, 0.0); }
}

/* Data type popup */
.data-type-trigger { width: 100%; min-width: 3rem; padding: 0.3rem 0.5rem; border: 1px solid transparent; border-radius: 4px; font: inherit; font-size: 0.875rem; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.data-type-trigger:focus, .data-type-trigger:focus-visible { outline: none; border-color: var(--accent); background: var(--surface-raised); }
.data-type-trigger:hover:not(:disabled) { border-color: var(--border); background: var(--surface-raised); }
.data-type-trigger:disabled { cursor: default; }
.data-type-popup { position: fixed; z-index: 1000; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); padding: 1rem 1.25rem; min-width: 20rem; }
.data-type-popup.hidden { display: none; }
.data-type-popup-inner { display: flex; flex-direction: column; gap: 0.75rem; }
.data-type-popup-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.data-type-popup-row .data-type-popup-label { min-width: 4rem; font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.data-type-popup-select { flex: 1; min-width: 10rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 0.875rem; background: var(--surface); color: var(--text); }
.data-type-popup-select:focus:not(:focus-visible) { outline: none; border-color: var(--border); background: var(--surface); }
.data-type-popup-select.data-type-unique { color: #eab308; border-color: rgba(234, 179, 8, 0.5); }
.data-type-popup-hint { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--muted); }
.tag-table .cell.data-type-unique,
.tag-table .data-type-trigger.data-type-unique { color: #eab308; border-color: rgba(234, 179, 8, 0.4); }

/* Organizer row hard overrides */
.organizer-row {
  display: flex !important;
  align-items: center !important;
  width: var(--organizer-row-width, 100%) !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  transition: all 150ms ease;
}

.organizer-row.collapsing {
  height: 0 !important;
  opacity: 0;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: all 150ms ease;
}

.organizer-row .row-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
  padding-left: 12px !important;
  margin-left: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.row-pencil {
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nexus-icon-btn-size);
  height: var(--nexus-icon-btn-size);
  min-width: var(--nexus-icon-btn-size);
  min-height: var(--nexus-icon-btn-size);
  aspect-ratio: 1;
  padding: 0;
  margin-right: 0.35rem;
  border: none;
  border-radius: var(--nexus-icon-btn-radius);
  background: transparent;
  color: var(--text-muted);
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
  transition: opacity 120ms ease, color 0.12s ease, background 0.12s ease;
}

.row-pencil svg.material-icon {
  width: var(--nexus-icon-btn-icon);
  height: var(--nexus-icon-btn-icon);
  flex-shrink: 0;
  display: block;
}

.organizer-row:hover .row-pencil,
.organizer-row:focus-within .row-pencil {
  opacity: 1;
  pointer-events: auto;
}

.row-pencil:hover,
.row-pencil:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* On touch devices (iPad, mobile), always show folder edit buttons for single-tap functionality */
@media (hover: none) {
  .row-pencil {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Task editing state: keep pencil button highlighted */
.task-item-row.is-editing .row-pencil {
  opacity: 1;
  pointer-events: auto;
  color: var(--text);
  background: rgba(255, 255, 255, 0.12);
}

/* Stretch the text box to reach the buttons */
.task-item-row .row-left {
  flex: 1 1 auto;
  min-width: 0;
}

.task-item-row .row-right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  margin-left: 0.4rem;
}

/* Subtasks: no + button, so more space for text */
.task-item-row--subtask .row-right {
  margin-left: 0.5rem;
}

.rename-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
  display: grid;
  place-items: center;
}

.rename-modal-backdrop.hidden {
  display: none;
}

.rename-modal {
  width: min(92vw, 28rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: 1rem;
}

.task-edit-modal {
  width: min(92vw, 38rem);
  padding: 1rem;
}

.task-edit-modal .rename-modal-title {
  margin-bottom: 0.75rem;
}

.task-edit-modal .rename-modal-input {
  font-size: 1rem;
}

.task-edit-modal .rename-modal-actions {
  margin-top: 0.85rem;
  gap: 0.5rem;
}

.task-edit-modal .btn {
  min-width: 0;
  font-size: 0.9rem;
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
}

.rename-modal-title {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: var(--text);
}

.rename-modal-input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font: inherit;
}

.rename-modal-input.cell-invalid {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.6);
}

.rename-modal-actions {
  margin-top: 0.85rem;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.btn-danger {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}

.btn-danger:hover {
  background: #991b1b;
  color: #fff;
}

.organizer-row .row-right {
  margin-left: auto !important;
  padding-right: 12px !important;
  text-align: right !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.folder-row.folder-collapsed .row-left .action {
  display: none !important;
}

.folder-row.folder-expanded .row-left .action {
  display: inline-flex !important;
}

.file-row .row-left .action,
.doc-row--file-inline .row-left .action {
  display: inline-flex !important;
}

.inline-rename-hidden {
  display: none !important;
}

.inline-rename-input {
  min-width: 10ch;
  max-width: 28ch;
  width: auto;
  padding: 0.16rem 0.38rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.2;
}

.inline-rename-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Login Page */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-padding);
  background: var(--bg);
}

.login-form-wrapper {
  width: 100%;
  max-width: 380px;
  text-align: center;
  background: var(--surface);
  padding: 2.5rem 2rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.login-form-wrapper .app-title {
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.login-subtitle {
  color: var(--text-muted);
  margin: 0 0 2rem 0;
  font-size: 0.95rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-input {
  padding: 0.6rem 0.9rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s, background-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.btn-block {
  width: 100%;
  display: block;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}

.login-error {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 0 0 1.5rem 0;
  font-size: 0.9rem;
}

/* Auth Toolbar */
.auth-toolbar {
  position: fixed;
  top: 0;
  right: 0;
  padding: var(--space-md);
  z-index: 1000;
}

.auth-menu-wrapper {
  position: relative;
  display: inline-block;
}

.auth-menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  transition: background-color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.auth-menu-toggle:hover {
  background: var(--surface-raised);
  border-color: var(--accent);
}

.auth-user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.auth-menu-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.auth-menu-toggle[aria-expanded="true"] .auth-menu-icon {
  transform: rotate(180deg);
}

.auth-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 140px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.auth-menu-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.auth-menu-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.auth-menu-item:hover {
  background: var(--border);
  color: var(--accent);
}

.flash-alert {
  position: fixed;
  top: var(--page-padding);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  max-width: 500px;
  z-index: 999;
  font-size: 0.9rem;
}

/* Finder OS Interface */
.finder-shell {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.finder-window {
  display: none !important;
}

.finder-sidebar {
  background: rgba(18, 19, 28, 0.45);
  padding: 0.85rem;
  overflow-y: auto;
}

.finder-sidebar-header {
  padding: 0.3rem 0;
}

.finder-sidebar-header h2 {
  margin: 0;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.finder-sidebar-header p {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.finder-nav-group {
  margin-bottom: 0.9rem;
  display: grid;
  gap: 0;
}

.finder-nav-group > .finder-item {
  margin-top: 0.35rem;
}

.finder-nav-group > .finder-item:first-of-type {
  margin-top: 0.2rem;
}

.finder-nav-group[aria-label="Folders"] {
  margin-bottom: 0.35rem;
}

.finder-nav-group[aria-label="Folders"] > .finder-item:first-of-type {
  margin-top: 0.35rem;
}

.finder-nav-group h3 {
  margin: 0 0 0.15rem;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.finder-subgroup-title {
  margin: 0.35rem 0 0.1rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.finder-item {
  box-sizing: border-box;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.finder-item:not(.is-active):not(.is-folder-selected):hover {
  background: rgba(148, 163, 184, 0.05);
  border-color: rgba(148, 163, 184, 0.28);
}

.finder-item.is-active {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.32);
  color: #f2f6ff;
}

.finder-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-item-meta {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* Hide folder item count — not needed as on-screen info */
.finder-item[data-folder-id] .finder-item-meta {
  display: none;
}

.finder-item-kind {
  margin-left: auto;
  color: rgba(226, 232, 240, 0.22);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

.finder-empty {
  color: var(--text-muted);
  margin: 0.2rem 0.1rem;
  font-size: 0.82rem;
}

.folder-item-panel {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  pointer-events: none;
  will-change: max-height, opacity, transform;
  transition: max-height 240ms ease, opacity 180ms ease, transform 220ms ease;
}

.folder-item-panel.hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.folder-item-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.finder-item-child {
  margin-left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  font-size: 0.84rem;
  border-radius: 0;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.finder-item-draft {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: default;
}

.finder-item-draft .finder-draft-name {
  flex: 1;
  min-width: 0;
}

.finder-item-type-select {
  min-width: 7.25rem;
  max-width: 7.25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.28rem 0.45rem;
  outline: none;
}

.finder-item-type-select:focus {
  border-color: var(--accent);
}

.finder-empty-child {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) {
  margin-top: 0;
  background: transparent;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child:first-child,
.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-empty-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-empty-child {
  border: 1px solid var(--border);
  border-top: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 0;
  background: transparent;
  margin: 0;
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child:not(.is-active):hover {
  background: rgba(148, 163, 184, 0.1);
  border-left-color: rgba(148, 163, 184, 0.28);
  border-right-color: rgba(148, 163, 184, 0.28);
  border-top-color: rgba(148, 163, 184, 0.28);
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child:not(.is-active):hover:last-child {
  border-bottom-color: rgba(148, 163, 184, 0.28);
}

/* On touch devices, suppress hover on child items to prevent ghost highlight when switching folders */
@media (hover: none) {
  .finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child:not(.is-active):hover,
  .finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child:not(.is-active):hover:last-child {
    background: transparent;
    border-left-color: var(--border);
    border-right-color: var(--border);
    border-top-color: var(--border);
    border-bottom-color: transparent;
  }

  .finder-item:not(.is-active):not(.is-folder-selected):hover {
    background: transparent;
    border-color: transparent;
  }
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child:first-child {
  border-top: 0;
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child:last-child {
  border-bottom: 1px solid var(--border);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child.is-active {
  background: rgba(59, 130, 246, 0.10);
  border-left-color: rgba(59, 130, 246, 0.32);
  border-right-color: rgba(59, 130, 246, 0.32);
  border-top-color: rgba(59, 130, 246, 0.32);
  border-bottom: 1px solid rgba(59, 130, 246, 0.32);
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child.is-active:first-child {
  border-top: 0;
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child.is-active + .finder-item-child {
  border-top-color: transparent;
}

.finder-item[data-folder-id].is-folder-selected + .folder-item-panel:not(.hidden) .finder-item-child.is-active:last-child {
  border-bottom-color: rgba(59, 130, 246, 0.32);
}

.finder-item[data-folder-id].is-folder-selected {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.finder-main-pane {
  position: fixed;
  top: 60px;
  left: 340px;
  right: auto;
  width: 760px;
  height: calc(100vh - 140px);
  background: linear-gradient(180deg, #171823 0%, #11121a 100%);
  border: 1px solid var(--border);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: auto;
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: auto;
  z-index: 15;
  min-width: 420px;
  min-height: 320px;
}

.finder-main-pane.open-left {
  border-radius: 12px 0 0 12px;
}

.finder-main-pane.open-right {
  border-radius: 0 12px 12px 0;
}

.finder-main-pane.opacity-0 {
  transform: scaleX(0);
  box-shadow: none;
  border-color: transparent;
}

.finder-main-pane.hidden {
  display: none;
}

.finder-main-pane.is-switching {
  filter: brightness(0.96);
}

.finder-app-frame {
  display: block;
  min-height: 100%;
  height: 100%;
}

.pane-resize-handle {
  position: absolute;
  z-index: 120;
  background: transparent;
  touch-action: none;
}

.pane-resize-handle--top,
.pane-resize-handle--bottom {
  left: 14px;
  right: 14px;
  height: 12px;
}

.pane-resize-handle--left,
.pane-resize-handle--right {
  top: 14px;
  bottom: 14px;
  width: 12px;
}

.pane-resize-handle--top { top: -1px; cursor: ns-resize; }
.pane-resize-handle--right { right: -1px; cursor: ew-resize; }
.pane-resize-handle--bottom { bottom: -1px; cursor: ns-resize; }
.pane-resize-handle--left { left: -1px; cursor: ew-resize; }

.pane-resize-handle--top-left,
.pane-resize-handle--top-right,
.pane-resize-handle--bottom-left,
.pane-resize-handle--bottom-right {
  width: 14px;
  height: 14px;
}

.pane-resize-handle--top-left { top: -1px; left: -1px; cursor: nwse-resize; }
.pane-resize-handle--top-right { top: -1px; right: -1px; cursor: nesw-resize; }
.pane-resize-handle--bottom-left { bottom: -1px; left: -1px; cursor: nesw-resize; }
.pane-resize-handle--bottom-right { bottom: -1px; right: -1px; cursor: nwse-resize; }

.app-surface {
  --app-main-min-content-width: 432px;
  padding: 0 2rem 1.5rem;
  min-height: 100%;
  container-type: inline-size;
}

.app-surface--tool {
  padding: 0;
  --app-note-body-font-size: 0.92rem;
}

.app-surface-header {
  min-height: var(--os-header-min-height);
  margin: 0;
  display: flex;
  align-items: center;
}

.app-surface-header--task-toolbar {
  justify-content: space-between;
  gap: 0.75rem;
}

.app-surface-header--task-toolbar .app-inline-title {
  flex: 1;
  min-width: 0;
}

.tool-window-header {
  min-height: var(--os-header-min-height);
  margin-bottom: var(--os-header-gap);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  flex-shrink: 0;
}

.tool-window-title {
  font-size: var(--os-title-size);
}

.tool-window-subtitle {
  margin-bottom: var(--os-subtitle-gap);
  font-size: var(--os-subtitle-size);
  line-height: 1.5;
}

.app-surface-header h2:not(.os-window-title) {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.1;
}

.app-inline-title {
  display: inline-block;
  cursor: text;
}

.app-inline-title-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 1.22rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  outline: none;
  width: min(100%, 560px);
}

.app-surface-header p {
  margin: 0.28rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.app-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.app-list-link {
  display: block;
  padding: 0.62rem 0.82rem;
  color: var(--text);
  text-decoration: none;
}

.app-list-link:hover {
  background: rgba(59, 130, 246, 0.1);
  text-decoration: none;
}

.app-empty {
  margin: 0;
  color: var(--text-muted);
}

.app-note-body {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
}

.app-task-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.app-task-list li.is-done {
  text-decoration: line-through;
  color: var(--text-muted);
}

.settings-grid {
  display: grid;
  gap: 0.8rem;
  margin: 0;
}

.settings-grid div {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}

.settings-grid dt {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-bottom: 0.15rem;
}

.settings-grid dd {
  margin: 0;
}

/* ─── Folder-First OS Shell ──────────────────────────────────────────────── */

/* Section heading row: "Folders" h3 + compact + button */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.15rem;
}

.section-heading-row--folders {
  justify-content: flex-start;
  gap: 0.16rem;
}

.section-heading-row--folders h3 {
  margin: 0;
  line-height: 1;
}

.section-add-btn {
  appearance: none;
}

.section-heading-row--folders .section-add-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-1px);
}

.section-heading-row--folders:hover .section-add-btn,
.section-heading-row--folders:focus-within .section-add-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Folder button — actions live inside the highlight bar, between label and count */
.finder-item-actions {
  display: none;
  gap: var(--nexus-small-action-gap);
  flex-shrink: 0;
}

.finder-item:hover .finder-item-actions {
  display: flex;
}

/* On touch devices, always show action buttons (same pattern as task rows) */
@media (hover: none) {
  .finder-item-actions {
    display: flex;
  }

  .section-heading-row--folders .section-add-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Row action overrides (base = :root square .item-action-btn block) */
.task-item-row.is-editing .item-action-btn:not(.item-action-delete) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.item-action-delete:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.item-action-favorite__filled,
.item-action-favorite__outline {
  display: contents;
}

.item-action-favorite[data-is-favorited="false"] .item-action-favorite__filled,
.item-action-favorite:not([data-is-favorited]) .item-action-favorite__filled {
  display: none;
}

.item-action-favorite[data-is-favorited="true"] .item-action-favorite__outline {
  display: none;
}

/* Inline rename input (replaces label text in-place) */
.finder-rename-input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.18rem 0.42rem;
  outline: none;
  width: 100%;
  min-width: 0;
}

/* Hide count when actions are showing so they don't fight for space */
.finder-item:hover .finder-item-meta {
  display: none;
}

/* Hidden new-folder form (toggled by organizer controller) */
.new-folder-form.hidden {
  display: none;
}

.new-folder-form {
  margin-top: 0.4rem;
}

.new-folder-row {
  display: flex;
  gap: 0.35rem;
}

.new-folder-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.55rem;
  outline: none;
  min-width: 0;
}

.new-folder-input:focus {
  border-color: var(--accent);
}

.new-folder-submit {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.79rem;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.new-folder-submit:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Folder view footer */
.app-surface-footer {
  margin-top: 1.1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-create {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}


.btn-create:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(59, 130, 246, 0.06);
}

/* App list — item rows */
.app-list li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.app-list li:last-child {
  border-bottom: none;
}

/* Item row: link flex-grows, badge + actions are right-aligned */
.item-row {
  position: relative;
}

.item-row .app-list-link {
  flex: 1;
}

.item-row-actions {
  display: none;
  gap: 0.1rem;
  flex-shrink: 0;
  padding-right: 0.35rem;
}

.item-row:hover .item-row-actions,
.item-row:focus-within .item-row-actions {
  display: flex;
}

.app-list-badge {
  color: var(--text-muted);
  font-size: 0.76rem;
  padding: 0 0.4rem 0 0;
  flex-shrink: 0;
}

/* Breadcrumb link in note/task-list headers */
.app-breadcrumb-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
}

.app-breadcrumb-link:hover {
  color: var(--accent);
}

/* Note editor */
.note-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0;
}

.note-title-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.note-title-input:focus {
  border-color: var(--accent);
}

.app-content-shell {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.6;
  padding: 0.65rem 0.75rem;
  outline: none;
  flex: 1;
  height: 100%;
  min-height: 0;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}

.note-form-actions {
  display: flex;
  gap: 0.5rem;
}

/* Task list editor */
.task-list-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.app-task-list.editable {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
}

.task-item {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.task-item-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.65rem;
  outline: none;
}

.task-item-input:focus {
  border-color: var(--accent);
}

.task-item-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.3rem;
  line-height: 1;
  transition: color 0.12s ease;
}

.task-item-remove:hover {
  color: #ef4444;
}

/* ============================================================
   NEXUS OS SHELL
   ============================================================ */

/* Desktop Layer */
.nexus-os {
  overflow: hidden;
  /* Shared list row metrics (Finder, Tasks, …) */
  --nexus-row-padding-block: 7px;
  --nexus-row-padding-inline: 9px;
  --nexus-row-gap: 9px;
  --nexus-rename-input-outer-height: calc(0.82rem * 1.2 + 6px + 2px);
  --nexus-row-min-inner-height: max(18px, var(--nexus-rename-input-outer-height));
  /* Leading column (file icon / task toggle / empty slot) — keep rows aligned across surfaces */
  --nexus-list-leading-size: 18px;
  /* Row label text (matches .finder-file-name in Finder file rows) */
  --nexus-list-row-label-size: 0.82rem;
  /* Inline row actions — same tap targets as .item-action-btn */
  --nexus-list-row-action-font-size: 0.78rem;
  /* Task-style group: expanded main row + “sub” content (Theme Studio sections, etc.) */
  --nexus-group-header-expanded-bg: rgba(255, 255, 255, 0.1);
  --nexus-group-body-expanded-bg: rgba(255, 255, 255, 0.05);
}

.desktop-layer {
  position: fixed;
  inset: 0;
  background: linear-gradient(var(--desktop-bg-angle), var(--desktop-bg-color-1) 0%, var(--desktop-bg-color-2) 100%);
  z-index: 0;
  overflow: hidden;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

#desktop-shell {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: auto;
}

#desktop-shell-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 760px;
  min-height: 460px;
}

.desktop-selection-box {
  position: absolute;
  display: none;
  z-index: 1400;
  border: 1px solid hsl(
    var(--desktop-selection-hue)
    var(--desktop-selection-saturation)
    calc(var(--desktop-selection-brightness) * 1.55)
    / 0.9
  );
  background: hsl(
    var(--desktop-selection-hue)
    var(--desktop-selection-saturation)
    var(--desktop-selection-brightness)
    / 0.24
  );
  box-shadow: inset 0 0 0 1px hsl(
    var(--desktop-selection-hue)
    calc(var(--desktop-selection-saturation) * 0.7)
    calc(var(--desktop-selection-brightness) * 1.2)
    / 0.35
  );
  border-radius: 3px;
  pointer-events: none;
}

.desktop-selection-box.is-visible {
  display: block;
}

/* OS shell + Finder embed: no selecting UI chrome / labels; editors opt back in. */
body.nexus-os,
body.nexus-finder-embed {
  user-select: none;
  -webkit-user-select: none;
}

body.nexus-os input,
body.nexus-os textarea,
body.nexus-os select,
body.nexus-os [contenteditable]:not([contenteditable="false"]),
body.nexus-finder-embed input,
body.nexus-finder-embed textarea,
body.nexus-finder-embed select,
body.nexus-finder-embed [contenteditable]:not([contenteditable="false"]) {
  user-select: text;
  -webkit-user-select: text;
}

/*
 * Thin, shell-toned scrollbars under Nexus chrome (Windows/Edge classic tracks are wide unless styled).
 * Finder keeps its own fade-in rules via higher-specificity selectors below.
 */
body.nexus-os,
body.nexus-finder-embed {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

body.nexus-os *::-webkit-scrollbar,
body.nexus-finder-embed *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.nexus-os *::-webkit-scrollbar-track,
body.nexus-finder-embed *::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 6px;
}

body.nexus-os *::-webkit-scrollbar-thumb,
body.nexus-finder-embed *::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

body.nexus-os *::-webkit-scrollbar-thumb:hover,
body.nexus-finder-embed *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.desktop-clock {
  position: fixed;
  top: var(--nexus-desktop-shell-inset);
  left: auto;
  right: var(--nexus-desktop-shell-inset);
  bottom: auto;
  transform: none;
  z-index: 25;
  pointer-events: none;
  user-select: none;
  /* No extra box padding — shell inset is the only offset; balance is tuned on the glyph (see .desktop-clock-display). */
  padding: 0;
  margin: 0;
}

.desktop-clock-display {
  display: block;
  margin: 0;
  /* Match .content-window-chrome-title color (not --text-muted). */
  color: var(--text);
  opacity: 1;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  /* Line boxes add space above caps; nudge up so top gap matches the right edge gap (shell inset). */
  margin-top: -0.11em;
}

/* ── Desktop side panel (top-left toggle → slides with drawer into top-right “close” slot) ── */
.desktop-side-panel-host {
  /* Inset from viewport like a macOS window-attached sidebar (top / left / bottom). */
  --desktop-side-panel-shell-inset: var(--nexus-desktop-shell-inset);
  --desktop-side-panel-drawer-width: min(
    220px,
    calc(100vw - 2 * var(--desktop-side-panel-shell-inset) - 1rem)
  );
  --desktop-side-panel-radius: 12px;
  --desktop-side-panel-edge: var(--desktop-side-panel-shell-inset);
  --desktop-side-panel-ease: cubic-bezier(0.25, 0.82, 0.2, 1);
  --desktop-side-panel-slide-duration: 260ms;
  /* Above app windows + save sheet; below credential modals (60000). */
  --desktop-side-panel-z-drawer: 21001;
  --desktop-side-panel-z-toggle: 21002;
}

/* No drawer/toggle slide while reconciling saved open state (avoids animating on refresh). */
.desktop-side-panel-host--hydrating .desktop-side-panel-drawer,
.desktop-side-panel-host--hydrating .desktop-side-panel-toggle {
  transition: none !important;
}

/* Square chrome aligned with :root icon buttons */
.desktop-side-panel-toggle {
  position: fixed;
  z-index: var(--desktop-side-panel-z-toggle);
  /* Vertically center in title row — same min-height as .content-window-chrome (2.7rem). */
  top: calc(
    var(--desktop-side-panel-shell-inset) + (2.7rem - var(--nexus-icon-btn-size)) / 2
  );
  /* Match .content-window-chrome horizontal padding (0.75rem) from drawer left edge. */
  left: calc(var(--desktop-side-panel-shell-inset) + 0.75rem);
  box-sizing: border-box;
  width: var(--nexus-icon-btn-size);
  height: var(--nexus-icon-btn-size);
  min-width: var(--nexus-icon-btn-size);
  min-height: var(--nexus-icon-btn-size);
  padding: 0;
  border: none;
  border-radius: var(--nexus-icon-btn-radius);
  background: transparent;
  color: rgba(228, 228, 231, 0.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    left var(--desktop-side-panel-slide-duration) var(--desktop-side-panel-ease),
    top var(--desktop-side-panel-slide-duration) var(--desktop-side-panel-ease),
    background 140ms ease,
    color 140ms ease;
}

.desktop-side-panel-toggle svg.material-icon {
  width: var(--nexus-icon-btn-icon);
  height: var(--nexus-icon-btn-icon);
}

.desktop-side-panel-toggle:focus:not(:focus-visible) {
  outline: none;
}

.desktop-side-panel-toggle:hover,
.desktop-side-panel-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.desktop-side-panel-toggle.is-active {
  background: rgba(255, 255, 255, 0.08);
}

/* Open: icon stays in the same position */
.desktop-side-panel-host--open .desktop-side-panel-toggle {
  /* No change needed — icon stays at the same coordinates */
}

.desktop-side-panel-drawer {
  position: fixed;
  top: var(--desktop-side-panel-shell-inset);
  left: var(--desktop-side-panel-shell-inset);
  bottom: var(--desktop-side-panel-shell-inset);
  z-index: var(--desktop-side-panel-z-drawer);
  width: var(--desktop-side-panel-drawer-width);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Edge-to-edge title row; body inset matches .finder-shell-pane--contents (12px 10px). */
  padding: 0;
  background: var(--window-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--desktop-side-panel-radius);
  overflow: hidden;
  border: none;
  box-shadow: none;
  color: var(--text);
  transform: translateX(calc(-100% - var(--desktop-side-panel-shell-inset)));
  pointer-events: none;
  transition:
    transform var(--desktop-side-panel-slide-duration) var(--desktop-side-panel-ease),
    box-shadow var(--desktop-side-panel-slide-duration) var(--desktop-side-panel-ease);
}

.desktop-side-panel-host--open .desktop-side-panel-drawer {
  transform: translateX(0);
  pointer-events: auto;
  /* Match .os-window / .content-window.os-window — no stroke, same drop shadow. */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.desktop-side-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin: 0;
  /* Match .content-window-chrome (title bar shell). */
  min-height: 2.7rem;
  padding: 0.4rem 0.75rem 0.35rem calc(0.75rem + var(--nexus-icon-btn-size) + 0.5rem);
  border-bottom: 1px solid var(--border-hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  user-select: none;
  -webkit-user-select: none;
}

/* Same as .content-window-chrome-title */
.desktop-side-panel-brand {
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  text-align: left;
}

.desktop-side-panel-search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.28rem 0.48rem;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: rgba(255, 255, 255, 0.04);
}

.desktop-side-panel-search:focus-within {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
}

.desktop-side-panel-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.desktop-side-panel-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
}

.desktop-side-panel-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.9;
}

.desktop-side-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Match .finder-shell-pane--contents / --finder-pane-padding (12px 10px). */
  padding: 12px 10px;
  box-sizing: border-box;
}

.desktop-side-panel-apps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Match .finder-file-list gap */
  gap: 4px;
  margin: 0;
  padding: 0;
}

.desktop-side-panel-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0.5rem 0.55rem;
  color: var(--text-muted);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

/* Ensure [hidden] attribute properly hides elements in flex layouts */
.desktop-side-panel-apps[hidden],
.desktop-side-panel-search-empty[hidden] {
  display: none !important;
}

.desktop-side-panel-app-row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  gap: var(--nexus-row-gap, 9px);
  padding: var(--nexus-row-padding-block, 7px) var(--nexus-row-padding-inline, 9px);
  min-height: calc(
    var(--nexus-row-padding-block, 7px) * 2 +
      var(--nexus-row-min-inner-height, max(18px, calc(0.82rem * 1.2 + 6px + 2px)))
  );
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--nexus-list-row-label-size, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.desktop-side-panel-app-row:hover,
.desktop-side-panel-app-row:focus-visible {
  background: var(--nexus-row-hover-highlight);
  color: var(--text);
  outline: none;
}

.desktop-side-panel-app-row.is-active {
  background: var(--nexus-row-selected-highlight);
  color: var(--text);
}

.desktop-side-panel-app-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nexus-list-leading-size, 18px);
  color: var(--text-muted);
}

.desktop-side-panel-app-row:hover .desktop-side-panel-app-icon,
.desktop-side-panel-app-row:focus-visible .desktop-side-panel-app-icon,
.desktop-side-panel-app-row.is-active .desktop-side-panel-app-icon {
  color: var(--text);
}

.desktop-side-panel-app-label {
  flex: 1 1 auto;
  min-width: 0;
}

.desktop-side-panel-app-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--nexus-small-action-gap);
  flex-shrink: 0;
}

.desktop-side-panel-app-action {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.desktop-side-panel-app-row:hover .desktop-side-panel-app-action {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .desktop-side-panel-app-action {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-side-panel-drawer,
  .desktop-side-panel-toggle {
    transition: none;
  }
}

.desktop-side-panel-user-section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--nexus-row-gap, 9px);
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.desktop-side-panel-theme-row,
.desktop-side-panel-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  gap: 0.6rem;
  padding: var(--nexus-row-padding-block, 7px) var(--nexus-row-padding-inline, 9px);
  min-height: calc(
    var(--nexus-row-padding-block, 7px) * 2 +
      var(--nexus-row-min-inner-height, max(18px, calc(0.82rem * 1.2 + 6px + 2px)))
  );
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--nexus-list-row-label-size, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}

.desktop-side-panel-theme-row:hover,
.desktop-side-panel-theme-row:focus-within,
.desktop-side-panel-user-row:hover,
.desktop-side-panel-user-row:focus-within {
  background: var(--nexus-row-hover-highlight);
  color: var(--text);
}

.desktop-side-panel-row-label {
  flex: 0 0 auto;
  color: var(--text);
  font-size: var(--nexus-list-row-label-size, 0.82rem);
  font-weight: 600;
}

.desktop-side-panel-row-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.desktop-side-panel-action-icon {
  display: block;
  flex-shrink: 0;
  width: var(--nexus-icon-btn-icon);
  height: var(--nexus-icon-btn-icon);
  opacity: 1;
  transition: opacity 120ms ease;
}

.desktop-side-panel-user-row .item-action-btn:hover .desktop-side-panel-action-icon,
.desktop-side-panel-user-row .item-action-btn:focus-visible .desktop-side-panel-action-icon {
  opacity: 1;
}

.desktop-side-panel-row-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nexus-list-leading-size, 18px);
  height: var(--nexus-list-leading-size, 18px);
  color: var(--text-muted);
}

.desktop-side-panel-theme-row:hover .desktop-side-panel-row-icon,
.desktop-side-panel-theme-row:focus-within .desktop-side-panel-row-icon,
.desktop-side-panel-user-row:hover .desktop-side-panel-row-icon,
.desktop-side-panel-user-row:focus-within .desktop-side-panel-row-icon {
  color: var(--text);
}

.desktop-side-panel-theme-text {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.desktop-side-panel-theme-row .item-action-btn,
.desktop-side-panel-user-row .item-action-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.desktop-side-panel-theme-row:hover .item-action-btn,
.desktop-side-panel-theme-row:focus-within .item-action-btn,
.desktop-side-panel-theme-row:hover .desktop-side-panel-theme-text,
.desktop-side-panel-theme-row:focus-within .desktop-side-panel-theme-text,
.desktop-side-panel-user-row:hover .item-action-btn,
.desktop-side-panel-user-row:focus-within .item-action-btn {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .desktop-side-panel-theme-text,
  .desktop-side-panel-theme-row .item-action-btn,
  .desktop-side-panel-user-row .item-action-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

.desktop-side-panel-logout-form {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
}

.settings-window {
  width: min(320px, calc(100vw - 2rem));
  height: min(125px, calc(100vh - 2rem));
  z-index: 1500;
  overflow: hidden;
}

.settings-panel {
  position: relative;
  width: 100%;
  background: transparent;
  border-radius: 12px;
  padding: var(--os-window-padding);
  box-sizing: border-box;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.settings-header {
  cursor: grab;
  user-select: none;
}

.settings-header:active {
  cursor: grabbing;
}

.settings-close {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  z-index: 65;
}

.settings-back {
  position: absolute;
  top: 0.55rem;
  right: 2.35rem;
  z-index: 65;
}

.settings-actions {
  margin: 0;
  align-content: start;
}

.settings-actions.hidden,
.settings-interface.hidden {
  display: none;
}

.settings-actions .button_to {
  margin: 0;
  width: 100%;
  display: block;
}

.settings-action {
  box-sizing: border-box;
}

.settings-interface {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0;
}

.settings-interface-label {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-interface-slider-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.settings-interface-slider {
  --slider-track-height: 0.2rem;
  --slider-thumb-size: 0.6rem;
  --slider-thumb-border: 0;
  --slider-track-radius: 999px;
  --slider-thumb-bg: var(--accent);
  width: 100%;
  accent-color: var(--accent);
  appearance: none;
  -webkit-appearance: none;
  height: var(--slider-track-height);
  border-radius: var(--slider-track-radius);
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  outline: none;
  cursor: pointer;
}

.settings-interface-slider--hue {
  --slider-track-bg: linear-gradient(
    90deg,
    hsl(0 100% 50%) 0%,
    hsl(60 100% 50%) 16.67%,
    hsl(120 100% 50%) 33.33%,
    hsl(180 100% 50%) 50%,
    hsl(240 100% 50%) 66.67%,
    hsl(300 100% 50%) 83.33%,
    hsl(360 100% 50%) 100%
  );
}

.settings-interface-slider--saturation {
  --slider-track-bg: linear-gradient(
    90deg,
    hsl(var(--window-ui-hue) 0% var(--window-ui-brightness)) 0%,
    hsl(var(--window-ui-hue) 100% var(--window-ui-brightness)) 100%
  );
}

.settings-interface-slider--brightness {
  --slider-track-bg: linear-gradient(
    90deg,
    #000 0%,
    hsl(var(--window-ui-hue) var(--window-ui-saturation) 50%) 100%
  );
}

.settings-interface-slider--alpha {
  --slider-track-bg:
    linear-gradient(45deg, rgba(255,255,255,0.10) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.10) 75%, rgba(255,255,255,0.10)),
    linear-gradient(45deg, rgba(255,255,255,0.10) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.10) 75%, rgba(255,255,255,0.10)),
    linear-gradient(90deg, transparent 0%, hsl(var(--window-ui-hue) var(--window-ui-saturation) var(--window-ui-brightness)) 100%);
  --slider-track-bg-position: 0 0, 8px 8px, 0 0;
  --slider-track-bg-size: 16px 16px, 16px 16px, 100% 100%;
  --slider-track-bg-color: rgba(0, 0, 0, 0.35);
}

.settings-interface-slider--mono {
  --slider-track-bg: linear-gradient(90deg, #000 0%, #fff 100%);
}

.settings-interface-slider--bg-1-saturation {
  --slider-track-bg: linear-gradient(
    90deg,
    hsl(var(--desktop-bg-1-hue) 0% var(--desktop-bg-1-brightness)) 0%,
    hsl(var(--desktop-bg-1-hue) 100% var(--desktop-bg-1-brightness)) 100%
  );
}

.settings-interface-slider--bg-1-brightness {
  --slider-track-bg: linear-gradient(
    90deg,
    #000 0%,
    hsl(var(--desktop-bg-1-hue) var(--desktop-bg-1-saturation) 50%) 100%
  );
}

.settings-interface-slider--bg-2-saturation {
  --slider-track-bg: linear-gradient(
    90deg,
    hsl(var(--desktop-bg-2-hue) 0% var(--desktop-bg-2-brightness)) 0%,
    hsl(var(--desktop-bg-2-hue) 100% var(--desktop-bg-2-brightness)) 100%
  );
}

.settings-interface-slider--bg-2-brightness {
  --slider-track-bg: linear-gradient(
    90deg,
    #000 0%,
    hsl(var(--desktop-bg-2-hue) var(--desktop-bg-2-saturation) 50%) 100%
  );
}

.settings-interface-slider--bg-angle {
  --slider-track-bg: linear-gradient(90deg, var(--desktop-bg-color-1) 0%, var(--desktop-bg-color-2) 100%);
}

.settings-interface-slider::-webkit-slider-runnable-track {
  height: var(--slider-track-height);
  border-radius: var(--slider-track-radius);
  background-image: var(--slider-track-bg);
  background-position: var(--slider-track-bg-position, 0 0);
  background-size: var(--slider-track-bg-size, 100% 100%);
  background-color: var(--slider-track-bg-color, transparent);
  margin: 0;
}

.settings-interface-slider::-moz-range-track {
  height: var(--slider-track-height);
  border-radius: var(--slider-track-radius);
  background-image: var(--slider-track-bg);
  background-position: var(--slider-track-bg-position, 0 0);
  background-size: var(--slider-track-bg-size, 100% 100%);
  background-color: var(--slider-track-bg-color, transparent);
  border: none;
  margin: 0;
}

.settings-interface-slider::-moz-range-progress {
  background: transparent;
  border: none;
}

.settings-interface-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 999px;
  border: none;
  background: var(--slider-thumb-bg);
  box-shadow: none;
  margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
}

.settings-interface-slider::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border-radius: 999px;
  border: none;
  background: var(--slider-thumb-bg);
  box-shadow: none;
}

.settings-interface-value {
  min-width: 2.7rem;
  text-align: right;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.settings-interface-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.theme-builder-view {
  display: flex;
  flex-direction: column;
  align-content: start;
}

/* Theme builder in Settings uses only .finder-shell-pane--contents padding — do not stack .app-surface--tool inset here. */

.theme-builder-view .tool-window-header,
.theme-builder-view .theme-builder-toolbar {
  padding-right: 0;
}

.theme-builder-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.34rem;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.theme-builder-title-row .os-window-title {
  flex: 0 0 auto;
  white-space: nowrap;
}

.theme-builder-status-text {
  margin: 0;
  font-size: var(--os-title-size);
  color: var(--text-muted);
  line-height: normal;
  font-weight: 600;
  white-space: nowrap;
}

.theme-builder-save-btn {
  flex: 0 0 auto;
  align-self: center;
  transform: none;
}

.theme-builder-name-input {
  flex: 1 1 8.5rem;
  min-width: 5rem;
  max-width: 11.5rem;
  min-height: var(--task-text-control-height, 23.5px);
  margin: 0;
}

.theme-builder-hidden {
  display: none !important;
}

.theme-builder-main-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

/* Theme Studio sections — same visual language as task list: “main” header + half-tint body (sliders). */
.theme-builder-section {
  --task-text-control-height: 23.5px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.theme-builder-section-title {
  margin: 0;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-size: var(--nexus-list-row-label-size, 0.82rem);
  letter-spacing: normal;
  font-weight: 600;
  line-height: 1.2;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.45rem;
  /* Match .nexus-standard-row / Finder file row height */
  min-height: calc(
    var(--nexus-row-padding-block, 7px) * 2 + var(--nexus-row-min-inner-height, max(18px, calc(0.82rem * 1.2 + 6px + 2px)))
  );
  padding: var(--nexus-row-padding-block, 7px) var(--nexus-row-padding-inline, 9px);
  transition: background 140ms ease, color 140ms ease;
}

.theme-builder-section-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--nexus-list-leading-size, 18px);
  height: var(--nexus-list-leading-size, 18px);
  line-height: 0;
  color: rgba(125, 211, 252, 0.95);
}

.theme-builder-section-title-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.theme-builder-section-title-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.theme-builder-section.is-collapsed .theme-builder-section-title {
  border-radius: 8px;
  background: transparent;
}

.theme-builder-section.is-collapsed .theme-builder-section-title:hover,
.theme-builder-section.is-collapsed .theme-builder-section-title:focus-visible {
  background: var(--nexus-group-header-expanded-bg, rgba(255, 255, 255, 0.1));
}

.theme-builder-section:not(.is-collapsed) .theme-builder-section-title {
  border-radius: 8px 8px 0 0;
  background: var(--nexus-group-header-expanded-bg, rgba(255, 255, 255, 0.1));
}

.theme-builder-section:not(.is-collapsed) .theme-builder-section-title:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
}

.theme-builder-section-body {
  display: grid;
  grid-template-columns: 1.56rem minmax(0, 1fr);
  gap: 0.38rem 0.28rem;
  align-items: center;
  align-content: start;
}

.theme-builder-section:not(.is-collapsed) .theme-builder-section-body {
  padding: 0.4rem var(--nexus-row-padding-inline, 9px) var(--nexus-row-padding-block, 7px);
  border-radius: 0 0 8px 8px;
  background: var(--nexus-group-body-expanded-bg, rgba(255, 255, 255, 0.05));
}

.theme-builder-section.is-collapsed .theme-builder-section-body {
  display: none;
}

.theme-builder-section .settings-interface-label {
  margin: 0;
  font-size: 0.69rem;
  color: var(--text-muted);
  line-height: 1.15;
  letter-spacing: 0.03em;
}

.theme-builder-section .settings-interface-slider-row {
  margin: 0;
  min-width: 0;
  gap: 0.46rem;
}

.theme-builder-section .settings-interface-slider {
  --slider-track-height: 0.26rem;
  --slider-thumb-size: 0.72rem;
}

.theme-builder-section .settings-interface-value {
  min-width: 2.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.settings-theme-add-row {
  margin-top: 0.55rem;
}

.settings-theme-add-btn {
  width: auto;
}

.settings-themes-list {
  --task-text-control-height: 23.5px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Saved theme rows — same Finder file row shell as documents list (.finder-file-row + .nexus-standard-row). */
.settings-themes-item.finder-file-row {
  border: none;
  transition: background 140ms ease, color 140ms ease;
}

/* Whole-row click affordance — pointer on interactive list rows (Tasks, Finder files, saved themes). Kept after theme row rules so nothing resets cursor. */
.task-item-row,
.finder-file-row.finder-file-item,
.settings-themes-item.finder-file-row:not(.is-renaming) {
  cursor: pointer;
}

.settings-themes-item.finder-file-row.is-renaming {
  cursor: default;
}

.settings-themes-item .settings-themes-item-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  align-self: stretch;
  margin: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  font-size: var(--nexus-list-row-label-size, 0.82rem);
  line-height: 1.2;
  cursor: pointer;
}

.settings-themes-item .finder-file-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}

.settings-themes-item-meta {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 400;
  flex-shrink: 0;
}

.settings-themes-item.is-renaming .settings-themes-item-btn {
  display: none !important;
}

.settings-themes-item.is-renaming .settings-themes-item-actions {
  display: none !important;
}

.settings-themes-item-rename-input {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  border: 1px solid rgba(125, 211, 252, 0.45);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-radius: 10px;
  padding: 3px 0.5rem;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  box-sizing: border-box;
  outline: none;
}

.settings-themes-item-rename-input:focus {
  border-color: rgba(125, 211, 252, 0.7);
  background: rgba(255, 255, 255, 0.12);
}

.settings-themes-item .item-action-delete:hover {
  color: #fda4af;
}

.settings-shell-mode-actions {
  gap: 0.35rem;
  align-items: center;
}

.settings-shell-mode-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.settings-themes-item .settings-shell-mode-btn {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.settings-themes-item:hover .settings-shell-mode-label,
.settings-themes-item:focus-within .settings-shell-mode-label {
  display: inline-flex;
  opacity: 1;
  pointer-events: auto;
}

.settings-themes-item:hover .settings-shell-mode-btn,
.settings-themes-item:focus-within .settings-shell-mode-btn {
  display: inline-flex;
  opacity: 1;
  pointer-events: auto;
}

/* Chrome tool buttons: sizing lives in :root block; keep flex shrink only */
.settings-themes-item-action-btn {
  flex: 0 0 auto;
}

.settings-action:hover,
.settings-action:focus-visible {
  border-color: rgba(121, 173, 255, 0.6);
  background: rgba(120, 171, 255, 0.08);
}

.settings-action--logout:hover,
.settings-action--logout:focus-visible {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.11);
  color: #fecaca;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* OS-Style Two-Window Manager                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

.window-manager-shell {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
}

.window-manager-shell .os-window {
  pointer-events: auto;
}

/* OS Window Base — NO PADDING */
.os-window {
  position: absolute;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px;
  background: var(--window-bg);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border: none;
  overflow: visible;
  pointer-events: auto;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 0s linear;
  will-change: opacity;
}

.os-window.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

@media (prefers-reduced-motion: reduce) {
  .os-window,
  .os-window.is-hidden {
    transition: none;
  }
}

/* DB Health window overrides: fixed position so drag math is viewport-relative */
.db-health-window.os-window {
  position: fixed;
  background: var(--window-bg);
}

.settings-window.os-window {
  position: fixed;
  background: var(--window-bg);
}

.content-window.os-window {
  position: absolute;
  background: var(--window-bg);
  /* Default: no left transition (drag/resize set left every frame). */
  transition: none;
}

html.nexus-side-panel-layout-animating .content-window.os-window:not(.is-hidden) {
  transition: left 260ms cubic-bezier(0.25, 0.82, 0.2, 1);
}

.content-window.os-window.content-window--suppress-position-transition {
  transition: none !important;
}

.content-window {
  position: relative;
  width: min(550px, calc(100vw - 2rem));
  height: min(480px, calc(100vh - 2rem));
  z-index: 1500;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(0) scale(1);
  transform-origin: center center;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.content-window.os-window.content-window--opening,
.content-window.os-window.content-window--closing {
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 300ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.content-window.os-window.content-window--opening {
  opacity: 0;
  transform: scale(0.97);
}

.content-window.os-window.content-window--opening.content-window--opening-active {
  opacity: 1;
  transform: scale(1);
}

.content-window.os-window.content-window--closing {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.content-window.os-window.content-window--drag-lift {
  transform-origin: center center;
  transform: scale(1.011);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.56);
}

/* Finder: match JS minimum (760×460) so first paint lines up with Settings. */
.content-window[data-content-window-app-key-value="finder"] {
  width: min(760px, calc(100vw - 2rem));
  height: min(460px, calc(100vh - 2rem));
}

.content-window[data-content-window-app-key-value="audio"] {
  width: min(320px, calc(100vw - 2rem));
  height: min(320px, calc(100vh - 2rem));
}

.content-window[data-content-window-app-key-value="images"] {
  width: min(320px, calc(100vw - 2rem));
  height: min(320px, calc(100vh - 2rem));
}

/* Waveform canvas colors — readable in both dark and light modes. */
:root {
  --audio-bar-bg: rgba(255, 255, 255, 0.04);
  --audio-bar-idle: rgba(227, 227, 227, 0.42);
  --audio-bar-played: rgba(130, 214, 255, 0.88);
  --audio-bar-head: rgba(255, 255, 255, 0.55);
}
:root[data-nexus-shell-mode="light"] {
  --audio-bar-bg: rgba(15, 23, 42, 0.05);
  --audio-bar-idle: rgba(15, 23, 42, 0.28);
  --audio-bar-played: rgba(59, 130, 246, 0.8);
  --audio-bar-head: rgba(15, 23, 42, 0.45);
}

@keyframes content-window-focus-pulse {
  0% {
    opacity: 0.85;
    border-width: 1px;
  }
  15% {
    opacity: 1;
    border-width: 2px;
  }
  100% {
    opacity: 0.85;
    border-width: 1px;
  }
}

@keyframes content-window-focus-expand {
  0% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-1.2px) scale(1.011);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.content-window--focus-expand {
  animation: content-window-focus-expand 220ms ease-out;
}

.content-window--focus-pulse::after,
.content-window--focus-pulse-static::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 60;
  border: 0;
}

.content-window--focus-pulse::after {
  animation: content-window-focus-pulse 780ms ease-out forwards;
}

.content-window--focus-pulse,
.content-window--focus-pulse-static {
  transform: translateY(-1.3px) scale(1.0105);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(130, 214, 255, 0.18);
}

.content-window--focus-pulse-static::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .content-window {
    transition: none;
  }

  .content-window.os-window.content-window--opening,
  .content-window.os-window.content-window--closing {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .content-window.os-window.content-window--drag-lift {
    transform: none;
  }

  .content-window--focus-pulse,
  .content-window--focus-pulse-static {
    animation: none;
  }
}

.content-window .window-content {
  position: relative;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
}

.content-window .finder-app-frame {
  background: transparent;
  overflow: hidden;
  display: block;
  height: 100%;
  min-height: 0;
}

/* Linked-app save-picker: Finder loads in an overlay iframe; app turbo-frame stays mounted underneath. */
.content-window-body-stack {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.content-window-app-layer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.content-window-app-layer .finder-app-frame {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.content-window-save-picker-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: hsl(var(--window-bg-h) var(--window-bg-saturation) var(--window-bg-brightness) / 1);
}

.content-window-save-picker-layer[hidden] {
  display: none !important;
}

.content-window-save-picker-iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  display: block;
}

/* Minimal document for save-picker Finder iframe (full layout not loaded). */
.nexus-finder-embed {
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  background: hsl(var(--window-bg-h) var(--window-bg-saturation) var(--window-bg-brightness) / 1);
}

.content-window--auto-sized .window-content {
  height: auto;
  min-height: 0;
}

.content-window--auto-sized .finder-app-frame {
  height: auto;
  min-height: 0;
}

.content-window .app-surface {
  background: transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.content-window .note-body-input,
.content-window .task-list-rows {
  overflow: auto;
}

.content-window-close {
  position: static;
  z-index: 130;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin-left: auto;
}

.app-placeholder-app-body {
  flex: 1 1 auto;
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.app-placeholder-copy {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* Window Content — ALL PADDING HERE */
.window-content {
  width: 100%;
  height: 100%;
  padding: var(--os-shell-content-padding);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

/* Shared content window chrome row */
.content-window-chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.7rem;
  padding: 0.4rem 0.75rem 0.35rem;
  border-bottom: 1px solid var(--border-hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  user-select: none;
  -webkit-user-select: none;
}

.content-window-chrome > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.content-window-chrome-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--nexus-small-action-gap);
  flex-shrink: 0;
  margin-left: auto;
}

.content-window-chrome-tool-group {
  display: inline-flex;
  align-items: center;
  gap: var(--nexus-small-action-gap);
}

/* Author `display` wins over `[hidden]` otherwise — tool groups must fully hide when JS sets `hidden`. */
.content-window-chrome-tool-group[hidden] {
  display: none !important;
}

/* Linked-app save-as: belt-and-suspenders while picker class is on the window. */
.content-window--linked-app-save-picker .content-window-chrome-app-tools {
  display: none !important;
}

.content-window-chrome-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--text);
  line-height: 1;
}

/* Open-file badge shares the title row with the H2; don’t let the toolbar rule flex-grow the H2 or "| filename" is pushed to the right. */
.content-window-chrome--with-open-file .content-window-title-shell .content-window-chrome-title {
  flex: 0 1 auto;
  min-width: 0;
}

.content-window-chrome--with-open-file .content-window-title-shell {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.content-window-open-file-separator {
  color: var(--text-muted);
  opacity: 0.8;
  font-size: 0.68rem;
  line-height: 1;
  flex-shrink: 0;
}

.content-window-open-file-name {
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: min(14rem, 28vw);
}

.content-window-open-file-edited {
  color: var(--text-muted);
  font-size: 0.65rem;
  font-weight: 500;
  margin-left: 0.3rem;
  opacity: 0.6;
  flex-shrink: 0;
}

.content-window-time-card-hours {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.8;
}

.content-window-chrome-actions .content-window-save-btn,
.content-window-chrome-actions .content-window-new-folder-btn {
  flex-shrink: 0;
}

.content-window-time-card-clear[hidden] {
  display: none !important;
}

/* Mini “Save sheet” (Tasks save flow) — DOM under body (see layout).
   Equal distance viewport→modal on all four sides: shell uses identical fixed insets (flex centering cannot match H/V slack on landscape viewports). */
.app-save-dialog-layer {
  --ad-viewport-gutter: var(--nexus-modal-viewport-gutter);
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
}

.app-save-dialog-layer.is-visible {
  pointer-events: auto;
}

.app-save-dialog-layer[hidden] {
  display: none !important;
}

.app-save-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(3px);
}

.app-save-dialog-shell {
  --ad-inset-x: 0.65rem;
  --ad-inset-y: 0.5rem;
  --ad-inset-y-loose: 0.62rem;
  position: fixed;
  z-index: 1;
  box-sizing: border-box;
  /* Same gap from viewport edge on top/right/bottom/left (not centering slack). */
  top: max(var(--ad-viewport-gutter), env(safe-area-inset-top, 0px));
  right: max(var(--ad-viewport-gutter), env(safe-area-inset-right, 0px));
  bottom: max(var(--ad-viewport-gutter), env(safe-area-inset-bottom, 0px));
  left: max(var(--ad-viewport-gutter), env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-save-dialog {
  display: flex;
  align-items: stretch;
  /* basis 0 so the card fills the shell; auto was content-height → empty band under the modal */
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--window-bg) 92%, #0a0a0c);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.app-save-dialog__sidebar {
  flex: 0 0 9.5rem;
  min-width: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border-right: 1px solid var(--border-hairline);
  font-size: 0.68rem;
  color: var(--text-muted);
  overflow: auto;
}

.app-save-dialog__sidebar--finder {
  padding: var(--ad-inset-y-loose) var(--ad-inset-x);
}

.finder-folder-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 0.45rem;
}

.finder-folder-list-heading {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.finder-folder-add-btn {
  appearance: none;
}

.app-save-dialog .finder-folder-list-empty {
  margin: 0.2rem 0;
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--text-muted);
  opacity: 0.9;
}

.finder-folder-link--button {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 0.82rem;
}

.app-save-dialog__finder-list {
  max-height: min(14rem, 42vh);
  overflow-y: auto;
}

.app-save-dialog__finder-list .finder-folder-link,
.app-save-dialog__finder-list .finder-folder-link--button {
  padding: 0.4rem 0.45rem;
}

.app-save-dialog__body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-save-dialog__browser {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-save-dialog__mini-finder {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.app-save-dialog__file-list {
  list-style: none;
  margin: 0;
  padding: var(--ad-inset-y) var(--ad-inset-x);
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.app-save-dialog__file-empty {
  margin: 0;
  padding: var(--ad-inset-y-loose) var(--ad-inset-x);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
  opacity: 0.95;
}

.app-save-dialog__file-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.4rem 0.45rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease;
}

.app-save-dialog__file-row:hover,
.app-save-dialog__file-row:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.app-save-dialog__file-row .finder-file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--nexus-list-row-label-size, 0.82rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-save-dialog__file-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: rgba(125, 211, 252, 0.95);
}

.app-save-dialog__file-icon svg.material-icon {
  display: block;
}

.app-save-dialog__filename-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: var(--ad-inset-y-loose) var(--ad-inset-x);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.app-save-dialog__filename-row--header {
  flex-shrink: 0;
}

.app-save-dialog__filename-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.app-save-dialog__filename-input {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.35rem 0.45rem;
  outline: none;
}

.app-save-dialog__filename-input:focus {
  border-color: color-mix(in oklab, var(--accent) 65%, transparent);
}

.app-save-dialog__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: var(--ad-inset-y-loose) var(--ad-inset-x);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
}

/* Save As: full Finder 2 tree (same chrome + tree as main Finder; read-only on server). */
.app-save-dialog.app-save-dialog--finder-picker {
  flex-direction: column;
}

.app-save-dialog--finder-picker .app-save-dialog__finder-chrome {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-hairline, rgba(255, 255, 255, 0.08));
}

.app-save-dialog__finder-host {
  flex: 1 1 0%;
  min-height: min(52vh, 420px);
  max-height: min(58vh, 480px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.18);
}

.app-save-dialog__finder-host .finder-app-frame {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-save-dialog__finder-host .finder-app-frame > .app-surface--finder {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-save-dialog__finder-host .finder-shell--tree-only {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
}

button.app-save-dialog__btn,
input.app-save-dialog__btn {
  appearance: none;
  border-radius: 5px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.32rem 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}

.app-save-dialog__btn--secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.app-save-dialog__btn--secondary:hover,
.app-save-dialog__btn--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.app-save-dialog__btn--primary {
  color: #fff;
  background: #0a84ff;
  border-color: rgba(255, 255, 255, 0.12);
}

.app-save-dialog__btn--primary:hover,
.app-save-dialog__btn--primary:focus-visible {
  filter: brightness(1.08);
}

/* Theme Studio: same list rhythm as Saved themes (.finder-file-list.settings-themes-list, 4px gap). */
.theme-builder-view .theme-builder-studio-rows {
  margin: 0;
}

.theme-builder-view .theme-builder-studio-rows .theme-builder-chrome-row-actions {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 4px;
}

/* Narrow settings panes: keep action cluster intact; let the title truncate with ellipsis. */
.theme-builder-view .theme-builder-studio-active.finder-file-row .theme-builder-chrome-row-main {
  min-width: 0;
  flex: 1 1 auto;
}

/* Match Saved Themes: theme name + “(Active)” stay adjacent (label must not flex-grow). */
.theme-builder-view .theme-builder-studio-active.finder-file-row .theme-builder-current-theme-value .theme-builder-chrome-status-label {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-builder-view .theme-builder-studio-rows > li.theme-builder-studio-section.finder-file-row {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}

.theme-builder-view .theme-builder-studio-rows > li.theme-builder-studio-section .theme-builder-section-title {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-radius: 8px;
  min-height: calc(
    var(--nexus-row-padding-block, 7px) * 2 + var(--nexus-row-min-inner-height, max(18px, calc(0.82rem * 1.2 + 6px + 2px)))
  );
  padding: var(--nexus-row-padding-block, 7px) var(--nexus-row-padding-inline, 9px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.theme-builder-view .theme-builder-studio-rows > li.theme-builder-studio-section:not(.is-collapsed) .theme-builder-section-title {
  border-radius: 8px 8px 0 0;
}

.theme-builder-view .theme-builder-studio-rows > li.theme-builder-studio-section:not(.is-collapsed) .theme-builder-section-body {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  /* Extra horizontal inset so sliders / values aren’t flush with the rounded group edge */
  padding: 0.45rem 1rem 0.65rem;
}

.theme-builder-view .theme-builder-studio-rows .theme-builder-current-theme-value:disabled {
  opacity: 1;
}

.theme-builder-view .theme-builder-studio-rows .theme-builder-current-theme-value:hover,
.theme-builder-view .theme-builder-studio-rows .theme-builder-current-theme-value:focus-visible {
  text-decoration: none;
}

.theme-builder-view .theme-builder-chrome-row-main {
  cursor: default;
}

.theme-builder-view .theme-builder-studio-rows .theme-builder-current-theme-name-input {
  flex: 1 1 12rem;
  min-width: 8rem;
  max-width: 100%;
  margin: 0;
  min-height: 0;
  /* .settings-themes-item-rename-input uses align-self: stretch — that grows the row vs the plain label. Center like the status button’s line box. */
  align-self: center;
  padding-block: 2px;
  box-sizing: border-box;
}

.settings-theme-studio-save-btn {
  flex: 0 0 auto;
}

/* Keep drag cursor neutral like macOS/Windows */
.content-window .content-window-chrome {
  cursor: default;
}

/* Finder: two-pane shell can exceed narrow frames — allow scroll instead of clipping. */
.content-window[data-content-window-app-key-value="finder"] .window-content {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* audio resize handles are enabled — no override needed */

/* AUDIO: fill the window body — waveform grows, transport bar sits flush at the bottom. */
.content-window[data-content-window-app-key-value="audio"] .window-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.content-window[data-content-window-app-key-value="audio"] .window-content > .finder-app-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content-window[data-content-window-app-key-value="audio"] .audio-app {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 0;
  padding: 0;
}

.content-window[data-content-window-app-key-value="audio"] .content-window-open-file-separator {
  display: none !important;
}

.content-window[data-content-window-app-key-value="audio"] .content-window-open-file-name {
  margin-inline-start: 0.35rem;
}

.content-window[data-content-window-app-key-value="audio"] .audio-app__file-input,
.content-window[data-content-window-app-key-value="audio"] .audio-app audio {
  display: none;
}

.content-window[data-content-window-app-key-value="audio"] .audio-app__visual {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  margin: 0.38rem 0.48rem 0.28rem;
  padding: 0.28rem 0.34rem 0.26rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
}

.content-window[data-content-window-app-key-value="audio"] .audio-app__waveform {
  flex: 1 1 auto;
  min-height: 2.1rem;
  height: auto;
  width: 100%;
  border-radius: 5px;
  display: block;
  touch-action: none;
  cursor: grab;
}

/* Transport bar — mirrors the chrome header but at the bottom. */
.content-window[data-content-window-app-key-value="audio"] .audio-app__transport {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 2.7rem;
  padding: 0.35rem 0.75rem 0.4rem;
  border-top: 1px solid var(--border-hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.03));
  user-select: none;
  -webkit-user-select: none;
}

.content-window[data-content-window-app-key-value="audio"] .audio-app__empty-wrap {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px dashed var(--border-hairline);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin: 0.5rem;
}

.content-window[data-content-window-app-key-value="audio"] .audio-app__empty {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
}

.content-window[data-content-window-app-key-value="audio"] .audio-app__time-current {
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  line-height: 1;
  justify-self: start;
}

.content-window[data-content-window-app-key-value="audio"] .audio-app__time-remaining {
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  line-height: 1;
  justify-self: end;
}

.content-window[data-content-window-app-key-value="audio"] .audio-app--drop-target {
  outline: 1px dashed rgba(130, 214, 255, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

.content-window[data-content-window-app-key-value="images"] .window-content,
.content-window[data-content-window-app-key-value^="image-spawn-"] .window-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.content-window[data-content-window-app-key-value="images"] .window-content > .finder-app-frame,
.content-window[data-content-window-app-key-value^="image-spawn-"] .window-content > .finder-app-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.images-app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
}

.images-app__stage {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.images-app__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.images-app__empty-wrap {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px dashed var(--border-hairline);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.images-app__empty {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
}

.content-window[data-content-window-app-key-value="notes"] .window-content > .finder-app-frame,
.content-window[data-content-window-app-key-value^="note-spawn-"] .window-content > .finder-app-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notes-app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

.notes-app__form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.notes-app__textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--text);
  padding: 0.75rem;
  resize: none;
  line-height: 1.45;
}

.notes-app__textarea:focus {
  outline: none;
  border-color: var(--border-hairline);
}

.notes-app__empty-wrap {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px dashed var(--border-hairline);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.notes-app__empty {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
}

.content-window[data-content-window-app-key-value="time-card"] .window-content > .finder-app-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.time-card-app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  container-type: size;
  position: relative;
}

.time-card-app__form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.time-card-app__header {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 0 0 auto;
}

.time-card-app__clockin-group,
.time-card-app__clockout-group,
.time-card-app__elapsed-group {
  border: 1px solid var(--border-hairline);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.02);
  padding: 0.35rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 0;
}

.time-card-app__clockin-group,
.time-card-app__clockout-group {
  width: auto;
}

.time-card-app__elapsed-group {
  width: auto;
}

.time-card-app__label {
  margin: 0 0 0.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.time-card-app__time-input {
  width: 100%;
  border: 1px solid var(--border-hairline);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 0.2rem 0.35rem;
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  letter-spacing: 0.02em;
}

.time-card-app__time-input::placeholder {
  color: color-mix(in srgb, var(--text) 72%, var(--text-muted) 28%);
  opacity: 1;
}

.time-card-app__time-display {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  color: var(--text);
}

.time-card-app__elapsed {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
}


/* Keep controls in one row at all sizes; never hide or wrap. */

.time-card-app__status {
  border: 1px solid var(--border-hairline);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.02);
  padding: 0.4rem 0.45rem;
  flex: 0 0 auto;
}

.time-card-app__status-line {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.time-card-app__progress {
  margin-top: 0.32rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.time-card-app__progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(127, 211, 255, 0.8), rgba(68, 172, 255, 0.85));
  transition: width 180ms ease;
}

.time-card-app__progress-fill.is-danger {
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.9), rgba(220, 38, 38, 0.9));
}

.time-card-app__status-foot {
  margin-top: 0.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.time-card-app__status-line--alert {
  margin-top: 0;
  color: #f87171;
  opacity: 0.4;
}

.time-card-app__status-line--alert.is-visible {
  opacity: 1;
}

.time-card-app__status-line--alert.is-good {
  color: #34d399;
  opacity: 1;
}

:root[data-nexus-shell-mode="light"] .time-card-app__status-line--alert.is-good {
  color: #15803d;
}

.time-card-app__status-line--ratio {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  font-weight: 600;
  white-space: nowrap;
}

.time-card-app__status-line--ratio.is-danger {
  color: #f87171;
}

.time-card-app__entries {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Shell — positions backdrop + textarea on top of each other */
.time-card-notes-shell {
  /* Grid stack: both children share the same cell so they overlap.
     This keeps them in normal flow — shell gets height from the flex parent,
     avoiding the collapsed-shell / escape-to-wallpaper problem. */
  display: grid;
  grid-template-rows: 1fr;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 6px;
  overflow: clip;
}

/* Shared layout for both layers — must be pixel-identical */
.time-card-notes-backdrop,
.time-card-notes-textarea {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0.5rem 0.5rem 1.2rem;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: normal;
  line-height: 1.35;
  letter-spacing: normal;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: auto;
  scrollbar-gutter: stable;
  tab-size: 2;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
}

/* Backdrop — renders the styled HTML behind the transparent textarea */
.time-card-notes-backdrop {
  color: var(--text);
  background: rgba(0, 0, 0, 0.14);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  overflow: clip;
  overscroll-behavior: none;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.time-card-notes-backdrop::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.time-card-notes-backdrop::-webkit-scrollbar-thumb {
  background: transparent;
}

.time-card-notes-backdrop::-webkit-scrollbar-track {
  background: transparent;
}

/* Textarea — sits on top, transparent text so backdrop shows through */
.time-card-notes-textarea {
  color: transparent;
  caret-color: var(--text, #e5e7eb);
  background: transparent;
  resize: none;
  z-index: 1;
  outline: none;
  scrollbar-width: thin;
  overscroll-behavior: none;
}

.time-card-notes-textarea::placeholder {
  color: rgba(156, 163, 175, 0.45);
}

.time-card-notes-textarea:focus {
  border-color: rgba(130, 214, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(130, 214, 255, 0.5);
  outline: none;
}

/* Green H-prefix spans rendered in the backdrop */
.time-card-app__notes-prefix {
  font-weight: inherit;
  position: relative;
}

.time-card-app__notes-prefix--time-range {
  display: inline;
}

.time-card-app__notes-prefix--time-range.is-highlighted {
  color: #60a5fa;
}

.time-card-app__time-range-label {
  position: absolute;
  left: calc(100% + 0.45rem);
  top: 0;
  color: var(--text);
  opacity: 0.82;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.1s, opacity 0.1s;
}

.time-card-app__notes-prefix--time-range.is-highlighted .time-card-app__time-range-label {
  color: #60a5fa;
  opacity: 1;
}

/* Dash prefix for entry lines */
.time-card-app__entry-dash {
  color: var(--text-muted);
  opacity: 0.65;
}

.time-card-app__ghost-text {
  color: var(--text-muted);
  opacity: 0.52;
  font-style: italic;
  pointer-events: none;
}

.time-card-app__notes-prefix--done .time-card-app__entry-dash {
  color: #34d399;
}

.time-card-app__notes-prefix--done {
  color: #34d399;
}

.time-card-app__notes-prefix--pending {
  color: #fbbf24;
}

:root[data-nexus-shell-mode="light"] .time-card-app__notes-prefix--done {
  color: #15803d;
}

:root[data-nexus-shell-mode="light"] .time-card-app__notes-prefix--pending {
  color: #9a8700;
}

.time-card-app__notes-prefix--missing {
  color: #f87171;
}

.time-card-app__notes-prefix--ongoing {
  color: #a78bfa;
}

:root[data-nexus-shell-mode="light"] .time-card-app__notes-prefix--missing {
  color: #dc2626;
}

:root[data-nexus-shell-mode="light"] .time-card-app__notes-prefix--ongoing {
  color: #7c3aed;
}

/* 24-hour timeline bar */
.time-card-timeline-shell {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 1px;
}

.time-card-timeline__track {
  position: relative;
  height: 9px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}

.time-card-timeline__labels {
  position: relative;
  height: 10px;
}

.time-card-timeline__band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(130, 214, 255, 0.12);
  pointer-events: none;
}

.time-card-timeline__segment {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 2px;
  background: #34d399;
  opacity: 0.82;
  cursor: default;
  min-width: 3px;
  transition: opacity 0.1s, background 0.1s;
}

.time-card-timeline__segment--done {
  background: #34d399;
}

.time-card-timeline__segment--pending {
  background: #fbbf24;
}

.time-card-timeline__segment--missing {
  background: #f87171;
}

.time-card-timeline__segment--ongoing {
  background: #a78bfa;
}

:root[data-nexus-shell-mode="light"] .time-card-timeline__segment--done {
  background: #15803d;
}

:root[data-nexus-shell-mode="light"] .time-card-timeline__segment--pending {
  background: #9a8700;
}

:root[data-nexus-shell-mode="light"] .time-card-timeline__segment--missing {
  background: #dc2626;
}

:root[data-nexus-shell-mode="light"] .time-card-timeline__segment--ongoing {
  background: #7c3aed;
}

.time-card-timeline__segment:hover,
.time-card-timeline__segment.is-highlighted {
  background: #60a5fa;
  opacity: 1;
}

.time-card-timeline__tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.time-card-timeline__label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.52rem;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1;
  top: 0;
  letter-spacing: 0.04em;
}

:root[data-nexus-shell-mode="light"] .time-card-timeline__segment {
  background: #15803d;
}

:root[data-nexus-shell-mode="light"] .time-card-timeline__tick {
  background: rgba(0, 0, 0, 0.15);
}


/* List rows keep natural height; flex parent scrolls (same idea as Tasks — expanded rows don’t compress). */
.theme-builder-view .theme-builder-main-shell > .theme-builder-studio-rows {
  flex-shrink: 0;
}

.theme-builder-view .theme-builder-main-shell > .theme-builder-studio-rows > li {
  flex-shrink: 0;
}

/* Tasks window: scroll task rows inside the fixed window height. */
.content-window[data-content-window-app-key-value="tasks"] .app-surface.app-surface--tool,
.content-window[data-content-window-app-key-value^="task-spawn-"] .app-surface.app-surface--tool {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.content-window[data-content-window-app-key-value="tasks"] .task-list-form,
.content-window[data-content-window-app-key-value^="task-spawn-"] .task-list-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-window[data-content-window-app-key-value="tasks"] .task-list-content-shell,
.content-window[data-content-window-app-key-value^="task-spawn-"] .task-list-content-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Match .finder-shell-pane padding — same inset from title chrome to first row as Settings/Finder lists */
  padding: 12px 10px;
  box-sizing: border-box;
}

.content-window[data-content-window-app-key-value="tasks"] .task-list-rows,
.content-window[data-content-window-app-key-value^="task-spawn-"] .task-list-rows {
  --organizer-row-width: 100%;
  /* Match .finder-file-list row rhythm (gap: 4px) */
  --task-list-row-gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  padding: 0 !important;
  box-sizing: border-box;
}

.content-window[data-content-window-app-key-value="tasks"] .task-list-rows .task-item-row,
.content-window[data-content-window-app-key-value^="task-spawn-"] .task-list-rows .task-item-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* First row: inset comes from .task-list-content-shell only (like .finder-file-list under .finder-shell-pane--contents). */
.content-window[data-content-window-app-key-value="tasks"] .task-list-rows > .task-item-row--main:first-child,
.content-window[data-content-window-app-key-value^="task-spawn-"] .task-list-rows > .task-item-row--main:first-child {
  margin-top: 0 !important;
}

.app-surface--settings .finder-shell-pane--folders {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.settings-sections-list {
  flex: 1 1 auto;
}

.settings-user-panel {
  min-height: min(100%, 520px);
}

.settings-user-panel-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.settings-user-account-row {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0.72rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.settings-user-account-main {
  min-width: 0;
  flex: 1 1 auto;
}

.settings-user-account-username {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.settings-user-account-email {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  word-break: break-all;
}

.settings-user-account-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.settings-user-icon-btn {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in oklab, var(--window-bg) 92%, transparent);
  color: var(--text-muted);
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.settings-user-icon-btn:hover,
.settings-user-icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: color-mix(in oklab, var(--border) 65%, var(--text) 35%);
  color: var(--text);
}

.settings-user-icon {
  width: 1rem;
  height: 1rem;
  display: block;
  opacity: 1;
}

:root[data-nexus-shell-mode="light"] .settings-user-icon-btn {
  color: var(--text-muted);
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.16);
}

:root[data-nexus-shell-mode="light"] .settings-user-icon-btn:hover,
:root[data-nexus-shell-mode="light"] .settings-user-icon-btn:focus-visible {
  color: var(--text);
  background: rgba(15, 23, 42, 0.09);
  border-color: rgba(15, 23, 42, 0.24);
}

/* Settings credential modals — viewport shell matches Save As; card uses theme tokens like .app-save-dialog. */
.app-save-dialog-layer.settings-user-security-modal {
  z-index: 60000;
}

.settings-user-security-modal .app-save-dialog-shell {
  justify-content: center;
  align-items: center;
}

.settings-user-security-modal .settings-user-security-modal-card {
  align-self: center;
  box-sizing: border-box;
  width: fit-content;
  max-width: min(24rem, 100%);
  min-width: min(18rem, 100%);
  text-align: left;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--window-bg) 92%, #0a0a0c);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  color: var(--text);
}

.settings-user-security-modal .settings-user-security-modal-form {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--ad-inset-y-loose) var(--ad-inset-x) 0;
}

.settings-user-security-modal .settings-user-security-fields {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.settings-user-security-modal .settings-user-selector-prompt {
  flex-shrink: 0;
  margin: 0;
  padding: var(--ad-inset-y-loose) var(--ad-inset-x);
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-muted);
  text-align: center;
}

.settings-user-security-modal .settings-user-modal-inline-error:not([hidden]) {
  margin-bottom: 0.65rem;
}

.settings-user-security-modal .settings-user-modal-email {
  flex-shrink: 0;
  margin: 0;
  padding: var(--ad-inset-y-loose) var(--ad-inset-x);
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-muted);
  word-break: break-all;
  border-bottom: 1px solid var(--border-hairline);
  background: rgba(0, 0, 0, 0.12);
}

.settings-user-security-modal .settings-user-modal-inline-error {
  flex-shrink: 0;
  margin: 0;
  color: #fecaca;
  background: rgba(248, 113, 113, 0.12);
  border-bottom: 1px solid rgba(248, 113, 113, 0.25);
  padding: var(--ad-inset-y-loose) var(--ad-inset-x);
  font-size: 0.72rem;
}

.settings-user-security-modal .settings-user-modal-inline-error[hidden] {
  display: none !important;
}

.settings-user-security-modal .nexus-modal-field-row.form-group {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.settings-user-security-modal .nexus-modal-field-row .nexus-modal-input.form-input {
  width: 100%;
  min-width: 12rem;
  box-sizing: border-box;
  padding: 0.35rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.settings-user-security-modal .nexus-modal-field-row .nexus-modal-input.form-input::placeholder {
  color: var(--text-muted);
}

.settings-user-security-modal .nexus-modal-field-row .nexus-modal-input.form-input:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 65%, transparent);
  background: rgba(0, 0, 0, 0.32);
}

.settings-user-security-modal .app-save-dialog__footer.settings-user-modal-actions {
  justify-content: space-between;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-top: 0;
  padding: var(--ad-inset-y-loose) var(--ad-inset-x);
  border-top: none;
  background: transparent;
}

.settings-user-security-modal .form-group.is-invalid .nexus-modal-input.form-input {
  border-color: rgba(248, 113, 113, 0.8);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.55) inset;
  background: rgba(127, 29, 29, 0.15);
}

.settings-password-input-wrap {
  position: relative;
  width: 100%;
}

.settings-password-input {
  width: 100%;
  padding-right: 2.35rem;
}

.settings-password-visibility-btn {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, background 140ms ease, border-color 140ms ease;
}

.settings-password-input-wrap:hover .settings-password-visibility-btn,
.settings-password-input-wrap:focus-within .settings-password-visibility-btn,
.settings-password-input[type="text"] + .settings-password-visibility-btn {
  opacity: 1;
  pointer-events: auto;
}

.settings-password-visibility-btn:hover,
.settings-password-visibility-btn:focus-visible {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
}

.settings-password-visibility-icon {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
  opacity: 0.92;
}

.settings-user-logout-form {
  margin: 0;
}

.settings-user-panel-flash {
  margin: 0.65rem 0 0.9rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(148, 163, 184, 0.08);
  font-size: 0.76rem;
  line-height: 1.4;
}

.settings-user-panel-flash.is-success {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.1);
  color: rgba(187, 247, 208, 0.96);
}

.settings-user-panel-flash.is-error {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: rgba(254, 202, 202, 0.96);
}

.theme-builder-toolbar {
  min-height: var(--os-header-min-height);
  margin-bottom: var(--os-header-gap);
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Resize Handles */
.resize-handle {
  position: absolute;
  background: transparent;
  z-index: 100;
  pointer-events: auto;
}

/* Edge Handles */
.resize-handle.left,
.resize-handle.right {
  width: 8px;
  top: 0;
  bottom: 0;
}

.resize-handle.top,
.resize-handle.bottom {
  height: 8px;
  left: 0;
  right: 0;
}

/* Corner Handles */
.resize-handle.top-left,
.resize-handle.top-right,
.resize-handle.bottom-left,
.resize-handle.bottom-right {
  width: 12px;
  height: 12px;
}

/* Positioning */
.resize-handle.left { left: -4px; cursor: ew-resize; }
.resize-handle.right { right: -4px; cursor: ew-resize; }
.resize-handle.top { top: -4px; cursor: ns-resize; }
.resize-handle.bottom { bottom: -4px; cursor: ns-resize; }

.resize-handle.top-left { top: -4px; left: -4px; cursor: nwse-resize; }
.resize-handle.top-right { top: -4px; right: -4px; cursor: nesw-resize; }
.resize-handle.bottom-left { bottom: -4px; left: -4px; cursor: nesw-resize; }
.resize-handle.bottom-right { bottom: -4px; right: -4px; cursor: nwse-resize; }

/* Subtle theme-matched scrollbars (Safari/Edge/Firefox) — beat body.nexus-os * base via extra classes. */
body.nexus-os .finder-main-pane,
body.nexus-os .finder-app-frame,
body.nexus-finder-embed .finder-main-pane,
body.nexus-finder-embed .finder-app-frame {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body.nexus-os .finder-main-pane::-webkit-scrollbar,
body.nexus-os .finder-app-frame::-webkit-scrollbar,
body.nexus-finder-embed .finder-main-pane::-webkit-scrollbar,
body.nexus-finder-embed .finder-app-frame::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.nexus-os .finder-main-pane::-webkit-scrollbar-track,
body.nexus-os .finder-app-frame::-webkit-scrollbar-track,
body.nexus-finder-embed .finder-main-pane::-webkit-scrollbar-track,
body.nexus-finder-embed .finder-app-frame::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 10px;
}

body.nexus-os .finder-main-pane::-webkit-scrollbar-thumb,
body.nexus-os .finder-app-frame::-webkit-scrollbar-thumb,
body.nexus-finder-embed .finder-main-pane::-webkit-scrollbar-thumb,
body.nexus-finder-embed .finder-app-frame::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  opacity: 0;
  transition: opacity 520ms ease, background-color 160ms ease;
}

body.nexus-os .finder-main-pane.is-scrolling,
body.nexus-os .finder-app-frame.is-scrolling,
body.nexus-finder-embed .finder-main-pane.is-scrolling,
body.nexus-finder-embed .finder-app-frame.is-scrolling {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

body.nexus-os .finder-main-pane.is-scrolling::-webkit-scrollbar-thumb,
body.nexus-os .finder-app-frame.is-scrolling::-webkit-scrollbar-thumb,
body.nexus-finder-embed .finder-main-pane.is-scrolling::-webkit-scrollbar-thumb,
body.nexus-finder-embed .finder-app-frame.is-scrolling::-webkit-scrollbar-thumb {
  opacity: 0.94;
}

body.nexus-os .finder-main-pane.is-scrolling::-webkit-scrollbar-thumb:hover,
body.nexus-os .finder-app-frame.is-scrolling::-webkit-scrollbar-thumb:hover,
body.nexus-finder-embed .finder-main-pane.is-scrolling::-webkit-scrollbar-thumb:hover,
body.nexus-finder-embed .finder-app-frame.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* Finder app frame uses the tinted scrollbar tone. */
body.nexus-os .finder-app-frame::-webkit-scrollbar-thumb,
body.nexus-finder-embed .finder-app-frame::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-pane);
}

body.nexus-os .finder-app-frame.is-scrolling,
body.nexus-finder-embed .finder-app-frame.is-scrolling {
  scrollbar-color: var(--scrollbar-thumb-pane) transparent;
}

body.nexus-os .finder-app-frame.is-scrolling::-webkit-scrollbar-thumb:hover,
body.nexus-finder-embed .finder-app-frame.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-pane-hover);
}

.app-surface--finder {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0;
}

/* Finder: hierarchical tree in the Finder shell (uses Nexus theme tokens). */
.finder-tree {
  /* Match .finder-folder-link row metrics (stable rename height + pane alignment when inside .finder-shell). */
  --finder-leader-pad: 0px;
  --finder-tree-row-pad-block: var(--finder-row-padding-block, var(--nexus-row-padding-block, 7px));
  --finder-tree-row-pad-inline: var(--finder-row-padding-inline, var(--nexus-row-padding-inline, 9px));
  --finder-tree-gap: var(--finder-row-gap, var(--nexus-row-gap, 9px));
  --finder-icon-col: 18px;
  --finder-tree-inner-min: var(
    --finder-row-min-inner-height,
    max(18px, var(--finder-rename-input-outer-height, calc(0.82rem * 1.2 + 6px + 2px)))
  );
  --finder-tree-row-gap: 4px;
  --finder-tree-node-gap: 3px;
  --finder-guide-x: calc(var(--finder-leader-pad) + var(--finder-tree-gap));
  --finder-spine-x: calc(var(--finder-guide-x) + var(--finder-icon-col) / 2);
  --finder-indent-step: calc(var(--finder-tree-gap) + var(--finder-icon-col));
  --finder-guide-color: color-mix(in oklab, var(--border) 78%, var(--text-muted) 22%);
  --finder-tree-branch-y: calc(var(--finder-tree-row-pad-block) + var(--finder-tree-inner-min) / 2);
}

.finder-tree,
.finder-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.finder-tree--root {
  padding: 0;
}

.finder-shell .finder-tree--root {
  /* Same as .finder-folder-list: first row aligns with Finder pane title + pane padding only. */
  padding: 0;
}

.finder-shell .finder-tree.finder-tree--root,
.finder-shell .finder-tree .finder-tree {
  display: flex;
  flex-direction: column;
  gap: var(--finder-tree-row-gap);
}

.finder-shell .finder-tree__node {
  display: flex;
  flex-direction: column;
  gap: var(--finder-tree-node-gap);
}

.finder-tree .finder-tree {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--finder-indent-step);
  border-left: none;
  height: fit-content;
  min-height: 0;
}

.finder-tree .finder-tree > .finder-tree__node {
  position: relative;
  z-index: 0;
}

.finder-tree .finder-tree > .finder-tree__node::before {
  content: "";
  position: absolute;
  left: calc(var(--finder-spine-x) - var(--finder-indent-step));
  width: 0;
  border-left: 1px solid var(--finder-guide-color);
  pointer-events: none;
  z-index: 0;
}

.finder-tree .finder-tree > .finder-tree__node--connector-branch::before {
  top: 0;
  bottom: 0;
}

.finder-tree .finder-tree > .finder-tree__node--connector-end::before {
  top: 0;
  height: var(--finder-tree-branch-y, 13px);
  bottom: auto;
}

/* Horizontal branch: spine → row; stop at li’s left (row-line “click box” starts at 0), don’t draw into the row chrome. */
.finder-tree .finder-tree > .finder-tree__node::after {
  content: "";
  position: absolute;
  left: calc(var(--finder-spine-x) - var(--finder-indent-step));
  top: var(--finder-tree-branch-y, 13px);
  width: max(0px, calc(var(--finder-indent-step) - var(--finder-spine-x)));
  min-width: 0;
  height: 0;
  margin-top: -0.5px;
  border-top: 1px solid var(--finder-guide-color);
  pointer-events: none;
  z-index: 0;
}

/* Bridge flex gap between sibling rows (single downward extension; avoids double-stroke overlap). */
.finder-shell .finder-tree .finder-tree > .finder-tree__node--connector-branch::before {
  top: 0;
  bottom: calc(-1 * var(--finder-tree-row-gap));
}

/*
 * Parent folder rows use column gap (node-gap) between .finder-tree__row-line and nested <ul>.
 * Without this, the first child’s spine starts below that gap. Pull ::before up so the vertical meets the row above.
 */
.finder-tree .finder-tree > .finder-tree__node:first-child::before {
  top: calc(-1 * var(--finder-tree-node-gap));
}

.finder-tree .finder-tree > .finder-tree__node--connector-end:first-child::before {
  height: calc(var(--finder-tree-branch-y) + var(--finder-tree-node-gap));
}

/* .finder-shell … --connector-branch sets top: 0 with higher specificity; keep first-child bridge inside the shell. */
.finder-shell .finder-tree .finder-tree > .finder-tree__node--connector-branch:first-child::before {
  top: calc(-1 * var(--finder-tree-node-gap));
}

.finder-shell .finder-tree .finder-tree > .finder-tree__node--connector-end:first-child::before {
  top: calc(-1 * var(--finder-tree-node-gap));
  height: calc(var(--finder-tree-branch-y) + var(--finder-tree-node-gap));
  bottom: auto;
}

.finder-shell .finder-tree .finder-tree,
.finder-shell .finder-tree .finder-tree__node {
  overflow: visible;
}

a.finder-tree__row {
  text-decoration: none;
  color: inherit;
}

/* One chrome strip: label + actions; .is-selected is for JS/keyboard only — no fill, hover supplies row chrome. */
.finder-tree__row-line {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(var(--finder-tree-row-pad-block) * 2 + var(--finder-tree-inner-min));
  gap: 2px;
  /* Match inline-end inset to block padding so row actions (save / edit / delete) aren’t tight to the right edge. */
  padding: var(--finder-tree-row-pad-block) var(--finder-tree-row-pad-block) var(--finder-tree-row-pad-block)
    var(--finder-guide-x);
  margin: 0;
  border-radius: 8px;
  color: var(--text);
  font-size: var(--nexus-list-row-label-size, 0.82rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  user-select: none;
  transition: background 100ms ease, color 100ms ease;
}

.finder-tree__row-line:hover {
  background: color-mix(in oklab, var(--text) 6%, transparent);
  color: var(--text);
}

.finder-tree__row-line--dragging {
  opacity: 0.55;
}

.finder-tree__row-line--drop-target {
  outline: 1px dashed color-mix(in oklab, var(--accent) 55%, var(--border) 45%);
  outline-offset: -1px;
  border-radius: 8px;
}

.finder-browser-root-drop-zone.finder-tree__row-line--drop-target {
  background: color-mix(in oklab, var(--surface-raised) 86%, var(--accent) 14%);
}

.finder-tree__row-line[draggable="true"] {
  cursor: grab;
}

.finder-tree__row-line[draggable="true"]:active {
  cursor: grabbing;
}

.finder-tree__row-line > .finder-tree__row {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--finder-tree-gap);
}

.finder-tree__row-actions {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  gap: var(--nexus-small-action-gap);
  margin-left: auto;
  padding: 0;
}

/* Hover only (not :focus-within) so keyboard focus on the row does not pin actions visible like selection. */
.finder-tree__row-actions .item-action-btn,
.finder-tree__row-actions .row-plus,
.finder-tree__row-actions .row-save-here,
.finder-tree__row-actions .finder-tree__open-in-app {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.finder-tree__row-line:hover .finder-tree__row-actions .item-action-btn,
.finder-tree__row-line:hover .finder-tree__row-actions .row-plus,
.finder-tree__row-line:hover .finder-tree__row-actions .row-save-here,
.finder-tree__row-line:hover .finder-tree__row-actions .finder-tree__open-in-app {
  opacity: 1;
  pointer-events: auto;
}

.finder-tree__row-actions .item-action-btn:focus-visible,
.finder-tree__row-actions .row-plus:focus-visible,
.finder-tree__row-actions .row-save-here:focus-visible,
.finder-tree__row-actions .finder-tree__open-in-app:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
}

@media (hover: none) {
  .finder-tree__row-actions .item-action-btn,
  .finder-tree__row-actions .row-plus,
  .finder-tree__row-actions .row-save-here,
  .finder-tree__row-actions .finder-tree__open-in-app {
    opacity: 1;
    pointer-events: auto;
  }
}

.finder-tree__row-actions--save-here .row-save-here {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  border-radius: 4px;
}

.finder-tree__row--pending {
  cursor: text;
}

.finder-tree__row--pending .finder-tree__pending-name-input {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--finder-tree-gap);
}

/* Inner label strip: chrome lives on .finder-tree__row-line */
.finder-tree__row {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  user-select: none;
  text-decoration: none;
}

a.finder-tree__row--folder,
a.finder-tree__row--file {
  cursor: pointer;
}

/* Hand stays through mousedown and after focus — WebKit/Blink often use default cursor on :active / :focus for `href="#"` links. */
a.finder-tree__row--folder:active,
a.finder-tree__row--folder:focus,
a.finder-tree__row--folder:focus-visible,
a.finder-tree__row--file:active,
a.finder-tree__row--file:focus,
a.finder-tree__row--file:focus-visible {
  cursor: pointer;
}

.finder-tree__row-line:has(> a.finder-tree__row--folder):hover,
.finder-tree__row-line:has(> a.finder-tree__row--file):hover,
.finder-tree__row-line:has(> a.finder-tree__row--folder:active),
.finder-tree__row-line:has(> a.finder-tree__row--file:active),
.finder-tree__row-line:has(> a.finder-tree__row--folder:focus),
.finder-tree__row-line:has(> a.finder-tree__row--file:focus) {
  cursor: pointer;
}

.finder-tree__row--file-no-app {
  cursor: default;
  color: color-mix(in oklab, var(--text) 82%, var(--text-muted) 18%);
}

.finder-tree__row-line:has(.finder-tree__row--file-no-app):hover .finder-tree__row--file-no-app {
  color: var(--text);
}

/* No focus ring on tree links: selection uses .finder-tree__row-line.is-selected; programmatic focus after open would otherwise show a blue box. */
.finder-tree__row:focus,
.finder-tree__row:focus-visible {
  outline: none;
}

.finder-tree__node--folder.is-collapsed > ul.finder-tree {
  display: none;
}

.finder-shell .finder-tree__icon {
  height: var(--finder-tree-inner-min);
}

.finder-tree__icon {
  flex: 0 0 var(--finder-icon-col);
  width: var(--finder-icon-col);
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.finder-tree__icon--folder .material-icon {
  color: var(--nexus-sidebar-folder-icon-color);
}

.finder-tree__icon--folder-empty .material-icon {
  color: var(--nexus-sidebar-folder-icon-empty);
}

.finder-tree__icon--file .material-icon {
  color: var(--text-muted);
}

.finder-tree__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finder-shell {
  --finder-pane-padding: 12px 10px;
  --finder-row-padding-block: var(--nexus-row-padding-block, 7px);
  --finder-row-padding-inline: var(--nexus-row-padding-inline, 9px);
  --finder-row-gap: var(--nexus-row-gap, 9px);
  /* Padded rename field (3px + 3px vertical) + borders — matches pre-compact “expanded” edit look */
  --finder-rename-input-outer-height: var(--nexus-rename-input-outer-height, calc(0.82rem * 1.2 + 6px + 2px));
  --finder-row-min-inner-height: var(--nexus-row-min-inner-height, max(18px, var(--finder-rename-input-outer-height)));
  position: relative;
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(190px, 31%) minmax(320px, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: 0;
  height: 100%;
  border-top: none;
  overflow-x: auto;
}

.finder-shell.finder-shell--tree-only {
  grid-template-columns: 1fr;
}

.finder-shell.finder-shell--tree-only .finder-shell-pane--folders {
  border-right: none;
}

.finder-shell-pane--folders:has(ul.finder-tree--root:not(:empty)) .finder-tree-empty-hint {
  display: none;
}

.finder-shell-pane--folders:has(ul.finder-tree--root:empty) {
  position: relative;
  min-height: 120px;
}

.finder-shell-pane--folders:has(ul.finder-tree--root:empty) .finder-tree-empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.finder-shell-pane {
  min-height: 0;
  height: 100%;
}

.finder-shell-pane--folders {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--finder-pane-padding);
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Empty list still renders a box; hide it so the empty-state wrap is the only flex child and centers like the contents pane. */
.finder-shell-pane--folders > .finder-folder-list:empty {
  display: none;
}

.finder-shell-pane--folders > .finder-empty-wrap--folders {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.finder-shell-pane--folders .finder-empty-wrap--folders.finder-folder-list-empty {
  margin: 0;
}

.finder-shell-pane--contents {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  padding: var(--finder-pane-padding);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.finder-browser-content-surface {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finder-browser-content-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.finder-pane-title {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.finder-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.finder-pane-add-button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 2px 4px;
  transition: color 140ms ease, background 140ms ease;
}

.finder-pane-add-button:hover,
.finder-pane-add-button:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.finder-pane-header .finder-pane-title {
  margin: 0;
}

.finder-pane-title--selected {
  margin: 0;
  letter-spacing: 0.08em;
  color: var(--text);
}

.finder-folder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.finder-folder-item {
  position: relative;
  border-radius: 8px;
}

.finder-folder-item--separator {
  border-top: 1px solid var(--border-hairline);
  padding-top: 4px;
  margin-top: 4px;
}

.finder-folder-item.is-active .finder-folder-link {
  background: var(--nexus-row-selected-highlight);
}

.finder-folder-link {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--finder-row-gap);
  border-radius: 8px;
  padding: var(--finder-row-padding-block) calc(var(--nexus-icon-btn-size) * 2 + 0.375rem) var(--finder-row-padding-block) var(--finder-row-padding-inline);
  min-height: calc(var(--finder-row-padding-block) * 2 + var(--finder-row-min-inner-height));
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.finder-folder-link > .finder-folder-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  line-height: 0;
}

.finder-folder-link:hover,
.finder-folder-link:focus-visible {
  background: var(--nexus-row-hover-highlight);
}

.finder-folder-item.is-active .finder-folder-link {
  color: var(--nexus-row-selected-text);
}

.finder-folder-actions {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.finder-folder-item:hover .finder-folder-actions,
.finder-folder-item:focus-within .finder-folder-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Inline rename: padded field + fixed outer height so rows stay one size in and out of edit */
.finder-folder-name-input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: var(--finder-rename-input-outer-height);
  max-height: var(--finder-rename-input-outer-height);
  padding: 3px 6px;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.45);
  border-radius: 10px;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
  user-select: text;
  -webkit-user-select: text;
}

.finder-folder-link .finder-folder-name-input,
.finder-file-row-main .finder-folder-name-input {
  flex: 1 1 auto;
}

.finder-folder-name-input:focus {
  border-color: rgba(125, 211, 252, 0.7);
  background: rgba(255, 255, 255, 0.12);
}

/* Positioning only — sizing matches .item-action-btn (rename/delete same as file rows). */
.finder-folder-action {
  appearance: none;
}

.finder-folder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--nexus-list-leading-size, 18px);
  height: var(--nexus-list-leading-size, 18px);
  line-height: 0;
  color: var(--nexus-sidebar-folder-icon-color);
}

.finder-folder-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.finder-folder-icon svg.material-icon {
  width: 100%;
  height: 100%;
}

.finder-folder-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--nexus-list-row-label-size, 0.82rem);
  line-height: 1.2;
}

.finder-contents-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 9px;
  margin-bottom: 8px;
}

.finder-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* File rows: base chrome lives in “NEXUS STANDARD LIST ROW” (.nexus-standard-row, .finder-file-row). */

.finder-file-row .finder-file-row-main {
  text-align: left;
  gap: var(--finder-row-gap);
  padding-left: 0;
  margin-left: 0;
}

.finder-file-item.finder-file-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
}

/* Match .finder-folder-link > .finder-folder-icon — same box and flex basis as folder column */
.finder-file-icon--row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--nexus-list-leading-size, 18px);
  width: var(--nexus-list-leading-size, 18px);
  height: var(--nexus-list-leading-size, 18px);
  line-height: 0;
  color: var(--nexus-sidebar-folder-icon-color);
}

.finder-file-icon--row svg {
  display: block;
  width: 100%;
  height: 100%;
}

.finder-folder-icon svg.material-icon,
.finder-file-icon--row svg.material-icon {
  width: 100%;
  height: 100%;
}

.finder-file-name {
  display: block;
  font-size: var(--nexus-list-row-label-size, 0.82rem);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  text-align: left;
  color: var(--text);
}

/* No leading icon: omit .nexus-standard-row__leading / .finder-file-icon--row — label uses the main column from the row inset. */
.finder-file-row--no-leading-icon .finder-file-row-main {
  gap: 0;
}

.finder-file-row.is-selected {
  background: var(--nexus-row-selected-highlight);
}

.finder-file-row.is-selected .finder-file-name {
  color: var(--nexus-row-selected-text);
}

.finder-file-row.is-selected:hover,
.finder-file-row.is-selected:focus-within {
  background: var(--nexus-row-selected-highlight);
}

/* Theme Studio chrome row: not a real list selection — tint only on hover/focus (saved themes). */
.theme-builder-view .theme-builder-studio-active.finder-file-row.is-selected:not(.is-unsaved-custom-theme) {
  background: transparent;
}

.theme-builder-view .theme-builder-studio-active.finder-file-row.is-selected:not(.is-unsaved-custom-theme):hover,
.theme-builder-view .theme-builder-studio-active.finder-file-row.is-selected:not(.is-unsaved-custom-theme):focus-within {
  background: var(--nexus-row-selected-highlight);
}

/* Saved themes: unsaved row — save-as (name here) + palette (open Theme Studio) */
.settings-themes-item.settings-themes-unsaved-row.finder-file-row {
  cursor: default;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  box-sizing: border-box;
}

.settings-themes-item.settings-themes-unsaved-row .settings-themes-unsaved-row-main,
.settings-themes-item.settings-themes-unsaved-row .theme-builder-chrome-row-main {
  cursor: default;
  min-width: 0;
}

.settings-themes-item.settings-themes-unsaved-row .settings-themes-item-actions,
.settings-themes-item.settings-themes-unsaved-row .theme-builder-chrome-row-actions {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.settings-themes-item.settings-themes-unsaved-row .finder-file-name,
.settings-themes-item.settings-themes-unsaved-row .theme-builder-current-theme-value {
  font-weight: 600;
  color: rgba(254, 242, 242, 0.98);
}

.settings-themes-item.settings-themes-unsaved-row:hover,
.settings-themes-item.settings-themes-unsaved-row:focus-within {
  background: rgba(248, 113, 113, 0.18);
}

.settings-themes-item.settings-themes-unsaved-row .item-action-btn {
  opacity: 1 !important;
  pointer-events: auto;
  color: rgba(254, 242, 242, 0.95);
}

.settings-themes-item.settings-themes-unsaved-row .item-action-btn:hover,
.settings-themes-item.settings-themes-unsaved-row .item-action-btn:focus-visible {
  color: rgba(254, 242, 242, 0.98);
  background: rgba(255, 255, 255, 0.1);
}

.finder-empty-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.finder-empty-wrap--content {
  flex: 1 1 auto;
  min-height: 0;
}

.finder-empty-state {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------- */
/* Light shell mode */
/* -------------------------------------------------------------------------- */

:root[data-nexus-shell-mode="light"] .desktop-side-panel-toggle {
  color: var(--text-muted);
}

:root[data-nexus-shell-mode="light"] .desktop-side-panel-toggle:hover,
:root[data-nexus-shell-mode="light"] .desktop-side-panel-toggle:focus-visible,
:root[data-nexus-shell-mode="light"] .desktop-side-panel-toggle.is-active {
  color: var(--text);
  background: rgba(15, 23, 42, 0.08);
}

:root[data-nexus-shell-mode="light"] {
  --border: rgba(15, 23, 42, 0.24);
  --border-hairline: rgba(15, 23, 42, 0.16);
  --nexus-row-hover-highlight: rgba(15, 23, 42, 0.09);
  --nexus-row-selected-highlight: rgba(15, 23, 42, 0.14);
  --nexus-row-subtask-highlight: rgba(15, 23, 42, 0.06);
  --nexus-row-selected-text: var(--text);
}

:root[data-nexus-shell-mode="light"] .finder-shell-pane--folders {
  border-right: 1px solid var(--border-hairline);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.015));
}

:root[data-nexus-shell-mode="light"] .finder-shell-pane--contents {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.028), rgba(15, 23, 42, 0.01));
}

:root[data-nexus-shell-mode="light"] .finder-folder-item.is-active .finder-folder-link,
:root[data-nexus-shell-mode="light"] .finder-file-row.is-selected .finder-file-name,
:root[data-nexus-shell-mode="light"] .finder-file-row.is-selected .settings-themes-item-meta {
  color: var(--text);
}

/* Settings section icons: match desktop side panel behavior (muted idle, stronger on hover/active). */
:root[data-nexus-shell-mode="light"] .settings-sections-list .finder-folder-icon,
:root[data-nexus-shell-mode="light"] .settings-sections-list .finder-file-icon--row,
.settings-sections-list .finder-folder-icon,
.settings-sections-list .finder-file-icon--row {
  color: var(--text-muted);
}

:root[data-nexus-shell-mode="light"] .settings-sections-list .finder-folder-link:hover .finder-folder-icon,
:root[data-nexus-shell-mode="light"] .settings-sections-list .finder-folder-link:focus-visible .finder-folder-icon,
:root[data-nexus-shell-mode="light"] .settings-sections-list .finder-folder-item.is-active .finder-folder-icon,
.settings-sections-list .finder-folder-link:hover .finder-folder-icon,
.settings-sections-list .finder-folder-link:focus-visible .finder-folder-icon,
.settings-sections-list .finder-folder-item.is-active .finder-folder-icon {
  color: var(--text);
}

.clock-app {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem;
  min-height: 0;
  height: 100%;
}

.clock-app__tabs {
  display: flex;
  align-items: center;
  gap: 0.32rem;
}

.clock-app__tab {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.27rem 0.58rem;
  cursor: pointer;
}

.clock-app__tab.is-active {
  color: var(--text);
  border-color: color-mix(in oklab, var(--text) 20%, var(--border) 80%);
  background: rgba(255, 255, 255, 0.04);
}

.clock-app__sound-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  user-select: none;
}

.clock-app__sound-toggle input {
  accent-color: var(--accent);
}

.clock-app__notice {
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  padding: 0.3rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.clock-app__panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  flex: 1 1 auto;
}

.clock-app__panel[hidden] {
  display: none !important;
}

.clock-app__panel--centered {
  justify-content: center;
}

.clock-app__display {
  margin: 0;
  text-align: center;
  color: var(--text);
  font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.6rem, 4.1vw, 2.2rem);
  font-weight: 650;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.clock-app__input {
  appearance: none;
  width: 100%;
  min-width: 0;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.022);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.36rem 0.48rem;
  box-sizing: border-box;
}

.clock-app__input:focus-visible {
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 54%, var(--border) 46%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 28%, transparent);
}

.clock-app__btn,
.clock-app__icon-btn {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.018);
  color: var(--text);
  font: inherit;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.33rem 0.52rem;
  cursor: pointer;
}

.clock-app__btn--primary {
  border-color: color-mix(in oklab, var(--accent) 38%, var(--border) 62%);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}

.clock-app__btn--danger {
  border-color: color-mix(in oklab, #ef4444 48%, var(--border) 52%);
  color: color-mix(in oklab, #ef4444 72%, var(--text) 28%);
}

.clock-app__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.clock-app__timer-input-row {
  width: min(100%, 260px);
  margin: 0 auto;
}

.clock-app__auto-repeat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.clock-app__laps {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  overflow: auto;
  min-height: 0;
  padding-right: 2px;
}

.clock-app__lap-row {
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  padding: 0.34rem 0.48rem;
}

.clock-app__lap-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.7rem;
}

.clock-app__lap-row span:nth-child(2),
.clock-app__lap-row span:nth-child(3) {
  text-align: right;
  font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

.clock-app__empty {
  margin: 0;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.7rem;
  padding: 0.45rem;
}

@media (max-width: 720px) {
  .clock-app__panel--centered {
    justify-content: flex-start;
  }
}