/* Card Grove (#cards and #cards/<id>). Owned by js/journal-cards.js.
   The grove is a herbarium of Celebi's cards: each card is filed in a glassine sleeve (it slides out to be looked
   at, and no tape or hinge ever touches it) with a typed specimen label beneath, the two editions are two rubber
   stamps (the one in use inked in vermilion), and the search is a ruled field index card. A single card opens on
   its own page, on a tray of the journal's green cloth 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.
   Breakpoints: wide (default), tablet portrait (journal container 879px), phones (599px). */

/* ---------- the opener ---------- */
.j-vignette--cards img { object-position: 56% 62%; transform: scale(1.1); transform-origin: 58% 62%; }
.j-head--cards > .j-stamp { right: 37%; top: 316px; --j-stamp-r: -8deg; }

/* Japanese as printed: a Japanese Mincho beside the journal's own faces, never slanted. */
.j-page--cards { --cards-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(--cards-ja-face); font-style: normal; font-synthesis: none; font-feature-settings: 'palt'; line-break: strict; word-break: keep-all; overflow-wrap: anywhere; }
@supports (word-break: auto-phrase) { #archive-dialog .j-page--cards [lang="ja"] { word-break: auto-phrase; } }
#archive-dialog .j-page--cards .j-title [lang="ja"], #archive-dialog .j-page--cards .cards-move-name [lang="ja"], #archive-dialog .j-page--cards .cards-leaf-name [lang="ja"] {
  font-family: 'Fell Digits', 'IM Fell English', 'Fell Iowan', 'Fell Georgia', var(--cards-ja-face);
}

/* The drawer sentence on the left, the two edition stamps on the right. */
.cards-opener { display: grid; grid-template-columns: minmax(0, 30em) auto; justify-content: space-between; align-items: start; column-gap: 48px; margin-top: 24px; }
.cards-intro-slot { padding-top: 40px; }
.j-page--cards .cards-intro { max-width: 30em; }

/* ---------- the two editions: rubber stamps ---------- */
.cards-editions { position: relative; padding-top: 4px; }
.j-page--cards .cards-editions-title { margin: 0 0 6px; font: 500 16px/1.3 var(--j-sc); letter-spacing: .12em; color: var(--j-ink); }
.cards-edition-row { display: flex; gap: 14px; }
.cards-edition {
  position: relative; display: grid; place-content: center; justify-items: center; width: 118px; height: 118px; padding: 0 0 6px;
  border-radius: 50%; color: #5e5045; text-align: center; transition: color .2s ease;
}
.cards-edition-ink { position: absolute; inset: 0; opacity: .55; transition: opacity .2s ease, rotate .2s ease; }
.cards-edition-ink svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; }
.cards-edition-ink circle { stroke-dasharray: 3 6; }
.cards-edition-ink circle + circle, .cards-edition-ink path { stroke-dasharray: none; opacity: .7; }
.cards-edition-dots { fill: currentColor; stroke: none; }
.cards-edition-code { position: relative; font: 400 38px/1 var(--j-display); letter-spacing: .06em; }
.cards-edition-word { position: relative; margin-top: 7px; font: 500 16px/1 var(--j-sc); letter-spacing: .1em; }
.cards-edition-word [lang="ja"] { letter-spacing: .02em; }
/* The edition in use: struck in vermilion, the ring solid and roughened by the journal's ink filter. */
.cards-edition[aria-pressed="true"] { color: var(--j-place-ink); }
.cards-edition[aria-pressed="true"] .cards-edition-ink { opacity: .92; mix-blend-mode: multiply; }
.cards-edition[aria-pressed="true"] .cards-edition-ink g { filter: url(#j-ink); }
.cards-edition[aria-pressed="true"] .cards-edition-ink circle { stroke-dasharray: none; }
.cards-edition[aria-pressed="true"] { rotate: -7deg; }
.cards-edition--ja[aria-pressed="true"] { rotate: 6deg; }
.cards-edition[aria-pressed="true"] .cards-edition-code { font-weight: 400; text-shadow: 0 0 .5px currentColor; }
@media (hover: hover) {
  .cards-edition[aria-pressed="false"]:hover { color: var(--j-ink-soft); }
  .cards-edition[aria-pressed="false"]:hover .cards-edition-ink { opacity: .8; }
}
.cards-note--editions { right: 150px; top: -52px; font-size: 21px; line-height: 1.05; --j-note-r: -4deg; }
.cards-note--editions .j-arrow { left: 100%; top: 12px; width: 70px; height: 48px; margin-left: -6px; }

/* ---------- the field index: a ruled index card ---------- */
.cards-index { position: relative; margin-top: 64px; }
.cards-index-card {
  position: relative; max-width: 640px; margin-left: 124px; padding: 0 28px 6px 30px;
  background: repeating-linear-gradient(180deg, transparent 0 51px, #6f93bd4d 51px 52px) 0 52px / 100% calc(100% - 52px) no-repeat, #fcf9f1;
  border-radius: 3px; rotate: -.6deg;
  box-shadow: 0 1px 1px #4a2f1a33, 0 14px 22px -12px #4a2f1a66;
}
/* The heading band and its red rule. */
.j-page--cards .cards-index-head {
  display: flex; justify-content: space-between; align-items: end; height: 52px; padding-bottom: 7px; border-bottom: 2px solid #b9452f99;
  font: 500 16px/1.2 var(--j-sc); letter-spacing: .14em; color: var(--j-place-ink);
}
.cards-index-row { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 52px; }
.cards-index-label { font: 500 16px/1.2 var(--j-sc); letter-spacing: .08em; color: var(--j-ink-soft); cursor: pointer; }
.cards-search, .cards-year {
  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 21px/1.3 var(--j-text); -webkit-appearance: none; appearance: none;
}
.cards-search::placeholder { color: var(--j-ink-faint); font-style: italic; opacity: 1; }
.cards-search::-webkit-search-cancel-button { cursor: pointer; }
.cards-year {
  width: auto; min-width: 11em; padding-right: 34px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%2354443a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") right 8px center / 12px 8px no-repeat;
}
.cards-index-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px; min-height: 52px; }
.j-page--cards .cards-status { font: italic 400 17px/1.3 var(--j-text); color: var(--j-ink-soft); }
.cards-index-actions { display: flex; flex-wrap: wrap; gap: 0 20px; }
.cards-text-button {
  min-height: 44px; padding: 0; font: 500 16px/1.2 var(--j-sc); letter-spacing: .04em; color: var(--j-place-ink); text-align: left;
  text-decoration: underline; text-decoration-color: #9a3a2566; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.cards-text-button:hover { text-decoration-color: currentColor; }
.cards-text-button[hidden] { display: none; }
/* A pressed fern tucked behind the index card. */
.cards-index-fern { left: 14px; top: -26px; width: 92px; transform: rotate(-14deg); }

/* ---------- the grove: one card to a sheet, each in its glassine sleeve ---------- */
.cards-grove-wrap { position: relative; margin-top: 56px; }
/* For keyboards: a way past every card to the sources and the next page. It shows only when focused. */
#archive-dialog .cards-skip {
  position: absolute; z-index: 6; left: 0; top: -8px; 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 .cards-skip:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 58px 30px; align-items: start; }
.cards-sheet[hidden], .cards-empty[hidden] { display: none !important; }
/* A sheet: the card in its sleeve, mounted by hand a little off true and a little lower than its neighbour. */
.cards-sheet { position: relative; min-width: 0; padding-top: var(--cards-drop, 0px); }
.cards-sheet:hover, .cards-sheet:focus-within, .cards-sheet.is-out { z-index: 4; }

#archive-dialog .cards-pick { position: static; display: block; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
/* The tap area takes in the whole sheet, label and all. */
.cards-pick::after { content: ''; position: absolute; z-index: 5; inset: -10px -10px -12px; border-radius: 6px; }
/* The focus ring is drawn round the card itself, so it rides up with the card as it comes out of its sleeve. */
#archive-dialog .cards-pick:focus-visible { outline: none; }
#archive-dialog .cards-pick:focus-visible .cards-card { outline: 2px solid var(--j-hand); outline-offset: 5px; border-radius: 4.5% / 3.2%; }
.cards-sleeve { position: relative; display: block; aspect-ratio: 245 / 342; margin: 0 8px; }
.cards-card { position: absolute; inset: 0; z-index: 1; display: block; rotate: var(--cards-r, 0deg); transition: translate .42s cubic-bezier(.2, .75, .25, 1), rotate .42s cubic-bezier(.2, .75, .25, 1); }
/* The shadow a card casts once it is lifted clear of the page. */
.cards-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; }
.cards-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); }
.cards-missing { display: grid; place-items: center; width: 100%; height: 100%; padding: 12px; border: 1.5px dashed #6b4e3a66; border-radius: 4.5% / 3.2%; background: var(--j-card); color: var(--j-ink-soft); font: italic 400 16px/1.4 var(--j-text); text-align: center; }
/* The sleeve's glassine (styles-journal.css draws it) turns with the card it holds. */
.cards-glassine { rotate: var(--cards-r, 0deg); }
/* Out of the sleeve: on hover, on keyboard focus, as it crosses the middle of a touch screen, or on a tap. */
.cards-pick:focus-visible .cards-card, .cards-sheet.is-out .cards-card { translate: 0 -17%; rotate: calc(var(--cards-r, 0deg) * -1.3); }
.cards-pick:focus-visible .cards-card::before, .cards-sheet.is-out .cards-card::before { opacity: 1; }
.cards-pick:focus-visible .cards-glassine, .cards-sheet.is-out .cards-glassine { opacity: .12; translate: 0 4%; }
/* A Japanese jumbo card: a rubber stamp on its sleeve (the label beneath says Jumbo card in words). */
.cards-jumbo {
  position: absolute; z-index: 3; right: -12px; top: 16%; padding: 4px 8px 3px; border: 2px solid currentColor; border-radius: 3px;
  background: #fcf9f1d9; color: var(--j-place-ink); font: 500 16px/1 var(--j-sc); letter-spacing: .16em; rotate: 8deg; pointer-events: none;
  box-shadow: 0 1px 2px #4a2f1a33;
}
@media (hover: hover) {
  .cards-pick:hover .cards-card { translate: 0 -17%; rotate: calc(var(--cards-r, 0deg) * -1.3); }
  .cards-pick:hover .cards-card::before { opacity: 1; }
  .cards-pick:hover .cards-glassine { opacity: .12; translate: 0 4%; }
}
/* The touch hint lives on the first sheet, and shows only on a phone held by a finger (below). */
.cards-note--first { display: none; }

/* The specimen label: a typed slip with a double rule, the name set like a species name. */
.cards-label {
  position: relative; margin: 14px 3% 0; padding: 10px 12px 9px;
  background: #fcf9f1; border: 1px solid #6b4e3a47;
  box-shadow: inset 0 0 0 3px #fcf9f1, inset 0 0 0 4px #6b4e3a2e, 0 1px 1px #4a2f1a24;
}
.j-page--cards .cards-name { margin: 0 0 4px; font: italic 500 19px/1.2 var(--j-text); color: var(--j-ink); }
.j-page--cards .cards-name [lang="ja"] { font-size: 18px; font-weight: 500; }
.j-page--cards .cards-name-en { margin: -1px 0 5px; font: italic 400 16px/1.25 var(--j-text); color: var(--j-ink-soft); }
.cards-label dl { margin: 0; }
.cards-label dl > div { font: 400 16px/1.38 var(--j-text); color: var(--j-ink-soft); }
.cards-label dt { display: inline; font: 400 16px/1.38 var(--j-sc); letter-spacing: .04em; color: var(--j-ink-faint); }
.cards-label dd { display: inline; margin: 0; }
.cards-set-en { display: block; font-style: italic; color: var(--j-ink-soft); }
/* A small kana never starts a line. */
.cards-label [lang="ja"] { line-break: strict; }
.j-page--cards .cards-rarity { margin-top: 5px; padding-top: 5px; border-top: 1px dotted #6b4e3a66; font: italic 400 16px/1.35 var(--j-text); color: var(--j-ink-soft); }

/* Nothing matches, the prints on their way, and a catalogue that would not come. */
.cards-empty { max-width: 30em; padding: 8px 0; }
.cards-state-title { font: 400 32px/1.15 var(--j-display); color: var(--j-ink); margin: 0 0 10px; text-wrap: balance; }
.j-page--cards .cards-empty p, .j-page--cards .cards-state p { font-size: 18px; color: var(--j-ink-soft); margin-bottom: 18px; }
.cards-state { position: relative; min-height: 180px; margin: 60px 0 20px; padding: 22px 0 0 118px; }
.cards-state-leaf { left: 18px; top: 0; width: 70px; transform: rotate(-10deg); }
.cards-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;
}
.cards-button:hover { background: #fffaf0; border-color: #9c826caa; }

/* The end of the drawer: the other edition on the left (so changing is never a long scroll back to the stamps),
   where the prints come from on the right. */
.cards-coda { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); column-gap: 48px; align-items: start; margin-top: 88px; }
.j-page--cards .cards-other { max-width: 36em; margin: 18px 0 0; font: italic 400 18px/1.5 var(--j-text); color: var(--j-ink-soft); outline: none; }
.cards-other .cards-text-button { font-style: normal; }

/* Where the prints come from: a scrap of paper taped into the back of the drawer. */
.cards-sources { padding: 28px 32px 18px; }
.j-page--cards .cards-sources p { margin: 0 0 12px; font: 400 17px/1.6 var(--j-text); color: var(--j-ink-soft); max-width: 36em; }
.j-page--cards .cards-sources .cards-sources-title { margin: 18px 0 0; }
.cards-source-list { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 10px; padding: 0; list-style: none; }
/* A long source name wraps like words, with its arrow kept on its last line; the padding keeps the tap area tall. */
.cards-source-list li { padding: 10px 0; line-height: 1.5; }
#archive-dialog .cards-source-list .source-link { display: inline; min-height: 0; padding: 12px 0; margin: -12px 0; }
.j-page--cards .cards-sources .cards-rights { margin: 6px 0 0; font-style: italic; font-size: 16px; }
.cards-foot-maple { left: -190px; top: 170px; width: 140px; transform: rotate(-18deg); }

/* ---------- a single card ---------- */
/* Wide pages: the tray on the left (it stays in view while the record scrolls), the way back, the head and the record on the right. */
.cards-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;
}
.cards-detail-nav { grid-area: nav; }
.cards-detail > .j-head { grid-area: head; padding: 26px 0 4px; }
.cards-detail > .cards-tray { grid-area: tray; position: sticky; top: 84px; }
.cards-record { grid-area: record; min-width: 0; }
.cards-detail-nav--alone { padding-top: 92px; }
.cards-detail-nav--alone + .j-head--plain { padding-top: 28px; }
.cards-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;
}
.cards-back:hover { background: #fffaf0; }
#archive-dialog .cards-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 .cards-detail .j-title { font-size: 58px; max-width: none; }
#archive-dialog .cards-detail--ja .j-title { font-size: 52px; }
.cards-detail .j-inwhich { font-size: 26px; }
.cards-detail .j-deck { font-size: 20px; }

.cards-record .j-label { max-width: none; margin: 26px 0 36px; }
.cards-record .j-label dd { overflow-wrap: anywhere; }
.cards-record .j-label dd .cards-set-en { font: italic 400 16px/1.35 var(--j-text); margin-top: 2px; }
.cards-detail--ja .cards-record .j-label dl > div:first-child::before { align-self: start; margin: 14px 0 0; }
.cards-sub { font: 400 30px/1.1 var(--j-display); color: var(--j-ink); margin: 0 0 14px; text-wrap: balance; }
.cards-notice ul { list-style: none; margin: 0; padding: 0; }
.cards-notice li { position: relative; margin: 0 0 12px; padding-left: 28px; font-size: 18px; line-height: 1.6; max-width: 30em; }
.cards-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; }
.cards-flavour { margin: 28px 0 0; padding: 2px 0 2px 22px; border-left: 1.5px solid #6b4e3a66; }
.j-page--cards .cards-flavour p { font: italic 400 19px/1.6 var(--j-text); color: var(--j-ink-soft); max-width: 30em; }
.cards-record .j-source-line { margin-top: 18px !important; }
.cards-record .cards-scan { margin-top: 0 !important; }
.cards-print-notes { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--j-rule); }
.cards-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);
}
.cards-print-notes summary::-webkit-details-marker { display: none; }
.cards-print-notes summary::after { content: '+'; font: 400 22px/1 var(--j-text); color: var(--j-place-ink); }
.cards-print-notes[open] summary::after { content: '\2212'; }
.j-page--cards .cards-print-notes p, .cards-print-notes li { font-size: 16.5px; line-height: 1.6; color: var(--j-ink-soft); }
.j-page--cards .cards-print-notes p { margin: 0 0 10px; }
.cards-print-notes ul { margin: 0 0 12px; padding-left: 20px; }
.cards-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 2px 0 10px; }

/* What the card can do, as printed: a name, a dotted leader and the printed number. */
.cards-moves { margin-top: 68px; padding-top: 24px; border-top: 1px solid var(--j-rule); }
.cards-move-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 52px; }
.cards-move { min-width: 0; }
.cards-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); }
.cards-move-name { min-width: 0; }
.cards-move-en { display: block; margin-top: 4px; font: italic 400 18px/1.25 var(--j-text); color: var(--j-ink-soft); }
.cards-move-leader { flex: 1 1 auto; min-width: 18px; border-bottom: 1.5px dotted #6b4e3a88; translate: 0 -.3em; }
.cards-move-amount { flex: none; font: 500 22px/1 var(--j-text); color: var(--j-place-ink); font-variant-numeric: lining-nums; }
.j-page--cards .cards-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 .cards-move p:not(.cards-move-note) { font-size: 17.5px; line-height: 1.6; color: var(--j-ink-soft); max-width: 32em; }
#archive-dialog .cards-detail-note { margin-top: 48px; }

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

/* The tray: a page of the journal's green cloth, the paper grain faintly through it, held by four kraft corners
   (js/journal-cards.js adds them). Its controls read as one typed line beneath, in ink on the paper. */
#archive-dialog .cards-tray { min-width: 0; padding: 10px; border: 0; border-radius: 0; background: none; color: var(--j-ink); overflow: visible; }
#archive-dialog .cards-tray .card-turntable {
  height: 520px; min-height: 0; border-radius: 2px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, #ffffff12, #ffffff00 70%),
    var(--j-paper-tile) 0 0 / 512px auto,
    radial-gradient(120% 90% at 30% 10%, #2f5440, var(--j-cloth) 60%, #142a1f);
  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 .cards-tray .card-turntable > .j-corner { z-index: 3; width: 24px; height: 24px; }
#archive-dialog .cards-tray .j-corner--tl { left: -6px; top: -6px; }
#archive-dialog .cards-tray .j-corner--tr { right: -6px; top: -6px; }
#archive-dialog .cards-tray .j-corner--br { right: -6px; bottom: -6px; }
#archive-dialog .cards-tray .j-corner--bl { left: -6px; bottom: -6px; }
#archive-dialog .cards-tray .card-turntable:focus-visible { outline: 2px solid var(--j-hand); outline-offset: 12px; border-radius: 4px; }
#archive-dialog .cards-tray .inspection-hint { margin: 20px 4px 6px !important; text-wrap: balance; color: var(--j-ink-soft) !important; font: italic 400 16px/1.45 var(--j-text) !important; }
#archive-dialog .cards-tray .inspection-finish { color: var(--j-ink); margin: 6px 0; }
#archive-dialog .cards-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 .cards-tray .inspection-finish-value { font: 400 17px/1.4 var(--j-text); color: var(--j-ink); }
#archive-dialog .cards-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 .cards-tray .inspection-finish-about { color: var(--j-ink-soft); margin: 0 0 4px; }
#archive-dialog .cards-tray .inspection-finish-about summary { font: 500 16px/1.3 var(--j-sc); letter-spacing: .06em; color: var(--j-ink-soft); }
#archive-dialog .cards-tray .inspection-finish-about summary::after { color: var(--j-place-ink); }
#archive-dialog .cards-tray .inspection-finish-about summary:hover { color: var(--j-ink); }
#archive-dialog .cards-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 .cards-tray .inspection-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; padding: 2px 0 8px; }
#archive-dialog .cards-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 .cards-tray .inspection-controls button[data-inspect="reset"], #archive-dialog .cards-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 .cards-tray .inspection-controls button:hover { background-color: transparent; text-decoration-color: currentColor; }
#archive-dialog .cards-tray .inspection-controls button:disabled { opacity: .45; text-decoration-color: transparent; }
#archive-dialog .cards-tray .cards-zoom { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#archive-dialog .cards-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 .cards-tray .inspection-status { min-height: 0; color: var(--j-ink-soft) !important; font: italic 400 16px/1.4 var(--j-text) !important; }
#archive-dialog .cards-tray .card-viewer-fallback { display: block; width: auto; max-width: 100%; max-height: 520px; margin: auto; border-radius: 12px; }
.cards-no-scan { display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 360px; padding: 24px; border: 1.5px dashed #6b4e3a66; text-align: center; color: var(--j-ink-soft); font: italic 400 18px/1.5 var(--j-text); }

/* Four columns only when the page is really wide: below that a label is too narrow for a Japanese set name. */
@container journal (max-width: 999px) {
  .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- tablet portrait ---------- */
@container journal (max-width: 879px) {
  .j-vignette--cards img { object-position: 56% 64%; transform: scale(1.3); transform-origin: 58% 64%; }
  .j-head--cards > .j-stamp { right: -6px; top: 262px; }
  .cards-opener { column-gap: 28px; }
  .cards-edition { width: 104px; height: 104px; }
  .cards-edition-code { font-size: 34px; }
  .cards-note--editions { display: none; }
  .cards-index { margin-top: 52px; }
  .cards-index-card { margin-left: 96px; }
  .cards-index-fern { left: 4px; width: 76px; }
  .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 24px; }
  .cards-coda { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
  .cards-sources { margin-top: 44px; }
  .cards-foot-maple { left: auto; right: -30px; top: -70px; width: 96px; transform: rotate(24deg); }

  .cards-detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "head" "tray" "record"; grid-template-rows: none; padding-top: 88px; }
  .cards-detail > .j-head { padding: 24px 0 28px; }
  .cards-detail > .cards-tray { position: relative; top: auto; }
  #archive-dialog .cards-detail .j-title { font-size: 54px; }
  #archive-dialog .cards-detail--ja .j-title { font-size: 48px; }
  #archive-dialog .cards-tray { max-width: 540px; width: 100%; justify-self: center; }
  .cards-record .j-label { margin-top: 38px; }
  .cards-move-list { gap: 26px 36px; }
}

/* Narrow pages: the stamps sit above the drawer sentence. */
@container journal (max-width: 699px) {
  .cards-opener { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .cards-editions { grid-row: 1; }
  .cards-intro-slot { grid-row: 2; padding-top: 0; }
}

/* ---------- phones: one sheet to a row, the card beside its label, 16px and up, every target 44px ---------- */
@container journal (max-width: 599px) {
  .j-vignette--cards img { object-position: 56% 66%; transform: scale(1.46); transform-origin: 56% 66%; }
  .j-head--cards > .j-stamp { top: 190px; }
  .cards-opener { margin-top: 26px; }
  .cards-edition-row { gap: 10px; }
  .cards-edition { width: 96px; height: 96px; }
  .cards-edition-code { font-size: 31px; }
  .cards-edition-word { margin-top: 5px; }

  .cards-index { margin-top: 44px; }
  /* Each field's name sits above its line, so the whole width is left for what is written on it. */
  .cards-index-card { margin-left: 0; padding: 0 14px 4px 16px; rotate: -.4deg; background: #fcf9f1; }
  .cards-index-fern { display: none; }
  .cards-index-row { grid-template-columns: minmax(0, 1fr); padding-top: 10px; border-bottom: 1px solid #6f93bd4d; }
  .cards-index-label { font-size: 16px; }
  .cards-search, .cards-year { min-height: 44px; padding-top: 2px; }
  .cards-search, .cards-year { font-size: 19px; }
  .cards-year { min-width: 0; width: 100%; }
  .j-page--cards .cards-status { font-size: 16px; padding: 8px 0 0; }
  .cards-index-actions { gap: 0 16px; }

  .cards-grove-wrap { margin-top: 40px; }
  .cards-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* A herbarium sheet: the card in its sleeve on the left, the label lower right. */
  .cards-sheet { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); column-gap: 16px; align-items: end; padding-top: 0; }
  .cards-sleeve { margin: 0 4px 0 2px; }
  .cards-glassine { -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%); }
  .cards-jumbo { right: -8px; padding: 3px 6px 2px; letter-spacing: .12em; }
  .cards-label { margin: 0; padding: 8px 9px 7px; }
  .j-page--cards .cards-name { font-size: 18px; }
  .j-page--cards .cards-name [lang="ja"] { font-size: 17px; }

  /* Touch: the hint sits on the first sheet, above its label, and points down at the card. */
  @media (hover: none) {
    .cards-sheet--first { padding-top: 50px; }
    .cards-note--first { display: block; left: 50%; right: auto; top: -4px; font-size: 20px; line-height: 1.05; --j-note-r: -3deg; }
    .cards-note--first .j-arrow { left: -50px; top: 16px; width: 46px; height: 44px; }
  }
  .cards-state { padding-left: 90px; }
  .cards-state-leaf { left: 6px; width: 58px; }
  .cards-state-title { font-size: 28px; }
  .cards-coda { margin-top: 60px; }
  .cards-sources { margin-top: 40px; padding: 22px 18px 12px; }
  .cards-foot-maple { right: -12px; top: -56px; width: 70px; }

  .cards-detail { padding-top: 76px; }
  .cards-detail > .j-head { padding: 20px 0 24px; }
  #archive-dialog .cards-detail .j-title { font-size: 42px; }
  #archive-dialog .cards-detail--ja .j-title { font-size: 38px; }
  .cards-detail .j-inwhich { font-size: 22px; }
  .cards-detail .j-deck { font-size: 18px; }
  #archive-dialog .cards-tray { padding: 8px 0; }
  #archive-dialog .cards-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. */
  .cards-record .j-label dl > div { grid-template-columns: minmax(0, 1fr); padding: 8px 0 2px; }
  .cards-record .j-label dl > div::before { display: none; }
  .cards-record .j-label dd { grid-column: 1; grid-row: 2; text-align: left; margin-top: 1px; }
  .cards-sub { font-size: 28px; }
  .cards-move-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cards-move h4 { font-size: 24px; }
  .cards-leaf { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #archive-dialog .cards-leaf .cards-leaf-next { justify-items: start; text-align: left; }
}
@container journal (max-width: 380px) {
  .cards-sheet { column-gap: 12px; }
  .cards-label { padding-inline: 7px; }
  #archive-dialog .cards-tray .card-turntable { height: 340px; }
}
/* A short landscape phone: the tray fits the reading window. */
/* A short landscape phone: the card beside its record again, the tray sized to the reading window. */
@media (max-height: 500px) and (orientation: landscape) {
  .cards-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tray nav" "tray head" "tray record"; grid-template-rows: auto auto 1fr; column-gap: 28px; padding-top: 66px; }
  .cards-detail > .j-head { padding: 16px 0 4px; }
  .cards-detail > .cards-tray { position: sticky; top: 58px; }
  #archive-dialog .cards-tray { max-width: none; padding: 6px 0; }
  #archive-dialog .cards-detail .j-title { font-size: 40px; }
  #archive-dialog .cards-detail--ja .j-title { font-size: 36px; }
  .cards-detail .j-inwhich { font-size: 22px; }
  .cards-detail .j-deck { font-size: 18px; }
  #archive-dialog .cards-tray .card-turntable { height: calc(100dvh - 118px); }
  #archive-dialog .cards-tray .inspection-hint { margin-top: 12px !important; }
}

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