*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#f2f7fb;color:#081a3a}
body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}

.banner{
  /* Image is 1774x158 (aspect ~11.23:1). Below 1774px viewport, cover only
     crops the sides (dead warehouse texture) and the logo stays put. Above
     1774px, a fixed 158px height forces cover to upscale and crop top/bottom,
     cutting off the JAZZ logo. Growing the height with the viewport keeps the
     container aspect ratio matched to the image so it fills the width with no
     vertical crop. The clamp floor preserves narrow/desktop behavior exactly;
     the ceiling stops it from getting oversized on 5K+ displays. */
  height:clamp(158px, 8.9vw, 260px);
  background:url("/images/warehouse-banner.jpg") center/cover no-repeat;
}

.content{
  width:min(94%,1500px);
  margin:42px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.panel{
  background:#fff;
  border:1px solid #e0e8f1;
  border-radius:10px;
  padding:28px 26px 26px;
  min-height:305px;
  box-shadow:0 7px 22px rgba(30,65,95,.07);
}

.panel-head{
  display:flex;
  align-items:center;
  gap:18px;
}
.panel-head>img{
  width:48px;
  height:48px;
}
.panel-head h2{
  margin:0 0 5px;
  font-size:27px;
  line-height:1;
}
.panel-head p{
  margin:0;
  font-size:14px;
  color:#607bb7;
}
.divider{
  height:1px;
  background:#dfe7ef;
  margin:22px 0;
}

.nav-row{
  min-height:72px;
  display:grid;
  grid-template-columns:48px 1fr 20px;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
  padding:12px 18px;
  border-radius:10px;
  background:linear-gradient(135deg,#f4f8fc,#fbfdff);
  text-decoration:none;
  color:#081a3a;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  transform-origin:center;
}
.nav-row img{
  width:42px;
  height:42px;
  transition:transform .16s ease;
}
.nav-row span{
  font-size:17px;
  font-weight:700;
}
.nav-row b{
  font-size:30px;
  font-weight:300;
  color:#5875c2;
  line-height:1;
}
.nav-row:hover{
  transform:translateY(-3px) scale(1.025);
  box-shadow:0 12px 24px rgba(25,70,100,.14);
  background:#fff;
}
.nav-row:hover img{
  transform:scale(1.14);
}

/* Coming soon — muted, non-interactive rows */
.nav-row.is-soon{
  grid-template-columns:48px 1fr auto;
  cursor:default;
  opacity:.72;
  background:linear-gradient(135deg,#f6f8fb,#fbfdff);
}
.nav-row.is-soon:hover{
  transform:none;
  box-shadow:none;
  background:linear-gradient(135deg,#f6f8fb,#fbfdff);
}
.nav-row.is-soon:hover img{transform:none}
.nav-row.is-soon img{filter:grayscale(.4);opacity:.85}
.soon-badge{
  justify-self:end;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#5875c2;
  background:#e8eff9;
  border:1px solid #d3e0f2;
  border-radius:999px;
  padding:4px 10px;
  white-space:nowrap;
}
body.jcc-dark .soon-badge{
  color:#a8c1ea !important;
  background:#1b2a40 !important;
  border-color:#2a3b53 !important;
}

footer{
  width:100%;
  margin-top:auto;
  margin-bottom:0;
  padding:22px 16px 18px;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#3554b2;
  font-size:11px;
  letter-spacing:.02em;
}

@media(max-width:1000px){
  .content{grid-template-columns:1fr}
  .panel{min-height:auto}
}
@media(max-width:650px){
  .banner{height:125px}
  .content{width:calc(100% - 24px);margin-top:20px}
  .panel{padding:22px 18px}
  .panel-head h2{font-size:23px}
  .panel-head>img{width:40px;height:40px}
  .nav-row{grid-template-columns:42px 1fr 18px;min-height:66px}
  .nav-row img{width:36px;height:36px}
  .nav-row span{font-size:16px}
  footer{width:100%;flex-direction:row;align-items:center;justify-content:center;text-align:center;gap:0}
}




/* Entra ID authentication — rebuilt from scratch for JCC 2.0 */
[hidden]{display:none!important}
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.user-strip{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:7px 16px;background:#f6f8fb;border-bottom:1px solid #e5eaf1;font-size:12px;color:#52657a}
.text-button,.footer-link{appearance:none;border:0;background:none;color:#3554b2;font:inherit;cursor:pointer;padding:0}
.text-button:hover,.footer-link:hover{text-decoration:underline}
.footer-link{font-size:11px;letter-spacing:.02em}

.jcc-login{
  position:fixed;
  inset:0;
  min-width:320px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  box-sizing:border-box;
  color:#fff;
  background:
    radial-gradient(circle at 76% 3%, rgba(117,218,255,.72) 0, rgba(49,163,255,.30) 23%, transparent 46%),
    linear-gradient(145deg, #0644b3 0%, #087cef 45%, #055fcf 72%, #032d88 100%);
}

.login-wave{
  position:absolute;
  left:-10vw;
  width:120vw;
  height:46vh;
  border:1px solid rgba(124,215,255,.32);
  border-radius:50%;
  pointer-events:none;
}
.wave-one{
  top:17vh;
  transform:rotate(6deg);
}
.wave-two{
  top:36vh;
  transform:rotate(-5deg);
  border-color:rgba(111,204,255,.22);
}

.login-center{
  position:relative;
  z-index:2;
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:-2vh;
}

.jcc-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:280px;
  max-width:70vw;
  margin-bottom:34px;
}

.warehouse-mark{
  width:128px;
  max-width:42vw;
  height:auto;
  display:block;
  margin-bottom:5px;
  filter:drop-shadow(0 5px 14px rgba(0,44,114,.22));
}

.jazz-wordmark{
  height:66px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  color:#fff;
  font-family:Arial Black, "Segoe UI Black", Arial, sans-serif;
  font-size:78px;
  line-height:.82;
  font-weight:900;
  letter-spacing:-7px;
  filter:drop-shadow(0 5px 14px rgba(0,44,114,.20));
}
.jazz-wordmark .j-letter{margin-right:4px}
.a-letter{
  position:relative;
  width:57px;
  height:62px;
  margin:0 3px 0 2px;
}
.a-letter::before{
  content:"";
  position:absolute;
  left:4px;
  bottom:0;
  width:0;
  height:0;
  border-left:25px solid transparent;
  border-right:25px solid transparent;
  border-bottom:62px solid #1bbcff;
}
.a-letter::after{
  content:"";
  position:absolute;
  left:20px;
  bottom:0;
  width:0;
  height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:32px solid #0876df;
}

.control-center-word{
  margin-top:11px;
  color:#fff;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:19px;
  font-weight:400;
  letter-spacing:.33em;
  white-space:nowrap;
  text-shadow:0 3px 10px rgba(0,40,100,.20);
}

.ms-login-button{
  width:245px;
  max-width:86vw;
  height:46px;
  appearance:none;
  border:1px solid rgba(255,255,255,.78);
  border-radius:9px;
  background:#fff;
  color:#10234b;
  display:grid;
  grid-template-columns:34px 1fr 24px;
  align-items:center;
  gap:8px;
  padding:0 14px;
  box-shadow:0 10px 26px rgba(0,31,96,.28);
  cursor:pointer;
  font:600 15px/1 "Segoe UI",Arial,sans-serif;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ms-login-button:hover{
  transform:translateY(-1px);
  box-shadow:0 13px 30px rgba(0,31,96,.34);
}
.ms-login-button:focus-visible{
  outline:3px solid rgba(255,255,255,.92);
  outline-offset:4px;
}
.ms-login-button:disabled{opacity:.72;cursor:wait;transform:none}

.ms-logo{
  display:grid;
  grid-template-columns:10px 10px;
  grid-template-rows:10px 10px;
  gap:2px;
}
.ms-logo i{display:block}
.ms-logo i:nth-child(1){background:#f35325}
.ms-logo i:nth-child(2){background:#81bc06}
.ms-logo i:nth-child(3){background:#05a6f0}
.ms-logo i:nth-child(4){background:#ffba08}
.ms-login-arrow{font-size:25px;font-weight:300}
.ms-login-label{text-align:center;white-space:nowrap}

.auth-status{
  min-height:20px;
  margin:14px 0 0;
  max-width:470px;
  color:rgba(255,255,255,.90);
  text-align:center;
  font:500 12px/1.45 "Segoe UI",Arial,sans-serif;
}
.auth-status:empty{visibility:hidden}
.auth-status.error{
  visibility:visible;
  padding:8px 11px;
  border-radius:8px;
  background:rgba(88,0,12,.42);
  border:1px solid rgba(255,255,255,.22);
}

.entra-branding{
  position:absolute;
  z-index:2;
  bottom:7vh;
  left:50%;
  transform:translateX(-50%);
  width:min(700px,78vw);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
  color:rgba(255,255,255,.84);
  white-space:nowrap;
  font:500 9px/1 "Segoe UI",Arial,sans-serif;
  letter-spacing:.20em;
}
.entra-line{height:1px;background:rgba(255,255,255,.60)}

@media(max-width:700px){
  .jcc-logo{width:235px;margin-bottom:28px}
  .warehouse-mark{width:108px}
  .jazz-wordmark{font-size:64px;height:54px;letter-spacing:-6px}
  .a-letter{width:47px;height:51px}
  .a-letter::before{border-left-width:21px;border-right-width:21px;border-bottom-width:51px}
  .a-letter::after{left:17px;border-left-width:8px;border-right-width:8px;border-bottom-width:27px}
  .control-center-word{font-size:15px;letter-spacing:.29em;margin-top:9px}
  .ms-login-button{width:230px;height:44px;font-size:13px}
  .entra-branding{width:88vw;gap:8px;font-size:7px;letter-spacing:.11em}
}

@media(max-height:650px){
  .jcc-logo{transform:scale(.82);margin-bottom:15px}
  .login-center{margin-top:-4vh}
  .entra-branding{bottom:3vh}
}

/* JCC 2.1 — exact uploaded logo */
.exact-logo-wrap{
  width:auto !important;
  max-width:none !important;
  margin:0 0 30px !important;
  transform:none !important;
}
.exact-jcc-logo{
  display:block;
  width:215px;
  max-width:56vw;
  height:auto;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 5px 14px rgba(0,40,100,.20));
}
@media(max-width:700px){
  .exact-jcc-logo{width:190px;max-width:58vw}
}
@media(max-height:650px){
  .exact-logo-wrap{transform:none !important;margin-bottom:20px !important}
  .exact-jcc-logo{width:180px}
}

.account-wrap{position:absolute;right:22px;top:14px;z-index:100}.account-avatar{width:42px;height:42px;border-radius:50%;border:2px solid #fff;background:#087ceb;color:#fff;font:600 14px Segoe UI,Arial;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 10px #00355a44}.account-menu{position:absolute;right:0;top:52px;width:240px;background:#fff;color:#10234b;border:1px solid #dce5ef;border-radius:10px;box-shadow:0 14px 34px #142d5033;padding:10px 0;font-family:Segoe UI,Arial}.account-head{text-align:center;padding:4px 15px 8px;display:flex;flex-direction:column;align-items:center}.account-avatar.big{width:48px;height:48px;border:0;margin-bottom:7px}.account-head strong{font-size:14px}.account-head small{font-size:11px;color:#64748b;margin-top:3px}.account-menu hr{border:0;border-top:1px solid #e5ebf2;margin:7px 12px}.account-menu>a,.account-menu>button,.appearance>button{box-sizing:border-box;width:100%;border:0;background:transparent;color:inherit;text-decoration:none;display:grid;grid-template-columns:25px 1fr auto;gap:8px;align-items:center;padding:10px 16px;text-align:left;font:500 13px Segoe UI,Arial;cursor:pointer}.account-menu>a:hover,.account-menu>button:hover,.appearance>button:hover{background:#f2f7fd}.appearance{position:relative}.appearance-menu{position:absolute;right:100%;top:0;width:165px;background:#fff;border:1px solid #dce5ef;border-radius:9px;box-shadow:0 12px 28px #142d5033;padding:6px}.appearance-menu button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:9px;border-radius:6px;color:#10234b;cursor:pointer}.appearance-menu button:hover{background:#f2f7fd}body.jcc-dark #app-shell{background:#101827;color:#e8eef8}body.jcc-dark .account-menu,body.jcc-dark .appearance-menu{background:#172235;color:#e8eef8;border-color:#334155}body.jcc-dark .account-menu a,body.jcc-dark .account-menu button,body.jcc-dark .appearance-menu button{color:#e8eef8}

/* JazzCC3.5 footer */
footer,.footer,.app-footer{
  text-align:center !important;
  justify-content:center !important;
  align-items:center !important;
}
footer > *, .footer > *, .app-footer > *{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* JazzCC3.5 cohesive dark mode */
body.jcc-dark{
  background:#0b1220 !important;
  color:#e7eef8 !important;
}
body.jcc-dark #app-shell{
  background:#0f1726 !important;
  color:#e7eef8 !important;
}
body.jcc-dark main,
body.jcc-dark .main,
body.jcc-dark .content,
body.jcc-dark .page-content{
  background:#0f1726 !important;
}
body.jcc-dark .card,
body.jcc-dark .panel,
body.jcc-dark [class*="column"]{
  background:#162235 !important;
  border-color:#26364d !important;
  color:#f3f7fc !important;
  box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
}
body.jcc-dark .card h1, body.jcc-dark .card h2, body.jcc-dark .card h3,
body.jcc-dark .panel h1, body.jcc-dark .panel h2, body.jcc-dark .panel h3{
  color:#f6f9fd !important;
}
body.jcc-dark .card p, body.jcc-dark .panel p,
body.jcc-dark .subtitle, body.jcc-dark .description{
  color:#9fb0c8 !important;
}
body.jcc-dark .card a,
body.jcc-dark .panel a,
body.jcc-dark .tile,
body.jcc-dark .item,
body.jcc-dark [class*="link-row"]{
  background:#1b2a40 !important;
  color:#f2f6fb !important;
  border-color:#2a3b53 !important;
}
body.jcc-dark .card a:hover,
body.jcc-dark .panel a:hover,
body.jcc-dark .tile:hover,
body.jcc-dark .item:hover{
  background:#22344e !important;
}
body.jcc-dark footer,
body.jcc-dark .footer,
body.jcc-dark .app-footer{
  color:#91a6c3 !important;
  background:#0f1726 !important;
}
body.jcc-dark .account-menu,
body.jcc-dark .appearance-menu{
  background:#172235 !important;
  color:#eef4fb !important;
  border-color:#33445c !important;
  box-shadow:0 14px 34px rgba(0,0,0,.38) !important;
}
body.jcc-dark .account-menu hr{border-color:#33445c !important}
body.jcc-dark .account-head small{color:#9fb0c8 !important}
body.jcc-dark .account-menu a,
body.jcc-dark .account-menu button,
body.jcc-dark .appearance-menu button{color:#eef4fb !important}
body.jcc-dark .account-menu a:hover,
body.jcc-dark .account-menu button:hover,
body.jcc-dark .appearance-menu button:hover{background:#22344e !important}


/* JazzCC3.6 footer: centered and pinned to bottom on short pages */
html, body{
  min-height:100%;
}
body{
  min-height:100vh;
}
#app-shell{
  min-height:100vh !important;
  display:flex !important;
  flex-direction:column !important;
}
#app-shell > main,
#app-shell > .main,
#app-shell > .content,
#app-shell > .page-content{
  flex:1 0 auto !important;
}
footer,
.footer,
.app-footer{
  margin-top:auto !important;
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
footer > *,
.footer > *,
.app-footer > *{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

/* Ensure the remaining footer brand line stays truly centered */
footer .footer-brand,
.footer .footer-brand,
.app-footer .footer-brand{
  width:100% !important;
  text-align:center !important;
  justify-content:center !important;
}


/* JazzCC3.7 definitive footer layout */
html, body{
  min-height:100%;
}
body{
  min-height:100vh;
}
.app-shell,
#app-shell{
  min-height:100vh !important;
  display:flex !important;
  flex-direction:column !important;
}
.content{
  flex:0 0 auto;
}
footer{
  flex:0 0 auto !important;
  margin-top:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.footer-brand{
  display:block;
  width:100%;
  text-align:center !important;
  margin:0 auto !important;
}


/* JazzCC3.8: keep cards natural height while footer remains at viewport bottom */
.content{
  flex:0 0 auto !important;
  align-self:stretch;
}
.grid,
.cards,
.card-grid,
.columns,
[class*="grid"]{
  align-items:start !important;
}
.card,
.panel{
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
}

/* My Profile icon matches JE avatar blue */
.profile-icon{
  color:#087ceb !important;
  filter:none !important;
}




/* JazzCC3.10: all three dashboard columns are exactly two item rows tall */
.content{
  align-items:start !important;
}
.content > .column,
.content > .card,
.content > section{
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
}

/* KPI keeps the same two-row card footprint as Apps and Dashboards */



/* JazzCC3.12 authentication visibility fix:
   !important is required because #app-shell display:flex was previously important. */
#app-shell[hidden],
.app-shell[hidden]{
  display:none !important;
}

/* KPI second row is a full-sized nav row, exactly matching Apps/Dashboards. */
.kpi-blank-row{
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Keep each dashboard panel natural-height; identical two-row structure makes them align. */
.content{
  align-items:start !important;
}
.panel{
  align-self:start !important;
}


/* ============================================================================
   JCC Status — INC-driven health indicator (circle + card) and /status page.
   Semantic status colors are scoped to these components and kept separate from
   the JCC blue accent. Dark-mode values mirror the body.jcc-dark palette.
   ============================================================================ */
:root{
  --st-ok:#12915c;      --st-ok-bg:#e4f5ec;  --st-ok-bd:#bfe6d1;
  --st-warn:#b9750a;    --st-warn-bg:#fbf1dc; --st-warn-bd:#f0dcae;
  --st-crit:#cf2d38;    --st-crit-bg:#fbe9ea; --st-crit-bd:#f3c6ca;
  --st-ink:#081a3a;     --st-muted:#607bb7;  --st-muted2:#8aa0c4;
  --st-panel:#fff;      --st-border:#e0e8f1;  --st-ground:#f2f7fb;
  --st-accent:#087ceb;  --st-accent-deep:#3554b2;
  --st-soft:linear-gradient(135deg,#f4f8fc,#fbfdff);
  --st-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
body.jcc-dark{
  --st-ok:#4bd699;      --st-ok-bg:#123026;  --st-ok-bd:#1f5540;
  --st-warn:#e6b25c;    --st-warn-bg:#33280f; --st-warn-bd:#5c481c;
  --st-crit:#ff6b74;    --st-crit-bg:#341418; --st-crit-bd:#5e2830;
  --st-ink:#e7eef8;     --st-muted:#9fb0c8;  --st-muted2:#7387a5;
  --st-panel:#162235;   --st-border:#26364d;  --st-ground:#0f1726;
  --st-accent:#3aa0ff;  --st-accent-deep:#8fb6ee;
  --st-soft:linear-gradient(135deg,#1b2a40,#182333);
}

/* ---- status circle: top-left, mirrors the account avatar on the right ---- */
.status-wrap{position:absolute;left:22px;top:14px;z-index:100}
.status-circle{width:42px;height:42px;border-radius:50%;border:2px solid #fff;
  display:grid;place-items:center;cursor:pointer;position:relative;padding:0;
  box-shadow:0 3px 10px rgba(0,53,90,.28);transition:transform .15s ease}
.status-circle:hover{transform:translateY(-1px)}
.status-circle:focus-visible{outline:3px solid var(--st-accent);outline-offset:3px}
.status-circle .status-glyph{display:grid;place-items:center;line-height:0}
.status-circle .status-glyph svg{width:20px;height:20px;display:block}
/* all-clear: green gradient + check */
.status-circle.is-ok{background:linear-gradient(160deg,#22b06f,#12915c)}
/* incident: red gradient + warning glyph + a heartbeat double-thump to draw the eye */
.status-circle.is-crit{background:linear-gradient(160deg,#ea4b54,#cf2d38 58%,#b3232d);
  box-shadow:0 3px 10px rgba(0,40,80,.3),0 0 16px rgba(207,45,56,.5)}
@media (prefers-reduced-motion:no-preference){
  .status-circle.is-crit{animation:st-beat 1.6s ease-in-out infinite}
}
@keyframes st-beat{
  0%,60%,100%{transform:scale(1)}
  10%{transform:scale(1.18)}
  20%{transform:scale(1)}
  30%{transform:scale(1.12)}
}
/* count badge (open incidents) */
.status-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:#fff;color:#cf2d38;font:800 11px Arial;
  display:grid;place-items:center;box-shadow:0 2px 5px rgba(0,0,0,.2)}

/* ---- popover card (opens from the circle, like the account menu) ---- */
.status-card{position:absolute;left:0;top:52px;width:370px;max-width:calc(100vw - 44px);
  background:var(--st-panel);border:1px solid var(--st-border);border-radius:12px;
  box-shadow:0 18px 40px rgba(20,45,80,.24);overflow:hidden;color:var(--st-ink)}
/* pinned = incident open: the white card auto-populates over the header with a stronger lift */
.status-card.is-pinned{box-shadow:0 22px 48px rgba(20,45,80,.34)}
.sc-head{display:flex;align-items:center;gap:10px;padding:14px 16px}
.sc-head.ok{background:var(--st-ok-bg)}
.sc-head.crit{background:var(--st-crit-bg)}
.sc-head .sc-dot{width:11px;height:11px;border-radius:50%;flex:none}
.sc-head.ok .sc-dot{background:var(--st-ok)}
.sc-head.crit .sc-dot{background:var(--st-crit)}
.sc-head .sc-title{font-weight:700;font-size:14px;margin-right:auto}
.sc-head .sc-count{font:700 11px Arial;padding:2px 9px;border-radius:999px;
  background:var(--st-crit);color:#fff}
.sc-close{border:0;background:transparent;color:#9e222b;font:700 19px/1 Arial;
  cursor:pointer;padding:0 2px;margin-left:8px}
.sc-close:hover{color:#7a151c}
.sc-empty{padding:14px 16px 18px;color:var(--st-muted);font-size:13px}
.sc-body{padding:2px 16px;max-height:230px;overflow-y:auto}
.sc-inc{padding:13px 0;border-bottom:1px solid #000}
.sc-inc:last-child{border-bottom:0}
.sc-inc .inc-top{display:flex;gap:8px;align-items:baseline}
.sc-inc a.inc-key{text-decoration:none}
.sc-inc a.inc-key:hover{text-decoration:underline}
/* comment as plain text directly under the summary (no boxed block) */
.sc-comment{margin-top:6px}
.sc-clabel{display:block;font:700 9.5px Arial;letter-spacing:.1em;text-transform:uppercase;
  color:var(--st-muted);margin-bottom:4px}
/* body text muted so the summary leads; clamped to 4 lines (ETA + author stay below) */
.sc-ctext{font-size:12.5px;line-height:1.5;color:var(--st-muted);
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sc-meta{margin-top:6px;font-size:11.5px;color:var(--st-muted)}
.sc-next{margin-top:7px;font-size:12px}
.sc-eta{font-weight:700;color:var(--st-ink)}
.sc-rel{color:var(--st-muted)}
.sc-rel.overdue{color:var(--st-crit);font-weight:700}
.sc-clabel{font:700 9.5px Arial;letter-spacing:.1em;text-transform:uppercase;color:var(--st-muted);margin-right:7px}
.sc-cby{color:var(--st-muted);font-style:italic}
.inc-key{font:700 12px var(--st-mono);color:var(--st-crit);flex:none}
.inc-summary{font-weight:700;font-size:13.5px;line-height:1.3}
/* card summary leads the item — larger + heavier + strong ink */
.sc-inc .inc-summary{font-size:14.5px;font-weight:800;color:var(--st-ink)}
.inc-chips{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.st-chip{font:700 9px Arial;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;border:1px solid var(--st-border);color:var(--st-muted)}
.st-chip.pri{color:var(--st-crit);border-color:var(--st-crit-bd);background:var(--st-crit-bg)}
.st-chip.pri.med{color:var(--st-warn);border-color:var(--st-warn-bd);background:var(--st-warn-bg)}
.st-chip.comp{color:var(--st-accent-deep);background:var(--st-soft)}
/* latest-update block: small label, update text is the emphasis, author quiet below */
.sc-update{margin-top:11px;padding:10px 12px;background:var(--st-ground);
  border:1px solid var(--st-border);border-radius:9px;border-left:3px solid var(--st-accent)}
.sc-update .u-label{font:700 9.5px Arial;letter-spacing:.14em;text-transform:uppercase;
  color:var(--st-muted);display:flex;align-items:center;gap:6px;margin-bottom:5px}
.sc-update .u-label .u-ago{margin-left:auto;letter-spacing:.02em;font-weight:600;
  text-transform:none;font-size:10.5px}
.sc-update .u-text{font-size:13px;line-height:1.5;color:var(--st-ink)}
.sc-update .u-by{margin-top:7px;font-size:11px;color:var(--st-muted)}
.sc-update .u-by b{color:var(--st-ink);font-weight:600}
.u-avatar{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:var(--st-accent);color:#fff;font:700 8px Arial;vertical-align:-3px;margin-right:5px}
.sc-noupdate{margin-top:10px;font-size:11.5px;color:var(--st-muted2);font-style:italic}
.sc-foot{padding:11px 16px;border-top:1px solid var(--st-border);background:var(--st-soft)}
.sc-foot a{color:var(--st-accent);font-weight:700;font-size:13px;text-decoration:none}
.sc-foot a:hover{text-decoration:underline}

/* ============================ /status page ============================ */
.st-page{width:min(94%,1100px);margin:34px auto 0;flex:0 0 auto}
.st-hero{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:12px;
  border:1px solid var(--st-border);margin-bottom:8px;background:var(--st-panel)}
.st-hero.ok{background:var(--st-ok-bg);border-color:var(--st-ok-bd)}
.st-hero.crit{background:var(--st-crit-bg);border-color:var(--st-crit-bd)}
.st-hero .st-bigdot{width:18px;height:18px;border-radius:50%;flex:none}
.st-hero.ok .st-bigdot{background:var(--st-ok)}
.st-hero.crit .st-bigdot{background:var(--st-crit)}
.st-hero h2{margin:0;font-size:20px}
.st-hero p{margin:2px 0 0;color:var(--st-muted);font-size:13px}
.st-hero .st-asof{margin-left:auto;text-align:right;font-size:11px;color:var(--st-muted);white-space:nowrap}
.st-sec{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.st-sec h3{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--st-muted)}
.st-sec .st-rule{flex:1;height:1px;background:var(--st-border)}
.comp-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.comp{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;
  background:var(--st-panel);border:1px solid var(--st-border);border-radius:999px;
  box-shadow:0 7px 22px rgba(30,65,95,.07)}
/* service name colored by worst open INC: green = clear, yellow = lower, red = high */
.comp .comp-name{font-weight:700;font-size:13.5px}
.comp .comp-name.sev-green{color:var(--st-ok)}
.comp .comp-name.sev-yellow{color:var(--st-warn)}
.comp .comp-name.sev-red{color:var(--st-crit)}
.st-incidents{display:flex;flex-direction:column;gap:12px}
.st-empty{padding:26px;text-align:center;color:var(--st-muted);font-size:14px;
  background:var(--st-ok-bg);border:1px dashed var(--st-ok-bd);border-radius:10px}
.st-inccard{background:var(--st-panel);border:1px solid var(--st-border);border-radius:10px;
  padding:16px 18px;box-shadow:0 7px 22px rgba(30,65,95,.07)}
.st-inccard .ic-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.st-inccard .ic-top .inc-summary{font-size:15px}
.st-inccard .ic-meta{margin-left:auto;font-size:11px;color:var(--st-muted);white-space:nowrap}
/* QoS */
.qos-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.qos-card{background:var(--st-panel);border:1px solid var(--st-border);border-radius:10px;
  padding:18px 20px;box-shadow:0 7px 22px rgba(30,65,95,.07)}
.qos-card h4{margin:0 0 14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--st-muted)}
.qos-row{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--st-border)}
.qos-row:last-child{border-bottom:0}
.qos-row .qn{font-size:13px;font-weight:600}
.qos-row .qv{font:700 14px Arial;font-variant-numeric:tabular-nums}
.qos-row .qbar{grid-column:1/-1;height:6px;border-radius:4px;background:var(--st-border);overflow:hidden}
.qos-row .qbar i{display:block;height:100%;border-radius:4px;background:var(--st-ok)}
.qos-row.low .qv{color:var(--st-warn)}
.qos-row.low .qbar i{background:var(--st-warn)}
.qos-big{font:800 40px Arial;font-variant-numeric:tabular-nums;line-height:1}
.qos-big small{font-size:15px;color:var(--st-muted);font-weight:600}
.qos-note{color:var(--st-muted);font-size:12px;margin-top:4px}
.qos-chart{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:18px;padding-top:10px}
.qos-chart .qcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.qos-chart .qcol i{width:100%;max-width:22px;border-radius:4px 4px 0 0;background:var(--st-accent)}
.qos-chart .qcol.major i{background:var(--st-crit)}
.qos-chart .qcol span{font-size:10px;color:var(--st-muted)}
.qos-chart .qcol b{font:700 11px Arial;color:var(--st-ink);font-variant-numeric:tabular-nums}
.qos-legend{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--st-muted)}
.qos-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* Uptime timeline — one full-width bar per service, one segment per day of year */
.up-list{display:flex;flex-direction:column;gap:16px}
.up-row{display:flex;flex-direction:column;gap:7px}
.up-head{display:flex;align-items:baseline;justify-content:space-between}
.up-name{font-weight:700;font-size:14px}
.up-pct{font:700 12px Arial;font-variant-numeric:tabular-nums;color:var(--st-muted)}
.up-pct.warn{color:var(--st-warn)}
.up-pct.crit{color:var(--st-crit)}
/* solid green bar; outages are absolutely-positioned marks over it */
.up-bar{position:relative;height:30px;border-radius:5px;background:var(--st-ok)}
.up-mark{position:absolute;top:0;bottom:0;min-width:5px;border-radius:2px;display:block;
  cursor:help;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.up-mark.s-warn{background:var(--st-warn)}
.up-mark.s-down{background:var(--st-crit)}
.up-mark:hover{filter:brightness(1.08)}
/* hover tooltip carrying the INC link */
.up-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--st-ink);color:var(--st-panel);font:600 11px Arial;white-space:normal;
  width:max-content;max-width:220px;text-align:center;line-height:1.35;
  padding:6px 10px;border-radius:6px;box-shadow:0 8px 20px rgba(20,45,80,.28);
  opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:5}
.up-tip b{display:block;font-weight:700}
.up-tip .up-tip-meta{display:block;margin-top:3px;font-weight:400;opacity:.82;
  font-variant-numeric:tabular-nums}
.up-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--st-ink)}
.up-mark:hover .up-tip,.up-mark:focus-visible .up-tip{opacity:1}
.up-axis{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;color:var(--st-muted)}
@media(max-width:760px){.comp-grid{grid-template-columns:1fr}}


/* ===== Flat incident banner in the page body, above the cards (test page 2) ===== */
.inc-banner{width:min(94%,1500px);margin:26px auto 0;
  background:var(--st-crit-bg);border:1px solid var(--st-crit-bd);border-radius:10px;
  padding:16px 22px;display:flex;flex-direction:column;gap:14px}
.ib-item{display:flex;flex-direction:column;gap:5px}
.ib-item + .ib-item{border-top:1px solid var(--st-crit-bd);padding-top:14px}
.ib-line{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ib-key{font:800 13px var(--st-mono);color:var(--st-crit);text-decoration:none}
.ib-key:hover{text-decoration:underline}
.ib-sum{font-weight:700;font-size:16px;color:var(--st-crit)}
.ib-comment{font-size:13.5px;line-height:1.55;color:var(--st-crit)}
.ib-clabel{font:700 10px Arial;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-right:7px}
.ib-by{opacity:.85;font-style:italic}