/* DEEPMINE UI v4 — reading pages: 帮助 (help), 鸣谢 (credits), 流水 (ledger), 图鉴 (archive).
   Markup: management-panels.mjs renderGuidePanel / renderCreditsPanel / renderLedgerPanel +
   renderLedgerEntries / renderArchivePanel. Every rule is scoped to its #sheet[data-mode].
   Section heads, empty states, chips and buttons are the shared components; this file only lays
   them out (consistency spec §7 in docs/ui-v4-design-system.md). */
@layer pages {
  /* ═════════════ Shared: hero copy width, link rows, signature ═════════════ */
  #sheet:is([data-mode="help"], [data-mode="credits"], [data-mode="ledger"], [data-mode="archive"]) .panel-hero { min-height: 112px; }
  #sheet:is([data-mode="help"], [data-mode="credits"], [data-mode="ledger"], [data-mode="archive"]) .panel-hero p { text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; }
  #sheet:is([data-mode="help"], [data-mode="credits"], [data-mode="ledger"], [data-mode="archive"]) .panel-eyebrow { text-wrap: balance; }
  @media (max-width: 359px) {
    #sheet:is([data-mode="help"], [data-mode="credits"], [data-mode="ledger"], [data-mode="archive"]) .panel-eyebrow { letter-spacing: .1em; }
  }
  #sheet[data-mode="archive"] .link-row { transition: background var(--dur-2); }
  #sheet[data-mode="archive"] .link-row:active { background: rgb(255 255 255 / .04); }
  #sheet[data-mode="archive"] .link-row .list-trail .icon { width: 18px; height: 18px; color: var(--gold-300); transition: transform var(--dur-2) var(--ease-out); }
  #sheet[data-mode="archive"] .link-row:active .list-trail .icon { transform: translateX(3px); }
  @media (hover: hover) and (pointer: fine) {
    #sheet[data-mode="archive"] .link-row:hover { background: rgb(255 255 255 / .03); }
  }
  #sheet[data-mode="credits"] .credits-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font: 700 11px/1.2 var(--font-display);
    letter-spacing: .14em;
    color: var(--text-3);
  }
  #sheet[data-mode="credits"] .credits-signature .gi { width: 20px; height: 20px; opacity: .7; filter: saturate(.6); }

  /* ═════════════ 帮助 · field guide ═════════════ */
  #sheet[data-mode="help"] .guide-intro { --hero-art: url(/art/premium/forest.jpg); }
  #sheet[data-mode="help"] .guide-head small { font-family: var(--font-display); letter-spacing: .12em; white-space: nowrap; }

  #sheet[data-mode="help"] .guide-steps { display: grid; gap: 10px; counter-reset: none; }
  #sheet[data-mode="help"] .guide-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 12px 14px 12px 12px;
    border-radius: var(--r-lg);
    background: var(--grad-panel), var(--surface-1);
    border: 1px solid var(--line-1);
    box-shadow: var(--hl-top), var(--sh-1);
  }
  /* the expedition trail linking each medallion to the next */
  #sheet[data-mode="help"] .guide-step:not(:last-child)::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 39px;
    top: calc(50% + 30px);
    height: calc(50% - 20px);
    border-left: 2px dashed rgb(245 200 105 / .45);
  }
  #sheet[data-mode="help"] .guide-step:not(:first-child)::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 39px;
    bottom: calc(50% + 30px);
    height: calc(50% - 20px);
    border-left: 2px dashed rgb(245 200 105 / .45);
  }
  #sheet[data-mode="help"] .guide-step-icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #346f55, #173a2c 78%);
    border: 2px solid var(--line-gold);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 0 0 4px rgb(245 200 105 / .06), 0 6px 12px -6px rgb(0 0 0 / .8);
  }
  #sheet[data-mode="help"] .guide-step-icon .gi { width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .5)); }
  #sheet[data-mode="help"] .guide-step-icon small {
    position: absolute;
    top: -6px;
    left: -6px;
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 22px;
    padding: 1px 5px 0;
    border-radius: var(--r-pill);
    background: var(--grad-gold);
    border: 1px solid var(--gold-rim);
    color: var(--text-on-gold);
    font: 800 11px/1 var(--font-display);
    box-shadow: 0 2px 0 var(--gold-edge), 0 0 0 2px var(--surface-1);
  }
  #sheet[data-mode="help"] .guide-step-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
  #sheet[data-mode="help"] .guide-step-copy h3 { font-size: var(--fs-card-title); font-weight: 800; color: var(--text-1); }
  #sheet[data-mode="help"] .guide-step-copy p { font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }

  /* Economy card */
  #sheet[data-mode="help"] .guide-rules { display: grid; gap: 12px; margin-top: 20px; padding: 16px 14px 14px; }
  #sheet[data-mode="help"] .guide-rules-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
  #sheet[data-mode="help"] .guide-rules-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--grad-jade-plate);
    border: 1px solid var(--line-gold);
    box-shadow: var(--hl-top);
  }
  #sheet[data-mode="help"] .guide-rules-icon .gi { width: 28px; height: 28px; }
  #sheet[data-mode="help"] .guide-rules-head h3 { min-width: 0; font-size: var(--fs-card-title); font-weight: 800; }
  #sheet[data-mode="help"] .guide-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #sheet[data-mode="help"] .guide-fact {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px 11px;
    border-radius: var(--r-md);
    background: var(--surface-inset);
    border: 1px solid var(--line-1);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .35);
  }
  #sheet[data-mode="help"] .guide-fact dt { font-size: var(--fs-11); font-weight: 700; line-height: 1.35; color: var(--text-3); text-wrap: pretty; overflow-wrap: break-word; }
  #sheet[data-mode="help"] .guide-fact dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; margin: 0; min-width: 0; }
  /* Figures never split across lines (spec §7.8); the unit wraps below instead. */
  #sheet[data-mode="help"] .guide-fact dd b { font: 800 22px/1.1 var(--font-display); color: var(--gold-100); letter-spacing: .2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  #sheet[data-mode="help"] .guide-fact dd small { min-width: 0; font-size: var(--fs-12); font-weight: 700; color: var(--text-3); overflow-wrap: break-word; }
  #sheet[data-mode="help"] .guide-rules-copy { font-size: var(--fs-13); line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
  #sheet[data-mode="help"] .guide-rules-copy b { font-family: var(--font-display); color: var(--gold-100); font-weight: 700; white-space: nowrap; }
  #sheet[data-mode="help"] .guide-rules-note { align-items: center; }
  #sheet[data-mode="help"] .guide-rules-link { justify-content: flex-start; gap: 10px; padding-inline: 12px; color: var(--text-1); }
  #sheet[data-mode="help"] .guide-rules-link > span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
  #sheet[data-mode="help"] .guide-rules-link .icon { color: var(--gold-300); }
  #sheet[data-mode="help"] .guide-return { margin-top: 20px; }
  /* Progressive unlocks (§3.7): the coming unlock with its meter, and "更多玩法会随进度解锁" while anything is locked. */
  #sheet[data-mode="help"] :is(.guide-next, .guide-more) { margin-top: 12px; }
  #sheet[data-mode="help"] .guide-next-copy { flex: 1; min-width: 0; display: grid; gap: 4px; }
  #sheet[data-mode="help"] .guide-next-copy strong { font-size: var(--fs-14); font-weight: 800; line-height: 1.35; color: var(--text-1); overflow-wrap: break-word; }
  #sheet[data-mode="help"] .guide-next-copy small { font-size: var(--fs-12); line-height: 1.45; color: var(--text-2); overflow-wrap: break-word; }
  #sheet[data-mode="help"] .guide-next-meter { display: flex; align-items: center; gap: 8px; min-width: 0; }
  #sheet[data-mode="help"] .guide-next-meter .meter { flex: 1 1 auto; min-width: 0; }
  #sheet[data-mode="help"] .guide-next-meter b { flex: none; font: 800 13px/1 var(--font-display); color: var(--text-1); white-space: nowrap; }
  #sheet[data-mode="help"] .guide-next-meter b small { font-size: 11px; color: var(--text-3); }

  /* ═════════════ 鸣谢 · credits ═════════════ */
  #sheet[data-mode="credits"] .credits-intro { --hero-art: url(/art/premium/workshop.jpg); }
  /* longer (translated) copy must not run under the seed medallion */
  #sheet[data-mode="credits"] .credits-intro .panel-hero-copy { max-width: 66%; }
  #sheet[data-mode="credits"] .credits-intro .panel-hero-art { height: 74%; max-width: 30%; }
  #sheet[data-mode="credits"] .credit-item + .credit-item { border-top: 1px solid var(--line-1); }
  #sheet[data-mode="credits"] .credit-item > summary { min-height: 66px; gap: 12px; padding-right: 18px; align-items: center; }
  #sheet[data-mode="credits"] .credit-item > summary:active { background: rgb(255 255 255 / .035); }
  #sheet[data-mode="credits"] .credit-item .list-icon { width: 42px; height: 42px; border-radius: var(--r-md); }
  #sheet[data-mode="credits"] .credit-item .list-icon .gi { width: 30px; height: 30px; }
  #sheet[data-mode="credits"] .credit-item[open] .list-icon { border-color: var(--line-gold); box-shadow: var(--hl-top), 0 0 12px -4px rgb(245 200 105 / .5); }
  #sheet[data-mode="credits"] .credit-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
  #sheet[data-mode="credits"] .credit-tags .chip { min-height: 20px; font-family: var(--font-display); letter-spacing: .02em; }
  #sheet[data-mode="credits"] .credit-body {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 0 16px 14px 68px;
  }
  #sheet[data-mode="credits"] .credit-body p { font-size: var(--fs-13); line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
  /* .btn.btn--ghost.btn--sm as-is (40px plate, 44px hit area); only the label colour and width cap. */
  #sheet[data-mode="credits"] .credit-link { color: var(--gold-100); max-width: 100%; }
  #sheet[data-mode="credits"] .credit-link .icon { width: 15px; height: 15px; }

  /* ═════════════ 流水 · ledger ═════════════ */
  #sheet[data-mode="ledger"] .ledger-intro { --hero-art: url(/art/premium/workshop.jpg); }
  #sheet[data-mode="ledger"] .ledger-intro .panel-hero-copy { max-width: 68%; }
  #sheet[data-mode="ledger"] .ledger-intro .panel-hero-art { height: 72%; max-width: 30%; opacity: .95; }
  #sheet[data-mode="ledger"] .ledger-balance {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    min-width: 0;
    max-width: 100%;
  }
  #sheet[data-mode="ledger"] .ledger-balance .currency-icon { width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
  /* The balance never breaks mid-number: long values step the size down instead (spec §7.8). */
  #sheet[data-mode="ledger"] .ledger-balance b {
    min-width: 0;
    font: 800 28px/1.05 var(--font-display);
    color: var(--gold-100);
    letter-spacing: .2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 10px rgb(0 0 0 / .6), 0 0 18px rgb(245 200 105 / .25);
  }
  #sheet[data-mode="ledger"] .ledger-balance.is-long b { font-size: 22px; }
  #sheet[data-mode="ledger"] .ledger-balance.is-xlong b { font-size: 17px; }
  #sheet[data-mode="ledger"] .ledger-balance small { font: 700 13px/1 var(--font-display); color: var(--text-3); letter-spacing: .08em; }
  #sheet[data-mode="ledger"] .ledger-hero-actions { margin-top: 6px; }

  #sheet[data-mode="ledger"] .ledger-day + .ledger-day { margin-top: 14px; }
  #sheet[data-mode="ledger"] .ledger-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 4px 6px;
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--text-2);
  }
  #sheet[data-mode="ledger"] .ledger-day-head small { flex: none; font: 600 11px/1 var(--font-display); color: var(--text-3); }
  #sheet[data-mode="ledger"] .ledger-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; }
  #sheet[data-mode="ledger"] .ledger-row + .ledger-row { border-top: 1px solid var(--line-1); }
  #sheet[data-mode="ledger"] .ledger-symbol {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: var(--grad-jade-plate);
    border: 1px solid var(--line-2);
    box-shadow: var(--hl-top);
  }
  /* up to 30 rows: no per-glyph drop-shadow (spec §7.11) */
  #sheet[data-mode="ledger"] .ledger-symbol .gi { width: 28px; height: 28px; }
  #sheet[data-mode="ledger"] .ledger-dir {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 2px solid var(--surface-1);
  }
  #sheet[data-mode="ledger"] .ledger-dir .icon { width: 11px; height: 11px; stroke-width: 3; }
  #sheet[data-mode="ledger"] .is-income .ledger-dir { background: var(--jade-400); color: #06231a; }
  #sheet[data-mode="ledger"] .is-expense .ledger-dir { background: #e9a066; color: #3a1d08; }
  #sheet[data-mode="ledger"] .ledger-copy { flex: 1; min-width: 0; display: grid; gap: 1px; }
  #sheet[data-mode="ledger"] .ledger-copy strong { font-size: var(--fs-14); font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #sheet[data-mode="ledger"] .ledger-copy small { font: 600 12px/1.3 var(--font-display); color: var(--text-3); letter-spacing: .02em; }
  /* Amount: the figure stays on one line; long figures step down (.is-long / .is-xlong set by the
     renderer from the string length) and the DMT unit wraps beneath when the row is tight. */
  #sheet[data-mode="ledger"] .ledger-amount {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 72%;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0 4px;
    text-align: right;
    font: 800 17px/1.2 var(--font-display);
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
  }
  #sheet[data-mode="ledger"] .ledger-amount > span { white-space: nowrap; }
  #sheet[data-mode="ledger"] .ledger-amount:is(.is-long, .is-xlong) { flex-direction: column; align-items: flex-end; gap: 2px; font-size: 15px; }
  #sheet[data-mode="ledger"] .ledger-amount.is-xlong { font-size: 13px; }
  #sheet[data-mode="ledger"] .ledger-amount small { font: 700 11px/1 var(--font-display); color: var(--text-3); letter-spacing: .06em; }
  #sheet[data-mode="ledger"] .is-income .ledger-amount { color: var(--jade-300); text-shadow: 0 0 12px rgb(80 200 140 / .25); }
  #sheet[data-mode="ledger"] .is-expense .ledger-amount { color: #f3cfa8; }
  #sheet[data-mode="ledger"] .is-neutral .ledger-amount { color: var(--text-3); }
  #sheet[data-mode="ledger"] .is-neutral .ledger-symbol { filter: saturate(.6); }

  /* Loading: skeleton rows (static layout; only the sheen moves, a few passes, never forever). */
  #sheet[data-mode="ledger"] #ledger-rows.ledger-loading {
    --sk: rgb(206 228 196 / .07);
    position: relative;
    overflow: hidden;
    min-height: 214px;
    padding: 14px;
    border-radius: var(--r-lg);
    background: var(--grad-panel), var(--surface-1);
    border: 1px solid var(--line-1);
    box-shadow: var(--hl-top), var(--sh-1);
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--text-3);
  }
  #sheet[data-mode="ledger"] .ledger-loading-text { display: flex; align-items: center; gap: 8px; }
  #sheet[data-mode="ledger"] .ledger-loading-text::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgb(245 200 105 / .25);
    border-top-color: var(--gold-300);
    animation: dm-spin .9s linear 8;
  }
  #sheet[data-mode="ledger"] #ledger-rows.ledger-loading:has(.ledger-loading-text)::before {
    content: '';
    position: absolute;
    inset: 46px 14px 14px;
    background:
      linear-gradient(var(--sk) 0 0) 0 0 / 42px 42px no-repeat,
      linear-gradient(var(--sk) 0 0) 56px 6px / 38% 13px no-repeat,
      linear-gradient(var(--sk) 0 0) 56px 27px / 18% 10px no-repeat,
      linear-gradient(var(--sk) 0 0) right 0 top 12px / 22% 16px no-repeat,
      linear-gradient(var(--sk) 0 0) 0 54px / 42px 42px no-repeat,
      linear-gradient(var(--sk) 0 0) 56px 60px / 30% 13px no-repeat,
      linear-gradient(var(--sk) 0 0) 56px 81px / 16% 10px no-repeat,
      linear-gradient(var(--sk) 0 0) right 0 top 66px / 18% 16px no-repeat,
      linear-gradient(var(--sk) 0 0) 0 108px / 42px 42px no-repeat,
      linear-gradient(var(--sk) 0 0) 56px 114px / 42% 13px no-repeat,
      linear-gradient(var(--sk) 0 0) 56px 135px / 20% 10px no-repeat,
      linear-gradient(var(--sk) 0 0) right 0 top 120px / 24% 16px no-repeat;
  }
  #sheet[data-mode="ledger"] #ledger-rows.ledger-loading:has(.ledger-loading-text)::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .05), transparent);
    transform: translateX(-100%);
    animation: ledger-sheen 1.4s var(--ease-in-out) 4;
    pointer-events: none;
  }
  @keyframes ledger-sheen { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
  html.low-quality #sheet[data-mode="ledger"] .ledger-loading-text::before,
  html.low-quality #sheet[data-mode="ledger"] #ledger-rows.ledger-loading::after { animation: none; }
  /* Error: mobile.mjs replaces the content with plain text and keeps .ledger-loading. */
  #sheet[data-mode="ledger"] #ledger-rows.ledger-loading:not(:has(*)) {
    min-height: 0;
    padding: 14px 14px 14px 44px;
    border-radius: var(--r-md);
    background: var(--warn-bg);
    border-color: rgb(255 196 92 / .3);
    box-shadow: none;
    color: #f2ddb1;
    font-size: var(--fs-13);
    line-height: 1.55;
  }
  #sheet[data-mode="ledger"] #ledger-rows.ledger-loading:not(:has(*))::before {
    content: '!';
    position: absolute;
    left: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--warn);
    color: var(--text-on-gold);
    font: 800 13px/1 var(--font-display);
  }
  /* Empty: the shared .empty-state as-is; painted art (when shipped) fills the medallion. */
  #sheet[data-mode="ledger"] .ledger-empty .empty-icon .ledger-empty-art { width: 112%; height: 112%; }

  /* ═════════════ 图鉴 · archive ═════════════ */
  #sheet[data-mode="archive"] .archive-intro .panel-hero-copy { max-width: 74%; gap: 5px; }
  #sheet[data-mode="archive"] .archive-intro .panel-hero-art { height: 70%; max-width: 30%; }
  #sheet[data-mode="archive"] .archive-progress { display: grid; gap: 6px; margin-top: 4px; }
  #sheet[data-mode="archive"] .archive-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
  #sheet[data-mode="archive"] .archive-count b { font: 800 30px/1 var(--font-display); color: var(--gold-100); white-space: nowrap; text-shadow: 0 2px 10px rgb(0 0 0 / .6); }
  #sheet[data-mode="archive"] .archive-count span { min-width: 0; font-size: var(--fs-13); font-weight: 700; color: var(--text-2); }
  #sheet[data-mode="archive"] .archive-progress .meter { max-width: 220px; }

  /* Stratum heads: the shared .section-head (gold bar), with the stratum swatch as its glyph. */
  #sheet[data-mode="archive"] .collection-head { align-items: center; }
  #sheet[data-mode="archive"] .collection-layer > .collection-head { margin-top: 20px; }
  #sheet[data-mode="archive"] .collection-head h3 { min-width: 0; }
  #sheet[data-mode="archive"] .collection-stratum {
    flex: none;
    width: 22px;
    height: 22px;
    margin: -4px 0;
    border-radius: var(--r-xs);
    border: 1px solid var(--line-gold);
    box-shadow: 0 0 0 2px rgb(0 0 0 / .25), 0 0 8px -2px rgb(245 200 105 / .45);
    object-fit: cover;
  }
  /* Deeper strata have no painted plate yet: a swatch from the explore stratum palette (.stratum-* in explore.css). */
  #sheet[data-mode="archive"] .collection-stratum.is-swatch {
    display: inline-block;
    background: radial-gradient(80% 80% at 30% 25%, var(--stratum-glow), transparent 55%), linear-gradient(160deg, var(--stratum), var(--stratum-2));
  }
  #sheet[data-mode="archive"] .collection-tally {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font: 700 12px/1 var(--font-display);
    color: var(--text-3);
    white-space: nowrap;
  }
  #sheet[data-mode="archive"] .collection-tally .icon { width: 13px; height: 13px; }
  #sheet[data-mode="archive"] .collection-tally.is-complete { color: var(--jade-300); }

  #sheet[data-mode="archive"] .collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  #sheet[data-mode="archive"] .collection-item {
    position: relative;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 3px;
    padding: 0;
    text-align: center;
    color: var(--text-1);
  }
  #sheet[data-mode="archive"] .collection-frame { width: 100%; transition: transform var(--dur-1) var(--ease-out); }
  #sheet[data-mode="archive"] .collection-item:active .collection-frame { transform: scale(.94); }
  #sheet[data-mode="archive"] .collection-item:focus-visible { outline: none; }
  #sheet[data-mode="archive"] .collection-item:focus-visible .collection-frame { outline: 2px solid var(--gold-200); outline-offset: 2px; }
  #sheet[data-mode="archive"] .collection-frame img { width: 70%; height: 70%; }
  #sheet[data-mode="archive"] .collection-item strong {
    min-width: 0;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-13);
    font-weight: 700;
    line-height: 1.25;
  }
  /* Latin/Cyrillic keepsake names ("Carte minière dessinée à la main") take two lines before the ellipsis, one size
     down so single long words ("Нарисованная") fit; both lines are reserved so tallies and meters stay level. */
  :root:not(:lang(zh)) #sheet[data-mode="archive"] .collection-item strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.5em;
    font-size: var(--fs-12);
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: balance;
  }
  #sheet[data-mode="archive"] .collection-state { font: 600 11px/1.25 var(--font-display); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #sheet[data-mode="archive"] .is-owned .collection-state { color: var(--jade-300); font-family: var(--font-ui); font-weight: 700; }
  #sheet[data-mode="archive"] .unfound .collection-state b { color: var(--text-2); }
  /* owned: rarity halo + a check seal */
  #sheet[data-mode="archive"] .is-owned .collection-frame {
    border-color: color-mix(in srgb, var(--rarity) 70%, transparent);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .1),
      inset 0 -16px 20px -14px color-mix(in srgb, var(--rarity) 85%, transparent),
      0 0 14px -6px color-mix(in srgb, var(--rarity) 80%, transparent),
      var(--sh-1);
  }
  /* repeated per tile: the seal sits on a dark disc instead of a per-glyph drop-shadow (spec §7.11) */
  #sheet[data-mode="archive"] .collection-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(6 19 14 / .55);
  }
  #sheet[data-mode="archive"] .collection-badge .gi { width: 20px; height: 20px; }
  @media (hover: hover) and (pointer: fine) {
    #sheet[data-mode="archive"] .collection-item:hover:not(:active) .collection-frame { transform: translateY(-2px); }
  }
  /* unfound: a dark silhouette in a cold frame, locked */
  #sheet[data-mode="archive"] .unfound .collection-frame {
    background:
      radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--rarity) 12%, transparent), transparent 72%),
      linear-gradient(180deg, #0f271d, #091a13);
    border-color: color-mix(in srgb, var(--rarity) 22%, rgb(206 228 196 / .1));
    box-shadow: inset 0 2px 10px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .04);
  }
  #sheet[data-mode="archive"] .unfound .collection-frame::after { opacity: .3; box-shadow: none; }
  /* a flat black silhouette against the rarity glow (colour-matrix filter only; no per-tile blur) */
  #sheet[data-mode="archive"] .unfound .collection-frame img {
    filter: brightness(0);
    opacity: .78;
  }
  #sheet[data-mode="archive"] .collection-lock {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgb(6 19 14 / .82);
    border: 1px solid var(--line-2);
    box-shadow: 0 2px 6px rgb(0 0 0 / .5);
  }
  #sheet[data-mode="archive"] .collection-lock .gi { width: 18px; height: 18px; --gi-base: #9fb2a7; --gi-metal-shade: #6d8077; }
  #sheet[data-mode="archive"] .unfound strong { color: var(--text-2); }
  /* the next keepsake on the trail: a jade frame and a tag that ties it to the hero chip */
  #sheet[data-mode="archive"] .unfound.is-next .collection-frame {
    border-color: rgb(134 224 181 / .55);
    box-shadow: inset 0 2px 10px rgb(0 0 0 / .5), 0 0 0 1px rgb(134 224 181 / .18), 0 0 14px -4px rgb(80 200 140 / .55);
  }
  /* only the single "next" tile keeps a jade rim light */
  #sheet[data-mode="archive"] .unfound.is-next .collection-frame img { opacity: .85; filter: brightness(0) drop-shadow(0 0 1.5px rgb(134 224 181 / .7)); }
  #sheet[data-mode="archive"] .collection-next-tag {
    position: absolute;
    z-index: 1;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 12px);
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--jade-400);
    color: #06231a;
    font-size: var(--fs-11);
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgb(0 0 0 / .4);
  }
  #sheet[data-mode="archive"] .unfound.is-next .collection-meter > span { background: linear-gradient(90deg, var(--jade-500), var(--jade-300)); box-shadow: 0 0 8px rgb(80 200 140 / .45); }
  #sheet[data-mode="archive"] .unfound.is-next .collection-state b { color: var(--jade-200); }
  #sheet[data-mode="archive"] .collection-meter { height: 4px; margin: 3px 10% 0; }

  #sheet[data-mode="archive"] .collection-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 14px;
    font-size: var(--fs-12);
    color: var(--text-3);
  }
  #sheet[data-mode="archive"] .collection-hint .icon { width: 15px; height: 15px; }

  /* Narrow phones */
  @media (max-width: 359px) {
    #sheet[data-mode="help"] .guide-step { gap: 12px; padding: 10px 12px 10px 10px; }
    #sheet[data-mode="help"] .guide-step-icon { width: 50px; height: 50px; }
    #sheet[data-mode="help"] .guide-step-icon .gi { width: 32px; height: 32px; }
    #sheet[data-mode="help"] .guide-step:not(:last-child)::after,
    #sheet[data-mode="help"] .guide-step:not(:first-child)::before { left: 34px; }
    #sheet[data-mode="help"] .guide-fact { padding-inline: 10px; }
    #sheet[data-mode="help"] .guide-fact dd b { font-size: 19px; }
    #sheet[data-mode="credits"] .credit-body { padding-left: 14px; }
    #sheet[data-mode="ledger"] .ledger-row { gap: 10px; padding-inline: 12px; }
    #sheet[data-mode="ledger"] .ledger-symbol { width: 38px; height: 38px; }
    #sheet[data-mode="ledger"] .ledger-balance b { font-size: 24px; }
    #sheet[data-mode="ledger"] .ledger-balance.is-long b { font-size: 19px; }
    #sheet[data-mode="ledger"] .ledger-balance.is-xlong b { font-size: 15px; }
    #sheet[data-mode="archive"] .collection-grid { gap: 10px 8px; }
    #sheet[data-mode="archive"] .archive-count b { font-size: 26px; }
  }
}