/* =========================================================
   Delegee Shield — What's New page
   Depends on: tokens.css, layout.css (must load first).

   The page reads as a docket (2026-07-22): each release is a record ruled
   off across the pane, with its date on a sticky stamp in the left margin,
   so you always know which release you are reading. That device is
   deliberately NOT shared with /privacy, /terms or /faq — a policy is a
   reference document and navigates by a section index, an FAQ is a list of
   questions. What IS shared is the head (`.rdg-head`, layout.css) and the
   entry anatomy below. Loaded globally from base.html, so everything here
   stays scoped to `.rel*`.
   ========================================================= */

/* ===== The release list ===== */
.rel-list { margin-top: var(--sp-2); }

/* A record: sticky margin stamp + the release itself. The stamp column is
   --sp-12 (96px), which fits "22.7.2026." in mono at --fs-sm with room to
   spare; the rule is the same hairline `.dreg__row` uses, not the heavier
   --border-strong (that one closes the head). */
.rel {
  display: grid;
  grid-template-columns: var(--sp-12) minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--border);
}

.rel__stamp {
  position: sticky;
  top: var(--sp-4);
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

/* Dotted d.m.yyyy. — the form the register and the rail already write.
   tabular-nums so stamps down the margin line up as a column. */
.rel__date {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Unseen since the last visit: the stamp warms, and carries the flag below.
   Colour never alone — the "New" text does the work for a colour-deficient
   reader (DESIGN.md §2). */
.rel.is-new .rel__date { color: var(--accent-soft-fg); }

.rel__flag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-soft-fg);
  background: var(--accent-soft-bg);
  border: 1px solid var(--status-pending-border);
  border-radius: var(--r-md);
  padding: 2px 7px;
  line-height: 1.4;
}

.rel__record { min-width: 0; }

.rel__title {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg);
  text-wrap: balance;
}

/* ===== Entries =====
   Still a <ul> (a release IS a list of changes), styled as titled entries
   rather than discs: paragraph-long prose behind a bullet reads as a wall. */
.rel__entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.rel__entries li {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* The lead-in becomes the entry's name. `> strong:first-child` is the whole
   trick: bullets are written "**Lead-in.** then prose", so the first child
   promotes — while a bold run mid-sentence ("Names in **bold**") is not a
   first child and stays inline. Bullets with no lead-in stay plain prose. */
.rel__entries li > strong:first-child {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.rel__entries li strong { color: var(--fg); font-weight: var(--fw-semibold); }
.rel__entries li code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--brand-soft-bg);
  color: var(--brand-soft-fg);
  border-radius: var(--r-sm);
  padding: 1px 4px;
}

/* ===== "Earlier" — closes the run of unread releases ===== */
.rel-seen {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.rel-seen::before,
.rel-seen::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ===== Empty state ===== */
.rel-empty {
  color: var(--fg-3);
  font-size: var(--fs-body);
  margin: var(--sp-7) 0;
}

/* ===== ≤900px =====
   The margin column drops and the stamp lies horizontally above the title —
   the same move the register makes with its status column at this
   breakpoint (dashboard-v2.css). */
@media (max-width: 900px) {
  .rel {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-6) 0;
  }
  .rel__stamp {
    position: static;
    flex-direction: row;
    align-items: center;
  }
}

/* ===== Avatar dropdown badge =====
   The unread count on the account menu's "What's new" row. Unrelated to the
   page itself, but this is the stylesheet base.html loads globally. */
.app-header .user-menu-item--has-badge {
  justify-content: flex-start;
}

.user-menu-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  background: var(--gold-500);
  color: var(--navy-900);
  border-radius: var(--r-pill);
  line-height: 1;
}

/* ===== Dark mode adjustments =====
   The gold badge is mode-invariant by design (same fill in both themes, like
   the rail's "New idonymisation" tile). */
[data-theme="dark"] .user-menu-badge {
  background: var(--gold-500);
  color: var(--navy-900);
}