/* Status page. Builds on the link hub's style.css (tokens, fonts, header, cards, sky). */

.st{--ok:#5FA65A;--warn:#E3A93B;--maint:#6AA9D8;--down:#E2587F}
.night .st{--ok:#9FE09A;--warn:#FFD27A;--maint:#8EC5F0;--down:#FF8FB0}

.st-main{position:relative;max-width:640px;margin:0 auto;padding:28px 16px 0;display:flex;flex-direction:column;gap:18px}

/* Hero */
.st-hero{display:flex;flex-direction:column;gap:12px}
.st-hero h1{font-size:44px;line-height:1.05;font-weight:900;letter-spacing:-.03em}
.st-banner{align-items:center;gap:14px;padding:16px 18px}
.st-banner strong{display:block;font-size:18px;font-weight:900}
.st-banner .mono{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:var(--mu)}
.st-sym{width:14px;height:14px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}

/* State colour, used by banner, components, bars and incidents */
[data-state="operational"]{--c:var(--ok)}
[data-state="degraded"]{--c:var(--warn)}
[data-state="maintenance"]{--c:var(--maint)}
[data-state="outage"]{--c:var(--down)}

/* Components */
.st-list{flex-direction:column;padding:6px 18px 14px}
.st-list ul{list-style:none;margin:0;padding:0}
.comp{padding:14px 0;border-bottom:1px dashed var(--ln)}
.comp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.comp-name{display:flex;flex-direction:column;min-width:0}
.comp-name strong{font-size:16px;font-weight:700}
.comp-desc{font-size:11px;color:var(--mu)}
.pill{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;color:var(--ink);background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c)}
.comp .upbars{display:grid;grid-template-columns:repeat(90,1fr);gap:1px;height:26px;margin-top:10px}
.comp .upbars i{border-radius:2px;background:var(--c);opacity:.85}
.comp .upbars i:last-child{opacity:1}
.comp-foot{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:11px;line-height:1.5;color:var(--mu)}
.comp-foot .up{flex:none}
.st-legend{display:flex;justify-content:space-between;padding-top:10px;font-size:10px;color:var(--mu)}

/* Incidents */
.st-inc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.st-inc .label{margin:0;padding-top:6px;font-weight:400}
.inc{flex-direction:column;gap:6px;padding:14px 18px;border-left:4px solid var(--c)}
.inc-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--mu)}
.inc-title{font-size:16px;font-weight:700}
.inc-body{font-size:14px;line-height:1.55;color:var(--mu)}

.st-curl .term-body{font-size:12.5px}
.st-back{align-self:center;margin-top:4px}
.st-foot{padding-top:28px}

@media (hover:hover){
  .comp .upbars i:hover{opacity:1;transform:scaleY(1.15)}
}

@media (min-width:1024px){
  .st-main{padding-top:48px;gap:22px}
  .st-hero h1{font-size:60px}
  .comp .upbars{height:30px;gap:2px}
}

@media (max-width:359px){
  .st-hero h1{font-size:38px}
  .comp .upbars{gap:0}
}