/* ═══════════════════════════════════════════════════════════════════════════
   NEXUS Cleaning v12 — module styles
   ─────────────────────────────────────
   Card-based design that mirrors the ordering catalog. Same gold-line
   borders, same expand/collapse interaction, same in-line edit form
   pattern. Freshness bars copied from the equipment health-bar pattern
   (.eq-brand-health-bar) with class renames so concerns stay isolated.

   This file is loaded after nexus.css so its rules take precedence over
   the v11 styles still in nexus.css. v11 selectors not in this file
   (like .clean-tab, .clean-progress, .clean-fill) continue to apply
   from nexus.css — those still work and don't need rewriting.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Module wrapper: a little breathing room around the list ─────────── */
.clean-list {
  padding: 8px 10px 110px;
  scroll-padding-bottom: 110px;
}


/* ═══ THE SECTION CARD ═══════════════════════════════════════════════════ */

.clean-card {
  background: var(--surface, #141a2a);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.12));
  border-radius: var(--r, 10px);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 200ms ease;
}
.clean-card:hover {
  border-color: rgba(212, 164, 78, 0.22);
}
.clean-card.is-collapsed .clean-card-body {
  display: none;
}

/* ─── Card head — title + freshness chip + chevron ─────────────────────── */
.clean-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 14px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.clean-card:not(.is-collapsed) .clean-card-head {
  border-bottom-color: var(--nx-highlight-line, rgba(212, 164, 78, 0.10));
}

.clean-card-titles {
  flex: 1;
  min-width: 0;
}
.clean-card-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text, #f0e9da);
  line-height: 1.25;
}
.clean-card-sub {
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--faint, #7a7167);
  text-transform: uppercase;
}

/* ─── Card status (right-side chip cluster) ────────────────────────────── */
.clean-sec-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ─── Freshness chip ───────────────────────────────────────────────────── */
.clean-fresh-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 15px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid currentColor;
}
.clean-fresh-chip.is-fresh {
  color: #6fa853;
  background: rgba(91, 138, 76, 0.10);
}
.clean-fresh-chip.is-aging {
  color: #d99c3d;
  background: rgba(214, 145, 46, 0.10);
}
.clean-fresh-chip.is-stale {
  color: #cf5959;
  background: rgba(180, 60, 60, 0.10);
}
.clean-fresh-chip.is-overdue {
  color: var(--bg, #0b0f18);
  background: var(--nx-red, #b43c3c);
  border-color: var(--nx-red, #b43c3c);
  font-size: 10.5px;
  text-transform: uppercase;
}

/* ─── Board pill (preserved from v11, restyled) ────────────────────────── */
.clean-board-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 15px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(212, 164, 78, 0.08);
  color: var(--accent, #d4a44e);
  border: 1px solid rgba(212, 164, 78, 0.30);
  cursor: pointer;
}
.clean-board-pill:hover {
  background: rgba(212, 164, 78, 0.15);
}
.clean-board-pill.is-on-board {
  background: rgba(212, 164, 78, 0.18);
}

/* ─── Chevron (rotates when collapsed) ─────────────────────────────────── */
.clean-card-chev {
  background: none;
  border: none;
  color: var(--faint, #7a7167);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: transform 200ms ease;
}
.clean-card.is-collapsed .clean-card-chev {
  transform: rotate(-90deg);
}


/* ═══ CARD BODY ══════════════════════════════════════════════════════════ */

.clean-card-body {
  padding: 6px 10px 10px;
}

/* ─── Check All button ────────────────────────────────────────────────── */
.clean-check-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 4px 8px;
  padding: 6px 12px;
  background: rgba(212, 164, 78, 0.08);
  border: 1px solid rgba(212, 164, 78, 0.25);
  border-radius: var(--rs, 8px);
  color: var(--accent, #d4a44e);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.clean-check-all-btn:hover {
  background: rgba(212, 164, 78, 0.15);
}


/* ═══ TASK ROW ═══════════════════════════════════════════════════════════ */

.clean-task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 6px 10px 10px;
  border-radius: 10px;
  transition: background 150ms ease;
}
.clean-task + .clean-task {
  border-top: 1px solid rgba(212, 164, 78, 0.06);
}
.clean-task.is-done {
  opacity: 0.55;
}
.clean-task.is-done .clean-task-name {
  text-decoration: line-through;
  text-decoration-color: rgba(212, 164, 78, 0.4);
}

/* ─── Task checkbox (square with check icon when done) ─────────────────── */
.clean-task-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.30));
  background: transparent;
  cursor: pointer;
  color: var(--accent, #d4a44e);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}
.clean-task-check:hover {
  border-color: var(--accent, #d4a44e);
  background: rgba(212, 164, 78, 0.08);
}
.clean-task.is-done .clean-task-check {
  border-color: var(--accent, #d4a44e);
  background: rgba(212, 164, 78, 0.15);
}

/* ─── Task body (name + meta + freshness) ──────────────────────────────── */
.clean-task-body {
  flex: 1;
  min-width: 0;
}
.clean-task-name {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--text, #f0e9da);
  line-height: 1.35;
}
.clean-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.clean-task-secondary {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--faint, #7a7167);
  letter-spacing: 0.02em;
}
.clean-task-fresh {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.clean-task-fresh-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--faint, #7a7167);
  letter-spacing: 0.03em;
}

/* ─── Frequency / days-of-week tags ────────────────────────────────────── */
.clean-freq-tag, .clean-days-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 13px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.clean-freq-tag {
  background: rgba(212, 164, 78, 0.10);
  color: var(--accent, #d4a44e);
  border: 1px solid rgba(212, 164, 78, 0.18);
}
.clean-days-tag {
  background: rgba(120, 138, 174, 0.10);
  color: #9eb3d4;
  border: 1px solid rgba(120, 138, 174, 0.20);
}

/* ─── Assignee chip (initials in a gold circle, like board) ────────────── */
.clean-assignee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(212, 164, 78, 0.18);
  color: var(--accent, #d4a44e);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ─── Edit pencil button (always visible, not hover-only) ──────────────── */
.clean-task-edit {
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 6px;
  color: var(--faint, #7a7167);
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-task-edit:hover {
  color: var(--accent, #d4a44e);
  border-color: rgba(212, 164, 78, 0.20);
  background: rgba(212, 164, 78, 0.05);
}


/* ═══ FRESHNESS BAR ═══════════════════════════════════════════════════════
   Modeled directly on .eq-brand-health-bar from the equipment module —
   same height, same transition, same color ramp. We give it our own
   class names so cross-module styling concerns stay separated. */
.clean-fresh-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--nx-surface-2, rgba(212, 164, 78, 0.06));
  overflow: hidden;
}
.clean-fresh-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 400ms ease-out;
}
.clean-fresh-bar-fill.is-fresh  { background: #6fa853; }
.clean-fresh-bar-fill.is-aging  { background: #d99c3d; }
.clean-fresh-bar-fill.is-stale  { background: #cf5959; }


/* ═══ ADD-TASK BUTTON (per-section) ═════════════════════════════════════ */

.clean-add-task-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  background: transparent;
  border: 1px dashed rgba(212, 164, 78, 0.22);
  border-radius: 10px;
  color: var(--accent, #d4a44e);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-add-task-btn:hover {
  background: rgba(212, 164, 78, 0.06);
  border-color: rgba(212, 164, 78, 0.40);
  border-style: solid;
}


/* ═══ FOOTER TOOLBAR (Add section) ═══════════════════════════════════════ */

.clean-footer-toolbar {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 8px;
}
.clean-add-section-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  border-radius: var(--r, 10px);
  color: var(--accent, #d4a44e);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 200ms ease;
}
.clean-add-section-btn:hover {
  border-color: var(--accent, #d4a44e);
  background: rgba(212, 164, 78, 0.06);
}


/* ═══ EMPTY STATE ════════════════════════════════════════════════════════ */

.clean-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--faint, #7a7167);
}
/* In takeover mode the cleanList is the scroll container with flex:1.
   When it's empty (just the .clean-empty card), let it center vertically
   in the available space instead of bunching at the top. */
body.is-pane-cleaning #cleanList {
  display: flex;
  flex-direction: column;
}
body.is-pane-cleaning #cleanList .clean-empty {
  margin: auto 0;
  padding: 20px;
}
/* CRITICAL — section cards (and the add-section toolbar) must NEVER
   shrink. When #cleanList is a flex column, its children inherit
   flex-shrink:1 and squeeze to fit. That made expanded sections look
   like they were compressing each other. Locking flex-shrink:0 lets
   each card keep its natural height; the list scrolls when total
   content exceeds the viewport, exactly as expected. */
body.is-pane-cleaning #cleanList .clean-card,
body.is-pane-cleaning #cleanList .clean-footer-toolbar,
body.is-pane-cleaning #cleanList .clean-empty-soft,
body.is-pane-cleaning #cleanList .clean-coming-up-scroll {
  flex-shrink: 0;
}
/* Add Section button when rendered INSIDE the empty state — sits right
   below the hint as the primary call-to-action so the empty state reads
   as one coherent block (title / hint / button) and doesn't leave a
   floating button somewhere down the list. */
.clean-empty-add-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 22px auto 0 !important;
  padding: 11px 22px !important;
}
.clean-empty-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 18px;
  color: var(--text, #f0e9da);
  margin-bottom: 6px;
}
.clean-empty-hint {
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}


/* ═══ TASK EDIT FORM (inline) ════════════════════════════════════════════
   Same density and visual language as ordering's catalog item editor.
   Form fields are stacked, gold "Save" pill is the prominent action,
   neutral "Cancel" + amber "Archive" round out the trio. */

.clean-task-edit-form {
  background: rgba(212, 164, 78, 0.04);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.18));
  border-radius: 12px;
  padding: 14px;
  margin: 8px 0;
}
.clean-edit-row {
  margin-bottom: 12px;
}
.clean-edit-row:last-child {
  margin-bottom: 0;
}
.clean-edit-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.clean-edit-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint, #7a7167);
  margin-bottom: 4px;
}
.clean-edit-label-hint {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: rgba(122, 113, 103, 0.7);
}
.clean-edit-input,
.clean-edit-select,
.clean-edit-textarea {
  width: 100%;
  background: var(--elevated, #1a2236);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.15));
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text, #f0e9da);
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 16px; /* iOS zoom prevention threshold */
  outline: none;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}
.clean-edit-input:focus,
.clean-edit-select:focus,
.clean-edit-textarea:focus {
  border-color: var(--accent, #d4a44e);
}
.clean-edit-textarea {
  resize: vertical;
  min-height: 56px;
  font-family: 'Outfit', 'DM Sans', sans-serif;
}

/* ─── Day-of-week toggle pills inside the edit form ────────────────────── */
.clean-day-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.clean-day-pill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  background: transparent;
  color: var(--faint, #7a7167);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-day-pill:hover {
  border-color: rgba(212, 164, 78, 0.40);
  color: var(--text, #f0e9da);
}
.clean-day-pill.is-selected {
  border-color: var(--accent, #d4a44e);
  background: rgba(212, 164, 78, 0.18);
  color: var(--accent, #d4a44e);
}

/* ─── Edit form actions ────────────────────────────────────────────────── */
.clean-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
}
.clean-edit-cancel,
.clean-edit-archive,
.clean-edit-save {
  padding: 9px 16px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
  border: 1px solid;
}
.clean-edit-cancel {
  background: transparent;
  border-color: var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  color: var(--faint, #7a7167);
}
.clean-edit-cancel:hover {
  color: var(--text, #f0e9da);
}
.clean-edit-archive {
  background: rgba(180, 60, 60, 0.05);
  border-color: rgba(180, 60, 60, 0.30);
  color: #cf5959;
  margin-left: auto; /* push it away from save */
}
.clean-edit-archive:hover {
  background: rgba(180, 60, 60, 0.15);
}
.clean-edit-save {
  background: var(--accent, #d4a44e);
  border-color: var(--accent, #d4a44e);
  color: var(--bg, #0b0f18);
  font-weight: 600;
}
.clean-edit-save:hover {
  background: #e0b462;
}
.clean-edit-save:disabled,
.clean-edit-archive:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ═══ ARCHIVE BUTTON (lives in duties view header) ═══════════════════════ */

.clean-archive-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.18));
  border-radius: 999px;
  color: var(--faint, #7a7167);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-archive-trigger:hover {
  color: var(--accent, #d4a44e);
  border-color: rgba(212, 164, 78, 0.40);
}


/* ═══ EXTRAS BUTTON ══════════════════════════════════════════════════════ */

.clean-extras-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.18));
  border-radius: 999px;
  color: var(--faint, #7a7167);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-extras-trigger:hover {
  color: var(--accent, #d4a44e);
  border-color: rgba(212, 164, 78, 0.40);
}


/* ═══ SUBMIT ACTION SHEET ════════════════════════════════════════════════
   Two-action menu when the user taps "Submit Report" — gives them the
   choice between "Submit & email" (the new flow) and "Save without
   email" (the v11 flow). */

.clean-submit-sheet {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
}
.clean-submit-sheet-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: cleanSheetFadeIn 200ms ease;
}
.clean-submit-sheet-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 16px 24px;
  background: var(--surface, #141a2a);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: cleanSheetSlideUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cleanSheetFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cleanSheetSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.clean-submit-sheet-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 17px;
  color: var(--text, #f0e9da);
  font-weight: 500;
}
.clean-submit-sheet-sub {
  font-size: 12.5px;
  color: var(--faint, #7a7167);
  margin-bottom: 6px;
}
.clean-submit-sheet-primary,
.clean-submit-sheet-secondary,
.clean-submit-sheet-cancel {
  padding: 13px 16px;
  border-radius: 12px;
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid;
  transition: all 150ms ease;
}
.clean-submit-sheet-primary {
  background: var(--accent, #d4a44e);
  border-color: var(--accent, #d4a44e);
  color: var(--bg, #0b0f18);
  font-weight: 600;
}
.clean-submit-sheet-primary:hover {
  background: #e0b462;
}
.clean-submit-sheet-secondary {
  background: transparent;
  border-color: var(--nx-highlight-line, rgba(212, 164, 78, 0.30));
  color: var(--text, #f0e9da);
}
.clean-submit-sheet-secondary:hover {
  background: rgba(212, 164, 78, 0.06);
}
.clean-submit-sheet-cancel {
  background: transparent;
  border-color: transparent;
  color: var(--faint, #7a7167);
}


/* ═══ EDIT-PAST-REPORT BANNER (preserved from v11) ═══════════════════════ */

.clean-edit-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(212, 164, 78, 0.08);
  border-bottom: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--accent, #d4a44e);
}
.clean-edit-cancel-banner {
  margin-left: auto;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid rgba(212, 164, 78, 0.30);
  border-radius: 10px;
  color: var(--accent, #d4a44e);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVE OVERLAY — the unified archive accessed from above duties
   ═══════════════════════════════════════════════════════════════════════════ */

.nx-archive-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  pointer-events: auto;
}
.nx-archive-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: cleanSheetFadeIn 200ms ease;
}
.nx-archive-sheet {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface, #141a2a);
  border-left: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.15));
  border-right: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.15));
  display: flex;
  flex-direction: column;
  animation: archiveSheetSlideIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes archiveSheetSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Archive head ─────────────────────────────────────────────────────── */
.nx-archive-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.10));
}
.nx-archive-title-block {
  flex: 1;
}
.nx-archive-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text, #f0e9da);
}
.nx-archive-sub {
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--faint, #7a7167);
  letter-spacing: 0.04em;
}
.nx-archive-close {
  background: none;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.18));
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint, #7a7167);
  cursor: pointer;
  transition: all 150ms ease;
}
.nx-archive-close:hover {
  color: var(--text, #f0e9da);
  border-color: rgba(212, 164, 78, 0.40);
}

/* ─── Archive tabs ─────────────────────────────────────────────────────── */
.nx-archive-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.08));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nx-archive-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.15));
  border-radius: 999px;
  color: var(--faint, #7a7167);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease;
}
.nx-archive-tab:hover {
  color: var(--text, #f0e9da);
  border-color: rgba(212, 164, 78, 0.30);
}
.nx-archive-tab.is-active {
  color: var(--accent, #d4a44e);
  border-color: var(--accent, #d4a44e);
  background: rgba(212, 164, 78, 0.08);
}
.nx-archive-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 13px;
  background: rgba(212, 164, 78, 0.18);
  color: var(--accent, #d4a44e);
  font-size: 10.5px;
  font-weight: 600;
}
.nx-archive-tab-count.is-zero {
  background: transparent;
  color: var(--faint, #7a7167);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.10));
}

/* ─── Archive body ─────────────────────────────────────────────────────── */
.nx-archive-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nx-archive-list {
  padding: 12px 16px 60px;
}

.nx-archive-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: rgba(212, 164, 78, 0.03);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.10));
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all 200ms ease;
}
.nx-archive-row-body {
  flex: 1;
  min-width: 0;
}
.nx-archive-row-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text, #f0e9da);
  line-height: 1.3;
}
.nx-archive-row-secondary {
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--faint, #7a7167);
}
.nx-archive-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--faint, #7a7167);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.nx-archive-row-loc {
  color: var(--accent, #d4a44e);
  font-weight: 600;
}
.nx-archive-row-dot {
  opacity: 0.5;
  margin: 0 1px;
}

.nx-archive-restore {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(212, 164, 78, 0.30);
  border-radius: 999px;
  color: var(--accent, #d4a44e);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}
.nx-archive-restore:hover {
  background: rgba(212, 164, 78, 0.10);
  border-color: var(--accent, #d4a44e);
}
.nx-archive-restore:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nx-archive-loading,
.nx-archive-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--faint, #7a7167);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 7 KITCHEN-READABILITY OVERRIDES
   ─────────────────────────────────────
   Same typography sweep we applied to ordering — bumping default v11
   selectors that are still in nexus.css (and apply to elements we kept,
   like .clean-tab and .clean-progress) to the kitchen-tablet scale.
   ═══════════════════════════════════════════════════════════════════════════ */

.clean-tab {
  font-size: 13px;
  min-height: 42px;
  padding: 8px 18px;
}
.clean-progress-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
}
.clean-pct {
  font-size: 13.5px;
}
.clean-date {
  font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ─────────────────────
   The app supports a [data-theme="light"] mode (set by the theme toggle).
   These overrides keep the freshness chips legible on white backgrounds
   without darkening the chip backgrounds too aggressively.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .clean-fresh-chip.is-fresh   { color: #4a7338; background: rgba(91, 138, 76, 0.12); }
[data-theme="light"] .clean-fresh-chip.is-aging   { color: #b07a23; background: rgba(214, 145, 46, 0.12); }
[data-theme="light"] .clean-fresh-chip.is-stale   { color: #a13c3c; background: rgba(180, 60, 60, 0.10); }

[data-theme="light"] .clean-fresh-bar             { background: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .clean-fresh-bar-fill.is-fresh { background: #4a7338; }
[data-theme="light"] .clean-fresh-bar-fill.is-aging { background: #b07a23; }
[data-theme="light"] .clean-fresh-bar-fill.is-stale { background: #a13c3c; }


/* ═══════════════════════════════════════════════════════════════════════════
   STATIC FOOTER — pin Submit Report bar to the viewport floor
   ─────────────────────────────────────────────────────────────
   v11 used position:sticky which only pins when scrolled past. With short
   content (empty state, few tasks) the footer floats up to natural-bottom
   of content, leaving whitespace below before the bottom-nav.

   v12 makes the footer truly static — fixed to the viewport floor,
   floating above the nav-bar (which is fixed at z:50). The footer
   only renders when the cleaning duties-pane is active so it doesn't
   bleed into ordering / home / other views.

   The .clean-list gets compensating bottom padding so its scrollable
   content never disappears under the footer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Scope to the cleaning pane only — the [hidden] attr is on inactive
   panes per duties.js, so the footer stays gone when you swap to ordering. */
.duties-pane[data-pane="cleaning"]:not([hidden]) ~ * .clean-footer,
.duties-pane[data-pane="cleaning"]:not([hidden]) .clean-footer {
  position: fixed;
  /* Sit above the bottom-nav (min-height:56px + safe-area bottom).
     The 1px gap on top is the nav's border-top so they read as separate
     planes rather than merged. */
  bottom: calc(56px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 40;  /* below nav-bar (50), above content */
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  /* Keep the row feel — buttons sized for thumbs, not hover */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hide the footer when cleaning pane isn't active (otherwise it'd
   render fixed on every other view too) */
.duties-pane[data-pane="cleaning"][hidden] ~ * .clean-footer,
#cleanView:not(.active) .clean-footer {
  display: none;
}

/* Compensate the list scroll so its bottom doesn't slide under the footer.
   Footer ≈ 72px tall (12px×2 padding + 48px button) + safe-area + nav.
   We add 96px above existing nav clearance for the footer itself. */
.clean-list {
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
}


/* Light-theme parity for the static footer — keep the surface +
   border colors consistent with the rest of the cleaning pane. */
[data-theme="light"] .clean-footer {
  background: var(--surface, #faf8f3);
  border-top-color: rgba(100, 85, 55, 0.10);
}


/* ═══════════════════════════════════════════════════════════════════════════
   v12.1 — PHOTOS, COSTS, COMING-UP STRIP, ACTION BUTTONS
   ─────────────────────────────────────────────────────
   New UI surfaces for: photo evidence per task, cost chips, the 7-day
   "Coming up" lookahead strip above section cards, and the per-task
   action button cluster (camera / $ / pencil) replacing the old single
   edit pencil.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Task action button cluster (right side of task row) ──────────────── */
.clean-task-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clean-task-action-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 6px;
  width: 32px;
  height: 32px;
  color: var(--faint, #7a7167);
  cursor: pointer;
  transition: all 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clean-task-action-btn:hover {
  color: var(--accent, #d4a44e);
  border-color: rgba(212, 164, 78, 0.20);
  background: rgba(212, 164, 78, 0.05);
}
.clean-task-action-btn:active {
  transform: scale(0.92);
}

/* On narrow screens, lay action buttons out horizontally to save vertical
   space (otherwise they'd push the task row uncomfortably tall). */
@media (max-width: 480px) {
  .clean-task-actions {
    flex-direction: row;
    align-self: flex-start;
  }
  .clean-task-action-btn {
    width: 30px;
    height: 30px;
    padding: 5px;
  }
}


/* ─── Photo thumbnails inside a task row ───────────────────────────────── */
.clean-task-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.clean-task-photo {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  border-radius: 10px;
  background: var(--elevated, #1a2236);
  overflow: hidden;
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.clean-task-photo:hover {
  border-color: var(--accent, #d4a44e);
  transform: scale(1.04);
}
.clean-task-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ─── Photo full-screen viewer ─────────────────────────────────────────── */
.clean-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.clean-photo-viewer-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  animation: cleanSheetFadeIn 200ms ease;
}
.clean-photo-viewer-img {
  position: relative;
  max-width: 96vw;
  max-height: 96vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
  animation: cleanPhotoZoomIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cleanPhotoZoomIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.clean-photo-viewer-close {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 150ms ease;
}
.clean-photo-viewer-close:hover {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(255, 255, 255, 0.32);
}


/* ─── Cost chip in task meta row ───────────────────────────────────────── */
.clean-cost-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 13px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgba(91, 138, 76, 0.10);
  color: #6fa853;
  border: 1px solid rgba(91, 138, 76, 0.28);
}
[data-theme="light"] .clean-cost-chip {
  color: #4a7338;
  background: rgba(91, 138, 76, 0.12);
}


/* ═══ COMING UP STRIP ════════════════════════════════════════════════════
   Horizontal scroll strip at the top of the cleaning list, showing tasks
   whose freshness will hit zero within the next 7 days. Each pill is
   tappable and scrolls the list to the relevant task. */

.clean-coming-up {
  background: linear-gradient(180deg,
    rgba(212, 164, 78, 0.06) 0%,
    rgba(212, 164, 78, 0.02) 100%);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.14));
  border-radius: var(--r, 10px);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.clean-coming-up-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #d4a44e);
  margin-bottom: 8px;
}
.clean-coming-up-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -2px;
  padding: 2px;
}
.clean-coming-up-scroll::-webkit-scrollbar { display: none; }

.clean-coming-up-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  background: var(--surface, #141a2a);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  border-radius: 999px;
  color: var(--text, #f0e9da);
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.clean-coming-up-pill:hover {
  border-color: var(--accent, #d4a44e);
  background: rgba(212, 164, 78, 0.06);
}
.clean-coming-up-pill-when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.clean-coming-up-pill-name {
  color: var(--text, #f0e9da);
}
.clean-coming-up-pill-who {
  color: var(--faint, #7a7167);
  font-size: 11.5px;
}

/* Coloring by urgency */
.clean-coming-up-pill.is-due .clean-coming-up-pill-when {
  color: #cf5959;
}
.clean-coming-up-pill.is-soon .clean-coming-up-pill-when {
  color: #d99c3d;
}
.clean-coming-up-pill.is-far .clean-coming-up-pill-when {
  color: var(--accent, #d4a44e);
}

[data-theme="light"] .clean-coming-up {
  background: linear-gradient(180deg,
    rgba(212, 164, 78, 0.10) 0%,
    rgba(212, 164, 78, 0.04) 100%);
}
[data-theme="light"] .clean-coming-up-pill.is-due  .clean-coming-up-pill-when { color: #a13c3c; }
[data-theme="light"] .clean-coming-up-pill.is-soon .clean-coming-up-pill-when { color: #b07a23; }


/* ═══════════════════════════════════════════════════════════════════════════
   v12.2 — VIEW MODE TOGGLE + SECTION KEBAB + COPY SHEET + EDIT REORDER
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── View mode toggle: "Today" / "All" segmented control ─────────────── */
.clean-view-toggle {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 12px 0;
  background: var(--surface, #141a2a);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.18));
  border-radius: 999px;
  padding: 3px;
  position: relative;
}
.clean-view-toggle-btn {
  padding: 6px 18px;
  border: none;
  background: transparent;
  color: var(--faint, #7a7167);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: all 200ms ease;
}
.clean-view-toggle-btn:hover {
  color: var(--text, #f0e9da);
}
.clean-view-toggle-btn.is-active {
  background: var(--accent, #d4a44e);
  color: var(--bg, #0b0f18);
}

/* Soft empty state when "Today" mode hides everything */
.clean-empty-soft {
  text-align: center;
  padding: 36px 20px;
  color: var(--faint, #7a7167);
  font-size: 13.5px;
}
.clean-empty-soft-text {
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}


/* ─── Section card kebab (⋯) — sits between freshness chip + chevron ──── */
.clean-card-kebab {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px 8px;
  color: var(--faint, #7a7167);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.clean-card-kebab:hover {
  color: var(--accent, #d4a44e);
  border-color: rgba(212, 164, 78, 0.20);
  background: rgba(212, 164, 78, 0.05);
}


/* ─── Section kebab popup menu ────────────────────────────────────────── */
.clean-section-kebab-menu {
  display: flex;
  flex-direction: column;
  min-width: 240px;
  background: var(--surface, #141a2a);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.30));
  border-radius: 16px;
  padding: 5px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  animation: cleanSheetSlideUp 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.clean-section-kebab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-radius: 11px;
  color: var(--text, #f0e9da);
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease;
}
.clean-section-kebab-item:hover:not(.is-disabled) {
  background: rgba(212, 164, 78, 0.08);
}
.clean-section-kebab-item.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.clean-section-kebab-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent, #d4a44e);
  width: 14px;
  display: inline-block;
  text-align: center;
}


/* ─── Copy section sheet (modal) ──────────────────────────────────────── */
.clean-copy-sheet {
  position: fixed;
  inset: 0;
  z-index: 4500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
}
.clean-copy-sheet-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: cleanSheetFadeIn 200ms ease;
}
.clean-copy-sheet-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 16px 24px;
  background: var(--surface, #141a2a);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cleanSheetSlideUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.clean-copy-sheet-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 17px;
  color: var(--text, #f0e9da);
  font-weight: 500;
}
.clean-copy-sheet-sub {
  font-size: 12.5px;
  color: var(--faint, #7a7167);
  line-height: 1.45;
  margin-bottom: 4px;
}
.clean-copy-sheet-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clean-copy-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.15));
  border-radius: 12px;
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-copy-option:hover {
  border-color: rgba(212, 164, 78, 0.32);
  background: rgba(212, 164, 78, 0.04);
}
.clean-copy-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #d4a44e);
  cursor: pointer;
}
.clean-copy-option-label {
  flex: 1;
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 14.5px;
  color: var(--text, #f0e9da);
}
.clean-copy-option-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--faint, #7a7167);
  letter-spacing: 0.02em;
}
.clean-copy-sheet-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.clean-copy-cancel,
.clean-copy-confirm {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  transition: all 150ms ease;
}
.clean-copy-cancel {
  background: transparent;
  border-color: var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  color: var(--faint, #7a7167);
}
.clean-copy-cancel:hover {
  color: var(--text, #f0e9da);
}
.clean-copy-confirm {
  background: var(--accent, #d4a44e);
  border-color: var(--accent, #d4a44e);
  color: var(--bg, #0b0f18);
  font-weight: 600;
}
.clean-copy-confirm:hover {
  background: #e0b462;
}
.clean-copy-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ─── Reorder row inside the task edit form ───────────────────────────── */
.clean-edit-reorder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.clean-edit-reorder-row .clean-edit-label {
  margin-bottom: 0;
  flex-shrink: 0;
}
.clean-edit-reorder {
  display: flex;
  gap: 6px;
}
.clean-edit-reorder-btn {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  border-radius: 10px;
  color: var(--faint, #7a7167);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-edit-reorder-btn:hover {
  color: var(--accent, #d4a44e);
  border-color: rgba(212, 164, 78, 0.40);
  background: rgba(212, 164, 78, 0.05);
}


/* ─── Light theme overrides for v12.2 surfaces ────────────────────────── */
[data-theme="light"] .clean-section-kebab-menu {
  background: #f9f5e8;
  border-color: rgba(100, 85, 55, 0.18);
}
[data-theme="light"] .clean-copy-sheet-card {
  background: #f9f5e8;
}
[data-theme="light"] .clean-copy-option {
  border-color: rgba(100, 85, 55, 0.10);
}
[data-theme="light"] .clean-copy-option:hover {
  background: rgba(212, 164, 78, 0.08);
}


/* ═══════════════════════════════════════════════════════════════════════════
   v12.3 — CLEANING ↔ TRAINING LINK
   ────────────────────────────────
   Training mode toggle, per-task training pills, inline training panels,
   edit-form link controls, and the link-picker sheet.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── View toggle row gets a flexbox layout to fit Today/All + Training pill */
.clean-view-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  flex-wrap: wrap;
}

/* Training mode toggle pill — sits to the right of Today/All */
.clean-train-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.18));
  border-radius: 999px;
  color: var(--faint, #7a7167);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 200ms ease;
  margin-left: auto;
}
.clean-train-mode-pill:hover {
  color: var(--accent, #d4a44e);
  border-color: rgba(212, 164, 78, 0.40);
}
.clean-train-mode-pill.is-active {
  background: rgba(212, 164, 78, 0.12);
  border-color: var(--accent, #d4a44e);
  color: var(--accent, #d4a44e);
}


/* ─── Per-task training pill (visible when training mode is on) ───── */
.clean-train-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 13px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid;
  transition: all 150ms ease;
}
.clean-train-pill.is-pending {
  color: var(--accent, #d4a44e);
  background: rgba(212, 164, 78, 0.10);
  border-color: rgba(212, 164, 78, 0.32);
}
.clean-train-pill.is-done {
  color: #6fa853;
  background: rgba(91, 138, 76, 0.10);
  border-color: rgba(91, 138, 76, 0.32);
}
.clean-train-pill:hover { transform: translateY(-1px); }
.clean-train-pill.is-open {
  background: var(--accent, #d4a44e);
  color: var(--bg, #0b0f18);
  border-color: var(--accent, #d4a44e);
}


/* ─── Inline training panel (expanded under the task) ──────────── */
.clean-train-panel {
  margin-top: 10px;
  padding: 8px;
  background: rgba(212, 164, 78, 0.04);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.18));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: cleanSheetSlideUp 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.clean-train-panel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface, #141a2a);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.10));
  border-radius: 10px;
}
.clean-train-panel-info { flex: 1; min-width: 0; }
.clean-train-panel-name {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: var(--text, #f0e9da);
  line-height: 1.25;
}
.clean-train-panel-meta {
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--faint, #7a7167);
  text-transform: uppercase;
}
.clean-train-panel-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 13px;
  flex-shrink: 0;
  border: 1px solid currentColor;
}
.clean-train-panel-status.is-done     { color: #6fa853; background: rgba(91, 138, 76, 0.10); }
.clean-train-panel-status.is-expiring { color: #d99c3d; background: rgba(214, 145, 46, 0.10); }
.clean-train-panel-status.is-expired  { color: #cf5959; background: rgba(180, 60, 60, 0.10); }
.clean-train-panel-status.is-pending  { color: var(--accent, #d4a44e); background: rgba(212, 164, 78, 0.10); }

.clean-train-panel-resource {
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #d4a44e);
  padding: 4px 10px;
  border: 1px solid rgba(212, 164, 78, 0.24);
  border-radius: 5px;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.clean-train-panel-resource:hover {
  background: rgba(212, 164, 78, 0.08);
  border-color: var(--accent, #d4a44e);
}

.clean-train-panel-mark {
  width: 32px;
  height: 32px;
  background: var(--accent, #d4a44e);
  color: var(--bg, #0b0f18);
  border: 1px solid var(--accent, #d4a44e);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.clean-train-panel-mark:hover { background: #e0b462; }


/* ─── Training-link controls inside the task edit form ─────────── */
.clean-edit-train-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.clean-edit-train-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 5px 5px 10px;
  background: rgba(212, 164, 78, 0.08);
  border: 1px solid rgba(212, 164, 78, 0.28);
  border-radius: 999px;
  color: var(--accent, #d4a44e);
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 12px;
  white-space: nowrap;
}
.clean-edit-train-link-x {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(212, 164, 78, 0.18);
  color: var(--accent, #d4a44e);
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}
.clean-edit-train-link-x:hover {
  background: rgba(207, 89, 89, 0.30);
  color: #cf5959;
}
.clean-edit-train-link-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: transparent;
  border: 1px dashed rgba(212, 164, 78, 0.30);
  border-radius: 999px;
  color: var(--accent, #d4a44e);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-edit-train-link-add:hover {
  background: rgba(212, 164, 78, 0.06);
  border-style: solid;
  border-color: var(--accent, #d4a44e);
}


/* ─── Link picker sheet (full-screen modal with searchable list) ── */
.clean-train-pick-sheet {
  position: fixed;
  inset: 0;
  z-index: 4500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.clean-train-pick-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: cleanSheetFadeIn 200ms ease;
}
.clean-train-pick-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  margin: 0 12px 16px;
  background: var(--surface, #141a2a);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: cleanSheetSlideUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.clean-train-pick-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--text, #f0e9da);
}
.clean-train-pick-sub {
  font-size: 12.5px;
  color: var(--faint, #7a7167);
  line-height: 1.4;
}
.clean-train-pick-search-wrap {
  position: relative;
}
.clean-train-pick-search {
  width: 100%;
  padding: 10px 12px;
  background: var(--elevated, #1a2236);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.15));
  border-radius: 10px;
  color: var(--text, #f0e9da);
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 14.5px;
  outline: none;
  box-sizing: border-box;
}
.clean-train-pick-search:focus {
  border-color: var(--accent, #d4a44e);
}
.clean-train-pick-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  margin: 0 -2px;
  padding: 2px;
}
.clean-train-pick-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.12));
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 150ms ease;
}
.clean-train-pick-item:hover {
  border-color: rgba(212, 164, 78, 0.32);
  background: rgba(212, 164, 78, 0.04);
}
.clean-train-pick-item.is-linked {
  background: rgba(212, 164, 78, 0.10);
  border-color: rgba(212, 164, 78, 0.40);
}
.clean-train-pick-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.clean-train-pick-item-name {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text, #f0e9da);
}
.clean-train-pick-item-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 13px;
  background: rgba(91, 138, 76, 0.15);
  color: #6fa853;
  border: 1px solid rgba(91, 138, 76, 0.32);
  flex-shrink: 0;
}
.clean-train-pick-item-status.is-add {
  background: rgba(212, 164, 78, 0.08);
  color: var(--accent, #d4a44e);
  border-color: rgba(212, 164, 78, 0.30);
}
.clean-train-pick-item-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--faint, #7a7167);
  text-transform: uppercase;
}
.clean-train-pick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.clean-train-pick-close {
  padding: 10px 22px;
  background: var(--accent, #d4a44e);
  border: 1px solid var(--accent, #d4a44e);
  border-radius: 10px;
  color: var(--bg, #0b0f18);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-train-pick-close:hover { background: #e0b462; }


/* ─── Light theme tweaks for v12.3 ─────────────────────────────── */
[data-theme="light"] .clean-train-pick-card {
  background: #f9f5e8;
}
[data-theme="light"] .clean-train-panel {
  background: rgba(212, 164, 78, 0.06);
}
[data-theme="light"] .clean-train-panel-row {
  background: #f9f5e8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   v12.3 — TRAINING LAUNCHER (top of Duties view)
   ──────────────────────────────────────────────
   Lives above the cleaning + ordering panes. Opens the Training view.
   Shows a live status subtitle: pending / expiring / expired count.
   ═══════════════════════════════════════════════════════════════════════════ */

.duties-train-launcher-wrap {
  padding: 10px 12px 0;
  background: var(--bg, #0b0f18);
}

.duties-train-launcher {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: linear-gradient(180deg,
    rgba(212, 164, 78, 0.08) 0%,
    rgba(212, 164, 78, 0.03) 100%);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.22));
  border-radius: var(--r, 10px);
  color: var(--text, #f0e9da);
  cursor: pointer;
  transition: all 200ms ease;
  font-family: 'Outfit', 'DM Sans', sans-serif;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.duties-train-launcher:hover {
  border-color: var(--accent, #d4a44e);
  background: linear-gradient(180deg,
    rgba(212, 164, 78, 0.14) 0%,
    rgba(212, 164, 78, 0.05) 100%);
  transform: translateY(-1px);
}
.duties-train-launcher:active {
  transform: scale(0.99);
}

/* Urgency states — driven by duties.js refreshTrainingLauncherSubtitle() */
.duties-train-launcher.has-gaps {
  border-color: rgba(207, 89, 89, 0.40);
  background: linear-gradient(180deg,
    rgba(207, 89, 89, 0.10) 0%,
    rgba(207, 89, 89, 0.03) 100%);
}
.duties-train-launcher.has-gaps:hover {
  border-color: #cf5959;
}
.duties-train-launcher.has-pending {
  border-color: rgba(212, 164, 78, 0.40);
}

.duties-train-launcher-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(212, 164, 78, 0.12);
  border: 1px solid rgba(212, 164, 78, 0.30);
  color: var(--accent, #d4a44e);
  display: flex;
  align-items: center;
  justify-content: center;
}
.duties-train-launcher.has-gaps .duties-train-launcher-icon {
  background: rgba(207, 89, 89, 0.12);
  border-color: rgba(207, 89, 89, 0.32);
  color: #cf5959;
}

.duties-train-launcher-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.duties-train-launcher-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--text, #f0e9da);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.duties-train-launcher-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--faint, #7a7167);
  text-transform: uppercase;
  line-height: 1.3;
}
.duties-train-launcher.has-gaps    .duties-train-launcher-sub { color: #cf5959; }
.duties-train-launcher.has-pending .duties-train-launcher-sub { color: var(--accent, #d4a44e); }

.duties-train-launcher-chev {
  flex-shrink: 0;
  color: var(--faint, #7a7167);
  display: flex;
  align-items: center;
  transition: transform 200ms ease, color 200ms ease;
}
.duties-train-launcher:hover .duties-train-launcher-chev {
  color: var(--accent, #d4a44e);
  transform: translateX(2px);
}

[data-theme="light"] .duties-train-launcher {
  background: linear-gradient(180deg,
    rgba(212, 164, 78, 0.12) 0%,
    rgba(212, 164, 78, 0.04) 100%);
}
[data-theme="light"] .duties-train-launcher.has-gaps .duties-train-launcher-sub {
  color: #a13c3c;
}


/* ═══════════════════════════════════════════════════════════════════════════
   v12.4 — PER-TASK NOTES + COMPLETION HISTORY
   ───────────────────────────────────────────
   Quick contextual notes that surface on the task row and persist
   across shifts. Tap the note action button to add/edit. Tap the task
   name to see the last 12 completions with photos, costs, and who.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── Note pill (chip in the meta row) ─────────────────────────────── */
.clean-note-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 13px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d99c3d;
  background: rgba(217, 156, 61, 0.12);
  border: 1px solid rgba(217, 156, 61, 0.30);
}
[data-theme="light"] .clean-note-pill {
  color: #b07a23;
  background: rgba(214, 145, 46, 0.14);
}


/* ─── Active note card (under the task body) ──────────────────────── */
.clean-note-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 32px 10px 12px;
  background: rgba(217, 156, 61, 0.08);
  border: 1px solid rgba(217, 156, 61, 0.28);
  border-left: 3px solid #d99c3d;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 150ms ease;
}
.clean-note-card:hover {
  background: rgba(217, 156, 61, 0.14);
}
.clean-note-card-text {
  flex: 1;
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text, #f0e9da);
  white-space: pre-wrap;
}
.clean-note-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--faint, #7a7167);
  letter-spacing: 0.04em;
  text-align: right;
}
.clean-note-card-meta span:first-child { color: #d99c3d; }
.clean-note-card-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--faint, #7a7167);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}
.clean-note-card-x:hover {
  background: rgba(207, 89, 89, 0.20);
  color: #cf5959;
  border-color: rgba(207, 89, 89, 0.40);
}


/* ─── Tappable task name (replaces the static label, hooks history) ─ */
.clean-task-name {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: color 150ms ease;
}
.clean-task-name:hover {
  color: var(--accent, #d4a44e);
}


/* ─── Completion history modal ──────────────────────────────────── */
.clean-history-sheet {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.clean-history-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: cleanSheetFadeIn 200ms ease;
}
.clean-history-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  margin: 0 12px 16px;
  background: var(--surface, #141a2a);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  animation: cleanSheetSlideUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}
.clean-history-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.12));
}
.clean-history-titles { flex: 1; min-width: 0; }
.clean-history-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text, #f0e9da);
  line-height: 1.2;
}
.clean-history-sub {
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint, #7a7167);
}
.clean-history-close {
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 5px;
  color: var(--faint, #7a7167);
  cursor: pointer;
  transition: all 150ms ease;
}
.clean-history-close:hover {
  color: var(--text, #f0e9da);
  border-color: rgba(212, 164, 78, 0.20);
  background: rgba(212, 164, 78, 0.05);
}
.clean-history-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 16px;
}
.clean-history-loading,
.clean-history-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--faint, #7a7167);
}
.clean-history-empty-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--text, #f0e9da);
  margin-bottom: 6px;
}
.clean-history-empty-sub {
  font-size: 13px;
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}


/* ─── Per-completion row in history ────────────────────────────── */
.clean-history-row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(212, 164, 78, 0.06);
}
.clean-history-row:last-child { border-bottom: none; }

.clean-history-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.clean-history-row-date {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text, #f0e9da);
}
.clean-history-row-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--faint, #7a7167);
}
.clean-history-row-by {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #d4a44e);
  background: rgba(212, 164, 78, 0.08);
  padding: 2px 8px;
  border-radius: 13px;
}

.clean-history-cost {
  display: inline-block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #6fa853;
  background: rgba(91, 138, 76, 0.10);
  border: 1px solid rgba(91, 138, 76, 0.28);
  padding: 3px 10px;
  border-radius: 13px;
}

.clean-history-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.clean-history-photo {
  width: 80px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  border-radius: 10px;
  background: var(--elevated, #1a2236);
  overflow: hidden;
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.clean-history-photo:hover {
  border-color: var(--accent, #d4a44e);
  transform: scale(1.04);
}
.clean-history-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ─── Light theme for v12.4 surfaces ──────────────────────────── */
[data-theme="light"] .clean-note-card {
  background: rgba(214, 145, 46, 0.10);
  border-color: rgba(214, 145, 46, 0.32);
}
[data-theme="light"] .clean-history-card {
  background: #f9f5e8;
}
[data-theme="light"] .clean-history-row-by {
  color: #8b6914;
  background: rgba(212, 164, 78, 0.14);
}


/* ═══════════════════════════════════════════════════════════════════════════
   v14 — CLEANING TAKEOVER MODE (rev 2)
   ────────────────────────────────────
   Cleaning + Ordering both take over the screen below the NEXUS masthead.
   The X in the top-left of each header returns to Home.

   Implementation: when body has view-clean, #appWrap becomes a flex column
   capped at 100dvh. The masthead sits at top, the active view fills the
   rest, and the bottom-nav is hidden. Inside the view, content scrolls;
   the submit footer is pinned to the bottom of the viewport.

   Why flex on #appWrap (not body): Anthropic's existing nav uses
   position:sticky and other UI pieces (toasts, modals) sit at body
   level. Constraining #appWrap keeps everything else free.
   ═══════════════════════════════════════════════════════════════════════════ */

/* When the cleaning pane is active, lock #appWrap to one viewport, no
   scroll on the wrapper — only the inner clean-list scrolls. dvh handles
   iOS Safari's URL-bar shrink/grow correctly. The body class
   `is-pane-cleaning` is set by duties.js's activatePane() and ONLY applies
   to the cleaning pane, leaving ordering with its original layout (and
   the bottom-nav visible). */
body.is-pane-cleaning #appWrap {
  height: 100dvh;
  height: 100vh;       /* fallback */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* The masthead stays at top — relative inside the flex column */
body.is-pane-cleaning #appWrap > .nav {
  flex-shrink: 0;
  position: relative !important;
}
/* Bottom-nav stays visible during cleaning takeover — gives the user
   direct hops to Home, Equipment, Log, etc. without going through the
   X close. (Earlier versions hid the nav and forced the X-only exit;
   reverted because it sacrificed too much navigation speed.) The X in
   the cleaning header still works as an explicit "exit cleaning" path. */
/* Active view fills the rest of the viewport */
body.is-pane-cleaning #cleanView.active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg, #0b0f18);
}
/* Inside the cleaning view, the cleaning duties-pane is the flex column
   that stacks header / list / footer. */
body.is-pane-cleaning .duties-pane[data-pane="cleaning"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The unified header: X + location tabs in one row. */
.clean-header.clean-header-takeover {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.clean-takeover-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  color: var(--text, #f0e9da);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  margin-right: 4px;
}
.clean-takeover-close:hover {
  background: rgba(212, 164, 78, 0.08);
  border-color: var(--accent, #d4a44e);
  color: var(--accent, #d4a44e);
}
.clean-takeover-close:active { transform: scale(0.94); }

/* The list itself is the scroll container, taking remaining vertical
   space between the header and the sticky footer. */
body.is-pane-cleaning #cleanList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 12px;
}
/* The clean-progress bar shouldn't squeeze the list — it's a fixed strip */
body.is-pane-cleaning .clean-progress {
  flex-shrink: 0;
}
/* The footer pins to the bottom of the column. In takeover mode it
   becomes a static flex child (not position:fixed) so it sits flush at
   the actual bottom of the viewport — overrides the legacy rule that
   bumped it up 56px to clear the bottom-nav (which is hidden in
   takeover, so the offset created the "floating above the bottom"
   effect). */
body.is-pane-cleaning .clean-footer {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex-shrink: 0;
  background: var(--bg, #0b0f18);
  border-top: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.16));
  /* Slightly more bottom padding so the Submit Report row clears the
     bottom-nav / home-indicator without feeling cramped against it. */
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0));
  z-index: 5;
}
/* In takeover mode the list doesn't need the 96px bottom padding that
   was reserving space for a position:fixed footer — the footer is now
   a normal flex child below the list, so the list can use natural padding. */
body.is-pane-cleaning #cleanList,
body.is-pane-cleaning .clean-list {
  padding-bottom: 12px !important;
  scroll-padding-bottom: 0 !important;
}

/* ─── LOCATION PICKER ─ matches ordering's .ord-loc-picker exactly ───
   Single rounded pill container with the location buttons as
   transparent segments inside. The active segment fills with gold;
   inactive ones are subtle text-only. Earlier the cleaning view used
   3 standalone pill buttons each with their own border + background
   tint — replaced here with the unified pill-group treatment so the
   two surfaces (cleaning + ordering) read as the same control. */
.clean-loc-picker {
  display: flex;
  gap: 4px;
  background: var(--nx-surface-1, rgba(212, 164, 78, 0.04));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22));
  border-radius: 999px;
  padding: 4px;
  flex-shrink: 0;
}
/* Override the standalone .clean-tab styling when nested inside
   .clean-loc-picker — needs to defeat the !important overrides set
   in views-system.css for the original pill-button look. */
.clean-loc-picker .clean-tab {
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  min-height: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--nx-faint, #857f75) !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease !important;
}
.clean-loc-picker .clean-tab:hover {
  color: var(--nx-text, #f0e9da) !important;
}
.clean-loc-picker .clean-tab.active {
  background: var(--nx-gold, #d4a44e) !important;
  color: var(--nx-gold-on, #101626) !important;
  box-shadow: 0 0 0 1px var(--nx-gold, #d4a44e),
              0 0 14px rgba(212, 164, 78, 0.32) !important;
}
[data-theme="light"] .clean-loc-picker .clean-tab.active {
  color: #faf8f3 !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   v14 — CLEANING EMAIL COMPOSE SHEET
   ──────────────────────────────────
   Editable to/cc/bcc/subject/body before mailto:. Modeled after
   ordering's review-and-send flow. Full-screen takeover sheet.
   ═══════════════════════════════════════════════════════════════════════════ */

.clean-compose-sheet {
  position: fixed;
  inset: 0;
  z-index: 5500;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.clean-compose-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cleanSheetFadeIn 200ms ease;
}
.clean-compose-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0;
  background: var(--bg, #0b0f18);
  display: flex;
  flex-direction: column;
  animation: cleanSheetSlideUp 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.clean-compose-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.16));
  flex-shrink: 0;
  background: var(--surface, #141a2a);
}
.clean-compose-back {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.18));
  color: var(--text, #f0e9da);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.clean-compose-back:hover {
  background: rgba(212, 164, 78, 0.08);
  color: var(--accent, #d4a44e);
}
.clean-compose-titles { flex: 1; min-width: 0; }
.clean-compose-title {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text, #f0e9da);
  line-height: 1.2;
}
.clean-compose-sub {
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint, #7a7167);
}

.clean-compose-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.clean-compose-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--faint, #7a7167);
  margin-top: 6px;
}
.clean-compose-hint {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint, #7a7167);
  font-weight: 400;
  margin-left: 4px;
  font-style: italic;
}
.clean-compose-input {
  width: 100%;
  padding: 11px 12px;
  background: var(--elevated, #1a2236);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.15));
  border-radius: 10px;
  color: var(--text, #f0e9da);
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 14.5px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}
.clean-compose-input:focus { border-color: var(--accent, #d4a44e); }

.clean-compose-textarea {
  width: 100%;
  min-height: 180px;
  padding: 11px 12px;
  background: var(--elevated, #1a2236);
  border: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.15));
  border-radius: 10px;
  color: var(--text, #f0e9da);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 150ms ease;
}
.clean-compose-textarea:focus { border-color: var(--accent, #d4a44e); }

.clean-compose-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text, #f0e9da);
  cursor: pointer;
}
.clean-compose-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #d4a44e);
  cursor: pointer;
}

.clean-compose-foot {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--nx-highlight-line, rgba(212, 164, 78, 0.12));
  background: var(--surface, #141a2a);
  flex-shrink: 0;
}
.clean-compose-cancel,
.clean-compose-send {
  flex: 1;
  padding: 13px 18px;
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  transition: all 150ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.clean-compose-cancel {
  background: transparent;
  border-color: var(--nx-highlight-line, rgba(212, 164, 78, 0.20));
  color: var(--faint, #7a7167);
  flex: 0 0 100px;
}
.clean-compose-cancel:hover { color: var(--text, #f0e9da); }
.clean-compose-send {
  background: var(--accent, #d4a44e);
  border-color: var(--accent, #d4a44e);
  color: var(--bg, #0b0f18);
  font-weight: 600;
}
.clean-compose-send:hover { background: #e0b462; }
.clean-compose-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-theme="light"] .clean-compose-card {
  background: #f5f0e0;
}
[data-theme="light"] .clean-compose-head,
[data-theme="light"] .clean-compose-foot {
  background: #f9f5e8;
}

/* ════════════════════════════════════════════════════════════════════
   v18.6 — Consolidated Cleaning Actions
   Replaces the 3-button footer (scan/print/submit) with ONE primary
   gold-gradient CTA, styled to match ordering's design language.
   Opening the CTA reveals a bottom action sheet with every end-of-
   shift option in one place.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Footer CTA — single gold-gradient button ──────────────────── */
.clean-actions-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--nx-gold) 0%, var(--nx-gold-strong, var(--nx-gold)) 100%);
  color: var(--nx-bg);
  border: 1px solid var(--nx-gold-strong, var(--nx-gold));
  border-radius: 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  transition: transform var(--nx-press, 0.18s), box-shadow var(--nx-press, 0.18s), filter var(--nx-press, 0.18s);
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .clean-actions-cta { color: #fff; }
.clean-actions-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.clean-actions-cta:active { transform: scale(0.98); }
.clean-actions-cta-chev {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 2px;
}

/* ─── Bottom action sheet ──────────────────────────────────────────
   Slides up from the bottom. Backdrop dims the page. The card uses
   ordering's surface + radius language; rows are minimal (icon +
   label + hint) so the whole thing reads at a glance. */
.clean-actions-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}
.clean-actions-sheet-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.clean-actions-sheet.is-open { pointer-events: auto; }
.clean-actions-sheet.is-open .clean-actions-sheet-bg {
  opacity: 1;
  pointer-events: auto;
}
.clean-actions-sheet-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--nx-surface-1, #141a2a);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.15));
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0.85, 0.3, 1);
}
.clean-actions-sheet.is-open .clean-actions-sheet-card {
  transform: translateY(0);
}
.clean-actions-sheet-handle {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  margin: 0 auto 14px;
}
.clean-actions-sheet-eyebrow {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-faintest, rgba(255, 255, 255, 0.4));
  text-align: center;
  margin-bottom: 4px;
}
.clean-actions-sheet-title {
  font-family: var(--nx-font-display, 'Outfit'), sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--nx-text, #fff);
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}

/* Primary CTA inside the sheet (matches ordering's primary CTA) */
.clean-actions-cta-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--nx-gold) 0%, var(--nx-gold-strong, var(--nx-gold)) 100%);
  color: var(--nx-bg);
  border: 1px solid var(--nx-gold-strong, var(--nx-gold));
  border-radius: 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  transition: filter var(--nx-press, 0.18s), transform var(--nx-press, 0.18s);
  margin-bottom: 14px;
}
[data-theme="light"] .clean-actions-cta-primary { color: #fff; }
.clean-actions-cta-primary:hover { filter: brightness(1.05); }
.clean-actions-cta-primary:active { transform: scale(0.98); }

/* Divider between primary CTA and secondary rows */
.clean-actions-divider {
  height: 1px;
  background: var(--nx-gold-line, rgba(212, 164, 78, 0.12));
  margin: 4px 4px 10px;
}

/* Secondary action rows */
.clean-actions-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--nx-text, #fff);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background var(--nx-press, 0.18s), border-color var(--nx-press, 0.18s);
  margin-bottom: 2px;
}
.clean-actions-row:hover {
  background: var(--nx-surface-2, rgba(255, 255, 255, 0.04));
  border-color: var(--nx-gold-line, rgba(212, 164, 78, 0.15));
}
.clean-actions-row:active { transform: scale(0.99); }
.clean-actions-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-gold, #d4a44e);
}
.clean-actions-row-label {
  font-weight: 500;
  letter-spacing: 0.1px;
}
.clean-actions-row-hint {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faintest, rgba(255, 255, 255, 0.4));
}

/* Cancel button at the bottom */
.clean-actions-cancel {
  width: 100%;
  padding: 13px 20px;
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 16px;
  color: var(--nx-faint, rgba(255, 255, 255, 0.55));
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: color var(--nx-press, 0.18s), border-color var(--nx-press, 0.18s);
}
.clean-actions-cancel:hover {
  color: var(--nx-text, #fff);
  border-color: var(--nx-gold, #d4a44e);
}

/* ── Simple Weekly Schedule editor (Kitchen / Dining / Exterior) — v374 ── */
.sched3-modal{position:fixed;inset:0;z-index:6000;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.sched3-modal.is-open{opacity:1}
.sched3-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sched3-card{position:relative;width:100%;max-width:720px;max-height:92vh;display:flex;flex-direction:column;
  background:var(--nx-panel,#15161c);border:1px solid rgba(255,255,255,.1);border-radius:18px 18px 0 0;
  transform:translateY(14px);transition:transform .2s;overflow:hidden}
.sched3-modal.is-open .sched3-card{transform:translateY(0)}
.sched3-head{padding:16px 18px 10px;position:relative;border-bottom:1px solid rgba(255,255,255,.07)}
.sched3-title{font-size:16px;font-weight:700;color:var(--nx-text,#fff)}
.sched3-sub{font-size:11px;color:var(--nx-faint,#8a8a96);margin-top:2px}
.sched3-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:transparent;color:var(--nx-faint,#8a8a96);font-size:14px;cursor:pointer}
.sched3-tabs{display:flex;gap:8px;padding:12px 18px}
.sched3-tab{flex:1;padding:9px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:var(--nx-faint,#a7a7b2);font-size:13px;font-weight:600;cursor:pointer}
.sched3-tab.on{background:rgba(212,164,78,.18);border-color:var(--nx-gold,#d4a44e);color:var(--nx-text,#fff)}
.sched3-grid{overflow:auto;padding:4px 12px 12px;flex:1}
.s3-row{display:grid;grid-template-columns:96px repeat(7,1fr);gap:4px;margin-bottom:4px}
.s3-name{display:flex;align-items:center;font-size:12px;color:var(--nx-text,#eee);font-weight:600;padding-right:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s3-cell{border-radius:7px;min-height:34px;font-size:12px}
.s3-head .s3-dh{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--nx-faint,#8a8a96);min-height:30px}
.s3-dh span{font-size:10px;font-weight:700}.s3-dh small{font-size:8px;opacity:.7}
.s3-day{border:1px solid rgba(255,255,255,.08);cursor:pointer;color:#0d0d0d;font-weight:800;display:flex;align-items:center;justify-content:center}
.s3-day.off{background:#101013}
.s3-day.on{background:var(--nx-gold,#d4a44e);color:#1a1200}
.s3-empty{color:var(--nx-faint,#8a8a96);font-size:12px;padding:20px;text-align:center}
.sched3-foot{display:flex;gap:10px;padding:12px 18px;border-top:1px solid rgba(255,255,255,.07)}
.sched3-btn{flex:1;padding:12px;border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.12)}
.sched3-print{background:rgba(255,255,255,.05);color:var(--nx-text,#fff)}
.sched3-done{background:var(--nx-gold,#d4a44e);color:#1a1200;border-color:transparent}
.sched3-add{background:rgba(255,255,255,.05);color:var(--nx-text,#fff);flex:0 0 auto;padding-left:14px;padding-right:14px}
.s3-day.s3-pending{opacity:.5}
.cleanlite-scopednote{font-size:11px;color:var(--nx-faint,#8a8a96);padding:2px 4px 8px;text-align:center}
.sched3-scope{display:flex;align-items:center;gap:8px;padding:2px 18px 10px;font-size:11px;color:var(--nx-faint,#a7a7b2);cursor:pointer}
.sched3-scope input{width:16px;height:16px;accent-color:var(--nx-gold,#d4a44e);flex:0 0 auto}
.cleanlite-wk-day.is-today .cleanlite-wk-lbl{color:var(--nx-gold,#d4a44e);font-weight:700}
.cleanlite-wk-day.is-today{position:relative}
.cleanlite-wk-day.is-today::after{content:"";position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--nx-gold,#d4a44e)}
.cleanlite-wk-fill.is-future{background:rgba(255,255,255,.08)}

/* v385 — "preview as a cleaner" (admin verification of schedule scoping) */
.cleanlite-preview-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(212,164,78,.14);border:1px solid rgba(212,164,78,.4);color:var(--nx-text,#fff);border-radius:10px;padding:8px 12px;margin:6px 0 10px;font-size:12px}
.cleanlite-preview-banner b{color:var(--nx-gold,#d4a44e)}
.cleanlite-preview-exit{margin-left:auto;background:var(--nx-gold,#d4a44e);color:#1a1200;border:none;border-radius:999px;font-size:11px;font-weight:700;padding:4px 12px;cursor:pointer}
.sched3-preview{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 18px 10px}
.sched3-preview-lbl{font-size:11px;color:var(--nx-faint,#a7a7b2)}
.sched3-preview-sel{flex:1;min-width:120px;background:rgba(255,255,255,.05);color:var(--nx-text,#fff);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:7px 8px;font-size:13px}
.sched3-preview-go{background:rgba(255,255,255,.06);color:var(--nx-text,#fff);border:1px solid rgba(255,255,255,.16);border-radius:8px;font-size:13px;font-weight:600;padding:7px 12px;cursor:pointer;white-space:nowrap}