#aict-status .aict-status-hero { text-align:center; padding:24px 0 32px; } #aict-status .aict-status-pill { display:inline-flex; align-items:center; gap:8px; font-size:.95rem; font-weight:700; padding:8px 18px; border-radius:99px; color:var(--pill-ink); background:var(--pill-tint); } /* [2026-09-04] These five carried their colour in a style="" attribute, which no stylesheet can theme — the dark arm below was written and simply lost to the inline value, so /status/ still measured 2.36:1 and 2.51:1 after the first fix. Same reason the latency labels and the status pill moved to classes. */ #aict-status .aict-incident-msg { margin:6px 0; color:#475569; font-size:.92rem; } #aict-status .aict-meta-bar--incident { font-size:.78rem; color:#475569; } #aict-status .aict-status-foot { margin:36px 0 0; color:#475569; font-size:.78rem; text-align:center; } #aict-status .aict-status-foot-link { color:#475569; text-decoration:underline; } #aict-status .aict-svc-metric-label { color:#475569; font-weight:600; } #aict-status .aict-svc-metric-value { color:#475569; font-weight:500; } #aict-status .aict-status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; } #aict-status h1 { font-size:clamp(1.75rem,5vw,2.5rem); font-weight:800; margin:14px 0 8px; line-height:1.15; } #aict-status .aict-status-sub { color:#475569; font-size:1rem; margin:0; } #aict-status .aict-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:24px 0; } #aict-status .aict-svc-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px 20px; box-shadow:0 2px 8px rgba(15,23,42,.04); } #aict-status .aict-svc-row { display:flex; justify-content:space-between; align-items:center; gap:12px; } #aict-status .aict-svc-label { font-weight:600; color:#0f172a; font-size:1rem; } /* [v4.16.80fh 2026-05-04 — wcag-2-2-aa-audit-fixes] color was #94a3b8 (slate-400) on white = 4.05:1, fail AA at 11.2px. Bumped to #475569 (slate-600) = 7.6:1 AAA. */ #aict-status .aict-svc-cat { color:#475569; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; } #aict-status .aict-svc-meta { display:flex; justify-content:space-between; margin-top:10px; color:#64748b; font-size:.82rem; } /* 30-day uptime, 13.12px on the white card: 2.53:1 at emerald-500. */ #aict-status .aict-svc-meta span:last-child { color:#047857; font-weight:600; } #aict-status .aict-section-title { font-size:1.25rem; font-weight:700; color:#0f172a; margin:36px 0 16px; } #aict-status .aict-incident-row { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 18px; margin-bottom:10px; } #aict-status .aict-incident-row.open { border-left:4px solid #f59e0b; } #aict-status .aict-incident-row.major { border-left:4px solid #ef4444; } #aict-status .aict-incident-row.resolved { border-left:4px solid #10b981; } #aict-status .aict-meta-bar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#64748b; font-size:.82rem; } #aict-status .aict-cta-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:20px 0; } #aict-status .aict-cta-btn { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #e2e8f0; border-radius:99px; padding:10px 18px; font-size:.9rem; font-weight:600; color:#0f172a; text-decoration:none; cursor:pointer; } #aict-status .aict-cta-btn:hover { background:#f8fafc; } #aict-status .aict-cta-btn[disabled] { opacity:.5; cursor:not-allowed; } #aict-status .aict-status-banner { background:#ecfdf5; border:1px solid #047857; border-radius:14px; padding:16px 20px; text-align:center; } /* [2026-09-04] Two things were wrong here. (1) It was a BARE @media (prefers-color-scheme: dark) with no [data-theme="dark"] twin and no html:not([data-theme="light"]) guard — the shape this project's contract forbids. It fired for a dark-OS visitor who had NOT chosen a theme, on a page the server stamps light, which is why /status/ failed in osdark-noprefs as well as in chosen-dark. (2) It darkened the SURFACES and left the ink light-mode, the single most repeated defect in this codebase. Measured on prod at 390 and 1366 in the chosen-dark state before this change: .aict-status-sub #475569 on #0f0f1a 1.72:1 .aict-status-pill #34d399 on #ecfdf5 1.82:1 .aict-svc-cat #475569 on #0f172a 2.36:1 .aict-svc-meta :last #047857 on #0f172a 3.26:1 .aict-meta-bar #64748b on #0f172a 3.75:1 Every selector is written out in full rather than nested: CSS nesting would be a needless compatibility risk in a block that ships inline on a public page. The pill keeps its HUE — that is the at-a-glance meaning the 2026-05-04 audit protected — and takes the lighter tint of the same hue on a dark chip, carried as --pill-ink-d. */ html[data-theme="dark"] #aict-status .aict-svc-card { background:#0f172a; border-color:#1e293b; box-shadow:none; } html[data-theme="dark"] #aict-status .aict-svc-label { color:#e2e8f0; } html[data-theme="dark"] #aict-status .aict-svc-meta { color:#94a3b8; } html[data-theme="dark"] #aict-status .aict-incident-row { background:#0f172a; border-color:#1e293b; } /* [2026-09-07] The in a resolved incident row has no class, so it INHERITED color:#0f172a from the inline style on
. The row's dark background is also #0f172a, so in both dark states the headline read 1:1 -- invisible. Measured on prod: text #0f172a on surface #0f172a, 16px bold, 4 failures (2 viewports x 2 dark states). A rule aimed at the element beats an inherited value, so this does not need !important and the inline style stays as it is. It surfaced only now because this row renders ONLY when there have been no incidents for 7 days -- the guard had never seen that state. */ html[data-theme="dark"] #aict-status .aict-incident-row strong { color:#e2e8f0; } html[data-theme="dark"] #aict-status .aict-cta-btn { background:#0f172a; border-color:#1e293b; color:#e2e8f0; } html[data-theme="dark"] #aict-status .aict-section-title { color:#e2e8f0; } html[data-theme="dark"] #aict-status .aict-status-sub { color:#cbd5e1; } html[data-theme="dark"] #aict-status .aict-svc-cat { color:#94a3b8; } html[data-theme="dark"] #aict-status .aict-svc-meta span:last-child { color:#34d399; } html[data-theme="dark"] #aict-status .aict-meta-bar { color:#94a3b8; } html[data-theme="dark"] #aict-status .aict-svc-metric-label { color:#cbd5e1; } html[data-theme="dark"] #aict-status .aict-svc-metric-value { color:#cbd5e1; } html[data-theme="dark"] #aict-status .aict-status-pill { color:var(--pill-ink-d); background:#0f172a; } html[data-theme="dark"] #aict-status .aict-status-banner { background:#0f172a; border-color:#1e293b; } html[data-theme="dark"] #aict-status .aict-incident-msg { color:#cbd5e1; } html[data-theme="dark"] #aict-status .aict-meta-bar--incident { color:#94a3b8; } html[data-theme="dark"] #aict-status .aict-status-foot { color:#94a3b8; } html[data-theme="dark"] #aict-status .aict-status-foot-link { color:#a5b4fc; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) #aict-status .aict-svc-card { background:#0f172a; border-color:#1e293b; box-shadow:none; } html:not([data-theme="light"]) #aict-status .aict-svc-label { color:#e2e8f0; } html:not([data-theme="light"]) #aict-status .aict-svc-meta { color:#94a3b8; } html:not([data-theme="light"]) #aict-status .aict-incident-row { background:#0f172a; border-color:#1e293b; } html:not([data-theme="light"]) #aict-status .aict-incident-row strong { color:#e2e8f0; } html:not([data-theme="light"]) #aict-status .aict-cta-btn { background:#0f172a; border-color:#1e293b; color:#e2e8f0; } html:not([data-theme="light"]) #aict-status .aict-section-title { color:#e2e8f0; } html:not([data-theme="light"]) #aict-status .aict-status-sub { color:#cbd5e1; } html:not([data-theme="light"]) #aict-status .aict-svc-cat { color:#94a3b8; } html:not([data-theme="light"]) #aict-status .aict-svc-meta span:last-child { color:#34d399; } html:not([data-theme="light"]) #aict-status .aict-meta-bar { color:#94a3b8; } html:not([data-theme="light"]) #aict-status .aict-svc-metric-label { color:#cbd5e1; } html:not([data-theme="light"]) #aict-status .aict-svc-metric-value { color:#cbd5e1; } html:not([data-theme="light"]) #aict-status .aict-status-pill { color:var(--pill-ink-d); background:#0f172a; } html:not([data-theme="light"]) #aict-status .aict-status-banner { background:#0f172a; border-color:#1e293b; } html:not([data-theme="light"]) #aict-status .aict-incident-msg { color:#cbd5e1; } html:not([data-theme="light"]) #aict-status .aict-meta-bar--incident { color:#94a3b8; } html:not([data-theme="light"]) #aict-status .aict-status-foot { color:#94a3b8; } html:not([data-theme="light"]) #aict-status .aict-status-foot-link { color:#a5b4fc; } }