/* JasonFurr.com status site — framework-free, accessible (WCAG 2.2 AA) stylesheet.
   No CSS framework; system font stack; high-contrast color choices. Status is always
   conveyed by text label and shape/symbol in addition to color (Use of Color). */

:root {
    --ink: #15202b;
    --ink-soft: #4a5763;
    --bg: #ffffff;
    --bg-soft: #f3f5f7;
    --accent: #0b5cab;      /* >= 4.5:1 on white */
    --accent-ink: #ffffff;
    --border: #d4dade;
    --focus: #1763c7;
    --max-width: 64rem;

    /* State colors: each chosen to give >= 4.5:1 contrast for white text on the badge,
       and reused as the badge border/background tints. Color is never the only signal. */
    --state-operational: #1b7a3d;   /* green */
    --state-degraded: #8a6100;      /* amber/brown */
    --state-partial: #9a4a00;       /* orange */
    --state-major: #b21f2d;         /* red */
    --state-maintenance: #4a5763;   /* slate */
    --state-unknown: #4a5763;       /* slate */
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

/* Keyboard accessibility: visible skip link + focus outline. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 0.5rem 1rem;
    z-index: 100;
}
.skip-link:focus { left: 0; }

a { color: var(--accent); }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

header {
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
}
header nav {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--ink); }
header nav ul {
    display: flex;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

h1 { font-size: 2rem; line-height: 1.25; }
h2 { font-size: 1.5rem; margin-top: 2rem; }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 48rem; }
.muted { color: var(--ink-soft); }

section + section { margin-top: 1.5rem; }

footer {
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
}
footer p {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 1.25rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

code { background: var(--bg-soft); padding: 0.1rem 0.35rem; border-radius: 0.25rem; }

/* --- Status presentation --- */

.overall {
    border: 1px solid var(--border);
    border-left-width: 0.5rem;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    background: var(--bg);
}
.overall-state { margin: 0; }
.overall-summary { margin: 0.5rem 0 0; }
.freshness { font-size: 0.95rem; margin: 0.5rem 0 0; }

/* State badge: pill with white text on a state color, plus a leading symbol. */
.state-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    color: #ffffff;
    background: var(--state-unknown);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}
.state-symbol { font-size: 0.9em; line-height: 1; }

.state-operational  { background: var(--state-operational); }
.state-degraded     { background: var(--state-degraded); }
.state-partial-outage { background: var(--state-partial); }
.state-major-outage { background: var(--state-major); }
.state-maintenance  { background: var(--state-maintenance); }
.state-unknown      { background: var(--state-unknown); }

/* Left-accent on the overall card mirrors the overall state color. */
.overall.state-operational  { border-left-color: var(--state-operational); }
.overall.state-degraded     { border-left-color: var(--state-degraded); }
.overall.state-partial-outage { border-left-color: var(--state-partial); }
.overall.state-major-outage { border-left-color: var(--state-major); }
.overall.state-maintenance  { border-left-color: var(--state-maintenance); }
.overall.state-unknown      { border-left-color: var(--state-unknown); }

.status-list,
.incident-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.5rem;
}
.status-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg);
}
.status-item-name { font-weight: 600; flex: 1 1 12rem; }
.status-item-desc { flex: 1 1 100%; font-size: 0.95rem; }

.incident-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg);
}
.incident-title { font-weight: 600; }

.notice {
    border: 1px solid var(--border);
    border-left-width: 0.5rem;
    border-left-color: var(--state-degraded);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    background: var(--bg-soft);
}
.notice p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}