/* 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 18px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* 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 0 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.changelog-card {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 3.5%, transparent), transparent 48%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 5%, transparent);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.changelog-card:hover {
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
}

.changelog-card.is-latest {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--gold) 11%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 3.5%, transparent), transparent 48%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gold) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent);
}

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

.changelog-version {
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: var(--gold-bright);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  font-variant-numeric: tabular-nums;
}

.changelog-date {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.015em;
  font-variant-numeric: tabular-nums;
}

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

.changelog-summary {
  margin: 12px 0 14px;
  color: var(--cream);
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 550;
}

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

.changelog-change {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  color: var(--cream-dim);
  font-size: 0.92rem;
  line-height: 1.6;
}

.changelog-change:first-child {
  border-top: none;
  padding-top: 2px;
}

.changelog-change:last-child {
  padding-bottom: 0;
}

/* Kind chip: fixed column width so every prose line starts on the same x. */
.changelog-kind {
  flex: 0 0 78px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  padding: 3px 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
}

.changelog-change.is-added .changelog-kind {
  color: var(--gold-bright);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--gold) 36%, transparent);
}

.changelog-change.is-improved .changelog-kind {
  color: color-mix(in srgb, var(--cream) 82%, var(--muted));
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  border-color: color-mix(in srgb, var(--line) 90%, transparent);
}

.changelog-change.is-fixed .changelog-kind {
  color: var(--streak-mid);
  background: color-mix(in srgb, var(--streak-mid) 14%, transparent);
  border-color: color-mix(in srgb, var(--streak-mid) 36%, transparent);
}

.changelog-change.is-removed .changelog-kind {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
}

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

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

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

.changelog-dialog-body {
  padding: 14px 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;
}

.changelog-dialog-body .changelog-lede {
  margin-bottom: 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;
  }
}

/* ——— Tab bar ——— */
.changelog-tabs {
  display: flex;
  gap: 2px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 35%, transparent);
}

.changelog-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.changelog-tab-icon {
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.85;
}

.changelog-tab:hover {
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 4%, transparent);
}

.changelog-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.changelog-tab.is-active {
  color: var(--gold-bright);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border-bottom-color: var(--gold);
}

.changelog-tab.is-active .changelog-tab-icon {
  opacity: 1;
}

.changelog-tabpanel {
  display: none;
}

.changelog-tabpanel.is-active {
  display: block;
  animation: changelog-tab-in 0.2s ease-out;
}

@keyframes changelog-tab-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Community Ideas empty state */
.community-ideas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  min-height: 220px;
  border: 1px dashed color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 40%, transparent);
}

.community-ideas-empty p:first-child {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--cream);
  margin: 0 0 10px;
}

.community-ideas-hint {
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 380px;
  margin: 0;
  color: var(--muted);
}

/* ——— Upvote button ——— */
.changelog-upvote {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-2) 55%, var(--panel));
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  margin-left: auto;
}

.changelog-upvote:hover {
  border-color: var(--streak-mid);
  background: color-mix(in srgb, var(--streak-mid) 12%, var(--panel));
  color: var(--streak-mid);
  transform: translateY(-1px);
}

.changelog-upvote:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.changelog-upvote.upvoted {
  border-color: var(--streak-mid);
  background: color-mix(in srgb, var(--streak-mid) 20%, var(--panel));
  color: var(--streak-mid);
}

.changelog-upvote.upvoted .upvote-emoji {
  animation: fire-pop 0.3s ease;
}

@keyframes fire-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.upvote-emoji {
  font-size: 1rem;
  line-height: 1;
}

.upvote-count {
  min-width: 1.5ch;
  text-align: right;
}

/* ——— Community Ideas ——— */
.community-ideas-header {
  margin-bottom: 16px;
  text-align: left;
}

.community-ideas-header h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.01em;
}

.community-ideas-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.community-ideas-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.community-idea-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: changelog-tab-in 0.2s ease-out;
}

.community-idea-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.community-idea-text {
  flex: 1;
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.6;
}

.community-idea-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--muted);
}

.community-idea-upvote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.community-idea-upvote:hover {
  border-color: var(--streak-mid);
  background: color-mix(in srgb, var(--streak-mid) 12%, var(--panel));
  color: var(--streak-mid);
  transform: scale(1.05);
}

.community-idea-upvote:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.community-idea-upvote.upvoted {
  border-color: var(--streak-mid);
  background: color-mix(in srgb, var(--streak-mid) 20%, var(--panel));
  color: var(--streak-mid);
}

.community-idea-upvote.upvoted .upvote-emoji {
  animation: fire-pop 0.3s ease;
}

.community-idea-submit {
  background: color-mix(in srgb, var(--bg-2) 50%, var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 12px;
  animation: changelog-tab-in 0.2s ease-out;
}

.community-idea-input {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--cream);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.community-idea-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent);
}

.community-idea-input::placeholder {
  color: var(--muted);
}

.community-idea-submit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.community-idea-add-btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  font-weight: 650;
  border-radius: 12px;
}

.community-idea-add-btn:hover {
  background: color-mix(in srgb, var(--gold) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  color: var(--gold-bright);
}

/* ——— Community Ideas: Status & Admin ——— */
.community-idea-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 8px;
}

.community-idea-status.status-pending {
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  color: var(--gold-bright);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
}

.community-idea-status.status-rejected {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
}

.community-idea-admin {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  margin-top: 8px;
}

.admin-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--cream);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-btn:hover {
  transform: translateY(-1px);
}

.admin-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.admin-publish:hover {
  border-color: var(--streak-mid);
  background: color-mix(in srgb, var(--streak-mid) 15%, var(--panel));
  color: var(--streak-mid);
}

.admin-reject:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 15%, var(--panel));
  color: var(--danger);
}

.admin-remove:hover {
  border-color: var(--muted);
  background: color-mix(in srgb, var(--muted) 15%, var(--panel));
  color: var(--muted);
}