/* Folklore manga: the card on a folklore page (.mg) and the reader (.mr). Bump ?v= on the links when this changes.
   The reader keeps its own dark colours in both site themes, like the approved mockup. */

/* detail page */
.mg-pill { gap: 5px; background: color-mix(in srgb, var(--aqua) 16%, var(--card)); color: var(--aqua-ink); }
.mg-cta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--txt-2); }
.mg-btn { height: 46px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.mg-btn:hover { text-decoration: none; filter: brightness(.96); }
.mg-btn.tang { background: var(--tang); color: var(--tang-on); }
.mg-btn.solid { background: var(--txt-hi); color: var(--on-hi); }
.mg-btn.ghost { box-shadow: inset 0 0 0 1px var(--line); color: var(--txt-hi); font-weight: 600; }
.mg { display: flex; flex-wrap: wrap; background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px var(--shadow); margin-top: 8px; }
:root[data-theme="dark"] .mg { box-shadow: inset 0 0 0 1px var(--line); }
.mg-mcover { flex: 1 1 200px; max-width: 260px; min-height: 220px; background: #f3ecdc; display: grid; place-items: center; padding: 24px; }
.mg-mcover img { width: 140px; height: auto; border-radius: 4px; box-shadow: 0 12px 26px rgba(0, 0, 0, .3); transform: rotate(-3deg); }
.mg-info { flex: 999 1 320px; min-width: 0; padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.mg-eye { font: 500 11px var(--mono); letter-spacing: .14em; color: var(--aqua-ink); }
.mg-info h2 { font: 800 26px/1.15 var(--display); }
.mg-info h2 a { color: inherit; }
.mg-info p { margin: 0; line-height: 1.6; }
.mg-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--txt-2); }
.mg-counts b { color: var(--txt-hi); }
.mg-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mg-soon { color: var(--txt-2); }
.mg-soon b { color: var(--txt-hi); }
@media (max-width: 640px) { .mg-mcover { max-width: none; } }

/* reader */
.mr { --rbg: #0d0e11; --rbar: #121418; --rcard: #1c1f25; --rline: #363b45; --rhi: #eceef2; --rt2: #a3a9b5; --rt3: #8f96a3; --rtang: #ff8b52; --raqua: #35ded1;
  background: var(--rbg); color: #c3c8d2; border-radius: var(--r); overflow: clip; outline: 0; font-size: 14px; }
.mr a { color: var(--rtang); }
.mr:not(.pm) .mr-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 3; }  /* scroll view keeps the switches in reach */
.mr button:focus-visible, .mr a:focus-visible { outline: 2px solid var(--rtang); outline-offset: 2px; }
.mr-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #262a31; background: var(--rbar); }
.mr-title { display: flex; gap: 16px; align-items: center; min-width: 0; }
.mr-back, .mr-tg { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rline); background: transparent; color: var(--rhi); display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; cursor: pointer; }
.mr .mr-back { color: var(--rhi); }
.mr-back:hover { text-decoration: none; }
.mr-tg[aria-pressed="true"] { background: var(--rhi); color: var(--rbar); border-color: var(--rhi); }
.mr-head h1 { font: 800 20px/1.15 var(--display); color: var(--rhi); }
.mr-k { font: 500 11px var(--mono); letter-spacing: .12em; color: var(--rt3); display: block; }
.mr-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mr-lab { height: 40px; padding: 0 14px; border-radius: 999px; background: var(--rcard); color: var(--rhi); display: inline-flex; align-items: center; gap: .5ch; font: 400 13px var(--mono); }
.mr-body { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: flex-start; padding: 24px 20px; }
.mr-stage { flex: 0 1 620px; min-width: 0; display: flex; align-items: center; gap: 14px; }
.mr-pages { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mr-nav { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rline); background: var(--rcard); color: var(--rhi); cursor: pointer; place-items: center; }
.mp { margin: 0; }
.mp-box { position: relative; container-type: inline-size; background: #f3ecdc; aspect-ratio: 765 / 1024; line-height: 0; }
.mp-box img { display: block; width: 100%; height: auto; }
.b { position: absolute; box-sizing: border-box; line-height: 1.15; font-weight: 700; }
.b.say { background: #fff; color: #111; border: 2px solid #111; border-radius: 50% / 42%; padding: .6em .9em; font: 700 clamp(8px, 2.6cqw, 17px) / 1.15 "Comic Neue", "Comic Sans MS", sans-serif; text-transform: uppercase; text-align: center; }
.b.cap { background: #fbf3df; color: #1b1a17; border: 2px solid #1b1a17; border-radius: 2px; padding: .5em .7em; font: italic 700 clamp(8px, 2.4cqw, 15px) / 1.15 var(--ui); }
.b.info { background: #2f6b6a; color: #fbf3df; border: 2px solid #1b1a17; border-radius: 2px; padding: .5em .7em; font: 700 clamp(7px, 2.1cqw, 14px) / 1.15 var(--ui); }
.b.sfx { color: #e8b13a; font: 700 clamp(16px, 7cqw, 52px) / 1.15 "Comic Neue", "Comic Sans MS", sans-serif; text-transform: uppercase; transform: rotate(-8deg); -webkit-text-stroke: 2px #1b1a17; paint-order: stroke fill; white-space: nowrap; }
.mr.nob .b { display: none; }
.b-tl, .mr.lang-tl .b-en { display: none; }
.mr.lang-tl .b-tl { display: inline; }
.mr-seg { display: inline-flex; height: 40px; border: 1px solid var(--rline); border-radius: 999px; padding: 3px; gap: 2px; }
.mr-seg button { border: 0; border-radius: 999px; padding: 0 12px; background: transparent; color: var(--rhi); font: inherit; font-weight: 600; cursor: pointer; }
.mr-seg button[aria-pressed="true"] { background: var(--rhi); color: var(--rbar); }
.mr-nav, .mr-lab, .mr-tg.wide { display: none; }
.mr.js .mr-lab { display: inline-flex; }
/* wide screens with JS get the All pages switch; page mode unless it is on */
.mr.wide .mr-tg.wide { display: inline-flex; }
.mr.wide:not(.pm) .mr-stage { flex-basis: 900px; }
.mr.pm .mp { display: none; }
.mr.pm .mp.cur { display: block; }
.mr.pm .mr-nav { display: grid; }
.mr.pm .mr-pages { box-shadow: 0 20px 50px rgba(0, 0, 0, .6); border-radius: 4px; overflow: hidden; width: min(100%, max(320px, calc((100svh - 150px) * .747))); flex: none; }
/* the page is as tall as the screen allows; the stage adds the two arrows and their gaps (Ronald, 2026-11-09: bigger on a desktop) */
.mr.pm .mr-stage { justify-content: center; flex-basis: calc((100svh - 150px) * .747 + 124px); }
@media (max-width: 899px) {
  .mr { border-radius: 0; margin: 0 -16px; }
  .mr-head { padding: 10px 12px; gap: 8px; }
  .mr-head h1 { font-size: 17px; }
  .mr-body { padding: 0; gap: 0; }
  .mr-stage { flex-basis: 100%; }
  .mr-back { padding: 0 12px; }
}