/* REV 84: z-index scale (Rule 6) */
:root {
  --z-sidebar: 60;
  --z-dock: 50;
  --z-strip-floating: 50;
  --z-sticky-header: 30;
  --z-expand: 65;
  --z-tour: 2136;
  --z-modal-layer: 2000;
  --z-modal: 90;
  --z-toast: 120;
  --z-push-toast: 120;
  --z-gate: 90;
  --z-header-icon: 70;
  --z-help-overlay: 75;
  --z-expand-modal: 80;
  --z-notif: 40;
  --z-search: 45;
  --z-card-overlay: 2;
  --z-card-icon: 3;
  --z-confirm: 90;

  /* ---- Design tokens — REV 43 system, REV 59 dark recalibration ----
     REV 86: merged the second :root into this block and dropped the
     contradicting --red duplicate (the alias block's bright #DF171D lost
     to this block's brand maroon anyway; --red resolves to maroon). */
  --maroon: #8B1A2B;
  --maroon-dark: #6b101f;
  --navy: #07133f;
  --ink: #111111;
  --shadow: #111111;
  --paper: #FBF7EE;
  --line: #E4E4E7;
  --red: #8B1A2B;
  --shadow-ink: #111111;
  --surface: #FFFFFF;
  --muted: #71717A;
  /* Homepage aliases (REV 84: Rule 1 — no parallel token names) */
  --soft-red: #F5D5D5;
}

/* ---------- Dark theme tokens (REV 59: one color, one role) ---------- */
html[data-theme="dark"] {
  /* Semantic palette */
  --bg-page: #100C11;
  --bg-card: #1A1519;
  --bg-card-hover: #241F29;
  --accent-primary: #E13C63;
  --accent-primary-hover: #A8283A;
  --border-structural: #6E2D3F;
  --text-primary: #F2EEF1;
  --text-secondary: #A79CA3;
  --status-warning: #F0A13C;
  --status-success: #3E9C63;
  /* Legacy aliases remapped to their single-role semantic token */
  --maroon: var(--accent-primary);
  --maroon-dark: var(--text-primary);
  --ink: var(--text-primary);
  --shadow: rgba(255, 255, 255, 0.85);
  --paper: var(--bg-card);
  --line: var(--border-structural);
  --red: var(--text-secondary);
  --shadow-ink: rgba(255, 255, 255, 0.85);
}

/* ---------- Page transition (smooth route entry) ---------- */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.board-shell,
.tracker-shell,
.settings-shell,
main.arc-dot-field {
  animation: page-enter 0.5s ease-out backwards;
}

/* ---------- Cream dot-field canvas ---------- */
.arc-dot-field,
body,
.tracker-shell,
.board-shell {
  background-color: #fffdf8;
  background-image: radial-gradient(circle, rgba(152, 32, 54, 0.30) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

/* ---------- Hard-edge, tactile controls ---------- */
.arc-action,
.arc-action-sm,
.arc-logo {
  border: 2px solid var(--ink) !important;
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform 120ms linear, box-shadow 120ms linear;
}
.arc-action-sm {
  border-width: 2px !important;
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.arc-logo {
  border-width: 3px !important;
  box-shadow: 4px 4px 0 var(--shadow);
}
.arc-action:hover,
.arc-action:focus-visible,
.arc-action-sm:hover,
.arc-action-sm:focus-visible,
.arc-logo:hover,
.arc-logo:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--shadow);
}
.arc-action:active,
.arc-action-sm:active,
.arc-logo:active,
.neubrutal-btn:active,
.card-action:active,
.mn-item:active,
.sidebar-link:active,
.fab:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow);
}
.arc-action:disabled,
.arc-action-sm:disabled {
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.55;
}

/* ---------- REV 58/65: logo tactile parity — hover offset matches the
   button design system (-3px lift, 9px hard-offset shadow). ---------- */
.arc-logo:hover,
.arc-logo:focus-within {
  transform: translate(-3px, -3px) !important;
  box-shadow: 9px 9px 0 var(--ink) !important;
}
.arc-logo:active {
  transform: translate(2px, 2px) !important;
  box-shadow: inset 2px 2px 0 var(--ink) !important;
}

/* ---------- Header: inline action cluster (desktop in-page actions, mobile hidden) ---------- */
.header-actions {
  display: none !important;
}
@media (min-width: 1024px) {
  .header-actions {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
  }
}
@media (max-width: 1023.98px) {
  .header-actions {
    display: none !important;
  }
}

/* ---------- Desktop sidebar ---------- */
.desktop-sidebar {
  display: none;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 1.25rem;
}
.sidebar-logo-link {
  display: block;
  line-height: 0;
  border-radius: 8px;
}
.sidebar-logo-link:focus-visible {
  outline: 3px solid var(--maroon);
  outline-offset: 2px;
}
.sidebar-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 4px;
  flex: 0 0 auto;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform 120ms linear, box-shadow 120ms linear, background 120ms linear;
}
.sidebar-logo:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--shadow);
  background: rgba(152, 32, 54, 0.12);
}
.sidebar-logo:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}
.sidebar-title {
  display: block;
  font-family: "Poppins", "DM Sans", sans-serif;
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -0.02em;
  color: var(--maroon);
  line-height: 1.02;
}
.sidebar-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #6c6166;
  margin-top: 2px;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  /* REV 91c: interaction values matched EXACTLY to Settings' .notif-btn —
     no rest shadow, 120ms ease, press fills the 1px shadow */
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.sidebar-link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #111111;
  background: #fffdf8;
}
.sidebar-link:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111111;
}
.sidebar-link.is-active {
  background: var(--maroon);
  color: #fff;
}
.sidebar-link svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--maroon-dark);
}
.sidebar-link.is-active svg {
  color: #fff;
}
.sidebar-footer {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sidebar-widget-slot,
.sidebar-sync-slot {
  display: flex;
  justify-content: flex-start;
}

/* ---------- REV 53: Action Board utility cluster (tour, sound, theme, lock) ---------- */
.utility-cluster {
  display: flex;
  flex-direction: column;
  /* REV 75: uniform 12px rhythm across all four utility buttons */
  gap: 12px;
  align-items: flex-start;
}
.utility-cluster .sidebar-widget-slot {
  /* REV 75: shrink to the lock button when closed; the inline input
     expansion still grows inside the sidebar width when opened */
  width: auto;
  max-width: 100%;
}
body:has(.board-shell) .password-toggle,
body:has(.tracker-shell) .password-toggle {
  width: 36px;
  height: 36px;
}

/* ---------- REV 43: header divider + control parity (NEXUS == CORE) ---------- */
header.board-header,
header.sheet-header {
  border-bottom: 1px solid var(--line);
}
body:has(.board-shell) header.board-header {
  padding-bottom: 24px;
  margin-bottom: 24px;
}
@media (min-width: 1024px) {
  body:has(.board-shell) .password-row:not(:has(> *)),
  body:has(.tracker-shell) .password-row:not(:has(> *)) {
    display: none;
  }
}

/* ---------- Dark mode toggle + auth stack ---------- */
.theme-toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  color: var(--maroon-dark);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
/* Match the theme toggle to each page's Edit Lock button size. */
body:has(.board-shell) .theme-toggle,
body:has(.tracker-shell) .theme-toggle,
body:has(.settings-shell) .theme-toggle {
  width: 36px;
  height: 36px;
}
.theme-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--shadow);
  background: #fffdf8;
}
.theme-toggle:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--shadow) !important;
}
.theme-toggle svg {
  width: 17px;
  height: 17px;
}
.theme-toggle .lucide-moon {
  display: none;
}
html[data-theme="dark"] .theme-toggle {
  background: var(--bg-card);
  border-color: var(--border-structural);
  color: var(--text-primary);
}
html[data-theme="dark"] .theme-toggle:hover {
  background: var(--bg-card-hover);
}
html[data-theme="dark"] .theme-toggle .lucide-sun {
  display: none;
}
html[data-theme="dark"] .theme-toggle .lucide-moon {
  display: block;
}
/* ---------- REV 51: sound toggle (Action Board utility cluster) ---------- */
.sound-toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #111111;
  border-radius: 8px;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  box-shadow: 2px 2px 0 #111111;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
.sound-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #111111;
  background: #fffdf8;
}
.sound-toggle:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111111;
}
.sound-toggle svg {
  width: 17px;
  height: 17px;
}
.sound-toggle .lucide-volume-x {
  display: none;
}
html[data-sound="off"] .sound-toggle .lucide-volume-2 {
  display: none;
}
html[data-sound="off"] .sound-toggle .lucide-volume-x {
  display: block;
}
html[data-theme="dark"] .sound-toggle {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
  box-shadow: 2px 2px 0 #ffffff;
}
html[data-theme="dark"] .sound-toggle:hover {
  background: var(--bg-card-hover);
  box-shadow: 4px 4px 0 #ffffff;
}
html[data-theme="dark"] .sound-toggle:active {
  box-shadow: 1px 1px 0 #ffffff;
}
/* Muted switch state: pressed-down look when sound is off */
html[data-sound="off"] .sound-toggle {
  transform: translate(1px, 1px);
  background: #e9e2d8;
  color: #7a6f74;
  box-shadow: 1px 1px 0 #111111;
}
html[data-sound="off"] .sound-toggle:hover {
  transform: translate(0, 0);
  background: #e3dcd1;
  box-shadow: 3px 3px 0 #111111;
}
html[data-theme="dark"] html[data-sound="off"] .sound-toggle {
  background: var(--bg-page);
  color: var(--text-secondary);
  box-shadow: 1px 1px 0 #ffffff;
}
html[data-theme="dark"] html[data-sound="off"] .sound-toggle:hover {
  background: var(--bg-card);
  box-shadow: 3px 3px 0 #ffffff;
}

/* ---------- REV 51: tutorial trigger (?) buttons ---------- */
.tour-toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #111111;
  border-radius: 8px;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  box-shadow: 2px 2px 0 #111111;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
.tour-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #111111;
  background: #fffdf8;
}
.tour-toggle:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111111;
}
.tour-toggle svg {
  width: 19px;
  height: 19px;
}
html[data-theme="dark"] .tour-toggle {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
  box-shadow: 2px 2px 0 #ffffff;
}
html[data-theme="dark"] .tour-toggle:hover {
  background: var(--bg-card-hover);
  box-shadow: 4px 4px 0 #ffffff;
}
html[data-theme="dark"] .tour-toggle:active {
  box-shadow: 1px 1px 0 #ffffff;
}

/* Homepage: tutorial (?) + sound toggle sit fixed beside the dark mode toggle */
main.arc-dot-field .tour-toggle {
  position: fixed;
  top: 16px;
  right: 72px;
  left: auto;
  bottom: auto;
  z-index: var(--z-header-icon);
  width: 38px;
  height: 38px;
  border-radius: 6px;
}
main.arc-dot-field .tour-toggle svg {
  width: 24px;
  height: 24px;
}
main.arc-dot-field .sound-toggle {
  position: fixed;
  top: 16px;
  right: 128px;
  left: auto;
  bottom: auto;
  z-index: var(--z-header-icon);
  width: 38px;
  height: 38px;
  border-radius: 6px;
}
main.arc-dot-field .sound-toggle svg {
  width: 24px;
  height: 24px;
}

/* ---------- REV 51: walkthrough overlay + tooltip + skip confirmation ---------- */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-layer);
  display: none;
  pointer-events: none;
}
.tour-spotlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(17, 17, 17, 0.55);
  border: 3px solid #ffffff;
  border-radius: 14px;
  pointer-events: none;
  transition: all 220ms ease;
}
.tour-tooltip {
  position: absolute;
  box-sizing: border-box;
  min-width: 260px;
  max-width: min(92vw, 380px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #FBF7EE;
  border: 3px solid #111111;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #111111;
  padding: 1rem 1.1rem 1rem;
  pointer-events: auto;
  z-index: var(--z-card-overlay);
}
.tour-step-chip {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: #8B1A2B;
  border-radius: 999px;
  padding: 2px 8px;
  margin-bottom: 0.5rem;
}
.tour-title {
  margin: 0 0 0.35rem;
  font-family: "Poppins", "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #111111;
}
.tour-text {
  margin: 0 0 0.9rem;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #2a2a2a;
}
.tour-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tour-btn {
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid #111111;
  background: #ffffff;
  color: #111111;
  box-shadow: 2px 2px 0 #111111;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  text-decoration: none;
}
.tour-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #111111;
}
.tour-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111111;
}
.tour-btn-primary {
  background: #982036;
  color: #ffffff;
}
.tour-btn-skip {
  margin-left: auto;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #6b6166;
}
.tour-btn-skip:hover {
  transform: none;
  box-shadow: none;
  color: #111111;
  background: rgba(17, 17, 17, 0.07);
}
.tour-btn-external {
  background: #07133f;
  color: #ffffff;
}
.tour-confirm-layer {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.45);
  z-index: var(--z-card-icon);
  pointer-events: auto;
}
.tour-confirm-layer.is-open {
  display: flex;
}
.tour-confirm-card {
  width: min(92vw, 380px);
  background: #FBF7EE;
  border: 3px solid #111111;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #111111;
  padding: 1.25rem;
  text-align: center;
}
.tour-confirm-card h3 {
  margin: 0 0 0.5rem;
  font-family: "Poppins", "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #111111;
}
.tour-confirm-card p {
  margin: 0 0 1rem;
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #2a2a2a;
}
.tour-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.tour-btn-danger {
  background: #8B1A2B;
  color: #ffffff;
}
.tour-btn-cancel {
  background: #ffffff;
  color: #111111;
}
/* REV 61 §2: comfortable touch targets on small screens — the Next / Skip /
   confirm actions must be easy to tap without fat-finger misses. */
@media (max-width: 1023.98px) {
  .tour-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .tour-btn-skip {
    min-width: 64px;
  }
  .tour-confirm-card .tour-btn {
    min-width: 132px;
  }
}

.password-widget:has(.pw-tools) {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
/* Edit Lock: clean subpixel containment so no stray pixels escape the frame */
.password-toggle.arc-action-sm {
  overflow: hidden;
  isolation: isolate;
  border-radius: 8px;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
/* REV 71: lock icon no longer rotates on open — transitions reflect the
   static lock/unlock state swap only. */
.pw-tools {
  display: flex;
  align-items: center;
}
.auth-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

/* ---------- Homepage: dotted canvas + toggle (upper-right) ---------- */
main.arc-dot-field {
  background-image: radial-gradient(circle, rgba(172, 48, 74, 0.62) 1.9px, transparent 2px);
  background-size: 18px 18px;
}
main.arc-dot-field .arc-wash {
  background: radial-gradient(circle at center, rgba(255, 253, 248, 1) 0%, rgba(255, 253, 248, 0.9) 42%, rgba(255, 253, 248, 0.5) 100%);
}
main.arc-dot-field .password-row {
  animation-fill-mode: backwards;
}
html[data-theme="dark"] main.arc-dot-field {
  background-color: var(--bg-page) !important;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 1.9px, transparent 2px);
  background-size: 18px 18px;
}
html[data-theme="dark"] main.arc-dot-field .arc-wash {
  background: radial-gradient(circle at center, rgba(16, 12, 17, 1) 0%, rgba(16, 12, 17, 0.9) 42%, rgba(16, 12, 17, 0.55) 100%);
}
main.arc-dot-field .theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
  z-index: var(--z-header-icon);
  width: 38px;
  height: 38px;
  border-radius: 6px;
}
main.arc-dot-field .theme-toggle svg {
  width: 22px;
  height: 22px;
}

/* ---------- Mobile bottom nav ---------- */
/* ---------- Floating capsule bottom nav (REV 45) ---------- */
.mobile-bottom-nav {
  display: flex;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: var(--z-expand-modal);
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #ffffff;
  border: 3px solid #111111;
  border-radius: 999px;
  box-shadow: 4px 4px 0 #111111;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  max-width: calc(100vw - 24px);
}
.mn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  min-width: 0;
  height: auto;
  padding: 2px 0 5px;
  background: transparent;
  color: #111111;
  border: 0;
  border-right: 0;
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.mn-item:focus,
.mn-item:focus-visible,
.mn-item:active {
  outline: none;
}
.mn-item svg {
  width: 40px;
  height: 40px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: transparent;
  color: #111111;
  stroke-width: 2.25;
  overflow: visible;
  transition: background 120ms linear, transform 120ms linear, box-shadow 120ms linear;
}
.mn-item.is-active svg {
  background: #8b1a2b;
  color: #ffffff;
}
.mn-item:hover:not(.is-active) svg {
  background: #f0e6e3;
}
.mn-item:active:not(.is-active) svg {
  background: #f0e6e3;
}
.mn-item.is-active {
  background: transparent;
  color: #111111;
}

/* ---------- Floating action button (mobile only) ---------- */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: var(--z-help-overlay);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--maroon);
  color: #fff;
  box-shadow: 4px 4px 0 var(--shadow);
  cursor: pointer;
}
.fab svg {
  width: 24px;
  height: 24px;
}
.fab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- Responsive shell ---------- */
@media (min-width: 1024px) {
  .desktop-sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: var(--z-sidebar);
    flex-direction: column;
    background: var(--paper);
    border-right: 3px solid var(--ink);
    padding: 1.25rem 1rem;
    box-sizing: border-box;
    overflow-y: auto;
  }
  /* REV 78: sidebar offset moved to #app-content (collapse-aware) */
  /* NEXUS: symmetric insets — 36px breathing room either side of the board
     (sidebar left gap equal to the right viewport gap). */
  .board-shell {
    padding-right: 2.25rem;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .tracker-shell {
    padding-right: 2.25rem;
  }
  .mobile-bottom-nav,
  .fab {
    display: none !important;
  }
}
@media (max-width: 1023.98px) {
  .desktop-sidebar {
    display: none !important;
  }
  .add-resource-wrap,
  .add-row-wrap {
    display: none !important;
  }
  .board-shell,
  .tracker-shell {
    padding-bottom: calc(2.5rem + 80px);
  }
}

/* ---------- index.html ---------- */
.password-toggle:not(.is-unlocked) {
  background: var(--maroon) !important;
  color: #fff !important;
}
.guide-modal {
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--shadow);
  background: var(--paper);
}
.guide-modal-layer {
  background: rgba(23, 23, 23, 0.55);
}
.guide-modal-body {
  color: #3a3a4a;
}
.guide-modal-close {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.guide-modal-close:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}

/* ---------- CORE ---------- */
.tracker-shell::before,
.tracker-shell::after {
  display: none !important;
}
.sheet {
  border: 3px solid var(--ink) !important;
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--shadow);
}
.meta-grid {
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
}
.meta-cell {
  background: #fffdfb;
  border-color: #e2ddd5;
}
/* Officer/Committee pastel gradient palette (REV 39).
   Officers use an ordered green scale; committees use an ordered
   yellow scale. New/plain rows fall back to a clean white fill. */
.officer-cell {
  background: #ffffff;
}
.officer-cell.lead {
  background: linear-gradient(135deg, #eef8e9, #e1f2d8);
}
.officer-cell.internal {
  background: linear-gradient(135deg, #e7f4df, #d7edca);
}
.officer-cell.external {
  background: linear-gradient(135deg, #e0f0d5, #cde7bd);
}
.officer-cell.secretariat {
  background: linear-gradient(135deg, #d9edcb, #c3e1b0);
}
.officer-cell.finance {
  background: linear-gradient(135deg, #d2e9c1, #b9dba3);
}
.officer-cell.media {
  background: linear-gradient(135deg, #cbe6b7, #afd596);
}
.officer-cell.fundraising {
  background: linear-gradient(135deg, #fdf7e0, #fbefc5);
}
.officer-cell.safe {
  background: linear-gradient(135deg, #fbf3d4, #f9e9b7);
}
.officer-cell.community {
  background: linear-gradient(135deg, #f9f0c8, #f7e4a9);
}
.officer-cell.design {
  background: linear-gradient(135deg, #f7edbc, #f5df9b);
}
.officer-cell.formation {
  background: linear-gradient(135deg, #f5eab0, #f3da8d);
}
.officer-cell.recruitment {
  background: linear-gradient(135deg, #f3e7a4, #f1d57f);
}
.officer-cell.deployment {
  background: linear-gradient(135deg, #f1e498, #efd071);
}
.tracker-table td {
  border-top: 2px solid var(--ink);
  border-right: 1px solid #e2ddd5;
}
.tracker-table th {
  background: var(--maroon);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.format-toolbar {
  width: 100%;
  margin: 0;
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #fffdf8;
}
.table-wrap {
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}
@media (min-width: 1024px) {
  .sheet-body {
    position: relative;
  }
  .add-row-wrap {
    margin-top: 1.25rem;
  }
}

/* ---------- NEXUS ---------- */
body::before {
  display: none !important;
}
.board-shell .sheet {
  padding-left: clamp(1.5rem, 2.8vw, 2.25rem);
  padding-right: clamp(1.5rem, 2.8vw, 2.25rem);
  padding-top: clamp(1.5rem, 2.8vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 2.8vw, 2.25rem);
}
.qr-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .qr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .qr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.qr-card {
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #fffdfb;
  box-shadow: 4px 4px 0 var(--shadow);
  padding: clamp(0.85rem, 1.4vw, 1.15rem) clamp(0.85rem, 1.4vw, 1.15rem) clamp(1.1rem, 1.7vw, 1.4rem);
  display: flex;
  flex-direction: column;
}
.resource-title-row {
  margin-top: 0.85rem;
}
.resource-title-row .resource-title {
  margin: 0;
}
.resource-url-input {
  margin-top: 0.6rem;
}
.action-cluster {
  margin-top: 1rem;
  gap: 0.35rem;
}
.resource-title {
  color: var(--ink);
}
.resource-title:hover,
.resource-title:focus {
  color: var(--maroon-dark);
}
.qr-space {
  border: 2px dashed #9B2C2C;
  border-radius: 10px;
}
.qr-image:not([src]),
.qr-image[src=""] {
  display: none;
}
.qr-space.has-image {
  border-style: solid;
  border-color: var(--ink);
}
.card-action {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  min-width: 32px;
  min-height: 32px;
  height: 32px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.card-action svg {
  width: 16px;
  height: 16px;
}
.card-action:hover {
  background: var(--maroon);
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow);
}
.card-action.copied {
  color: #fff;
  background: #27704c;
  border-color: #27704c;
}

/* ---------- REV 86: Heading help badges — one infoboard-trigger contract.
   Applies to NEXUS .logo-wrap, CORE/FEED .logo-badge, SETTINGS .settings-badge:
   36px circle · 2px ink border · 2px shadow · 20px #111 glyph · tactile
   hover/active · #1E1E1E + white border in dark. ---------- */
.logo-wrap,
.logo-badge,
.settings-badge {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-radius: 50% !important;
  box-shadow: 2px 2px 0 var(--shadow);
  cursor: pointer;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.logo-wrap:hover,
.logo-badge:hover,
.settings-badge:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow);
}
.logo-wrap:active,
.logo-badge:active,
.settings-badge:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow);
}
.logo-wrap::before,
.logo-badge::before,
.settings-badge::before {
  border-radius: 50%;
}
.logo-wrap .help-icon,
.logo-badge .help-icon,
.logo-badge svg,
.settings-badge svg {
  width: 20px;
  height: 20px;
  color: #111111 !important; /* REV 80b/86: crisp black glyph in light mode (single source) */
  opacity: 1;
  pointer-events: none;
}
.logo-wrap:hover .help-icon,
.logo-wrap:focus-within .help-icon,
.logo-badge:hover .help-icon,
.logo-badge:focus-within .help-icon {
  opacity: 1;
  transform: none;
}
.logo-wrap::after,
.logo-badge::after {
  display: none;
}
html[data-theme="dark"] .logo-wrap,
html[data-theme="dark"] .logo-badge,
html[data-theme="dark"] .settings-badge {
  background: #1E1E1E;
  border-color: #FFFFFF;
  box-shadow: 2px 2px 0 #FFFFFF;
}
html[data-theme="dark"] .logo-badge svg,
html[data-theme="dark"] .settings-badge svg,
html[data-theme="dark"] .logo-wrap .help-icon,
html[data-theme="dark"] .logo-badge .help-icon {
  color: #FBF7EE !important;
}

/* ---------- REV 87: modal footer action (Got it) ---------- */
.dialog-actions button {
  font: 800 13px "Libre Franklin", sans-serif;
  padding: 9px 16px;
  background: var(--maroon);
  color: #fff;
  border: 2px solid #111111;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.dialog-actions button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--shadow);
}

/* ---------- REV 91: Infoboard dialogs (Core/Nexus/Alerts/Settings) — one
   container + typography contract, matching the help-modal canonical.
   Scoped overrides: page markup untouched. ---------- */
#feed-infoboard .compose-dialog,
.settings-infoboard-dialog {
  width: min(92vw, 560px);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "DM Sans", sans-serif; /* REV 91d: uniform dialog font (was per-page inherited) */
  padding: 1.25rem 1.5rem; /* REV 91d: uniform wrapper padding (settings lost its inline padding) */
  background: #FBF7EE;
  border: 3px solid #111111;
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--shadow);
  color: #111111;
}
html[data-theme="dark"] #feed-infoboard .compose-dialog,
html[data-theme="dark"] .settings-infoboard-dialog {
  background: #FBF7EE;
  border-color: #111111;
  box-shadow: 4px 4px 0 var(--shadow);
}
#feed-infoboard .compose-dialog h3,
.settings-infoboard-dialog h3 {
  margin: 0 0 .75rem;
  font-family: "Poppins", "DM Sans", sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.01em;
  color: #111111;
}
#feed-infoboard .infoboard-list,
.settings-infoboard-dialog .sib-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding-left: 1.25rem;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: #111111;
  overflow-y: auto;
}
#feed-infoboard .infoboard-list li,
.settings-infoboard-dialog .sib-list li {
  margin-bottom: .35rem;
}
#feed-infoboard .infoboard-list strong,
.settings-infoboard-dialog .sib-list strong {
  font-weight: 800;
  color: #111111;
}
#feed-infoboard .dialog-actions,
.settings-infoboard-dialog .dialog-actions {
  flex: 0 0 auto;
  margin: 1rem 0 0; /* REV 91d: standardized footer separation (inline styles removed) */
  padding: 0;
}

/* ---------- REV 87: shared page-header primitives (hoisted from page
   inline blocks; color accents stay page-local by design). REV 86 note:
   this block was authored then silently dropped by a failed anchor
   replace — page copies had already been deleted, which regressed the
   headings to 16px/400. This is the real insertion. ---------- */
.page-heading {
  margin: 0;
  padding: 0;
  min-width: 0;
  font-family: "Poppins", "DM Sans", sans-serif;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -.01em;
  line-height: 1.05;
  text-align: left;
  text-transform: uppercase;
}
.brand-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  min-width: 0;
}
.brand-sub .page-subtitle { margin-left: 46px; }
.password-row {
  width: 100%;
  margin: .8rem 0 0;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 1024px) {
  .main-content {
    position: relative;
  }
  /* REV 46: Add Resource lives inline in the header action cluster next to
     Save Board — never absolutely positioned / overlapping the header. */
  .header-actions .add-resource-wrap {
    display: inline-flex;
    margin-top: 0;
  }
}

/* ---------- Help / guide modals on all pages ----------
   REV 86: single canonical section (was defined three times with three
   different veils; the REV 81 !important crutches are obsolete now that
   the page-inline competitor skins are gone) */
.help-modal-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(17, 17, 17, 0.55);
}
.help-modal-layer.is-open { display: flex; }
/* REV 89: the wrapper CLIPS (overflow hidden + flex column); the BODY is the
   scroll container — the scrollbar now lives inside the rounded borders
   instead of bleeding past them, and the header/footer stay pinned. */
.help-modal {
  display: flex;
  flex-direction: column;
  width: min(92vw, 560px);
  max-height: 85vh;
  overflow: hidden;
  font-family: "DM Sans", sans-serif; /* REV 91d: uniform dialog font (was page-inherited) */
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--shadow);
  background: #FBF7EE;
  color: #111111;
}
.help-modal-header {
  flex: 0 0 auto;
  padding: 1.25rem 1.5rem; /* REV 91: header rhythm hoisted (was NEXUS-only) */
  background: #FBF7EE;
  color: #111111;
  border-bottom: 2px solid #111111;
}
.help-modal-title {
  margin: 0;
  font-family: "Poppins", "DM Sans", sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.01em;
}
.help-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* REV 91: body typography hoisted (was NEXUS-only — CORE rendered flat) */
  padding: 1.5rem;
  line-height: 1.7;
  font-size: 14px;
}
.help-modal-body h3 {
  margin: 1.25rem 0 .5rem;
  font-family: "Poppins", "DM Sans", sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.help-modal-body h3:first-child { margin-top: 0; }
.help-modal-body p { margin: .5rem 0; }
.help-modal-body ul { margin: .5rem 0 1rem 1.25rem; }
.help-modal-body li { margin: .35rem 0; }
/* REV 91: footer action pinned under the body column, inset from the borders */
.help-modal .dialog-actions {
  flex: 0 0 auto;
  padding: 1rem 1.5rem 1.25rem;
}
.help-modal-title,
.help-modal-body,
.help-modal-body h3,
.help-modal-body strong {
  color: #111111;
}
.help-modal-body .kbd {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #FFFFFF;
  color: #111111;
  border: 1px solid #111111;
}
.help-modal-close {
  background: #FFFFFF;
  color: #111111;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.help-modal-close:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}

/* ---------- Print ---------- */
@media print {
  .desktop-sidebar,
  .mobile-bottom-nav,
  .fab {
    display: none !important;
  }
  .sheet {
    box-shadow: none !important;
    border: 1px solid #999 !important;
  }
  .tracker-shell {
    background: #fff !important;
  }
}

/* ==========================================================================
   Dark theme (html[data-theme="dark"])
   ========================================================================== */
html[data-theme="dark"] body,
html[data-theme="dark"] .arc-dot-field,
html[data-theme="dark"] .tracker-shell,
html[data-theme="dark"] .board-shell {
  background-color: var(--bg-page) !important;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
html[data-theme="dark"] body {
  color: var(--text-primary);
}

/* ---------- Dark mode: solid white offset shadows (exact mirror of light geometry) ---------- */
html[data-theme="dark"] .sheet {
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .confirmation-dialog {
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .password-toggle.arc-action {
  box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .expand-close {
  box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);
}
.qr-popup-dialog {
  position: relative;
}
.qr-popup-dialog .expand-close {
  top: 0.75rem;
  right: 0.75rem;
  transform: none;
}
html[data-theme="dark"] .qr-popup-dialog .expand-close {
  background: #FFFFFF;
  color: #111111;
  border-color: #111111;
  box-shadow: 2px 2px 0 #111111;
}
html[data-theme="dark"] .qr-popup-dialog .expand-close:hover {
  background: #8b1a2b;
  color: #fff;
  border-color: #111111;
}

html[data-theme="dark"] .qr-reveal-icon svg {
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.25));
}
html[data-theme="dark"] .password-input:focus,
html[data-theme="dark"] .password-input-inline:focus,
html[data-theme="dark"] .resource-url-input:focus,
html[data-theme="dark"] .expand-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
}
.password-input,
.password-input-inline {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
}
.password-input::placeholder,
.password-input-inline::placeholder {
  font-family: inherit;
  color: #8a8a8a;
}
html[data-theme="dark"] .arc-wash {
  background: radial-gradient(circle at center, rgba(16, 12, 17, 0.98) 0%, rgba(16, 12, 17, 0.94) 42%, rgba(16, 12, 17, 0.75) 100%);
}

/* sidebar / nav / fab surfaces */
html[data-theme="dark"] .desktop-sidebar {
  background: var(--bg-card);
}
html[data-theme="dark"] .sidebar-link {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: #FFFFFF; /* REV 91c: spec — white border in dark */
  box-shadow: none;
}
html[data-theme="dark"] .sidebar-link:hover {
  background: var(--bg-card-hover);
  box-shadow: 4px 4px 0 #FFFFFF;
}
html[data-theme="dark"] .sidebar-link:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #FFFFFF;
}
html[data-theme="dark"] .sidebar-link.is-active {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}
html[data-theme="dark"] .sidebar-logo {
  background: #fff;
  border-color: #000 !important;
}
/* REV 59: dark-mode logo hover — the emblem container keeps its solid
   white fill (instead of darkening to the card-hover tone) and pushes a
   white hard-offset shadow so the ARC logo stays legible. */
html[data-theme="dark"] .sidebar-logo:hover {
  background: #fff;
  box-shadow: 4px 4px 0 #ffffff;
}
html[data-theme="dark"] .sidebar-logo:active {
  background: #fff;
  box-shadow: 1px 1px 0 #ffffff;
}
html[data-theme="dark"] .mobile-bottom-nav {
  background: var(--bg-card);
  border-color: var(--border-structural);
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .mn-item {
  background: transparent;
  color: var(--text-primary);
}
html[data-theme="dark"] .mn-item svg {
  color: var(--text-primary);
}
html[data-theme="dark"] .mn-item.is-active svg {
  background: var(--accent-primary);
  color: #fff;
}
html[data-theme="dark"] .mn-item:hover:not(.is-active) svg {
  background: var(--bg-card-hover);
}

/* sheets (core uses a hardcoded cream; nexus already uses --paper) */
html[data-theme="dark"] .sheet {
  background: var(--bg-card);
}
/* REV 86: logo/help badge dark treatment consolidated into the
   infoboard-trigger contract (see the REV 86 heading-badge block) */

/* index page */
html[data-theme="dark"] .arc-logo {
  background: #fff !important;
  border-color: #000 !important;
}
html[data-theme="dark"] .arc-dot-field h1 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .arc-dot-field section p {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .arc-dot-field section p[style*="152, 32, 54"] {
  color: var(--accent-primary) !important;
}
html[data-theme="dark"] .password-toggle {
  border-color: var(--border-structural) !important;
}
/* REV 87: unlocked lock reads GREEN in dark mode too (user ask) — the grey
   override here previously bled onto NEXUS/FEED and killed the state cue.
   --status-success keeps one green across light (#27704c page-local) and
   dark (#3E9C63 token). */
html[data-theme="dark"] .password-toggle.is-unlocked {
  background: var(--status-success) !important;
  color: #FFFFFF !important;
  border-color: var(--status-success) !important;
}
html[data-theme="dark"] .password-toggle.is-input-mode {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .password-input-inline {
  /* REV 87: FEED's inline lock input keeps a white surface in dark mode —
     text must stay #111 (var(--ink) remaps to near-white in dark). */
  color: #111111 !important;
}
html[data-theme="dark"] .password-input-inline::placeholder {
  color: #111111;
  opacity: .55;
}
html[data-theme="dark"] .guide-modal-body {
  color: var(--text-secondary);
}
html[data-theme="dark"] .guide-modal-body p {
  color: inherit !important;
}
html[data-theme="dark"] .guide-modal-close {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .guide-module.nexus,
html[data-theme="dark"] .guide-module.core,
html[data-theme="dark"] .guide-module.tracker {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .guide-modal-title {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .arc-dot-field footer p {
  color: var(--text-secondary) !important;
}

/* NEXUS */
html[data-theme="dark"] .editing-note,
html[data-theme="dark"] .footer-note {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .page-subtitle {
  color: #A1A1AA !important; /* REV 79/86: feed calibration, now global */
}
/* REV 86: breathing room between the QR grid and the footer note
   (user ask — applies on every viewport; board-footer is NEXUS-only) */
.board-footer {
  margin-top: 2.25rem;
}
html[data-theme="dark"] .sync-pill,
html[data-theme="dark"] #syncStatus {
  color: var(--status-success) !important;
}
html[data-theme="dark"] .sync-pill.saving,
html[data-theme="dark"] .sync-pill.error,
html[data-theme="dark"] #syncStatus.saving,
html[data-theme="dark"] #syncStatus.error {
  color: var(--status-warning) !important;
}
html[data-theme="dark"] .status-region {
  color: var(--text-secondary);
}
html[data-theme="dark"] .qr-card {
  background: var(--bg-card);
}
html[data-theme="dark"] .resource-title {
  color: var(--text-primary);
}
html[data-theme="dark"] .resource-title:hover,
html[data-theme="dark"] .resource-title:focus {
  color: var(--text-primary);
}
html[data-theme="dark"] .resource-url-input {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .resource-url-input::placeholder {
  color: var(--text-secondary);
}
html[data-theme="dark"] .resource-url-input:hover,
html[data-theme="dark"] .resource-url-input:focus {
  background: var(--bg-card-hover);
}
html[data-theme="dark"] .upload-hint {
  background: var(--bg-card);
}
html[data-theme="dark"] .qr-space {
  background-color: var(--bg-card);
  background-image:
    radial-gradient(circle, rgba(110, 45, 63, 0.16) 1px, transparent 1.15px),
    linear-gradient(rgba(110, 45, 63, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 45, 63, 0.05) 1px, transparent 1px);
}
html[data-theme="dark"] .qr-space::after {
  background-image: radial-gradient(circle, rgba(110, 45, 63, 0.18) 1px, transparent 1.15px);
  mix-blend-mode: screen;
}
html[data-theme="dark"] .qr-reveal-icon {
  background: var(--bg-card);
  color: var(--text-primary);
}
html[data-theme="dark"] .qr-image {
  background: var(--bg-card);
}
html[data-theme="dark"] .card-action {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .card-action:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
html[data-theme="dark"] .card-action.copied {
  background: var(--status-success);
  border-color: var(--status-success);
  color: #fff;
}
html[data-theme="dark"] .password-input {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .password-input::placeholder {
  color: var(--text-secondary);
}
html[data-theme="dark"] .confirmation-dialog {
  background: var(--bg-card);
}
html[data-theme="dark"] .confirmation-dialog.expand-dialog {
  background: #FBF7EE;
}
html[data-theme="dark"] .confirmation-dialog p {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .modal-cancel {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .expand-card {
  background: var(--bg-card);
}
html[data-theme="dark"] .expand-qr {
  background: var(--bg-card-hover);
}
html[data-theme="dark"] .expand-input,
html[data-theme="dark"] .expand-rich {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .expand-input::placeholder {
  color: var(--text-secondary);
}
html[data-theme="dark"] .expand-field label {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .expand-toolbar {
  background: var(--bg-card);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .expand-format-btn {
  color: var(--text-primary);
}
html[data-theme="dark"] .expand-format-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
html[data-theme="dark"] .expand-close {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .expand-close:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
html[data-theme="dark"] .expand-input[readonly],
html[data-theme="dark"] .expand-input:disabled,
html[data-theme="dark"] .expand-rich[contenteditable="false"] {
  background: var(--bg-card);
  color: var(--text-secondary);
}
html[data-theme="dark"] .expand-toolbar.is-locked {
  display: none !important;
}
/* REV 89: dark .help-modal-close rule removed with the X button (Got it footer) */
html[data-theme="dark"] #delete-modal-title {
  color: var(--status-warning) !important;
}
html[data-theme="dark"] #expand-modal-title {
  color: var(--text-primary) !important;
}

/* CORE */
html[data-theme="dark"] .sheet-header {
  border-bottom-color: var(--border-structural) !important;
}
html[data-theme="dark"] .meta-grid {
  border-color: var(--border-structural);
}
html[data-theme="dark"] .meta-cell {
  background: var(--bg-card) !important;
  border-color: var(--border-structural);
}
html[data-theme="dark"] .canva-text {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .meta-label {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .table-wrap {
  border-color: var(--border-structural);
}
html[data-theme="dark"] .tracker-table td {
  color: var(--text-primary);
  border-right-color: var(--border-structural) !important;
}
html[data-theme="dark"] .tracker-table tbody tr:hover td {
  background: var(--bg-card-hover);
}
html[data-theme="dark"] .tracker-table th {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-structural) !important;
  border-right-color: var(--border-structural) !important;
}
/* REV 86: the first officer-cell dark gradient set (0.16/0.26 alphas) was a
   value-contradicting duplicate — the REV 66 set (0.35/0.45, later in this
   file) is canonical and wins. Removed. */
html[data-theme="dark"] .line-text,
html[data-theme="dark"] .deadline-cell,
html[data-theme="dark"] .deadline-text,
html[data-theme="dark"] .remarks-text {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .remarks-cell {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .cell-stack .line-item:not(:last-child) {
  border-bottom-color: var(--border-structural);
}
html[data-theme="dark"] .deliverable-cell li::marker {
  color: var(--text-secondary);
}
html[data-theme="dark"] .format-toolbar {
  background: var(--bg-card);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .format-btn {
  color: var(--text-primary);
}
html[data-theme="dark"] .format-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-structural);
}
html[data-theme="dark"] .format-btn.is-active {
  background: var(--accent-primary);
  color: #fff;
}
html[data-theme="dark"] .page-heading {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   REV 55: Mobile architecture overhaul, QR popup, nav bar polish
   ========================================================================== */

/* ---------- Mobile utility bar (horizontal row) — shown only on mobile;
   populated by layout() with the save/theme/sound/tour/lock controls. ---------- */
.utilities-row { display:none }

/* ---------- REV 55: Edit lock bottom sheet (mobile) ---------- */

/* ---------- REV 55: NEXUS resource pill radius + expand transition ---------- */
.resource-item .qr-card {
  border-radius: 18px;
  transition: border-radius 150ms cubic-bezier(.4,0,.2,1), box-shadow 150ms cubic-bezier(.4,0,.2,1);
}
.resource-item .qr-card.is-expanded {
  border-radius: 18px;
}

/* ---------- REV 55: Nav bar — expanded padding, reduced radius, separators ---------- */
.mobile-bottom-nav {
  display: flex;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: var(--z-expand-modal);
  align-items: center;
  gap: 2px;
  padding: 4px 4px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
  background: #ffffff;
  border: 3px solid #111111;
  border-radius: 18px;
  box-shadow: 4px 4px 0 #111111;
  max-width: calc(100vw - 24px);
  height: 68px;
}
.mobile-bottom-nav .mn-item,
.mobile-bottom-nav .mn-item:focus,
.mobile-bottom-nav .mn-item:focus-visible,
.mobile-bottom-nav .mn-item:active {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
/* REV 66: lift item content so labels clear the capsule's bottom border
   (nav centers items, so this offset raises both icon and text). */
.mobile-bottom-nav .mn-item {
  position: relative;
  top: -3px;
}
.mobile-bottom-nav .mn-item + .mn-item { border-left: 1.5px solid var(--ink) }

/* ---------- REV 55/59/67: + (Add Resource) button docked right of the nav bar
   on the same plane, hidden from view while editing is locked. Reduced to 48px
   height to match the reduced nav height. ---------- */
.fab {
  position: fixed;
  right: 16px;
  bottom: 12px;
  left: auto;
  transform: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--maroon);
  color: #fff;
  box-shadow: 4px 4px 0 var(--shadow);
  cursor: pointer;
  z-index: var(--z-help-overlay);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.fab:hover { background: #a8283a }
.fab:active { 
  transform: translate(2px, 2px);
  outline: none;
  border: 3px solid var(--ink) !important;
}
.fab:focus,
.fab:focus-visible {
  outline: none;
  border: 3px solid var(--ink) !important;
}
.fab[hidden] { display: none; }


/* ---------- REV 55: Tracker button border reversion ---------- */
#trackerButton { border:3px solid var(--ink) !important; box-shadow:4px 4px 0 var(--ink) !important }
#trackerButton:hover,
#trackerButton:focus-visible { border:3px solid var(--ink) !important; transform:translate(-2px,-2px) !important; box-shadow:6px 6px 0 var(--ink) !important }
#trackerButton:active { border:3px solid var(--ink) !important; transform:translate(2px,2px) !important; box-shadow:2px 2px 0 var(--ink) !important }

/* ==========================================================================
   REV 59: Dark-mode recalibration — one color, one role
   ========================================================================== */

/* ---------- REV 64/65: Desktop edit-lock input — the password field expands
   inline directly BESIDE the lock button (no popover card). The Action Board
   stack hugs the far-left sidebar edge and the row fits within the 260px
   sidebar, so a plain in-flow input never clips on the overflow scroll. */
@media (min-width: 1024px) {
  .sidebar-widget-slot .pw-tools {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .sidebar-widget-slot .password-panel {
    position: static;
    right: auto;
    top: auto;
    left: auto;
    width: 0;
    min-width: 0;
    max-width: none;
    z-index: auto;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    border: 0;
    background: transparent;
    box-shadow: none;
    transition: opacity .18s ease-out, transform .22s cubic-bezier(.22,.8,.3,1), width .24s ease, visibility .15s ease-out;
  }
  .sidebar-widget-slot .password-widget.is-open .password-panel,
  .sidebar-widget-slot .pw-tools.is-open .password-panel {
    visibility: visible;
    opacity: 1;
    width: 150px;
    min-width: 150px;
    transform: translateX(0);
  }
  .sidebar-widget-slot .password-panel .password-input {
    width: 100%;
    height: 32px;
    min-height: 0;
    padding: 0 0.6rem;
    border: 2px solid #111111;
    border-radius: 8px;
    background: #fff;
    color: #111111;
    font-size: 0.82rem;
    box-shadow: none;
  }
  .sidebar-widget-slot .password-panel .password-input:not(:placeholder-shown) {
    box-shadow: none;
  }
  .sidebar-widget-slot .password-panel .password-input::placeholder {
    color: #111111;
    opacity: 0.5;
  }
  html[data-theme="dark"] .sidebar-widget-slot .password-panel .password-input {
    background: #fff;
    color: #111111;
    border-color: #111111;
  }
  html[data-theme="dark"] .sidebar-widget-slot .password-panel .password-input::placeholder {
    color: #111111;
    opacity: 0.5;
  }
}

/* ---------- REV 59: Mobile top utility row — Save Image / Dark Mode /
   Sound / Walkthrough / Edit Lock, one uniform 36px strip. The row is
   filled by layout() on mobile and emptied on desktop, so it is hidden
   (not just empty) on large screens. */
.utilities-row {
  position: relative;
}
@media (max-width: 1023.98px) {
  .utilities-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    /* REV 69b: cells pack left on the shared grid; SEARCH carries
       margin-left:auto so it pins FLUSH-RIGHT — its inset mirrors SAVE's
       left-edge inset, and the layout stays pixel-stable when the password
       panel opens (only the slack before SEARCH shrinks). */
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 20px;
    padding: 8px 10px;
    border: 2px solid var(--ink);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--shadow);
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .utilities-row::-webkit-scrollbar {
    display: none;
  }
  .utilities-row > * {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--shadow);
    transition: transform 140ms cubic-bezier(.4, 0, .2, 1), box-shadow 140ms cubic-bezier(.4, 0, .2, 1);
  }
  .utilities-row > *:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--shadow);
  }
  .utilities-row > *:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 var(--shadow) !important;
  }
  .utilities-row > *:focus-visible {
    outline: 3px solid var(--maroon);
    outline-offset: 2px;
  }
  .utilities-row > * svg {
    width: 19px;
    height: 19px;
  }
  /* Save Image becomes icon-only inside the mobile strip */
  .utilities-row #save-board-button,
  .utilities-row #saveImageButton {
    background: var(--maroon);
    color: #fff;
  }
  .utilities-row #save-board-button span,
  .utilities-row #saveImageButton span {
    display: none;
  }
  /* REV 60: the button's own page padding (.9rem) used to squeeze the 36px
     strip cell down to a 3px content box, crushing the icon; drop the
     padding/gap and let the glyph breathe at full optical weight. */
  .utilities-row #save-board-button,
  .utilities-row #saveImageButton {
    padding: 0;
    gap: 0;
  }
  .utilities-row #save-board-button svg,
  .utilities-row #saveImageButton svg {
    width: 20px;
    height: 20px;
  }
  /* REV 69: Search rides the strip as the RIGHTMOST icon-only cell with exact
     geometric parity (36px square, 2px border). margin-left:auto pins it to
     the row's right edge so its inset mirrors SAVE's left-edge inset. */
  .utilities-row #search-toggle {
    margin-left: auto;
    padding: 0;
    gap: 0;
    background: #fff;
    color: var(--ink);
  }
  .utilities-row #search-toggle span { display: none; }
  .utilities-row #search-toggle svg { width: 20px; height: 20px; color: inherit; }
  /* The lock button keeps its popover anchored to the strip */
  .utilities-row .pw-tools {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 1 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .utilities-row .pw-tools > * {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--shadow);
  }
  /* REV 60: the password input expands inline beside the lock inside the bar
     (fluid flex spacing) instead of a 200px absolute popover that collided
     with the sibling buttons and got clipped by the row's overflow. When
     open, pw-tools wraps to its own full-width row so the input never
     covers or squishes the Save / Theme / Sound / Tour buttons above. */
  .utilities-row:has(.pw-tools.is-open) {
    flex-wrap: wrap;
  }
  .utilities-row .pw-tools .password-panel {
    position: static;
    right: auto;
    top: auto;
    left: auto;
    width: 0;
    min-width: 0;
    max-width: none;
    flex: 0 1 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    border: 0;
    background: transparent;
    box-shadow: none;
    margin-left: 0;
    transition: opacity .18s ease-out, transform .22s cubic-bezier(.22,.8,.3,1), flex .24s ease, margin-left .24s ease, visibility .15s ease-out;
  }
  .utilities-row .pw-tools.is-open {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
  }
  /* REV 86: accept either toggle target — pages key is-open on the widget
      (NEXUS) or the relocatable pw-tools (feed/core) */
  .utilities-row .password-widget.is-open .password-panel,
  .utilities-row .pw-tools.is-open .password-panel {
    visibility: visible;
    opacity: 1;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 160px;
    transform: translateX(0);
    margin-left: 6px;
  }
  .utilities-row .pw-tools .password-panel .password-input {
    width: 100%;
    max-width: 160px;
    height: 32px;
    min-height: 0;
    padding: 0 .6rem;
    font-size: .8rem;
    /* REV 87: the input surface is hardcoded white in BOTH themes, so the
       text must be too — var(--ink) remaps to near-white in dark and rendered
       the typed password invisible. */
    border: 2px solid #111111;
    border-radius: 8px;
    background: #fff;
    color: #111111;
  }
  .utilities-row .pw-tools .password-panel .password-input::placeholder {
    color: #111111;
    opacity: .55;
  }
  /* Empty password row leaves no leftover gap once the lock moves up */
  body:has(.board-shell) .password-row:has(.password-widget:empty),
  body:has(.tracker-shell) .password-row:has(.password-widget:empty) {
    display: none;
  }
  /* Dark mode: the strip and its buttons follow the card palette */
  html[data-theme="dark"] .utilities-row {
    background: var(--bg-card);
    border-color: var(--border-structural);
  }
  html[data-theme="dark"] .utilities-row > *,
  html[data-theme="dark"] .utilities-row .pw-tools > * {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-structural);
  }
  html[data-theme="dark"] .utilities-row > *:hover,
  html[data-theme="dark"] .utilities-row .pw-tools > *:hover {
    background: var(--bg-card-hover);
  }
  html[data-theme="dark"] .utilities-row .pw-tools .password-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  /* REV 87: the input surface stays white in dark (matches the sidebar slot)
     — bg-card + near-white text rendered the typed password unreadable. */
  html[data-theme="dark"] .utilities-row .pw-tools .password-panel .password-input {
    background: #fff;
    color: #111111;
    border-color: #111111;
  }
  html[data-theme="dark"] .utilities-row .pw-tools .password-panel .password-input::placeholder {
    color: #111111;
    opacity: .55;
  }
}

/* ---------- REV 61 §1: CORE mini-bar 1:1 parity with NEXUS ----------
   NEXUS's row left edge = boardPad + sheetBorder + sheetPad
   (sheetPad = clamp(1.5rem,2.8vw,2.25rem) = 24px at ≤768px).
   CORE's row left edge = trackerPad + sheetBorder + marginLeft, with
   trackerPad = 12px (≤720) / 24px (>720). REV 62 pinned the NEXUS
   board-shell to the same 12px/24px paddings, so at ≤768px CORE's margin
   is simply sheetPad = 24px. Above 768px (through 1023.98px) NEXUS still
   uses clamp(1rem,5vw,4.4rem), so CORE's margin stays boardPad + sheetPad
   - trackerPad there. */
@media (max-width: 768px) {
  body:has(.tracker-shell) #mobileUtilities {
    margin-left: clamp(1.5rem, 2.8vw, 2.25rem);
    margin-right: clamp(1.5rem, 2.8vw, 2.25rem);
    width: auto;
  }
}
@media (min-width: 769px) and (max-width: 1023.98px) {
  body:has(.tracker-shell) #mobileUtilities {
    margin-left: calc(clamp(1rem, 5vw, 4.4rem) + clamp(1.5rem, 2.8vw, 2.25rem) - 24px);
    margin-right: calc(clamp(1rem, 5vw, 4.4rem) + clamp(1.5rem, 2.8vw, 2.25rem) - 24px);
    width: auto;
  }
}
/* The lock button must never be squeezed below its 36px cell on either
   page; the row's overflow-x handles the 320px edge case on NEXUS. */
@media (max-width: 1023.98px) {
  .utilities-row .pw-tools {
    flex: 0 0 auto;
  }
}




/* ---------- REV 55 shared-section borders (structural) ---------- */
html[data-theme="dark"] .mobile-bottom-nav .mn-item + .mn-item {
  border-left-color: var(--border-structural);
}
html[data-theme="dark"] .fab {
  border-color: var(--border-structural);
}
html[data-theme="dark"] .fab:hover {
  background: var(--accent-primary-hover);
}
html[data-theme="dark"] #trackerButton {
  border-color: var(--border-structural) !important;
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.85) !important;
}
html[data-theme="dark"] #trackerButton:hover,
html[data-theme="dark"] #trackerButton:focus-visible {
  border-color: var(--border-structural) !important;
  box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.85) !important;
}
html[data-theme="dark"] #trackerButton:active {
  border-color: var(--border-structural) !important;
  box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85) !important;
}


/* ---------- Inline-styled primaries → accent ---------- */
html[data-theme="dark"] #save-board-button,
html[data-theme="dark"] #saveImageButton {
  background: var(--accent-primary) !important;
}
html[data-theme="dark"] .password-toggle:not(.is-unlocked) {
  background: var(--accent-primary) !important;
  color: #fff !important;
}
/* REV 87: tracker-scoped green rule folded into the global dark unlocked
   rule above (same token, one source). */

/* ---------- QR drop-zone border (decorative red tint neutralized) ---------- */
html[data-theme="dark"] .qr-space,
html[data-theme="dark"] .qr-space.has-image {
  border-color: var(--border-structural);
}

/* ---------- Remaining structural borders → border-structural ---------- */
html[data-theme="dark"] .sidebar-brand {
  border-bottom-color: var(--border-structural);
}
html[data-theme="dark"] .sidebar-footer {
  border-top-color: var(--border-structural);
}
html[data-theme="dark"] .desktop-sidebar {
  border-right-color: var(--border-structural);
}
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .board-shell .sheet {
  border-color: var(--border-structural) !important;
}
html[data-theme="dark"] .tracker-table td {
  border-top-color: var(--border-structural);
  border-right-color: var(--border-structural);
}
html[data-theme="dark"] .qr-card {
  border-color: var(--border-structural);
}
html[data-theme="dark"] .expand-card {
  border-color: var(--border-structural);
}
/* REV 89: dark help-modal text overrides removed — the modal keeps its
   cream/#111 skin in both themes (light-on-light was unreadable). */
html[data-theme="dark"] .guide-modal {
  border-color: var(--border-structural);
}
html[data-theme="dark"] .confirmation-dialog {
  border-color: var(--border-structural) !important;
}
html[data-theme="dark"] .modal-cancel {
  border-color: var(--border-structural) !important;
}
html[data-theme="dark"] .expand-dialog {
  border-color: #111111 !important;
}

/* ---------- core.html decorative red tints neutralized ---------- */
html[data-theme="dark"] .logo-badge::before {
  background: rgba(23, 23, 23, 0.35);
}
html[data-theme="dark"] .text-\[\#982036\] {
  color: var(--text-secondary) !important;
}

/* ==========================================================================
   REV 60: Mobile & tablet viewport pass — fixed chrome scroll stability,
   vertically centered FAB, and a stacked homepage utility column.
   ========================================================================== */

/* ---------- §1 Scroll stutter: promote the fixed/sticky chrome to its own
   composited layer so scrolling never forces a paint of the capsule, dock,
   sidebar, or homepage toggles. (No backdrop filters are in use anywhere,
   so there is nothing to strip during scroll; the layer promotion is the
   hardware-acceleration pass.) ---------- */
.mobile-bottom-nav,
.fab,
.desktop-sidebar,
main.arc-dot-field .theme-toggle,
main.arc-dot-field .sound-toggle,
main.arc-dot-field .tour-toggle {
  will-change: transform;
}
/* The nav capsule already centers itself with translateX(-50%); translateZ(0)
   layers it without disturbing that horizontal centering. */
.mobile-bottom-nav {
  transform: translateX(-50%) translateZ(0);
  -webkit-transform: translateX(-50%) translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fab {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.desktop-sidebar {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Homepage toggles keep their hover/active transforms, so they only get the
   compositing hint (will-change) rather than a fixed translateZ base. */
main.arc-dot-field .theme-toggle,
main.arc-dot-field .sound-toggle,
main.arc-dot-field .tour-toggle {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---------- §2 FAB: (REV 66) the + button now shares the nav capsule's exact
   height and bottom line (see REV 62 §3 / REV 66 block), so the old
   centering offset is no longer needed. ---------- */

/* ---------- §4 Homepage utility controls: stacked vertical column pinned
   top-right (Audio on top, Info/? below, Dark Mode bottom) with enough
   clearance that it never overlaps the centered ARC logo at any width. ---------- */
main.arc-dot-field .theme-toggle,
main.arc-dot-field .sound-toggle,
main.arc-dot-field .tour-toggle {
  right: 16px;
  left: auto;
  top: auto;
  bottom: auto;
}
main.arc-dot-field .sound-toggle { top: 16px; }
main.arc-dot-field .tour-toggle { top: calc(16px + 38px + 8px); }
main.arc-dot-field .theme-toggle { top: calc(16px + 38px + 8px + 38px + 8px); }

/* ---------- REV 61 §3: NEXUS dark-mode expand chevron ----------
   The lucide chevron strokes currentColor, so .capsule-toggle { color } is
   what the QR card must recolor when the card flips to the dark palette.
   Solid white keeps the expand affordance visible on the dark card. */
html[data-theme="dark"] .capsule-toggle {
  color: #FFFFFF;
}

/* ---------- REV 61 §4: homepage CORE button dark-mode border ----------
   In dark mode --ink resolves to near-white (--text-primary), which makes
   the light CORE button's border nearly invisible against the dark page.
   Pin its border to solid black (#111111) so the neubrutal outline stays
   crisp, matching the Tracker button's explicit border treatment. */
html[data-theme="dark"] main.arc-dot-field nav a.arc-action[href="core.html"] {
  border-color: #111111 !important;
}
html[data-theme="dark"] main.arc-dot-field nav a.arc-action[href="core.html"]:hover,
html[data-theme="dark"] main.arc-dot-field nav a.arc-action[href="core.html"]:focus-visible,
html[data-theme="dark"] main.arc-dot-field nav a.arc-action[href="core.html"]:active {
  border-color: #111111 !important;
}

/* ==========================================================================
   REV 62: Mobile container + mini utility bar + nav-dock polish (≤768px)
   ========================================================================== */

/* ---------- REV 62 §1: NEXUS board container geometry parity ----------
   CORE's tracker-shell carries 18px/12px padding at ≤720px and 40px/24px at
   721–768px; NEXUS's board-shell used clamp() insets that grew wider than
   CORE's, so the two sheets sat at different page margins. Pin the board-shell
   to the same paddings below 768px (the trailing nav-clearance padding is
   preserved so the bottom bar never covers board content). */
@media (max-width: 720px) {
  .board-shell {
    padding: 18px 12px calc(2.5rem + 80px);
  }
}
@media (min-width: 721px) and (max-width: 768px) {
  .board-shell {
    padding: 40px 24px calc(2.5rem + 80px);
  }
}

/* ---------- REV 62 §2: mini-bar vertical parity + uniform icons ----------
   NEXUS's sync→bar offset is a constant 49px (header padding 24 + border 1 +
   margin-bottom 24). CORE's offset drifted (45px below 600px, 31px at 640–720,
   35px at 768px) because the empty .header-save wrap added a phantom flex line
   below 600px and its padding-bottom differs across the 720px boundary. Hiding
   the mobile-empty .header-save removes the phantom line, then a per-range
   margin-bottom brings CORE to the same 49px. Icons are unified to 20px so
   every strip control shares identical inner bounds. */
@media (max-width: 768px) {
  .sheet-header .header-save {
    display: none;
  }
  .utilities-row > * svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 720px) {
  /* REV 85: scoped to the tracker shell — FEED keeps its REV 75 24px base */
  body:has(.tracker-shell) .sheet-header {
    margin-bottom: 18px;
  }
}
@media (min-width: 721px) and (max-width: 768px) {
  body:has(.tracker-shell) .sheet-header {
    margin-bottom: 14px;
  }
}

/* ---------- REV 62 §3 / REV 66: FAB docked on the nav capsule plane ----------
   The nav capsule is 68px tall and sits at bottom 12px. The + button shares
   that exact height and bottom line so the two read as one docked cluster,
   stepping inward from 16px to 20px so the capsule never hugs the screen
   edge on narrow viewports. */
@media (max-width: 1023.98px) {
  .fab {
    width: 48px;
    height: 68px;
    bottom: 12px;
    right: 20px;
  }
}

/* ---------- REV 66 — Mobile viewport exclusive (≤768px): nav top clearance
   & active highlight bleed fix + FAB height parity. Scope is strictly mobile;
   desktop (≥1024px) remains hidden/unchanged. ---------- */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    height: 76px;
    padding: 5px 4px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom));
  }
  /* Remove the previous -3px lift once the container is tall enough; the
     flex centering then yields balanced top/bottom padding and 4–6px
     clearance from the outer border to the active red circle. */
  .mobile-bottom-nav .mn-item {
    top: 0;
  }
  .fab {
    width: 48px;
    height: 76px;
    bottom: 12px;
    right: 20px;
  }
}

/* ==========================================================================
   REV 63: homepage logo parity, desktop pill card view, tour spotlights
   ========================================================================== */

/* ---------- REV 63 §1 / REV 65: homepage logo shadow/offset parity ----------
   The logo follows the tactile contract of the primary action buttons:
   4px rest / 9px hover / 2px active, light #111111 and a solid #FFFFFF hard
   offset in dark. REV 65 increases the HOVER offset from -2px/6px to -3px/9px
   to match the button design system (nav a.arc-action). REV 58 previously
   pressed the logo down with an INSET shadow on :active; REV 63 switches that
   to an OUTSET 2px offset so the press reads identically to every other
   neubrutal control. These !important rules come after the REV 58 block so
   they win the cascade. */
.arc-logo {
  box-shadow: 4px 4px 0 #111111 !important;
}
.arc-logo:hover,
.arc-logo:focus-within {
  transform: translate(-3px, -3px) !important;
  box-shadow: 9px 9px 0 #111111 !important;
}
.arc-logo:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 #111111 !important;
}
html[data-theme="dark"] .arc-logo {
  box-shadow: 4px 4px 0 #FFFFFF !important;
}
html[data-theme="dark"] .arc-logo:hover,
html[data-theme="dark"] .arc-logo:focus-within {
  transform: translate(-3px, -3px) !important;
  box-shadow: 9px 9px 0 #FFFFFF !important;
}
html[data-theme="dark"] .arc-logo:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 #FFFFFF !important;
}

/* ---------- REV 63 §2: NEXUS desktop "Pill Minimized" card view ----------
   Desktop-only (≥1024px) compact capsule layout for the QR board, driven by
   body.nexus-view-pill (toggled via the header view-mode button). Mirrors
   the mobile capsule grammar (48px circular thumb, single-line title + URL,
   chevron expand) so Full Card and Pill views share one interaction model.
   Colors are left to the theme-aware .qr-card tokens — this block only
   restructures layout and radius so dark mode keeps its palette. */
@media (min-width: 1024px) {
  body.nexus-view-pill .qr-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    margin-inline: auto;
  }
  body.nexus-view-pill .resource-item .qr-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "thumb main toggle";
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 20px;
    transition: border-radius 120ms linear, box-shadow 120ms linear;
  }
  body.nexus-view-pill .resource-item .qr-card.is-expanded {
    grid-template-areas:
      "thumb main toggle"
      "cluster cluster cluster";
    grid-template-rows: auto auto;
    gap: 0.5rem 0.7rem;
    padding: 0.6rem 0.8rem 0.8rem;
    border-radius: 28px;
  }
  body.nexus-view-pill .qr-card .qr-space {
    grid-area: thumb;
    width: 48px;
    height: 48px;
    min-width: 48px;
    aspect-ratio: 1 / 1;
    border-width: 2px;
    border-style: solid;
    border-color: var(--ink);
    border-radius: 50%;
    background-image: none;
  }
  body.nexus-view-pill .qr-card .qr-space::before,
  body.nexus-view-pill .qr-card .qr-space .upload-hint {
    display: none;
  }
  body.nexus-view-pill .qr-card .qr-space .qr-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
  }
  body.nexus-view-pill .qr-card .qr-reveal-icon {
    position: absolute;
    inset: auto;
    right: 2px;
    bottom: 2px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    font-size: 10px;
  }
  body.nexus-view-pill .qr-space.is-locked.has-image .qr-reveal-icon svg {
    width: 26px;
    height: 26px;
  }
  body.nexus-view-pill .resource-item .capsule-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
  }
  body.nexus-view-pill .resource-title-row {
    margin-top: 0;
    justify-content: flex-start;
  }
  body.nexus-view-pill .resource-title {
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.nexus-view-pill .resource-url-input {
    min-height: 0;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-theme="dark"] body.nexus-view-pill .resource-url-input {
    background: var(--bg-card);
  }
  body.nexus-view-pill .qr-card.is-expanded .resource-title,
  body.nexus-view-pill .qr-card.is-expanded .resource-url-input {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
  body.nexus-view-pill .capsule-toggle {
    grid-area: toggle;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    flex: 0 0 auto;
  }
  body.nexus-view-pill .capsule-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 200ms ease;
  }
  body.nexus-view-pill .qr-card.is-expanded .capsule-toggle svg {
    transform: rotate(180deg);
  }
  body.nexus-view-pill .qr-card .action-cluster {
    grid-area: cluster;
    display: none;
    justify-content: space-around;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0.2rem 0;
    border-top: 1.5px solid var(--ink);
  }
  body.nexus-view-pill .qr-card.is-expanded .action-cluster {
    display: flex;
    animation: nexus-pill-cluster-in 180ms ease-out;
  }
  body.nexus-view-pill .qr-card .card-action {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1.5px solid #111111;
    border-radius: 50%;
    background: #fff;
    color: #111111;
    box-shadow: none;
  }
  body.nexus-view-pill .qr-card .card-action svg {
    width: 15px;
    height: 15px;
  }
  body.nexus-view-pill .qr-card .card-action[data-action="left"],
  body.nexus-view-pill .qr-card .card-action[data-action="right"] {
    display: none;
  }
  body.nexus-view-pill .qr-card .card-action:hover {
    background: #8b1a2b;
    color: #fff;
    transform: none;
  }
  body.nexus-view-pill .qr-card .card-action.copied {
    background: #27704c;
    border-color: #27704c;
    color: #fff;
  }
  body.nexus-view-pill .qr-card .card-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
  html[data-theme="dark"] body.nexus-view-pill .card-action {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-structural);
  }
  html[data-theme="dark"] body.nexus-view-pill .card-action:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
  }
}

@keyframes nexus-pill-cluster-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- REV 68: NEXUS pill view — mobile parity QR thumbnail ----------
   Mirrors the mobile capsule implementation exactly: 48px circular container
   with full-bleed veil overlay and centered cursor icon. */
@media (min-width: 1024px) {
  body.nexus-view-pill .qr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    max-width: 920px;
    margin-inline: auto;
  }
  /* REV 69c Circular container — mobile-parity architecture. The BORDER
     lives HERE on the clipped parent (never on overlays), children clip at
     the inner border curve, so the image and veil seat flush with zero
     subpixel fringing. Light: ink ring / white base fill. */
  body.nexus-view-pill .qr-card .qr-space {
    grid-area: thumb;
    position: relative;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    aspect-ratio: 1 / 1;
    border: 2px solid #111111;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
  }
  body.nexus-view-pill .qr-card .qr-space::before,
  body.nexus-view-pill .qr-card .qr-space::after {
    display: none;
  }
  /* QR image fills the circle */
  body.nexus-view-pill .qr-card .qr-space .qr-image {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: transparent;
  }
  body.nexus-view-pill .qr-card .qr-space.has-image .qr-image {
    display: block;
  }
  /* REV 69c opaque full-coverage veil — rendered ONLY when a QR image is
     attached. Solid fill (no transparency / backdrop-blur), seats flush
     against the inside edge of the container border: inset:0 + 100% size is
     exactly the overflow clip region of the bordered round parent, so there
     are no perimeter gaps, light leaks, or jagged fringes in either theme. */
   body.nexus-view-pill .qr-space.is-locked.has-image .qr-reveal-icon {
    inset: -2px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #111111;
    box-shadow: none;
    color: #4a4a4a;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.nexus-view-pill .qr-space.is-locked.has-image:has(.qr-image.is-revealed) .qr-reveal-icon {
    opacity: 0;
  }
  html[data-theme="dark"] body.nexus-view-pill .qr-space.is-locked.has-image .qr-reveal-icon {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-structural);
  }
  /* REV 95: subtle veil hover/click — lighten + micro-scale, respects locked state */
  body.nexus-view-pill .qr-space.is-locked.has-image:not(:has(.qr-image.is-revealed)):hover .qr-reveal-icon {
    background: #FEFEFE;
    transform: scale(1.02);
    transition: background .18s ease, transform .18s ease, opacity .2s ease-in-out;
  }
  body.nexus-view-pill .qr-space.is-locked.has-image:not(:has(.qr-image.is-revealed)):active .qr-reveal-icon {
    transform: scale(0.98);
  }
  .qr-space.is-locked.has-image:not(:has(.qr-image.is-revealed)):hover .qr-reveal-icon {
    background: #FEFEFE;
  }
  .qr-space.is-locked.has-image:not(:has(.qr-image.is-revealed)):active .qr-reveal-icon {
    transform: scale(0.97);
  }

}

/* ---------- REV 66: CORE dark mode — darker pastel shades with readable text ----------
   Meta cells and Officer/Committee column use dark theme with darker pastel
   shades (higher opacity) for visibility. Text uses light colors for readability.
   Table borders remain high-contrast. ---------- */
html[data-theme="dark"] .meta-cell {
  background: rgba(26, 21, 25, 0.85) !important;
  border-color: var(--border-structural);
}
/* Column 1: Officer/Committee uses darker pastel gradients + light text */
html[data-theme="dark"] .officer-cell {
  background: #1a171d;
  color: var(--text-primary);
}
html[data-theme="dark"] .officer-cell.lead { 
  background: linear-gradient(135deg, rgba(176, 222, 152, 0.35), rgba(156, 207, 130, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.internal { 
  background: linear-gradient(135deg, rgba(170, 216, 144, 0.35), rgba(148, 200, 120, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.external { 
  background: linear-gradient(135deg, rgba(164, 210, 136, 0.35), rgba(140, 193, 110, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.secretariat { 
  background: linear-gradient(135deg, rgba(158, 204, 128, 0.35), rgba(132, 186, 100, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.finance { 
  background: linear-gradient(135deg, rgba(152, 198, 120, 0.35), rgba(124, 179, 90, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.media { 
  background: linear-gradient(135deg, rgba(146, 192, 112, 0.35), rgba(116, 172, 80, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.fundraising { 
  background: linear-gradient(135deg, rgba(248, 220, 140, 0.35), rgba(240, 200, 100, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.safe { 
  background: linear-gradient(135deg, rgba(246, 214, 124, 0.35), rgba(238, 196, 90, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.community { 
  background: linear-gradient(135deg, rgba(244, 208, 108, 0.35), rgba(236, 192, 80, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.design { 
  background: linear-gradient(135deg, rgba(242, 202, 92, 0.35), rgba(234, 188, 70, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.formation { 
  background: linear-gradient(135deg, rgba(240, 196, 76, 0.35), rgba(232, 184, 60, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.recruitment { 
  background: linear-gradient(135deg, rgba(238, 190, 60, 0.35), rgba(230, 180, 50, 0.45)); 
  color: var(--text-primary); 
}
html[data-theme="dark"] .officer-cell.deployment { 
  background: linear-gradient(135deg, rgba(236, 184, 44, 0.35), rgba(228, 176, 40, 0.45)); 
  color: var(--text-primary); 
}
/* Officer cell hover effect */
html[data-theme="dark"] .tracker-table tbody tr:hover .officer-cell {
  background: var(--bg-card-hover);
}
/* Uniform table borders in dark mode — all use high-contrast white borders */
html[data-theme="dark"] .meta-grid {
  border-color: #ffffff;
}
html[data-theme="dark"] .meta-cell {
  border-color: var(--border-structural);
}
html[data-theme="dark"] .format-toolbar {
  border-color: #ffffff;
}
html[data-theme="dark"] .tracker-table td {
  border-top-color: #ffffff;
  border-right-color: var(--border-structural);
}
html[data-theme="dark"] .tracker-table th {
  border-right-color: rgba(255, 255, 255, 0.4);
}
/* Table-wrap border: match light mode thickness (3px) and contrast (high-contrast ink) */
html[data-theme="dark"] .table-wrap {
  border-color: #ffffff;
}
/* REV 87: NEXUS view-mode toggle — labelled rounded-rectangle switch.
   Grid mode = paper surface/ink text; Pill mode = ink surface/paper text. */
.view-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 42px; /* REV 88: matches Save Board height in the header action row */
  padding: 0 .9rem;
  background: #FFFDF8;
  color: #111111;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-color: #000000 !important;
}
.view-mode-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }
.view-mode-toggle[data-view-mode="pill"] {
  background: #111111;
  color: #FFFDF8;
}
.view-mode-toggle[data-view-mode="pill"] svg { color: inherit; }
/* REV 65/87: keeps a black border in dark mode so the light grid state reads
   clearly against the dark page. */
html[data-theme="dark"] .view-mode-toggle {
  background: #FFFDF8;
  color: #111111;
  border-color: #000000 !important;
}
html[data-theme="dark"] .view-mode-toggle[data-view-mode="pill"] {
  background: #111111;
  color: #FFFDF8;
  border-color: #FFFFFF !important;
}
/* ==========================================================================
   REV 70: MOBILE OVERHAUL — full-width Twitter-style dock, floating FAB,
   scroll dynamics, sticky utility strip, notifications badge, anti-FOUC
   cloak, skeleton placeholders. Appended last on purpose: these overrides
   win the cascade without disturbing earlier revision blocks.
   ========================================================================== */

/* ---------- Anti-flash cloak (removed attribute-by-attribute once real
   or cached content is rendered into the container) ---------- */
[data-cloak] {
  opacity: 0 !important;
  visibility: hidden !important;
}
.hydrated [data-cloak],
[data-hydrated="true"] [data-cloak] {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 150ms ease-in-out;
}


/* ---------- Full-width edge-to-edge bottom dock (Twitter pattern) ---------- */
.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  -webkit-transform: none;
  width: 100%;
  max-width: none;
  height: auto;
  z-index: var(--z-notif);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  margin: 0;
  padding: 4px 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: #FBF7EE;
  border: 0;
  border-top: 3px solid #111111;
  border-radius: 0;
  box-shadow: none;
  transition: transform 220ms ease-in-out, opacity 200ms ease-in-out;
  will-change: transform;
}
.mobile-bottom-nav .mn-item {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 56px;
  top: 0;
  justify-content: center;
  padding: 4px 0 6px;
}
.mobile-bottom-nav .mn-item + .mn-item {
  border-left: 1px solid rgba(17, 17, 17, 0.35);
}
.mn-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Scroll-direction hide/show states (classes toggled by utils/mobile-nav.js) */
.mobile-bottom-nav.translate-y-full,
.fab.translate-y-full {
  transform: translateY(100%) !important;
}
.mobile-bottom-nav.opacity-0,
.fab.opacity-0 {
  opacity: 0 !important;
}
.mobile-bottom-nav.pointer-events-none,
.fab.pointer-events-none {
  pointer-events: none !important;
}

html[data-theme="dark"] .mobile-bottom-nav {
  background: var(--bg-card, #16161c);
  border-top-color: #FFFFFF;
}
html[data-theme="dark"] .mobile-bottom-nav .mn-item + .mn-item {
  border-left-color: rgba(255, 255, 255, 0.35);
}

/* ---------- Floating + FAB: standalone, above the dock, right-anchored ---------- */
.fab {
  position: fixed;
  right: 16px;
  /* REV 70b: --arc-dock-h is the REAL rendered dock height (set by
     utils/mobile-nav.js) so the FAB always clears the bar regardless of
     label wrapping or safe-area. */
  bottom: calc(var(--arc-dock-h, 60px) + 14px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  z-index: var(--z-search);
  background: #9B2C2C;
  border: 2.5px solid #111111;
  border-radius: 14px;
  box-shadow: 3px 3px 0 #111111;
  transition: transform 220ms ease-in-out, opacity 200ms ease-in-out, background 120ms linear, box-shadow 120ms linear;
  will-change: transform;
}
.fab:hover { background: #a8283a; }
.fab:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111111;
}
html[data-theme="dark"] .fab {
  border-color: #FFFFFF;
  box-shadow: 3px 3px 0 #FFFFFF;
}
html[data-theme="dark"] .fab:active {
  box-shadow: 1px 1px 0 #FFFFFF;
}
.fab[hidden] { display: none !important; }
/* Zero-flicker lock gating: the boot class is set synchronously in <head>,
   so the FAB renders in its correct state on the very first frame. */
html:not(.boot-unlocked) .fab { display: none !important; }

/* ---------- Sticky mobile utility strip ---------- */
@media (max-width: 1023.98px) {
  .utilities-row {
    position: sticky;
    top: 8px;
    z-index: var(--z-sticky-header);
  }
  /* REV 70b: JS docking fallback — ancestors with overflow:hidden defeat
     native sticky, so utils/mobile-nav.js pins the strip position:fixed */
}

/* ---------- Clearance so the dock/FAB never cover the last cards ---------- */
@media (max-width: 1023.98px) {
  .board-shell .sheet {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
}

/* ---------- Notifications unread badge ---------- */
.notif-badge {
  display: none;
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  background: #9B2C2C;
  color: #FFFFFF;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  border-radius: 999px;
  border: 1.5px solid #111111;
  box-shadow: 1px 1px 0 #111111;
  user-select: none;
  pointer-events: none;
  z-index: var(--z-card-overlay);
  transition: transform 150ms ease-out, opacity 150ms ease-out;
}
.notif-badge.is-visible {
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-badge.badge-out {
  transform: scale(0);
  opacity: 0;
}
html[data-theme="dark"] .notif-badge {
  border-color: #FFFFFF;
  box-shadow: 1px 1px 0 #FFFFFF;
}
/* Desktop sidebar placement: badge hugs the link's right edge */
.sidebar-notif-link {
  position: relative;
}
.sidebar-notif-link .notif-badge {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}
.sidebar-notif-link .notif-badge.badge-out {
  transform: translateY(-50%) scale(0);
}

/* ==========================================================================
   REV 71: ACTION BOARD STANDARD — universal Synced pill, compressed mobile
   dock (soft-pill active state, no separators), fixed centered utilities
   strip, homepage FEED button. Appended last: wins the cascade cleanly.
   ========================================================================== */

/* ---------- Universal Synced status component ---------- */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1.5px solid #111111;
  border-radius: 999px;
  background: #FFFFFF;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: #4a4145;
  margin: 0;
  white-space: nowrap;
}
.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-success, #1c7c31);
  animation: arc-sync-pulse 1.6s ease-in-out infinite;
}
.sync-pill.saving .sync-dot { background: var(--status-warning, #d99a06); }
.sync-pill.error  .sync-dot { background: #b91c1c; animation: none; }
@keyframes arc-sync-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(28, 124, 49, 0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(28, 124, 49, 0); }
}
html[data-theme="dark"] .sync-pill {
  background: var(--bg-card, #1c1917);
  border-color: var(--border-structural, #FFFFFF);
}

/* ---------- Mobile dock: vertical compression ---------- */
.mobile-bottom-nav {
  padding: 3px 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav .mn-item {
  min-height: 52px;
  padding: 3px 0 2px;
  gap: 1px;
  border-radius: 12px;
  transition: background 150ms ease;
}
.mobile-bottom-nav .mn-item svg {
  width: 32px;
  height: 32px;
  padding: 6px;
  stroke-width: 2.25;
}
.mobile-bottom-nav .mn-item span:last-child {
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
/* De-clutter: no divider lines between tabs, any theme */
.mobile-bottom-nav .mn-item + .mn-item,
html[data-theme="dark"] .mobile-bottom-nav .mn-item + .mn-item {
  border-left: 0 !important;
}
/* Soft pill active/hover indicator; maroon icon disc stays from base */
.mobile-bottom-nav .mn-item:hover:not(.is-active) {
  background: rgba(17, 17, 17, 0.05);
}
.mobile-bottom-nav .mn-item:active {
  transform: none !important;
  background: rgba(17, 17, 17, 0.08);
}
.mobile-bottom-nav .mn-item.is-active {
  background: rgba(155, 44, 44, 0.10);
}
html[data-theme="dark"] .mobile-bottom-nav .mn-item:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .mobile-bottom-nav .mn-item.is-active {
  background: rgba(155, 44, 44, 0.28);
}
/* Kill the generic press-translate flash on tabs only */
.mobile-bottom-nav .mn-item:focus,
.mobile-bottom-nav .mn-item:focus-visible {
  outline: none;
}

/* Content clearance follows the shorter dock */
@media (max-width: 1023.98px) {
  .board-shell .sheet {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* ---------- Mobile utilities strip: fixed, horizontally centered HUD ---------- */
@media (max-width: 1023.98px) {
  .utilities-row {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 92vw;
    z-index: var(--z-sticky-header);
  }
}


/* ==========================================================================
   REV 74: UNIVERSAL SYNC CAPSULE (sidebar Action Board), threshold-floating
   mobile utilities bar, homepage stack equalization, FEED swipe/spacing.
   Appended last: wins the cascade cleanly.
   ========================================================================== */

/* ---------- Synced status capsule (spec markup, state hooks) ----------
   Base look comes from the Tailwind arbitrary utilities in the markup.
   We mirror the dark variants here because the CDN's dark: variant keys off
   prefers-color-scheme, not our data-theme attribute. */
/* Light surface pinned explicitly: Tailwind Play's dark: variant keys off
   prefers-color-scheme (not our data-theme), so without this pin the capsule
   renders dark on dark-preference systems even in light theme. */
.sync-status-capsule {
  background: #FFFFFF !important;
  border-color: #111111 !important;
  box-shadow: 1px 1px 0px #111111 !important;
}
html[data-theme='dark'] .sync-status-capsule {
  border-color: #FFFFFF !important;
  background: #1E1E1E !important;
  box-shadow: 1px 1px 0px #FFFFFF !important;
}
.sync-status-capsule { max-width: 100%; }
.sync-status-capsule .capsule-label { color: #111111; }
html[data-theme='dark'] .sync-status-capsule .capsule-label { color: #FFFFFF !important; }
/* REV 81: font parity across pages */
.sync-status-capsule .capsule-label { font-family: "DM Sans", sans-serif !important; }
/* REV 81: font parity across pages */

/* saving / error states: swap dot, stop the ping */
.sync-status-capsule.is-saving span.capsule-dot-core,
.sync-status-capsule.is-error span.capsule-dot-core { animation: none; }
.sync-status-capsule.is-saving span.capsule-dot-core { background: #d99a06 !important; }
.sync-status-capsule.is-saving span.capsule-dot-ping { background: #d99a06 !important; }
.sync-status-capsule.is-error span.capsule-dot-core { background: #b91c1c !important; }
.sync-status-capsule.is-saving span.capsule-dot-ping,
.sync-status-capsule.is-error span.capsule-dot-ping { display: none !important; }
/* REV 74: on desktop the sidebar capsule is THE sync indicator;
   inline pills are a mobile-only affordance */
@media (min-width: 1024px) { .sync-pill { display: none !important; } }

/* identical placement below the sidebar utility cluster on every board */
.sidebar-sync-slot { display: flex; align-items: flex-start; margin-top: 0; }
/* REV 75: footer column joins the uniform 12px rhythm (was 0.6rem) */
.sidebar-footer { gap: 12px; }
/* REV 75: the slot owns the 12px offset; the capsule never stacks its own
   Tailwind mt-3 on top of it. Homepage capsule rides in .home-sync-wrap. */
.sync-status-capsule { margin-top: 0 !important; }
/* REV 75: unified Synced typography across NEXUS / CORE / FEED */
.sync-status-capsule .capsule-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

/* ---------- REV 97: tracker-shell top parity + elevation signal — CORE/NEXUS uniform */
@media (max-width: 1023.98px) {
  .tracker-shell {
    padding: 18px 12px calc(2.5rem + 80px) !important;
  }
}
@media (max-width: 1023.98px) {
  .settings-shell {
    padding: 18px 12px calc(60px + env(safe-area-inset-bottom)) !important;
  }
}
/* ---------- Mobile utilities bar: flow at top, floating pill on scroll ---------- */
@media (max-width: 1023.98px) {
  .utilities-row {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: max-content;
    max-width: 92vw;
    /* REV 86: uniform strip-to-sheet separation on every board (user ask;
       supersedes the REV 80c flush decision) */
    margin: 2px auto 6px;
    z-index: auto;
    gap: 8px !important;
    /* REV 80b: opaque Neobrutalist surface, static + floating */
    background: #FBF7EE !important;
    border: 2px solid #111111 !important;
    border-radius: 14px;
    box-shadow: 2px 2px 0 #111111 !important;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  /* REV 80: the REV 59 tracker-shell dock rule (ID specificity) pins
     #mobileUtilities to width:auto + clamp margins — compact + centered
     wins on CORE too */
  body:has(.tracker-shell) #mobileUtilities,
  #mobileUtilities {
    width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* REV 80c: 12px margin removed — strip sits flush with the sheet */
  html[data-theme="dark"] .utilities-row {
    background: #1E1E1E !important;
    border-color: #FFFFFF !important;
    box-shadow: 2px 2px 0 #FFFFFF !important;
  }
  /* REV 86: pill/grid switch is a desktop-header control — never in the strip */
  .utilities-row .view-mode-toggle {
    display: none !important;
  }
  /* Threshold-triggered floating pill (mobile-nav.js toggles .is-floating) */
  .utilities-row.is-floating {
    /* explicit zeroing: auto side-margins resolve unpredictably against
       left:50% + translateX(-50%) anchoring on some shells */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-dock);
    background: #FBF7EE !important;
    border: 2px solid #111111 !important;
    box-shadow: 2px 2px 0 var(--shadow) !important;
    opacity: .98;
    transition: opacity 120ms linear;
  }
  html[data-theme="dark"] .utilities-row #search-toggle {
    background: #2A2A2A !important;
    border-color: #FFFFFF !important;
    color: #FBF7EE !important;
  }
  html[data-theme="dark"] .utilities-row #search-toggle svg { color: #FBF7EE !important; }
  html[data-theme='dark'] .utilities-row.is-floating {
    box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.7);
  }
}

/* ---------- Homepage: bell joins the uniform 56px rhythm ---------- */

/* Synced capsule rides below the stack, right-aligned to it */
main.arc-dot-field .home-sync-wrap {
  /* REV 79: Synced capsule anchored bottom-left */
  position: absolute;
  left: 24px;
  bottom: 24px;
  top: auto;
  right: auto;
  z-index: var(--z-notif);
}

/* ---------- FEED category row: swipe polish + breathing room ---------- */
.feed-filters {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  margin-top: 0;
  /* REV 75: header-to-category breathing room */
  margin-bottom: 16px;
}
/* REV 75: category-to-feed separation */
#feed-stream { margin-top: 20px; }

/* ---------- Pinned card chip borders invert on red ---------- */
.feed-card.is-pinned .cat-chip { border-color: #FFFFFF !important; }

/* ---------- Homepage Tier-1 gate modal ---------- */
.gate-modal-layer {
  display: none;
  position: fixed; inset: 0;
  background: rgba(17, 17, 17, 0.55);
  align-items: center; justify-content: center;
  z-index: var(--z-modal);
  padding: 20px;
}
.gate-modal-layer.is-open { display: flex; }
.gate-modal {
  width: min(420px, 100%);
  background: #FBF7EE;
  border: 3px solid #111111;
  border-radius: 14px;
  box-shadow: 6px 6px 0 #111111;
  padding: 22px;
}
html[data-theme='dark'] .gate-modal {
  background: var(--bg-card, #1c1917);
  border-color: #FFFFFF;
  box-shadow: 6px 6px 0 #FFFFFF;
}
.gate-modal h3 {
  margin: 0 0 10px;
  font: 900 18px 'Poppins', sans-serif;
  letter-spacing: -0.2px;
  color: #9B2C2C;
}
html[data-theme='dark'] .gate-modal h3 { color: #ff9d9d; }
.gate-modal p { margin: 0 0 16px; font: 600 13.5px 'DM Sans', sans-serif; line-height: 1.5; }
.gate-modal .dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.gate-modal button {
  font: 800 13px 'Libre Franklin', sans-serif;
  padding: 9px 16px;
  background: #111111; color: #FBF7EE;
  border: 2px solid #111111; border-radius: 10px;
  box-shadow: 2px 2px 0 rgba(17,17,17,.35);
  cursor: pointer;
}
.gate-modal button:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(17,17,17,.35); }

/* ==========================================================================
   REV 76: SPA SHELL — sidebar collapse toggle, floating expand trigger.
   Desktop (>=1024px) only; the sidebar is persistent shell chrome.
   ========================================================================== */
.sidebar-toggle-btn {
  /* REV 77: compact 28px, flush top-right of the ARC header row */
  width: 28px;
  height: 28px;
  margin-left: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FBF7EE;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 8px;
  box-shadow: 2px 2px 0 #111111;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
  transition: transform 140ms cubic-bezier(.4,0,.2,1), box-shadow 140ms cubic-bezier(.4,0,.2,1), background 140ms linear;
}
.sidebar-toggle-btn svg { width: 16px; height: 16px; }
.sidebar-toggle-btn:hover { background: #fffdf8; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #111111; }
.sidebar-toggle-btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 #111111; }
html[data-theme="dark"] .sidebar-toggle-btn {
  background: #1E1E1E;
  color: #FBF7EE;
  border-color: #FFFFFF;
  box-shadow: 2px 2px 0 #FFFFFF;
}
html[data-theme="dark"] .sidebar-toggle-btn:hover { box-shadow: 3px 3px 0 #FFFFFF; }

.sidebar-expand-btn {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: var(--z-header-icon);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: #FBF7EE;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #111111;
  cursor: pointer;
  user-select: none;
  transition: transform 140ms cubic-bezier(.4,0,.2,1), box-shadow 140ms cubic-bezier(.4,0,.2,1), background 140ms linear;
}
.sidebar-expand-btn svg { width: 20px; height: 20px; }
.sidebar-expand-btn:hover { background: #fffdf8; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #111111; }
.sidebar-expand-btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 #111111; }
html[data-theme="dark"] .sidebar-expand-btn {
  background: #1E1E1E;
  color: #FBF7EE;
  border-color: #FFFFFF;
  box-shadow: 3px 3px 0 #FFFFFF;
}

@media (min-width: 1024px) {
  .desktop-sidebar {
    transition: transform 300ms ease-in-out, visibility 300ms ease-in-out;
  }
  body.sidebar-collapsed .desktop-sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
  }
  body.sidebar-collapsed .board-shell,
  body.sidebar-collapsed .tracker-shell,
  body.sidebar-collapsed #expand-modal {
    padding-left: 2.25rem;
  }
  body.sidebar-collapsed .sidebar-expand-btn { display: inline-flex; }
}
@media (max-width: 1023.98px) {
  .sidebar-toggle-btn, .sidebar-expand-btn { display: none !important; }
}

/* ---------- REV 76: rich text announcement editor ---------- */
.rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.rt-toolbar button {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 12px "Libre Franklin", sans-serif;
  background: #FFFFFF;
  color: var(--ink, #111111);
  border: 2px solid var(--ink, #111111);
  border-radius: 6px;
  box-shadow: 2px 2px 0 var(--ink, #111111);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.rt-toolbar button:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink, #111111); }
.rt-toolbar button:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ink, #111111); }
.rt-toolbar button.rt-on { background: var(--ink, #111111); color: #FBF7EE; }
html[data-theme="dark"] .rt-toolbar button { background: var(--bg-card, #1c1917); color: var(--text-primary, #FBF7EE); border-color: #FFFFFF; box-shadow: 2px 2px 0 #FFFFFF; }
html[data-theme="dark"] .rt-toolbar button.rt-on { background: var(--maroon, #8B1A2B); color: #fff; }
.rt-editor {
  min-height: 130px;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 12px;
  background: #FFFFFF;
  color: #111111;
  border: 2px solid var(--ink, #111111);
  border-radius: 8px;
  font: 500 13px/1.55 "DM Sans", sans-serif;
  text-align: left;
  outline: none;
  word-break: break-word;
}
.rt-editor:focus { box-shadow: 0 0 0 3px rgba(122,35,49,.15); }
.rt-editor:empty::before { content: attr(data-placeholder); color: #9a8f93; pointer-events: none; }
.rt-editor h1 { font: 900 20px "Poppins", sans-serif; margin: 10px 0 6px; letter-spacing: -0.3px; }
.rt-editor h2 { font: 900 16px "Poppins", sans-serif; margin: 8px 0 5px; letter-spacing: -0.2px; }
.rt-editor p { margin: 0 0 6px; }
html[data-theme="dark"] .rt-editor { background: var(--bg-card, #1c1917); color: var(--text-primary, #FBF7EE); border-color: #FFFFFF; }
.reader-body h1 { font: 900 20px "Poppins", sans-serif; margin: 0 0 8px; letter-spacing: -0.3px; }
.reader-body h2 { font: 900 16px "Poppins", sans-serif; margin: 0 0 7px; letter-spacing: -0.2px; }
.reader-body p { margin: 0 0 6px; }
.reader-body u, .reader-body s { text-decoration: underline; }
.reader-body s { text-decoration: line-through; }

/* ==========================================================================
   REV 77: shell containment + responsive board containers
   ========================================================================== */
#app-content {
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   REV 79: universal background shell tokens
   ========================================================================== */
:root {
  color-scheme: light; /* REV 81: light canvas/scrollbars — kills dark edge bands + scrollbar flash */
}
html[data-theme="dark"] {
  color-scheme: dark;
}
html {
  scrollbar-gutter: stable; /* REV 80: no content jump between routes */
  /* REV 88: SPA swap stabilization — the document never collapses below the
     viewport, so the scrollbar thumb stops flashing while the router swaps. */
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  /* REV 87: the dot-field lives on the ROOT so it paints the full canvas —
     including the scrollbar-gutter strip that previously showed as a blank
     band at the right edge (body's background stopped at its own box). */
  background-color: #FFFDF8;
  background-image: radial-gradient(circle, rgba(152, 32, 54, 0.30) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  margin: 0;
  /* REV 90: no overflow on body — a non-visible body overflow makes BODY the
     scroll container, which defeats html scrollbar-gutter:stable (the root
     cause of the persistent swap layout shift). html owns the clip. */
}
/* REV 88: router transition — spa.js adds .routing before it tears down the
   old view and removes it a frame after the new view has laid out, so the
   height recalculation happens behind an opacity mask instead of visibly
   jumping. */
#app-content {
  transition: opacity .15s ease;
}
#app-content.routing {
  opacity: 0;
}
html[data-theme="dark"] {
  background-color: #121212;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 1.9px, transparent 2px);
  background-size: 18px 18px;
}

/* ==========================================================================
   REV 78: container offset parity, homepage capsule anchor
   ========================================================================== */
@media (min-width: 1024px) {
  #app-content {
    padding-left: calc(260px + 2.25rem);
    padding-right: 2.25rem;
    transition: padding-left 300ms ease-in-out;
  }
  /* REV 78: horizontal spacing owned by #app-content — shells surrender
     their legacy asymmetric paddings so all views share one centered frame */
  .board-shell,
  .tracker-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.sidebar-collapsed #app-content { padding-left: 2.25rem; }
  /* expand modal rides the same offset */
  body:has(.board-shell) #expand-modal { padding-left: calc(260px + 2.25rem); }
  body.sidebar-collapsed #expand-modal { padding-left: 2.25rem; }
}

/* Homepage: ONLY the Synced capsule moves to the bottom-left corner */

/* Homepage ALERTS button: Tier-1 lock-state tokens */
/* REV 79: ALERTS locks uniformly with its siblings (same dimming), but
   remains the clickable Tier-1 gate */
html:not(.boot-t1) #alertsButton {
  pointer-events: auto;
  opacity: 0.5;
}
html:not(.boot-t1) #alertsButton:hover { opacity: 0.75; }
html[data-theme="dark"] #alertsButton {
  border-color: #111111 !important;
}

/* ===== REV 86: the duplicate REV 81 help-modal block that lived here was
   collapsed into the single canonical section at the top of the file ===== */

/* ===== Lock Toast (from NEXUS, Rule 1) ===== */
.lock-toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translate(-50%, 12px);
      background: #2a0d13;
      color: #fff;
      padding: .6rem 1rem;
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 700;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      z-index: var(--z-dock);
      box-shadow: 0 10px 24px rgba(0,0,0,.3);
    }
    .lock-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ===== Dialog Actions (from FEED, Rule 1) ===== */
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }