/**
 * "Status" page (page-status.php) — ported from Claude Design's
 * "Status Reporting.dc.html". Standalone page: slim header + footer, white
 * background, a summary banner and a 7-day availability table. Enqueued by
 * hrblizz_status_assets() (inc/status-report.php) on top of
 * colors_and_type.css for the shared tokens. Badge colours mirror the design
 * system's StatusBadge (success/danger bg + fg semantic roles).
 */
:root{
  --st-ink:#001738;
  --st-muted:#3F587F;
  --st-line:#B8C1D1;
  --st-line-soft:#E3E6EC;
  --st-up:#0F8529;
  --st-down:#D22A2A;
  --st-none:#B8C1D1;
}
html,body{margin:0;padding:0}
/* nav-v2.css reserves room for the site nav's info bar on every page
   (html.hrb-has-infobar body{padding-top:112px}); this page has no site nav. */
html.hrb-has-infobar body.hrb-status-page{padding-top:0}
body.hrb-status-page{background:#fff;font-family:var(--font-body,'Source Sans 3',sans-serif);color:var(--st-ink)}
.hrb-status-page a{color:var(--hrb-orange-60,#FF5F1F);text-decoration:none}
.hrb-status-page a:hover{color:var(--hrb-orange-70,#E04E12);text-decoration:underline}
.hrb-status-page svg{display:block;flex:none}

.st-shell{min-height:100vh;display:flex;flex-direction:column;background:#fff}
.st-bar{max-width:1120px;margin:0 auto;padding:16px 24px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px}

/* header */
.st-header{border-bottom:1px solid var(--st-line-soft)}
.hrb-status-page .st-brand{display:flex;align-items:center;gap:12px;color:var(--st-ink);text-decoration:none}
.hrb-status-page .st-brand:hover{color:var(--st-ink);text-decoration:none}
.st-brand img{height:28px;width:auto;display:block}
.st-brand-sep{width:1px;height:20px;background:var(--st-line)}
.st-brand-label{font:600 16px/24px var(--font-body);color:var(--st-ink)}
.st-back{font:400 14px/20px var(--font-body);display:flex;align-items:center;gap:6px}

/* main */
.st-main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:48px 24px 64px;box-sizing:border-box;display:flex;flex-direction:column;gap:32px}
.st-live{display:flex;flex-direction:column;gap:32px}
.st-intro{display:flex;flex-direction:column;gap:8px}
.st-intro h1{margin:0;font:300 32px/48px var(--font-body);color:var(--st-ink);letter-spacing:0}
.st-intro p{margin:0;font:400 16px/24px var(--font-body);color:var(--st-muted);text-wrap:pretty}

/* summary banner */
.st-banner{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:8px;font:600 16px/24px var(--font-body)}
.st-banner.is-up{background:#F4FFF7;border:1px solid #B7E4C2;color:#0B5E1D}
.st-banner.is-up svg{color:var(--st-up)}
.st-banner.is-down{background:#FFF9F9;border:1px solid #F2B8B8;color:#7E1919}
.st-banner.is-down svg{color:var(--st-down)}

/* availability table */
.st-table-wrap{border:1px solid var(--st-line);border-radius:12px;overflow-x:auto}
.st-table{min-width:720px}
.st-row{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(150px,1fr) repeat(7,minmax(56px,.5fr));align-items:center;border-bottom:1px solid var(--st-line-soft)}
.st-row:last-child{border-bottom:0}
.st-head{background:#F0F3F8;border-bottom:1px solid var(--st-line)}
.st-head .st-cell{font:600 14px/20px var(--font-body);color:var(--st-ink)}
.st-head .st-name{padding:12px 20px}
.st-head .st-current{padding:12px 8px}
.st-head .st-day{padding:12px 4px;text-align:center;font:400 12px/18px var(--font-body);color:var(--st-muted)}

.st-row:not(.st-head) .st-name{padding:16px 20px;display:flex;flex-direction:column;gap:2px}
.st-row:not(.st-head) .st-current{padding:16px 8px}
.st-row:not(.st-head) .st-day{padding:16px 4px;display:flex;justify-content:center}
.st-svc{font:600 16px/24px var(--font-body);color:var(--st-ink)}
.st-svc-desc{font:400 12px/18px var(--font-body);color:var(--st-muted)}
.st-day.is-up{color:var(--st-up)}
.st-day.is-down{color:var(--st-down)}
.st-day.is-none{color:var(--st-none)}

/* StatusBadge (design system) — tone + dot */
.st-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font:600 11px/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.st-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-badge.is-up{background:var(--hrb-green-10,#DCF5E2);color:var(--hrb-green-70,#0C6A20)}
.st-badge.is-down{background:var(--hrb-red-10,#FAEAEA);color:var(--hrb-red-80,#7E1919)}
.st-badge.is-none{background:var(--hrb-darkblue-00,#F0F3F8);color:var(--hrb-darkblue-60,#3F587F)}

/* legend */
.st-legend{display:flex;flex-wrap:wrap;gap:24px;font:400 14px/20px var(--font-body);color:var(--st-muted)}
.st-legend span{display:flex;align-items:center;gap:8px}
.st-legend .is-up svg{color:var(--st-up)}
.st-legend .is-down svg{color:var(--st-down)}

.st-empty{margin:0;padding:24px;border:1px dashed var(--st-line);border-radius:12px;font:400 16px/24px var(--font-body);color:var(--st-muted);text-align:center}

/* footer */
.st-footer{border-top:1px solid var(--st-line-soft)}
.st-footer .st-bar{padding:24px;flex-wrap:wrap;gap:12px;font:400 14px/20px var(--font-body);color:var(--st-muted)}
.st-footer-links{display:flex;gap:24px}

@media (max-width:600px){
  .st-main,.st-live{gap:24px}
  .st-main{padding:32px 16px 48px}
  .st-bar{padding-left:16px;padding-right:16px}
  .st-brand img{height:24px}
}