/*
 * ScarfieTextbooks, after the original scarfietextbooks.com: white pages, navy
 * text, blue for anything you can click, and gold kept for the wordmark and
 * "Wanted" listings. System fonts only, so there's nothing extra to download.
 */
:root {
    --navy:#14213d;
    --blue:#0b3a9f;
    --blue-dark:#082c7a;
    --blue-tint:#f3f6fc;
    --gold:#ffcd00;
    --gold-text:#d9a900;
    --muted:#646d7e;
    --line:#e4e7ec;
    --field:#cfd4dd;
    --white:#fff;
    --red:#b42318;
    --green:#1d6b3f;
    --font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background-color:var(--white);
    /* A faint woven-paper texture across the entire page. */
    background-image:
        repeating-linear-gradient(45deg, transparent 0 11px, rgb(20 33 61 / 2.5%) 11px 12px),
        repeating-linear-gradient(-45deg, transparent 0 11px, rgb(20 33 61 / 2.5%) 11px 12px);
    color:var(--navy);
    font-family:var(--font);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased
}

a {
    color:var(--blue);
    text-underline-offset:3px
}

button,input,select,textarea {
    font:inherit;
    color:inherit
}

h1,h2,h3,p {
    margin:0
}

h1,h2,h3 {
    line-height:1.25;
    letter-spacing:-.01em
}

:focus-visible {
    outline:2px solid var(--blue);
    outline-offset:2px
}

[hidden] {
    display:none!important
}

.visually-hidden {
    position:absolute!important;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap
}

.skip-link {
    position:absolute;
    top:-100px;
    left:16px;
    z-index:50;
    padding:8px 12px;
    background:var(--white)
}

.skip-link:focus {
    top:8px
}

.muted {
    color:var(--muted)
}

/* The wordmark, big on the home page and small in the header */
.wm-blue {
    color:var(--blue)
}

.wm-gold {
    color:var(--gold-text)
}

/* Header and footer */
.site-header {
    border-bottom:1px solid var(--line)
}

.header-inner,.footer-inner,.page-shell {
    max-width:1080px;
    margin:0 auto;
    padding:0 24px
}

.header-inner {
    display:flex;
    align-items:center;
    gap:32px;
    min-height:60px
}

.brand {
    display:inline-flex;
    align-items:baseline;
    flex:0 0 clamp(112px,22vw,216px);
    width:clamp(112px,22vw,216px);
    font-family:var(--mono);
    font-size:clamp(10px,1.8vw,20px);
    letter-spacing:.04em;
    text-decoration:none;
    white-space:nowrap
}

/* Reserve the full wordmark's space so navigation never moves between pages. */
.brand > span {
    display:inline-flex;
    align-items:baseline
}

.brand-remainder {
    display:inline-block;
    overflow:hidden;
    opacity:1;
    white-space:nowrap
}

.brand-pale .brand-remainder {
    opacity:.12
}


.main-nav {
    display:flex;
    gap:24px
}

.main-link {
    color:var(--muted);
    text-decoration:none
}

.main-link:hover {
    color:var(--blue)
}

.site-nav {
    display:flex;
    align-items:center;
    gap:20px;
    margin-left:auto
}

.site-nav form {
    margin:0
}

.site-nav > * {
    white-space:nowrap
}

.nav-link {
    padding:0;
    border:0;
    background:none;
    color:var(--blue);
    text-decoration:none;
    cursor:pointer
}

.nav-link:hover {
    text-decoration:underline
}

.nav-menu {
    position:relative
}

.nav-menu summary {
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--navy);
    font-weight:600;
    cursor:pointer;
    list-style:none
}

.nav-menu summary::-webkit-details-marker {
    display:none
}

.nav-menu summary::after {
    content:'';
    width:6px;
    height:6px;
    border-right:1.5px solid var(--muted);
    border-bottom:1.5px solid var(--muted);
    transform:translateY(-2px) rotate(45deg)
}

.nav-menu-list {
    position:absolute;
    right:0;
    top:calc(100% + 12px);
    z-index:20;
    min-width:190px;
    margin:0;
    padding:6px 0;
    list-style:none;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:0 8px 24px rgb(20 33 61 / 12%)
}

.nav-menu-list a,.nav-menu-list .nav-link {
    display:flex;
    justify-content:space-between;
    width:100%;
    padding:8px 16px;
    color:var(--navy);
    text-align:left;
    text-decoration:none
}

.nav-menu-list a:hover,.nav-menu-list .nav-link:hover {
    background:var(--blue-tint);
    color:var(--blue);
    text-decoration:none
}

.nav-menu-list li:last-child {
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid var(--line)
}

.nav-badge {
    display:inline-grid;
    place-items:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:9px;
    background:var(--blue);
    color:var(--white);
    font-size:11px;
    font-weight:700
}

.site-footer {
    margin-top:64px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:14px
}

.footer-inner {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:8px 24px;
    padding-top:24px;
    padding-bottom:32px
}

/* Buttons and links */
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border:1px solid var(--blue);
    border-radius:6px;
    background:var(--blue);
    color:var(--white);
    font-weight:600;
    text-decoration:none;
    cursor:pointer
}

.button:hover {
    background:var(--blue-dark);
    border-color:var(--blue-dark)
}

.button-small {
    padding:6px 12px;
    font-size:14px
}

.button-outline,.button-gold {
    background:var(--white);
    border-color:var(--field);
    color:var(--blue)
}

.button-outline:hover,.button-gold:hover {
    background:var(--blue-tint);
    border-color:var(--blue)
}

.button:disabled {
    opacity:.6;
    cursor:wait
}

.danger-link {
    color:var(--red)
}

.inline-link {
    font-weight:600
}

.back-link,.cancel-link {
    color:var(--muted);
    font-size:14px;
    text-decoration:none
}

.back-link:hover,.cancel-link:hover {
    color:var(--blue)
}

/* Messages: success and error flashes are toasts at the bottom left */
.page-shell {
    min-height:calc(100vh - 180px)
}

.toasts {
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-width:min(420px,calc(100vw - 40px))
}

.flash {
    padding:10px 14px;
    border-left:3px solid var(--green);
    background:#f1f8f4;
    color:var(--green)
}

.toast {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 12px 12px 16px;
    border:0;
    border-radius:8px;
    background:var(--navy);
    color:var(--white);
    box-shadow:0 10px 30px rgb(20 33 61 / 25%);
    animation:toast-in .25s ease-out
}

.toast::before {
    content:'';
    flex:none;
    width:8px;
    height:8px;
    margin-top:8px;
    border-radius:50%;
    background:#4ade80
}

.toast.flash-error::before {
    background:#f87171
}

.toast span {
    flex:1
}

.toast-close {
    flex:none;
    padding:0 4px;
    border:0;
    background:none;
    color:inherit;
    font-size:20px;
    line-height:1;
    opacity:.7;
    cursor:pointer
}

.toast-close:hover {
    opacity:1
}

.toast-leaving {
    animation:toast-out .2s ease-in forwards
}

@keyframes toast-in {
    from {
        opacity:0;
        transform:translateY(12px)
    }
}

@keyframes toast-out {
    to {
        opacity:0;
        transform:translateX(-20px)
    }
}

.flash-error:not(.toast) {
    border-left-color:var(--red);
    background:#fdf3f2;
    color:var(--red)
}

.flash-notice {
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:6px 20px;
    border-left-color:var(--gold);
    background:#fffbea;
    color:var(--navy)
}

/* Home */
.hero {
    max-width:760px;
    margin:0 auto;
    padding:44px 0 32px;
    text-align:center
}

.wordmark {
    font-family:var(--mono);
    font-size:clamp(19px,5.2vw,56px);
    font-weight:400;
    letter-spacing:.05em;
    line-height:1.1;
    white-space:nowrap
}

.filter-bar {
    margin:32px 0 0
}

.filter-search {
    position:relative
}

.filter-search input {
    display:block;
    width:100%;
    height:56px;
    padding:0 104px 0 20px;
    border:1px solid var(--field);
    border-radius:8px;
    font-size:18px;
    box-shadow:0 1px 2px rgb(20 33 61 / 5%)
}

.filter-search input:focus {
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgb(11 58 159 / 14%)
}

.filter-search input::placeholder {
    color:#8b93a3
}

.filter-submit {
    position:absolute;
    top:8px;
    right:8px;
    bottom:8px;
    padding:0 18px;
    border:0;
    border-radius:6px;
    background:var(--blue);
    color:var(--white);
    font-weight:600;
    cursor:pointer
}

.filter-submit:hover {
    background:var(--blue-dark)
}

.filter-bar > ul {
    margin:6px 0 0;
    padding:0;
    list-style:none;
    color:var(--red);
    font-size:13px;
    text-align:left
}

/* Categories: a row of toggles, any number on at once */
.category-pills {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    min-width:0;
    margin:14px 0 0;
    padding:0;
    border:0
}

.pill-input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px
}

.pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border:1px solid var(--field);
    border-radius:999px;
    background:var(--white);
    color:var(--navy);
    font-size:14px;
    cursor:pointer;
    user-select:none
}

.pill:hover {
    border-color:var(--blue);
    color:var(--blue)
}

.pill-input:checked + .pill {
    border-color:var(--blue);
    background:var(--blue);
    color:var(--white)
}

.pill-input:checked + .pill::before {
    content:'';
    width:9px;
    height:5px;
    border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-1px) rotate(-45deg)
}

.pill-input:focus-visible + .pill {
    outline:2px solid var(--blue);
    outline-offset:2px
}

/* For sale / Wanted tabs and the list/grid switch */
.results-bar {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    border-bottom:1px solid var(--navy)
}

.tabs {
    display:flex;
    gap:4px
}

.tab {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    color:var(--muted);
    font-weight:600;
    cursor:pointer
}

.tab input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px
}

.tab:hover {
    color:var(--blue)
}

.tab:has(input:checked) {
    color:var(--navy);
    box-shadow:inset 0 -3px 0 var(--blue)
}

.tab:has(input:focus-visible) {
    outline:2px solid var(--blue);
    outline-offset:-2px
}

.tab .count {
    min-width:22px;
    padding:0 7px;
    border-radius:11px;
    background:var(--blue-tint);
    color:var(--blue);
    font-size:12px;
    line-height:20px;
    text-align:center
}

.view-switch {
    display:flex;
    gap:2px;
    margin-bottom:6px;
    padding:2px;
    border:1px solid var(--line);
    border-radius:7px
}

.view-button {
    display:grid;
    place-items:center;
    width:32px;
    height:28px;
    padding:0;
    border:0;
    border-radius:5px;
    background:none;
    color:var(--muted);
    cursor:pointer
}

.view-button svg {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round
}

.view-button:hover {
    color:var(--blue)
}

.view-button[aria-pressed=true] {
    background:var(--blue-tint);
    color:var(--blue)
}

.results-note {
    padding:12px 0 0;
    color:var(--muted);
    font-size:14px
}

.results-note .clear-link {
    margin-left:10px
}

.section-heading {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--navy)
}

.section-heading h2 {
    font-size:16px;
    font-weight:600
}

.sort-note,.clear-link {
    font-size:14px
}

.sort-note {
    color:var(--muted)
}

turbo-frame[aria-busy=true] .listing-grid {
    opacity:.5
}

/* Listing rows: tiger-striped, with a photo or a category icon on the left */
.listing-grid {
    border-top:1px solid var(--line)
}

.listing-card {
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    padding:10px 14px;
    border-bottom:1px solid var(--line);
    border-left:3px solid transparent
}

.listing-card:nth-child(even) {
    background:#f5f7fb
}

.listing-card:hover {
    background:var(--blue-tint)
}

.listing-wanted {
    border-left-color:var(--gold)
}

.card-photo,.card-icon {
    flex:none;
    width:56px;
    height:56px;
    border-radius:6px
}

.card-photo {
    object-fit:cover;
    background:var(--blue-tint);
    box-shadow:0 0 0 1px rgb(20 33 61 / 8%)
}

.card-icon {
    display:grid;
    place-items:center;
    background:var(--white);
    border:1px solid var(--line);
    color:var(--blue)
}

.card-icon svg {
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round
}

.card-main {
    flex:1;
    min-width:0
}

.listing-card h3 {
    overflow:hidden;
    font-size:16px;
    font-weight:600;
    white-space:nowrap;
    text-overflow:ellipsis
}

.card-link {
    color:var(--blue);
    text-decoration:none
}

.card-link::after {
    content:'';
    position:absolute;
    inset:0
}

.listing-card:hover .card-link {
    text-decoration:underline
}

.card-link:focus-visible {
    outline:none
}

.listing-card:has(.card-link:focus-visible) {
    outline:2px solid var(--blue);
    outline-offset:-2px
}

.book-meta,.card-footer {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px 12px;
    color:var(--muted);
    font-size:13px
}

.book-meta {
    margin-top:1px
}

/* Long author lists get cut short in the list; the listing page has them in full. */
.book-meta > span:first-child {
    max-width:36ch;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}

.book-meta .course-code,.book-meta .condition {
    margin-right:-6px
}

.listing-description {
    max-width:72ch;
    margin-top:1px;
    overflow:hidden;
    font-size:14px;
    white-space:nowrap;
    text-overflow:ellipsis
}

.course-code,.condition,.tag {
    display:inline-flex;
    align-items:center;
    padding:0 6px;
    border-radius:4px;
    font-size:11px;
    font-weight:600;
    line-height:1.7
}

.course-code,.tag {
    background:var(--blue-tint);
    box-shadow:inset 0 0 0 1px #d3ddf3;
    color:var(--blue);
    letter-spacing:.03em
}

.condition {
    box-shadow:inset 0 0 0 1px var(--line);
    background:var(--white);
    color:var(--muted)
}

.card-side {
    flex:none;
    min-width:96px;
    text-align:right
}

.card-side .card-footer {
    justify-content:flex-end;
    margin-top:0
}

.listing-price {
    font-size:17px;
    font-weight:700;
    font-variant-numeric:tabular-nums
}

.price-label {
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:500
}

.badge {
    display:inline-block;
    margin-left:6px;
    padding:1px 7px;
    border-radius:4px;
    font-size:12px;
    font-weight:700;
    vertical-align:2px
}

.badge-wanted {
    background:var(--gold);
    color:var(--navy)
}

/* Grid view: the same listings as cards */
.view-grid .listing-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:20px;
    padding-top:20px;
    border-top:0
}

.view-grid .listing-card {
    flex-direction:column;
    gap:12px;
    padding:0 0 14px;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    background:var(--white)
}

.view-grid .listing-card:nth-child(even) {
    background:var(--white)
}

.view-grid .listing-card:hover {
    border-color:var(--blue);
    background:var(--white)
}

.view-grid .listing-wanted {
    border-top:3px solid var(--gold)
}

.view-grid .card-photo,.view-grid .card-icon {
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    border:0;
    border-radius:0;
    box-shadow:none
}

.view-grid .card-icon {
    background:var(--blue-tint)
}

.view-grid .card-icon svg {
    width:56px;
    height:56px;
    stroke-width:1.2
}

.view-grid .card-main,.view-grid .card-side {
    width:100%;
    padding:0 14px
}

.view-grid .listing-card h3 {
    font-size:16px;
    white-space:normal
}

.view-grid .book-meta > span:first-child {
    max-width:100%
}

.view-grid .listing-description {
    display:none
}

.view-grid .card-side {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-top:auto;
    text-align:left
}

.view-grid .card-side .card-footer {
    flex-direction:row;
    gap:0 10px;
    font-size:13px
}

.view-grid .card-side .card-footer span {
    display:none
}

.view-grid .listing-price {
    font-size:18px
}

.empty-state {
    grid-column:1/-1;
    padding:56px 0;
    text-align:center
}

.empty-state h3 {
    margin-bottom:6px;
    font-size:20px
}

.empty-state p {
    margin-bottom:20px;
    color:var(--muted)
}

/* Listing page */
.listing-page {
    padding-top:32px
}

.owner-bar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:16px 24px;
    padding:20px 24px;
    border:1px solid #d9e1f0;
    border-left:4px solid var(--blue);
    border-radius:8px;
    background:var(--blue-tint)
}

.owner-summary {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 16px
}

.owner-summary h2 {
    margin:0;
    font-size:20px
}

.owner-status {
    margin:0
}

.owner-hint {
    flex-basis:100%;
    margin:0;
    color:var(--muted);
    font-size:14px
}

.owner-bar .status {
    margin-right:4px
}

.owner-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 14px
}

.owner-actions form {
    margin:0
}

.owner-bar .photo-notice {
    flex-basis:100%;
    margin:0
}

.contact-open:disabled {
    cursor:default;
    opacity:.65
}

.photo-notice {
    margin-top:12px;
    color:#7a5d00;
    font-size:14px
}

.listing-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:56px;
    align-items:start;
    margin-top:24px
}

.listing-kicker {
    color:var(--muted);
    font-size:14px
}

.listing-detail h1 {
    margin:4px 0 8px;
    font-size:clamp(26px,3.4vw,34px)
}

.listing-byline {
    display:flex;
    flex-wrap:wrap;
    gap:0 10px;
    margin:0 0 12px;
    color:var(--muted);
    font-size:17px
}

.listing-byline span + span::before {
    content:"·";
    margin-right:10px
}

/* The edition gets a line of its own under the author and year. */
.listing-byline .listing-edition {
    flex-basis:100%
}

.listing-byline .listing-edition::before {
    content:none
}

.listing-price-row {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px 16px
}

.listing-detail .listing-price {
    margin:0;
    font-size:24px
}

/* Details and description: a heading on the left, separated by thin rules. */
.listing-section {
    display:grid;
    grid-template-columns:140px minmax(0,1fr);
    gap:8px 24px;
    max-width:760px;
    padding:20px 0;
    border-top:1px solid var(--line)
}

.listing-section:first-of-type {
    margin-top:28px
}

.listing-section h2 {
    margin:0;
    font-size:17px;
    font-weight:600
}

.gallery {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,150px));
    gap:8px;
    margin:20px 0
}

.gallery-item {
    display:block;
    overflow:hidden;
    border-radius:6px;
    background:var(--blue-tint);
    box-shadow:0 0 0 1px rgb(20 33 61 / 8%);
    cursor:zoom-in
}

.gallery-item img {
    display:block;
    width:100%;
    aspect-ratio:1;
    object-fit:cover
}

.gallery-item:hover {
    box-shadow:0 0 0 2px var(--blue)
}

.lightbox {
    width:100vw;
    max-width:100vw;
    height:100vh;
    max-height:100vh;
    margin:0;
    padding:0;
    border:0;
    background:rgb(10 16 30 / 92%)
}

.lightbox::backdrop {
    background:rgb(10 16 30 / 60%)
}

.lightbox[open] {
    display:grid;
    place-items:center
}

.lightbox img {
    max-width:calc(100vw - 140px);
    max-height:calc(100vh - 100px);
    border-radius:4px;
    object-fit:contain
}

.lightbox img {
    transition:opacity .15s
}

.lightbox img.lightbox-loading {
    opacity:0;
    transition:none
}

.lightbox-nav,.lightbox-close {
    position:absolute;
    display:grid;
    place-items:center;
    border:0;
    background:rgb(255 255 255 / 12%);
    color:var(--white);
    cursor:pointer
}

.lightbox-nav:hover,.lightbox-close:hover {
    background:rgb(255 255 255 / 24%)
}

.lightbox-nav {
    top:50%;
    width:48px;
    height:48px;
    margin-top:-24px;
    border-radius:50%;
    font-size:30px;
    line-height:1
}

.lightbox-prev {
    left:20px
}

.lightbox-next {
    right:20px
}

.lightbox-close {
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border-radius:50%;
    font-size:24px
}

.lightbox-count {
    position:absolute;
    bottom:20px;
    left:0;
    right:0;
    color:rgb(255 255 255 / 80%);
    font-size:14px;
    text-align:center
}

.listing-facts {
    display:grid;
    grid-template-columns:max-content 1fr;
    gap:10px 20px;
    margin:0;
    font-size:16px
}

.listing-facts div {
    display:contents
}

.listing-facts dt {
    color:var(--muted)
}

.listing-facts dd {
    margin:0
}

.listing-condition .condition {
    padding:0;
    box-shadow:none;
    background:none;
    color:var(--navy);
    font-size:inherit;
    font-weight:600;
    line-height:inherit
}

.condition-note {
    display:block;
    color:var(--muted);
    font-size:14px
}

.listing-body {
    max-width:68ch;
    line-height:1.7
}

.contact-panel {
    position:sticky;
    top:24px;
    padding:24px;
    border-radius:8px;
    background:var(--blue-tint)
}

.contact-panel h2 {
    margin-bottom:16px;
    font-size:18px
}

.contact-panel .form-field {
    margin-bottom:14px
}

.contact-panel .form-field input,.contact-panel .form-field textarea {
    background:var(--white)
}

.contact-open {
    width:100%
}

/* Popups (the contact form) */
.modal {
    width:min(560px,calc(100vw - 32px));
    max-height:calc(100vh - 32px);
    padding:24px;
    border:0;
    border-radius:12px;
    box-shadow:0 24px 60px rgb(20 33 61 / 30%);
    color:var(--navy)
}

.modal::backdrop {
    background:rgb(20 33 61 / 45%)
}

.modal[open] {
    animation:modal-in .18s ease-out
}

@keyframes modal-in {
    from {
        opacity:0;
        transform:translateY(8px)
    }
}

.modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px
}

.modal-header h2 {
    font-size:20px
}

.modal-close {
    width:36px;
    height:36px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--blue-tint);
    color:var(--navy);
    font-size:22px;
    line-height:1;
    cursor:pointer
}

.modal-close:hover {
    background:#e2e9f8
}

.modal-about {
    margin:2px 0 20px;
    font-size:14px
}

.modal .form-field {
    margin-bottom:14px
}

.modal-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 16px
}

.modal-actions .form-help {
    flex:1;
    min-width:200px;
    margin:0
}

.phone-reveal {
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px solid #d9e1f0
}

.phone-reveal .button {
    width:100%
}

.phone-number {
    display:block;
    font-size:22px;
    font-weight:700;
    text-align:center;
    text-decoration:none
}

.turnstile {
    margin-bottom:14px
}

.turnstile-error {
    margin:6px 0 0;
    color:var(--red);
    font-size:13px
}

.honeypot {
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden
}

/* Forms */
.form-page {
    max-width:480px;
    margin:0 auto;
    padding-top:32px
}

.form-heading {
    margin:0 0 20px
}

.form-heading h1 {
    margin-bottom:6px;
    font-size:28px
}

.form-heading p {
    color:var(--muted)
}

/* Shown on log in and sign up while people move over from the old site. */
.old-site-notice {
    margin:0 0 20px;
    padding:10px 14px;
    border-left:3px solid var(--gold);
    background:#fffbea;
    color:var(--navy)
}

.form-panel {
    padding:28px;
    border:1px solid var(--line);
    border-radius:8px
}

.form-field {
    margin-bottom:18px
}

.form-field > label,.form-field > div > label,.photo-panel > label {
    display:block;
    margin-bottom:6px;
    font-size:14px;
    font-weight:600
}

.form-field input:not([type=checkbox],[type=radio]),.form-field select,.form-field textarea {
    display:block;
    width:100%;
    min-width:0;
    padding:9px 12px;
    border:1px solid var(--field);
    border-radius:6px;
    background:var(--white)
}

.form-field select {
    height:42px
}

.form-field textarea {
    min-height:120px;
    resize:vertical
}

.form-field input:focus,.form-field select:focus,.form-field textarea:focus {
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgb(11 58 159 / 14%)
}

.form-field input[readonly],.form-field input:disabled {
    background:#f6f7f9;
    color:var(--muted)
}

.form-field input::placeholder,.form-field textarea::placeholder {
    color:#8b93a3
}

.form-field ul,.photo-panel ul {
    margin:6px 0 0;
    padding:0;
    list-style:none;
    color:var(--red);
    font-size:14px
}

.form-field input[aria-invalid=true],.form-field select[aria-invalid=true] {
    border-color:var(--red)
}

.help-text,.form-help {
    margin-top:6px;
    color:var(--muted);
    font-size:13px
}

.checkbox-field {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px
}

.checkbox-field input {
    width:18px;
    height:18px;
    accent-color:var(--blue)
}

.form-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-top:8px
}

.form-links {
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-top:18px;
    color:var(--muted);
    font-size:14px
}

.form-panel p+p {
    margin-top:12px
}

.login-error {
    margin-bottom:18px
}

/* Listing form */
.listing-form-page {
    padding-top:32px
}

.listing-form {
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:32px;
    align-items:start
}

.listing-form-actions {
    grid-column:1/-1;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 16px
}

.type-choice > div > div {
    display:inline-flex;
    padding:3px;
    border:1px solid var(--field);
    border-radius:8px
}

.type-choice input[type=radio] {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px
}

.form-field.type-choice input[type=radio] + label {
    margin:0;
    padding:6px 16px;
    border-radius:5px;
    font-weight:500;
    cursor:pointer
}

.form-field.type-choice input[type=radio]:checked + label {
    background:var(--blue);
    color:var(--white)
}

.type-choice input[type=radio]:focus-visible + label {
    outline:2px solid var(--blue);
    outline-offset:2px
}

.input-prefix {
    display:flex
}

.input-prefix span {
    display:grid;
    place-items:center;
    padding:0 12px;
    border:1px solid var(--field);
    border-right:0;
    border-radius:6px 0 0 6px;
    color:var(--muted)
}

.input-prefix input:not([type=checkbox]) {
    border-radius:0 6px 6px 0
}

.input-with-button {
    display:flex;
    gap:8px
}

.input-with-button input {
    flex:1
}

.book-fields {
    margin:4px 0 22px;
    padding:16px 18px 0;
    border:0;
    border-left:3px solid var(--blue);
    background:var(--blue-tint)
}

.book-fields legend {
    float:left;
    width:100%;
    margin-bottom:12px;
    font-weight:600
}

.lookup-status {
    margin-top:6px;
    color:var(--green);
    font-size:14px
}

.lookup-status:empty {
    display:none
}

.lookup-status.lookup-error {
    color:var(--red)
}

.photo-panel {
    padding:20px
}

.photo-slots {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:8px
}

.photo-slot {
    position:relative;
    display:grid;
    place-items:center;
    aspect-ratio:1;
    overflow:hidden;
    border-radius:6px;
    color:var(--muted);
    font-size:13px
}

.photo-slot-empty {
    border:1px dashed var(--field);
    cursor:pointer
}

.photo-slot-empty:hover,.photo-slot-over {
    border-color:var(--blue);
    background:var(--blue-tint);
    color:var(--blue)
}

.photo-slot img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}

.photo-remove {
    position:absolute;
    left:6px;
    bottom:6px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:3px 8px;
    border-radius:4px;
    background:rgb(255 255 255 / 92%);
    color:var(--navy);
    font-size:12px
}

.photo-remove-new {
    border:0;
    cursor:pointer
}

.photo-remove-new:hover {
    background:var(--white);
    color:var(--red)
}

.photo-slot-removed img {
    opacity:.3
}

.photo-warning {
    color:#7a5d00
}

/* Account dashboard */
.dashboard {
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:48px;
    padding-top:36px
}

.dashboard-nav {
    position:sticky;
    top:24px;
    align-self:start
}

.dashboard-user {
    display:flex;
    flex-direction:column;
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line)
}

.dashboard-user span {
    overflow:hidden;
    color:var(--muted);
    font-size:14px;
    text-overflow:ellipsis
}

.dashboard-nav ul {
    margin:0 0 20px;
    padding:0;
    list-style:none
}

.dashboard-nav li a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
    border-radius:6px;
    color:var(--navy);
    text-decoration:none
}

.dashboard-nav li a:hover {
    background:var(--blue-tint);
    color:var(--blue)
}

.dashboard-nav a[aria-current=page] {
    background:var(--blue-tint);
    color:var(--blue);
    font-weight:600;
    box-shadow:inset 3px 0 0 var(--blue)
}

.dashboard-post {
    width:100%
}

.dashboard-title {
    margin-bottom:8px;
    font-size:28px
}

.dashboard-title .count {
    color:var(--muted);
    font-weight:400
}

.dashboard-stats {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:24px 0 8px
}

.dashboard-stats div {
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:8px
}

.dashboard-stats dt {
    color:var(--muted);
    font-size:14px
}

.dashboard-stats dd {
    margin:0;
    font-size:28px;
    font-weight:700
}

.dashboard-stats a {
    text-decoration:none
}

.dashboard-section {
    margin-top:36px
}

.dashboard-section h2 {
    margin-bottom:4px;
    font-size:18px
}

.dashboard-list {
    margin:12px 0 0;
    padding:0;
    list-style:none;
    border-top:1px solid var(--line)
}

.dashboard-list li {
    display:flex;
    align-items:center;
    gap:16px;
    padding:10px 0;
    border-bottom:1px solid var(--line)
}

.dashboard-list li a {
    flex:1;
    font-weight:600;
    text-decoration:none
}

.dashboard-list form {
    margin:0
}

.dashboard-more {
    margin-top:12px;
    font-size:14px
}

.dashboard-form {
    max-width:460px;
    margin-top:24px
}

.my-listing {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:10px 24px;
    padding:16px 0;
    border-bottom:1px solid var(--line)
}

.my-listing:first-of-type {
    margin-top:16px;
    border-top:1px solid var(--line)
}

.my-listing h2 {
    font-size:17px;
    font-weight:600
}

.my-listing h2 a {
    text-decoration:none
}

.my-listing h2 a:hover {
    text-decoration:underline
}

.my-listing-meta {
    display:flex;
    flex-wrap:wrap;
    gap:0 14px;
    font-size:14px
}

.my-listing-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    font-size:14px
}

.my-listing-actions form {
    margin:0
}

.status {
    display:inline-block;
    margin-bottom:2px;
    color:var(--muted);
    font-size:13px;
    font-weight:600
}

.status::before {
    content:'';
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:6px;
    border-radius:50%;
    background:var(--field);
    vertical-align:1px
}

.status-live::before {
    background:#2f9e5b
}

.status-expired::before {
    background:var(--gold)
}

.status-sold::before {
    background:var(--blue)
}

.account-note {
    margin-top:18px
}

.message-list {
    margin:16px 0 0;
    padding:0;
    list-style:none;
    border-top:1px solid var(--line)
}

.message-row a {
    display:grid;
    grid-template-columns:150px minmax(0,1fr) auto;
    grid-template-areas:"from about time" "from snippet time";
    gap:0 20px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    color:var(--navy);
    text-decoration:none
}

.message-row a:hover .message-about {
    text-decoration:underline
}

.message-from {
    grid-area:from;
    overflow:hidden;
    text-overflow:ellipsis
}

.message-about {
    grid-area:about;
    color:var(--blue);
    font-weight:600
}

.message-snippet {
    grid-area:snippet;
    overflow:hidden;
    color:var(--muted);
    font-size:14px;
    white-space:nowrap;
    text-overflow:ellipsis
}

.message-row time {
    grid-area:time;
    color:var(--muted);
    font-size:13px
}

.message-unread .message-from {
    font-weight:700
}

.message-unread .message-from::before {
    content:'';
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:8px;
    border-radius:50%;
    background:var(--blue);
    vertical-align:1px
}

.message-body {
    max-width:68ch;
    margin:24px 0;
    padding:20px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    line-height:1.7
}

.message-reply {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 16px
}

/* Compact condition rating: native radios retain labels and keyboard control. */
.condition-field { margin:0 0 14px; padding:0; border:0; }
.condition-field legend { margin-bottom:6px; font-size:14px; font-weight:600; }
.condition-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.condition-input { position:absolute; opacity:0; width:1px; height:1px; }
.form-field .condition-option { display:flex; flex-direction:column; align-items:center; gap:2px; margin:0; padding:6px 2px; border:1px solid transparent; border-radius:6px; background:var(--white); cursor:pointer; }
.condition-option .condition-star { color:var(--field); font-size:27px; line-height:1.1; }
.condition-option.is-rated .condition-star { color:var(--gold-text); }
.condition-option strong { font-size:12px; font-weight:500; text-align:center; }
.form-field .condition-option:hover { border-color:var(--field); }
.condition-input:checked + .condition-option { border-color:var(--blue); background:var(--blue-tint); }
.condition-input:focus-visible + .condition-option { outline:2px solid var(--blue); outline-offset:2px; }
.condition-description { min-height:2.6em; margin-top:6px; color:var(--muted); font-size:13px; line-height:1.3; }

/* Paper tags on the listing form */
.field-narrow {
    max-width:220px
}

.tag-input {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    min-height:42px;
    padding:5px 8px;
    border:1px solid var(--field);
    border-radius:6px;
    background:var(--white);
    cursor:text
}

.tag-input:focus-within {
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgb(11 58 159 / 14%)
}

.tag-list {
    display:contents;
    margin:0;
    padding:0;
    list-style:none
}

.tag {
    gap:4px;
    padding-right:2px;
    font-size:13px
}

.tag-invalid {
    background:#fdf3f2;
    box-shadow:inset 0 0 0 1px #f2c1bc;
    color:var(--red)
}

.tag-remove {
    padding:0 5px;
    border:0;
    background:none;
    color:inherit;
    font-size:15px;
    line-height:1;
    cursor:pointer;
    opacity:.7
}

.tag-remove:hover {
    opacity:1
}

.form-field .tag-input input.tag-entry {
    flex:1;
    min-width:120px;
    padding:4px;
    border:0;
    box-shadow:none
}

.tag-suggestions {
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    right:0;
    z-index:10;
    margin:0;
    padding:4px 0;
    list-style:none;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 8px 24px rgb(20 33 61 / 12%)
}

.tag-suggestions li {
    display:flex;
    gap:10px;
    padding:7px 12px;
    cursor:pointer
}

.tag-suggestions li strong {
    color:var(--blue)
}

.tag-suggestions li span {
    overflow:hidden;
    color:var(--muted);
    white-space:nowrap;
    text-overflow:ellipsis
}

.tag-suggestions li:hover,.tag-suggestions [aria-selected=true] {
    background:var(--blue-tint)
}

/* Title suggestions on the listing form reuse the paper suggestion list. */
.has-suggestions {
    position:relative
}

.title-suggestions li strong {
    flex-shrink:0;
    max-width:70%;
    overflow:hidden;
    font-weight:500;
    white-space:nowrap;
    text-overflow:ellipsis
}

.paper-list {
    display:flex;
    flex-direction:column;
    gap:4px
}

.paper-list .course-code {
    margin-right:6px
}

@media(max-width:900px) {
    .dashboard {
        grid-template-columns:1fr;
        gap:20px;
        padding-top:20px
    }

    .dashboard-nav {
        position:static
    }

    .dashboard-user,.dashboard-post {
        display:none
    }

    .dashboard-nav ul {
        display:flex;
        gap:4px;
        margin:0;
        overflow-x:auto;
        border-bottom:1px solid var(--line)
    }

    .dashboard-nav li a {
        white-space:nowrap
    }

    .dashboard-nav a[aria-current=page] {
        box-shadow:inset 0 -2px 0 var(--blue)
    }

    .listing-layout,.listing-form {
        grid-template-columns:1fr;
        gap:32px
    }

    .contact-panel {
        position:static
    }

    .listing-section {
        grid-template-columns:1fr
    }
}

@media(max-width:640px) {
    .header-inner,.footer-inner,.page-shell {
        padding-left:16px;
        padding-right:16px
    }

    .header-inner {
        gap:14px
    }

    .brand {
        font-size:clamp(10px,1.8vw,15px);
        letter-spacing:.02em
    }

    .site-nav {
        gap:14px
    }

    .main-link:first-child {
        display:none
    }

    .hero {
        padding:36px 0 24px
    }

    .filter-search input {
        height:50px;
        padding:0 88px 0 14px;
        font-size:16px
    }

    .filter-submit {
        padding:0 12px
    }

    .category-pills {
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:4px
    }

    .pill {
        white-space:nowrap
    }

    .view-grid .listing-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px
    }

    .view-grid .card-main {
        flex-basis:auto
    }

    .view-grid .card-side {
        padding-left:14px
    }


    .listing-card {
        flex-wrap:wrap;
        gap:2px 12px;
        padding:10px 8px
    }

    .card-photo,.card-icon {
        width:56px;
        height:56px
    }

    .card-icon svg {
        width:24px;
        height:24px
    }

    .card-main {
        flex-basis:calc(100% - 68px)
    }

    .card-side {
        flex-basis:100%;
        display:flex;
        justify-content:space-between;
        align-items:baseline;
        padding-left:68px;
        text-align:left
    }

    .card-side .card-footer {
        flex-direction:row;
        gap:0 12px;
        margin:0
    }

    .dashboard-stats {
        gap:8px
    }

    .dashboard-stats div {
        padding:12px
    }


    .lightbox img {
        max-width:100vw;
        max-height:80vh;
        border-radius:0
    }

    .lightbox-nav {
        top:auto;
        bottom:16px;
        margin:0
    }

    .lightbox-count {
        bottom:30px
    }

    .gallery {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .toasts {
        left:12px;
        right:12px;
        bottom:12px;
        max-width:none
    }

    .form-panel {
        padding:20px 16px
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .message-row a {
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:"from time" "about about" "snippet snippet"
    }
}

.pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 2rem 0; }

/* Listing composer: intent first, optional shortcuts and useful guidance. */
.isbn-helper { margin:0 0 16px; padding:0; border:0; min-width:0; }
.optional-lookup { padding:18px 20px; background:rgb(255 255 255 / 80%); }
.optional-lookup summary,.photo-panel summary { font-weight:600; cursor:pointer; }
.optional-lookup[open] > .form-help,.photo-panel[open] > .form-help { margin:12px 0 16px; }
.optional-lookup .form-field { margin-bottom:0; }

/* Explanations live on About rather than in the everyday forms. */

.about-page { max-width:70ch; margin:0 auto; padding:36px 0; }
.about-page h1 { margin-bottom:16px; font-size:30px; }
.about-page h2 { margin:28px 0 10px; font-size:20px; }
.about-page p { margin-bottom:12px; line-height:1.7; }
.about-page .about-notice { margin-bottom:24px; padding:10px 14px; border-left:3px solid var(--gold); background:#fffbea; line-height:1.5; }
.about-contact { margin-top:16px; }
.about-contact .form-field { margin-bottom:14px; }
.optional-lookup[open] .form-field { margin-top:16px; }
.photo-panel[open] summary { margin-bottom:16px; }

/* Keep the posting controls within easy reach. */
.listing-form-page { padding-top:20px; }
.listing-form-page > .form-heading { margin-bottom:14px; }
.listing-form { gap:20px; }
.listing-form-main.form-panel { padding:20px; }
.listing-form-main .form-field { margin-bottom:14px; }
.listing-form-main .book-fields { margin-bottom:16px; padding:12px 14px 0; }
.listing-form-main .book-fields legend { margin-bottom:8px; }
.listing-meta-grid { grid-template-columns:1.1fr .9fr 1fr; gap:0 12px; }
@media(max-width:640px) {
    .listing-meta-grid { grid-template-columns:1fr; }
    .listing-form-main.form-panel { padding:16px; }
}
.listing-form-main .book-fields > .form-grid { clear:both; }
.listing-form-main textarea { min-height:96px; }

.book-details-grid { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) { .book-details-grid { grid-template-columns: 1fr; } }

.book-cover { position:relative; overflow:hidden; }
.book-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; background:var(--white); }
.book-cover.has-cover img { opacity:1; }
.book-cover-detail { display:none; width:180px; height:240px; margin:0 0 20px; }
.book-cover-detail.has-cover { display:grid; }