/*
 * RetroLogic presentation foundation. Loaded by index.html (Phase 2A); scoped to
 * .rl-home-design on the Home header and upper Home wrapper only.
 * Retains every existing DOM ID, event handler, visibility attribute and state owner.
 * Palette: user's supplied "Modern interface. Analog soul." brief.
 */
.rl-home-design {
  --rl-navy: var(--rl-shell);
  --rl-cream: var(--rl-surface);
  --rl-paper: var(--rl-page);
  --rl-lavender: var(--rl-surface-secondary);
  --rl-pink: var(--rl-brand);
  --rl-cyan: var(--rl-brand-ink);
  --rl-orange: var(--rl-action);
  --rl-slate: var(--rl-text-muted);
  /* Phase 4A: root --rl-action is sunset orange; Home's contrast-safe pink is --rl-brand-ink. */
  --rl-ink: var(--rl-text);
  --rl-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rl-font-display: "Rajdhani", var(--rl-font-body);
  --rl-space-1: 0.25rem;
  --rl-space-2: 0.5rem;
  --rl-space-3: 0.75rem;
  --rl-space-4: 1rem;
  --rl-space-6: 1.5rem;
  --rl-space-8: 2rem;
  --rl-radius-sm: 0.5rem;
  --rl-radius-card: 1rem;
  --rl-shadow-card: 0 6px 24px rgb(16 21 47 / 8%);
}

/* Opt-in visual primitives only. Never use these to override hidden/locked UI. */
.rl-home-design .rl-paper-card {
  color: var(--rl-ink);
  background-color: var(--rl-surface);
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px, rgb(16 21 47 / 1%) 3px,
    rgb(16 21 47 / 1%) 4px
  );
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-card);
  box-shadow: var(--rl-shadow-card);
  padding: var(--rl-space-6);
}

.rl-home-design .rl-cinematic-panel {
  color: var(--rl-cream);
  background-color: var(--rl-navy);
  border-radius: var(--rl-radius-card);
}

.rl-home-design .rl-section-title {
  color: inherit;
  font-family: var(--rl-font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.015em;
}

.rl-home-design .rl-body-copy {
  font-family: var(--rl-font-body);
  font-size: 1rem;
  line-height: 1.6;
}

.rl-home-design .rl-eyebrow {
  font-family: var(--rl-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rl-home-design .rl-primary-action,
.rl-home-design .rl-secondary-action {
  min-height: 44px;
  padding: var(--rl-space-3) var(--rl-space-6);
  border: 1px solid transparent;
  border-radius: var(--rl-radius-sm);
  font: 700 1rem/1.4 var(--rl-font-body);
  text-align: center;
}

.rl-home-design .rl-primary-action {
  color: #fff;
  background: var(--rl-brand-ink);
}

.rl-home-design .rl-secondary-action {
  color: var(--rl-ink);
  background: var(--rl-lavender);
  border-color: var(--rl-border);
}

.rl-home-design .rl-primary-action:focus-visible,
.rl-home-design .rl-secondary-action:focus-visible {
  outline: 3px solid var(--rl-cyan);
  outline-offset: 3px;
}

.rl-home-design .rl-primary-action:disabled,
.rl-home-design .rl-secondary-action:disabled {
  opacity: 0.65;
}

/* Apply to existing progress fill nodes, not replacement progress widgets. */
.rl-home-design .rl-progress-fill {
  background: var(--rl-cyan);
  border-radius: 999px;
}

.rl-home-design .rl-artwork {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--rl-radius-card);
}
/* ══════════════════════════════════════════════════════════════
 * PHASE 2B — Home surroundings visual consistency (CSS-only).
 * Scope: .app-layout > .app-sidebar, .app-layout > .app-right,
 * .app-layout .dash-scroll > #dashPremiumTeaser. Colour/border/
 * shadow/type only — no display, sizing, position or layout changes.
 * ══════════════════════════════════════════════════════════════ */
.app-layout {
  --rl2-navy: var(--rl-shell);
  --rl2-navy-2: var(--rl-surface);
  --rl2-cream: var(--rl-text);
  --rl2-line: var(--rl-border);
  --rl2-line-warm: var(--rl-border);
  --rl2-muted: var(--rl-text-muted);
  --rl2-gold: var(--rl-gold-ink);
  --rl2-coral: var(--rl-brand-ink);
  --rl2-pink: var(--rl-brand);
  --rl2-cyan: var(--rl-brand-ink);
}

/* Sidebar */
.app-layout > .app-sidebar {
  background: var(--rl2-navy);
  border-right-color: var(--rl-border-dark);
}
.app-layout > .app-sidebar .asb-brand { border-bottom-color: var(--rl-border-dark); }
.app-layout > .app-sidebar .asb-brand-subtitle,
.app-layout > .app-sidebar .asb-tagline { color: rgb(244 191 66 / 72%); text-shadow: none; }
.app-layout > .app-sidebar .asb-nav-item { color: var(--rl-ui-text-muted-on-dark); }
.app-layout > .app-sidebar .asb-nav-item:hover { background: rgb(255 247 235 / 6%); color: var(--rl-surface); }
.app-layout > .app-sidebar .asb-nav-item.asb-active {
  background: rgb(255 247 235 / 8%);
  color: var(--rl-surface);
  border-left-color: var(--rl-brand);
}
.app-layout > .app-sidebar .asb-nav-primary .asb-nav-icon,
.app-layout > .app-sidebar .asb-nav-primary:hover .asb-nav-icon,
.app-layout > .app-sidebar .asb-nav-primary.asb-active .asb-nav-icon { filter: none; }
.app-layout > .app-sidebar .asb-approved {
  background: rgb(255 247 235 / 5%);
  border-color: var(--rl-border-dark);
}
.app-layout > .app-sidebar .asb-approved-title { color: var(--rl-gold); }
.app-layout > .app-sidebar .asb-approved-mascot { filter: none; }
.app-layout > .app-sidebar .asb-approved-msg { color: var(--rl-ui-text-muted-on-dark); }
.app-layout > .app-sidebar .asb-badges-btn {
  background: var(--rl-surface);
  color: var(--rl2-navy);
  box-shadow: none;
}
.app-layout > .app-sidebar .asb-badges-btn:hover { background: #f5ead7; }
.app-layout > .app-sidebar .asb-footer-link { color: var(--rl-ui-text-muted-on-dark); }
.app-layout > .app-sidebar a:focus-visible,
.app-layout > .app-sidebar button:focus-visible { outline: 2px solid var(--rl-brand); outline-offset: 2px; }

/* Right column */
.app-layout > .app-right {
  background: var(--rl-page);
  border-left-color: var(--rl2-line);
}
.app-layout > .app-right > .arp-card {
  background: var(--rl2-navy-2);
  border: 1px solid var(--rl2-line);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}
.app-layout > .app-right > .arp-card.arp-progress {
  border-color: var(--rl2-line-warm);
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}
.app-layout > .app-right .arp-label {
  color: var(--rl2-gold);
  text-shadow: none;
}
.app-layout > .app-right .arp-progress .donut {
  box-shadow: none;
}
.app-layout > .app-right .arp-donut-inner {
  background: var(--rl-surface);
}
.app-layout > .app-right .arp-level-val,
.app-layout > .app-right .arp-stat-val,
.app-layout > .app-right .arp-xp-line { color: var(--rl2-cream); text-shadow: none; }
.app-layout > .app-right .arp-level-num,
.app-layout > .app-right .arp-xp-of,
.app-layout > .app-right .arp-stat-lbl,
.app-layout > .app-right .arp-next-lvl { color: var(--rl2-muted); text-shadow: none; }
.app-layout > .app-right .arp-stat-divider { background: var(--rl2-line); }
.app-layout > .app-right .arp-xp-bar { background: var(--rl-surface-secondary); box-shadow: none; }
.app-layout > .app-right .arp-xp-bar > i#dashXPFill {
  background: linear-gradient(90deg, var(--rl-action), var(--rl-gold));
  box-shadow: none;
}
.app-layout > .app-right .arp-detail-btn {
  border-color: var(--rl-ui-border-control-on-light);
  color: var(--rl2-muted);
}
.app-layout > .app-right .arp-detail-btn:hover {
  border-color: var(--rl-brand-ink);
  color: var(--rl2-cream);
  background: var(--rl-surface-secondary);
}
.app-layout > .app-right #lasCounter { color: var(--rl2-muted) !important; }
.app-layout > .app-right .las-earned {
  background: rgb(244 191 66 / 7%);
  border-color: rgb(244 191 66 / 20%);
}
.app-layout > .app-right .las-locked { border-color: var(--rl-border); }
.app-layout > .app-right .las-earned .las-name { color: var(--rl2-cream); }
.app-layout > .app-right .las-earned .las-desc { color: var(--rl2-muted); }
.app-layout > .app-right .las-locked .las-name { color: rgb(255 247 235 / 36%); }
.app-layout > .app-right .las-locked .las-desc { color: rgb(255 247 235 / 26%); }
.app-layout > .app-right .las-tick { color: var(--rl2-gold); }
.app-layout > .app-right .arp-now-playing #dashSoundtrackWidget * { text-shadow: none; }
.app-layout > .app-right .arp-wins-hdr .ghost {
  border-color: rgb(255 116 79 / 45%);
  color: var(--rl2-coral);
  box-shadow: none;
}
.app-layout > .app-right button:focus-visible { outline: 2px solid var(--rl2-cyan); outline-offset: 2px; }

/* Lower Home: premium teaser */
.app-layout .dash-scroll > #dashPremiumTeaser {
  background: var(--rl2-navy-2);
  border-color: var(--rl2-line-warm);
  border-radius: 18px;
}
.app-layout .dash-scroll > #dashPremiumTeaser .dpt-label { color: var(--rl2-gold); }
.app-layout .dash-scroll > #dashPremiumTeaser .dpt-sub { color: var(--rl2-muted); }
.app-layout .dash-scroll > #dashPremiumTeaser .dpt-tile {
  background: rgb(255 247 235 / 4%);
  border-color: var(--rl2-line);
  border-radius: 14px;
}
.app-layout .dash-scroll > #dashPremiumTeaser .dpt-tile:hover {
  background: rgb(255 247 235 / 7%);
  border-color: rgb(255 116 79 / 40%);
}
.app-layout .dash-scroll > #dashPremiumTeaser .dpt-tile:focus-visible { outline: 2px solid var(--rl2-cyan); outline-offset: 2px; }
.app-layout .dash-scroll > #dashPremiumTeaser .dpt-tile-name { color: var(--rl2-cream); }
.app-layout .dash-scroll > #dashPremiumTeaser .dpt-tile-desc { color: var(--rl2-muted); }
.app-layout .dash-scroll > #dashPremiumTeaser .dpt-tile-cta { color: var(--rl2-coral); text-shadow: none; }
.app-layout .dash-scroll > #dashPremiumTeaser .dpt-preview-badge {
  background: rgb(244 191 66 / 14%);
  border-color: rgb(244 191 66 / 35%);
  color: var(--rl2-gold);
  box-shadow: none;
}

/* ── PHASE 2B.1 — generated Home widgets + locked-badge contrast ── */
/* Locked achievements: opaque muted tones (icon greyscale/opacity untouched). */
.app-layout > .app-right .las-locked .las-name { color: var(--rl-text-muted); }
.app-layout > .app-right .las-locked .las-desc { color: var(--rl-text-muted); }

/* Now Playing (#dashSoundtrackWidget, generated with inline colours) */
.app-layout > .app-right #dashSoundtrackWidget > div:first-child { color: var(--rl2-gold) !important; }
.app-layout > .app-right #dashSoundtrackWidget > div:nth-child(2) > div > div:nth-child(1) { color: var(--rl2-cream) !important; }
.app-layout > .app-right #dashSoundtrackWidget > div:nth-child(2) > div > div:nth-child(2) { color: var(--rl2-muted) !important; }
.app-layout > .app-right #dashSoundtrackWidget > div:nth-child(2) > div > div:nth-child(3) { color: var(--rl-text-muted) !important; }
.app-layout > .app-right #dashSoundtrackWidget button {
  background: var(--rl-surface-secondary) !important;
  border-color: var(--rl-ui-border-control-on-light) !important;
  color: var(--rl2-cream) !important;
}
.app-layout > .app-right #dashSoundtrackWidget button:first-child { border-color: var(--rl-border) !important; color: var(--rl2-cyan) !important; }
.app-layout > .app-right #dashSoundtrackWidget button[title^="Watch"] { border-color: var(--rl-border) !important; color: var(--rl2-coral) !important; }
.app-layout > .app-right #dashSoundtrackWidget button:hover { background: var(--rl-page) !important; }

/* Tape Deck (#tapeDeckContainer .tape-deck-card) */
.app-layout .dash-scroll > #tapeDeckContainer .tape-deck-card {
  background: #f3e5cf;
  border: 1px solid #b49a69;
  border-top: 4px solid var(--rl-shell);
  border-left: 4px solid #b9694e;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgb(36 29 20 / 14%), inset 0 1px 0 rgb(255 255 255 / 65%);
}
.app-layout .dash-scroll > #tapeDeckContainer .tape-deck-label {
  color: #65471a;
  font-family: 'Rajdhani', 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.4px;
  margin-bottom: 10px;
  text-shadow: none;
}
.app-layout .dash-scroll > #tapeDeckContainer .tape-deck-title {
  color: var(--rl-shell);
  font-family: 'Rajdhani', 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .8px;
  text-shadow: none;
}
.app-layout .dash-scroll > #tapeDeckContainer .tape-deck-body { color: var(--rl-text); }
.app-layout .dash-scroll > #tapeDeckContainer .tape-deck-sig { color: var(--rl2-coral); }

/* Solo High Score Board (#soloScoreContainer) */
.app-layout .dash-scroll > #soloScoreContainer .solo-score-board {
  background: var(--rl2-navy-2);
  border: 1px solid var(--rl2-line);
  border-radius: 18px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}
.app-layout .dash-scroll > #soloScoreContainer .solo-score-hdr { border-color: var(--rl2-line); }
.app-layout .dash-scroll > #soloScoreContainer .solo-score-hdr-title { color: var(--rl2-gold); text-shadow: none; }
.app-layout .dash-scroll > #soloScoreContainer .solo-score-hdr-reset,
.app-layout .dash-scroll > #soloScoreContainer .solo-score-week { color: var(--rl2-muted); }
.app-layout .dash-scroll > #soloScoreContainer .solo-score-xp { color: var(--rl2-cream); text-shadow: none; }
.app-layout .dash-scroll > #soloScoreContainer .solo-score-bar-wrap { background: var(--rl-surface-secondary); }
.app-layout .dash-scroll > #soloScoreContainer .solo-score-bar {
  background: linear-gradient(90deg, var(--rl-action), var(--rl-gold));
  box-shadow: none;
}
.app-layout .dash-scroll > #soloScoreContainer .current-week .solo-score-week,
.app-layout .dash-scroll > #soloScoreContainer .current-week .solo-score-xp { color: var(--rl2-gold); }
.app-layout .dash-scroll > #soloScoreContainer > div:not(.solo-score-board) { color: var(--rl-text-muted) !important; }

/* Mini Leaderboard (#lbMiniContainer, inline-styled; tier accent colours kept) */
.app-layout .dash-scroll > #lbMiniContainer > div {
  background: var(--rl2-navy-2) !important;
  border-color: var(--rl2-line) !important;
  box-shadow: none !important;
}
.app-layout .dash-scroll > #lbMiniContainer [style*="color:#fff"] { color: var(--rl2-cream) !important; }
.app-layout .dash-scroll > #lbMiniContainer [style*="rgba(255,255,255,0.4"],
.app-layout .dash-scroll > #lbMiniContainer [style*="rgba(255,255,255,0.6"],
.app-layout .dash-scroll > #lbMiniContainer [style*="rgba(255,255,255,0.7"] { color: var(--rl-text-muted) !important; }