/* Changelog panel. Colours come from the shared tokens in style_dark.css so
   both the light and dark themes keep working without a second set of
   overrides.

   This is the popup's content, and the popup is the changelog's only home, so
   there is no page-level wrapper here any more — the shell in base.html owns
   the box, the header and the scroller. */

.changelog-lede {
  margin: 0 0 16px;
  color: var(--cream-dim);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* An <ol> because the order IS the content — newest first is the whole point of
   a changelog, and a bullet list would leave the sequence unmarked. */
.changelog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.changelog-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 22px 18px;
}

.changelog-card.is-latest {
  border-color: color-mix(in srgb, var(--gold) 52%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%),
    var(--panel);
}

.changelog-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.changelog-version {
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: 999px;
  color: var(--gold-bright);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.changelog-date {
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.changelog-latest-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line));
  color: var(--gold-bright);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.changelog-summary {
  margin: 12px 0 16px;
  color: var(--cream);
  font-size: 1rem;
  line-height: 1.7;
}

.changelog-changes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.changelog-change {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--cream-dim);
  font-size: 0.96rem;
  line-height: 1.65;
}

/* The kind tag is a fixed-width column so every line of prose starts at the
   same x. With the tag inline instead, each entry would start wherever its own
   word happened to end and the column would read as ragged. */
.changelog-kind {
  flex: 0 0 76px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.changelog-change.is-added .changelog-kind {
  color: var(--gold-bright);
}

.changelog-change.is-improved .changelog-kind {
  color: var(--cream-dim);
}

.changelog-change.is-fixed .changelog-kind {
  color: var(--streak-mid);
}

.changelog-change.is-removed .changelog-kind {
  color: var(--danger);
}

.changelog-change-text {
  min-width: 0;
  flex: 1;
}

.changelog-empty {
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.98rem;
}

.changelog-empty a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.changelog-dialog-body {
  padding: 16px 18px 18px;
}

/* ——— The dialog ———
   The popup the rail's Changelog row opens, over whatever page you are on.

   It reuses the `settings-dialog*` classes for the shell — the frame, header,
   close button, backdrop and scroller are that dialog's, unchanged — so the two
   popups are the same modal by construction rather than two near-copies that
   drift apart. Only the box size and the inner spacing are decided here.

   This file is loaded by base.html rather than by any page, because the panel is
   on every page: a stylesheet that only arrived with one route would leave the
   popup unstyled everywhere else, which is an unscrollable white box in the
   middle of the screen. It loads after style_settings.css, so these single-class
   rules win over the shell's without needing !important. */
.changelog-dialog {
  /* Narrower and shorter than settings. Settings fills a viewport with three
     cards of controls; the changelog is a list you read top-down, and a taller
     box would put the newest release and the oldest in the same glance for no
     gain. Roughly the same footprint, which is what "the same popup as
     settings" has to mean. */
  width: min(720px, calc(100vw - 32px));
  height: min(78vh, 720px);
  max-height: min(78vh, 720px);
}

.changelog-dialog-body .changelog-list {
  /* The cards sit closer together than a page would space them: in a dialog the
     reader is scanning, not reading top to bottom, so the gap can be tighter
     without the releases running into each other. */
  gap: 12px;
}

.changelog-dialog-body .changelog-card {
  padding: 16px 18px 14px;
}

/* On a phone the shell becomes a bottom sheet at 640px. The override has to be
   repeated here: media queries add no specificity, and `.changelog-dialog`
   above is an unconditional rule that would otherwise beat the shell's
   `.settings-dialog { width: 100% }` from inside the query. */
@media (max-width: 640px) {
  .changelog-dialog {
    width: 100%;
    max-width: 100%;
    height: 92vh;
    max-height: 92vh;
  }

  .changelog-dialog-body {
    padding: 13px 15px 18px;
    /* Clears the home indicator on a phone that has one. */
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }
}

/* One column of text at 320px cannot hold a 76px tag beside it without the
   words wrapping to two-character lines, so the tag drops above its own entry
   and the column returns to full width. Below the dialog's own 640px sheet
   breakpoint, because by then the dialog is full-bleed and has the width back. */
@media (max-width: 560px) {
  .changelog-change {
    flex-direction: column;
    gap: 4px;
  }

  .changelog-kind {
    flex: 0 0 auto;
  }
}