/* status.bhc-hoa.org. site.css (a copy of the website's) sets the colors, fonts, buttons and header;
   this adds the home page's header and footer layout and the status parts. */
body.public{background:var(--bg)}
.pwrap{max-width:1080px;margin:0 auto;padding:0 56px}
@media (max-width:800px){.pwrap{padding:0 20px}}

/* Header, as on the home page */
.public .site-header{background:var(--sand)}
.public .site-header .bar{min-height:76px;max-width:1280px;padding:0 56px}
@media (max-width:800px){.public .site-header .bar{padding:0 16px;min-height:64px}}
.public .site-header .logo{font-family:var(--font-display);font-size:1.5rem;font-weight:600}
.public .site-header .logo span{font-family:var(--font);font-size:.88em;font-weight:700;letter-spacing:.1em;margin-left:6px}
@media (max-width:480px){.public .site-header .logo{font-size:1.15rem}}
@media (max-width:360px){.public .site-header .logo{font-size:1.02rem}}
/* House mark beside the wordmark */
.public .site-header .logo{display:inline-flex;align-items:center;gap:10px}
.public .site-header .logo .mark{width:40px;height:40px;flex:none}
.status-links{display:flex;align-items:center;gap:24px}
.status-links a{color:var(--menu-link);text-decoration:none;font-size:.95rem;font-weight:500}
.status-links a:hover{color:var(--brand-deep);text-decoration:underline}
.status-links .btn{color:var(--brand-ink)}
.status-links .btn:hover{color:var(--brand-ink);text-decoration:none}
@media (max-width:560px){.status-links a:not(.btn){display:none}.status-links .btn{padding:8px 12px;font-size:.85rem}}

/* Overall status */
.status-hero{padding:56px 0 24px}
.status-hero .eyebrow{color:var(--eyebrow);margin:0 0 12px}
.status-hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,5vw,3.25rem);line-height:1.05;margin:0 0 16px;display:flex;align-items:center;gap:16px}
.lead{color:var(--muted);margin:0;max-width:62ch}
.dot{width:18px;height:18px;border-radius:50%;flex:none;background:var(--muted)}

/* Tones */
.t-ok{--tone:var(--ok)}
.t-warn{--tone:#b0742c}
.t-bad{--tone:var(--danger)}
.t-info{--tone:#3f6fa3}
.t-none{--tone:var(--line-strong)}
@media (prefers-color-scheme: dark){.t-warn{--tone:#e0a868}.t-info{--tone:#8bb3e0}}
.dot{background:var(--tone)}

/* Components */
h2.small{font-family:var(--font-display);font-weight:500;font-size:1.75rem;line-height:1.15;margin:0 0 14px}
.group,.incidents{padding:24px 0}
.comps{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.comp{padding:20px 22px;border-top:1px solid var(--line)}
.comp:first-child{border-top:0}
.comp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.comp h3{font-size:1.05rem;font-weight:600;margin:0}
.comp .desc{margin:2px 0 0;font-size:.875rem;color:var(--muted)}
.comp .note{margin:8px 0 0;font-size:.9rem}
.pill{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--tone);white-space:nowrap}
.pill::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tone)}

/* 90 daily bars */
.days{list-style:none;display:flex;gap:2px;margin:14px 0 6px;padding:0;height:34px}
.day{flex:1;min-width:2px;border-radius:2px;background:var(--tone)}
.day.t-ok{opacity:.85}
.day.t-none{opacity:.5}
@media (max-width:600px){.days{gap:1px;height:28px}.day:nth-child(-n+60){display:none}}
.axis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}
@media (max-width:600px){.axis span:first-child{visibility:hidden}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Incidents */
.incident{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:0 0 10px}
.incidents.active .incident{border-color:var(--danger)}
.incident summary{cursor:pointer;padding:14px 20px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;list-style:none}
.incident summary::-webkit-details-marker{display:none}
.incident .title{font-weight:600}
.incident .impact{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--eyebrow)}
.incident .meta{font-size:.85rem;color:var(--muted);flex-basis:100%}
.updates{list-style:none;margin:0;padding:0 20px 14px;border-top:1px solid var(--line)}
.updates li{padding:12px 0 0}
.updates li strong{text-transform:capitalize}
.updates p{margin:4px 0 0;font-size:.95rem;color:var(--menu-link)}
.muted{color:var(--muted)}
.backup{color:var(--muted);font-size:.9rem;margin:16px 0 48px}

/* Footer, as on the home page */
footer{padding:28px 0;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}
footer .pwrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}