/* ============================================================
   Passport: the shelf of book covers, the open track book
   (sections, car cards, the Bronze/Silver/Gold ladder) and the
   small stamp tiles both books share. Built phone first: three
   tiles to a rung at 375px, nothing wider than the screen.
   ============================================================ */

.pp-shelf, .pp-book, .pp-tile { --tone: var(--warm); --tone-soft: var(--warm-soft); }
.pp-tone-bronze { --tone: var(--bronze); --tone-soft: rgba(192, 138, 82, 0.13); }
.pp-tone-silver { --tone: var(--silver); --tone-soft: rgba(200, 208, 218, 0.10); }
.pp-tone-gold   { --tone: #f0c57a;       --tone-soft: rgba(229, 181, 103, 0.16); }
.pp-tone-warm   { --tone: var(--warm);   --tone-soft: var(--warm-soft); }
.pp-tone-secret { --tone: var(--ink-muted); --tone-soft: rgba(154, 163, 175, 0.08); }

/* ---------- shelf ---------- */

.pp-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.75rem), 1fr));
  gap: 0.75rem;
}
.pp-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.75rem 0.85rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--ink-muted);
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.pp-cover:hover { border-color: var(--edge-strong); transform: translateY(-1px); }
.pp-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-cover.is-open {
  border-color: var(--accent-edge);
  background:
    radial-gradient(140px 70px at 50% 0%, var(--accent-soft), transparent 75%),
    var(--surface);
  box-shadow: inset 0 -2px 0 var(--accent);
  color: var(--ink);
}
.pp-cover-art {
  display: grid;
  place-items: center;
  height: 4.25rem;
  margin-bottom: 0.35rem;
  border-radius: calc(var(--radius) - 4px);
  background: rgba(5, 6, 8, 0.45);
  border: 1px solid var(--edge);
  overflow: hidden;
}
.pp-cover.is-open .pp-cover-art { color: var(--accent); }
.pp-cover-icons {
  display: grid;
  grid-template-columns: repeat(2, 1.6rem);
  gap: 0.15rem 0.35rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  text-align: center;
}
.pp-cover-initial {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--ink-faint);
}
.pp-cover-kind {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pp-cover-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp-cover-count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.pp-cover-medals { margin-top: 0.4rem; }

/* Track outlines come in as stored SVG with their own stroke; the passport
   draws them in the current colour so an open book lights up. */
.pp-outline { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-muted); }
.pp-outline svg { width: 100%; height: 100%; padding: 0.35rem; }
.pp-outline svg path { stroke: currentColor; }
.pp-cover .pp-outline { color: inherit; height: 4.25rem; }
.pp-book-outline svg, .pp-cover .pp-outline svg { display: block; max-height: 100%; }
.pp-outline-credit { font-size: 0.65rem; color: var(--ink-faint); }

/* ---------- progress bar ---------- */

.pp-bar {
  display: block;
  height: 0.4rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--edge);
}
.pp-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent-deep); }
.pp-bar > span.is-complete { background: var(--warm); }
.pp-bar-thin { height: 0.3rem; margin-top: 0.25rem; }

/* ---------- medals ---------- */

.pp-medal-row { display: inline-flex; align-items: center; gap: 0.3rem; }
.pp-medal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
}
.pp-medal-coin {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
  border: 1px solid var(--tone);
  background: var(--tone-soft);
  box-shadow: 0 0 10px -2px var(--tone);
}
.pp-medal-bronze { --tone: var(--bronze); --tone-soft: rgba(192, 138, 82, 0.16); }
.pp-medal-silver { --tone: var(--silver); --tone-soft: rgba(200, 208, 218, 0.12); }
.pp-medal-gold   { --tone: #f0c57a;       --tone-soft: rgba(229, 181, 103, 0.18); }
.pp-medal.is-locked .pp-medal-coin {
  border-style: dashed;
  border-color: var(--edge-strong);
  background: transparent;
  box-shadow: none;
  filter: grayscale(1);
  opacity: 0.45;
}
.pp-medal-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tone);
}
.pp-medal.is-locked .pp-medal-label { color: var(--ink-faint); }

/* ---------- track book header ---------- */

.pp-book-head {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 1rem 1.25rem;
  background:
    radial-gradient(420px 140px at 0% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
}
.pp-book-outline {
  height: 5.5rem;
  border-radius: calc(var(--radius) - 3px);
  background: rgba(5, 6, 8, 0.5);
  border: 1px solid var(--edge);
  color: var(--accent);
}
.pp-book-title { min-width: 0; }
.pp-book-title h2 { line-height: 1.1; margin-top: 0.15rem; overflow-wrap: anywhere; }
.pp-book-title .pp-bar { max-width: 28rem; }
.pp-book-medals { display: flex; flex-direction: column; gap: 0.4rem; }
.pp-book-head .pp-outline-credit { grid-column: 1 / -1; }
.pp-book-head > :only-child, .pp-book-title:first-child { grid-column: 1 / 3; }

/* ---------- sections as tabs ---------- */

/* The radios drive the tabs; they stay focusable (arrow keys move between
   sections) but are drawn by the labels inside each panel. */
.pp-tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pp-sections.is-tabbed > .pp-panel { display: none; }
.pp-sections.is-tabbed > .pp-tab-radio:checked + .pp-panel { display: block; }
.pp-tab-radio:focus-visible + .pp-panel .pp-tab.is-current { outline: 2px solid var(--accent); outline-offset: 2px; }

.pp-tabs {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.25rem;
  padding: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.pp-tab {
  flex: 0 0 auto;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--ink-muted);
  cursor: pointer;
}
.pp-tab:hover { color: var(--ink); }
.pp-tab.is-current { background: var(--accent); color: var(--accent-ink); }

.pp-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin-top: 1.25rem;
}

/* ---------- car cards and the ladder ---------- */

.pp-cars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}
.pp-car { padding: 1rem; min-width: 0; }
.pp-car-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--edge);
}
.pp-car-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--ink);
}

.pp-rung { margin-top: 0.85rem; }
.pp-rung-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.75rem;
  margin-bottom: 0.4rem;
}
.pp-rung-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tone, var(--ink-muted));
}
.pp-rung-state { font-size: 0.75rem; color: var(--ink-faint); }
.pp-rung-badge {
  display: inline-flex;
  border: 1px solid var(--tone);
  background: var(--tone-soft);
  color: var(--tone);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.passport-tier-bronze { --tone: var(--bronze); --tone-soft: rgba(192, 138, 82, 0.13); }
.passport-tier-silver { --tone: var(--silver); --tone-soft: rgba(200, 208, 218, 0.10); }
.passport-tier-gold   { --tone: #f0c57a;       --tone-soft: rgba(229, 181, 103, 0.16); }
.pp-rung-secret, .pp-rung-loose { padding-top: 0.85rem; border-top: 1px dashed var(--edge); }
.pp-rung-loose { margin-top: 1rem; }

.pp-rung-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

/* ---------- stamp tiles ---------- */

.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.6rem;
}

.pp-tile {
  position: relative;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: calc(var(--radius) - 2px);
  color: var(--ink-muted);
}
.pp-tile > summary, div.pp-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.65rem 0.65rem;
}
.pp-tile > summary { list-style: none; cursor: pointer; }
.pp-tile > summary::-webkit-details-marker { display: none; }
.pp-tile > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; }
.pp-tile-icon { font-size: 1.35rem; line-height: 1.2; }
.pp-tile-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.pp-tile-line {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pp-tile-more-hint {
  position: absolute;
  top: 0.3rem;
  right: 0.45rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ink-faint);
  transition: transform 120ms ease;
}
.pp-tile[open] .pp-tile-more-hint { transform: rotate(45deg); }
.pp-tile[open] { grid-column: 1 / -1; }
.pp-tile-more {
  padding: 0 0.65rem 0.7rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

.pp-tile.is-open { opacity: 0.78; }
.pp-tile.is-open:hover, .pp-tile.is-open[open] { opacity: 1; }
.pp-tile.is-earned {
  border-color: color-mix(in srgb, var(--tone) 55%, transparent);
  background:
    radial-gradient(90px 50px at 85% -10%, var(--tone-soft), transparent 75%),
    linear-gradient(180deg, var(--tone-soft), transparent 70%),
    var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px color-mix(in srgb, var(--tone) 12%, transparent);
}
.pp-tile.is-earned .pp-tile-name { color: var(--ink); }
.pp-tile.is-earned .pp-tile-line { color: var(--tone); }

.pp-tile.secret-slot { border-style: dashed; }
.pp-secret-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink-muted);
}
.pp-tile.secret-slot.is-found { --tone: var(--warm); --tone-soft: var(--warm-soft); border-style: solid; }
.pp-tile.secret-slot.is-found .pp-secret-mark { color: var(--warm); }

/* ---------- phones ---------- */

@media (max-width: 640px) {
  .pp-book-head { grid-template-columns: 4.25rem minmax(0, 1fr); padding: 0.9rem; gap: 0.5rem 0.9rem; }
  .pp-book-outline { height: 4.25rem; }
  .pp-book-medals { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
  .pp-car { padding: 0.8rem 0.7rem; }
  .pp-rung-tiles { gap: 0.4rem; }
  .pp-tile > summary, div.pp-tile { padding: 0.5rem 0.5rem 0.55rem; }
  .pp-tile-name { font-size: 0.9rem; }
  .pp-tile-line { font-size: 0.68rem; }
  .pp-tile-icon { font-size: 1.2rem; }
}