/* ========================================
   VANINI SPACE — shared page structure
   (was "Matrix Theme"; the Matrix palette was retired 2026-08-18 when the
   site moved to one design system. The layout rules below are still the
   backbone of /work and /live, so the file stayed — only its colours
   changed. Every --matrix-* / --bg-* / --text-* name below is now an ALIAS
   onto tokens.css. Do not put raw hex back in this file.)
   ======================================== */

:root {
    /* legacy names kept so 1300 lines of layout rules below keep resolving —
       each one now points at the real token */
    --matrix-green: var(--accent);
    --matrix-dark-green: var(--ground-2);
    --matrix-bright: var(--bone);
    --matrix-cyan: var(--mag-tint);
    --matrix-red: var(--danger);
    --matrix-orange: var(--cad);
    --bg-primary: var(--bg);
    --bg-secondary: var(--surface);
    --bg-card: color-mix(in srgb, var(--surface) 92%, transparent);
    --bg-input: color-mix(in srgb, var(--ground) 60%, transparent);
    --border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    --border-active: color-mix(in srgb, var(--accent) 70%, transparent);
    --text-primary: var(--text);
    --text-muted: var(--text-dim);
    /* The old system set nearly every label and paragraph in Share Tech Mono.
       Under one design system that type is Switzer, so --font-mono now points
       at the sans. Genuine tabular data (timecodes, file sizes) should ask for
       var(--mono) directly rather than going through this legacy alias. */
    --font-mono: var(--sans);
    --font-display: var(--display);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-mono);
    font-size: 16px;
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The router-managed public pages (/work, /bookings, /live) sit on the
   persistent background video in #site-bg, which is position:fixed behind
   the body. An opaque body background covers it completely — THIS, not the
   rain canvas (which is only opacity .12), is what kept the video invisible
   off Home.

   Scoped to [data-route] so pages that use matrix.css without being part of
   the shell (drop.html, the login page) keep their solid ground. #site-bg
   carries the --ground fallback, so nothing renders transparent-to-white if
   the video fails to load. */
body[data-route] {
    background: transparent;
}

/* Matrix Rain Canvas */
#matrix-rain, #matrix-rain-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#matrix-rain-bg {
    opacity: 0.12;
}

/* ============ GLITCH CLICK — 5 VARIANTS ============ */
.glitch-burst {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.1;
    letter-spacing: 2px;
    white-space: nowrap;
}

.glitch-line { display: block; position: relative; }

/* === V0: RGB SPLIT === */
.gv-rgb.active { animation: gvRgb var(--glitch-dur, 300ms) ease-out forwards; }
.gv-rgb .glitch-r {
    color: rgba(255, 0, 60, 0.85);
    transform: translate(-4px, -2px);
    animation: glitchShift 70ms steps(2) infinite alternate;
}
.gv-rgb .glitch-g {
    color: rgba(var(--accent-rgb), 0.9);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}
.gv-rgb .glitch-b {
    color: rgba(0, 180, 255, 0.75);
    transform: translate(3px, 2px);
    animation: glitchShift 55ms steps(2) infinite alternate-reverse;
}

@keyframes gvRgb {
    0%   { opacity: 1; transform: translate(-50%, -50%) scaleY(1.5); }
    15%  { opacity: 1; filter: blur(1px); transform: translate(-50%, -50%) scaleY(0.6) skewX(10deg); }
    40%  { opacity: 1; transform: translate(-50%, -50%) scaleY(1.1) skewX(-4deg); }
    100% { opacity: 0; filter: blur(2px); transform: translate(-50%, -50%) scaleY(0.4); }
}

@keyframes glitchShift {
    0%   { transform: translate(-4px, -1px); }
    100% { transform: translate(4px, 1px); }
}

/* === V1: SCANLINE TEAR === */
.gv-tear.active { animation: gvTear var(--glitch-dur, 280ms) steps(4) forwards; }
.gv-tear .glitch-tear {
    color: var(--matrix-green);
    font-size: 11px;
    letter-spacing: 0;
    border-top: 1px solid rgba(var(--accent-rgb), 0.3);
    padding: 1px 0;
    animation: tearJitter 50ms steps(3) infinite;
}

@keyframes gvTear {
    0%   { opacity: 1; transform: translate(-50%, -50%) scaleX(2) scaleY(0.3); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(1.2); }
    50%  { opacity: 0.9; transform: translate(-50%, -50%) scaleX(1.1) scaleY(0.9); }
    100% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.5) scaleY(0.1); }
}

@keyframes tearJitter {
    0%   { transform: translateX(-12px); }
    33%  { transform: translateX(8px); }
    66%  { transform: translateX(-5px); }
    100% { transform: translateX(15px); }
}

/* === V2: PIXEL SCATTER === */
.gv-pixel.active {
    opacity: 1;
    animation: gvPixelWrap var(--glitch-dur, 400ms) ease-out forwards;
}
.glitch-pixel {
    display: block;
    position: absolute;
    background: var(--matrix-green);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.9), 0 0 16px rgba(var(--accent-rgb), 0.4);
    border-radius: 1px;
    animation: pixelPop var(--glitch-dur, 400ms) cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.glitch-pixel:nth-child(odd) {
    background: var(--matrix-cyan);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.9), 0 0 16px rgba(0, 212, 255, 0.4);
}

@keyframes gvPixelWrap {
    0%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes pixelPop {
    0%   { opacity: 1; transform: translate(0, 0) scale(2); }
    30%  { opacity: 1; transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.2); }
    70%  { opacity: 0.8; transform: translate(var(--dx, 0), var(--dy, 0)) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0); }
}

/* === V3: STATIC NOISE === */
.gv-static.active { animation: gvStatic var(--glitch-dur, 250ms) steps(6) forwards; }
.gv-static .glitch-static {
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1.3;
}
.gv-static .sn-bright { color: var(--bone); text-shadow: 0 0 6px var(--bone); }
.gv-static .sn-mid    { color: rgba(var(--accent-rgb), 0.7); }
.gv-static .sn-dim    { color: rgba(var(--accent-rgb), 0.2); }

@keyframes gvStatic {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: contrast(2); }
    30%  { opacity: 1; transform: translate(-48%, -52%) scale(1.1); filter: contrast(1.5); }
    60%  { opacity: 0.7; transform: translate(-52%, -48%) scale(0.95); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); filter: blur(3px); }
}

/* === V4: DATA CORRUPT === */
.gv-corrupt.active { animation: gvCorrupt var(--glitch-dur, 380ms) ease-out forwards; }
.gv-corrupt .glitch-corrupt {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--matrix-red);
    text-shadow: 0 0 6px rgba(255, 0, 64, 0.5);
    animation: corruptFlash 100ms steps(2) infinite;
}
.gv-corrupt .glitch-corrupt:nth-child(2) {
    color: var(--matrix-orange);
    text-shadow: 0 0 6px rgba(255, 170, 0, 0.4);
}
.gv-corrupt .glitch-corrupt:nth-child(3) {
    color: var(--matrix-green);
    text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
    font-size: 9px;
}

@keyframes gvCorrupt {
    0%   { opacity: 1; transform: translate(-50%, -50%) skewX(-15deg); }
    20%  { opacity: 1; transform: translate(-50%, -50%) skewX(8deg) scaleY(1.3); }
    50%  { opacity: 1; transform: translate(-50%, -50%) skewX(-3deg) scaleY(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) skewX(0) scaleY(0.3); filter: blur(2px); }
}

@keyframes corruptFlash {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

/* ========================================
   LOGIN PAGE
   ======================================== */
/* dvh after vh throughout this file: vh is the largest mobile viewport, so a
   bare 100vh box runs under the iOS toolbar. vh stays as the fallback. */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-primary);
    padding: 20px;
}

.login-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 440px;
    padding: 44px 40px;
    background: rgba(10, 10, 10, 0.92);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    backdrop-filter: blur(20px);
    box-shadow:
        0 0 40px rgba(var(--accent-rgb), 0.05),
        inset 0 0 40px rgba(var(--accent-rgb), 0.02);
}

.logo-section {
    text-align: center;
    margin-bottom: 40px;
}

.rabbit-icon {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 18px;
    filter: grayscale(1) brightness(3);
    opacity: 0.85;
    transition: filter 0.3s, opacity 0.3s;
}

.rabbit-icon:hover {
    filter: grayscale(1) brightness(5) drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.5));
    opacity: 1;
}

/* rabbit-canvas removed — replaced with CSS/ASCII rabbit */

.site-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 5px;
    color: var(--bone);
    text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
    margin-bottom: 10px;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.3);
    line-height: 1.1;
}

.site-title .accent {
    color: var(--matrix-green);
    display: inline;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 10px;
    text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
    -webkit-text-stroke: 0;
    vertical-align: baseline;
}

.tagline {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--matrix-green);
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Login Form */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 3px;
    color: var(--matrix-green);
    opacity: 0.9;
}

.input-group input {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--matrix-green);
    outline: none;
    transition: all 0.3s ease;
    -webkit-appearance: none;
}

.input-group input::placeholder {
    color: rgba(var(--accent-rgb), 0.3);
}

/* The `outline: none` above is a reset, not a focus style. The login page
   does not load site-shell.css (it is not part of the SPA shell), so its
   ring is declared here rather than inherited from there. */
.input-group input:focus-visible,
.login-btn:focus-visible {
    outline: 3px solid var(--matrix-green);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(10, 10, 10, .92);
}

.input-group input:focus {
    border-color: var(--border-active);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.1);
    background: rgba(0, 30, 0, 0.6);
}

.login-btn {
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 3px;
    padding: 16px;
    background: transparent;
    border: 1px solid var(--matrix-green);
    color: var(--matrix-green);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    -webkit-appearance: none;
}

.login-btn:hover {
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15);
    text-shadow: 0 0 10px var(--matrix-green);
}

.login-btn:active {
    transform: scale(0.98);
    background: rgba(var(--accent-rgb), 0.15);
}

.btn-arrow {
    animation: pulse-arrow 1.5s ease-in-out infinite;
}

@keyframes pulse-arrow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.error-msg {
    font-size: 0.9rem;
    color: var(--matrix-red);
    padding: 12px 14px;
    border: 1px solid rgba(255, 0, 64, 0.3);
    background: rgba(255, 0, 64, 0.05);
    border-radius: 2px;
}

.error-icon {
    margin-right: 6px;
}

.footer-text {
    text-align: center;
    margin-top: 32px;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 2px;
}

.blink {
    animation: blink 1s step-end infinite;
    color: var(--matrix-green);
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ========================================
   APP LAYOUT (Post-Login)
   ======================================== */
.app-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ========================================
   TOUCH TARGETS
   ========================================
   Apple's HIG minimum is 44px. An inline link inside a sentence cannot be
   44px tall without wrecking the line box, but vertical padding on an inline
   element grows its hit area without changing line height, and the matching
   negative margin keeps every surrounding layout identical. Applied to mailto
   links (always a contact CTA) and available as .tap-safe for standalone
   links that sit on their own line. */
a[href^="mailto:"],
.tap-safe {
    padding-block: 15px;
    margin-block: -15px;
    padding-inline: 2px;
}

.top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 60px;
    background: rgba(10, 10, 10, 0.97);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
}

/* inline-flex + min-height at every breakpoint, not only under
   (pointer: coarse): the logo's own box is just its ~20px text line-height,
   and .top-nav centring it inside a 60px bar is not part of the link's hit
   area. A mouse user gets the same 44px target as a thumb. */
.nav-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--bone);
}

.nav-logo .accent {
    color: var(--matrix-green);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 4px;
}

.nav-tabs {
    display: flex;
    gap: 4px;
    height: 100%;
}

.nav-tab {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 18px;
    /* Unconditional, not only at (pointer: coarse) — the strip lives in a
       60px bar, so this costs nothing on desktop and stops the link's own
       box measuring 28px tall there. */
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-tab:hover {
    color: var(--matrix-green);
    background: rgba(var(--accent-rgb), 0.03);
}

.nav-tab.active {
    color: var(--matrix-green);
    border-bottom-color: var(--matrix-green);
}

.nav-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--matrix-green);
    margin-left: 7px;
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-badge {
    font-size: 0.85rem;
    color: var(--matrix-cyan);
    letter-spacing: 1px;
}

.guest-tag {
    color: var(--matrix-orange);
    font-size: 0.75rem;
}

.logout-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.logout-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--matrix-red);
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
}

.logout-btn:hover {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 0, 64, 0.3);
}

.main-content {
    position: relative;
    z-index: 10;
    flex: 1;
    padding: 24px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* ========================================
   SETTINGS PAGE
   ======================================== */
.settings-container {
    max-width: 600px;
}

.settings-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--matrix-green);
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.settings-section {
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 20px;
}

.section-title {
    font-size: 0.9rem;
    color: var(--matrix-green);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-form label {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--matrix-green);
    opacity: 0.9;
}

.settings-form input {
    font-family: var(--font-mono);
    font-size: 1rem;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--matrix-green);
    outline: none;
    transition: all 0.3s;
    -webkit-appearance: none;
}

.settings-form input:focus {
    border-color: var(--border-active);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.1);
}

.btn-primary {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 2px;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid var(--matrix-green);
    color: var(--matrix-green);
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 8px;
    -webkit-appearance: none;
}

.btn-primary:hover {
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.15);
}

.btn-danger {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 2px;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid var(--matrix-red);
    color: var(--matrix-red);
    cursor: pointer;
    transition: all 0.3s;
    -webkit-appearance: none;
}

.btn-danger:hover {
    background: rgba(255, 0, 64, 0.1);
}

.info-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.info-item {
    display: flex;
    gap: 12px;
    font-size: 0.95rem;
}

.info-label {
    color: var(--text-muted);
    min-width: 90px;
}

.info-value {
    color: var(--text-primary);
}

.info-value.online {
    color: var(--matrix-green);
}

.coming-soon {
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 20px 0;
}

.flash-msg {
    padding: 12px 14px;
    border-radius: 2px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.flash-success {
    color: var(--matrix-green);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.05);
}

.flash-error {
    color: var(--matrix-red);
    border: 1px solid rgba(255, 0, 64, 0.3);
    background: rgba(255, 0, 64, 0.05);
}

/* ========================================
   MODAL
   ======================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    padding: 20px;
}

.modal.hidden {
    display: none;
}

.modal-content {
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 28px;
    box-shadow: 0 0 60px rgba(var(--accent-rgb), 0.08);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--matrix-green);
    letter-spacing: 2px;
}

.modal-close {
    font-size: 1.6rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    padding: 4px 8px;
}

.modal-close:hover {
    color: var(--matrix-red);
}

#event-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#event-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#event-form label {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--matrix-green);
    opacity: 0.9;
}

#event-form input,
#event-form textarea {
    font-family: var(--font-mono);
    font-size: 1rem;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--matrix-green);
    outline: none;
    transition: all 0.3s;
    -webkit-appearance: none;
}

#event-form input:focus,
#event-form textarea:focus {
    border-color: var(--border-active);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.1);
}

#event-form textarea {
    resize: vertical;
    min-height: 70px;
}

/* Chrome/Edge datetime-local styling */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(90deg);
    cursor: pointer;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.color-picker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-opt {
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.color-opt:hover {
    transform: scale(1.2);
}

.color-opt.active {
    border-color: var(--bone);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* Guest read-only notice */
.guest-notice {
    text-align: center;
    padding: 12px;
    color: var(--matrix-orange);
    font-size: 0.85rem;
    border: 1px solid rgba(255, 170, 0, 0.3);
    background: rgba(255, 170, 0, 0.05);
    border-radius: 2px;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */
@media (max-width: 768px) {
    .login-container {
        padding: 32px 24px;
    }

    .site-title {
        font-size: 2.4rem;
    }

    .site-title .accent {
        font-size: 0.9rem;
    }

    .tagline {
        font-size: 0.6rem;
        letter-spacing: 3px;
    }

    .top-nav {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 16px;
        gap: 6px;
    }

    .nav-left {
        flex: 1;
    }

    .nav-right {
        gap: 10px;
    }

    .nav-tabs {
        order: 3;
        width: 100%;
        overflow-x: auto;
        border-top: 1px solid var(--border-color);
        padding-top: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tab {
        padding: 10px 10px;
        /* Horizontal padding + letter-spacing trimmed from 14px/2px so the
           FIVE-tab strip on /live (HOME·WORK·LIVE·BOOKINGS·STORE) fits a
           390px viewport without clipping STORE — the four-tab siblings had
           slack, /live did not once tokens.css's wider mono loaded. The
           strip is still overflow-x:auto as a backstop on narrower phones.
           font-size stays 12px: confirmed the readable floor at this
           viewport; min-height 44px hit box is set at (pointer: coarse). */
        letter-spacing: 1.5px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .main-content {
        padding: 12px 8px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .modal-content {
        padding: 20px 16px;
    }

    .settings-container {
        max-width: 100%;
    }

    .settings-section {
        padding: 18px 14px;
    }

    .user-badge {
        font-size: 0.75rem;
    }

    .logout-btn {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .login-container {
        padding: 28px 20px;
    }

    .site-title {
        font-size: 2rem;
    }

    .site-title .accent {
        font-size: 0.75rem;
    }

    .nav-logo {
        font-size: 0.85rem;
    }
}

/* Five tabs at 14px padding overflow a 320-360px viewport. The strip is
   already overflow-x: auto, so nothing was unreachable — but the last tab
   sat mostly off-screen with `scrollbar-width: none` hiding every hint that
   it could be scrolled to. Tighten the tabs so the full set fits instead of
   relying on an invisible scroll. */
@media (max-width: 380px) {
    .nav-tabs {
        gap: 0;
    }

    .nav-tab {
        padding: 10px 8px;
        letter-spacing: 1px;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--matrix-dark-green);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--matrix-green);
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
    .nav-tab {
        min-height: 44px;
    }

    /* .nav-logo's own box is just its 20px text line-height — .top-nav
       centers it in a 60px bar via flex align-items, but that surrounding
       space isn't part of the link's actual hit area. Confirmed via
       headless Chrome measurement (44x20px). */
    .nav-logo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin: -12px 0;
    }

    .login-btn,
    .btn-primary,
    .btn-danger {
        min-height: 48px;
    }

    .color-opt {
        width: 44px;
        height: 44px;
    }

    .modal-close {
        padding: 8px 12px;
        min-width: 44px;
        min-height: 44px;
    }

    .ipod-btn {
        width: 44px;
        height: 44px;
    }

    .ipod-btn.ipod-play {
        width: 48px;
        height: 48px;
    }

    .ipod-close {
        padding: 8px 12px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========================================
   iPOD NANO MUSIC PLAYER
   ======================================== */
.ipod-nano {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
}

.ipod-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--matrix-green);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.05);
}

.ipod-toggle:hover {
    border-color: var(--matrix-green);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15);
}

.ipod-body {
    display: none;
    position: absolute;
    bottom: 54px;
    right: 0;
    width: 220px;
}

.ipod-nano.open .ipod-body {
    display: block;
}

.ipod-nano.open .ipod-toggle {
    border-color: var(--matrix-green);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.2);
}

.ipod-screen {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 16px;
    box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.05);
    position: relative;
}

.ipod-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s;
    padding: 2px 6px;
}

.ipod-close:hover {
    color: var(--matrix-red);
}

.ipod-now-playing {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--matrix-green);
    opacity: 0.7;
    margin-bottom: 8px;
}

.ipod-track {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.ipod-artist {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.ipod-progress {
    margin-bottom: 12px;
}

.ipod-progress-bar {
    height: 3px;
    background: rgba(var(--accent-rgb), 0.15);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    margin-bottom: 6px;
}

.ipod-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--matrix-green);
    border-radius: 2px;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s linear;
}

.ipod-progress-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--matrix-green);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}

.ipod-times {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-muted);
}

.ipod-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ipod-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.ipod-btn:hover {
    color: var(--matrix-green);
    border-color: var(--matrix-green);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.1);
}

.ipod-btn.ipod-play {
    width: 42px;
    height: 42px;
    font-size: 14px;
    border-color: var(--matrix-green);
    color: var(--matrix-green);
}

.ipod-btn.ipod-play:hover {
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.2);
}

/* ========================================
   LANDING PAGE NAV
   ======================================== */
.landing-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.landing-link {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
}

.landing-login-link {
    position: fixed;
    bottom: 20px;
    left: 24px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
    z-index: 10;
}

.landing-login-link:hover,
.landing-login-link:active {
    color: var(--matrix-green);
}

@supports (padding: env(safe-area-inset-bottom)) {
    .landing-login-link {
        bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* Hidden class for modals/elements */
.hidden {
    display: none !important;
}