/*
 * Book Tracker UI foundation
 *
 * This is the single stylesheet for shared tokens, structural primitives,
 * application components, responsive behavior, and product workflows.
 */

:root {
    --canvas: #f2efe7;
    --paper: #fbfaf6;
    --paper-raised: #fffefb;
    --wash: #e9e5da;
    --ink: #1f231f;
    --ink-soft: #62675f;
    --line: #d7d3c8;
    --line-strong: #bdb8aa;
    --brand: #28523e;
    --brand-deep: #193a2b;
    --brand-soft: #dfe9e1;
    --gold: #986816;
    --danger-ink: #8c312d;
    --danger-soft: #f2e2df;
    --warning-soft: #f5ead5;
    --info-soft: #e2eaf0;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --radius-sm: 5px;
    --radius-md: 9px;
    --radius-lg: 14px;
    --shadow-lift: 0 18px 44px rgb(35 39 33 / 11%);
    --shadow-cover: 0 12px 26px rgb(35 39 33 / 16%);

    font-family: var(--font-ui);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
    min-height: 100vh;
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-ui);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand-soft); }
a { color: var(--brand); text-underline-offset: .16em; text-decoration-thickness: .08em; }
img { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
button, input, select, textarea { font: inherit; font-family: var(--font-ui); }
button, .button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: white;
    font-weight: 720;
    text-decoration: none;
    cursor: pointer;
}
button:hover, .button:hover { background: var(--brand-deep); }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 32%, transparent);
    outline-offset: 3px;
}

.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.page-shell { padding-block: var(--space-7) var(--space-8); }
.page-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: .98;
}
.page-heading { margin-bottom: var(--space-6); }
.lede { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; }
.eyebrow { margin: 0 0 var(--space-2); color: var(--brand); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.muted { color: var(--ink-soft); }
.small { font-size: .86rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
h1, h2, h3, p { overflow-wrap: anywhere; }
.section-label {
    margin: 0 0 var(--space-2);
    color: var(--brand);
    font-family: var(--font-ui);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .13em;
}
.button-icon, .inline-icon, .back-link-icon, .row-arrow { width: 18px; height: 18px; flex: 0 0 auto; }
.button { gap: var(--space-2); }
.button-small { min-height: 38px; padding: 8px 13px; }
.secondary-button { border-color: var(--line-strong); background: var(--paper-raised); color: var(--ink); }
.secondary-button:hover { border-color: var(--brand); background: var(--wash); color: var(--brand-deep); }
.text-button, .danger-link { min-height: auto; padding: 3px 0; border: 0; background: transparent; }
.text-button { color: var(--brand); }
.text-button:hover { background: transparent; color: var(--brand-deep); text-decoration: underline; }
.danger-link { color: var(--danger-ink); }
.danger-link:hover { background: transparent; color: #6f2421; text-decoration: underline; }
.danger-button { border-color: var(--danger-ink); background: transparent; color: var(--danger-ink); }
.danger-button:hover { background: var(--danger-ink); color: white; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 720; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* Shared application shell */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(251 250 246 / 92%);
    border-bottom: 1px solid var(--line);
    border-color: color-mix(in srgb, var(--line) 86%, transparent);
    backdrop-filter: blur(16px);
}
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.site-brand {
    min-width: 190px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}
.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    color: var(--brand-deep);
}
.brand-mark-icon { width: 22px; height: 22px; }
.brand-copy { display: grid; line-height: 1.08; }
.brand-copy strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.brand-copy small { margin-top: 4px; color: var(--ink-soft); font-size: .62rem; font-weight: 650; letter-spacing: .025em; }
.nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.nav-links a { font-weight: 680; }
.nav-item {
    position: relative;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-soft) !important;
    font-size: .82rem;
    white-space: nowrap;
}
.nav-icon { width: 17px; height: 17px; display: block; stroke-width: 1.75; }
.nav-friends { display: inline-flex; align-items: center; gap: 6px; }
.nav-badge { min-width: 20px; height: 20px; display: inline-grid; padding-inline: 6px; place-items: center; border-radius: 999px; background: var(--danger-ink); color: white; font-size: .7rem; line-height: 1; }
.nav-item:hover, .nav-item:focus-visible { background: var(--wash); color: var(--ink) !important; }
.nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep) !important; }
.nav-links .nav-add-books { min-height: 40px; padding: 8px 12px; border: 1px solid var(--brand); border-radius: var(--radius-sm); }
.nav-links .nav-add-books:not([aria-current="page"]) { background: transparent; color: var(--brand) !important; }
.nav-links .nav-add-books:hover, .nav-links .nav-add-books:focus-visible { background: var(--brand); color: white !important; }
.nav-links .nav-profile {
    width: 42px;
    height: 42px;
    min-height: 42px;
    overflow: visible;
    display: grid;
    flex: 0 0 42px;
    padding: 4px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}
.nav-profile-avatar {
    width: 32px;
    height: 32px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--brand);
    color: white;
    box-shadow: 0 0 0 1px var(--brand);
    font-size: .62rem;
    font-weight: 800;
}
.nav-profile-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.nav-profile-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-text-link { padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-soft) !important; }
.nav-text-link[aria-current="page"], .nav-text-link:hover { background: var(--wash); color: var(--ink) !important; }
.nav-links .button { color: white; }

/* Forms and feedback */
input, select, textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper-raised);
}
textarea { min-height: 120px; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--line-strong) 55%, var(--ink)); }
input:focus, select:focus, textarea:focus {
    border-color: var(--brand);
    outline: 3px solid color-mix(in srgb, var(--brand) 16%, transparent);
}
.stack-form { display: grid; gap: 18px; }
.stack-form label:not(.check-row) { display: grid; gap: 6px; font-size: .84rem; font-weight: 720; }
.check-row { display: flex; align-items: center; gap: 9px; font-weight: 650; }
.check-row input { width: auto; }
.field-note { margin: 8px 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }
.field-error { display: block; color: var(--danger-ink); font-size: .82rem; font-weight: 650; }
.heading-row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form-save-row { min-height: 42px; display: flex; align-items: center; gap: var(--space-3); }
.flash-stack { display: grid; gap: 10px; margin-bottom: var(--space-5); }
.flash { padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: none; transition: opacity .2s ease, transform .2s ease; }
.flash.is-dismissing { opacity: 0; transform: translateY(-5px); }
.flash-success { border-color: #82a78d; background: #edf5ee; }
.flash-danger { border-color: #cd8d88; background: #f8ecea; }
.flash-warning { border-color: #d1ae6d; background: #fbf3e3; }
.autosave-active .autosave-submit { display: none; }
.autosave-status { color: var(--ink-soft); font-size: .88rem; font-weight: 700; }
.autosave-status[data-state="saved"] { color: var(--brand); }
.autosave-status[data-state="error"] { color: var(--danger-ink); }
.back-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-soft);
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
}
.back-link:hover { color: var(--brand); }

/* Shared workflow structure and states */
.filter-bar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 170px 160px 195px auto;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-5);
}
.filter-apply-button { white-space: nowrap; }
.filter-bar .htmx-indicator { position: absolute; right: 0; bottom: -18px; font-size: .75rem; pointer-events: none; }
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.search-field { position: relative; }
.search-field-icon { position: absolute; top: 50%; left: 12px; z-index: 1; width: 18px; height: 18px; color: var(--ink-soft); transform: translateY(-50%); pointer-events: none; }
.search-field input { padding-left: 39px; }
.library-results-toolbar p { margin: 0; }
.library-results-toolbar strong { color: var(--ink); }
.library-results-toolbar a { font-weight: 750; }

.cover-wrap, .detail-cover { overflow: hidden; background: var(--wash); }
.cover-wrap img, .detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-wrap .cover-placeholder, .detail-cover .cover-placeholder, .profile-recent-cover .cover-placeholder { min-height: 100%; }
.book-card-copy { min-width: 0; }
.empty-state.compact, .compact-empty-state { padding: 32px; }

.editor-card { margin-top: var(--space-5); padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-raised); }
.two-column-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ownership-options { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.legacy-ownership-note, .ownership-unspecified { color: #775115; }
.reading-card { display: grid; gap: 14px; }
.reading-card .panel-heading, .reading-card p { margin-bottom: 0; }
.reading-history-row strong, .reading-history-row small { display: block; }
.reading-history-row small { margin-top: 3px; color: var(--ink-soft); }
.reading-history-meta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
.metadata-editor { max-width: 880px; }
.metadata-editor fieldset { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.metadata-editor legend { padding: 0 6px; font-weight: 800; }
.danger-zone { margin-top: var(--space-5); }

.rating-fieldset { margin: 0 0 var(--space-4); padding: 0; border: 0; }
.rating-picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; direction: ltr; }
.rating-help { margin: 4px 0 9px; color: var(--ink-soft); font-size: .85rem; }
.rating-options { display: flex; align-items: center; }
.rating-choice { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; opacity: 0; cursor: pointer; }
.rating-half { position: relative; flex: 0 0 1.25rem; width: 1.25rem; height: 2.5rem; overflow: hidden; color: #c8c5bc; cursor: pointer; }
.rating-half::before { position: absolute; top: 0; width: 2.5rem; content: "★"; font-size: 2.5rem; line-height: 1; text-align: center; }
.rating-half-left::before { left: 0; }
.rating-half-right::before { right: 0; }
.rating-half.is-filled::before { color: var(--gold); }
.rating-options:not(.is-enhanced) .rating-half:has(~ .rating-half .rating-choice:checked)::before,
.rating-options:not(.is-enhanced) .rating-half:has(.rating-choice:checked)::before { color: var(--gold); }
.rating-half:has(.rating-choice:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand) 38%, transparent); outline-offset: 2px; border-radius: 4px; }
.clear-rating { position: relative; min-height: auto; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-size: .85rem; cursor: pointer; }
.clear-rating:hover, .clear-rating:has(.rating-choice:focus-visible) { border-color: var(--brand); background: var(--wash); color: var(--ink); outline: none; }
.rating-value { min-width: 5.5rem; color: var(--ink-soft); font-size: .9rem; }
.rating-display { display: inline-flex; align-items: center; gap: .4rem; color: var(--gold); white-space: nowrap; }
.rating-stars { position: relative; display: inline-block; color: #c8c5bc; letter-spacing: .02em; line-height: 1; }
.rating-stars-empty { display: block; }
.rating-stars-filled { position: absolute; inset: 0 auto 0 0; width: var(--rating-fill); overflow: hidden; color: var(--gold); white-space: nowrap; }
.rating-number { color: var(--ink-soft); font-size: .85rem; font-weight: 750; }
.rating-display-compact { gap: .28rem; }
.rating-display-compact .rating-stars { font-size: .78rem; }
.rating-display-compact .rating-number { font-size: .72rem; }
.rating-unrated { color: var(--ink-soft); }

.home-request-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; color: inherit; text-decoration: none; border: 1px solid var(--line); }
.home-request-alert strong, .home-request-alert small { display: block; }
.home-request-alert small { color: var(--ink-soft); }
.activity-list { display: grid; gap: 18px; }
.activity-card { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
.activity-heading-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.activity-person { min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.activity-avatar { flex: 0 0 40px; width: 40px; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: white; font-size: .7rem; font-weight: 800; }
.activity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.activity-person strong, .activity-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-person small, .activity-heading-row time { margin-top: 3px; color: var(--ink-soft); font-size: .74rem; }
.activity-book { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 15px; color: inherit; text-decoration: none; }
.activity-cover { width: 62px; aspect-ratio: 2 / 3; overflow: hidden; display: block; border-radius: var(--radius-sm); background: var(--wash); }
.activity-book-copy { min-width: 0; }
.activity-book-copy > strong, .activity-book-copy > small, .activity-book-copy > span { display: block; }
.activity-book-copy > small { color: var(--ink-soft); }
.home-feed-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: var(--space-4); color: var(--ink-soft); font-size: .78rem; }
.home-feed-pagination a:last-child { justify-self: end; }
.home-year-stats, .home-quick-links { display: grid; }
.home-quick-links > a {
    min-width: 0;
    display: grid;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
.home-quick-links > a > span { min-width: 0; }
.home-quick-links strong, .home-quick-links small { display: block; }
.home-quick-links small { margin-top: 2px; color: var(--ink-soft); line-height: 1.3; }

.profile-book-add-card { margin-top: var(--space-6); }
.profile-book-add-card h2 { margin-top: 0; }
.profile-book-add-form { max-width: 440px; }
.privacy-note { color: var(--ink-soft); font-size: .84rem; font-weight: 650; }
.add-requirement-note { max-width: 48ch; }
.shared-library-heading { margin-bottom: var(--space-5); }
.shared-library-filters { grid-template-columns: minmax(220px, 1fr) 190px 195px auto; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.shared-library-filters input, .shared-library-filters select { border-color: transparent; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line); }
.shared-library-list { width: min(820px, 100%); }
.shared-library-card { grid-template-columns: 50px minmax(0, 1fr); padding-block: 10px; }
.shared-library-card .profile-recent-cover { width: 50px; }
.shared-library-card .profile-recent-copy { grid-template-columns: minmax(0, 1fr); }
.shared-library-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.shared-library-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font-size: .74rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.shared-library-rating-star { color: var(--gold); font-size: .9rem; }
.shared-library-empty { margin-top: var(--space-4); }
.friend-reading-history { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.friend-reading-history h2 { margin-top: 0; }
.friend-reading-list { display: grid; gap: var(--space-3); }
.friend-reading-record { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--wash); }
.friend-reading-record-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: 10px; }
.friend-reading-record-heading h3 { margin: 0; font-size: 1rem; }
.friend-reading-record-heading time, .friend-reading-record-heading .muted { color: var(--ink-soft); font-size: .8rem; font-weight: 650; }
.friend-reading-review { margin: 14px 0 0; line-height: 1.65; white-space: pre-wrap; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: var(--space-5); color: var(--ink-soft); font-size: .88rem; text-align: center; }
.pagination a, .pagination > span:first-child, .pagination > span:last-child { min-width: 82px; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-raised); text-decoration: none; }
.pagination span[aria-disabled="true"] { opacity: .5; }

/* Public landing */
.endpoint-home:not(.authenticated) .page-shell { padding-top: var(--space-8); }
.landing-hero {
    min-height: 560px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, .72fr);
    align-items: stretch;
    gap: var(--space-7);
    padding-bottom: var(--space-8);
}
.landing-hero-copy { align-self: center; max-width: 760px; padding-block: var(--space-6); }
.landing-hero h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(3.8rem, 8vw, 7.2rem);
    font-weight: 570;
    letter-spacing: -.065em;
    line-height: .88;
}
.landing-hero-copy > p:not(.section-label) { max-width: 620px; margin: var(--space-5) 0 0; color: var(--ink-soft); font-size: 1.16rem; line-height: 1.65; }
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: var(--space-6); }
.landing-manifesto {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius-lg);
    background: var(--brand-deep);
    color: #f5f1e6;
}
.landing-manifesto-mark { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgb(245 241 230 / 28%); border-radius: 50%; }
.landing-manifesto-icon { width: 28px; height: 28px; }
.landing-manifesto blockquote { margin: auto 0; font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.55rem); line-height: 1.18; }
.landing-manifesto p { margin: var(--space-6) 0 0; color: rgb(245 241 230 / 70%); font-size: .83rem; line-height: 1.55; }
.landing-features { padding-block: var(--space-8); border-top: 1px solid var(--line); }
.landing-section-heading { max-width: 650px; margin-bottom: var(--space-7); }
.landing-section-heading h2 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); letter-spacing: -.045em; line-height: 1.02; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.landing-feature-grid article { padding-top: var(--space-5); border-top: 2px solid var(--ink); }
.feature-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--brand); }
.feature-icon svg { width: 25px; height: 25px; }
.landing-feature-grid h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.35rem; }
.landing-feature-grid p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.other-tools { padding-block: var(--space-7); border-top: 1px solid var(--line); }
.compact-heading { margin-bottom: var(--space-5); }
.compact-heading h2 { font-size: 2rem; }
.tool-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    color: var(--ink);
    text-decoration: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.tool-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--wash); color: var(--brand); }
.tool-icon svg, .tool-arrow { width: 21px; height: 21px; }
.tool-row strong, .tool-row small { display: block; }
.tool-row small { margin-top: 3px; color: var(--ink-soft); }
.tool-row:hover .tool-arrow { transform: translateX(3px); }
.tool-arrow { color: var(--brand); transition: transform .15s ease; }

/* Authentication */
.auth-layout {
    min-height: min(650px, calc(100vh - 190px));
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper-raised);
    box-shadow: 0 20px 60px rgb(35 39 33 / 8%);
}
.auth-context {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-7);
    padding: clamp(32px, 5vw, 58px);
    background: var(--brand-deep);
    color: #f5f1e6;
}
.auth-context-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgb(245 241 230 / 28%); border-radius: 50%; }
.auth-context-icon { width: 26px; height: 26px; }
.auth-context-label { margin: 0 0 var(--space-3); color: rgb(245 241 230 / 66%); font-size: .67rem; font-weight: 800; letter-spacing: .13em; }
.auth-context-title { max-width: 430px; margin: 0; color: #f5f1e6; font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 4.2rem); line-height: .98; }
.auth-context-note { max-width: 380px; margin: 0; color: rgb(245 241 230 / 68%); font-size: .78rem; line-height: 1.55; }
.auth-card { width: min(520px, 100%); align-self: center; justify-self: center; padding: clamp(34px, 6vw, 68px); }
.auth-heading { margin-bottom: var(--space-6); }
.auth-heading h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 3.7rem); letter-spacing: -.05em; line-height: .98; }
.auth-heading > p:last-child:not(.section-label) { margin: var(--space-3) 0 0; color: var(--ink-soft); line-height: 1.55; }
.auth-card .stack-form { margin-top: 0; }
.auth-card .stack-form > button { width: 100%; margin-top: 2px; }
.auth-help-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin: var(--space-5) 0 0; font-size: .82rem; }
.auth-switch { margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .84rem; }
.invite-registration-note, .form-error { margin: 0 0 var(--space-5); padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warning-soft); font-size: .84rem; }
.form-error { background: var(--danger-soft); color: var(--danger-ink); }

/* Library */
.library-heading { align-items: end; margin-bottom: var(--space-6); }
.library-heading .lede { margin: var(--space-3) 0 0; font-size: .9rem; }
.library-shelves {
    display: flex;
    gap: var(--space-6);
    overflow-x: auto;
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}
.library-shelves::-webkit-scrollbar { display: none; }
.shelf-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 8px;
    padding: 0 1px 13px;
    color: var(--ink-soft);
    font-size: .84rem;
    font-weight: 720;
    text-decoration: none;
}
.shelf-tab strong { color: var(--ink-soft); font-size: .7rem; font-variant-numeric: tabular-nums; }
.shelf-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; content: ""; }
.shelf-tab:hover { color: var(--ink); }
.shelf-tab[data-filter-active="true"] { color: var(--brand-deep); }
.shelf-tab[data-filter-active="true"]::after { background: var(--brand); }
.library-toolbar {
    grid-template-columns: minmax(260px, 1fr) 185px 190px auto;
    gap: 8px;
    margin-bottom: var(--space-5);
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.library-search-field { position: relative; }
.library-search-field .search-field-icon { position: absolute; top: 50%; left: 12px; z-index: 1; width: 18px; height: 18px; color: var(--ink-soft); transform: translateY(-50%); pointer-events: none; }
.library-search-field input { padding-left: 39px; }
.library-toolbar select, .library-toolbar input { border-color: transparent; background: var(--paper-raised); box-shadow: 0 0 0 1px var(--line); }
.library-results-toolbar { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); color: var(--ink-soft); font-size: .84rem; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 34px 22px; }
.book-card {
    min-width: 0;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
}
.book-card:hover, .book-card:focus-visible { border: 0; box-shadow: none; transform: none; }
.book-card .cover-wrap {
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    display: block;
    border-radius: var(--radius-sm);
    background: var(--wash);
    box-shadow: 0 8px 18px rgb(35 39 33 / 12%);
    transition: transform .18s ease, box-shadow .18s ease;
}
.book-card:hover .cover-wrap, .book-card:focus-visible .cover-wrap { transform: translateY(-4px); box-shadow: var(--shadow-cover); }
.cover-wrap img { width: 100%; height: 100%; object-fit: cover; }
.cover-placeholder { width: 100%; height: 100%; min-height: 160px; display: grid; place-items: center; background: var(--wash); color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }
.cover-placeholder-icon { width: 34%; height: 34%; }
.book-card-body { min-width: 0; display: flex; flex-direction: column; padding: 13px 1px 0; }
.book-card h2 { margin: 8px 0 3px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; line-height: 1.22; }
.book-card p { font-size: .78rem; }
.book-meta-row { min-height: 22px; display: grid; align-content: start; justify-items: start; gap: 5px; margin-top: 8px; padding-top: 0; font-size: .7rem; }
.status-badge { width: fit-content; display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: .64rem; font-weight: 780; letter-spacing: .01em; }
.status-none { background: var(--wash); color: var(--ink-soft); }
.status-read { background: var(--brand-soft); color: var(--brand-deep); }
.status-reading { background: var(--info-soft); color: #2c506c; }
.status-want_to_read { background: var(--warning-soft); color: #775113; }
.status-dnf { background: var(--danger-soft); color: var(--danger-ink); }
.status-owned { background: #ece5f1; color: #5d3c72; }
.empty-state { padding: 64px 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 70%, transparent); text-align: center; }
.empty-state-icon { width: 52px; height: 52px; display: grid; margin: 0 auto; place-items: center; border-radius: 50%; background: var(--wash); color: var(--brand); }
.empty-state-icon svg { width: 26px; height: 26px; }
.empty-state h2 { margin-bottom: 4px; }
.empty-state p { color: var(--ink-soft); }

/* Book detail */
.book-detail { margin-top: var(--space-5); }
.book-detail-header {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: start;
    gap: clamp(30px, 5vw, 64px);
    padding: var(--space-6) 0 var(--space-7);
    border-bottom: 1px solid var(--line);
}
.book-detail-cover-column { width: 190px; }
.detail-cover { width: 190px; display: block; aspect-ratio: 2 / 3; border-radius: var(--radius-md); box-shadow: var(--shadow-cover); }
.detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.external-link { color: var(--ink-soft); font-size: .74rem; text-decoration: none; }
.external-link:hover { color: var(--brand); text-decoration: underline; }
.book-detail-summary { max-width: 760px; padding-top: var(--space-3); }
.book-detail-summary .page-title { max-width: 760px; margin-top: var(--space-3); font-size: clamp(3rem, 6.5vw, 5.8rem); }
.detail-subtitle { max-width: 650px; margin: var(--space-4) 0 0; color: var(--ink-soft); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; }
.byline { margin: var(--space-4) 0 0; color: var(--ink); font-size: 1rem; }
.book-bibliography { display: flex; flex-wrap: wrap; gap: 5px 0; margin: var(--space-3) 0 0; color: var(--ink-soft); font-size: .78rem; }
.book-bibliography span + span::before { margin-inline: 8px; content: "·"; }
.description-box { margin: var(--space-5) 0 0; padding: var(--space-4) 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.description-box summary { width: fit-content; color: var(--brand); font-size: .82rem; font-weight: 720; cursor: pointer; }
.description-box p { margin-bottom: 0; color: var(--ink-soft); font-size: .9rem; }
.book-detail-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: clamp(32px, 6vw, 72px); padding-top: var(--space-7); }
.book-detail-main { min-width: 0; }
.book-detail-primary-card { margin: 0; padding: clamp(22px, 4vw, 32px); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: var(--radius-md); box-shadow: none; }
.book-detail-primary-card .panel-heading { margin-bottom: var(--space-4); }
.book-detail-primary-card h2, .reading-history-section h2, .book-detail-sidebar h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.02em; }
.reading-current-meta { color: var(--ink-soft); }
.book-detail-primary-card .button { justify-self: start; }
.status-form { display: grid; grid-template-columns: minmax(180px, 280px); margin-top: var(--space-4); }
.start-reading-form {
    display: grid;
    grid-template-columns: minmax(0, 190px) auto;
    align-items: end;
    justify-content: start;
    gap: 10px;
}
.start-reading-form label { min-width: 0; display: grid; gap: 7px; font-size: .84rem; font-weight: 720; }
.start-reading-form input { min-width: 0; }
.start-reading-form button { white-space: nowrap; }
.reading-history-section { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.reading-history-heading { margin-bottom: var(--space-4); }
.reading-history { display: grid; gap: 0; border-top: 1px solid var(--line); }
.reading-history-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 15px 4px; color: inherit; text-decoration: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.reading-history-row:hover { border-color: var(--line); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.row-arrow { color: var(--brand); }
.log-reading-panel { margin-top: var(--space-5); padding-top: 0; border: 0; }
.log-reading-panel > summary { width: fit-content; }
.log-reading-panel form { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
.book-detail-sidebar { display: grid; gap: var(--space-6); }
.library-details-card { margin: 0; padding: 22px; border-radius: var(--radius-md); box-shadow: none; }
.ownership-options-stacked { display: grid; gap: 9px; }
.ownership-options-stacked .check-row { padding: 9px 10px; border-radius: var(--radius-sm); background: var(--wash); }
.library-details-card .form-save-row { min-height: 24px; }
.book-tools-card { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.book-tools-card h2 { font-size: 1.25rem; }
.book-tools-card .metadata-actions { margin-top: var(--space-4); }
.book-tools-card .metadata-action-button { width: 100%; }
.book-tools-card .text-button { min-height: auto; }
.book-detail-danger { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line); }

/* Home dashboard */
.dashboard-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-7);
}
.dashboard-heading > div { max-width: 790px; }
.dashboard-heading .page-title { font-size: clamp(2.8rem, 5.8vw, 5.25rem); }
.dashboard-heading .lede { max-width: 660px; margin: var(--space-4) 0 0; }
.dashboard-heading-action { flex: 0 0 auto; }
.dashboard-heading-actions { max-width: none !important; display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: end; gap: 8px; }
.dashboard-request-alert {
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
    padding: 15px 17px;
    border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    box-shadow: none;
}
.dashboard-request-alert:hover { border-color: var(--brand); transform: none; box-shadow: none; }
.dashboard-alert-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-raised); color: var(--brand); }
.dashboard-alert-icon svg { width: 21px; height: 21px; }
.activity-recommendation-note { margin: 10px 0 0; padding: 0 12px 0 76px; color: var(--ink-soft); font-family: var(--font-serif); font-size: .88rem; line-height: 1.55; }
.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: clamp(42px, 6vw, 76px);
}
.dashboard-primary { min-width: 0; display: grid; gap: var(--space-8); }
.dashboard-section { min-width: 0; }
.dashboard-section-heading, .dashboard-rail-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.dashboard-section-heading h2, .dashboard-rail-heading h2 { margin: 0; font-size: 1.7rem; letter-spacing: -.025em; }
.dashboard-section-heading p, .dashboard-rail-heading p { margin: 4px 0 0; color: var(--ink-soft); font-size: .82rem; }
.dashboard-section-heading > a, .dashboard-rail-heading > a { flex: 0 0 auto; font-size: .78rem; }
.dashboard-book-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dashboard-reading-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper-raised);
}
.dashboard-reading-card:hover, .dashboard-reading-card:focus-visible { border-color: color-mix(in srgb, var(--brand) 48%, var(--line)); box-shadow: 0 10px 24px rgb(35 39 33 / 7%); }
.dashboard-reading-cover { width: 64px; aspect-ratio: 2 / 3; overflow: hidden; display: block; border-radius: var(--radius-sm); background: var(--wash); box-shadow: 0 5px 12px rgb(35 39 33 / 12%); }
.dashboard-reading-cover img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-book-copy { min-width: 0; display: grid; align-content: center; justify-items: start; }
.dashboard-book-copy strong { width: 100%; overflow: hidden; margin-top: 8px; font-family: var(--font-display); font-size: .98rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-book-copy small { width: 100%; overflow: hidden; margin-top: 3px; color: var(--ink-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-book-date { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; color: var(--ink-soft); font-size: .66rem; }
.dashboard-book-date .inline-icon { width: 13px; height: 13px; }
.dashboard-empty {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
}
.dashboard-empty .empty-state-icon { margin: 0; }
.dashboard-empty h3 { margin: 0; font-size: 1.1rem; }
.dashboard-empty p { margin: 4px 0 0; color: var(--ink-soft); font-size: .82rem; }
.dashboard-activity { padding-top: var(--space-6); border-top: 1px solid var(--line); }
.dashboard-activity-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.dashboard-activity-item { padding: var(--space-5) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.dashboard-activity-meta { margin-bottom: 12px; }
.dashboard-activity-meta time { color: var(--ink-soft); font-size: .7rem; }
.dashboard-activity-book { grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 13px; padding: 0 0 0 42px; border: 0; border-radius: 0; background: transparent; }
.dashboard-activity-book:hover, .dashboard-activity-book:focus-visible { background: transparent; color: var(--brand); }
.dashboard-activity-book .activity-cover { width: 48px; }
.dashboard-activity-book .activity-cover img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-activity-book .activity-book-copy strong { font-family: var(--font-display); font-size: 1rem; }
.dashboard-activity-book .activity-arrow { width: 18px; height: 18px; color: var(--brand); }
.dashboard-goal-activity { grid-template-columns: 48px minmax(0, 1fr) 18px; }
.dashboard-goal-activity-mark { width: 48px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-family: var(--font-display); font-size: 1.1rem; font-weight: 680; }
.activity-group { margin: 12px 0 0 103px; color: var(--ink-soft); font-size: .78rem; }
.activity-group summary { width: fit-content; color: var(--brand); font-weight: 720; cursor: pointer; }
.activity-group ul { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.activity-group a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.activity-group a:hover { color: var(--brand); }
.home-feed-pagination a { display: inline-flex; align-items: center; gap: 5px; }
.dashboard-rail { display: grid; gap: var(--space-7); padding-left: var(--space-6); border-left: 1px solid var(--line); }
.dashboard-rail-section { min-width: 0; }
.dashboard-year-card { overflow: hidden; padding: var(--space-5); border-radius: var(--radius-md); background: var(--brand-deep); color: #f5f1e6; }
.dashboard-year-card h2, .dashboard-year-card .section-label { color: #f5f1e6; }
.dashboard-year-card .section-label { margin-bottom: 3px; opacity: .65; }
.dashboard-year-card .dashboard-rail-heading a { color: #f5f1e6; }
.dashboard-year-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgb(245 241 230 / 22%); }
.dashboard-year-stats a { padding: 20px 12px 0 0; color: #f5f1e6; border: 0; background: transparent; }
.dashboard-year-stats a + a { padding-left: 16px; border-left: 1px solid rgb(245 241 230 / 22%); }
.dashboard-year-stats strong {
    display: block;
    overflow: visible;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.3vw, 2.1rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
}
.dashboard-year-stats span { display: block; color: rgb(245 241 230 / 68%); white-space: nowrap; }
.dashboard-goal-summary { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(245 241 230 / 22%); }
.dashboard-goal-summary div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dashboard-goal-summary span, .dashboard-goal-summary strong { font-size: .72rem; }
.dashboard-goal-summary strong { color: #f5f1e6; }
.dashboard-goal-summary p { margin: 0 0 8px; color: rgb(245 241 230 / 72%); font-size: .76rem; line-height: 1.45; }
.dashboard-goal-summary progress { width: 100%; height: 7px; display: block; margin: 9px 0; border: 0; border-radius: 999px; background: rgb(245 241 230 / 20%); accent-color: #f5f1e6; }
.dashboard-goal-summary progress::-webkit-progress-bar { border-radius: 999px; background: rgb(245 241 230 / 20%); }
.dashboard-goal-summary progress::-webkit-progress-value { border-radius: 999px; background: #f5f1e6; }
.dashboard-goal-summary progress::-moz-progress-bar { border-radius: 999px; background: #f5f1e6; }
.dashboard-goal-summary > a { display: inline-flex; align-items: center; gap: 4px; color: #f5f1e6; font-size: .72rem; font-weight: 740; }
.dashboard-up-next-list { display: grid; border-top: 1px solid var(--line); }
.dashboard-up-next-book {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.dashboard-up-next-cover { width: 38px; aspect-ratio: 2 / 3; overflow: hidden; display: block; border-radius: 3px; background: var(--wash); }
.dashboard-up-next-cover img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-up-next-book strong, .dashboard-up-next-book small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-up-next-book strong { font-family: var(--font-display); font-size: .9rem; }
.dashboard-up-next-book small { margin-top: 2px; color: var(--ink-soft); font-size: .68rem; }
.dashboard-up-next-book:hover { color: var(--brand); }
.dashboard-rail-empty { padding: var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.dashboard-rail-empty p { margin: 0 0 6px; color: var(--ink-soft); font-size: .8rem; }
.dashboard-quick-links { gap: 0; border-top: 1px solid var(--line); }
.dashboard-quick-links > a {
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}
.dashboard-quick-links > a:hover { background: transparent; color: var(--brand); }
.dashboard-quick-icon { width: 19px; height: 19px; color: var(--brand); }
.dashboard-quick-links strong { font-size: .78rem; }
.dashboard-quick-links small { font-size: .66rem; }

/* Search and add */
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); }
.catalog-heading > div:first-child { max-width: 760px; }
.catalog-heading-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: end; gap: 10px 18px; padding-bottom: 4px; }
.catalog-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 14px 34px rgb(35 39 33 / 7%); }
.catalog-search-field { position: relative; }
.catalog-search-icon { position: absolute; top: 50%; left: 17px; z-index: 1; width: 22px; height: 22px; color: var(--ink-soft); transform: translateY(-50%); pointer-events: none; }
.catalog-search input { height: 54px; padding-left: 50px; border: 0; background: transparent; box-shadow: none; font-size: 1.04rem; }
.catalog-search input:focus { outline: 0; box-shadow: none; }
.catalog-search button { min-width: 110px; }
.catalog-search-meta { min-height: 28px; display: flex; justify-content: space-between; gap: var(--space-4); padding: 8px 10px 0; color: var(--ink-soft); font-size: .72rem; }
.catalog-search-meta p { margin: 0; }
.catalog-results { margin-top: var(--space-5); }
.catalog-intro { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: var(--space-5); max-width: 720px; margin: var(--space-7) auto 0; padding: var(--space-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.catalog-intro-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.catalog-intro-icon svg { width: 25px; height: 25px; }
.catalog-intro h2 { margin: 0; font-size: 1.4rem; }
.catalog-intro p { margin: 5px 0 0; color: var(--ink-soft); font-size: .84rem; }
.catalog-results-list { gap: 0; border-top: 1px solid var(--line); }
.catalog-edition-group { border-bottom: 1px solid var(--line); }
.catalog-result {
    min-width: 0;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 116px;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) 4px;
    color: var(--ink);
    text-decoration: none;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.catalog-result:hover, .catalog-result:focus-visible { border: 0; background: color-mix(in srgb, var(--paper) 72%, transparent); box-shadow: none; }
.catalog-result-cover { width: 92px; aspect-ratio: 2 / 3; overflow: hidden; display: block; border-radius: var(--radius-sm); background: var(--wash); box-shadow: 0 6px 14px rgb(35 39 33 / 12%); }
.catalog-result-cover img { width: 100%; height: 100%; object-fit: cover; }
.catalog-result-copy { min-width: 0; display: grid; justify-items: start; }
.catalog-result-state:empty { display: none; }
.catalog-result-title { margin-top: 5px; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.catalog-result-copy .subtitle-line { margin-top: 3px; color: var(--ink-soft); font-family: var(--font-display); font-size: .88rem; }
.catalog-result-author { margin-top: 5px; font-size: .82rem; }
.catalog-result-metadata { display: flex; flex-wrap: wrap; gap: 3px 0; margin-top: 8px; color: var(--ink-soft); font-size: .67rem; }
.catalog-result-metadata span + span::before { margin-inline: 7px; content: "·"; }
.catalog-result .result-description { max-width: 720px; margin: 10px 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.55; }
.catalog-result-action { display: inline-flex; align-items: center; justify-content: end; gap: 6px; color: var(--brand); font-size: .76rem; font-weight: 750; }
.catalog-alternates { margin: 0 0 var(--space-4) 116px; border: 0; }
.catalog-alternates > summary { width: fit-content; color: var(--brand); font-size: .75rem; font-weight: 720; }
.catalog-alternate-list { margin-top: 8px; padding-left: var(--space-4); border-left: 1px solid var(--line); }
.catalog-result-alternate { grid-template-columns: 62px minmax(0, 1fr) 116px; padding-block: var(--space-4); }
.catalog-result-alternate .catalog-result-cover { width: 62px; }
.catalog-result-alternate .result-description { display: none; }
.catalog-empty { margin-top: var(--space-7); }
.catalog-preview-workspace { display: grid; grid-template-columns: minmax(0, 760px) minmax(220px, 1fr); align-items: start; gap: clamp(30px, 5vw, 60px); padding-top: var(--space-7); }
.catalog-preview-workspace .search-book-add-card { width: 100%; max-width: none; padding: clamp(24px, 3vw, 32px); }
.search-book-add-card .workflow-card-heading { padding-bottom: var(--space-4); }
.search-book-add-form { max-width: none; gap: var(--space-5); padding-top: var(--space-5); }
.library-choice-grid { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr); align-items: start; gap: var(--space-5); }
.ownership-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ownership-fieldset legend { margin-bottom: 7px; font-size: .84rem; font-weight: 720; }
.ownership-choice-row { display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 8px; }
.ownership-choice-row .check-row { min-width: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--wash); }
.ownership-fieldset .check-row input { width: 18px; min-height: 18px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
.workflow-note { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.workflow-note-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.workflow-note-icon svg { width: 20px; height: 20px; }
.workflow-note h2 { margin: 0; font-size: 1.1rem; }
.workflow-note p { margin: 5px 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.55; }

/* Goodreads import and long-running workflow states */
.import-heading { margin-top: var(--space-5); }
.import-heading .lede { max-width: 720px; }
.import-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: start; gap: clamp(30px, 5vw, 64px); }
.import-upload-card { width: 100%; }
.import-upload-form { gap: var(--space-5); padding-top: var(--space-5); }
.import-file-field {
    min-width: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 4px 14px;
    padding: var(--space-5);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.import-file-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent); }
.import-file-icon { width: 46px; height: 46px; display: grid; grid-row: span 2; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.import-file-icon svg { width: 21px; height: 21px; }
.import-file-field strong, .import-file-field small { display: block; }
.import-file-field strong { font-size: .88rem; }
.import-file-field small { margin-top: 3px; color: var(--ink-soft); font-size: .72rem; font-weight: 500; }
.import-file-field input[type="file"] { min-width: 0; grid-column: 2; margin-top: 10px; padding: 8px; border-radius: var(--radius-sm); background: var(--paper-raised); font-size: .75rem; }
.import-file-field input[type="file"]::file-selector-button { min-height: 38px; margin-right: 10px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; font-weight: 720; cursor: pointer; }
.import-upload-action { display: flex; align-items: center; gap: var(--space-4); }
.import-upload-action > span { max-width: 270px; color: var(--ink-soft); font-size: .7rem; line-height: 1.45; }
.import-explanation { padding-top: 6px; }
.import-explanation h2 { max-width: 390px; margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; }
.import-steps { display: grid; gap: 0; margin: var(--space-6) 0 0; padding: 0; list-style: none; counter-reset: none; }
.import-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.import-steps li > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--brand); font-family: var(--font-display); font-size: .8rem; font-weight: 700; }
.import-steps p { margin: 0; }
.import-steps strong, .import-steps small { display: block; }
.import-steps strong { font-size: .8rem; }
.import-steps small { margin-top: 3px; color: var(--ink-soft); font-size: .72rem; line-height: 1.5; }
.import-privacy-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; margin-top: var(--space-5); padding: 13px 14px; border-left: 3px solid var(--gold); background: var(--warning-soft); color: var(--ink-soft); font-size: .72rem; }
.import-privacy-note .inline-icon { color: var(--gold); }
.import-privacy-note p { margin: 0; }

.import-progress-card { width: min(860px, 100%); margin: var(--space-5) auto 0; }
.import-progress-heading { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: var(--space-4); }
.import-progress-heading h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 3.8rem); line-height: 1; }
.import-progress-heading .lede { margin: 9px 0 0; font-size: .86rem; }
.import-state-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; }
.import-state-icon svg { width: 25px; height: 25px; }
.import-state-running { background: var(--info-soft); color: #315872; }
.import-state-complete { background: var(--brand-soft); color: var(--brand); }
.import-state-warning { background: var(--warning-soft); color: var(--gold); }
.import-progress-track { position: relative; margin-top: var(--space-6); }
.import-progress-track progress { width: 100%; height: 12px; display: block; overflow: hidden; border: 0; border-radius: 999px; background: var(--wash); accent-color: var(--brand); }
.import-progress-track progress::-webkit-progress-bar { border-radius: 999px; background: var(--wash); }
.import-progress-track progress::-webkit-progress-value { border-radius: 999px; background: var(--brand); }
.import-progress-track progress::-moz-progress-bar { border-radius: 999px; background: var(--brand); }
.import-progress-count { margin: 7px 0 0; color: var(--ink-soft); font-size: .72rem; font-variant-numeric: tabular-nums; }
.import-progress-count strong { color: var(--ink); }
.import-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--space-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.import-summary > div { min-width: 0; display: grid; gap: 5px; padding: 15px 18px; border-right: 1px solid var(--line); }
.import-summary > div:first-child { padding-left: 0; }
.import-summary > div:last-child { padding-right: 0; border-right: 0; }
.import-summary span { color: var(--ink-soft); font-size: .66rem; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.import-summary strong { grid-row: 1; font-family: var(--font-display); font-size: 1.85rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.import-summary [data-outcome="failed"] strong { color: var(--danger-ink); }
.import-progress-card [data-import-next-form] button { display: inline-flex; align-items: center; justify-content: center; }
.import-progress-card [data-import-next-form] button:disabled { cursor: wait; opacity: .68; }
.import-interruption, .import-completion-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin-top: var(--space-5); padding: 14px 16px; font-size: .78rem; }
.import-interruption { border-left: 3px solid var(--danger-ink); background: var(--danger-soft); color: var(--danger-ink); }
.import-interruption strong, .import-completion-note strong { display: block; }
.import-interruption p, .import-completion-note p { margin: 3px 0 0; color: var(--ink-soft); }
.import-complete { margin-top: var(--space-5); }
.import-match-note { margin: 0; color: var(--ink-soft); font-size: .78rem; }
.import-match-note strong { color: var(--ink); }
.import-completion-warning { border-left: 3px solid var(--gold); background: var(--warning-soft); }
.import-completion-warning > .inline-icon { color: var(--gold); }
.import-failures { display: grid; gap: 5px; margin: 10px 0 0; padding-left: 18px; color: var(--ink-soft); }
.import-complete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: var(--space-5); }
.import-recent { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.import-recent-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.import-recent-heading h2 { margin: 0; font-size: 1.3rem; }
.import-recent-heading > span { color: var(--ink-soft); font-size: .66rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.import-results-empty { margin: var(--space-4) 0 0; padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .78rem; text-align: center; }
.import-recent ul { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.import-result { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.import-result:last-child { border-bottom: 0; }
.import-result-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: .72rem; font-weight: 800; }
.import-result-skipped .import-result-mark { background: var(--wash); color: var(--ink-soft); }
.import-result-failed .import-result-mark { background: var(--danger-soft); color: var(--danger-ink); }
.import-result p { min-width: 0; margin: 0; }
.import-result p strong, .import-result p span { display: block; overflow-wrap: anywhere; }
.import-result p strong { font-family: var(--font-display); font-size: .95rem; }
.import-result p span { margin-top: 2px; color: var(--ink-soft); font-size: .72rem; }
.import-result > small { padding-top: 3px; color: var(--ink-soft); font-size: .65rem; font-weight: 750; white-space: nowrap; }
.import-result-failed > small { color: var(--danger-ink); }

/* Editing workflows */
.workflow-page-heading { max-width: 880px; margin-top: var(--space-5); }
.workflow-page-heading .page-title { font-size: clamp(2.8rem, 5.5vw, 4.8rem); }
.workflow-card {
    width: min(880px, 100%);
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper-raised);
    box-shadow: 0 14px 38px rgb(35 39 33 / 6%);
}
.workflow-editor { gap: var(--space-6); }
.workflow-card-heading { padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.workflow-card-heading h2 { margin: 0; font-size: 1.65rem; }
.workflow-card-heading p { margin: 6px 0 0; color: var(--ink-soft); font-size: .84rem; }
.workflow-editor .workflow-fieldset {
    min-width: 0;
    margin: 0;
    padding: var(--space-5) 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
}
.workflow-editor .workflow-fieldset:first-of-type { padding-top: 0; border-top: 0; }
.workflow-editor .workflow-fieldset > legend { padding: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 650; }
.fieldset-description { margin: 5px 0 var(--space-5); color: var(--ink-soft); font-size: .8rem; }
.metadata-form-grid { gap: var(--space-4); }
.metadata-form-grid label, .cover-source-grid label { min-width: 0; }
.metadata-form-grid textarea { resize: vertical; }
.cover-editor { display: block; }
.cover-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cover-upload-field input[type="file"] { width: 100%; padding: 8px; }
.current-cover {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--wash);
}
.current-cover img { width: 64px; max-height: 96px; box-shadow: 0 5px 12px rgb(35 39 33 / 12%); }
.current-cover strong, .current-cover small { display: block; }
.current-cover small { margin-top: 4px; color: var(--ink-soft); font-size: .72rem; }
.current-cover .danger-button { align-self: center; background: transparent; color: var(--danger-ink); }
.ownership-fieldset-nested { padding: 0 !important; border: 0 !important; }
.workflow-subsection { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 65%, transparent); }
.workflow-subsection-heading { margin-bottom: var(--space-5); }
.workflow-subsection-heading h3 { margin: 0; font-size: 1.2rem; }
.workflow-subsection-heading p { margin: 5px 0 0; color: var(--ink-soft); font-size: .78rem; }
.workflow-form-actions { margin-top: 0; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.workflow-form-actions button, .workflow-save-row button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.session-context {
    width: min(880px, 100%);
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5);
    margin: var(--space-5) 0 var(--space-6);
}
.session-context-cover { width: 86px; aspect-ratio: 2 / 3; overflow: hidden; display: block; border-radius: var(--radius-sm); background: var(--wash); box-shadow: var(--shadow-cover); }
.session-context-cover img { width: 100%; height: 100%; object-fit: cover; }
.session-context-copy .page-title { margin: 9px 0 0; font-size: clamp(2.2rem, 5vw, 4rem); }
.session-context-copy > p { margin: 7px 0 0; color: var(--ink-soft); }
.session-editor { width: min(880px, 100%); }
.session-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.session-state-grid label { min-width: 0; }
.session-reflection-section > label { margin-top: var(--space-5); }
.workflow-save-row { min-height: 48px; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.session-danger-zone { width: min(880px, 100%); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }

/* Profiles and account */
.profile-page { min-width: 0; }
.profile-hero {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
    gap: clamp(26px, 4vw, 48px);
    margin: 0 0 var(--space-7);
    padding: var(--space-5) 0 var(--space-7);
    border-bottom: 1px solid var(--line);
}
.profile-photo-control { position: relative; width: 148px; }
.profile-photo-control > summary, .profile-name-editor > summary, .profile-highlight-picker > summary { list-style: none; }
.profile-photo-control > summary::-webkit-details-marker, .profile-name-editor > summary::-webkit-details-marker, .profile-highlight-picker > summary::-webkit-details-marker { display: none; }
.profile-avatar {
    position: relative;
    width: 148px;
    aspect-ratio: 1;
    overflow: visible;
    display: grid;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: white;
    box-shadow: none;
    cursor: pointer;
}
.profile-avatar-media { width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; border: 5px solid var(--paper-raised); border-radius: 50%; background: var(--brand); box-shadow: 0 10px 28px rgb(35 39 33 / 13%); }
.profile-avatar-media img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-media .user-avatar-initials { font-family: var(--font-display); font-size: 3.2rem; font-weight: 600; letter-spacing: -.07em; }
.profile-avatar-readonly { cursor: default; }
.profile-avatar-action {
    position: absolute;
    inset: 5px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(25 58 43 / 68%);
    color: white;
    opacity: 0;
    transition: opacity .15s ease;
}
.profile-avatar-action svg { width: 28px; height: 28px; }
.profile-avatar:hover .profile-avatar-action, .profile-avatar:focus-visible .profile-avatar-action, .profile-photo-control[open] .profile-avatar-action { opacity: 1; }
.profile-avatar-add { position: absolute; right: 4px; bottom: 8px; width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid var(--paper); border-radius: 50%; background: var(--brand-deep); color: white; }
.profile-avatar-add svg { width: 18px; height: 18px; }
.disclosure-panel { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: var(--shadow-lift); }
.profile-photo-popover { position: absolute; top: calc(100% + 12px); left: 0; z-index: 30; width: min(380px, calc(100vw - 48px)); }
.disclosure-panel-heading { margin-bottom: var(--space-4); }
.disclosure-panel-heading strong, .disclosure-panel-heading span { display: block; }
.disclosure-panel-heading strong { font-family: var(--font-display); font-size: 1.2rem; }
.disclosure-panel-heading span { margin-top: 3px; color: var(--ink-soft); font-size: .76rem; }
.profile-photo-form button { display: inline-flex; align-items: center; gap: 7px; justify-self: start; }
.profile-photo-remove { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.profile-photo-remove .danger-link { min-height: auto; background: transparent; color: var(--danger-ink); }
.profile-name-row { display: flex; align-items: center; gap: 12px; }
.profile-name-row .page-title { font-size: clamp(3rem, 6.8vw, 5.7rem); }
.profile-name-editor { position: relative; flex: 0 0 auto; }
.profile-edit-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-raised); color: var(--brand); cursor: pointer; }
.profile-edit-icon svg { width: 17px; height: 17px; }
.profile-edit-icon:hover, .profile-edit-icon:focus-visible, .profile-name-editor[open] .profile-edit-icon { border-color: var(--brand); background: var(--brand-soft); }
.profile-name-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: min(340px, calc(100vw - 48px)); }
.profile-handle { margin: 11px 0 0; color: var(--brand); font-size: .92rem; font-weight: 760; }
.profile-private-email { margin: 5px 0 0; color: var(--ink-soft); font-size: .8rem; }
.profile-private-email span { margin-left: 5px; padding: 2px 6px; border-radius: 999px; background: var(--wash); font-size: .62rem; font-weight: 760; text-transform: uppercase; letter-spacing: .06em; }
.profile-joined { margin: 8px 0 0; color: var(--ink-soft); font-size: .78rem; }
.profile-friendship-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: var(--space-5); }
.profile-friendship-control form, .friend-actions form { margin: 0; }
.profile-friendship-control button { display: inline-flex; align-items: center; gap: 7px; }
.friend-request-copy { flex-basis: 100%; color: var(--ink-soft); font-size: .84rem; }
.friend-state { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-size: .8rem; font-weight: 780; }
.muted-state { color: var(--ink-soft); }
.mutual-friends-copy { margin: 8px 0 0; color: var(--ink-soft); font-size: .76rem; }
.profile-workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: start; gap: clamp(40px, 6vw, 76px); }
.profile-summary-rail { display: grid; gap: var(--space-6); padding-right: var(--space-6); border-right: 1px solid var(--line); }
.profile-main { min-width: 0; display: grid; gap: var(--space-8); }
.profile-section-heading { margin-bottom: var(--space-5); }
.profile-section-heading h2 { margin: 0; font-size: 1.65rem; letter-spacing: -.025em; }
.profile-section-heading p { margin: 5px 0 0; color: var(--ink-soft); font-size: .78rem; }
.profile-snapshot-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.profile-snapshot-heading h2 { font-size: 1.35rem; }
.profile-snapshot-heading a { color: var(--brand); font-size: .73rem; font-weight: 720; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.profile-stat { min-width: 0; padding: 17px 14px; color: var(--ink); text-decoration: none; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
a.profile-stat:hover, a.profile-stat:focus-visible { background: var(--brand-soft); box-shadow: none; transform: none; }
.profile-stat strong, .profile-stat span { display: block; }
.profile-stat strong { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1; }
.profile-stat span { color: var(--ink-soft); font-size: .67rem; font-weight: 680; }
.profile-snapshot > .field-note { margin-top: 10px; }
.profile-goal { padding: var(--space-5); border-radius: var(--radius-sm); background: var(--brand-soft); }
.profile-goal .profile-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.profile-goal .profile-section-heading h2 { font-size: 1.15rem; }
.profile-goal .profile-section-heading > strong { color: var(--brand); font-family: var(--font-display); font-size: 1.25rem; }
.profile-goal progress { width: 100%; height: 8px; display: block; border: 0; border-radius: 999px; accent-color: var(--brand); }
.profile-goal .text-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: .72rem; }
.profile-account-actions { display: grid; gap: 0; margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--line); }
.profile-account-link { display: grid; grid-template-columns: 23px minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 11px 0; color: var(--ink); text-decoration: none; }
.profile-account-link > svg { width: 20px; height: 20px; color: var(--brand); }
.profile-account-link strong, .profile-account-link small { display: block; }
.profile-account-link strong { font-size: .8rem; }
.profile-account-link small { margin-top: 2px; color: var(--ink-soft); font-size: .65rem; }
.profile-logout-form { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.profile-logout-button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--danger-ink); font-size: .76rem; }
.profile-logout-button svg { width: 17px; height: 17px; }
.profile-highlight { margin: 0; }
.profile-highlight-picker, .highlighted-book-profile-link, .highlighted-book-readonly { width: 100%; }
.highlighted-book-card { position: relative; width: 100%; display: grid; grid-template-columns: 104px minmax(0, 1fr) 18px; align-items: center; gap: var(--space-5); padding: var(--space-5); color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); cursor: pointer; }
.highlighted-book-card:hover, .highlighted-book-card:focus-visible { border-color: color-mix(in srgb, var(--brand) 48%, var(--line)); box-shadow: 0 10px 26px rgb(35 39 33 / 7%); transform: none; }
.highlighted-book-cover { width: 104px; aspect-ratio: 2 / 3; overflow: hidden; display: block; border-radius: var(--radius-sm); background: var(--wash); box-shadow: var(--shadow-cover); }
.highlighted-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.highlighted-book-copy, .highlighted-book-title, .highlighted-book-author { display: block; }
.highlighted-book-title { margin: 10px 0 4px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 620; }
.highlighted-book-author { margin: 0 0 13px; color: var(--ink-soft); font-size: .82rem; }
.highlighted-book-link, .highlighted-book-view { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-size: .75rem; font-weight: 740; }
.highlight-edit-icon { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.highlight-edit-icon svg { width: 16px; height: 16px; }
.highlighted-book-card.profile-highlight-empty { grid-template-columns: 54px minmax(0, 1fr); min-height: 124px; }
.profile-highlight-empty .highlighted-book-title { margin: 0 0 5px; }
.profile-highlight-empty .highlighted-book-author { margin: 0; }
.highlight-add-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.highlight-add-icon svg { width: 22px; height: 22px; }
.profile-highlight-popover { margin-top: 10px; box-shadow: none; }
.highlight-book-picker { display: grid; gap: var(--space-4); }
.highlight-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.highlight-book-picker label { display: grid; gap: 7px; font-weight: 700; }
.highlight-book-picker input, .highlight-book-picker select { font-size: 16px; font-weight: 400; }
.highlight-book-picker select { min-height: 190px; }
.highlighted-book-view { margin-top: var(--space-4); }
.profile-recent-reads { margin: 0; }
.profile-recent-grid { width: 100%; display: grid; gap: 0; border-top: 1px solid var(--line); }
.profile-recent-card { min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; align-items: center; gap: 13px; padding: 12px 4px; color: var(--ink); text-decoration: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
a.profile-recent-card:hover, a.profile-recent-card:focus-visible { background: color-mix(in srgb, var(--paper) 72%, transparent); box-shadow: none; transform: none; }
.profile-recent-cover { width: 46px; aspect-ratio: 2 / 3; overflow: hidden; display: block; border-radius: 3px; background: var(--wash); }
.profile-recent-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-recent-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.profile-recent-book { min-width: 0; }
.profile-recent-book strong, .profile-recent-book small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-recent-book strong { margin: 0 0 3px; font-family: var(--font-display); font-size: .98rem; font-weight: 620; }
.profile-recent-book small { color: var(--ink-soft); font-size: .74rem; }
.profile-recent-meta { display: grid; justify-items: end; gap: 3px; color: var(--ink-soft); font-size: .68rem; white-space: nowrap; }
.profile-recent-empty { width: 100%; }

.settings-heading { max-width: 780px; margin: var(--space-5) 0 var(--space-7); }
.settings-heading .page-title { font-size: clamp(3rem, 6vw, 5rem); }
.settings-heading .lede { max-width: 650px; margin: var(--space-4) 0 0; }
.settings-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; gap: clamp(34px, 5vw, 64px); }
.settings-index { position: sticky; top: 96px; display: grid; border-top: 1px solid var(--line); }
.settings-index a { display: flex; align-items: center; gap: 9px; padding: 12px 3px; color: var(--ink-soft); font-size: .76rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line); }
.settings-index a:hover { color: var(--brand); }
.settings-index svg { width: 18px; height: 18px; }
.settings-sections { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: start; gap: var(--space-5); }
.settings-card { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: none; scroll-margin-top: 24px; }
.settings-card-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.settings-card-heading h2 { margin: 0; font-size: 1.45rem; }
.settings-card-heading p { margin: 5px 0 0; color: var(--ink-soft); font-size: .78rem; }
.settings-card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.settings-card-icon svg { width: 20px; height: 20px; }
.settings-form { margin-top: var(--space-5); }
.stack-form .settings-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; }
.settings-choice input { width: auto; margin-top: 3px; }
.settings-choice strong, .settings-choice small { display: block; }
.settings-choice strong { font-size: .84rem; }
.settings-choice small { margin-top: 4px; color: var(--ink-soft); font-weight: 500; line-height: 1.45; }
.settings-form-actions { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.settings-form-actions button { display: inline-flex; align-items: center; gap: 7px; }
.settings-danger-card { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--danger-ink) 42%, var(--line)); }
.settings-danger-icon { background: var(--danger-soft); color: var(--danger-ink); }
.settings-danger-copy { max-width: 68ch; }
.settings-delete-form { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--space-4); }
.settings-delete-form .settings-form-actions { grid-column: 1 / -1; }
.settings-confirmation-note { display: block; margin-top: 5px; color: var(--ink-soft); }
.settings-delete-button { border-color: var(--danger-ink); background: var(--danger-ink); color: white; }
.settings-delete-button:hover { background: #6f2421; }

/* Friends and social */
.friends-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); margin: 0 0 var(--space-7); }
.friends-heading > div:first-child { max-width: 760px; }
.friends-heading .page-title { font-size: clamp(3rem, 6vw, 5.2rem); }
.friends-heading .lede { margin: var(--space-4) 0 0; }
.friends-heading-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: end; gap: 8px; }
.friends-heading-actions form { margin: 0; }
.friends-heading-actions button, .friends-heading-actions .button { display: inline-flex; align-items: center; gap: 7px; }
.friend-invite-panel { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); margin: 0 0 var(--space-7); padding: var(--space-5); border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: var(--radius-md); background: var(--brand-soft); box-shadow: none; }
.friend-invite-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-raised); color: var(--brand); }
.friend-invite-icon svg { width: 21px; height: 21px; }
.friend-invite-content header h2 { margin: 0; font-size: 1.25rem; }
.friend-invite-content header p { margin: 4px 0 var(--space-4); color: var(--ink-soft); font-size: .78rem; }
.friend-invite-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.friend-invite-copy-row input { min-width: 0; background: var(--paper-raised); }
.friend-invite-copy-status { margin: 7px 0 0; color: var(--ink-soft); font-size: .68rem; }
.friends-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: start; gap: clamp(42px, 6vw, 76px); }
.friends-primary, .friends-attention { min-width: 0; }
.friends-attention { display: grid; gap: var(--space-7); padding-left: var(--space-6); border-left: 1px solid var(--line); }
.friends-section { margin: 0; scroll-margin-top: 90px; }
.social-section-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.social-section-heading h2 { margin: 0; font-size: 1.65rem; }
.social-section-heading p { margin: 4px 0 0; color: var(--ink-soft); font-size: .76rem; }
.heading-count { flex: 0 0 auto; min-width: 32px; min-height: 32px; display: grid; place-items: center; padding: 4px 8px; border-radius: 999px; background: var(--wash); color: var(--ink-soft); font-size: .72rem; font-weight: 760; }
.attention-count { background: var(--brand-soft); color: var(--brand); }
.friend-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.friend-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.friend-identity { min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.friend-identity > span:last-child { min-width: 0; }
.friend-identity strong, .friend-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-identity strong { font-family: var(--font-ui); font-size: .84rem; font-weight: 760; }
.friend-identity small { margin-top: 2px; color: var(--ink-soft); font-size: .68rem; }
.friend-avatar { flex: 0 0 46px; width: 46px; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: white; font-size: .72rem; font-weight: 780; }
.friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.friend-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 7px 10px; }
.friend-actions button { min-height: 38px; padding: 7px 10px; font-size: .75rem; }
.friend-actions .danger-link, .friend-actions .text-button { min-height: auto; padding: 2px 0; }
.friend-row-link { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-size: .72rem; font-weight: 720; text-decoration: none; }
.attention-row { align-items: start; flex-direction: column; }
.attention-row .friend-actions { width: 100%; justify-content: start; padding-left: 58px; }
.friend-list-outgoing .friend-row { border-style: solid; background: transparent; }
.friends-side-note { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.friends-side-note > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.friends-side-note svg { width: 18px; height: 18px; }
.friends-side-note h2 { margin: 0; font-size: 1.05rem; }
.friends-side-note p { margin: 4px 0 0; color: var(--ink-soft); font-size: .74rem; }
.social-empty { border-color: var(--line); }
.social-empty .button { margin-top: var(--space-3); }
.find-friends-page { width: min(880px, 100%); }
.find-friends-heading { max-width: 760px; margin: var(--space-5) 0 var(--space-6); }
.find-friends-heading .page-title { font-size: clamp(3rem, 6vw, 5rem); }
.find-friends-heading .lede { margin: var(--space-4) 0 0; }
.friend-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 14px 34px rgb(35 39 33 / 7%); }
.friend-search-field { position: relative; }
.friend-search-icon { position: absolute; top: 50%; left: 16px; width: 21px; height: 21px; color: var(--ink-soft); transform: translateY(-50%); pointer-events: none; }
.friend-search input { height: 54px; padding-left: 48px; border: 0; background: transparent; box-shadow: none; font-size: 1rem; }
.friend-search input:focus { outline: 0; box-shadow: none; }
.friend-search > button { min-width: 110px; }
.friend-search-error { margin-top: var(--space-4); }
.search-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding-bottom: var(--space-3); }
.search-results-heading h2 { margin: 0; font-size: 1.5rem; }
.search-results-heading p { margin: 0; color: var(--ink-soft); font-size: .74rem; }
.friend-search-results { margin: 0; }
.friend-search-empty { margin-top: var(--space-7); }
.friend-discovery-intro { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: var(--space-5); margin-top: var(--space-7); padding: var(--space-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.friend-discovery-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.friend-discovery-icon svg { width: 27px; height: 27px; }
.friend-discovery-intro h2 { margin: 0; font-size: 1.45rem; }
.friend-discovery-intro p { max-width: 590px; margin: 5px 0 0; color: var(--ink-soft); font-size: .82rem; }
.reader-friends-heading { margin-bottom: var(--space-6); }
.reader-friends-section { width: min(820px, 100%); }
.friend-row-labels { display: flex; align-items: center; gap: 10px; }
.friend-row-labels .row-arrow { color: var(--brand); }
.inbox-heading form { margin: 0; }
.inbox-workspace { display: grid; gap: var(--space-8); }
.inbox-message-list { display: grid; border-top: 1px solid var(--line); }
.inbox-message { min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.inbox-message.is-unread { background: var(--brand-soft); }
.inbox-message-copy { min-width: 0; }
.inbox-message-copy p { margin: 0; line-height: 1.45; }
.inbox-message-copy time, .recommendation-author time { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .7rem; }
.inbox-message form { margin: 0; }
.recommendation-compose { margin-top: var(--space-4); }
.recommendation-compose summary { color: var(--brand); font-size: .78rem; font-weight: 740; cursor: pointer; }
.recommendation-compose form { margin-top: var(--space-4); }
.recommendation-manage-link { display: inline-flex; margin-top: var(--space-4); font-size: .75rem; }
.recommendation-detail-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr); align-items: start; gap: var(--space-6); padding-top: var(--space-7); border-top: 1px solid var(--line); }
.recommendation-author { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; }
.recommendation-author h2 { margin: 2px 0 0; font-size: 1.35rem; }
.recommendation-note-card blockquote { margin: var(--space-5) 0 0; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.2rem, 2.5vw, 1.8rem); line-height: 1.45; }
.recommendation-add-card h2 { margin-top: 0; }
.recommendation-manage-list { display: grid; border-top: 1px solid var(--line); }
.recommendation-manage-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 14px 16px; border-bottom: 1px solid var(--line); }
.recommendation-manage-book { min-width: 0; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.recommendation-manage-cover { width: 50px; aspect-ratio: 2 / 3; overflow: hidden; display: block; border-radius: var(--radius-sm); background: var(--wash); }
.recommendation-manage-cover img { width: 100%; height: 100%; object-fit: cover; }
.recommendation-manage-book strong, .recommendation-manage-book small, .recommendation-manage-book span span { display: block; }
.recommendation-manage-book small { margin-top: 2px; color: var(--ink-soft); font-size: .72rem; }
.recommendation-manage-book span span { max-width: 70ch; margin-top: 5px; color: var(--ink-soft); font-family: var(--font-serif); font-size: .78rem; }
.recommendation-manage-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); }
.recommendation-manage-actions time { color: var(--ink-soft); font-size: .72rem; }
.recommendation-manage-actions form { margin: 0; }

/* Reading analytics */
.analytics-heading { align-items: end; }
.analytics-heading > div { max-width: 760px; }
.analytics-heading .lede { max-width: 650px; margin: var(--space-4) 0 0; }
.year-picker { display: flex; align-items: end; gap: 8px; }
.year-picker label { display: grid; gap: 6px; color: var(--ink-soft); font-size: .78rem; font-weight: 740; }
.year-picker select { min-width: 130px; }
.analytics-goal-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 34%) auto; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-5); padding: 14px 16px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--brand-soft); }
.analytics-goal-summary strong, .analytics-goal-summary small { display: block; }
.analytics-goal-summary small { margin-top: 3px; color: var(--ink-soft); font-size: .75rem; }
.analytics-goal-summary progress { width: 100%; height: 9px; border: 0; border-radius: 999px; accent-color: var(--brand); }
.analytics-goal-summary > b { color: var(--brand); font-family: var(--font-display); font-size: 1.15rem; }
.analytics-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analytics-stat { min-width: 0; padding: 20px 18px; border-right: 1px solid var(--line); }
.analytics-stat:first-child { padding-left: 0; }
.analytics-stat:last-child { padding-right: 0; border-right: 0; }
.analytics-stat span, .analytics-stat small { display: block; color: var(--ink-soft); }
.analytics-stat span { font-size: .69rem; font-weight: 790; letter-spacing: .08em; text-transform: uppercase; }
.analytics-stat strong { display: block; overflow-wrap: anywhere; margin-block: 9px 5px; font-family: var(--font-display); font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1; }
.analytics-stat[data-metric="average-rating"] strong, .analytics-stat[data-metric="median-duration"] strong { white-space: nowrap; }
.analytics-stat small { font-size: .72rem; line-height: 1.4; }
.analytics-context-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: calc(-1 * var(--space-3)) 0 var(--space-7); }
.analytics-context-rail > div { min-width: 0; padding: 0 var(--space-5); border-right: 1px solid var(--line); }
.analytics-context-rail > div:first-child { padding-left: 0; }
.analytics-context-rail > div:last-child { padding-right: 0; border-right: 0; }
.analytics-context-rail span, .analytics-context-rail small { display: block; color: var(--ink-soft); font-size: .7rem; }
.analytics-context-rail strong { display: block; margin: 4px 0 2px; font-family: var(--font-display); font-size: 1.25rem; }
.analytics-primary-panel, .analytics-seasonality-panel { min-width: 0; padding: var(--space-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analytics-seasonality-panel { margin-top: var(--space-7); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: var(--space-5); }
.panel-heading h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.panel-heading .section-label { margin-bottom: 4px; }
.panel-heading > span { color: var(--ink-soft); font-size: .76rem; white-space: nowrap; }
.analytics-seasonality-panel .panel-heading p { max-width: 540px; margin: 5px 0 0; color: var(--ink-soft); font-size: .75rem; }
.analytics-chart-heading { align-items: end; }
.analytics-chart-tools { display: grid; justify-items: end; gap: 8px; }
.analytics-chart-tools > span { color: var(--ink-soft); font-size: .72rem; }
.analytics-measure-switch { display: none; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-raised); }
.analytics-measure-switch.is-enhanced { display: flex; }
.analytics-measure-switch button { min-height: 32px; padding: 5px 11px; border: 0; border-radius: calc(var(--radius-sm) - 2px); background: transparent; color: var(--ink-soft); font: inherit; font-size: .7rem; font-weight: 750; cursor: pointer; }
.analytics-measure-switch button[aria-pressed="true"] { background: var(--brand); color: var(--paper-raised); }
.analytics-monthly-chart, .rating-distribution { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 8px; min-height: 230px; }
.rating-distribution { grid-template-columns: repeat(10, minmax(0, 1fr)); min-height: 150px; }
.analytics-month-column, .rating-column { min-width: 0; display: grid; grid-template-rows: 24px 176px 22px; text-align: center; }
.rating-column { grid-template-rows: 24px 100px 22px; }
.bar-value { align-self: center; overflow: hidden; color: var(--ink-soft); font-size: .66rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.bar-track { min-width: 0; display: flex; align-items: end; border-bottom: 1px solid var(--line); }
.analytics-chart-bar { width: 100%; height: var(--bar-value); display: block; min-height: 0; border-radius: 4px 4px 0 0; background: var(--brand); transition: width 160ms ease, height 160ms ease; }
[data-analytics-chart][data-measure="pages"] .analytics-chart-bar { background: #52758a; }
.rating-bar { background: var(--gold); }
.axis-label { align-self: end; color: var(--ink-soft); font-size: .66rem; }
.panel-empty { min-height: 210px; display: grid; margin: 0; place-items: center; color: var(--ink-soft); font-size: .82rem; text-align: center; }
.analytics-month-column.is-future .bar-value { visibility: hidden; }
.analytics-month-column.is-future .analytics-chart-bar { background: var(--wash); }
.analytics-annual-chart { min-height: 220px; display: grid; align-content: center; gap: 13px; }
.analytics-annual-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 70px; align-items: center; gap: 12px; font-size: .78rem; font-variant-numeric: tabular-nums; }
.analytics-annual-row > a { color: var(--ink); font-weight: 740; text-decoration: none; }
.analytics-annual-row > a:hover { color: var(--brand); text-decoration: underline; }
.analytics-bar-track { height: 11px; overflow: hidden; border-radius: 999px; background: var(--wash); }
.analytics-bar-track .analytics-chart-bar { width: var(--bar-value); height: 100%; border-radius: inherit; }
.analytics-annual-row > strong { text-align: right; }
.analytics-pattern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); margin-top: var(--space-8); }
.analytics-pattern-section { min-width: 0; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.analytics-pattern-section > .panel-heading { margin-bottom: var(--space-5); }
.analytics-pattern-group + .analytics-pattern-group { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.analytics-pattern-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.analytics-pattern-heading h3 { margin: 0; font-family: var(--font-sans); font-size: .78rem; font-weight: 790; letter-spacing: .02em; }
.analytics-pattern-heading > span { color: var(--ink-soft); font-size: .68rem; }
.analytics-pattern-empty { margin: 0; color: var(--ink-soft); font-size: .76rem; }
.analytics-ranked-list { display: grid; gap: 9px; }
.analytics-ranked-row { display: grid; grid-template-columns: minmax(82px, 1fr) minmax(110px, 1.5fr) 32px; align-items: center; gap: 10px; font-size: .72rem; font-variant-numeric: tabular-nums; }
.analytics-ranked-row > div { height: 8px; overflow: hidden; border-radius: 999px; background: var(--wash); }
.analytics-ranked-row i { width: var(--bar-value); height: 100%; display: block; border-radius: inherit; background: #52758a; }
.analytics-ranked-row > strong { text-align: right; }
.analytics-author-snapshot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analytics-author-snapshot > div { min-width: 0; padding: 14px 12px; border-right: 1px solid var(--line); }
.analytics-author-snapshot > div:first-child { padding-left: 0; }
.analytics-author-snapshot > div:last-child { padding-right: 0; border-right: 0; }
.analytics-author-snapshot span, .analytics-author-snapshot small { display: block; color: var(--ink-soft); font-size: .66rem; }
.analytics-author-snapshot strong { display: block; margin: 5px 0 3px; font-family: var(--font-display); font-size: 1.45rem; }
.analytics-author-highlights { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-6); border-top: 1px solid var(--line); }
.analytics-author-highlights > div { min-width: 0; padding: 15px 14px 0 0; }
.analytics-author-highlights > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.analytics-author-highlights span, .analytics-author-highlights small { display: block; color: var(--ink-soft); font-size: .67rem; }
.analytics-author-highlights > div > span { margin-bottom: 5px; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
.analytics-author-highlights strong { display: block; overflow-wrap: anywhere; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.25; }
.analytics-author-highlights small { margin-top: 4px; line-height: 1.4; }
.analytics-author-ranking ol, .analytics-top-reads ol { margin: 0; padding: 0; list-style: none; }
.analytics-author-ranking li, .analytics-top-reads li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.analytics-author-ranking li:first-child, .analytics-top-reads li:first-child { padding-top: 0; }
.analytics-author-ranking li:last-child, .analytics-top-reads li:last-child { padding-bottom: 0; border-bottom: 0; }
.analytics-author-ranking li strong, .analytics-author-ranking li small { display: block; }
.analytics-author-ranking li strong { font-family: var(--font-display); font-size: .92rem; }
.analytics-author-ranking li small { margin-top: 2px; color: var(--ink-soft); font-size: .67rem; }
.analytics-author-ranking li b { color: var(--ink-soft); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.analytics-top-reads a { color: var(--ink); font-family: var(--font-display); font-size: .9rem; text-decoration: none; }
.analytics-top-reads a:hover { color: var(--brand); text-decoration: underline; }
.analytics-top-reads strong { color: var(--ink-soft); font-size: .72rem; }
.analytics-record-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-8); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analytics-record-strip > div { min-width: 0; padding: 18px 16px; border-right: 1px solid var(--line); }
.analytics-record-strip > div:first-child { padding-left: 0; }
.analytics-record-strip > div:last-child { padding-right: 0; border-right: 0; }
.analytics-record-strip span, .analytics-record-strip small { display: block; color: var(--ink-soft); font-size: .68rem; }
.analytics-record-strip > div > span { font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.analytics-record-strip strong { display: block; overflow-wrap: anywhere; margin: 6px 0 3px; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.25; }
.analytics-record-strip strong a { color: inherit; text-decoration: none; }
.analytics-record-strip strong a:hover { color: var(--brand); text-decoration: underline; }
.analytics-reading-record { margin-top: var(--space-8); }
.analytics-reading-record details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analytics-reading-record summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 17px 0; cursor: pointer; }
.analytics-reading-record summary span small, .analytics-reading-record summary span strong { display: block; }
.analytics-reading-record summary span small { margin-bottom: 4px; color: var(--brand); font-size: .67rem; font-weight: 790; letter-spacing: .08em; }
.analytics-reading-record summary span strong { font-family: var(--font-display); font-size: 1.25rem; }
.analytics-reading-record summary > b { color: var(--ink-soft); font-size: .72rem; font-weight: 700; }
.analytics-reading-record details[open] summary { border-bottom: 1px solid var(--line); }
.analytics-table-wrap { padding-block: 8px; }
.analytics-table { width: 100%; border-collapse: collapse; }
.analytics-table th, .analytics-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.analytics-table th { color: var(--ink-soft); font-size: .68rem; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.analytics-table tr:last-child td { border-bottom: 0; }
.analytics-table td:first-child { width: 45%; padding-left: 0; }
.analytics-table th:first-child { padding-left: 0; }
.analytics-table td:last-child, .analytics-table th:last-child { padding-right: 0; }
.analytics-table a { color: var(--ink); font-family: var(--font-display); font-size: 1rem; font-weight: 650; text-decoration: none; }
.analytics-table a:hover { color: var(--brand); text-decoration: underline; }
.analytics-table small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .7rem; }
.analytics-empty { margin-top: var(--space-5); }
.analytics-data-coverage { margin-top: var(--space-5); color: var(--ink-soft); border-left: 3px solid var(--gold); background: var(--warning-soft); font-size: .76rem; }
.analytics-data-coverage summary { display: flex; align-items: center; gap: 8px; padding: 13px 15px; color: var(--ink); font-weight: 760; cursor: pointer; }
.analytics-data-coverage summary .inline-icon { color: var(--gold); }
.analytics-data-coverage ul { display: grid; gap: 7px; margin: 0; padding: 0 20px 14px 42px; }

@media (max-width: 980px) {
    .site-brand { min-width: auto; }
    .brand-copy small { display: none; }
    .nav-item { padding-inline: 8px; }
    .nav-item .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .landing-hero { grid-template-columns: 1fr minmax(280px, .6fr); }
    .book-detail-workspace { grid-template-columns: minmax(0, 1fr) 280px; gap: 38px; }
    .dashboard-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 38px; }
    .dashboard-book-strip { grid-template-columns: 1fr; }
    .dashboard-reading-card { grid-template-columns: 58px minmax(0, 1fr) 18px; }
    .dashboard-reading-cover { width: 58px; }
    .catalog-preview-workspace { grid-template-columns: minmax(0, 1fr) 240px; }
    .library-choice-grid { grid-template-columns: 1fr; }
    .profile-workspace { grid-template-columns: 250px minmax(0, 1fr); gap: 38px; }
    .profile-summary-rail { padding-right: var(--space-5); }
    .settings-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 34px; }
    .settings-sections { grid-template-columns: 1fr; }
    .settings-danger-card { grid-column: auto; }
    .settings-delete-form { grid-template-columns: 1fr; }
    .settings-delete-form .settings-form-actions { grid-column: auto; }
    .friends-workspace { grid-template-columns: minmax(0, 1fr) 310px; gap: 38px; }
    .friends-attention { padding-left: var(--space-5); }
    .import-layout { grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr); gap: 36px; }
}

@media (max-width: 820px) {
    .library-toolbar { grid-template-columns: minmax(0, 1fr) 1fr; }
    .library-search-field, .library-filter-sort, .filter-apply-button { grid-column: 1 / -1; }
    .shared-library-filters { grid-template-columns: minmax(0, 1fr) 1fr; }
    .shared-library-filters .search-field, .shared-library-filters .library-filter-sort, .shared-library-filters .filter-apply-button { grid-column: 1 / -1; }
    .analytics-pattern-grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

@media (max-width: 760px) {
    .container { width: min(100% - 32px, 680px); }
    .landing-hero { min-height: auto; grid-template-columns: 1fr; }
    .landing-hero h1 { font-size: clamp(3.4rem, 15vw, 5.6rem); }
    .landing-manifesto { min-height: 430px; }
    .landing-feature-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .auth-layout { grid-template-columns: 1fr; }
    .auth-context { min-height: 300px; }
    .auth-context-title { font-size: 2.8rem; }
    .library-toolbar { grid-template-columns: minmax(0, 1fr) 1fr; }
    .library-search-field { grid-column: 1 / -1; }
    .library-filter-sort { grid-column: 1 / -1; }
    .filter-apply-button { grid-column: 1 / -1; }
    .book-detail-workspace { grid-template-columns: 1fr; }
    .book-detail-sidebar { grid-template-columns: 1fr 1fr; }
    .book-tools-card { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); }
    .dashboard-heading { align-items: start; }
    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-primary { gap: var(--space-7); }
    .dashboard-book-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; margin-inline: -16px; padding: 0 16px 8px; scroll-snap-type: x proximity; }
    .dashboard-reading-card { scroll-snap-align: start; }
    .dashboard-rail { grid-template-columns: 1fr 1fr; padding: var(--space-7) 0 0; border-top: 1px solid var(--line); border-left: 0; }
    .dashboard-shortcuts { grid-column: 1 / -1; }
    .dashboard-quick-links { grid-template-columns: 1fr 1fr; border-top: 0; column-gap: var(--space-5); }
    .dashboard-quick-links > a { border-top: 1px solid var(--line); }
    .catalog-heading { align-items: start; }
    .catalog-result { grid-template-columns: 76px minmax(0, 1fr) 100px; }
    .catalog-result-cover { width: 76px; }
    .catalog-alternates { margin-left: 100px; }
    .catalog-preview-workspace { grid-template-columns: 1fr; }
    .workflow-note { max-width: 600px; }
    .import-layout { grid-template-columns: 1fr; }
    .import-explanation { max-width: 620px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
    .profile-hero { grid-template-columns: 118px minmax(0, 1fr); gap: var(--space-5); }
    .profile-photo-control, .profile-avatar { width: 118px; }
    .profile-avatar-media .user-avatar-initials { font-size: 2.5rem; }
    .profile-name-row .page-title { font-size: clamp(2.5rem, 9vw, 4.3rem); }
    .profile-workspace { grid-template-columns: 1fr; }
    .profile-summary-rail { grid-template-columns: 1fr 1fr; gap: var(--space-5); padding: 0 0 var(--space-7); border-right: 0; border-bottom: 1px solid var(--line); }
    .profile-main { gap: var(--space-7); }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-index { position: static; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-sm); }
    .settings-index a { justify-content: center; border: 0; border-right: 1px solid var(--line); }
    .settings-index a:last-child { border-right: 0; }
    .friends-heading { align-items: start; flex-direction: column; }
    .friends-heading-actions { justify-content: start; }
    .friends-workspace { grid-template-columns: 1fr; }
    .friends-attention { grid-row: 1; padding: 0 0 var(--space-7); border-left: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 600px) {
    .container { width: min(100% - 28px, 560px); }
    .page-shell { padding-top: 28px; }
    .heading-row { align-items: start; flex-direction: column; }
    .site-header:not(.site-header-authenticated) .nav { min-height: 64px; gap: 8px; }
    .site-header:not(.site-header-authenticated) .site-brand { gap: 7px; }
    .site-header:not(.site-header-authenticated) .brand-mark { width: 34px; height: 34px; }
    .site-header:not(.site-header-authenticated) .brand-copy strong { font-size: .92rem; white-space: nowrap; }
    .site-header:not(.site-header-authenticated) .brand-copy small { display: none; }
    .site-header:not(.site-header-authenticated) .nav-text-link { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 7px; font-size: .8rem; white-space: nowrap; }
    .site-header:not(.site-header-authenticated) .button-small { min-height: 44px; padding: 8px 10px; font-size: .8rem; white-space: nowrap; }
    .authenticated .page-shell { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
    .site-header-authenticated {
        position: fixed;
        inset: auto 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--line);
        border-bottom: 0;
    }
    .site-header-authenticated .nav { width: 100%; min-height: 70px; padding-inline: 4px; }
    .site-header-authenticated .site-brand { display: none; }
    .site-header-authenticated .nav-links { width: 100%; align-items: stretch; justify-content: space-around; }
    .site-header-authenticated .nav-item {
        width: auto;
        height: 62px;
        min-height: 62px;
        display: grid;
        flex: 1 1 20%;
        grid-template-rows: 24px 14px;
        gap: 3px;
        padding: 7px 2px 5px;
        place-items: center;
        border-radius: var(--radius-sm);
    }
    .site-header-authenticated .nav-item .nav-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        color: inherit;
        font-size: .62rem;
        line-height: 1;
    }
    .site-header-authenticated .nav-icon { width: 21px; height: 21px; }
    .site-header-authenticated .nav-links .nav-add-books { width: auto; height: 62px; padding: 7px 2px 5px; border: 0; background: transparent; }
    .site-header-authenticated .nav-links .nav-add-books:not([aria-current="page"]) { color: var(--brand) !important; }
    .site-header-authenticated .nav-add-books .nav-icon { width: 22px; height: 22px; padding: 0; border-radius: 0; background: transparent; color: currentColor; }
    .site-header-authenticated .nav-links .nav-profile {
        width: auto;
        height: 62px;
        overflow: visible;
        flex: 1 1 20%;
        padding: 7px 2px 5px;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--ink-soft);
        box-shadow: none;
    }
    .site-header-authenticated .nav-profile-avatar { width: 23px; height: 23px; }
    .site-header-authenticated .nav-profile-label { display: block; }
    .site-header-authenticated .nav-links .nav-profile:hover,
    .site-header-authenticated .nav-links .nav-profile:focus-visible,
    .site-header-authenticated .nav-links .nav-profile[aria-current="page"] { background: transparent; box-shadow: none; }
    .site-header-authenticated .nav-item[aria-current="page"] { background: transparent; }
    .site-header-authenticated .nav-item[aria-current="page"]::after { position: absolute; top: 2px; width: 22px; height: 2px; border-radius: 999px; background: var(--brand); content: ""; }
    .site-header-authenticated .nav-badge { top: 3px; right: 10%; }
    .site-header-authenticated .nav-links .nav-analytics { display: none; }
    .endpoint-home:not(.authenticated) .page-shell { padding-top: var(--space-7); }
    .landing-hero { gap: var(--space-6); padding-bottom: var(--space-7); }
    .landing-hero h1 { font-size: clamp(3.25rem, 17vw, 4.8rem); }
    .landing-manifesto { min-height: 360px; padding: 28px; }
    .landing-manifesto blockquote { font-size: 1.9rem; }
    .landing-features { padding-block: var(--space-7); }
    .auth-layout { margin-inline: -2px; border-radius: var(--radius-md); }
    .auth-context { min-height: 220px; padding: 26px; }
    .auth-context-mark, .auth-context-note { display: none; }
    .auth-context-title { font-size: 2.25rem; }
    .auth-card { padding: 30px 24px 34px; }
    .auth-heading h1 { font-size: 2.55rem; }
    .library-heading { align-items: flex-start; }
    .library-heading .button { width: 100%; }
    .library-shelves { margin-inline: -14px; padding-inline: 14px; gap: 22px; }
    .library-toolbar { grid-template-columns: 1fr 1fr; padding: 8px; }
    .library-filter-ownership { grid-column: 1 / -1; }
    .shared-library-filters { grid-template-columns: 1fr 1fr; padding: 8px; }
    .shared-library-filters .search-field, .shared-library-filters .library-filter-sort, .shared-library-filters .filter-apply-button { grid-column: 1 / -1; }
    .book-grid { grid-template-columns: 1fr; gap: 0; }
    .book-card { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .book-card .cover-wrap { width: 70px; box-shadow: 0 5px 12px rgb(35 39 33 / 11%); }
    .book-card-body { padding: 1px 0; }
    .book-card h2 { margin-top: 7px; font-size: 1rem; }
    .book-card:hover .cover-wrap, .book-card:focus-visible .cover-wrap { transform: none; box-shadow: 0 5px 12px rgb(35 39 33 / 11%); }
    .book-detail-header { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: var(--space-5) 0 var(--space-6); }
    .book-detail-cover-column, .detail-cover { width: 96px; }
    .book-detail-summary { padding-top: 0; }
    .book-detail-summary .page-title { margin-top: 9px; font-size: clamp(2rem, 10vw, 3rem); line-height: .98; }
    .detail-subtitle { margin-top: 10px; font-size: .95rem; }
    .byline { margin-top: 10px; font-size: .88rem; }
    .book-bibliography { font-size: .68rem; }
    .description-box { grid-column: 1 / -1; }
    .book-detail-workspace { gap: var(--space-7); padding-top: var(--space-6); }
    .book-detail-sidebar { grid-template-columns: 1fr; }
    .book-detail-primary-card { padding: 20px 16px; }
    .start-reading-form { grid-template-columns: 1fr; }
    .start-reading-form button { width: 100%; }
    .reading-history-row { grid-template-columns: minmax(0, 1fr) 18px; }
    .reading-history-row > .status-badge { grid-column: 1 / -1; }
    input, select, textarea { font-size: 16px; }
    .dashboard-heading { align-items: stretch; flex-direction: column; margin-bottom: var(--space-6); }
    .dashboard-heading .page-title { font-size: clamp(2.75rem, 14vw, 4rem); }
    .dashboard-heading-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .dashboard-heading-action { width: 100%; }
    .dashboard-request-alert { grid-template-columns: 36px minmax(0, 1fr) 18px; padding: 12px; }
    .dashboard-alert-icon { width: 36px; height: 36px; }
    .activity-recommendation-note { padding-left: 0; }
    .dashboard-section-heading { align-items: end; }
    .dashboard-section-heading h2 { font-size: 1.45rem; }
    .dashboard-section-heading p { display: none; }
    .analytics-heading { align-items: stretch; }
    .analytics-heading .page-title { font-size: clamp(2.65rem, 14vw, 4rem); }
    .year-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .year-picker label { min-width: 0; }
    .year-picker select { width: 100%; min-width: 0; }
    .analytics-stats { grid-template-columns: 1fr 1fr; margin-inline: -14px; padding-inline: 14px; }
    .analytics-stat, .analytics-stat:first-child { grid-column: auto; padding: 15px 12px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
    .analytics-stat:nth-child(odd) { padding-left: 0; }
    .analytics-stat:nth-child(even) { padding-right: 0; border-right: 0; }
    .analytics-stat:first-child, .analytics-stat:nth-child(2) { border-top: 0; }
    .analytics-stat strong { font-size: 1.65rem; }
    .analytics-context-rail { grid-template-columns: 1fr; gap: 0; }
    .analytics-context-rail > div, .analytics-context-rail > div:first-child, .analytics-context-rail > div:last-child { padding: 11px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .analytics-chart-heading { align-items: stretch; flex-direction: column; }
    .analytics-chart-tools { justify-items: start; }
    .analytics-measure-switch button { min-height: 44px; }
    .analytics-primary-panel, .analytics-seasonality-panel { padding-block: var(--space-5); }
    .analytics-monthly-chart, .rating-distribution { min-height: 0; align-items: stretch; grid-template-columns: 1fr; gap: 4px; }
    .analytics-month-column, .rating-column { grid-template-columns: 38px minmax(0, 1fr) 48px; grid-template-rows: 24px; align-items: center; gap: 8px; text-align: left; }
    .analytics-month-column .axis-label, .rating-column .axis-label { grid-column: 1; grid-row: 1; align-self: center; font-size: .68rem; }
    .analytics-month-column .bar-track, .rating-column .bar-track { grid-column: 2; grid-row: 1; height: 10px; align-items: stretch; border: 0; border-radius: 999px; background: var(--wash); }
    .analytics-month-column .analytics-chart-bar, .rating-column .analytics-chart-bar { width: var(--bar-value); height: 100%; border-radius: inherit; }
    .analytics-month-column .bar-value, .rating-column .bar-value { grid-column: 3; grid-row: 1; justify-self: end; font-size: .68rem; }
    .analytics-annual-chart { min-height: 160px; }
    .analytics-annual-row { grid-template-columns: 44px minmax(0, 1fr) 58px; gap: 8px; }
    .analytics-author-snapshot { grid-template-columns: 1fr 1fr; }
    .analytics-author-snapshot > div, .analytics-author-snapshot > div:first-child, .analytics-author-snapshot > div:last-child { padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .analytics-author-snapshot > div:nth-child(odd) { padding-left: 0; }
    .analytics-author-snapshot > div:nth-child(even) { padding-right: 0; border-right: 0; }
    .analytics-author-snapshot > div:last-child { grid-column: 1 / -1; padding-inline: 0; border-bottom: 0; }
    .analytics-author-highlights { grid-template-columns: 1fr; }
    .analytics-author-highlights > div, .analytics-author-highlights > div + div { padding: 13px 0; border-left: 0; border-bottom: 1px solid var(--line); }
    .analytics-record-strip { grid-template-columns: 1fr 1fr; }
    .analytics-record-strip > div, .analytics-record-strip > div:first-child, .analytics-record-strip > div:last-child { padding: 14px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .analytics-record-strip > div:nth-child(odd) { padding-left: 0; }
    .analytics-record-strip > div:nth-child(even) { padding-right: 0; border-right: 0; }
    .analytics-record-strip > div:nth-last-child(-n+2) { border-bottom: 0; }
    .analytics-reading-record summary { align-items: start; }
    .analytics-table-wrap { overflow: visible; }
    .analytics-table, .analytics-table tbody, .analytics-table tr, .analytics-table td { display: block; width: 100%; }
    .analytics-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .analytics-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 0; border-bottom: 1px solid var(--line); }
    .analytics-table tr:last-child { border-bottom: 0; }
    .analytics-table td, .analytics-table td:first-child, .analytics-table td:last-child { width: auto; display: grid; grid-template-columns: 1fr; gap: 2px; padding: 7px 8px 0 0; border: 0; font-size: .78rem; }
    .analytics-table td:first-child { grid-column: 1 / -1; padding: 0 0 7px; }
    .analytics-table td::before { color: var(--ink-soft); font-size: .62rem; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; content: attr(data-label); }
    .analytics-table td:first-child::before { display: none; }
    .analytics-table .rating-stars { display: none; }
    .analytics-data-coverage ul { padding-left: 34px; }
    .dashboard-book-strip { grid-auto-columns: 270px; margin-inline: -14px; padding-inline: 14px; }
    .dashboard-empty { grid-template-columns: 44px minmax(0, 1fr); padding: var(--space-4); }
    .dashboard-empty .button { grid-column: 1 / -1; width: 100%; }
    .dashboard-activity-book { grid-template-columns: 44px minmax(0, 1fr) 18px; padding-left: 0; }
    .dashboard-activity-book .activity-cover { width: 44px; }
    .activity-group { margin-left: 57px; }
    .dashboard-rail { grid-template-columns: 1fr; gap: var(--space-7); }
    .dashboard-shortcuts { grid-column: auto; }
    .dashboard-quick-links { grid-template-columns: 1fr; }
    .catalog-heading { align-items: stretch; flex-direction: column; }
    .catalog-heading-actions { justify-content: start; }
    .catalog-search { grid-template-columns: 1fr; }
    .catalog-search button { width: 100%; }
    .catalog-search-meta { min-height: 42px; align-items: start; flex-direction: column; gap: 3px; }
    .catalog-intro { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-5) 0; }
    .catalog-intro-icon { width: 44px; height: 44px; }
    .catalog-result { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding-block: var(--space-4); }
    .catalog-result-cover { width: 64px; }
    .catalog-result-title { font-size: 1.05rem; }
    .catalog-result .result-description { display: none; }
    .catalog-result-action { grid-column: 2; justify-content: start; margin-top: -2px; }
    .catalog-result-metadata span:nth-child(n+4) { display: none; }
    .catalog-alternates { margin-left: 76px; }
    .catalog-result-alternate { grid-template-columns: 48px minmax(0, 1fr); }
    .catalog-result-alternate .catalog-result-cover { width: 48px; }
    .catalog-preview-header { grid-template-columns: 88px minmax(0, 1fr); }
    .catalog-preview-header .book-detail-cover-column, .catalog-preview-header .detail-cover { width: 88px; }
    .workflow-card { padding: 20px 16px; }
    .workflow-page-heading .page-title { font-size: clamp(2.6rem, 13vw, 3.7rem); }
    .import-file-field { grid-template-columns: 40px minmax(0, 1fr); padding: var(--space-4); }
    .import-file-icon { width: 40px; height: 40px; }
    .import-file-field input[type="file"] { grid-column: 1 / -1; width: 100%; font-size: 16px; }
    .import-upload-action { align-items: stretch; flex-direction: column; }
    .import-upload-action button { width: 100%; }
    .import-upload-action > span { max-width: none; }
    .import-progress-card { margin-top: var(--space-4); }
    .import-progress-heading { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
    .import-state-icon { width: 42px; height: 42px; }
    .import-state-icon svg { width: 20px; height: 20px; }
    .import-progress-heading h1 { font-size: clamp(2rem, 11vw, 3rem); }
    .import-summary > div { padding: 13px 9px; }
    .import-summary > div:first-child { padding-left: 0; }
    .import-summary > div:last-child { padding-right: 0; }
    .import-summary span { font-size: .58rem; letter-spacing: .035em; }
    .import-summary strong { font-size: 1.55rem; }
    .import-progress-card [data-import-next-form] button { width: 100%; }
    .import-complete-actions { align-items: stretch; flex-direction: column; }
    .import-complete-actions .button, .import-complete-actions .text-link { width: 100%; justify-content: center; }
    .import-result { grid-template-columns: 26px minmax(0, 1fr); }
    .import-result > small { grid-column: 2; padding-top: 0; white-space: normal; }
    .metadata-form-grid, .cover-source-grid, .session-state-grid { grid-template-columns: 1fr; }
    .metadata-form-grid .full-width { grid-column: auto; }
    .current-cover { grid-template-columns: 54px minmax(0, 1fr); }
    .current-cover img { width: 54px; }
    .current-cover .danger-button { grid-column: 1 / -1; width: 100%; }
    .ownership-choice-row { display: grid; grid-template-columns: 1fr; }
    .workflow-subsection { padding: var(--space-4); }
    .workflow-editor > .workflow-form-actions, .workflow-editor > .workflow-save-row {
        position: sticky;
        z-index: 5;
        bottom: calc(70px + env(safe-area-inset-bottom));
        margin: 0 -16px -20px;
        padding: 12px 16px;
        border-top: 1px solid var(--line);
        background: rgb(255 254 251 / 96%);
        backdrop-filter: blur(12px);
    }
    .workflow-form-actions button, .workflow-save-row button { flex: 1 1 auto; }
    .session-context { grid-template-columns: 66px minmax(0, 1fr); gap: var(--space-4); }
    .session-context-cover { width: 66px; }
    .session-context-copy .page-title { font-size: clamp(2rem, 10vw, 3rem); }
    .profile-hero { grid-template-columns: 86px minmax(0, 1fr); align-items: start; gap: var(--space-4); padding-top: var(--space-3); }
    .profile-photo-control, .profile-avatar { width: 86px; }
    .profile-avatar-media { border-width: 3px; }
    .profile-avatar-media .user-avatar-initials { font-size: 1.9rem; }
    .profile-avatar-add { right: 0; bottom: 2px; width: 29px; height: 29px; border-width: 2px; }
    .profile-avatar-add svg { width: 14px; height: 14px; }
    .profile-avatar-action { inset: 3px; }
    .profile-avatar-action svg { width: 21px; height: 21px; }
    .profile-name-row { position: relative; display: block; }
    .profile-name-row .page-title { padding-right: 39px; font-size: clamp(2rem, 10vw, 3rem); }
    .profile-name-editor { position: absolute; top: 0; right: 0; }
    .profile-edit-icon { width: 32px; height: 32px; }
    .profile-handle { margin-top: 7px; }
    .profile-photo-control[open] { grid-column: 1 / -1; width: 100%; display: block; }
    .profile-photo-control[open] > .profile-photo-popover { width: 100%; }
    .profile-photo-control[open] + .profile-identity { grid-column: 1 / -1; }
    .profile-photo-popover, .profile-name-popover { position: static; width: auto; margin-top: 10px; box-shadow: none; justify-self: stretch; }
    .profile-name-editor[open] { position: static; width: 100%; display: block; }
    .profile-name-editor[open] > summary { position: absolute; top: 0; right: 0; }
    .profile-name-editor[open] > .profile-name-popover { width: 100%; }
    .profile-name-popover { max-width: none; }
    .profile-summary-rail { grid-template-columns: 1fr; }
    .profile-account-actions { padding-top: var(--space-4); }
    .highlighted-book-card { grid-template-columns: 76px minmax(0, 1fr) 18px; gap: 13px; padding: var(--space-4); }
    .highlighted-book-cover { width: 76px; }
    .highlighted-book-title { font-size: 1.05rem; }
    .highlighted-book-card.profile-highlight-empty { grid-template-columns: 46px minmax(0, 1fr); }
    .highlight-edit-icon { top: 10px; right: 10px; }
    .highlight-search-form { grid-template-columns: 1fr; }
    .highlight-search-form button { width: 100%; }
    .profile-recent-card { grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 10px; }
    .profile-recent-cover { width: 42px; }
    .profile-recent-copy { grid-template-columns: 1fr; gap: 5px; }
    .profile-recent-meta { display: flex; flex-wrap: wrap; justify-items: start; gap: 5px 10px; white-space: normal; }
    .shared-library-card { grid-template-columns: 46px minmax(0, 1fr); }
    .shared-library-card .profile-recent-cover { width: 46px; }
    .friend-reading-record-heading { align-items: start; flex-direction: column; gap: 5px; }
    .pagination { flex-wrap: wrap; }
    .pagination > span:nth-child(2) { width: 100%; order: -1; }
    .settings-heading { margin-bottom: var(--space-6); }
    .settings-index { grid-template-columns: 1fr; }
    .settings-index a { justify-content: start; border-right: 0; border-bottom: 1px solid var(--line); }
    .settings-index a:last-child { border-bottom: 0; }
    .settings-card { padding: 20px 16px; }
    .settings-card-heading { grid-template-columns: 38px minmax(0, 1fr); }
    .settings-card-icon { width: 38px; height: 38px; }
    .settings-form-actions button { width: 100%; justify-content: center; }
    .friends-heading .page-title, .find-friends-heading .page-title { font-size: clamp(2.75rem, 14vw, 4rem); }
    .friends-heading-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .friends-heading-actions > :first-child { grid-column: 1 / -1; }
    .friends-heading-actions button, .friends-heading-actions .button { width: 100%; justify-content: center; font-size: .76rem; }
    .friend-invite-panel { grid-template-columns: 38px minmax(0, 1fr); padding: var(--space-4); }
    .friend-invite-icon { width: 38px; height: 38px; }
    .friend-invite-copy-row { grid-template-columns: 1fr; }
    .friend-invite-copy-row button { width: 100%; }
    .friend-row { align-items: start; flex-direction: column; }
    .friend-actions { width: 100%; justify-content: start; padding-left: 58px; }
    .friend-actions button { min-height: 42px; }
    .friend-actions .danger-link, .friend-actions .text-button, .friend-row-link { min-height: 42px; display: inline-flex; align-items: center; }
    .friends-connected .friend-actions { justify-content: space-between; }
    .friend-search { grid-template-columns: 1fr; }
    .friend-search > button { width: 100%; }
    .friend-discovery-intro { grid-template-columns: 46px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; }
    .friend-discovery-icon { width: 46px; height: 46px; }
    .friend-row-labels { width: 100%; justify-content: space-between; padding-left: 58px; }
    .inbox-message { grid-template-columns: 46px minmax(0, 1fr); align-items: start; }
    .inbox-message > form, .inbox-message > .friend-state { grid-column: 2; justify-self: start; }
    .recommendation-detail-workspace { grid-template-columns: 1fr; }
    .recommendation-manage-row { align-items: start; flex-direction: column; }
    .recommendation-manage-actions { width: 100%; justify-content: space-between; padding-left: 62px; }
}

/* Reading goals */
.goal-heading { align-items: end; }
.goal-progress-card { display: grid; gap: 12px; margin-bottom: var(--space-6); padding: clamp(22px, 4vw, 36px); color: #f5f1e6; border-radius: var(--radius-md); background: var(--brand-deep); }
.goal-progress-copy { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); }
.goal-progress-copy .section-label { color: rgb(245 241 230 / 66%); }
.goal-progress-copy h2 { margin: 5px 0 0; color: #f5f1e6; font-size: clamp(1.5rem, 4vw, 2.35rem); }
.goal-progress-copy h2 strong { font-size: 1.35em; }
.goal-progress-copy > p { max-width: 370px; margin: 0; color: rgb(245 241 230 / 74%); font-size: .82rem; text-align: right; }
.goal-progress-card progress { width: 100%; height: 12px; overflow: hidden; border: 0; border-radius: 999px; background: rgb(245 241 230 / 18%); accent-color: #f5f1e6; }
.goal-progress-card progress::-webkit-progress-bar { border-radius: 999px; background: rgb(245 241 230 / 18%); }
.goal-progress-card progress::-webkit-progress-value { border-radius: 999px; background: #f5f1e6; }
.goal-progress-card progress::-moz-progress-bar { border-radius: 999px; background: #f5f1e6; }
.goal-progress-percent { margin: 0; color: rgb(245 241 230 / 66%); font-size: .72rem; text-align: right; }
.goal-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 360px); gap: var(--space-7); margin-bottom: var(--space-8); }
.goal-editor .panel-heading { margin: 0; }
.goal-editor .panel-heading p { max-width: 560px; margin: 7px 0 0; color: var(--ink-soft); font-size: .8rem; }
.goal-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.goal-form .form-group { margin: 0; }
.goal-form input { font-size: 16px; }
.goal-empty { margin-bottom: var(--space-6); }
.goal-readings { margin-top: var(--space-7); }
.goal-readings > .profile-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); }
.goal-readings > .profile-section-heading > span { color: var(--ink-soft); font-size: .76rem; }
.goal-reading-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
.goal-reading-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); }
.goal-reading-row .profile-recent-card { border-bottom: 0; }
.goal-reading-action-form { display: flex; justify-content: end; padding-right: 6px; }
.goal-reading-action { min-height: 36px; padding: 6px 8px; color: var(--ink-soft); font-size: .68rem; font-weight: 740; white-space: nowrap; }
.goal-reading-action:hover, .goal-reading-action:focus-visible { color: var(--brand-deep); }
.goal-reading-restore { color: var(--brand); }
.goal-excluded-readings { padding-top: var(--space-6); border-top: 1px solid var(--line); }
.goal-reading-row-excluded { background: color-mix(in srgb, var(--wash) 48%, transparent); }
.goal-reading-row-excluded .profile-recent-card { color: var(--ink-soft); }

@media (max-width: 720px) {
    .dashboard-goal-activity { grid-template-columns: 44px minmax(0, 1fr) 18px; }
    .dashboard-goal-activity-mark { width: 44px; }
    .analytics-goal-summary { grid-template-columns: minmax(0, 1fr) auto; }
    .analytics-goal-summary progress { grid-column: 1 / -1; grid-row: 2; }
    .goal-heading { align-items: stretch; flex-direction: column; }
    .goal-heading .year-picker { align-self: stretch; }
    .goal-heading .year-picker label, .goal-heading .year-picker select { width: 100%; }
    .goal-progress-copy { align-items: start; flex-direction: column; gap: 12px; }
    .goal-progress-copy > p { text-align: left; }
    .goal-editor { grid-template-columns: 1fr; gap: var(--space-5); }
    .goal-form { grid-template-columns: 1fr; }
    .goal-form .button { width: 100%; }
    .goal-reading-list { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .goal-reading-row { grid-template-columns: 1fr; }
    .goal-reading-action-form { width: auto; justify-self: end; padding: 0 4px 8px; }
    .goal-reading-action { width: auto; min-height: 44px; }
}

@media (max-width: 340px) {
    .site-header:not(.site-header-authenticated) .nav { width: calc(100% - 16px); gap: 6px; }
    .site-header:not(.site-header-authenticated) .site-brand { gap: 5px; }
    .site-header:not(.site-header-authenticated) .brand-mark { width: 32px; height: 32px; }
    .site-header:not(.site-header-authenticated) .brand-copy strong { font-size: .88rem; }
    .site-header:not(.site-header-authenticated) .nav-text-link { padding-inline: 4px; }
    .site-header:not(.site-header-authenticated) .button-small { padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}