/* ────────────────────────────────────────────────────────────────
 * Reader mode + print stylesheet — Phase T.4f
 * ────────────────────────────────────────────────────────────────
 * body[data-reader-mode="1"] triggers reader mode.
 * @media print scopes the print variant.
 * Both hide forum chrome and widen thread content for easy reading.
 * ──────────────────────────────────────────────────────────────── */

/* ─── Reader mode (in-browser) ───────────────────────────────── */

/* Smooth body bg transition on toggle */
body {
    transition: background-color 220ms ease;
}

body[data-reader-mode="1"],
body[data-reader-mode="2"] {
    background: var(--bg) !important;
}
/* Sepia palette */
body[data-reader-mode="2"] {
    --rb-reader-bg: #f4ecd8;
    --rb-reader-fg: #5b4636;
    background: var(--rb-reader-bg) !important;
    color: var(--rb-reader-fg) !important;
}

body[data-reader-mode="1"] header,
body[data-reader-mode="1"] aside,
body[data-reader-mode="1"] footer,
body[data-reader-mode="1"] .rail,
body[data-reader-mode="1"] .rb-lt-sidebar,
body[data-reader-mode="1"] .rh-sidebar-card,
body[data-reader-mode="1"] [data-region="sidebar"],
body[data-reader-mode="1"] [role="banner"],
body[data-reader-mode="1"] nav[role="navigation"],
body[data-reader-mode="1"] .flash-banner,
body[data-reader-mode="1"] [data-notifications-endpoint],
body[data-reader-mode="1"] .rb-post__sidebar,
body[data-reader-mode="2"] header,
body[data-reader-mode="2"] aside,
body[data-reader-mode="2"] footer,
body[data-reader-mode="2"] .rail,
body[data-reader-mode="2"] .rb-lt-sidebar,
body[data-reader-mode="2"] .rh-sidebar-card,
body[data-reader-mode="2"] [data-region="sidebar"],
body[data-reader-mode="2"] [role="banner"],
body[data-reader-mode="2"] nav[role="navigation"],
body[data-reader-mode="2"] .flash-banner,
body[data-reader-mode="2"] [data-notifications-endpoint],
body[data-reader-mode="2"] .rb-post__sidebar {
    display: none !important;
}

/* Animate the layout transition for the main column */
main {
    transition: max-width 260ms ease, margin 260ms ease, padding 220ms ease, font-size 200ms ease;
}

body[data-reader-mode="1"] main,
body[data-reader-mode="2"] main {
    max-width: 760px !important;
    margin: 40px auto !important;
    padding: 0 var(--rb-space-4) !important;
    font-size: 1.08rem;
    line-height: 1.8;
    font-family: 'Charter', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}
body[data-reader-mode="1"] .rb-post,
body[data-reader-mode="2"] .rb-post {
    flex-direction: column !important;
    gap: var(--rb-space-2) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: var(--rb-space-4) 0 !important;
    border-bottom: 1px solid var(--border) !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
body[data-reader-mode="1"] .rb-post__body,
body[data-reader-mode="2"] .rb-post__body {
    font-size: 1.08rem;
    line-height: 1.8;
}
body[data-reader-mode="2"] .rb-post,
body[data-reader-mode="2"] .rb-post__body,
body[data-reader-mode="2"] h1,
body[data-reader-mode="2"] h2,
body[data-reader-mode="2"] h3,
body[data-reader-mode="2"] p {
    color: var(--rb-reader-fg) !important;
}
body[data-reader-mode="2"] .rb-post {
    border-bottom-color: rgba(91, 70, 54, 0.18) !important;
}

/* Floating reader toggle — stable bottom-right position in BOTH states */
.rb-reader-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    opacity: 0.78;
    transition: opacity 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.rb-reader-toggle:hover,
.rb-reader-toggle:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}
body[data-reader-mode="1"] .rb-reader-toggle,
body[data-reader-mode="2"] .rb-reader-toggle {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    body, main, .rb-reader-toggle { transition: none; }
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
    html, body {
        background: #fff !important;
        color: #000 !important;
    }
    header,
    aside,
    footer,
    nav,
    #rb-progress,
    .flash-banner,
    .rb-reader-toggle,
    .rb-button,
    .rb-post__sidebar,
    [role="banner"],
    [data-region="sidebar"] {
        display: none !important;
    }
    main {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .rb-post {
        page-break-inside: avoid;
        flex-direction: column !important;
        gap: 6pt !important;
        border: 0 !important;
        padding: 12pt 0 !important;
        border-bottom: 1px solid #bbb !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    .rb-post__body {
        color: #000 !important;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 11pt;
        line-height: 1.6;
    }
    .rb-thread-item__title,
    h1, h2, h3, h4 {
        color: #000 !important;
    }
    a {
        color: #000 !important;
        text-decoration: underline;
    }
    a::after {
        /* Expand link targets for print */
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    /* Hide redundant in-body links (navigation, relative anchors) */
    a[href^="#"]::after,
    a[href^="/"]::after {
        content: '';
    }
}