/* Game Asset Ticker - warm paper, dark chrome, one accent.
   Hand written on purpose: no build step means nothing to install on the host,
   and the whole sheet stays small enough to cache in one round trip. */

:root {
  /* surfaces */
  --paper: #faf7f2;
  --paper-top: #f1ece2;
  --card: #ffffff;
  --surface: #f7f4ee;
  --surface-2: #f4f1ea;
  --surface-3: #f6f2ea;

  /* lines */
  --line: #e7e0d5;
  --line-strong: #ddd5c9;
  --line-soft: #eee8de;
  --line-faint: #f2ede4;

  /* ink */
  --ink: #17130f;
  --text: #17130f;
  --text-2: #2f2925;
  --text-3: #4a423c;
  --text-4: #5c534c;
  --muted: #7a716a;
  --faint: #b3aaa2;

  /* accent */
  --rust: #c0421f;
  --rust-hover: #a93818;
  --rust-soft: #f2a58a;

  /* verdict colours */
  --good: #17734f;
  --good-bg: #f0f9f3;
  --good-line: #cfe7da;
  --good-ring: #e9f3ec;
  --good-ring-2: #dceade;
  --good-ink: #3f5c4e;
  --warn: #a9670c;
  --warn-bg: #fdf5e7;
  --warn-line: #f0dfbe;

  /* on dark */
  --on-dark: #faf7f2;
  --on-dark-70: rgba(250, 247, 242, .7);
  --on-dark-60: rgba(250, 247, 242, .6);
  --on-dark-14: rgba(250, 247, 242, .14);
  --on-dark-12: rgba(250, 247, 242, .12);

  --shadow-card: 0 1px 2px rgba(23, 19, 15, .05);
  --shadow-lift: 0 10px 26px -16px rgba(23, 19, 15, .34);
  --shadow-raise: 0 12px 30px -18px rgba(23, 19, 15, .35);

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --sans: Geist, ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1200px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* A short page - a 404, a publisher with one asset - used to leave a band of
   paper under the footer. The column pushes the footer to the fold instead. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--rust); }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.15em; }
li + li { margin-top: 6px; }
img { max-width: 100%; display: block; }
hr { border: none; border-top: 1px solid var(--line); margin: 0; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; border-radius: 4px; }
/* On the dark chrome the rust outline is nearly invisible; go light instead. */
.topbar :focus-visible,
.card-dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--on-dark); }

::selection { background: #f6dcd2; }

/* ---------- utilities ---------- */
[hidden] { display: none !important; }
.m { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--faint); }
.good { color: var(--good); }
.warn { color: var(--warn); }
.bad { color: var(--rust); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.strike { text-decoration: line-through; }
.grow { flex: 1 1 auto; }
.wrap-flex { flex-wrap: wrap; }
.spacer { flex: 1; }
.min0 { min-width: 0; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.gap-26 { gap: 26px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rust);
}
.eyebrow-quiet { color: var(--muted); }

.lede { font-size: 16px; line-height: 1.6; color: var(--text-4); max-width: 60ch; }
.note { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.micro { font-size: 11.5px; line-height: 1.5; color: var(--muted); }

.url-line {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---------- topbar ---------- */
.topbar { position: relative; background: var(--ink); color: var(--on-dark); }
.topbar-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 60px; display: flex; align-items: center; gap: 20px;
}
.topbar a { color: var(--on-dark-70); }
.topbar a:hover { color: var(--on-dark); }

.brand { display: flex; align-items: center; gap: 9px; color: var(--on-dark); flex: none; }
.brand:hover { color: var(--on-dark); }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--rust); flex: none;
  display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 5px;
}
.brand-mark i { width: 3px; background: var(--on-dark); border-radius: 1px; display: block; }
.brand-mark i:nth-child(1) { height: 5px; }
.brand-mark i:nth-child(2) { height: 10px; }
.brand-mark i:nth-child(3) { height: 7px; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.03em; }

.nav { display: flex; gap: 4px; font-size: 14px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 6px 11px; border-radius: 8px; white-space: nowrap; }
.nav a.on { color: var(--on-dark); background: var(--on-dark-14); font-weight: 500; }

.topbar-end { display: flex; align-items: center; gap: 12px; flex: none; }
.topbar-end form { display: flex; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--on-dark-70); }
.who .avatar {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(250, 247, 242, .16);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: var(--on-dark); flex: none;
}

/* ---------- footer ---------- */
main { flex: 1 0 auto; }
.site-footer { flex: none;  margin-top: 52px; background: var(--ink); color: var(--on-dark-70); }
.site-footer a { color: var(--on-dark-70); }
.site-footer a:hover { color: var(--on-dark); }
.footer-legal {
  max-width: var(--shell); margin: 0 auto; padding: 22px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--on-dark-60);
}
.footer-legal a { color: var(--on-dark-70); font-family: var(--mono); }
.footer-legal a:hover { color: var(--on-dark); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(180deg, var(--paper-top) 0%, var(--paper) 100%); border-bottom: 1px solid var(--line); }
.hero-inner {
  max-width: var(--shell); margin: 0 auto; padding: 40px var(--gutter) 38px;
  display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start;
}
.hero-main { flex: 1 1 420px; min-width: 0; }
.hero h1 {
  margin: 18px 0 0; font-size: clamp(34px, 4.4vw, 58px);
  line-height: .98; letter-spacing: -.04em; max-width: 16ch;
}
.hero-sub { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-4); max-width: 52ch; }
.hero-slim .hero-inner { padding-bottom: 30px; align-items: flex-end; }
.hero-slim h1 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1; letter-spacing: -.038em; }
.hero-slim .hero-sub { font-size: 16px; }

.tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; font-weight: 500; color: var(--text-3);
}
.tag-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.tag-pill.is-good { border-color: var(--good-line); color: var(--good); font-weight: 600; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 18px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line);
}
.hero-slim .figures, .figures-bare { margin-top: 0; padding-top: 0; border-top: none; }
.figures b {
  display: block; font-family: var(--mono); font-size: 26px; font-weight: 500;
  letter-spacing: -.03em; line-height: 1.1;
}
.figures span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.figures .is-good b { color: var(--good); }
.figures .is-live b { color: var(--rust); }

/* ---------- pick of the day ---------- */
.pick {
  flex: 1 1 340px; min-width: 300px; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow-raise);
}
.pick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pick-body { display: flex; gap: 14px; margin-top: 14px; }
.pick-title { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.15; letter-spacing: -.02em; }
.pick-verdict {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px;
  background: #f4faf6; border: 1px solid var(--good-line); border-radius: 12px;
}
.pick-verdict.is-plain { background: var(--surface); border-color: var(--line-soft); }

/* ---------- sections ---------- */
.section { max-width: var(--shell); margin: 0 auto; padding: 36px var(--gutter) 0; }
.section-tight { padding-top: 18px; }
.section-head {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end; justify-content: space-between;
}
.section-head h2 { font-size: 28px; letter-spacing: -.03em; scroll-margin-top: 16px; }
.section-head p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.section-head-sm h2 { font-size: 22px; }
.page { max-width: var(--shell); margin: 0 auto; padding: 34px var(--gutter) 0; }
.page > * { max-width: 780px; }
.page h1 { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.038em; }
.page-prose { display: flex; flex-direction: column; gap: 18px; }
.page-prose p { font-size: 15px; line-height: 1.7; color: var(--text-3); }

/* ---------- cards, panels ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; box-shadow: var(--shadow-card);
}
.card-lg { padding: 22px; }
.card-flat { box-shadow: none; }
.card-quiet { background: var(--surface); box-shadow: none; }
.card-dashed { border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
.card-good { border-color: var(--good-line); }
.card h2 { font-size: 21px; letter-spacing: -.025em; }
.card h3 { font-size: 18px; letter-spacing: -.02em; }
.card h4 { font-size: 17px; letter-spacing: -.02em; }
.card > * + * { margin-top: 14px; }
.card > h2 + *, .card > h3 + *, .card > h4 + * { margin-top: 12px; }

.card-dark {
  background: var(--ink); color: var(--on-dark); border-radius: 20px; padding: 26px;
}
.card-dark a { color: var(--on-dark); }
.card-dark h2, .card-dark h3 { color: var(--on-dark); }

.grid { display: grid; gap: 12px; }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-fit { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.split > * { flex: 1 1 340px; min-width: 0; }

.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.stat-card span { display: block; font-size: 13px; color: var(--muted); }
.stat-card b {
  display: block; font-family: var(--mono); font-size: 25px; font-weight: 600;
  letter-spacing: -.035em; margin-top: 6px;
}
.stat-card b small { font-size: 14px; font-weight: 500; color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; padding: 0 18px; border-radius: 11px;
  border: 1px solid transparent; background: var(--card); color: var(--text-3);
  border-color: var(--line-strong);
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap; text-align: center;
}
.btn:hover { border-color: var(--ink); color: var(--text); }
.btn .arrow { opacity: .6; }
.btn-primary { background: var(--rust); border-color: var(--rust); color: #fff; box-shadow: 0 1px 2px rgba(23, 19, 15, .16); }
.btn-primary:hover { background: var(--rust-hover); border-color: var(--rust-hover); color: #fff; }
.btn-primary .arrow { opacity: .75; }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.btn-ink:hover { background: #2a231d; border-color: #2a231d; color: var(--on-dark); }
.btn-outline { background: transparent; }
.btn-lg { height: 48px; font-size: 15.5px; padding: 0 22px; border-radius: 12px; }
.btn-md { height: 40px; font-size: 14px; padding: 0 16px; border-radius: 10px; }
.btn-sm { height: 36px; font-size: 13.5px; padding: 0 14px; border-radius: 10px; font-weight: 500; }
.btn-xs { height: 32px; font-size: 12.5px; padding: 0 12px; border-radius: 9px; font-weight: 500; }
.btn-block { width: 100%; }
.btn-on-dark { background: transparent; border-color: rgba(250, 247, 242, .28); color: var(--on-dark); }
.btn-on-dark:hover { border-color: var(--on-dark); color: var(--on-dark); }
.link-more { font-size: 13.5px; font-weight: 600; color: var(--rust); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 13px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line-strong);
  font-size: 14px; color: var(--muted); white-space: nowrap; cursor: pointer;
}
.chip:hover { border-color: var(--ink); color: var(--text); }
.chip.is-set { border-color: var(--ink); color: var(--text); font-weight: 500; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); font-weight: 600; }
.chip.on:hover { color: var(--on-dark); }
.chip-sm { height: 34px; font-size: 13px; padding: 0 12px; border-radius: 9px; }
.chip .caret { opacity: .6; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span, label.field-label { font-size: 13px; font-weight: 500; color: var(--text-3); }
.input {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 11px;
  color: var(--text); font-family: var(--sans); font-size: 14.5px;
}
/* width:100% would set the flex basis and push the button onto its own line. */
.input.grow { flex: 1 1 180px; width: auto; }
.input::placeholder { color: var(--muted); }
.input:focus { border-color: var(--ink); }
.input-sm { height: 38px; font-size: 13.5px; border-radius: 10px; }
.input-mono { font-family: var(--mono); }
select.input { appearance: none; padding-right: 34px; background-image: none; }
textarea.input { height: auto; padding: 12px 14px; }

.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-3); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }

.switch-row { display: flex; gap: 12px; align-items: flex-start; }
.switch-row .txt b { display: block; font-size: 14.5px; font-weight: 500; }
.switch-row .txt span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- filter bar ---------- */
.filterbar { display: flex; flex-direction: column; gap: 10px; }
.filter-sheet { margin-top: 12px; }
.filter-sheet summary { list-style: none; }
.filter-sheet summary::-webkit-details-marker { display: none; }
/* The panel is a sibling of the disclosure, not its child: that keeps "All
   filters" fixed beside the sort control instead of hopping to its own line
   the moment it is opened, and the panel still pushes the page down rather
   than covering the first row of results. */
/* The panel is not inside the disclosure: that keeps "All filters" fixed beside
   the sort control instead of hopping to its own line the moment it is opened,
   and lets the panel span the page while its trigger sits in the header row. */
.sheet {
  display: none;
  margin-top: 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
}
.section:has(.filter-sheet[open]) > .sheet { display: grid; }
.filter-group { display: flex; flex-direction: column; gap: 10px; }
.filter-group > b { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.cat-list { display: flex; flex-direction: column; gap: 2px; }
.cat {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--text-4);
}
.cat:hover { background: var(--surface-2); color: var(--text); }
.cat.on { background: var(--ink); color: var(--on-dark); font-weight: 500; }
.cat.on:hover { color: var(--on-dark); }
.cat .n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cat.on .n { color: var(--on-dark-70); }

/* ---------- badges, pills, tags ---------- */
.badge {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 8px;
  background: var(--surface-2); color: var(--muted); border: 1px solid transparent;
}
.badge-good { background: var(--good-bg); color: var(--good); border-color: var(--good-line); }
.badge-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge-solid { background: var(--good); color: #fff; border-color: var(--good); }
.badge-rust { background: var(--rust); color: #fff; border-color: var(--rust); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 500; }
/* The shape of a chip belongs to every variant, not just the default one:
   the coloured ones used to inherit background and text colour but no padding,
   so their fill sat tight against the words while the grey chip beside them
   was padded. */
.tag,
.tag-good,
.tag-warn,
.tag-empty { border-radius: 7px; padding: 4px 8px; }
.tag { background: var(--surface-2); color: var(--text-4); }
.tag-good { background: var(--good-bg); color: var(--good); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-empty { background: var(--surface-2); color: var(--muted); }
.card-dark .tag,
.card-dark .tag-good,
.card-dark .tag-warn,
.card-dark .tag-empty { background: var(--on-dark-12); color: rgba(250, 247, 242, .9); }
.card-dark .tag-empty { color: var(--on-dark-60); }
.card-dark .off { background: var(--on-dark-12); color: rgba(250, 247, 242, .9); }
.card-dark .off-rust { background: var(--rust); color: #fff; }

.off {
  display: inline-flex; align-items: center; font-family: var(--mono);
  font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 6px;
  background: var(--surface-2); color: var(--text-4);
}
.off-good { background: var(--good); color: #fff; }
.off-rust { background: var(--rust); color: #fff; }

/* ---------- verdict ---------- */
.verdict-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .02em;
  height: 28px; padding: 0 10px; border-radius: 8px;
  background: var(--surface-2); color: var(--text-3); border: 1px solid transparent;
}
.verdict-buy { background: var(--good); color: #fff; }
.verdict-fair { background: var(--surface-2); color: var(--text-3); }
.verdict-wait { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.verdict-skip { background: var(--surface); color: var(--muted); border-color: var(--line); }
.verdict-none { background: var(--surface); color: var(--muted); border-color: var(--line); font-size: 11.5px; }

.verdict-card { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.verdict-word { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.03em; }
.verdict-word.is-buy { color: var(--good); }
.verdict-word.is-wait { color: var(--warn); }
.verdict-word.is-skip, .verdict-word.is-none { color: var(--muted); }
.verdict-word.is-fair { color: var(--text); }
.verdict-line {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--muted); margin-top: 7px;
}
.verdict-say { margin: 0; flex: 1 1 320px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.verdict-foot {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted);
}

/* ---------- score ring ---------- */
.ring { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ring-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ---------- deal row ---------- */
.rows { display: flex; flex-direction: column; gap: 12px; }
.deal {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; display: flex; flex-wrap: wrap; gap: 20px;
  box-shadow: var(--shadow-card);
}

/*
 | On a wide screen the right-hand cluster keeps fixed widths and never wraps,
 | so the chart, the ring and the price sit on one vertical line all the way
 | down the feed instead of each row sizing its own columns.
 */
@media (min-width: 900px) {
  .deal-side { flex-wrap: nowrap; }
  .deal-actions { flex: 0 0 178px; width: 178px; min-width: 178px; }
}
.deal:hover { box-shadow: var(--shadow-lift); border-color: #d8cfc2; }
.deal.is-low { border-color: var(--good-line); }
.deal-main { flex: 1 1 320px; min-width: 0; display: flex; gap: 16px; }
.deal-side {
  flex: 0 1 auto; min-width: 0; margin-left: auto;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: flex-end;
}
.deal-title {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  letter-spacing: -.022em; line-height: 1.15;
}
.deal-meta { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.deal-meta a { color: var(--text-3); font-weight: 500; }
.deal-say { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-3); max-width: 56ch; }
/* The price belongs to the button under it, so they share one column and one
   centre line; the score ring stands on its own beside them. */
.deal-price { flex: 0 0 auto; text-align: center; }
.deal-price .now {
  font-family: var(--mono); font-size: 23px; font-weight: 600; letter-spacing: -.04em;
  line-height: 1.1;
}
.deal-price .price-line { display: flex; align-items: baseline; gap: 7px; justify-content: center; flex-wrap: wrap; }
.deal-price .was { font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-decoration: line-through; }
.deal-price .when { font-family: var(--mono); font-size: 12px; color: var(--text-4); margin-top: 5px; }
.deal-price .when.soon { color: var(--rust); }
.deal-actions { flex: 0 0 140px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.deal-actions .btn { width: 100%; }
.deal-actions form { display: flex; }
.deal-actions form .btn { flex: 1; }
.aff-note { font-size: 11.5px; line-height: 1.4; color: var(--muted); }

.deal-main > a,
.pick-body > a { flex: none; display: block; }

.thumb {
  border-radius: 13px; background: var(--surface-3); border: 1px solid var(--line);
  flex: none; object-fit: cover; width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}
.thumb-88 { width: 88px; height: 88px; }
.thumb-84 { width: 84px; height: 84px; border-radius: 13px; }
.thumb-76 { width: 76px; height: 76px; border-radius: 12px; }
.thumb-72 { width: 72px; height: 72px; border-radius: 12px; }
.thumb-64 { width: 64px; height: 64px; border-radius: 12px; font-size: 10px; }
.thumb-52 { width: 52px; height: 52px; border-radius: 11px; font-size: 10px; }
.thumb-46 { width: 46px; height: 46px; border-radius: 10px; font-size: 9px; }
.thumb-104 { width: 104px; height: 104px; border-radius: 14px; }

/* ---------- price rail (asset page) ---------- */
.rail { display: flex; flex-direction: column; gap: 12px; }
.price-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.price-now { font-family: var(--mono); font-size: 34px; font-weight: 600; letter-spacing: -.045em; }
.price-sub { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 5px; }
.countdown-box {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 11px; padding: 11px 13px;
}
.countdown-box span:first-child { font-size: 12.5px; color: var(--text-4); }
.countdown-box .val { font-family: var(--mono); font-size: 19px; font-weight: 600; margin-left: auto; }
.countdown-box.is-good { background: var(--good-bg); border-color: var(--good-line); }
.countdown-box.is-good .val { color: var(--good); }

/* ---------- key/value ---------- */
.kv { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; }
.kv .k { color: var(--muted); }
.kv .v { font-family: var(--mono); font-weight: 500; text-align: right; }

.figures-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px 18px; }
.figures-grid .lbl { font-size: 12.5px; color: var(--muted); }
.figures-grid .val {
  font-family: var(--mono); font-size: 19px; font-weight: 600; margin-top: 3px; letter-spacing: -.02em;
}
.figures-grid .val.is-good { color: var(--good); }
.figures-grid .val.is-empty { font-size: 13.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.figures-grid .sub { font-size: 11.5px; color: var(--muted); }

/* ---------- meters ---------- */
.meters { display: flex; flex-direction: column; gap: 13px; }
.meter .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; }
.meter .top .max { color: var(--muted); }
.meter .top .val { font-family: var(--mono); color: var(--text-3); }
.meter .track { height: 6px; border-radius: 3px; background: var(--line-faint); margin-top: 6px; overflow: hidden; }
.meter .track > i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.meter.is-good .track > i { background: var(--good); }
.meter.is-warn .track > i { background: var(--warn); }
.meter.is-faint .track > i { background: var(--faint); }

/* ---------- sale ladder ---------- */
.ladder { display: flex; flex-direction: column; gap: 8px; }
.step {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px;
}
.step .n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); width: 48px; flex: none; }
.step .amount { font-family: var(--mono); font-size: 18px; font-weight: 500; }
.step .when { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; margin-left: auto; }
.step.now { background: var(--surface); border-color: var(--line-strong); }
.step.now .amount { font-size: 20px; font-weight: 600; }
.step.past { opacity: .55; }
.step.past .amount { text-decoration: line-through; }

.ladder-dark .step { border-color: rgba(250, 247, 242, .14); }
.ladder-dark .step .n,
.ladder-dark .step .when { color: rgba(250, 247, 242, .7); }
.ladder-dark .step.now { background: rgba(250, 247, 242, .1); border-color: rgba(250, 247, 242, .24); }
.ladder-dark .step.upcoming { opacity: .66; }
.ladder-dark .step.past { opacity: .4; }

.ladder-mini { display: flex; flex-direction: column; gap: 5px; flex: 0 0 176px; }
.ladder-mini .step { padding: 7px 9px; border-radius: 9px; gap: 8px; }
.ladder-mini .step .n { width: 32px; font-size: 10.5px; }
.ladder-mini .step .amount { font-size: 15px; }
.ladder-mini .step .when { font-size: 11px; }
.ladder-mini .step.now.is-good { background: var(--good-bg); border-color: var(--good-line); }
.ladder-mini .step.now.is-good .n, .ladder-mini .step.now.is-good .when { color: var(--good); }

/* ---------- chart ---------- */
.chart { width: 100%; height: auto; display: block; margin-top: 14px; overflow: visible; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px;
  font-size: 12px; color: var(--muted);
}
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 12px; height: 8px; border-radius: 2px; border: 1px solid var(--line); display: block; }
.chart-legend .sw-past { background: var(--surface-2); }
.chart-legend .sw-now { background: var(--good-bg); border-color: var(--good-line); }
.chart-legend .sw-low { width: 14px; height: 0; border: none; border-top: 1px dashed var(--good); }
.chart-legend .push { margin-left: auto; }

/* ---------- tables ---------- */
.scroll-x { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); font-weight: 500;
}
table.data td {
  padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line-faint);
  font-size: 13.5px; vertical-align: middle;
}
table.data tr:last-child td { border-bottom: none; }
table.data td.m, table.data th.right, table.data td.right { }
table.data .right { text-align: right; }

/* ---------- notices, empty, load more ---------- */
.notice {
  padding: 12px 15px; border-radius: 12px; font-size: 13.5px;
  background: var(--good-bg); border: 1px solid var(--good-line); color: var(--good-ink);
}
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.notice-error { background: #fdf1ee; border-color: #f2cec3; color: var(--rust); }
.flash-slot { max-width: var(--shell); margin: 0 auto; padding: 16px var(--gutter) 0; }

.empty {
  background: var(--card); border: 1px dashed var(--line-strong); border-radius: 16px;
  padding: 34px 24px; text-align: center; color: var(--text-4); font-size: 14.5px; line-height: 1.6;
}
.empty > b { display: block; font-family: var(--display); font-size: 17px; letter-spacing: -.02em; color: var(--text); }
.empty p b { font-weight: 600; color: var(--text-3); }
.empty p { max-width: 46ch; margin: 8px auto 0; }

.loadmore { display: flex; justify-content: center; padding-top: 30px; }
.loadmore-btn { min-width: 210px; }
.loadmore-rest { font-family: var(--mono); font-size: 12.5px; font-weight: 400; color: var(--faint); }
.loadmore.is-busy .loadmore-btn { color: var(--faint); border-color: var(--line); pointer-events: none; }

/* ---------- breadcrumb, tabs ---------- */
.crumb { font-size: 13px; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb b { color: var(--text); font-weight: 400; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 20px; }
.tabs a, .tabs span { padding: 10px 14px; font-size: 14.5px; color: var(--muted); }
.tabs .on { font-weight: 600; color: var(--text); border-bottom: 2px solid var(--rust); }

/* ---------- asset page layout ---------- */
.asset-grid {
  max-width: var(--shell); margin: 0 auto; padding: 16px var(--gutter) 0;
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
}
.asset-main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.asset-rail { flex: 1 1 330px; min-width: 300px; position: sticky; top: 16px; }

/* ---------- bundle calculator ---------- */
.tier-card .price {
  font-family: var(--mono); font-size: 32px; font-weight: 600; letter-spacing: -.04em; line-height: 1;
}
.tier-card.is-best { border-color: var(--good-line); background: var(--good-bg); }
#items tr[data-id] { cursor: pointer; }
#items tr[data-id]:hover { background: var(--surface-2); }
#items tr.is-owned { opacity: .5; }
#items tr.is-owned .t { text-decoration: line-through; }
#items input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .deal-spark { display: none; }
  .asset-rail { position: static; }
}

@media (max-width: 860px) {
  :root { --gutter: 16px; }
  .hero-inner { gap: 28px; padding-top: 30px; padding-bottom: 28px; }
  .hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .hero-sub { font-size: 15.5px; }
  .topbar-inner { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 12px; }
  .nav { order: 3; width: 100%; }
  .topbar-end { margin-left: auto; }
  .section { padding-top: 28px; }
  .section-head h2 { font-size: 23px; }
  .deal-side { width: 100%; margin-left: 0; justify-content: flex-start; }
  .verdict-card { gap: 14px; }
  .card-dark { border-radius: 16px; padding: 20px; }
}

@media (max-width: 620px) {
  .filterbar .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-block: 4px; margin-block: -4px;
  }
  .filterbar .chips::-webkit-scrollbar { display: none; }
  .deal { padding: 14px; border-radius: 15px; gap: 12px; }
  .deal-main { flex: 1 1 100%; gap: 12px; }
  .thumb { width: 64px; height: 64px; border-radius: 12px; }
  .deal-title { font-size: 16px; }
  .deal-say { font-size: 13.5px; }
  .deal-side { gap: 12px; align-items: stretch; }
  .deal-price { flex: 1 1 auto; text-align: left; }
  .deal-price .price-cut { justify-content: flex-start; }
  .deal-price .now { font-size: 22px; }
  .deal-ring { flex: 0 0 auto; }
  .deal-actions { flex: 1 1 100%; }
  .deal-actions .btn { height: 46px; }
  .ladder-mini { flex: 1 1 100%; }
  .figures { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; }
  .figures b { font-size: 22px; }
  .price-now { font-size: 30px; }
  .verdict-word { font-size: 28px; }
  .page { padding-top: 32px; }
  .card { padding: 16px; }
  .card-lg { padding: 18px; }
  .btn { height: 44px; }
  .btn-sm, .btn-xs { height: 42px; }
  .chip { height: 42px; }
  .input-sm { height: 44px; }
  .filter-sheet summary { height: 44px; }
  .check { min-height: 44px; }
  .check input { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.section-title {
  font-family: var(--display); font-size: 22px; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 4px;
}

/* A publisher has no avatar on the store, so this is either the artwork of
   their best-known asset or initials that stay stable per name. */
.pub-mark {
  border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line);
  object-fit: cover; flex: none; display: block;
}
.pub-mark-letters {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em; border-color: transparent;
}

/* ---------- filter bar ----------
   Each row states what it controls, so a sort no longer looks like a filter
   and a threshold no longer looks like a toggle. */
.filter-row { display: flex; gap: 14px; align-items: center; }
.filter-label {
  flex: 0 0 76px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); line-height: 1.2;
}
.filter-applied { padding-top: 10px; border-top: 1px dashed var(--line); margin-top: 2px; }
.chip-applied { background: var(--ink); border-color: var(--ink); color: var(--on-dark); font-weight: 600; }
.chip-applied:hover { background: #2a231d; border-color: #2a231d; color: var(--on-dark); }
.chip-applied span { opacity: .6; margin-left: 2px; }
.chip-clear { color: var(--rust); border-style: dashed; }

@media (max-width: 720px) {
  .filter-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .filter-label { flex: none; }
}

/* One line of controls: how it is ordered, and one way in to everything else.
   Every filter already lives inside the sheet, so repeating a handful of them
   as chips above it was two doors to the same room. */


/* ---- page heads -------------------------------------------------------- */
/* Pages open with their own name and one line saying what they hold, then go
   straight into the content. The marketing headline that used to sit here
   answered a question nobody arriving on a price list is asking. */
.section-first { padding-top: 30px; }
/* The head says what the page is. What is in the list and what changes it
   belong together in the strip below, not floating beside the title. */
.feed-head h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.035em; scroll-margin-top: 16px; }
.feed-head .page-sub { margin-top: 9px; }
.feed-head .chips { margin-top: 12px; }

/* A rule, not a box: the controls sit on the line that separates the head from
   the list, the way a tab strip does. A filled panel across the full width had
   its content at the two ends and nothing in between. */
.toolrow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; margin-top: 22px; padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
/* With tabs in the row the button stays pinned right and the tabs take what is
   left, scrolling inside it - dropping the button to a line of its own on a
   phone looked like an afterthought. */
.toolrow:has(.sorttabs) { flex-wrap: nowrap; }
.toolrow:has(.sorttabs) > .filter-sheet { flex: none; }
.toolrow-count { font-size: 13.5px; color: var(--muted); }
.toolrow-count b { color: var(--text-3); font-weight: 600; }
.toolrow-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

/* The strip scrolls sideways rather than wrapping, the way the site nav does:
   a wrapped second row would leave the active tab's underline floating in the
   middle of the block instead of sitting on the rule. */
.sorttabs {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 18px;
  flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sorttabs::-webkit-scrollbar { display: none; }
.sorttabs a {
  position: relative; padding: 4px 0; font-size: 13.5px; color: var(--muted); white-space: nowrap;
}
.sorttabs a:hover { color: var(--text-3); }
.sorttabs a.on { color: var(--text); font-weight: 600; }
.sorttabs a.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -12px;
  height: 2px; background: var(--ink); border-radius: 1px;
}

.toolrow + .deals-grid, .toolrow + .empty, .toolrow + .pub-grid { margin-top: 18px; }
.listcount { margin: 13px 0 16px; font-size: 13px; color: var(--muted); }
.listcount b { color: var(--text-3); font-weight: 600; }

/* One pill shape for every control in the strip, so the sort field and the
   filter trigger read as siblings instead of two boxes of different widths. */
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--card);
  font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer;
  white-space: nowrap;
}
.pill:hover { border-color: var(--ink); color: var(--text); }
a.pill { font-weight: 500; color: var(--text-3); }
.pill-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px;
  background: var(--ink); color: var(--on-dark); font-family: var(--mono); font-size: 11px;
}
.pill svg { color: var(--muted); }
.pill-select { padding-right: 30px; }
.pill-select select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; padding: 0; margin: 0;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--text);
  cursor: pointer; outline: none;
}
.pill-select::after {
  content: ''; position: absolute; right: 13px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}
.filter-sheet[open] > .pill { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.filter-sheet[open] > .pill svg { color: var(--on-dark-70); }
.filter-sheet[open] > .pill .pill-count { background: var(--on-dark); color: var(--ink); }
.section-head h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.035em; scroll-margin-top: 16px; }
.page-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-4); max-width: 62ch; }
.filterbar { margin-bottom: 16px; }
.deal-price .then { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.batch { margin-top: 22px; }
.batch-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.batch-head h2 { font-size: 20px; letter-spacing: -.025em; }
.batch-when { font-family: var(--mono); font-size: 13px; color: var(--rust); font-weight: 500; }

/* On a phone the row stacks once, into text over controls. The score ring and
   the price belong to the same glance, so they share that second line rather
   than taking one each. */
@media (max-width: 899px) {
  .deal-side { flex-wrap: nowrap; gap: 12px; width: 100%; justify-content: space-between; }
  .deal-actions { flex: 1 1 auto; width: auto; min-width: 0; }
  .deal-price .price-line { justify-content: flex-end; }
}

/* ---- deal cards -------------------------------------------------------- */
/* The asset's key image is the card. It is cropped to fill, then covered by a
   gradient that is nearly clear at the top and nearly solid at the bottom, so
   the artwork carries the top half and the numbers stay legible on the ink at
   the bottom without a panel drawn over them. */
.deals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(338px, 1fr)); gap: 14px; }
.deal-card {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 268px; display: flex;
  border: 1px solid rgba(23, 19, 15, .14); border-radius: 16px;
  background: var(--ink); color: var(--on-dark);
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease;
}
.deal-card:hover { box-shadow: var(--shadow-raise); transform: translateY(-2px); }
.deal-card.is-low { border-color: rgba(95, 204, 154, .55); }

.card-cover { position: absolute; inset: 0; z-index: -1; background: #241d18; }
.card-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.03); transition: transform .6s ease;
}
.deal-card:hover .card-cover img { transform: scale(1.08); }
/* Two layers: a flat veil so a bright, blown-out key image cannot outshine the
   text, and a ramp that is nearly solid by the time it reaches the numbers. */
.card-cover::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(23, 19, 15, .18) 0%,
      rgba(23, 19, 15, .28) 26%,
      rgba(23, 19, 15, .70) 50%,
      rgba(23, 19, 15, .92) 67%,
      rgba(23, 19, 15, .97) 82%,
      rgba(23, 19, 15, .98) 100%),
    linear-gradient(0deg, rgba(23, 19, 15, .14), rgba(23, 19, 15, .14));
}

.card-body {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 9px;
  padding: 15px 16px 16px;
}
/* Pinned to the top edge rather than floating above the title: it frames the
   artwork and uses a corner the card otherwise leaves empty. */
.card-head { position: absolute; top: 13px; left: 14px; right: 14px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card-clock {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: -.02em;
  padding: 4px 8px; border-radius: 7px;
  background: rgba(20, 16, 13, .62); border: 1px solid rgba(250, 247, 242, .2);
  color: rgba(250, 247, 242, .88); backdrop-filter: blur(6px); white-space: nowrap;
}
.card-clock.soon { color: #ff9c72; border-color: rgba(255, 156, 114, .5); }
/* Two lines, so a card with a forty-word title does not set the height of
   everything beside it. The full title is the link's tooltip and its page. */
.card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--display); font-weight: 600; font-size: 17px;
  line-height: 1.2; letter-spacing: -.02em; color: var(--on-dark);
  text-shadow: 0 1px 3px rgba(23, 19, 15, .55), 0 2px 18px rgba(23, 19, 15, .45);
}
.card-title:hover { color: #fff; }
.card-meta { font-size: 12.5px; color: rgba(250, 247, 242, .78); line-height: 1.45; text-shadow: 0 1px 8px rgba(23, 19, 15, .5); }
.card-meta a { color: var(--on-dark); font-weight: 500; }
.card-meta a:hover { color: #fff; text-decoration: underline; }

.card-spark { position: relative; line-height: 0; margin-top: 2px; }
.card-spark svg { width: 100%; display: block; }

/* Score, price and the action read left to right on one line. Stacked into
   three rows they left a wide hole in the middle of the card and pushed the
   artwork off the top. */
.card-foot {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
  margin-top: 8px; padding-top: 11px; border-top: 1px solid rgba(250, 247, 242, .16);
}
.card-foot .btn { margin-left: auto; flex: none; }

/* --- the small pieces, restated for ink --- */
.deal-card .ring-label { font-size: 9.5px; color: var(--on-dark-60); }
.deal-card .ring { flex: none; }
.deal-card .deal-price { text-align: left; min-width: 0; }
.deal-card .price-line { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.deal-card .now { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; color: var(--on-dark); }
.deal-card .was { font-family: var(--mono); font-size: 12.5px; color: var(--on-dark-60); text-decoration: line-through; }
.deal-card .off { background: rgba(250, 247, 242, .16); border-color: transparent; color: var(--on-dark); }
.deal-card .off-good { background: rgba(95, 204, 154, .22); color: #8fe3ba; }
.deal-card .when { font-family: var(--mono); font-size: 11.5px; color: var(--on-dark-60); margin-top: 2px; }
.deal-card .when.soon { color: #ff9c72; }
.deal-card .then { font-family: var(--mono); font-size: 11.5px; color: var(--on-dark-60); margin-top: 2px; }

.deal-card .badge,
.deal-card .tag,
.deal-card .tag-empty,
.deal-card .tag-good,
.deal-card .tag-warn {
  background: rgba(20, 16, 13, .62); border-color: rgba(250, 247, 242, .2);
  color: var(--on-dark); backdrop-filter: blur(6px);
}
.deal-card .badge-solid { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.deal-card .badge-good, .deal-card .tag-good { color: #8fe3ba; border-color: rgba(95, 204, 154, .5); }
.deal-card .badge-warn, .deal-card .tag-warn { color: #f2cf95; border-color: rgba(229, 174, 82, .5); }

.btn-light { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); font-weight: 600; }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.deal-card .card-foot .btn { padding: 0 13px; }
.deal-card .card-foot form { margin-left: auto; }
.deal-card .card-foot form .btn { margin-left: 0; }
.deal-card .btn-on-dark { background: rgba(250, 247, 242, .08); }
.deal-card .btn-on-dark:hover { background: rgba(250, 247, 242, .16); }

.figure-label { font-size: 11px; color: var(--on-dark-60); text-transform: uppercase; letter-spacing: .09em; }

/* ---- search in the bar -------------------------------------------------- */
.search-pop { position: relative; flex: none; }
.search-pop summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-dark-70);
}
.search-pop summary::-webkit-details-marker { display: none; }
.search-pop summary:hover { color: var(--on-dark); background: var(--on-dark-14); }
.search-pop[open] summary { color: var(--on-dark); background: var(--on-dark-14); }
.search-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  display: flex; gap: 8px; padding: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lift);
}
.search-panel .input { min-width: 230px; }
/* The bar wraps to two rows on a phone, so the panel hangs off the bar itself
   rather than a guessed offset that landed on top of the nav. */
@media (max-width: 560px) {
  .search-pop { position: static; }
  .search-panel { left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); }
  .search-panel .input { min-width: 0; flex: 1 1 auto; }
}

/* Publisher cards carry the same idea: the artwork we use as their face fills
   the tile, and the name sits on the dense end of the same gradient. */
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; margin-top: 18px; }
.pub-card {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 132px; display: flex; align-items: flex-end;
  border: 1px solid rgba(23, 19, 15, .14); border-radius: 14px;
  background: var(--ink); color: var(--on-dark);
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease;
}
.pub-card:hover { box-shadow: var(--shadow-raise); transform: translateY(-2px); color: var(--on-dark); }
.pub-card .card-cover img { transition: transform .6s ease; }
.pub-card:hover .card-cover img { transform: scale(1.07); }
.pub-card-body { position: relative; display: block; padding: 13px 14px; width: 100%; }
.pub-card-name {
  display: block; font-family: var(--display); font-weight: 600; font-size: 15.5px;
  letter-spacing: -.02em; line-height: 1.2; color: var(--on-dark);
  text-shadow: 0 1px 3px rgba(23, 19, 15, .6), 0 2px 16px rgba(23, 19, 15, .5);
}
.pub-card-count { display: block; margin-top: 4px; font-size: 11.5px; color: rgba(250, 247, 242, .78); }
.mailto-line { margin: 4px 0 14px; font-family: var(--mono); font-size: 17px; }
.mailto-line a { color: var(--rust); font-weight: 600; }
.mailto-line a:hover { text-decoration: underline; }

/* The watch toggle rides in the card's top strip, where the only other thing
   is the clock. Filled means it is on this browser's list. */
.card-watch {
  flex: none; width: 28px; height: 28px; padding: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(20, 16, 13, .62); border: 1px solid rgba(250, 247, 242, .2);
  color: rgba(250, 247, 242, .85); backdrop-filter: blur(6px);
}
.card-watch:hover { color: var(--on-dark); border-color: rgba(250, 247, 242, .45); }
.card-watch.is-watching { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.card-watch.is-watching svg path { fill: currentColor; }
.card-clock + .card-watch { margin-left: 0; }
.card-head .card-watch:first-child, .card-head .badge + .card-watch { margin-left: auto; }

/* ---- notifications page ------------------------------------------------- */
.switch-row { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.switch-row input { margin-top: 3px; flex: none; }
.switch-row > span { display: block; }
.switch-row b { display: block; font-size: 14.5px; color: var(--text); }
.switch-row .note { display: block; margin-top: 3px; }
.push-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.push-note.is-good { color: var(--good); font-weight: 500; }
.push-note.is-warn { color: var(--warn); font-weight: 500; }

/* The offer that appears the first time something is watched. It is a question,
   not a banner: it answers itself in one click and never returns. */
.watch-offer {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(340px, calc(100vw - 36px));
  background: var(--ink); color: var(--on-dark); border-radius: 14px; padding: 16px;
  box-shadow: 0 18px 40px rgba(20, 16, 13, .3);
  animation: watch-offer-in .18s ease-out;
}
@keyframes watch-offer-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .watch-offer { animation: none; } }
.watch-offer p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--on-dark-70); }
.watch-offer p b { color: var(--on-dark); font-weight: 600; }
.watch-offer-actions { display: flex; gap: 8px; margin-top: 13px; }
.watch-offer .btn { border-color: rgba(250, 247, 242, .28); background: transparent; color: var(--on-dark); }
.watch-offer .btn:hover { border-color: var(--on-dark); }
.watch-offer .btn-primary { background: var(--rust); border-color: var(--rust); color: #fff; }

/* Notification switches, on the page where the watchlist already is. */
.notify-card { margin-top: 22px; }
.meter.is-unknown .val { color: var(--faint); font-family: var(--sans); font-size: 12.5px; font-weight: 400; }
.meter.is-unknown .top span:first-child { color: var(--muted); }

/* Notification switches: one row per thing, said in words on the left and
   answered on the right. The control is a real checkbox wearing a switch, so
   it keeps its keyboard focus, its change event and its checked state. */
.switch-list { margin-top: 6px; }
.switch-line {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line-faint); cursor: pointer;
}
.switch-line:first-child { border-top: 0; }
.switch-line .what b { display: block; font-size: 14.5px; color: var(--text); font-weight: 600; }
.switch-line .what span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.switch-line select { cursor: pointer; }

.switch-line input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 42px; height: 24px; border-radius: 12px; position: relative;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  transition: background .14s ease, border-color .14s ease;
}
.switch-line input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(20, 16, 13, .25);
  transition: left .14s ease;
}
.switch-line input[type="checkbox"]:checked { background: var(--good); border-color: var(--good); }
.switch-line input[type="checkbox"]:checked::after { left: 20px; background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .switch-line input[type="checkbox"], .switch-line input[type="checkbox"]::after { transition: none; }
}
.track-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.track-form .input { flex: 1 1 320px; min-width: 0; }

/* ---------- category pages ----------
   The standfirst is the one paragraph on a category page the store cannot
   write for us, so it is set apart from the subtitle rather than stacked with
   it: hairlines above and below, and a reading measure of its own. */
.cat-note {
  margin: 18px 0 0; padding: 15px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* The rules run the full width of the list they introduce; only the text is
   held to a reading measure. A hairline that stopped at 74ch read as a bug. */
.cat-note p { margin: 0; max-width: 74ch; font-size: 14.5px; line-height: 1.65; color: var(--text-4); }
.cat-note + .toolrow { margin-top: 20px; }

.cat-links { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.cat-links h2 { font-size: 18px; letter-spacing: -.025em; }
.cat-links ul { list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.cat-links a {
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; color: inherit; text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.cat-links a:hover { border-color: var(--line-strong); background: var(--surface); }
.cat-links a b { font-family: var(--display); font-size: 15px; letter-spacing: -.02em; color: var(--text); }
.cat-links a span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.cat-links a .n { margin-top: auto; padding-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
/* The sibling list at the foot of a category page carries a name and a count
   and no description, so it does not need the height the home page cards do. */
.cat-links-compact ul { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
.cat-links-compact a { gap: 3px; padding: 12px 14px; }
.cat-links-compact a .n { margin-top: 0; padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .cat-links a { transition: none; } }