/* ═══════════════════════════════════════════════════════════════
   The generated pages — profiles, circuits, drift, history.

   Loaded after app.css and built from its parts: the same tokens, the
   same tables, stat strip, eyebrows and buttons. What is here is only
   what those pages have that the home page does not — a breadcrumb,
   cards, feeds, sessions that fold open, a sparkline.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────────────────────── */

.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--glass-border);
  padding-block: clamp(1.8rem, 4vw, 3rem) clamp(1.8rem, 4vw, 2.6rem);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: -50% -10% auto;
  height: 140%;
  z-index: -1;
  background: radial-gradient(55% 50% at 15% 0%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
/* With a photo behind it the header gets room to breathe. */
.page-hero.has-image { padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.page-hero .hero-bg img { opacity: 0.5; }

.page-title {
  font-size: var(--step-4);
  max-width: 20ch;
  overflow-wrap: anywhere;
}
.page-hero .lede { max-width: 62ch; }
.page-hero .stats { margin-top: 1.8rem; }
.stat-value.accent { color: var(--accent); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 0.35rem; opacity: 0.5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text-primary); }

.address {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  align-self: center;
}

/* ── Panels and tables ───────────────────────────────────────── */

.panel {
  margin-top: 1.4rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  overflow: hidden;
}
.section .controls { margin-top: 0; }

.rank { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; }
.rank.p1 { color: var(--gold); }
.rank.p2 { color: var(--silver); }
.rank.p3 { color: var(--bronze); }
td:has(> .rank) { white-space: nowrap; }
.of { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); }

.row-link { text-decoration: none; font-weight: 600; }
.row-link:hover { color: var(--accent); }
.muted { color: var(--text-secondary); }
.gain { font-family: var(--font-mono); font-size: 0.74rem; color: var(--live); margin-left: 0.3rem; }

.tag.cut { color: var(--down); border-color: var(--down); }
tr.is-cut td { opacity: 0.55; }
tr[hidden] { display: none; }

@media (max-width: 860px) {
  .panel .sector-col, .panel .when-col { display: none; }
}
@media (max-width: 560px) {
  .panel .car-col { display: none; }
}

/* ── Cards ───────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  min-width: 0;
}
.section-alt .card { background: var(--bg-primary); }
.card { overflow: hidden; }
.card h3 { font-size: 1.2rem; }

/* The circuit's photo on top of its card, tinted like the server rows
   and dissolving into the card. */
.card-media {
  position: relative;
  height: 8.5rem;
  margin: -1.2rem -1.25rem 0.5rem;
  overflow: hidden;
  background: radial-gradient(90% 120% at 20% 0%, var(--accent-glow), transparent 70%);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg-primary), transparent 65%),
    color-mix(in srgb, var(--accent) 22%, transparent);
}
.card-link:hover .card-media img { transform: scale(1.05); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card-link { text-decoration: none; transition: border-color 0.18s ease, transform 0.18s ease; }
.card-link:hover { border-color: var(--accent); }
.card-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.card-sub { font-size: 0.82rem; color: var(--text-secondary); }
.card-foot { margin-top: auto; padding-top: 0.6rem; font-size: 0.76rem; color: var(--text-secondary); }
.card-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
  margin: 0.6rem 0 0;
}
.card-figures div { min-width: 0; }
.card-figures dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.card-figures dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-figures dd.time { font-weight: 500; }
.card-figures dd.lead { color: var(--accent); }
.cards .card-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-tracks .card-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A personal best that only goes down: dots are each day's best, the
   line is the best so far. */
.spark { margin-top: 0.5rem; height: 96px; }
.spark svg { width: 100%; height: 100%; overflow: visible; }
.spark-pb { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark-days circle { fill: var(--text-secondary); opacity: 0.7; }

/* ── Feeds ───────────────────────────────────────────────────── */

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
  gap: 2.5rem;
}
.feed {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feed li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--table-row-border);
  font-size: 0.88rem;
}
.feed li:last-child { border-bottom: none; }
.feed li:hover { background: var(--hover-bg); }
.feed-date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary); }
.feed-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.feed-time { text-align: right; white-space: nowrap; }
.feed .driver-link strong { font-weight: 600; }

@media (max-width: 560px) {
  .feed li { grid-template-columns: minmax(0, 1fr) auto; }
  .feed-date { grid-column: 1 / -1; }
}

/* ── Sessions ────────────────────────────────────────────────── */

.sessions {
  margin-top: 1.4rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg);
}
.session { border-bottom: 1px solid var(--table-row-border); }
.session:last-child { border-bottom: none; }
.session summary {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto 7rem;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
}
.session summary::-webkit-details-marker { display: none; }
.session summary:hover { background: var(--hover-bg); }
.session[open] summary { background: var(--accent-subtle); }
.session-date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary); }
.session-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-count { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary); white-space: nowrap; }
.session-best { text-align: right; white-space: nowrap; }
.session table { border-top: 1px solid var(--glass-border); }
.session thead th { position: static; }

@media (max-width: 620px) {
  .session summary { grid-template-columns: minmax(0, 1fr) auto; }
  .session-date, .session-count { grid-column: auto; }
}