/* =============================================================
   GLOBAL RESET
   Ensures predictable sizing and clears browser defaults.
============================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}


/* =============================================================
   LINK RESET
   Makes all links inherit local colour and style.
============================================================= */
a {
    color: inherit;
    text-decoration: none;
}

a:visited,
a:hover,
a:active,
a:focus {
    color: inherit;
    text-decoration: none;
}


/* =============================================================
   ROOT ELEMENT RESET
   Remove default margins and make the page fill the viewport.
============================================================= */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


/* =============================================================
   GLOBAL TYPOGRAPHY
   Baseline font + colour.
============================================================= */
body {
    font-family: system-ui, sans-serif;
    color: #f5f7ff;
}


/* =============================================================
   TAB SYSTEM: ACTIVE TAB STATE
   Highlight the selected tab in the sidebar.
============================================================= */
.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;
}


/* =============================================================
   LOGOUT BUTTON
   Floating logout control styled to match Unset aesthetic.
============================================================= */
.logout-btn {
    z-index: 9999;
    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);
}


/* ============================================
   CONTENTS SECTION (used by compiler)
=============================================== */
.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);
}


/* =============================================================
   ANIMATION TRIGGERS
   These classes are applied + removed dynamically by JS.
============================================================= */

.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 cardExitLeft {
    0%   { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-50px); opacity: 0; }
}

@keyframes cardExitRight {
    0%   { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(50px); opacity: 0; }
}

@keyframes cardExitUp {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-50px); opacity: 0; }
}

@keyframes cardExitDown {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(50px); opacity: 0; }
}


@keyframes cardEnterLeft {
    0%   { transform: translateX(-50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes cardEnterRight {
    0%   { transform: translateX(50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes cardEnterUp {
    0%   { transform: translateY(-50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes cardEnterDown {
    0%   { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

* { outline: 1px solid rgba(255,0,0,0.4) !important; }
* * { outline: 1px solid rgba(0,255,0,0.4) !important; }
* * * { outline: 1px solid rgba(0,0,255,0.4) !important; }







/* TAB ENGINE CSS */


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

.tab-column {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--col-width);
    z-index: var(--col-z);
    filter: drop-shadow(-6px 6px 12px rgba(0,0,0,0.45));
}

.tab-box {
    border-left: 1px solid rgba(255,255,255,0.35);
    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);
    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 {
    width: 100%;
    background: #2a2f3c;
    border-radius: 6px 0 0 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: 10px;
    padding-left: 6px;
}

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

.tab-text {
    writing-mode: sideways-lr;
    text-orientation: mixed;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: #f8faff;
    padding-left: 0.2rem;
}
.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; }


/* JSON-COMPILED CSS */

/* ============= LAYOUT ============= */
.partition {
display: flex;
flex-direction: row;
}

.frame {
flex: 1;
display: flex;
flex-direction: column;
}

.arrow_position {
position: relative;
}

.flow-down {
display: flex;
flex-direction: column;
padding: 2rem;
}


.tab_panel_layout {
display: flex;
flex-direction: column;
padding: 0.4rem;
gap: 0.4rem;
position: relative;
flex: 0 0 14vw;
}

.horizontal-full-height {
display:flex;
height:100vh
}

.vertical_fixed_panel {
display: flex;
flex-direction: column;
flex: 0 0 14vw;
}

.vertical_stack {
display: flex;
flex-direction: column;
padding: 0.4rem;
}

.horizontal {
display:flex;
}

.row {
display: flex;
flex-direction: row;
align-items: center;
}

.spaced {
padding: 1rem 1.5rem;
}

/* ============= CONTAINER ============= */
.unset_background {
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;
}

.up_arrow {
/* Up */
}

.up_arrow::before {
border-width: 0 20px 28px 20px;
    border-color: transparent transparent white transparent;
}

.arrow_base {
/* Draw a triangle inside the box using a pseudo-element */
}

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

.left_arrow {
/* Left */
}

.left_arrow::before {
border-width: 20px 28px 20px 0;   border-color: transparent white transparent transparent;
}

.right_arrow {
/* Right */
}

.right_arrow::before {
border-width: 20px 0 20px 28px;   border-color: transparent transparent transparent white;
}

.down_arrow {
/* Down */
}

.down_arrow::before {
border-width: 28px 20px 0 20px;   border-color: white transparent transparent transparent;
}

.card_style {
border-radius: 1.3rem;
background:
    radial-gradient(circle at top centre,
                    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);
}

.top_line {
border-top: 1px solid rgba(255,255,255,0.15);
}

.tab_panel_style {
background: linear-gradient(to bottom, #050914, #02030b);
border-right: 1px solid rgba(255,255,255,0.1);
}

.gradient_panel {
background: linear-gradient(to bottom, #050914, #02030b);
border-right: 1px solid rgba(255,255,255,0.1);
}

.bg {
background: rgba(0,255,0,0.3) !important;
}

/* ============= SIZE ============= */
.screen_height {
height: 100vh;
}

.fill_space {
flex: 1;
}

.pull_left {
margin-left: -1.4rem;
}

.arrowbox {
width: 2.8rem;  /* hit area */
height: 2.8rem;
}

.card {
width: min(80vh, 80vw);
height: min(80vh, 80vw);
max-width: 80vh;
max-height: 80vh;
}

.full-height {
height: 100%;
}

.full_height {
height: 100%;
}

.top-row {
height: 2.8rem;
}

.bottom-row {
height: 2.8rem;
}

.left-col {
width: 2.8rem;
}

.right-col {
width: 2.8rem;
}

.fill {
flex: 1; width: 100%; height: 100%;
}

/* ============= TEXT ============= */
/* ============= OVERFLOW ============= */
.y_scroll {
overflow-y: auto;
}

/* ============= ANIMATION ============= */
.arrow_click {
cursor: pointer;
}

.hidden {
opacity: 0;
}