/* /Components/Layout/CultureSwitcher.razor.rz.scp.css */
/* CultureSwitcher: layout only; the looks ride the parents' shared row/link rules. */

.culture-switcher[b-w9r42zy8ab] {
    display: flex;
    align-items: stretch;
}

.culture-switcher-menu[b-w9r42zy8ab] {
    flex-direction: column;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Duckery App Shell — the consolidated top-bar layout. */

.duckery-app[b-5dijrkelao] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bs-body-bg, #121215);
}

/* ---- Top bar ---- */
.top-bar[b-5dijrkelao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    background: #0c0c0e;
    border-bottom: 1px solid var(--duckery-border, #2f3038);
    position: sticky;
    top: 0;
    z-index: 120;
    flex-shrink: 0;
}

.brand[b-5dijrkelao] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
}

.brand-icon[b-5dijrkelao] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

a.brand:focus-visible[b-5dijrkelao] {
    outline: 2px solid var(--duckery-gold, #d4a85a);
    outline-offset: 2px;
}

.brand-accent[b-5dijrkelao] {
    color: var(--duckery-gold, #d4a85a);
}

.top-bar-right[b-5dijrkelao] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.top-bar-link[b-5dijrkelao],
.top-bar-right[b-5dijrkelao]  .top-bar-link {
    color: #c9c9cf;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
}

a.top-bar-link:hover[b-5dijrkelao],
.top-bar-right[b-5dijrkelao]  .top-bar-link:hover {
    color: #fff;
}

a.top-bar-link:focus-visible[b-5dijrkelao],
.top-bar-right[b-5dijrkelao]  .top-bar-link:focus-visible {
    outline: 2px solid var(--duckery-gold, #d4a85a);
    outline-offset: 2px;
}

/* ---- Touch targets: the 48px bar fits 44px controls ---- */
@media (pointer: coarse) {
    .brand[b-5dijrkelao],
    .top-bar-link[b-5dijrkelao],
    .top-bar-right[b-5dijrkelao]  .top-bar-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .top-bar-link[b-5dijrkelao],
    .top-bar-right[b-5dijrkelao]  .top-bar-link {
        /* The negative margin cancels the widened padding, so the hit area grows but the layout does not. */
        padding: 0 0.75rem;
        margin: 0 -0.25rem;
    }

    /* Inset the ring: 44px + offset outgrows the 48px bar. */
    a.brand:focus-visible[b-5dijrkelao],
    a.top-bar-link:focus-visible[b-5dijrkelao],
    .top-bar-right[b-5dijrkelao]  .top-bar-link:focus-visible {
        outline-offset: -2px;
    }

    .top-bar-right[b-5dijrkelao]  .btn-sm {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ---- Narrow phones (today: brand + search + all-series + culture switcher + log in for anonymous;
   Sell adds one more control once its flag flips on, which this rule does not yet solve —
   see the flex-wrap fallback below). Below 480px the row is too tight regardless of pointer type, so
   compaction (padding, gap, font-size) applies to any narrow viewport — brand can't shrink further,
   its icon+text has no wrap point, so the room has to come from here. */
@media (max-width: 480px) {
    .top-bar[b-5dijrkelao] {
        /* height:auto so top-bar-right wrapping into two rows grows the sticky header instead of
           overflowing its fixed 52px and covering the content below it. */
        height: auto;
        min-height: 52px;
        /* Horizontal only: vertical padding here would push the one-row case past 52px, which the
           filter strip and other sticky elements elsewhere assume as the top bar's fixed height. */
        padding: 0 0.5rem;
    }

    .top-bar-right[b-5dijrkelao] {
        gap: 0.15rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .top-bar-link[b-5dijrkelao],
    .top-bar-right[b-5dijrkelao]  .top-bar-link {
        padding: 0.4rem 0.4rem;
        font-size: 0.78rem;
    }
}

/* Touch-target widening is a pointer-capability concern, not a viewport-width one — a narrow desktop
   window with a mouse must not lose its normal hit area. Only a coarse pointer skips the enlargement
   at this width; matches the pointer-gated rule above (lines 79-93), just narrowed further. */
@media (max-width: 480px) and (pointer: coarse) {
    .top-bar-link[b-5dijrkelao],
    .top-bar-right[b-5dijrkelao]  .top-bar-link {
        margin: 0;
        /* min-height alone isn't enough for a short label like "Søg" — it still needs a floor on width. */
        min-width: 44px;
        justify-content: center;
    }
}

/* ---- App body (sidebar + content) ---- */
.app-body[b-5dijrkelao] {
    display: flex;
    flex: 1;
    /* clip, not hidden: hidden makes this a scroll container, which unbinds descendant position:sticky from the document scroll. */
    overflow: clip;
}

/* ---- Footer (v0.5 W4): the Inducks credit, always visible, below the scrollable body ---- */
.app-footer[b-5dijrkelao] {
    flex-shrink: 0;
    padding: 1rem clamp(1rem, 3vw, 2.5rem);
    border-top: 1px solid var(--duckery-border, #2f3038);
    background: #0c0c0e;
    font-size: 0.8rem;
    color: var(--duckery-muted-on-surface, #9a9ab0);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}

/* Must match the .rest-sheet breakpoint in duckery-theme.css. */
@media (max-width: 1080px) {
    .app-footer.clears-rest-sheet[b-5dijrkelao] {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

.app-footer-attribution[b-5dijrkelao] {
    margin: 0;
}

.app-footer-attribution a[b-5dijrkelao] {
    color: inherit;
    text-decoration: underline;
}

.app-footer-attribution a:hover[b-5dijrkelao] {
    color: inherit;
    text-decoration: underline;
}

.app-footer-nav[b-5dijrkelao] {
    display: flex;
    gap: 1rem;
}

.app-footer-nav a[b-5dijrkelao] {
    color: inherit;
    text-decoration: none;
}

.app-footer-nav a:hover[b-5dijrkelao] {
    color: inherit;
    text-decoration: underline;
}

.app-footer-attribution a:focus-visible[b-5dijrkelao],
.app-footer-nav a:focus-visible[b-5dijrkelao] {
    outline: 2px solid var(--duckery-gold, #d4a85a);
    outline-offset: 2px;
}

/* ---- Main content ---- */
.main-content[b-5dijrkelao] {
    flex: 1;
    min-width: 0; /* flex items refuse to shrink below content min-width, inflating the shell on mobile */
    padding: 1rem;
}

/* The landing owns its own responsive padding + max-width (.bands-shell) and its sticky filter strip
   bleeds to the true viewport edge; the shared page padding would double up and break that bleed. */
.main-content:has(> .bands-shell)[b-5dijrkelao] {
    padding: 0 0 1rem;
}

/* ---- Blazor error UI ---- */
#blazor-error-ui[b-5dijrkelao] {
    background: var(--duckery-surface, #191a1f);
    color: var(--duckery-accent, #e94560);
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-5dijrkelao] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    border: none;
    background: none;
    /* The banner's accent red is 4.15:1 on the surface; the link blue keeps the control AA and distinct. */
    color: var(--bs-link-color, #8ecae6);
    font-family: inherit;
    font-size: inherit;
}

#blazor-error-ui .dismiss:focus-visible[b-5dijrkelao] {
    outline: 2px solid var(--duckery-gold, #d4a85a);
    outline-offset: 2px;
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
/* UserMenu — the name-anchored top-right dropdown (a static <details> disclosure). */

.top-nav[b-e8t7s5ik4z] {
    position: relative;
    display: flex;
    align-items: center;
}

.top-nav-details[b-e8t7s5ik4z] {
    position: relative;
}

.user-menu-toggle[b-e8t7s5ik4z] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 32px;
    padding: 0 0.6rem;
    border: none;
    border-radius: 4px;
    background: none;
    color: #ccc;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
    list-style: none; /* hide the native disclosure marker on the summary */
}

.user-menu-toggle[b-e8t7s5ik4z]::-webkit-details-marker {
    display: none;
}

.user-menu-toggle:hover[b-e8t7s5ik4z] {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

.user-menu-toggle:focus-visible[b-e8t7s5ik4z] {
    outline: 2px solid var(--duckery-gold, #d4a85a);
    outline-offset: -2px;
}

.user-menu-caret[b-e8t7s5ik4z] {
    display: inline-block;
    font-size: 0.7rem;
    line-height: 1;
    color: #888;
    transition: transform 0.15s;
}

.top-nav-details[open] .user-menu-caret[b-e8t7s5ik4z] {
    transform: rotate(180deg);
}

.top-nav-panel[b-e8t7s5ik4z] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: 0.5rem 0;
    background: #0f0f23;
    border: 1px solid var(--duckery-border, #2a2a4a);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    z-index: 150;
    display: flex;
    flex-direction: column;
}

[b-e8t7s5ik4z] .top-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: #888;
    font-size: 0.9rem;
    transition: color 0.15s, background-color 0.15s;
}

[b-e8t7s5ik4z] .top-nav-link:hover {
    color: #ccc;
    background-color: rgba(255, 255, 255, 0.05);
}

[b-e8t7s5ik4z] .top-nav-link:focus-visible {
    outline: 2px solid var(--duckery-gold, #d4a85a);
    outline-offset: -2px;
}

[b-e8t7s5ik4z] .top-nav-link.active {
    color: #e94560;
}

[b-e8t7s5ik4z] .top-nav-link .nav-icon {
    font-size: 1.1rem;
    line-height: 1;
}

[b-e8t7s5ik4z] .top-nav-link .nav-label {
    font-weight: 500;
    letter-spacing: 0.3px;
}

.user-menu-logout[b-e8t7s5ik4z] {
    margin: 0.25rem 0 0;
    padding-top: 0.25rem;
    border-top: 1px solid var(--duckery-border, #2a2a4a);
    display: flex;
    flex-direction: column;
}

.user-menu-logout-button[b-e8t7s5ik4z] {
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

/* ---- Touch targets ---- */
/* Opt-in coarse, not the base-44 idiom: the toggle's hover rect must stay 32px under a mouse. */
@media (pointer: coarse) {
    .user-menu-toggle[b-e8t7s5ik4z] {
        min-height: 44px;
    }

    [b-e8t7s5ik4z] .top-nav-link {
        min-height: 44px;
    }
}
/* /Components/Layout/UserSelector.razor.rz.scp.css */
/* UserSelector — the dev user switch form in the top bar. */

.user-selector[b-xsk92u7nes] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-selector form[b-xsk92u7nes] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.user-selector select[b-xsk92u7nes] {
    width: auto;
}

/* ---- Touch targets ---- */
@media (pointer: coarse) {
    .user-selector select[b-xsk92u7nes],
    .user-selector button[b-xsk92u7nes] {
        min-height: 44px;
    }

    /* Sub-16px inputs make iOS zoom the viewport on focus. */
    .user-selector select[b-xsk92u7nes] {
        font-size: max(16px, 0.875rem);
    }
}
/* /Components/Pages/CollectionItemDetail.razor.rz.scp.css */
/* The navigable region of a copy card is a real button so it's keyboard-focusable; it carries no button chrome. */
.copy-open[b-sn010h6pb5] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    color: inherit;
    font: inherit;
}

button.copy-open[b-sn010h6pb5] {
    cursor: pointer;
}

button.copy-open:focus-visible[b-sn010h6pb5] {
    outline: 2px solid var(--duckery-gold, #d4af37);
    outline-offset: 2px;
}

/* Per-copy bagklap control sits inline in the row (the cover-cell variant is a bottom overlay). */
[b-sn010h6pb5] .back-flap-nudge {
    display: inline-flex;
    margin-top: 0.4rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    background: rgba(15, 15, 35, 0.55);
}

[b-sn010h6pb5] .back-flap-nudge.incomplete {
    background: rgba(176, 58, 46, 0.5);
}
/* /Components/Shared/BackFlapNudge.razor.rz.scp.css */
.back-flap-nudge[b-vrbewg04iq] {
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
}

.back-flap-q[b-vrbewg04iq] {
    color: rgba(255, 255, 255, 0.85);
}

.back-flap-btn[b-vrbewg04iq] {
    border: none;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    line-height: 1;
    cursor: pointer;
    color: #0f0f23;
}

.back-flap-btn.yes[b-vrbewg04iq] {
    background: var(--duckery-gold, #d4af37);
}

.back-flap-btn.no[b-vrbewg04iq] {
    background: rgba(255, 255, 255, 0.75);
}

.back-flap-btn:focus-visible[b-vrbewg04iq] {
    outline: 2px solid var(--duckery-gold, #d4af37);
    outline-offset: 1px;
}
/* /Components/Shared/RelatedObjectsStrip.razor.rz.scp.css */
.related[b-7vl2xlv7ds] {
    margin-top: 4px;
}

/* Collapsed affordance: paperclip + count. Sized as a comfortable tap target. */
.related-toggle[b-7vl2xlv7ds] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 44px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #ddd;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 6px;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}

.related-toggle:hover[b-7vl2xlv7ds] {
    border-color: var(--duckery-gold, #d4af37);
}

.related-toggle:focus-visible[b-7vl2xlv7ds] {
    outline: 2px solid var(--duckery-gold, #d4af37);
    outline-offset: 1px;
}

.related-count[b-7vl2xlv7ds] {
    font-weight: 600;
}

/* Expanded row: a single horizontally-scrollable strip so an open cell never breaks the grid on narrow screens. */
.related-strip[b-7vl2xlv7ds] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.related-item[b-7vl2xlv7ds] {
    flex: 0 0 auto;
    width: 56px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
}

.related-item img[b-7vl2xlv7ds],
.related-thumb-blank[b-7vl2xlv7ds] {
    width: 56px;
    height: 84px;
    object-fit: cover;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    background: var(--duckery-surface, #2a2a3a);
    padding: 2px;
}

/* Owned = solid gold-outlined cover; missing = faint dashed placeholder (echoes .gap-cell.missing). */
.related-item.owned img[b-7vl2xlv7ds],
.related-item.owned .related-thumb-blank[b-7vl2xlv7ds] {
    outline: 2px solid var(--duckery-gold, #d4af37);
    outline-offset: -2px;
}

.related-item.missing img[b-7vl2xlv7ds],
.related-item.missing .related-thumb-blank[b-7vl2xlv7ds] {
    border: 1px dashed rgba(212, 175, 55, 0.45);
    opacity: 0.6;
}

.related-caption[b-7vl2xlv7ds] {
    font-size: 0.6rem;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-item:focus-visible[b-7vl2xlv7ds] {
    outline: 2px solid var(--duckery-gold, #d4af37);
    outline-offset: 2px;
}

/* Wide-caption mode (the reprint strip): a book title + year wraps to two lines instead of truncating at 56px. */
.related-strip.wide-captions .related-item[b-7vl2xlv7ds] {
    width: 110px;
}

.related-strip.wide-captions .related-item img[b-7vl2xlv7ds],
.related-strip.wide-captions .related-thumb-blank[b-7vl2xlv7ds] {
    margin: 0 auto;
}

.related-strip.wide-captions .related-caption[b-7vl2xlv7ds] {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-align: center;
}
/* /Components/Shared/ScopeEditor.razor.rz.scp.css */
/* ScopeEditor — the landing's scope-edit island (styles relocated from the retired MyCollection page). */

.scope-editor[b-ztjdb4h4gs] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
    background: var(--duckery-surface, #2a2a3a);
    border-radius: 8px;
}

.scope-era[b-ztjdb4h4gs] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    margin: 0;
    padding: 0;
}

.scope-year[b-ztjdb4h4gs] {
    width: 5rem;
    padding: 0.3rem 0.4rem;
    background: var(--duckery-surface, #2a2a3a);
    color: inherit;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 6px;
}

.scope-types[b-ztjdb4h4gs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: none;
    margin: 0;
    padding: 0;
}

.scope-hint[b-ztjdb4h4gs] {
    color: var(--duckery-tomato, #e07a5f);
    font-size: 0.85rem;
}

.scope-nudge-optout[b-ztjdb4h4gs] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    opacity: 0.85;
}

/* The series section takes its own full-width line below the era/type row (D3b). */
.scope-series[b-ztjdb4h4gs] {
    flex-basis: 100%;
}

.scope-series-toggle[b-ztjdb4h4gs] {
    background: none;
    border: none;
    color: var(--duckery-gold, #d4a85a);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.4rem 0;
    min-height: 44px;
}

.scope-series-toggle:hover[b-ztjdb4h4gs] { text-decoration: underline; color: var(--duckery-gold, #d4a85a); }

.scope-series-toggle:focus-visible[b-ztjdb4h4gs] { outline: 2px solid var(--duckery-gold, #d4a85a); outline-offset: 2px; }

.scope-series-pending[b-ztjdb4h4gs] {
    color: var(--duckery-muted-on-surface, #9a9ab0);
    font-size: 0.85rem;
}

/* The action bar stays visible while the disclosed inventory scrolls (mobile keyboard included). */
.scope-actions[b-ztjdb4h4gs] {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: var(--duckery-surface, #2a2a3a);
    padding: 0.5rem 0;
}