/* /manga — the comic shelf (comic-library-*.js). Same Win95 window as the text
   shelf, but what sits inside it is a comic shop: newsprint ground, covers with
   a black panel border and a hard offset shadow, Bangers for anything a comic
   would letter, eight flat inks instead of book cloth. Loads after style.css,
   window-chrome.css and shell.css; the text shelf's home*.css never loads here. */
:root {
  --font-comic: "Bangers", "Impact", "Arial Black", sans-serif;
  --ink-line: #111;
  --newsprint: #fbf8ef;
  --tone: radial-gradient(circle, rgba(0,0,0,.07) 0 1px, transparent 1.3px) 0 0 / 6px 6px;
  --marker: #ffe45c;
  --panel: 0 0 0 2px var(--ink-line), 4px 4px 0 var(--ink-line);
  --panel-up: 0 0 0 2px var(--ink-line), 6px 6px 0 var(--ink-line);
}
.content { background: var(--tone), var(--newsprint); }

/* One flat ink per series (Cover.hue): jackets and the volume tiles share it. */
:where(.mj, .vol-grid) { --ink: #d7261e; }
:where(.mj, .vol-grid).p1 { --ink: #0f6cb6; } :where(.mj, .vol-grid).p2 { --ink: #e8a800; }
:where(.mj, .vol-grid).p3 { --ink: #1b9a59; } :where(.mj, .vol-grid).p4 { --ink: #e4587d; }
:where(.mj, .vol-grid).p5 { --ink: #6a3fb0; } :where(.mj, .vol-grid).p6 { --ink: #ef6c1a; }
:where(.mj, .vol-grid).p7 { --ink: #2b2b2b; }

/* ===== The comic jacket: a cover drawn from the title alone =====
   Halftone dots and speed lines on the ink, a lettered initial up top, the
   name in a tilted narration box. A container: lettering scales with it. */
div.mj {
  container-type: inline-size; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  background:
    radial-gradient(circle, rgba(0,0,0,.24) 0 1px, transparent 1.4px) 0 0 / 5px 5px,
    repeating-conic-gradient(from 0deg at 82% 16%, rgba(255,255,255,.18) 0 3deg, transparent 3deg 12deg),
    var(--ink);
}
.mj-mono {
  margin: 4cqi 0 0 8cqi; color: #fff; font: 400 54cqi/1 var(--font-comic);
  -webkit-text-stroke: 1.5px var(--ink-line); paint-order: stroke fill; text-shadow: 4cqi 4cqi 0 var(--ink-line);
}
.mj-title {
  align-self: stretch; margin: 0 7cqi 9cqi; padding: 4cqi 5cqi 3cqi;
  background: #fff; color: var(--ink-line); border: 2px solid var(--ink-line); box-shadow: 3px 3px 0 var(--ink-line);
  font: 400 12.5cqi/1.08 var(--font-comic); letter-spacing: .03em; overflow-wrap: anywhere; transform: rotate(-2deg);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@container (max-width: 90px) { .mj-title { display: none; } .mj-mono { margin: 18cqi auto 0; } }
img.m-cover, img.m-rack-cover, img.series-cover { object-fit: cover; background: var(--hilite); }

/* ===== The grid: one card per series ===== */
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s5) var(--s3); padding: var(--s5) var(--s4); align-items: start; }
.m-grid > .loading95 { grid-column: 1 / -1; }
a.m-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 2px;
  color: var(--text); text-align: center; text-decoration: none;
  content-visibility: auto; contain-intrinsic-size: auto 225px;   /* ~420 cards drawn in one go; ≈ a drawn card */
}
a.m-card:hover { text-decoration: none; }
a.m-card:focus-visible { outline: none; }
.m-art { position: relative; display: block; margin: 0 0 var(--s2); }
.m-cover { display: block; width: 112px; height: 164px; box-shadow: var(--panel); transition: transform .12s steps(2), box-shadow .12s steps(2); }
.m-card:hover .m-cover, .m-card:focus-visible .m-cover { transform: translate(-2px, -2px); box-shadow: var(--panel-up); }
/* Volume count: the issue box in the corner of a comic cover. */
.m-vols {
  position: absolute; top: 6px; left: -7px; display: flex; flex-direction: column; align-items: center; min-width: 30px; padding: 3px 4px 2px;
  background: var(--ink-line); color: #fff; font: 600 9px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-4deg);
}
.m-vols b { color: var(--marker); font: 400 19px/.9 var(--font-comic); letter-spacing: .02em; }
.m-title {
  max-width: 100%; padding: 1px 4px; font: 600 var(--t-sm)/1.3 var(--font-ui);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-card:hover .m-title, .m-card:focus-visible .m-title { background: var(--sel); color: var(--sel-text); }
.m-card:focus-visible .m-title { outline: 1px dotted var(--dark); outline-offset: 1px; }
.m-meta { max-width: 100%; font: 400 var(--t-xs)/1.3 var(--font-ui); color: var(--muted); }
.m-progress { max-width: 100%; padding: 1px 6px; font: 600 var(--t-xs)/1.35 var(--font-ui); color: var(--ink-line); background: var(--marker); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No CBZ yet: still listed (the catalogue knows it), but plainly not readable. */
.m-card.dim .m-cover { filter: grayscale(1); opacity: .5; box-shadow: 0 0 0 2px var(--shadow); }
.m-card.dim .m-title { color: var(--muted); }

/* ===== "Đang đọc": the rack you come back to ===== */
.m-rack { margin: var(--s4) var(--s4) 0; padding: var(--s3) var(--s3) var(--s4); background: var(--tone), var(--marker); box-shadow: var(--panel); }
.m-rack[hidden] { display: none; }
.m-rack-h {
  display: inline-block; margin: 0 0 var(--s3); padding: 3px 10px 1px; background: var(--ink-line); color: #fff;
  font: 400 22px/1 var(--font-comic); letter-spacing: .05em; transform: rotate(-2deg);
}
.m-rack-row { display: flex; gap: var(--s4); overflow-x: auto; padding: 2px 6px 8px 2px; scrollbar-width: thin; }
a.m-rack-card {
  flex: none; display: flex; gap: var(--s3); width: 250px; padding: var(--s2);
  background: #fff; color: var(--text); text-decoration: none; box-shadow: var(--panel);
}
a.m-rack-card:hover, a.m-rack-card:focus-visible { box-shadow: var(--panel-up); transform: translate(-2px, -2px); text-decoration: none; }
a.m-rack-card:focus-visible { outline: 1px dotted var(--dark); outline-offset: -5px; }
.m-rack-cover { flex: none; width: 64px; height: 94px; box-shadow: 0 0 0 1px var(--ink-line); }
.m-rack-cover.mj { justify-content: center; align-items: center; }
.m-rack-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-rack-title { font: 600 var(--t-sm)/1.3 var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-rack-where { font: 400 var(--t-xs)/1.35 var(--font-ui); color: var(--muted); overflow-wrap: anywhere; }
.m-rack-go { margin-top: auto; color: var(--sel); font: 400 17px/1 var(--font-comic); letter-spacing: .04em; }

/* ===== The series window ===== */
#detail { padding: var(--s4) var(--s4) calc(var(--taskbar-h) + var(--safe-b) + var(--s4)); }
.series-card { display: flex; flex-direction: column; width: min(720px, 100%); max-height: 100%; }
.series-card > .dlg-title { flex: none; margin: 0; }
.series-scroll { flex: 0 1 auto; overflow: auto; overscroll-behavior: contain; margin-top: 3px; background: var(--tone), var(--newsprint); box-shadow: var(--bevel-field); }
.series-head { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s5); padding: var(--s5) var(--s5) var(--s4); }
.series-cover { display: block; width: 150px; height: 220px; box-shadow: var(--panel); }
.series-name {
  margin: 0; font: 400 34px/1.08 var(--font-comic); letter-spacing: .02em; overflow-wrap: anywhere; text-wrap: balance;
}
.series-en { margin: var(--s1) 0 0; font: italic 400 var(--t-md)/1.45 var(--font-ui); color: var(--muted); }
.series-by { margin: var(--s2) 0 0; font: 500 var(--t-md)/1.45 var(--font-ui); }
.series-by .linkish { font-weight: 600; }
.series-card dl.props {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s4); margin: var(--s4) 0 0; padding-top: var(--s3);
  font-size: var(--t-sm); border-top: 2px solid var(--ink-line);
}
.series-card dl.props dt { color: var(--muted); }
.series-card dl.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* "Trên kệ": a status and a ♥ (comic-library-shelf.js), under the facts. */
.series-shelf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: var(--t-sm); }
.series-shelf label { color: var(--muted); }
.shelf-fav-btn { --px: 10px; }
.shelf-fav-btn:not(.active) img { filter: grayscale(1); opacity: .55; }   /* the red heart lights up when pressed */
.series-blurb { margin: 0 var(--s5) var(--s4); padding: var(--s3) var(--s4); max-height: 180px; overflow: auto; background: #fff; box-shadow: 0 0 0 2px var(--ink-line); }
.series-blurb p { margin: 0; max-width: 64ch; font: 400 var(--t-md)/1.65 var(--font-ui); }
.series-vols { padding: 0 var(--s5) var(--s5); }
.series-h { margin: 0 0 var(--s3); font: 400 24px/1 var(--font-comic); letter-spacing: .04em; }
.series-count { font: 500 var(--t-sm)/1 var(--font-ui); color: var(--muted); letter-spacing: 0; }
.series-note { margin: 0; color: var(--muted); font-size: var(--t-sm); }

/* Volumes: numbered panels in the series' ink. The one being read is inked in. */
.vol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s3); padding: 0 6px 6px 0; }
a.vol-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: var(--s2) var(--s1) 6px;
  background: #fff; color: var(--ink-line); text-align: center; text-decoration: none; box-shadow: 0 0 0 2px var(--ink-line), 3px 3px 0 var(--ink-line);
}
a.vol-tile:hover, a.vol-tile:focus-visible { transform: translate(-1px, -1px); box-shadow: 0 0 0 2px var(--ink-line), 5px 5px 0 var(--ink-line); text-decoration: none; }
a.vol-tile:focus-visible { outline: 1px dotted var(--ink-line); outline-offset: -5px; }
.vol-no { color: var(--ink); font: 400 38px/1 var(--font-comic); -webkit-text-stroke: 1px var(--ink-line); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink-line); }
.vol-name { max-width: 100%; font: 600 var(--t-xs)/1.3 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vol-state { max-width: 100%; font: 400 11px/1.3 var(--font-ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vol-state:empty { display: none; }
a.vol-tile.is-current { background: var(--ink); color: #fff; }
a.vol-tile.is-current .vol-no { color: #fff; }
a.vol-tile.is-current .vol-state { color: #fff; font-weight: 600; }
a.vol-tile.is-opened .vol-state::before { content: "✓ "; }

.series-foot { flex: none; padding: var(--s3) var(--s4); border-top: 1px solid var(--shadow); box-shadow: inset 0 1px var(--light); }
.series-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }
.series-actions .btn { --px: 16px; }
.series-actions .btn-primary { white-space: normal; text-align: left; }

/* ===== Phones, upright or on their side ===== */
@media (max-width: 640px) {
  .m-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s4) var(--s2); padding: var(--s4) var(--s3); }
  .m-cover { width: 92px; height: 134px; }
  a.m-card { contain-intrinsic-size: auto 195px; }
  .m-rack { margin: var(--s3) var(--s3) 0; }
  a.m-rack-card { width: 228px; }
}
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  #detail { align-items: flex-end; padding: var(--s4) 0 calc(var(--taskbar-h) + var(--safe-b)); }
  .series-card { width: 100%; height: 100%; }
  .series-scroll { flex: 1 1 auto; }
  .series-head { grid-template-columns: 100px minmax(0, 1fr); gap: var(--s3) var(--s4); padding: var(--s4); }
  .series-art { grid-row: span 3; }
  .series-cover { width: 100px; height: 146px; }
  .series-name { font-size: 26px; }
  .series-main { display: contents; }
  .series-main > :not(dl) { grid-column: 2; }
  .series-card dl.props { grid-column: 1 / -1; margin-top: 0; }
  .series-card .series-shelf { grid-column: 1 / -1; margin-top: 0; }
  .series-blurb { margin: 0 var(--s4) var(--s3); }
  .series-vols { padding: 0 var(--s4) var(--s4); }
  .vol-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .series-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-height: 500px) and (pointer: coarse) and (min-width: 641px) {
  .series-card { width: min(720px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .m-cover, a.m-rack-card, a.vol-tile { transition: none; }
  .m-card:hover .m-cover, .m-card:focus-visible .m-cover, a.m-rack-card:hover, a.vol-tile:hover { transform: none; }
}