/* Moonlit Shelf (달빛 서가): catalog page, book sheet and about page. Loaded by _includes/shelf-boot.html.
   Builds on the site tokens of site.css (--bg --fg --muted --line --soft --link); the tint is the app's brand
   tint (comicViewer docs/design-system.md). The theme follows prefers-color-scheme, or ?theme=light|dark,
   which the boot script turns into <html data-theme>. Inside the app (body.in-app) the site header, tabs
   and footer are hidden: the app shows its own title bar. */

:root {
  --shelf-tint: #4C5FC4;
  --shelf-on-tint: #ffffff;
  --shelf-tint-soft: rgba(76, 95, 196, 0.12);
  --shelf-backdrop: rgba(8, 9, 14, 0.45);
  --shelf-cover-0: #4C5FC4;
  --shelf-cover-1: #2F7A6B;
  --shelf-cover-2: #9A5B2E;
  --shelf-cover-3: #7A4C9C;
  --shelf-cover-4: #B2475B;
  --shelf-cover-5: #3D6E9E;
  --shelf-skeleton: rgba(118, 118, 128, 0.12);   /* the app's fill token */
}

/* ?theme=light on a dark device: the site's light tokens again */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #16171b;
  --muted: #5d5f68;
  --line: #e4e5ea;
  --soft: #f4f5f7;
  --link: #0a5fc4;
  --brand: #1f3a35;
  --pill-bg: #ececf0;
  --pill-fg: #4a4c55;
  --shelf-skeleton: rgba(118, 118, 128, 0.12);
}

/* Dark: the system setting (unless ?theme=light) ... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shelf-tint: #7B8EEC;
    --shelf-on-tint: #0f1014;
    --shelf-tint-soft: rgba(123, 142, 236, 0.18);
    --shelf-backdrop: rgba(0, 0, 0, 0.6);
    --shelf-skeleton: rgba(118, 118, 128, 0.24);
  }
}

/* ... or ?theme=dark: the site's dark tokens and the same shelf tokens */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1014;
  --fg: #ececf0;
  --muted: #a3a5ae;
  --line: #2a2c33;
  --soft: #181a1f;
  --link: #73b4ff;
  --brand: #e9f1ee;
  --pill-bg: #25272e;
  --pill-fg: #c4c6ce;
  --shelf-tint: #7B8EEC;
  --shelf-on-tint: #0f1014;
  --shelf-tint-soft: rgba(123, 142, 236, 0.18);
  --shelf-backdrop: rgba(0, 0, 0, 0.6);
  --shelf-skeleton: rgba(118, 118, 128, 0.24);
}

/* Text size follows the system: iOS Dynamic Type through -apple-system-body (other browsers ignore the
   declaration and keep 16px; Android WebView applies its own text zoom). Sizes below are in rem. */
html { font: -apple-system-body; font-family: var(--font); }
body { font-size: 1rem; }

.in-app .site-header,
.in-app .app-tabs,
.in-app .site-footer { display: none; }

.visually-hidden,
.in-app .shelf-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.shelf [hidden] { display: none !important; }

.shelf { padding-top: 1rem; padding-bottom: 2rem; }
.shelf-title { margin: 0.5rem 0 0.25rem; font-size: 1.6rem; }
.shelf-app-note {
  margin: 0.5rem 0 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  background: var(--shelf-tint-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}
.shelf-notice { margin: 0 0 1rem; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.in-app .shelf-notice { margin-top: 0.25rem; }

.shelf a:focus-visible,
.shelf button:focus-visible,
.shelf-about a:focus-visible {
  outline: 2px solid var(--shelf-tint);
  outline-offset: 2px;
}

/* Search and language chips */
.shelf-search {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
}
.shelf-search:focus { outline: 2px solid var(--shelf-tint); outline-offset: 1px; }
.shelf-chips {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 0 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shelf-chips::-webkit-scrollbar { display: none; }
.shelf-chip {
  flex: none;
  min-height: 2.25rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.shelf-chip[aria-pressed="true"] { border-color: var(--shelf-tint); background: var(--shelf-tint); color: var(--shelf-on-tint); font-weight: 600; }

.shelf-status { margin: 1rem 0; color: var(--muted); }
.shelf-status:empty { display: none; }
.shelf-retry {
  margin-left: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--shelf-tint);
  border-radius: 999px;
  background: none;
  color: var(--shelf-tint);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Loading skeleton (_layouts/shelf.html), in two parts. The top part stands where the notice and the search
   box go and has their exact height (two notice lines in the notice's own type metrics, then a box as tall
   as .shelf-search), so the bottom part does not move when the strings arrive and the real ones replace it.
   The bottom part (chips, section head, rows) stays until the list or the failure line is drawn. Shapes and
   fill match the app's skeleton over the web view, so the hand-over from the app does not jump either. */
.shelf-skeleton-top,
.shelf-skeleton-bars { animation: shelf-shimmer 1.2s ease-in-out infinite alternate; }
.shelf-skeleton-bars { display: flex; flex-direction: column; }
.sk { display: block; flex: none; background: var(--shelf-skeleton); border-radius: 4px; }
.sk-notice { display: block; margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.55; }
.in-app .sk-notice { margin-top: 0.25rem; }
.sk-line {   /* one notice line: a 14px bar centred in a 1.55em line box */
  height: 1.55em;
  padding: calc((1.55em - 14px) / 2) 0;
  background-clip: content-box;
}
.sk-line--90 { width: 90%; }
.sk-line--60 { width: 60%; }
.sk-search {   /* the box model of .shelf-search: one text line plus its padding and border */
  min-height: 2.75rem;
  padding: 0.55rem 0;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 1rem;
}
.sk-search::before { content: "\200b"; }
.sk-chips { display: flex; gap: 0.4rem; padding: 0.75rem 0 0.25rem; }
.sk-chip { height: 34px; border-radius: 999px; }
.sk-chip:nth-child(1) { width: 56px; }
.sk-chip:nth-child(2) { width: 84px; }
.sk-chip:nth-child(3) { width: 88px; }
.sk-chip:nth-child(4) { width: 80px; }
.sk-head { width: 120px; height: 18px; margin: 1.5rem 0 0.5rem; }
.sk-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.sk-cover { width: 44px; height: 60px; border-radius: 6px; }
.sk-text { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.sk-title { width: 60%; height: 14px; }
.sk-meta { width: 40%; height: 12px; }
.sk-get { width: 44px; height: 44px; border-radius: 50%; }
@keyframes shelf-shimmer { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .shelf-skeleton-top,
  .shelf-skeleton-bars { animation: none; }
}

/* The list: one section per language, one row per book */
.shelf-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin: 1.5rem 0 0.25rem; font-size: 1.05rem; }
.shelf-group-count { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.shelf-rows { margin: 0; padding: 0; list-style: none; }
.shelf-row { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--line); }
.shelf-item {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.6rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.shelf-cover {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.6rem;
  height: 3.5rem;
  border-radius: 4px;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
.shelf-cover--0 { background: var(--shelf-cover-0); }
.shelf-cover--1 { background: var(--shelf-cover-1); }
.shelf-cover--2 { background: var(--shelf-cover-2); }
.shelf-cover--3 { background: var(--shelf-cover-3); }
.shelf-cover--4 { background: var(--shelf-cover-4); }
.shelf-cover--5 { background: var(--shelf-cover-5); }
.shelf-text { display: flex; flex-direction: column; min-width: 0; }
.shelf-row-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.shelf-row-meta { color: var(--muted); font-size: 0.85rem; line-height: 1.45; }

.shelf-action { flex: none; }
.shelf-get {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--shelf-tint-soft);
  color: var(--shelf-tint);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.shelf-get[aria-disabled="true"] { cursor: default; }
.shelf-get.is-queued { color: var(--muted); }
.shelf-get.is-inLibrary { background: none; color: var(--muted); }
.shelf-pct { font-variant-numeric: tabular-nums; }
.shelf-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The book sheet: a dialog at the bottom of the screen */
.shelf-sheet {
  width: 100%;
  max-width: min(40rem, 100%);
  max-height: 88vh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: var(--bg);
  color: var(--fg);
  overflow: auto;
  overscroll-behavior: contain;
}
.shelf-sheet::backdrop { background: var(--shelf-backdrop); }
.shelf-sheet[open] { animation: shelf-sheet-in 0.2s ease-out; }
@keyframes shelf-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shelf-sheet[open] { animation: none; } }
.shelf-sheet-body { padding: 1rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
.shelf-sheet-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.shelf-sheet-head h2 { flex: 1; min-width: 0; margin: 0.35rem 0 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.shelf-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--fg);
  cursor: pointer;
}
.shelf-sheet-author { margin: 0.35rem 0 1rem; color: var(--muted); }
.shelf-facts { margin: 0 0 1.25rem; border-top: 1px solid var(--line); }
.shelf-facts > div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 30%) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.5;
}
.shelf-facts dt { color: var(--muted); -webkit-hyphens: auto; hyphens: auto; }
.shelf-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.shelf-sheet-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.shelf-primary {
  display: block;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 12px;
  background: var(--shelf-tint);
  color: var(--shelf-on-tint);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.shelf-primary[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.shelf-secondary { display: block; padding: 0.7rem 1rem; color: var(--shelf-tint); font-weight: 600; text-align: center; text-decoration: none; }

/* About page */
.shelf-back { margin: 0 0 1rem; font-size: 0.92rem; }
.shelf-criteria li { margin: 0 0 0.5em; }
.shelf-works-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shelf-works { min-width: 44rem; font-size: 0.88rem; }
.doc .shelf-works th { width: auto; white-space: nowrap; }
.shelf-works td { line-height: 1.5; overflow-wrap: normal; }
.shelf-works td:first-child { min-width: 8rem; }
.shelf-works td:nth-child(3),
.shelf-works td:nth-child(4) { white-space: nowrap; }
.shelf-works-empty { color: var(--muted); }

@media print {
  .shelf-works { min-width: 0; }
}