/* ============================================================
   theme.css — shared design tokens, color themes, transparency,
   and ambient background effects for every page on the site.
   ============================================================
   Default theme = the site's original, unchanged look. Its ambient
   effect (galaxy system + motes) is always on for every visitor,
   logged in or not -- it's simply the site's baseline now, not a
   toggle anyone needs access to see.

   The other 6 palettes, transparency levels, background image, and
   the ability to turn ambient effects off are gated to Leadership +
   Mani/Suhana only (see js/theme.js + backend/theme-routes.js).
   Everyone else always renders Default with orbs on, full stop.
   ============================================================ */

:root {
    --void-deep: #070b18;
    --void: #0d1428;
    --void-soft: #141d38;
    --aether: #6fd7e8;
    --aether-dim: #3a8a9c;
    --crystal-gold: #d9b870;
    --gold-soft: #8a7548;
    --ember: #e0633f;
    --parchment: #e8e4d8;
    --parchment-dim: #9aa3b8;

    /* RGB channel triples for the void colors, used by the transparency
     system below -- rgb(r g b / alpha) needs raw channels, not hex. */
    --void-deep-rgb: 7 11 24;
    --void-rgb: 13 20 40;
    --void-soft-rgb: 20 29 56;

    /* Surface transparency (Theme modal, per-account, Leadership/bypass
     only) -- None leaves every panel exactly as opaque as it always
     was. Panels should use --surface-bg-* instead of --void-* directly
     for their backgrounds so this one setting controls all of them. */
    --surface-alpha: 1;
    --surface-blur: 0px;
    --surface-bg-deep: rgb(var(--void-deep-rgb) / var(--surface-alpha));
    --surface-bg: rgb(var(--void-rgb) / var(--surface-alpha));
    --surface-bg-soft: rgb(var(--void-soft-rgb) / var(--surface-alpha));
}

/* ---------- Pink ---------- */
:root[data-theme='pink'] {
    --void-deep: #1a0f16;
    --void: #241521;
    --void-soft: #2e1c2a;
    --void-deep-rgb: 26 15 22;
    --void-rgb: 36 21 33;
    --void-soft-rgb: 46 28 42;
    --aether: #ff8fb1;
    --aether-dim: #b35c78;
    --crystal-gold: #f2a6c4;
    --gold-soft: #a06c81;
    --ember: #ff6f91;
    --parchment: #f5e6ee;
    --parchment-dim: #cbb3bf;
}

/* ---------- Catppuccin Mocha ---------- */
:root[data-theme='catppuccin'] {
    --void-deep: #11111b;
    --void: #1e1e2e;
    --void-soft: #313244;
    --void-deep-rgb: 17 17 27;
    --void-rgb: 30 30 46;
    --void-soft-rgb: 49 50 68;
    --aether: #89b4fa;
    --aether-dim: #5c7ab0;
    --crystal-gold: #f9e2af;
    --gold-soft: #ad9c78;
    --ember: #f38ba8;
    --parchment: #cdd6f4;
    --parchment-dim: #9aa1b8;
}

/* ---------- Nord ---------- */
:root[data-theme='nord'] {
    --void-deep: #2e3440;
    --void: #3b4252;
    --void-soft: #434c5e;
    --void-deep-rgb: 46 52 64;
    --void-rgb: 59 66 82;
    --void-soft-rgb: 67 76 94;
    --aether: #88c0d0;
    --aether-dim: #5e8894;
    --crystal-gold: #ebcb8b;
    --gold-soft: #a58f61;
    --ember: #bf616a;
    --parchment: #eceff4;
    --parchment-dim: #b8c0cc;
}

/* ---------- Dracula ---------- */
:root[data-theme='dracula'] {
    --void-deep: #1e1f29;
    --void: #282a36;
    --void-soft: #44475a;
    --void-deep-rgb: 30 31 41;
    --void-rgb: 40 42 54;
    --void-soft-rgb: 68 71 90;
    --aether: #bd93f9;
    --aether-dim: #7e64a8;
    --crystal-gold: #f1fa8c;
    --gold-soft: #a5ad61;
    --ember: #ff5555;
    --parchment: #f8f8f2;
    --parchment-dim: #c2c2ba;
}

/* ---------- Gruvbox Dark ---------- */
:root[data-theme='gruvbox'] {
    --void-deep: #1d2021;
    --void: #282828;
    --void-soft: #3c3836;
    --void-deep-rgb: 29 32 33;
    --void-rgb: 40 40 40;
    --void-soft-rgb: 60 56 54;
    --aether: #83a598;
    --aether-dim: #5a7268;
    --crystal-gold: #fabd2f;
    --gold-soft: #ad8321;
    --ember: #fb4934;
    --parchment: #ebdbb2;
    --parchment-dim: #b8ab8c;
}

/* ---------- Rosé Pine ---------- */
:root[data-theme='rosepine'] {
    --void-deep: #191724;
    --void: #1f1d2e;
    --void-soft: #26233a;
    --void-deep-rgb: 25 23 36;
    --void-rgb: 31 29 46;
    --void-soft-rgb: 38 35 58;
    --aether: #9ccfd8;
    --aether-dim: #6c8f96;
    --crystal-gold: #f6c177;
    --gold-soft: #a98653;
    --ember: #eb6f92;
    --parchment: #e0def4;
    --parchment-dim: #ada9c2;
}

/* ============================================================
   Custom background image (per-account, Leadership/bypass only) --
   applied to <body>, with a dark scrim so any photo stays readable
   under text. Pages must NOT paint their own opaque background on
   top of body for this to show through -- see the notes near each
   page's root container.
   ============================================================ */
body.has-custom-bg {
    background-size: cover;
    background-position: center;
}
/* background-attachment:fixed is a well-known source of mobile browser
   bugs (flicker, the image detaching/jumping mid-scroll, real scroll
   jank) especially on iOS Safari -- desktop-only, where it's safe and
   is what actually makes the backdrop feel truly fixed behind scrolling
   content. */
@media (min-width: 600px) {
    body.has-custom-bg {
        background-attachment: fixed;
    }
}
body.has-custom-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -4;
    background: rgba(7, 11, 24, 0.55);
    pointer-events: none;
}

/* .galaxy-sky (js/theme.js's buildGalaxy(), injected into every page's
   <body> for the Default theme, unconditionally) ends in the same solid
   linear-gradient(...) fallback as advent-children-hero.html's own .sky
   -- it was covering the custom background image on literally every
   page, not just the landing page. The nebula radial-gradients and
   twinkling stars/blobs/spirals on top of it aren't opaque, so those
   still layer over a custom photo same as they would over the default
   void-color backdrop; only this element's own base fill needed
   suppressing. */
body.has-custom-bg .galaxy-sky {
    background: none;
}

/* ============================================================
   Ambient background — Default theme's galaxy system (stars,
   breathing nebula blobs, spirals, bright "spike" stars) ported from
   the Feed page, plus drifting motes from the landing page. Always on
   for Default theme, for every visitor. Scale ceiling lowered from the
   Feed page's original 3.6x to 2x -- this now runs continuously on
   every page rather than one atmospheric page you visit occasionally.
   ============================================================ */
.galaxy-sky {
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(ellipse 60% 45% at 25% 15%, rgba(155, 89, 182, 0.1), transparent 70%),
        radial-gradient(ellipse 55% 50% at 80% 30%, rgba(111, 215, 232, 0.09), transparent 70%),
        radial-gradient(ellipse 65% 55% at 55% 85%, rgba(224, 99, 63, 0.06), transparent 70%),
        linear-gradient(180deg, var(--void-deep) 0%, var(--void) 45%, var(--void-deep) 100%);
}

.galaxy-stars {
    position: fixed;
    inset: 0;
    z-index: -2;
    opacity: 0.65;
    pointer-events: none;
}
.galaxy-star {
    position: absolute;
    border-radius: 50%;
    background: var(--parchment);
    animation: galaxy-twinkle var(--dur, 4s) ease-in-out infinite;
    opacity: var(--op, 0.6);
}
.galaxy-star.bright {
    background: var(--aether);
    box-shadow: 0 0 6px 1px rgba(111, 215, 232, 0.6);
}
.galaxy-star.gold {
    background: var(--crystal-gold);
    box-shadow: 0 0 6px 1px rgba(217, 184, 112, 0.5);
}
@keyframes galaxy-twinkle {
    0%,
    100% {
        opacity: 0.15;
    }
    50% {
        opacity: var(--op, 0.7);
    }
}

.galaxy-deepfield {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}
.galaxy-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(1.5px);
    animation: galaxy-breathe var(--bdur, 10s) ease-in-out infinite;
    opacity: var(--bop, 0.35);
}
.galaxy-blob.warm {
    background: radial-gradient(
        ellipse at center,
        rgba(217, 184, 112, 0.9),
        rgba(224, 99, 63, 0.4) 55%,
        transparent 80%
    );
}
.galaxy-blob.cool {
    background: radial-gradient(
        ellipse at center,
        rgba(111, 215, 232, 0.7),
        rgba(58, 138, 156, 0.35) 55%,
        transparent 80%
    );
}
.galaxy-blob.pale {
    background: radial-gradient(
        ellipse at center,
        rgba(232, 228, 216, 0.6),
        rgba(154, 163, 184, 0.3) 55%,
        transparent 80%
    );
}
@keyframes galaxy-breathe {
    0%,
    100% {
        opacity: var(--bop, 0.35);
    }
    50% {
        opacity: calc(var(--bop, 0.35) * 0.6);
    }
}
.galaxy-spiral {
    position: absolute;
    animation: galaxy-breathe var(--bdur, 12s) ease-in-out infinite;
    opacity: var(--bop, 0.5);
}
.galaxy-spike {
    position: absolute;
    width: var(--spike-size, 40px);
    height: var(--spike-size, 40px);
    animation: galaxy-twinkle var(--dur, 5s) ease-in-out infinite;
    opacity: var(--op, 0.85);
}
.galaxy-spike .core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background: var(--parchment);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 4px 1px rgba(232, 228, 216, 0.9);
}
.galaxy-spike .ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--spike-color, var(--aether)), transparent);
    transform-origin: center;
}
.galaxy-spike .ray.r0 {
    transform: translate(-50%, -50%) rotate(0deg);
}
.galaxy-spike .ray.r90 {
    transform: translate(-50%, -50%) rotate(90deg);
}
.galaxy-spike .ray.r45 {
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.5;
    width: 65%;
}
.galaxy-spike .ray.r135 {
    transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5;
    width: 65%;
}

/* Drifting motes -- same shape as the dashboard's ambient orbs, top-to-
   bottom for consistency with that system. Default theme keeps its
   original teal/gold coloring; other themes (Leadership/bypass opt-in
   only) reskin these into their own signature shape below, with no
   galaxy backdrop at all -- the galaxy is Default's own identity. */
.ambient-field {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.orb {
    position: absolute;
    top: -10px;
    width: var(--size, 6px);
    height: var(--size, 6px);
    border-radius: 50%;
    background: var(--aether);
    box-shadow: 0 0 12px 4px rgba(111, 215, 232, 0.7);
    animation: orb-fall var(--dur, 14s) linear infinite;
    opacity: 0;
}
.orb.gold {
    background: var(--crystal-gold);
    box-shadow: 0 0 12px 4px rgba(217, 184, 112, 0.7);
}
@keyframes orb-fall {
    0% {
        transform: translateY(0) translateX(0) scale(0.6);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(110vh) translateX(var(--dx, 20px)) scale(1);
        opacity: 0;
    }
}

/* ---------- Non-default theme orb reskins (no galaxy backdrop) ---------- */
[data-theme='catppuccin'] .ambient-field .orb:nth-child(3n) {
    background: #cba6f7;
    box-shadow: 0 0 12px 4px rgba(203, 166, 247, 0.7);
}

[data-theme='dracula'] .ambient-field .orb {
    background: var(--aether);
    box-shadow: 0 0 14px 4px rgba(189, 147, 249, 0.7);
}
[data-theme='dracula'] .ambient-field .orb:nth-child(4n) {
    width: calc(var(--size, 6px) * 2.2);
    height: calc(var(--size, 6px) * 2.2);
    filter: blur(3px);
    opacity: 0.35;
    box-shadow: none;
}

[data-theme='gruvbox'] .ambient-field .orb {
    background: #fe8019;
    box-shadow: 0 0 14px 4px rgba(254, 128, 25, 0.75);
    animation-name: orb-fall, ember-flicker;
    animation-duration: var(--dur, 14s), 0.6s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}
@keyframes ember-flicker {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.6);
    }
}

[data-theme='rosepine'] .ambient-field .orb {
    background: var(--crystal-gold);
    box-shadow: 0 0 14px 5px rgba(246, 193, 119, 0.7);
    filter: blur(0.5px);
}

[data-theme='pink'] .ambient-field .orb {
    background: transparent;
    box-shadow: none;
    font-size: calc(var(--size, 6px) * 2.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme='pink'] .ambient-field .orb::after {
    content: '🌸';
    filter: drop-shadow(0 0 8px rgba(255, 143, 177, 0.85)) drop-shadow(0 0 4px rgba(255, 143, 177, 0.9));
}

[data-theme='nord'] .ambient-field .orb {
    background: transparent;
    box-shadow: none;
    font-size: calc(var(--size, 6px) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme='nord'] .ambient-field .orb::after {
    content: '❄';
    color: var(--aether);
    filter: drop-shadow(0 0 8px rgba(136, 192, 208, 0.85)) drop-shadow(0 0 4px rgba(136, 192, 208, 0.9));
}

/* ============================================================
   Theme settings modal (js/theme.js) -- Leadership/bypass only,
   opened from the "Themes" item in the account dropdown.
   ============================================================ */
.tac-theme-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(7, 11, 24, 0.8);
    align-items: center;
    justify-content: center;
}
.tac-theme-modal-overlay.open {
    display: flex;
}

.tac-theme-modal {
    background: var(--surface-bg);
    backdrop-filter: blur(var(--surface-blur));
    border: 1px solid var(--aether-dim);
    border-radius: 8px;
    padding: 1.25rem;
    max-width: 440px;
    width: 90%;
    /* 90vh (was 85vh) plus the section-chrome trims below bring the
     modal's natural content height comfortably under this cap at
     common laptop heights (was overflowing by 150-190px at 768-800px
     tall viewports) -- overflow-y stays as a safety net, not the
     expected path. */
    max-height: 90vh;
    overflow-y: auto;
    font-family: 'Spectral', serif;
}

.tac-theme-modal h2 {
    font-family: 'Cinzel', serif;
    color: var(--crystal-gold);
    margin: 0 0 0.3rem 0;
    font-size: 1.3rem;
}

.tac-theme-hint {
    color: var(--parchment-dim);
    font-size: 0.8rem;
    margin: 0 0 0.6rem 0;
}

.tac-theme-section {
    border-top: 1px solid var(--aether-dim);
    padding-top: 0.4rem;
    margin-top: 0.4rem;
}

.tac-theme-label {
    display: block;
    color: var(--parchment-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.tac-theme-swatches {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.tac-theme-swatch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-bg-soft);
    backdrop-filter: blur(var(--surface-blur));
    border: 1px solid var(--aether-dim);
    color: var(--parchment);
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Spectral', serif;
    font-size: 0.85rem;
    text-align: left;
}
.tac-theme-swatch:hover {
    border-color: var(--aether);
}
.tac-theme-swatch.active {
    background: color-mix(in srgb, var(--aether-dim) calc(var(--surface-alpha) * 100%), transparent);
    border-color: var(--aether);
    color: var(--void-deep);
}

.tac-theme-swatch-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.tac-theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--parchment);
    font-size: 0.88rem;
}

/* Replaces the old 4-button row (none/50/60/70) with a single 0-70
   slider (step 10) -- the label next to "Transparency" (see js/theme.js)
   shows the current value, this is just the track/thumb. Custom-styled
   per browser engine since range inputs don't share one standard set of
   pseudo-elements. */
.tac-theme-transparency-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin-top: 0.3rem;
}
.tac-theme-transparency-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-bg-soft);
    border: 1px solid var(--aether-dim);
}
.tac-theme-transparency-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-bg-soft);
    border: 1px solid var(--aether-dim);
}
.tac-theme-transparency-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--crystal-gold);
    border: 1px solid var(--void-deep);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.tac-theme-transparency-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--crystal-gold);
    border: 1px solid var(--void-deep);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.tac-theme-transparency-slider:hover::-webkit-slider-thumb,
.tac-theme-transparency-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--aether-dim);
}
.tac-theme-transparency-slider:hover::-moz-range-thumb,
.tac-theme-transparency-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--aether-dim);
}
#tacTransparencyValue {
    color: var(--crystal-gold);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: normal;
    text-transform: none;
}

.tac-theme-bg-controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.tac-theme-browse {
    background: var(--surface-bg-soft);
    backdrop-filter: blur(var(--surface-blur));
    border: 1px solid var(--crystal-gold);
    color: var(--crystal-gold);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
}
.tac-theme-browse:hover {
    background: color-mix(in srgb, var(--crystal-gold) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}

.tac-theme-clear-bg {
    background: var(--surface-bg-soft);
    backdrop-filter: blur(var(--surface-blur));
    border: 1px solid var(--ember);
    color: var(--ember);
    padding: 0.4rem 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Spectral', serif;
    font-size: 0.8rem;
}
.tac-theme-clear-bg:hover {
    background: color-mix(in srgb, var(--ember) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}

.tac-theme-heatmap-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.tac-theme-heatmap-controls label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--parchment);
    font-size: 0.8rem;
}
.tac-theme-heatmap-controls input[type='color'] {
    width: 1.8rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid var(--aether-dim);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

.tac-theme-error {
    color: var(--ember);
    font-size: 0.8rem;
    margin: 0.5rem 0 0 0;
}

.tac-theme-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.tac-theme-close {
    background: var(--surface-bg-soft);
    backdrop-filter: blur(var(--surface-blur));
    border: 1px solid var(--aether-dim);
    color: var(--aether);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    border-radius: 4px;
}
.tac-theme-close:hover {
    background: color-mix(in srgb, var(--aether-dim) calc(var(--surface-alpha) * 100%), transparent);
    color: var(--void-deep);
}

/* ============================================================
   Reusable hover tooltip -- add data-tooltip="..." to any element.
   For non-obvious controls (icon-only buttons, toggle counters,
   badges) where a short explanation is genuinely useful, not a
   caption on every field.
   ============================================================ */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--void-deep);
    color: var(--parchment);
    border: 1px solid var(--aether-dim);
    padding: 0.4rem 0.65rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-family: 'Spectral', serif;
    line-height: 1.3;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 200;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* For a [data-tooltip] element sitting near the right edge of a narrow
   container (e.g. the last button in a row inside a floating panel) --
   the default centered tooltip can overflow past the container's edge
   and widen its scrollable area. Anchoring the tooltip's own right edge
   to the element's right edge instead of centering it keeps it growing
   leftward, into the available space, rather than out past the edge. */
[data-tooltip].tooltip-anchor-right::after {
    left: auto;
    right: 0;
    transform: none;
}

/* Same idea, opposite edge -- for an element sitting near the LEFT edge
   of a narrow container, anchor the tooltip's own left edge to the
   element's left edge so it grows rightward instead of overflowing left. */
[data-tooltip].tooltip-anchor-left::after {
    left: 0;
    transform: none;
}

/* For a [data-tooltip] element sitting right at the top edge of a
   container with overflow:hidden (e.g. a floating-panel header) -- the
   default upward-popping tooltip has no room to render before hitting
   that edge and gets clipped. Pops downward instead. */
[data-tooltip].tooltip-below::after {
    bottom: auto;
    top: calc(100% + 8px);
}