/*
 * css/updates.css - patch-notes.php and status.php (public pages wave 2, 2026-10-15). Loaded after css/landing.css,
 * whose components (bands, hero, kicker, note) these pages use first. Scoped under #ld like the rest of the guest styles.
 * The state pills say their state in words (On time, Late, Open, Coming soon, Closed for now); the colour only repeats it.
 */

/* ---- shared: running text ---- */
#ld .st-copy { max-width: 46em; color: var(--text); font-size: 16px; line-height: 1.6; }
#ld .st-copy + .st-copy { margin-top: 10px; }
#ld .ld-phero .ld-lead a { color: var(--wire); }
#ld .ld-phero .ld-lead a:hover { text-decoration: underline; }

/* ---- state pills ---- */
#ld .st-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--steel2); color: var(--text); font: 600 12.5px/1.3 var(--head); letter-spacing: .8px; text-transform: uppercase;
}
#ld .st-pill svg { width: 14px; height: 14px; flex: 0 0 auto; }
#ld .st-ok, #ld .st-now { border-color: rgba(95,174,90,.6); background: rgba(95,174,90,.14); color: #cfe8cc; }
#ld .st-ok svg { color: var(--cash); }
#ld .st-late { border-color: rgba(232,69,127,.65); background: rgba(232,69,127,.14); color: #ffd0e0; }
#ld .st-late svg { color: var(--magenta); }
#ld .st-soon, #ld .st-next { border-color: rgba(47,195,207,.6); background: rgba(47,195,207,.12); color: #c9f3f6; }
#ld .st-closed { border-color: rgba(220,129,0,.6); background: rgba(220,129,0,.13); color: #ffd9a0; }
#ld .st-stage { border-color: rgba(155,107,255,.6); background: rgba(155,107,255,.14); color: #e2d6ff; }
#ld .st-last { color: var(--muted); }

#ld .st-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }

/* ---- rows: the city clock, the systems, the events ---- */
#ld .st-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#ld .st-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 18px;
  background: var(--steel); border: 1px solid var(--line); border-radius: 8px;
}
#ld .ld-band-alt .st-row { background: var(--ink); }
#ld .st-row h3, #ld .st-row h4 { margin: 0 0 3px; font: 600 17px/1.25 var(--head); letter-spacing: .6px; color: #fff; }
#ld .st-row p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
#ld .st-row .st-reason { margin-top: 6px; color: var(--text); }
#ld .st-row-state { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
#ld .st-when { color: var(--muted); font-size: 13.5px; }
#ld .st-group { margin: 26px 0 10px; font: 600 15px/1.2 var(--head); letter-spacing: 1.6px; text-transform: uppercase; color: var(--amber-hi); }
#ld .st-group:first-of-type { margin-top: 0; }
/* the open systems: a compact grid of cards, name and pill on top (the closed ones keep full rows for their reason) */
#ld .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ld .st-grid .st-row { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; padding: 12px 16px; }
#ld .st-grid .st-row-state { order: -1; flex-direction: row; justify-content: flex-start; }

/* ---- patch notes ---- */
#ld .up-notes { display: grid; gap: 16px; max-width: 860px; }
#ld .up-note { padding: 20px 22px 18px; background: var(--steel); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 8px; scroll-margin-top: 16px; }
#ld .up-note:target { border-color: var(--amber-hi); box-shadow: 0 0 0 1px var(--amber-hi); }
#ld .up-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
#ld .up-ver { font: 600 13px/1.2 var(--head); letter-spacing: 1.4px; text-transform: uppercase; color: var(--amber-hi); }
#ld .up-head time { color: var(--muted); font-size: 14px; }
#ld .up-note h2, #ld .up-note h3 { margin: 0 0 10px; font: 600 22px/1.2 var(--head); letter-spacing: .6px; color: #fff; }
#ld .up-items { margin: 0; padding-left: 20px; color: var(--text); font-size: 15.5px; line-height: 1.6; }
#ld .up-items li { margin: 4px 0; }
#ld .up-items li::marker { color: var(--amber-hi); }
#ld .up-more { margin-top: 12px; font-size: 15px; }
#ld .up-more a, #ld .up-start a { color: var(--wire); font-weight: 600; }
#ld .up-more a:hover, #ld .up-start a:hover { text-decoration: underline; }
#ld .up-start { margin-top: 8px; }

@media (max-width: 900px) {
  #ld .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #ld .st-grid { grid-template-columns: minmax(0, 1fr); }
  #ld .st-row { grid-template-columns: minmax(0, 1fr); padding: 13px 16px; }
  #ld .st-row-state { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 6px 10px; }
  #ld .up-note { padding: 16px 16px 14px; }
  #ld .up-note h2, #ld .up-note h3 { font-size: 20px; }
}