@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
/* status.gemmein.com — one page, one job: is it Gemmein?
   Tokens are the V2 site's (v2/site.css) so the page reads as gemmein.com.
   The four state colours are the page's own; nothing else is new. */
:root{
  --ink:#162a24;--muted:#64736c;--green:#087b56;--deep:#092f24;--mint:#b3efc8;
  --line:#dbe4de;--wash:#f3f7f4;--white:#fff;
  --ok:#087b56;--ok-wash:#e8f3ec;--ok-ink:#216440;
  --slow:#b7791f;--slow-wash:#fbf3e4;--slow-ink:#7a4e0c;
  --down:#b04a35;--down-wash:#f9ebe7;--down-ink:#7d3122;
  --quiet:#8a938e;--quiet-wash:#eef0ef;--quiet-ink:#4f5753;
  --ok-line:#cfdfd4;--slow-line:#e6dfcb;--down-line:#ecd3cc;--quiet-line:#dfe3e1;
  --none:#e3e8e5;--header-bg:#fffffffa;--focus:#ce9a00;--tip-ink:#f2f6f4;
  --seal-degraded:#f3c96b;--seal-outage:#f0a08d;--seal-quiet:#cfd6d2;--quiet-border:#e2d8bf;--active-wash:#fffaf8;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light dark;
}
/* The same page after dark: every colour above is a token, so this is the
   whole of dark mode — the seal, the tags, the strip and the cards follow. */
@media (prefers-color-scheme:dark){:root{
  --ink:#e6efe9;--muted:#9aa8a1;--green:#5fd3a5;--deep:#0b2a20;--mint:#b3efc8;
  --line:#26332d;--wash:#121b17;--white:#0e1512;
  --ok:#4fc38f;--ok-wash:#12301f;--ok-ink:#b3efc8;--ok-line:#1e4634;
  --slow:#e0a63b;--slow-wash:#2e2410;--slow-ink:#f3d58f;--slow-line:#4a3a17;
  --down:#e07a63;--down-wash:#331812;--down-ink:#f4b9ab;--down-line:#4d2419;
  --quiet:#7d8782;--quiet-wash:#1a211e;--quiet-ink:#b7c0bb;--quiet-line:#2a332f;
  --none:#1f2925;--header-bg:#0e1512fa;--focus:#f0c24a;--tip-ink:#e6efe9;
  --seal-degraded:#e0a63b;--seal-outage:#e07a63;--seal-quiet:#3a453f;--quiet-border:#4a3a17;--active-wash:#1b1412;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.65;color:var(--ink);background:var(--white)}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:Manrope,Arial,sans-serif;letter-spacing:-.035em;font-weight:650}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;top:-100px;left:16px;background:var(--white);padding:10px;z-index:100}
.skip:focus{top:10px}
.container{width:min(760px,calc(100% - 48px));margin:auto}

/* ── chrome: the V2 header, reduced to what a status page needs ── */
.header{background:var(--header-bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;gap:24px;min-height:70px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:Manrope,Arial,sans-serif;font-size:1.4rem;font-weight:800;letter-spacing:-.06em}
.brand svg{width:26px;height:26px}
.brand small{font-family:'DM Sans',Arial,sans-serif;font-size:.8rem;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:2px;padding-left:11px;border-left:1px solid var(--line);line-height:1}
.nav-links{display:flex;align-items:center;gap:22px;font-size:.875rem;font-weight:550;margin-left:auto}
.nav-links a:hover{color:var(--green)}
.icon{width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── the seal: overall state, carried by the mark itself ── */
.seal{padding:72px 0 44px;text-align:center}
.seal-mark{display:block;width:64px;height:64px;margin:0 auto 26px;overflow:visible;filter:drop-shadow(0 8px 18px rgba(15,122,90,.28))}
.seal-mark .step-i{transition:fill .6s var(--ease)}
.seal h1{font-size:clamp(1.9rem,4.2vw,2.6rem);line-height:1.15;letter-spacing:-.045em}
.seal-when{margin-top:12px;font-size:.875rem}
.seal-when time{font-family:var(--mono);font-size:.8rem;color:var(--ink)}
.seal-quiet{margin:18px auto 0;max-width:520px;padding:12px 16px;border:1px solid var(--quiet-border);background:var(--slow-wash);border-radius:7px;font-size:.875rem;color:var(--slow-ink)}
[data-overall=operational] .seal-mark .step-i{fill:var(--mint)}
[data-overall=degraded] .seal-mark .step-i{fill:var(--seal-degraded)}
[data-overall=outage] .seal-mark .step-i{fill:var(--seal-outage)}
[data-overall=quiet] .seal-mark{filter:drop-shadow(0 8px 18px rgba(22,42,36,.16))}
[data-overall=quiet] .seal-mark .step-i{fill:var(--seal-quiet)}
@media (prefers-reduced-motion:no-preference){
  .seal-mark{animation:seal-float 6s ease-in-out infinite}
  [data-overall=quiet] .seal-mark{animation:none}
  .seal{animation:rise .55s var(--ease) both}
}
@keyframes seal-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── components: a row is a state, the strip beneath it is the record ── */
.section{padding:28px 0 44px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:14px}
.section-head h2{font-size:1.15rem}
.section-head span{font-size:.8rem;color:var(--muted)}
.legend{display:flex;gap:16px;font-size:.75rem;color:var(--muted)}
.legend i{display:inline-block;width:8px;height:12px;border-radius:2px;vertical-align:-1px;margin-right:6px}
.legend i.ok{background:var(--ok)}.legend i.slow{background:var(--slow)}.legend i.down{background:var(--down)}.legend i.none{background:var(--none)}
.rows{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--white)}
.row{padding:18px 20px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.row-top h3{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.row-sub{font-size:.875rem;margin-top:2px}
.tag{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:550;padding:4px 9px;border-radius:4px;border:1px solid transparent;white-space:nowrap}
.tag::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.tag.operational{background:var(--ok-wash);color:var(--ok-ink);border-color:var(--ok-line)}
.tag.degraded{background:var(--slow-wash);color:var(--slow-ink);border-color:var(--slow-line)}
.tag.outage{background:var(--down-wash);color:var(--down-ink);border-color:var(--down-line)}
.tag.quiet{background:var(--quiet-wash);color:var(--quiet-ink);border-color:var(--quiet-line)}
.strip{display:flex;gap:2px;margin-top:14px;height:22px}
.strip i{flex:1 1 0;min-width:0;border-radius:2px;background:var(--none);position:relative}
.strip i.ok{background:var(--ok);opacity:.82}
.strip i.degraded{background:var(--slow)}
.strip i.outage{background:var(--down)}
.strip i:hover{opacity:1;outline:2px solid var(--ink);outline-offset:1px}
.strip-foot{display:flex;justify-content:space-between;gap:12px;font-size:.75rem;color:var(--muted);margin-top:8px}
.strip-foot b{font-weight:550;color:var(--ink);font-family:var(--mono);font-size:.75rem}
.day-tip{position:fixed;z-index:30;pointer-events:none;background:var(--deep);color:var(--tip-ink);font-size:.75rem;line-height:1.4;padding:7px 10px;border-radius:5px;max-width:260px;transform:translate(-50%,calc(-100% - 10px))}
.row.is-quiet h3,.row.is-quiet .row-sub{color:var(--muted)}

/* ── incidents ── */
.incident{border:1px solid var(--line);border-radius:9px;padding:20px 22px;background:var(--white)}
.incident+.incident{margin-top:12px}
.incident.active{border-color:var(--down-line);background:var(--active-wash)}
.incident-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.incident-top h3{font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.incident-meta{font-size:.8rem;margin-top:4px}
.incident-meta time{font-family:var(--mono);font-size:.75rem;color:var(--ink)}
.updates{list-style:none;margin:14px 0 0;padding:0;border-left:2px solid var(--line)}
.updates li{padding:4px 0 10px 16px;font-size:.9rem}
.updates li:last-child{padding-bottom:0}
.updates b{display:block;font-weight:550;color:var(--ink);font-size:.8rem;letter-spacing:.02em;text-transform:uppercase}
.updates time{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-left:8px;text-transform:none;letter-spacing:0}
.updates p{margin-top:3px;color:var(--ink)}
.noscript{margin:0 0 8px;padding:12px 16px;border:1px solid var(--line);border-radius:7px;font-size:.875rem;background:var(--wash)}
.noscript a{text-decoration:underline}
.empty{padding:22px;border:1px dashed var(--line);border-radius:9px;text-align:center;font-size:.9rem}

/* ── footer ── */
.footer{border-top:1px solid var(--line);padding:20px 0 32px;display:flex;justify-content:space-between;gap:24px;font-size:.75rem;color:var(--muted)}
.footer .container{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer a:hover{color:var(--green)}

@media (max-width:640px){
  .container{width:calc(100% - 32px)}
  .seal{padding:52px 0 36px}
  .row-top{flex-direction:column;align-items:flex-start;gap:8px}
  .section-head{flex-direction:column;gap:6px}
  .strip{gap:1px}
  .brand small{display:none}
  .nav{gap:14px}.nav-links{gap:14px}.nav-links a:last-child{display:none}
  .legend{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}