/* ============================================================
   detail-mobile.css — NUR fuer public/detail.html

   Bewusst NICHT in mobile.css: die wird von 43 Seiten geladen, und
   Regeln wie "#userHeader { display: none }" oder ".container
   { padding-bottom: ... }" sind hier absichtlich seitenweit, waeren
   dort aber global — 30 Seiten haetten am Telefon keine Navigation mehr.
   ============================================================ */

/* ============================================================
   Mobile learning page (detail.html)
   App bar, bottom tab bar, tab sheet, drawer, language sheet, swipe cards.
   All colors come from /api/branding-css — no hex values, so the dark
   tenant (career.admissionlabs.eu) works with no extra stylesheet.
   ============================================================ */

:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --bottombar-h: 64px;
}

/* ------------------------------------------------------------------
   ABSICHTLICH AUSSERHALB der Media-Query: gilt in JEDER Breite.
   Der Dateiname sagt "mobile", diese zwei Regeln nicht - sie stehen hier,
   weil data-rated ausschliesslich von detail.js gesetzt wird, also nur auf
   dieser Seite vorkommt, und weil style.css von 43 Seiten geladen wird.
   ------------------------------------------------------------------ */

/* Bewertete Karte sofort einklappen, damit die folgenden nachruecken.
   Vorher blieb per visibility:hidden (detail.js:7187) ein 156px hohes Loch
   stehen. Am Desktop war das ein Fortschrittszeichen, am Telefon ein
   Bedienungshindernis - beides raeumt jetzt sofort auf.
   Der Knoten bleibt im DOM: updateBoxCounts() zaehlt ueber
   :not([data-rated="true"]) weiter, und "Aufraeumen" entfernt ihn wirklich. */
.vocab-card[data-rated="true"] {
    display: none;
}

/* Aufgedeckte Karte bleibt stehen, obwohl sie bereits gebucht ist - sonst
   verschwaende die eben sichtbar gewordene Loesung im selben Moment. Die Klasse
   faellt, sobald die naechste Karte angefasst wird; dann klappt sie ein. */
.vocab-card[data-rated="true"].is-revealed {
    display: block;
    opacity: .72;
}

/* Kurze Sperre nach einer Bewertung. Gemessen: die Bewertungsreihe der
   naechsten Karte rueckt 166px nach oben und landet exakt am Fingerort der
   eben getippten. Ohne diese 350ms bewertet ein schneller zweiter Tipp
   ungewollt das naechste Wort. Es sind nur die Knoepfe gesperrt, nicht der
   Container - Scrollen bleibt moeglich. */
.vocab-grid.is-settling .rate-btn-corner {
    pointer-events: none;
}

/* Desktop: the whole mobile chrome does not exist */
.m-appbar,
.m-tabbar,
.m-scrim,
.m-drawer,
.m-langsheet {
    display: none;
}

@media (max-width: 768px) {

    /* ---- desktop header out, app bar in ---------------------------------- */
    /* Hiding #userHeader also hides the hamburger mobile-menu.js injects into it,
       so the two drawers cannot collide. mobile-menu.js itself stays untouched. */
    #userHeader,
    .header-nav {
        display: none !important;
    }

    .m-appbar {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 6px 6px 2px;
        background: var(--gradient-primary);
        color: var(--on-primary, #fff);
    }

    .m-appbar__back,
    .m-appbar__menu {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 22px;
        background: none;
        color: inherit;
        font-size: 20px;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
    }

    .m-appbar__back { font-size: 26px; }

    .m-appbar__title {
        flex: 1;
        min-width: 0;
    }

    .m-appbar__name {
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-appbar__meta {
        font-size: 11.5px;
        opacity: .82;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-appbar__level {
        flex: 0 0 auto;
        padding: 3px 8px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .2);
        font-size: 11.5px;
        font-weight: 700;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 16px);
    }

    /* ---- bottom tab bar -------------------------------------------------- */

    .m-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        height: calc(var(--bottombar-h) + var(--safe-bottom));
        padding-bottom: var(--safe-bottom);
        background: var(--surface-card, #fff);
        border-top: 1px solid var(--border-soft, #e2e8f0);
    }

    .m-tabbar__item {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 44px;
        border: 0;
        background: none;
        color: var(--text-muted, #a0aec0);
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .m-tabbar__icon {
        font-size: 20px;
        line-height: 1;
    }

    .m-tabbar__item em {
        font-style: normal;
        font-size: 10.5px;
        font-weight: 700;
    }

    .m-tabbar__item.is-active { color: var(--color-primary); }

    .m-tabbar__item.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--gradient-primary);
    }

    /* ---- the existing 11-button nav becomes the "More" sheet -------------- */

    .learning-tabs > .tab-navigation {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        flex-direction: column;
        gap: 2px;
        max-height: 76vh;
        overflow-y: auto;
        padding: 14px 12px calc(22px + var(--safe-bottom));
        background: var(--surface-card, #fff);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
        transform: translateY(105%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    }

    .learning-tabs > .tab-navigation.is-open { transform: translateY(0); }

    .learning-tabs > .tab-navigation .tab-button {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-height: 56px;
        padding: 8px 10px;
        border: 0;
        border-radius: 12px;
        background: none;
    }

    .learning-tabs > .tab-navigation .tab-button.active {
        background: rgba(var(--color-primary-rgb), .12);
    }

    .learning-tabs > .tab-navigation .tab-label {
        display: block;
        font-size: 15px;
        font-weight: 600;
    }

    .learning-tabs > .tab-navigation .tab-badge {
        position: static;
        margin-left: auto;
    }

    /* ---- scrim ----------------------------------------------------------- */

    .m-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(15, 18, 25, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s cubic-bezier(.4, 0, .2, 1);
    }

    .m-scrim.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---- drawer ---------------------------------------------------------- */

    .m-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        width: min(300px, 84vw);
        overflow-y: auto;
        background: var(--surface-card, #fff);
        box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
        transform: translateX(-104%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    }

    .m-drawer.is-open { transform: translateX(0); }

    .m-drawer__head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: calc(18px + var(--safe-top)) 18px 16px;
        background: var(--gradient-primary);
        color: var(--on-primary, #fff);
    }

    .m-drawer__logo {
        width: 34px;
        height: 34px;
        padding: 2px;
        border-radius: 8px;
        background: #fff;
        object-fit: contain;
    }

    .m-drawer__logo:not([src]) { display: none; }

    .m-drawer__brand {
        font-size: 13.5px;
        font-weight: 700;
    }

    .m-drawer__user {
        font-size: 11.5px;
        opacity: .85;
    }

    .m-lang {
        display: flex;
        align-items: center;
        gap: 11px;
        margin: 10px 10px 4px;
        padding: 8px 12px;
        min-height: 56px;
        border: 0;
        border-radius: 12px;
        background: var(--surface-muted, #eef1f6);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .m-lang__flag { font-size: 20px; }

    .m-lang__text {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .m-lang__text em {
        font-style: normal;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--text-muted, #a0aec0);
    }

    .m-lang__text strong {
        font-size: 14px;
        color: var(--text-heading, #2d3748);
    }

    .m-lang__cta {
        font-size: 13px;
        font-weight: 600;
        color: var(--color-primary);
    }

    .m-drawer__nav {
        display: flex;
        flex-direction: column;
        padding: 4px 8px 16px;
    }

    .m-drawer__nav a,
    .m-drawer__nav button {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 0 12px;
        border: 0;
        border-radius: 10px;
        background: none;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--text-body, #4a5568);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    /* ---- language sheet -------------------------------------------------- */

    .m-langsheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 65;
        max-height: 80vh;
        overflow-y: auto;
        padding: 14px 12px calc(22px + var(--safe-bottom));
        background: var(--surface-card, #fff);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
        transform: translateY(105%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    }

    .m-langsheet.is-open { transform: translateY(0); }

    .m-langsheet button {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 6px 10px;
        border: 0;
        border-radius: 12px;
        background: none;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .m-langsheet button.is-active {
        background: rgba(var(--color-primary-rgb), .12);
    }

    .m-langsheet__flag {
        width: 28px;
        text-align: center;
        font-size: 22px;
    }

    .m-langsheet__text {
        flex: 1;
        min-width: 0;
    }

    .m-langsheet__text strong {
        display: block;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--text-heading, #2d3748);
    }

    .m-langsheet__text small {
        font-size: 12px;
        color: var(--text-muted, #a0aec0);
    }

    .m-langsheet__check { color: var(--color-primary); }

    /* ---- video only in the video tab ------------------------------------- */

    .tab-pane:not(.active) .video-player-wrapper { display: none !important; }

    /* ---- swipe cards (Vokabeln, single word) ----------------------------- */

    .practice-card {
        position: relative;
        touch-action: none;
        user-select: none;
        will-change: transform;
    }

    .practice-card__hint {
        position: absolute;
        top: 14px;
        padding: 5px 9px;
        border-radius: 8px;
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        opacity: 0;
        pointer-events: none;
    }

    .practice-card__hint--left  { left: 14px;  border: 2px solid #e3342f; color: #e3342f; }
    .practice-card__hint--right { right: 14px; border: 2px solid #28a745; color: #28a745; }
    .practice-card__hint--up {
        left: 50%;
        transform: translateX(-50%);
        border: 2px solid var(--color-primary);
        color: var(--color-primary);
    }

    .practice-rating-buttons { gap: 8px; }
    .practice-rate-btn { min-height: 56px; }

    /* ---- minimum sizes --------------------------------------------------- */

    button,
    .btn,
    .box-tab,
    .cefr-btn,
    .vocab-source-btn,
    .cloze-type-btn,
    .typing-mode-btn,
    .vorlesen-source-btn {
        min-height: 44px;
    }

    /* 16px stops iOS Safari from zooming on focus */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    .question-options > *,
    .cloze-options > * {
        min-height: 52px;
    }

    /* chip rows scroll instead of wrapping */
    .box-tabs,
    .cefr-tabs-row,
    #cefrButtons,
    .cloze-type-buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px 2px;
        scrollbar-width: none;
    }

    .box-tabs::-webkit-scrollbar,
    .cefr-tabs-row::-webkit-scrollbar,
    #cefrButtons::-webkit-scrollbar,
    .cloze-type-buttons::-webkit-scrollbar {
        display: none;
    }

    .box-tab,
    .cloze-type-btn {
        flex: 0 0 auto;
        min-width: auto;
    }

    /* two columns for cards, one for everything else */
    .vocab-grid {
        display: grid;
        /* Eine Spalte am Telefon. Zweispaltig ergab 160px breite Karten, in denen
           zwei der vier 44px-Bewertungsknoepfe schon 88px belegten - lange
           Vokabeln wie "psychologically" mussten mitten im Wort brechen.
           Die Dichte war nur 83px statt 102px pro Wort, das lohnte den Preis
           nicht. Falls je wieder zweispaltig: minmax(0, 1fr) verwenden, denn
           "1fr" heisst minmax(AUTO, 1fr) und dieses auto laesst die Spalte nicht
           unter die min-content-Breite der Karte schrumpfen. */
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Sicherheitsnetz fuer sehr lange, unteilbare Vokabeln.
       break-word, NICHT anywhere: "anywhere" zaehlt in die min-content-Breite
       hinein. Seit die Wortzeile ein Flex-Container ist (Wort + Mikrofon),
       schrumpfte der Wort-Eintrag damit auf ein Zeichen und "should" brach als
       "shou/ld" um. "break-word" greift nur, wenn ein Wort allein die Zeile
       sprengt, und laesst die intrinsische Breite unangetastet. */
    .vocab-card {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Bewertung als geordnete Reihe unter dem Wort statt in den vier Kartenecken.
       In den Ecken trug die Position keine Bedeutung; als Reihe liest sie sich als
       Skala schlecht -> gut und benutzt dieselbe Reihenfolge und dieselben Stufen
       wie die vier Knoepfe der Uebungskarte.

       vocabulary-practice.js:389 setzt position/groesse per Inline-style.cssText,
       und Inline schlaegt jede Stylesheet-Regel ohne !important - daher hier.
       Das Modul selbst bleibt unangetastet, denn meine-vokabeln.html nutzt es
       ebenfalls. Die DOM-Reihenfolge ist bereits Nochmal, Schwer, Gut, Einfach;
       die Flex-Reihe uebernimmt sie unveraendert. */
    .vocab-card .rating-buttons-corners {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 12px;
    }

    .vocab-card .rate-btn-corner {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 26px !important;
        line-height: 1;
        border-radius: 22px;
    }

    .agent-cards-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .typing-widget-stats > div {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    /* ---- Vorlesen: Text sehen, waehrend man liest ----------------------- */
    /* Der Textblock ist ein eigener Scroller (style.css: max-height 400px,
       overflow-y auto). Bei 1.342 Woertern zeigte er auf dem Telefon 3 % des
       Textes - 39 Woerter durch ein 400px-Fenster, waehrend darunter noch
       330px ungenutzt blieben. */
    .vorlesen-text-container {
        max-height: calc(100dvh - 330px);
    }

    /* vlHighlightCurrent() scrollt das aktuelle Wort mit scrollIntoView
       ({block:'nearest'}) ins Bild - also an die obere Bildkante, wo die
       klebende App-Bar sitzt. Gemessen: erstes Wort bei y=29, App-Bar-Unterkante
       bei y=56. Das Wort war da, aber verdeckt. scroll-margin haelt beide Raender
       frei, ohne dass die JS-Seite von der App-Bar wissen muss. */
    .vorlesen-text-container .vl-word {
        scroll-margin-top: 72px;
        /* 150px, nicht 96: der fliegende Stop-Knopf reicht gemessen bis 126px
           ueber den unteren Rand. Mit 96 waere das aktuelle Wort genau dahinter
           gelandet. */
        scroll-margin-bottom: 150px;
    }

    /* Beim Lesen wandert der Blick in den Text, der Knopf steht aber darunter.
       Solange zugehoert wird (.listening setzt vlStartRecognition), fliegt er
       ueber der Tab-Leiste mit - z-index 55: ueber der Leiste (50), unter den
       Sheets (60). */
    .vorlesen-section .btn-primary.listening {
        position: fixed;
        /* mobile.css setzt unter 480px "button, .btn { width: 100% }". Ohne
           Gegenangabe spannte sich der schwebende Knopf ueber die volle Breite
           (gemessen 395 von 395px) und verdeckte eine ganze Textzeile. */
        width: auto;
        max-width: calc(100% - 32px);
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 12px);
        z-index: 55;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    }

    /* ---- schwebende Widgets ueber die Leiste heben --------------------- */
    /* #micSelectWidget (mic-select.js, z-index 100000) sitzt mit bottom:14px
       genau auf dem ersten Tab. Nur die Position wird korrigiert - das Modul
       selbst bleibt unangetastet. */
    #micSelectWidget {
        bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 14px) !important;
    }

    /* Bei offenem Sheet/Drawer ganz ausblenden - sonst liegt es darueber. */
    body.m-overlay-open #micSelectWidget {
        opacity: 0;
        pointer-events: none;
    }
}