/* Terminal43 install UI + offline page (shared PWA kit).
 * Plain CSS on purpose: works with precompiled Tailwind, runtime Tailwind or none.
 * Only the brand block below differs between platforms. */

/* ── Brand: Terminal43 Code ────────────────────────────────────────── */
:root {
    --pwa-surface: #151228;
    --pwa-page: #0c0a1d;
    --pwa-border: #2d2854;
    --pwa-fg: #f1f5f9;
    --pwa-muted: #a5b4c8;
    --pwa-accent: #7c3aed;
    --pwa-accent-rgb: 124 58 237;
    --pwa-on-accent: #FFFFFF;
    --pwa-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Code's header uses Inter throughout, so the install button does too. */
    --pwa-mono: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --pwa-radius: 12px;
}
html:not(.dark) {
    --pwa-surface: #FFFFFF;
    --pwa-page: #f3f4f7;
    --pwa-border: #dce0e7;
    --pwa-fg: #202534;
    --pwa-muted: #4b5565;
    --pwa-accent: #6742c7;
    --pwa-accent-rgb: 103 66 199;
    --pwa-on-accent: #FFFFFF;
}
/* The purple fill reads well behind white text, but purple text on the dark
   page is too faint: lighten only the text-coloured accents in dark mode. */
html.dark .pwa-install,
html.dark .pwa-step__icon { color: #c4b0ff; }
/* ── End brand ─────────────────────────────────────────────────────── */

[data-pwa-install][hidden],
.pwa-install[hidden] { display: none !important; }

/* Header button */
.pwa-install {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgb(var(--pwa-accent-rgb) / .4);
    border-radius: 8px;
    background: rgb(var(--pwa-accent-rgb) / .08);
    color: var(--pwa-accent);
    font: 600 12px/1 var(--pwa-mono);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.pwa-install:hover { background: rgb(var(--pwa-accent-rgb) / .16); border-color: rgb(var(--pwa-accent-rgb) / .7); }
.pwa-install:focus-visible,
.pwa-button:focus-visible { outline: 2px solid var(--pwa-accent); outline-offset: 2px; }
.pwa-install svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 639px) {
    .pwa-install { width: 34px; padding: 0; justify-content: center; }
    .pwa-install__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Buttons used by the banner, sheet and offline page */
.pwa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: 600 14px/1 var(--pwa-font);
    text-decoration: none;
    cursor: pointer;
}
.pwa-button--primary { background: var(--pwa-accent); color: var(--pwa-on-accent); }
.pwa-button--primary:hover { filter: brightness(1.08); }
.pwa-button--quiet { background: transparent; color: var(--pwa-muted); }
.pwa-button--quiet:hover { color: var(--pwa-fg); }
.pwa-button--outline { background: transparent; color: var(--pwa-fg); border-color: var(--pwa-border); }

/* One-time banner (phones) */
.pwa-banner {
    position: fixed;
    z-index: 70;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: 460px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--pwa-border);
    border-radius: var(--pwa-radius);
    background: var(--pwa-surface);
    color: var(--pwa-fg);
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45);
    font-family: var(--pwa-font);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .22s ease, transform .22s ease;
}
.pwa-banner.is-in { opacity: 1; transform: none; }
.pwa-banner__icon { width: 48px; height: 48px; border-radius: 11px; }
.pwa-banner__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pwa-banner__title { font: 700 15px/1.25 var(--pwa-font); }
.pwa-banner__body { font-size: 13px; line-height: 1.4; color: var(--pwa-muted); }
.pwa-banner__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.pwa-banner__actions .pwa-button--primary { flex: 1; max-width: 220px; }

/* How-to sheet: bottom sheet on phones, centred dialog on larger screens */
.pwa-sheet {
    width: min(440px, 100vw);
    max-width: 100vw;
    margin: auto auto 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--pwa-border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--pwa-surface);
    color: var(--pwa-fg);
    font-family: var(--pwa-font);
}
.pwa-sheet::backdrop { background: rgb(0 0 0 / .55); }
@media (min-width: 640px) {
    .pwa-sheet { margin: auto; border-bottom: 1px solid var(--pwa-border); border-radius: var(--pwa-radius); padding-bottom: 20px; }
}
.pwa-sheet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pwa-sheet__icon { width: 40px; height: 40px; border-radius: 10px; }
.pwa-sheet__title { margin: 0; font: 700 17px/1.3 var(--pwa-font); }
.pwa-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; counter-reset: pwa-step; }
.pwa-step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; counter-increment: pwa-step; }
.pwa-step__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgb(var(--pwa-accent-rgb) / .12);
    color: var(--pwa-accent);
}
.pwa-step__icon::after {
    content: counter(pwa-step);
    position: absolute;
    top: -6px;
    left: -6px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pwa-accent);
    color: var(--pwa-on-accent);
    font: 700 11px/1 var(--pwa-font);
}
.pwa-step__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-step__icon svg circle { fill: currentColor; stroke: none; }
.pwa-step__text { display: flex; flex-direction: column; gap: 2px; }
.pwa-step__main { font-size: 15px; line-height: 1.35; }
.pwa-step__hint { font-size: 13px; line-height: 1.4; color: var(--pwa-muted); }
.pwa-sheet__done { width: 100%; }

/* Toast + offline notice */
.pwa-toast,
.pwa-offline-bar {
    position: fixed;
    z-index: 75;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border: 1px solid var(--pwa-border);
    border-radius: 999px;
    background: var(--pwa-surface);
    color: var(--pwa-fg);
    font: 500 13px/1.35 var(--pwa-font);
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5);
    transform: translateX(-50%);
}
.pwa-toast { opacity: 0; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }
.pwa-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.pwa-offline-bar::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #F59E0B;
    vertical-align: 1px;
}

/* Standalone offline page */
.pwa-offline {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: var(--pwa-page);
    color: var(--pwa-fg);
    font-family: var(--pwa-font);
}
.pwa-offline__card { width: 100%; max-width: 400px; text-align: center; }
.pwa-offline__icon { width: 64px; height: 64px; border-radius: 15px; margin-bottom: 20px; }
.pwa-offline__title { margin: 0 0 8px; font: 700 22px/1.3 var(--pwa-font); }
.pwa-offline__text { margin: 0 0 24px; font-size: 15px; line-height: 1.5; color: var(--pwa-muted); }
.pwa-offline__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
    .pwa-banner, .pwa-toast, .pwa-install { transition: none; }
}