/* =============================================================================
   LCARS.CSS - With Structural/Aesthetic Separation
   =============================================================================
   
   LCARS-SPECIFIC NOTE:
   In LCARS, border-radius and negative margins are STRUCTURAL, not aesthetic.
   They define the carve-out pattern where elements overlap. z-index controls
   which element "wins" the overlap.
   
   ORGANIZATION:
   1. Variables (structural overlap/z-index, then aesthetic colors)
   2. App Shell (structural)
   3. Panel & Sidebar Structure (flex, width, order)
   4. Block Sizing (proportional flex values)
   5. Corner Carve-Outs (STRUCTURAL: radius + negative margin + z-index)
   6. Bar Structure (top/bottom bars)
   7. Aesthetic: Colors
   8. Responsive Breakpoints
   
   ============================================================================= */

/* =============================================================================
   1. VARIABLES
   ============================================================================= */

:root {
    /* --- STRUCTURAL: LCARS Overlap System --- */
    --lcars-overlap-h: 30px;      /* Horizontal overlap for bar corners */
    --lcars-overlap-v: 10px;      /* Vertical overlap for sidebar corners */
    --lcars-overlap-v2:36px;      /* Vertical overlap for deep cutout corners */
    --lcars-central-overlap: 10px; /* Central panel overlaps sidebars */
    
    /* --- STRUCTURAL: LCARS Radii (defines carve-out shapes) --- */
    --lcars-radius-large: 60px;   /* Sidebar corner curves */
    --lcars-radius-small: 30px;   /* Bar corner curves */
    
    /* --- STRUCTURAL: Z-Index Stacking --- */
    --lcars-z-sidebar: 1;         /* Base layer, gets carved */
    --lcars-z-central: 3;         /* Carves through sidebars */
    --lcars-z-bar: 10;            /* Carves through everything */
    
    /* --- STRUCTURAL: Sizing --- */
    --lcars-sidebar-width: 190px;
    --lcars-sidebar-block-width: 170px;
    --lcars-bar-height: 60px;
    --lcars-gap: 6px;
    --lcars-shim-height: 6px;
    
    /* --- AESTHETIC: LCARS Color Palette --- */
    --lcars-purple: #9999cc;
    --lcars-tan: #ffcc99;
    --lcars-rust: #cc6666;
    --lcars-orange: #f39c12;
    --lcars-beige: #be9a86;
    --lcars-red: #e74c3c;
    --lcars-blood-red: #c41212;
    --lcars-dark-red: #8b0000;
    --lcars-blue: #8fc0e0;
    --lcars-teal: #8f80e0;
    --lcars-green: #2ecc71;
    --lcars-yellow: #eed071;
    --lcars-gold: #ffcc33;
    --lcars-lime: #99ff66;
    --lcars-cyan: #46c6ad;
    --lcars-pink: #e398bd;
    --lcars-silver: #bdc3c7;

    --lcars-bg: black;
    --lcars-text: white;
    --lcars-text-on-block: black;
    --destination-bg: #fafafa;    
}


/* =============================================================================
   2. APP SHELL (Structural)
   ============================================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul { padding-left:20px; }

body {
    /* Structural */
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* Aesthetic */
    background-color: var(--lcars-bg);
    font-family: 'Oswald', sans-serif;
    color: var(--lcars-text);
}


/* =============================================================================
   3. PANEL & SIDEBAR STRUCTURE
   ============================================================================= */

/* Main horizontal container */
.lcars-panel {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
}

/* Sidebar columns */
.lcars-sidebar {
    width: var(--lcars-sidebar-width);
    display: flex;
    flex-direction: column;
    gap: var(--lcars-gap);
    padding: 10px;
    flex-shrink: 0;
    /* Aesthetic */
    color: var(--lcars-text-on-block);
}

.lcars-sidebar.left {
    order: -1;
    padding-left: 10px;
}

.lcars-sidebar.right {
    order: 1;
    padding-right: 10px;
}

/* When sidebar itself is a block */
.lcars-sidebar.block {
    width: var(--lcars-sidebar-block-width);
}

/* Central content area - CARVES THROUGH sidebars */
.lcars-central {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0px;
    z-index: var(--lcars-z-central);
    margin-left: calc(-1 * var(--lcars-central-overlap));
    margin-right: calc(-1 * var(--lcars-central-overlap));
}

/* Panel content area */
.lcars-panel-content {
    display:flex;
    flex-direction: column;
    flex: 1 1 auto;  /* grow, shrink, but basis=auto preserves content size */
    overflow: auto;
    padding: 20px;
    /* Aesthetic */
    background-color: var(--lcars-bg);
}


/* =============================================================================
   4. BLOCK SIZING (Proportional flex values)
   ============================================================================= */

.lcars-block {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Aesthetic handled by color classes */
    transition: background-color 0.2s;
}

/* Size variants - smallest to largest */
.lcars-sssblock { flex: 0.1; }
.lcars-ssblock  { flex: 0.21; }
.lcars-sblock   { flex: 0.43; }
.lcars-mblock   { flex: 1; }
.lcars-lblock   { flex: 2; }

/* Shim - thin spacer */
.lcars-shim {
    height: var(--lcars-shim-height);
}


/* =============================================================================
   5. CORNER CARVE-OUTS (STRUCTURAL)
   
   These classes create the interlocking LCARS corners.
   The pattern: negative margin creates overlap, z-index determines winner,
   border-radius defines the curve, padding compensates for content.
   ============================================================================= */

/* --- Sidebar Corners (large radius) --- */

/* Bottom-left corner */
.lcars-bl {
    border-bottom-left-radius: var(--lcars-radius-large);
    margin-bottom: calc(-1 * var(--lcars-overlap-v));
}

/* Bottom-right corner */
.lcars-br {
    border-bottom-right-radius: var(--lcars-radius-large);
    margin-bottom: calc(-1 * var(--lcars-overlap-v));
}

/* Top-left corner */
.lcars-tl {
    border-top-left-radius: var(--lcars-radius-large);
    margin-top: calc(-1 * var(--lcars-overlap-v));
}

/* Top-right corner */
.lcars-tr {
    border-top-right-radius: var(--lcars-radius-large);
    margin-top: calc(-1 * var(--lcars-overlap-v));
}

/* --- Bar Corners (small radius, with padding compensation) --- */

/* Bottom-left on bar - extends into central area */
.lcars-blp {
    border-bottom-left-radius: var(--lcars-radius-small);
    margin-left: calc(-1 * var(--lcars-overlap-h));
    padding-left: var(--lcars-overlap-h);

}

/* Bottom-left optional - also extends vertically */
.lcars-blpo {
    border-bottom-left-radius: var(--lcars-radius-small);
    margin-left: calc(-1 * var(--lcars-overlap-h));
    padding-left: var(--lcars-overlap-h);
    margin-bottom: calc(-1 * var(--lcars-overlap-v2));
}

/* Bottom-right on bar */
.lcars-brp {
    border-bottom-right-radius: var(--lcars-radius-small);
    margin-right: calc(-1 * var(--lcars-overlap-h));
}

/* Bottom-right optional - also extends vertically */
.lcars-brpo {
    border-bottom-right-radius: var(--lcars-radius-small);
    margin-right: calc(-1 * var(--lcars-overlap-h));
    margin-bottom: calc(-1 * var(--lcars-overlap-v2));
}

/* Top-left on bar - extra padding for content */
.lcars-tlp {
    border-top-left-radius: var(--lcars-radius-small);
    margin-left: calc(-1 * var(--lcars-overlap-h));
    padding-left: calc(1 * var(--lcars-overlap-h));
}

/* Top-left optional - also extends vertically */
.lcars-tlpo {
    border-top-left-radius: var(--lcars-radius-small);
    margin-left: calc(-1 * var(--lcars-overlap-h));
    padding-left: calc(1 * var(--lcars-overlap-h));
    margin-top: calc(-1 * var(--lcars-overlap-v2));
}

/* Top-right on bar */
.lcars-trp {
    border-top-right-radius: var(--lcars-radius-small);
    margin-right: calc(-1 * var(--lcars-overlap-h));
    padding-bottom: 0px;
}

/* Top-right optional - also extends vertically */
.lcars-trpo {
    border-top-right-radius: var(--lcars-radius-small);
    margin-right: calc(-1 * var(--lcars-overlap-h));
    margin-top: calc(-1 * var(--lcars-overlap-v2));
}


/* =============================================================================
   6. BAR STRUCTURE (Top/Bottom bars)
   ============================================================================= */

.lcars-bar {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    height: var(--lcars-bar-height);
    width: 100%;
    gap: var(--lcars-gap);
    padding: 0px;
    position: relative;
    z-index: var(--lcars-z-bar);
    /* Aesthetic */
    background-color: transparent;
    color: var(--lcars-text-on-block);
}

/* Bar alignment variants */
.lcars-barbot {
    display: flex;
    align-items: flex-end;
}

.lcars-bartop {
    display: flex;
    align-items: flex-start;
}

/* Bar blocks don't need special styling beyond .lcars-block */
.lcars-bar.block {
    /* Inherits from .lcars-block */
}


/* =============================================================================
   7. AESTHETIC: Color Classes
   
   These are purely visual. Apply alongside structural classes.
   Example: <div class="block sblock bl purple">
   ============================================================================= */

/* Helper Classes */
.lcars-purple    { background-color: var(--lcars-purple); }
.lcars-tan       { background-color: var(--lcars-tan); }
.lcars-rust      { background-color: var(--lcars-rust); }
.lcars-orange    { background-color: var(--lcars-orange); }
.lcars-beige     { background-color: var(--lcars-beige); }
.lcars-red       { background-color: var(--lcars-red); }
.lcars-blood-red { background-color: var(--lcars-blood-red); }
.lcars-dark-red  { background-color: var(--lcars-dark-red); }
.lcars-blue      { background-color: var(--lcars-blue); }
.lcars-teal      { background-color: var(--lcars-teal); }
.lcars-green     { background-color: var(--lcars-green); }
.lcars-yellow    { background-color: var(--lcars-yellow); }
.lcars-gold      { background-color: var(--lcars-gold); }
.lcars-lime      { background-color: var(--lcars-lime); }
.lcars-cyan      { background-color: var(--lcars-cyan); }
.lcars-pink      { background-color: var(--lcars-pink); }
.lcars-silver    { background-color: var(--lcars-silver); }    
    
/* =============================================================================
   7a. Wipes
   
   ============================================================================= */


/* The color reveal layer - sits behind scan line */
.lcars-wipe-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
}

/* Horizontal wipe: reveals white from left */
.lcars-wipe-overlay.wipe-h {
    background: var(--destination-bg);
    clip-path: inset(0 100% 0 0);
}

.lcars-wipe-overlay.wipe-h.active {
    animation: lcars-reveal-h 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes lcars-reveal-h {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* Vertical wipe: reveals black from top */
.lcars-wipe-overlay.wipe-v {
    background: var(--lcars-bg);
    clip-path: inset(0 0 100% 0);
}

.lcars-wipe-overlay.wipe-v.active {
    animation: lcars-reveal-v 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes lcars-reveal-v {
    0%   { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* The scan line - rides the edge of the wipe */
.lcars-scan-line {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
}

/* Horizontal scan line */
.lcars-scan-line.scan-h {
    top: 0;
    left: 0;
    width: 6px;
    height: 100vh;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 153, 0, 0.4) 20%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 153, 0, 0.4) 80%,
        transparent 100%
    );
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.6);
}

.lcars-scan-line.scan-h.active {
    animation: lcars-scan-h 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes lcars-scan-h {
    0%   { transform: translateX(0); opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

/* Vertical scan line */
.lcars-scan-line.scan-v {
    top: 0;
    left: 0;
    width: 100vw;
    height: 6px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 153, 0, 0.4) 20%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 153, 0, 0.4) 80%,
        transparent 100%
    );
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.6);
}

.lcars-scan-line.scan-v.active {
    animation: lcars-scan-v 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes lcars-scan-v {
    0%   { transform: translateY(0); opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* =============================================================================
   8. RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* Wide screens: horizontal layout */
@media (min-width: 1200px) and (min-aspect-ratio: 16/9) {
    body {
        flex-direction: row;
    }
}

/* Medium screens: hide optional elements */
@media (max-width: 680px) {
    .lcars-optional {
        display: none;
    }
}

/* Small/portrait screens: collapse LCARS corners */
@media (max-width: 600px), (max-aspect-ratio: 2/3) {
    .lcars-optional2 {
        display: none;
    }
    
    /* Remove corner carve-outs on small screens */
    /* The 'o' suffix variants collapse to flat edges */
    .lcars-blpo {
        border-bottom-left-radius: 0px;
        margin-left: 0px;
        padding-left: var(--lcars-overlap-h);
    }
    
    .lcars-brpo {
        border-bottom-right-radius: 0px;
        margin-right: 0px;
        padding-right: var(--lcars-overlap-h);
    }
    
    .lcars-tlpo {
        border-top-left-radius: 0px;
        margin-left: 0px;
        padding-left: var(--lcars-overlap-h);
    }
    
    .lcars-trpo {
        border-top-right-radius: 0px;
        margin-right: 0px;
        padding-right: var(--lcars-overlap-h);
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .lcars-optional4 {
        display: none;
    }
}


/* LCARS Button Activation States */
/* Add this to your lcars.css file or include it separately */

.lcars-block {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

/*.lcars-block:hover {
    filter: brightness(1.2);
    transform: scale(1.02);
}
*/
.lcars-block.active {
    filter: brightness(1.4);
    box-shadow: 0 0 15px currentColor;
    animation: pulse 0.3s ease-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Enhanced active states for different colors */
.lcars-block.lcars-cyan.active {
    box-shadow: 0 0 20px #4ecdc4;
}

.lcars-block.lcars-blue.active {
    box-shadow: 0 0 20px #5555ff;
}

.lcars-block.lcars-purple.active {
    box-shadow: 0 0 20px #aa88ff;
}

.lcars-block.lcars-pink.active {
    box-shadow: 0 0 20px #ff88cc;
}

.lcars-block.lcars-blood-red.active {
    box-shadow: 0 0 20px #cc4444;
}

.lcars-block.lcars-rust.active {
    box-shadow: 0 0 20px #cc6633;
}

.lcars-block.lcars-orange.active {
    box-shadow: 0 0 20px #ff9966;
}

.lcars-block.lcars-yellow.active {
    box-shadow: 0 0 20px #ffcc66;
}

.lcars-block.lcars-tan.active {
    box-shadow: 0 0 20px #cc9966;
}

.lcars-block.lcars-green.active {
    box-shadow: 0 0 20px #66cc66;
}

.lcars-block.lcars-beige.active {
    box-shadow: 0 0 20px #ccaa88;
}