/* ── Splash screen ───────────────────────────────────── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 600ms ease;
}
#splash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* The splash artwork is portrait. Preserve its full composition on wider
   screens instead of enlarging it until nearly everything is cropped away. */
@media (min-width: 768px) {
  #splash img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
  }
}
#splash.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Variables ───────────────────────────────────────── */
:root {
  --btnInk:       rgba(255, 255, 255, 0.92);
  --stroke:       rgba(255, 255, 255, 0.18);
  --glass:        rgba(255, 255, 255, 0.08);
  --glassHover:   rgba(255, 255, 255, 0.13);
  --cardBg:       rgba(0, 0, 0, 0.92);
  --cardStroke:   rgba(255, 255, 255, 0.18);
  --cardText:     rgba(255, 255, 255, 0.96);
  --auraColor:    hsla(245, 85%, 72%, 0.72);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #05050a;
}

/* ── Background canvases ─────────────────────────────── */
#space {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh;
  display: block; pointer-events: none;
  background: #05050a;
}

#animus {
  position: fixed; inset: 0; z-index: 2;
  width: 100vw; height: 100vh;
  display: none; pointer-events: none;
}

#tarotCanvas {
  position: fixed; inset: 0; z-index: 3;
  width: 100vw; height: 100vh;
  display: block;
}

/* ── Generic button base ─────────────────────────────── */
button {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 10px;
  color: var(--btnInk);
  border: 1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, background 120ms ease;
}
button:active { }

/* ── Hamburger button ─────────────────────────────────── */
.menuBtn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 40;

  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--auraColor);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 12px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 120ms ease, transform 120ms ease,
              border-color 400ms ease, box-shadow 400ms ease;
}



/* Focus Mode active — same color, bars collapse to single line */
.menuBtn.focus-mode-active {
  box-shadow: 0 0 16px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5);
}
.menuBtn.focus-mode-active .bar:nth-child(1) {
  transform: translateY(7px) scaleX(0.5);
  opacity: 0;
}
.menuBtn.focus-mode-active .bar:nth-child(2) {
  transform: scaleX(1.2);
}
.menuBtn.focus-mode-active .bar:nth-child(3) {
  transform: translateY(-7px) scaleX(0.5);
  opacity: 0;
}
/* Pulse animation on toggle */
@keyframes focusPulse {
  0%   { box-shadow: 0 0 12px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5); }
  40%  { box-shadow: 0 0 32px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5); transform: scale(1.08); }
  100% { box-shadow: 0 0 12px var(--auraColor), 0 8px 24px rgba(0,0,0,0.5); transform: scale(1); }
}
.menuBtn.focus-mode-pulse {
  animation: focusPulse 400ms ease-out forwards;
}

.menuBtn .bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--auraColor);
  transition: transform 200ms ease, opacity 200ms ease,
              background 400ms ease;
}

/* ── Menu panel ─────────────────────────────────────── */
.panel {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 39;

  width: 272px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 12px 10px 14px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(4, 3, 14, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.65);

  display: none;
}
.panel.open { display: block; }

/* Scrollbar (webkit) */
.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }

/* ── Panel typography ───────────────────────────────── */
.sectionTitle {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 4px 2px 8px;
}

.divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 10px 0 12px;
  border-radius: 999px;
}

/* ── Rows ───────────────────────────────────────────── */
.sliderRow {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
}

.sliderLabelRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 8px;
}
.sliderValue { color: rgba(255,255,255,0.5); }

input[type="range"] {
  width: 100%;
  accent-color: rgba(255,255,255,0.8);
}
/* Hue-specific sliders get rainbow gradient track */
#hueASlider, #hueBSlider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(
    90deg,
    hsl(0,85%,55%), hsl(45,85%,55%), hsl(90,85%,55%),
    hsl(135,85%,55%), hsl(180,85%,55%), hsl(225,85%,55%),
    hsl(270,85%,55%), hsl(315,85%,55%), hsl(360,85%,55%)
  );
  cursor: pointer;
}
#hueASlider::-webkit-slider-thumb,
#hueBSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
  cursor: pointer;
  border: 2px solid rgba(0,0,0,0.2);
}
#hueASlider::-moz-range-thumb,
#hueBSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
  cursor: pointer;
  border: 2px solid rgba(0,0,0,0.2);
}



.fullWidthBtn {
  width: 100%;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.9);
  outline: none;
  font-weight: 600;
  font-size: 13px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor: pointer;
}
select option {
  background: #05050a;
  color: rgba(255,255,255,0.9);
}

/* ── Reversals toggle ───────────────────────────────── */
.toggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggleLabel {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  user-select: none;
}

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggleTrack {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  transition: background 200ms ease, border-color 200ms ease;
  position: relative;
  display: block;
}

.toggleThumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: transform 200ms ease, background 200ms ease;
  display: block;
}

.toggle input:checked + .toggleTrack {
  background: rgba(180, 80, 80, 0.55);
  border-color: rgba(220, 100, 100, 0.4);
}

.toggle input:checked + .toggleTrack .toggleThumb {
  transform: translateX(16px);
  background: rgba(255, 180, 180, 0.92);
}

/* ── View mode overlay (reticle shown when draw is disabled) ── */
.zoomOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 10;
  color: var(--auraColor);
}
.zoomOverlay.visible { opacity: 1; }

.zoomReticle {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 0 8px var(--auraColor));
}

.zoomLabel {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--auraColor);
  text-shadow: 0 0 8px var(--auraColor);
}

/* ── Card description overlay (tap-hold) ─────────────────── */
.descOverlay {
  position: fixed;
  bottom: 64px;
  left: 0;
  right: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--auraColor) 22%, #08090f) 0%,
    color-mix(in srgb, var(--auraColor) 14%, #08090f) 40%,
    color-mix(in srgb, var(--auraColor) 8%, #08090f) 75%,
    color-mix(in srgb, var(--auraColor) 4%, #08090f) 100%
  );
  border-top: 0;
  border-bottom: 0;
  padding: 10px 16px 14px 16px;
  z-index: 61;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
  max-height: 35vh;
  overflow-y: auto;
}
.descOverlay::before,
.descOverlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: var(--auraColor);
  box-shadow: 0 0 7px color-mix(in srgb, var(--auraColor) 55%, transparent);
}
.descOverlay::before { top: 0; }
.descOverlay::after  { bottom: 0; }
.descOverlay > * {
  position: relative;
  z-index: 2;
}
.descOverlay.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.descTitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--auraColor);
  text-shadow: 0 0 10px var(--auraColor);
  text-transform: uppercase;
}

.desc-spread-context {
  margin: 3px 0 6px;
  color: color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.62));
  font: 700 9px/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.desc-spread-context[hidden] { display: none; }

.desc-spread-insight {
  margin: 7px 0 8px;
  padding: 9px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 22%, rgba(255,255,255,0.06));
  border-radius: 10px;
  background: color-mix(in srgb, var(--auraColor) 5%, rgba(255,255,255,0.018));
}
.desc-spread-insight[hidden] { display: none; }
.desc-spread-insight-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.desc-spread-question {
  margin-bottom: 0;
  color: rgba(236,232,251,0.76);
  font: 600 10px/1.4 ui-sans-serif, system-ui, sans-serif;
  font-style: italic;
}
.desc-body-label {
  margin: 4px 0 2px;
  color: color-mix(in srgb, var(--auraColor) 64%, rgba(255,255,255,0.46));
  font: 750 8px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.desc-body-label[hidden] { display: none; }
.descOverlay.desc-spread-aware { max-height: 48vh; }

.descBody {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(220, 210, 255, 0.85);
}

/* ══════════════════════════════════════════════════════
   CARD INDEX
   ══════════════════════════════════════════════════════ */
#cardIndexOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(6, 7, 16);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  overflow: hidden;
}
#cardIndexOverlay.ci-open {
  opacity: 1;
  pointer-events: auto;
}
/* Gradient layer — fixed so it doesn't scroll with content */
#cardIndexOverlay::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--auraColor) 25%, black) 0%,
    color-mix(in srgb, var(--auraColor) 14%, black) 35%,
    color-mix(in srgb, var(--auraColor) 8%, black) 65%,
    color-mix(in srgb, var(--auraColor) 4%, transparent) 100%
  );
}
/* All children sit above the gradient */
#cardIndexOverlay > * {
  position: relative;
  z-index: 1;
}

/* Views fill the overlay, only one shown at a time */
.ci-list-view, .ci-detail-view {
  display: none;
  flex-direction: column;
  overflow: hidden;
  /* Fill available space between search row and bottom bar */
  flex: 1;
  min-height: 0;
}
.ci-list-view.ci-active {
  display: flex;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ci-detail-view.ci-active {
  display: flex;
  overflow: hidden; /* sticky + scroll children */
}

/* ── Search + deck toggle ─────────────────────────── */
.ci-search-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 8px;
  flex-shrink: 0;
}
.ci-search {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--auraColor);
  border-radius: 10px;
  padding: 9px 14px;
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  outline: none;
  transition: box-shadow 150ms ease;
  box-shadow: 0 0 8px color-mix(in srgb, var(--auraColor) 20%, transparent);
}
.ci-search:focus {
  box-shadow: 0 0 14px color-mix(in srgb, var(--auraColor) 45%, transparent);
}
.ci-search::placeholder { color: rgba(255,255,255,0.3); }

.ci-deck-toggle {
  display: flex;
  gap: 6px;
}
.ci-deck-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 150ms ease;
}
.ci-deck-btn.active {
  background: rgba(100,80,200,0.25);
  border-color: var(--auraColor);
  color: var(--auraColor);
  box-shadow: 0 0 8px var(--auraColor);
}

/* ── List ─────────────────────────────────────────── */
.ci-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 24px;
  -webkit-overflow-scrolling: touch;
}
.ci-section-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auraColor);
  padding: 16px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.ci-row {
  display: flex;
  content-visibility: auto;
  contain-intrinsic-size: auto 78px;
  contain: layout paint style;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 120ms ease;
  border-radius: 8px;
  padding: 8px;
  margin: 0 -8px;
}

.ci-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 82%, white);
  outline-offset: -2px;
}

.ci-thumb-wrap {
  width: auto;
  min-width: 28px;
  max-width: 40px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ci-thumb {
  width: auto;
  height: 100%;
  max-width: 40px;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.ci-thumb-glyph {
  font-size: 24px;
  color: var(--auraColor);
  line-height: 1;
}
.ci-row-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ci-row-name {
  font-size: 14px;
  color: rgba(255,255,255,0.88);
}
.ci-empty {
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
}

/* ── Detail view ──────────────────────────────────── */
/* Sticky top: deck select + image + card name */
.ci-detail-sticky {
  flex-shrink: 0;
  background: transparent;
  z-index: 2;
}
/* Scrollable bottom: meta, meanings, lore */

.ci-detail-deck {
  padding: 10px 16px 0;
  flex-shrink: 0;
}
.ci-card-img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 24px 20px;
  flex-shrink: 0;
  height: calc(min(340px, 85vw) + 44px); /* fixed height — all decks same vertical space */
}
.ci-card-img {
  width: auto;
  height: min(340px, 85vw);
  max-width: 90%;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  box-shadow: 0 0 32px var(--auraColor), 0 8px 32px rgba(0,0,0,0.6);
  display: block;
  background: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: zoom-in;
}
/* Per-deck aspect ratios kept for browsers that need the hint before image loads */
.ci-card-img.ci-liminal-img    { aspect-ratio: 640 / 1040; object-fit: fill; }
.ci-card-img.ci-riderwaite-img { aspect-ratio: 258 / 420; }
/* Rune images — tall narrow domino proportion, less rounded */
.ci-card-img.ci-rune-img {
  aspect-ratio: 9 / 16;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
}
/* Playing cards — more rounded corners */
.ci-card-img.ci-playing-img {
  aspect-ratio: 344 / 560;
  object-fit: contain;
  object-position: center;
  border-radius: 20px;
}
.ci-card-img-placeholder {
  width: min(220px, 55vw);
  height: min(330px, 82vw);
  aspect-ratio: unset;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: var(--auraColor);
  text-shadow: 0 0 24px var(--auraColor);
}

/* Info block — free layout, sections separated by spacing */
.ci-card-info {
  padding: 4px 20px 32px;
}
.ci-content-panel {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  backdrop-filter: none;
}
.ci-detail-name {
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.97);
  text-align: center;
  margin-bottom: 2px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
.ci-meta-pill {
  background: rgba(100,80,200,0.18);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 6px 10px;
  font-size: 15px; /* glyph/emoji size */
  color: rgba(255,255,255,0.75);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 36px;
  justify-content: center;
}
/* Pill text hidden — icon only */
.ci-pill-text { display: none; }
.ci-numerology {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-bottom: 16px;
  font-style: italic;
}
.ci-meaning-block {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ci-meaning-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auraColor);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ci-reversed-block .ci-meaning-label {
  color: rgba(200,100,100,0.85);
}
.ci-meaning-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(220,210,255,0.82);
}
/* Keyword chips row */
.ci-keyword-chips {
  font-size: 13px;
  color: rgba(220,210,255,0.75);
  line-height: 1.7;
  margin-bottom: 0;
}
.ci-keyword-chip {
  font-size: 13px;
  color: rgba(220,210,255,0.75);
  letter-spacing: 0.02em;
  /* No badge — plain text, comma separation handled in JS */
}
/* Lore labels same treatment */
.ci-lore-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Desktop: two-column detail ───────────────────── */
@media (min-width: 640px) {
  .ci-detail-view {
    overflow-y: auto;
  }
  .ci-card-img-wrap {
    float: left;
    width: 260px;
    height: auto; /* sidebar: let height flow naturally */
    padding: 20px 20px 20px 24px;
    position: sticky;
    top: 0;
  }
  .ci-card-img {
    width: 100%;
    height: auto; /* width-driven on desktop sidebar */
  }
  .ci-card-info {
    margin-left: 260px;
    padding: 20px 24px 40px 16px;
  }
  .ci-detail-deck {
    margin-left: 260px;
  }
  .ci-detail-name { text-align: left; }
  .ci-detail-meta-row { justify-content: flex-start; }
  .ci-numerology { text-align: left; }
}

/* ── Desc overlay: title row ─────────────────────────── */
.descTitleRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

/* ── Card index: no pinch-zoom ───────────────────────── */
#cardIndexOverlay {
  touch-action: pan-y;
}

/* ── Swipe hint ───────────────────────────────────────── */
.ci-swipe-hint {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.05em;
  padding: 6px 16px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* ── Nav dots ─────────────────────────────────────────── */
.ci-nav-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 4px;
  flex-shrink: 0;
}
.ci-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.ci-dot-active {
  background: var(--auraColor);
  transform: scale(1.4);
  box-shadow: 0 0 6px var(--auraColor);
}
.ci-dot-count {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}

/* ── Reversed badge ───────────────────────────────────── */
.ci-rev-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(200,100,100,0.9);
  border: 1px solid rgba(200,100,100,0.4);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
}

/* ── Active meaning highlight ─────────────────────────── */
.ci-meaning-active {
  background: rgba(100,80,200,0.1);
  border-radius: 8px;
  padding: 10px 10px 10px 12px;
  border-left: 2px solid var(--auraColor);
  margin-bottom: 20px;
}
.ci-reversed-block.ci-meaning-active {
  border-left-color: rgba(200,100,100,0.7);
}

/* ── Lightbox ─────────────────────────────────────────── */
.ci-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  touch-action: none;
}
.ci-lightbox.ci-lb-open {
  opacity: 1;
  pointer-events: auto;
}
.ci-lightbox-img {
  max-width: 88vw;
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
  object-fit: contain;
}
.ci-lightbox-meta {
  position: absolute;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  transform: translateX(-50%);
  width: min(88vw, 560px);
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: rgba(8, 9, 18, 0.56);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--auraColor) 52%, rgba(255,255,255,0.12));
  box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 0 16px color-mix(in srgb, var(--auraColor) 14%, transparent);
  text-align: center;
  pointer-events: none;
}
.ci-lightbox-meta[hidden] { display: none !important; }
.ci-lightbox-meta-name {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px;
}
.ci-lightbox-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.ci-lightbox-meta-keywords {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.84);
}

/* ── Image wrap cursor hint ───────────────────────────── */
.ci-card-img-wrap { cursor: zoom-in; }

/* ── Action icon buttons (Journal / Index / Clear) ───── */
.actionBtnRow {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}
.actionIconBtn {
  flex: 1;
  height: 44px;
  width: 44px;
  padding: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}


/* ══════════════════════════════════════════════════════
   JOURNAL
   ══════════════════════════════════════════════════════ */
#journalOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(6, 7, 16);
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  overflow: hidden;
  touch-action: pan-y;
}
/* Cards strip pinned above keyboard via absolute positioning */
#journalOverlay.jo-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Journal close/nav buttons now in bottom bar ──── */
.jo-back, .jo-close {
  background: none;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.6);
  font-size: 20px;
  padding: 4px 8px;
  cursor: pointer;
  min-width: 36px;
  transition: color 150ms ease;
}

/* ── Views ────────────────────────────────────────── */
/* ── Calendar nav (mini popup only) ──────────────── */
.jo-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px;
  flex-shrink: 0;
}
.jo-cal-month {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.04em;
}
.jo-cal-arrow {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: none;
  color: rgba(255,255,255,0.6);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 150ms ease;
}

/* ── Calendar grid ────────────────────────────────── */
.jo-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 12px;
  flex: 1;
  align-content: start;
  overflow-y: auto;
}
.jo-cal-day-name {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  padding: 4px 0 6px;
  letter-spacing: 0.06em;
}
.jo-cal-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 120ms ease;
  border: 1px solid transparent;
}
.jo-cal-empty, .jo-future { cursor: default; opacity: 0.25; }
.jo-cal-num {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1;
}
.jo-cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--auraColor);
  margin-top: 2px;
}
.jo-today {
  border-color: var(--auraColor) !important;
  box-shadow: 0 0 8px var(--auraColor);
}

/* ── Calendar shades (0=empty → 6=1000 words) ─────── */
.jo-shade-0 { background: rgba(255,255,255,0.04); }
.jo-shade-1 { background: rgba(var(--auraRGB, 120,90,220), 0.20); }
.jo-shade-2 { background: rgba(var(--auraRGB, 120,90,220), 0.35); }
.jo-shade-3 { background: rgba(var(--auraRGB, 120,90,220), 0.52); }
.jo-shade-4 { background: rgba(var(--auraRGB, 120,90,220), 0.68); }
.jo-shade-5 { background: rgba(var(--auraRGB, 120,90,220), 0.85); }
.jo-shade-6 { background: var(--auraColor); box-shadow: 0 0 8px var(--auraColor); }

/* ── Legend ───────────────────────────────────────── */
.jo-cal-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 16px 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.jo-shade {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}

/* ── Day view ─────────────────────────────────────── */
/* The header/card stack is deliberately OUTSIDE the scrolling region.
   Earlier versions relied on position:sticky inside a mobile flex scroller,
   which could release the cards during certain textarea/viewport scroll
   paths. Only the paper scrolls now, so the cards cannot scroll away. */
.jo-day-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  overscroll-behavior: contain;
  position: relative;
  min-height: 0;
}
.jo-sticky-stack {
  position: relative;
  z-index: 6;
  flex-shrink: 0;
  background: #08090f;
  isolation: isolate;
}
.jo-day-header {
  padding: 14px 20px 6px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: #08090f;
}
.jo-day-date {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.jo-word-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.jo-muted { margin-left: 6px; color: var(--auraColor); }
.jo-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  margin: 0 20px 12px;
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}
.jo-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--auraColor);
  box-shadow: 0 0 8px var(--auraColor);
  border-radius: 99px;
  transition: width 200ms ease;
}

/* ── Cards strip — cards scroll inside a static aura frame ─── */
.jo-cards-frame {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background: rgba(6,7,16,0.97);
  box-shadow: 0 0 14px color-mix(in srgb, var(--auraColor) 14%, transparent);
}

.jo-cards-frame::before,
.jo-cards-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 8;
  pointer-events: none;
  background: var(--auraColor);
  box-shadow: 0 0 6px color-mix(in srgb, var(--auraColor) 48%, transparent);
}
.jo-cards-frame::before { top: 0; }
.jo-cards-frame::after  { bottom: 0; }

.jo-cards-strip {
  display: flex;
  width: 100%;
  gap: 0;
  padding: 0;
  overflow-x: clip;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  position: relative;
}

.jo-cards-strip.scrollable {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.jo-cards-strip.scrollable::-webkit-scrollbar { display: none; }
.jo-cards-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  padding: 8px 20px;
  font-style: italic;
}
.jo-card-thumb {
  flex: 0 0 20%;
  min-width: 0;
  height: 0;
  padding-bottom: 33.3%;
  position: relative;
  overflow: visible; /* allow glow to radiate outside card bounds */
  border-right: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.jo-card-thumb:last-child { border-right: none; }

.jo-card-thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  -webkit-touch-callout: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  clip-path: inset(0); /* clips image to card bounds without clipping the thumb's glow */
  touch-action: none;
  draggable: false;
}

.jo-card-glyph {
  font-size: 22px;
  color: var(--auraColor);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ── Textarea ──────────────────────────────────────── */
.jo-paper-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.jo-paper {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 40px;
  background: rgba(6, 7, 16, 0.72);
  border: none;
  border-top: none;
  color: rgba(255,255,255,0.88);
  font-size: 15px;
  line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
  box-sizing: border-box;
  display: block;
}
.jo-paper::placeholder { color: rgba(255,255,255,0.2); }

/* ── Index detail: journal buttons ───────────────── */
.ci-journal-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px 4px;
}
.ci-journal-btn {
  flex: 1;
  padding: 9px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 150ms ease;
}
.ci-journal-go {
  border-color: var(--auraColor);
  color: var(--auraColor);
}



/* ── Canvas header ────────────────────────────────── */
.canvasHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  text-align: center;
  padding: 18px 16px 12px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(6, 7, 16, 0.72) 0%,
    rgba(6, 7, 16, 0.0) 100%
  );
}
.canvasHeader-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--auraColor);
  text-shadow: 0 0 20px var(--auraColor), 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 4px;
}
.canvasHeader-sub {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(200, 185, 255, 0.55);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Journal: tap-hold card confirm ───────────────── */
.jo-card-thumb {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.jo-card-thumb img {
  -webkit-touch-callout: none;
  pointer-events: none;
}
.jo-card-confirm {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(6, 7, 16, 0.92);
  border: 1px solid rgba(180,60,60,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 3;
  backdrop-filter: blur(4px);
}
.jo-card-confirm.visible {
  opacity: 1;
  pointer-events: auto;
}
.jo-card-confirm-name {
  font-size: 8px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jo-card-confirm-btn {
  width: 100%;
  padding: 3px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 5px;
  background: rgba(180,50,50,0.7);
  border: 1px solid rgba(220,80,80,0.5);
  box-shadow: none;
  color: rgba(255,200,200,0.95);
  cursor: pointer;
  transition: background 120ms ease;
}
.jo-card-confirm-btn:active { background: rgba(200,60,60,0.9); }
.jo-card-cancel-btn {
  width: 100%;
  padding: 2px 4px;
  font-size: 9px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
}

/* ── Sticky bottom nav bars (index + journal) ────── */
.ci-bottom-bar, .jo-bottom-bar {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 16px;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--auraColor) 18%, #08090f) 0%,
    color-mix(in srgb, var(--auraColor) 10%, #08090f) 100%
  );
  border-top: 1px solid var(--auraColor);
  box-shadow: 0 -4px 20px color-mix(in srgb, var(--auraColor) 15%, transparent);
  z-index: 5;
  flex-shrink: 0;
}
#cardIndexOverlay, #journalOverlay {
  padding-bottom: 0;
  bottom: 60px !important;
}
.ci-bottom-btn, .jo-bottom-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(10, 8, 26, 0.72);
  border: 1px solid var(--auraColor);
  box-shadow: 0 0 10px color-mix(in srgb, var(--auraColor) 28%, transparent),
              0 3px 12px rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.88);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
}
.ci-bottom-btn:active, .jo-bottom-btn:active {
  transform: scale(0.94);
  background: rgba(255,255,255,0.08);
}
/* Nav buttons on the right — back then close */
.ci-close-right, .jo-close-right,
.ci-nav-right { 
  margin-left: auto;
}
.ci-nav-right + .ci-nav-right {
  margin-left: 8px;
}

/* ── Journal: day header row + popup cal button ───── */
.jo-day-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.jo-cal-jump-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: none;
  color: rgba(255,255,255,0.45);
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 150ms ease;
  flex-shrink: 0;
}

/* ── Mini popup calendar ──────────────────────────── */
.jo-mini-cal {
  position: fixed;
  left: 50%;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 18px);
  width: min(340px, calc(100vw - 32px));
  box-sizing: border-box;
  background: rgba(10, 11, 22, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--auraColor) 72%, transparent);
  border-radius: 18px;
  padding: 10px 12px 12px;
  z-index: 70;
  box-shadow: 0 12px 34px rgba(0,0,0,0.58), 0 0 16px color-mix(in srgb, var(--auraColor) 42%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.985);
  transform-origin: bottom center;
  transition: opacity 160ms ease, transform 160ms ease;
}
.jo-mini-cal.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.jo-mini-cal-nav {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 5px;
}
.jo-mini-cal .jo-cal-arrow {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  justify-self: center;
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.10);
}
.jo-mini-cal-month {
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}
.jo-mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 18px repeat(6, 34px);
  gap: 3px;
}
.jo-mini-day-name {
  text-align: center;
  font-size: 8px;
  line-height: 18px;
  color: rgba(255,255,255,0.28);
  padding: 0;
  letter-spacing: 0.04em;
}
.jo-mini-cell {
  min-width: 0;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(255,255,255,0.67);
  cursor: pointer;
  transition: transform 100ms ease, background 120ms ease;
  border: 1px solid transparent;
}

.jo-mini-empty { height: 34px; }
.jo-mini-current { border-color: rgba(255,255,255,0.4) !important; }
.jo-mini-cell.jo-future { opacity: 0.2; cursor: default; }

/* ── Journal larger card thumbnails ───────────────── */
.jo-card-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 100px;
}
.jo-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* ── Settings panel (full-screen, same as index/journal) ── */
.atmo-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(6, 7, 16, 0.97);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  overflow: hidden;
  touch-action: pan-y;
}
.atmo-panel.atmo-open {
  opacity: 1;
  pointer-events: auto;
}
.atmo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.atmo-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auraColor);
  text-shadow: 0 0 12px var(--auraColor);
}
.atmo-close {
  background: none;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.6);
  font-size: 20px;
  padding: 4px 8px;
  cursor: pointer;
  transition: color 150ms ease;
}
.atmo-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
/* Section subheader within settings */
.atmo-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auraColor);
  padding: 8px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.atmo-privacy-link {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.atmo-privacy-link:hover { color: rgba(255,255,255,0.55); }

/* Inline randomize button sits in the sliderLabelRow next to hue value */
.inline-randomize-btn {
  margin-left: auto;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  border-radius: 4px;
  transition: opacity 150ms;
  -webkit-tap-highlight-color: transparent;
}

/* No bottom bar needed — settings close lives in the real bottom nav */
.atmo-panel { padding-bottom: 0; }

/* ── Aura off: white text instead of gray ────────── */
/* aura-off: borders/glows use dim blue; text elements stay white */
body.aura-off .descTitle,
body.aura-off .ci-detail-name,
body.aura-off .canvasHeader-title {
  color: rgba(255,255,255,0.88);
}

/* ── Button tooltips (tap-hold) ───────────────────── */
.btn-tooltip {
  position: fixed;
  background: rgba(11, 14, 26, 0.95);
  border: 1px solid var(--auraColor);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--auraColor);
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
  box-shadow: 0 0 10px var(--auraColor);
}
.btn-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Card lore (extended index descriptions) ─────── */
.ci-lore-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ci-lore-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 5px;
}
.ci-lore-text {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(220, 210, 255, 0.78);
}
.ci-lore-theme {
  font-style: italic;
  color: rgba(220, 210, 255, 0.92);
  font-size: 14px;
}
.ci-lore-affirmation {
  margin-top: 20px;
  margin-bottom: 8px;
  padding: 12px 16px;
  border-left: 2px solid var(--auraColor);
  background: rgba(100, 80, 200, 0.08);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  font-style: italic;
  color: var(--auraColor);
  text-shadow: 0 0 12px var(--auraColor);
  line-height: 1.5;
}

/* ── Symbol emoji chips — inline in meta row ───────── */
.ci-meta-pill-gap {
  display: inline-block;
  width: 10px;
  flex-shrink: 0;
}
.ci-symbol-emoji-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  flex-shrink: 0;
}

/* ── List view symbol emojis ───────────────────────── */
.ci-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.04em;
  overflow: hidden;
}
.ci-row-sym-gap {
  display: inline-block;
  width: 8px;
  flex-shrink: 0;
}
.ci-row-sym-emoji {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Symbolism section extra top border ────────────── */
.ci-symbolism-divider {
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  margin-top: 8px;
  padding-top: 24px;
}

/* ── Symbol list ───────────────────────────────────── */
.ci-symbol-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}
.ci-symbol-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ci-symbol-entry-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.ci-symbol-entry-name {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--auraColor);
  opacity: 0.85;
  text-transform: uppercase;
  font-size: 10px;
}
.ci-symbol-entry-text {
  font-size: 12.5px;
  line-height: 1.68;
  color: rgba(200, 190, 240, 0.70);
}

/* ── Desc overlay redesign ───────────────────────── */
/* Orientation dot — subtle, doesn't take space */
.desc-orient-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0.8;
}
.desc-orient-upright  { background: var(--auraColor); box-shadow: 0 0 5px var(--auraColor); }
.desc-orient-reversed { background: rgba(200,100,100,0.9); box-shadow: 0 0 5px rgba(200,100,100,0.7); }

/* Action row — add card + view spread */
.descActionRow {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.descActionBtn:active { background: rgba(255,255,255,0.12); }
.descActionBtn {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.descActionBtn--index {
  border-color: var(--auraColor);
  color: var(--auraColor);
}

/* Remove old badge and spread button styles */
.descSpreadBtn { display: none !important; } /* replaced by .descActionBtn */

/* ── Index bottom nav: deck cycle button (center) ── */
.ci-bottom-deck-btn {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 150ms ease;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Journal cards strip — no visible scrollbar ──── */
.jo-cards-strip { scrollbar-width: none; }
.jo-cards-strip::-webkit-scrollbar { display: none; }



/* ── Orientation badge ─────────────────────────────── */
.desc-orient-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 6px;
  vertical-align: middle;
  pointer-events: none;
  flex-shrink: 0;
  background: transparent;
}
.desc-orient-upright {
  color: var(--auraColor);
  border: 1px solid var(--auraColor);
  text-shadow: 0 0 6px var(--auraColor);
  background: transparent;
}
.desc-orient-reversed {
  color: rgba(220,100,100,0.95);
  border: 1px solid rgba(220,100,100,0.6);
  background: transparent;
}

/* ── Index deck dropdown ───────────────────────────── */
.ci-deck-select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(100,80,200,0.15);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  margin-bottom: 4px;
}
.ci-detail-deck-select {
  margin: 8px 16px 4px;
  width: calc(100% - 32px);
}

/* ── Journal thumbnail popup menu ─────────────────── */
/* Option B — buttons slide up from bottom half of card */
.jo-thumb-popup {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: rgba(6, 7, 16, 0.94);
  backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1),
              opacity 150ms ease;
  z-index: 3;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.jo-thumb-popup.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.jo-popup-btn {
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  background: none;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 100ms ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jo-popup-btn:nth-child(2) { border-right: none; }
.jo-popup-btn:nth-child(3) { border-bottom: none; }
.jo-popup-btn:nth-child(4) { border-right: none; border-bottom: none; }
.jo-popup-remove {
  color: rgba(220,100,100,0.85);
}
.jo-popup-reverse {
  color: var(--auraColor);
}

/* ── Reversed indicator — red glow line at bottom of thumb ─────────── */
/* red line handled by body.reversal-glow .jo-thumb-reversed::after */

/* ── Index/journal nav button spacing ─────────────── */
.ci-bottom-bar, .jo-bottom-bar {
  gap: 8px;
}

/* ── Remove old confirm popup styles ──────────────── */
.jo-card-confirm { display: none !important; }

/* ── Settings card aura select ────────────────────── */
#cardAuraModeSelect {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  outline: none;
}

/* ── Overlay inline action buttons ────────────────── */
.descActionRow {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.descActionBtn:active { background: rgba(255,255,255,0.14); }
.descActionBtn {
  flex: 1;
  padding: 8px 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 150ms ease;
  white-space: nowrap;
  text-align: center;
}


/* ── Overlay action buttons (inside overlay, below text) ─ */
.overlayBtns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.overlayActionBtn {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  backdrop-filter: none;
}
.overlayActionBtn:active {
  color: var(--auraColor);
}

/* Add to Journal button — flex:1 like its sibling, min-width for "Already Saved" */
#descAddCardBtn {
  flex: 1;
  min-width: 120px;
}

/* Success pulse — flash text aura color */
@keyframes auraPulse {
  0%   { color: rgba(255,255,255,0.75); }
  50%  { color: var(--auraColor); }
  100% { color: rgba(255,255,255,0.75); }
}
.aura-btn-pulse {
  animation: auraPulse 600ms ease-out;
}

/* Already saved — dimmed */
.aura-btn-muted {
  color: rgba(255,255,255,0.35) !important;
}

/* ── Battery hint toast ────────────────────────────── */
.battery-hint {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11,14,26,0.95);
  border: 1px solid rgba(200,150,50,0.5);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12px;
  color: rgba(255,200,100,0.9);
  z-index: 60;
  cursor: pointer;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  animation: fadeInUp 400ms ease;
}
@keyframes fadeInUp {
  from { opacity:0; transform: translateX(-50%) translateY(10px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}

/* ── Settings perf select ──────────────────────────── */
#perfModeSelect {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  outline: none;
  margin-top: 4px;
}

/* ── Settings text inputs ──────────────────────────── */
.text-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  outline: none;
  margin-top: 4px;
  font-family: inherit;
}
.text-input::placeholder { color: rgba(255,255,255,0.25); }
.text-input:focus { border-color: var(--auraColor); }

/* ── PRO badge ─────────────────────────────────────── */
.paid-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,200,80,0.9);
  border: 1px solid rgba(255,200,80,0.4);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Index detail: sticky top / scroll bottom ────── */
.ci-detail-sticky {
  flex-shrink: 0;
  background: transparent;
  z-index: 2;
}
.ci-detail-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-width: none;
}
.ci-detail-scroll::-webkit-scrollbar { display: none; }
/* ── Name bar: title + ornament + nav row ─────────── */
.ci-detail-name-bar {
  padding: 4px 20px 0;
  text-align: center;
}
.ci-detail-name-bar .ci-detail-name {
  margin: 0 0 4px;
}
/* ornament removed */
/* Nav row below ornament */
.ci-hint-row {
  display: flex;
  align-items: center;
  padding: 3px 0 6px;
  gap: 0;
}
.ci-prev-hint, .ci-next-hint {
  flex: 1;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-prev-hint { text-align: left; }
.ci-next-hint { text-align: right; }
.ci-hint-btn {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%;
  transition: color 150ms ease;
}

.ci-prev-hint.ci-hint-btn { text-align: left; }
.ci-next-hint.ci-hint-btn { text-align: right; }
.ci-hint-count {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.45); /* matches hint button color */
  letter-spacing: 0.06em;
  padding: 0 8px;
}

/* ── Index: name bar + hint row below ─────────────── */
.ci-detail-name-bar {
  padding: 2px 20px 0;
  text-align: center;
}
.ci-detail-name-bar .ci-detail-name {
  margin: 0;
  display: block;
}
/* Hint row: ← prev  N/Total  next → on one thin line */
.ci-hint-row {
  display: flex;
  align-items: center;
  padding: 4px 0 6px;
  gap: 0;
}
/* hint styles consolidated above */

/* ── Journal: paper-wrap keyboard shrink ────────── */
.jo-paper-wrap {
  transition: max-height 200ms ease;
}

/* ── Settings inline toggle row ────────────────────── */
.settings-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  flex-wrap: wrap;
}

/* ── Journal thumbnail radial menu ─────────────────── */
/* Journal thumbs: aura glow, reversed glows red */
.jo-card-thumb {
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  transition: box-shadow 200ms ease;
}
.jo-thumb-selected {
  box-shadow: 0 0 32px var(--auraColor), 0 4px 16px rgba(0,0,0,0.5);
  z-index: 5;
}
/* Reversed red line — ONLY in glow mode, never by default */
body.reversal-glow .jo-thumb-reversed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(200,70,70,0.9);
  box-shadow: 0 0 6px rgba(200,70,70,0.8);
  z-index: 2;
  pointer-events: none;
}
/* Selected + reversed: aura glow, red line stays */
.jo-thumb-selected.jo-thumb-reversed {
  box-shadow: 0 0 32px var(--auraColor), 0 4px 16px rgba(0,0,0,0.5);
}
.jo-radial-menu {
  /* positioned via JS — contains absolutely placed buttons */
}
.jo-radial-btn {
  height: 40px;
  width: 120px;
  padding: 0 12px 0 10px;
  border-radius: 12px;
  background: rgba(10, 8, 26, 0.72);
  border: 1px solid var(--auraColor);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 10px color-mix(in srgb, var(--auraColor) 28%, transparent),
              0 4px 14px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  transform: translateY(-8px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.34, 1.3, 0.64, 1),
              opacity 180ms ease,
              background 120ms ease;
}
.jo-radial-btn.jo-radial-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Remove — red border, red text */
.jo-radial-remove {
  border-color: rgba(220,80,80,0.6);
  box-shadow: 0 0 10px rgba(220,80,80,0.2), 0 4px 14px rgba(0,0,0,0.55);
}
.jo-radial-remove .lmb-icon,
.jo-radial-remove .lmb-text {
  color: rgba(220,90,90,0.9);
}
/* Reverse — red icon only, aura border */
.jo-radial-reverse .lmb-icon {
  color: rgba(220,90,90,0.9);
}

/* category toggle removed — now a cycle button */
/* Bottom bar: category + deck cycle side by side */
.ci-bottom-center {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  min-width: 0;
}
.ci-bottom-center .ci-bottom-deck-btn {
  flex: 1;
  min-width: 0;
}
/* ── Settings: deck equip rows ──────────────────── */
.deck-equip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.deck-equip-row:last-of-type { border-bottom: none; }
.deck-equip-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.deck-equip-label {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.deck-equip-cat {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auraColor);
  opacity: 0.7;
}
/* Each toggle column is a fixed width so legend aligns */
.deck-equip-row .toggle {
  flex-shrink: 0;
  width: 44px;
  display: flex;
  justify-content: center;
}
.deck-drag-handle {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 16px;
  cursor: grab;
  padding: 4px 0;
}

/* ── Settings: shortcuts section ───────────────── */
.atmo-section-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin: -4px 0 8px;
  line-height: 1.5;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shortcut-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  width: 40px;
}

/* ══════════════════════════════════════════════════
   LINEAR MENU (main + journal)
   ══════════════════════════════════════════════════ */

/* Backdrop */
#radialBackdrop {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 250ms ease;
}
#radialBackdrop.open {
  background: rgba(0,0,0,0.35);
  pointer-events: auto;
}

/* ── Main menu linear buttons ───────────────── */
.linear-menu-btn {
  position: fixed;
  height: 44px;
  min-width: 0;
  width: 148px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(10, 8, 26, 0.72);
  border: 1px solid var(--auraColor);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 12px color-mix(in srgb, var(--auraColor) 30%, transparent),
              0 4px 16px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  z-index: 41;
  transform: translateY(12px) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: transform 240ms cubic-bezier(0.34, 1.3, 0.64, 1),
              opacity 180ms ease,
              background 120ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.linear-menu-btn.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.lmb-icon {
  font-size: 17px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.75;
}
.lmb-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}

/* Hamburger → X when open */
.menuBtn.radial-open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menuBtn.radial-open .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menuBtn.radial-open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Collapsible settings sections ──────────────── */
.atmo-section { border-bottom: 1px solid rgba(255,255,255,0.06); }
.atmo-section:last-child { border-bottom: none; }
.atmo-subsection-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}

.atmo-collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 14px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--auraColor);
  cursor: pointer;
  text-align: left;
}


.atmo-chevron {
  font-size: 12px;
  transition: transform 220ms ease;
  color: rgba(255,255,255,0.4);
}
.atmo-collapse-btn.open .atmo-chevron {
  transform: rotate(0deg);
}

.atmo-section-body {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 300ms ease, opacity 200ms ease;
  opacity: 1;
  padding-bottom: 8px;
}
.atmo-section-body.collapsed {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* ── Collapsible subsections ─────────────────────── */
.atmo-subsection {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 4px;
}
.atmo-subsection:last-child { border-bottom: none; }
.atmo-sub-collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 10px 0 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  transition: color 150ms;
  -webkit-tap-highlight-color: transparent;
}

.atmo-sub-collapse-btn.open   { color: rgba(255,255,255,0.45); }
.atmo-sub-chevron {
  font-size: 10px;
  transition: transform 250ms ease;
  display: inline-block;
  transform: rotate(-90deg);
}
.atmo-sub-collapse-btn.open .atmo-sub-chevron {
  transform: rotate(0deg);
}
.atmo-subsection-body {
  overflow: hidden;
  max-height: 1200px;
  transition: max-height 280ms ease, opacity 180ms ease;
  opacity: 1;
  padding-bottom: 6px;
}
.atmo-subsection-body.collapsed {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* ── Deck row drag handle ────────────────────────── */
.deck-equip-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.deck-row-dragging {
  opacity: 0.6;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
}

/* ── Journal thumb drag ──────────────────────────── */
.jo-thumb-dragging {
  opacity: 0.45;
  transition: opacity 150ms ease;
}
/* Ghost overlay follows finger */
.jo-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  border-radius: 6px;
  box-shadow: 0 0 24px var(--auraColor), 0 8px 24px rgba(0,0,0,0.7);
  transform: scale(1.1);
  transition: none;
  overflow: hidden;
}
/* Deck row drag ghost — matches journal strip style */
.deck-row-dragging {
  opacity: 0.35;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  transition: opacity 150ms ease;
}
.deck-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  left: 0;
  right: 0;
  background: rgba(14, 12, 32, 0.97);
  border: 1px solid color-mix(in srgb, var(--auraColor) 50%, transparent);
  border-radius: 10px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--auraColor) 30%, transparent),
              0 8px 24px rgba(0,0,0,0.7);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: none;
}
/* Other thumbs shift smoothly */
.jo-card-thumb {
  transition: transform 180ms ease;
}

/* ── Restored active state feedback ─────────────────── */

.ci-row:active { background: rgba(255,255,255,0.06); }
.actionIconBtn:active { background: rgba(255,255,255,0.18); }
.jo-card-thumb:active { opacity: 0.85; }
.inline-randomize-btn:active { opacity: 0.6; }
.ci-bottom-deck-btn:active { background: rgba(255,255,255,0.14); }
.jo-popup-btn:active { background: rgba(255,255,255,0.12); }
.bnav-btn:active { color: var(--auraColor); }
.ci-hint-btn:active { color: var(--auraColor); background: rgba(255,255,255,0.05); }
.atmo-collapse-btn:active { opacity: 0.7; }
.atmo-sub-collapse-btn:active { opacity: 0.7; }




/* ═══════════════════════════════════════════════════════
   PERSISTENT BOTTOM NAV
   ═══════════════════════════════════════════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--auraColor) 22%, #08090f) 0%,
    color-mix(in srgb, var(--auraColor) 12%, #08090f) 50%,
    color-mix(in srgb, var(--auraColor) 6%, #08090f) 100%
  );
  border-top: 1px solid var(--auraColor);
  border-bottom: 1px solid var(--auraColor);
  box-shadow: 0 -4px 24px color-mix(in srgb, var(--auraColor) 18%, transparent),
              0  4px 16px color-mix(in srgb, var(--auraColor) 12%, transparent);
}

/* Show only the active state */
.bnav-state { display: none; width: 100%; }
.bottom-nav[data-state="canvas"]   .bnav-canvas   { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.bottom-nav[data-state="journal"]  .bnav-journal   { display: flex; align-items: center; gap: 4px; }
.bottom-nav[data-state="index"]    .bnav-index     { display: flex; align-items: center; gap: 4px; }
.bottom-nav[data-state="settings"] .bnav-settings  { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* Journal typing: Android lifts fixed controls into the visual viewport when
   the IME opens. Hide this nav while the software keyboard is present so the
   close button stays out of the typing path. */
.bottom-nav[data-state="journal"].jo-keyboard-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Shared button style — fully transparent, text/icon only */
.bnav-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  color: rgba(255,255,255,0.70);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 120ms ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bnav-btn:active {
  background: transparent;
  color: var(--auraColor);
}

/* Deck button — text only, no background */
.bnav-btn.bnav-deck-btn {
  width: auto;
  flex: 1;
  padding: 0 14px;
  font-size: 13px;
  gap: 5px;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: rgba(255,255,255,0.92);
}

.bnav-deck-btn {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  cursor: pointer;
  transition: color 120ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bnav-deck-btn:active {
  color: var(--auraColor);
}


/* Center group (index: cat + deck cycle) */
.bnav-center {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

/* Spacer pushes right group to far right */
.bnav-spacer { flex: 1; }

/* Index nav cat + deck buttons — fill remaining space evenly */
.bnav-ci-cat, .bnav-ci-deck {
  flex: 1;
  justify-content: center;
}

/* Push right-aligned buttons to the end */
.bnav-right { margin-left: auto; }
.bnav-right + .bnav-right { margin-left: 8px; }

/* Settings panel full-screen */
.atmo-fullscreen {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 60px !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

/* Extra content block in settings for canvas section */
.atmo-body-extra {
  padding: 0 16px 16px;
}

/* ── Deck row two-toggle layout ───────────────────────── */
.deck-equip-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.deck-equip-row .toggle + .toggle {
  margin-left: 4px;
}
/* Standby deck rows — equip toggle only, no drag handle */
.deck-equip-row--standby {
  padding: 10px 4px;
  gap: 12px;
}
.deck-equip-row--standby .deck-equip-info {
  flex: 1;
}
.deck-equip-row--standby .toggle {
  flex-shrink: 0;
  width: 44px;
  display: flex;
  justify-content: center;
}
/* Active rows get a subtle left accent */
.deck-equip-row--active {
  border-left: 2px solid color-mix(in srgb, var(--auraColor) 35%, transparent);
  padding-left: 8px;
}
/* Standby sections collapse when empty */
.deck-sub--standby:not(:has(.deck-equip-row)) {
  display: none;
}

.deck-sub-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 6px 4px 4px;
}

.deck-category-separator {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--auraColor);
  opacity: 0.6;
  padding: 10px 4px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--auraColor) 20%, transparent);
  margin-bottom: 4px;
}

.deck-toggle-legend {
  display: flex;
  align-items: center;
  padding: 2px 4px 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  gap: 12px;
}
/* Spacer mirrors deck-equip-info flex:1 */
.deck-toggle-legend::before {
  content: "";
  flex: 1;
  min-width: 0;
}
/* Handle spacer at end mirrors drag handle width */
.deck-toggle-legend::after {
  content: "";
  width: 24px;
  flex-shrink: 0;
}
.deck-toggle-legend span {
  width: 44px;
  text-align: center;
  flex-shrink: 0;
}
/* Ensure handle stays last in flex row */
.deck-drag-handle { order: 10; }

/* ── Aura-off text overrides ─────────────────────────────
   When aura is disabled, keep primary reading text white
   rather than falling through to the dim blue placeholder.
   Decorative accents (badges, active states, borders) keep
   their auraColor — they still look intentional in blue.
──────────────────────────────────────────────────────── */
.aura-off .zoomOverlay,
.aura-off .zoomLabel,
.aura-off .descTitle,
.aura-off .ci-section-header,
.aura-off .ci-meaning-label,
.aura-off .ci-detail-name,
.aura-off .ci-symbol-entry-name,
.aura-off .jo-card-glyph,
.aura-off .jo-entry-deck-label,
.aura-off .jo-entry-theme,
.aura-off .jo-section-header,
.aura-off .jo-section-label,
.aura-off .canvasHeader-title {
  color: rgba(255,255,255,0.88);
  text-shadow: none;
}

/* ═══════════════════════════════════════════════════════
   RELEASE CANDIDATE — safe areas, status, backup controls
   ═══════════════════════════════════════════════════════ */
html, body {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  overscroll-behavior: none;
}
body { height: 100dvh; }
#space, #animus, #tarotCanvas { height: 100dvh; }

.canvasHeader {
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
}

.bottom-nav {
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.descOverlay {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

#cardIndexOverlay,
#journalOverlay {
  top: env(safe-area-inset-top, 0px) !important;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

.atmo-fullscreen {
  top: env(safe-area-inset-top, 0px) !important;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

.arcana-toast {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top, 0px));
  transform: translate(-50%, -7px);
  width: min(84vw, 460px);
  z-index: 1000;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 58%, transparent);
  background: rgba(8, 9, 18, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.86);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 0 10px color-mix(in srgb, var(--auraColor) 12%, transparent);
  font: 500 12.5px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.arcana-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.arcana-toast[data-tone="warning"] { border-color: #d9a441; }
.arcana-toast[data-tone="danger"]  { border-color: #d65a67; }
.arcana-toast[data-tone="success"] { border-color: #69c991; }

.settings-note {
  margin: 4px 0 14px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  line-height: 1.6;
}
.settings-note strong { color: rgba(255,255,255,0.88); font-weight: 600; }
.settings-action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-action-btn {
  flex: 1 1 130px;
  min-height: 42px;
  background: rgba(255,255,255,0.05);
  border-color: color-mix(in srgb, var(--auraColor) 55%, transparent);
  color: rgba(255,255,255,0.86);
  box-shadow: none;
}
.settings-status {
  min-height: 18px;
  margin-top: 10px;
  color: rgba(255,255,255,0.42);
  font-size: 11px;
  line-height: 1.4;
}
.settings-status.is-error { color: #e38a94; }
#spreadsExportBtn:disabled { opacity: 0.32; pointer-events: none; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--auraColor);
  outline-offset: 3px;
}

/* On a very crowded canvas, drop expensive glass effects before interaction. */
html[data-performance-tier="2"] .bottom-nav,
html[data-performance-tier="2"] .descOverlay,
html[data-performance-tier="3"] .bottom-nav,
html[data-performance-tier="3"] .descOverlay {
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .arcana-toast { transition: none; }
}

/* ── Browser pass 2: on-demand and offline deck controls ─────────── */
.deck-offline-panel {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.deck-offline-note {
  margin: 2px 4px 10px;
}
.offline-deck-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.offline-deck-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 6px 8px 10px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}
.offline-deck-meta {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.offline-deck-name {
  font-size: 13px;
  color: rgba(255,255,255,0.86);
}
.offline-deck-detail {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(255,255,255,0.42);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.offline-deck-btn {
  flex-shrink: 0;
  min-width: 92px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 52%, rgba(255,255,255,0.12));
  border-radius: 9px;
  background: color-mix(in srgb, var(--auraColor) 12%, rgba(10,8,28,0.72));
  color: rgba(255,255,255,0.88);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.offline-deck-btn:disabled {
  cursor: default;
  opacity: 0.72;
}
.offline-deck-btn.saved {
  border-color: rgba(105,201,145,0.48);
  background: rgba(39,111,72,0.18);
  color: rgba(193,244,212,0.92);
}



.atmo-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.atmo-header-close { display: none; }

/* ═══════════════════════════════════════════════════════
   BROWSER PASS 3 — responsive desktop and tablet shell
   ═══════════════════════════════════════════════════════ */

/* The desktop Settings drawer gets a click-catching veil while preserving the
   canvas as visible context. It remains absent from the full-screen mobile UI. */
.atmo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  display: none;
  opacity: 0;
  pointer-events: none;
  background: rgba(1, 2, 9, 0.18);
  transition: opacity 180ms ease;
}

.ci-desktop-empty { display: none; }

/* Roomier tablet/browser navigation without turning the canvas into a desktop
   dashboard. The same controls become a compact floating instrument bar. */
@media (min-width: 720px) {
  .bottom-nav {
    left: 50%;
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: min(680px, calc(100vw - 32px));
    height: 54px;
    padding: 0 10px;
    padding-bottom: 0;
    transform: translateX(-50%);
    border: 1px solid color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.16));
    border-radius: 17px;
    background: color-mix(in srgb, var(--auraColor) 10%, rgba(5, 6, 16, 0.82));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 14px 42px rgba(0,0,0,0.52),
                0 0 22px color-mix(in srgb, var(--auraColor) 16%, transparent);
  }

  .bnav-btn { height: 42px; }
  .bnav-btn.bnav-deck-btn { max-width: 280px; }

  .descOverlay {
    left: 16px;
    right: 16px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: 760px;
    margin-inline: auto;
    border: 1px solid color-mix(in srgb, var(--auraColor) 70%, rgba(255,255,255,0.12));
    border-radius: 16px;
  }

  #journalOverlay {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .canvasHeader {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* Desktop / large-tablet workspace. */
@media (min-width: 900px) {
  /* Right-side Settings drawer */
  .atmo-backdrop {
    display: block;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .atmo-backdrop.atmo-backdrop-open {
    opacity: 1;
    pointer-events: auto;
  }

  .atmo-fullscreen {
    left: auto !important;
    right: 18px !important;
    top: 18px !important;
    bottom: 18px !important;
    width: min(500px, calc(100vw - 36px)) !important;
    max-width: 500px !important;
    border: 1px solid color-mix(in srgb, var(--auraColor) 48%, rgba(255,255,255,0.12)) !important;
    border-radius: 18px !important;
    background: rgba(6, 7, 16, 0.90);
    box-shadow: -18px 22px 60px rgba(0,0,0,0.52),
                0 0 24px color-mix(in srgb, var(--auraColor) 12%, transparent);
    transform: translateX(26px);
    transition: opacity 190ms ease, transform 220ms ease;
  }
  .atmo-fullscreen.atmo-open { transform: translateX(0); }
  .atmo-header { padding: 17px 20px 13px; }
  .atmo-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .atmo-header-close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    box-shadow: none;
    color: rgba(255,255,255,0.68);
    font-size: 15px;
  }
  .atmo-header-close:hover {
    color: rgba(255,255,255,0.96);
    background: rgba(255,255,255,0.08);
  }
  .atmo-body { padding: 12px 20px 24px; }
  /* Card Index becomes a browser workspace in full mode. Canvas-card launches
     now enter this same mode with their source card already selected. */
  #cardIndexOverlay {
    left: 18px !important;
    right: 18px !important;
    top: 18px !important;
    bottom: 82px !important;
    border: 1px solid color-mix(in srgb, var(--auraColor) 36%, rgba(255,255,255,0.10));
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0,0,0,0.58),
                0 0 24px color-mix(in srgb, var(--auraColor) 10%, transparent);
  }

  #cardIndexOverlay[data-mode="full"] {
    display: grid;
    grid-template-columns: minmax(300px, 33%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  #cardIndexOverlay[data-mode="full"] .ci-list-view {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid color-mix(in srgb, var(--auraColor) 22%, rgba(255,255,255,0.08));
    background: rgba(3, 4, 12, 0.28);
  }

  #cardIndexOverlay[data-mode="full"] .ci-detail-view {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
  }

  #cardIndexOverlay[data-mode="full"] .ci-detail-view:not(.ci-active) {
    align-items: stretch;
    justify-content: stretch;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view:not(.ci-active) .ci-detail-sticky,
  #cardIndexOverlay[data-mode="full"] .ci-detail-view:not(.ci-active) .ci-detail-scroll {
    display: none;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view:not(.ci-active) .ci-desktop-empty {
    display: flex;
  }

  .ci-desktop-empty {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px;
    color: rgba(255,255,255,0.42);
    text-align: center;
  }
  .ci-desktop-empty-glyph {
    color: var(--auraColor);
    font-size: 54px;
    line-height: 1;
    text-shadow: 0 0 24px var(--auraColor);
    opacity: 0.78;
  }
  .ci-desktop-empty-title {
    margin-top: 8px;
    color: rgba(255,255,255,0.82);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .ci-desktop-empty-copy {
    max-width: 430px;
    font-size: 13px;
    line-height: 1.65;
  }

  #cardIndexOverlay[data-mode="full"] .ci-detail-view.ci-active {
    display: grid !important;
    grid-template-columns: minmax(270px, 38%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view.ci-active .ci-desktop-empty {
    display: none;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-sticky {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,0.07);
    scrollbar-width: thin;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-scroll {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
  }

  #cardIndexOverlay[data-mode="full"] .ci-search-row {
    padding: 18px 18px 10px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-list {
    padding: 0 18px 100px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-row {
    padding: 9px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-row.ci-selected {
    background: color-mix(in srgb, var(--auraColor) 13%, rgba(255,255,255,0.035));
    box-shadow: inset 2px 0 0 var(--auraColor);
  }
  #cardIndexOverlay[data-mode="full"] .ci-row.ci-selected .ci-row-name {
    color: rgba(255,255,255,0.98);
  }

  /* Undo the earlier tablet float layout inside the new desktop detail grid. */
  #cardIndexOverlay[data-mode="full"] .ci-card-img-wrap {
    float: none;
    width: 100%;
    height: auto;
    padding: 28px 24px 20px;
    position: static;
  }
  #cardIndexOverlay[data-mode="full"] .ci-card-img {
    width: auto;
    height: auto;
    max-width: min(100%, 360px);
    max-height: 58vh;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-name-bar {
    padding: 2px 18px 96px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-name {
    text-align: center;
    font-size: clamp(17px, 1.55vw, 22px);
  }
  #cardIndexOverlay[data-mode="full"] .ci-card-info {
    margin-left: 0;
    padding: 28px 34px 110px;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-meta-row {
    justify-content: flex-start;
  }
  #cardIndexOverlay[data-mode="full"] .ci-numerology {
    text-align: left;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-deck {
    margin-left: 0;
  }

  /* Back is a mobile list/detail navigation concept; the list remains visible
     on desktop, while Escape can still clear the selected detail. */
  #cardIndexOverlay[data-mode="full"].ci-open ~ .bottom-nav #navCiBack,
  body:has(#cardIndexOverlay[data-mode="full"].ci-open) #navCiBack {
    display: none !important;
  }
}

@media (min-width: 1250px) {
  #cardIndexOverlay[data-mode="full"] {
    grid-template-columns: minmax(330px, 30%) minmax(0, 1fr);
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view.ci-active {
    grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
  }
  #cardIndexOverlay[data-mode="full"] .ci-card-info {
    padding-left: 42px;
    padding-right: 46px;
  }
}

/* ═══════════════════════════════════════════════════════
   BROWSER PASS 4 — installability and web presentation
   ═══════════════════════════════════════════════════════ */
.webapp-intro {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 3px 0 16px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 24%, rgba(255,255,255,0.08));
  border-radius: 13px;
  background: color-mix(in srgb, var(--auraColor) 7%, rgba(255,255,255,0.025));
}
.webapp-intro-icon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  filter: drop-shadow(0 7px 16px rgba(0,0,0,0.42));
}
.webapp-intro-title {
  margin: 3px 0 3px;
  color: rgba(255,255,255,0.94);
  font: 650 14px/1.25 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.webapp-intro .settings-note { margin: 0; }

.webapp-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-bottom: 13px;
}
.webapp-status-card {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
}
.webapp-status-label {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.38);
  font: 600 9px/1.1 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.webapp-status-value {
  display: block;
  overflow: hidden;
  color: rgba(255,255,255,0.9);
  font: 650 12px/1.3 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webapp-status-value[data-state="online"],
.webapp-status-value[data-state="ready"] { color: rgba(188,240,207,0.92); }
.webapp-status-value[data-state="offline"] { color: rgba(249,205,121,0.92); }
.webapp-status-value[data-state="pending"] { color: rgba(255,255,255,0.62); }
.webapp-status-detail {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,0.43);
  font: 400 10px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.webapp-action-row { margin-top: 4px; }
.webapp-primary-btn {
  border-color: color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--auraColor) 18%, rgba(8,9,20,0.78));
  color: rgba(255,255,255,0.96);
}
.webapp-primary-btn.is-installed {
  border-color: rgba(105,201,145,0.38);
  background: rgba(39,111,72,0.14);
  color: rgba(193,244,212,0.86);
}

.install-nudge {
  position: fixed;
  z-index: 850;
  left: 12px;
  right: 12px;
  top: calc(82px + env(safe-area-inset-top, 0px));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px 12px;
  width: auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 62%, rgba(255,255,255,0.14));
  border-radius: 15px;
  background: color-mix(in srgb, var(--auraColor) 9%, rgba(5,6,16,0.88));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55),
              0 0 22px color-mix(in srgb, var(--auraColor) 14%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.985);
  transition: opacity 180ms ease, transform 220ms ease;
}
.install-nudge.install-nudge-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.install-nudge > img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,0.48));
}
.install-nudge-copy { min-width: 0; }
.install-nudge-copy strong {
  display: block;
  margin: 1px 0 3px;
  color: rgba(255,255,255,0.95);
  font: 650 13px/1.25 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.install-nudge-copy span {
  display: block;
  color: rgba(255,255,255,0.58);
  font: 400 11px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.install-nudge-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.install-nudge-actions button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  box-shadow: none;
  font-size: 11px;
  font-weight: 650;
}
.install-nudge-primary {
  border-color: color-mix(in srgb, var(--auraColor) 76%, rgba(255,255,255,0.16));
  background: color-mix(in srgb, var(--auraColor) 20%, rgba(10,9,28,0.82));
  color: rgba(255,255,255,0.96);
}
.install-nudge-dismiss {
  border-color: rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.58);
}

.install-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(1,2,9,0.68);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.install-help-overlay.install-help-open {
  opacity: 1;
  pointer-events: auto;
}
.install-help-dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  padding: 28px 24px 22px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 58%, rgba(255,255,255,0.14));
  border-radius: 20px;
  background: rgba(7,8,19,0.96);
  box-shadow: 0 28px 80px rgba(0,0,0,0.68),
              0 0 30px color-mix(in srgb, var(--auraColor) 13%, transparent);
  text-align: center;
  transform: translateY(12px) scale(0.985);
  transition: transform 220ms ease;
}
.install-help-open .install-help-dialog { transform: translateY(0) scale(1); }
.install-help-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  box-shadow: none;
  color: rgba(255,255,255,0.62);
}
.install-help-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
  border-radius: 18px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.52));
}
.install-help-kicker {
  margin-bottom: 7px;
  color: var(--auraColor);
  font: 650 10px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.install-help-dialog h2 {
  margin: 0 22px 10px;
  color: rgba(255,255,255,0.96);
  font: 650 21px/1.22 Georgia, "Times New Roman", serif;
}
.install-help-lead,
.install-help-note {
  margin: 0 auto 16px;
  color: rgba(255,255,255,0.58);
  font: 400 12px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.install-help-steps {
  display: grid;
  gap: 9px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: install-step;
  text-align: left;
}
.install-help-steps li {
  position: relative;
  min-height: 40px;
  padding: 10px 11px 10px 48px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.76);
  font: 500 12px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  counter-increment: install-step;
}
.install-help-steps li::before {
  content: counter(install-step);
  position: absolute;
  left: 11px;
  top: 50%;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--auraColor) 65%, rgba(255,255,255,0.14));
  border-radius: 50%;
  color: rgba(255,255,255,0.92);
  font: 650 11px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  transform: translateY(-50%);
}
.install-help-note { margin-bottom: 17px; font-size: 10.5px; }
.install-help-done {
  width: 100%;
  min-height: 43px;
  border-color: color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.14));
  border-radius: 11px;
  background: color-mix(in srgb, var(--auraColor) 18%, rgba(8,9,20,0.78));
  color: rgba(255,255,255,0.94);
  font-weight: 650;
}

@media (min-width: 480px) {
  .webapp-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  .install-nudge {
    left: auto;
    right: 18px;
    top: calc(84px + env(safe-area-inset-top, 0px));
    width: min(390px, calc(100vw - 36px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .install-nudge,
  .install-help-overlay,
  .install-help-dialog { transition: none; }
}

.bnav-btn:disabled {
  opacity: 0.22;
  pointer-events: none;
}

@media (max-width: 420px) {
  .bottom-nav[data-state="canvas"] { padding-left: 7px; padding-right: 7px; }
  .bottom-nav[data-state="canvas"] .bnav-btn:not(.bnav-deck-btn) { width: 38px; }
  .bottom-nav[data-state="canvas"] .bnav-btn.bnav-deck-btn { padding-left: 6px; padding-right: 6px; font-size: 12px; }
}

/* ── Rider-Waite Major editorial pilot ───────────────── */
.ci-watch-for {
  border-left-color: color-mix(in srgb, var(--auraColor) 44%, rgba(255,255,255,0.14));
}
.ci-image-reading {
  margin-top: 12px;
}
.ci-visible-symbols {
  margin-top: 12px;
  display: grid;
  gap: 7px;
}
.ci-visible-symbol {
  display: grid;
  grid-template-columns: minmax(92px, 0.34fr) 1fr;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--auraColor) 6%, rgba(255,255,255,0.025));
  border: 1px solid color-mix(in srgb, var(--auraColor) 18%, rgba(255,255,255,0.055));
}
.ci-visible-symbol-name {
  color: var(--auraColor);
  font: 650 11px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.025em;
}
.ci-visible-symbol-meaning {
  color: rgba(235,232,245,0.78);
  font: 400 11.5px/1.42 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
@media (max-width: 420px) {
  .ci-visible-symbol {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


/* ── Rune editorial overhaul ─────────────────────────── */
.ci-rune-assoc-label {
  margin: 13px 2px 2px;
  color: color-mix(in srgb, var(--auraColor) 78%, rgba(255,255,255,0.64));
  font: 650 10px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ── Playing-card cartomancy editorial ───────────────── */
.ci-playing-guidance {
  font-style: normal;
}
.ci-playing-guidance-label {
  margin-bottom: 4px;
  font: 700 9px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--auraColor) 78%, rgba(255,255,255,0.56));
  text-shadow: none;
}

/* Journal typing: once the nav is hidden for the software keyboard, remove
   the 64px space normally reserved for it so journal text can use the full
   visible typing area instead of ending above an empty black band. */
#journalOverlay.jo-keyboard-open {
  bottom: 0 !important;
}


/* ── Reading recovery prompt — explicit actions, no OK/Cancel ambiguity ── */
.session-recovery-prompt {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(3, 4, 10, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 150ms ease;
}
.session-recovery-prompt.visible { opacity: 1; }
.session-recovery-card {
  width: min(92vw, 390px);
  padding: 20px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 58%, rgba(255,255,255,0.14));
  background: rgba(10, 10, 22, 0.98);
  box-shadow: 0 18px 60px rgba(0,0,0,0.52),
              0 0 24px color-mix(in srgb, var(--auraColor) 15%, transparent);
}
.session-recovery-kicker {
  margin-bottom: 5px;
  color: var(--auraColor);
  font: 700 10px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.session-recovery-title {
  color: rgba(255,255,255,0.94);
  font: 650 20px/1.25 ui-sans-serif, system-ui, sans-serif;
}
.session-recovery-copy {
  margin-top: 10px;
  color: rgba(255,255,255,0.62);
  font: 400 13px/1.55 ui-sans-serif, system-ui, sans-serif;
}
.session-recovery-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.session-recovery-btn {
  min-height: 44px;
  flex: 1;
  border-radius: 12px;
  padding: 9px 12px;
  font: 650 12px/1.2 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.session-recovery-restore {
  border: 1px solid var(--auraColor);
  background: color-mix(in srgb, var(--auraColor) 18%, rgba(10,10,22,0.98));
  color: rgba(255,255,255,0.94);
}
.session-recovery-fresh {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.045);
  color: rgba(255,255,255,0.66);
}


/* ═══════════════════════════════════════════════════════
   JOURNAL HARD-PIN FIX — header/cards never join vertical scroll
   ═══════════════════════════════════════════════════════ */
#journalOverlay {
  --jo-pinned-stack-height: 0px;
  --jo-nav-space: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* The day shell is now only a logical owner.  The pinned stack and editor
   occupy fixed viewport regions so Android cannot promote the entire flex
   column into a scroll target while the textarea/caret is moving. */
#journalOverlay .jo-day-view {
  display: block;
  position: static;
  min-height: 0;
  overflow: hidden;
}

#journalOverlay .jo-sticky-stack {
  position: fixed !important;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 62;
  margin: 0;
  flex: none;
  transform: none !important;
  contain: layout paint;
  background: #08090f;
}

/* Vertical gestures are only meaningful in the paper.  The card rail keeps
   horizontal panning/reordering without being able to start a page pan. */
#journalOverlay .jo-sticky-stack { touch-action: pan-x; }
#journalOverlay .jo-day-header,
#journalOverlay .jo-progress-bar { touch-action: none; }
#journalOverlay .jo-cards-strip { touch-action: pan-x; }

#journalOverlay .jo-paper-wrap {
  position: fixed !important;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + var(--jo-pinned-stack-height));
  bottom: var(--jo-nav-space);
  width: 100%;
  height: auto !important;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  z-index: 51;
}

#journalOverlay .jo-paper {
  height: 100% !important;
  max-height: none !important;
  touch-action: pan-y;
}

/* While typing the bottom navigation is hidden, so the editor can extend to
   the bottom of the visible Journal region.  The pinned stack never moves. */
#journalOverlay.jo-keyboard-open .jo-paper-wrap {
  bottom: 0;
}

@media (min-width: 720px) {
  #journalOverlay {
    --jo-nav-space: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════
   JOURNAL KEYBOARD LAYOUT FIX — keyboard resizes editor, never pans cards
   ═══════════════════════════════════════════════════════
   Android's default soft-keyboard behavior can pan/resize the visual viewport.
   The viewport meta now requests interactive-widget=resizes-content, so the
   layout viewport itself shrinks above the IME. Keep the Journal rail in normal
   flex flow OUTSIDE the textarea scroller: the rail remains at the top while
   only the paper loses vertical room when the keyboard opens. */
#journalOverlay .jo-day-view {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

#journalOverlay .jo-sticky-stack {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  transform: none !important;
  contain: none !important;
  z-index: 62;
}

#journalOverlay .jo-paper-wrap,
#journalOverlay.jo-keyboard-open .jo-paper-wrap {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#journalOverlay .jo-paper {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* ═══════════════════════════════════════════════════════
   DESKTOP WORKSPACE PASS 1 — Canvas remains the foundation
   ═══════════════════════════════════════════════════════ */
.workspace-panel-header { display: none; }

@media (min-width: 1280px) {
  :root {
    --workspace-journal-width: min(500px, calc(100vw - 340px));
    --workspace-index-width: min(1280px, calc(100vw - 420px));
    --workspace-gutter: 18px;
  }

  .workspace-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    flex: 0 0 58px;
    padding: 10px 12px 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(5, 6, 14, 0.76);
    position: relative;
    z-index: 80;
  }

  .workspace-panel-title {
    color: var(--auraColor);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 14px var(--auraColor);
    white-space: nowrap;
  }

  .workspace-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
  }

  .workspace-panel-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: rgba(255,255,255,0.68);
    font: 600 16px/1 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
  }

  .workspace-panel-btn:hover,
  .workspace-panel-btn:focus-visible {
    color: rgba(255,255,255,0.96);
    background: rgba(255,255,255,0.065);
    border-color: rgba(255,255,255,0.10);
    outline: none;
  }

  .workspace-panel-btn.workspace-panel-text {
    width: auto;
    max-width: 150px;
    color: rgba(255,255,255,0.82);
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .workspace-panel-close {
    margin-left: 3px;
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.035);
  }

  /* Journal becomes a purpose-built writing drawer. */
  #journalOverlay {
    inset: var(--workspace-gutter) var(--workspace-gutter) var(--workspace-gutter) auto !important;
    width: var(--workspace-journal-width) !important;
    height: auto !important;
    border: 1px solid color-mix(in srgb, var(--auraColor) 42%, rgba(255,255,255,0.10));
    border-radius: 18px;
    background: rgba(6, 7, 16, 0.94);
    box-shadow: -18px 24px 64px rgba(0,0,0,0.56),
                0 0 26px color-mix(in srgb, var(--auraColor) 12%, transparent);
    transform: translateX(28px);
    transition: opacity 190ms ease, transform 220ms ease;
    isolation: isolate;
  }

  #journalOverlay.jo-open { transform: translateX(0); }

  #journalOverlay .jo-day-view {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  #journalOverlay .jo-sticky-stack,
  #journalOverlay .jo-day-header {
    background: rgba(8, 9, 15, 0.96);
  }

  #journalOverlay .jo-sticky-stack {
    border-bottom: 1px solid color-mix(in srgb, var(--auraColor) 14%, rgba(255,255,255,0.05));
  }

  #journalOverlay .jo-day-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    padding: 14px 18px 8px;
  }

  #journalOverlay .jo-day-date {
    min-width: 0;
    margin: 0;
    color: rgba(255,255,255,0.66);
    font-size: 12.5px;
    line-height: 1.35;
  }

  #journalOverlay .jo-word-meta {
    color: rgba(255,255,255,0.45);
    font-size: 11.5px;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
  }

  #journalOverlay .jo-muted {
    margin-left: 4px;
    color: color-mix(in srgb, var(--auraColor) 82%, rgba(255,255,255,0.42));
  }

  #journalOverlay .jo-progress-bar {
    height: 3px;
    margin: 0 18px 11px;
    background: rgba(255,255,255,0.045);
  }

  #journalOverlay .jo-cards-frame {
    padding: 0;
    background: color-mix(in srgb, var(--auraColor) 4%, rgba(5, 6, 14, 0.98));
    box-shadow: inset 0 10px 24px rgba(0,0,0,0.18),
                0 0 14px color-mix(in srgb, var(--auraColor) 10%, transparent);
  }

  #journalOverlay .jo-cards-strip {
    width: 100%;
    min-height: 144px;
    padding: 12px 16px;
    gap: 10px;
    align-items: center;
    justify-content: center;
    overflow-x: clip;
    overflow-y: hidden;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }

  #journalOverlay .jo-cards-strip.scrollable {
    justify-content: flex-start;
    overflow-x: auto;
    padding-right: 24px;
    scroll-padding-inline: 16px;
  }

  #journalOverlay .jo-cards-strip[data-count="0"] {
    min-height: 42px;
    padding: 9px 16px;
  }

  #journalOverlay .jo-cards-strip[data-count="0"] .jo-cards-empty {
    line-height: 22px;
  }

  #journalOverlay .jo-card-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 120px;
    min-width: 72px;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    background: rgba(255,255,255,0.035);
    box-shadow: 0 5px 13px rgba(0,0,0,0.42),
                0 0 7px color-mix(in srgb, var(--auraColor) 13%, transparent);
    transition: transform 150ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }

  #journalOverlay .jo-card-thumb:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--auraColor) 46%, rgba(255,255,255,0.10));
    box-shadow: 0 8px 18px rgba(0,0,0,0.52),
                0 0 12px color-mix(in srgb, var(--auraColor) 26%, transparent);
  }

  #journalOverlay .jo-card-thumb.jo-thumb-selected {
    transform: translateY(-3px);
    border-color: var(--auraColor);
    box-shadow: 0 8px 18px rgba(0,0,0,0.52),
                0 0 20px color-mix(in srgb, var(--auraColor) 58%, transparent);
  }

  #journalOverlay .jo-card-thumb img,
  #journalOverlay .jo-card-glyph {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    clip-path: inset(0 round 6px);
  }

  #journalOverlay .jo-cards-empty {
    width: 100%;
    padding: 0;
    color: rgba(255,255,255,0.30);
    font-size: 11.5px;
    text-align: center;
  }

  #journalOverlay .jo-paper-wrap,
  #journalOverlay.jo-keyboard-open .jo-paper-wrap {
    border-top: 0;
    background: linear-gradient(180deg, rgba(7, 8, 17, 0.78), rgba(4, 5, 12, 0.92));
  }

  #journalOverlay .jo-paper {
    padding: 20px 22px 52px;
    background: transparent;
    color: rgba(255,255,255,0.90);
    font-size: 15px;
    line-height: 1.75;
    caret-color: var(--auraColor);
  }

  #journalOverlay .jo-paper::placeholder {
    color: rgba(255,255,255,0.24);
  }

  /* The calendar belongs to the drawer instead of floating at viewport center. */
  #journalOverlay .jo-mini-cal {
    position: absolute;
    top: 66px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: min(340px, calc(100% - 24px));
    z-index: 90;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top right;
  }

  #journalOverlay .jo-mini-cal.visible {
    transform: translateY(0) scale(1);
  }

  /* Index becomes a large reference drawer while leaving real Canvas room. */
  #cardIndexOverlay {
    inset: var(--workspace-gutter) var(--workspace-gutter) var(--workspace-gutter) auto !important;
    width: var(--workspace-index-width) !important;
    height: auto !important;
    border: 1px solid color-mix(in srgb, var(--auraColor) 38%, rgba(255,255,255,0.10));
    border-radius: 18px;
    background: rgba(6, 7, 16, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: -20px 26px 70px rgba(0,0,0,0.60),
                0 0 26px color-mix(in srgb, var(--auraColor) 11%, transparent);
    transform: translateX(28px);
    transition: opacity 190ms ease, transform 220ms ease;
    isolation: isolate;
  }

  #cardIndexOverlay.ci-open { transform: translateX(0); }

  #cardIndexOverlay::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  #cardIndexOverlay[data-mode="full"] {
    grid-template-columns: minmax(300px, 30%) minmax(0, 1fr);
    grid-template-rows: 58px minmax(0, 1fr);
  }

  #cardIndexOverlay[data-mode="full"] .ci-workspace-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #cardIndexOverlay[data-mode="full"] .ci-list-view {
    grid-column: 1;
    grid-row: 2;
  }

  #cardIndexOverlay[data-mode="full"] .ci-detail-view {
    grid-column: 2;
    grid-row: 2;
  }

  /* Aura-native scrollbars across all three Index reading columns. */
  #cardIndexOverlay .ci-list,
  #cardIndexOverlay .ci-detail-sticky,
  #cardIndexOverlay .ci-detail-scroll {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--auraColor) 62%, rgba(255,255,255,0.18)) transparent;
  }

  #cardIndexOverlay .ci-list::-webkit-scrollbar,
  #cardIndexOverlay .ci-detail-sticky::-webkit-scrollbar,
  #cardIndexOverlay .ci-detail-scroll::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
  }

  #cardIndexOverlay .ci-list::-webkit-scrollbar-track,
  #cardIndexOverlay .ci-detail-sticky::-webkit-scrollbar-track,
  #cardIndexOverlay .ci-detail-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.025);
    border-radius: 999px;
  }

  #cardIndexOverlay .ci-list::-webkit-scrollbar-thumb,
  #cardIndexOverlay .ci-detail-sticky::-webkit-scrollbar-thumb,
  #cardIndexOverlay .ci-detail-scroll::-webkit-scrollbar-thumb {
    min-height: 42px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--auraColor) 62%, rgba(255,255,255,0.20));
    background-clip: padding-box;
    box-shadow: 0 0 8px color-mix(in srgb, var(--auraColor) 28%, transparent);
  }

  #cardIndexOverlay .ci-list::-webkit-scrollbar-thumb:hover,
  #cardIndexOverlay .ci-detail-sticky::-webkit-scrollbar-thumb:hover,
  #cardIndexOverlay .ci-detail-scroll::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--auraColor) 78%, rgba(255,255,255,0.30));
    background-clip: padding-box;
  }

  .ci-workspace-save,
  #ciWorkspaceSave,
  #ciWorkspaceBack { display: none; }

  /* Desktop drawers own their contextual actions. The floating bar remains a
     single, stable set of Canvas tools and uses state only for highlighting. */
  .bottom-nav[data-state="journal"] .bnav-journal,
  .bottom-nav[data-state="index"] .bnav-index,
  .bottom-nav[data-state="settings"] .bnav-settings,
  .bottom-nav[data-state="spreads"] .bnav-spreads { display: none; }

  .bottom-nav[data-state="journal"] .bnav-canvas,
  .bottom-nav[data-state="index"] .bnav-canvas,
  .bottom-nav[data-state="settings"] .bnav-canvas,
  .bottom-nav[data-state="spreads"] .bnav-canvas {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
  }

  /* Keep the instrument bar aligned with the centered description overlay.
     Drawers extend beneath it instead of pushing or resizing it. */
  .bottom-nav {
    left: 50%;
    right: auto;
    width: min(680px, calc(100vw - 32px));
    max-width: 680px;
    margin-inline: 0;
    transform: translateX(-50%);
  }

  .bottom-nav .bnav-canvas { gap: 2px; }
  .bottom-nav .bnav-canvas .bnav-btn:not(.bnav-deck-btn) { width: 40px; }
  .bottom-nav .bnav-canvas .bnav-deck-btn {
    min-width: 0;
    padding-inline: 7px;
    overflow: hidden;
  }
  .bottom-nav .bnav-canvas .bnav-deck-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bottom-nav[data-state="settings"] #navSettings,
  .bottom-nav[data-state="index"] #navIndex,
  .bottom-nav[data-state="journal"] #navJournal,
  .bottom-nav[data-state="spreads"] #navSpreads {
    color: var(--auraColor);
    background: color-mix(in srgb, var(--auraColor) 13%, rgba(255,255,255,0.025));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auraColor) 28%, transparent),
                0 0 12px color-mix(in srgb, var(--auraColor) 12%, transparent);
  }
}

@media (min-width: 1280px) and (max-height: 760px) {
  #journalOverlay .jo-cards-strip {
    min-height: 124px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #journalOverlay .jo-card-thumb {
    flex-basis: 62px;
    width: 62px;
    min-width: 62px;
    height: 103px;
  }

  #journalOverlay .jo-paper { padding-top: 16px; }
}

/* ═══════════════════════════════════════════════════════
   PASS 3 — NAMED SPREAD DOCUMENTS
   ═══════════════════════════════════════════════════════ */
.canvas-spread-status {
  width: fit-content;
  max-width: min(78vw, 520px);
  margin: 7px auto 0;
  padding: 3px 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--auraColor) 24%, transparent);
  border-radius: 999px;
  background: rgba(6,7,16,0.28);
  color: rgba(255,255,255,0.54);
  font: 600 10px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-spread-status.is-dirty {
  border-color: color-mix(in srgb, var(--auraColor) 46%, transparent);
  color: color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.78));
}

.bnav-spreads-btn { position: relative; }
.spreads-nav-dot {
  position: absolute;
  top: 7px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--auraColor);
  box-shadow: 0 0 8px var(--auraColor);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 120ms ease, transform 120ms ease;
}
.bnav-spreads-btn.has-unsaved-spread .spreads-nav-dot {
  opacity: 1;
  transform: scale(1);
}
.bottom-nav[data-state="spreads"] .bnav-spreads {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#spreadsOverlay {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: 52;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 10%, color-mix(in srgb, var(--auraColor) 8%, transparent), transparent 34%),
    rgba(6,8,15,0.985);
  color: rgba(255,255,255,0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
#spreadsOverlay.spreads-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.spreads-header {
  flex: 0 0 auto;
  min-height: 62px;
  padding: 10px 12px 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  background: rgba(3,5,11,0.44);
}
.spreads-title {
  color: var(--auraColor);
  font: 700 15px/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 0 14px color-mix(in srgb, var(--auraColor) 36%, transparent);
}
.spreads-subtitle {
  margin-top: 3px;
  color: rgba(255,255,255,0.32);
  font: 500 10px/1.25 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.spreads-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.spreads-header-btn,
.spreads-icon-btn,
.spreads-action-btn,
.spreads-footer-btn,
.spread-row-action {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  box-shadow: none;
  color: rgba(255,255,255,0.72);
  font: 650 11px/1 ui-sans-serif, system-ui, sans-serif;
}
.spreads-header-btn { padding: 0 12px; }
.spreads-icon-btn {
  width: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.spreads-header-btn:active,
.spreads-icon-btn:active,
.spreads-action-btn:active,
.spreads-footer-btn:active,
.spread-row-action:active {
  border-color: color-mix(in srgb, var(--auraColor) 56%, transparent);
  color: var(--auraColor);
}

.spreads-current {
  flex: 0 0 auto;
  margin: 14px 14px 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 28%, rgba(255,255,255,0.06));
  border-radius: 15px;
  background: color-mix(in srgb, var(--auraColor) 5%, rgba(255,255,255,0.025));
}
.spreads-current-copy { min-width: 0; }
.spreads-current-kicker {
  color: color-mix(in srgb, var(--auraColor) 70%, rgba(255,255,255,0.55));
  font: 700 9px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.spreads-current-title {
  margin-top: 5px;
  overflow: hidden;
  color: rgba(255,255,255,0.94);
  font: 650 17px/1.28 ui-sans-serif, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spreads-current-meta {
  margin-top: 3px;
  color: rgba(255,255,255,0.40);
  font: 500 11px/1.35 ui-sans-serif, system-ui, sans-serif;
}
.spreads-current-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 11px;
}
.spreads-action-btn {
  min-width: 0;
  padding: 0 9px;
}
.spreads-current-actions .spreads-action-btn {
  min-height: 32px;
  padding: 0 11px;
  font-size: 10px;
}
.spreads-action-primary {
  border-color: color-mix(in srgb, var(--auraColor) 62%, rgba(255,255,255,0.12));
  background: color-mix(in srgb, var(--auraColor) 13%, rgba(255,255,255,0.035));
  color: color-mix(in srgb, var(--auraColor) 78%, white);
}
.spreads-action-btn:disabled,
.spreads-footer-btn:disabled {
  opacity: 0.28;
  pointer-events: none;
}

.spreads-search-wrap {
  flex: 0 0 auto;
  padding: 0 14px 10px;
}
.spreads-search,
.spread-name-input {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 11px;
  outline: none;
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.90);
  font: 500 13px/1.3 ui-sans-serif, system-ui, sans-serif;
}
.spreads-search:focus,
.spread-name-input:focus {
  border-color: color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.14));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--auraColor) 10%, transparent);
}
.spreads-search::placeholder { color: rgba(255,255,255,0.25); }

.spreads-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 14px 18px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--auraColor) 58%, rgba(255,255,255,0.15)) transparent;
}
.spreads-list::-webkit-scrollbar { width: 8px; }
.spreads-list::-webkit-scrollbar-track { background: transparent; }
.spreads-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--auraColor) 58%, rgba(255,255,255,0.16));
  background-clip: padding-box;
}
.spread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(255,255,255,0.025);
}
.spread-row.is-current {
  border-color: color-mix(in srgb, var(--auraColor) 46%, rgba(255,255,255,0.10));
  box-shadow: inset 2px 0 0 var(--auraColor);
}
.spread-row-open {
  min-width: 0;
  min-height: 62px;
  padding: 10px 5px 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.spread-row-open:active { background: rgba(255,255,255,0.035); }
.spread-row-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spread-row-title {
  overflow: hidden;
  color: rgba(255,255,255,0.88);
  font: 600 13px/1.3 ui-sans-serif, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spread-row-meta {
  color: rgba(255,255,255,0.34);
  font: 500 10px/1.2 ui-sans-serif, system-ui, sans-serif;
}
.spread-row-date {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.38);
  font: 600 10px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.spread-row-menu {
  width: 42px;
  min-height: 62px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255,255,255,0.055);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255,255,255,0.42);
  font-size: 20px;
}
.spread-row-menu:active { color: var(--auraColor); }
.spread-row-actions {
  grid-column: 1 / -1;
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  border-top: 1px solid rgba(255,255,255,0.055);
  background: rgba(0,0,0,0.20);
}
.spread-row-actions[hidden] { display: none; }
.spread-row-action {
  min-width: 0;
  min-height: 34px;
  padding: 0 5px;
  font-size: 10px;
}
.spread-row-delete { color: rgba(235,123,135,0.82); }

.spreads-empty {
  min-height: 210px;
  padding: 38px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.32);
  font: 500 12px/1.55 ui-sans-serif, system-ui, sans-serif;
  text-align: center;
}
.spreads-empty-glyph {
  margin-bottom: 11px;
  color: color-mix(in srgb, var(--auraColor) 54%, rgba(255,255,255,0.34));
  font-size: 32px;
}
.spreads-empty-title {
  margin-bottom: 4px;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  font-weight: 650;
}

.spreads-footer {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.065);
  background: rgba(3,5,11,0.34);
}
.spreads-storage-status {
  min-width: 0;
  flex: 1;
  color: rgba(255,255,255,0.28);
  font: 500 10px/1.3 ui-sans-serif, system-ui, sans-serif;
}
.spreads-footer-btn {
  min-height: 36px;
  padding: 0 11px;
}

.spread-name-dialog {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 18px;
  display: grid;
  place-items: center;
  background: rgba(2,3,8,0.76);
  opacity: 0;
  transition: opacity 150ms ease;
}
.spread-name-dialog[hidden] { display: none; }
.spread-name-dialog.visible { opacity: 1; }
.spread-name-card {
  width: min(100%, 390px);
  padding: 19px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 50%, rgba(255,255,255,0.10));
  border-radius: 17px;
  background: rgba(8,10,19,0.98);
  box-shadow: 0 20px 60px rgba(0,0,0,0.62), 0 0 22px color-mix(in srgb, var(--auraColor) 12%, transparent);
  transform: translateY(8px) scale(0.985);
  transition: transform 150ms ease;
}
.spread-name-dialog.visible .spread-name-card { transform: translateY(0) scale(1); }
.spread-name-kicker {
  margin-bottom: 14px;
  color: var(--auraColor);
  font: 700 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.spread-name-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.48);
  font: 600 11px/1.3 ui-sans-serif, system-ui, sans-serif;
}
.spread-name-error {
  min-height: 17px;
  margin-top: 5px;
  color: #e38a94;
  font: 500 10px/1.3 ui-sans-serif, system-ui, sans-serif;
}
.spread-name-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 9px;
}

.aura-off .spreads-title,
.aura-off .spread-name-kicker,
.aura-off .canvas-spread-status.is-dirty {
  color: rgba(255,255,255,0.88);
  text-shadow: none;
}

@media (max-width: 420px) {
  .spreads-current { margin: 11px 10px 8px; padding: 12px; }
  .spreads-search-wrap { padding: 0 10px 8px; }
  .spreads-list { padding-left: 10px; padding-right: 10px; }
  .spreads-current-actions { gap: 5px; }
  .spread-row-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones and compact tablets use the same subtle right-drawer entrance as
   Spreads. Desktop workspace drawers already define their own transitions. */
@media (max-width: 899px) {
  #cardIndexOverlay,
  #journalOverlay,
  .atmo-panel {
    transform: translateX(24px);
    transition: opacity 180ms ease, transform 220ms ease;
  }

  #cardIndexOverlay.ci-open,
  #journalOverlay.jo-open,
  .atmo-panel.atmo-open {
    transform: translateX(0);
  }
}

@media (max-width: 360px) {
  .bottom-nav[data-state="canvas"] { gap: 2px; }
  .bottom-nav[data-state="canvas"] .bnav-btn:not(.bnav-deck-btn) { width: 34px; }
  .bottom-nav[data-state="canvas"] .bnav-btn.bnav-deck-btn {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 11px;
  }
  .spreads-subtitle { display: none; }
}

@media (min-width: 1280px) {
  :root { --workspace-spreads-width: 480px; }

  #spreadsOverlay {
    top: var(--workspace-gutter);
    right: var(--workspace-gutter);
    bottom: var(--workspace-gutter);
    left: auto;
    width: min(var(--workspace-spreads-width), calc(100vw - 36px));
    border: 1px solid color-mix(in srgb, var(--auraColor) 48%, rgba(255,255,255,0.12));
    border-radius: 18px;
    background:
      radial-gradient(circle at 78% 10%, color-mix(in srgb, var(--auraColor) 9%, transparent), transparent 34%),
      rgba(6,8,15,0.965);
    box-shadow:
      -24px 20px 70px rgba(0,0,0,0.58),
      0 0 24px color-mix(in srgb, var(--auraColor) 11%, transparent);
  }

  /* This base Spreads state is declared after the main desktop workspace
     rules, so reaffirm that its mobile Close-only group stays mobile-only. */
  .bottom-nav[data-state="spreads"] .bnav-spreads { display: none; }

}

/* ═══════════════════════════════════════════════════════
   PASS 4 — DESKTOP WORKSPACE COHESION
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  :root {
    --workspace-shell-border: color-mix(in srgb, var(--auraColor) 42%, rgba(255,255,255,0.10));
    --workspace-shell-header: rgba(5, 6, 14, 0.78);
  }

  #journalOverlay,
  #cardIndexOverlay,
  #spreadsOverlay,
  .atmo-fullscreen {
    border-color: var(--workspace-shell-border) !important;
  }

  .workspace-panel-header,
  .spreads-header,
  .atmo-header {
    min-height: 58px;
    flex: 0 0 58px;
    padding: 10px 12px 10px 18px;
    border-bottom-color: rgba(255,255,255,0.08);
    background: var(--workspace-shell-header);
  }

  .workspace-panel-title,
  .spreads-title,
  .atmo-title {
    color: var(--auraColor);
    font: 700 15px/1.2 Georgia, "Times New Roman", serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 14px color-mix(in srgb, var(--auraColor) 36%, transparent);
  }

  .workspace-panel-close,
  .spreads-icon-btn,
  .atmo-header-close {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
    color: rgba(255,255,255,0.68);
  }

  .workspace-panel-btn,
  .spreads-icon-btn,
  .atmo-header-close,
  .bnav-btn {
    transition: color 120ms ease, background 140ms ease,
                border-color 140ms ease, box-shadow 160ms ease;
  }

  .workspace-panel-btn:focus-visible,
  .spreads-icon-btn:focus-visible,
  .atmo-header-close:focus-visible,
  .bnav-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--auraColor) 76%, white);
    outline-offset: 2px;
  }

  @media (hover: hover) {
    .workspace-panel-btn:hover,
    .spreads-icon-btn:hover,
    .atmo-header-close:hover,
    .bottom-nav .bnav-btn:hover {
      color: rgba(255,255,255,0.98);
      background: color-mix(in srgb, var(--auraColor) 10%, rgba(255,255,255,0.045));
      border-color: color-mix(in srgb, var(--auraColor) 28%, rgba(255,255,255,0.10));
    }
  }

  #journalOverlay,
  #cardIndexOverlay,
  #spreadsOverlay,
  .atmo-panel {
    transition: opacity 190ms ease, transform 220ms ease;
  }

  #journalOverlay .jo-paper,
  #journalOverlay .jo-cal-grid,
  #journalOverlay .jo-cards-strip,
  #cardIndexOverlay .ci-list,
  #cardIndexOverlay .ci-detail-sticky,
  #cardIndexOverlay .ci-detail-scroll,
  #spreadsOverlay .spreads-list,
  .atmo-body,
  .descOverlay,
  .install-help-dialog,
  .panel {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--auraColor) 58%, rgba(255,255,255,0.16)) transparent;
  }

  #journalOverlay .jo-paper::-webkit-scrollbar,
  #journalOverlay .jo-cal-grid::-webkit-scrollbar,
  #journalOverlay .jo-cards-strip::-webkit-scrollbar,
  #spreadsOverlay .spreads-list::-webkit-scrollbar,
  .atmo-body::-webkit-scrollbar,
  .descOverlay::-webkit-scrollbar,
  .install-help-dialog::-webkit-scrollbar,
  .panel::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  #journalOverlay .jo-paper::-webkit-scrollbar-track,
  #journalOverlay .jo-cal-grid::-webkit-scrollbar-track,
  #journalOverlay .jo-cards-strip::-webkit-scrollbar-track,
  #spreadsOverlay .spreads-list::-webkit-scrollbar-track,
  .atmo-body::-webkit-scrollbar-track,
  .descOverlay::-webkit-scrollbar-track,
  .install-help-dialog::-webkit-scrollbar-track,
  .panel::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.025);
  }

  #journalOverlay .jo-paper::-webkit-scrollbar-thumb,
  #journalOverlay .jo-cal-grid::-webkit-scrollbar-thumb,
  #journalOverlay .jo-cards-strip::-webkit-scrollbar-thumb,
  #spreadsOverlay .spreads-list::-webkit-scrollbar-thumb,
  .atmo-body::-webkit-scrollbar-thumb,
  .descOverlay::-webkit-scrollbar-thumb,
  .install-help-dialog::-webkit-scrollbar-thumb,
  .panel::-webkit-scrollbar-thumb {
    min-height: 42px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--auraColor) 58%, rgba(255,255,255,0.18));
    background-clip: padding-box;
  }

  #journalOverlay .jo-paper::-webkit-scrollbar-thumb:hover,
  #journalOverlay .jo-cal-grid::-webkit-scrollbar-thumb:hover,
  #journalOverlay .jo-cards-strip::-webkit-scrollbar-thumb:hover,
  #spreadsOverlay .spreads-list::-webkit-scrollbar-thumb:hover,
  .atmo-body::-webkit-scrollbar-thumb:hover,
  .descOverlay::-webkit-scrollbar-thumb:hover,
  .install-help-dialog::-webkit-scrollbar-thumb:hover,
  .panel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--auraColor) 74%, rgba(255,255,255,0.26));
    background-clip: padding-box;
  }

  /* The centered nav intentionally floats above wide drawers. Their terminal
     content can still scroll completely clear of that overlap. */
  #journalOverlay .jo-paper { padding-bottom: 112px; }
  .atmo-body { padding-bottom: 104px; }
  #spreadsOverlay .spreads-list { padding-bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  #spreadsOverlay,
  #cardIndexOverlay,
  #journalOverlay,
  .atmo-panel,
  .spread-name-dialog,
  .spread-name-card { transition: none; }
}

/* ── Interpretive resistance ───────────────────────────
   Unlike Watch For (behavior/pattern caution), Challenge
   tests the reader's framing so the index does not merely
   reward the most comfortable interpretation. */
.ci-challenge .ci-lore-label {
  letter-spacing: 0.08em;
}

/* ── Structured spread template picker ─────────────────── */


/* ── Desktop card meaning popover (right-click) ─────────── */
@media (min-width: 900px) {
  .descOverlay.desc-context-popover {
    right: auto;
    bottom: auto;
    width: min(460px, calc(100vw - 24px));
    max-width: 460px;
    max-height: min(52vh, 520px);
    margin: 0;
    padding: 12px 14px 14px;
    border-radius: 14px;
    box-shadow: 0 16px 42px rgba(0,0,0,0.62),
                0 0 20px color-mix(in srgb, var(--auraColor) 13%, transparent);
  }
}

/* ═══════════════════════════════════════════════════════
   PASS 3.5 — RESPONSIVE IDENTITY
   Input capability and viewport layout are independent.
   compact: <900px | workspace: 900–1279px | wide: 1280px+
   ═══════════════════════════════════════════════════════ */

/* Aura-native scrollbars belong to AC surfaces, not to a desktop breakpoint.
   Touch browsers may overlay/hide these natively; mouse layouts always retain
   the app's visual language instead of falling back to gray browser chrome. */
#journalOverlay .jo-paper,
#journalOverlay .jo-cal-grid,
#cardIndexOverlay .ci-list,
#cardIndexOverlay .ci-detail-sticky,
#cardIndexOverlay .ci-detail-scroll,
#spreadsOverlay .spreads-list,
.atmo-body,
.descOverlay,
.install-help-dialog,
.panel {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--auraColor) 60%, rgba(255,255,255,0.18)) transparent;
}

#journalOverlay .jo-paper::-webkit-scrollbar,
#journalOverlay .jo-cal-grid::-webkit-scrollbar,
#cardIndexOverlay .ci-list::-webkit-scrollbar,
#cardIndexOverlay .ci-detail-sticky::-webkit-scrollbar,
#cardIndexOverlay .ci-detail-scroll::-webkit-scrollbar,
#spreadsOverlay .spreads-list::-webkit-scrollbar,
.atmo-body::-webkit-scrollbar,
.descOverlay::-webkit-scrollbar,
.install-help-dialog::-webkit-scrollbar,
.panel::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}

#journalOverlay .jo-paper::-webkit-scrollbar-track,
#journalOverlay .jo-cal-grid::-webkit-scrollbar-track,
#cardIndexOverlay .ci-list::-webkit-scrollbar-track,
#cardIndexOverlay .ci-detail-sticky::-webkit-scrollbar-track,
#cardIndexOverlay .ci-detail-scroll::-webkit-scrollbar-track,
#spreadsOverlay .spreads-list::-webkit-scrollbar-track,
.atmo-body::-webkit-scrollbar-track,
.descOverlay::-webkit-scrollbar-track,
.install-help-dialog::-webkit-scrollbar-track,
.panel::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.025);
  border-radius: 999px;
}

#journalOverlay .jo-paper::-webkit-scrollbar-thumb,
#journalOverlay .jo-cal-grid::-webkit-scrollbar-thumb,
#cardIndexOverlay .ci-list::-webkit-scrollbar-thumb,
#cardIndexOverlay .ci-detail-sticky::-webkit-scrollbar-thumb,
#cardIndexOverlay .ci-detail-scroll::-webkit-scrollbar-thumb,
#spreadsOverlay .spreads-list::-webkit-scrollbar-thumb,
.atmo-body::-webkit-scrollbar-thumb,
.descOverlay::-webkit-scrollbar-thumb,
.install-help-dialog::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb {
  min-height: 38px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--auraColor) 60%, rgba(255,255,255,0.18));
  background-clip: padding-box;
  box-shadow: 0 0 7px color-mix(in srgb, var(--auraColor) 22%, transparent);
}

@media (hover: hover) {
  #journalOverlay .jo-paper::-webkit-scrollbar-thumb:hover,
  #journalOverlay .jo-cal-grid::-webkit-scrollbar-thumb:hover,
  #cardIndexOverlay .ci-list::-webkit-scrollbar-thumb:hover,
  #cardIndexOverlay .ci-detail-sticky::-webkit-scrollbar-thumb:hover,
  #cardIndexOverlay .ci-detail-scroll::-webkit-scrollbar-thumb:hover,
  #spreadsOverlay .spreads-list::-webkit-scrollbar-thumb:hover,
  .atmo-body::-webkit-scrollbar-thumb:hover,
  .descOverlay::-webkit-scrollbar-thumb:hover,
  .install-help-dialog::-webkit-scrollbar-thumb:hover,
  .panel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--auraColor) 76%, rgba(255,255,255,0.28));
    background-clip: padding-box;
  }
}

/* A mouse stays a mouse at any viewport width. This class is only applied by
   the JS input-capability path, so phones retain the established bottom sheet. */
html[data-input-mode="mouse"] .descOverlay.desc-context-popover {
  right: auto;
  bottom: auto;
  width: min(460px, calc(100vw - 24px));
  max-width: 460px;
  max-height: min(52vh, 520px);
  margin: 0;
  padding: 12px 14px 14px;
  border-radius: 14px;
  box-shadow: 0 16px 42px rgba(0,0,0,0.62),
              0 0 20px color-mix(in srgb, var(--auraColor) 13%, transparent);
}

/* Workspace layout begins at the same 900px threshold used by the Index
   split view. JS now agrees with CSS at this boundary. */
@media (min-width: 900px) {
  .workspace-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    flex: 0 0 58px;
    padding: 10px 12px 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(5, 6, 14, 0.78);
    position: relative;
    z-index: 80;
  }
  .workspace-panel-title {
    color: var(--auraColor);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 14px color-mix(in srgb, var(--auraColor) 36%, transparent);
    white-space: nowrap;
  }
  .workspace-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
  }
  .workspace-panel-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: rgba(255,255,255,0.68);
    font: 600 16px/1 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
  }
  .workspace-panel-btn.workspace-panel-text {
    width: auto;
    max-width: 140px;
    color: rgba(255,255,255,0.82);
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .workspace-panel-close {
    margin-left: 3px;
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.035);
  }

  /* On a mouse workspace, drawers own contextual controls while the floating
     bar remains the stable Canvas instrument bar. */
  .bottom-nav[data-state="journal"] .bnav-journal,
  .bottom-nav[data-state="index"] .bnav-index,
  .bottom-nav[data-state="settings"] .bnav-settings,
  .bottom-nav[data-state="spreads"] .bnav-spreads { display: none; }

  .bottom-nav[data-state="journal"] .bnav-canvas,
  .bottom-nav[data-state="index"] .bnav-canvas,
  .bottom-nav[data-state="settings"] .bnav-canvas,
  .bottom-nav[data-state="spreads"] .bnav-canvas {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
  }

  .bottom-nav[data-state="settings"] #navSettings,
  .bottom-nav[data-state="index"] #navIndex,
  .bottom-nav[data-state="journal"] #navJournal,
  .bottom-nav[data-state="spreads"] #navSpreads {
    color: var(--auraColor);
    background: color-mix(in srgb, var(--auraColor) 13%, rgba(255,255,255,0.025));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auraColor) 28%, transparent),
                0 0 12px color-mix(in srgb, var(--auraColor) 12%, transparent);
  }

  /* Index workspace header participates in the existing split layout. */
  #cardIndexOverlay[data-mode="full"] {
    grid-template-rows: 58px minmax(0, 1fr);
  }
  #cardIndexOverlay[data-mode="full"] .ci-workspace-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #cardIndexOverlay[data-mode="full"] .ci-list-view {
    grid-row: 2;
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view {
    grid-row: 2;
  }

  /* The Index list remains visible in workspace mode, so Back is only useful
     in the compact/mobile presentation. */
  body:has(#cardIndexOverlay[data-mode="full"].ci-open) #navCiBack {
    display: none !important;
  }
}

/* Deliberate snapped-window / medium workspace. It is neither a phone shell
   nor the wide side-drawer composition. Panels use the available viewport
   without changing their input vocabulary. */
@media (min-width: 900px) and (max-width: 1279px) {
  :root { --workspace-gutter-mid: 14px; }

  #cardIndexOverlay,
  #journalOverlay {
    top: var(--workspace-gutter-mid) !important;
    right: var(--workspace-gutter-mid) !important;
    bottom: 78px !important;
    left: var(--workspace-gutter-mid) !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid color-mix(in srgb, var(--auraColor) 38%, rgba(255,255,255,0.10));
    border-radius: 16px;
    background: rgba(6, 7, 16, 0.965);
    box-shadow: 0 24px 68px rgba(0,0,0,0.58),
                0 0 24px color-mix(in srgb, var(--auraColor) 10%, transparent);
    isolation: isolate;
  }

  #cardIndexOverlay {
    transform: translateX(22px);
    transition: opacity 190ms ease, transform 220ms ease;
  }
  #cardIndexOverlay.ci-open { transform: translateX(0); }

  #journalOverlay {
    display: flex;
    flex-direction: column;
    transform: translateX(22px);
    transition: opacity 190ms ease, transform 220ms ease;
  }
  #journalOverlay.jo-open { transform: translateX(0); }
  #journalOverlay .jo-day-view {
    flex: 1 1 auto;
    min-height: 0;
  }
  #journalOverlay .jo-mini-cal {
    position: absolute;
    top: 66px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: min(340px, calc(100% - 24px));
    z-index: 90;
    transform-origin: top right;
  }

  /* Settings and Spreads stay compact side tools at snapped desktop widths. */
  #spreadsOverlay {
    top: var(--workspace-gutter-mid);
    right: var(--workspace-gutter-mid);
    bottom: var(--workspace-gutter-mid);
    left: auto;
    width: min(460px, calc(100vw - 28px));
    border: 1px solid color-mix(in srgb, var(--auraColor) 44%, rgba(255,255,255,0.11));
    border-radius: 16px;
    box-shadow: -20px 20px 64px rgba(0,0,0,0.56),
                0 0 22px color-mix(in srgb, var(--auraColor) 10%, transparent);
  }

  .atmo-fullscreen {
    right: var(--workspace-gutter-mid) !important;
    top: var(--workspace-gutter-mid) !important;
    bottom: var(--workspace-gutter-mid) !important;
    width: min(480px, calc(100vw - 28px)) !important;
  }

  /* At the smallest workspace width, preserve enough room for both Index
     columns without letting either become comically narrow. */
  #cardIndexOverlay[data-mode="full"] {
    grid-template-columns: minmax(260px, 36%) minmax(0, 1fr);
  }
  #cardIndexOverlay[data-mode="full"] .ci-detail-view.ci-active {
    grid-template-columns: minmax(235px, 42%) minmax(0, 1fr);
  }
  #cardIndexOverlay[data-mode="full"] .ci-card-info {
    padding-left: 24px;
    padding-right: 26px;
  }
}

/* ═══════════════════════════════════════════════════════
   PASS 4 — STRUCTURED SPREAD CONTEXT
   Position question + card keywords are the complete local prompt.
   Deeper synthesis stays with the reader until the optional AI layer.
   ═══════════════════════════════════════════════════════ */
.desc-spread-context {
  margin-top: 2px;
  margin-bottom: 5px;
  opacity: 0.78;
  letter-spacing: 0.085em;
}

.desc-spread-insight {
  margin: 6px 0 8px;
  padding: 8px 10px 10px;
  border-color: color-mix(in srgb, var(--auraColor) 17%, rgba(255,255,255,0.05));
  background: color-mix(in srgb, var(--auraColor) 3%, rgba(255,255,255,0.012));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--auraColor) 38%, transparent);
}

.desc-spread-insight-head {
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.desc-spread-position {
  color: color-mix(in srgb, var(--auraColor) 72%, rgba(255,255,255,0.54));
  font: 750 9px/1.25 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: right;
}


.desc-spread-question {
  margin-bottom: 0;
  color: rgba(238,234,250,0.82);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.38;
  font-style: normal;
}



/* ── Pass 4 spread template browser ───────────────────── */

@media (max-width: 520px) {
}

/* ═══════════════════════════════════════════════════════
   PASS 5 — CLARIFIER THREADS
   Follow-up questions stay bounded and visual. The card
   remains the answer; the connector remembers why it was drawn.
   ═══════════════════════════════════════════════════════ */
.desc-clarify-main {
  width: 100%;
  min-height: 32px;
  margin-top: 9px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 25%, rgba(255,255,255,0.06));
  border-radius: 9px;
  background: color-mix(in srgb, var(--auraColor) 4%, rgba(255,255,255,0.012));
  color: color-mix(in srgb, var(--auraColor) 80%, white 20%);
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.065em;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.desc-clarify-main[hidden] { display: none; }
.desc-clarify-main:hover,
.desc-clarify-main:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--auraColor) 52%, rgba(255,255,255,0.10));
  background: color-mix(in srgb, var(--auraColor) 8%, rgba(255,255,255,0.018));
  color: var(--auraColor);
}

.desc-clarifier-choices {
  margin-top: 7px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--auraColor) 17%, rgba(255,255,255,0.05));
  border-radius: 10px;
  background: rgba(5, 6, 13, 0.42);
}
.desc-clarifier-choices[hidden] { display: none; }
.desc-clarifier-kicker {
  grid-column: 1 / -1;
  padding: 1px 2px 3px;
  color: color-mix(in srgb, var(--auraColor) 60%, rgba(255,255,255,0.45));
  font: 750 8px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.desc-clarifier-choice {
  min-width: 0;
  min-height: 46px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 8px;
  background: rgba(255,255,255,0.018);
  color: rgba(255,255,255,0.78);
  text-align: left;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease;
}
.desc-clarifier-choice.is-general { grid-column: 1 / -1; }
.desc-clarifier-choice span {
  font: 680 10px/1.2 ui-sans-serif, system-ui, sans-serif;
}
.desc-clarifier-choice small {
  color: rgba(255,255,255,0.38);
  font: 520 8.5px/1.25 ui-sans-serif, system-ui, sans-serif;
}
.desc-clarifier-choice:hover,
.desc-clarifier-choice:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--auraColor) 42%, rgba(255,255,255,0.10));
  background: color-mix(in srgb, var(--auraColor) 6%, rgba(255,255,255,0.022));
  color: var(--auraColor);
}
.descOverlay.desc-clarifier-open { max-height: min(68vh, 620px); }

@media (max-width: 520px) {
  .desc-clarifier-choices { grid-template-columns: 1fr; }
  .desc-clarifier-choice.is-general { grid-column: auto; }
  .desc-clarifier-choice { min-height: 42px; }
}

/* ═══════════════════════════════════════════════════════
   PASS 5.7 — CONTEXT, NOT INTERPRETATION
   Structured cards get only the question that created their context, their
   deck-specific keyword answer, and the ordinary card meaning beneath it.
   ═══════════════════════════════════════════════════════ */
.descOverlay.desc-structured-mode {
  max-height: min(58vh, 620px);
}
.descOverlay.desc-structured-mode .descTitleRow {
  gap: 7px;
  margin-bottom: 7px;
  min-width: 0;
}
.descOverlay.desc-structured-mode .descTitle {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.descOverlay.desc-structured-mode .desc-spread-context {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: color-mix(in srgb, var(--auraColor) 58%, rgba(255,255,255,0.48));
  font-size: 8.5px;
  line-height: 1.2;
  letter-spacing: 0.085em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.82;
}
.descOverlay.desc-structured-mode .desc-spread-insight {
  margin: 3px 0 7px;
  padding: 8px 10px 9px;
}
.descOverlay.desc-structured-mode .desc-spread-insight-head {
  margin-bottom: 4px;
}
.descOverlay.desc-structured-mode .desc-spread-position {
  color: var(--auraColor);
  text-align: left;
  font-size: 9px;
}
.desc-spread-followup[hidden] { display: none; }
.desc-spread-followup {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--auraColor) 15%, rgba(255,255,255,0.045));
}
.desc-spread-followup-label {
  margin-bottom: 3px;
  color: color-mix(in srgb, var(--auraColor) 82%, white 18%);
  font: 760 8.5px/1.2 ui-sans-serif,system-ui,sans-serif;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}
.desc-spread-followup-question {
  color: rgba(238,234,250,0.76);
  font: 600 10px/1.35 ui-sans-serif,system-ui,sans-serif;
}
.descOverlay.desc-structured-mode .desc-body-label {
  margin-top: 7px;
  color: color-mix(in srgb, var(--auraColor) 82%, white 18%);
  font-size: 8.5px;
}
.descOverlay.desc-structured-mode .descBody {
  color: rgba(235,228,249,0.90);
  font-size: 11px;
  line-height: 1.42;
}
.desc-core-meaning[hidden] { display: none; }
.desc-core-meaning {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.055);
  color: rgba(220,210,255,0.72);
  font-size: 10.5px;
  line-height: 1.48;
}
.descOverlay.desc-structured-mode .desc-clarify-main {
  margin-top: 8px;
}
html[data-input-mode="mouse"] .descOverlay.desc-context-popover.desc-structured-mode {
  width: min(470px, calc(100vw - 24px));
  max-width: 470px;
  max-height: min(66vh, 640px);
}
@media (max-width: 520px) {
  .descOverlay.desc-structured-mode { max-height: 58vh; }
}



/* ── 1.1A public baseline notice ───────────────────────── */
.release-notice {
  position: fixed; inset: 0; z-index: 12000;
  display: grid; place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(5,7,14,.78);
  backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .18s ease;
}
.release-notice.visible { opacity: 1; }
.release-notice.closing { opacity: 0; pointer-events: none; }
.release-notice-card {
  width: min(92vw, 560px); max-height: min(82vh, 720px); overflow: auto;
  border: 1px solid rgba(255,255,255,.12); border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,21,38,.98), rgba(8,10,21,.98));
  box-shadow: 0 24px 80px rgba(0,0,0,.48), 0 0 44px rgba(var(--auraRGB),.10);
  padding: 28px;
}
.release-notice-kicker { color: var(--auraColor); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
.release-notice h2 { margin: 0 0 16px; font-size: clamp(1.45rem, 5vw, 2rem); line-height: 1.08; color: #fff; }
.release-notice p { margin: 0 0 13px; color: rgba(255,255,255,.78); line-height: 1.55; }
.release-notice strong { color: rgba(255,255,255,.96); }
.release-notice-privacy { margin: 19px 0; padding: 14px 15px; border-radius: 15px; background: rgba(255,255,255,.045); color: rgba(255,255,255,.60); font-size: .86rem; line-height: 1.5; }
.release-notice-continue { width: 100%; min-height: 46px; border: 1px solid rgba(var(--auraRGB),.38); border-radius: 14px; background: rgba(var(--auraRGB),.13); color: #fff; font: inherit; cursor: pointer; }
.release-notice-continue:focus-visible { outline: 2px solid var(--auraColor); outline-offset: 3px; }

/* ── 1.1B2 Store density polish ─────────────────────────────────── */
.atmo-store-link {
  border: 0;
  background: none;
  color: var(--auraColor);
  font: inherit;
  font-size: 11px;
  letter-spacing: .06em;
  cursor: pointer;
  padding: 6px 2px;
}
.atmo-store-link:hover { color: rgba(255,255,255,.92); }
.store-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% -15%, color-mix(in srgb, var(--auraColor) 13%, transparent), transparent 36%),
    linear-gradient(180deg, #0a0b17 0%, #080913 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.store-panel.store-open { opacity: 1; pointer-events: auto; transform: none; }
.store-header {
  flex: 0 0 auto;
  min-height: 68px;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,9,19,.88);
  backdrop-filter: blur(18px);
}
.store-header-copy { text-align: center; line-height: 1.1; }
.store-header-copy strong { display: block; color: #fff; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.store-kicker { display: block; margin-bottom: 5px; color: rgba(255,255,255,.4); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.store-header-btn {
  min-width: 42px; min-height: 42px; border: 0; background: transparent;
  color: rgba(255,255,255,.72); font-size: 23px; border-radius: 12px; cursor: pointer;
}
.store-header-btn:hover, .store-header-btn:focus-visible { background: rgba(255,255,255,.06); color: #fff; }
.store-close-btn { justify-self: end; }
.store-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 14px max(36px, env(safe-area-inset-bottom)); }
.store-scroll > * { width: min(100%, 1180px); margin-inline: auto; }
.store-hero { padding: 34px 0 24px; max-width: 780px; }
.store-hero-eyebrow, .store-category { color: var(--auraColor); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; }
.store-hero h1 { margin: 8px 0 12px; color: #fff; font-family: Georgia, serif; font-size: clamp(29px, 5.5vw, 52px); line-height: 1.02; font-weight: 500; }
.store-hero p, .store-free-core p, .store-coming-later p, .store-detail-copy p { color: rgba(255,255,255,.58); line-height: 1.65; }
.store-free-core, .store-coming-later {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 17px 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.store-free-core strong, .store-coming-later strong { display: block; margin-top: 6px; color: #fff; font-size: 19px; }
.store-free-core p, .store-coming-later p { margin: 7px 0 0; font-size: 13px; max-width: 720px; }
.store-status { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.12); }
.store-status--free, .store-status--owned { color: #dfffea; border-color: rgba(105,201,145,.4); background: rgba(105,201,145,.08); }
.store-status--locked { color: rgba(255,255,255,.58); background: rgba(255,255,255,.035); }
.store-section-heading { margin: 30px 0 12px; display: flex; justify-content: space-between; align-items: end; gap: 14px; }
.store-section-heading h2 { margin: 4px 0 0; color: #fff; font-family: Georgia, serif; font-weight: 500; font-size: 27px; }
.store-shell-note { color: rgba(255,255,255,.34); font-size: 11px; }
.store-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.store-product-card {
  display: grid;
  grid-template-columns: 132px minmax(0,1fr);
  align-items: stretch;
  padding: 0; overflow: hidden; text-align: left; border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
  background: rgba(255,255,255,.035); color: inherit; cursor: pointer; box-shadow: none;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.store-product-card:hover, .store-product-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--auraColor) 55%, transparent); background: rgba(255,255,255,.055); }
.store-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 680 / 1196;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(123,111,255,.14), transparent 55%), #0c0d19;
}
.store-product-card .store-preview { align-self: center; margin: 10px 0 10px 10px; width: calc(100% - 10px); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; }
.store-preview--image { display: grid; place-items: center; }
.store-preview--image img { display:block; width:100%; height:100%; }
.store-preview--contain img { object-fit: contain; padding: 5.5%; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.store-preview--cover img { object-fit: cover; }
.store-preview--effect { isolation: isolate; }
.store-preview--animus { background: radial-gradient(circle at 50% 48%, rgba(131,102,255,.24), transparent 58%), linear-gradient(180deg,#101027,#060712); }
.store-preview--animus span { position:absolute; width:8px; height:8px; border-radius:50%; background:#a9a1ff; box-shadow:0 0 15px #8c7dff; opacity:.75; }
.store-preview--animus span:nth-child(1){left:18%;top:30%}.store-preview--animus span:nth-child(2){left:62%;top:21%;width:4px;height:4px}.store-preview--animus span:nth-child(3){left:77%;top:59%;width:12px;height:12px}.store-preview--animus span:nth-child(4){left:36%;top:66%;width:5px;height:5px}.store-preview--animus span:nth-child(5){left:52%;top:44%;width:7px;height:7px}
.store-preview--snowfall { background: linear-gradient(180deg,#101424,#050711); }
.store-preview--snowfall span { position:absolute; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 8px rgba(255,255,255,.45); }
.store-preview--snowfall span:nth-child(1){left:14%;top:22%;width:6px;height:6px}.store-preview--snowfall span:nth-child(2){left:31%;top:62%;width:3px;height:3px}.store-preview--snowfall span:nth-child(3){left:57%;top:31%;width:9px;height:9px}.store-preview--snowfall span:nth-child(4){left:74%;top:73%;width:5px;height:5px}.store-preview--snowfall span:nth-child(5){left:88%;top:38%;width:3px;height:3px}
.store-product-copy { display: flex; min-width:0; flex-direction: column; padding: 13px 14px; }
.store-product-topline, .store-product-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.store-product-title { display: block; margin: 7px 0 5px; color: #fff; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.store-product-short { display: block; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.45; }
.store-product-footer { margin-top: 13px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.42); font-size: 11px; }
.store-product-arrow { font-size: 24px; color: var(--auraColor); line-height: .7; }
.store-coming-later { margin: 22px 0 10px; }
.store-detail { padding: 30px 0; }
.store-detail-inner { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0,1fr); gap: clamp(28px,5vw,58px); align-items: center; justify-content:center; min-height: calc(100vh - 150px); }
.store-preview--detail { width: min(100%, 320px); aspect-ratio: 680 / 1196; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; justify-self: center; }
.store-preview--detail.store-preview--contain img { padding: 7%; }
.store-detail-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.store-detail-copy h2 { margin: 10px 0 14px; color:#fff; font-family:Georgia,serif; font-size:clamp(36px,6vw,62px); font-weight:500; line-height:1; }
.store-detail-copy p { font-size:14px; max-width:620px; }
.store-detail-price { margin: 24px 0 12px; color:rgba(255,255,255,.88); font-size:15px; }
.store-detail-action { width:min(100%,360px); min-height:50px; border-radius:14px; border:1px solid color-mix(in srgb,var(--auraColor) 40%,transparent); background:color-mix(in srgb,var(--auraColor) 9%,transparent); color:rgba(255,255,255,.65); font-weight:700; letter-spacing:.04em; }
.store-detail-note { font-size:11px!important; color:rgba(255,255,255,.34)!important; max-width:430px!important; }
@media (max-width: 860px) {
  .store-product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .store-product-card { grid-template-columns: 108px minmax(0,1fr); border-radius: 16px; }
  .store-product-card .store-preview { margin: 9px 0 9px 9px; width: calc(100% - 9px); border-radius: 11px; }
  .store-product-copy { padding: 11px 12px; }
  .store-product-title { font-size: 21px; }
  .store-product-short { font-size: 11.5px; }
  .store-product-footer { margin-top: 10px; }
  .store-detail-inner { grid-template-columns: 1fr; min-height:0; align-items:start; }
  .store-preview--detail { width: min(68vw, 260px); }
  .store-detail-copy { text-align:left; }
  .store-detail-copy h2 { font-size:38px; }
  .store-free-core, .store-coming-later { padding:17px; }
}
#storeDetailBack { grid-column: 1; justify-self: start; }
.store-header-copy { grid-column: 2; }
.store-close-btn { grid-column: 3; }

/* ── Oracle Index template ─────────────────────────── */
.ci-row-oracle {
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;
}
.ci-row-oracle .ci-row-info {
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}
.ci-row-keywords {
  display: block;
  color: rgba(255,255,255,0.62);
  font-size: 12.5px;
  line-height: 1.35;
}
.ci-row-oracle-meta {
  display: block;
  color: color-mix(in srgb, var(--auraColor) 72%, white 28%);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}
.ci-oracle-identity {
  margin: 2px 0 20px;
  padding: 14px 0 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ci-oracle-eyebrow {
  color: var(--auraColor);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.ci-oracle-essence {
  color: rgba(255,255,255,.92);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(20px, 5vw, 27px);
  line-height: 1.18;
}
.ci-oracle-reading {
  margin-bottom: 20px;
}
.ci-oracle-signature {
  margin-top: 2px;
  margin-bottom: 20px;
}
.ci-oracle-signature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin-top: 9px;
}
.ci-oracle-signature-grid > div {
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ci-oracle-signature-grid span {
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
}
.ci-oracle-signature-grid strong {
  color: rgba(255,255,255,.84);
  font-size: 13px;
  font-weight: 600;
}
.ci-oracle-guidance {
  margin-top: 4px;
}

/* Phase 0.5: reusable non-interactive ambient FX layer */
#ambientFx {position:fixed;inset:0;z-index:2;width:100vw;height:100dvh;display:none;pointer-events:none;}

/* Phase 0.6: predictable Index card height and centered native proportions.
   Skinny deck art stays uncropped and unstretched until artwork remasters. */
.ci-card-img.ci-liminal-img { object-fit: contain; }
@media (min-width: 640px) {
  .ci-card-img { width: auto; height: min(340px, 50vh); max-width: 100%; margin-inline: auto; object-fit: contain; }
  #cardIndexOverlay[data-mode="full"] .ci-card-img { width: auto; height: min(470px, 58vh); max-width: 100%; max-height: 58vh; }
}

/* Phase 1B: collection-first shop. */
.store-product-grid .store-product-card:first-child { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--auraColor) 38%, rgba(255,255,255,.14)); background: color-mix(in srgb, var(--auraColor) 7%, #090b16); }
.store-product-grid .store-product-card:first-child .store-preview { max-width: 165px; }
.store-bundle-members { margin:18px 0; padding:14px 18px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.035); color:rgba(255,255,255,.85); }
.store-bundle-members strong { display:block; font-size:13px; margin-bottom:8px; }
.store-bundle-members ul { margin:0; padding-left:19px; line-height:1.8; color:rgba(255,255,255,.7); font-size:13px; }
.store-status--available { color:var(--auraColor); border-color:color-mix(in srgb,var(--auraColor) 30%,transparent); }

/* Phase 2 — flagship Divination Essentials merchandising */
.store-product-grid { display: block; }
.store-featured-bundle { width:100%; display:grid; grid-template-columns:minmax(130px,32%) 1fr; gap:clamp(15px,3vw,38px); text-align:left; padding:18px; color:inherit; cursor:pointer; border:1px solid color-mix(in srgb,var(--auraColor) 33%,rgba(255,255,255,.1)); border-radius:22px; background:linear-gradient(125deg,color-mix(in srgb,var(--auraColor) 13%,#111321),#090c18 80%); box-shadow:0 10px 42px rgba(0,0,0,.24); }
.store-featured-bundle:hover,.store-featured-bundle:focus-visible { border-color:var(--auraColor); }
.store-featured-art { display:block; max-width:260px; width:100%; align-self:center; justify-self:center; }
.store-featured-art .store-preview { width:100%; aspect-ratio:680 / 1040; border-radius:14px; border:1px solid rgba(255,255,255,.12); }
.store-featured-copy { display:flex; min-width:0; flex-direction:column; justify-content:center; gap:14px; }
.store-featured-top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.store-featured-title { font:normal clamp(29px,4.5vw,51px)/1.06 Georgia,serif; color:white; }
.store-featured-summary { color:rgba(255,255,255,.72); font-size:14px; line-height:1.7; max-width:600px; }
.store-featured-contents { display:flex; flex-wrap:wrap; gap:7px; }
.store-featured-contents span { border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:6px 9px; color:rgba(255,255,255,.77); font-size:11px; }
.store-featured-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; border-top:1px solid rgba(255,255,255,.11); color:rgba(255,255,255,.65); font-size:12px; }
.store-featured-action { color:var(--auraColor); font-weight:700; }
.store-standalone-head { margin:30px 0 15px; }
.store-standalone-head h3 { margin:7px 0 5px; font:normal 27px Georgia,serif; color:white; }
.store-standalone-head p { margin:0; color:rgba(255,255,255,.57); font-size:13px; }
.store-standalone-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.store-member-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.store-bundle-members,.store-included-callout { margin-top:22px; padding:16px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.035); }
.store-bundle-members strong { color:white; }
.store-bundle-members p { margin:6px 0 8px; font-size:12px; }
.store-member-link,.store-included-callout button { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; padding:11px 12px; border:1px solid rgba(255,255,255,.12); border-radius:11px; background:rgba(255,255,255,.045); color:white; font:inherit; font-size:12px; cursor:pointer; }
.store-member-link:hover,.store-member-link:focus-visible,.store-included-callout button:hover { border-color:var(--auraColor); }
.store-member-link-arrow { color:var(--auraColor); }
.store-included-callout { display:grid; gap:8px; }
.store-included-callout button { width:fit-content; color:var(--auraColor); }
.store-included-callout > span:last-child { font-size:12px; color:rgba(255,255,255,.58); }
.store-status--available { color:rgba(255,255,255,.8); background:rgba(255,255,255,.045); }
@media (max-width:860px) { .store-standalone-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .store-featured-bundle { grid-template-columns:1fr; padding:15px; } .store-featured-art { max-width:165px; } .store-featured-copy { gap:12px; } .store-member-links { grid-template-columns:1fr; } }

/* Canvas presets: compact controls matching Settings */
.preset-summary{margin:12px 0 10px;padding:12px 13px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.035);}
.preset-summary__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:9px;}
.preset-summary__head strong{color:rgba(255,255,255,.92);font-size:13px;letter-spacing:.02em;}
.preset-summary__head span{color:rgba(255,255,255,.54);font-size:11px;}
.preset-summary__grid{display:grid;grid-template-columns:minmax(82px,auto) 1fr;gap:6px 10px;font-size:12px;line-height:1.5;}
.preset-summary__grid > span:nth-child(odd){color:rgba(255,255,255,.56);}
.preset-summary__grid > span:nth-child(even){color:rgba(255,255,255,.84);}
.preset-summary__lock{margin-top:10px;font-size:11px;color:rgba(255,255,255,.62);}
.preset-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
.preset-actions .preset-action-btn{min-height:40px;color:rgba(255,255,255,.92);background:rgba(255,255,255,.06);border:1px solid color-mix(in srgb, var(--auraColor) 38%, rgba(255,255,255,.08));box-shadow:none;font-weight:600;}
.preset-actions .preset-action-btn:hover,.preset-actions .preset-action-btn:focus-visible{border-color:color-mix(in srgb, var(--auraColor) 75%, white 10%);background:rgba(255,255,255,.10);}
.preset-actions .preset-action-btn--primary{background:color-mix(in srgb, var(--auraColor) 18%, rgba(255,255,255,.06));}
.preset-actions .preset-action-btn--danger{border-color:rgba(220,120,132,.34);}
.preset-actions button:disabled{opacity:.42;color:rgba(255,255,255,.48);}
#canvasPresetStatus{min-height:1.5em;}

/* Developer-only settings: cannot be revealed by generic section CSS. */
html[data-access-mode="free"] #developerPresetSection,
#developerPresetSection[hidden] { display: none !important; }