@import url('../js/vendor/ui/css/tokens.css');
@import url('../js/vendor/ui/css/bridge.css');
@import url('../js/vendor/ui/css/components.css');
@import url('../js/vendor/ui/css/shell.css');
@import url('../js/vendor/ui/css/primitives.css');
@import url('../js/vendor/ui/css/workspace.css');

/* Kortenaer — client accent overrides */
:root {
    --accent: #0f766e;
    --accent-dim: #0d9488;
    --accent-glow: rgba(15, 118, 110, 0.10);
    --accent-surface: rgba(15, 118, 110, 0.08);
}

[data-theme="dark"] {
    --accent: #2dd4bf;
    --accent-dim: #14b8a6;
    --accent-glow: rgba(45, 212, 191, 0.14);
    --accent-surface: rgba(45, 212, 191, 0.10);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --accent: #2dd4bf;
        --accent-dim: #14b8a6;
        --accent-glow: rgba(45, 212, 191, 0.14);
        --accent-surface: rgba(45, 212, 191, 0.10);
    }
}

.login-page .login-form {
    overflow-y: auto;
}

.login-hero-mark.topbar-logo-mark {
    display: block;
    flex: none;
    box-sizing: border-box;
    width: 110px;
    height: 140px;
    max-width: min(110px, 42vw);
    max-height: min(140px, 22vh);
    min-width: 0;
    min-height: 0;
    margin: 0 auto 0.25rem;
    aspect-ratio: 545 / 690;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.login-local {
    width: 100%;
    margin-top: 0.55rem;
}

.login-local-hint {
    margin: 0.75rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
}

.page-dashboard .page-stack-main {
    padding: 0 1.5rem;
}

.page-dashboard .ws-page-head {
    padding-left: 0;
    padding-right: 0;
}

.page-dashboard .ws-page-head.dash-head {
    padding-top: 0.75rem;
    padding-bottom: 0.65rem;
    min-width: 0;
    max-width: 100%;
}

.dash-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
}

.dash-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    flex: 1 1 10rem;
    min-width: min-content;
}

.dash-hero .ws-page-title {
    overflow: visible;
    line-height: 1.25;
    padding-top: 0.05em;
}

.ws-stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: stretch;
}

.ws-stat {
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 0.75rem 0.85rem;
    background: var(--surface);
    min-width: 7.5rem;
}

.ws-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.ws-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin-top: 0.2rem;
}

.ws-stat-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.player-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 22rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #0b1220;
}

.player-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.editor-workspace .player-frame {
    min-height: 0;
    flex: 1 1 auto;
}

.hotspot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.hotspot-swatch {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    margin-right: 0.3rem;
}

.hotspot-swatch.link { background: #0f766e; }
.hotspot-swatch.toggle { background: #d97706; }
.hotspot-swatch.info,
.hotspot-swatch.photo { background: #16a34a; }

.embed-box {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: pre-wrap;
    background: var(--surface-dim);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 0.85rem;
    color: var(--text);
}

.media-thumb {
    width: 3.25rem;
    height: 1.65rem;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid var(--border);
    background: var(--surface-dim);
}

.ws-coming {
    padding: 2rem 0.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 36rem;
}

@media (max-width: 40rem) {
    .dash-head-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .page-dashboard .dash-hero {
        align-items: center;
        text-align: center;
        min-width: 0;
    }
    .page-dashboard .dash-head-row .ws-stat-strip {
        justify-content: center;
    }
}