/* css/page.css. Galaxy static share pages (person/<id>, bar/<id>) ONLY.
   Generated and owned by tools/prerender.py. Reuses tokens from css/app.css
   (colors, spacing, fonts); this file adds layout for the no-JS page shell.
   Do not hand-edit, re-run tools/prerender.py after data changes. */

.pg-body { min-height: 100vh; display: flex; flex-direction: column; }

.pg-topbar {
  padding: var(--space-4) clamp(var(--space-4), 3vw, var(--space-10));
  border-bottom: 1px solid var(--border-soft);
}
.pg-topbar .brand { display: inline-flex; align-items: baseline; gap: var(--space-2); text-decoration: none; color: var(--brass); }
.pg-topbar .brand-name { font-family: var(--serif); font-size: var(--text-lg); color: var(--text); }

.pg-main {
  flex: 1; max-width: 72ch; margin: 0 auto; width: 100%;
  padding: clamp(var(--space-6), 4vw, var(--space-12)) clamp(var(--space-4), 3vw, var(--space-6));
}

.pg-eyebrow {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .16em;
  color: var(--faint); margin-bottom: var(--space-2);
}
.pg-title { font-family: var(--serif); font-size: var(--text-2xl); font-weight: 400; margin: 0 0 var(--space-3); }
.pg-summary { color: var(--muted); max-width: 60ch; margin-bottom: var(--space-5); }
.pg-cities { color: var(--cool); font-size: var(--text-sm); margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.pg-cities a { color: var(--cool); }

/* --- city pages --- */
.pg-crumbs { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-3); }
.pg-h1 { font-family: var(--serif); font-size: var(--text-2xl); line-height: 1.1; margin: 0 0 var(--space-3); letter-spacing: -.01em; }
.pg-h2 { font-family: var(--serif); font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.pg-section { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.pg-note { color: var(--muted); font-size: var(--text-sm); max-width: 68ch; margin: 0 0 var(--space-4); }
.pg-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.pg-list li { font-size: var(--text-sm); line-height: 1.5; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.pg-list li:last-child { border-bottom: 0; }
.pg-faint { color: var(--muted); }
@media (min-width: 760px) { .pg-list { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-6); } }

.pg-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.pg-cta-main { font-weight: 500; }

.pg-hairline { border-top: 1px solid var(--border-soft); margin: var(--space-6) 0; }
.pg-section-title { font-family: var(--serif); font-size: var(--text-lg); font-weight: 400; margin-bottom: var(--space-4); }

.pg-venue-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4);
  margin: var(--space-5) 0; padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
}
.pg-venue-facts dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: var(--space-1); }
.pg-venue-facts dd { margin: 0; font-size: var(--text-base); }

.pg-stoplist { list-style: none; margin: 0; padding: 0; }
.pg-stop { border-bottom: 1px solid var(--border-soft); padding: var(--space-4) 0; }
.pg-stop:last-child { border-bottom: 0; }
.pg-stop-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; margin-bottom: var(--space-1); }
.pg-venue-link { font-family: var(--serif); font-size: var(--text-lg); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.pg-venue-link:hover { border-bottom-color: var(--brass); }
.pg-years { font-family: var(--mono); font-size: var(--text-xs); color: var(--brass); letter-spacing: .04em; }
.pg-stop-role { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-2); }

.pg-srclist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pg-srclist li { display: inline-flex; }
.pg-src {
  display: inline-block; font-size: var(--text-xs); color: var(--muted); text-decoration: none;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 1px var(--space-2); background: var(--surface-2); max-width: 32ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pg-src:hover { color: var(--text); border-color: var(--brass-dim); }
.pg-nosrc { font-size: var(--text-xs); color: var(--cool); border: 1px dashed var(--cool-dim); border-radius: var(--radius-sm); padding: 1px var(--space-2); display: inline-block; }
.pg-gap { color: var(--cool); font-style: italic; }
.pg-gap-block { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: var(--space-5); color: var(--muted); }

/* ---- accolades ----
   Awards get exactly one visual privilege here: a warm left rule. No gold, no trophies, no laurel
   wreaths. Everything else on this page is a sourced fact set plainly, and dressing one class of
   fact up in medals would make the plain ones look like the afterthought. A win reads stronger than
   a nomination through weight and colour on that rule, which is the device the timeline already
   uses, so nothing new has to be learned to read it. */
.pg-acc-body { margin-bottom: var(--space-6); }
.pg-acc-body-name {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em;
  color: var(--faint); margin: 0 0 var(--space-2); font-weight: 400;
}
.pg-acc-list { list-style: none; margin: 0; padding: 0; }
.pg-acc-row {
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft); border-left: 2px solid transparent;
}
.pg-acc-row:last-child { border-bottom: 0; }
.pg-acc-rank { border-left-color: var(--cool-dim); }
.pg-acc-win { border-left-color: var(--brass); }
.pg-acc-what { font-size: var(--text-base); color: var(--text); }
.pg-acc-win .pg-acc-what { font-weight: 600; }
.pg-acc-what a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-soft); }
.pg-acc-what a:hover { border-bottom-color: var(--brass); }
.pg-acc-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted);
}
.pg-acc-word {
  text-transform: uppercase; letter-spacing: .1em; font-size: var(--text-xs);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px var(--space-2); color: var(--muted);
}
.pg-acc-win .pg-acc-word { border-color: var(--brass-dim); color: var(--brass); }
.pg-acc-quote {
  font-family: var(--serif); font-size: var(--text-sm); color: var(--muted);
  border-left: 1px solid var(--border-soft); padding-left: var(--space-3); margin-top: var(--space-2);
}
.pg-acc-city { color: var(--faint); font-size: var(--text-xs); }
/* The bar beside a competitor's name is context, not the subject, so it reads quieter. */
.pg-acc-at { color: var(--cool-dim); font-size: var(--text-sm); }
.pg-acc-at a { color: inherit; }

/* A ranked list printed as a list. The number is the whole point of a top fifty, so it is set in the
   mono face with tabular figures at a fixed width: the ranks then form a column the eye can run
   down, which is how anybody actually reads one. */
.pg-rank-list { list-style: none; margin: 0; padding: 0; }
.pg-rank-row {
  display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border-soft);
}
.pg-rank-row:last-child { border-bottom: 0; }
.pg-rank-num {
  font-family: var(--mono); font-size: var(--text-sm); color: var(--brass);
  text-align: right; font-variant-numeric: tabular-nums;
}
.pg-rank-name { font-size: var(--text-base); }
.pg-rank-name a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-soft); }
.pg-rank-name a:hover, .pg-rank-name a:focus-visible { border-bottom-color: var(--brass); }
@media (max-width: 620px) {
  .pg-rank-row { grid-template-columns: 2.4rem 1fr; }
  .pg-rank-row .pg-acc-city { grid-column: 2; }
}

.pg-srcline { font-size: var(--text-xs); color: var(--muted); margin: 0 0 var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pg-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pg-year-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--brass-dim); border-radius: 999px; padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm); color: var(--brass); text-decoration: none;
}
.pg-year-chip:hover { border-color: var(--brass); color: var(--text); }

.pg-footer {
  border-top: 1px solid var(--border-soft); padding: var(--space-6) clamp(var(--space-4), 3vw, var(--space-10));
  color: var(--faint); font-size: var(--text-xs);
}
.pg-honesty { color: var(--muted); max-width: 62ch; margin: 0 0 var(--space-2); font-family: var(--serif); font-size: var(--text-sm); }

/* Breadcrumb strip above the H1. Small, unobtrusive, exists so schema and humans agree. */
.pg-breadcrumbs {
  padding: var(--space-3) clamp(var(--space-4), 3vw, var(--space-10)) 0;
  font-size: var(--text-xs); color: var(--faint);
}
.pg-breadcrumbs a { color: var(--muted); text-decoration: none; }
.pg-breadcrumbs a:hover { color: var(--text); }

/* Byline sits at the bottom of every page "main" region, above the site footer. */
.pg-byline {
  margin: var(--space-8) 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-soft);
  color: var(--muted); font-size: var(--text-sm); font-family: var(--serif);
}
.pg-byline a { color: var(--brass); text-decoration: none; }
.pg-byline a:hover { text-decoration: underline; }

/* Ecosystem footer block: the same person runs these other properties. */
.pg-eco { margin-top: var(--space-4); }
.pg-eco-label {
  margin: 0 0 var(--space-2); color: var(--muted);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em;
}
.pg-eco-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-1) var(--space-4);
}
.pg-eco-list li { line-height: 1.5; }
.pg-eco-list a { color: var(--brass); text-decoration: none; }
.pg-eco-list a:hover { text-decoration: underline; }

/* Documented colleagues block, person page. */
.pg-colleague-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-1) var(--space-4);
}
.pg-colleague-list li { line-height: 1.5; }
.pg-colleague-list a { color: var(--brass); text-decoration: none; }
.pg-colleague-list a:hover { text-decoration: underline; }

/* About page bullet list. */
.pg-rulelist { padding-left: 1.25em; }
.pg-rulelist li { margin-bottom: var(--space-2); line-height: 1.5; }