@font-face{font-family:Creato;src:url('assets/creato-regular.woff2') format('woff2');font-weight:400;font-display:swap}

    @font-face{font-family:Sora;src:url('assets/sora-semibold.woff2') format('woff2');font-weight:600;font-display:swap}

    :root{color-scheme:light;--navy:#224364;--blue:#4a80a7;--orange:#f86e21;--ink:#121212;--muted:#425466;--page:#f4f7fb;--paper:#fff;--border:#c1cbd7;--good:#1d5b3a;--good-bg:#eaf6ee;--bad:#982b28;--bad-bg:#fdedec;--unknown:#38516a;--unknown-bg:#eef2f7}

    *{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--page);font:1.125rem/1.65 Creato,Arial,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
a{color:var(--navy);text-decoration:underline;text-underline-offset:.2em}
a:hover{text-decoration-thickness:.14em}
button{font:600 1rem/1.5 Arial,sans-serif;min-height:2.75rem;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
button:disabled{cursor:default}
h1,h2,h3{font-family:Sora,Arial,sans-serif;line-height:1.3;letter-spacing:-.035em;font-weight:600}
h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 .75rem}
h2{font-size:1.5rem;margin:0}
h3{font-size:1.125rem;margin:0}
p{margin:0}
button svg{pointer-events:none}
.wrap{max-width:67rem;margin-inline:auto;padding-inline:1.5rem}
.preview{background:var(--unknown-bg);color:var(--unknown);border-bottom:1px solid var(--border);padding:.75rem 0;font-size:1rem}
.preview-inner{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;flex-wrap:wrap}
.preview strong{display:block}
.examples{display:flex;flex-wrap:wrap;gap:.5rem}
.examples button{border:1px solid var(--navy);border-radius:.4rem;background:#fff;color:var(--navy);padding:.5rem .85rem}
.examples button[aria-pressed=true]{background:var(--navy);color:#fff}
.skip{position:absolute;left:1rem;top:-8rem;padding:1rem;z-index:3;background:white;color:var(--navy)}
.skip:focus{top:1rem}
.masthead{background:var(--navy);color:#fff;border-bottom:.3rem solid var(--orange)}
.masthead .wrap{min-height:6.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.25rem}
.brand{display:inline-flex;align-items:center;gap:1.25rem;color:white;text-decoration:none;min-height:2.75rem}
.brand img{width:9.375rem;height:auto;display:block}
.brand span{border-left:1px solid #94a9be;padding-left:1.25rem;font-size:1.125rem}
.masthead a:not(.brand){color:white;min-height:2.75rem;display:inline-flex;align-items:center}
.masthead a:focus-visible{outline-color:white}
main{padding-block:3.5rem 3rem}
.intro{max-width:45rem}
.intro p{color:var(--muted);font-size:1.125rem}
.overall{margin-top:2rem;background:var(--unknown-bg);color:var(--unknown);border:1px solid var(--unknown);border-radius:1rem;padding:1.5rem;display:flex;gap:1rem;align-items:flex-start}
.overall[data-state=operational]{color:var(--good);background:var(--good-bg);border-color:var(--good)}
.overall[data-state=incident]{color:var(--bad);background:var(--bad-bg);border-color:var(--bad)}
.overall-icon{width:2.5rem;height:2.5rem;flex:none;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font:700 1.3rem/1 Arial,sans-serif}
.overall h2{font-family:Sora,Arial,sans-serif;font-size:1.375rem;letter-spacing:-.025em}
.overall p{margin-top:.3rem;font-size:1rem}
.section{margin-top:2.5rem}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.timestamp{font-size:1rem;color:var(--muted)}
.services{background:var(--paper);border:1px solid var(--border);border-radius:1rem;overflow:hidden}
.service{padding:1.5rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center}
.service+.service{border-top:1px solid var(--border)}
.service p{font-size:1rem;color:var(--muted);margin-top:.35rem}
.state{font:600 1rem/1.5 Arial,sans-serif;display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .75rem;border:1px solid var(--unknown);border-radius:.5rem;color:var(--unknown);background:var(--unknown-bg);white-space:normal}
.state[data-state=operational]{color:var(--good);background:var(--good-bg);border-color:var(--good)}
.state[data-state=incident]{color:var(--bad);background:var(--bad-bg);border-color:var(--bad)}
.state-symbol{font-size:1.125rem;line-height:1.5}
.note{font-size:1rem;color:var(--muted);margin-top:1rem;max-width:68ch}
.updates{padding:1.5rem;background:var(--paper);border:1px solid var(--border);border-radius:1rem}
.updates h3{margin-bottom:.4rem}
.updates p{color:var(--muted);font-size:1rem;max-width:68ch}
.update-label{font-size:1rem;color:var(--muted);display:block;margin-bottom:.6rem}
.support{margin-top:2.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.support p{color:var(--muted);font-size:1rem}
.support a{background:var(--navy);color:white;text-decoration:none;min-height:2.75rem;display:inline-flex;align-items:center;padding:.65rem 1.25rem;border-radius:2rem;font-family:Arial,sans-serif;font-size:1rem;font-weight:600}
.support a:focus-visible{outline-color:var(--navy)}
footer{border-top:1px solid var(--border);padding:1.5rem 0;color:var(--muted);font-size:1rem}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{display:inline-flex;align-items:center;min-height:2.75rem}
.apca-notes{border-top:1px dashed var(--border);padding-block:1.5rem;background:white;color:var(--muted);font-size:1rem}
.apca-notes p{max-width:75ch}
.apca-notes strong{color:var(--ink)}
.apca-notes code{font-size:1rem;font-family:ui-monospace,monospace}

    @media(max-width:44rem){.wrap{padding-inline:1rem}
main{padding-block:2rem}
.masthead .wrap{min-height:0}
.brand{gap:.75rem}
.brand span{padding-left:.75rem}
.brand img{width:8rem}
.service{grid-template-columns:minmax(0,1fr);padding:1.25rem}
.state{justify-self:start}
.overall{padding:1.25rem}
.overall-icon{width:2rem;height:2rem}
.overall h2{font-size:1.25rem}
.preview-inner{align-items:stretch}
.examples{width:100%}
.examples button{flex:1 1 8rem}
.support{align-items:flex-start}
.support a{width:100%;justify-content:center}
.apca-notes{padding-block:1rem}
}

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

  .periods{display:flex;gap:.5rem;flex-wrap:wrap}
.periods button{border:1px solid var(--navy);border-radius:.5rem;background:var(--paper);color:var(--navy);padding:.55rem 1rem;min-width:6.5rem}
.periods button[aria-pressed=true]{background:var(--navy);color:white}
.history-card{margin-top:1rem;padding:1.5rem;background:var(--paper);border:1px solid var(--border);border-radius:1rem;min-width:0}
.history-card h3{margin-bottom:1.25rem}
.timeline{display:grid;grid-template-columns:repeat(288,minmax(0,1fr));height:2.5rem;gap:0;overflow:hidden;border:1px solid var(--muted);border-radius:.2rem}
.timeline[data-period="30d"]{grid-template-columns:repeat(30,minmax(0,1fr))}
.timeline span{min-width:0;height:100%}
.timeline [data-state="operational"],.legend [data-state="operational"]{background:#1d5b3a}
.timeline [data-state="incident"],.legend [data-state="incident"]{background:repeating-linear-gradient(135deg,#982b28 0 4px,#fdedec 4px 6px)}
.timeline [data-state="partial"],.legend [data-state="partial"]{background:repeating-linear-gradient(90deg,#224364 0 2px,#eef2f7 2px 4px)}
.timeline [data-state="unknown"],.legend [data-state="unknown"]{background:repeating-linear-gradient(135deg,#66788a 0 1px,#eef2f7 1px 4px)}
.timeline-axis{display:flex;justify-content:space-between;font-size:1rem;color:var(--muted);margin-top:.5rem;gap:1rem}
.history-range{display:block;width:100%;min-height:2.75rem;margin:0;accent-color:var(--navy)}
.history-range:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:.2rem}
.history-detail{font-size:1rem;color:var(--muted);overflow-wrap:anywhere;min-height:3.3rem}
.legend{display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:.75rem 1.5rem;font-size:1rem;color:var(--muted);margin:1rem 0 0}
.legend li{display:flex;align-items:center;gap:.6rem}
.legend span{display:inline-block;width:1.25rem;height:1.25rem;border:1px solid var(--muted);border-radius:.2rem}
.updates article+article{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.incident-message{white-space:pre-line;overflow-wrap:anywhere}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:44rem){.history-card{padding:1rem}.periods{width:100%}.periods button{flex:1}.history-detail{min-height:5rem}}
.brand{flex-wrap:wrap;max-width:100%;min-width:0}
.brand span{max-width:100%;overflow-wrap:anywhere}
h1,h2,h3{overflow-wrap:anywhere}
.periods button{min-width:0}
.overall>div{min-width:0}
.state{max-width:100%;overflow-wrap:anywhere}
.state-label{min-width:0}
@media(max-width:44rem){.overall{flex-direction:column;padding:1rem}}
/* Reading text stays at 18px to satisfy the APCA font-size/weight table. */
.intro p,.overall p,.service p,.note,.timestamp,.updates p,.update-label,.support p,footer,.timeline-axis,.history-detail,.legend{font-size:1.125rem}
.updates p{overflow-wrap:anywhere}
.timezone-controls{display:flex;align-items:center;gap:.75rem 1rem;flex-wrap:wrap;margin-top:1rem;color:var(--muted);font-size:1.125rem}
.timezone-controls p,#footer-timezone,.timestamp{overflow-wrap:anywhere}
.timezone-controls button{border:1px solid var(--navy);background:white;color:var(--navy);border-radius:.5rem;padding:.55rem 1rem}
.timezone-controls button[hidden]{display:none}