/* ConquestReborn - the public realm status page (realm-status.html), 2026-10-23.
   Layers on css/style.css and css/marketing.css (the mk- layout classes and the status-dot). Only the page's own parts live here,
   all of them rs-: the live line, the two "right now" rows, the big percentage, the 30-day strip, the incident list.
   No inline style anywhere: js/realm-status.js sets a state attribute or a class, never a style.
   A colour is never the only signal: an outage square is striped, a day without readings is hollow and dashed, and every
   square has its words (visually hidden text and a title) and a real table behind "Show as a table". */

:root {
  --rs-restart: #6cc4cf;                        /* a day with restarts only: the site's arcane teal */
  --rs-outage-a: #d0655c;
  --rs-outage-b: #6b2f2a;
}

/* ---------- Right now ---------- */
.rs-live { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--mk-accent); background: var(--mk-accent-wash); border-radius: 0 6px 6px 0; color: var(--ink); }
.rs-live[data-state="error"] { border-left-color: var(--bad); background: rgba(208, 101, 92, 0.12); }
.rs-live[data-state="empty"] { border-left-color: var(--unknown); background: rgba(138, 143, 159, 0.12); }

.rs-now { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.rs-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 18px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px; }
.rs-row .status-dot { margin: 0; }
.rs-row__name { font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.rs-row__state { font-weight: 700; color: var(--ink); }
.rs-row[data-state="online"] .rs-row__state { color: var(--good); }
.rs-row[data-state="offline"] .rs-row__state { color: var(--bad); }
.rs-row[data-state="unknown"] .rs-row__state { color: var(--muted); }
.rs-row__extra { grid-column: 2 / -1; color: var(--muted); font-size: 0.95rem; }
.rs-row__extra:empty { display: none; }
.rs-note { margin: 0 0 10px; color: var(--muted); font-size: 0.98rem; }
.rs-note:empty { display: none; }

/* ---------- Last 30 days: one card per service ---------- */
.mk-card .rs-pct { margin: 0 0 4px; font-family: Cinzel, Georgia, serif; font-size: clamp(2rem, 7vw, 3rem); font-weight: 700; line-height: 1.1; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.mk-card .rs-pct[data-state="none"] { font-size: clamp(1.3rem, 4.5vw, 1.8rem); color: var(--muted); }
.mk-card .rs-sub { margin: 0 0 14px; color: var(--muted); font-size: 0.95rem; }
.rs-strip { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.rs-day { height: 34px; border-radius: 3px; border: 1px solid transparent; }
.rs-day[data-state="ok"], .rs-sw[data-state="ok"] { background: var(--good); }
.rs-day[data-state="restart"], .rs-sw[data-state="restart"] { background: var(--rs-restart); }
.rs-day[data-state="outage"], .rs-sw[data-state="outage"] { background: repeating-linear-gradient(135deg, var(--rs-outage-a) 0 3px, var(--rs-outage-b) 3px 6px); border-color: var(--bad); }
.rs-day[data-state="nodata"], .rs-sw[data-state="nodata"] { background: transparent; border: 1px dashed var(--unknown); }
.rs-axis { display: flex; justify-content: space-between; margin: 6px 0 12px; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em; }
.mk-card .rs-counts { margin: 0 0 14px; color: var(--ink); font-size: 0.98rem; }
.rs-counts:empty { display: none; }
.rs-details { margin: 0; }
.rs-details summary { cursor: pointer; color: var(--mk-accent-bright); }
.rs-details[open] summary { margin-bottom: 10px; }
.rs-details .mk-table-wrap { margin-bottom: 0; }
.rs-details .mk-table th, .rs-details .mk-table td { padding: 8px 8px; }
.rs-details .mk-table th { letter-spacing: 0.04em; white-space: normal; }
.rs-details .mk-table th[scope="row"] { white-space: nowrap; }

.rs-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 22px; padding: 0; list-style: none; color: var(--muted); font-size: 0.95rem; }
.rs-legend li { display: flex; align-items: center; gap: 8px; }
.rs-sw { display: inline-block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid transparent; flex: none; }

/* ---------- Restart times ---------- */
#rs-restart-table .rs-season-now > td, #rs-restart-table .rs-season-now > th[scope="row"] { background: var(--mk-accent-wash); }
.rs-dates { display: block; margin-top: 2px; color: var(--muted); font-size: 0.88rem; font-weight: 400; }
.rs-tag { display: table; margin: 6px 0 0; padding: 1px 8px; border: 1px solid var(--mk-accent-line); border-radius: 999px; color: var(--mk-accent-bright); font-family: Cinzel, Georgia, serif; font-size: 0.7rem; letter-spacing: 0.1em; white-space: nowrap; }
#rs-restart-table th[scope="row"] { color: var(--ink); background: transparent; font-family: inherit; font-size: inherit; letter-spacing: 0; white-space: normal; }

/* ---------- Recent incidents ---------- */
.rs-incidents { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rs-incidents:empty { display: none; }
.rs-inc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 16px; background: var(--bg-panel); border: 1px solid var(--line-faint); border-left: 3px solid var(--line); border-radius: 6px; color: var(--muted); }
.rs-inc[data-kind="outage"] { border-left-color: var(--bad); border-color: var(--line); color: var(--ink); }
.rs-inc__kind { font-family: Cinzel, Georgia, serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.rs-inc[data-kind="outage"] .rs-inc__kind { color: var(--bad); }
.rs-inc__what { font-weight: 700; }
.rs-inc time { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Narrow screens: the strip keeps all 30 squares, just thinner ---------- */
@media (max-width: 480px) {
  .rs-strip { gap: 2px; }
  .rs-day { height: 30px; }
  .rs-inc time { margin-left: 0; flex-basis: 100%; }
}