/* Card Garden (#cards and #cards/<id>). Owned by the cards chapter.
   The collection is a herbarium drawer: every card sits in a glassine sleeve above its printed collection
   label, pressed garden specimens mark where each year begins, the search is an index card with a
   herbarium tag for its label, and the release years are divider tabs. A single card opens on a black
   album page held by kraft corners (the 3D viewer, re-inked here for paper; its base styles stay in
   styles-card-viewer.css).
   Shared pieces (head, label, notes, foot) come from styles-journal.css. */

/* ---------- the opener: a smaller painting at the spine, the title beside it ---------- */
/* On wide pages and tablets held upright (below); a phone keeps the painting across the top. */
@container journal (min-width: 880px) {
  .j-head--cards { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); min-height: 0; }
  .j-head--cards .j-vignette { grid-column: 1; height: 400px; margin: 70px 0 0 calc(var(--j-pad) * -1); }
  .j-vignette--cards img {
    object-position: 62% 50%; transform: scale(1.12); transform-origin: 64% 52%;
    -webkit-mask-image: radial-gradient(ellipse 50% 62% at 55% 50%, #000 52%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 62% at 55% 50%, #000 52%, transparent 100%);
  }
  .j-head--cards .j-head-text { grid-column: 2; padding: 150px 0 0 34px; }
}

.j-page--cards .cg-intro { max-width: 30em; margin: 34px 0 0; }

/* ---------- the two drawers: English and Japanese ---------- */
/* The drawer sentence on the left, the EN/JP switch on the right; on narrow pages the switch sits above it. */
.cg-opener { display: grid; grid-template-columns: minmax(0, 30em) auto; justify-content: space-between; align-items: start; column-gap: 40px; margin-top: 34px; }
.j-page--cards .cg-opener .cg-intro { grid-column: 1; grid-row: 1; margin: 0; }
.cg-opener > .cg-state { grid-column: 1; grid-row: 1; margin: 30px 0 24px; }
/* The switch: two brass label holders, each holding the card of one drawer. A radio group with a legend. */
.cg-lang { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
.cg-lang-legend { padding: 0; margin: 0 0 12px; font: 500 16px/1.3 var(--j-sc); letter-spacing: .12em; color: var(--j-ink); }
.cg-lang-row { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.cg-lang-tab { position: relative; display: block; flex: none; }
.cg-lang-tab input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cg-lang-plate {
  position: relative; display: block; padding: 4px 11px; border-radius: 5px;
  background: linear-gradient(165deg, #e4ca8a 0%, #b38b44 36%, #dcbd7b 60%, #8c6830 100%);
  box-shadow: inset 0 1px 0 #fff3cf9e, inset 0 -1px 0 #5c421c85, 0 1px 1px #4a2f1a4d, 0 5px 9px -4px #4a2f1a80;
}
/* A screw head on each flange. */
.cg-lang-plate::before, .cg-lang-plate::after {
  content: ''; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f8e7b8, #7a5a28 72%); box-shadow: 0 0 0 .5px #5c421c;
}
.cg-lang-plate::before { left: 3px; }
.cg-lang-plate::after { right: 3px; }
.cg-lang-card {
  position: relative; display: grid; justify-items: center; align-content: center; min-width: 78px; min-height: 50px; padding: 5px 14px 4px;
  background: #e8dcc2; border-radius: 1px; box-shadow: inset 0 1px 3px #4a2f1a59; color: var(--j-ink-soft);
  transition: background-color .18s ease, color .18s ease;
}
.cg-lang-code { font: 400 26px/1 var(--j-display); letter-spacing: .05em; }
.cg-lang-word { margin-top: 3px; font: 500 16px/1.1 var(--j-sc); letter-spacing: .06em; }
/* The drawer in use: a fresh card, inked in red, with a pencilled tick. */
.cg-lang-tab input:checked + .cg-lang-plate .cg-lang-card { background: #fffcf3; color: var(--j-place-ink); box-shadow: inset 0 1px 2px #4a2f1a33, inset 0 0 0 1px #9a3a2533; }
.cg-lang-tab input:checked + .cg-lang-plate .cg-lang-card::after {
  content: ''; position: absolute; right: 7px; top: 6px; width: 5px; height: 10px;
  border: solid var(--j-place-ink); border-width: 0 2px 2px 0; rotate: 40deg;
}
.cg-lang-tab input:focus-visible + .cg-lang-plate { outline: 2px solid var(--j-hand); outline-offset: 4px; }
@media (hover: hover) {
  .cg-lang-tab:hover input:not(:checked) + .cg-lang-plate .cg-lang-card { background: #f5ecd8; color: var(--j-ink); }
}
@media (forced-colors: active) {
  .cg-lang-tab input:checked + .cg-lang-plate { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* Japanese as printed: set in a Japanese Mincho beside the journal's own faces, never slanted. */
.j-page--cards { --cg-ja-face: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Noto Serif CJK JP', 'Source Han Serif JP', serif; }
#archive-dialog .j-page--cards [lang="ja"] { font-family: Alegreya, 'Alegreya Iowan', 'Alegreya Georgia', var(--cg-ja-face); font-style: normal; font-synthesis: none; font-feature-settings: 'palt'; line-break: strict; word-break: auto-phrase; text-wrap: pretty; }
/* Names, set names and product names carry their own phrase breaks (<wbr>, js/journal-cards.js jaPhrases):
   a line breaks only between phrases, the same in Safari as in Chrome, so ミュウ never splits into ミュ / ウ.
   A phrase wider than its line still wraps instead of overflowing. */
#archive-dialog .j-page--cards .cg-ja { word-break: keep-all; overflow-wrap: anywhere; }
#archive-dialog .j-page--cards .j-title [lang="ja"], #archive-dialog .j-page--cards .cg-move-name [lang="ja"], #archive-dialog .j-page--cards .cg-leaf-name [lang="ja"] {
  font-family: 'Fell Digits', 'IM Fell English', 'Fell Iowan', 'Fell Georgia', var(--cg-ja-face);
}
/* English beside the Japanese: the same words, quieter. */
.j-page--cards .cg-name-en { margin: -1px 0 6px; font: italic 400 17px/1.25 var(--j-text); color: var(--j-ink-soft); }
.cg-set-ja { display: block; margin-top: 1px; line-height: 1.4; color: var(--j-ink-soft); }
.j-page--cards .cg-en { font-style: italic; color: var(--j-ink-soft); }

/* ---------- the index card and its tag ---------- */
.cg-finder { position: relative; display: grid; gap: 46px; margin-top: 84px; }
/* A ruled index card: the tag hangs over its heading band, above the red line, so it never covers the words. */
.cg-index {
  position: relative; max-width: 620px; margin-left: 132px; padding: 74px 28px 6px 30px;
  background:
    linear-gradient(#b9452f99, #b9452f99) 0 62px / 100% 2px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 39px, #6f93bd5c 39px 40px) 0 85px / 100% calc(100% - 85px) no-repeat,
    #fcf9f1;
  border-radius: 3px;
  box-shadow: 0 1px 1px #4a2f1a33, 0 14px 22px -12px #4a2f1a66;
}
.cg-tag { position: absolute; z-index: 2; left: -118px; top: -34px; width: 204px; height: 101px; display: flex; align-items: center; justify-content: center; rotate: -4deg; cursor: text; }
.cg-tag img { position: absolute; left: 50%; top: 50%; width: 101px; height: 204px; max-width: none; translate: -50% -50%; rotate: -90deg; filter: drop-shadow(0 2px 2px #4a2f1a3d); pointer-events: none; }
.cg-tag-text { position: relative; margin-left: 58px; max-width: 6.2em; font: 500 17px/1.15 var(--j-sc); letter-spacing: .05em; text-align: center; color: var(--j-ink); }
/* The Card Garden's visit stamp is struck across the eyelet end of the tag, clear of its words. */
.cg-index > .j-stamp { z-index: 3; left: -170px; right: auto; top: -66px; width: 142px; height: 142px; --j-stamp-r: -14deg; }
.cg-search {
  display: block; width: 100%; min-height: 50px; margin: 0; padding: 6px 2px 4px; border: 0; border-radius: 0;
  background: transparent; color: var(--j-ink); font: 400 22px/1.3 var(--j-text); -webkit-appearance: none; appearance: none;
}
.cg-search::placeholder { color: var(--j-ink-faint); font-style: italic; opacity: 1; }
.cg-search::-webkit-search-cancel-button { cursor: pointer; }
.cg-index-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px; min-height: 40px; padding-top: 2px; }
.j-page--cards .cg-status { font: italic 400 17px/1.3 var(--j-text); color: var(--j-ink-soft); }
.cg-index-actions { display: flex; flex-wrap: wrap; gap: 0 18px; }
.cg-text-button {
  min-height: 44px; padding: 0; font: 500 16px/1.2 var(--j-sc); letter-spacing: .04em; color: var(--j-place-ink);
  text-decoration: underline; text-decoration-color: #9a3a2566; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.cg-text-button:hover { text-decoration-color: currentColor; }
.cg-text-button[hidden] { display: none; }

/* ---------- divider tabs for the release years ---------- */
.cg-tabs { min-width: 0; margin: 0; padding: 0; border: 0; }
.cg-tabs-legend { padding: 0; margin: 0 0 10px; font: 500 16px/1.3 var(--j-sc); letter-spacing: .12em; color: var(--j-ink); }
.cg-tab-row { display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: 10px; }
.cg-tab { position: relative; display: block; flex: none; padding-right: 3px; border-bottom: 2px solid #6b4e3a4d; }
.cg-tab input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cg-tab span {
  position: relative; z-index: 0; display: block; min-width: 58px; min-height: 44px; padding: 11px 12px 9px; text-align: center;
  font: 500 17px/1.3 var(--j-text); font-variant-numeric: lining-nums; color: var(--j-ink-soft);
  translate: 0 4px; transition: translate .18s ease;
}
/* The tab itself: a divider top with slanted shoulders, painted behind the year. */
.cg-tab span::before {
  content: ''; position: absolute; z-index: -1; inset: 0 0 -2px; border-radius: 8px 8px 0 0;
  background: linear-gradient(#ffffff66, #ffffff00 45%), var(--cg-tab, #efe3c2);
  box-shadow: inset 0 0 0 1px #6b4e3a2e, inset 0 2px 0 #ffffff8c;
  transform: perspective(22px) rotateX(3.2deg); transform-origin: 50% 100%;
}
.cg-tab--0 { --cg-tab: #efe3c2; }
.cg-tab--1 { --cg-tab: #e1e3c7; }
.cg-tab--2 { --cg-tab: #efdbcf; }
.cg-tab--3 { --cg-tab: #dfe1d9; }
.cg-tab input:checked + span { z-index: 1; translate: 0 0; margin-bottom: -2px; padding-bottom: 15px; color: var(--j-place-ink); font-weight: 700; }
.cg-tab input:checked + span::before { inset: 0; background: #fcf9f1; box-shadow: inset 0 0 0 1px #6b4e3a47, inset 0 3px 0 #9a3a25, 0 -3px 8px -4px #4a2f1a55; }
.cg-tab input:focus-visible + span { outline: 2px solid var(--j-hand); outline-offset: 3px; border-radius: 6px 6px 0 0; }
@media (hover: hover) {
  .cg-tab:hover input:not(:checked) + span { translate: 0 1px; color: var(--j-ink); }
}

/* ---------- the drawer ---------- */
.cg-drawer-wrap { position: relative; margin-top: 36px; }
/* For keyboards: a way past all the sheets to the notes and the next page. It shows only when focused. */
#archive-dialog .j-skip {
  position: absolute; z-index: 6; left: 0; top: 6px; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  background: var(--j-card); border: 1px solid #9c826c66; border-radius: 3px; box-shadow: 0 1px 0 #fff8 inset, 0 3px 10px #2b18103a;
  color: var(--j-ink); font: 500 16px/1.2 var(--j-sc); letter-spacing: .04em;
}
#archive-dialog .j-skip:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cg-drawer { display: grid; gap: 72px; padding-top: 62px; }
.cg-sheet[hidden], .cg-group[hidden], .cg-empty[hidden] { display: none !important; }
/* The page clips instead of scrolling (styles-journal.css), so a year mark can stay in view while its sheets go by
   (where overflow: clip is not supported, the mark simply scrolls with the page). */

/* One release year: its mark in the left-hand column, three sheets across beside it. */
.cg-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 32px; align-items: start; }
.cg-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 32px; align-items: start; }
/* The year, its count and a pressed specimen the reader can nudge. */
.cg-year { position: sticky; top: 100px; z-index: 1; min-height: 250px; padding: 20px 0 0 4px; }
.cg-year-title { position: relative; z-index: 2; display: grid; justify-items: start; gap: 4px; margin: 0; }
.cg-year-num { font: 400 68px/.9 var(--j-display); letter-spacing: -.01em; color: var(--j-place-ink); font-variant-numeric: lining-nums; }
.cg-year-count { font: italic 400 18px/1.3 var(--j-text); color: var(--j-ink-soft); }
.cg-year-num--word { font-size: 46px; }
.cg-press { left: 34%; top: 118px; width: 60px; transform: rotate(-9deg); }
.cg-group--1 .cg-press { left: 24%; top: 112px; width: 92px; transform: rotate(7deg); }
.cg-group--2 .cg-press { left: 22%; top: 124px; width: 104px; transform: rotate(-15deg); }

/* A sheet: the card in its glassine sleeve, the collection label beneath. */
.cg-sheet { position: relative; min-width: 0; padding-top: var(--cg-drop, 0px); }
.cg-sheet:hover, .cg-sheet:focus-within, .cg-sheet.is-out { z-index: 4; }
#archive-dialog .cg-pick { position: static; display: block; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
.cg-pick::after { content: ''; position: absolute; z-index: 5; inset: -10px -10px -12px; border-radius: 6px; }
#archive-dialog .cg-pick:focus-visible { outline: none; }
#archive-dialog .cg-pick:focus-visible::after { outline: 2px solid var(--j-hand); outline-offset: 0; }
.cg-sleeve { position: relative; display: block; aspect-ratio: 245 / 342; margin: 0 8px; }
.cg-card { position: absolute; inset: 0; z-index: 1; display: block; rotate: var(--cg-r, 0deg); transition: translate .42s cubic-bezier(.2, .75, .25, 1), rotate .42s cubic-bezier(.2, .75, .25, 1); }
.cg-card::before { content: ''; position: absolute; z-index: -1; inset: 8% 5% 1%; border-radius: 6%; box-shadow: 0 16px 22px #4a2f1a59; opacity: 0; transition: opacity .42s ease; }
.cg-card img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4.5% / 3.2%; filter: drop-shadow(0 1px 1.5px #4a2f1a4d); }
.cg-missing { display: grid; place-items: center; width: 100%; height: 100%; padding: 14px; border: 1.5px dashed #6b4e3a66; border-radius: 4.5% / 3.2%; background: #f8f1e2; color: var(--j-ink-soft); font: italic 400 16px/1.4 var(--j-text); text-align: center; }
/* Glassine: a faint haze the art reads clearly through, a sheen, one crease, a hairline edge and a thumb
   notch at the mouth where the top of the card shows. It hugs the card like a real sleeve. */
.cg-glassine {
  position: absolute; z-index: 2; left: -2px; right: -2px; top: 8%; bottom: -4px; rotate: var(--cg-r, 0deg); pointer-events: none;
  background:
    linear-gradient(163deg, transparent 57.6%, #6b4e3a17 58%, #ffffff66 58.9%, transparent 59.8%),
    linear-gradient(103deg, #ffffff00 18%, #ffffff5c 33%, #ffffff00 48%),
    linear-gradient(180deg, #faf6ee38, #f2ece033 70%, #ebe3d440);
  box-shadow: inset 0 0 0 1px #ffffffb3, inset 0 -2px 0 #6b4e3a14, 0 0 0 .6px #6b4e3a33, 0 3px 6px -3px #4a2f1a33;
  border-radius: 2px 2px 3px 3px;
  -webkit-mask: radial-gradient(circle 15px at 50% 0, #0000 95%, #000 100%);
  mask: radial-gradient(circle 15px at 50% 0, #0000 95%, #000 100%);
  transition: opacity .42s ease, translate .42s cubic-bezier(.2, .75, .25, 1);
}
/* Out of the sleeve: on hover, on keyboard focus, as it crosses the middle of a touch screen, or on a tap. */
.cg-pick:focus-visible .cg-card, .cg-sheet.is-out .cg-card { translate: 0 -17%; rotate: calc(var(--cg-r, 0deg) * -1.3); }
.cg-pick:focus-visible .cg-card::before, .cg-sheet.is-out .cg-card::before { opacity: 1; }
.cg-pick:focus-visible .cg-glassine, .cg-sheet.is-out .cg-glassine { opacity: .12; translate: 0 4%; }
/* A jumbo card: a rubber stamp on its sleeve (the label beneath says Jumbo card in words). */
.cg-jumbo {
  position: absolute; z-index: 3; right: -12px; top: 16%; padding: 4px 8px 3px; border: 2px solid currentColor; border-radius: 3px;
  background: #fcf9f1d9; color: #9a3a25; font: 500 16px/1 var(--j-sc); letter-spacing: .16em; rotate: 8deg; pointer-events: none;
  box-shadow: 0 1px 2px #4a2f1a33;
}
@media (hover: hover) {
  .cg-pick:hover .cg-card { translate: 0 -17%; rotate: calc(var(--cg-r, 0deg) * -1.3); }
  .cg-pick:hover .cg-card::before { opacity: 1; }
  .cg-pick:hover .cg-glassine { opacity: .12; translate: 0 4%; }
}

/* The collection label: typed values, the card's name set like a species name. */
.cg-label { position: relative; margin: 18px 8px 0; padding-top: 9px; border-top: 1px solid #6b4e3a3d; }
.j-page--cards .cg-name { margin: 0 0 5px; font: italic 500 20px/1.2 var(--j-text); color: var(--j-ink); }
.cg-label dl { margin: 0; }
.cg-label dl > div { font: 400 16px/1.4 var(--j-text); color: var(--j-ink-soft); }
.cg-label dt { display: inline; font: 400 16px/1.4 var(--j-sc); letter-spacing: .05em; color: var(--j-ink-faint); }
.cg-label dd { display: inline; margin: 0; }
.j-page--cards .cg-rarity { margin-top: 5px; font: italic 400 16px/1.35 var(--j-text); color: var(--j-ink-soft); }

/* One pencilled hint at the top of the drawer. Pointer and touch readers get their own. */
.cg-note { top: -16px; right: 3%; font-size: 22px; --j-note-r: -3deg; }
.cg-note .j-arrow { left: -86px; top: 14px; width: 84px; height: 46px; }
.cg-note--touch, .cg-note--first { display: none; }
@media (hover: none) {
  .cg-note--hover { display: none; }
  .cg-note--touch { display: block; }
  .cg-note--touch .j-arrow { left: 58%; top: 100%; width: 70px; height: 44px; }
}

/* Nothing matches, loading, and the catalogue that would not load. */
.cg-empty { max-width: 30em; padding: 12px 0 8px; }
.cg-state-title { font: 400 34px/1.15 var(--j-display); color: var(--j-ink); margin: 0 0 10px; text-wrap: balance; }
.j-page--cards .cg-empty p, .j-page--cards .cg-state p { font-size: 18px; color: var(--j-ink-soft); margin-bottom: 18px; }
.cg-state { position: relative; min-height: 190px; margin: 64px 0 24px; padding: 18px 0 0 124px; }
.cg-state-tag { position: absolute; left: 24px; top: 0; width: 72px; height: auto; rotate: -9deg; filter: drop-shadow(0 2px 2px #4a2f1a3d); }
.cg-button {
  min-height: 44px; padding: 10px 18px; background: var(--j-card); border: 1px solid #9c826c66; border-radius: 3px;
  box-shadow: 0 1px 0 #fff8 inset, 0 3px 10px #2b18103a; color: var(--j-ink); font: 500 16px/1.3 var(--j-sc); letter-spacing: .04em;
}
.cg-button:hover { background: #fffaf0; border-color: #9c826caa; }

/* The end of a drawer offers the other one, so changing language is never a long scroll back to the switch. */
.j-page--cards .cg-drawer-end { max-width: 34em; margin: 76px 0 0; font: italic 400 17px/1.5 var(--j-text); color: var(--j-ink-soft); }
.cg-drawer-end .cg-text-button { font-style: normal; }

/* About this collection: a footnote on a scrap. */
.cg-about { max-width: 640px; margin: 104px 0 0 auto; padding: 16px 28px 10px; }
.cg-about summary, .cg-print-notes summary {
  display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none;
  font: 500 16px/1.3 var(--j-sc); letter-spacing: .1em; color: var(--j-ink);
}
.cg-about summary::-webkit-details-marker, .cg-print-notes summary::-webkit-details-marker { display: none; }
.cg-about summary::after, .cg-print-notes summary::after { content: '+'; font: 400 22px/1 var(--j-text); color: var(--j-place-ink); }
.cg-about details[open] summary::after, .cg-print-notes[open] summary::after { content: '\2212'; }
.j-page--cards .cg-about p { margin: 0 0 12px; font: 400 16.5px/1.6 var(--j-text); color: var(--j-ink-soft); }
.j-page--cards .cg-about details[open] { padding-bottom: 8px; }
.cg-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 2px 0 12px; }

/* ---------- a single card ---------- */
/* Wide pages: the tray on the left, the way back, the head and the record down the right. */
.cg-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start;
  grid-template-areas: "tray nav" "tray head" "tray record"; grid-template-rows: auto auto 1fr;
  padding-top: 92px;
}
.cg-detail-nav { grid-area: nav; }
.cg-detail > .j-head { grid-area: head; padding: 26px 0 8px; }
.cg-detail > .cg-tray { grid-area: tray; }
.cg-record { grid-area: record; min-width: 0; }
.cg-back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 12px;
  background: var(--j-card); border: 1px solid #9c826c66; border-radius: 3px; rotate: -.8deg;
  box-shadow: 0 1px 0 #fff8 inset, 0 3px 10px #2b18103a; color: var(--j-ink); font: 500 16px/1.2 var(--j-sc); letter-spacing: .04em;
}
.cg-back:hover { background: #fffaf0; }
.cg-back-arrow { width: 26px; height: 14px; flex: none; fill: none; stroke: var(--j-ink-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#archive-dialog .cg-detail .j-title { font-size: 60px; max-width: none; }
.cg-detail .j-deck { font-size: 20px; }
.cg-missing-nav { margin-top: 4px !important; }

.cg-record .j-label { max-width: none; margin: 30px 0 38px; }
.cg-record .j-label dd { overflow-wrap: anywhere; }
/* A Japanese label's longer values (the set's Japanese name, the product) run to a second line; the dotted
   leader stays on the first, where a one-line value would put it. */
.cg-detail--ja .cg-record .j-label dl > div:not(:has(button))::before { align-self: start; margin: 14px 0 0; }
/* An English card with several Japanese prints: one link to a line, the leader beside the first. */
.cg-prints { display: grid; justify-items: end; }
.cg-prints .cg-text-button { text-align: inherit; }
.cg-record .j-label dl > div:has(.cg-prints)::before { align-self: start; margin: 26px 0 0; }
.cg-sub { font: 400 32px/1.1 var(--j-display); color: var(--j-ink); margin: 0 0 14px; text-wrap: balance; }
.cg-notice ul { list-style: none; margin: 0; padding: 0; }
.cg-notice li { position: relative; margin: 0 0 12px; padding-left: 28px; font-size: 18px; line-height: 1.6; max-width: 30em; }
.cg-notice li::before { content: ''; position: absolute; left: 3px; top: .82em; width: 15px; height: 1.6px; border-radius: 1px; background: var(--j-place-ink); rotate: -9deg; }
.cg-flavor { margin: 30px 0 0; padding: 2px 0 2px 22px; border-left: 1.5px solid #6b4e3a66; }
.j-page--cards .cg-flavor p { font: italic 400 19px/1.6 var(--j-text); color: var(--j-ink-soft); max-width: 30em; }
.cg-record .j-source-line { margin-top: 22px !important; }
.cg-print-notes { margin-top: 20px; padding-top: 6px; border-top: 1px solid var(--j-rule); }
.j-page--cards .cg-print-notes p, .cg-print-notes li { font-size: 16.5px; line-height: 1.6; color: var(--j-ink-soft); }
.j-page--cards .cg-print-notes p { margin: 0 0 12px; }
.cg-print-notes ul { margin: 0 0 12px; padding-left: 20px; }
.cg-print-sub { font: 500 16px/1.3 var(--j-sc); letter-spacing: .1em; color: var(--j-ink); margin: 18px 0 8px; }

.cg-attacks { margin-top: 72px; padding-top: 26px; border-top: 1px solid var(--j-rule); }
.cg-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 52px; }
.cg-move { min-width: 0; }
.cg-move h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; font: 400 26px/1.15 var(--j-display); color: var(--j-ink); }
.cg-move-name { min-width: 0; }
.cg-move-leader { flex: 1 1 auto; min-width: 18px; border-bottom: 1.5px dotted #6b4e3a88; translate: 0 -.3em; }
.cg-move-damage { flex: none; font: 500 22px/1 var(--j-text); color: var(--j-place-ink); }
.j-page--cards .cg-move-note { font: 400 16px/1.4 var(--j-sc); letter-spacing: .05em; color: var(--j-ink-faint); margin: 0 0 6px; }
.j-page--cards .cg-move p:not(.cg-move-note) { font-size: 17.5px; line-height: 1.6; color: var(--j-ink-soft); max-width: 32em; }
/* A Japanese move: the printed name with the English name beneath, the printed text, then the English. */
.cg-move-en { display: block; margin-top: 5px; font: italic 400 19px/1.25 var(--j-text); color: var(--j-ink-soft); }
.j-page--cards .cg-move p[lang="ja"] { color: var(--j-ink); }
.j-page--cards .cg-move .cg-en { margin-top: 6px; }
.j-page--cards .cg-flavor .cg-en { margin-top: 10px; font-size: 18px; }
.cg-print-notes li .cg-en { display: block; margin-top: 2px; }
#archive-dialog .cg-detail--ja .j-title { font-size: 54px; }
#archive-dialog .cg-finish-note { margin-top: 52px; }

.cg-leaf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--j-rule); }
.cg-leaf button { display: grid; justify-items: start; gap: 2px; min-height: 44px; padding: 6px 0; text-align: left; color: var(--j-ink); }
#archive-dialog .cg-leaf .cg-leaf-next { justify-items: end; text-align: right; }
.cg-leaf-dir { font: 500 16px/1.3 var(--j-sc); letter-spacing: .08em; color: var(--j-ink-faint); }
.cg-leaf-name { font: 400 24px/1.2 var(--j-display); text-decoration: underline; text-decoration-color: #6b4e3a55; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.cg-leaf button:hover .cg-leaf-name { text-decoration-color: currentColor; }
.cg-turn-back { margin-top: 44px; }
.cg-turn-back .j-turn-arrow { scale: -1 1; }
.cg-turn-back:hover .j-turn-arrow, .cg-turn-back:focus-visible .j-turn-arrow { translate: -6px 0; }

/* The viewing tray: a black album page, the paper grain showing faintly through it, held onto the journal
   by four kraft corners (js/journal-cards.js adds them). Its controls read as one typed line beneath. */
#archive-dialog .cg-tray { min-width: 0; padding: 10px; border: 0; border-radius: 0; background: none; color: var(--j-ink); overflow: visible; }
#archive-dialog .cg-tray .card-turntable {
  height: 520px; min-height: 0; border-radius: 2px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, #ffffff0c, #ffffff00 70%),
    var(--j-paper-tile) 0 0 / 512px auto,
    #1f1a17;
  background-blend-mode: normal, multiply, normal;
  box-shadow: inset 0 0 0 1px #00000059, inset 0 0 26px #0000004d, 0 1px 1px #2b18104d, 0 14px 24px -10px #4a2f1a80;
}
#archive-dialog .cg-tray .card-turntable > .j-corner { z-index: 3; width: 24px; height: 24px; }
#archive-dialog .cg-tray .j-corner--tl { left: -6px; top: -6px; }
#archive-dialog .cg-tray .j-corner--tr { right: -6px; top: -6px; }
#archive-dialog .cg-tray .j-corner--br { right: -6px; bottom: -6px; }
#archive-dialog .cg-tray .j-corner--bl { left: -6px; bottom: -6px; }
#archive-dialog .cg-tray .card-turntable:focus-visible { outline: 2px solid var(--j-hand); outline-offset: 12px; border-radius: 4px; }
#archive-dialog .cg-tray .inspection-hint { margin: 22px 4px 6px !important; color: var(--j-ink-soft) !important; font: italic 400 16px/1.45 var(--j-text) !important; }
#archive-dialog .cg-tray .inspection-finish { color: var(--j-ink); margin: 6px 0; }
#archive-dialog .cg-tray .inspection-finish-label { color: var(--j-ink-faint); font: 500 16px/1.3 var(--j-sc); letter-spacing: .08em; text-transform: none; }
#archive-dialog .cg-tray .inspection-finish-value { font: 400 17px/1.4 var(--j-text); color: var(--j-ink); }
#archive-dialog .cg-tray .inspection-finish select {
  max-width: 280px; border: 1px solid #9c826c80; border-radius: 3px; color: var(--j-ink); font: 400 16px/1.3 var(--j-text);
  background: var(--j-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%2354443a' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center / 10px 6px no-repeat;
  box-shadow: 0 2px 6px #2b18101f;
}
#archive-dialog .cg-tray .inspection-finish-about { color: var(--j-ink-soft); margin: 0 0 4px; }
#archive-dialog .cg-tray .inspection-finish-about summary { font: 500 16px/1.3 var(--j-sc); letter-spacing: .06em; color: var(--j-ink-soft); }
#archive-dialog .cg-tray .inspection-finish-about summary::after { color: var(--j-place-ink); }
#archive-dialog .cg-tray .inspection-finish-about summary:hover { color: var(--j-ink); }
#archive-dialog .cg-tray .inspection-finish-note { border: 0; border-radius: 2px; background: var(--j-card); box-shadow: 0 1px 1px #4a2f1a26, 0 8px 14px -8px #4a2f1a4d; color: var(--j-ink-soft) !important; font: italic 400 16px/1.55 var(--j-text) !important; }
#archive-dialog .cg-tray .inspection-controls { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0 4px; padding: 2px 0 8px; }
#archive-dialog .cg-tray .inspection-controls button {
  min-width: 0; min-height: 44px; padding: 0 8px; border: 0; border-radius: 2px; background: none; box-shadow: none;
  color: var(--j-ink); font: italic 400 18px/1.3 var(--j-text); letter-spacing: 0;
  text-decoration: underline; text-decoration-color: var(--j-link-line); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* A printed dot between the phrases, drawn as a background so it is never read aloud. */
#archive-dialog .cg-tray .inspection-controls button[data-inspect="reset"], #archive-dialog .cg-tray .inspection-controls button[data-inspect="out"] {
  padding-left: 20px; background: radial-gradient(circle, var(--j-ink-soft) 1.4px, transparent 1.9px) 4px 50% / 8px 8px no-repeat;
}
#archive-dialog .cg-tray .inspection-controls button:hover { background-color: transparent; text-decoration-color: currentColor; }
#archive-dialog .cg-tray .inspection-controls button:disabled { opacity: .45; text-decoration-color: transparent; }
#archive-dialog .cg-tray .inspection-controls output { min-width: 0; padding: 0 2px; color: var(--j-ink-soft); font: 400 17px/1 var(--j-text); font-variant-numeric: lining-nums; }
#archive-dialog .cg-tray .inspection-status { color: var(--j-ink-soft) !important; font: italic 400 16px/1.4 var(--j-text) !important; }
#archive-dialog .cg-tray .card-viewer-fallback { display: block; width: auto; max-width: 100%; max-height: 520px; margin: auto; border-radius: 12px; }

/* ---------- tablet portrait: three sheets across, the year tabs in one sliding strip ---------- */
@container journal (max-width: 879px) {
  .j-vignette--cards img { object-position: 60% 52%; transform: scale(1.42); transform-origin: 60% 52%; }
  .cg-finder { margin-top: 70px; gap: 40px; }
  .cg-index > .j-stamp { left: -150px; top: -60px; width: 126px; height: 126px; }
  .cg-index { margin-left: 112px; }
  .cg-tag { left: -124px; }

  /* The dividers slide sideways under a finger; the chosen one is kept in view (js). */
  .cg-tab-row {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(var(--j-pad) * -1); padding: 8px var(--j-pad) 0; scroll-padding-inline: var(--j-pad);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 40px), transparent);
  }
  .cg-tab-row::-webkit-scrollbar { display: none; }
  .cg-tab-row::after { content: ''; flex: 0 0 calc(var(--j-pad) + 20px); align-self: stretch; border-bottom: 2px solid #6b4e3a4d; }

  /* The year becomes a row above its sheets. */
  .cg-drawer { gap: 56px; padding-top: 50px; }
  .cg-group { grid-template-columns: minmax(0, 1fr); row-gap: 50px; }
  .cg-sheets { gap: 56px 26px; }
  .cg-year { position: relative; top: auto; min-height: 0; padding: 0; }
  .cg-year-title { display: flex; align-items: baseline; gap: 14px; }
  .cg-year-num { font-size: 56px; }
  .cg-press, .cg-group--1 .cg-press, .cg-group--2 .cg-press { left: auto; right: 22%; top: -24px; width: 36px; transform: rotate(-72deg); }
  .cg-group--1 .cg-press { width: 52px; top: -32px; transform: rotate(-104deg); }
  .cg-group--2 .cg-press { width: 58px; right: 24%; top: -22px; transform: rotate(-64deg); }
  .cg-note { right: 0; }

  .cg-detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "head" "tray" "record"; grid-template-rows: none; padding-top: 88px; }
  .cg-detail > .j-head { padding: 26px 0 30px; }
  #archive-dialog .cg-detail .j-title { font-size: 58px; }
  #archive-dialog .cg-tray { max-width: 540px; width: 100%; justify-self: center; }
  .cg-record .j-label { margin-top: 40px; }
  .cg-moves { gap: 26px 36px; }
}

/* Narrow pages: the EN/JP switch sits above the drawer sentence. */
@container journal (max-width: 699px) {
  .cg-opener { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .cg-lang { grid-column: 1; grid-row: 1; }
  .j-page--cards .cg-opener .cg-intro, .cg-opener > .cg-state { grid-row: 2; }
  .cg-opener > .cg-state { margin-top: 12px; }
}

/* Tablets held upright keep the painting at the spine with the title beside it. */
@container journal (min-width: 600px) and (max-width: 879px) {
  .j-head--cards { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
  .j-head--cards .j-vignette { grid-column: 1; height: 300px; margin: 78px 0 0 calc(var(--j-pad) * -1); clip-path: none; background: none; }
  .j-vignette--cards img {
    object-position: 62% 50%; transform: scale(1.16); transform-origin: 64% 52%;
    -webkit-mask-image: radial-gradient(ellipse 50% 60% at 55% 50%, #000 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 60% at 55% 50%, #000 50%, transparent 100%);
  }
  .j-head--cards .j-head-text { grid-column: 2; padding: 104px 0 0 22px; margin: 0; }
}

/* ---------- phones: one sheet to a row, the card beside its label, 16px and up ---------- */
@container journal (max-width: 599px) {
  .j-vignette--cards img { object-position: 62% 52%; transform: scale(1.5); transform-origin: 62% 54%; }
  .j-page--cards .cg-intro { margin-top: 28px; }
  .cg-opener { margin-top: 28px; }
  .cg-finder { margin-top: 80px; gap: 34px; }
  .cg-index > .j-stamp { left: 150px; top: -64px; width: 106px; height: 106px; --j-stamp-r: 12deg; }
  .cg-index { margin-left: 0; padding: 62px 16px 4px 18px; background-position: 0 50px, 0 73px, 0 0; }
  .cg-tag { left: -8px; top: -46px; width: 176px; height: 87px; rotate: -4deg; }
  .cg-tag img { width: 87px; height: 176px; }
  .cg-tag-text { margin-left: 50px; font-size: 16px; }
  .cg-search { font-size: 20px; }
  .j-page--cards .cg-status { font-size: 16px; padding: 8px 0; }
  .cg-index-actions { gap: 0 16px; }
  .cg-tab span { min-width: 60px; padding-inline: 10px; }

  .cg-drawer-wrap { margin-top: 30px; }
  .cg-drawer { gap: 52px; padding-top: 30px; }
  .cg-group { row-gap: 44px; }
  .cg-sheets { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cg-year-title { gap: 12px; }
  .cg-year-num { font-size: 50px; }
  .cg-year-num--word { font-size: 40px; }
  .cg-press, .cg-group--1 .cg-press, .cg-group--2 .cg-press { right: 16%; top: -26px; width: 34px; }
  .cg-group--1 .cg-press { width: 50px; top: -32px; }
  .cg-group--2 .cg-press { width: 56px; right: 18%; top: -24px; }

  /* A herbarium sheet: the specimen on the left, the label lower right. */
  .cg-sheet { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); column-gap: 16px; align-items: end; padding-top: 0; }
  .cg-sleeve { margin: 0 4px 0 2px; }
  .cg-glassine { left: -2px; right: -2px; bottom: -4px; -webkit-mask: radial-gradient(circle 11px at 50% 0, #0000 95%, #000 100%); mask: radial-gradient(circle 11px at 50% 0, #0000 95%, #000 100%); }
  .cg-label { margin: 0; padding-top: 8px; }
  .j-page--cards .cg-name { font-size: 20px; }
  .cg-label dl > div, .j-page--cards .cg-rarity { font-size: 16px; }
  .cg-label dt { font-size: 16px; }

  .cg-note { top: -10px; right: auto; left: 2px; font-size: 20px; }
  /* Touch: the hint moves onto the first sheet, above its label, and points down at the card. */
  @media (hover: none) {
    .cg-note--touch { display: none; }
    .cg-sheet--first { padding-top: 50px; }
    .cg-note--first { display: block; left: 50%; right: auto; top: -4px; font-size: 20px; line-height: 1.05; --j-note-r: -3deg; }
    .cg-note--first .j-arrow { left: -50px; top: 16px; width: 46px; height: 44px; }
  }
  .cg-state { padding-left: 96px; }
  .cg-state-tag { left: 8px; width: 60px; }
  .cg-about { margin-top: 80px; padding: 14px 18px 8px; }

  .cg-detail { padding-top: 76px; }
  .cg-detail > .j-head { padding: 22px 0 26px; }
  #archive-dialog .cg-detail .j-title { font-size: 44px; }
  #archive-dialog .cg-detail--ja .j-title { font-size: 40px; }
  .cg-detail .j-deck { font-size: 19px; }
  #archive-dialog .cg-tray { padding: 8px 0; }
  #archive-dialog .cg-tray .card-turntable { height: 400px; }
  /* A long value would wrap under a stub of dotted leader, so on a phone each value sits under its name. */
  .cg-record .j-label dl > div { grid-template-columns: minmax(0, 1fr); padding: 8px 0 2px; }
  .cg-record .j-label dl > div::before { display: none; }
  .cg-record .j-label dd { grid-column: 1; grid-row: 2; text-align: left; margin-top: 1px; }
  .cg-prints { justify-items: start; }
  .cg-sub { font-size: 30px; }
  .cg-notice li { font-size: 18px; }
  .cg-moves { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cg-move h4 { font-size: 25px; }
  .cg-leaf { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #archive-dialog .cg-leaf .cg-leaf-next { justify-items: start; text-align: left; }
}
@container journal (max-width: 380px) {
  .cg-sheet { column-gap: 12px; }
  #archive-dialog .cg-tray .card-turntable { height: 340px; }
}
/* A short landscape phone: the tray fits the reading window. */
@media (max-height: 500px) and (orientation: landscape) {
  #archive-dialog .cg-tray .card-turntable { height: calc(100dvh - 150px); }
}

/* Reduced motion: nothing slides; a card out of its sleeve simply shows through clear glassine. */
@media (prefers-reduced-motion: reduce) {
  .cg-card, .cg-card::before, .cg-glassine, .cg-tab span, .cg-lang-card { transition: none !important; }
  .cg-pick:focus-visible .cg-card, .cg-sheet.is-out .cg-card, .cg-pick:hover .cg-card { translate: none !important; rotate: var(--cg-r, 0deg) !important; }
  .cg-pick:focus-visible .cg-glassine, .cg-sheet.is-out .cg-glassine, .cg-pick:hover .cg-glassine { opacity: 0 !important; translate: none !important; }
  .cg-tab:hover input:not(:checked) + span { translate: 0 4px; }
  .cg-turn-back:hover .j-turn-arrow, .cg-turn-back:focus-visible .j-turn-arrow { translate: none; }
}