/* Small app-only extras on top of the design system. */
.hero-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.hero-brand .logo svg {
  height: 72px;
  width: auto;
}
.illustration-slot {
  min-height: 16rem;
  display: grid;
  place-items: center;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--c-sand-50, var(--c-paper));
  padding: var(--sp-6);
  color: var(--text-muted);
}
.illustration-slot figcaption,
.illustration-slot .illustration-slot__label {
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--sp-2);
}
.hero-slots {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-8) 0;
}
@media (min-width: 800px) {
  .hero-slots { grid-template-columns: 1fr 1fr; }
}
.chat__manual-refresh { margin: var(--sp-3) 0 0; }

.prose { max-width: 40rem; }
.prose p, .prose li { line-height: 1.6; }
.prose h2 { margin-top: var(--sp-10, 2.5rem); }
.prose .sign-off { margin-top: var(--sp-6, 1.5rem); }
.prose .sign-off em { display: block; font-style: italic; }
.about-illustration { margin: var(--sp-8, 2rem) 0; }
.table-wrap { overflow-x: auto; }

/* About page (page-specific; uses only bookswap.css tokens) */
.about-hero{padding-block:var(--sp-8) var(--sp-4);overflow:hidden}
.about-hero__grid{display:grid;gap:var(--sp-6);align-items:center}
.about-hero__title{display:flex;flex-direction:column;gap:var(--sp-3)}
.about-hero__title .display{font-size:clamp(2.5rem,1.6rem + 3.8vw,4.25rem);color:var(--c-teal-900)}
.about-hero__lead{font-family:var(--font-display);font-variation-settings:"SOFT" 100;font-size:var(--fs-xl);line-height:1.35;color:var(--text);max-width:24ch;margin-top:var(--sp-5);font-weight:500}
.about-hero__by{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6);color:var(--text-muted);font-size:var(--fs-sm)}
.about-hero__by::before{content:"";width:2.5rem;height:3px;border-radius:2px;background:var(--c-red-600)}
.about-hero__art{margin:0 calc(var(--gutter) * -0.5)}
.about-hero__art img{display:block;width:100%;height:auto}
@media (min-width:960px){
  .about-hero{padding-block:var(--sp-12) var(--sp-8)}
  .about-hero__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--sp-10)}
  .about-hero__art{margin:0 calc(var(--gutter) * -1) 0 0}
}
.about-letter-wrap{position:relative;padding-bottom:var(--sp-8)}
.about-letter-wrap::before{content:"";position:absolute;inset:var(--sp-16) 0 0;background:var(--c-sand-200);border-radius:var(--r-xl) var(--r-xl) 0 0;z-index:-1}
@media (min-width:960px){.about-letter-wrap::before{inset:var(--sp-20) 0 0;border-radius:48px 48px 0 0}}
.about-letter{position:relative;max-width:46rem;margin-inline:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:var(--sp-8) var(--sp-5) var(--sp-10)}
@media (min-width:720px){.about-letter{padding:var(--sp-12) var(--sp-12) var(--sp-16)}}
.about-letter::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:28px;transform:translateX(-50%) rotate(-2deg);background:var(--c-gold-500);opacity:.85;border-radius:3px;clip-path:polygon(2% 0,98% 6%,100% 50%,97% 100%,3% 94%,0 50%)}
.about-prose{max-width:65ch;margin-inline:auto;font-size:var(--fs-md);line-height:1.7}
.about-prose>*+*{margin-top:var(--sp-5)}
.about-prose h2{margin-top:var(--sp-12);color:var(--c-teal-900)}
.about-prose h2+*{margin-top:var(--sp-4)}
.about-prose .eyebrow{display:block;margin-bottom:var(--sp-2)}
.about-prose em{font-style:italic}
.about-intro{font-size:var(--fs-lg);line-height:1.6}
.about-intro::first-line{font-weight:700;color:var(--c-teal-900)}
.about-pull{margin:var(--sp-10) 0!important;padding:var(--sp-6) 0;text-align:center;border-block:2px dashed var(--c-sand-300)}
.about-pull img{display:block;width:44px;height:44px;margin:0 auto var(--sp-3)}
.about-pull p{font-family:var(--font-display);font-variation-settings:"SOFT" 100,"opsz" 144;font-weight:600;font-size:var(--fs-2xl);line-height:1.2;color:var(--c-teal-900);text-wrap:balance}
.about-for{list-style:none;padding:0;display:grid;gap:var(--sp-3);font-size:var(--fs-base);line-height:1.55}
@media (min-width:640px){.about-for{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}}
.about-for li{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);background:var(--c-paper);border:1px solid var(--border)}
.about-for__icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c-teal-100);color:var(--c-teal-900)}
.about-for__icon .icon{width:24px;height:24px}
.about-for li:nth-child(2) .about-for__icon{background:var(--c-red-100);color:var(--c-red-800)}
.about-for li:nth-child(3) .about-for__icon{background:var(--c-gold-100);color:var(--c-gold-900)}
.about-for li:nth-child(4) .about-for__icon{background:var(--c-sand-200);color:var(--c-ink)}
.about-signoff{margin-top:var(--sp-8)!important}
.about-signoff .about-sig{display:block;width:12rem;height:auto;margin:var(--sp-2) 0 var(--sp-1) -.4rem}
.about-signoff__note{font-style:italic;color:var(--text-muted)}
.about-cta{background:var(--c-night);color:var(--c-paper);border-radius:var(--r-xl);padding:var(--sp-10) var(--sp-6);display:grid;gap:var(--sp-6);align-items:center;position:relative;overflow:hidden}
.about-cta h2{color:var(--c-paper)}
.about-cta p{color:var(--c-teal-100);font-size:var(--fs-md);max-width:38ch;margin-top:var(--sp-3)}
.about-cta__head{display:flex;gap:var(--sp-4);align-items:flex-start}
.about-cta__loop{flex:none;width:56px;height:56px;margin-top:-2px}
@media (max-width:639px){.about-cta .btn{flex:1 1 100%}}
.about-cta .btn-row{position:relative}
@media (min-width:860px){.about-cta{grid-template-columns:1fr auto;padding:var(--sp-12) var(--sp-12)}}
.about-cta-wrap{padding-block:var(--sp-12) 0}
/* Kids and families (designer-written copy, pending approval) */
.about-fam{scroll-margin-top:calc(var(--sp-20) + var(--sp-8));padding-block:var(--sp-12) 0}
.about-fam__inner{display:grid;gap:var(--sp-8)}
@media (min-width:960px){.about-fam__inner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-12);align-items:start}}
.about-fam__intro .lead{margin-top:var(--sp-4);color:var(--text)}
.about-fam__intro .btn-row{margin-top:var(--sp-6)}
.about-fam__steps{list-style:none;margin:0;padding:0;counter-reset:fam;display:grid;gap:var(--sp-3)}
@media (min-width:640px){.about-fam__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}.about-fam__steps li:last-child{grid-column:1/-1}}
.about-fam__steps li{counter-increment:fam;position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 44px + var(--sp-4));box-shadow:var(--shadow-sm)}
.about-fam__steps li::before{content:counter(fam);position:absolute;left:var(--sp-5);top:var(--sp-5);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c-teal-700);color:var(--c-white);font:var(--fw-display) var(--fs-lg)/1 var(--font-display);font-variation-settings:"SOFT" 100}
.about-fam__steps li:nth-child(even)::before{background:var(--c-red-600)}
.about-fam__steps h3{font-size:var(--fs-md);line-height:var(--lh-snug)}
.about-fam__steps p{margin-top:var(--sp-1);color:var(--text-muted);font-size:var(--fs-base)}

.about-hero--legal{padding-block:var(--sp-8) var(--sp-2)}
.about-hero--legal .about-hero__lead{max-width:36rem}
.about-prose h3{margin-top:var(--sp-8);color:var(--c-teal-900);font-size:var(--fs-lg)}
.about-prose h3+*{margin-top:var(--sp-3)}
.about-prose ul,.about-prose ol{padding-left:1.25rem;display:grid;gap:var(--sp-2)}
.about-prose li+li{margin-top:0}
.about-prose .legal-toc{margin:var(--sp-8) 0;padding:var(--sp-5);background:var(--c-paper);border:1px solid var(--border);border-radius:var(--r-md)}
.about-prose .legal-toc__title{margin:0;font-size:var(--fs-md);color:var(--c-teal-900)}
.about-prose .legal-toc ol{margin:var(--sp-3) 0 0;padding-left:1.25rem;gap:var(--sp-1);font-size:var(--fs-sm)}
.legal-table-wrap{overflow-x:auto;margin-top:var(--sp-5)}
.legal-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.45}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:.7rem .75rem;border-bottom:1px solid var(--border)}
.legal-table thead th{background:var(--c-teal-700);color:var(--c-white);font-weight:700;border-bottom:0}
.legal-table tbody th{white-space:nowrap;color:var(--c-teal-900)}
.legal-table tbody tr:nth-child(even){background:var(--c-paper)}
.about-prose .about-contact{margin-top:var(--sp-12)}
#who,#scope,#collect,#notice,#why,#others,#children,#sharing,#retention,#access,#cookies,#breaches,#contact,#changes,#ipps,
#agreement,#what,#eligibility,#account,#listing,#swaps,#postage,#messaging,#acceptable,#fees,#ip,#privacy,#liability,#closing,#general{scroll-margin-top:calc(var(--sp-20) + var(--sp-6))}

/* Book-card owner link sits above the stretched title hit area. */
.book-card > a:first-child{display:block;text-decoration:none}
.book-card__owner a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);text-decoration:none}
.book-card__owner-name{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.15em}

/* Settings: shrink non-block buttons on desktop; style the file picker. */
@media (min-width:640px){.form>.btn:not(.btn--block){align-self:flex-start}}
.input[type="file"]{padding:var(--sp-2)}
.input[type="file"]::file-selector-button{font:700 var(--fs-sm)/1 var(--font-body);min-height:var(--tap);padding:0 var(--sp-4);margin-right:var(--sp-3);border:2px solid var(--c-teal-700);border-radius:var(--r-pill);background:var(--c-white);color:var(--c-teal-700);cursor:pointer}

/* Close the paper strip under a full-bleed auth aside. */
main:has(> .auth:last-child) + .site-footer{margin-top:0}

/* Desktop account dropdown (hidden with .site-nav below 1080px). */
.account-menu{position:relative;margin-left:var(--sp-2)}
.account-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-3) 0 var(--sp-1);border:0;border-radius:var(--r-md);background:transparent;color:var(--text);cursor:pointer}
.account-menu>summary::-webkit-details-marker{display:none}
.account-menu>summary::marker{content:""}
.account-menu>summary:hover,.account-menu[open]>summary{background:var(--c-teal-50);color:var(--c-teal-900)}
.account-menu>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.account-menu>summary .account-menu__chevron{flex:none;width:18px;height:18px;transition:transform var(--dur) var(--ease-out)}
.account-menu[open]>summary .account-menu__chevron{transform:rotate(180deg)}
/* Keep the header search from shrinking so “Search books” stays fully visible. */
.site-header__search{flex-shrink:0;min-width:18rem}
.site-header__search .search-bar{min-width:18rem}
.site-header__search .search-bar input{min-width:12ch}
.account-menu__panel{position:absolute;right:0;top:calc(100% + var(--sp-2));z-index:50;min-width:16rem;padding:var(--sp-2);display:flex;flex-direction:column;background:var(--c-white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.account-menu[open] .account-menu__panel{animation:bs-menu-in var(--dur) var(--ease-out)}
.account-menu__header{padding:var(--sp-2) var(--sp-3)}
.account-menu__signed-in{font-size:var(--fs-sm);color:var(--text-muted)}
.account-menu__who{font-weight:700;color:var(--text)}
.account-menu__header + .account-menu__group,
.account-menu__group + .account-menu__group{border-top:1px solid var(--border);margin:var(--sp-1) 0;padding-top:var(--sp-1)}
.account-menu__panel a:not(.btn),.account-menu__panel .link-btn{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--r-md);border:0;background:none;font:400 var(--fs-base)/1.2 var(--font-body);color:var(--text);text-decoration:none;width:100%;text-align:left;cursor:pointer}
.account-menu__panel a:not(.btn):hover,.account-menu__panel .link-btn:hover{background:var(--c-teal-50);color:var(--c-teal-900)}
.account-menu__panel a[aria-current="page"]{font-weight:700;background:var(--c-teal-50);color:var(--c-teal-900)}
.account-menu__panel .link-btn:focus-visible,.account-menu__panel a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.account-menu__panel form{margin:0}
.site-nav .account-menu a:not(.btn){display:flex;white-space:normal}
.site-nav .account-menu a[aria-current="page"]::after{content:none;display:none}
/* 1px inset edge on typographic covers so light palette colours stay defined. */
.cover:has(.cover__title){box-shadow:inset 0 0 0 1px rgba(31,42,46,.08),inset 7px 0 0 rgba(0,0,0,.12),inset 9px 0 0 rgba(255,255,255,.12),0 10px 18px -12px rgba(15,46,53,.6)}
.book-card:hover .cover:has(.cover__title){box-shadow:inset 0 0 0 1px rgba(31,42,46,.08),inset 7px 0 0 rgba(0,0,0,.12),inset 9px 0 0 rgba(255,255,255,.12),0 18px 26px -14px rgba(15,46,53,.6)}
/* Contact line on the About page (markdown stays untouched). */
.about-contact{margin-top:var(--sp-8);font-size:var(--fs-base);color:var(--text)}
/* Admin role badge on admin user lists (not in the design system). */
.badge--admin{background:var(--c-teal-900);color:var(--c-white)}

/* Cover picker on touch screens (iOS Safari). Taps on the cover image or caption
   must reach the <label> so the hidden radio is checked: iOS does not reliably
   forward taps on an <img> inside a label. Stop the long-press image menu, and
   only use the hover style on devices that can hover, so a sticky iOS :hover is
   never mistaken for the selected state. */
.cover-option{-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.cover-option img,.cover-option .cover-option__label,.cover-option .cover-option__check{pointer-events:none}
.cover-option img{-webkit-touch-callout:none;-webkit-user-drag:none}
@media (hover:none){.cover-option:hover{background:transparent;border-color:transparent}}
.cover-option:has(input:checked){border-color:var(--primary);background:var(--c-teal-50)}
.cover-option:has(input:checked) .cover-option__label{color:var(--c-teal-900);font-weight:700}
#covers{scroll-margin-top:calc(var(--sp-20) + var(--sp-6))}