/* Set guides (roadmap D13). A SEPARATE SURFACE from the app: different
   visitor, different rules — someone arriving from a search has never seen
   Binderline and is here to read, not to collect.
   Reuses style.css purely for the design tokens, so the two never drift on
   colour or theme, but nothing else is shared. */

.guide {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-8);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink);
}

.g-crumbs {
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  margin-bottom: var(--s-5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-crumbs a { color: var(--ink-dim); text-decoration: none; font-weight: 500; }
.g-crumbs a:hover { color: var(--ink); }
.g-crumbs span { color: var(--ink); font-weight: 600; }

.guide h1 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.02em;
}
.guide h1 span { color: var(--ink-dim); font-weight: 700; }
.guide h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: var(--s-7) 0 var(--s-3);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}
@media (max-width: 560px) {
  .guide h1 { font-size: var(--fs-lg); }
}
.g-standfirst { font-size: var(--fs-md); color: var(--ink-dim); margin: 0 0 var(--s-5); }
.guide p { margin: 0 0 var(--s-4); }

/* The four numbers that answer "is this set worth my time" without scrolling.
   Sit on the page like the binder stats, not in nested cards. */
.g-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
}
.g-facts li {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.g-facts b {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .g-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) var(--s-4);
  }
}

/* ⚠️ Tables scroll INSIDE their own box. A 164-row checklist on a phone must
   never make the page itself scroll sideways. */
.guide table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s-5);
  font-size: var(--fs-xs);
  display: block;
  overflow-x: auto;
}
.guide thead th {
  text-align: left;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-strong);
  padding: var(--s-2);
  white-space: nowrap;
}
.guide tbody td { padding: var(--s-2); border-bottom: 1px solid var(--line); }
.guide tbody tr:hover { background: var(--surface-2); }
.g-num { font-variant-numeric: tabular-nums; color: var(--ink-dim); white-space: nowrap; }
.g-price { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* The full checklist is long by design; cap it so the page stays readable and
   the interesting parts above it are not buried. */
.g-checklist { max-height: 620px; overflow-y: auto; }

.g-cta {
  margin: var(--s-7) 0 var(--s-5);
  padding: var(--s-6) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.g-cta h2 { margin-top: 0; }
.g-btn {
  display: inline-block;
  padding: var(--s-2) var(--s-5);
  min-height: 40px;
  line-height: 24px;
  border-radius: var(--r-full);
  background: var(--gold);
  color: #1a1408;
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.g-btn:hover { filter: brightness(1.06); }

.g-source { font-size: var(--fs-2xs); color: var(--ink-faint); margin-top: var(--s-6); }

/* ---- shared chrome, so a guide is never a dead end ---- */
.g-top {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.g-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4);
}
.g-brand { display: block; text-decoration: none; line-height: 0; }
/* ⚠️ Bandai-style wide wordmark: cap it so it never crowds the nav on a phone.
   Sized in ch-free absolute units because the header is a fixed two-column
   row, not a centred title like the app's. */
.g-logo { display: block; width: min(190px, 42vw); height: auto; }
.g-logo-light { display: none; }
:root[data-theme="light"] .g-logo-dark { display: none; }
:root[data-theme="light"] .g-logo-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .g-logo-dark { display: none; }
  :root:not([data-theme="dark"]) .g-logo-light { display: block; }
}
/* ⚠️ In the app .navmenu is position:absolute inside the topbar. Here it is a
   flex item in .g-top, so it resets to relative — .nav-panel is absolute with
   `right: 0; top: 100%` and needs a positioned ancestor either way. Without
   this the panel would escape the header and anchor to the page. */
.g-top-inner .navmenu { position: relative; right: auto; top: auto; flex: none; }

.g-foot {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--s-4) var(--s-7);
  font-size: var(--fs-2xs);
  color: var(--ink-faint);
}
.g-foot a { color: var(--ink-dim); text-decoration: none; }
.g-foot a:hover { color: var(--gold-ink); }

/* cross-links between guides */
.g-more { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--ink-dim); }
.g-more b {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.g-more a {
  display: inline-block;
  margin: 0 var(--s-4) var(--s-2) 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.g-more a:hover { color: var(--gold-ink); }

/* the guides index */
.g-index { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: 0; }
.g-index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-decoration: none;
  color: var(--ink);
}
.g-index a:hover { color: var(--gold-ink); }
.g-index li:last-child a { border-bottom: 0; }
.g-index span { font-size: var(--fs-2xs); color: var(--ink-dim); font-variant-numeric: tabular-nums; flex: none; }

.g-rank { color: var(--ink-faint); font-variant-numeric: tabular-nums; width: 2ch; }
.g-jp {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--ink-dim);
  vertical-align: middle;
}
.guide td a { color: var(--gold-ink); text-decoration: none; }
.guide td a:hover { text-decoration: underline; }

/* ---- imagery ---- */

/* The set's own key visual with its logo over it — the same pairing the app's
   set tiles use, and the only artwork on these pages we host ourselves. */
.g-hero {
  position: relative;
  margin: 0 0 var(--s-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--slot-bg);
  aspect-ratio: 16 / 7;
}
.g-hero-art { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
/* ⚠️ The scrim is on the CONTAINER's ::after, never on the image. The app hit
   this exact bug: a loading shimmer reusing the tile's ::after stripped the
   backing the wordmark needs and the lettering vanished into the artwork. */
.g-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,12,16,0.85) 0%, rgba(10,12,16,0.25) 45%, transparent 70%);
}
.g-hero-logo {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 1;
  width: auto;
  height: 62px;
  max-width: 62%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
@media (max-width: 560px) { .g-hero-logo { height: 44px; } }

.g-pic { width: 40px; padding-right: 0 !important; }
.g-thumb {
  width: 40px;
  height: 56px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--slot-bg);
  display: block;
}

/* Top three, big enough to actually look at */
.g-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
}
.g-podium li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  background: none;
  border: 0;
  text-align: center;
}
.g-podium img {
  width: 100%;
  max-width: 150px;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: var(--e-2);
}
.g-podium b { font-size: var(--fs-xs); line-height: 1.3; }
.g-pod-rank {
  position: static;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-ink);
}
.g-pod-price {
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
@media (max-width: 560px) {
  .g-podium { grid-template-columns: 1fr 1fr; }
  .g-podium li:first-child { grid-column: 1 / -1; }
  .g-podium li:first-child img { max-width: 190px; }
}

/* a little warmth on the section headings, so the page is not a wall of tables */
.guide h2 {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.guide h2:first-of-type { border-top: 0; padding-top: 0; }