/* =============================
   Minimal Dark Theme (iOS-like)
   ============================= */
:root {
    /* Layout */
    --topbar-h: 56px;
    --left-offset: 60px; /* keep space for left arrow */
    --chart-w: 360px;
    --space: 12px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    /* Colors */
    --color-bg: #000;          /* page background */
    --color-surface: #0f141a;     /* panel surfaces */
    --color-surface-2: #141a21;   /* deeper surface */
    --color-border: #1e2630;      /* soft outline */
    --color-text: #e6eaf0;        /* primary text */
    --color-text-muted: #9aa6b2;  /* secondary text */
    --color-accent: #7aa9ff;      /* highlight (links, pills) */
    --color-accent-2: #46d2ff;    /* subtle accent alt */

    /* Chart */
    --color-bar: #cfd6de;         /* light grey bars */
    --color-bar-value: #0b0f14;   /* value text on the bar */

    /* Effects */
    --shadow-soft: 0 8px 24px rgba(0,0,0,.35);
    --blur: 8px;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    overflow: visible;
}

/* Top bar */

.year-pill {
    font-weight: 700; letter-spacing: .5px;
    padding: 6px 12px; border-radius: 999px;
    background: #121820; color: var(--color-text);
    border: 1px solid var(--color-border);
}
.spacer { flex: 1 1 auto; }

/* Stage */
.fit { position: fixed; inset: var(--topbar-h) 0 0 0; display: grid; place-items: center; }
.stage-wrapper { position: relative; width: 100%; height: 100%; }
.stage {
    position: absolute; top: 50%; left: 50%;
    width: 1920px; height: 1080px;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: top left;
    background: #000;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
    overflow: visible;
}
.stage-bg { position: absolute; inset: 0; background-position: center; background-size: cover; }
.overlay { position: absolute; pointer-events: none; }

/* Controls (arrows) */
.controls { position: fixed; inset: 0; pointer-events: none; z-index: 1004; }
.controls .arrow { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: all; }
.controls .arrow button {
    font-size: 28px; border: 1px solid var(--color-border); background: rgba(255,255,255,.08);
    color: var(--color-text); padding: 12px 16px; cursor: pointer; border-radius: var(--radius-md);
    transition: background .15s ease, transform .05s ease;
}
.controls .arrow button:hover { background: rgba(255,255,255,.16); }
.controls .arrow button:active { transform: translateY(1px); }
.controls .left { left: 12px; }
.controls .right { right: 12px; }

/* Text overlay (viewer + admin) */
.textbox {
    padding: 8px 12px; background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-sm);
    white-space: pre-wrap; line-height: 1.25; max-width: 800px;
}

/* Chart panel */
.chart-panel {
    position: fixed; top: var(--topbar-h); left: var(--left-offset); bottom: 0; width: var(--chart-w);
    padding: var(--space);
    background: color-mix(in hsl, var(--color-surface) 85%, transparent);
    border-right: 1px solid var(--color-border);
    z-index: 1003; overflow: visible;
}
.chart-title { margin: 0 0 8px 2px; font-size: 14px; color: var(--color-accent); opacity: .9; }
.chart-bars {
    position: absolute; left: var(--space); right: var(--space); bottom: var(--space);
    top: calc(var(--topbar-h) + 8px); display: flex; flex-direction: column; gap: 8px;
}
.bar-row {
    position: relative; height: var(--barH, 28px);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: visible;
}
.bar-row:hover { box-shadow: var(--shadow-soft); }
.bar-fill {
    position: absolute; inset: 0 auto 0 0; width: 0%;
    background: linear-gradient(180deg, color-mix(in hsl, var(--color-bar) 96%, #fff 4%), var(--color-bar));
}
.bar-label {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: var(--color-bar-value); /* dark text for light bar */
    pointer-events: none;
    white-space: nowrap; overflow: visible; text-overflow: ellipsis; max-width: 75%;
}
.bar-value {
    position: absolute; top: 50%; transform: translateY(-50%);
    right: 6px; font-size: 12px; color: var(--color-bar-value); font-weight: 700; pointer-events: none;
}

/* Links */
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }


/* Data Slate (текущая базовая, оставим нейтральной) */
:root[data-theme="dataslate"] {
    --color-bg:#0b0f14; --color-surface:#0f141a; --color-surface-2:#141a21; --color-border:#1e2630;
    --color-text:#e6eaf0; --color-text-muted:#9aa6b2;
    --color-accent:#7aa9ff; --color-accent-2:#46d2ff;

    /* Чарт — нейтральный */
    --color-bar:#cfd6de;
    --color-bar-value:#0b0f14;
}

/* Neo-Propaganda (плакатный) */
:root[data-theme="propaganda"] {
    --color-bg:#0c0c0c; --color-surface:#111; --color-surface-2:#161616; --color-border:#322020;
    --color-text:#f5f2ee; --color-text-muted:#ccbfbf;
    --color-accent:#e64646; --color-accent-2:#ffcc00;

    /* Чарт — тёплые тона, более контрастный бар */
    --color-bar:#f2d5cf;           /* светло-терракотовый */
    --color-bar-value:#1a1411;     /* тёмная надпись на баре */
}

/* Cyber Grid (футуризм) */
:root[data-theme="cyber"] {
    --color-bg:#000; --color-surface:#0e131a; --color-surface-2:#121924; --color-border:#1a2733;
    --color-text:#dfe7ef; --color-text-muted:#90a3b7;
    --color-accent:#22d3ee; --color-accent-2:#a78bfa;

    /* Чарт — холодные тона */
    --color-bar:#c7e9ff;           /* светло-голубой */
    --color-bar-value:#0a0d12;     /* надпись тёмная, читабельная на голубом */
}



/* --- Added for smart bar value placement & contrast --- */
.bar-value {
    padding: 0 0; /* will be adjusted via JS for inside/outside */
    line-height: 1;
    border-radius: 4px;
    transition: color .15s ease, background-color .15s ease, left .15s ease, right .15s ease;
    z-index: 1;
}
.bar-value.outside {
    position: absolute;
    right: auto; /* reset */
}
.bar-value.value-pill {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.38);
    backdrop-filter: blur(2px);
}
/* optional halo style in case you prefer no pill */
.bar-value.value-halo {
    text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(0,0,0,.9), 1px 0 0 rgba(0,0,0,.9), -1px 0 0 rgba(0,0,0,.9);
}
/* Top icon that sits at bar end */
.bar-icon {
    position: absolute;
    width: 18px; height: 18px;
    object-fit: contain;
    top: -22px; /* above the bar */
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
/* If the bar is too short (height), force value outside for legibility */
.bar-row[data-thin="1"] .bar-value {
    /* JS handles placement; this attribute is for debugging or optional styling */
}
.overlay.framebox {
    pointer-events: auto;
    overflow: hidden;
    background: transparent;
}
.seg { display:inline-flex; border:1px solid #3a3a3a; border-radius:10px; overflow:hidden; }
.seg button { background:#141414; color:#bbb; padding:6px 10px; border:0; cursor:pointer; }
.seg button.active { background:#2b2b2b; color:#fff; }

header.topbar{
    height: var(--topbar-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* центр гарантированно по середине */
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky; top: 0; z-index: 10;
    background: rgba(15,20,28,.85); backdrop-filter: blur(6px);
}
header.topbar .left-slot,
header.topbar .right-slot{ display:flex; align-items:center; gap:12px; }

.year-center{ display:flex; align-items:center; gap:16px; }
.year-label{
    font-size: 28px;           /* БОЛЬШЕ и заметнее */
    font-weight: 800;
    letter-spacing: .5px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #e6ebf0;
    line-height: 1;
}
.year-nav{
    border: 0;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 18px;
    background: rgba(255,255,255,.10);
    color: #e6ebf0;
    cursor: pointer;
}
.year-nav:hover{ background: rgba(255,255,255,.16); }

/* старые фиксированные стрелки больше не нужны */
.controls{ display:none !important; }