/* pages.css - unique-ish page pieces (diff browsing + diff rendering) */

/* Diff list (diff.php) */
.list {
}

.pick {
  margin-top: var(--s4);
  margin-bottom: var(--s4);
  padding-top: var(--s3);
  border-top: 4px solid var(--accent);
}

.pick-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s1);
  font-size: var(--h4);
}

.pick-stats {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

.pick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
  margin-top: var(--s1);
}

.btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 12px;
  border: var(--rule-w) solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  border-color: var(--accent);
}

.pill,
.mk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  padding: 4px 10px;
  border-radius: 2px;
  border: var(--rule-w) solid var(--rule);
  background: var(--chip-bg);
  color: var(--ink);
}

.pill-add {
  background: var(--diff-add-bg);
}
.pill-del {
  background: var(--diff-del-bg);
}
.pill-chg {
  background: var(--diff-chg-bg);
}
.pill-noop {
  background: var(--chip-bg);
}

.pick-sub,
.pick-summary {
  color: var(--muted);
  margin-top: var(--s0);
}

/* Diff summary rendering (vertical, clear) */
.df-pre {
  margin-top: var(--s2);
}

.df-line {
  display: block;
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
}

.df-hunk {
  background: var(--diff-hunk);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.92rem;
}

.df-add {
  background: var(--diff-add-bg);
}
.df-del {
  background: var(--diff-del-bg);
}
.df-chg {
  background: var(--diff-chg-bg);
}

.df-row {
  display: flex;
  gap: var(--s1);
  align-items: flex-start;
  overflow-wrap: anywhere;
}

.df-pref {
  font-family: var(--font-mono);
  width: 2.5ch;
  flex: 0 0 auto;
  color: var(--muted);
}

.df-more,
.df-note {
  font-family: var(--font-ui);
  color: var(--muted);
  font-size: 0.92rem;
  padding: 6px 10px;
}

/* Changed blocks: old/new vertical */
.df-chg-row {
  padding: var(--s1) var(--s1);
  border-bottom: 1px solid var(--rule);
}

.df-chg-sides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
}

.df-chg-oldbox,
.df-chg-newbox {
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  overflow: hidden;
}

.df-chg-oldbox {
  background: var(--diff-del-bg);
}
.df-chg-newbox {
  background: var(--diff-add-bg);
}
.wd {
  display: inline;
  font-family: var(--font-mono);
  padding: 0.06em 0.28em;
  border-radius: 4px;
}

.wd-del {
  border-bottom: 4px solid #d24a5a;
}
.wd-add {
  border-bottom: 4px solid #2f9e44;
}

/* ---- Legacy aliases for "Senaste ändringar" page ---- */

/* map old wrapper/header to new layout */
.wrap {
  max-width: min(var(--maxw), var(--measure));
  margin: 0 auto;
  padding: var(--s4) var(--s2) var(--s5);
}

.top {
  max-width: min(var(--maxw), var(--measure));
  margin: 0 auto;
}

/* old cards -> same feel as pick/panel */
.card {
  margin-bottom: var(--s3);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 4px solid var(--accent);
}

/* IMPORTANT: `.title` is H1 in new system; shrink it inside cards */
.card .title {
  font-family: var(--font-ui);
  font-size: var(--h3);
  font-weight: 750;
  letter-spacing: 0;
  line-height: var(--lh-tight);
  text-decoration: none;
  color: var(--ink);
}
.card .title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.row {
  margin-bottom: var(--s1);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
  align-items: baseline;
  margin-bottom: var(--s2);
}

.small {
  font-size: 0.95rem;
}
.mono {
  font-family: var(--font-mono);
}

/* diff list inside each card */
.diffs {
  display: grid;
  gap: var(--s2);
}

.diff {
  border-top: var(--rule-w) solid var(--rule);
  padding-top: var(--s2);
}

.diff-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s1);
  margin-bottom: var(--s1);
}

.diff-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0);
  align-items: baseline;
}

/* summary container just needs spacing; df-* classes already styled */
.df-sum {
  margin-top: var(--s1);
}

/* If general.css is still included, force link color to accent */
.top-link {
  color: var(--accent);
}

/* default child h2 link look (heading/text color) */
.child-title-link {
  color: var(--ink);
  text-decoration: none;
}

/* JS toggles this to trigger a "link flash" that fades back to text color */
.child-title-link.is-scroll-lit {
  animation: childLinkFlashToInk 1400ms ease-out;
}

@keyframes childLinkFlashToInk {
  0% {
    color: var(--accent); /* link color */
    text-decoration-color: currentColor;
    opacity: 1;
  }
  35% {
    color: var(--accent);
    opacity: 1;
  }
  100% {
    color: var(--ink); /* fade back to heading/text color */
    opacity: 1; /* stay visible */
  }
}

/* time since label in top-right of page */
/* stack + center everything inside the top-meta block */
.topbar .top-meta {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers the items */
  text-align: center; /* centers text inside each line */
}

/* make each timer line its own centered row */
.topbar .top-timer-label,
.topbar #time-since {
  width: 100%;
  text-align: center;
}

/* optional: small spacing + mono-like stable digits */
.topbar .top-timer-label {
  margin-top: 6px;
}
.topbar #time-since {
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}