/* ============================================================
   GALLERY THEMES: Glass (default) and Graphite
   Layered on top of editorial.css. The body carries both classes,
   e.g. "theme-editorial theme-glass", chosen per photographer on
   /account/appearance; share links follow the gallery owner.
   Selectors are scoped to gallery chrome (navbar, map rail, path
   strip, floating buttons) so landing and account pages are untouched.

   Graphite gel buttons follow the 2005 Mac OS X Tiger button
   (mac-buttons-timeline.vercel.app): full pill, 1.5px dark edge,
   four-stop vertical fill, a gloss bar inset across the top, a 1px
   inner highlight. Glass follows 2026-27 Liquid Glass: background
   blur, a darker edge, a bright top highlight, only where chrome
   floats over photographs.
   ============================================================ */

body.theme-glass,
body.theme-graphite {
  --gel-font: "Lucida Grande", "Lucida Sans Unicode", -apple-system, BlinkMacSystemFont, sans-serif;
  --gel-height: 28px;
  --glass-fill: rgba(28, 28, 28, 0.62);
  --glass-blur: blur(26px) saturate(1.5) brightness(0.9);
  --glass-edge: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  --glass-lift: 0 14px 34px -10px rgba(0, 0, 0, 0.7);
}

@media (pointer: coarse) {
  body.theme-glass,
  body.theme-graphite { --gel-height: 44px; }
}

/* ─── Gel buttons (shared by both themes) ─────────────────── */
body.theme-glass .header-cluster-btn,
body.theme-glass .header-invite-btn,
body.theme-graphite .header-cluster-btn,
body.theme-graphite .header-invite-btn,
body.theme-glass #gallery-navbar .navbar-item,
body.theme-graphite #gallery-navbar .navbar-item {
  position: relative !important;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  inline-size: auto !important;
  flex: 0 0 auto !important;
  min-height: var(--gel-height) !important;
  height: var(--gel-height) !important;
  min-inline-size: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid #262626 !important;
  font-family: var(--gel-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  color: #141414 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63), inset 0 -1px 1px rgba(255, 255, 255, 0.44) !important;
  transition: filter 0.15s, transform 0.1s !important;
  cursor: pointer;
}

body.theme-glass .header-cluster-btn::before,
body.theme-glass .header-invite-btn::before,
body.theme-graphite .header-cluster-btn::before,
body.theme-graphite .header-invite-btn::before,
body.theme-glass #gallery-navbar .navbar-item::before,
body.theme-graphite #gallery-navbar .navbar-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 1px;
  left: 6px;
  right: 6px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.18));
  pointer-events: none;
}

body.theme-glass .header-cluster-btn .title,
body.theme-glass .header-invite-btn .title,
body.theme-graphite .header-cluster-btn .title,
body.theme-graphite .header-invite-btn .title {
  font-family: var(--gel-font) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.theme-glass .header-cluster-btn svg,
body.theme-glass .header-invite-btn svg,
body.theme-graphite .header-cluster-btn svg,
body.theme-graphite .header-invite-btn svg {
  width: 14px;
  height: 14px;
}

body.theme-glass .header-invite-btn svg path,
body.theme-graphite .header-invite-btn svg path {
  stroke: currentColor;
}

body.theme-glass .header-cluster-btn:hover:not(.disabled),
body.theme-glass .header-invite-btn:hover,
body.theme-graphite .header-cluster-btn:hover:not(.disabled),
body.theme-graphite .header-invite-btn:hover,
body.theme-glass #gallery-navbar .navbar-item:hover,
body.theme-graphite #gallery-navbar .navbar-item:hover {
  filter: brightness(1.06);
  transform: none !important;
  color: #141414 !important;
  border-color: #262626 !important;
}

body.theme-glass .header-cluster-btn:active,
body.theme-glass .header-invite-btn:active,
body.theme-graphite .header-cluster-btn:active,
body.theme-graphite .header-invite-btn:active {
  filter: brightness(0.9);
  transform: translateY(1px) !important;
}

/* Send for review is the default button: dark graphite, the way Aqua marked the default. */
body.theme-glass .header-invite-btn,
body.theme-graphite .header-invite-btn {
  color: #f4f4f4 !important;
  border-color: #111 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

body.theme-glass .header-invite-btn::before,
body.theme-graphite .header-invite-btn::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06));
}

body.theme-glass .header-invite-btn:hover,
body.theme-graphite .header-invite-btn:hover {
  color: #fff !important;
  border-color: #111 !important;
}

/* Collapse similar while it is on: pressed in. */
body.theme-glass .header-cluster-btn.action-active,
body.theme-graphite .header-cluster-btn.action-active {
  color: #f2f2f2 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65);
  background: linear-gradient(to bottom, #2c2c2c 0%, #3a3a3a 45%, #565656 100%) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Waiting on clusters: still a button, just quieter. Never looks like a broken control. */
body.theme-glass .header-cluster-btn.disabled,
body.theme-graphite .header-cluster-btn.disabled {
  opacity: 0.6;
  filter: saturate(0.6);
}

/* ─── All / Favorites as a segmented control ─────────────── */
body.theme-glass #gallery-navbar .navbar-nav,
body.theme-graphite #gallery-navbar .navbar-nav {
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  column-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

body.theme-glass #gallery-navbar .nav-item,
body.theme-graphite #gallery-navbar .nav-item {
  margin: 0 !important;
  padding: 0 !important;
}

body.theme-glass #gallery-navbar .navbar-item,
body.theme-graphite #gallery-navbar .navbar-item {
  border-radius: 0 !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.63) !important;
  border-bottom: 1px solid #262626 !important;
}

body.theme-glass #gallery-navbar .nav-item:first-child .navbar-item,
body.theme-graphite #gallery-navbar .nav-item:first-child .navbar-item {
  border-radius: 999px 0 0 999px !important;
}

body.theme-glass #gallery-navbar .nav-item:last-child .navbar-item,
body.theme-graphite #gallery-navbar .nav-item:last-child .navbar-item {
  border-radius: 0 999px 999px 0 !important;
  border-left: 0 !important;
}

body.theme-glass #gallery-navbar .navbar-item::before,
body.theme-graphite #gallery-navbar .navbar-item::before {
  left: 4px;
  right: 4px;
}

body.theme-glass #gallery-navbar .navbar-item.active,
body.theme-graphite #gallery-navbar .navbar-item.active {
  color: #f2f2f2 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65);
  background: linear-gradient(to bottom, #2c2c2c 0%, #3a3a3a 45%, #565656 100%) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  border-bottom-color: #262626 !important;
}

body.theme-glass #gallery-navbar .navbar-item.active::before,
body.theme-graphite #gallery-navbar .navbar-item.active::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02));
}

body.theme-glass .nav-badge,
body.theme-graphite .nav-badge {
  font-family: var(--gel-font) !important;
  border-radius: 999px !important;
  background: #f2f2f2 !important;
  color: #111 !important;
}

/* ─── Floating buttons: one shape, one size ──────────────── */
/* By id: editorial styles #grid-layout-fab by id, which outranks a class. */
body.theme-glass #grid-layout-fab,
body.theme-glass #find-similar-fab,
body.theme-graphite #grid-layout-fab,
body.theme-graphite #find-similar-fab {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #e8e8e8 !important;
}

body.theme-glass .fab svg,
body.theme-graphite .fab svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   GLASS
   ============================================================ */

/* The toolbar floats as one capsule; photographs scroll beneath it. */
body.theme-glass #gallerynav-container {
  background: transparent !important;
  border-bottom: 0 !important;
  pointer-events: none;
}

body.theme-glass #gallery-navbar {
  pointer-events: auto;
  width: fit-content;
  max-width: calc(100% - 24px);
  min-height: 0 !important;
  margin: 10px auto 0;
  padding: 7px 8px 7px 18px !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  border-radius: 999px;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift);
}

body.theme-glass #gallery-navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent 45%);
}

body.theme-glass #gallery-navbar .navbar-nav {
  position: static !important;
  transform: none !important;
}

body.theme-glass .brand-text {
  font-size: 18px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

body.theme-glass .header-actions {
  gap: 8px !important;
}

body.theme-glass .header-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.4);
}

/* Map: a floating glass column instead of a rail stuck to the edge. */
body.theme-glass .editorial-sidebar {
  left: 10px !important;
  top: calc(var(--global-chrome-height) + 6px) !important;
  bottom: 12px !important;
  width: 60px !important;
  padding: 8px 5px !important;
  border: 0 !important;
  border-radius: 18px;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift);
}

body.theme-glass .editorial-sidebar .sidebar-label {
  color: rgba(255, 255, 255, 0.45) !important;
  font: 500 8px/1.3 var(--gel-font) !important;
  letter-spacing: 0.06em;
}

body.theme-glass .editorial-sidebar .sidebar-thumb {
  border-radius: 4px;
  overflow: hidden;
}

body.theme-glass #gallery-container,
body.theme-glass.favorites-tab #gallery-container {
  margin-left: 80px !important;
}

/* Where you are: a glass pill bottom-left instead of a full-width strip. */
body.theme-glass #breadcrumbs-wrapper {
  --third-dark-color: transparent;
  width: auto !important;
  max-width: calc(100% - 180px);
  left: 80px !important;
  right: auto !important;
  bottom: 12px !important;
  border-top: 0 !important;
  border-radius: 999px;
  padding: 0 6px;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift);
  font-family: var(--gel-font) !important;
}

body.theme-glass #grid-layout-fab,
body.theme-glass #find-similar-fab {
  border: 0 !important;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift) !important;
}

body.theme-glass #layout-toast {
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--gel-font) !important;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift);
}

/* ============================================================
   GRAPHITE
   ============================================================ */

/* Tiger's unified toolbar, in graphite. */
body.theme-graphite #gallerynav-container {
  background: linear-gradient(to bottom, #6a6a6a 0%, #4a4a4a 50%, #3b3b3b 51%, #303030 100%) !important;
  border-bottom: 1px solid #0a0a0a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.theme-graphite #gallery-navbar {
  background: transparent !important;
  gap: 12px;
}

body.theme-graphite .brand-text {
  font-family: var(--gel-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #f2f2f2 !important;
  text-shadow: 0 -1px 0 #000;
}

body.theme-graphite .header-actions {
  gap: 8px !important;
}

body.theme-graphite .header-divider {
  background: rgba(0, 0, 0, 0.55) !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.15);
}

/* Source-list sidebar, starting under the toolbar rather than behind it. */
body.theme-graphite .editorial-sidebar {
  top: var(--global-chrome-height) !important;
  background: linear-gradient(to right, #262626, #1f1f1f) !important;
  border-right: 1px solid #000 !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.07);
}

body.theme-graphite .editorial-sidebar .sidebar-label {
  color: #8c8c8c !important;
  font: 700 8px/1.3 var(--gel-font) !important;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 #000;
}

body.theme-graphite #breadcrumbs-wrapper {
  --third-dark-color: transparent;
  background: linear-gradient(to bottom, #4a4a4a, #2c2c2c) !important;
  border-top: 1px solid #0a0a0a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-family: var(--gel-font) !important;
}

body.theme-graphite #grid-layout-fab,
body.theme-graphite #find-similar-fab {
  border: 1px solid #111 !important;
  color: #f4f4f4 !important;
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

body.theme-graphite #layout-toast {
  font-family: var(--gel-font) !important;
  border-radius: 999px !important;
  background: linear-gradient(to bottom, #4a4a4a, #2c2c2c) !important;
  border: 1px solid #0a0a0a !important;
}

/* ============================================================
   SMALL SCREENS (phones, folded iPhone Duo)
   ============================================================ */
@media (max-width: 768px) {
  /* Editorial hides button labels here; keep the gels as round icon buttons. */
  body.theme-glass .header-cluster-btn,
  body.theme-glass .header-invite-btn,
  body.theme-graphite .header-cluster-btn,
  body.theme-graphite .header-invite-btn {
    inline-size: 44px !important;
    min-inline-size: 44px !important;
    padding: 0 !important;
  }

  body.theme-glass #gallery-navbar .navbar-item,
  body.theme-graphite #gallery-navbar .navbar-item {
    padding: 0 10px !important;
    min-inline-size: 0 !important;
  }

  body.theme-glass .header-actions,
  body.theme-graphite .header-actions {
    gap: 4px !important;
  }

  body.theme-glass #gallery-navbar {
    box-sizing: border-box;
    width: calc(100% - 16px);
    max-width: none;
    margin: 6px 8px 0;
    padding: 5px 5px 5px 12px !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }

  body.theme-glass .brand-text,
  body.theme-graphite .brand-text {
    font-size: 15px !important;
  }

  body.theme-glass .editorial-sidebar {
    left: 6px !important;
    width: 52px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.theme-glass #gallery-container,
  body.theme-glass #gallery-container.offset-1,
  body.theme-glass #gallery-container.offset-md-3,
  body.theme-glass.favorites-tab #gallery-container {
    margin-left: 64px !important;
  }
}

/* ============================================================
   PASS 2: everything past the toolbar
   ============================================================ */

/* Accent: greyscale. Editorial's gold (#c8b88a) is retired in both
   themes; picked/active states read as bright silver instead. Same
   token names editorial uses, so every editorial surface follows. */
body.theme-glass,
body.theme-graphite {
  --gt-accent: #ececec;
  --color-accent-cream: var(--gt-accent);
  --color-accent-gold: var(--gt-accent);
  --color-favorite: var(--gt-accent);
  --star-color: var(--gt-accent);
  --fav-color: var(--gt-accent);
  --light-red-color: var(--gt-accent);
  --regular-blue-color: var(--gt-accent);
  --light-blue-color: var(--gt-accent);
  --preloader-color: var(--gt-accent);
  --gt-panel-glass: rgba(24, 24, 24, 0.72);
  --gt-panel-graphite: linear-gradient(to bottom, #3a3a3a 0%, #2c2c2c 60px, #262626 100%);
}

/* Map column: keep the first thumbnail clear of the rounded corner. */
body.theme-glass .editorial-sidebar {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ─── Dialogs: Send for review ───────────────────────────── */
body.theme-glass .invite-modal-content,
body.theme-graphite .invite-modal-content {
  border-radius: 20px;
  border: 0;
  font-family: var(--gel-font);
}

body.theme-glass .invite-modal-content {
  background: var(--gt-panel-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

body.theme-graphite .invite-modal-content {
  border-radius: 10px;
  background: var(--gt-panel-graphite);
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

body.theme-glass .invite-modal-body h2,
body.theme-graphite .invite-modal-body h2 {
  font-family: var(--gel-font) !important;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
}

body.theme-glass .invite-modal-description,
body.theme-glass .invite-modal-helper,
body.theme-graphite .invite-modal-description,
body.theme-graphite .invite-modal-helper {
  font-family: var(--gel-font);
  font-size: 13px;
  color: #a8a8a8;
}

/* Text field: Aqua inset well. */
body.theme-glass .invite-modal-input,
body.theme-graphite .invite-modal-input {
  font-family: var(--gel-font);
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #0a0a0a;
  background: #141414;
  color: #ececec;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.theme-glass .invite-modal-input:focus,
body.theme-graphite .invite-modal-input:focus {
  border-color: #0a0a0a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 3px rgba(236, 236, 236, 0.35);
}

body.theme-glass .invite-modal-input::selection,
body.theme-graphite .invite-modal-input::selection {
  background: #5a5a5a;
  color: #fff;
}

/* Copy link is the default action: dark gel. Not now: light gel. */
body.theme-glass .invite-modal-copy-btn,
body.theme-graphite .invite-modal-copy-btn,
body.theme-glass .invite-modal-ghost-btn,
body.theme-graphite .invite-modal-ghost-btn {
  position: relative;
  isolation: isolate;
  min-height: 32px;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--gel-font);
  font-size: 13px;
  font-weight: 400;
  align-self: center;
  transform: none;
}

body.theme-glass .invite-modal-copy-btn,
body.theme-graphite .invite-modal-copy-btn {
  color: #f4f4f4;
  border: 1px solid #111;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

body.theme-glass .invite-modal-copy-btn .icon,
body.theme-graphite .invite-modal-copy-btn .icon {
  stroke: currentColor;
  width: 15px;
  height: 15px;
}

body.theme-glass .invite-modal-copy-btn:hover,
body.theme-graphite .invite-modal-copy-btn:hover {
  background: linear-gradient(to bottom, #444 0%, #505050 41%, #767676 77%, #a4a4a4 100%);
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

body.theme-glass .invite-modal-copy-btn.copied,
body.theme-graphite .invite-modal-copy-btn.copied {
  color: #111;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%);
}

body.theme-glass .invite-modal-ghost-btn,
body.theme-graphite .invite-modal-ghost-btn {
  color: #141414;
  border: 1px solid #262626;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63);
}

body.theme-glass .invite-modal-ghost-btn:hover,
body.theme-graphite .invite-modal-ghost-btn:hover {
  color: #141414;
  filter: brightness(1.06);
}

body.theme-glass .invite-modal-close,
body.theme-graphite .invite-modal-close {
  border-radius: 999px;
}

/* ─── Shared panel + gel recipes for pass-2 surfaces ────────
   (spelled out per selector list; CSS has no mixins) */

/* Light gel: secondary actions. */
body.theme-glass .copy-names-btns,
body.theme-graphite .copy-names-btns,
body.theme-glass .selection-toolbar .toolbar-action,
body.theme-graphite .selection-toolbar .toolbar-action,
body.theme-glass .remove-modal-cancel-btn,
body.theme-graphite .remove-modal-cancel-btn,
body.theme-glass .favs-nav-pill,
body.theme-graphite .favs-nav-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: var(--gel-height) !important;
  height: var(--gel-height) !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid #262626 !important;
  font-family: var(--gel-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #141414 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63) !important;
  transform: none !important;
}

body.theme-glass .copy-names-btns:hover,
body.theme-graphite .copy-names-btns:hover,
body.theme-glass .selection-toolbar .toolbar-action:hover,
body.theme-graphite .selection-toolbar .toolbar-action:hover,
body.theme-glass .remove-modal-cancel-btn:hover,
body.theme-graphite .remove-modal-cancel-btn:hover,
body.theme-glass .favs-nav-pill:hover,
body.theme-graphite .favs-nav-pill:hover {
  filter: brightness(1.06);
  color: #141414 !important;
}

/* The copy icon is a white PNG; darken it to sit on the light gel. */
body.theme-glass .copy-names-btns .sel-icon,
body.theme-graphite .copy-names-btns .sel-icon {
  filter: invert(1) brightness(0.25);
  width: 14px;
  height: auto;
}

body.theme-glass .copy-names-btns .btn-label,
body.theme-graphite .copy-names-btns .btn-label {
  font: inherit;
  color: inherit;
}

/* Dark gel: the primary action, and the pressed/selected state. */
body.theme-glass .selection-toolbar .toolbar-action.primary,
body.theme-graphite .selection-toolbar .toolbar-action.primary,
body.theme-glass .selection-toolbar .toolbar-action.action-active,
body.theme-graphite .selection-toolbar .toolbar-action.action-active,
body.theme-glass .favs-nav-pill.active,
body.theme-graphite .favs-nav-pill.active,
body.theme-glass .proceed-btn,
body.theme-graphite .proceed-btn,
body.theme-glass .remove-modal-confirm-btn,
body.theme-graphite .remove-modal-confirm-btn {
  color: #f4f4f4 !important;
  border: 1px solid #111 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

body.theme-glass .favs-nav-pill.active,
body.theme-graphite .favs-nav-pill.active {
  border-bottom-color: #111 !important;
}

/* Remove stays a warning: dark gel with red text. */
body.theme-glass .selection-toolbar .toolbar-action.destructive,
body.theme-graphite .selection-toolbar .toolbar-action.destructive,
body.theme-glass .remove-modal-confirm-btn,
body.theme-graphite .remove-modal-confirm-btn {
  color: #ff8a80 !important;
}

/* ─── Favorites header ──────────────────────────────────── */
body.theme-glass .favs-details .title,
body.theme-graphite .favs-details .title {
  font-family: var(--gel-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #ececec !important;
}

body.theme-glass .favs-details .title .middot,
body.theme-glass .favs-details .title #images_count,
body.theme-graphite .favs-details .title .middot,
body.theme-graphite .favs-details .title #images_count {
  font-weight: 400;
  color: #9a9a9a;
}

body.theme-glass .favs-section-nav,
body.theme-graphite .favs-section-nav {
  gap: 6px;
}

/* ─── Selection toolbar ─────────────────────────────────── */
body.theme-glass .selection-toolbar {
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 0 !important;
  box-shadow: var(--glass-edge), var(--glass-lift);
  font-family: var(--gel-font) !important;
}

body.theme-graphite .selection-toolbar {
  background: linear-gradient(to bottom, #6a6a6a 0%, #4a4a4a 50%, #3b3b3b 51%, #303030 100%) !important;
  border-bottom: 1px solid #0a0a0a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
  font-family: var(--gel-font) !important;
}

body.theme-glass .selection-toolbar .count-number,
body.theme-glass .selection-toolbar .count-label,
body.theme-graphite .selection-toolbar .count-number,
body.theme-graphite .selection-toolbar .count-label {
  font-family: var(--gel-font) !important;
  color: #ececec !important;
}

body.theme-glass .selection-toolbar .exit-btn,
body.theme-graphite .selection-toolbar .exit-btn {
  border-radius: 999px !important;
}

/* ─── Map rail states and tile marks: silver, not gold ─── */
body.theme-glass .editorial-sidebar .sidebar-thumb.current,
body.theme-graphite .editorial-sidebar .sidebar-thumb.current {
  border-color: #ececec !important;
  box-shadow: 0 0 0 1px #ececec !important;
}

body.theme-glass .editorial-sidebar .sb-count,
body.theme-graphite .editorial-sidebar .sb-count {
  color: #ececec !important;
  border-color: rgba(236, 236, 236, 0.45) !important;
  font-family: var(--gel-font) !important;
}

body.theme-glass .editorial-sidebar .sb-dot::after,
body.theme-graphite .editorial-sidebar .sb-dot::after {
  color: #111 !important;
}

/* Collapse Similar badges (injected by collapseSimilar.js). */
body.theme-glass .cs-badge,
body.theme-graphite .cs-badge {
  color: #ececec !important;
  border-color: rgba(236, 236, 236, 0.35) !important;
  font-family: var(--gel-font) !important;
  border-radius: 999px !important;
}

body.theme-glass .cs-badge:hover,
body.theme-graphite .cs-badge:hover,
body.theme-glass .cs-badge.cs-badge-expanded,
body.theme-graphite .cs-badge.cs-badge-expanded {
  color: #f4f4f4 !important;
  border-color: #111 !important;
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%) !important;
}

body.theme-glass .cs-badge:focus-visible,
body.theme-graphite .cs-badge:focus-visible {
  outline-color: #ececec !important;
}

body.theme-glass .image-item.cs-run-expanded,
body.theme-graphite .image-item.cs-run-expanded {
  box-shadow: inset 0 0 0 2px rgba(236, 236, 236, 0.8) !important;
}

body.theme-glass input:focus,
body.theme-glass textarea:focus,
body.theme-glass select:focus,
body.theme-graphite input:focus,
body.theme-graphite textarea:focus,
body.theme-graphite select:focus {
  outline-color: #ececec !important;
}

/* ─── Panels: find similar, remove confirm, context menu ─ */
body.theme-glass .find-similar-modal-content,
body.theme-glass .remove-modal-content,
body.theme-glass .context-menu {
  border: 0 !important;
  background: var(--gt-panel-glass) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 30px 80px -20px rgba(0, 0, 0, 0.8) !important;
  font-family: var(--gel-font) !important;
}

body.theme-graphite .find-similar-modal-content,
body.theme-graphite .remove-modal-content,
body.theme-graphite .context-menu {
  border: 0 !important;
  background: var(--gt-panel-graphite) !important;
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 80px -20px rgba(0, 0, 0, 0.8) !important;
  font-family: var(--gel-font) !important;
}

body.theme-glass .find-similar-modal-content,
body.theme-glass .remove-modal-content {
  border-radius: 20px !important;
}

body.theme-graphite .find-similar-modal-content,
body.theme-graphite .remove-modal-content {
  border-radius: 10px !important;
}

body.theme-glass .context-menu,
body.theme-graphite .context-menu {
  border-radius: 10px !important;
  padding: 4px 0;
}

body.theme-glass .find-similar-modal-content h3,
body.theme-glass .remove-modal-body h2,
body.theme-graphite .find-similar-modal-content h3,
body.theme-graphite .remove-modal-body h2 {
  font-family: var(--gel-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.theme-glass .contextmenu-list,
body.theme-graphite .contextmenu-list {
  background: transparent !important;
  border: 0 !important;
}

body.theme-glass .contextmenu-list > li > a,
body.theme-graphite .contextmenu-list > li > a {
  font-family: var(--gel-font) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #ececec !important;
}

/* Tiger menu highlight: a graphite band, not green or gold. */
body.theme-glass .contextmenu-list > li:hover,
body.theme-glass .contextmenu-list > li > a:hover,
body.theme-graphite .contextmenu-list > li:hover,
body.theme-graphite .contextmenu-list > li > a:hover {
  background: linear-gradient(to bottom, #6f6f6f, #4b4b4b) !important;
  color: #fff !important;
}

/* ─── Dashboard and project pages (projects/index.html) ── */
body.theme-glass #projects-navbar {
  background: rgba(10, 10, 10, 0.6) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

body.theme-graphite #projects-navbar {
  background: linear-gradient(to bottom, #6a6a6a 0%, #4a4a4a 50%, #3b3b3b 51%, #303030 100%) !important;
  border-bottom: 1px solid #0a0a0a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.theme-graphite #projects-navbar .brand-text,
body.theme-graphite #projects-navbar .brand a {
  font-family: var(--gel-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f2f2f2 !important;
  text-shadow: 0 -1px 0 #000;
}

body.theme-glass .header-create-btn,
body.theme-graphite .header-create-btn,
body.theme-glass .account-menu-btn,
body.theme-graphite .account-menu-btn {
  position: relative;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid #262626 !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #141414 !important;
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63) !important;
}

body.theme-glass .header-create-btn svg *,
body.theme-graphite .header-create-btn svg *,
body.theme-glass .account-menu-btn svg *,
body.theme-graphite .account-menu-btn svg * {
  stroke: #141414 !important;
}

body.theme-glass .account-dropdown,
body.theme-graphite .account-dropdown {
  border: 0 !important;
  border-radius: 10px !important;
  padding: 4px 0 !important;
  font-family: var(--gel-font);
}

body.theme-glass .account-dropdown {
  background: var(--gt-panel-glass) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift) !important;
}

body.theme-graphite .account-dropdown {
  background: var(--gt-panel-graphite) !important;
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 34px -10px rgba(0, 0, 0, 0.7) !important;
}

body.theme-glass .account-dropdown a,
body.theme-graphite .account-dropdown a {
  font-family: var(--gel-font) !important;
  font-size: 13px !important;
  color: #ececec !important;
}

body.theme-glass .account-dropdown a:hover,
body.theme-graphite .account-dropdown a:hover {
  background: linear-gradient(to bottom, #6f6f6f, #4b4b4b) !important;
  color: #fff !important;
}

/* ─── Client sign-in (voter_registration.html) ──────────── */
body.theme-glass.reg-themed,
body.theme-graphite.reg-themed {
  --accent: #ececec;
  --accent-hover: #ffffff;
  --accent-pressed: #cfcfcf;
}

body.theme-glass .proceed-btn,
body.theme-graphite .proceed-btn {
  position: relative;
  border-radius: 999px !important;
  font-family: var(--gel-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.theme-glass .proceed-btn .btn-icon,
body.theme-graphite .proceed-btn .btn-icon {
  color: #f4f4f4;
  stroke: currentColor;
}

/* ============================================================
   RESULTS PAGES
   results.html (owner, /results/<id>, extends layout) and
   results_public.html (client, /r/<id>, standalone, body.results-page).
   Both carry their own :root tokens; the owner page is scoped with
   :has(#results-bar) so generic names (--text, --bg) never leak into
   other layout pages. The red heart stays: it means picked. Voter
   dots stay multicolor: the colors identify people.
   ============================================================ */
body.theme-glass:has(#results-bar),
body.theme-graphite:has(#results-bar),
body.results-page.theme-glass,
body.results-page.theme-graphite {
  --accent: #ececec;
  --bg: #0b0b0b;
  --panel: #141414;
  --surface: #141414;
  --surface-card: #1a1a1a;
  --surface-hover: #242424;
  --line: #2a2a2a;
  --border: rgba(255, 255, 255, 0.08);
  --text: #ececec;
  --muted: #8a8a8a;
  font-family: var(--gel-font) !important;
}

body.theme-glass :is(#results-bar, #toolbar, #results-grid, #lightbox, #toast, .empty-state),
body.theme-graphite :is(#results-bar, #toolbar, #results-grid, #lightbox, #toast, .empty-state),
body.results-page :is(header, .stats-bar, .filter-bar, #gallery, #lightbox, footer, .empty-state) {
  font-family: var(--gel-font) !important;
  letter-spacing: 0;
}

/* ─── Header bar: owner #results-bar, client header ───────── */
body.theme-glass #results-bar,
body.results-page.theme-glass header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}

body.theme-graphite #results-bar,
body.results-page.theme-graphite header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(to bottom, #6a6a6a 0%, #4a4a4a 50%, #3b3b3b 51%, #303030 100%) !important;
  backdrop-filter: none;
  border-bottom: 1px solid #0a0a0a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.theme-glass #results-bar h1,
body.theme-graphite #results-bar h1,
body.results-page header h1 {
  font-family: var(--gel-font) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #f2f2f2;
}

body.theme-graphite #results-bar h1,
body.results-page.theme-graphite header h1 {
  text-shadow: 0 -1px 0 #000;
}

body.results-page .tagline {
  font-weight: 400;
  color: #9a9a9a;
}

body.theme-graphite #results-bar .summary,
body.results-page.theme-graphite .tagline {
  color: #bdbdbd;
  text-shadow: 0 -1px 0 #000;
}

/* ─── Owner toolbar strip under the header ──────────────── */
body.theme-glass #toolbar {
  position: sticky;
  top: var(--results-bar-h, 52px);
  z-index: 49;
  background: rgba(16, 16, 16, 0.72) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

body.theme-graphite #toolbar {
  position: sticky;
  top: var(--results-bar-h, 52px);
  z-index: 49;
  background: linear-gradient(to bottom, #2e2e2e, #242424) !important;
  border-bottom: 1px solid #0a0a0a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.theme-graphite .toolbar-sep {
  background: #111 !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12);
}

/* Labels: sentence case, no tracking. */
body.theme-glass .toolbar-label,
body.theme-graphite .toolbar-label,
body.results-page .filter-label,
body.results-page .stat-label,
body.theme-glass #lightbox-num,
body.theme-graphite #lightbox-num,
body.theme-glass .shot-num,
body.theme-graphite .shot-num {
  font-family: var(--gel-font) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.results-page .stat-label { font-size: 11px; color: #8a8a8a; }
body.results-page .stat-value { font-family: var(--gel-font); font-weight: 700; color: #f2f2f2; }

/* Stats sit in one inset well. */
body.results-page .stats-bar {
  border-bottom: 0;
}

body.results-page .stats-bar .stat {
  padding: 10px 16px;
  border-radius: 12px;
  background: #121212;
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ─── Buttons: gels at the shared height (44px on touch) ─── */
body.theme-glass:has(#results-bar) :is(.btn-copy-names, .voter-btn, .sort-btn, .back-link),
body.theme-graphite:has(#results-bar) :is(.btn-copy-names, .voter-btn, .sort-btn, .back-link),
body.results-page :is(.btn-copy-names, .filter-pill, .back-link) {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--gel-height) !important;
  height: auto;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid #262626 !important;
  font-family: var(--gel-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  color: #141414 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63) !important;
}

body.theme-glass:has(#results-bar) :is(.btn-copy-names, .voter-btn, .sort-btn, .back-link)::before,
body.theme-graphite:has(#results-bar) :is(.btn-copy-names, .voter-btn, .sort-btn, .back-link)::before,
body.results-page :is(.btn-copy-names, .filter-pill, .back-link)::before,
body.theme-glass .btn-share-link::before,
body.theme-graphite .btn-share-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 1px;
  left: 6px;
  right: 6px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.18));
  pointer-events: none;
}

body.theme-glass .btn-share-link::before,
body.theme-graphite .btn-share-link::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06));
}

body.theme-glass:has(#results-bar) :is(.btn-copy-names, .voter-btn, .sort-btn, .back-link):hover,
body.theme-graphite:has(#results-bar) :is(.btn-copy-names, .voter-btn, .sort-btn, .back-link):hover,
body.results-page :is(.btn-copy-names, .filter-pill, .back-link):hover {
  filter: brightness(1.06);
  color: #141414 !important;
  border-color: #262626 !important;
}

body.theme-glass:has(#results-bar) :is(.btn-copy-names, .voter-btn, .sort-btn, .back-link, .btn-share-link):active,
body.theme-graphite:has(#results-bar) :is(.btn-copy-names, .voter-btn, .sort-btn, .back-link, .btn-share-link):active,
body.results-page :is(.btn-copy-names, .filter-pill, .back-link):active {
  filter: brightness(0.9);
  transform: translateY(1px);
}

/* Selected filter / sort: pressed in. */
body.theme-glass .voter-btn.active,
body.theme-graphite .voter-btn.active,
body.theme-glass .sort-btn.active,
body.theme-graphite .sort-btn.active,
body.results-page .filter-pill.active {
  color: #f2f2f2 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65);
  background: linear-gradient(to bottom, #2c2c2c 0%, #3a3a3a 45%, #565656 100%) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

body.theme-glass .voter-btn.active::before,
body.theme-graphite .voter-btn.active::before,
body.theme-glass .sort-btn.active::before,
body.theme-graphite .sort-btn.active::before,
body.results-page .filter-pill.active::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02));
}

/* Voter count inside a light gel: readable, not --muted on silver. */
body.theme-glass .voter-btn span[style],
body.theme-graphite .voter-btn span[style] {
  color: #555 !important;
}

body.theme-glass .voter-btn.active span[style],
body.theme-graphite .voter-btn.active span[style] {
  color: #bdbdbd !important;
}

body.theme-glass .voter-btn .dot,
body.theme-graphite .voter-btn .dot {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Primary: Copy results link. */
body.theme-glass .btn-share-link,
body.theme-graphite .btn-share-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--gel-height) !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid #111 !important;
  font-family: var(--gel-font) !important;
  font-size: 12px !important;
  color: #f4f4f4 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  opacity: 1 !important;
}

/* Copied: pressed graphite with the check mark carrying the meaning. */
body.theme-glass .btn-copy-names.copied,
body.theme-graphite .btn-copy-names.copied,
body.theme-glass .btn-share-link.copied,
body.theme-graphite .btn-share-link.copied,
body.results-page .btn-copy-names.copied {
  color: #f2f2f2 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65);
  background: linear-gradient(to bottom, #2c2c2c 0%, #3a3a3a 45%, #565656 100%) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  border-color: #111 !important;
}

/* Focus: silver, never the browser blue. */
body.theme-glass :is(#results-bar, #toolbar, #lightbox) :is(a, button):focus-visible,
body.theme-graphite :is(#results-bar, #toolbar, #lightbox) :is(a, button):focus-visible,
body.results-page :is(a, button):focus-visible,
body.theme-glass .image-cell:focus-visible,
body.theme-graphite .image-cell:focus-visible,
body.results-page .photo-card:focus-visible {
  outline: 2px solid #ececec !important;
  outline-offset: 2px;
}

body.theme-glass .image-cell:focus-visible,
body.theme-graphite .image-cell:focus-visible,
body.results-page .photo-card:focus-visible {
  outline-offset: -2px;
}

/* ─── Tiles ─────────────────────────────────────────────── */
body.theme-glass .shot-num,
body.theme-graphite .shot-num {
  font-size: 10px !important;
}

body.theme-glass .img-dot,
body.theme-graphite .img-dot {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* Heart badge and the lightbox badge float over photographs. */
body.results-page.theme-glass :is(.heart-badge, #lb-badge) {
  border-radius: 999px;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}

body.results-page.theme-graphite :is(.heart-badge, #lb-badge) {
  border-radius: 999px;
  background: linear-gradient(to bottom, #4a4a4a, #2c2c2c) !important;
  border: 1px solid #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.6);
}

body.results-page .heart-count {
  font-family: var(--gel-font) !important;
}

/* Top pick: a small light gel, sentence case. */
body.results-page .top-ribbon {
  font-family: var(--gel-font) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid #262626;
  color: #141414 !important;
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63);
}

/* ─── Lightbox controls (both pages) ───────────────────── */
body.theme-glass :is(#lightbox-close, #lb-close),
body.theme-graphite :is(#lightbox-close, #lb-close) {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #ececec !important;
}

body.theme-glass .lb-nav,
body.theme-graphite .lb-nav {
  width: 44px !important;
  height: 64px;
  border-radius: 999px !important;
  color: #ececec !important;
}

body.theme-glass :is(#lightbox-close, #lb-close, .lb-nav) {
  border: 0 !important;
  background: rgba(28, 28, 28, 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.theme-glass :is(#lightbox-close, #lb-close, .lb-nav):hover {
  background: rgba(52, 52, 52, 0.62) !important;
}

body.theme-graphite :is(#lightbox-close, #lb-close, .lb-nav) {
  border: 1px solid #111 !important;
  color: #f4f4f4 !important;
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* Owner lightbox caption: number + voter chips in one capsule. */
body.theme-glass #lightbox-meta,
body.theme-graphite #lightbox-meta {
  padding: 8px 14px;
  border-radius: 999px;
}

body.theme-glass #lightbox-meta {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
}

body.theme-graphite #lightbox-meta {
  background: linear-gradient(to bottom, #3a3a3a, #262626);
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.theme-glass #lightbox-num,
body.theme-graphite #lightbox-num {
  color: #bdbdbd !important;
}

/* Owner toast (copy failure). */
body.theme-glass #toast {
  border-radius: 999px !important;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift);
}

body.theme-graphite #toast {
  border-radius: 999px !important;
  background: linear-gradient(to bottom, #4a4a4a, #2c2c2c) !important;
  border: 1px solid #0a0a0a !important;
}

/* ─── Client footer: floats over photos ────────────────── */
body.results-page.theme-glass footer {
  border-top: 0 !important;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}

body.results-page.theme-graphite footer {
  border-top: 1px solid #0a0a0a !important;
  background: linear-gradient(to bottom, #4a4a4a, #2c2c2c) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}

body.results-page footer a {
  font-family: var(--gel-font) !important;
  letter-spacing: 0 !important;
}

/* ─── Phones ───────────────────────────────────────────── */
@media (max-width: 768px) {
  body.theme-glass #results-bar,
  body.theme-graphite #results-bar {
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    padding: 8px 12px;
  }

  body.theme-glass #results-bar .summary,
  body.theme-graphite #results-bar .summary {
    display: none;
  }

  body.theme-glass #toolbar,
  body.theme-graphite #toolbar {
    position: static;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  body.results-page header {
    flex-wrap: wrap;
    gap: 8px;
  }

  body.results-page .tagline {
    display: none;
  }

  body.results-page .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* ============================================================
   PASS 4: audit follow-through (notes/trace-airselects-theme-audit.md)
   ============================================================ */

/* Picked is red everywhere (decided 2026-10-02): tiles, map rail, viewer,
   results. Everything else stays greyscale. */
body.theme-glass,
body.theme-graphite {
  --gt-picked: #E53935;
  --fav-color: var(--gt-picked);
  --color-favorite: var(--gt-picked);
  /* collapseSimilar.js reads these (editorial keeps its gold fallbacks). */
  --cs-accent: #ececec;
  --cs-edge: rgba(236, 236, 236, 0.35);
  --cs-ring: rgba(236, 236, 236, 0.8);
  /* uploadGalleryGrid.js reads --accent-color, which was never defined. */
  --accent-color: #ececec;
}

body.theme-glass .editorial-sidebar .sb-dot,
body.theme-graphite .editorial-sidebar .sb-dot {
  background: var(--gt-picked) !important;
}

body.theme-glass .editorial-sidebar .sb-dot::after,
body.theme-graphite .editorial-sidebar .sb-dot::after {
  color: #fff !important;
}

/* Gallery shells: the editorial body/mono fonts become Lucida. These tokens
   inherit into shadow roots, so breadcrumbs and the loading overlay follow. */
body.theme-glass:has(#gallery-container),
body.theme-graphite:has(#gallery-container),
body.theme-glass:has(#projects-navbar),
body.theme-graphite:has(#projects-navbar) {
  --font-body: var(--gel-font);
  --font-mono: var(--gel-font);
}

/* ─── Favorites section strip under the Glass capsule ──────
   #gallerynav-container is pointer-events:none in Glass so photos
   under the capsule stay clickable; the pills must opt back in. */
body.theme-glass #favs-section-nav {
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
}

body.theme-glass #favs-section-nav .favs-nav-pill {
  pointer-events: auto;
}

body.theme-graphite #favs-section-nav {
  background: linear-gradient(to bottom, #3b3b3b, #303030) !important;
  border-bottom: 1px solid #0a0a0a !important;
}

/* ─── Collapse Similar badge at rest ─────────────────────── */
body.theme-glass .cs-badge {
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge);
  border: 0 !important;
}

body.theme-graphite .cs-badge {
  color: #f4f4f4 !important;
  border: 1px solid #111 !important;
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%) !important;
}

@media (pointer: coarse) {
  body.theme-glass .cs-badge,
  body.theme-graphite .cs-badge {
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px !important;
  }
}

body.theme-glass .image-item.cs-run-expanded .image,
body.theme-graphite .image-item.cs-run-expanded .image {
  box-shadow: inset 0 0 0 2px var(--cs-ring) !important;
}

/* ─── Tile selection ─────────────────────────────────────── */
body.theme-glass .select-btn.check3 svg .check-mark,
body.theme-graphite .select-btn.check3 svg .check-mark,
body.theme-glass .select-btn.check2 svg .check-mark,
body.theme-graphite .select-btn.check2 svg .check-mark {
  stroke: #141414 !important;
}

body.theme-glass .select-btn:hover svg .circle,
body.theme-graphite .select-btn:hover svg .circle {
  fill: rgba(236, 236, 236, 0.25) !important;
}

body.theme-glass .images-container .selected-image,
body.theme-graphite .images-container .selected-image {
  outline: 0 !important;
  box-shadow: inset 0 0 0 3px #ececec, inset 0 0 0 4px #000;
}

body.theme-glass .images-container .hover-effect-active::before,
body.theme-graphite .images-container .hover-effect-active::before {
  background: rgba(236, 236, 236, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(236, 236, 236, 0.5);
}

/* ─── Owner favorites: results link + new-hearts note ────── */
.favs-results-bar {
  padding: 10px 12px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.favs-results-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  background: #E6D4C0;
  color: #111;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

body.theme-glass .favs-results-link,
body.theme-graphite .favs-results-link {
  position: relative;
  min-height: var(--gel-height);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #111;
  font-family: var(--gel-font);
  font-weight: 400;
  color: #f4f4f4;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

body.theme-glass .favs-results-link:hover,
body.theme-graphite .favs-results-link:hover {
  color: #fff;
  filter: brightness(1.08);
}

body.theme-glass .new-hearts-indicator,
body.theme-graphite .new-hearts-indicator {
  display: inline-flex;
  padding: 6px 14px;
  border: 1px solid #0a0a0a;
  border-radius: 999px;
  background: #141414;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.theme-glass .new-hearts-text,
body.theme-graphite .new-hearts-text {
  color: #ececec;
  font-family: var(--gel-font);
  font-size: 13px;
}

/* ─── Share box (owner's "Share N selected") ─────────────── */
body.theme-glass #share-box,
body.theme-graphite #share-box {
  border: 0 !important;
  font-family: var(--gel-font);
}

body.theme-glass #share-box {
  border-radius: 20px !important;
  background: var(--gt-panel-glass) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift) !important;
}

body.theme-graphite #share-box {
  border-radius: 10px !important;
  background: var(--gt-panel-graphite) !important;
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 80px -20px rgba(0, 0, 0, 0.8) !important;
}

body.theme-glass #url-input,
body.theme-graphite #url-input {
  border-radius: 8px !important;
  border: 1px solid #0a0a0a !important;
  background: #141414 !important;
  color: #ececec !important;
  font-family: var(--gel-font) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.theme-glass #share-box svg [stroke="#E6D4C0"],
body.theme-graphite #share-box svg [stroke="#E6D4C0"] {
  stroke: currentColor;
}

/* ─── Find-similar drop well ─────────────────────────────── */
body.theme-glass #visual-search .dropzone,
body.theme-graphite #visual-search .dropzone {
  border: 1px solid #0a0a0a !important;
  border-radius: 12px !important;
  background: #141414 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.theme-glass #visual-search .dz-message,
body.theme-graphite #visual-search .dz-message,
body.theme-glass .find-similar-modal-subtitle,
body.theme-graphite .find-similar-modal-subtitle {
  font-family: var(--gel-font) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #a8a8a8 !important;
}

body.theme-glass .dz-progress .dz-upload,
body.theme-graphite .dz-progress .dz-upload {
  background: linear-gradient(to bottom, #ececec, #9a9a9a) !important;
}

body.theme-glass .dz-error-message,
body.theme-graphite .dz-error-message {
  color: #ff8a80 !important;
}

/* ─── Map rail label, dividers, empty note ───────────────── */
body.theme-glass .editorial-sidebar .sidebar-label,
body.theme-graphite .editorial-sidebar .sidebar-label {
  text-transform: none !important;
}

body.theme-glass .editorial-sidebar .sidebar-section-divider,
body.theme-graphite .editorial-sidebar .sidebar-section-divider,
body.theme-glass .editorial-sidebar.is-empty::after,
body.theme-graphite .editorial-sidebar.is-empty::after {
  font: 400 8px/1.3 var(--gel-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #8c8c8c !important;
}

/* ─── Empty states ───────────────────────────────────────── */
body.theme-glass .empty-state .empty-title,
body.theme-graphite .empty-state .empty-title {
  font: 700 15px var(--gel-font) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #ececec !important;
}

body.theme-glass .empty-state .empty-subtitle,
body.theme-graphite .empty-state .empty-subtitle {
  font: 13px var(--gel-font) !important;
  color: #9a9a9a !important;
}

/* ─── Tooltip ────────────────────────────────────────────── */
body.theme-glass #tooltip,
body.theme-graphite #tooltip {
  border: 0 !important;
  border-radius: 8px !important;
  color: #ececec !important;
  font: 12px var(--gel-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.theme-glass #tooltip {
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift);
}

body.theme-graphite #tooltip {
  background: var(--gt-panel-graphite) !important;
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.theme-glass #tooltip p,
body.theme-graphite #tooltip p {
  font: inherit !important;
  color: inherit !important;
}

/* ─── Selection toolbar exit button ──────────────────────── */
body.theme-glass .selection-toolbar .exit-btn,
body.theme-graphite .selection-toolbar .exit-btn {
  width: var(--gel-height);
  height: var(--gel-height);
  display: inline-grid;
  place-items: center;
  border: 1px solid #262626 !important;
  color: #141414 !important;
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63) !important;
}

/* ─── Dialog buttons reach 44px on touch ─────────────────── */
body.theme-glass .invite-modal-copy-btn,
body.theme-graphite .invite-modal-copy-btn,
body.theme-glass .invite-modal-ghost-btn,
body.theme-graphite .invite-modal-ghost-btn {
  height: max(32px, var(--gel-height));
  min-height: max(32px, var(--gel-height));
}

/* Failed copy: red text on the gel, never silent. */
body.theme-glass :is(.toolbar-action, .copy-names-btns).fail,
body.theme-graphite :is(.toolbar-action, .copy-names-btns).fail {
  color: #ff8a80 !important;
}

/* ─── Focus: one silver ring for every control ───────────── */
body.theme-glass :is(.header-cluster-btn, .header-invite-btn, #gallery-navbar .navbar-item, .copy-names-btns,
  .toolbar-action, .exit-btn, .favs-nav-pill, .fab, .invite-modal-copy-btn, .invite-modal-ghost-btn,
  .invite-modal-close, .remove-modal-cancel-btn, .remove-modal-confirm-btn, .cs-badge, .select-btn,
  .favs-results-link, .proceed-btn, .contextmenu-link):focus-visible,
body.theme-graphite :is(.header-cluster-btn, .header-invite-btn, #gallery-navbar .navbar-item, .copy-names-btns,
  .toolbar-action, .exit-btn, .favs-nav-pill, .fab, .invite-modal-copy-btn, .invite-modal-ghost-btn,
  .invite-modal-close, .remove-modal-cancel-btn, .remove-modal-confirm-btn, .cs-badge, .select-btn,
  .favs-results-link, .proceed-btn, .contextmenu-link):focus-visible {
  outline: 2px solid #ececec !important;
  outline-offset: 2px;
}

body.theme-glass .btn:focus-visible,
body.theme-graphite .btn:focus-visible {
  --bs-btn-focus-box-shadow: none;
}

/* Native chrome: scrollbars, selection, checkboxes. */
body.theme-glass,
body.theme-graphite {
  scrollbar-color: #5a5a5a #0c0c0c;
  accent-color: #ececec;
}

body.theme-glass ::selection,
body.theme-graphite ::selection {
  background: #5a5a5a;
  color: #fff;
}

/* ─── Client: pick bar ───────────────────────────────────── */
body.theme-glass .share-pick-bar__inner,
body.theme-graphite .share-pick-bar__inner {
  border: 0 !important;
  border-radius: 20px;
}

body.theme-glass .share-pick-bar__inner {
  background: var(--gt-panel-glass) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift);
}

body.theme-graphite .share-pick-bar__inner {
  border-radius: 10px;
  background: var(--gt-panel-graphite) !important;
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.theme-glass .share-pick-bar__title,
body.theme-graphite .share-pick-bar__title {
  font: 700 16px/1.3 var(--gel-font) !important;
  color: #f2f2f2 !important;
}

body.theme-glass .share-pick-bar__meta,
body.theme-graphite .share-pick-bar__meta {
  font-family: var(--gel-font) !important;
  font-size: 12px !important;
}

body.theme-glass .share-pick-bar__count,
body.theme-graphite .share-pick-bar__count {
  color: #ececec !important;
  font-weight: 700;
}

/* Clear the floating Glass map column. */
body.theme-glass .share-pick-bar {
  margin-left: 80px;
}

@media (max-width: 768px) {
  body.theme-glass .share-pick-bar {
    margin-left: 64px;
  }
}

/* ─── Client: sign-in page (voter_registration.html) ──────── */
body.reg-themed.theme-glass,
body.reg-themed.theme-graphite {
  --bg-primary: #0e0e0e;
  --text-primary: #ececec;
  --font-body: var(--gel-font);
  font-family: var(--gel-font);
}

body.reg-themed .reg-page {
  font-family: var(--gel-font);
}

body.reg-themed.theme-glass #reg-form,
body.reg-themed.theme-glass .owner-preview,
body.reg-themed.theme-graphite #reg-form,
body.reg-themed.theme-graphite .owner-preview {
  padding: 22px;
  border-radius: 20px;
}

body.reg-themed.theme-glass #reg-form,
body.reg-themed.theme-glass .owner-preview {
  background: var(--gt-panel-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-lift);
}

body.reg-themed.theme-graphite #reg-form,
body.reg-themed.theme-graphite .owner-preview {
  border-radius: 10px;
  background: var(--gt-panel-graphite);
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.reg-themed #reg-form label {
  font-family: var(--gel-font) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #bdbdbd !important;
}

body.reg-themed #reg-form input {
  min-height: 44px;
  border-radius: 10px !important;
  border: 1px solid #0a0a0a !important;
  background: #141414 !important;
  color: #ececec !important;
  font-family: var(--gel-font) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.reg-themed #reg-form input:focus {
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 3px rgba(236, 236, 236, 0.35) !important;
}

body.reg-themed .proceed-btn {
  min-height: 44px;
  isolation: isolate;
}

body.reg-themed .proceed-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 1px;
  left: 8px;
  right: 8px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06));
}

body.reg-themed .proceed-btn:hover {
  filter: brightness(1.08);
}

body.reg-themed .proceed-btn:active {
  background: linear-gradient(to bottom, #2c2c2c 0%, #3a3a3a 45%, #565656 100%) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* ─── Owner pages outside the gallery ────────────────────── */
/* Dashboard shell: the container is what made Glass a flat black bar. */
body.theme-glass #projectsnav-container,
body.theme-graphite #projectsnav-container {
  background: transparent !important;
  border-bottom: 0 !important;
}

/* Editorial's :hover beats the gel; restate it so the icon never vanishes. */
body.theme-glass .header-create-btn:hover,
body.theme-graphite .header-create-btn:hover,
body.theme-glass .account-menu-btn:hover,
body.theme-graphite .account-menu-btn:hover {
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%) !important;
  filter: brightness(1.06);
}

@media (pointer: coarse) {
  body.theme-glass :is(.header-create-btn, .account-menu-btn),
  body.theme-graphite :is(.header-create-btn, .account-menu-btn) {
    width: 44px !important;
    height: 44px !important;
  }
}

/* No map rail on the dashboard and project pages: the path pill sits at the edge. */
body.theme-glass:has(#projects-navbar) #breadcrumbs-wrapper {
  left: 12px !important;
}

/* Project page drag: a framed drop target instead of dimming the whole page. */
body.theme-glass main.draggingOnIt,
body.theme-graphite main.draggingOnIt {
  opacity: 1 !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 2px rgba(236, 236, 236, 0.6), inset 0 0 0 6px rgba(0, 0, 0, 0.5);
}

/* Sign in, register, change password (.editorial-form). */
body.theme-glass .editorial-form,
body.theme-graphite .editorial-form {
  font-family: var(--gel-font) !important;
}

body.theme-glass .editorial-form :is(h1, h2),
body.theme-graphite .editorial-form :is(h1, h2) {
  font-family: var(--gel-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.theme-glass .editorial-form label,
body.theme-graphite .editorial-form label {
  font-family: var(--gel-font) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #bdbdbd !important;
}

body.theme-glass .editorial-form input:is([type="text"], [type="email"], [type="password"]),
body.theme-graphite .editorial-form input:is([type="text"], [type="email"], [type="password"]) {
  min-height: 44px;
  border-radius: 10px !important;
  border: 1px solid #0a0a0a !important;
  background: #141414 !important;
  color: #ececec !important;
  font-family: var(--gel-font) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.theme-glass .editorial-form input:focus,
body.theme-graphite .editorial-form input:focus {
  border-color: #0a0a0a !important;
  outline: none !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 3px rgba(236, 236, 236, 0.35) !important;
}

body.theme-glass .editorial-form :is(button[type="submit"], .signin-btn),
body.theme-graphite .editorial-form :is(button[type="submit"], .signin-btn) {
  min-height: 44px;
  border-radius: 999px !important;
  border: 1px solid #111 !important;
  font-family: var(--gel-font) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #f4f4f4 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

body.theme-glass .editorial-form :is(button[type="submit"], .signin-btn):hover,
body.theme-graphite .editorial-form :is(button[type="submit"], .signin-btn):hover {
  filter: brightness(1.08);
}

body.theme-glass .editorial-form a,
body.theme-graphite .editorial-form a {
  color: #ececec !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.theme-glass .editorial-alert,
body.theme-graphite .editorial-alert {
  border: 0 !important;
  border-radius: 10px !important;
  background: #141414 !important;
  color: #ececec !important;
  font-family: var(--gel-font) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(236, 236, 236, 0.18) !important;
}

body.theme-glass .editorial-alert-error,
body.theme-graphite .editorial-alert-error {
  color: #ff8a80 !important;
}

/* API keys + Gallery look pages: Lucida, gels, inset wells, no gold. */
body.theme-glass :is(.keys-page, .look-page) h1,
body.theme-graphite :is(.keys-page, .look-page) h1 {
  font-family: var(--gel-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

body.theme-glass :is(.keys-page, .look-page),
body.theme-graphite :is(.keys-page, .look-page) {
  font-family: var(--gel-font);
}

body.theme-glass .keys-section-label,
body.theme-graphite .keys-section-label {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 0.7 !important;
}

body.theme-glass .keys-form input[type="text"],
body.theme-graphite .keys-form input[type="text"] {
  min-height: 44px;
  border-radius: 10px !important;
  border: 1px solid #0a0a0a !important;
  background: #141414 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: var(--gel-font);
}

body.theme-glass .keys-btn,
body.theme-graphite .keys-btn {
  border-radius: 999px !important;
  border: 1px solid #111 !important;
  font-family: var(--gel-font);
  color: #f4f4f4 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

body.theme-glass .keys-btn.keys-btn-quiet,
body.theme-graphite .keys-btn.keys-btn-quiet {
  color: #141414 !important;
  border-color: #262626 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63);
}

body.theme-glass .keys-btn.keys-btn-quiet:hover,
body.theme-graphite .keys-btn.keys-btn-quiet:hover {
  color: #b3261e !important;
}

body.theme-glass .keys-new,
body.theme-graphite .keys-new {
  border: 0 !important;
  border-radius: 12px !important;
  background: #141414 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(236, 236, 236, 0.25);
}

body.theme-glass .keys-secret code,
body.theme-graphite .keys-secret code {
  color: #ececec !important;
}

body.theme-glass .look-back,
body.theme-graphite .look-back,
body.theme-glass .keys-back,
body.theme-graphite .keys-back {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid #262626;
  color: #141414 !important;
  opacity: 1 !important;
  font-size: 12px !important;
  text-decoration: none;
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63);
}

/* ─── Confirm dialog (static/js/spa/confirmDialog.js) ─────── */
.gt-confirm {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.gt-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.gt-confirm__panel {
  position: relative;
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  border-radius: 20px;
  color: #ececec;
  font-family: var(--gel-font, -apple-system, sans-serif);
  background: rgba(24, 24, 24, 0.86);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

body.theme-graphite .gt-confirm__panel {
  border-radius: 10px;
  backdrop-filter: none;
  background: linear-gradient(to bottom, #3a3a3a 0%, #2c2c2c 60px, #262626 100%);
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

.gt-confirm__title {
  margin: 0 0 8px;
  font: 700 17px/1.3 var(--gel-font, -apple-system, sans-serif);
}

.gt-confirm__message {
  margin: 0 0 18px;
  font: 13px/1.5 var(--gel-font, -apple-system, sans-serif);
  color: #a8a8a8;
}

.gt-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.gt-confirm__cancel,
.gt-confirm__confirm {
  min-height: max(32px, var(--gel-height, 32px));
  padding: 0 16px;
  border-radius: 999px;
  font: 13px var(--gel-font, -apple-system, sans-serif);
  cursor: pointer;
}

.gt-confirm__cancel {
  border: 1px solid #262626;
  color: #141414;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63);
}

.gt-confirm__confirm {
  border: 1px solid #111;
  color: #f4f4f4;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.gt-confirm__confirm.is-destructive {
  color: #ff8a80;
}

.gt-confirm__cancel:focus-visible,
.gt-confirm__confirm:focus-visible {
  outline: 2px solid #ececec;
  outline-offset: 2px;
}

/* ─── Notice (static/js/notice.js, replaces alert()) ─────── */
.gt-notice {
  border: 0;
  border-radius: 24px;
  padding: 6px 6px 6px 18px;
  font-family: var(--gel-font, -apple-system, sans-serif);
  background: rgba(24, 24, 24, 0.86);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 18px 50px -12px rgba(0, 0, 0, 0.8);
}

body.theme-graphite .gt-notice {
  border-radius: 8px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(to bottom, #3a3a3a 0%, #2c2c2c 100%);
  box-shadow: 0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 50px -12px rgba(0, 0, 0, 0.8);
}

.gt-notice.is-error .gt-notice__message::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--gt-picked, #e53935);
}

.gt-notice__action {
  display: inline-flex;
  align-items: center;
  min-height: max(28px, var(--gel-height, 28px));
  padding: 0 14px;
  border: 1px solid #262626;
  border-radius: 999px;
  color: #141414;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, #a9a9a9 0%, #b9b9b9 41%, #dcdcdc 77%, #f4f4f4 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.63);
}

.gt-notice__close {
  min-width: max(28px, var(--gel-height, 28px));
  min-height: max(28px, var(--gel-height, 28px));
  border-radius: 999px;
}

.gt-notice__action:focus-visible,
.gt-notice__close:focus-visible {
  outline: 2px solid #ececec;
  outline-offset: 2px;
}

/* ─── Client: Done picking ───────────────────────────────── */
body.theme-glass .share-done-btn,
body.theme-graphite .share-done-btn {
  position: relative;
  isolation: isolate;
  font-family: var(--gel-font);
  font-size: 13px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(to bottom, #3a3a3a 0%, #464646 41%, #6c6c6c 77%, #9a9a9a 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

body.theme-glass .share-done-btn::before,
body.theme-graphite .share-done-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 1px;
  left: 8px;
  right: 8px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06));
}

body.theme-glass .share-done-btn.is-done,
body.theme-graphite .share-done-btn.is-done {
  background: linear-gradient(to bottom, #2c2c2c 0%, #3a3a3a 45%, #565656 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

body.theme-glass .share-done-note,
body.theme-graphite .share-done-note {
  font-family: var(--gel-font);
  font-size: 12px;
  color: #bdbdbd;
}

body.theme-glass .voter-done,
body.theme-graphite .voter-done {
  font-family: var(--gel-font);
  color: #f2f2f2 !important;
  background: linear-gradient(to bottom, #2c2c2c, #565656);
}