/* RevolutionEd status page. Self-contained: system fonts, no frameworks, nothing from other sites.
   Colour is never the only signal -- every status also has words and an icon. */

:root {
    --navy: #102950;
    --navy-deep: #0a1c38;
    --accent: #005c99;
    --gold: #e8ac32;

    --bg: #f3f5f8;
    --surface: #ffffff;
    --text: #152033;
    --muted: #525f73;
    --border: #dde2ea;

    --ok: #146c2e;        --ok-bg: #e8f5ec;
    --warn: #7a4d00;      --warn-bg: #fff6db;
    --partial: #9a3f00;   --partial-bg: #fdeee3;
    --bad: #a4161a;       --bad-bg: #fdecec;
    --maint: #004f85;     --maint-bg: #e5f0f9;
    --unknown: #4a5568;   --unknown-bg: #eef1f5;

    --bar-operational: #2da44e;
    --bar-degraded: #d4a72c;
    --bar-partial: #e16f24;
    --bar-major: #cf222e;
    --bar-maintenance: #3b82c4;
    --bar-unknown: #8c95a3;
    --bar-none: #d8dee6;

    --radius: 12px;
    --shadow: 0 1px 2px rgba(16, 41, 80, 0.06), 0 2px 10px rgba(16, 41, 80, 0.06);
    --focus: #004f85;     /* 3:1 or better against every light background here */
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1220;
        --surface: #131c2b;
        --text: #e6ebf3;
        --muted: #a4afc0;
        --border: #26324a;

        --ok: #5cd08a;        --ok-bg: #10281b;
        --warn: #f2c55c;      --warn-bg: #2b2310;
        --partial: #ff9e5c;   --partial-bg: #2e1a0c;
        --bad: #ff8a80;       --bad-bg: #321417;
        --maint: #7cc0ff;     --maint-bg: #0e2336;
        --unknown: #b3bccb;   --unknown-bg: #1c2636;

        --bar-operational: #3fb950;
        --bar-degraded: #d29922;
        --bar-partial: #f0883e;
        --bar-major: #f85149;
        --bar-maintenance: #58a6ff;
        --bar-unknown: #6e7681;
        --bar-none: #2a3547;

        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        --focus: #e8ac32;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

a { color: var(--accent); }
@media (prefers-color-scheme: dark) { a { color: #7cc0ff; } }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
    position: absolute; left: 12px; top: -48px; z-index: 10;
    background: var(--surface); color: var(--text);
    padding: 8px 14px; border-radius: 8px; box-shadow: var(--shadow);
}
.skip-link:focus { top: 12px; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* ---------------------------------------------------------------- header */
.masthead {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    padding: 28px 0 72px;
}
.masthead-inner { display: flex; align-items: center; gap: 14px; }
.logo { display: block; height: 55px; width: auto; }
.masthead-label {
    font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em;
    padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, 0.35);
}

main.wrap { margin-top: -52px; }

/* ---------------------------------------------------------------- overall banner */
.overall {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 6px solid var(--unknown);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}
.overall-icon { flex: none; width: 40px; height: 40px; color: var(--unknown); }
.overall-icon svg { width: 40px; height: 40px; }
.overall-title { margin: 0; font-size: 1.4rem; font-weight: 650; line-height: 1.25; }
.overall-message { margin: 6px 0 0; color: var(--muted); }
/* staff-written titles can be one long word: never wider than the screen */
.overall-text, .post, .component-top, .component-name, .component-about, .timeline, .note {
    min-width: 0; overflow-wrap: break-word; word-break: break-word;
}

.overall[data-tone="ok"] { border-left-color: var(--ok); background: linear-gradient(90deg, var(--ok-bg), var(--surface) 70%); }
.overall[data-tone="ok"] .overall-icon { color: var(--ok); }
.overall[data-tone="warn"] { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-bg), var(--surface) 70%); }
.overall[data-tone="warn"] .overall-icon { color: var(--warn); }
.overall[data-tone="partial"] { border-left-color: var(--partial); background: linear-gradient(90deg, var(--partial-bg), var(--surface) 70%); }
.overall[data-tone="partial"] .overall-icon { color: var(--partial); }
.overall[data-tone="bad"] { border-left-color: var(--bad); background: linear-gradient(90deg, var(--bad-bg), var(--surface) 70%); }
.overall[data-tone="bad"] .overall-icon { color: var(--bad); }
.overall[data-tone="maint"] { border-left-color: var(--maint); background: linear-gradient(90deg, var(--maint-bg), var(--surface) 70%); }
.overall[data-tone="maint"] .overall-icon { color: var(--maint); }
.overall[data-tone="unknown"] { border-left-color: var(--unknown); background: linear-gradient(90deg, var(--unknown-bg), var(--surface) 70%); }

.checked-at { margin: 8px 4px 0; text-align: right; font-size: 0.875rem; color: var(--muted); min-height: 1.3em; }

.notice, .note {
    background: var(--unknown-bg); color: var(--text);
    border-radius: 8px; padding: 10px 14px; font-size: 0.9rem;
}

/* ---------------------------------------------------------------- sections */
.block { margin-top: 36px; }
.block > h2, .block-head h2 { font-size: 1.15rem; font-weight: 650; margin: 0 0 12px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.block-aside { margin: 0; font-size: 0.875rem; color: var(--muted); }
.stack > * + * { margin-top: 12px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
}

/* ---------------------------------------------------------------- incidents and maintenance */
.post { border-left: 5px solid var(--unknown); }
.post[data-tone="ok"] { border-left-color: var(--ok); }
.post[data-tone="warn"] { border-left-color: var(--warn); }
.post[data-tone="partial"] { border-left-color: var(--partial); }
.post[data-tone="bad"] { border-left-color: var(--bad); }
.post[data-tone="maint"] { border-left-color: var(--maint); }

.post h3 { margin: 0; font-size: 1.05rem; font-weight: 650; }
.post-meta { margin: 4px 0 0; font-size: 0.875rem; color: var(--muted); }
.post-body { margin: 10px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.post-time { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

.tag {
    display: inline-block; font-size: 0.78rem; font-weight: 600;
    padding: 1px 8px; border-radius: 999px; margin-right: 6px;
    background: var(--unknown-bg); color: var(--unknown);
}
.tag[data-tone="ok"] { background: var(--ok-bg); color: var(--ok); }
.tag[data-tone="warn"] { background: var(--warn-bg); color: var(--warn); }
.tag[data-tone="partial"] { background: var(--partial-bg); color: var(--partial); }
.tag[data-tone="bad"] { background: var(--bad-bg); color: var(--bad); }
.tag[data-tone="maint"] { background: var(--maint-bg); color: var(--maint); }

details { margin-top: 10px; }
summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
@media (prefers-color-scheme: dark) { summary { color: #7cc0ff; } }

.timeline { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
.timeline li { margin: 0 0 12px; }
.timeline strong { font-weight: 650; }

/* ---------------------------------------------------------------- components */
.group { padding: 0; overflow: hidden; }
.group-name {
    margin: 0; padding: 12px 18px;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--border);
}
.component-list { list-style: none; margin: 0; padding: 0; }
.component { padding: 14px 18px; }
.component + .component { border-top: 1px solid var(--border); }
.component-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.component-name { font-weight: 600; }
.component-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; color: var(--unknown); }
.component-state svg { width: 18px; height: 18px; flex: none; }
.component[data-tone="ok"] .component-state { color: var(--ok); }
.component[data-tone="warn"] .component-state { color: var(--warn); }
.component[data-tone="partial"] .component-state { color: var(--partial); }
.component[data-tone="bad"] .component-state { color: var(--bad); }
.component[data-tone="maint"] .component-state { color: var(--maint); }
.component-about { margin: 4px 0 0; font-size: 0.875rem; color: var(--muted); }
.component-about a { white-space: nowrap; }
.component-incident { margin: 6px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--partial); }
.component-more { margin-top: 4px; font-size: 0.875rem; color: var(--muted); }
.component-more p { margin: 6px 0 0; }

/* ---------------------------------------------------------------- daily bars */
.history { margin-top: 10px; }
.bars { display: flex; gap: 2px; height: 30px; }
.bars span { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--bar-none); }
.bars span[data-level="operational"] { background: var(--bar-operational); }
.bars span[data-level="degraded"] { background: var(--bar-degraded); }
.bars span[data-level="partial"] { background: var(--bar-partial); }
.bars span[data-level="major"] { background: var(--bar-major); }
.bars span[data-level="maintenance"] { background: var(--bar-maintenance); }
.bars span[data-level="unknown"] { background: var(--bar-unknown); }
.bars-caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 0.78rem; color: var(--muted); }
.bars-caption .uptime { font-weight: 600; color: var(--text); }
.from-short { display: none; }

@media (max-width: 600px) {
    /* the last 30 days on small screens */
    .bars span:nth-child(-n+60) { display: none; }
    .from-long { display: none; }
    .from-short { display: inline; }
}

.problem-days ul { margin: 8px 0 0; padding-left: 20px; font-size: 0.875rem; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; padding: 0; font-size: 0.8rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--bar-none); }
.swatch[data-level="operational"] { background: var(--bar-operational); }
.swatch[data-level="degraded"] { background: var(--bar-degraded); }
.swatch[data-level="partial"] { background: var(--bar-partial); }
.swatch[data-level="major"] { background: var(--bar-major); }
.swatch[data-level="maintenance"] { background: var(--bar-maintenance); }
.swatch[data-level="unknown"] { background: var(--bar-unknown); }

/* ---------------------------------------------------------------- footer */
.site-footer { margin-top: 56px; padding: 28px 0 40px; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--muted); }
.site-footer h2 { font-size: 1rem; color: var(--text); margin: 0 0 8px; }
.site-footer h3 { font-size: 0.9rem; color: var(--text); margin: 18px 0 6px; }
.provider-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }

@media (max-width: 600px) {
    .masthead { padding: 20px 0 64px; }
    .logo { height: 44px; }
    .overall { padding: 16px; gap: 12px; }
    .overall-icon, .overall-icon svg { width: 32px; height: 32px; }
    .overall-title { font-size: 1.2rem; }
    .component-top { flex-wrap: wrap; }
}

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

@media print {
    .masthead { background: none; color: #000; padding: 0; }
    .skip-link { display: none; }
    main.wrap { margin-top: 0; }
}