/* Card album (src/ui/album.js): the Album tab of the Monster Codex panel, the card tooltip line and the Auction House
   tag. Cards in the album wear the theme accent (owner rule: no yellow or gold text); light frames, no blur or clipping
   over the battle canvas (this lives in the side panel). */
.album { container-type: inline-size; }

/* head: size, progress with milestone ticks, milestones */
.album-sum { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.album-n { font-size: 24px; font-weight: 900; line-height: 1; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.album-ready-pill { color: var(--good-text); border-color: var(--good-line); background: var(--good-soft); }
.album-ready-pill .album-ready-dot { margin: 0 2px 0 0; }
.album-track { position: relative; margin: var(--s-2) 0 20px; }
.album-bar { height: 12px; }
.album-tick { position: absolute; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--border-strong); opacity: 0.8; }
.album-tick.on { background: var(--surface-2); opacity: 0.9; }
.album-tick-labels { position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.album-tick-labels span { position: absolute; top: 3px; transform: translateX(-50%); font-size: var(--fs-micro); font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.album-tick-labels span.end { transform: translateX(-100%); }
.album-tick-labels span.on { color: var(--accent-text); }
.album-miles { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.album-mile { display: flex; align-items: center; gap: var(--s-2); min-height: 26px; padding: 1px 6px 1px 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: var(--fs-sm); }
.album-mile > b { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.album-mile.reached > b { color: var(--accent-text); }
.album-mile.ready { border-color: var(--accent-line); background: var(--accent-softer); }
.album-mile .ico { vertical-align: -5px; }
.album-mile-n { font-size: var(--fs-micro); font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.album-mile .btn.sm { min-height: 22px; padding: 1px 10px; }
.album-note { margin-top: var(--s-2); }
.album-check { color: var(--accent-text); font-weight: 900; }
.album-ready-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--good-soft); }
.album-chip-n { margin-left: 4px; font-weight: 700; opacity: 0.75; font-variant-numeric: tabular-nums; }

/* the book: page list | open page (one column in a narrow panel) */
.album-book { display: grid; grid-template-columns: minmax(110px, 33%) minmax(0, 1fr); gap: var(--s-2); margin-bottom: var(--s-3); align-items: start; }
.album-pages { display: flex; flex-direction: column; gap: 3px; max-height: 470px; overflow-y: auto; overscroll-behavior: contain; padding: 1px; }
.album-pg {
  display: grid; gap: 3px; padding: 5px 8px 6px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--tile-bg); color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.album-pg:hover { border-color: var(--border-strong); background-color: var(--surface-3); }
.album-pg.sel { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel) inset; }
.album-pg-name { min-width: 0; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; }
.album-pg-meta { display: flex; align-items: center; gap: 6px; }
.album-pg-n { flex: none; min-width: 24px; font-size: var(--fs-micro); font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.album-pg.done .album-pg-n { color: var(--accent-text); }
.album-pg-bar { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--surface-deep); overflow: hidden; }
.album-pg-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
.album-pg .album-ready-dot, .album-pg .album-check { margin-left: 0; line-height: 1; }
.album-page { min-width: 0; padding: var(--s-2); border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface-2); }
.album-page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin-bottom: 6px; }
.album-page-head .h4 { margin: 0; }

/* card frames: in the album (accent) / owned (Add) / missing (faded) */
.album-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 5px; }
.album-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 3px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--tile-bg); text-align: center; min-width: 0; }
.album-card.in { border-color: var(--accent); background: var(--accent-softer); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.album-card.own { border-color: var(--border-strong); }
.album-card.miss { background: var(--surface-sunken); }
.album-card.miss .ico { opacity: 0.4; filter: grayscale(1); }
.album-card.miss .album-card-name { color: var(--text-muted); }
.album-card-art { position: relative; display: grid; place-items: center; border-radius: var(--radius-sm); cursor: help; }
.album-card-art:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.album-card-mark { position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: var(--text-on-gold); background: var(--accent); }
.album-card-name { width: 100%; min-height: 2.4em; font-size: var(--fs-micro); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.album-card-gain { font-size: var(--fs-micro); font-weight: 800; line-height: 1.1; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.album-card.in .album-card-gain, .album-card.own .album-card-gain { color: var(--text); }
.album-card-tag { font-size: var(--fs-micro); font-weight: 700; color: var(--text-muted); }
.album-card-tag.in { color: var(--accent-text); }
.album-card .btn.sm { min-height: 22px; padding: 1px 7px; font-size: var(--fs-micro); }

/* page reward */
.album-reward { margin-top: var(--s-2); padding: 6px var(--s-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.album-reward.ready { border-style: solid; border-color: var(--accent-line); background: var(--accent-softer); }
.album-reward.claimed { border-style: solid; }
.album-reward-h { margin-bottom: 3px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.album-reward ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.album-reward li { line-height: 1.35; }
.album-reward-item { white-space: nowrap; }
.album-reward-item .ico { vertical-align: -5px; }
.album-claimed { font-size: var(--fs-sm); font-weight: 800; color: var(--accent-text); }

/* total bonus */
.album-bonus-list { list-style: none; margin: 0; padding: 0; }
.album-bonus-list { display: grid; grid-template-columns: minmax(52px, max-content) max-content minmax(0, 1fr); column-gap: var(--s-2); }
.album-bonus-list li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.album-bonus-list li:last-child { border-bottom: 0; }
.album-b-kind { font-weight: 700; font-size: var(--fs-sm); }
.album-b-sum { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.album-b-raw { color: var(--text-muted); }
.album-b-total { font-weight: 800; }
.album-b-from { text-align: right; font-variant-numeric: tabular-nums; }
.album-bonus-list li.zero .album-b-kind, .album-bonus-list li.zero .album-b-total { color: var(--text-muted); font-weight: 600; }

@container (max-width: 360px) {
  .album-book { grid-template-columns: minmax(0, 1fr); }
  .album-pages { max-height: 168px; }
}

/* elsewhere: the card tooltip line, Auction House listings */
.tt-album { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-soft); }
.tt-album-tag { color: var(--accent-text); font-weight: 700; }
.ah-album { margin-top: 1px; color: var(--text-muted); }
.album-tag { display: inline-block; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 800; color: var(--text-muted); }
.album-tag.in { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }