/* ==========================================================================
   Fotobuch – the website's own styles: the interface fonts, the shell of "Helles Studio" (top bar, phone bottom bar),
   page widths, the error card, login. Tokens, the base and the kit's building blocks (.topbar, .brand, .seg, .ib,
   .book-pill, tooltips) come from _content/Fotobuch.Ui/kit.css, linked before this file (App.razor); components use
   tokens only (no hex values); pages bring their layout in *.razor.css. The building blocks are also Blazor components
   in src/Fotobuch.Ui (Icon, Button, TopBar, BookPill, ...). Target: Data/_ui_mockups/editor-v4/site-start.html.
   ========================================================================== */

/* ---------- Fonts: Inter (interface) and Playfair Display (titles), served from this site (OFL, fonts/ui) ----------
   Names of their own: /fonts.css declares the book's TTF files as "Inter" and "Playfair Display" (editor, preview), and
   faces of one name would be combined, so the browser loaded both files. */
@font-face { font-family: "Inter UI"; src: url(fonts/ui/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter UI"; src: url(fonts/ui/Inter-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display UI"; src: url(fonts/ui/PlayfairDisplay-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Shell: the top bar (kit TopBar, class app-header) ----------
   60 px of glass like the editor's bar: brand and book pill at the start, the five places in the middle of the window,
   light/dark and the menu at the end. Start and end share the room equally, so the places stay centred. Everything that
   sits under the bar (sticky page bars, anchors, Knipsi's panel) reads its height from the kit's --header-h (60 px). */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.app-header { position: sticky; top: 0; height: var(--header-h); }
.app-header .topbar-start { flex: 1 1 0; min-width: 0; }
.app-header .topbar-center { flex: none; min-width: 0; container-type: normal; }
.app-header .topbar-end { flex: 1 1 0; justify-content: flex-end; margin-left: 0; }
/* the tooltips at the bar's edges stay on screen */
.app-header .brand[data-tip]::after { left: 0; transform: none; }
.app-header .app-menu > [data-tip]::after { left: auto; right: 0; transform: none; }
.app-logout-form { display: none; }
/* the editor has one bar instead of this one plus its own (b-studio.html): its bar carries the way back to Start and the
   menu; the logout form stays in the page for that menu. Its sizes (--header-h: 0, --ed-*) are kit tokens (kit.css). */
.app-shell[data-area="editor"] .app-header { display: none; }

/* the five places: a segmented pill, icon and label; the current one raised (kit .seg). The pill may not clip the
   tooltips of the places that show only their icon */
.app-nav { overflow: visible; }
.app-nav a { padding: 0 13px; }
.app-nav a .i { width: 18px; height: 18px; }
/* with its label a place needs no tooltip; the current place never */
@media (min-width: 1101px) {
    .app-nav a[data-tip]::after { display: none; }
}
.app-nav a[aria-current="page"][data-tip]::after { display: none; }

/* the current book: context first, its menu on request (a flex box, so the inline-block popover adds no line below the
   pill and it sits in the middle of the bar) */
.app-header .book-pill-wrap { display: flex; min-width: 0; }
.app-header .book-pill { min-width: 0; }
.app-header .book-pill[aria-expanded="true"] { box-shadow: var(--sh-2); }

/* ---------- Page column ---------- */
.app-main { flex: 1; min-width: 0; padding: var(--sp-5) var(--sp-5) var(--sp-8); }
/* pages that are not restyled yet keep a readable width; Fotos, the editor and the full views use all of it */
.page { max-width: var(--page-max); margin: 0 auto; }

/* ---------- The toast never covers a page's own bar at the bottom centre (site.css: body.has-chosen .toast) ----------
   It stands at the bottom centre like the selection bar of Fotos, Drucken's choice (with the comparison above it) and
   the decision dock of the large view and of Sichten - and it appears right after a click there ("Ins Buch", "Wählen"),
   so it would hide the very buttons that were just used. It moves above those bars; in a full view it goes to the top. */
.app-shell:has(.selbar) .toast-host { bottom: calc(var(--bottom-bar-h, 0px) + 80px); }
.app-shell:has(.dp-chosen) .toast-host { bottom: calc(var(--bottom-bar-h, 0px) + 92px); }
.app-shell:has(.dp-chosen):has(.selbar) .toast-host { bottom: calc(var(--bottom-bar-h, 0px) + 144px); }
.app-shell:has([data-lightbox]) .toast-host { top: 72px; bottom: auto; }

/* ---------- Error and "not found": one calm card like an empty state (symbol, one sentence, one primary button) ---------- */
.app-error {
    display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 640px; margin: var(--sp-6) auto;
    padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1);
    color: var(--ink); text-align: center;
}
.app-error h1 { margin: 0; font-size: var(--fs-xl); }
.app-error p { margin: 0; max-width: 520px; color: var(--ink-2); }
.app-error .app-error-icon { width: 40px; height: 40px; stroke-width: 1.4; color: var(--ink-3); }
/* an error is carmine and never told by the colour alone: the symbol says it too */
.app-error .app-error-icon.is-error { color: var(--error); }
.app-error .app-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.app-error .app-error-id { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- Breakpoints of the bar (as in B: 1100 / 900 / 760) ---------- */
@media (max-width: 1100px) {
    /* the book's name must not lose out to centred places */
    .app-header .topbar-start { flex: 1 1 auto; }
    .app-header .topbar-center { margin-left: auto; }
    .app-header .topbar-end { flex: none; }
    .app-nav a:not([aria-current="page"]) .pl-l { display: none; }
    .app-nav a:not([aria-current="page"]) { padding: 0 9px; }
}
@media (max-width: 900px) {
    .app-nav a .pl-l { display: none; }
    .app-nav a { padding: 0 9px; }
}

/* ---------- Shell: phone bottom bar (five places) ---------- */
.bottom-bar { display: none; }

@media (max-width: 760px) {
    /* 56 px: brand, book pill (no facts), menu; the places move to the bottom, light/dark into the menu */
    :root { --header-h: 56px; }
    .app-header { flex-wrap: nowrap; height: var(--header-h); min-height: 0; padding: 0 10px 0 12px; gap: 8px; }
    .app-header .topbar-center { display: none; }
    .app-header .topbar-end { flex: none; margin-left: auto; gap: 2px; }
    .app-header .book-pill { height: 36px; max-width: 58vw; padding: 0 10px 0 5px; gap: 8px; }
    .app-header .book-pill .cover-xs { width: 34px; height: 24px; }
    .app-main { padding: var(--sp-4) var(--sp-4) var(--sp-6); }

    .app-shell.has-bottom-bar { --bottom-bar-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .has-bottom-bar .app-main { padding-bottom: calc(var(--bottom-bar-h) + var(--sp-6)); }
    .bottom-bar {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; z-index: var(--z-bottom-bar); left: 0; right: 0; bottom: 0; height: var(--bottom-bar-h);
        padding: 4px 6px env(safe-area-inset-bottom, 0px);
        background: var(--glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
        border-top: 1px solid var(--line);
    }
    .app-error { margin: var(--sp-4) auto; padding: var(--sp-5) var(--sp-4); }
}
.bottom-item {
    display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: var(--tap);
    padding: 4px 0; border: 0; border-radius: var(--r-md); background: transparent;
    color: var(--ink-3); font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.bottom-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-item .i { width: 22px; height: 22px; }
.bottom-item[aria-current="page"] { color: var(--accent-text); }

/* ---------- Touch screens: every target of the bar at least 44 px (small ones get an invisible hit area) ---------- */
@media (pointer: coarse) {
    .app-header .book-pill { height: var(--tap); }
    .app-header .brand { position: relative; }
    .app-header .brand::before { content: ""; position: absolute; inset: -5px; }
    .app-nav a { position: relative; height: 38px; min-width: var(--tap); justify-content: center; }
    /* reaches over the pill's 3 px padding: 44 px to hit */
    .app-nav a::before { content: ""; position: absolute; inset: -3px 0; }
}

/* ---------- Login: the brand over the title, one card on a quiet light stage ---------- */
.login-page {
    min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-4);
    background: radial-gradient(ellipse at 50% 42%, var(--surface), transparent 70%), var(--bg);
}
.login-card {
    display: flex; flex-direction: column; width: min(380px, 100%); padding: var(--sp-6) var(--sp-5) var(--sp-5);
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.login-brand { align-self: center; margin-bottom: var(--sp-4); }
.login-card h1 { text-align: center; margin: 0 0 var(--sp-1); }
.login-hint { text-align: center; color: var(--ink-2); margin: 0 0 var(--sp-4); }
.login-error { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.login-remember { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-size: var(--fs-md); margin: var(--sp-4) 0; }
.login-remember input { width: auto; min-height: 0; }
.login-card .btn { width: 100%; }

@media print {
    .app-header, .bottom-bar { display: none !important; }
}