/**
 * BRAND OVERRIDES — TQQR (The Queen's Reading Room / Make Room for Reading)
 * =========================================================================
 *
 * Loaded only on TQQR host alongside rfw-themes-tqqr.css. Applies only
 * under body.brand-TQQR so the RFW host is unaffected.
 *
 * Typography: serif headings (Adobe Caslon Pro) + geometric sans body
 * (Gotham). Typekit kit for Gotham is `nlc2nvh` — loaded via the
 * TypekitUrl on the TQQR brand config. Caslon Pro comes from the existing
 * Adobe Fonts kit used site-wide.
 */

body.brand-TQQR {
    font-family: "gotham", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    /* Override the per-theme photo background that rfw-theme-manager.js sets
       on the body via inline styles — TQQR uses the theme's solid primary
       colour plus a repeating pattern overlay instead. !important beats the
       inline style the JS writes. position:relative creates a stacking
       context so the pattern ::before (z-index:-1) stays behind body children
       without us having to lift each child. */
    position: relative;
    background-image: none !important;
    background-color: var(--primary) !important;
}

/* Repeating pattern overlay. z-index:-1 inside body's stacking context places
   it above the body background-colour but behind every body descendant, so
   fixed-position elements (audiobook panel, contents drawer, etc.) keep
   working normally. */
body.brand-TQQR::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("/images/tqqr/background-pattern-1.png");
    background-repeat: repeat;
    opacity: 0.10;
    pointer-events: none;
    z-index: -1;
}

/* Nature theme: the swirl pattern reads too brightly against the dark teal
   primary, so invert it so the strokes go dark-on-dark and sit back. */
body.brand-TQQR.theme-nature::before {
    filter: invert(1);
}

body.brand-TQQR h1,
body.brand-TQQR h2,
body.brand-TQQR h3,
body.brand-TQQR h4,
body.brand-TQQR h5,
body.brand-TQQR h6,
body.brand-TQQR .heading,
body.brand-TQQR .page-title {
    font-family: "adobe-caslon-pro", "Caslon Pro", "Hoefler Text", Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.005em;
}

body.brand-TQQR h1,
body.brand-TQQR .heading-lg,
body.brand-TQQR .page-title {
    font-size: 3.25rem;
    line-height: 3.75rem;
}

/* Course page title (rfwPageTitle.cshtml) renders <h1 class="heading section-title">.
   The default h1 size (3.25rem) is too dominant for inline page headings — dial
   .heading.section-title back so it reads as a page label, not a hero. Other
   landing pages (welcome, recs, picks, login) target .section-title via their
   own attribute-scoped rules, which keep higher specificity than this. */
body.brand-TQQR .heading.section-title {
    font-size: 2rem;
    line-height: 2.25rem;
}

body.brand-TQQR strong,
body.brand-TQQR b {
    font-weight: 700;
}

/* Themed bold within rich-text content. Scoped to .elText (which sits on the
   light content card) so nav/footer bold — on dark backgrounds — is unaffected.
   Matches the .elText link colour: wine on mystical, ink-blue on sky, etc. */
body.brand-TQQR .elText strong,
body.brand-TQQR .elText b {
    color: var(--text-primary);
}

body.brand-TQQR .top-nav {
    background: #002d37;
}

body.brand-TQQR .bottom-nav,
body.brand-TQQR footer.bottom-nav {
    background: #002d37;
    color: #ffffff;
    border-top: 0;
}

body.brand-TQQR .bottom-nav a,
body.brand-TQQR .bottom-nav .footer-brand p {
    color: #ffffff;
}

/* Centre the footer content on TQQR. The shared footer uses Tailwind's
   justify-between which pins its single child to the left; override that
   and centre the text inside the brand block too. */
body.brand-TQQR .bottom-nav > .container > div {
    justify-content: center;
}

body.brand-TQQR .bottom-nav .footer-brand {
    text-align: center;
}

/* Progress dots — remap each theme's dot colour to the TQRR palette so the
   jump-between-sections indicator matches the TQQR theme values defined in
   rfw-themes-tqqr.css. */
body.brand-TQQR .progress-dot[data-theme="nature"]   { background: #002d37; }
body.brand-TQQR .progress-dot[data-theme="sky"]      { background: #005a7d; }
body.brand-TQQR .progress-dot[data-theme="sunset"]   { background: #c85f28; }
body.brand-TQQR .progress-dot[data-theme="mystical"] { background: #873246; }
body.brand-TQQR .progress-dot[data-theme="ocean"]    { background: #46919b; }
body.brand-TQQR .progress-dot[data-theme="gold"]     { background: #be8c4b; }

/* Main content card — TQQR uses a flat stone-grey card with square corners
   instead of the default white rounded one. */
body.brand-TQQR .content-overlay {
    background-color: #eaeaea;
    border-radius: 0;
}

/* Mobile sweep 2026-07-24: the default overlay padding is p-8 (32px), and pages that
   render their own .content-overlay cards inside the layout's (Bookmarks, Certificates,
   ...) double that gutter - ~160px of horizontal padding left content in a ~267px column
   on a 430px phone. Trim the gutter on narrow screens so content uses the width. This
   selector (body.brand-TQQR .content-overlay) out-specifies the Tailwind p-8/p-12 utility,
   so no !important is needed. The login overlay keeps its own padding (higher-specificity
   [data-tqqr-login] rule below wins). */
@media (max-width: 768px) {
    body.brand-TQQR .content-overlay { padding: 1rem; }
}
@media (max-width: 480px) {
    body.brand-TQQR .content-overlay { padding: 0.85rem; }
}

/* ===========================================
   TQQR FLAT, SQUARE-CORNERED UI
   The TQRR brand language is entirely flat and rectangular — no pills,
   no rounded cards. Blanket-kill border-radius on every descendant of
   body.brand-TQQR, with targeted exceptions for elements that are meant
   to be circular (avatars, progress dots, theme picker, .rounded-full,
   and the inherent radii on checkboxes/radios which the browser handles).
   =========================================== */
body.brand-TQQR *:not(.rounded-full):not(.progress-dot):not(.theme-btn):not(.circle):not(.avatar):not([class*="avatar-"]):not([class*="-circle"]):not(.spinner-border):not(.download-pdf-spinner):not(.header-action-btn):not([class*="tqqr-user-"]):not([class*="tqqr-picks-"]):not([class*="tqqr-jump"]) {
    border-radius: 0 !important;
}

/* Header action icon buttons (audio, bookmark, mark-as-read) — keep the
   circular shape and soften the hover so it doesn't jump/scale aggressively. */
body.brand-TQQR .header-action-btn:hover {
    transform: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Audiobook player background — the shared rfw-audiobook.css uses a blurred
   per-theme photo at 40% opacity behind the player. On TQQR, swap that for
   the TQQR pattern overlay and replace the dark-to-darker gradient with a
   flat primary colour (the shared gradient mixes primary-dark with 40% black,
   which on the near-black nature primary-dark #001e26 renders essentially
   black and hides the pattern). Flat primary + 10% pattern reads correctly
   on all five theme colours. */
body.brand-TQQR .audiobook-content {
    background: var(--primary) !important;
}

body.brand-TQQR .audiobook-player-main::before {
    background-image: url("/images/tqqr/background-pattern-1.png") !important;
    background-size: auto !important;
    background-repeat: repeat !important;
    background-position: 0 0 !important;
    opacity: 0.10 !important;
}

body.brand-TQQR .audiobook-panel .audiobook-icon {
    display: none !important;
}

/* Themed modal overlay (.rfw-modal-overlay) — the shared rfw-modal.css
   applies a per-theme gradient AND optional per-theme photo (via the
   .with-background-image class). Replace all that on TQQR with a flat
   theme-primary colour plus the shared 10% pattern overlay. */
body.brand-TQQR .rfw-modal-overlay {
    background: var(--primary) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.brand-TQQR .rfw-modal-overlay.modal-theme-nature   { background-color: #002d37 !important; }
body.brand-TQQR .rfw-modal-overlay.modal-theme-sky      { background-color: #005a7d !important; }
body.brand-TQQR .rfw-modal-overlay.modal-theme-sunset   { background-color: #c85f28 !important; }
body.brand-TQQR .rfw-modal-overlay.modal-theme-mystical { background-color: #873246 !important; }
body.brand-TQQR .rfw-modal-overlay.modal-theme-ocean    { background-color: #46919b !important; }

body.brand-TQQR .rfw-modal-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/tqqr/background-pattern-1.png");
    background-repeat: repeat;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}

body.brand-TQQR .rfw-modal-overlay > * {
    position: relative;
    z-index: 1;
}

/* Thin 1px borders on all buttons (TQRR button style uses a single hairline
   rather than the heavier 2px stroke some components default to). */
body.brand-TQQR button,
body.brand-TQQR .btn,
body.brand-TQQR a.btn,
body.brand-TQQR input[type="submit"],
body.brand-TQQR input[type="button"],
body.brand-TQQR input[type="reset"],
body.brand-TQQR [class*="btn-"]:not(.btn-text):not(.btn-loading) {
    border-width: 1px !important;
}

/* Hide the decorative circle that appears around page titles on RFW —
   TQQR uses plain serif titles without the accent graphic. */
body.brand-TQQR .title-accent-circle {
    display: none !important;
}

/* Course-contents / section index cards. The shared `rfw-components.css`
   hard-codes RFW colour values on `.section-card.card-*` and
   `.section-number-*`. Override them with the TQRR palette so the contents
   page cards match the TQQR theme values. */
body.brand-TQQR .section-card.card-nature { border-left-color: #002d37 !important; }
body.brand-TQQR .section-card.card-nature .heading-primary { color: #002d37 !important; }
body.brand-TQQR .section-card.card-nature .section-label { color: #2f6b74 !important; }

body.brand-TQQR .section-card.card-sky { border-left-color: #005a7d !important; }
body.brand-TQQR .section-card.card-sky .heading-primary { color: #005a7d !important; }
body.brand-TQQR .section-card.card-sky .section-label { color: #3a6280 !important; }

body.brand-TQQR .section-card.card-sunset { border-left-color: #c85f28 !important; }
body.brand-TQQR .section-card.card-sunset .heading-primary { color: #c85f28 !important; }
body.brand-TQQR .section-card.card-sunset .section-label { color: #dca078 !important; }

body.brand-TQQR .section-card.card-mystical { border-left-color: #873246 !important; }
body.brand-TQQR .section-card.card-mystical .heading-primary { color: #873246 !important; }
body.brand-TQQR .section-card.card-mystical .section-label { color: #9c4258 !important; }

body.brand-TQQR .section-card.card-ocean { border-left-color: #46919b !important; }
body.brand-TQQR .section-card.card-ocean .heading-primary { color: #46919b !important; }
body.brand-TQQR .section-card.card-ocean .section-label { color: #316d77 !important; }

/* Numbered section badges — replace the RFW gradients with flat TQRR
   colour fills. Keep white text for contrast. */
body.brand-TQQR .section-number-nature {
    background: #002d37 !important;
    border-color: #001e26 !important;
}
body.brand-TQQR .section-number-sky {
    background: #005a7d !important;
    border-color: #003b54 !important;
}
body.brand-TQQR .section-number-sunset {
    background: #c85f28 !important;
    border-color: #8d4419 !important;
}
body.brand-TQQR .section-number-mystical {
    background: #873246 !important;
    border-color: #5c2130 !important;
}
body.brand-TQQR .section-number-ocean {
    background: #46919b !important;
    border-color: #2f6770 !important;
}

/* ===========================================
   TQQR NAVIGATION
   Centered-logo header with nav links distributed
   left and right on desktop; hamburger + slide-down
   full-screen overlay on mobile.
   =========================================== */

.tqqr-nav {
    background: #002d37;
    color: #ffffff;
    position: relative;
    z-index: 40;
}

/* Desktop layout: 3-column grid [1fr][auto][1fr].
 * Logo pinned to the left edge (column 1, sized by content), nav items in
 * the auto centre column (truly centred in the viewport because the two 1fr
 * side columns are always equal width), user menu pinned to the right edge
 * (column 3) via justify-self: end. */
.tqqr-nav-desktop {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 40px;
    height: 127px;
    padding: 0 40px;
    max-width: 1600px;
    margin: 0 auto;
}

.tqqr-nav-items {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 56px;
}

.tqqr-nav-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 32px;
}

.tqqr-nav-inner {
    display: flex;
    align-items: center;
    gap: 56px;
}

.tqqr-logo-link {
    display: flex;
    align-items: center;
    padding: 0;
    text-decoration: none;
    flex-shrink: 0;
}

.tqqr-logo-link .tqqr-logo {
    display: block;
    width: 127px;
    height: 127px;
    max-width: none;
}

.tqqr-nav-link {
    color: #ffffff;
    text-decoration: none;
    font-family: "adobe-caslon-pro", "Caslon Pro", "Hoefler Text", Georgia, serif;
    font-weight: 600;
    font-size: 23px;
    letter-spacing: 0.01em;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

/* Listen / Download buttons reuse the nav-link look. The underlying partials
   emit <button>/<a> with an SVG icon + label — reset native styling and hide
   the icon so we have text-only nav items on TQQR. */
.tqqr-nav-action {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Hide the icon SVG on Listen button and the icon wrapper on Download button.
   The Download partial's CSS-based spinner (.download-pdf-spinner) is kept
   so the loading state still works. */
.tqqr-nav-action > svg,
.tqqr-nav-action .download-pdf-icon {
    display: none;
}

.tqqr-nav-action .nav-text {
    margin-left: 0 !important;
}

.tqqr-nav-link:hover,
.tqqr-nav-link:focus-visible {
    opacity: 0.7;
    color: #ffffff;
    text-decoration: none;
}

.tqqr-nav-link[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}

.tqqr-nav-icon-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.tqqr-nav-icon-link:hover,
.tqqr-nav-icon-link:focus-visible {
    opacity: 0.7;
}

.tqqr-nav-icon {
    width: 30px;
    height: 30px;
    display: block;
}

/* Floating side rail for course-context actions (Listen / Download).
   Fixed to the right edge, vertically centred — stays in place while the
   user scrolls a course page. Each button reuses the shared course-button
   partials (rfwListenToCourseButton, rfwDownloadCourseButton) so all the
   click/download behaviour is untouched; the inline SVG + .nav-text are
   hidden and a TQQR-styled icon is painted via ::before. */
.tqqr-side-rail {
    position: fixed;
    top: 50%;
    left: 0;
    right: auto;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 80;
    pointer-events: none;
    /* Hidden visually but kept in the DOM (markup + JS hooks intact). */
    visibility: hidden;
}

.tqqr-side-rail > * {
    pointer-events: auto;
}

.tqqr-side-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    background: rgba(0, 45, 55, 0.75);
    border: 1px solid #46919b;
    color: #ffffff;
    text-decoration: none;
    line-height: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.tqqr-side-action:hover,
.tqqr-side-action:focus-visible {
    background: #002d37;
    opacity: 1;
    outline: none;
}

/* Flush-left rail: drop the left border since the rail sits against the
   viewport edge. Drop the bottom border of the Listen (top) tile so the
   shared seam with the Download tile is a single 1px line rather than two
   stacked 1px lines. The download partial injects a <style> element
   between the buttons, which breaks `.tqqr-side-action + .tqqr-side-action`
   adjacency — target the variant class directly instead. */
.tqqr-side-action {
    border-left: 0;
}

.tqqr-side-action--listen {
    border-bottom: 0;
}

/* Hide the partial's inline SVG + label — the icon is painted via ::before. */
.tqqr-side-action > svg,
.tqqr-side-action > .download-pdf-icon,
.tqqr-side-action .nav-text {
    display: none !important;
}

/* SVGs are painted as a CSS mask so the colour follows background-color
   — lets the icons pick up the brand teal without editing the SVGs (which
   ship with white strokes). */
.tqqr-side-action::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background-color: #46919b;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* Hide the icon during a PDF download; the partial's built-in spinner
   takes over as the busy indicator. */
.tqqr-side-action.download-pdf-loading::before {
    display: none;
}

.tqqr-side-action--listen::before {
    mask-image: url("/images/tqqr/listen-icon.svg");
    -webkit-mask-image: url("/images/tqqr/listen-icon.svg");
}

.tqqr-side-action--download::before {
    mask-image: url("/images/tqqr/download-icon.svg");
    -webkit-mask-image: url("/images/tqqr/download-icon.svg");
}

/* Hide the side rail on mobile — course actions on phones are surfaced
   elsewhere (or via the existing menu) and a fixed rail would crowd the
   narrow viewport. */
@media (max-width: 900px) {
    .tqqr-side-rail {
        display: none;
    }
}

/* Top-align main content on TQQR pages (non-login). The default template
   uses min-h-screen + items-center + justify-center to vertically centre
   the content-overlay, which reads awkwardly on long pages. Pin content
   to the top with breathing-room padding above/below so it separates
   cleanly from the header and footer. Experimental — easy to revert. */
body.brand-TQQR:not([data-tqqr-login="true"]) .page > .min-h-screen {
    align-items: flex-start;
    min-height: 0;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Mobile: tighten the gap between the secondary subnav and the content
   overlay so the top spacing matches the 16px (p-4) side padding. */
@media (max-width: 900px) {
    body.brand-TQQR:not([data-tqqr-login="true"]) .page > .min-h-screen {
        padding-top: 1rem;
    }
}

/* Sticky-footer layout for TQQR non-login pages. Since the content
   container is now content-height (min-height: 0 above) rather than full
   viewport, short pages previously left a strip of the body background
   visible below the footer. Lay the body out as a flex column so the
   main .page wrapper absorbs any remaining viewport height and the
   footer is pinned to the bottom edge — no gap. */
body.brand-TQQR:not([data-tqqr-login="true"]) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.brand-TQQR:not([data-tqqr-login="true"]) > .page {
    flex: 1 0 auto;
}

body.brand-TQQR:not([data-tqqr-login="true"]) > footer {
    flex-shrink: 0;
}

/* Welcome page body: Tailwind preflight strips the default <p> margins
   from rich-text output, which collapses paragraphs together. Restore a
   natural paragraph rhythm and give the bottom CTA breathing room. */
.rfw-welcome-body p {
    margin-bottom: 1rem;
}

.rfw-welcome-body p:last-child {
    margin-bottom: 0;
}

.rfw-welcome-cta {
    margin-top: 2.5rem;
    text-align: center;
}

/* Welcome page: swap the outer page background to the TQQR light-teal
   accent, matching the way course pages change their outer colour per
   theme (e.g. sunset → orange, mystical → wine). The inner content card
   keeps its default light-grey fill so body copy stays readable.
   Triggered by data-tqqr-welcome='true' on <body>, set by
   rfwWelcomePage.cshtml. */
body.brand-TQQR[data-tqqr-welcome="true"] {
    background-color: #46919b !important;
}

/* Mobile: the global TQQR h1 is 3.25rem and the Tailwind text-4xl class
   on the welcome title bumps it again — on narrow viewports it wraps
   across several lines. Dial it back just for the welcome page on phones. */
@media (max-width: 900px) {
    body.brand-TQQR[data-tqqr-welcome="true"] .content-overlay h1,
    body.brand-TQQR[data-tqqr-welcome="true"] .content-overlay .section-title {
        font-size: 1.75rem;
        line-height: 2rem;
    }
}

/* Logo-only header (pre-login pages): collapse the 3-col grid so the logo
   is truly centred rather than sitting in the first column. */
.tqqr-nav-desktop-logo-only {
    grid-template-columns: 1fr;
    justify-items: center;
}

/* Mobile nav defaults to hidden on desktop */
.tqqr-nav-mobile {
    display: none;
}

/* Hamburger (mobile only) */
.tqqr-hamburger {
    background: transparent;
    border: 0;
    padding: 8px 4px;
    margin: 0;
    cursor: pointer;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 36px;
    height: 36px;
    color: #ffffff;
}

.tqqr-hamburger span {
    display: block;
    width: 28px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}

/* Mobile breakpoint */
@media (max-width: 900px) {
    .tqqr-nav-desktop {
        display: none;
    }

    .tqqr-nav-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100px;
        padding: 0 16px;
        position: relative;
    }

    /* Avatar pill on the left edge — sits opposite the hamburger. Click goes
       straight to My profile (no dropdown — see rfwUserAvatarLink.TQQR.cshtml). */
    .tqqr-user-mobile-link {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 999px !important;
        padding: 4px;
        background: transparent;
        transition: border-color 0.15s ease;
    }

    .tqqr-user-mobile-link:hover,
    .tqqr-user-mobile-link:focus-visible {
        border-color: rgba(255, 255, 255, 0.85);
        outline: none;
        text-decoration: none;
    }

    .tqqr-user-mobile-link .tqqr-user-avatar {
        width: 36px;
        height: 36px;
    }

    .tqqr-hamburger {
        display: flex;
    }

    /* Logo block sits centred inside the 100px bar (logo is 100px tall so
       it fits exactly). */
    .tqqr-mobile-logo-wrap {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        background: #002d37;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        z-index: 1;
    }

    .tqqr-mobile-logo-wrap .tqqr-logo {
        display: block;
        height: 100px;
        width: auto;
    }

    /* Mobile logo previously overhung the 60px bar by 40px and needed extra
       padding on .page to prevent collision with page content. As of
       2026-05-22 the bar is sized to the logo (100px) so the logo is fully
       contained — no extra padding needed. */
}

/* ===========================================
   TQQR MOBILE MENU OVERLAY
   Slides in from the top on open.
   =========================================== */

.tqqr-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #46919b;
    color: #ffffff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Snappy fade — opacity transitions, visibility waits for the fade to
       finish before disappearing so the menu content doesn't pop out. */
    transition: opacity 180ms ease-out, visibility 0s linear 180ms;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.tqqr-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease-out, visibility 0s linear 0s;
}

body.tqqr-menu-locked {
    overflow: hidden;
}

.tqqr-menu-topbar {
    position: relative;
    min-height: 124px;
}

/* Pin the overlay logo to the exact same position/size as the closed-state
   .tqqr-mobile-logo-wrap so the logo appears to stay put through the fade. */
.tqqr-menu-logo {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    z-index: 1;
}

.tqqr-menu-logo .tqqr-logo {
    display: block;
    height: 100px;
    width: auto;
}

.tqqr-menu-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    padding: 8px;
    color: #ffffff;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 2px;
}

.tqqr-menu-close:hover,
.tqqr-menu-close:focus-visible {
    color: #002d37;
}

.tqqr-menu-close svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Installed PWA on iOS: the overlay fills behind the status bar / Dynamic Island,
   so the absolutely-positioned logo (top:0) and close button (top:14px) sit under it
   and the X is hard to tap. Offset both by the safe-area inset and grow the topbar so
   the links don't collide. Standalone-only; env() is 0 in-browser and on non-notch. */
@media (display-mode: standalone) {
    .tqqr-menu-topbar { min-height: calc(124px + env(safe-area-inset-top, 0px)); }
    .tqqr-menu-logo { top: env(safe-area-inset-top, 0px); }
    .tqqr-menu-close { top: calc(14px + env(safe-area-inset-top, 0px)); }
}

.tqqr-menu-links {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 40px 24px 24px;
    text-align: center;
}

/* Decorative symbol row below the menu links — three fleur-de-lis in a
   horizontal strip. Sits on the overlay's light-teal background; symbols
   are painted in TQQR dark teal via a CSS mask so colour changes don't
   need a recoloured SVG. */
.tqqr-menu-art {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    padding: 32px 24px 48px;
    min-height: 0;
}

.tqqr-menu-symbol {
    display: block;
    width: 56px;
    height: 80px;
    background-color: #002d37;
    mask: url("/images/tqqr/symbol.svg") center / contain no-repeat;
    -webkit-mask: url("/images/tqqr/symbol.svg") center / contain no-repeat;
}

.tqqr-menu-link {
    color: #ffffff;
    text-decoration: none;
    font-family: "adobe-caslon-pro", "Caslon Pro", "Hoefler Text", Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0.005em;
    /* keep the primary mobile nav links at a >=44px tap target (mobile sweep 2026-07-24) */
    padding: 4px 12px;
}

.tqqr-menu-link:hover,
.tqqr-menu-link:focus-visible {
    color: #002d37;
    text-decoration: none;
}

/* Permission-gated nav entries (currently just Reading recs). Padlock glyph
   trails the link label on both desktop nav and mobile menu so users know up
   front that the page may not be reachable without extra access. Inline SVG
   uses currentColor so it tracks the link's hover/focus state automatically. */
.tqqr-nav-link--locked,
.tqqr-menu-link--locked {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.tqqr-nav-lock {
    width: 0.85em;
    height: 0.85em;
    flex: 0 0 auto;
    opacity: 0.85;
    display: inline-block;
    /* Geometric centering on the line box sits the icon slightly below the
       text's cap-height midpoint — nudge up so it reads visually centred
       against the uppercase letterforms in "Reading recs". */
    transform: translateY(-0.12em);
}

.tqqr-menu-lock {
    width: 0.7em;
    height: 0.7em;
    flex: 0 0 auto;
    opacity: 0.85;
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-0.1em);
}


/* ===========================================================================
   TQQR LOGIN HERO LAYOUT
   Triggered by data-tqqr-login='true' on <body>. Mirrors the Queen's Reading
   Room homepage: photo fills the viewport, hero-overlay.svg creates the
   dark teal decorative wedge on the left, and the login form sits inside a
   solid teal panel anchored to the left.
   =========================================================================== */

/* Body is just flat dark teal on the login page — the photo and overlay
   live on the hero container itself so they can't bleed past the 800px
   hero region into the area behind the footer. */
body.brand-TQQR[data-tqqr-login="true"] {
    background-image: none !important;
    background-color: #002d37 !important;
}

/* Kill the global TQQR pattern overlay on the login page — the hero has
   its own overlay (hero-overlay.svg) applied at the container level. */
body.brand-TQQR[data-tqqr-login="true"]::before {
    background-image: none;
    background-color: transparent;
}

/* Photo on the hero container. Responsive swaps match the source breakpoints.
   Relative positioning so the overlay pseudo-element anchors to this box. */
body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen {
    min-height: 0;
    height: 800px;
    justify-content: flex-start;
    padding: 2rem 3rem;
    position: relative;
    background-image: url("/images/tqqr/HMQ-HOMEPAGE-wider-shorter-400x600.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #002d37;
    overflow: hidden;
}

@media (min-width: 450px) {
    body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen {
        background-image: url("/images/tqqr/HMQ-HOMEPAGE-wider-shorter-800x900.jpg");
    }
}

@media (min-width: 800px) {
    body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen {
        background-image: url("/images/tqqr/HMQ-HOMEPAGE-wider-shorter-1600x900.jpg");
    }
}

@media (min-width: 1200px) {
    body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen {
        background-image: url("/images/tqqr/HMQ-HOMEPAGE-wider-shorter-1920x900.jpg");
    }
}

/* Hero-overlay SVG sits on top of the photo, confined to the hero box.
   auto 100% preserves the SVG aspect (2.52:1), right-anchored so the fade
   end stays at the right edge and wider viewports reveal more decoration
   on the left. The pseudo-element covers the whole hero; z-index:0 keeps
   it behind the panel (which establishes its own stacking context). */
body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/tqqr/hero-overlay.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    pointer-events: none;
    z-index: 0;
}

/* On super-wide viewports the SVG (2.52:1) becomes narrower than the viewport
   when anchored right, leaving a bare photo strip on the far left. Flip to
   left-anchored above 1800px so the decoration sits at the left edge and any
   leftover width falls on the right, where the photo should show anyway. */
@media (min-width: 1800px) {
    body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen::before {
        background-position: left center;
    }
}

/* Lift the panel above the overlay pseudo-element. */
body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen > .max-w-5xl {
    position: relative;
    z-index: 1;
}

body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen > .max-w-5xl {
    max-width: 480px;
}

/* The login card becomes the solid teal panel — flat, no shadow, no radius
   (the global radius=0 rule already handles the latter). Padding tuned so
   the panel doesn't dominate the viewport height. */
body.brand-TQQR[data-tqqr-login="true"] .content-overlay {
    background: #46919b !important;
    color: #ffffff;
    box-shadow: none !important;
    padding: 2rem 2.25rem !important;
}

/* Heading on desktop — the global h1 rule is 3.25rem which makes the panel
   run full-height. Dial it back on the login hero only. */
body.brand-TQQR[data-tqqr-login="true"] .content-overlay h1,
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .section-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-bottom: 0.5rem;
}

/* Text inside the panel inverts to white for legibility on teal. */
body.brand-TQQR[data-tqqr-login="true"] .content-overlay,
body.brand-TQQR[data-tqqr-login="true"] .content-overlay h1,
body.brand-TQQR[data-tqqr-login="true"] .content-overlay h2,
body.brand-TQQR[data-tqqr-login="true"] .content-overlay h3,
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .heading,
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .section-title,
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .section-subtitle-enhanced,
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .form-label {
    color: #ffffff;
}

/* Keep the little accent line on the subtitle visible against teal. */
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .section-subtitle-enhanced::before,
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .section-subtitle-enhanced::after {
    background: #ffffff;
    border-color: #ffffff;
}

/* Forgot-password and other text links: white, subtle hover. */
body.brand-TQQR[data-tqqr-login="true"] .content-overlay a {
    color: #ffffff;
}
body.brand-TQQR[data-tqqr-login="true"] .content-overlay a:hover {
    opacity: 0.8;
}

/* Submit button echoes the TQQR dark teal — matches the homepage "Read more". */
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .btn-primary {
    background: #002d37 !important;
    border-color: #002d37 !important;
    color: #ffffff !important;
}

body.brand-TQQR[data-tqqr-login="true"] .content-overlay .btn-primary:hover {
    background: #001e26 !important;
    border-color: #001e26 !important;
}

/* Password visibility toggle icon — Tailwind's text-gray-400 is washed out
   against the white password input. Use TQQR primary dark teal so the icon
   reads clearly on the white field. The SVG uses stroke=currentColor so
   setting color is enough. */
body.brand-TQQR[data-tqqr-login="true"] .content-overlay #eye-icon {
    color: #002d37;
    opacity: 0.7;
    transition: opacity 0.15s ease-in-out;
}

body.brand-TQQR[data-tqqr-login="true"] .content-overlay .form-group .relative > button:hover #eye-icon {
    opacity: 1;
}

/* Eye-icon toggle as its own bordered compartment on the right of the
   password input. Markup positions the button absolute inset-y-0 right-0
   inside the input — we give it a visible left divider + outer border so
   the eye sits in its own visual box (mirrors the original v13 design).
   Match left/right padding so the icon stays centred. */
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .form-group .relative > button {
    padding-left: 0.75rem;
    justify-content: center;
    /* border-width forced to 2px to override the global TQQR 1px-button rule
       (~line 206) so the eye-toggle border matches the input's 2px border. */
    border: 2px solid #002d37 !important;
    background-color: #ffffff;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

body.brand-TQQR[data-tqqr-login="true"] .content-overlay .form-group .relative > button:hover {
    background-color: rgba(0, 45, 55, 0.04);
}

/* Resting-state input border: the shared .form-input uses #e5e7eb (Tailwind
   gray-200) which blends into the TQQR overlay panel and the page background.
   Use solid primary dark teal so the field edge is clearly defined against
   the teal panel — matches the eye-toggle divider for a consistent boxed look. */
body.brand-TQQR .form-input {
    border-color: #002d37 !important;
    background-color: #ffffff !important;
    /* Typed text — overlay parent is white text on teal, which the input
       inherits and renders white-on-white. Pin to primary dark teal. */
    color: #002d37 !important;
}

/* Placeholder hint: muted dark teal so "Enter your email" / "Enter your
   password" is visible against the white input but reads as a soft hint
   rather than entered content. */
body.brand-TQQR .form-input::placeholder {
    color: rgba(0, 45, 55, 0.45);
    opacity: 1; /* Firefox lowers opacity by default — pin to 1 */
}

/* TQQR-only section jump dropdown (rendered into the secondary navbar — see
   Views/Partials/rfw/rfwSectionJump.TQQR.cshtml, called from rfwTopNav.TQQR.
   cshtml). Compact pill trigger with a coloured section dot; dropdown panel
   lists every visible section plus "My progress" (since that link is only
   meaningful on course pages and lives in this menu now). */
.tqqr-jump {
    position: relative;
    display: inline-flex;
    font-family: 'gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* When rendered inside the secondary navbar, push to the right edge so the
   course title ("Make Room for Reading") stays left-aligned. */
.tqqr-course-subnav-inner .tqqr-jump {
    margin-left: auto;
}

.tqqr-jump__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    background-color: #003d4a;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 9999px !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.2;
    transition: filter 180ms ease, background-color 180ms ease;
}

.tqqr-jump__trigger:hover {
    filter: brightness(1.18);
}

.tqqr-jump__trigger:focus-visible {
    outline: 3px solid rgba(70, 145, 155, 0.55);
    outline-offset: 2px;
}

.tqqr-jump__dot {
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.tqqr-jump__dot[data-theme="nature"]   { background-color: #002d37; }
.tqqr-jump__dot[data-theme="sky"]      { background-color: #005a7d; }
.tqqr-jump__dot[data-theme="sunset"]   { background-color: #c85f28; }
.tqqr-jump__dot[data-theme="mystical"] { background-color: #873246; }
.tqqr-jump__dot[data-theme="ocean"]    { background-color: #46919b; }
.tqqr-jump__dot[data-theme="gold"]     { background-color: #be8c4b; }

.tqqr-jump__label {
    opacity: 0.78;
    font-weight: 400;
}

.tqqr-jump__current {
    font-weight: 600;
}

.tqqr-jump__chevron {
    width: 1rem;
    height: 1rem;
    color: #ffffff;
    opacity: 0.85;
    transition: transform 180ms ease;
    margin-left: 0.125rem;
}

/* Trigger icon used when the user is on a non-section page (course landing
   or My progress) — replaces the coloured section dot so the trigger still
   reflects current location at a glance. */
.tqqr-jump__trigger-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.92);
}

.tqqr-jump__trigger-icon svg {
    width: 100%;
    height: 100%;
}

.tqqr-jump.is-open .tqqr-jump__chevron {
    transform: rotate(180deg);
}

.tqqr-jump__menu {
    list-style: none;
    margin: 0;
    padding: 0.375rem 0;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 14rem;
    background-color: #002d37;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem !important;
    z-index: 1000;
    overflow: hidden;
}

.tqqr-jump__menu[hidden] {
    display: none;
}

.tqqr-jump__menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tqqr-jump__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 40px;
    box-sizing: border-box;
    transition: background-color 180ms ease;
}

.tqqr-jump__item:hover,
.tqqr-jump__item:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.tqqr-jump__item.is-active {
    background-color: rgba(255, 255, 255, 0.06);
    font-weight: 700;
}

.tqqr-jump__item-dot {
    width: 9px;
    height: 9px;
    border-radius: 50% !important;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.tqqr-jump__item-dot[data-theme="nature"]   { background-color: #002d37; }
.tqqr-jump__item-dot[data-theme="sky"]      { background-color: #005a7d; }
.tqqr-jump__item-dot[data-theme="sunset"]   { background-color: #c85f28; }
.tqqr-jump__item-dot[data-theme="mystical"] { background-color: #873246; }
.tqqr-jump__item-dot[data-theme="ocean"]    { background-color: #46919b; }
.tqqr-jump__item-dot[data-theme="gold"]     { background-color: #be8c4b; }

.tqqr-jump__item-label {
    flex: 1;
}

.tqqr-jump__item-marker {
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.85;
}

.tqqr-jump__divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    margin: 0.375rem 0;
    padding: 0;
}

.tqqr-jump__item--progress,
.tqqr-jump__item--course {
    color: rgba(255, 255, 255, 0.92);
}

.tqqr-jump__item-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.8);
}

.tqqr-jump__item-icon svg {
    width: 100%;
    height: 100%;
}

/* Mobile: the secondary navbar collapses on small screens (mobile uses the
   hamburger overlay) so the jump dropdown only renders on desktop. No extra
   styles needed — but if it ever appears on mobile, ensure it stays usable. */
@media (max-width: 640px) {
    .tqqr-jump__menu {
        right: auto;
        left: 0;
    }
}

/* Focused inputs on TQQR login: the shared .form-input:focus rule uses
   var(--primary), which on TQQR is #002d37 (near-black teal) and reads as
   a black outline against the light-teal panel. Override to white with a
   soft white glow so focus is visible but on-brand. */
body.brand-TQQR[data-tqqr-login="true"] .content-overlay .form-input:focus {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
}

/* Below ~900px the design switches to a TQRR-homepage-style layout:
   prominent photo banner at the top (driven by ::before on the hero
   container), then a full-width teal region below that fills the rest of
   the viewport with the login form centred inside it. No floating card.
   The logo badge from rfwTopNavLogoOnly.TQQR.cshtml overhangs onto the top
   edge of the photo, mirroring the Queen's Reading Room homepage. */
@media (max-width: 900px) {
    body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
        height: auto;
        min-height: calc(100vh - 60px - 56px);
        background-image: none;
    }

    /* Photo banner — repurposes the ::before that carries hero-overlay.svg
       on desktop. On mobile the overlay is dropped and ::before becomes
       the prominent photo band instead. */
    body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen::before {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: 45vh;
        min-height: 220px;
        background-image: url("/images/tqqr/HMQ-HOMEPAGE-wider-shorter-400x600.jpg");
        background-size: cover;
        background-position: center 30%;
        background-repeat: no-repeat;
    }

    /* Full-width teal panel — flush to viewport edges, soaks up the
       remaining height below the photo, form vertically centred inside. */
    body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen > .max-w-5xl {
        max-width: 100%;
        width: 100%;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.brand-TQQR[data-tqqr-login="true"] .content-overlay {
        padding: 1.25rem 1.5rem 3rem !important;
        box-shadow: none !important;
    }

    /* Centre the heading block and tighten the spacing around it so the form
       sits higher in the teal area (Tailwind's mb-8 on .page-header-enhanced
       is too generous for the mobile treatment). */
    body.brand-TQQR[data-tqqr-login="true"] .content-overlay .page-header-enhanced,
    body.brand-TQQR[data-tqqr-login="true"] .content-overlay .title-with-accent {
        text-align: center;
    }

    body.brand-TQQR[data-tqqr-login="true"] .content-overlay .page-header-enhanced {
        margin-bottom: 0.5rem;
    }

    /* Heading is 3.25rem by default — too tall and it wraps ugly on phones.
       Dial it back and kill the bottom margin so the subtitle sits close. */
    body.brand-TQQR[data-tqqr-login="true"] .content-overlay h1,
    body.brand-TQQR[data-tqqr-login="true"] .content-overlay .section-title {
        font-size: 2rem;
        line-height: 2.25rem;
        margin-bottom: 0.25rem;
    }
}

/* At ≥450px (still mobile) swap to the larger photo source the existing
   design already ships. Kept as its own block so we don't rely on native
   @media nesting support. */
@media (min-width: 450px) and (max-width: 900px) {
    body.brand-TQQR[data-tqqr-login="true"] .page > .min-h-screen::before {
        background-image: url("/images/tqqr/HMQ-HOMEPAGE-wider-shorter-800x900.jpg");
    }
}

/* ---------------------------------------------------------------------------
   Reading Recommendations landing page (rfwReadingRecommendations.cshtml).
   Three clickable cards listing the sub-pages (Her Majesty's Picks /
   Curated Booklists / Read & Download). Visually a flat-UI card list:
   off-white card body with a teal left-edge accent, brand-coloured icon,
   bold title, secondary description. Hover lifts the shadow.
   --------------------------------------------------------------------------- */
body.brand-TQQR[data-tqqr-recs="true"] {
    background-color: #46919b !important;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Span the full overlay width (matches the centred page heading above)
       rather than capping at a narrow column. */
    width: 100%;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0;
    border-left: 5px solid #46919b;
    background-color: #fbfaf6;
    box-shadow: 0 1px 2px rgba(0, 45, 55, 0.08);
    transition: box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card:hover,
body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card:focus-visible {
    background-color: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 45, 55, 0.14);
    transform: translateY(-1px);
    outline: none;
}

/* "Coming soon" / under-development section card: muted, non-interactive
   (the anchor renders with no href), no hover lift. */
body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card--soon {
    border-left-color: #9bb4b9;
    background-color: #f3f1ea;
    box-shadow: none;
    cursor: default;
    opacity: 0.85;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card--soon:hover,
body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card--soon:focus-visible {
    background-color: #f3f1ea;
    box-shadow: none;
    transform: none;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card--soon .tqqr-rec-card-icon {
    color: #9bb4b9;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.6rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background-color: #46919b;
    color: #ffffff;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.25rem 1.1rem;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    color: #46919b;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-text {
    flex: 1;
    min-width: 0;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-title {
    font-size: 1.375rem;
    line-height: 1.25;
    color: #002d37;
    margin: 0 0 0.25rem 0;
}

body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-desc {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #4a6168;
    margin: 0;
}

@media (max-width: 600px) {
    body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-inner {
        padding: 1rem 1rem 1rem 0.9rem;
        gap: 0.85rem;
    }

    body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-title {
        font-size: 1.2rem;
    }

    body.brand-TQQR[data-tqqr-recs="true"] .tqqr-rec-card-icon {
        width: 2rem;
        height: 2rem;
    }
}

/* Page H1 is 3.25rem by default — "Reading Recommendations" overflows the
   viewport on phones at that size. Dial it back at <=900px, matching the
   welcome-page treatment above. */
@media (max-width: 900px) {
    body.brand-TQQR[data-tqqr-recs="true"] .page-header-enhanced h1,
    body.brand-TQQR[data-tqqr-recs="true"] .page-header-enhanced .section-title {
        font-size: 1.875rem;
        line-height: 2.15rem;
        overflow-wrap: break-word;
        word-break: normal;
    }
}

/* ==========================================
   TQQR — User menu (avatar pill + dropdown)
   ========================================== */

.tqqr-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-self: end;
}

.tqqr-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    padding: 5px 16px 5px 5px;
    font-family: "adobe-caslon-pro", "Caslon Pro", "Hoefler Text", Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tqqr-user-trigger:hover,
.tqqr-user-trigger:focus-visible {
    border-color: rgba(255, 255, 255, 0.85);
    outline: none;
}

.tqqr-user-avatar {
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #f5f3eb;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1;
    flex-shrink: 0;
    text-transform: uppercase;
}

.tqqr-user-chevron {
    width: 12px;
    height: 8px;
    flex-shrink: 0;
    color: #ffffff;
}

.tqqr-user-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 12px;
    min-width: 260px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    z-index: 60;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tqqr-user-popover[hidden] {
    display: none;
}

.tqqr-user-popover-header {
    padding: 6px 4px 12px;
}

.tqqr-user-popover-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1a1a1a;
}

.tqqr-user-popover-email {
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 2px;
}

.tqqr-user-popover-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px -16px 8px;
}

.tqqr-user-popover-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    color: #1a1a1a;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.95rem;
}

.tqqr-user-popover-item:hover,
.tqqr-user-popover-item:focus-visible {
    background: #f5f3eb;
    color: #1a1a1a;
    text-decoration: none;
    outline: none;
}

.tqqr-user-popover-item.is-logout {
    color: #b91c1c;
}

.tqqr-user-popover-item.is-logout:hover,
.tqqr-user-popover-item.is-logout:focus-visible {
    background: #fef2f2;
    color: #991b1b;
}

.tqqr-user-popover-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .tqqr-user-menu {
        display: none;
    }
}

/* ==========================================
   TQQR — In-course sub-navigation bar
   ========================================== */

.tqqr-course-subnav {
    background: #003a45;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.tqqr-course-subnav-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 14px 40px;
}

.tqqr-course-subnav-title {
    font-family: "adobe-caslon-pro", "Caslon Pro", "Hoefler Text", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 20px;
    color: #f5f3eb;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

.tqqr-course-subnav-title:hover,
.tqqr-course-subnav-title:focus-visible {
    color: #f5f3eb;
    opacity: 0.85;
    text-decoration: none;
}

.tqqr-course-subnav-links {
    display: flex;
    align-items: center;
    gap: 36px;
}

.tqqr-course-sublink {
    color: #ffffff;
    text-decoration: none;
    font-family: "adobe-caslon-pro", "Caslon Pro", "Hoefler Text", Georgia, serif;
    font-weight: 600;
    font-size: 18px;
    transition: opacity 0.15s ease;
}

.tqqr-course-sublink:hover,
.tqqr-course-sublink:focus-visible {
    color: #ffffff;
    opacity: 0.75;
    text-decoration: none;
}

.tqqr-course-sublink[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}

.tqqr-course-sublink--end {
    margin-left: auto;
}

.tqqr-course-subnav-back {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "adobe-caslon-pro", "Caslon Pro", "Hoefler Text", Georgia, serif;
    font-style: italic;
    font-size: 16px;
    transition: color 0.15s ease;
}

.tqqr-course-subnav-back:hover,
.tqqr-course-subnav-back:focus-visible {
    color: #ffffff;
    text-decoration: none;
}

.tqqr-course-subnav-back-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Mobile secondary subnav: visible from 2026-05-22 so the section jump pill
   stays reachable without opening the hamburger menu. The course title is
   hidden on mobile (the course name is already shown in the breadcrumb on
   the page below) and the pill is centred horizontally. */
@media (max-width: 900px) {
    .tqqr-course-subnav-inner {
        padding: 10px 16px;
        gap: 0;
        max-width: 100%;
        justify-content: center;
    }

    .tqqr-course-subnav-title {
        display: none;
    }

    /* Cancel the desktop right-pin so the pill sits in the centred flex row
       instead of being pushed to the right edge. */
    .tqqr-course-subnav-inner .tqqr-jump {
        margin-left: 0;
    }
}

/* ==========================================
   TQQR — Queen's Picks index page
   ========================================== */

body.brand-TQQR[data-tqqr-picks="true"] {
    background-color: #46919b !important;
}

body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

body.tqqr-picks-lock-scroll {
    overflow: hidden;
}

/* Featured-collection card */
.tqqr-picks-featured {
    padding: 2rem 2rem 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.tqqr-picks-eyebrow {
    font-family: "gotham", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.18em;
    color: #46919b;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.tqqr-picks-season-title {
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-style: italic;
    font-size: 2rem;
    color: #002d37;
    margin: 0 0 0.75rem;
}

.tqqr-picks-intro {
    /* Match the standard course-page body text exactly: body sans font (inherited),
       --text-xl size, normal weight/style, standard body colour. No special intro styling. */
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed, 1.6);
    color: var(--text-body);
    max-width: 90%; /* use ~80% of the available width (was 32rem) */
    margin: 0 auto 2rem;
}

/* Inline link in the picks intro (e.g. the Instagram handle): bold, brand colour, and
   upright so it reads clearly out of the italic prose — previously it just inherited the
   muted italic text style and didn't look like a link. */
.tqqr-picks-intro a {
    font-weight: 700;
    font-style: normal;
    color: var(--text-primary);
    text-decoration: none;
}

.tqqr-picks-intro a:hover,
.tqqr-picks-intro a:focus {
    text-decoration: underline;
}

/* Book grid — minmax(0, 1fr) blocks the default grid-item min-content sizing,
   so a long title (e.g. "The Whalebone Theatre") can't push the column wider
   than its 1/N share and drag every sibling column with it. */
.tqqr-picks-book-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.tqqr-picks-book-grid--small {
    gap: 0.75rem;
}

@media (max-width: 720px) {
    .tqqr-picks-book-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Other-collection strip — two cards per row on desktop so each card is wide
   enough to give its book tiles real visual presence. Drops to one column on
   narrow viewports. */
.tqqr-picks-other-seasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tqqr-picks-other-season {
    padding: 1.25rem;
}

@media (max-width: 720px) {
    .tqqr-picks-other-seasons {
        grid-template-columns: 1fr;
    }
}

.tqqr-picks-empty {
    text-align: center;
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-style: italic;
    color: #4a6168;
    padding: 3rem 1rem;
}

/* Book tile — the stylised "cover" button */
.tqqr-picks-book-tile {
    list-style: none;
}

.tqqr-picks-book-trigger {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
    font: inherit;
    color: inherit;
}

/* Sizing wrapper — owns the aspect-ratio and the 100% width unambiguously,
   so the cover's content can't drag the dimensions around. */
.tqqr-picks-cover-frame {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    box-sizing: border-box;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tqqr-picks-book-trigger:hover .tqqr-picks-cover-frame,
.tqqr-picks-book-trigger:focus-visible .tqqr-picks-cover-frame {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
    outline: none;
}

.tqqr-picks-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--cover-bg, #46919b);
    color: var(--cover-fg, #f5f3eb);
    overflow: hidden;
    box-sizing: border-box;
}

.tqqr-picks-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tqqr-picks-cover-flourish {
    font-size: 0.875rem;
    opacity: 0.8;
    align-self: center;
}

.tqqr-picks-cover-title {
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 0 0.25rem;
}

.tqqr-picks-cover-author {
    font-family: "gotham", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.tqqr-picks-book-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
    text-align: center;
    margin-top: 0.75rem;
}

.tqqr-picks-book-title {
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-style: normal; /* was italic — light italic was hard to read (feedback) */
    font-size: 1rem;
    color: #002d37;
}

.tqqr-picks-book-author {
    font-family: "gotham", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.2;
    color: #4a6168;
}

/* Modal */
.tqqr-picks-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.tqqr-picks-modal[hidden] {
    display: none;
}

.tqqr-picks-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 45, 55, 0.55);
    backdrop-filter: blur(4px);
}

.tqqr-picks-modal-card {
    position: relative;
    background: #f5f3eb;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
}

.tqqr-picks-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    color: #4a6168;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem;
}

.tqqr-picks-modal-close:hover,
.tqqr-picks-modal-close:focus-visible {
    color: #002d37;
    outline: none;
}

.tqqr-picks-modal-head {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.tqqr-picks-modal-cover {
    position: relative;
    aspect-ratio: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 1rem;
    background: var(--cover-bg, #46919b);
    color: var(--cover-fg, #f5f3eb);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    box-sizing: border-box;
}

.tqqr-picks-modal-cover .tqqr-picks-cover-title {
    font-size: 1.1rem;
}

.tqqr-picks-modal-title {
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-size: 2rem;
    line-height: 1.1;
    color: #002d37;
    margin: 1rem 0 0.5rem; /* extra top space so the title clears the eyebrow above it */
}

.tqqr-picks-modal-byline {
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-style: normal;
    font-size: 1.15rem;     /* below-title text bumped +10% */
    color: #2f6770;         /* darker theme teal (was grey #4a6168) */
    margin: 0 0 1rem;
}

.tqqr-picks-modal-quote {
    border-left: 3px solid #46919b;
    padding-left: 1rem;
    margin: 1rem 0;
    font-family: "gotham", system-ui, -apple-system, "Segoe UI", sans-serif; /* sans, like the About text */
    font-style: italic;     /* quoted passage in italic */
    font-size: 1.27rem;     /* main quote bumped +10% */
    line-height: 1.55;
    color: #002d37;
}

.tqqr-picks-modal-quote p {
    margin: 0 0 0.5rem;
}

.tqqr-picks-modal-quote cite {
    display: block;
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif; /* keep the attribution upright serif */
    font-style: normal;
    font-size: 0.94rem;     /* below-title text bumped +10% */
    letter-spacing: 0.18em;
    color: #2f6770;         /* darker theme teal (was grey #4a6168) */
}

.tqqr-picks-modal-meta {
    font-family: "gotham", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 1.1rem;      /* below-title text bumped +10% */
    line-height: 1.4;
    color: #2f6770;         /* darker theme teal (was grey #4a6168) */
}

.tqqr-picks-modal-h3 {
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-size: 1.375rem;    /* below-title text bumped +10% */
    color: #002d37;
    margin: 1.5rem 0 0.5rem;
}

.tqqr-picks-modal-body {
    font-family: "gotham", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 1.1rem;      /* below-title text bumped +10% */
    line-height: 1.6;
    color: #002d37;
    margin: 0 0 1rem;
}

@media (max-width: 600px) {
    .tqqr-picks-modal-head {
        grid-template-columns: 1fr;
    }

    .tqqr-picks-modal-cover {
        max-width: 12rem;
        margin: 0 auto;
    }
}

/* ---- Queen's Picks: responsive page chrome ----
   The master wraps @RenderBody() in `.min-h-screen flex items-center justify-center`.
   On pages shorter than the viewport this leaves a huge blank above the title.
   Pin content to the top for the Picks page (scoped by data attribute) and dial
   the wrapper / card padding back at smaller widths. */
body.brand-TQQR[data-tqqr-picks="true"] .min-h-screen {
    align-items: flex-start;
    min-height: 0;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* Main page title — flat 2rem on larger screens; smaller breakpoints below scale it
   down for mobile. Shared by Books-Chosen (picks) and Curated Booklists pages. */
body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced h1,
body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced .section-title,
body.brand-TQQR[data-tqqr-curated="true"] .page-header-enhanced h1,
body.brand-TQQR[data-tqqr-curated="true"] .page-header-enhanced .section-title {
    font-size: 2rem;
}

@media (max-width: 1280px) {
    body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced h1,
    body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced .section-title,
    body.brand-TQQR[data-tqqr-curated="true"] .page-header-enhanced h1,
    body.brand-TQQR[data-tqqr-curated="true"] .page-header-enhanced .section-title {
        font-size: 2rem;
        line-height: 1.15;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-featured {
        padding: 1.5rem 1.5rem 2rem;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-season-title {
        font-size: 2.25rem;
    }
}

@media (max-width: 900px) {
    body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced h1,
    body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced .section-title,
    body.brand-TQQR[data-tqqr-curated="true"] .page-header-enhanced h1,
    body.brand-TQQR[data-tqqr-curated="true"] .page-header-enhanced .section-title {
        font-size: 1.75rem;
        line-height: 1.15;
        overflow-wrap: break-word;
        word-break: normal;
    }
}

@media (max-width: 720px) {
    /* Master's content-overlay has Tailwind p-8 (2rem); pull it in on phones. */
    body.brand-TQQR[data-tqqr-picks="true"] .content-overlay {
        padding: 1rem !important;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .min-h-screen {
        padding: 0.5rem;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-page {
        padding: 0 0.25rem 2rem;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced h1,
    body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced .section-title,
    body.brand-TQQR[data-tqqr-curated="true"] .page-header-enhanced h1,
    body.brand-TQQR[data-tqqr-curated="true"] .page-header-enhanced .section-title {
        font-size: 1.5rem;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-featured {
        padding: 1.25rem 0.75rem 1.5rem;
        margin-bottom: 1rem;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-season-title {
        font-size: 1.75rem;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-intro {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-other-season {
        padding: 0.85rem;
    }

    /* Meta below the large cover — tighten so 4 books in a 2x2 grid don't
       balloon the page height with 3-line titles + 2-line author names. */
    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-book-meta {
        margin-top: 0.5rem;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-book-title {
        font-size: 0.85rem;
        line-height: 1.2;
    }

    body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-book-author {
        font-size: 0.75rem;
        line-height: 1.2;
    }

    /* Subtitle bottom margin on mb-4 (1rem) is already fine; just header overall. */
    body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced {
        margin-bottom: 1rem;
    }
}

/* ---------------------------------------------------------------------------
   Inline links inside course Text elements (.elText)

   The base `a { color: inherit }` reset in rfw-tailwind strips link styling
   site-wide, so plain editor-authored links read as body text. On TQQR we
   want them obviously clickable — bold + brand link teal — without editors
   having to add inline `style="font-weight:bold; color:#004966;"` to every
   anchor. Matches the convention already used in the live "Check here for
   the evidence" link on the welcome page.

   Hover deepens to the TQQR primary dark teal and adds an underline so the
   affordance stays visible after a click.
   --------------------------------------------------------------------------- */
body.brand-TQQR .elText a {
    font-weight: bold;
    color: var(--text-primary); /* theme-aware: wine on mystical, ink-blue on sky, etc. (was hard-coded #004966) */
    text-decoration: none;
}

body.brand-TQQR .elText a:hover,
body.brand-TQQR .elText a:focus {
    color: var(--primary-dark); /* theme-aware darker shade on hover (was hard-coded #002d37) */
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Books Chosen by Her Majesty — page-level intro paragraph

   Sits between the page H1 and the featured-season block. Inherits the
   shared .tqqr-picks-intro typography (italic Caslon serif, teal-grey),
   but overrides text alignment to centre each line and pulls itself closer
   to the title than the default `.tqqr-picks-intro` margin would allow.
   The inline link inherits the .elText anchor style above only on TQQR;
   no extra rules needed.
   --------------------------------------------------------------------------- */
body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-page-intro {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
   Vertical-rhythm tightening for the Books-Chosen page

   The default `.tqqr-picks-*` rhythm leaves too much air between blocks
   compared to the approved design (see 2026-06-01 mockup). Pulled in here
   under the `[data-tqqr-picks="true"]` scope so other pages that reuse
   the partials/components aren't affected.

   Notes:
   - `.page-header-enhanced` (rfw-typography.css) ships with `padding: 2rem 0`
     and `margin-bottom: 3rem`. That's ~80px between the H1 and the next
     block, which is too generous here. Zero both for this page; the H1
     keeps its own `mb-2` for breathing room beneath the title text.
   - Season-title gets a generous `margin-bottom` so the book grid sits
     well below "Spring" (user feedback: bumped from 0.25rem to 1.75rem).
   --------------------------------------------------------------------------- */
body.brand-TQQR[data-tqqr-picks="true"] .page-header-enhanced {
    padding-top: 0;
    padding-bottom: 1.25rem;
    margin-bottom: 0;
}

body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-featured {
    padding-top: 1rem;
}

body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-eyebrow {
    margin-bottom: 0.25rem;
}

body.brand-TQQR[data-tqqr-picks="true"] .tqqr-picks-season-title {
    margin-bottom: 1.75rem;
}


/* ============================================================
   Curated Booklists (rfwCuratedBookLists)
   Cover-only reading lists. No commentary, no click-through —
   each cover is a static image. Two cover shapes (square for
   audiobooks, portrait for books) handled per-list so rows
   never go ragged. Mobile 2-across, desktop 5-across (= 2 rows
   of 10). Order is set in the dashboard and preserved at every
   breakpoint (DOM order drives both layouts).
   ============================================================ */

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-intro {
    /* Match the rfwQueenPicks intro typography for consistency. */
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed, 1.6);
    color: var(--text-body);
    max-width: 80%; /* use ~80% of the available width (was 36rem) */
    margin: 0 auto 1.75rem;
    text-align: center;
}

/* Jump nav — doubles as the on-page index, extends as lists grow. */
body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-jumpnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin: 0 auto 2rem;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-jumplink {
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-size: 1rem;
    color: #002d37;
    text-decoration: none;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(0, 45, 55, 0.25);
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-jumplink:hover,
body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-jumplink:focus-visible {
    background: #002d37;
    color: #f5f3eb;
    outline: none;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-list {
    padding: 1.5rem;
    margin-bottom: 2rem;
    /* Clear the section heading from any sticky header when jumped to. */
    scroll-margin-top: 1.5rem;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-list-title {
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-style: normal; /* dropped italic — section titles upright */
    font-size: 1.5rem; /* subordinate to the 2rem page title */
    color: #002d37;
    margin: 0 0 0.25rem;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-list-header {
    /* Match the intro typography/size for consistency. */
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed, 1.6);
    color: var(--text-body);
    margin: 0 0 1.5rem;
}

/* Grid — minmax(0, 1fr) keeps every column to its 1/N share.
   2 across on mobile, 5 across from 768px up. */
body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* Per-list aspect ratio: every cover occupies an identical box so
   square and portrait lists each stay tidy. */
body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-frame {
    overflow: hidden;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-grid--portrait .tqqr-curated-cover-frame {
    aspect-ratio: 2 / 3;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-grid--square .tqqr-curated-cover-frame {
    aspect-ratio: 1 / 1;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Keyline for covers with white edges that would bleed into the bg (e.g. B6). */
body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover--keyline .tqqr-curated-cover-frame img {
    border: 1px solid rgba(0, 0, 0, 0.18);
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-empty {
    text-align: center;
    font-family: "adobe-caslon-pro", "Caslon Pro", Georgia, serif;
    font-style: italic;
    color: #4a6168;
}

/* Curated Booklists — clickable cover + lightbox modal.
   Covers open the full image at viewport scale (no metadata; image only). */
body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-trigger {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-trigger .tqqr-curated-cover-frame {
    display: block;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-frame img {
    transition: transform 0.2s ease;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-trigger:hover .tqqr-curated-cover-frame img {
    transform: scale(1.03);
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-trigger:focus-visible {
    outline: 2px solid #002d37;
    outline-offset: 3px;
}

/* Lightbox (re-parented onto <body>, which keeps the brand-TQQR class). */
body.tqqr-curated-lock-scroll {
    overflow: hidden;
}

body.brand-TQQR .tqqr-curated-modal[hidden] {
    display: none;
}

body.brand-TQQR .tqqr-curated-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
}

body.brand-TQQR .tqqr-curated-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 25, 31, 0.88);
}

body.brand-TQQR .tqqr-curated-modal-dialog {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
}

body.brand-TQQR .tqqr-curated-modal-image {
    max-width: 92vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

body.brand-TQQR .tqqr-curated-modal-close {
    position: absolute;
    top: -2.75rem;
    right: -0.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: none;
    color: #f5f3eb;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
}

body.brand-TQQR .tqqr-curated-modal-close:hover,
body.brand-TQQR .tqqr-curated-modal-close:focus-visible {
    color: #ffffff;
    outline: none;
}

@media (max-width: 600px) {
    body.brand-TQQR .tqqr-curated-modal {
        padding: 1.25rem;
    }
    body.brand-TQQR .tqqr-curated-modal-close {
        top: -2.5rem;
        right: 0;
    }
}

/* Curated Booklists — tighten the header. `.page-header-enhanced` ships with
   padding: 2rem 0 + margin-bottom: 3rem (~80px under the H1), which leaves a
   gaping space above the intro line. Zero it; the H1 keeps its own mb-2. */
body.brand-TQQR[data-tqqr-curated="true"] .page-header-enhanced {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}

/* Curated Booklists — magnifier badge on each clickable cover (signals the
   click-to-zoom lightbox). Anchored to the frame, never intercepts the click. */
body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-frame {
    position: relative;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-trigger .tqqr-curated-cover-frame::after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: rgba(0, 45, 55, 0.9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.2rem 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity: 0.95;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-trigger:hover .tqqr-curated-cover-frame::after,
body.brand-TQQR[data-tqqr-curated="true"] .tqqr-curated-cover-trigger:focus-visible .tqqr-curated-cover-frame::after {
    opacity: 1;
    transform: scale(1.08);
}

/* ============================================================
   Read & Download (Reading Recs)
   Index list + single-text reader. Mobile-first.
   ============================================================ */

/* --- Index list --- */
body.brand-TQQR .rad-index {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

body.brand-TQQR .rad-index-item + .rad-index-item {
    margin-top: 0.75rem;
}

body.brand-TQQR .rad-index-link {
    display: block;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    border-left: 5px solid #46919b;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body.brand-TQQR .rad-index-link:hover,
body.brand-TQQR .rad-index-link:focus-visible {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

body.brand-TQQR .rad-kind {
    font-weight: 700;
    margin-right: 0.35rem;
}

body.brand-TQQR .rad-author {
    opacity: 0.8;
}

body.brand-TQQR .rad-empty {
    opacity: 0.7;
    font-style: italic;
}

/* --- Single-text reader --- */
body.brand-TQQR .rad-byline {
    margin: 0;
    opacity: 0.85;
    font-size: 0.95rem;
}

body.brand-TQQR .rad-warning {
    max-width: 48rem;
    margin: 0 auto 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.05);
    border-left: 4px solid #b15c00;
    border-radius: 4px;
    font-size: 0.9rem;
}

body.brand-TQQR .rad-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0.25rem;
}

/* Listen / Download trigger buttons (icon + label, like the course Listen button) */
body.brand-TQQR .rad-listen-btn,
body.brand-TQQR .rad-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body.brand-TQQR .rad-listen-btn {
    background: #46919b;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

body.brand-TQQR .rad-listen-btn:hover,
body.brand-TQQR .rad-listen-btn:focus-visible {
    background: #3a7a83;
    transform: translateY(-1px);
}

body.brand-TQQR .rad-listen-btn[aria-expanded="true"] {
    background: #2f6a72;
}

body.brand-TQQR .rad-download {
    background: rgba(70, 145, 155, 0.12);
    color: #2f6a72;
    border: 1px solid rgba(70, 145, 155, 0.45);
}

body.brand-TQQR .rad-download:hover,
body.brand-TQQR .rad-download:focus-visible {
    background: rgba(70, 145, 155, 0.2);
}

/* All toolbar buttons share one height (Listen / Download / A- / A+) */
body.brand-TQQR .rad-toolbar .rad-listen-btn,
body.brand-TQQR .rad-toolbar .rad-download,
body.brand-TQQR .rad-toolbar .rad-textsize-btn {
    box-sizing: border-box;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Full-screen player (course-style) ---- */
body.rad-fs-open { overflow: hidden; }

body.brand-TQQR .rad-fs {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    color: #eef6f6;
    background: linear-gradient(165deg, #1d4e54 0%, #133b40 55%, #0c2a2e 100%);
}

body.brand-TQQR .rad-fs[hidden] { display: none; }

body.brand-TQQR .rad-fs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    flex: 0 0 auto;
}

/* Installed PWA on iOS: this full-screen panel fills behind the status bar /
   Dynamic Island, so the Exit / Voice header row sits under it. Push it down by
   the safe-area inset. Standalone-only; env() is 0 in-browser and on non-notch. */
@media (display-mode: standalone) {
    body.brand-TQQR .rad-fs-header { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
}

body.brand-TQQR .rad-fs-exit { flex: 0 0 auto; min-width: 96px; }

/* Voice selector (right of header), like the course player */
body.brand-TQQR .rad-fs-voice {
    flex: 0 0 auto;
    min-width: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    font-size: 0.85rem;
    opacity: 0.95;
}

body.brand-TQQR .rad-fs-voice select {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
}

body.brand-TQQR .rad-fs-voice select option { color: #14323a; }

/* Speed control hidden for now (we don't offer it on the other audio player).
   Uses .rad-ctl.rad-speed so it beats the later .rad-ctl display rule.
   Remove this rule to bring it back. */
body.brand-TQQR .rad-ctl.rad-speed { display: none; }

/* Mobile: declutter the full-screen player header. */
@media (max-width: 768px) {
    body.brand-TQQR .rad-fs-voice label { display: none; }
    body.brand-TQQR .rad-fs-headtitle { display: none; }
}

body.brand-TQQR .rad-fs-exit {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: none;
    color: #dfeeef;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
}

body.brand-TQQR .rad-fs-exit:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

body.brand-TQQR .rad-fs-headtitle {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.brand-TQQR .rad-fs-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 1.25rem;
    overflow-y: auto;
}

body.brand-TQQR .rad-fs-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    color: #cfe7ea;
    margin-bottom: 0.75rem;
}

body.brand-TQQR .rad-fs-kicker {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.7;
}

body.brand-TQQR .rad-fs-booktitle {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 700;
    margin: 0.15rem 0 0;
    line-height: 1.15;
}

body.brand-TQQR .rad-fs-author { opacity: 0.8; font-size: 1rem; margin-top: 0.25rem; }

/* Full-screen sizing overrides for the shared progress/controls below */
body.brand-TQQR .rad-fs .rad-progress { width: min(560px, 92%); margin: 1.5rem auto 0; }
body.brand-TQQR .rad-fs .rad-times { justify-content: center; }
body.brand-TQQR .rad-fs .rad-controls { gap: 1.75rem; margin-top: 1.5rem; }
body.brand-TQQR .rad-fs .rad-playpause { width: 78px; height: 78px; }

/* Bottom actions */
body.brand-TQQR .rad-fs-actions {
    display: flex;
    justify-content: center;
    padding: 1rem 1.25rem 1.5rem;
    flex: 0 0 auto;
}

body.brand-TQQR .rad-fs-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #eef6f6;
    font-weight: 600;
    cursor: pointer;
}

body.brand-TQQR .rad-fs-action:hover { background: rgba(255, 255, 255, 0.16); }

/* Read Along drawer */
body.brand-TQQR .rad-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1250;
    background: rgba(0, 0, 0, 0.45);
}

body.brand-TQQR .rad-drawer-backdrop[hidden] { display: none; }

/* Read Along — bottom sheet (slides up, like the course Read Along), 80% tall */
body.brand-TQQR .rad-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    z-index: 1260;
    display: flex;
    flex-direction: column;
    background: #fbfaf7;
    color: #222;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

body.brand-TQQR .rad-drawer.is-open { transform: translateY(0); }
body.brand-TQQR .rad-drawer[hidden] { display: none; }

body.brand-TQQR .rad-drawer-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    flex: 0 0 auto;
}

body.brand-TQQR .rad-drawer-title { font-weight: 700; font-size: 1.05rem; }

/* Buttons split left (text size) / right (play + close) under the title */
body.brand-TQQR .rad-drawer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

body.brand-TQQR .rad-drawer-actions-left,
body.brand-TQQR .rad-drawer-actions-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.brand-TQQR .rad-drawer-playpause {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #46919b;
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.brand-TQQR .rad-drawer-playpause:hover { background: #3a7a83; }

body.brand-TQQR .rad-drawer-close {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    font-weight: 600;
}

body.brand-TQQR .rad-drawer-close:hover { background: rgba(0, 0, 0, 0.05); }

/* Full-width scroll container -> scrollbar sits at the far right of the screen */
body.brand-TQQR .rad-drawer-body {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
}

/* ...but the text itself stays a padded, centred column for easy reading */
body.brand-TQQR .rad-drawer-body-inner {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.75rem 2rem;
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Play/pause icon swap (player + drawer buttons), driven by a body class */
body.brand-TQQR .rad-icon-play { display: block; }
body.brand-TQQR .rad-icon-pause { display: none; }
body.brand-TQQR.rad-audio-playing .rad-icon-play { display: none; }
body.brand-TQQR.rad-audio-playing .rad-icon-pause { display: block; }

/* Text-size control for the main reading text */
body.brand-TQQR .rad-textsize {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem auto 0;
    justify-content: center;
    font-size: 0.85rem;
    opacity: 0.9;
}

body.brand-TQQR .rad-textsize-label { margin-right: 0.15rem; }

body.brand-TQQR .rad-textsize-btn {
    min-width: 38px;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(70, 145, 155, 0.5);
    border-radius: 6px;
    background: rgba(70, 145, 155, 0.12);
    color: #2f6a72;
    font-weight: 700;
    cursor: pointer;
}

body.brand-TQQR .rad-textsize-btn:hover { background: rgba(70, 145, 155, 0.22); }

body.brand-TQQR .rad-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 0.75rem;
}

body.brand-TQQR .rad-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rad-spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes rad-spin { to { transform: rotate(360deg); } }

/* Progress */
body.brand-TQQR .rad-progress { margin-bottom: 0.85rem; }

body.brand-TQQR .rad-progress-bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    touch-action: none;
}

body.brand-TQQR .rad-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    border-radius: 999px;
    background: #7ed0d8;
}

body.brand-TQQR .rad-progress-knob {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

body.brand-TQQR .rad-times {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    font-size: 0.78rem;
    opacity: 0.8;
    margin-top: 0.45rem;
    font-variant-numeric: tabular-nums;
}

/* Controls */
body.brand-TQQR .rad-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
}

body.brand-TQQR .rad-ctl {
    background: transparent;
    border: none;
    color: #e8f4f5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

body.brand-TQQR .rad-skip { flex-direction: column; opacity: 0.9; }
body.brand-TQQR .rad-skip:hover { opacity: 1; }

body.brand-TQQR .rad-skip-num {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -45%);
    font-size: 0.55rem;
    font-weight: 700;
}

body.brand-TQQR .rad-playpause {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #46919b;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: background 0.18s ease, transform 0.1s ease;
}

body.brand-TQQR .rad-playpause:hover { background: #5aa6b0; }
body.brand-TQQR .rad-playpause:active { transform: scale(0.96); }

/* ===========================================================================
   "Add to Home Screen" prompt (iOS Safari only) — two-step bottom sheet.
   Markup: Views/Partials/rfw/rfwTqqrInstallPrompt.cshtml
   Logic:  wwwroot/scripts/rfw/tqqr-install-prompt.js
   Square corners + petrol intentionally match the TQQR aesthetic.
   =========================================================================== */
body.brand-TQQR .tqqr-a2hs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    max-width: 560px;
    margin: 0 auto;
    background: #002d37;
    color: #ffffff;
    border-top: 3px solid #46919b;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.38);
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.32s ease;
}

body.brand-TQQR .tqqr-a2hs.is-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    body.brand-TQQR .tqqr-a2hs { transition: none; }
}

body.brand-TQQR .tqqr-a2hs[data-mode="how"] .tqqr-a2hs__ask { display: none; }

body.brand-TQQR .tqqr-a2hs__step { position: relative; }

body.brand-TQQR .tqqr-a2hs__close {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

body.brand-TQQR .tqqr-a2hs__title {
    font-family: "adobe-caslon-pro", "Caslon Pro", "Hoefler Text", Georgia, serif;
    font-size: 1.4rem;
    margin: 0 38px 4px 0;
}

body.brand-TQQR .tqqr-a2hs__text {
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

body.brand-TQQR .tqqr-a2hs__text b,
body.brand-TQQR .tqqr-a2hs__steps b { color: #ffffff; font-weight: 700; }

body.brand-TQQR .tqqr-a2hs__steps {
    margin: 0 0 16px;
    padding-left: 1.4em;
    list-style: decimal; /* Tailwind preflight strips list markers — restore the 1-2-3 sequence */
    font-size: 0.95rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.9);
}

body.brand-TQQR .tqqr-a2hs svg {
    display: inline-block; /* override Tailwind preflight's `svg { display: block }` so the glyph sits inline after the text */
    width: 18px;
    height: 18px;
    vertical-align: -0.3em;
    margin: 0 3px;
    color: #8bc4cb;
}

body.brand-TQQR .tqqr-a2hs__cta {
    display: block;
    width: 100%;
    background: #46919b;
    color: #ffffff;
    border: 0;
    font-weight: 700;
    font-size: 1rem;
    padding: 13px 20px;
    cursor: pointer;
}

body.brand-TQQR .tqqr-a2hs__cta:active { background: #3a7780; }

/* Small muted sub-note under a step (e.g. the "or tap ••• then Share" fallback for
   newer iOS layouts where Share is hidden in the More menu). */
body.brand-TQQR .tqqr-a2hs__note {
    display: block;
    margin-top: 2px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
}

/* "Reading Recommendations" nav label: full text by default; the shorter "Reading Recs"
   only on narrow laptop widths (768–1024px) where the horizontal desktop nav is tight.
   The mobile overlay uses plain full text (no spans), so it's unaffected. */
body.brand-TQQR .tqqr-recs-compact { display: none; }
@media (min-width: 768px) and (max-width: 1024px) {
    body.brand-TQQR .tqqr-recs-full { display: none; }
    body.brand-TQQR .tqqr-recs-compact { display: inline; }
}

body.brand-TQQR .rad-speed {
    min-width: 42px;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.12);
}

body.brand-TQQR .rad-speed:hover { background: rgba(255, 255, 255, 0.22); }

/* The whole point: render the textarea content verbatim. */
body.brand-TQQR .read-body {
    white-space: pre-wrap;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* Short story: serif treatment (Garamond preferred, not Times New Roman). */
body.brand-TQQR .read-serif {
    font-family: "Garamond", "EB Garamond", "Adobe Garamond Pro", Georgia, serif;
    font-size: 1.15rem;
}

/* Poems: centre horizontally on the page... */
body.brand-TQQR .read-body.rad-poem { text-align: center; }

/* ...and both axes in the Read Along drawer. Auto-margins centre the poem when it
   fits but collapse to 0 when it overflows, so a tall poem scrolls from the top
   (with its top padding intact) instead of being clipped — works in Safari too. */
body.brand-TQQR .rad-drawer-body.rad-poem {
    display: flex;
    flex-direction: column;
}
body.brand-TQQR .rad-drawer-body.rad-poem .rad-drawer-body-inner {
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
}

/* Back link on Reading Recs section / text pages */
body.brand-TQQR .rad-back { margin: 0 0 1.5rem; }
body.brand-TQQR .rad-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #2f6a72;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
body.brand-TQQR .rad-back a:hover { text-decoration: underline; }