/*
 * Inbound Books Shop — site styles
 *
 * Goal: visual continuity with https://inboundbooks.org so a visitor
 * moving between the WP site and the shop perceives a single brand.
 *
 * Palette values pulled directly from the live WP site's rendered
 * --wp--preset--color-* custom properties (book-store-lite child theme
 * as customized by Jayne via the Block Editor).
 *
 * Structural zones (matches inboundbooks.org top-to-bottom):
 *   - Header (logo area):   warm beige, logo in dark navy
 *   - Header (nav strip):   warm beige, navy menu links, white
 *                           dividers above + below
 *   - Main content area:    warm beige (continuous with header,
 *                           one large branded background field)
 *   - Footer:               dark navy, cream text
 *
 * The body BG is one continuous warm beige from the top of the page
 * to the navy footer. White hairline dividers separate the three
 * header zones (logo, nav, main) — same low-contrast subtle dividers
 * the WP site uses.
 *
 * The logo asset is the same BW source PNG the WP site uses. The WP
 * theme applies an SVG duotone to recolor it; for the shop we let it
 * render as the source bytes (black on transparent), which reads as
 * editorial-dark on the beige header — close to the WP visual without
 * needing a CSS duotone polyfill.
 */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:300,400,500,700&family=Roboto:300,400,500,700&family=EB+Garamond:400,500,600,700&display=swap');

:root {
    /* --- Brand palette (matches inboundbooks.org as rendered) --- */
    --ib-rust:        #a84e11;  /* deep rust — accents, hero rule */
    --ib-rust-warm:   #a65f19;  /* warm rust brown — body links */
    --ib-rust-bright: #c53f09;  /* brighter rust — hover states */
    --ib-beige:       #d9ccc4;  /* warm beige — header zones + main BG */
    --ib-beige-edge:  #c4b3a7;  /* slightly darker beige — reserved (currently unused) */
    --ib-cream:       #f7f6f5;  /* warm off-white — cards inside main */
    --ib-gold:        #cb964c;  /* warm gold — secondary accents */
    --ib-slate:       #485467;  /* slate blue-gray — quiet accents */
    --ib-navy:        #0a2b40;  /* dark navy — logo color, nav links, footer */
    --ib-base:        #ffffff;  /* pure white — card surfaces inside main */

    /* Text */
    --ib-text:        #1b1a18;
    --ib-text-soft:   #5f5e5d;
    --ib-text-muted:  #8d8c8b;
    --ib-border:      #d1d1d1;

    /* Semantic aliases */
    --ib-link:        var(--ib-rust-warm);
    --ib-link-hover:  var(--ib-rust-bright);
    --ib-heading:     var(--ib-rust);

    /* Zones — these are what feature CSS should refer to so a future
       palette tweak only touches the alias definitions, not every block.
       Header BG and main BG are both warm beige — one continuous brand
       field from the top of the page to the footer. White dividers
       segment the three header zones (logo / nav / main). */
    --ib-header-bg:   var(--ib-beige);
    --ib-header-text: var(--ib-navy);
    --ib-divider:     var(--ib-base);  /* white hairline */
    --ib-main-bg:     var(--ib-beige);
    --ib-footer-bg:   var(--ib-navy);
    --ib-footer-text: var(--ib-cream);

    /* --- Fonts --- */
    --ib-font-body:    "Noto Sans", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
    --ib-font-heading: "Roboto", "Noto Sans", sans-serif;
    --ib-font-display: "EB Garamond", Georgia, "Times New Roman", serif;
    --ib-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

    /* --- Type scale --- */
    --ib-text-xs:   0.75rem;
    --ib-text-sm:   0.875rem;
    --ib-text-base: 1rem;
    --ib-text-lg:   1.125rem;
    --ib-text-xl:   1.25rem;
    --ib-text-2xl:  1.5rem;
    --ib-text-3xl:  1.875rem;
    --ib-text-4xl:  2.25rem;
    --ib-text-5xl:  3rem;

    --ib-leading-tight:   1.2;
    --ib-leading-snug:    1.4;
    --ib-leading-relaxed: 1.65;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--ib-main-bg);
    color: var(--ib-text);
    font-family: var(--ib-font-body);
    font-size: var(--ib-text-base);
    font-weight: 400;
    line-height: var(--ib-leading-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Headings --- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ib-font-heading);
    font-weight: 700;
    line-height: var(--ib-leading-tight);
    color: var(--ib-text);
    margin: 0 0 1rem;
}

/* --- Links (in body content) --- */

a {
    color: var(--ib-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--ib-link-hover);
}

/* --- Header zone (warm beige, matches WP site) --- */

.site-header {
    background: var(--ib-header-bg);
}

.site-header-logo {
    text-align: center;
    padding: 2.5rem 1.5rem 1.5rem;
}

.site-logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.site-logo {
    /*
     * BW source PNG (black on transparent). Rendering as-is on the
     * beige header reads as crisp editorial dark — visually equivalent
     * to the WP site's CSS duotone treatment of the same asset, without
     * needing an SVG filter.
     */
    height: auto;
    width: 275px;
    max-width: 70vw;
}

.site-header-nav {
    border-top: 1px solid var(--ib-divider);
    border-bottom: 1px solid var(--ib-divider);
}

.site-nav {
    /* 3-column grid: socials cluster (left) | text links (center) |
       balancing spacer (right). The two 1fr tracks symmetrically
       distribute leftover space so the center column stays centered
       on the full nav width regardless of how wide either side is.
       Falls back to a flex layout on narrow viewports to wrap cleanly. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 1.25rem 1.5rem;
}

.site-nav-links {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Mobile-menu styles are at the bottom of the file with the rest of the
   responsive block — see the @media (max-width: 768px) section. */

/* Hide the mobile-only divider on desktop. */
.site-nav-divider {
    display: none;
}

/* Hamburger toggle button. visibility:hidden on desktop preserves the grid
   centering (the button reserves its column 3 cell but stays invisible);
   visibility flips to visible at the mobile breakpoint. */
.site-nav-hamburger {
    visibility: hidden;
    justify-self: end;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem;  /* counter the padding for tight visual alignment */
    color: var(--ib-header-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-nav-hamburger-bars {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 16px;
}

.site-nav-hamburger-bars > span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-nav-hamburger-bars > span:nth-child(1) { top: 0; }
.site-nav-hamburger-bars > span:nth-child(2) { top: 7px; }
.site-nav-hamburger-bars > span:nth-child(3) { top: 14px; }

/* Animate to an X when the panel is open. */
.site-nav-hamburger.is-open .site-nav-hamburger-bars > span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-nav-hamburger.is-open .site-nav-hamburger-bars > span:nth-child(2) {
    opacity: 0;
}
.site-nav-hamburger.is-open .site-nav-hamburger-bars > span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav a {
    color: var(--ib-header-text);  /* navy */
    text-decoration: none;
    font-family: var(--ib-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--ib-text-sm);
    transition: color 0.15s ease;
}

.site-nav a:hover {
    color: var(--ib-rust);
}

.site-nav a.external::after {
    content: " ↗";
    margin-left: 0.15em;
}

/* Authenticated nav: display name + sign out button. The form wrapper
   exists so signout can be a POST (required for state-changing
   actions). Styled to read as a link, not a button. */
.site-nav-user {
    color: var(--ib-header-text);
    font-family: var(--ib-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--ib-text-sm);
    opacity: 0.75;
}

.site-nav-signout-form {
    margin: 0;
    padding: 0;
    display: inline;
}

.site-nav-signout {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ib-header-text);
    font-family: var(--ib-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--ib-text-sm);
    padding: 0;
    transition: color 0.15s ease;
}

.site-nav-signout:hover {
    color: var(--ib-rust);
}

/* Social icons in the header nav. Mirrors the Facebook / Instagram /
   Goodreads set on inboundbooks.org. Sized smaller than the WP
   default 24px to balance against the text nav links beside them.
   Color follows the same navy → rust hover the rest of the nav uses. */
.site-nav-socials {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    justify-self: start;  /* anchor to left edge of the grid column */
    margin-left: 200px;   /* inboard nudge — matches the visual sweet spot BJ marked */
}

.site-nav-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--ib-header-text);
    transition: color 0.15s ease, transform 0.15s ease;
}

.site-nav-social:hover {
    color: var(--ib-rust);
    transform: translateY(-1px);
}

.site-nav-social svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* --- Main / central catalog area (continues the beige header zone) --- */

.site-main {
    background: var(--ib-main-bg);
    border-top: 1px solid var(--ib-divider);  /* white hairline below nav strip */
    min-height: 60vh;
    padding: 4rem 0;
}

.hero {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--ib-rust);                /* rust orange card on beige main */
    color: var(--ib-base);                     /* white text inherited by children */
    box-shadow: 0 2px 16px rgba(10, 43, 64, 0.10);
}

.hero h1 {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-5xl);
    font-weight: 600;
    color: var(--ib-base);                     /* white display serif on rust */
    margin: 0 0 1.5rem;
    letter-spacing: -0.01em;
}

.hero .lede {
    font-size: var(--ib-text-lg);
    color: var(--ib-base);
    margin: 0 0 2rem;
    line-height: var(--ib-leading-snug);
}

/* Inside the hero, `.muted` reads as cream-with-some-transparency so
   it still reads as secondary copy against the rust card. Outside the
   hero (anywhere else on the site), .muted falls back to the default
   warm gray. */
.hero .muted {
    color: var(--ib-cream);
    opacity: 0.85;
}

.muted {
    color: var(--ib-text-soft);
}

/* --- Auth card (sign-in form) --- */

.auth-card {
    max-width: 460px;
    margin: 3rem auto;
    background: var(--ib-base);
    padding: 2.5rem 2rem;
    box-shadow: 0 2px 16px rgba(10, 43, 64, 0.08);
}

.auth-card h1 {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-3xl);
    color: var(--ib-rust);
    margin: 0 0 0.75rem;
    text-align: center;
}

.auth-card p.muted {
    text-align: center;
    margin: 0 0 1.5rem;
}

.auth-info,
.auth-error {
    padding: 0.875rem 1rem;
    margin: 0 0 1.5rem;
    font-size: var(--ib-text-sm);
    border-left: 3px solid var(--ib-rust);
    background: var(--ib-cream);
}

.auth-error {
    border-left-color: #c53f09;
    color: #8a3208;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-label {
    font-family: var(--ib-font-heading);
    font-weight: 600;
    font-size: var(--ib-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ib-navy);
    margin-bottom: 0.25rem;
}

.auth-input {
    font-family: var(--ib-font-body);
    font-size: var(--ib-text-base);
    padding: 0.75rem 1rem;
    border: 1px solid var(--ib-border);
    border-radius: 4px;
    background: var(--ib-base);
    color: var(--ib-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-input:focus {
    outline: none;
    border-color: var(--ib-rust);
    box-shadow: 0 0 0 3px rgba(168, 78, 17, 0.15);
}

.auth-submit {
    margin-top: 1rem;
    width: 100%;
    cursor: pointer;
    border: 2px solid var(--ib-rust);
    /* Inherits .btn-primary base; just keeps the auth context compact. */
}

/* Secondary "email me a link instead" path — small underlined link
   below the primary CTA. Visually quieter than .btn so the password
   path remains the primary affordance. */
.auth-alt-link {
    margin-top: 1rem;
    text-align: center;
    font-size: var(--ib-text-sm);
}

.auth-alt-link a {
    color: var(--ib-rust-warm);
}

.auth-alt-link a:hover {
    color: var(--ib-rust-bright);
}

.auth-card-wide {
    max-width: 560px;
}

.auth-recovery {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ib-border);
    text-align: center;
}

/* --- TOTP enrollment --- */

.totp-qr {
    margin: 1.5rem auto;
    max-width: 240px;
    text-align: center;
    padding: 1rem;
    background: var(--ib-base);
}

.totp-qr svg {
    width: 100%;
    height: auto;
    display: block;
}

.totp-manual-secret {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--ib-cream);
    border: 1px solid var(--ib-border);
}

.totp-manual-secret summary {
    cursor: pointer;
    font-family: var(--ib-font-heading);
    font-size: var(--ib-text-sm);
    font-weight: 600;
    color: var(--ib-rust-warm);
}

.totp-secret {
    display: block;
    margin: 1rem 0 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--ib-base);
    font-family: var(--ib-font-mono);
    font-size: var(--ib-text-base);
    letter-spacing: 0.05em;
    word-break: break-all;
    border-radius: 4px;
    border: 1px solid var(--ib-border);
}

/* --- /admin/* surfaces --- */

.admin-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
    max-width: 1100px;
}

.admin-page h1 {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-3xl);
    color: var(--ib-rust);
    margin: 0 0 1rem;
}

.admin-page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.admin-page-header h1 {
    margin: 0;
}

.admin-page-header-btn {
    padding: 0.5rem 1.25rem;
    font-size: var(--ib-text-sm);
    cursor: pointer;
}

.admin-subnav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ib-border);
}

.admin-subnav a {
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--ib-text);
    font-family: var(--ib-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--ib-text-sm);
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-subnav a:hover {
    color: var(--ib-rust);
}

.admin-subnav-active {
    background: var(--ib-rust);
    color: var(--ib-base) !important;
}

.admin-section {
    margin-top: 2.5rem;
}

.admin-section-h {
    font-family: var(--ib-font-heading);
    font-size: var(--ib-text-xl);
    color: var(--ib-text);
    margin: 0 0 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--ib-border);
}

/* Stat tiles on the dashboard overview */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2.5rem;
}

.admin-stat {
    background: var(--ib-cream);
    border: 1px solid var(--ib-border);
    padding: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-decoration: none;
    color: var(--ib-text);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.admin-stat:hover {
    transform: translateY(-2px);
}

.admin-stat-prominent {
    background: var(--ib-rust);
    color: var(--ib-base);
    border-color: var(--ib-rust);
}

.admin-stat-prominent .admin-stat-label {
    color: var(--ib-cream);
}

/* Warning-tone stat tile — used for broken-link count on the
   admin overview. Same shape as .admin-stat-prominent but in the
   warn palette so it pulls the eye without competing with the
   primary "Pending review" tile. */
.admin-stat-warn {
    background: #b03030;
    color: #fff;
    border-color: #b03030;
}

.admin-stat-warn .admin-stat-label {
    color: #ffe9e9;
}

.admin-stat-num {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-4xl);
    font-weight: 700;
    line-height: 1;
}

.admin-stat-label {
    font-family: var(--ib-font-heading);
    font-size: var(--ib-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ib-text-soft);
}

/* Approval queue cards */
.admin-approval-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.admin-approval-card {
    background: var(--ib-base);
    border: 1px solid var(--ib-border);
    border-left: 4px solid var(--ib-rust);
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
}

@media (max-width: 720px) {
    .admin-approval-card {
        grid-template-columns: 1fr;
    }
}

.admin-approval-meta h3 {
    margin: 0 0 0.5rem;
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-xl);
    color: var(--ib-rust);
}

.admin-approval-meta p {
    margin: 0 0 0.5rem;
}

.admin-approval-blurb {
    margin-top: 0.75rem;
}

.admin-approval-blurb summary {
    cursor: pointer;
    color: var(--ib-rust-warm);
    font-family: var(--ib-font-heading);
    font-size: var(--ib-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-approval-blurb p {
    padding: 0.75rem;
    background: var(--ib-cream);
    margin-top: 0.5rem;
}

.admin-approval-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    min-width: 200px;
}

.admin-approval-reject summary {
    cursor: pointer;
    list-style: none;
}

.admin-approval-reject summary::-webkit-details-marker {
    display: none;
}

.admin-reject-form {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--ib-cream);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.admin-table th,
.admin-table td {
    padding: 0.75rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--ib-border);
    vertical-align: top;
}

.admin-table th {
    font-family: var(--ib-font-heading);
    font-size: var(--ib-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--ib-cream);
    color: var(--ib-text-soft);
}

.admin-table-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Time-window pill nav on /admin/analytics/. Same shape as
   .admin-filter-nav but with its own selector so the active style
   doesn't bleed across pages. */
.admin-analytics-windows {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.admin-analytics-windows a {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--ib-border, #d6d3cd);
    border-radius: 999px;
    color: var(--ib-text);
    text-decoration: none;
    font-size: var(--ib-text-sm);
}

.admin-analytics-windows a:hover {
    background: var(--ib-rust);
    border-color: var(--ib-rust);
    color: var(--ib-base);
}

.admin-analytics-window-active {
    background: var(--ib-rust);
    border-color: var(--ib-rust) !important;
    color: var(--ib-base) !important;
}

.admin-filter-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 1rem 0 0;
}

/* Key-value detail blocks */
.admin-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    margin: 1rem 0 2rem;
}

.admin-kv dt {
    font-family: var(--ib-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--ib-text-sm);
    color: var(--ib-text-soft);
}

.admin-kv dd {
    margin: 0;
}

/* Status-change button group on book detail */
.admin-status-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.admin-status-form button {
    cursor: pointer;
}

.admin-status-form button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Audit mini-list on dashboard */
.admin-audit-mini {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-audit-mini li {
    padding: 0.5rem 0.75rem;
    background: var(--ib-cream);
    font-size: var(--ib-text-sm);
}

.audit-detail {
    font-size: 0.75rem;
    word-break: break-all;
}

.admin-pw-form {
    max-width: 360px;
}

/* --- /me/ dashboard + forms --- */

.me-dashboard h1 {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-3xl);
    color: var(--ib-rust);
    margin: 0 0 2rem;
    text-align: left;
}

.me-section {
    padding: 1.5rem 0;
    border-top: 1px solid var(--ib-border);
}

.me-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.me-section h2 {
    font-family: var(--ib-font-heading);
    font-size: var(--ib-text-xl);
    color: var(--ib-text);
    margin: 0 0 0.75rem;
}

.me-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.me-section-head h2 {
    margin: 0;
}

.me-section-btn {
    padding: 0.5rem 1.25rem;
    font-size: var(--ib-text-sm);
    cursor: pointer;
}

.me-book-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.me-book-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--ib-cream);
    border: 1px solid var(--ib-border);
    border-radius: 4px;
}

.me-book-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.me-book-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-small {
    padding: 0.4rem 1rem;
    font-size: var(--ib-text-sm);
    cursor: pointer;
}

.badge-ok,
.badge-warn,
.badge-muted {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-family: var(--ib-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.badge-ok    { background: #d4edda; color: #155724; }
.badge-warn  { background: #fff3cd; color: #856404; }
.badge-muted { background: var(--ib-beige); color: var(--ib-text-soft); }

/* --- Form layouts --- */

.auth-section-h {
    font-family: var(--ib-font-heading);
    font-size: var(--ib-text-lg);
    color: var(--ib-text);
    margin: 2rem 0 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ib-border);
}

.me-form-hint {
    margin: -0.25rem 0 0.75rem;
}

.me-form-row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .me-form-row-pair {
        grid-template-columns: 1fr;
    }
}

.me-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--ib-text-base);
    margin: 0.75rem 0 0;
}

.me-form-checkbox input {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.me-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ib-border);
}

.me-form-actions .btn {
    cursor: pointer;
}

.me-form-preview-photo {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.me-form-preview-cover {
    height: 120px;
    width: auto;
    object-fit: cover;
    vertical-align: middle;
    margin-left: 0.5rem;
    box-shadow: 0 2px 6px rgba(10, 43, 64, 0.10);
}

/* --- Passkey (sign-in form) --- */

.auth-passkey-block {
    margin-top: 1.25rem;
    text-align: center;
}

.auth-passkey-btn {
    width: 100%;
    cursor: pointer;
}

.passkey-status {
    margin: 0.5rem 0 0;
    min-height: 1.25em;  /* reserve space so layout doesn't jump */
}

/* --- Passkey list (/me/security) --- */

.security-section-h {
    font-family: var(--ib-font-heading);
    font-size: var(--ib-text-xl);
    margin: 2rem 0 1rem;
    color: var(--ib-text);
}

/* Divider between Passkeys section and Password sign-in section
   on /me/security. */
.security-divider {
    margin: 2.5rem 0 1.5rem;
    border: 0;
    border-top: 1px solid var(--ib-border, #d6d3cd);
}

.security-pw-form {
    margin-top: 1rem;
}

.security-pw-disable {
    margin-top: 1.25rem;
}

.passkey-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.passkey-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--ib-cream);
    border: 1px solid var(--ib-border);
    border-radius: 4px;
}

.passkey-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.passkey-delete-form {
    margin: 0;
}

.passkey-delete {
    padding: 0.5rem 1rem;
    font-size: var(--ib-text-sm);
}

.passkey-register {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ib-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.passkey-register .btn {
    margin-top: 0.5rem;
    align-self: flex-start;
    cursor: pointer;
}

/* --- Backup codes --- */

.backup-codes {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.backup-codes li code {
    display: block;
    padding: 0.875rem 1rem;
    background: var(--ib-cream);
    border: 1px solid var(--ib-border);
    font-family: var(--ib-font-mono);
    font-size: var(--ib-text-base);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
    border-radius: 4px;
}

@media (max-width: 540px) {
    .backup-codes {
        grid-template-columns: 1fr;
    }
}

.small {
    font-size: var(--ib-text-sm);
}

/* --- Catalog grids (home, /books/, author profile) --- */

.catalog-section {
    margin-top: 4rem;
}

.catalog-section:first-of-type {
    margin-top: 3rem;
}

.catalog-section-h {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-3xl);
    color: var(--ib-rust);
    margin: 0 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ib-rust);
    letter-spacing: -0.005em;
}

.catalog-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.catalog-header h1 {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-4xl);
    color: var(--ib-rust);
    margin: 0;
}

.sort-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: var(--ib-text-sm);
}

.sort-link {
    color: var(--ib-text);
    text-decoration: none;
    font-family: var(--ib-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
}

.sort-link-active {
    color: var(--ib-rust);
    border-bottom: 2px solid var(--ib-rust);
}

.catalog-section-link {
    margin-top: 1.5rem;
    text-align: right;
    font-family: var(--ib-font-heading);
    font-size: var(--ib-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.catalog-section-link a {
    color: var(--ib-rust-warm);
    text-decoration: none;
}

.catalog-section-link a:hover {
    color: var(--ib-rust-bright);
}

/* --- Book card --- */

.book-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem 1.5rem;
}

.book-card {
    background: transparent;
}

.book-card-link {
    display: block;
    text-decoration: none;
    color: var(--ib-text);
}

.book-card-cover {
    aspect-ratio: 2 / 3;
    background: var(--ib-cream);
    overflow: hidden;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(10, 43, 64, 0.10);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.book-card-link:hover .book-card-cover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(10, 43, 64, 0.18);
}

.book-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.book-card-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ib-rust);
    color: var(--ib-base);
    font-family: var(--ib-font-display);
    font-size: 4rem;
    font-weight: 600;
}

.book-card-title {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-xl);
    font-weight: 600;
    color: var(--ib-text);
    margin: 0 0 0.25rem;
    line-height: var(--ib-leading-tight);
}

.book-card-subtitle {
    font-size: var(--ib-text-sm);
    color: var(--ib-text-soft);
    margin: 0 0 0.5rem;
    font-style: italic;
}

.book-card-authors {
    font-size: var(--ib-text-sm);
    color: var(--ib-text);
    margin: 0;
}

.book-card-authors a {
    color: var(--ib-rust-warm);
    text-decoration: none;
}

.book-card-authors a:hover {
    text-decoration: underline;
    color: var(--ib-rust-bright);
}

/* --- Book detail --- */

.book-detail {
    max-width: 1000px;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.book-detail-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 720px) {
    .book-detail-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.book-detail-cover {
    aspect-ratio: 2 / 3;
    background: var(--ib-cream);
    box-shadow: 0 4px 16px rgba(10, 43, 64, 0.15);
    max-width: 280px;
}

.book-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.book-detail-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ib-rust);
    color: var(--ib-base);
    font-family: var(--ib-font-display);
    font-size: 6rem;
    font-weight: 600;
}

.book-detail-meta h1 {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-4xl);
    color: var(--ib-rust);
    margin: 0 0 0.5rem;
    line-height: var(--ib-leading-tight);
}

.book-detail-subtitle {
    font-size: var(--ib-text-lg);
    color: var(--ib-text-soft);
    font-style: italic;
    margin: 0 0 1rem;
}

.book-detail-authors {
    font-size: var(--ib-text-lg);
    margin: 0 0 0.5rem;
}

.book-detail-authors a {
    color: var(--ib-rust-warm);
    font-weight: 500;
}

.book-detail-published {
    margin: 0 0 2rem;
}

.book-detail-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.book-detail-blurb {
    background: var(--ib-base);
    padding: 2rem;
    margin: 2rem 0;
    border-left: 4px solid var(--ib-rust);
    font-size: var(--ib-text-lg);
    line-height: var(--ib-leading-relaxed);
}

.book-detail-blurb p {
    margin: 0;
}

.book-detail-isbn {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    margin: 2rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--ib-divider);
    font-size: var(--ib-text-sm);
}

.book-detail-isbn dt {
    font-family: var(--ib-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ib-text-soft);
    font-weight: 500;
}

.book-detail-isbn dd {
    margin: 0;
}

/* --- Author cards / index --- */

.author-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2rem 1.5rem;
}

.author-card {
    text-align: center;
}

.author-card-link {
    text-decoration: none;
    color: var(--ib-text);
    display: block;
}

.author-card-photo {
    width: 160px;
    height: 160px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(10, 43, 64, 0.10);
    transition: transform 0.15s ease;
}

.author-card-link:hover .author-card-photo {
    transform: translateY(-2px);
}

.author-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-card-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ib-rust);
    color: var(--ib-base);
    font-family: var(--ib-font-display);
    font-size: 3rem;
    font-weight: 600;
}

.author-card-name {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-lg);
    font-weight: 600;
    color: var(--ib-text);
    margin: 0;
}

/* --- Author profile --- */

.author-profile {
    max-width: 900px;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.author-profile-header {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2.5rem;
    margin-bottom: 2rem;
    align-items: start;
}

@media (max-width: 600px) {
    .author-profile-header {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.author-profile-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(10, 43, 64, 0.15);
}

@media (max-width: 600px) {
    .author-profile-photo {
        margin: 0 auto;
    }
}

.author-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-profile-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ib-rust);
    color: var(--ib-base);
    font-family: var(--ib-font-display);
    font-size: 5rem;
    font-weight: 600;
}

.author-profile-meta h1 {
    font-family: var(--ib-font-display);
    font-size: var(--ib-text-4xl);
    color: var(--ib-rust);
    margin: 0 0 0.5rem;
}

.author-profile-website {
    font-size: var(--ib-text-sm);
    margin: 0 0 0.75rem;
}

.author-profile-website a {
    color: var(--ib-rust-warm);
    word-break: break-all;
}

.author-profile-socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: var(--ib-text-sm);
}

.author-profile-socials a {
    color: var(--ib-rust-warm);
    text-decoration: none;
    font-family: var(--ib-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.author-profile-bio {
    margin: 2rem 0;
    font-size: var(--ib-text-lg);
    line-height: var(--ib-leading-relaxed);
}

.author-profile-bio p {
    margin: 0;
}

.author-profile-books {
    margin-top: 3rem;
}

/* --- Buttons (for future CTAs) --- */

.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: 999px;
    font-family: var(--ib-font-heading);
    font-weight: 500;
    font-size: var(--ib-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-primary {
    background: var(--ib-rust);
    color: var(--ib-base);
    border: 2px solid var(--ib-rust);
}

.btn-primary:hover {
    background: var(--ib-rust-bright);
    border-color: var(--ib-rust-bright);
    color: var(--ib-base);
}

.btn-secondary {
    background: transparent;
    color: var(--ib-rust);
    border: 2px solid var(--ib-rust);
}

.btn-secondary:hover {
    background: var(--ib-rust);
    color: var(--ib-base);
}

/* Destructive actions — clear visual separation from the rust-toned
   primary / secondary pair so a destructive button never gets confused
   with a save button. Used on the book + user delete surfaces and on
   account suspension. */
.btn-danger {
    background: #b03030;
    color: #fff;
    border: 2px solid #b03030;
}

.btn-danger:hover {
    background: #8c2424;
    border-color: #8c2424;
    color: #fff;
}

.danger-zone {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px dashed #b03030;
}

.danger-zone .admin-section-h,
.danger-zone .auth-section-h {
    color: #b03030;
}

.danger-zone hr {
    margin: 1.25rem 0;
    border: 0;
    border-top: 1px solid var(--ib-border, #d6d3cd);
}

/* --- Footer (dark navy band, mirrors WP-site visual weight) --- */

.site-footer {
    background: var(--ib-footer-bg);
    color: var(--ib-footer-text);
    padding: 2.5rem 0;
    text-align: center;
}

.site-footer p {
    margin: 0.5rem 0;
    color: var(--ib-footer-text);
}

.site-footer a {
    color: var(--ib-footer-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer a:hover {
    color: var(--ib-gold);
}

.site-footer .footer-meta {
    font-size: var(--ib-text-sm);
    opacity: 0.85;
}

.site-footer .dot {
    margin: 0 0.4em;
    opacity: 0.6;
}

.site-footer .version {
    font-family: var(--ib-font-mono);
    font-size: 0.75rem;
}

/* --- Error pages (404, 5xx, etc.) --- */

.error-page {
    max-width: 36rem;
    margin: 4rem auto;
    padding: 0 1.5rem;
    text-align: center;
}

.error-page h1 {
    margin: 0.5rem 0 1rem;
}

.error-status {
    font-family: var(--ib-font-heading);
    font-size: 6rem;
    line-height: 1;
    margin: 0;
    color: var(--ib-rust);
    letter-spacing: -0.02em;
}

.error-page .lede {
    color: var(--ib-text-soft);
    margin: 0 auto 1.5rem;
    max-width: 32rem;
}

.error-path {
    font-size: var(--ib-text-sm);
    margin: 0 auto 2rem;
    color: var(--ib-text-muted);
}

.error-path code {
    font-family: var(--ib-font-mono);
    background: var(--ib-beige);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    color: var(--ib-text-soft);
    overflow-wrap: anywhere;
}

.error-actions {
    display: flex;
    gap: 0.875rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .site-header-logo {
        padding: 1.5rem 1.5rem 1rem;
    }

    .site-logo {
        width: 200px;
    }

    .site-nav {
        gap: 1.25rem;
        padding: 0.875rem 1.5rem;
    }

    /* === Mobile menu ===
       The .site-nav grid collapses to socials-on-left, hamburger-on-right
       (with the now-hidden .site-nav-links column between them at 0 width).
       The links re-render as a slide-down panel anchored under the nav row. */

    /* Drop the desktop 200px inboard nudge so the social icons sit naturally
       in the left-hand grid column with just the nav padding. */
    .site-nav-socials {
        margin-left: 0;
    }

    /* Reveal the hamburger button. */
    .site-nav-hamburger {
        visibility: visible;
    }

    /* Hide the inline links row; instead it becomes the absolute-positioned
       slide-down panel below. Anchor on .site-header-nav (set to relative). */
    .site-header-nav {
        position: relative;
    }

    .site-nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        background: var(--ib-header-bg);
        border-bottom: 1px solid var(--ib-divider);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height 0.28s ease, opacity 0.2s ease;
        z-index: 10;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .site-nav-links.is-open {
        /* Generous ceiling — content is short so 100vh is fine. */
        max-height: 100vh;
        opacity: 1;
        pointer-events: auto;
    }

    /* Stack the links vertically with comfortable tap targets. */
    .site-nav-links > a,
    .site-nav-links .site-nav-user,
    .site-nav-links .site-nav-signout-form .site-nav-signout {
        display: block;
        text-align: center;
        padding: 0.875rem 1.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Sign-out form: full-width so its button (already block) fills the row. */
    .site-nav-links .site-nav-signout-form {
        display: block;
        width: 100%;
    }

    /* User-name span: same spacing, but read as muted text rather than a link. */
    .site-nav-links .site-nav-user {
        padding-top: 1rem;
        padding-bottom: 0.25rem;
    }

    /* Show the mobile-only divider between the catalog links and the
       auth/account section. Thin rule, full nav width, matches the
       header's existing divider color. */
    .site-nav-divider {
        display: block;
        height: 1px;
        background: var(--ib-divider);
        margin: 0.5rem 1.5rem;
    }

    .hero {
        padding: 2.5rem 1.25rem;
    }

    .hero h1 {
        font-size: var(--ib-text-3xl);
    }

    .site-main {
        padding: 2rem 0;
    }
}

/* =========================================================================
   Indie Book Watchlist — feature styles (appended to the shop base system)
   Reuses the shared palette tokens (:root above) for brand continuity.
   ========================================================================= */

.watchlist-intro { padding: 2rem 0 1rem; }
.watchlist-intro h1 {
    font-family: var(--ib-font-display);
    color: var(--ib-heading);
    font-size: var(--ib-text-4xl);
    margin: 0 0 .25rem;
}
.watchlist-tagline { color: var(--ib-text-soft); font-size: var(--ib-text-lg); margin: 0; }
.watchlist-empty { color: var(--ib-text-muted); padding: 2rem 0; font-style: italic; }

/* Prominent "Request Removal" call-out in the header nav */
.site-nav-cta {
    border: 1px solid var(--ib-rust-warm);
    border-radius: 4px;
    padding: .25rem .7rem !important;
    color: var(--ib-rust-warm) !important;
}
.site-nav-cta:hover { background: var(--ib-rust-warm); color: var(--ib-cream) !important; }

/* Listing grid */
.watchlist-grid {
    list-style: none;
    margin: 1rem 0 3rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.75rem;
}
.watch-card {
    background: var(--ib-base);
    border: 1px solid var(--ib-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.watch-card-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--ib-accent, #e5e3e1);
    display: block;
}
.watch-card-cover--placeholder {
    background: linear-gradient(135deg, var(--ib-beige), var(--ib-beige-edge));
}
.watch-card-body { padding: .85rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.watch-card-title { font-family: var(--ib-font-display); font-size: var(--ib-text-lg); margin: 0; color: var(--ib-text); }
.watch-card-author { font-size: var(--ib-text-sm); color: var(--ib-text-soft); margin: 0; }
.watch-card-publisher { font-size: var(--ib-text-sm); margin: .15rem 0 0; }
.watch-card-date { font-size: var(--ib-text-xs); color: var(--ib-text-muted); margin: .1rem 0 0; }

/* Forthcoming vs released sections */
.watchlist-section { margin: 1.5rem 0 2.5rem; }
.watchlist-section-heading {
    font-family: var(--ib-font-heading);
    color: var(--ib-secondary-800, #494846);
    font-size: var(--ib-text-xl);
    border-bottom: 2px solid var(--ib-rust);
    padding-bottom: .3rem;
    margin: 0 0 1.25rem;
}
.watch-card-author--pending { color: var(--ib-text-muted); font-style: italic; }

/* Request Removal form */
.form-container { max-width: 640px; }
.removal-form { display: flex; flex-direction: column; gap: 1.1rem; margin: 1.5rem 0 3rem; }
.form-field { display: flex; flex-direction: column; gap: .3rem; }
.form-field > span { font-weight: 500; color: var(--ib-text); }
.form-field input, .form-field select, .form-field textarea {
    padding: .55rem .7rem; border: 1px solid var(--ib-border); border-radius: 4px;
    font: inherit; background: var(--ib-base); color: var(--ib-text);
}
.form-field em { color: var(--ib-text-muted); font-style: italic; font-weight: 400; }
.field-hint { color: var(--ib-text-muted); font-size: var(--ib-text-sm); }
.form-group { border: 1px solid var(--ib-border); border-radius: 4px; padding: .8rem 1rem; }
.form-group legend { font-weight: 500; padding: 0 .4rem; }
.form-group label { margin-right: 1.2rem; }
.form-check { display: flex; align-items: flex-start; gap: .5rem; }
.form-errors {
    background: #fdecea; border: 1px solid var(--ib-rust-bright); border-radius: 4px;
    color: #7a2408; padding: .8rem 1.2rem; margin: 1rem 0; list-style-position: inside;
}
.form-privacy { font-size: var(--ib-text-sm); color: var(--ib-text-soft); }
.btn-primary {
    align-self: flex-start; background: var(--ib-rust-warm); color: var(--ib-cream);
    border: none; border-radius: 4px; padding: .6rem 1.4rem; font: inherit;
    font-weight: 500; cursor: pointer;
}
.btn-primary:hover { background: var(--ib-rust-bright); }
.prose p { line-height: var(--ib-leading-relaxed); margin: 0 0 1rem; }

/* Admin + auth */
.linkbtn { background:none; border:none; color:var(--ib-link); cursor:pointer; font:inherit; padding:0; text-decoration:underline; }
.admin-nav { display:flex; flex-direction:column; gap:.6rem; margin:1.5rem 0; }
.admin-nav a { display:flex; justify-content:space-between; max-width:340px; padding:.7rem 1rem; border:1px solid var(--ib-border); border-radius:6px; background:var(--ib-base); }
.pill { background:var(--ib-rust-warm); color:var(--ib-cream); border-radius:999px; padding:.05rem .6rem; font-size:var(--ib-text-sm); }
.admin-card { border:1px solid var(--ib-border); border-radius:6px; background:var(--ib-base); padding:1rem 1.2rem; margin:0 0 1.2rem; }
.admin-card p { margin:.3rem 0; }
.inline-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.6rem 0 0; }
.inline-form input[type=text], .inline-form select { padding:.4rem .6rem; border:1px solid var(--ib-border); border-radius:4px; font:inherit; }
.admin-list { list-style:none; padding:0; } .admin-list li { padding:.4rem 0; border-bottom:1px solid var(--ib-accent,#e5e3e1); }
.admin-table { width:100%; border-collapse:collapse; margin:1rem 0; }
.admin-table th, .admin-table td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--ib-border); font-size:var(--ib-text-sm); }
.totp-qr svg { width:200px; height:200px; }
.backup-codes { columns:2; list-style:none; padding:0; max-width:320px; } .backup-codes code { font-size:var(--ib-text-lg); }

/* Listing filter toggle */
.watch-filter { display:flex; gap:.5rem; margin:1rem 0 .5rem; flex-wrap:wrap; }
.watch-filter-btn {
    font: inherit; cursor:pointer; padding:.35rem .9rem; border-radius:999px;
    border:1px solid var(--ib-border); background:var(--ib-base); color:var(--ib-text-soft);
}
.watch-filter-btn:hover { border-color:var(--ib-rust-warm); color:var(--ib-rust-warm); }
.watch-filter-btn.is-active {
    background:var(--ib-rust-warm); border-color:var(--ib-rust-warm); color:var(--ib-cream);
}

/* Search + publisher/genre filter controls */
/* A filtered-out card is hidden via the `hidden` attribute — but `.watch-card`
   sets display:flex at the same specificity as the UA `[hidden]` rule, so
   without this explicit override the attribute has no visual effect and the
   search / publisher / genre filters appear to do nothing. */
.watch-card[hidden] { display: none !important; }
.watch-controls { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:1rem 0 .75rem; }
.watch-controls .watch-filter { margin:0; }
.watch-search {
    font:inherit; padding:.4rem .9rem; border-radius:999px; flex:1 1 220px; min-width:0;
    border:1px solid var(--ib-border); background:var(--ib-base); color:var(--ib-text);
}
.watch-search::placeholder { color:var(--ib-text-muted); }
.watch-select {
    font:inherit; padding:.4rem .7rem; border-radius:999px; cursor:pointer;
    border:1px solid var(--ib-border); background:var(--ib-base); color:var(--ib-text-soft);
}
.watch-search:focus, .watch-select:focus { outline:none; border-color:var(--ib-rust-warm); color:var(--ib-text); }

/* Bookshop.org affiliate: "Buy direct from publisher" fallback + disclosure */
.watch-card-buy-direct { margin:.35rem 0 0; font-size:var(--ib-text-xs); }
.watch-card-buy-direct a { color:var(--ib-text-muted); }
.watch-card-buy-direct a:hover { color:var(--ib-rust-warm); }
.affiliate-note {
    font-size:var(--ib-text-sm); color:var(--ib-text-soft); max-width:60ch;
    margin:.6rem 0 0; line-height:var(--ib-leading-relaxed, 1.6);
}

/* Admin: Bookshop link overrides */
#bs-filter { margin:1rem 0; max-width:420px; }
.bs-row .inline-form { align-items:baseline; }
.bs-title { flex:1 1 300px; display:flex; flex-direction:column; }
.bs-check { font-size:var(--ib-text-sm); white-space:nowrap; }
.bs-overridden { border-left:3px solid var(--ib-rust-warm); padding-left:.5rem; }
.bs-disabled { opacity:.6; }

/* Make the cover a clickable link to the book's page */
.watch-card-cover-link { display:block; }
.watch-card-cover-link:hover .watch-card-cover { opacity:.9; }