/* Status page theme for ctrlt. Generated from palettes; shared layout is in status-base.css. */
@import url("/css/status-base.css");

@font-face { font-family: "Atkinson Next"; src: url("/brand/fonts/atkinson-next-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Next"; src: url("/brand/fonts/atkinson-next-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Mono"; src: url("/brand/fonts/atkinson-mono-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Mono"; src: url("/brand/fonts/atkinson-mono-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html:root {
  --t-healthy: "Operational";
  --t-unhealthy: "Down";
  --t-degraded: "Degraded";
  --t-unknown: "Unknown";
  --t-subtitle: "Status page";
  --font-body: "Atkinson Next", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Atkinson Next", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Atkinson Mono", ui-monospace, monospace;
  --radius-card: 22px;
  --badge-radius: 999px;
  --logo-h: 2.25rem;
  --heading-tracking: -0.025em;
}

html:root {
  --background: 48.0 20.0% 95.1%;
  --foreground: 240.0 5.9% 10.0%;
  --card: 0.0 0.0% 100.0%;
  --popover: 0.0 0.0% 100.0%;
  --primary: 240.0 5.9% 10.0%;
  --primary-foreground: 60.0 9.1% 97.8%;
  --secondary: 50.0 15.8% 92.5%;
  --secondary-foreground: 240.0 5.9% 10.0%;
  --muted: 50.0 15.8% 92.5%;
  --muted-foreground: 240.0 4.4% 35.7%;
  --accent: 50.0 15.8% 92.5%;
  --accent-foreground: 240.0 5.9% 10.0%;
  --border: 50.0 9.7% 87.8%;
  --ring: 15.8 100.0% 56.1%;
  --ok: 142.1 76.2% 36.3%;
  --ok-strong: 142.4 71.8% 29.2%;
  --ok-soft: 141.0 78.9% 85.1%;
  --ok-fg: 0.0 0.0% 100.0%;
  --bad: 358.1 75.1% 59.0%;
  --bad-strong: 358.0 57.6% 50.0%;
  --bad-soft: 358.7 100.0% 91.0%;
  --bad-fg: 0.0 0.0% 100.0%;
  --warn: 37.7 92.1% 50.2%;
  --warn-fg: 37.1 100.0% 8.2%;
  --card-foreground: 240.0 5.9% 10.0%;
  --popover-foreground: 240.0 5.9% 10.0%;
  --input: 50.0 9.7% 87.8%;
  --destructive: 358.1 75.1% 59.0%;
  --destructive-foreground: 0.0 0.0% 100.0%;
  --key-face: #ffffff;
  --key-edge: #d5d3cb;
  --key-ink: #2b2b30;
  --card-shadow: 0 1px 2px rgb(16 16 20 / .04), 0 6px 16px -8px rgb(16 16 20 / .12);
  --header-bg: rgb(245 244 240 / .85);
}

html:root.dark {
  --background: 240.0 6.7% 5.9%;
  --foreground: 60.0 8.3% 95.3%;
  --card: 240.0 6.4% 9.2%;
  --popover: 240.0 7.1% 11.0%;
  --primary: 60.0 8.3% 95.3%;
  --primary-foreground: 240.0 8.1% 7.3%;
  --secondary: 240.0 7.1% 11.0%;
  --secondary-foreground: 60.0 8.3% 95.3%;
  --muted: 240.0 7.1% 11.0%;
  --muted-foreground: 240.0 4.9% 67.8%;
  --accent: 240.0 5.6% 14.1%;
  --accent-foreground: 60.0 8.3% 95.3%;
  --border: 240.0 5.4% 14.5%;
  --ring: 16.2 100.0% 60.0%;
  --ok: 140.4 60.5% 52.4%;
  --ok-strong: 140.5 58.4% 44.3%;
  --ok-soft: 142.2 60.5% 14.9%;
  --ok-fg: 140.0 69.2% 7.6%;
  --bad: 358.1 100.0% 68.2%;
  --bad-strong: 358.1 75.1% 59.0%;
  --bad-soft: 357.7 55.8% 18.6%;
  --bad-fg: 356.8 78.7% 9.2%;
  --warn: 38.7 87.3% 69.0%;
  --warn-fg: 37.1 100.0% 8.2%;
  --card-foreground: 60.0 8.3% 95.3%;
  --popover-foreground: 60.0 8.3% 95.3%;
  --input: 240.0 5.4% 14.5%;
  --destructive: 358.1 100.0% 68.2%;
  --destructive-foreground: 356.8 78.7% 9.2%;
  --key-face: #26262b;
  --key-edge: #050506;
  --key-ink: #ececea;
  --card-shadow: inset 0 1px 0 rgb(255 255 255 / .035), 0 28px 56px -28px rgb(0 0 0 / .7);
  --header-bg: rgb(14 14 16 / .85);
}

/* ctrl+t: the "ctrl" key cap in front of the orange T, like on ctrlt.app */
#global header .flex.items-center.gap-3 > div:first-child::before {
  content: "ctrl"; font: 600 .72rem/1 var(--font-mono); color: var(--key-ink);
  background: var(--key-face); border: 1px solid var(--key-edge); border-bottom-width: 3px;
  border-radius: 7px; padding: .34rem .5rem .28rem; margin-right: .5rem;
}
#global header .w-12.h-12 img { filter: drop-shadow(0 1px 0 rgb(0 0 0 / .08)); }
.dashboard-container .mb-6 > .flex.items-center.justify-between p { font-family: var(--font-mono); font-size: .9rem; }