/* Trinity Books: a plain white bookstore modelled on kyobobook.co.kr (owner 2026-10-14). Covers are the stars. System fonts only. */
:root {
  --paper: #ffffff;
  --card: #ffffff;
  --ink: #111111;
  --muted: #767676;
  --sub: #595959;
  --line: #eaeaea;
  --line-strong: #d5d5d5;
  --band: #f7f7f7;
  --accent: #4f55b0;
  --accent-ink: #ffffff;
  --accent-soft: #eef0fa;
  /* The membership page (2026-10-18): a deep plan card, a warm badge colour. */
  --accent-deep: #2f3480;
  --accent-deep-ink: #ffffff;
  --gold: #f5c84c;
  --gold-ink: #3b2a00;
  --gold-soft: #fff4d1;
  --warn: #c2410c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, Roboto, "Noto Sans", sans-serif;
  --radius: 8px;
  --wrap: 1200px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.6 var(--sans); }
main { max-width: var(--wrap); margin: 0 auto; padding: 16px 16px 72px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; margin: .5em 0 .5em; }
h2 { font-size: 1.3rem; margin: 1.8em 0 .8em; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
main p a, .legal a, .auth a:not(.button), .panel a:not(.button), .hint a { color: var(--accent); text-decoration: underline; }
img { max-width: 100%; height: auto; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--card); padding: 8px 12px; z-index: 50; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip: auto; overflow: visible; }
html, body { overflow-x: clip; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead { color: var(--sub); margin-top: 0; }
.note { color: var(--muted); font-size: .9rem; }
.empty { color: var(--muted); padding: 40px 16px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.count { color: var(--muted); font-size: .9rem; font-weight: 400; }

/* header */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: -34px; z-index: 20; }
.util { height: 34px; font-size: .8rem; color: var(--sub); }
.util .wrap { display: flex; justify-content: flex-end; align-items: center; height: 100%; gap: 0; }
.util a { padding: 0 10px; position: relative; }
.util a + a::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; height: 10px; margin-top: -5px; border-inline-start: 1px solid var(--line-strong); }
.util a[hidden] { display: none; }
.bar .wrap { display: flex; align-items: center; gap: 28px; padding-top: 10px; padding-bottom: 10px; }
.brand { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--ink); white-space: nowrap; letter-spacing: 0; }
.brand span { color: var(--accent); }
.brand:hover { text-decoration: none; }
.search-box { flex: 0 1 560px; display: flex; align-items: center; height: 48px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 6px 0 22px; background: #fff; }
.search-box:focus-within { border-color: var(--ink); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .95rem; height: 100%; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-box button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.icons { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); border-radius: 50%; }
.icon.round { background: var(--accent); color: #fff; }
.icon:hover { text-decoration: none; opacity: .85; }
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.menu { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { padding: 8px 10px; font-size: 1rem; font-weight: 500; color: #333; white-space: nowrap; }
.menu a.strong { color: var(--accent); font-weight: 700; }
.all-menu > summary { list-style: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #fff; }
.all-menu > summary::-webkit-details-marker { display: none; }
.all-menu[open] > summary::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 30; }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(300px, 86vw); background: #fff; z-index: 40; overflow-y: auto; padding: 24px 0 32px; box-shadow: 0 0 24px rgba(0, 0, 0, .15); }
.drawer-brand { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; margin: 0 28px 16px; }
.drawer-brand span { color: var(--accent); }
.drawer h2 { font-size: 1rem; margin: 0; padding: 18px 28px 8px; border-top: 1px solid var(--line); }
.drawer ul { list-style: none; margin: 0; padding: 0 0 12px; }
.drawer li a { display: block; padding: 9px 28px; font-size: .97rem; }
.drawer ul.two { border-top: 1px solid var(--line); padding-top: 12px; }

@media (max-width: 899px) {
  .site-header { top: -34px; }
  .bar .wrap { flex-wrap: wrap; gap: 10px 12px; }
  .brand { font-size: 1.35rem; }
  .search-box { order: 3; flex: 1 1 100%; height: 44px; }
  .icons { gap: 4px; }
  .nav .wrap { height: 52px; gap: 10px; }
  .menu a { font-size: .95rem; padding: 8px 8px; }
  .feature-side { display: none; }
  .feature-big { min-height: 0; padding: 24px 20px; gap: 12px; }
  .feature-big .art .cover { width: 120px; }
  .sec-head { margin-top: 44px; }
  .sec-head h2 { font-size: 1.25rem; }
  .best-band { margin-top: 48px; padding: 32px 0 40px; }
  .book h1 { font-size: 1.4rem; margin: 20px 0 20px; }
  .book-top .book-cover { order: -1; }
  .cover.large { max-width: 240px; }
  .book-tabs { top: calc(112px + var(--pt-h, 0px)); margin-top: 32px; }
  }

/* buttons and forms */
.button { display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; min-height: 48px; border-radius: var(--radius); border: 1px solid var(--accent); color: var(--accent); background: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none !important; }
.button.small { min-height: 34px; padding: 0 12px; font-size: .9rem; }
.button.primary { background: var(--accent); color: var(--accent-ink); }
.button.primary:hover { filter: brightness(1.08); }
.button.danger { border-color: var(--warn); color: var(--warn); }
.stack { display: grid; gap: 16px; max-width: 440px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: .95rem; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input:not([type]) { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; background: #fff; }
.field input:focus { border-color: var(--ink); outline: 0; }
.field.check { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.field.check label { display: inline; font-weight: normal; }
.field.check .hint { flex-basis: 100%; }
/* Password show/hide (the button appears only when /assets/store.js runs: .pw-on). Logical sides, so it is on the left in Arabic. */
.pw-wrap { position: relative; }
.pw-wrap.pw-on input { padding-inline-end: 52px; }
.pw-wrap.pw-on input::-ms-reveal { display: none; }
.pw-toggle { position: absolute; inset-inline-end: 4px; top: 4px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--sub); cursor: pointer; display: grid; place-items: center; }
.pw-toggle[hidden] { display: none; }
.pw-toggle:hover { color: var(--ink); background: var(--band); }
.pw-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; color: var(--ink); }
.pw-toggle .pw-slash { display: none; }
.pw-toggle[aria-pressed="true"] .pw-slash { display: inline; }
@media (forced-colors: active) { .pw-toggle { color: ButtonText; } .pw-toggle:focus-visible { outline-color: Highlight; } }
.hint { color: var(--muted); font-size: .88rem; margin: 6px 0 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: none; color: var(--warn); background: #fff7ed; border: 1px solid #fed7aa; padding: 12px 14px; border-radius: var(--radius); }
.form-error:target, .form-error.show { display: block; }
.notice-ok { color: var(--accent); background: var(--accent-soft); padding: 12px 14px; border-radius: var(--radius); }
.auth { max-width: 460px; margin: 24px auto 0; }
.auth h1 { text-align: center; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .9rem; }
/* the administrator's front page (T-540) */
.admin-hub { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.admin-hub li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; overflow-wrap: anywhere; }
.admin-todo { padding-inline-start: 1.2em; }
.admin-todo li { margin: 4px 0; }
.facts.admin-sales th { width: auto; }
/* a message shown again where the page stands after a form came back to the same place (store.js 3, owner 2026-11-06) */
.keep-toast { position: fixed; z-index: 70; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin-inline: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 16px; background: #fff; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
.keep-toast.keep-toast-alert { color: var(--warn); border-color: var(--warn); }
.keep-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.keep-toast p { margin: 0; }
.keep-toast p + p { margin-top: 4px; }
.keep-toast-close { flex: none; min-width: 44px; min-height: 44px; margin: -10px 0; border: 0; background: transparent; color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.keep-toast-close:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
body.has-promo-bar .keep-toast { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
@media (forced-colors: active) { .keep-toast { border-color: CanvasText; } }
/* a form being sent by store.js 3a (T-543): its buttons off and turning */
form[aria-busy="true"] { cursor: progress; }
form[aria-busy="true"] [data-keep-off] { opacity: .7; cursor: progress; }
form[aria-busy="true"] [data-keep-off]::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-inline-start: .45em; vertical-align: -.1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: keep-turn .8s linear infinite; }
@keyframes keep-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { form[aria-busy="true"] [data-keep-off]::after { animation: none; border-inline-end-color: currentColor; opacity: .5; } }
.keep-fail { margin: 8px 0 0; }
.page-search { display: flex; max-width: 560px; height: 48px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 6px 0 20px; margin-bottom: 12px; }
.page-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; background: transparent; }
.page-search button { border: 0; background: transparent; font-weight: 700; padding: 0 14px; cursor: pointer; }

/* root page (language list) */
.hero { text-align: center; padding: 40px 0 12px; }
.language-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-width: 760px; margin: 20px auto; }
.language-list a { display: block; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }

/* top page */
.feature { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
.feature-big { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; min-height: 320px; padding: 36px 48px; border-radius: 12px; background: #eef0fa; overflow: hidden; }
.feature-big:hover, .feature-side:hover { text-decoration: none; }
.feature-big .text, .feature-side .text { display: grid; gap: 8px; align-content: center; }
.feature-big .label, .feature-side .label { justify-self: start; font-size: .78rem; font-weight: 700; color: #fff; background: #111; padding: 2px 8px; border-radius: 4px; }
.feature-big .name { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.3; }
.feature-big .sub { color: var(--sub); }
.feature-big .price { font-weight: 700; }
.feature-big .art .cover { width: clamp(140px, 18vw, 210px); transform: rotate(4deg); box-shadow: 0 18px 36px rgba(30, 34, 90, .28); }
.feature-side { display: grid; grid-template-rows: 1fr auto; border-radius: 12px; background: var(--band); overflow: hidden; }
.feature-side .art { display: grid; place-items: center; padding: 28px 0 0; background: #e8eef6; }
.feature-side .art .cover { width: 150px; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); margin-bottom: -1px; }
.feature-side .text { padding: 18px 20px 22px; text-align: center; justify-items: center; }
.feature-side .label { justify-self: center; background: none; color: var(--accent); padding: 0; }
.feature-side .name { font-weight: 700; font-size: 1.02rem; }
@media (min-width: 900px) { .feature { grid-template-columns: 3fr 1fr; } }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 64px 0 20px; }
.sec-head h2 { margin: 0; font-size: 1.5rem; }
.more { font-size: .9rem; color: #333; white-space: nowrap; }
.slider { position: relative; }
.slider .arrow { position: absolute; top: 34%; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; display: none; place-items: center; z-index: 2; font-size: 1.2rem; color: #333; }
.slider .arrow.prev { inset-inline-start: -64px; }
.slider .arrow.next { inset-inline-end: -64px; }
.slider .arrow:disabled { opacity: .35; cursor: default; }
@media (min-width: 1360px) { .slider.ready .arrow { display: grid; } }
.best-band { background: var(--band); margin: 72px calc(50% - 50vw) 0; padding: 48px 0 56px; }
.best { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; display: grid; gap: 24px; }
.best-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.best-head h2 { margin: 0; font-size: 1.6rem; white-space: nowrap; }
.tabs { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tabs button { border: 0; background: none; padding: 6px 0; color: var(--sub); cursor: pointer; font-size: .95rem; }
.tabs button[aria-pressed="true"] { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) { .best { grid-template-columns: 200px 1fr; gap: 40px; } .tabs { flex-direction: column; gap: 6px; } }

/* side menu pages */
.with-side { display: grid; gap: 24px; }
.side { font-size: .95rem; }
.side-title { font-weight: 700; font-size: 1.1rem; margin: 16px 0 8px; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list > li > a { display: block; padding: 7px 0; color: #333; }
.side-list ul { list-style: none; margin: 0 0 8px; padding: 4px 0 4px 12px; border-inline-start: 2px solid var(--line); }
.side-list ul a { display: block; padding: 4px 0; font-size: .88rem; color: var(--sub); }
.side-list a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.side-list.plain { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 899px) {
  .side { order: 2; border-top: 1px solid var(--line); padding-top: 8px; }
  .side-list { display: flex; flex-wrap: wrap; gap: 0 14px; }
  .side-list ul { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 12px; border: 0; padding: 0 0 8px; }
}
@media (min-width: 900px) { .with-side { grid-template-columns: 200px 1fr; gap: 48px; } .side { position: sticky; top: calc(140px + var(--pt-h, 0px)); align-self: start; max-height: calc(100vh - 160px - var(--pt-h, 0px)); overflow-y: auto; } }
.list-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin: 8px 0 24px; }
.list-head h1 { margin: 0; font-size: 1.6rem; }
.genre-group h2 { font-size: 1.1rem; margin: 28px 0 10px; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 16px; font-size: .92rem; color: var(--sub); }

/* covers */
.book-grid, .book-row { list-style: none; padding: 0; margin: 0; }
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
@media (min-width: 640px) { .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .book-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .book-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .book-grid.cols-6, .book-grid:not([class*="cols-"]) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.book-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 24px) / 6); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.book-row::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .book-row { grid-auto-columns: 40%; gap: 16px; } }
.book-card { scroll-snap-align: start; min-width: 0; }
.book-card[hidden] { display: none; }
.book-card a { display: grid; gap: 6px; color: var(--ink); }
.book-card a:hover { text-decoration: none; }
.book-card a:hover .title { text-decoration: underline; text-underline-offset: 3px; }
.cover-box { display: block; }
.cover { display: block; width: 100%; aspect-ratio: 640 / 907; object-fit: cover; border: 1px solid var(--line); background: var(--band); }
.book-card .cover-box { margin-bottom: 8px; }
.book-card .title { font-size: 1rem; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-card .sub { color: var(--muted); font-size: .85rem; }
.book-card .price { font-size: .95rem; font-weight: 700; }
.rank { justify-self: start; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; background: #595959; color: #fff; font-size: .78rem; font-weight: 700; border-radius: 3px; }
.book-card:nth-child(-n+3) .rank { background: var(--accent); }

/* book page */
.crumbs ol { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--sub); }
.crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--line-strong); }
.crumbs [aria-current] { color: var(--muted); }
.book h1 { text-align: center; font-size: 1.75rem; margin: 32px 0 36px; }
.book-top { display: grid; gap: 28px; }
.book-meta p { margin: 0 0 8px; color: var(--sub); }
.book-meta .by { color: var(--ink); font-weight: 500; }
.book-meta .format { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: .9rem; }
.book-cover { text-align: center; }
.cover.large { width: 100%; max-width: 360px; margin: 0 auto; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
/* The book's images (owner 2026-10-28): the large one keeps the cover's frame; spine, back and contents fit inside it. */
.g-main { display: block; }
.g-img { object-fit: contain; background: #fff; }
.g-thumbs { list-style: none; padding: 0; margin: 12px auto 0; display: flex; justify-content: center; gap: 8px; max-width: 360px; }
.g-thumbs a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--sub); font-size: .75rem; text-decoration: none; width: 76px; }
.g-thumbs a[aria-current="true"] { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.g-thumbs img { width: 64px; height: 90px; object-fit: contain; background: var(--band); }
/* A form error of the book page, opened without the script: shown lower than the sticky bars, not at the very top. */
.buy-box .form-error, .pdf-box .form-error, .print-box .form-error { scroll-margin-top: 40vh; }
.buy-box p { margin: 0; }
.buy-box .price { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.buy-box .price strong { font-size: 1.7rem; }
.buy-box .tax { color: var(--muted); font-size: .85rem; margin-inline-start: 4px; }
.buy-box .line { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.buy-box .line span:first-child { font-weight: 700; }
.buy-box .line span:last-child { color: var(--sub); text-align: end; }
.buy-main { margin-top: 20px; }
.buy-main .button { width: 100%; }
.closed { color: var(--warn); font-weight: 700; }
p.closed.buy-main { padding: 14px; background: #fff7ed; border-radius: var(--radius); text-align: center; }
@media (min-width: 900px) { .book-top { grid-template-columns: 1fr 380px 1fr; gap: 40px; align-items: start; } .buy-box { padding-inline-start: 8px; } }
.book-tabs { position: sticky; top: calc(134px + var(--pt-h, 0px)); z-index: 5; display: flex; background: #fff; border-bottom: 1px solid var(--line); margin: 56px 0 0; }
.book-tabs a { flex: 1; text-align: center; padding: 14px 8px; color: var(--sub); border-bottom: 2px solid transparent; }
.book-tabs a:first-child { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.book-body { display: grid; gap: 32px; }
.book-main, .book-aside, .side-main, .best > * { min-width: 0; }
@media (min-width: 900px) { .book-body.has-aside { grid-template-columns: 1fr 300px; gap: 56px; } }
.book-main h2, .book-aside h2 { font-size: 1.25rem; margin: 48px 0 16px; }
.facts { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: .93rem; }
.facts th, .facts td { text-align: start; padding: 14px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { width: 140px; font-weight: 500; }
.facts td { color: var(--sub); }
/* T-609 (F30): the tables with a header row (admin pages, shared/views/tables.ts) scroll sideways inside their box, their columns
   as wide as their words; on a phone each row is a short card, "column: value". */
.facts thead th { width: auto; }
.table-scroll { overflow-x: auto; max-width: 100%; margin: 0 0 16px; }
.table-scroll > .facts { margin: 0; }
@media (max-width: 640px) {
  .facts.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .facts.stack, .facts.stack tbody, .facts.stack tr, .facts.stack th, .facts.stack td { display: block; width: auto; }
  .facts.stack tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .facts.stack th, .facts.stack td { border-bottom: 0; padding: 3px 4px; overflow-wrap: anywhere; }
  .facts.stack [data-label]::before { content: attr(data-label) "："; color: var(--ink); font-weight: 500; }
}
.genre-path a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.description { color: #333; line-height: 1.8; }
.previews ol { list-style: none; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 220px); gap: 12px; overflow-x: auto; }
.previews img { border: 1px solid var(--line); }
.mini-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.mini-list a { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.mini-list a:hover { text-decoration: none; }
.mini-text { display: grid; gap: 4px; }
.mini-text .title { font-weight: 500; line-height: 1.45; }
.mini-text .sub { color: var(--muted); font-size: .85rem; }
.mini-text .price { font-weight: 700; }
/* The banner fixed at the bottom of a book page (owner 2026-10-28): the membership's offer, or for a member one affiliate
   banner (PR) with a close button. Buying is in the buy box. Owner 2026-10-30 (D-796): about 1.5 times as tall (56 → 84 px,
   on a phone 44 → 66 px) and the offer's words larger (15 → 20 px, on a phone 13.8 → 17 px). */
.promo-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 15; background: var(--accent-soft, #eef4ff); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .05); }
.promo-bar[hidden] { display: none; }
.promo-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 90px; padding-block: 8px; }
.pb-join { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; color: var(--accent-deep, var(--ink)); font-size: 1.25rem; line-height: 1.4; font-weight: 700; text-decoration: none; text-align: center; }
.pb-join[hidden] { display: none; }
.pb-join:hover .pb-text, .pb-ad a:hover .pb-text { text-decoration: underline; }
.pb-ad { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 960px; }
.pb-ad[hidden] { display: none; }
/* The affiliate banners (owner 2026-10-30, T-468; the offer bar 84 → 90 px with them): the same height as the membership's offer (90 px on a computer, 66 px on a
   phone); 728x90 from 768 px, 320x50 below; the advertiser's own pictures as given, the others drawn in its colours. */
.promo-bar.pb-with-ad .wrap { padding-block: 0; }
.pb-ad a.pb-banner { flex: 0 1 auto; min-width: 0; display: block; line-height: 0; text-decoration: none; }
.pb-banner picture, .pb-banner .ad-img { display: block; max-width: 100%; height: auto; }
.pb-banner .ad-sp { display: none; }
.adc { box-sizing: border-box; display: flex; align-items: center; overflow: hidden; width: 728px; max-width: 100%; height: 90px; padding: 0 22px; gap: 20px; line-height: 1.3; font-family: inherit; }
.adc.ad-sp { width: 320px; height: 50px; padding: 0 10px; gap: 9px; }
.adc-logo { flex: none; display: block; width: auto; }
.adc-text { flex: 1; min-width: 0; font-weight: 700; font-size: 21px; }
.adc.ad-sp .adc-text { font-size: 13px; line-height: 1.25; }
.adc-cta { flex: none; font-weight: 700; border-radius: 999px; white-space: nowrap; font-size: 16px; padding: 12px 22px; }
.adc.ad-sp .adc-cta { font-size: 11px; padding: 7px 11px; }
:lang(ru) .adc.ad-sp .adc-text, :lang(de) .adc.ad-sp .adc-text, :lang(fr) .adc.ad-sp .adc-text, :lang(pt) .adc.ad-sp .adc-text, :lang(es) .adc.ad-sp .adc-text, :lang(it) .adc.ad-sp .adc-text { font-size: 12px; line-height: 1.2; }
:lang(ru) .adc.ad-pc .adc-text, :lang(de) .adc.ad-pc .adc-text, :lang(fr) .adc.ad-pc .adc-text, :lang(pt) .adc.ad-pc .adc-text, :lang(es) .adc.ad-pc .adc-text, :lang(it) .adc.ad-pc .adc-text { font-size: 19px; }
/* NordVPN: black with a red button, the white logo. */
.adc-nordvpn { background: #0b0d12; color: #fff; }
.adc-nordvpn .adc-cta { background: #e5372e; color: #fff; }
.adc-nordvpn.ad-pc .adc-logo { height: 84px; margin: 0 -14px; }
.adc-nordvpn.ad-sp .adc-logo { height: 46px; margin: 0 -8px; }
/* NordPass: off-white with a teal button, the dark logo. */
.adc-nordpass { background: #f3f1ec; color: #191a1c; }
.adc-nordpass .adc-cta { background: #00cfb6; color: #191a1c; }
.adc-nordpass.ad-pc .adc-logo { height: 52px; }
.adc-nordpass.ad-sp .adc-logo { height: 22px; margin: 0 2px 0 -4px; }
/* italki: red with the white logo and a white button; the logo keeps its clear space (its guide). */
.adc-italki { background: #ff4438; color: #fff; }
.adc-italki .adc-cta { background: #fff; color: #ff4438; }
.adc-italki.ad-pc .adc-logo { height: 50px; }
.adc-italki.ad-sp .adc-logo { height: 30px; }
/* Narrower than 360 px the 320x50 banner shrinks: smaller words, so that the longer languages still fit on two lines. */
@media (max-width: 359.98px) {
  .adc.ad-sp { gap: 6px; padding: 0 7px; }
  .adc.ad-sp .adc-text, :lang(ru) .adc.ad-sp .adc-text, :lang(de) .adc.ad-sp .adc-text, :lang(fr) .adc.ad-sp .adc-text, :lang(pt) .adc.ad-sp .adc-text, :lang(es) .adc.ad-sp .adc-text, :lang(it) .adc.ad-sp .adc-text { font-size: 10.5px; line-height: 1.15; }
  .adc.ad-sp .adc-cta { font-size: 10px; padding: 6px 8px; }
}
@media (max-width: 767.98px) {
  .pb-banner .ad-pc { display: none; }
  .pb-banner .ad-sp { display: flex; }
  .pb-banner img.ad-sp { display: block; }
  /* A phone: the small PR mark over the banner, the close button on its right (the 320x50 banner keeps its size from a
     width of 360 px; narrower, it shrinks). */
  .promo-bar.pb-with-ad .wrap { padding-inline: 4px; }
  .pb-ad { display: grid; grid-template-columns: minmax(0, auto) 30px; grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; width: auto; max-width: 100%; align-items: center; }
  .pb-ad .pb-pr { grid-row: 1; grid-column: 1; justify-self: start; padding: 0 4px; font-size: .6rem; line-height: 1.25; border-radius: 3px; white-space: nowrap; }
  .pb-ad a.pb-banner { grid-row: 2; grid-column: 1; }
  .pb-ad .pb-close { grid-row: 1 / 3; grid-column: 2; width: 30px; height: 30px; }
}
.pb-pr { flex: none; padding: 1px 8px; border: 1px solid var(--sub); border-radius: 4px; font-size: .75rem; font-weight: 700; color: var(--sub); }
.pb-ad a { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; line-height: 1.4; }
.pb-name { font-weight: 700; }
.pb-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--sub); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.pb-close:hover, .pb-close:focus-visible { background: rgba(0, 0, 0, .06); color: var(--ink); }
body.has-promo-bar { padding-bottom: 98px; }
/* A low bar on a phone (owner 2026-10-28: never covering much of the screen). */
@media (max-width: 600px) {
  .promo-bar .wrap { min-height: 66px; padding-block: 6px; gap: 8px; }
  .pb-join { font-size: 1.06rem; line-height: 1.35; }
  .pb-ad { column-gap: 6px; }
  .pb-ad a { font-size: .8rem; line-height: 1.3; }
  .pb-close { width: 32px; height: 32px; }
  body.has-promo-bar { padding-bottom: 74px; }
}
/* The membership's offer right under the header (owner 2026-11-04: every language, layout.ts OFFER_ON_TOP): the same
   words as in the bottom bar, in a band inside the sticky header. The bottom bar there keeps only the affiliate banners, so
   no room is kept for it while it is hidden. */
.promo-top { background: var(--accent-soft, #eef4ff); border-top: 1px solid var(--line); }
.promo-top[hidden] { display: none; }
/* Inside the sticky header (owner 2026-11-04: it stays while scrolling, about 0.5 cm taller than first): a fixed height,
   so the bars that stick below the header (book tabs, side menu) move down by exactly --pt-h. */
.promo-top .wrap { display: flex; align-items: safe center; justify-content: center; height: 4.375rem; padding-block: 0; overflow: hidden; }
.promo-top .pb-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body.promo-on-top { --pt-h: calc(4.375rem + 1px); }
body.promo-on-top.tb-member { --pt-h: 0px; }
body.promo-on-top:has(> .promo-bar[hidden]), body.promo-on-top:not(:has(> .promo-bar)) { padding-bottom: 0; }
@media (max-width: 600px) {
  .promo-top .wrap { height: 5.25rem; }
  .promo-top .pb-text { font-size: .95rem; -webkit-line-clamp: 3; }
  body.promo-on-top { --pt-h: calc(5.25rem + 1px); }
}
/* A short screen (a phone turned sideways): one line, so some page is left to read between the header and the bottom bar. */
@media (max-height: 520px) {
  .promo-top .wrap { height: 2.5rem; }
  .promo-top .pb-text { font-size: .9rem; -webkit-line-clamp: 1; }
  body.promo-on-top { --pt-h: calc(2.5rem + 1px); }
}

/* book page: level tabs, section pills and the texts from the book (like the reference store) */
.format-tabs { display: flex; justify-content: center; gap: 0; margin: -16px auto 36px; background: var(--band); border-radius: 10px; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; }
.format-tabs a { display: grid; justify-items: center; gap: 2px; min-width: 110px; padding: 10px 18px; border-radius: 8px; color: var(--sub); font-size: .9rem; }
.format-tabs a:hover { text-decoration: none; color: var(--ink); }
.format-tabs a[aria-current] { background: #fff; color: var(--accent); font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.format-tabs .price { font-size: .8rem; font-weight: 700; }
.book-meta .catch { margin-top: 18px; color: var(--ink); font-weight: 700; line-height: 1.6; }
.pills { list-style: none; padding: 16px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .88rem; color: var(--sub); }
.pills a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.book-text { color: #333; line-height: 1.85; }
.book-text p { margin: 0 0 14px; }
.book-text .lead-line { font-weight: 700; color: var(--ink); }
.book-text .sub-head { font-weight: 700; color: var(--ink); margin-top: 22px; }
.book-text ul.checks { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 20px; }
.book-text ul.checks li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.description + .book-text { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.toc-list { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
.toc-list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 4px 0; }
.toc-list > li .t { flex: 1; }
.toc-list > li .p { color: var(--muted); font-size: .85rem; }
.toc-list > li.lv { font-weight: 700; color: var(--accent); margin-top: 14px; }
.toc-list > li.ch { font-weight: 700; color: var(--ink); margin-top: 10px; }
.toc-list > li.sub { padding-inline-start: 16px; color: var(--sub); }
.toc-list > li.part { font-weight: 700; color: var(--accent); margin-top: 14px; }
.toc-list .tag { font-size: .72rem; font-weight: 700; color: #fff; background: var(--sub); border-radius: 3px; padding: 0 6px; }
.toc-list .days { flex-basis: 100%; list-style: none; margin: 4px 0 2px; padding: 0 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 20px; font-weight: 400; color: var(--sub); font-size: .88rem; }
.toc-list .days .d { color: var(--muted); display: inline-block; min-width: 56px; }
.fold > summary { cursor: pointer; list-style: none; margin: 16px 0 0; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); text-align: center; font-weight: 700; color: var(--ink); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: " ▾"; }
.fold[open] > summary { display: none; }
.talk { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.talk li { display: grid; grid-template-columns: 72px 1fr; gap: 2px 12px; }
.talk .who { grid-row: span 2; font-weight: 700; color: var(--accent); font-size: .9rem; }
.talk .t { color: var(--ink); font-weight: 500; }
.talk .n { color: var(--muted); font-size: .9rem; }
.features { padding-inline-start: 18px; margin: 0; display: grid; gap: 8px; }
.features b { color: var(--ink); }
.book-aside h2:first-child { margin-top: 48px; }
.mini-text .rank { margin-bottom: 2px; }
.feature-big .intro { color: var(--sub); font-size: .95rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 560px; }

/* legal */
.legal table { border-collapse: collapse; width: 100%; background: var(--card); }
.legal th, .legal td { border: 1px solid var(--line); padding: 10px 12px; text-align: start; vertical-align: top; }
.legal th { width: 28%; background: var(--band); font-weight: 600; }
.updated { color: var(--muted); }

/* library and account */
.library { list-style: none; padding: 0; display: grid; gap: 14px; }
.library li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.library .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.codes { font-family: ui-monospace, Menlo, Consolas, monospace; columns: 2; padding: 12px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.qr { width: 200px; height: 200px; background: #fff; padding: 8px; border: 1px solid var(--line); }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }


/* language chooser in the account line (owner 2026-10-14: in the header) */
.util .languages { position: relative; margin-inline-start: 6px; }
.util .languages summary { cursor: pointer; list-style: none; padding: 3px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .78rem; color: var(--sub); }
.util .languages summary::-webkit-details-marker { display: none; }
.util .languages summary::after { content: " ▾"; }
.util .languages ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 45; list-style: none; margin: 0; padding: 10px 6px; width: 340px; max-width: 86vw; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.util .languages li a { display: block; padding: 6px 12px; font-size: .88rem; color: #333; }
.util .languages li a[aria-current] { color: var(--accent); font-weight: 700; }
/* Phones (owner 2026-11-08): the menus opened from the account line stay inside the screen. The list is anchored to the
   screen, not to its button (a button near the middle pushed the list past the left edge), one column, 12px from each side. */
@media (max-width: 640px) {
  .util .languages, .util .currency { position: static; }
  .util .languages ul, .util .currency .cur-box { position: fixed; top: 40px; inset-inline: 12px; width: auto; max-width: none; max-height: calc(100vh - 60px); }
  .util .languages ul { grid-template-columns: 1fr; }
  .util .languages li a { padding: 10px 14px; font-size: .95rem; }
}
/* top page catch line: the store's strength (one book, every language) */
.catch-band { text-align: center; padding: 28px 0 24px; }
.catch-band h1 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: 0 0 10px; letter-spacing: -.02em; }
/* The catch line under the heading (owner 2026-10-28): a little larger, quiet. */
.catch-band p { margin: 0 auto; max-width: 720px; color: var(--sub); font-size: clamp(1.05rem, 2vw, 1.25rem); letter-spacing: .04em; font-feature-settings: "palt"; }
/* book page extras */
.book-meta .langs a { color: var(--accent); font-weight: 700; font-size: .92rem; }
.review-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 14px; }
.review-box .box-title { font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.book-text ul.checks.one { grid-template-columns: 1fr; margin: 0; }
.book-text ul.dots { margin: 0; padding-inline-start: 20px; }
.note-line { color: var(--muted); font-size: .9rem; border-inline-start: 3px solid var(--line-strong); padding-inline-start: 10px; }

/* footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 96px; padding: 28px 0 40px; font-size: .88rem; color: var(--sub); }
.foot-brand p { margin: 0 0 4px; }
.legal-links { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 6px 0; }
.legal-links li + li a::before { content: ""; display: inline-block; height: 10px; margin: 0 12px; border-inline-start: 1px solid var(--line-strong); }
.legal-links a.strong { color: var(--ink); font-weight: 700; }
.foot-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: flex-start; }
.foot-brand .brand { font-size: 1.2rem; margin: 0 0 6px; }
.copyright { margin: 0; color: var(--muted); font-size: .82rem; }
.languages summary { cursor: pointer; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; list-style: none; }
.languages summary::-webkit-details-marker { display: none; }
.languages ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.languages a[aria-current] { font-weight: 700; color: var(--ink); }

/* reader (D-740: black on white works on e-ink, big buttons, no fixed bars or motion) */
[data-surface="reader"] main { max-width: 760px; }
.reader-header { padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.reader-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 16px 0; }
.reader-nav a, .reader-nav span { min-height: 48px; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 8px; padding: 0 14px; font-size: 18px; font-weight: 700; color: var(--ink); text-decoration: none; }
.reader-nav span.disabled { opacity: .35; }
.reader-page { position: relative; font-family: var(--serif); font-size: 1.15rem; line-height: 1.9; user-select: none; -webkit-user-select: none; }
.reader-page h2, .reader-page h3 { font-family: var(--serif); }
/* a part of a book with a drawn structure: its title large on its first page, its row in the contents like a heading */
.reader-page .part-title { font-size: 1.7em; line-height: 1.35; text-align: center; margin: 2.2em 0 1.4em; }
.reader-toc > li.rt-part { margin-top: .8em; }
.reader-toc > li.rt-part > a { font-weight: 700; }
.reader-toc > li.rt-part > ol { margin: .3em 0 .2em; padding-inline-start: 1.4em; font-weight: 400; list-style: none; }
/* with parts the chapters' own labels number them (numbers restarting under each part would mislead) */
.reader-toc:has(> li.rt-part) { list-style: none; padding-inline-start: .4em; }
.watermark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .1; transform: rotate(-24deg); font-size: .9rem; line-height: 4; word-spacing: 2em; color: var(--ink); }
/* Reader layout (owner 2026-10-14: the book first): a slim top row, the page, big Prev/Next, and the settings in a panel below
   that opens with the Settings link (#settings, CSS :target — no JavaScript needed, fine on e-readers). Every page link ends in
   #page, so the browser lands on the book. The top row sticks to the top only with JavaScript on fast screens (not e-ink). */
[data-surface="reader"] main { padding-top: 8px; }
.reader-shell { outline: none; }
.reader-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 52px; padding: 4px 0; background: var(--paper); }
.rb-icon { padding: 0; width: 44px; }
.rb-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; color: var(--ink); background: var(--card); text-decoration: none; font-weight: 700; white-space: nowrap; }
.rb-btn.disabled { opacity: .35; }
.rb-jump { flex: 1 0 auto; min-width: max-content; text-align: center; }
.rb-jump summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; font-weight: 700; border-radius: 8px; text-decoration: underline dotted; text-underline-offset: 4px; white-space: nowrap; }
.rb-jump summary::-webkit-details-marker { display: none; }
.rb-jump[open] .goto { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; width: max-content; max-width: 100%; margin: 4px auto 0; flex-wrap: nowrap; background: var(--card); border: 2px solid var(--ink); border-radius: 10px; padding: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.rb-jump .goto label, .rb-jump .goto button { white-space: nowrap; }
.rb-jump .goto input { width: 5em; }
.reader-progress { display: block; width: 100%; height: 4px; margin: 0 0 8px; accent-color: var(--ink); }
.reader-bottom { display: flex; gap: 12px; margin: 16px 0 8px; padding-bottom: env(safe-area-inset-bottom); }
.rb-big { flex: 1; min-height: 56px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 10px; font-size: 1.2rem; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--card); }
.rb-big.disabled { opacity: .35; }
.reader-settings { display: none; margin: 16px 0; padding: 16px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.reader-settings:target { display: block; }
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.rs-head h2 { margin: 0; font-size: 1.2rem; }
.rs-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.reader-start { display: flex; flex-wrap: wrap; gap: 8px; }
.index-list { list-style: none; padding: 0; columns: 2 220px; column-gap: 32px; }
.index-list li { break-inside: avoid; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.index-list a { display: inline-block; min-width: 32px; min-height: 32px; text-align: center; color: var(--accent); }
.reader-colophon { margin-top: 32px; padding-top: 16px; border-top: 2px solid var(--line); }
.reader-colophon dl div { display: flex; gap: 12px; padding: 4px 0; }
.reader-colophon dt { min-width: 7em; color: var(--muted); }
@media (max-width: 520px) {
  .reader-bar { gap: 4px; }
  .rb-btn { padding: 0 8px; font-size: .9rem; }
  .rb-jump summary { padding: 0 4px; font-size: .9rem; }
}
.rb-sticky .reader-bar { position: sticky; top: 0; z-index: 20; }
/* Two text screens side by side on a wide landscape screen (like a book held open); stacked on a narrow one. */
.reader-text.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.reader-text.two .reader-page { overflow: hidden; overflow-wrap: anywhere; }
.reader-text.two .reader-page + .reader-page { border-top: 1px solid var(--line); padding-top: 24px; }
@media (min-width: 900px) and (orientation: landscape) {
  [data-surface="reader"].rtwo main { max-width: 1500px; }
  .reader-text.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .reader-text.two .reader-page + .reader-page { border-top: 0; padding-top: 0; border-inline-start: 1px solid var(--line); padding-inline-start: 28px; }
}
/* Pages that fit the screen (owner 2026-11-07; store.js 7p): the server's page in columns as tall as the room on the screen,
   moved one sheet at a time (no scrolling). Two sheets side by side on the two-page view of a wide landscape screen. One
   watermark over the screen. Without JavaScript (e-readers too) the page scrolls as before. */
.reader-text.paged { display: block; position: relative; overflow: hidden; }
.reader-text.paged .rt-flow { column-fill: auto; overflow-wrap: anywhere; }
.reader-text.paged .rt-flow > .reader-page { overflow: visible; border: 0; padding: 0; }
.reader-text.paged .rt-flow > .reader-page + .reader-page { margin-top: 1.2em; }
.reader-text.paged .rt-flow > .reader-page[data-first] + .reader-page[data-first], .reader-text.paged .rt-flow > .reader-page + .reader-page[data-first] { break-before: column; margin-top: 0; }
.reader-text.paged .rt-flow .watermark { display: none; }
.reader-text.paged > .rt-wm { display: block; z-index: 1; }
.reader-text.paged .reader-page p, .reader-text.paged .reader-page h2 { orphans: 2; widows: 2; }
.reader-text.paged .reader-page h2 { break-after: avoid; }
.reader-text.two.paged .rt-flow, .reader-text.spread.paged .rt-flow { column-rule: 1px solid var(--line); }
.reader-page p.cont { margin-top: 0; }
.rt-sheet { margin: 6px 0 0; min-height: 1.4em; text-align: center; font-size: .85rem; letter-spacing: .02em; color: var(--muted); }
.rpaged .reader-bottom { margin: 8px 0 4px; }
.rpaged .reader-progress { margin-bottom: 4px; }
/* The whole cover before the text (T-566): the back, the spine and the front in one picture, as large as the screen allows (the
   two-page view: the whole width of the open book; one page: the front, then the spine with the back). */
[data-surface="reader"].rcover main { max-width: 1880px; }
.rb-label { flex: 1 0 auto; text-align: center; font-weight: 700; white-space: nowrap; }
.reader-cover { margin: 8px 0 0; display: flex; justify-content: center; }
.rc-pic { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100svh - 190px); box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }
/* Fixed-layout books as page images (D-751): one page or a two-page spread, each image under its own watermark. */
[data-surface="reader"].ri main { max-width: 1880px; }
.reader-tools { display: grid; gap: 8px; margin: 8px 0 12px; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tool-label { font-weight: 700; min-width: 7em; }
.tool { min-height: 44px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; color: var(--ink); background: var(--card); text-decoration: none; font: inherit; font-weight: 700; cursor: pointer; }
.tool[aria-current="true"] { background: var(--ink); color: var(--paper); }
.goto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.goto input { width: 6.5em; min-height: 44px; font-size: 1.1rem; }
.reader-spread { display: flex; gap: 8px; overflow-x: auto; line-height: 1; }
.reader-spread > :first-child { margin-inline-start: auto; }
.reader-spread > :last-child { margin-inline-end: auto; }
.reader-image { position: relative; flex: 0 0 auto; margin: 0; overflow: hidden; width: 100%; max-width: 900px; }
.reader-spread.spread .reader-image { width: 49%; width: calc(50% - 4px); }
.reader-image img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; -webkit-user-drag: none; -webkit-touch-callout: none; }
.reader-image .watermark { line-height: 5; }
/* Whole page in the window: the page is as tall as the window minus the top row (64 px); A5 pages are 0.7057 times as wide. */
.rf-h .reader-image { max-width: none; width: 100%; width: min(100%, calc((100vh - 64px) * .7057)); width: min(100%, calc((100dvh - 64px) * .7057)); }
.rf-h .reader-spread.spread .reader-image { width: calc(50% - 4px); width: min(calc(50% - 4px), calc((100vh - 64px) * .7057)); width: min(calc(50% - 4px), calc((100dvh - 64px) * .7057)); }
/* Auto (the default): the whole page on landscape screens (PCs, tablets turned sideways), the width on phones. */
@media (min-width: 900px) and (orientation: landscape) {
  .rf-a .reader-image { max-width: none; width: 100%; width: min(100%, calc((100vh - 64px) * .7057)); width: min(100%, calc((100dvh - 64px) * .7057)); }
  .rf-a .reader-spread.spread .reader-image { width: calc(50% - 4px); width: min(calc(50% - 4px), calc((100vh - 64px) * .7057)); width: min(calc(50% - 4px), calc((100dvh - 64px) * .7057)); }
}
/* Zoom: 100% is the printed size of the page (A5: 560 CSS px wide); wider than the window scrolls sideways. */
.rf-75 .reader-spread .reader-image { width: 420px; max-width: none; }
.rf-100 .reader-spread .reader-image { width: 560px; max-width: none; }
.rf-125 .reader-spread .reader-image { width: 700px; max-width: none; }
.rf-150 .reader-spread .reader-image { width: 840px; max-width: none; }
[data-surface="reader"].rt-night .reader-image img { filter: brightness(.88); }
:fullscreen body, body:fullscreen { background: var(--paper); }
.thumbs { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.thumbs a { display: block; text-align: center; color: var(--ink); text-decoration: none; }
.thumbs img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.thumbs span { display: block; font-size: .9rem; margin-top: 4px; }
.reader-foot { color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 12px; }
/* Reader settings (D-740 ⑨; cookie tb_reader → body classes rs1–5, rl1–3, rt-light|sepia|night|contrast) */
[data-surface="reader"].rs1 .reader-page { font-size: .95rem; }
[data-surface="reader"].rs2 .reader-page { font-size: 1.05rem; }
[data-surface="reader"].rs3 .reader-page { font-size: 1.15rem; }
[data-surface="reader"].rs4 .reader-page { font-size: 1.35rem; }
[data-surface="reader"].rs5 .reader-page { font-size: 1.6rem; }
[data-surface="reader"].rl1 .reader-page { line-height: 1.6; }
[data-surface="reader"].rl2 .reader-page { line-height: 1.9; }
[data-surface="reader"].rl3 .reader-page { line-height: 2.3; }
[data-surface="reader"].rt-light { --paper: #ffffff; --card: #ffffff; --ink: #1b1b1b; --muted: #555555; --line: #d6d6d6; }
[data-surface="reader"].rt-sepia { --paper: #f4ecd8; --card: #f8f1e1; --ink: #3b2f1e; --muted: #6b5a40; --line: #dccfb2; }
[data-surface="reader"].rt-night { --paper: #121212; --card: #1c1c1c; --ink: #e8e6e3; --muted: #a8a49e; --line: #3a3a3a; --accent: #9fd3c1; --accent-ink: #121212; --accent-soft: #1f3a33; --warn: #ffb38a; }
[data-surface="reader"].rt-night .form-error { background: #3a2318; border-color: #7a3f22; }
[data-surface="reader"].rt-contrast { --paper: #ffffff; --card: #ffffff; --ink: #000000; --muted: #000000; --line: #000000; --accent: #000000; --accent-ink: #ffffff; }
[data-surface="reader"].rt-contrast .reader-page { font-weight: 600; }
[data-surface="reader"].rt-night .watermark { opacity: .14; }
[data-surface="reader"] select { font: inherit; padding: 8px; min-height: 44px; }
/* Printing the reader shows only the notice (data-noprint on the wrapper of the page) — a deterrent, not a protection (D-740 ⑩). */
@media print {
  [data-surface="reader"] .reader-header,
  [data-surface="reader"] main:has([data-noprint]) > :not([data-noprint]),
  [data-surface="reader"] [data-noprint] > * { display: none !important; }
  [data-surface="reader"] [data-noprint]::before { content: attr(data-noprint); display: block; font-size: 1.2rem; padding: 2rem 0; }
}
.book-main section, .book-body { scroll-margin-top: calc(200px + var(--pt-h, 0px)); }

/* D-752: the four formats of a staff book (radio cards inside the buy form; the bundle is the best value). */
.format-cards { border: 0; padding: 0; margin: 0 0 12px; }
.format-cards legend { font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.format-cards ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fc { border: 2px solid var(--line); border-radius: 10px; background: var(--card); }
.fc label, .fc > a, .fc.off { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; cursor: pointer; color: inherit; text-decoration: none; }
.fc.off { cursor: default; opacity: .55; grid-template-columns: 1fr auto; }
.fc > a { grid-template-columns: 1fr auto; }
.fc input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.fc-name { font-weight: 700; }
.fc-price { font-weight: 700; white-space: nowrap; }
.fc-price small { font-weight: 400; color: var(--muted); }
.fc-price.soon { font-weight: 400; color: var(--muted); }
.fc-note { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); }
.fc-best { border-color: var(--accent); }
.fc-badge { grid-column: 2; justify-self: start; background: var(--accent); color: var(--accent-ink, #fff); border-radius: 999px; padding: 1px 10px; font-size: .78rem; font-weight: 700; }
.fc-save { grid-column: 2 / -1; font-size: .82rem; color: var(--accent); }
.fc:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
/* The membership offer inside the e-book card (owner 2026-10-28), under its name and price. */
.format-cards .fc-member { margin: 0; padding: 0 12px 10px 42px; font-size: .86rem; line-height: 1.5; }
.format-cards .fc-member p { margin: 0; }
.format-cards .fc-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 12px; }
.format-cards .fc-row + .fc-member, .format-cards .fc.off .fc-member { padding-left: 12px; }
.format-cards .fc.off.fc-with-member { display: block; padding: 0; }
/* The paper book and the print-ready PDF right under the buy box (owner 2026-10-26). */
.book-buy-more { display: grid; gap: 16px; margin: 16px 0 24px; }
.book-buy-more[hidden], .book-buy-more .panel[hidden], .print-box .pm-spine[hidden], .pdf-box .pm-spine[hidden] { display: none; }
.book-buy-more .panel { margin: 0; }
/* Paper books (owner 2026-10-27): the book page's country, price and shipping, and the library's orders. */
.print-box .line { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0; }
.print-box .ship-estimate { font-size: .9rem; color: var(--sub); }
.print-box [hidden] { display: none; }
.print-orders { list-style: none; padding: 0; display: grid; gap: 12px; }
/* Compact (owner 2026-10-29: the box was much taller than its small picture): tight lines on every screen, and on a wide one the
   country with its prices and the order side by side, the notes in two columns and the picture beside them. */
.print-box h2 { margin: 0 0 6px; }
.print-box p { margin-block: 4px; }
.print-box .pb-head > :last-child { margin-bottom: 0; }
.print-form { display: grid; gap: 10px; margin-top: 10px; clear: both; }
.print-box .pb-choose, .print-box .pb-order { display: grid; gap: 6px; align-content: start; min-width: 0; }
.print-box .pb-choose .field { margin: 0; }
.print-box .pb-build { border: 0; margin: 2px 0; padding: 0; display: grid; gap: 4px; }
.print-box .pb-build legend { font-weight: 700; font-size: .95rem; padding: 0; margin-bottom: 2px; }
.print-box .pb-build label { display: flex; gap: 8px; align-items: center; min-height: 40px; }
.print-box .pb-build label strong { margin-left: auto; white-space: nowrap; }
.print-box .pb-build[hidden] { display: none; }
.print-box .pb-choose select { max-width: 100%; font: inherit; min-height: 44px; padding: 8px; }
.print-box .pb-notes { margin-top: 8px; }
.print-box .pb-notes .hint { font-size: .82rem; line-height: 1.55; }
.print-box .print-no-refund { margin: 0; }
.print-box .print-agree { margin: 0; }
.print-box .print-agree label { display: flex; gap: 8px; align-items: flex-start; }
.print-box .print-order-button { width: 100%; font-size: 1.1rem; padding-block: 12px; }
.print-box .print-order-button:disabled { opacity: .45; cursor: not-allowed; }
/* The printed copy in 3D (owner 2026-10-28): the edition's cover and spine, beside the box on a wide screen, small on a phone. */
.print-mock { float: inline-end; margin: 0 0 8px 12px; perspective: 700px; }
.pm-book { position: relative; width: 64px; aspect-ratio: 640 / 907; transform-style: preserve-3d; transform: rotateY(38deg); margin-inline-start: 10px; }
.pm-front { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0 3px 3px 0; box-shadow: 6px 8px 18px rgba(0, 0, 0, .22); backface-visibility: hidden; }
.pm-spine { position: absolute; top: 0; right: 100%; height: 100%; width: auto; transform-origin: right center; transform: rotateY(-90deg); filter: brightness(.88); }
@media (min-width: 700px) {
  .print-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  .print-box .pb-notes { columns: 2; column-gap: 28px; }
  .print-box .pb-notes p:first-child { margin-top: 0; }
  .print-box .pb-notes p:last-child { break-inside: avoid; }
}
@media (min-width: 900px) {
  .print-box.has-mock { display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 28px; align-items: start; }
  .print-box.has-mock > * { grid-column: 1; }
  .print-box.has-mock > .print-mock { grid-column: 2; grid-row: 1 / span 4; float: none; margin: 4px 0 0; align-self: center; justify-self: center; }
  .print-box.has-mock .pm-book { width: 128px; }
  /* Lower boxes on a wide screen (owner 2026-10-28): tighter lines. */
  .pdf-box p { margin-block: 6px; }
}
/* The print-ready PDF for members (book page) and 「自分で製本する」 (My books). Its 3D book (owner 2026-11-07, the paper book's
   picture): floated beside the text, small on a phone, larger on a wide screen; never wider than the box. */
.pdf-box.has-mock::after { content: ""; display: block; clear: both; }
.pdf-box .print-mock { margin: 4px 4px 8px 16px; }
@media (min-width: 900px) { .pdf-box.has-mock .pm-book { width: 110px; } .pdf-box .print-mock { margin-inline-start: 36px; } }
.pdf-box .line { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0; }
.pdf-box .members-only { margin: 8px 0; }
.self-print-country { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.self-print h3 { margin: 12px 0 4px; font-size: 1rem; }
/* The audiobook player (plain audio controls per chapter without JavaScript; one player with the script). */
.audio-player .ap-controls[hidden] { display: none; }
.audio-player .ap-controls { display: grid; gap: 10px; margin: 12px 0 20px; padding: 16px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.ap-buttons, .ap-settings { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-play { min-width: 120px; }
.ap-seek { width: 100%; accent-color: var(--accent); }
.ap-error { color: var(--warn); font-weight: 600; border-inline-start: 4px solid currentColor; padding-inline-start: .6rem; }
.ap-error[hidden] { display: none; }
.ap-now { font-weight: 700; margin: 0; }
.ap-time { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-settings select { font: inherit; padding: 8px; min-height: 44px; }
.ap-chapters { padding-inline-start: 1.4em; }
.ap-chapters li { padding: 8px 0; border-bottom: 1px dotted var(--line); }
.ap-chapters audio { display: block; width: 100%; margin-top: 6px; }
.ap-chapter { font: inherit; background: none; border: 0; padding: 4px 0; color: var(--accent); text-align: start; cursor: pointer; min-height: 44px; }
.ap-chapters li.ap-current .ap-chapter { font-weight: 700; color: var(--ink); }
/* Read while listening (buyers of the e-book and the audiobook; the script shows the bar): under the page, kept at the bottom
   of the window on fast screens; the paragraph being read is coloured. Hidden without JavaScript. */
.read-along { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--card); }
.read-along[hidden], .ra-hint[hidden], .ra-error[hidden] { display: none; }
.rb-sticky .read-along { position: sticky; bottom: 0; z-index: 15; padding-bottom: max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(0, 0, 0, .12); }
.ra-play { min-width: 9em; font-weight: 700; }
.ra-speed { display: inline-flex; align-items: center; gap: 6px; }
.ra-hint { flex-basis: 100%; margin: 0; }
.ra-error { flex-basis: 100%; margin: 0; color: var(--warn); font-weight: 600; }
.reader-page .ra-on { cursor: pointer; border-radius: 6px; scroll-margin-top: 64px; scroll-margin-bottom: 96px; }
.reader-page .ra-on:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.reader-page .ra-current { background: var(--ra-mark, #fff1a8); box-shadow: 0 0 0 6px var(--ra-mark, #fff1a8); }
[data-surface="reader"].rt-sepia { --ra-mark: #ead7a0; }
[data-surface="reader"].rt-night { --ra-mark: #3b3a22; }
[data-surface="reader"].rt-contrast { --ra-mark: #ffff00; }
[data-surface="reader"].rt-contrast .reader-page .ra-current { color: #000000; text-decoration: underline 3px; text-underline-offset: 6px; }
/* Two languages side by side (2026-10-18): the paragraph read aloud as in the reader; the other language's one lighter. */
.parallel .ra-on { cursor: pointer; border-radius: 6px; }
.parallel .ra-on:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.parallel .ra-current { background: var(--ra-mark, #fff1a8); box-shadow: 0 0 0 6px var(--ra-mark, #fff1a8); }
.parallel .ra-partner { background: var(--ra-partner, #fff8d6); box-shadow: 0 0 0 6px var(--ra-partner, #fff8d6); }
.parallel .par-row { scroll-margin-top: 64px; scroll-margin-bottom: 96px; }
[data-surface="reader"].rt-sepia { --ra-partner: #f2e6c2; }
[data-surface="reader"].rt-night { --ra-partner: #34331f; }
.parallel .ra-partner { outline: 1px dashed var(--muted); outline-offset: 4px; }
@media (forced-colors: active) { .parallel .ra-current, .reader-page .ra-current { outline: 3px solid Highlight; } .parallel .ra-partner { outline: 1px dashed Highlight; } }
[data-surface="reader"].rt-contrast { --ra-partner: #fffbb0; }
[data-surface="reader"].rt-contrast .parallel .ra-current, [data-surface="reader"].rt-contrast .parallel .ra-partner { color: #000000; }
[data-surface="reader"].rt-contrast .parallel .ra-current { text-decoration: underline 3px; text-underline-offset: 6px; }
.ra-switch { margin: 8px 0; }
@media print { .read-along { display: none !important; } }

/* Read aloud with the device's voice (T-581, assets-src/reader-speak.js): the controls under the text (rendered hidden), the
   sentence being read and the word (CSS Custom Highlight API: the text itself is not changed), else the paragraph. */
.speak { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 10px; background: var(--card); }
.speak[hidden], .sp-open-row[hidden], .sp-msg[hidden], [data-sp-controls][hidden] { display: none; }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sp-row .tool { min-height: 40px; padding: 0 10px; }
.sp-play { min-width: 6.5em; font-weight: 700; }
.sp-field { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.sp-field select { max-width: 15em; min-height: 36px; font: inherit; }
.sp-more { flex-basis: 100%; }
.sp-more > summary { cursor: pointer; font-size: .9rem; font-weight: 700; display: inline-block; padding: 4px 0; }
.sp-voices { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0; }
.sp-msg { margin: 0; font-size: .92rem; }
.sp-msg a { color: var(--accent); text-decoration: underline; font-weight: 700; }
.sp-open-row { margin: 8px 0; }
.sp-open { display: inline-flex; align-items: center; gap: 6px; }
.rb-sticky .speak.sp-sticky { position: sticky; top: 0; z-index: 15; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
@media (max-width: 560px) {
  .sp-row { gap: 4px; }
  .sp-row .tool { padding: 0 8px; font-size: .88rem; }
  .sp-play { min-width: 5.5em; }
  .sp-field select { max-width: 11em; }
}
::highlight(tb-sp) { background-color: #fff1a8; color: #111111; }
::highlight(tb-sp-w) { background-color: #f5c84c; color: #111111; }
[data-surface="reader"].rt-sepia ::highlight(tb-sp) { background-color: #ead7a0; color: #3b2f1e; }
[data-surface="reader"].rt-night ::highlight(tb-sp) { background-color: #3b3a22; color: #ffffff; }
[data-surface="reader"].rt-night ::highlight(tb-sp-w) { background-color: #8a7417; color: #ffffff; }
[data-surface="reader"].rt-contrast ::highlight(tb-sp) { background-color: #ffff00; color: #000000; }
[data-surface="reader"].rt-contrast ::highlight(tb-sp-w) { background-color: #ff9900; color: #000000; }
/* Two languages: the other language's paragraph lightly, its sentence of the same number in the yellow of the one read. */
::highlight(tb-sp-pair) { background-color: #fffbe6; }
::highlight(tb-sp-pair-s) { background-color: #fff1a8; color: #111111; }
[data-surface="reader"].rt-sepia ::highlight(tb-sp-pair) { background-color: #f2e6c2; }
[data-surface="reader"].rt-sepia ::highlight(tb-sp-pair-s) { background-color: #ead7a0; color: #3b2f1e; }
[data-surface="reader"].rt-night ::highlight(tb-sp-pair) { background-color: #26251a; }
[data-surface="reader"].rt-night ::highlight(tb-sp-pair-s) { background-color: #3b3a22; color: #ffffff; }
[data-surface="reader"].rt-contrast ::highlight(tb-sp-pair) { background-color: #ffffcc; color: #000000; }
[data-surface="reader"].rt-contrast ::highlight(tb-sp-pair-s) { background-color: #ffff00; color: #000000; }
.reader-page .sp-cur, .parallel .sp-cur { background: var(--ra-mark, #fff1a8); box-shadow: 0 0 0 6px var(--ra-mark, #fff1a8); }
.parallel .sp-pair { background: var(--ra-partner, #fff8d6); box-shadow: 0 0 0 6px var(--ra-partner, #fff8d6); }
@media (forced-colors: active) { ::highlight(tb-sp), ::highlight(tb-sp-pair-s) { background-color: Highlight; color: HighlightText; } .reader-page .sp-cur, .parallel .sp-cur { outline: 3px solid Highlight; } }
@media print { .speak, .sp-open-row, .rb-speak { display: none !important; } }

/* ---------- 2026-10-17: prices in other currencies, edition language, help, themes, store notice ---------- */
/* One price: approximate dollars, then the usual currency of the page language (small). */
.money { white-space: normal; }
.money .m-sub { font-size: .8em; font-weight: 400; color: var(--muted); white-space: nowrap; }
.buy-box .price .money .m-sub { display: block; font-size: .95rem; margin-top: 2px; }
.price-note { margin-top: 12px !important; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.util .currency { position: relative; margin-inline-start: 6px; }
.util .currency summary { cursor: pointer; list-style: none; padding: 3px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .78rem; color: var(--sub); }
.util .currency summary::-webkit-details-marker { display: none; }
.util .currency summary::after { content: " ▾"; }
.util .currency .cur-box { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 45; width: 320px; max-width: 86vw; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); padding: 8px 6px; }
.util .currency ul { list-style: none; margin: 0; padding: 0; }
.util .currency button { display: block; width: 100%; text-align: start; background: none; border: 0; padding: 6px 12px; font-size: .86rem; color: #333; cursor: pointer; border-radius: 6px; }
.util .currency button:hover { background: var(--band); }
.util .currency button[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
.util .currency .cur-note { margin: 6px 12px 4px; font-size: .74rem; color: var(--muted); }
/* The store-status band (STORE_NOTICE). */
.notice-band { background: #fff7e6; border-bottom: 1px solid #f0d9a8; color: #5c3d00; font-size: .9rem; }
.notice-band p { margin: 0; padding: 10px 0; }
/* Reading and listening time under the catch line. */
.book-meta .times { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--sub); font-size: .88rem; }
/* The edition language (buy box) and the list of editions. */
.edition-chooser { margin-bottom: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.edition-chooser > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-size: .92rem; }
.edition-chooser > summary::-webkit-details-marker { display: none; }
.edition-chooser > summary::after { content: " ▾"; color: var(--muted); }
.edition-chooser .ed-label { font-weight: 700; margin-inline-end: 6px; }
.edition-chooser .edition-list { max-height: 50vh; overflow-y: auto; padding: 4px 6px 8px; border-top: 1px solid var(--line); }
.edition-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 12px; }
.edition-list a { display: block; padding: 6px 8px; border-radius: 6px; font-size: .9rem; }
.edition-list a[aria-current] { font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.edition-list .ed-here, .edition-chooser .ed-here { color: var(--muted); font-size: .85em; }
/* Help pages. */
.help-nav ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.help-nav a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .9rem; color: var(--sub); }
.help-nav a[aria-current] { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.faq { border-bottom: 1px solid var(--line); }
.faq > summary { cursor: pointer; padding: 14px 4px; font-weight: 700; list-style-position: inside; }
.faq > p { margin: 0 4px 12px; color: var(--sub); }
.faq-group h2, .help-section h2 { font-size: 1.15rem; }
.help-section p { color: var(--sub); }
.help-more { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--line); }
.help-more h2 { font-size: 1rem; }
.help-links { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; }
/* Theme pages. */
.theme-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.theme-list a { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); height: 100%; }
.theme-list a:hover { border-color: var(--ink); text-decoration: none; }
.theme-covers { display: flex; gap: 6px; margin-bottom: 6px; }
.theme-covers img { width: 64px; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.theme-name { font-weight: 700; font-size: 1.05rem; }
.theme-lead { color: var(--sub); font-size: .9rem; }
.theme-list .count { color: var(--muted); font-size: .85rem; }

/* ---------- 2026-10-17 phase 2: bookmarks, highlights and notes, search in a book, reading log, player ---------- */
.rb-form { display: inline; margin: 0; }
.rb-bookmark.on, .rb-mark[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* Selecting text only in highlight mode (copying stays off: store.js). */
body.mark-mode .reader-page { user-select: text; -webkit-user-select: text; }
mark.hl { color: inherit; border-radius: 2px; padding: 0 1px; }
.hl-yellow { background: #fff1a8; }
.hl-green { background: #cdeec8; }
.hl-blue { background: #cfe3ff; }
.hl-pink { background: #ffd6e5; }
mark.hl-note { border-bottom: 2px dotted #8a6d00; }
[data-surface="reader"].rt-night mark.hl { color: #111; }
.sel-tools { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 2px solid var(--ink); padding: 10px 12px max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(0, 0, 0, .12); display: grid; gap: 8px; }
.sel-tools[hidden], .quote-dialog[hidden], .sel-note-form[hidden] { display: none; }
.sel-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sel-hint { margin: 0; font-size: .85rem; color: var(--muted); }
.sel-status { margin: 0; font-size: .88rem; min-height: 1.2em; }
.sel-color.hl-yellow, .sel-color.hl-green, .sel-color.hl-blue, .sel-color.hl-pink { color: #111; }
.sel-note-form textarea { width: 100%; font: inherit; padding: 8px; }
.quote-dialog { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.quote-box { background: #fff; color: #111; border-radius: 12px; padding: 18px; max-width: 600px; width: 100%; max-height: 92vh; overflow-y: auto; }
.quote-box img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; margin: 10px 0; }
.reader-tools-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.mark-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mark-list > li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.hl-list > li { display: block; }
.hl-quote { margin: 0 0 6px; padding: 8px 12px; border-inline-start: 4px solid var(--line-strong); border-radius: 4px; }
.hl-colors { border: 0; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hl-colors legend { font-weight: 700; margin-bottom: 4px; }
.hl-chip { padding: 4px 10px; border-radius: 999px; color: #111; }
form.inline { display: inline; }
.in-search { padding-inline-start: 1.6em; display: grid; gap: 10px; }
.in-search a { display: block; padding: 6px 0; }
.in-search mark { background: #fff1a8; color: #111; }
.hl-quote.hl-yellow, .hl-quote.hl-green, .hl-quote.hl-blue, .hl-quote.hl-pink { color: #111; }
.in-search .is-page { font-weight: 700; margin-inline-end: 6px; }
.log-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.log-stats div { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.log-stats dt { color: var(--muted); font-size: .85rem; }
.log-stats dd { margin: 4px 0 0; font-size: 1.35rem; font-weight: 700; }
/* Large buttons for the player (item 32): big targets, strong contrast. */
.ap-view { margin: 4px 0 8px; }
.ap-big-note { border-inline-start: 4px solid var(--warn); padding-inline-start: 10px; font-weight: 600; }
.ap-big .ap-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-big .ap-buttons .tool { min-height: 88px; font-size: 1.35rem; border-width: 3px; }
.ap-big .ap-buttons .ap-play { grid-column: 1 / -1; min-height: 120px; font-size: 1.8rem; background: var(--ink); color: var(--paper); }
.ap-big .ap-now { font-size: 1.3rem; }
.ap-big .ap-seek { height: 36px; }

/* ---------- 2026-10-17 phase 3: cart, two-language sets ---------- */
.cart-icon { position: relative; }
.cart-count { position: absolute; top: -4px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; }
.cart-count[hidden] { display: none; }
.cart-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 14px; }
.cart-list li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cart-list .cover { width: 72px; }
.cart-text p { margin: 4px 0; }
.cart-price { font-weight: 700; }
.cart-total { max-width: 480px; }
.cart-total .line { display: flex; justify-content: space-between; gap: 16px; }
.fc-with { margin-top: 10px; }
.fc-with select { font: inherit; padding: 8px; min-height: 44px; width: 100%; }
.fc-half { margin-top: 8px !important; }
.wish-form { margin-top: 10px; }
.gift-box { margin-top: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0 12px; }
.gift-box > summary { cursor: pointer; padding: 10px 0; font-weight: 700; }
.gift-box form { padding-bottom: 12px; }
.contact-form { max-width: 640px; }
.contact-form select, .contact-form input, .contact-form textarea { width: 100%; font: inherit; padding: 8px; }
/* Parallel reading (item 33). */
.par-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 8px 0 16px; }
.par-form .field { min-width: 160px; }
.par-form select { font: inherit; padding: 8px; min-height: 44px; }
.parallel { position: relative; }
.parallel .par-head, .parallel .par-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.parallel.par-rows .par-head, .parallel.par-rows .par-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.parallel .par-head { font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.parallel.par-rows .par-head { display: none; }
.parallel .par-row { padding: 10px 0; border-bottom: 1px dotted var(--line); font-family: var(--serif); line-height: 1.8; }
.parallel .par-row > :first-child { margin: 0; }
.parallel .par-row > :last-child { margin: 0; color: var(--sub); }
.parallel h2 { font-size: 1.1rem; }
/* 出版者の本の2言語（T-576）：1つの側に段落が2つ以上の組・章ごとの並び・そろえ方・知らせのボタン。 */
.parallel .par-cell > * { margin: 0 0 0.7em; }
.parallel .par-cell > :last-child { margin-bottom: 0; }
.parallel .par-chapter { border-bottom: 0; }
.parallel .par-note { margin: 8px 0 0; }
.par-by, .par-report { margin: 10px 0; }
.par-by b, .par-by a { display: inline-block; padding: 4px 12px; border-radius: 999px; }
.par-by b { border: 2px solid var(--accent); }
@media (max-width: 640px) { .parallel .par-head, .parallel .par-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .parallel .par-head { display: none; } }

/* ---------- 2026-10-17 phase 4: house banners and columns ---------- */
/* A house banner: one shared picture, the words of the page language over it (HTML; the scrim keeps them readable). */
.house-banner { max-width: var(--wrap); margin: 28px auto 0; padding: 0 16px; }
.hb-link { position: relative; display: block; border-radius: var(--radius); overflow: hidden; min-height: 150px; color: #fff; text-decoration: none; }
.hb-link:hover { text-decoration: none; }
.hb-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hb-text { position: relative; display: grid; gap: 4px; align-content: center; min-height: 150px; padding: 18px 22px; max-width: 640px; background: linear-gradient(90deg, rgba(20, 14, 8, .84) 0%, rgba(20, 14, 8, .74) 80%, rgba(20, 14, 8, .4) 100%); }
[dir="rtl"] .hb-text { background: linear-gradient(270deg, rgba(20, 14, 8, .84) 0%, rgba(20, 14, 8, .74) 80%, rgba(20, 14, 8, .4) 100%); }
.hb-title { font-size: 1.15rem; line-height: 1.35; }
.hb-body { font-size: .9rem; line-height: 1.5; }
.hb-cta { justify-self: start; margin-top: 6px; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; font-size: .85rem; font-weight: 700; }
.hb-cta::after { content: " →"; }
[dir="rtl"] .hb-cta::after { content: " ←"; }
.hb-column { padding: 0; margin: 24px 0; }
@media (max-width: 640px) { .hb-text { max-width: none; background: rgba(20, 14, 8, .72); } }
/* Columns: the picture on top with the title over it, then the text, then the book. */
.column { max-width: 760px; margin: 0 auto; }
.col-hero { position: relative; margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; }
.col-hero img { display: block; width: 100%; height: auto; }
.col-title { position: absolute; inset: auto 0 0 0; padding: 48px 22px 18px; background: linear-gradient(0deg, rgba(10, 8, 5, .85) 0%, rgba(10, 8, 5, .55) 55%, rgba(10, 8, 5, 0) 100%); color: #fff; }
.col-title h1 { margin: 0; font-size: clamp(1.3rem, 3.6vw, 2rem); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.col-lead { font-size: 1.1rem; font-weight: 700; line-height: 1.7; }
.col-body p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.95; margin: 0 0 1.1em; }
.col-book { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: center; margin: 28px 0; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.col-book:hover { border-color: var(--ink); text-decoration: none; }
.col-book .cover { width: 90px; }
.col-book span { display: grid; gap: 4px; }
.col-book-cta { color: var(--accent); font-weight: 700; }
.col-link a { color: var(--accent); text-decoration: underline; }
.column-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.column-list a { display: grid; gap: 6px; }
.column-list img { width: 100%; height: auto; border-radius: var(--radius); }
.cl-title { font-weight: 700; font-size: 1.05rem; }
.cl-lead { color: var(--sub); font-size: .9rem; }

/* Monthly membership (D-764): the two plans, the prompt in place of a member tool. Language requests on My books. */
.member-prompt { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; }
.terms li { margin: 4px 0; }
.lr-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.lr-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lr-form label { flex: 1 1 200px; }
.lr-form select { max-width: 100%; }
.more-links { margin-top: 4px; }

/* ---------- The membership page (owner 2026-10-18): simple, colourful, prices and benefits together ---------- */
.mp-head { background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft)); border-radius: var(--radius); padding: 28px 24px; margin: 8px 0 20px; border-inline-start: 6px solid var(--accent); }
.mp-kicker { margin: 0 0 6px; font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
:lang(ar) .mp-kicker, :lang(hi) .mp-kicker { letter-spacing: 0; }
.mp-head h1 { margin: 0 0 8px; color: var(--accent-deep); font-size: clamp(1.45rem, 4vw, 2.1rem); line-height: 1.3; }
.mp-offer { display: grid; gap: 16px; }
/* Owner 2026-10-28: the monthly plan above the yearly one. */
.mp-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mp-plan { position: relative; border-radius: calc(var(--radius) * 1.5); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.mp-plan h2 { margin: 0; font-size: 1.05rem; }
.mp-month { background: var(--card); border: 2px solid var(--accent); color: var(--ink); }
.mp-month h2 { color: var(--accent-deep); }
.mp-year { background: var(--card); border: 2px solid var(--gold); color: var(--ink); }
.mp-year h2 { color: var(--accent-deep); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mp-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-size: .8rem; font-weight: 700; }
/* The covers of every book, moving slowly sideways (a decoration; still for reduced motion). The row is there twice: moving it
   by half its width joins the ends. */
.cover-strip { margin: 22px 0 6px; overflow: hidden; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cs-track { display: flex; width: max-content; animation: cs-move 40s linear infinite; }
.cs-b1 { animation-duration: 20s; } .cs-b2 { animation-duration: 40s; } .cs-b3 { animation-duration: 60s; } .cs-b4 { animation-duration: 80s; } .cs-b5 { animation-duration: 100s; } .cs-b6 { animation-duration: 120s; } .cs-b7 { animation-duration: 140s; } .cs-b8 { animation-duration: 160s; } .cs-b9 { animation-duration: 180s; } .cs-b10 { animation-duration: 200s; } .cs-b11 { animation-duration: 220s; } .cs-b12 { animation-duration: 240s; }
.cs-row { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0 12px 0 0; }
.cs-row li { flex: none; }
.cs-row img { display: block; width: 96px; height: auto; aspect-ratio: 640 / 907; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); background: var(--line); }
@keyframes cs-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .cs-track { animation-name: cs-move-rtl; }
@keyframes cs-move-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
.cover-strip:hover .cs-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cs-track { animation: none; } .cover-strip { overflow-x: hidden; } }
.mp-price { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.25; }
.mp-note { margin: 0; font-size: .92rem; opacity: .95; }
.mp-badge { align-self: flex-start; margin: 0; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem; }
.mp-badge-intro { background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold); }
.mp-join { margin-top: auto; padding-top: 6px; }
.mp-join .button { width: 100%; }
.mp-joinnote { margin-top: 10px; }
.mp-terms { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; font-size: .9rem; color: var(--sub); }
.mp-terms summary { cursor: pointer; font-weight: 600; color: var(--accent-deep); }
.mp-terms ul { margin: 8px 0; padding-left: 1.2em; }
.mp-terms li { margin: 4px 0; }
/* Reading as a member (owner 2026-10-25): the book page's buttons, the bookshelf's panel of the day's books, the day's limit. */
.member-read { margin: 10px 0 0; display: grid; gap: 6px; }
.member-read .button { width: 100%; }
.member-read .hint { margin: 0; }
.member-shelf .member-today { margin-top: 8px; }
/* The members' bookshelf (D-853): the badge of a member's book, its end, and the books leaving within 7 days marked. */
.member-shelf-book { margin: 10px 0 0; }
.member-shelf-book .button { width: 100%; }
.member-shelf-book .hint { margin: 4px 0 0; }
.mshelf-badge { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.mshelf-until { margin: 4px 0 0; }
.mshelf-soon { color: var(--warn); }
.library li.mshelf-soon-item { border-color: var(--warn); border-left-width: 4px; }
.member-shelf-box { margin: 12px 0; }
.member-shelf-box .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.member-limit { max-width: 40rem; }


/* The bookshelf's list of a work's languages (custom.ts editionsPage) and the book page's language of the book to buy. */
.ed-shelf { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.ed-shelf li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.ed-shelf li.ed-chosen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ed-shelf .ed-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ed-shelf form.inline { margin: 0; }
.ed-buy select { font: inherit; width: 100%; max-width: 100%; min-height: 44px; padding: 8px; }
.fc-sets-note { margin: 6px 0 0; }
/* The owner's inquiry pages (src/worker/inquiry.ts): a customer's text with its line breaks, never wider than the page. */
.inquiry-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--card); border: 1px solid #d6d3d1; padding: 12px 14px; border-radius: var(--radius); }
/* The print-on-demand services by country (owner 2026-10-28). */
.ps-countries ul { list-style: none; padding: 0; margin: 12px 0 20px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ps-country { margin-top: 18px; }
.ps-country h2 { font-size: 1.1rem; margin: 0 0 6px; }
.ps-link { margin: 8px 0 0; }

/* Reading offline (owner 2026-10-28; assets-src/offline.js): the save buttons, the bookshelf's list, the offline reader. */
.offline-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.offline-save[hidden], [data-offline-save][hidden], .offline-save [hidden], .offline-app [hidden] { display: none !important; }
.offline-save .offline-status { flex-basis: 100%; margin: 0; }
.offline-shelf .offline-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.offline-shelf .offline-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.offline-app .offline-books li { grid-template-columns: 1fr; }
button.rb-btn { font-family: inherit; cursor: pointer; }
button.rb-btn:disabled { opacity: .35; cursor: default; }
.rb-label { border-color: transparent; background: transparent; }
button.rb-big { font-family: inherit; cursor: pointer; }
button.rb-big:disabled { opacity: .35; cursor: default; }
.offline-app .hl-list textarea { width: 100%; }

/* The membership's name (owner 2026-10-30, D-796): "Trinity Member" with the page language's "monthly membership" in small type. */
/* Only the English name never breaks; the small label may go to the next line (long labels on a narrow phone). */
.tm-name > span { white-space: nowrap; }
.tm-sub { margin-inline-start: .35em; font-size: .68em; font-weight: 500; opacity: .8; }
.mp-kicker .tm-sub { font-size: .8em; }
@media (max-width: 600px) {
  /* The menu row has no room for the small label on a phone: the name only there, on two short lines so the row still fits
     a 375 px screen. */
  .menu .tm-sub { display: none; }
  .menu a { padding-inline: 6px; }
  .menu a.menu-member { display: flex; align-items: center; padding-block: 2px; }
  .menu .menu-member .tm-name { white-space: normal; display: inline-block; width: 4.4em; font-size: .78rem; line-height: 1.1; text-align: center; }
}
/* The author's country right above a cover in every list of books (owner 2026-10-31, T-473; all lists 2026-11-01): small and quiet. */
.book-card .card-country, .mini-text .card-country { display: block; margin: 0 0 4px; font-size: .74rem; line-height: 1.3; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-text .card-country { margin: 0; }
/* 本のページの「無料で全部読む」の入口（T-611、D-883：全部読めるページはお店とは別のサブドメイン。見た目は assets-src/free-read.css）。 */
.free-read-link { margin: 12px 0 0; }