/* What's new (/new) and the changelog (/changelog). Loaded by those two pages only
   (gen/pages_meta.py). The panels are the site's dark .card board (station window body
   colours), not a stretched plate: a tall list on a nine sliced info_frame_huge smears its
   paper grain (MISTAKES 2026-09-17, owner round 4 "stretched frames"). Light ink on the
   dark board keeps every number readable. */

.wn { max-width: 1180px; font-size: 17px; line-height: 1.55; color: var(--ink); }
.wn .lead { margin: 6px 0 18px; font-size: 18px; color: var(--ink); }
.wn h2 { margin: 30px 0 2px; }
.wn-sub { margin: 0 0 16px; color: var(--ink-muted); font-size: 15px; }
.wn-more { margin: 18px 0 0; color: var(--ink); }

.wn-hl,
.wn-card,
.cl-build,
#main a.wn-feat {
  background: linear-gradient(180deg, rgba(58, 42, 34, 0.92), rgba(30, 22, 20, 0.92));
  border: 1px solid #6b5234;
  box-shadow: inset 0 1px 0 rgba(232, 199, 115, 0.18), 0 2px 10px rgba(0, 0, 0, 0.35);
  border-radius: 3px;
}

/* the few big changes */
.wn-hl { margin: 0 0 20px; padding: 14px 22px; border-left: 3px solid var(--gold); }
#main .wn-hl h3 { margin: 0 0 6px; font-size: 18px; }
.wn-hl ul { margin: 0; padding-left: 20px; }
.wn-hl li { margin: 5px 0; }
.wn-hl li::marker { color: var(--gold); }

/* one board per part of the game, full width; rows flow in columns inside */
.wn-card { margin: 0 0 18px; padding: 16px 22px 12px; }
#main .wn-card h3 { margin: 0 0 4px; font-size: 20px; }
.wn-card h4 {
  margin: 16px 0 2px;
  padding-bottom: 4px;
  font-family: "Cinzel", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-warm);
  border-bottom: 1px solid rgba(232, 199, 115, 0.25);
}
.wn-card h4:first-of-type { margin-top: 6px; }
#main .wn-b-stronger { color: #a6db8c; }
#main .wn-b-weaker { color: #f59a86; }
.cl-n {
  display: inline-block;
  min-width: 22px;
  margin-left: 4px;
  padding: 0 7px;
  border-radius: 10px;
  font-family: "Philosopher", serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  vertical-align: 2px;
  background: rgba(232, 199, 115, 0.16);
  color: var(--ink);
}

/* rows: the entry, then one line per changed number or text */
.wn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  column-gap: 28px;
}
.wn-list > li { min-width: 0; padding: 9px 0; border-bottom: 1px solid rgba(237, 227, 204, 0.1); }
.wn-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-weight: 700; }
.wn-name .refx img { width: 24px; height: 24px; }
.wn-tag { font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.dv { margin: 3px 0 0 32px; font-size: 16px; }
.dv-k { color: var(--ink-muted); margin-right: 3px; }
.dv-old { color: #c9bca4; }
.dv-to { color: var(--ink-muted); padding: 0 2px; }
.dv-new { font-weight: 700; color: var(--ink); }
.dv-new.up { color: #a6db8c; }
.dv-new.down { color: #f59a86; }
.dv-pct { font-size: 14px; color: var(--ink-muted); }
.dv-text .dv-body { color: var(--ink); }
.dv-was, .dv-now { display: block; margin-top: 2px; }
.dv-was { color: #c9bca4; }
.dv-w {
  display: inline-block;
  min-width: 52px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wn del { color: #f59a86; text-decoration: line-through; text-decoration-thickness: 1px; }
.wn ins { color: #a6db8c; font-weight: 700; text-decoration: none; }

/* New on the wiki */
.wn-feats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
#main a.wn-feat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 18px 16px;
  color: var(--ink);
  text-decoration: none;
}
#main a.wn-feat:hover { border-color: var(--gold); }
.wn-feat time { font-size: 13px; color: var(--ink-muted); }
.wn-feat strong { font-family: "Cinzel", serif; font-size: 18px; color: var(--gold); }
.wn-feat span { font-size: 16px; line-height: 1.45; color: var(--ink); }

/* changelog: one fold per build */
.cl-filter { margin: 0 0 18px; }
.cl-filter .shop-tabs { margin-bottom: 10px; }
.cl-filter .shop-tabs button { flex: 0 1 150px; }
.cl-filter .filters input { width: min(360px, 100%); }
.cl-none { color: var(--ink-muted); }
.cl-build { margin: 0 0 14px; padding: 2px 22px 12px; }
.cl-build > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 12px 0 8px;
  cursor: pointer;
  list-style: none;
}
.cl-build > summary::-webkit-details-marker { display: none; }
.cl-build > summary::before {
  content: "";
  flex: none;
  align-self: center;
  width: 14px;
  height: 14px;
  background: url("/assets/ui/game/dropdown_arrow.png?v=ede12e44") center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform 0.15s;
}
.cl-build[open] > summary::before { transform: none; }
.cl-v { font-family: "Cinzel", serif; font-weight: 700; font-size: 21px; color: var(--gold); }
.cl-meta { font-size: 15px; color: var(--ink-muted); }
.cl-count { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--ink); }
.cl-body { padding-top: 2px; border-top: 1px solid rgba(232, 199, 115, 0.25); }
#main .cl-sec h3 { margin: 16px 0 2px; font-size: 17px; }
.cl-build p { margin: 10px 0 0; }
.cl-st {
  display: inline-block;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 3px;
}
.cl-add { background: rgba(166, 219, 140, 0.16); color: #a6db8c; }
.cl-del { background: rgba(245, 154, 134, 0.16); color: #f59a86; }
.wn [hidden] { display: none !important; }

@media (max-width: 600px) {
  .wn { font-size: 16px; }
  .wn .lead { font-size: 16px; }
  .wn-card, .wn-hl, .cl-build { padding-left: 14px; padding-right: 14px; }
  .wn-list { grid-template-columns: minmax(0, 1fr); }
  .dv { margin-left: 12px; font-size: 15px; }
  .cl-v { font-size: 18px; }
  .cl-count { margin-left: 0; }
  .cl-filter .shop-tabs button { flex: 1 1 120px; }
}
.wn-multi { flex-direction: column; align-items: flex-start; gap: 2px; }

/* What's new: the developer's own patch notes (data/patch_notes.json), a closed board beside
   the data comparison */
.wn-off .cl-body h4 {
  margin: 16px 0 2px;
  font-family: "Cinzel", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-warm);
}
.wn-off ul { margin: 4px 0 0; padding-left: 20px; }
.wn-off li { margin: 3px 0; }