/* Y2K sidebars — static columns of stacked "boxes" flanking the wrapper.
   Each box is a self-contained widget (button collection, blinkies, webring,
   changelog, etc.) with its own header bar and frame.
   Markup lives in each page (the <aside class="y2k-sidebar"> blocks).
   Variables come from styles.css. */

/* ─── PAGE LAYOUT (3-column flex row) ────────────────────── */

.page-layout {
    display: flex;
    align-items: flex-start;
    max-width: 1280px; /* 880 content + 200 sidebar × 2 */
    margin: 0 auto;
}

.page-layout > .wrapper {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* ─── SIDEBAR (column container) ─────────────────────────── */

.y2k-sidebar {
    width: 200px;
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 24px;
}

/* ─── BOX (individual widget frame) ──────────────────────── */

.y2k-box {
    background: rgba(7, 7, 15, 0.88);
    border: 1px solid var(--border-dim);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
}

.y2k-box-header {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-dim);
}

.y2k-box-body {
    padding: 10px 8px;
}

/* Cyan-accented box variant */
.y2k-box--cyan {
    border-color: rgba(0, 245, 212, 0.25);
    box-shadow:
        0 0 18px rgba(0, 0, 0, 0.4),
        inset 0 0 12px rgba(0, 245, 212, 0.03);
}

.y2k-box--cyan .y2k-box-header {
    color: var(--cyan);
    background: rgba(0, 245, 212, 0.05);
    border-bottom-color: rgba(0, 245, 212, 0.2);
}

/* Pink-accented box variant */
.y2k-box--pink {
    border-color: rgba(255, 45, 122, 0.3);
    box-shadow:
        0 0 18px rgba(0, 0, 0, 0.4),
        inset 0 0 12px rgba(255, 45, 122, 0.03);
}

.y2k-box--pink .y2k-box-header {
    color: var(--pink);
    background: rgba(255, 45, 122, 0.05);
    border-bottom-color: rgba(255, 45, 122, 0.2);
}

/* ─── GRID-2 (2-column grid for 88×31 buttons) ────────────── */

.y2k-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 88px);
    gap: 4px;
    justify-content: center;
}

.y2k-grid-2 a { display: block; }

.y2k-grid-2 img {
    display: block;
    image-rendering: pixelated;
    transition: filter 0.15s ease;
}

.y2k-grid-2 a:hover img {
    filter: drop-shadow(0 0 6px rgba(0, 245, 212, 0.5));
}

/* Placeholder slot — shows a labeled 88×31 box until a real button is dropped in */
.y2k-button-placeholder {
    width: 88px;
    height: 31px;
    border: 1px dashed rgba(0, 245, 212, 0.25);
    color: rgba(0, 245, 212, 0.35);
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-align: center;
    line-height: 29px;
    text-decoration: none;
}

.y2k-button-placeholder:hover {
    border-color: rgba(0, 245, 212, 0.5);
    color: var(--cyan);
}

/* ─── FLUSH BOX BODY (no padding — for media embeds) ─────── */

.y2k-box-body--flush {
    padding: 0;
}

.y2k-embed {
    display: block;
    width: 100%;
    height: 160px;
    border: none;
}

/* ─── TEXT LIST (label → value rows inside a box) ────────── */

.y2k-text-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.y2k-text-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.y2k-text-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.y2k-text-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text);
    line-height: 1.3;
}

/* color grammar: highlighted sidebar values are identity → cyan only */
.y2k-text-value.cyan { color: var(--cyan); }

/* ─── LOG LIST (dated changelog entries) ─────────────────── */

.y2k-log-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.y2k-log-entry {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.y2k-log-date {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--cyan); /* color grammar: a timestamp is identity, not action */
}

.y2k-log-note {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.3;
}

/* ─── MUSIC PLAYER ───────────────────────────────────────── */

/* Hidden API iframe — never visible, JS-controlled only */
#mix-iframe { display: none; }

.mix-player {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Truncated track title */
.mix-track {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prev / play-pause / next row */
.mix-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mix-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-dim);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

/* color grammar: music controls are actions → pink */
.mix-btn:hover { color: var(--pink); }

.mix-btn svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Play/pause toggle: show play icon by default, swap on .is-playing */
.mix-btn--playpause {
    width: 34px;
    height: 34px;
    color: var(--pink);
}

.mix-btn--playpause .icon-pause          { display: none; }
.mix-btn--playpause.is-playing .icon-play  { display: none; }
.mix-btn--playpause.is-playing .icon-pause { display: block; }

/* Volume row */
.mix-vol {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mix-vol-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    flex-shrink: 0;
}

.mix-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 3px;
    background: rgba(255, 45, 122, 0.25);
    border-radius: 2px;
    cursor: pointer;
}

.mix-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pink);
    cursor: pointer;
    box-shadow: 0 0 4px rgba(255, 45, 122, 0.5);
}

.mix-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pink);
    border: none;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(255, 45, 122, 0.5);
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */

/* Hide sidebars only when they genuinely don't fit (layout needs 1280px).
   1300 keeps them visible on 1366×768 laptops; margin: auto centers below. */
@media (max-width: 1300px) {
    .y2k-sidebar { display: none; }
}