/* ==========================================================================
   Public Change Log page (p_changelog.cfm, i.cfm?p=changelog)
   Built on the public-modern.css token set — loaded conditionally by i_p.cfm.
   ========================================================================== */

/* ---------- Header band ---------- */
.clog-header {
  padding: clamp(3rem, 6vw, 4.5rem) var(--sp-6) clamp(2.25rem, 4vw, 3rem);
  border-bottom: var(--border-panel);
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(59, 158, 206, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, rgba(9, 16, 29, 0.96) 0%, rgba(6, 8, 15, 1) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.clog-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 158, 206, 0.3), transparent);
}

/* NOTE ON UNITS: bootstrap.min.css sets html { font-size: 10px }, so rem values
   here compute against a 10px root (0.9rem = 9px). Font sizes reuse the
   public-modern tokens so this page always matches the other modern pages;
   layout WIDTHS are in px (like --max-w) so the 10px root can't shrink them. */

.clog-label {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.clog-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.875rem);
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.025em;
  margin: var(--sp-3) 0 var(--sp-4);
  line-height: 1.15;
}

.clog-sub {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.clog-sub a {
  color: var(--accent-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
}

.clog-sub a:hover { border-bottom-color: var(--accent-bright); }

/* ---------- Jump index ---------- */
.clog-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  max-width: 900px;
  margin: var(--sp-8) auto 0;
  padding: 0 var(--sp-4);
}

.clog-toc a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: var(--accent-ghost);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.clog-toc a:hover {
  color: var(--text-bright);
  border-color: rgba(59, 158, 206, 0.45);
  background: rgba(59, 158, 206, 0.14);
}

/* ---------- Timeline column ---------- */
.clog-list {
  position: relative;
  max-width: 900px;
  margin: var(--sp-10) auto var(--sp-20);
  padding: 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* vertical rail */
.clog-list::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: calc(var(--sp-4) + 5px);
  width: 1px;
  background: linear-gradient(180deg, rgba(59, 158, 206, 0.3), rgba(59, 158, 206, 0.06));
}

.clog-entry {
  position: relative;
  margin-left: var(--sp-8);
  background: var(--surface-raised);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
  scroll-margin-top: 6rem;
  transition: border-color var(--t-fast);
}

.clog-entry:hover { border: var(--border-panel); }

/* timeline dot */
.clog-entry::before {
  content: '';
  position: absolute;
  top: 1.9rem;
  left: calc(-1 * var(--sp-8) - 0px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface-base);
  border: 2px solid var(--accent-muted);
}

.clog-entry:target::before {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

/* ---------- Entry header ---------- */
.clog-entry-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}

.clog-badge {
  align-self: center;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.clog-badge--improve { color: var(--accent-bright); background: var(--accent-ghost); border: 1px solid var(--accent-line); }
.clog-badge--bugfix  { color: var(--status-ok); background: var(--status-ok-bg); border: 1px solid rgba(61, 170, 109, 0.25); }
.clog-badge--change  { color: var(--amber); background: var(--amber-dim); border: 1px solid rgba(196, 148, 58, 0.3); }
.clog-badge--base    { color: var(--text-muted); background: var(--surface-panel); border: var(--border-subtle); }

.clog-version {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.01em;
}

.clog-date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.clog-headline {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--border-subtle);
  line-height: 1.4;
}

/* ---------- Entry body ---------- */
.clog-body {
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.clog-body p { margin: 0 0 var(--sp-3); }
.clog-body p:last-child { margin-bottom: 0; }

.clog-subhead {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.clog-body .clog-subhead:first-child { margin-top: 0; }

.clog-body ul {
  margin: 0 0 var(--sp-3);
  padding-left: 1.2rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.clog-body ul:last-child { margin-bottom: 0; }

.clog-body li { position: relative; }

.clog-body li::before {
  content: '';
  position: absolute;
  left: -1.05rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--accent-muted);
  transform: rotate(45deg);
}

/* nested lists (theme sub-bullets etc.) */
.clog-body li > ul {
  margin-top: var(--sp-2);
}

.clog-body li > ul li::before {
  background: transparent;
  border: 1px solid var(--accent-dim);
}

.clog-body strong { color: var(--text-bright); font-weight: 600; }

.clog-body a {
  color: var(--accent-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
}

.clog-body a:hover { border-bottom-color: var(--accent-bright); }

/* stat / formula blocks */
.clog-body pre {
  display: block;
  margin: var(--sp-2) 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-mono) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.7 !important;
  color: var(--text-primary) !important;
  background: var(--surface-base) !important;
  border: var(--border-subtle) !important;
  border-left: 2px solid var(--accent-muted) !important;
  border-radius: var(--radius-md) !important;
  white-space: pre-wrap !important;
  word-break: normal !important;
  overflow-x: auto;
}

/* callout */
.clog-note {
  margin: var(--sp-2) 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--amber-dim);
  border: 1px solid rgba(196, 148, 58, 0.25);
  border-left: 2px solid var(--amber);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .clog-list::before { display: none; }
  .clog-entry { margin-left: 0; }
  .clog-entry::before { display: none; }
  .clog-entry { padding: var(--sp-5) var(--sp-4); }
  .clog-date { margin-left: 0; width: 100%; }
}

/* Forum-thread link in the entry header (auto-resolved via s_patch_threads.cfm) */
.clog-forum {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.clog-forum::after {
  content: ' \2197';
}

.clog-forum:hover {
  color: var(--text-bright);
  border-bottom-color: var(--accent-bright);
}

/* Grouped stat blocks (industry modifiers etc.) — masonry columns pack the
   uneven group heights tightly; up to 4 columns on wide screens, collapsing
   naturally on small ones. break-inside keeps each group panel whole. */
.clog-mods {
  columns: 4 170px;
  column-gap: var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-4);
}

.clog-mods-group {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 var(--sp-3);
  background: var(--surface-base);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
}

.clog-mods-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: var(--border-subtle);
}

.clog-mods-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 1px 0;
  font-size: var(--text-sm);
}

/* Type names near-white + bold with a faint blue glow so they stand out
   against the colored values instead of blending into the panel. */
.clog-mods-row span:first-child {
  color: var(--text-bright);
  font-weight: 600;
  text-shadow: 0 0 6px rgba(91, 191, 238, 0.35);
}

.clog-mods-val {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

.clog-mods-val--pos  { color: var(--status-ok); }
.clog-mods-val--neg  { color: var(--status-error); }
.clog-mods-val--zero { color: var(--text-bright); }

/* ---------- New-colony-type stat tables (#109) ----------
   Used when a patch ADDS colony types rather than tweaking one modifier on
   existing ones: every modifier matters, so these carry the full set the game
   models (Pop Growth / Industry / Agriculture / Mining). Full-width stacked
   panels rather than the clog-mods masonry, so five columns have room. */
.clog-planets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-4);
}

.clog-ptable-wrap {
  background: var(--surface-base);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  overflow-x: auto;
}

table.clog-ptable {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-2);
}

.clog-ptable th {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
  padding: 4px 10px 8px;
  border-bottom: var(--border-subtle);
  white-space: nowrap;
}

.clog-ptable th:first-child { text-align: left; }

.clog-ptable td {
  padding: 6px 10px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Type name: same treatment as the clog-mods row labels so the two read as
   one family — near-white, bold, faint blue glow. */
.clog-ptable td:first-child {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-bright);
  text-shadow: 0 0 6px rgba(91, 191, 238, 0.35);
}

.clog-ptable tbody tr + tr td { border-top: 1px solid rgba(59, 158, 206, 0.07); }

/* "No Support" — the game's own wording for a -100 modifier. Muted, not red:
   it is an absence of the capability rather than a penalty to it. */
.clog-mods-val--none {
  color: var(--text-muted);
  font-style: italic;
}

/* Balance patches — the fourth prefix the Help Center's own ca=200 form offers
   (Change / Bugfix / Improve / Balance). Violet so it reads distinctly from
   --change's amber. */
.clog-badge--balance {
  color: #c39ce0;
  background: rgba(185, 140, 217, 0.12);
  border: 1px solid rgba(185, 140, 217, 0.32);
}

/* Label column for stat tables that name a stat rather than a number (#109.3
   ship changes). The rest of a clog-ptable row is right-aligned mono because it
   is all figures; a stat name reads as prose, so it keeps the body font and
   hangs left under its heading. Muted so the ship name still leads the row. */
.clog-ptable th.clog-ptable-label,
.clog-ptable td.clog-ptable-label {
  text-align: left;
  font-family: var(--font-body);
  color: var(--text-muted);
  white-space: normal;
}

/* ---------- Ship stat and cost tables (#109.3) ----------
   Fifty ship rows across six mineral columns need firmer separation than the
   four-row modifier tables these are built on, but they read at the same
   scale as the #109.1 cluster panels — sizing and padding stay on the shared
   .clog-ptable rules above, and only colour and the dividing rules are lifted
   here. Scoped to the two #109.3 variants so earlier entries keep the styling
   they shipped with. */

/* --text-muted (#555d72) on the headers and stat labels was the main
   "hard to read at a glance" culprit — a contrast problem, not a size one. */
.clog-ptable--grouped th,
.clog-ptable--rows th,
.clog-ptable--grouped td.clog-ptable-label,
.clog-ptable--rows td.clog-ptable-label {
  color: var(--text-secondary);
}

/* Unchanged-value dots: still quiet, but visible enough to read as "nothing
   here" rather than as an empty cell. */
.clog-ptable--rows td .clog-mods-val--none,
.clog-ptable--rows td.clog-mods-val--none,
.clog-ptable--grouped td.clog-mods-val--none {
  color: #6d768d;
}

/* Cost tables: every ship is its own row across six columns, so a row is easy
   to lose track of halfway across. A real line plus a faint stripe keeps the
   eye on one ship. */
.clog-ptable--rows tbody tr + tr td {
  border-top: 1px solid rgba(91, 191, 238, 0.20);
}

.clog-ptable--rows tbody tr:nth-child(even) td {
  background: rgba(91, 191, 238, 0.055);
}

/* Grouped stat tables: a ship can change several stats at once, so its name
   spans its own rows in a single cell. Three cues keep the blocks apart — a
   hairline between one ship's own stats, a full rule above each new ship, and
   a rule down the right of the name cell bracketing the block. */
.clog-ptable--grouped tbody tr + tr td {
  border-top: 1px solid rgba(91, 191, 238, 0.12);
}

.clog-ptable--grouped tbody tr.clog-ship-row td {
  border-top: 2px solid rgba(91, 191, 238, 0.42);
}

/* First ship in a table sits directly under the header rule — no second line. */
.clog-ptable--grouped tbody tr:first-child td { border-top: 0; }

/* Breathing room below the last stat of each ship so blocks read as blocks. */
.clog-ptable--grouped td { padding-bottom: 7px; }

/* Bold, near-white and glowing already sets the ship name apart from the stat
   rows beside it, so it needs no size bump. */
.clog-ptable--grouped td.clog-ship-name {
  vertical-align: top;
  padding-top: 8px;
  border-right: 1px solid rgba(91, 191, 238, 0.22);
}