/* Inkwell — editorial dark. Warm near-black ground so cover art reads as art,
   Instrument Serif for display, Archivo for anything functional. */

:root {
  --ground: #14120d;
  --surface: #1d1a13;
  --surface-2: #241f17;
  --rule: #322d22;
  --rule-strong: #f4efe2;
  --text: #f4efe2;
  --body: #b9b09b;
  --muted: #948b78;
  --faint: #4d4636;
  --accent: #e0563a;
  --shelf: #66a98a;
  --disp: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --ui: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 64px);
  /* Cover size, driven by the poster slider and remembered per device. */
  --poster: 150px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 16px/1.5 var(--ui);
  padding: 0 var(--gutter) 96px;
  overflow-x: hidden;
}
/* A hidden tooltip still has a box. `visibility: hidden` keeps it in layout so
   it can transition, and an absolutely positioned box 290px wide anchored near
   the right edge extends the *page's* scrollable width -- which is why an iPad
   could scroll a couple of hundred pixels into black. body's overflow-x does
   not settle it when the root element is the scroller, and `clip` rather than
   `hidden` avoids making the root a scroll container of its own. Rails keep
   their own overflow-x and are unaffected. */
html { overflow-x: clip; }
/* A quiet, static film grain — closer to Zen's material feel than a visible
   paper pattern. It is deliberately above the interface but never interactive. */
body::before { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .052;
  mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #f2765a; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }

.disp { font-family: var(--disp); font-weight: 400; letter-spacing: -0.02em; }
.kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.hidden { display: none !important; }

/* ---------- masthead ---------- */
.masthead { display: flex; align-items: flex-end; gap: clamp(18px, 3vw, 52px); padding: 34px 0 16px; flex-wrap: wrap; }
.masthead-actions { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.brand { display: flex; align-items: flex-start; gap: 11px; font-family: var(--disp); font-size: clamp(34px, 5vw, 52px); line-height: 0.9; letter-spacing: -0.02em; }
.brand img { width: clamp(31px, 4vw, 43px); height: clamp(31px, 4vw, 43px); object-fit: contain; margin-top: 2px; flex: none; }
.brand small { display: block; margin-top: 5px; }
.search { display: flex; align-items: center; gap: 10px; min-width: 260px; flex: 1 1 320px; max-width: 420px;
  border-bottom: 1.5px solid var(--text); padding-bottom: 7px; }
.search input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--text);
  font-family: var(--disp); font-size: 20px; outline: none;
}
.search input::placeholder { color: var(--faint); font-style: italic; }
/* Settings left the nav for the masthead: it is a once-a-month screen, and the
   fourth nav slot now belongs to characters & creators. */
.masthead-settings { flex: none; color: var(--muted); padding: 6px; line-height: 0;
  border: 1px solid transparent; }
.masthead-settings:hover { color: var(--text); border-color: var(--rule); }
.masthead-settings[aria-current='true'] { color: var(--accent); border-color: var(--rule); }

/* The chain, made visible. Sits above the title on every screen that has
   ancestry: publisher pages, thread pages and the volume sheet. */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; padding: 26px 0 8px; }
.crumbs button { color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.crumbs button:hover { color: var(--accent); }
.crumbs .current { color: var(--body); }
.crumb-sep { color: var(--faint); font-size: 10px; }
.sheet .crumbs { padding: 0 0 12px; }

.shelf-count { text-align: right; }
.shelf-count b { display: block; font-family: var(--disp); font-size: 30px; font-weight: 400; line-height: 1; }

nav { display: flex; gap: clamp(16px, 3vw, 34px); padding: 13px 0;
  border-top: 1.5px solid var(--rule-strong); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav button { white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; }
nav button[aria-current='true'] { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- shared section furniture ---------- */
.section-head { display: flex; align-items: baseline; gap: 16px; padding: 42px 0 18px; flex-wrap: wrap; }
.section-head .no { color: var(--accent); }
.section-head h2 { font-family: var(--disp); font-size: clamp(24px, 3.4vw, 34px); font-weight: 400; margin: 0; letter-spacing: -0.015em; }
.section-head .aside { margin-left: auto; }
.discover-explore { margin-left: auto; color: var(--text); white-space: nowrap; border-bottom: 1px solid var(--muted); padding-bottom: 3px; }
.section-head .aside + .discover-explore { margin-left: 0; }
.discover-explore:hover { color: var(--accent); border-color: var(--accent); }
.discover-more-loading, .discover-exhausted { padding: 32px 0 10px; margin: 0; color: var(--muted); text-align: center; }

.browse-lede { padding: 34px 0 26px !important; }
.browse-lede h1 { font-size: clamp(34px, 5vw, 58px) !important; }
/* A class-level `display` beats the UA stylesheet's `[hidden] { display: none }`
   on specificity, so any element given `display: grid`/`flex` here silently
   ignores the hidden attribute. That broke the collapsed lede and the
   request-parts unfurl at the same time. Settle it once, globally. */
[hidden] { display: none !important; }

.account-button { color: var(--text); white-space: nowrap; border: 1px solid var(--rule); padding: 9px 12px; }
.account-panel { max-width: 520px; margin: clamp(48px, 10vh, 120px) auto; padding: 32px; border: 1px solid var(--rule); background: var(--surface); }
.account-panel h1 { font: 400 clamp(34px, 5vw, 58px)/1 var(--disp); margin: 12px 0 32px; }
.account-form { display: grid; gap: 20px; }
.account-form label, .invite-link label { display: grid; gap: 8px; color: var(--body); font-size: 13px; }
.account-form input, .invite-link input { width: 100%; min-width: 0; border: 1px solid var(--rule); background: var(--ground); color: var(--text); padding: 12px; font: 15px var(--ui); }
.account-form .primary { justify-self: start; }
.invite-link { max-width: 700px; margin: 16px 0 24px; }
.follow-issues { display: grid; gap: 5px; margin-top: 12px; color: var(--body); font-size: 12px; }
.account-signout { margin-top: 24px; }
.account-list { display: grid; border: 1px solid var(--rule); }
.account-list > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.account-list > div:last-child { border-bottom: 0; }
.account-list span { color: var(--muted); font-size: 12px; margin-right: auto; }
.account-row > div:first-child { display: grid; gap: 3px; margin-right: auto; }
.account-row details { position: relative; }
.account-row details[open] { flex-basis: 100%; order: 3; }
.account-row summary { display: inline-block; list-style: none; cursor: pointer; }
.account-row summary::-webkit-details-marker { display: none; }
.user-permission-form { display: grid; gap: 16px; padding: 20px 0 8px; }
.user-permission-form > label { display: grid; gap: 6px; color: var(--body); font-size: 12px; }
.user-permission-form > small { color: var(--muted); }
.user-permission-form .primary { justify-self: start; }
@media (max-width: 720px) {
  .proposal-card .request-series-actions { grid-column: 2; justify-content: flex-start; }
}

.lede { padding: 52px 0 44px; border-bottom: 1px solid var(--rule); display: grid; gap: 22px; }
.lede h1 { font-family: var(--disp); font-size: clamp(44px, 8vw, 92px); font-weight: 400; line-height: 0.88; letter-spacing: -0.03em; margin: 0; }
.lede h1 em { font-style: italic; }
.lede p { margin: 0; color: var(--body); max-width: 46ch; font-size: 16px; line-height: 1.6; }

/* On a return visit the page opens straight onto its content: the lede is one
   quiet kicker line, nothing more. */
.lede-brief { padding: 26px 0 14px; gap: 0; border-bottom: 1px solid var(--rule); }

/* The first visit gets a veil instead. It covers the page, the words arrive
   blurred and settle, and the whole thing dissolves — about three seconds, and
   any key, click or scroll ends it early. */
.veil { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 0 8vw; background: var(--ground); opacity: 1;
  transition: opacity .78s cubic-bezier(.4,0,.2,1); }
.veil-out { opacity: 0; pointer-events: none; }
/* Not `ch`: it resolves against this element's inherited 15px body size, not
   the 84px display face inside it, which squeezed the headline into a column
   four words wide. */
.veil-copy { max-width: 900px; text-align: center; display: grid; gap: 22px; justify-items: center; }
.veil-copy h1 { font-family: var(--disp); font-weight: 400; color: var(--text);
  font-size: clamp(44px, 7vw, 84px); line-height: .92; letter-spacing: -0.03em; margin: 0;
  animation: veilWords 1.05s cubic-bezier(.2,.7,.3,1) both; }
.veil-copy h1 em { font-style: italic; }
.veil-copy > .kicker { animation: veilWords .8s cubic-bezier(.2,.7,.3,1) .1s both; }
.veil-copy p { margin: 0; max-width: 48ch; color: var(--body); font-size: 16px; line-height: 1.62;
  animation: veilWords .9s cubic-bezier(.2,.7,.3,1) .34s both; }
@keyframes veilWords {
  from { opacity: 0; filter: blur(14px); transform: translateY(16px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
/* Asked for less motion: the veil still appears, but it does not perform. */
.veil-still .veil-copy > *, .veil-still .veil-copy h1 { animation: none; }
.veil-still { transition-duration: .3s; }

/* ---------- covers ---------- */
.cover { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface-2); }
.cover::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(244, 239, 226, 0.24); pointer-events: none; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover .fallback { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: 20px 16px;
  font-family: var(--disp); font-size: 20px; line-height: 1.02; color: var(--text); }
.cover .flag { position: absolute; right: 0; top: 14px; background: var(--shelf); color: var(--ground);
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; }

/* ---------- grids ---------- */
.grid { display: grid; gap: 26px 22px; grid-template-columns: repeat(auto-fill, minmax(var(--poster), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; gap: 11px; text-align: left; }
.card .cover { transform-origin: center center; will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .card { transition: z-index 0s linear .18s; }
  .card:hover { z-index: 3; transition-delay: 0s; }
  .card .cover { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .22s ease; }
  .card:hover .cover { transform-origin: center center; transform: perspective(900px) translate3d(var(--cover-x, 0px), calc(var(--cover-y, 0px) - 4px), 18px) rotateX(var(--cover-rx, 0deg)) rotateY(var(--cover-ry, 0deg)) scale(1.085); box-shadow: 0 14px 26px rgba(0,0,0,.34); filter: saturate(1.05) contrast(1.025); }
}
.card .meta { display: flex; flex-direction: column; gap: 4px; }
.card h3 { margin: 0; font-size: clamp(13px, calc(9px + var(--poster) * 0.026), 17px); font-weight: 600; line-height: 1.32; }
.card .sub { font-size: 11.5px; color: var(--muted); }
/* The run this actually is — the only thing telling six identically-named
   volumes apart — so it keeps its own line and does not get truncated away. */
.card .sub.range { color: var(--body); font-variant-numeric: tabular-nums; }
.card .act { align-self: flex-start; margin-top: 4px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.03em; border-bottom: 1px solid var(--muted); padding-bottom: 3px; }
.card .act.owned { color: var(--shelf); border-color: #3c5c4c; }
.card .act[disabled] { opacity: 0.75; cursor: default; }
.shelf-library-card .cover-btn { display: block; border: 0; padding: 0; color: inherit; background: none; text-align: left; }
.shelf-toolbar { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; }
.shelf-toolbar input { flex: 1; max-width: 420px; border: 0; border-bottom: 1px solid var(--text); background: none; color: var(--text); padding: 8px 0; font: 20px var(--disp); outline: none; }
.shelf-toolbar input::placeholder { color: var(--faint); font-style: italic; }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: var(--poster); gap: 22px;
  overflow-x: auto; padding: 18px 0 24px; margin: -18px 0 0; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent); }
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail.dragging * { pointer-events: none; }
.rail-sentinel { width: 2px; height: 2px; align-self: center; opacity: 0; }

/* A publisher page renders up to 96 cards, most of them off screen. Skipping
   layout and paint for those is the single biggest rendering win on iPad and
   phone; contain-intrinsic-size keeps the scrollbar honest, and `auto` lets the
   browser remember each card's real height once it has been rendered.
   Deliberately not applied to .rail cards: a horizontal scroller needs its
   children measured to know how far it scrolls. */
.grid > .card { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.index .row { content-visibility: auto; contain-intrinsic-size: auto 92px; }
.rail > * { scroll-snap-align: start; }

/* ---------- discovery paths ---------- */
.path-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--rule); background: var(--rule); }
.path-card { min-height: 345px; position: relative; display: grid; grid-template-rows: 168px 1fr; overflow: hidden; background: var(--surface); }

/* ---------- stacked cover art ---------- */
/* Shared by starter paths, publisher tiles and format tiles. Books lean into
   each other like a shelf in a kid's room rather than sitting in fixed slots:
   a flow row with negative margins, centred, clipped by the card. How many are
   visible is a container query, so a wide tile shows six and a narrow one
   shows two -- the count follows the layout instead of being baked into the
   markup. A single cover simply centres, which is what a one-book path needs. */
.stack-art { container-type: inline-size; position: relative; isolation: isolate;
  overflow: hidden; height: 168px; background: #302a1e;
  display: flex; align-items: center; justify-content: flex-start; }
.stack-art::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,18,13,.04) 0%, rgba(29,26,19,.18) 54%, var(--surface) 100%); }
.stack-art > span { font-family: var(--disp); font-size: 34px; color: rgba(244,239,226,.28); }

/* grow:1, shrink:0. A fixed width could only ever fill a card of exactly the
   right size — too few books and a strip of ground showed on the right, too
   many and they clipped. Growing absorbs whatever the card has spare, so the
   band reaches both edges at any width and any number of covers. */
.stack-cover { flex: 1 0 92px; height: 140px; overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.62); border: 1px solid rgba(20,18,13,.55);
  transform: rotate(var(--tilt, 0deg)); }
.stack-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12) contrast(1.07); }
/* Heavy overlap on purpose: five books leaning on each other read as a
   collection, where five evenly spaced ones read as a product grid. */
.stack-cover + .stack-cover { margin-left: -54px; }

/* Alternating lean, so a row of them reads as stacked rather than shingled. */
.stack-cover-0 { --tilt: -6deg; z-index: 6; }
.stack-cover-1 { --tilt: 4deg;  z-index: 5; }
.stack-cover-2 { --tilt: -3deg; z-index: 4; }
.stack-cover-3 { --tilt: 6deg;  z-index: 3; }
.stack-cover-4 { --tilt: -5deg; z-index: 2; }
.stack-cover-5 { --tilt: 3deg;  z-index: 1; }

/* A lone cover has nothing to lean on. */
.stack-art[data-count="1"] .stack-cover-0 { --tilt: -4deg; }

/* No fitting rules: the row runs to the right edge and the card clips it, so a
   wide tile shows more books and a narrow one shows fewer, with the art always
   reaching both edges. The fade tells the reader the shelf continues. */
.stack-art::before { content: ''; position: absolute; inset: 0 0 0 auto; width: 56px; z-index: 4;
  pointer-events: none; background: linear-gradient(90deg, transparent, rgba(20,18,13,.55)); }
.stack-art[data-count="1"], .stack-art[data-count="0"] { justify-content: center; padding-left: 0; }
.stack-art[data-count="1"]::before, .stack-art[data-count="0"]::before { display: none; }

/* Tinted grounds, so a row of tiles does not read as one grey block. */
.path-card-1 .stack-art, .art-tile-1 .stack-art { background: #162f43; }
.path-card-2 .stack-art, .art-tile-2 .stack-art { background: #44332a; }
.path-card-3 .stack-art, .art-tile-3 .stack-art { background: #262a49; }
.path-card-4 .stack-art, .art-tile-4 .stack-art { background: #263d32; }
.path-art > span { position: absolute; left: 20px; bottom: 16px; z-index: 1; color: rgba(255,255,255,.42); font: italic 78px/.7 var(--disp); letter-spacing: -.08em; }
.path-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 22px 22px; margin-top: -3px; position: relative; z-index: 4; }
.path-card h3 { margin: 0; font: 400 clamp(22px, 2.5vw, 31px)/.98 var(--disp); }
.path-card p { min-height: 34px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.path-card .secondary { margin-top: auto; }

/* ---------- index rows (library, reading order) ---------- */
.index { border-top: 1.5px solid var(--rule-strong); }
.row { display: grid; grid-template-columns: 40px 44px 1fr auto auto; gap: 18px; align-items: center;
  border-bottom: 1px solid var(--rule); padding: 14px 0; text-align: left; width: 100%; }
.row .thumb { width: 44px; aspect-ratio: 2 / 3; }
.read-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
.read-link:hover { text-decoration: underline; }
.row .title { font-family: var(--disp); font-size: clamp(18px, 2.4vw, 24px); line-height: 1.14; }
.row .state { text-align: right; white-space: nowrap; }
.row .state.owned { color: var(--shelf); }
.state.attention { color: var(--accent); }
.request-explainer { max-width: 76ch; margin: -8px 0 22px; color: var(--body); font-size: 13px; line-height: 1.6; }
.request-center { display: grid; gap: 16px; }
.request-series { border: 1px solid var(--rule); background: var(--surface); }
.request-series-head { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 20px; }
.request-series-head h3 { margin: 6px 0 0; }
.request-series-head p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.request-series-cover { all: unset; cursor: pointer; display: block; }
.request-series-cover .cover { width: 58px; }
.request-series-cover .fallback { font-size: 11px; padding: 6px; }
.request-series-head h3 { margin: 7px 0 3px; font: 400 clamp(25px, 3vw, 35px)/1 var(--disp); }
.request-series-head p { margin: 0; color: var(--muted); font-size: 12px; }
.request-parts { padding: 0 20px; border-top: 1px solid var(--rule); }
.request-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.request-part:last-child { border-bottom: 0; }
.request-part > div:first-child { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: baseline; }
.request-part b { font-size: 13px; }
.request-part small { grid-column: 2; color: var(--muted); font-size: 11px; line-height: 1.45; max-width: 62ch; }
.request-part-action { display: flex; gap: 14px; align-items: center; }
.request-unfurl { display: block; width: 100%; text-align: left; padding: 14px 20px;
  border-top: 1px solid var(--rule); color: var(--muted); background: none; }
.request-unfurl:hover { color: var(--accent); }
.request-part small:empty { display: none; }

/* ---------- downloads, on the card ---------- */
/* Mylar gives a state and a size, never a byte count, so there is no bar to
   draw. The running card is marked by a moving rule instead: it says "this one
   is live" without claiming to know how far along it is. */
.entry-download:empty, .entry-download-slot:empty { display: none; }
.entry-download { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 20px; border-top: 1px solid var(--rule); background: rgba(255, 255, 255, 0.015); }
.entry-download.running { position: relative; }
.entry-download.running::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); animation: download-pulse 2.4s ease-in-out infinite; }
@keyframes download-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .entry-download.running::before { animation: none; opacity: 1; } }
.entry-download-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.download-warning { max-width: 76ch; margin: -4px 0 18px; color: var(--body); font-size: 13px;
  line-height: 1.6; border-left: 2px solid var(--accent); padding-left: 14px; }
.download-warning .secondary { margin-left: 6px; }

/* A quiet action sits beside a real one without competing with it: stopping
   something is never the button a reader should hit by accident. */
.secondary.quiet { color: var(--muted); border-color: transparent; }
.secondary.quiet:hover { color: var(--accent); border-color: var(--rule); }
a.secondary { display: inline-block; text-decoration: none; }
.request-series-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.waiting-since { grid-column: 2; color: var(--faint); font-size: 11px; }

/* Why a request has not moved. Sits above the list because it is about the
   whole list, not any one book. */
.search-state { display: flex; gap: 20px; align-items: center; justify-content: space-between;
  border: 1px solid var(--rule); border-left: 2px solid var(--accent); background: var(--surface);
  padding: 16px 20px; margin: 0 0 16px; }
.search-state b { font-size: 13px; }
.search-state p { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 4px; max-width: 70ch; }
.search-state .secondary { flex: none; }

.picker-note { font-size: 12px; line-height: 1.6; color: var(--body); margin-top: 8px;
  border-left: 2px solid var(--rule); padding-left: 12px; }
.picker-note.owned { border-left-color: var(--shelf); }
.picker-note a { color: var(--accent); }

.event-list { border: 1px solid var(--rule); background: var(--surface); }
.event-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px;
  padding: 13px 20px; border-bottom: 1px solid var(--rule); }
.event-row:last-child { border-bottom: 0; }
.event-row b { font-size: 13px; font-weight: 500; }
.event-row small { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 3px; }
.event-row.warn b { color: var(--accent); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--rule); padding: 8px 12px; color: var(--body); }
.chip:hover { border-color: var(--accent); color: var(--text); }
.member-roster .request-unfurl { width: auto; padding: 13px 0 2px; border: 0; }

/* ---------- thread card ---------- */
.thread { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(24px, 4vw, 46px);
  padding: 40px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.thread .portrait { aspect-ratio: 3 / 4; }
.thread h1 { font-family: var(--disp); font-size: clamp(40px, 7vw, 88px); font-weight: 400;
  line-height: 0.88; letter-spacing: -0.03em; margin: 10px 0 0; }
.thread .alias { font-family: var(--disp); font-style: italic; font-size: clamp(17px, 2.2vw, 25px); color: var(--muted); margin-top: 8px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 20px;
  border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 18px; }
.stats b { display: block; font-family: var(--disp); font-size: 32px; font-weight: 400; line-height: 1; margin-top: 7px; }
.thread .deck { color: var(--body); line-height: 1.65; border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 20px; max-width: 66ch; }

/* A character's story graph has different jobs from their books below: it is
   compact reference material, not another cover grid. Grouping the direct
   statements makes a surprising fact easy to scan without pretending every
   connection is equally important. */
.lore-profile { padding-bottom: 10px; }
.lore-profile .section-head { padding-bottom: 12px; }
.lore-source { margin-left: auto; color: var(--muted); }
.lore-source:hover { color: var(--accent); }
.lore-summary { margin: 0 0 18px; color: var(--body); font: italic 19px/1.35 var(--disp); }
.lore-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
  border: 1px solid var(--rule); background: var(--rule); }
.lore-group { display: grid; align-content: start; gap: 11px; min-height: 106px; padding: 16px;
  background: var(--surface); }
.lore-group > .kicker { color: var(--accent); }
.lore-group .chips { gap: 6px; }
.lore-group .chip { padding: 7px 9px; text-transform: none; letter-spacing: .08em; font-size: 9.5px; }

/* ---------- filters ---------- */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 24px;
  border-top: 1.5px solid var(--rule-strong); border-bottom: 1px solid var(--rule); padding: 16px 0; }
/* Direct children only: a .filter-field now carries its own <label> inside the
   kicker line, and that one must stay inline beside the ⓘ. */
.filters > label, .filters > .filter-field { display: grid; gap: 8px; }
.filter-field .kicker { display: flex; align-items: center; gap: 6px; }
.filter-field .kicker label { cursor: pointer; }
/* iOS Safari draws a select as its own rounded pill with padding of its own,
   inside our box: "Comics & manga" then sat wider than the space left for it
   and was cut off. Dropping the native appearance everywhere makes the control
   ours on every device -- which means supplying the arrow too, and keeping the
   text clear of it. */
.filters select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--rule);
  color: var(--text); font-family: var(--disp); font-size: 19px;
  padding: 2px 26px 6px 0; outline: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none' stroke='%23a8a08f' stroke-width='1.4'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
}
.filters select:focus { border-color: var(--accent); }
.filters option { background: var(--surface); color: var(--text); font-family: var(--ui); font-size: 14px; }

/* ---------- browse ---------- */
.house { display: grid; grid-template-columns: 44px 1fr auto; gap: 24px; align-items: start;
  border-bottom: 1px solid var(--rule); padding: 26px 0; }
.house .swatch { width: 40px; height: 40px; }
.house .swatch.logo { background: #f4efe2; display: grid; place-items: center; padding: 3px; }
.house .swatch.logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pub-chars { margin-top: 16px; }
.pub-chars .rail { grid-auto-columns: 108px; gap: 14px; }
.house h2 { font-family: var(--disp); font-size: clamp(28px, 4vw, 44px); font-weight: 400; margin: 0 0 12px; letter-spacing: -0.02em; }

/* ---------- dialog ---------- */
dialog { width: min(1000px, 94vw); max-height: 92vh; padding: 0; border: 0; color: var(--text);
  background: var(--ground); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6); }
dialog::backdrop { background: rgba(10, 9, 6, 0.72); backdrop-filter: blur(3px); }
.sheet { padding: clamp(24px, 4vw, 44px); }
.sheet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  border-bottom: 1.5px solid var(--rule-strong); padding-bottom: 20px; }
.sheet-body { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: clamp(20px, 3vw, 44px); padding-top: 30px; }
.sheet h2 { font-family: var(--disp); font-size: clamp(30px, 5vw, 58px); font-weight: 400; line-height: 0.94; margin: 0; letter-spacing: -0.025em; }
.sheet .copy { color: var(--body); line-height: 1.68; margin-top: 20px; }
.plain { border-left: 2px solid var(--accent); padding-left: 16px; margin-top: 22px; }
.actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.primary { background: var(--text); color: var(--ground); font-size: 13px; font-weight: 600;
  letter-spacing: 0.03em; padding: 15px 26px; display: inline-flex; align-items: center; gap: 10px; }
.primary[disabled] { background: var(--surface-2); color: var(--muted); cursor: default; }
.secondary { border: 1px solid var(--rule); color: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; padding: 13px 18px; }
.secondary:hover { border-color: var(--accent); color: var(--text); }
/* Says exactly what each action commits to, before it is clicked. */
.action-scope { margin: 14px 0 0; max-width: 62ch; color: var(--muted);
  font-size: 12.5px; line-height: 1.6; }
.action-scope b { color: var(--body); font-weight: 600; }

/* The standing format filter, shown above every grid it governs. */
.content-filters { margin: 0 0 18px; align-items: end; }
.content-filters .secondary { align-self: center; }

.collection-request { margin-top: 24px; }
.part-picker { border-top: 1px solid var(--rule); padding-top: 22px; }
.part-picker-head { display: grid; gap: 5px; margin-bottom: 15px; }
.part-picker-head p { margin: 0; color: var(--body); font-size: 13px; line-height: 1.55; }
.part-list { border-top: 1px solid var(--rule); }
.part-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 13px 2px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.part-row.has-cover { grid-template-columns: 20px 42px minmax(0, 1fr); }
.part-row input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.part-row .part-cover { display: block; width: 42px; aspect-ratio: 2 / 3; background: var(--surface-2); overflow: hidden; }
.part-row .part-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.part-row .part-copy { display: grid; gap: 1px; min-width: 0; }
.part-row .part-copy b { font-size: 13px; font-weight: 600; }
.part-row .part-copy small { color: var(--muted); font-size: 11px; }
.part-row.done { cursor: default; opacity: 0.6; }
.sheet-related { grid-column: 1 / -1; border-top: 1px solid var(--rule); margin-top: 8px; }
.sheet-related .section-head { padding: 24px 0 14px; }
.sheet-related .section-head h2 { font-size: clamp(24px, 3.8vw, 34px); }
.related-group { display: grid; gap: 12px; margin-bottom: 22px; }
.related-group .chip { justify-self: start; }

/* ---------- glossary ---------- */
/* An explicit marker beats a dotted underline: people do not hover text that
   does not look interactive. */
.info-inline { color: var(--accent); font-style: normal; }
.info {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px;
  width: 17px; height: 17px; border-radius: 50%; color: var(--muted);
  position: relative; cursor: pointer; flex: none; min-width: 17px; min-height: 17px;
  padding: 0 !important; margin: 0; line-height: 1; align-self: center;
}
.info:hover, .info:focus-visible { color: var(--accent); }
.info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.term { border-bottom: 1px dotted currentColor; position: relative; }
.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info::after,
.term::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 9px); z-index: 12;
  width: max-content; max-width: 290px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--rule);
  padding: 11px 13px; font: 400 12.5px/1.55 var(--ui); letter-spacing: 0;
  text-transform: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  pointer-events: none; white-space: normal;
}
.term:hover::after, .term:focus-visible::after,
.info:hover::after, .info:focus-visible::after,
.info.open::after, .term.open::after {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* An opened tip is the one thing on the page you are looking at. */
.info.open, .term.open { color: var(--accent); }
/* Near the right edge the popover would run off screen -- and the page clips
   rather than scrolls, so it would be gone rather than merely awkward.
   placeTip() adds this on hover or focus after one measurement. */
.info.right::after, .term.right::after { left: auto; right: 0; }
/* A tooltip inside a button must not swallow the click that opens the card. */
.info { pointer-events: auto; }

/* ---------- browse: formats drawn to scale ---------- */
/* Fixed columns rather than auto-fill: nine formats and five publishers were
   wrapping into orphan rows with large dead gaps. 3x3 and 5x1 divide exactly. */
.house-grid { display: grid; gap: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .house-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .house-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.format-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 780px) { .format-grid { grid-template-columns: 1fr; } }

/* Publishers and formats share the starter-path treatment: a band of fanned
   covers under a gradient, then the copy. They used to be a logo on a grey
   rectangle and a lone book diagram, which read as a different, older app. */
.art-tile { position: relative; display: grid; grid-template-rows: 150px 1fr; overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule); text-align: left; padding: 0;
  cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.art-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.art-tile:focus-within { z-index: 5; }
.art-tile .stack-art { height: 150px; }
.art-copy { display: grid; gap: 6px; padding: 16px 18px 20px; align-content: start; }
.art-name { font-size: 24px; line-height: 1.05; display: flex; align-items: center; gap: 7px; }
.art-blurb { color: var(--muted); font-size: 12.5px; line-height: 1.55; }

/* The wordmark sits on the card, in the name's slot, painted through a mask so
   every house reads in one ink. Half the source SVGs are solid black — Marvel,
   Dark Horse, Kodansha — and would have been invisible on this ground; the rest
   are five unrelated brand colours, which together looked like a sponsor board.
   The files are local (public/logos), pulled once from Wikimedia Commons. */
/* Rendered as an image, not a mask. Masking flattened every knockout mark:
   Marvel's red box and DC's roundel became solid blobs with their lettering
   gone, because a mask only sees shape. The all-black marks get inverted
   instead, which is the only thing they need. */
.house-wordmark { display: block; height: 26px; width: auto; max-width: 170px;
  object-fit: contain; object-position: left center; }
.house-wordmark.invert { filter: invert(1); }
.house-lines { color: var(--muted); font-size: 12px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Formats are compact rows, not tiles. They are shapes of book rather than
   places to go, and the only question worth answering is how thick each one is
   -- which needs them all in one scale, close enough to compare. A flat accent
   rectangle never conveyed that; a block of page edges seen end-on does. */
.format-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px;
  align-items: center; padding: 15px 16px; border: 1px solid var(--rule);
  background: var(--surface); cursor: pointer; transition: border-color .18s ease; }
.format-row:hover, .format-row:focus-visible { border-color: var(--accent); }
.format-edge { justify-self: end; display: block; height: 62px; border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, #f4efe2 0 1px, #d8d1bf 1px 3px),
    linear-gradient(90deg, #cfc7b3, #f4efe2);
  border-left: 4px solid var(--accent);
  box-shadow: 0 6px 16px rgba(0,0,0,.5), inset -1px 0 0 rgba(20,18,13,.35); }
.format-text { display: grid; gap: 4px; min-width: 0; }
.format-title { font-size: 20px; line-height: 1.1; display: flex; align-items: center; gap: 7px; }
.format-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.pub-head { display: grid; grid-template-columns: 120px 1fr; gap: 30px; align-items: start;
  padding: 34px 0 30px; border-bottom: 1px solid var(--rule); }
.pub-head h1 { font-family: var(--disp); font-size: clamp(40px, 6vw, 72px); font-weight: 400;
  line-height: 0.92; letter-spacing: -0.03em; margin: 8px 0 0; }
.pub-head .deck { color: var(--body); margin: 14px 0 0; max-width: 60ch; line-height: 1.6; }
.pub-logo { background: #f4efe2; display: grid; place-items: center; padding: 14px; aspect-ratio: 1; }
.pub-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.credits { margin-top: 20px; display: grid; gap: 9px; }

/* The whole glossary block was pasted in here once, inside this phone media
   query and behind its opening brace. It is defined for every width further
   up; this is only the handful of rules that are genuinely about a narrow
   screen. */
@media (max-width: 720px) {
  .pub-head { grid-template-columns: 84px 1fr; gap: 18px; }
}

.sort-note { margin: 12px 0 22px; color: var(--muted); letter-spacing: 0.04em; text-transform: none; font-size: 11.5px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0; }
.pager.bottom { margin-top: 30px; }
.pager.top { margin-bottom: 26px; }
.pager button { border-bottom: 1px solid var(--muted); padding-bottom: 3px; }
.pager button:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- poster slider ---------- */
.poster-control { display: flex; align-items: center; gap: 10px; }
.poster-control input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 108px; height: 18px; background: none; cursor: pointer;
}
.poster-control input[type='range']::-webkit-slider-runnable-track { height: 1px; background: var(--rule); }
.poster-control input[type='range']::-moz-range-track { height: 1px; background: var(--rule); }
.poster-control input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -6px;
  background: var(--text); border: 0;
}
.poster-control input[type='range']::-moz-range-thumb { width: 13px; height: 13px; background: var(--text); border: 0; }
.poster-control input[type='range']:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.poster-control svg { color: var(--muted); flex: none; }

/* ---------- feedback ---------- */
.empty { padding: 56px 0; color: var(--muted); text-align: center; }
.skeleton, .skeleton-line {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton { aspect-ratio: 2 / 3; }
.skeleton-line { height: 11px; }
.skeleton-card { display: flex; flex-direction: column; gap: 11px; }
/* Stagger the shimmer so a grid reads as one sweep rather than a strobe. */
.skeleton-card:nth-child(2n) .skeleton { animation-delay: 0.12s; }
.skeleton-card:nth-child(3n) .skeleton { animation-delay: 0.24s; }
.skeleton-card:nth-child(5n) .skeleton { animation-delay: 0.36s; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 130%); opacity: 0;
  background: var(--surface); border: 1px solid var(--rule); padding: 14px 20px; max-width: min(560px, 90vw);
  transition: transform 0.24s ease, opacity 0.24s ease; z-index: 20; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }
#toast.error { border-color: var(--accent); }

/* ---------- settings ---------- */
.settings-lede { padding-bottom: 30px; }
.settings-section { border-top: 1px solid var(--rule); padding-bottom: 18px; }
.settings-section .section-head { padding-top: 30px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--rule); background: var(--rule); }
.setting { min-height: 156px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; background: var(--surface); }
.setting > b, .setting > span b { font-family: var(--disp); font-size: 25px; font-weight: 400; line-height: 1.05; }
.setting small { max-width: 42ch; color: var(--muted); font-size: 12px; line-height: 1.55; }
.setting select { min-width: 180px; border: 1px solid var(--faint); border-radius: 0; background: var(--ground); color: var(--text); padding: 9px 11px; font: 13px var(--ui); }
.setting input[type='number'], .user-permission-form input[type='number'] { width: min(180px, 100%); border: 1px solid var(--faint); border-radius: 0; background: var(--ground); color: var(--text); padding: 9px 11px; font: 13px var(--ui); }
.setting input[type='range'] { width: min(240px, 100%); accent-color: var(--accent); }
.setting.toggle { display: flex; flex-direction: row; align-items: flex-start; gap: 13px; cursor: pointer; }
.setting.toggle input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--accent); }
.setting.toggle > span { display: grid; gap: 7px; }
.request-settings { grid-template-columns: 1fr 1fr; }
.permission-choices { display: grid; gap: 10px; }
.permission-choices label { display: flex; align-items: center; gap: 9px; color: var(--body); font-size: 13px; cursor: pointer; }
.permission-choices input { width: 16px; height: 16px; accent-color: var(--accent); }
.policy-submit { grid-column: 1 / -1; min-height: 0; justify-content: center; }
.connection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--rule); background: var(--rule); }
.connection { min-height: 170px; padding: 20px; background: var(--surface); }
.connection b { display: block; margin-top: 11px; font-family: var(--disp); font-size: 28px; font-weight: 400; line-height: 1; }
.connection p { margin: 15px 0 7px; font-size: 12px; font-weight: 600; }
.connection small { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.status.good { color: var(--shelf); }.status.warn { color: var(--accent); }.status.muted { color: var(--muted); }
.cache-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px; border: 1px solid var(--rule); background: var(--surface); }
.enrichment-card { border-top: 0; background: var(--surface-2); }
.cache-card b { font-family: var(--disp); font-size: 27px; font-weight: 400; }
.cache-card p { max-width: 62ch; margin: 7px 0 0; color: var(--body); font-size: 13px; line-height: 1.6; }
.secondary { flex: none; border: 1px solid var(--faint); padding: 10px 13px; color: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.secondary:hover { border-color: var(--accent); color: var(--accent); }.secondary:disabled { opacity: .55; cursor: wait; }
.settings-note { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }

@media (max-width: 720px) {
  .masthead { gap: 14px; }
  .masthead-actions { width: 100%; justify-content: space-between; }
  .shelf-count { text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .shelf-count b { font-size: 22px; }
  .thread, .sheet-body { grid-template-columns: 1fr; }
  .thread .portrait { max-width: 220px; }
  .lore-source { width: 100%; margin-left: 26px; }
  .row { grid-template-columns: 30px 40px 1fr; }
  .row .state { grid-column: 3; text-align: left; }
  .settings-grid, .request-settings { grid-template-columns: 1fr; }
  .connection-grid { grid-template-columns: 1fr; }
  .path-grid { grid-template-columns: 1fr 1fr; }
  .request-part { grid-template-columns: 1fr; }
  .search-state { flex-direction: column; align-items: flex-start; }
  .entry-download-actions { margin-left: 0; }
  .request-series-head { grid-template-columns: 46px minmax(0, 1fr); }
  .request-series-head .secondary { grid-column: 2; justify-self: start; }
  .request-series-cover .cover { width: 46px; }
  .request-part-action { justify-content: space-between; }
  .cache-card { align-items: flex-start; flex-direction: column; }
}

/* Management pages keep controls and empty states close to the list. Their
   spacing is independent of the editorial discovery headings above. */
.management-page { max-width: 1500px; margin: 28px auto 0; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin: 0; font: 400 38px/1.1 var(--disp); letter-spacing: -.015em; }
.page-heading p, .modal-description { margin: 8px 0 0; color: var(--body); font-size: 13px; line-height: 1.6; }
.page-actions { display: flex; gap: 10px; align-items: center; }
.page-actions .primary, .form-actions .primary { padding: 11px 18px; font-size: 12px; }
.page-tabs { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--rule); margin: 0 0 22px; padding: 0; }
.page-tabs a, .page-tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 0 13px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font: 500 13px var(--ui); }
.page-tabs [aria-current='page'] { color: var(--text); border-bottom-color: var(--accent); }
.page-tabs a:hover, .page-tabs button:hover { color: var(--text); }
.page-tabs span { border-radius: 4px; padding: 1px 6px; background: var(--surface-2); font-size: 11px; color: var(--body); }
.list-toolbar { display: flex; align-items: end; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.list-toolbar label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.list-toolbar input, .list-toolbar select, .settings-form input[type='number'], .field-label input, .account-form textarea { min-width: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--faint); color: var(--text); border-radius: 0; font: 14px var(--ui); }
.list-search { flex: 1; max-width: 380px; min-width: 180px; }
.list-toolbar select { min-width: 170px; }
.list-count { margin-left: auto; color: var(--muted); font-size: 12px; padding-bottom: 10px; }
.list-empty { border: 1px solid var(--rule); background: var(--surface); padding: 28px; color: var(--body); font-size: 13px; text-align: center; }
.list-empty b { color: var(--text); font-weight: 500; }
.list-empty p { margin: 6px 0 18px; }
.management-loading { padding: 28px 0; color: var(--muted); font-size: 13px; }
.management-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 14px 0; }
.request-page .request-center { gap: 12px; }
.request-page .request-series-head { padding: 16px; gap: 16px; }
.request-page .request-series-head h3 { font-size: 27px; margin: 8px 0 5px; }
.request-series-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: 290px; }
.request-series-actions .primary { padding: 10px 16px; font-size: 12px; }
.request-detail { margin-top: 10px; color: var(--body); font-size: 12px; }
.request-detail summary { cursor: pointer; color: var(--muted); }
.request-detail p { padding-top: 8px; }
.status-pill { display: inline-block; padding: 3px 8px; border: 1px solid var(--faint); border-radius: 4px; font: 500 11px/1.5 var(--ui); color: var(--body); }
.status-pill.pending { color: #e1be72; border-color: #6a5430; background: #292218; }
.status-pill.available { color: var(--shelf); border-color: #395d4e; background: #1b2720; }
.status-pill.attention { color: var(--accent); border-color: #794130; }
.status-pill.closed { color: var(--muted); }
.mylar-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; justify-content: space-between; margin-bottom: 22px; }
.request-page .search-state { margin-top: 0; }
.settings-content { max-width: 1060px; }
.settings-page .setting { min-height: 130px; padding: 20px; }
.settings-form { border: 1px solid var(--rule); background: var(--surface); }
.form-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr); gap: 32px; padding: 24px; border-bottom: 1px solid var(--rule); }
.form-row > div > b { font-size: 14px; font-weight: 500; }
.form-row p, .form-row small, .account-form small { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; }
.quota-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.quota-fields label, .field-label { display: grid; gap: 7px; color: var(--body); font-size: 12px; }
.quota-fields input { width: 100px; }
.quota-fields small { flex-basis: 100%; }
.preferences-reset { margin-top: 20px; }
.settings-subheading { margin: 26px 0 14px; }
.settings-subheading h2 { margin: 0; font: 400 27px var(--disp); }
.settings-subheading p { color: var(--muted); font-size: 12px; }
.user-table-wrap { overflow-x: auto; border: 1px solid var(--rule); }
.user-table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; }
.user-table th { background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 500; padding: 13px 18px; white-space: nowrap; }
.user-table td { padding: 16px 18px; border-top: 1px solid var(--rule); vertical-align: middle; }
.user-table td:last-child { text-align: right; }
.user-identity { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.user-identity b { font-weight: 500; }
.user-avatar { flex: none; width: 34px; height: 34px; background: var(--surface-2); border: 1px solid var(--faint); border-radius: 50%; display: grid; place-items: center; color: var(--body); }
.user-identity small, .cell-detail { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.permission-summary { display: flex; gap: 5px; flex-wrap: wrap; max-width: 360px; }
.permission-summary span { background: var(--surface-2); padding: 3px 6px; border-radius: 3px; color: var(--body); font-size: 11px; }
#admin-dialog { width: min(640px, 94vw); border: 1px solid var(--faint); }
.admin-modal { padding: 26px; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.modal-heading h2 { font: 400 32px/1.1 var(--disp); margin: 0; }
.modal-heading .secondary { padding: 8px 10px; }
.modal-form { margin-top: 22px; }
.modal-form.settings-form { border: 0; background: none; }
.modal-form .form-actions { padding: 20px 0 0; border-top: 1px solid var(--rule); margin-top: 22px; }
.modal-form .page-tabs { margin-bottom: 20px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.account-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.account-form legend { font-size: 13px; color: var(--body); margin-bottom: 12px; }
.permission-choices { gap: 16px; }
.permission-choices .permission-option, .permission-option { display: flex; align-items: flex-start; gap: 12px; }
.permission-option input { flex: none; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--accent); }
.permission-option span { display: grid; gap: 4px; }
.permission-option b { font-size: 13px; font-weight: 500; color: var(--text); }
.permission-option small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-state p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.account-state .secondary { margin-top: 8px; }
.admin-modal .invite-link { margin-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) {
  .management-page { margin-top: 22px; }
  .page-heading { align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
  .page-heading h1 { font-size: 34px; }
  .page-actions { width: 100%; }
  .page-tabs { gap: 20px; }
  .list-toolbar { gap: 12px; }
  .list-search { max-width: none; }
  .list-count { flex-basis: 100%; padding-bottom: 0; }
  .form-row { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .request-series-actions { grid-column: 2; justify-content: flex-start; max-width: none; }
  .request-page .request-series-head { padding: 14px; gap: 12px; }
  .request-page .request-series-head h3 { font-size: 25px; }
  .user-table th, .user-table td { padding: 12px; }
  .user-table th:nth-child(3), .user-table td:nth-child(3), .user-table th:nth-child(4), .user-table td:nth-child(4) { display: none; }
  .user-identity { min-width: 120px; gap: 8px; }
  .user-avatar { width: 28px; height: 28px; }
  .admin-modal { padding: 20px; }
  .field-pair { grid-template-columns: 1fr; }
}

/* Scope stays visible beside its choices, including on small screens. */
#admin-dialog[data-kind="request"] { width: min(740px, 94vw); max-height: 92dvh; overflow-y: auto; }
.request-modal-book { display: flex; gap: 16px; align-items: center; margin-top: 20px; }
.request-modal-book img { width: 56px; height: 84px; object-fit: cover; flex: none; }
.request-modal-book h3 { font: 400 27px/1.15 var(--disp); margin: 0; }
.request-modal-book p { font-size: 12px; color: var(--muted); margin: 7px 0 0; }
.request-scope-options { border: 0; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; min-width: 0; }
.request-scope-options legend { font-size: 13px; margin-bottom: 10px; }
.request-scope { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--rule); background: var(--surface); padding: 13px 15px; cursor: pointer; }
.request-scope:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
.request-scope input, .request-modal-part input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.request-scope span, .request-modal-part span { display: grid; gap: 4px; }
.request-scope b, .request-modal-part b { font-size: 13px; font-weight: 500; }
.request-scope small, .request-modal-part small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.request-selection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.request-selection-head h4 { margin: 0; font-size: 13px; font-weight: 500; }
.request-selection-head > div { display: flex; gap: 8px; }
.request-selection-head .secondary { padding: 6px 9px; font-size: 11px; }
.request-modal-parts { max-height: 240px; overflow-y: auto; border: 1px solid var(--rule); }
.request-modal-part { display: flex; align-items: flex-start; gap: 12px; padding: 12px 15px; cursor: pointer; }
.request-modal-part + .request-modal-part { border-top: 1px solid var(--rule); }
.request-modal-part.handled { opacity: .6; cursor: default; }
.request-modal-parts > p { padding: 12px 15px; }
.request-modal-notice { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 15px 0; }
.request-summary { border-left: 2px solid var(--accent); padding-left: 14px; margin-top: 20px; font-size: 13px; }
.request-summary b { font-weight: 500; }
.request-summary p, .request-summary small { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 5px 0; }
@media (max-width: 720px) {
  #admin-dialog[data-kind="request"] .admin-modal { padding: 18px; }
  .request-modal-book h3 { font-size: 23px; }
  .request-scope { padding: 11px; }
  .request-modal-parts { max-height: 190px; }
}

.proposal-card .request-series-actions { align-self: center; }
.approval-decision { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 13px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.approval-decision.approved { color: #94d3ad; border: 1px solid #395d4e; background: #1b2720; }
.approval-decision.declined { color: var(--muted); border: 1px solid var(--rule); }

.onboarding-panel { max-width: 520px; }
.onboarding-intro { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 16px 0 24px; }
.onboarding-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; padding: 0; margin: 22px 0 30px; }
.onboarding-steps li { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.onboarding-steps li span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--rule); border-radius: 50%; }
.onboarding-steps li[aria-current="step"] { color: var(--text); }
.onboarding-steps li[aria-current="step"] span { border-color: var(--accent); color: var(--accent); }
.onboarding-blocked { border: 1px solid var(--rule); background: var(--surface); padding: 18px; font-size: 13px; line-height: 1.6; }
.onboarding-blocked p { color: var(--muted); margin: 8px 0 0; }
.account-form-error { color: var(--accent); font-size: 13px; line-height: 1.5; margin: 0; }
.setup-wizard { max-width: 1080px; margin: 35px auto; }
.setup-wizard .page-heading .kicker { display: block; margin-bottom: 10px; }
.setup-wizard .settings-section { margin-top: 24px; }
@media (max-width: 720px) { .onboarding-steps { gap: 12px; } .setup-wizard { margin-top: 22px; } }

.account-settings-page { max-width: 1080px; margin: 0 auto; }
.account-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.account-settings-card, .access-settings-card { border: 1px solid var(--rule); background: var(--surface); padding: 26px; }
.account-settings-card h2, .access-settings-card h2 { font: 400 32px/1.1 var(--disp); margin: 0 0 12px; }
.account-settings-card > p, .access-settings-card > p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 24px; }
.account-settings-card .account-form > small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.access-mode-choices { min-width: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.access-mode-choices legend { font-size: 13px; margin-bottom: 10px; }
.account-form select { appearance: none; border: 1px solid var(--rule); background-color: var(--ground); color: var(--text); padding: 12px 34px 12px 12px; font: 14px var(--ui); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='m3 4 3 3 3-3' fill='none' stroke='%23948b78' stroke-width='1.5'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; }
.account-form .request-scope, .account-form .permission-option { display: flex; }
.account-form .request-scope input, .account-form .permission-option input { width: 17px; height: 17px; padding: 0; flex: none; }
.password-field > small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.password-strength { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.password-strength-bars { display: flex; gap: 4px; }
.password-strength-bars i { display: block; width: 22px; height: 4px; background: var(--rule); }
.password-strength[data-level='1'] { color: #ea8b70; }
.password-strength[data-level='2'] { color: #d9bd75; }
.password-strength[data-level='3'], .password-strength[data-level='4'] { color: #94d3ad; }
.password-strength[data-level='1'] i:first-child { background: #ea8b70; }
.password-strength[data-level='2'] i:nth-child(-n+2) { background: #d9bd75; }
.password-strength[data-level='3'] i:nth-child(-n+3), .password-strength[data-level='4'] i { background: #94d3ad; }
.account-state + .account-state { border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 20px; }
@media (max-width: 720px) { .account-settings-grid { grid-template-columns: 1fr; } .account-settings-card, .access-settings-card { padding: 20px; } }