/* Smackdab Status page. Built from the approved mock
   (design-proposals/status-page/mock.html) and the Smackdab Design Standard.
   No inline styles anywhere: every visual state is a class in this file. */

@font-face{font-family:'Matter';src:url(/fonts/Matter-Regular.d73bbf19c550129c1da34f9077427ee6d9965e03b060a189176d90197db104ad.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Matter';src:url(/fonts/Matter-Medium.102c022707b6f0eea9479139bec31e3ed9c173c18ca2afc2542b81d560a435a0.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Matter';src:url(/fonts/Matter-SemiBold.6744d7e7c235825a84521ac5c8bfdf2c8628d09bfbeb8e2eaad5426e3410628f.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Matter';src:url(/fonts/Matter-Bold.763df874db33d72bbc4e9d59a55367ec2f1e751d657b66e8c6fb9a8e43730527.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --canvas:#f5f5f5; --card:#ffffff; --surface-2:#f5f5f3; --strip:#fafaf8;
  --line:#deded9; --line-soft:#efeee9; --track:#ecebe6;
  --ink:#171717; --ink-2:#60605d; --ink-3:#70706a;
  --accent:#c95000; --accent-hover:#b94700; --accent-ink:#ffffff;
  --link:#c95000; --brand:#ff6a00;
  --ok:#24bd63;   --ok-bg:#e9f8ef;
  --deg:#fcc12c;  --deg-bg:#fff9ea;
  --part:#5d2dc7; --part-bg:#efeaf9;
  --maj:#d32f2f;  --maj-bg:#fbeaea;
  --mnt:#2d7fa6;  --mnt-bg:#eaf5f9;
  --unk:#9b9b9b;  --unk-bg:#e3e3e3;
  --nodata:#ecebe6;
  --shadow-card:0 1px 2px rgba(0,0,0,.04);
  --shadow-menu:0 12px 30px rgba(0,0,0,.10);
  --tip-bg:#171717; --tip-ink:#ffffff;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --canvas:#1a1a1a; --card:#242424; --surface-2:#1a1a1a; --strip:#1a1a1a;
    --line:#3a3a3a; --line-soft:#3a3a3a; --track:#3a3a3a;
    --ink:#e8e8e8; --ink-2:#b3b3ad; --ink-3:#9a9a94;
    --accent:#ff8533; --accent-hover:#ff8533; --accent-ink:#1a1a1a; --link:#ff8533;
    --ok:#2ed47a;   --ok-bg:rgba(46,212,122,.14);
    --deg:#fcc12c;  --deg-bg:rgba(252,193,44,.14);
    --part:#9b7ce8; --part-bg:rgba(155,124,232,.16);
    --maj:#e54545;  --maj-bg:rgba(229,69,69,.16);
    --mnt:#5fb0d6;  --mnt-bg:#1e2e36;
    --unk:#9a9a94;  --unk-bg:rgba(154,154,148,.18);
    --nodata:#3a3a3a;
    --shadow-menu:0 12px 30px rgba(0,0,0,.45);
    --tip-bg:#e8e8e8; --tip-ink:#1a1a1a;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);
  font:400 15px/1.5 Matter,system-ui,sans-serif;overflow-x:hidden}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
.noscript{font-size:14px;color:var(--ink-2)}

/* Header */
header.site{padding:28px 0 20px}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wordmark{display:flex;align-items:center;gap:10px;color:var(--ink)}
.wordmark:hover{text-decoration:none}
.mark{display:block;flex:none}
.wordmark b{font-size:18px;font-weight:600}
.wordmark span{font-size:18px;color:var(--ink-2);font-weight:400}
.actions{display:flex;align-items:center;gap:12px}
.btn{font:600 14px/1 Matter,system-ui,sans-serif;height:35px;padding:0 16px;border-radius:9999px;cursor:pointer;box-shadow:none;
  border:1px solid var(--line);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.btn:hover{text-decoration:none}
.btn svg{width:14px;height:14px;flex:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* Overall-status banner: flat tint, status icon, ink text */
.banner{border-radius:12px;padding:20px 22px;display:flex;align-items:center;gap:16px;min-height:84px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.banner .icon{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff}
.banner .icon svg{width:20px;height:20px}
.banner h1{margin:0;font-size:32px;font-weight:700;line-height:1.15;color:var(--ink)}
.banner p{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
.banner.ok{background:var(--ok-bg);border-color:transparent}.banner.ok .icon{background:var(--ok)}
.banner.deg{background:var(--deg-bg);border-color:transparent}.banner.deg .icon{background:var(--deg);color:#171717}
.banner.part{background:var(--part-bg);border-color:transparent}.banner.part .icon{background:var(--part)}
.banner.maj{background:var(--maj-bg);border-color:transparent}.banner.maj .icon{background:var(--maj)}
.banner.mnt{background:var(--mnt-bg);border-color:transparent}.banner.mnt .icon{background:var(--mnt)}
.banner.unk{background:var(--unk-bg);border-color:transparent}.banner.unk .icon{background:var(--unk)}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card)}
section{margin-top:32px}
h2.sec{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1.6px;color:var(--ink);margin:0 0 12px}

/* Active incident */
.incident{padding:20px 22px;border-left:4px solid var(--c);--c:var(--unk)}
.incident + .incident{margin-top:12px}
.incident.ok{--c:var(--ok)}.incident.deg{--c:var(--deg)}.incident.part{--c:var(--part)}
.incident.maj{--c:var(--maj)}.incident.mnt{--c:var(--mnt)}.incident.unk{--c:var(--unk)}
.incident .top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.incident h3{margin:0;font-size:18px;font-weight:600;line-height:1.35}
.meta{font-size:14px;color:var(--ink-2);margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{font-size:12px;font-weight:500;padding:3px 10px;border-radius:9999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.stages{display:flex;margin:18px 0 4px;padding:0;list-style:none;gap:4px}
.stages li{flex:1;font-size:12px;color:var(--ink-3);padding-top:8px;border-top:3px solid var(--track);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stages li.done{border-color:var(--c);color:var(--ink-2)}
.stages li.cur{border-color:var(--c);color:var(--ink);font-weight:600}
.updates{list-style:none;margin:16px 0 0;padding:0}
.updates li{position:relative;padding:0 0 16px 18px;border-left:2px solid var(--line-soft);margin-left:5px}
.updates li:last-child{padding-bottom:0;border-left-color:transparent}
.updates li::before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--card);border:2px solid var(--c)}
.updates li:first-child::before{background:var(--c)}
.updates .st{font-weight:600;font-size:14px}
.updates time{font-size:12px;color:var(--ink-3);margin-left:6px}
.updates p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.note{display:flex;align-items:center;gap:6px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-3)}
.note svg{width:13px;height:13px;flex:none}

/* Status pills: tint fill, coloured dot, ink text */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:9999px;white-space:nowrap;color:var(--ink)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot)}
.pill.ok{background:var(--ok-bg);--dot:var(--ok)}
.pill.deg{background:var(--deg-bg);--dot:var(--deg)}
.pill.part{background:var(--part-bg);--dot:var(--part)}
.pill.maj{background:var(--maj-bg);--dot:var(--maj)}
.pill.mnt{background:var(--mnt-bg);--dot:var(--mnt)}
.pill.unk{background:var(--unk-bg);--dot:var(--unk)}
/* Status data older than 5 minutes: every badge greys out */
body.stale .pill{background:var(--unk-bg);--dot:var(--unk);color:var(--ink-2)}
body.stale .live i{background:var(--unk)}

/* Services */
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-2);margin:0 0 12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.sw.ok{background:var(--ok)}.sw.deg{background:var(--deg)}.sw.part{background:var(--part)}
.sw.maj{background:var(--maj)}.sw.mnt{background:var(--mnt)}.sw.unk{background:var(--unk)}
.group{margin-bottom:12px;overflow:hidden}
.group > button.gh{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;padding:16px 22px;cursor:pointer;background:var(--card)}
.group > button.gh:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gh .chev{width:16px;height:16px;flex:none;color:var(--ink-3);transition:transform .15s}
.group[data-open="false"] .chev{transform:rotate(-90deg)}
.gh .name{font-weight:600;font-size:18px;flex:1;min-width:0;color:var(--ink)}
.gh .count{font-size:12px;color:var(--ink-3);margin-right:4px}
.group[data-open="false"] .rows{display:none}
.row{padding:16px 22px;border-top:1px solid var(--line-soft)}
.row .h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.row .t{min-width:0}
.row .n{font-weight:500;font-size:15px;display:flex;align-items:center;gap:6px}
.row .d{font-size:14px;color:var(--ink-2)}

/* "Monitored by our team" hint: CSS-only tooltip on hover and keyboard focus */
.team{position:relative;display:inline-flex;align-items:center;color:var(--ink-3);cursor:help;border-radius:50%}
.team svg{width:14px;height:14px}
.team .hint{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:20;white-space:nowrap;
  pointer-events:none;background:var(--tip-bg);color:var(--tip-ink);font-size:12px;font-weight:400;line-height:1.45;
  padding:6px 10px;border-radius:8px;box-shadow:var(--shadow-menu);opacity:0;transition:opacity .08s}
.team:hover .hint,.team:focus .hint,.team:focus-visible .hint{opacity:1}

.bars{position:relative;display:flex;gap:2px;margin-top:12px;height:30px}
.bar{flex:1;min-width:0;border-radius:2px;background:var(--nodata);cursor:pointer;transition:opacity .1s}
.bar.ok{background:var(--ok)}.bar.deg{background:var(--deg)}.bar.part{background:var(--part)}
.bar.maj{background:var(--maj)}.bar.mnt{background:var(--mnt)}.bar.unk{background:var(--nodata)}
.bar:hover,.bar.active{opacity:.7}
.bar:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:2px}
.axis{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:6px;gap:8px}
.axis .up{color:var(--ink-2);font-weight:500}

/* Day tooltip: lives inside the hovered .bars row, placed by an .at-N class */
.tip{position:absolute;bottom:calc(100% + 8px);z-index:20;pointer-events:none;width:max-content;max-width:260px;
  background:var(--tip-bg);color:var(--tip-ink);font-size:12px;line-height:1.45;padding:8px 10px;border-radius:8px;
  box-shadow:var(--shadow-menu);opacity:0;transition:opacity .08s}
.tip.show{opacity:1}
.tip b{display:block;font-size:13px;font-weight:600}
.tip .inc{margin-top:4px;padding-top:4px;border-top:1px solid rgba(127,127,127,.35)}
.tip .inc span{display:block}

/* Past incidents */
.day{padding:16px 22px;border-top:1px solid var(--line-soft)}
.day:first-child{border-top:0}
.day h3{margin:0 0 6px;font-size:15px;font-weight:600}
.day .none{font-size:14px;color:var(--ink-2);margin:0}
.past{margin:8px 0 0}
.past .pt{font-weight:500;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--unk)}
.dot.ok{background:var(--ok)}.dot.deg{background:var(--deg)}.dot.part{background:var(--part)}
.dot.maj{background:var(--maj)}.dot.mnt{background:var(--mnt)}.dot.unk{background:var(--unk)}
.past p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.past small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.collapse-note{font-size:14px;color:var(--ink-2);padding:12px 22px;border-top:1px solid var(--line-soft);background:var(--strip);border-radius:0 0 12px 12px}

footer{margin:40px 0 32px;font-size:11px;color:var(--ink-2)}
footer .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.live{display:inline-flex;align-items:center;gap:6px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.live.wait i{background:var(--unk)}

@media (max-width:560px){
  header.site{padding:20px 0 16px}
  .banner{padding:16px}
  .banner h1{font-size:27px}
  .incident,.row,.day{padding-left:16px;padding-right:16px}
  .collapse-note{padding-left:16px;padding-right:16px}
  .group > button.gh{padding:14px 16px}
  .gh .name{font-size:16px}
  .gh .count{display:none}
  .row .h{flex-direction:column;gap:6px}
  .bars{gap:1px;height:28px}
  .stages li{font-size:11px}
  .tip{max-width:220px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Tooltip placement for the 30 day bars (generated: at-0 to at-29).
   Left edge days anchor left, right edge days anchor right, the rest centre on the bar. */
.tip.at-0{left:0}
.tip.at-1{left:0}
.tip.at-2{left:0}
.tip.at-3{left:0}
.tip.at-4{left:0}
.tip.at-5{left:0}
.tip.at-6{left:0}
.tip.at-7{left:0}
.tip.at-8{left:28.3333%;transform:translateX(-50%)}
.tip.at-9{left:31.6667%;transform:translateX(-50%)}
.tip.at-10{left:35.0000%;transform:translateX(-50%)}
.tip.at-11{left:38.3333%;transform:translateX(-50%)}
.tip.at-12{left:41.6667%;transform:translateX(-50%)}
.tip.at-13{left:45.0000%;transform:translateX(-50%)}
.tip.at-14{left:48.3333%;transform:translateX(-50%)}
.tip.at-15{left:51.6667%;transform:translateX(-50%)}
.tip.at-16{left:55.0000%;transform:translateX(-50%)}
.tip.at-17{left:58.3333%;transform:translateX(-50%)}
.tip.at-18{left:61.6667%;transform:translateX(-50%)}
.tip.at-19{left:65.0000%;transform:translateX(-50%)}
.tip.at-20{left:68.3333%;transform:translateX(-50%)}
.tip.at-21{left:71.6667%;transform:translateX(-50%)}
.tip.at-22{right:0}
.tip.at-23{right:0}
.tip.at-24{right:0}
.tip.at-25{right:0}
.tip.at-26{right:0}
.tip.at-27{right:0}
.tip.at-28{right:0}
.tip.at-29{right:0}