/* Styles for /changes and /changes/<id>. app.css owns the tokens, the masthead
   and .wrap; brief.css owns .brief and the standfirst. This adds what the
   changelog needs and nothing else.

   No inline styles anywhere - the CSP is style-src 'self' with no exception,
   and these pages are rendered by a Pages Function that sets that header on
   itself (lib/http.mjs), so an inline style attribute here fails live while
   looking fine in any editor. */

/* --- status ------------------------------------------------------------ */

.chg-status {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 15px;
  color: var(--ink-soft);
}

/* The checker fell over. Loud, because a stale changelog and a healthy one
   look identical from outside and only this line tells them apart. */
.chg-status--warn {
  border-color: var(--amber);
  background: var(--amber-soft);
  color: var(--ink);
}

.chg-feeds,
.chg-source {
  max-width: 68ch;
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--ink-soft);
}

.chg-empty {
  max-width: 68ch;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
}

/* --- the list of changes ----------------------------------------------- */

.chg {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.chg:first-of-type { border-top: 1px solid var(--line-soft); }

.chg__head {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.chg__head a { color: var(--ink); }

.chg__meta {
  margin: 0;
  font-size: 13px;
  color: var(--ink-faint);
}

/* Says the entry was worked out afterwards rather than watched happening. It
   is a qualifier on a claim, so it reads as one instead of as a badge. */
.chg__tag {
  font-variant: all-small-caps;
  letter-spacing: .04em;
  color: var(--amber);
}

.chg-meta-line {
  margin: 0;
  font-size: 14px;
  color: var(--ink-faint);
}

.chg-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-faint);
}

/* --- the item tables ---------------------------------------------------- */

/* 254 rows in one of these. The wrapper scrolls rather than the page, so a
   long tariff description cannot push the whole layout sideways on a phone. */
.chg-t {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14px;
}

.chg-t thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  text-align: left;
  font-size: 12px;
  font-variant: all-small-caps;
  letter-spacing: .04em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding: 6px 10px 6px 0;
}

.chg-t tbody th,
.chg-t tbody td {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}

.chg-t tbody th { white-space: nowrap; }

.chg-t code {
  font-size: 13px;
  color: var(--ink);
}

.chg-t td { color: var(--ink-soft); }

.chg-t__rate {
  white-space: nowrap;
  color: var(--ink) !important;
}