/* Public status page - styled to match blog.rokvidmar.xyz (tokens, type, square corners). */
:root {
  --color-bg: #fafaf9;
  --color-bg-alt: #f5f5f4;
  --color-surface: #ffffff;
  --color-text: #1c1917;
  --color-text-secondary: #78716c;
  --color-accent: #2563eb;
  --color-border: #e7e5e4;
  --nav-bg: rgba(250, 250, 249, 0.85);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-label: 'IBM Plex Mono', 'JetBrains Mono', Consolas, monospace;
  --up: #16a34a;
  --minor: #84cc16;
  --warn: #d97706;
  --down: #dc2626;
  --maint: #7c3aed;
  --transition: 0.2s ease;
  color-scheme: light;
}
[data-theme="dark"] {
  --color-bg: #171717;
  --color-bg-alt: #262626;
  --color-surface: #1e1e1e;
  --color-text: #fafaf9;
  --color-text-secondary: #a8a29e;
  --color-accent: #60a5fa;
  --color-border: #404040;
  --nav-bg: rgba(23, 23, 23, 0.85);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font: 16px/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* nav */
.site-nav {
  position: sticky; top: 0; z-index: 10; height: 60px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner {
  max-width: 720px; height: 100%; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav-back {
  font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
.nav-back:hover { color: var(--color-accent); text-decoration: none; }
.nav-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--color-text); }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.lang-switch { display: flex; align-items: center; gap: 0.15rem; font-size: 0.82rem; }
.lang-btn {
  color: var(--color-text-secondary); font-weight: 500; padding: 0.15rem 0.35rem;
}
.lang-btn.active { color: var(--color-text); background: var(--color-bg-alt); }
.lang-btn:hover { color: var(--color-text); text-decoration: none; }
.lang-sep { color: var(--color-border); }
.theme-toggle {
  background: none; border: 1px solid var(--color-border); width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 1rem; transition: border-color var(--transition);
}
.theme-toggle:hover { border-color: var(--color-text-secondary); }

/* layout */
.container { max-width: 720px; margin: 0 auto; padding: 3.5rem 1.5rem 4rem; }
.eyebrow, .label, .state, .pct, .legend, .meta, .foot {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.72rem; color: var(--color-text-secondary);
}
.eyebrow { display: flex; align-items: center; gap: 0.75rem; letter-spacing: 0.18em; }
.eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
h1 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.15; margin: 0.9rem 0 2rem;
}

/* overall */
.overall {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 1.1rem 1.25rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-left: 3px solid var(--up);
  margin-bottom: 1rem;
}
.overall .text { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.overall .meta { margin-left: auto; letter-spacing: 0.08em; }
.overall .meta b { color: var(--color-text); font-weight: 500; }
.overall.partial_outage, .overall.maintenance { border-left-color: var(--warn); }
.overall.major_outage { border-left-color: var(--down); }
.light { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--up); flex: none; }
.partial_outage .light, .maintenance .light { background: var(--warn); }
.major_outage .light { background: var(--down); animation: pulse 1.6s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.notice {
  padding: 0.9rem 1.25rem; border: 1px solid var(--color-border);
  border-left: 3px solid var(--maint); background: var(--color-surface); margin-bottom: 1rem;
}
.notice .meta { display: block; margin-top: 0.2rem; letter-spacing: 0.06em; text-transform: none; }

/* groups */
.group { margin-top: 2.5rem; }
.group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border);
}
.group-head h2 { font-weight: 500; }
.rows { list-style: none; }
.row { padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.row-top { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.55rem; }
.name { font-weight: 500; }
.state { margin-left: auto; letter-spacing: 0.08em; color: var(--up); }
.state.down { color: var(--down); }
.state.maintenance { color: var(--maint); }
.state.pending { color: var(--color-text-secondary); }
.pct { min-width: 4.6em; text-align: right; font-size: 0.8rem; letter-spacing: 0.02em;
       color: var(--color-text); text-transform: none; font-variant-numeric: tabular-nums; }
.bars { display: flex; gap: 2px; height: 26px; }
.bars span { flex: 1; min-width: 2px; border-radius: 1px; background: var(--color-border); }
.bars .up { background: var(--up); }
.bars .minor { background: var(--minor); }
.bars .warn { background: var(--warn); }
.bars .down { background: var(--down); }
.legend { display: flex; justify-content: space-between; margin-top: 0.5rem; letter-spacing: 0.08em; }

/* admin view */
.admin-note {
  font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--color-text-secondary); border: 1px dashed var(--color-border);
  padding: 0.6rem 0.9rem; margin: -1rem 0 1.5rem;
}
.tag, .edit {
  font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.tag { color: var(--color-text-secondary); border: 1px solid var(--color-border); padding: 0 0.4rem; }
.row.private .name { color: var(--color-text-secondary); }
.row.private .bars { opacity: 0.75; }

/* incidents */
.incidents { list-style: none; }
.incidents li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: baseline;
  padding: 0.75rem 0; border-bottom: 1px solid var(--color-border);
}
.incidents .when, .incidents .how {
  font-family: var(--font-label); font-size: 0.78rem; color: var(--color-text-secondary);
}
.incidents .ongoing { color: var(--down); }
.empty { padding: 1rem 0; color: var(--color-text-secondary); }

.foot {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  letter-spacing: 0.08em;
}

@media (max-width: 560px) {
  .bars .old { display: none; }
  .overall .meta { margin-left: 0; width: 100%; }
  .incidents li { grid-template-columns: 1fr auto; }
  .incidents .when { grid-column: 1 / -1; order: 3; }
}