/* ============================================================
 * openTMS — Offline-Hinweis + Installationshilfe (js/offline-ui.js)
 * Nutzt nur die Tokens aus css/design.css; keine neuen Tailwind-Klassen.
 * ============================================================ */

.otms-offline {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--app-mobile-top-offset, 56px) + 8px + env(safe-area-inset-top, 0px));
    z-index: 9000;              /* unter Toasts (9999) und Cookie-Banner */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--otms-line-strong);
    border-left: 4px solid var(--otms-warn);
    border-radius: var(--otms-r);
    background: var(--otms-surface);
    color: var(--otms-ink);
    font: 500 13px/1.35 var(--otms-f-body);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
}
.otms-offline[hidden] { display: none; }
.otms-offline__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--otms-warn);
}
.otms-offline__text { min-width: 0; overflow-wrap: anywhere; }
.otms-offline__days { font-family: var(--otms-f-mono); font-variant-numeric: tabular-nums; }
.otms-offline--locked { border-left-color: var(--otms-danger); }
.otms-offline--locked .otms-offline__dot { background: var(--otms-danger); }
@media (min-width: 768px) {
    .otms-offline { top: 14px; right: auto; left: calc(50% + 40px); transform: translateX(-50%); width: max-content; max-width: min(520px, calc(100vw - 408px)); } /* 408 = 2 × (Seitenleiste 232 + 12 Abstand − 40 Versatz): bleibt neben der Seitenleiste */
}

.otms-install {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 8900;
    max-width: 440px;
    margin: 0 auto;
    padding: 14px 16px 12px;
    border: 1px solid var(--otms-line-strong);
    border-radius: var(--otms-r);
    background: var(--otms-surface);
    color: var(--otms-ink);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    font: 400 14px/1.45 var(--otms-f-body);
}
.otms-install[hidden] { display: none; }
.otms-install__title { margin: 0 0 4px; font: 600 17px/1.2 var(--otms-f-display); }
.otms-install__text { margin: 0; color: var(--otms-ink-soft); }
.otms-install__steps { margin: 6px 0 0; color: var(--otms-ink); font-weight: 500; }
.otms-install__share {
    display: inline-block;
    width: 14px;
    height: 16px;
    vertical-align: -2px;
    margin: 0 2px;
}
.otms-install__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: flex-end; }
@media (max-width: 767px) { .otms-install .otms-btn { min-height: 44px; } } /* --sm ist 36px – auf Touch zu klein */
@media (min-width: 768px) {
    .otms-install { left: auto; right: 24px; bottom: 24px; margin: 0; }
}

#settings-offline-section .otms-offline__days { color: var(--otms-ink); }
#settings-offline-wipe.is-confirm { border-color: var(--otms-danger); color: var(--otms-danger-text); }

/* "Offline – letzter Stand. Stand: …" über Statistik/Lernplan (offline-ui.js snapshotNote) */
.otms-snapnote {
    margin: 0 0 16px;
    padding: 8px 12px;
    border: 1px solid var(--otms-line);
    border-left: 3px solid var(--otms-warn);
    border-radius: var(--otms-r);
    background: var(--otms-surface);
    color: var(--otms-ink-soft);
    font: 400 13px/1.4 var(--otms-f-body);
}

/* Generalprobe: "Für offline vorbereiten" (js/simulation.js) */
.otms-simoff { margin: 18px auto 0; max-width: 460px; text-align: center; }
.otms-simoff[hidden] { display: none; }
.otms-simoff__text { margin: 0; font: 400 13px/1.45 var(--otms-f-body); color: var(--otms-ink-soft); }
.otms-simoff__text b { color: var(--otms-ink); font-weight: 600; }
.otms-simoff__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 6px; }
.otms-simoff__actions[hidden] { display: none; }
.otms-simoff .otms-btn--quiet { min-height: 36px; padding: 0 6px; font-size: 14px; }
.otms-simoff__bar { height: 3px; margin: 10px auto 0; max-width: 260px; background: var(--otms-line); overflow: hidden; }
.otms-simoff__bar[hidden] { display: none; }
.otms-simoff__bar > i { display: block; height: 100%; width: 0; background: var(--otms-ink); transition: width .2s ease; }
.otms-simoff .otms-btn[hidden] { display: none; }
@media (max-width: 640px) { .otms-simoff .otms-btn--quiet { min-height: 44px; } } /* Touch-Ziel */