/* SourceBook Web Viewer */

@import 'tokens.css';

*, *::before, *::after { box-sizing: border-box; }

::selection {
    background: var(--nk-teal-dark);
    color: var(--nk-teal-highlight);
}

button { user-select: none; }

#yt-time,
#linear-section-info,
#chapter-nav-info,
.chapter-item,
#section-sidebar-header,
.hover-zone-label {
    user-select: none;
}

/* ── Mobile Block ── */

#mobile-block {
    display: none;
}

@media (max-width: 1024px) {
    #mobile-block {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #1a1a1a;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 32px;
    }

    #mobile-block-content {
        max-width: 320px;
    }

    #mobile-block-icon {
        font-size: 3rem;
        margin-bottom: 16px;
    }

    #mobile-block-content h2 {
        font-size: 1.2rem;
        font-weight: 600;
        color: #fff;
        margin: 0 0 12px;
    }

    #mobile-block-content p {
        font-size: 0.9rem;
        color: #888;
        line-height: 1.6;
        margin: 0;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #1a1a1a;
    color: #f0f0f0;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

#app {
    display: flex;
    height: 100vh;
}

/* ── Sidebar ── */

#sidebar {
    width: 240px;
    min-width: 240px;
    background: #111;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #2a2a2a;
}

/**
 * Der Weg aus dem Viewer heraus – für Angemeldete in ihre Bibliothek, sonst zur Startseite.
 *
 * Bis zum 29.08.2026 hatte diese Seite gar keinen Ausgang. Warum er hier oben sitzt und nicht in
 * einer Kopfzeile: Der Viewer hat keine – er ist eine Anwendungsoberfläche und kein Dokument, und
 * das soll er bleiben. Eine ganze Leiste nur für einen Link wäre ein hoher Preis.
 *
 * ZURÜCKHALTEND IN DER FARBE, kräftig erst beim Überfahren: Der Ausgang darf nicht mit dem
 * konkurrieren, wofür man hergekommen ist. Er muss auffindbar sein, wenn man ihn sucht – nicht
 * auffallen, während man lernt. Dasselbe Prinzip wie beim Anti-Ablenkungs-Grundsatz: Was aus dem
 * Inhalt herausführt, wirbt nicht um Aufmerksamkeit.
 */
#sidebar-back {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid #2a2a2a;
    color: #888;
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s, background 0.15s;
}

#sidebar-back:hover,
#sidebar-back:focus-visible {
    background: #0a0a0a;
    color: var(--sb-accent);
}

#sidebar-header {
    padding: 20px 16px 12px;
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#mode-toggle {
    display: flex;
    background: #0a0a0a;
    border-radius: 7px;
    padding: 3px;
    gap: 2px;
}

#mode-toggle button {
    flex: 1;
    padding: 5px 0;
    background: none;
    border: none;
    border-radius: 5px;
    color: #555;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

#mode-toggle button.active {
    background: #2a2a2a;
    color: #fff;
}

#sidebar-title-area {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background 0.15s;
}

#sidebar-title-area:hover {
    background: #1e1e1e;
}

#sidebar-title-area:hover #project-title {
    color: var(--nk-teal-highlight);
}

#project-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: #fff;
    transition: color 0.15s;
}

#project-author {
    font-size: 0.75rem;
    color: #666;
    margin: 0;
}

/* ── Landing View ── */

#landing {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#landing-inner {
    /* Volle Breite wie in der Mac-App – Text füllt den Platz statt schmaler Mittelspalte */
    padding: 28px 40px 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

#landing-cover img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

#landing-description {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #ccc;
}

#landing-description h1, #landing-description h2, #landing-description h3 {
    color: #fff;
    margin-top: 1.2em;
}

#landing-description a { color: var(--nk-teal-highlight); }
#landing-description code {
    background: #2a2a2a;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}
#landing-description pre {
    background: #222;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
}

#landing-start {
    align-self: flex-start;
    padding: 10px 24px;
    background: var(--nk-teal-dark);
    border: 1px solid var(--nk-teal-highlight);
    border-radius: 8px;
    color: var(--nk-teal-highlight);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}

#landing-start:hover {
    background: color-mix(in srgb, var(--nk-teal) 25%, #111);
}

#chapter-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0;
}

#sidebar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #2a2a2a;
    flex-shrink: 0;
}

#sidebar-nav button {
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 5px;
    color: #666;
    font-size: 0.7rem;
    width: 28px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
}

#sidebar-nav button:hover:not(:disabled) { background: #2a2a2a; color: #ccc; }
#sidebar-nav button:disabled { color: #333; cursor: default; }

#chapter-nav-info {
    flex: 1;
    text-align: center;
    font-size: 0.72rem;
    color: #444;
    font-variant-numeric: tabular-nums;
}

/* Das Kapitel ist die DEUTLICHERE der beiden Ebenen, weil es die Orientierung trägt – ruhig in der
   Form (klein, versal, gesperrt), aber klar in der Farbe. Bis zum 12.09.2026 stand hier #555, also
   genau der Wert, den die Palette als „disabled foreground" führt: Das Kapitel las sich als
   deaktiviert, während das Unterkapitel darunter heller und größer war. Die Gliederung stand damit
   auf dem Kopf. */
.chapter-item {
    padding: 8px 16px 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 8px;
    transition: color 0.1s;
}

.chapter-item[data-chapter-id]:hover { color: var(--sb-text); }

.chapter-item.active {
    color: var(--nk-teal-highlight);
}

/* Eine Stufe ruhiger als das Kapitel darüber. #aaa war zudem gar kein Token, sondern ein
   handgeschriebener Wert zwischen zwei Palettenstufen. */
.subchapter-item {
    display: block;
    width: 100%;
    padding: 7px 16px 7px 24px;
    background: none;
    border: none;
    color: var(--sb-text-muted);
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.subchapter-item:hover {
    background: var(--sb-surface);
    color: var(--sb-text);
}

.subchapter-item.active {
    background: var(--sb-surface);
    color: var(--sb-text);
    border-left: 3px solid var(--nk-teal-highlight);
    padding-left: 21px;
}

/* ── Section Sidebar (right) ── */

#section-sidebar {
    width: 220px;
    min-width: 220px;
    background: #111;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid #2a2a2a;
}

#section-sidebar-header {
    padding: 16px 16px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
}

#section-sidebar-list {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0;
}

.section-sidebar-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    color: #888;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    line-height: 1.4;
}

.section-sidebar-item:hover {
    background: #1e1e1e;
    color: #f0f0f0;
}

.section-sidebar-item.active {
    background: #1e1e1e;
    color: #fff;
    border-left: 3px solid var(--nk-teal-highlight);
    padding-left: 13px;
}

/* ── Main ── */

#main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

#loading, #error {
    color: #888;
    font-size: 1rem;
    margin: auto;
    text-align: center;
}

#error { color: #e55; }

.hidden { display: none !important; }

#content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Top Area (sticky) ── */

#top-area {
    flex: 0 0 50%;
    padding: 16px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
}

#subchapter-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

/* ── Preview Tabs ── */

#preview-tabs {
    display: flex;
    gap: 8px;
}

.preview-tab {
    padding: 5px 12px;
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    color: #888;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.preview-tab:hover { background: #2a2a2a; color: #ccc; }

.preview-tab.active {
    background: var(--nk-teal-dark);
    border-color: var(--nk-teal-highlight);
    color: var(--nk-teal-highlight);
}

/*
 * Der Name der EINZIGEN Vorschau. Bewusst ohne Rahmen und Hintergrund: Er sieht damit nicht aus
 * wie ein Reiter, auf den man klicken könnte, und ist doch an derselben Stelle zu finden wie die
 * Namen bei mehreren Vorschauen. Die waagerechte Einrückung entspricht der eines Tab-Textes,
 * damit die Zeile beim Wechsel zwischen ein und mehreren Vorschauen nicht springt.
 */
.preview-label {
    padding: 5px 12px;
    color: #888;
    font-size: 0.8rem;
    align-self: center;
}

/* ── Media Area (Preview / Player) ── */

#media-area {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Preview ── */

#preview-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#preview-container {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #222;
}

#preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 0.85rem;
}

/* ── Hover Zones ── */

#hover-zones {
    position: absolute;
    inset: 0;
}

.hover-zone {
    position: absolute;
    /* Die Werte spiegeln HoverOverlay.swift in NKMKit – im Ruhezustand trägt die FLÄCHE die
       Zone und der Rand hält sich zurück, beim Überfahren dreht sich das Verhältnis um. Am
       05.09.2026 gemeinsam nachgezogen: Fläche 3% → 7%, Rand 30% → 22% und von 2 auf 1 px.
       Zwei Fassungen desselben Aussehens laufen sonst auseinander, und der Creator sieht in
       seiner App etwas anderes als der Lerner im Web. */
    border: 1px solid color-mix(in srgb, var(--nk-teal) 22%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--nk-teal) 7%, transparent);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    display: flex;
    align-items: flex-end;
    padding: 4px 6px;
}

.hover-zone:hover {
    background: color-mix(in srgb, var(--nk-teal) 20%, transparent);
    border-color: color-mix(in srgb, var(--nk-teal) 90%, transparent);
}

.hover-zone-label {
    font-size: 0.7rem;
    color: var(--nk-teal-highlight);
    background: rgba(0,0,0,0.6);
    padding: 2px 5px;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.hover-zone:hover .hover-zone-label {
    opacity: 1;
}

/* ── Player ── */

#player-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#player-top-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

#btn-back-preview,
#btn-next-section {
    padding: 5px 12px;
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    color: #aaa;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

#btn-back-preview:hover,
#btn-next-section:hover { background: #2a2a2a; color: var(--nk-teal-highlight); }

/* Zweimal kurz aufblinken, wenn ein Clip endet oder pausiert – der Hinweis auf den Ausgang.
   Gesetzt wird die Klasse ausschließlich im MODULAREN Modus (app.js): Dort ist der Knopf der
   einzige Weg zurück zum Ergebnisbild, während linear ohnehin weitergeblättert wird und ein
   Blinken bei jedem Pausieren nur Unruhe wäre. */
@keyframes sb-back-pulse {
    0%, 100% { transform: scale(1); }
    50% {
        transform: scale(1.08);
        border-color: var(--nk-teal-highlight);
        color: var(--nk-teal-highlight);
    }
}

#btn-back-preview.pulse {
    animation: sb-back-pulse 0.32s ease-in-out 2;
}

#btn-next-section { margin-left: auto; }

#btn-next-item {
    background: var(--nk-teal-dark);
    border-color: var(--nk-teal-highlight);
    color: var(--nk-teal-highlight);
}

#btn-next-section:disabled {
    color: #333;
    border-color: #222;
    cursor: default;
}

#linear-section-info {
    flex: 1;
    text-align: center;
    font-size: 0.78rem;
    color: #555;
    font-variant-numeric: tabular-nums;
}

#linear-start,
#chapter-linear-start {
    padding: 8px 20px;
    background: var(--nk-teal-dark);
    border: 1px solid var(--nk-teal-highlight);
    border-radius: 8px;
    color: var(--nk-teal-highlight);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s;
}

#linear-start:hover,
#chapter-linear-start:hover { background: color-mix(in srgb, var(--nk-teal) 25%, #111); }

/* ── Subchapter Top Bar (Zurück + Start-Buttons, über dem Preview) ── */

#subchapter-top-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    min-height: 0;
    flex-shrink: 0;
}

.subchapter-top-spacer {
    flex: 1;
}

#btn-back-subchapter,
#btn-next-subchapter {
    padding: 5px 12px;
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    color: #aaa;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

#btn-back-subchapter:hover,
#btn-next-subchapter:hover { background: #2a2a2a; color: var(--nk-teal-highlight); }

/* ── Player Resize Handle ── */

#player-resize-handle {
    width: 100%;
    height: 12px;
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

#player-resize-handle::after {
    content: '';
    width: 36px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: background 0.15s, width 0.15s;
}

#player-resize-handle:hover::after {
    background: var(--nk-teal-highlight);
    width: 48px;
}

/* ── Bottom Area (scrollbar) ── */

#bottom-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Explanatory Text ── */

#text-area {
    max-width: 800px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #ccc;
}

#text-area h1, #text-area h2, #text-area h3 {
    color: #fff;
    margin-top: 1.2em;
}

#text-area a { color: var(--nk-teal-highlight); }
#text-area code {
    background: #2a2a2a;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}
#text-area pre {
    background: #222;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
}
/* Web-Theme ist immer dunkel (unabhängig vom OS-Schema) – Light-Defaults
   aus sb-content.css hier gezielt überschreiben */
#text-area blockquote { color: #aaa; }
#text-area hr { border-top-color: rgba(255, 255, 255, 0.18); }

/* ── Links ── */

#links-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 800px;
}

.link-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    color: var(--nk-teal-highlight);
    text-decoration: none;
    font-size: 0.85rem;
    width: fit-content;
    transition: background 0.1s;
}

.link-item:hover { background: #2a2a2a; }

/* ── Zone Popover ── */

#zone-popover {
    position: fixed;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    min-width: 160px;
}

.zone-popover-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.82rem;
    text-align: left;
    padding: 7px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.zone-popover-btn:hover {
    background: #2a2a2a;
    color: #fff;
}

/* ── Gesteuerter Lesefluss (seit 11.09.2026) ──
   Gesperrte Einträge bleiben sichtbar: Der Lerner soll sehen, dass es weitergeht, und ein Klick
   sagt ihm, was er dafür tun muss (#zone-popover mit „Go to …"). Dieselbe Entscheidung wie in der
   Mac-App – ein leerer Fleck sähe wie ein Fehler aus. */

/* Gesperrt trägt jetzt `--sb-disabled` – denselben Wert, der bis zum 12.09.2026 fälschlich am
   NORMALEN Kapitel stand. Dass beides fast gleich aussah, war der eigentliche Schaden dieser
   Verwechslung: ein freies Kapitel (#555) und ein gesperrtes (#4a4a4a) waren kaum zu
   unterscheiden. */
.chapter-item.locked,
.subchapter-item.locked,
.section-sidebar-item.locked {
    color: var(--sb-disabled);
    cursor: pointer;
}

.subchapter-item.locked:hover,
.section-sidebar-item.locked:hover {
    background: var(--nk-grey-900);
    color: var(--sb-text-muted);
}

.lock-icon {
    margin-left: 6px;
    font-size: 0.75em;
    opacity: 0.7;
}

.hover-zone.locked {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.25);
    align-items: center;
    justify-content: center;
}

.hover-zone.locked:hover {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.6);
}

.hover-zone-lock {
    font-size: 1rem;
    pointer-events: none;
}

.lock-popover-title {
    padding: 6px 12px 2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #f0f0f0;
}

.lock-popover-text {
    max-width: 280px;
    padding: 2px 12px 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #aaa;
}

.lock-popover-go {
    color: var(--nk-teal-highlight);
}

/* Die Einblendung am Halt – über dem Standbild, mit der Aufforderung des Creators. */
#checkpoint-halt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 20;              /* über #yt-blocker (10) */
    display: flex;
    justify-content: center;
    pointer-events: none;     /* nur die Karte selbst nimmt Klicks an */
}

.halt-card {
    pointer-events: auto;
    max-width: 520px;
    margin: 0 16px;
    padding: 16px 24px;
    background: rgba(30, 30, 30, 0.92);
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.halt-prompt {
    margin-bottom: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f0f0f0;
}

.halt-prompt:empty {
    display: none;
}

.halt-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.halt-buttons button {
    padding: 7px 16px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #ddd;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.halt-buttons button:hover {
    background: #333;
    color: #fff;
}

#halt-continue {
    background: var(--nk-teal);
    border-color: var(--nk-teal);
    color: var(--sb-on-primary);
}

#halt-continue:hover {
    background: var(--nk-teal-highlight);
}