/* RESET ------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* GLOBAL LINK RESET ----------------------------- */
a { color: inherit; text-decoration: none; }
a:visited, a:hover, a:active, a:focus {
    color: inherit; text-decoration: none;
}

html, body {
    margin: 0; padding: 0; height: 100%;
}

body {
    font-family: system-ui, sans-serif;
    color: #f5f7ff;
}

/* PAGE LAYOUT ------------------------------------------------- */
.page-layout {
    display: flex;
    height: 100vh;
}

/* ✦ MAIN BOX -------------------------------------------------- */
.main-box {
    flex: 1;
    background:
        radial-gradient(circle at 20% 20%, #303b8a 0, transparent 45%),
        radial-gradient(circle at 80% 80%, #6a2a8a 0, transparent 45%),
        radial-gradient(circle at 10% 80%, #20405f 0, transparent 50%),
        #02030b;
    margin-left: -1.4rem;
    position: relative;
    z-index: 2;
}

/* MAIN PANEL -------------------------------------------------- */
.main-panel {
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 1rem 1.5rem;
}

/* ARROWS ------------------------------------------------------ */
.arrow-row {
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.middle-row {
    display: grid;
    grid-template-columns: 4rem 1fr 4rem;
    align-items: center;
}

.arrow-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow-button {
    width: 2.8rem;
    height: 2.8rem;
    cursor: pointer;
    background: none;
    position: relative;
}

.arrow-button::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 0; height: 0;
    border-style: solid;
}

/* Up */
.arrow-up::before {
    border-width: 0 20px 28px 20px;
    border-color: transparent transparent white transparent;
    filter:
        drop-shadow(0 0 0 black)
        drop-shadow(2px 2px 0 black)
        drop-shadow(-2px 2px 0 black)
        drop-shadow(2px -2px 0 black)
        drop-shadow(-2px -2px 0 black);
}

/* Down */
.arrow-down::before {
    border-width: 28px 20px 0 20px;
    border-color: white transparent transparent transparent;
    filter:
        drop-shadow(0 0 0 black)
        drop-shadow(2px 2px 0 black)
        drop-shadow(-2px 2px 0 black)
        drop-shadow(2px -2px 0 black)
        drop-shadow(-2px -2px 0 black);
}

/* Left */
.arrow-left::before {
    border-width: 20px 28px 20px 0;
    border-color: transparent white transparent transparent;
    filter:
        drop-shadow(0 0 0 black)
        drop-shadow(2px 2px 0 black)
        drop-shadow(-2px 2px 0 black)
        drop-shadow(2px -2px 0 black)
        drop-shadow(-2px -2px 0 black);
}

/* Right */
.arrow-right::before {
    border-width: 20px 0 20px 28px;
    border-color: transparent transparent transparent white;
    filter:
        drop-shadow(0 0 0 black)
        drop-shadow(2px 2px 0 black)
        drop-shadow(-2px 2px 0 black)
        drop-shadow(2px -2px 0 black)
        drop-shadow(-2px -2px 0 black);
}

/* TAB PANEL --------------------------------------------------- */
.tab-panel {
    width: auto;
    max-width: 420px;
    background: linear-gradient(to bottom, #050914, #02030b);
    border-right: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    padding: 0.4rem;
    gap: 0.4rem;
    position: relative;
    flex: 0 0 14vw;
    height: 100vh;
    overflow-y: hidden;
}

.tab-panel-scroll { height: 100%; overflow-y: auto; position: relative; }
.tab-absolute-wrapper { position: relative; min-height: 100%; }

/* Active tab */
.active-tab {
    background: rgba(255,255,255,0.18) !important;
    box-shadow:
        0 0 0 1px rgba(200,240,255,0.55),
        -6px 6px 20px rgba(0,0,0,0.70);
}

.active-tab .tab { background: #40485a; }
.active-tab .tab-text { color: #ffffff; font-weight: 600; }

/* Basic tab interior --- unchanged */

/* MAIN CARD --------------------------------------------------- */
.card-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-card {
    width: min(80vh, 80vw);
    height: min(80vh, 80vw);
    max-width: 80vh;
    max-height: 80vh;
    padding: 2rem;
    border-radius: 1.3rem;
    background:
        radial-gradient(circle at top center,
                        rgba(148,215,255,0.22) 0,
                        transparent 50%),
        rgba(7,10,26,0.96);
    box-shadow:
        0 0 0 1px rgba(133,192,255,0.12),
        0 36px 100px rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    opacity: 0;
}

.timeline-card.is-visible { opacity: 1; }

/* CONTENT AREA -------------------------------- */
.timeline-card__contents {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.contents-list { display: flex; flex-direction: column; gap: 0.7rem; }

.contents-card {
    background: rgba(255,255,255,0.06);
    padding: 0.6rem 0.9rem;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.contents-card:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}

/* ANIMATIONS ---------------------------------- */
.card-exit-left  { animation: cardExitLeft  .65s ease forwards; }
.card-exit-right { animation: cardExitRight .65s ease forwards; }
.card-exit-up    { animation: cardExitUp    .65s ease forwards; }
.card-exit-down  { animation: cardExitDown  .65s ease forwards; }

.card-enter-left  { animation: cardEnterLeft  .65s ease forwards; }
.card-enter-right { animation: cardEnterRight .65s ease forwards; }
.card-enter-up    { animation: cardEnterUp    .65s ease forwards; }
.card-enter-down  { animation: cardEnterDown  .65s ease forwards; }

/* Keyframes omitted for brevity—they remain identical */

/* ------------------------------------------------------------------
   UNIVERSAL TREE VISUALISATION
------------------------------------------------------------------ */

.universe-tree-page {
    font-family: system-ui, sans-serif;
    color: #f5f7ff;

    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(circle at 20% 20%, #303b8a 0, transparent 45%),
        radial-gradient(circle at 80% 80%, #6a2a8a 0, transparent 45%),
        radial-gradient(circle at 10% 80%, #20405f 0, transparent 50%),
        #02030b;
}

/* Shell only supplies padding & coordinate context */
#universe-tree-shell {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
}

/* Scrollable inner area */
#universe-tree-scroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;

    border-radius: 1.1rem;

    background:
        radial-gradient(circle at top center,
                        rgba(148,215,255,0.09) 0,
                        transparent 55%)
        rgba(3,6,20,0.98);

    box-shadow:
        0 0 0 1px rgba(133,192,255,0.12),
        0 32px 80px rgba(0,0,0,0.85);
}

/* Container defines absolute coordinate system */
#universe-tree-container {
    position: relative;
    margin: 1rem auto;
}

/* SVG sits behind nodes */
#universe-tree-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

/* Lines */
.tree-line {
    stroke: rgba(200,220,255,0.4);
    stroke-width: 1.6;
    shape-rendering: crispEdges;
}

/* Nodes */
.tree-node {
    position: absolute;

    padding: 0.25rem 0.7rem;
    border-radius: 999px;

    background:
        radial-gradient(circle at top center,
                        rgba(148,215,255,0.3) 0,
                        transparent 60%)
        rgba(10,14,36,0.96);

    border: 1px solid rgba(180,210,255,0.55);

    box-shadow:
        0 0 10px rgba(120,190,255,0.35),
        0 8px 18px rgba(0,0,0,0.8);

    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;

    transition:
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.tree-node:hover {
    background:
        radial-gradient(circle at top center,
                        rgba(190,230,255,0.55) 0,
                        transparent 65%)
        rgba(20,26,60,0.98);

    border-color: rgba(215,240,255,0.9);

    box-shadow:
        0 0 14px rgba(190,235,255,0.65),
        0 12px 28px rgba(0,0,0,0.9);

    transform: translateY(-2px);
}

.tree-node-title {
    font-size: 0.86rem;
    font-weight: 600;
}

.tree-node-range {
    font-size: 0.68rem;
    opacity: 0.7;
}


/* =============================================================
   HOME PAGE LAYOUT (DEDICATED TREE VIEW)
   ============================================================= */

.home-page {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;

    background:
        radial-gradient(circle at 20% 20%, #303b8a 0, transparent 45%),
        radial-gradient(circle at 80% 80%, #6a2a8a 0, transparent 45%),
        radial-gradient(circle at 10% 80%, #20405f 0, transparent 50%),
        #02030b;
    color: #f5f7ff;
}

/* Header */
.home-header {
    height: 3.2rem;
    padding: 0.5rem 1rem;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    background: rgba(5, 8, 20, 0.75);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* MAIN AREA MUST FLEX */
.home-main {
    flex: 1;
    display: flex;
    padding: 1rem;
    box-sizing: border-box;
}

/* =============================================================
   TREE CONTAINER — CRITICAL!!!
   ============================================================= */

#universe-tree-shell {
    flex: 1;
    display: flex;
    /* required height */
    min-height: 0;
}

#universe-tree-scroll {
    flex: 1;
    overflow: auto;

    border-radius: 1.1rem;
    background:
        radial-gradient(circle at top center,
                        rgba(148, 215, 255, 0.09) 0,
                        transparent 55%)
        rgba(3, 6, 20, 0.98);

    box-shadow:
        0 0 0 1px rgba(133, 192, 255, 0.12),
        0 32px 80px rgba(0, 0, 0, 0.85);
}

/* This MUST be relative */
#universe-tree-container {
    position: relative;
    margin: 1rem auto;
}

/* Position SVG behind items */
#universe-tree-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* =============================================================
   NODES — CRITICAL!!!
   ============================================================= */

.tree-node {
    position: absolute;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;

    background:
        radial-gradient(circle at top center,
                        rgba(148, 215, 255, 0.3) 0,
                        transparent 60%)
        rgba(10, 14, 36, 0.96);

    border: 1px solid rgba(180, 210, 255, 0.55);

    box-shadow:
        0 0 10px rgba(120, 190, 255, 0.35),
        0 8px 18px rgba(0, 0, 0, 0.8);
}

.tree-node-title { font-size: 0.86rem; font-weight: 600; }
.tree-node-range { font-size: 0.68rem; opacity: 0.7; }



/* ------------------------------------------------------------------
   AUTO-GENERATED TAB SYSTEM (unchanged)
------------------------------------------------------------------ */

/* (keep your existing tab-system classes exactly as generated)
*/

/* LOGOUT BUTTON --------------------------------------------------- */
.logout-btn {
    z-index: 9999; /* bring it above the tree */
    box-shadow: 0 0 20px rgba(0,0,0,0.75);
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 0.55rem 1.2rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    border: 1px solid rgba(180, 210, 255, 0.55);
    background:
        radial-gradient(circle at top center,
                        rgba(148, 215, 255, 0.22) 0,
                        transparent 55%)
        rgba(7, 10, 26, 0.96);
    box-shadow:
        0 0 0 1px rgba(133, 192, 255, 0.12),
        0 12px 28px rgba(0, 0, 0, 0.85);
    color: #f5f7ff;
    transition: background 0.2s ease, transform 0.2s ease,
                box-shadow 0.2s ease, border-color 0.2s ease;
}

.logout-btn:hover {
    background:
        radial-gradient(circle at top center,
                        rgba(190, 235, 255, 0.35) 0,
                        transparent 65%)
        rgba(20, 26, 60, 0.98);
    border-color: rgba(215, 240, 255, 0.9);
    box-shadow:
        0 0 14px rgba(190, 235, 255, 0.65),
        0 18px 40px rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

/* =============================================================
   HOME PAGE (DEDICATED TREE VIEW)
   ============================================================= */

.home-page {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 20% 20%, #303b8a 0, transparent 45%),
        radial-gradient(circle at 80% 80%, #6a2a8a 0, transparent 45%),
        radial-gradient(circle at 10% 80%, #20405f 0, transparent 50%),
        #02030b;
    color: #f5f7ff;
    display: flex;
    flex-direction: column;
}

/* Header with logout button */
.home-header {
    width: 100%;
    height: 3.2rem;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: rgba(5, 8, 20, 0.75);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-sizing: border-box;
}

/* Logout button styled same as private UI */
.logout-btn {
    box-shadow: 0 0 20px rgba(0,0,0,0.75);
    padding: 0.55rem 1.2rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    border: 1px solid rgba(180, 210, 255, 0.55);
    background:
        radial-gradient(circle at top center,
                        rgba(148, 215, 255, 0.22) 0,
                        transparent 55%)
        rgba(7, 10, 26, 0.96);
    box-shadow:
        0 0 0 1px rgba(133, 192, 255, 0.12),
        0 12px 28px rgba(0, 0, 0, 0.85);
    color: #f5f7ff;
    transition: background 0.2s ease, transform 0.2s ease,
                box-shadow 0.2s ease, border-color 0.2s ease;
}

.logout-btn:hover {
    background:
        radial-gradient(circle at top center,
                        rgba(190, 235, 255, 0.35) 0,
                        transparent 65%)
        rgba(20, 26, 60, 0.98);
    border-color: rgba(215, 240, 255, 0.9);
    box-shadow:
        0 0 14px rgba(190, 235, 255, 0.65),
        0 18px 40px rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

/* Main area: tree fills all remaining space */
.home-main {
    flex: 1;
    display: flex;
    padding: 1rem;
    box-sizing: border-box;
}

/* Tree shell fills main area */
#universe-tree-shell {
    flex: 1;
    display: flex;
}

/* Scrollable tree panel */
#universe-tree-scroll {
    flex: 1;
    overflow: auto;
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at top center,
                        rgba(148, 215, 255, 0.09) 0,
                        transparent 55%)
        rgba(3, 6, 20, 0.98);
    box-shadow:
        0 0 0 1px rgba(133, 192, 255, 0.12),
        0 32px 80px rgba(0, 0, 0, 0.85);
}

/* Container defines coordinate system for absolute nodes */
#universe-tree-container {
    position: relative;
    margin: 1rem auto;
}

/* SVG sits behind nodes */
#universe-tree-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

/* Connectors */
.tree-line {
    stroke: rgba(200, 220, 255, 0.4);
    stroke-width: 1.6;
    shape-rendering: crispEdges;
}

/* Nodes */
.tree-node {
    position: absolute;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at top center,
                        rgba(148, 215, 255, 0.3) 0,
                        transparent 60%)
        rgba(10, 14, 36, 0.96);
    border: 1px solid rgba(180, 210, 255, 0.55);
    box-shadow:
        0 0 10px rgba(120, 190, 255, 0.35),
        0 8px 18px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition:
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.tree-node-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.tree-node-title {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.tree-node-range {
    font-size: 0.68rem;
    opacity: 0.7;
}

/* Hover glow */
.tree-node:hover {
    background:
        radial-gradient(circle at top center,
                        rgba(190, 230, 255, 0.55) 0,
                        transparent 65%)
        rgba(20, 26, 60, 0.98);
    border-color: rgba(215, 240, 255, 0.9);
    box-shadow:
        0 0 14px rgba(190, 235, 255, 0.65),
        0 12px 28px rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

/* ======================================================================
   TAB SYSTEM ROOT
   ====================================================================== */
.tab-layout {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}

/* ======================================================================
   COLUMN BASE (dynamic width & right offset)
   ====================================================================== */


.tab-column {
    position: absolute;
    top: 0;
    right: 0;            /* ← All columns align to the right edge */
    width: var(--col-width);
    z-index: var(--col-z);
    filter: drop-shadow(-6px 6px 12px rgba(0,0,0,0.45));
}


/* ======================================================================
   TAB CONTAINER BOX (hover slide, border, background)
   ====================================================================== */
.tab-box {
    border-left: 1px solid rgba(255,255,255,0.35);   /* ← left border only */
    border-top: 1px solid rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.35);
    border-right: none;  
    border-radius: 6px 0 0 6px;
    padding: 0;
    margin: 0;
    background: rgba(255,255,255,0.05);

    /* NEW — card edge & shadow */
    box-shadow:
        0 0 0 1px rgba(133, 192, 255, 0.10),
        -4px 4px 12px rgba(0, 0, 0, 0.50);

    transition: transform 0.22s ease-out, box-shadow 0.22s ease-out;

    
}


.tab-box:hover {
    transform: translateX(-0.8vw);
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(200, 240, 255, 0.35),
        -6px 6px 18px rgba(0, 0, 0, 0.65);
}

/* ======================================================================
   TAB INTERIOR
   ====================================================================== */
.tab {
    width: 100%;
    background: #2a2f3c;
    border-radius: 6px 0 0 6px;

    overflow: hidden;
    pointer-events: auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    padding-bottom: 10px;
    padding-left: 6px;
}

/* ======================================================================
   LINK WRAPPER
   ====================================================================== */
.tab a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* ======================================================================
   ROTATED TEXT (sideways-lr)
   ====================================================================== */
.tab-text {
    writing-mode: sideways-lr;
    text-orientation: mixed;

    white-space: normal;
    overflow-wrap: break-word;

    display: block;
    text-align: left;

    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: #f8faff;

    padding-left: 0.2rem;
}

/* ======================================================================
   LINK STATES
   ====================================================================== */
.tab a:visited .tab-text {
    color: #f8faff;
}
.tab a:hover .tab-text {
    color: #ffffff;
}
.tab a:active .tab-text {
    color: #ffffff;
}

/* ======================================================================
   HEIGHT CLASSES (auto-generated)
   Also sets inline-size for wrapping logic
   ====================================================================== */
.h1 { height: 8vw; }
.h1 .tab-text { inline-size: 7.36vw; }
.h2 { height: 16vw; }
.h2 .tab-text { inline-size: 14.72vw; }
.h3 { height: 24vw; }
.h3 .tab-text { inline-size: 22.080000000000002vw; }
.h4 { height: 32vw; }
.h4 .tab-text { inline-size: 29.44vw; }
.h5 { height: 40vw; }
.h5 .tab-text { inline-size: 36.800000000000004vw; }
.h6 { height: 48vw; }
.h6 .tab-text { inline-size: 44.160000000000004vw; }
.h7 { height: 56vw; }
.h7 .tab-text { inline-size: 51.52vw; }
.h8 { height: 64vw; }
.h8 .tab-text { inline-size: 58.88vw; }
.h9 { height: 72vw; }
.h9 .tab-text { inline-size: 66.24000000000001vw; }
.h10 { height: 80vw; }
.h10 .tab-text { inline-size: 73.60000000000001vw; }
.h11 { height: 88vw; }
.h11 .tab-text { inline-size: 80.96000000000001vw; }
.h12 { height: 96vw; }
.h12 .tab-text { inline-size: 88.32000000000001vw; }
.h13 { height: 104vw; }
.h13 .tab-text { inline-size: 95.68vw; }
.h14 { height: 112vw; }
.h14 .tab-text { inline-size: 103.04vw; }
.h15 { height: 120vw; }
.h15 .tab-text { inline-size: 110.4vw; }
.h16 { height: 128vw; }
.h16 .tab-text { inline-size: 117.76vw; }
.h17 { height: 136vw; }
.h17 .tab-text { inline-size: 125.12vw; }
.h18 { height: 144vw; }
.h18 .tab-text { inline-size: 132.48000000000002vw; }
.h19 { height: 152vw; }
.h19 .tab-text { inline-size: 139.84vw; }
.h20 { height: 160vw; }
.h20 .tab-text { inline-size: 147.20000000000002vw; }