/*
 * Styles for the prose pages, loaded only by them. They ride on top of
 * styles.css for the tokens, the top bar and the controls, and stay out of the
 * map page's stylesheet because that page never uses any of it — the map's
 * transfer budget is tight enough to notice a kilobyte.
 */

/* ------------------------------------------------------------- documents -- */

/*
 * The map page is locked to the viewport — the map fills it and nothing
 * scrolls. A prose page is the opposite, so it opts out rather than the app
 * opting in: `body` keeps its defaults and .doc releases the lock.
 */
body.doc { height: auto; overflow: auto; }

.doc-main { flex: 1; padding: var(--s6) var(--s5); }

.doc-body {
  max-width: 68ch;
  margin: 0 auto;
}

.doc-title {
  margin: 0 0 var(--s2);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.doc-intro {
  margin: 0 0 var(--s6);
  color: var(--ink-2);
}

.release { margin-bottom: var(--s6); }

/* The date is the heading, so it needs to read as one without shouting. */
.release-date {
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-1);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.release-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* The tag gets a column of its own, sized to the widest word, so all sixteen
   entries share one left edge. Inline tags read fine on a single line and turn
   the whole list ragged as soon as any entry wraps — which most of them do. */
.release-list li {
  display: grid;
  /*
   * A fixed first column, not max-content: each entry is its own grid, so
   * sizing to content gives "NEW" a narrow gutter and "CHANGED" a wide one and
   * the text never lines up. minmax(0, 1fr) on the second, because a grid
   * column will not shrink below its content's minimum width without a floor —
   * which took the whole page sideways on a phone.
   */
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  color: var(--ink-2);
  line-height: 1.5;
}

.release-list strong { color: var(--ink-1); font-weight: 600; }

.tag {
  justify-self: stretch;
  padding: 1px 4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.tag-new { background: var(--red-wash); color: var(--red-bright); }

/* A link styled as a button needs the button's box, not an inline one. */
a.ghost-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.wordmark-link { color: inherit; text-decoration: none; }
.wordmark-link:hover .wordmark-sound { color: var(--red-bright); }

/* About the data: one short section per source. */
.about-source { margin-bottom: var(--s6); color: var(--ink-2); line-height: 1.5; }
.about-source p { margin: 0 0 var(--s3); }
.about-source a { color: var(--ink-1); }
.about-heading { margin: 0 0 var(--s2); font-size: var(--t-lg); font-weight: 600; color: var(--ink-1); }

/* The credit closes the page, set apart from what is above it. */
.doc-body .data-credit {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-1);
}

/* ---------------------------------------------------------- country pages -- */

/*
 * A country's own page (c/BR.html, written by server/share.js): what a search
 * lands on. The wordmark sits above the heading as the way home, because the
 * heading itself is about the country.
 */
.doc-brand {
  margin: 0 0 var(--s4);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.doc-heading {
  margin: var(--s6) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-1);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The chart, in order: title, then who put it up, then whether it is only here. */
.song-list {
  margin: 0;
  padding-left: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  line-height: 1.4;
}
.song-list li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.song-title { color: var(--ink-1); font-weight: 600; }
.song-channel { color: var(--ink-2); }
.song-channel::before { content: "· "; color: var(--ink-3); }
.song-only {
  display: inline-block;
  margin-left: var(--s1);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--local-5);
  color: #16110f;
  font-size: 11px;
  font-weight: 600;
  vertical-align: 1px;
  white-space: nowrap;
}

/* Every other country: the way on, for a reader and for a crawler. */
.country-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  line-height: 1.6;
}
.country-list a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-1); }
.country-list a:hover { color: var(--ink-1); border-bottom-color: currentColor; }