@font-face {
  font-family: 'Zen Dots';
  src: url(/fonts/ZenDots-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Fruit salad on midnight.
   A dark blueberry base, fruit-bright accents and a spectrum used sparingly (the logo, the top edge, the selected tab, the main button, the first-steps card), so it feels playful and
   welcoming without getting in the way of reading data. Every text colour is checked for contrast against every surface it sits on in test/theme.js, and the team colours in
   public/js/palette.js are checked against these panels in test/palette.js. */
:root {
  color-scheme: dark;
  /* surfaces: blueberry midnight */
  --bg-deep: #0c0a18;
  --bg: #110e22;
  --panel: #1a1631;
  --panel2: #231d3f;
  --field: #0e0b1d;
  --line: #352d58;
  --track: #2b2450;
  /* text */
  --text: #f7f4ff;
  --muted: #b7afd9;
  --dim: #8d85b6;
  /* the fruit bowl */
  --watermelon: #ff5c8a;
  --tangerine: #ff8f3f;
  --mango: #ffc13d;
  --lemon: #ffe66b;
  --lime: #7be88f;
  --mint: #4fe6cf;
  --blueberry: #6ea8ff;
  --grape: #a98bff;
  --raspberry: #f06cc4;
  /* meaning */
  --accent: #ff8f3f;
  --accent2: #ffc13d;
  --blue: #7db2ff;
  --green: #6ee59b;
  --red: #ff6b8b;
  --amber: #ffc547;
  --purple: #b79dff;
  --teal: #4fe6cf;
  --focus: #ffd166;
  --glow1: rgba(255, 92, 138, 0.14);
  --glow2: rgba(110, 168, 255, 0.12);
  --glow3: rgba(
    169,
    139,
    255,
    0.1
  ); /* the glow behind the page: each expansion sets its own (theme.css) */
  --spectrum: linear-gradient(
    90deg,
    #ff5c8a,
    #ff8f3f,
    #ffc13d,
    #7be88f,
    #4fe6cf,
    #6ea8ff,
    #a98bff
  );
  --juice: linear-gradient(135deg, #ff5c8a 0%, #ff8f3f 55%, #ffc13d 100%);
  --radius: 14px;
  --radius-sm: 10px;
  --lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(6, 3, 18, 0.35);
  --display:
    'Zen Dots', 'Arial Black', system-ui, sans-serif; /* the wordmark's face, for page titles only (self-hosted, OFL) */
  --mono:
    ui-monospace, SFMono-Regular, 'Cascadia Code', Menlo, Consolas, monospace;
  --topbar-h: 54px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  color: var(--text);
  font:
    14px/1.5 ui-sans-serif,
    system-ui,
    'Segoe UI Variable Text',
    'Segoe UI',
    Inter,
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  background:
    radial-gradient(900px 480px at 8% -8%, var(--glow1), transparent 62%),
    radial-gradient(800px 460px at 100% 0%, var(--glow2), transparent 58%),
    radial-gradient(700px 420px at 50% 115%, var(--glow3), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}
::selection {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  color: #fff;
}
a {
  color: var(--blue);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--text);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
button {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
button:hover {
  border-color: var(--accent2);
  background: #2a2349;
}
button:active {
  transform: translateY(1px);
}
button.primary {
  background: var(--juice);
  border-color: transparent;
  color: #1b1030;
  font-weight: 700;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
button.primary:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 36%, transparent);
}
button.danger {
  border-color: #7a3050;
  color: var(--red);
}
button.small {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 8px;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}
input,
select,
textarea {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
textarea {
  width: 100%;
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--watermelon);
}
.mono {
  font-family: var(--mono);
  font-size: 12px;
}
.muted {
  color: var(--muted);
}
.dim {
  color: var(--dim);
}
.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grow {
  flex: 1;
}
.right {
  margin-left: auto;
}
.hidden {
  display: none !important;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* top bar: the spectrum along its edge */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  min-height: var(--topbar-h);
  background: rgba(12, 10, 24, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--spectrum);
}
.logo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo .mark {
  width: 26px;
  height: 26px;
  background: url(/logo-mark.svg) center / contain no-repeat;
  display: inline-block;
  filter: drop-shadow(0 3px 10px rgba(255, 92, 138, 0.35));
  flex: none;
}
.clock {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  white-space: nowrap;
}
.pill.live {
  border-color: rgba(110, 229, 155, 0.5);
  color: var(--green);
  background: rgba(110, 229, 155, 0.08);
}
.pill.paused {
  border-color: rgba(255, 197, 71, 0.5);
  color: var(--amber);
  background: rgba(255, 197, 71, 0.08);
}
.pill.red {
  border-color: rgba(255, 107, 139, 0.5);
  color: var(--red);
  background: rgba(255, 107, 139, 0.08);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
/* The console is laid out like a browser: a bar of bookmarks (every tool, wrapping, never scrolling off the side) and under it the tabs that are open. */
.tabs {
  background: rgba(12, 10, 24, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--topbar-h);
  z-index: 19;
}
.tabrow {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 14px;
}
.tabrow .tabstrip {
  flex: 1;
  min-width: 0;
  padding: 0;
  border-top: 0;
}
.menubtn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 5px 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.menubtn:hover,
.menubtn.on {
  background: rgba(255, 255, 255, 0.08);
}
.menubtn .burger {
  font-size: 1.15em;
  line-height: 1;
}
.menubtn.core::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--juice);
}
/* the tools, as a panel hanging from the button; a tool's tab opens when it is chosen */
.menu {
  position: absolute;
  top: 100%;
  left: 14px;
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - var(--topbar-h) - 90px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 2px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--muted);
  user-select: none;
  border-radius: 8px;
}
.tab:hover,
.tab:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}
.tab.open {
  color: var(--text);
}
.tab.active {
  color: var(--text);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
}
.tabstrip {
  display: flex;
  gap: 2px;
  padding: 0 14px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
}
.otab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 190px;
  min-width: 90px;
  padding: 9px 8px 9px 14px;
  cursor: pointer;
  color: var(--muted);
  user-select: none;
  border-radius: 10px 10px 0 0;
  transition:
    color 0.15s,
    background 0.15s;
}
.otab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.otab.active {
  color: var(--text);
  font-weight: 600;
  background:
    linear-gradient(var(--panel), transparent),
    var(--spectrum) bottom / 100% 3px no-repeat;
}
.otab-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.otab-close {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 1;
  color: var(--muted);
}
.otab-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
}
.tab:focus-visible,
.otab:focus-visible,
.otab-close:focus-visible {
  outline: 2px solid var(--juice);
  outline-offset: 1px;
}
.badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--watermelon);
  color: #1b1030;
  font-size: 11px;
  text-align: center;
  margin-left: 5px;
  font-weight: 800;
}
.badge.amber {
  background: var(--mango);
  color: #1b1030;
}
main {
  padding: 18px;
  max-width: 1640px;
  margin: 0 auto;
}

/* panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--lift);
}
.panel h3 {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel h3 .right {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.grid {
  display: grid;
  gap: 14px;
}
.g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kpis {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--lift);
}
.kpi .label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.kpi .value {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.kpi .sub {
  color: var(--dim);
  font-size: 12px;
}
.kpi.bad {
  border-top-color: var(--red);
}
.kpi.bad .value {
  color: var(--red);
}
.kpi.warn {
  border-top-color: var(--amber);
}
.kpi.warn .value {
  color: var(--amber);
}
.kpi.good {
  border-top-color: var(--green);
}
.kpi.good .value {
  color: var(--green);
}
@media (max-width: 1100px) {
  .g3,
  .g4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
  .topbar {
    flex-wrap: wrap;
  }
}

/* tables */
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  text-align: left;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  position: sticky;
  top: 0;
  background: var(--panel);
}
tr.clickable {
  cursor: pointer;
}
tr.clickable:hover td {
  background: rgba(255, 255, 255, 0.04);
}
td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.scroll {
  overflow: auto;
}
.cellbtn {
  cursor: pointer;
  border-bottom: 1px dotted var(--dim);
}
.cellbtn:hover {
  color: var(--accent2);
  border-bottom-color: var(--accent2);
}
.bar {
  height: 6px;
  background: var(--track);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}
.bar > span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
}
.bar.mit > span {
  background: var(--juice);
}

/* action chips: a soft tint of their own colour */
.act {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.act.allow,
.act.skip {
  background: rgba(110, 229, 155, 0.14);
  color: var(--green);
}
.act.block,
.act.ddos {
  background: rgba(255, 107, 139, 0.16);
  color: #ff9db2;
}
.act.managed_challenge,
.act.js_challenge {
  background: rgba(255, 197, 71, 0.15);
  color: var(--amber);
}
.act.challenge_solved {
  background: rgba(255, 230, 107, 0.13);
  color: #f1e080;
}
.act.rate_limit {
  background: rgba(183, 157, 255, 0.16);
  color: var(--purple);
}
.act.waiting_room {
  background: rgba(79, 230, 207, 0.14);
  color: var(--teal);
}
.act.log {
  background: rgba(125, 178, 255, 0.15);
  color: var(--blue);
}
.sev {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sev.critical {
  background: rgba(255, 92, 138, 0.25);
  color: #ffc2d0;
}
.sev.high {
  background: rgba(255, 143, 63, 0.22);
  color: #ffc68f;
}
.sev.medium {
  background: rgba(255, 230, 107, 0.18);
  color: #f6e787;
}
.sev.low,
.sev.info {
  background: rgba(125, 178, 255, 0.15);
  color: #b5cdf3;
}
.sev.decision {
  background: rgba(183, 157, 255, 0.2);
  color: #d8c8ff;
}
.sev.warning {
  background: rgba(255, 143, 63, 0.22);
  color: #ffc68f;
}

/* rule builder */
.cond {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.6fr auto;
  gap: 6px;
  margin-bottom: 6px;
}
.cond select,
.cond input {
  width: 100%;
}
.exprprev {
  background: var(--field);
  border: 1px dashed var(--line);
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent2);
  word-break: break-word;
}
.rulelist .rule {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--panel2);
}
.rulelist .rule.off {
  opacity: 0.55;
}
.ord {
  color: var(--dim);
  font-family: var(--mono);
  text-align: center;
  padding-top: 2px;
}
.switch {
  position: relative;
  width: 38px;
  height: 22px;
  display: inline-block;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch span {
  position: absolute;
  inset: 0;
  background: var(--track);
  border-radius: 22px;
  cursor: pointer;
  transition: 0.15s;
}
.switch span:before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #d9d3f2;
  border-radius: 50%;
  transition: 0.15s;
}
.switch input:checked + span {
  background: var(--juice);
}
.switch input:checked + span:before {
  transform: translateX(16px);
  background: #fff;
}
.switch input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.setting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.setting:last-child {
  border-bottom: 0;
}
.setting .desc {
  color: var(--muted);
  font-size: 12px;
}

/* alerts & inbox */
.alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--panel2);
}
.alert.unacked {
  border-left: 4px solid var(--red);
}
.alert.unacked.medium {
  border-left-color: var(--amber);
}
.alert.unacked.low {
  border-left-color: var(--blue);
}
.alert .title {
  font-weight: 700;
}
.msg {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--panel2);
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
}
.msg.unread {
  border-left: 4px solid var(--accent);
}
.logrow {
  display: grid;
  grid-template-columns: 52px 150px 110px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.rb {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .rb {
    grid-template-columns: 1fr;
  }
  .rb-nav {
    position: static;
  }
}
.rb-nav {
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
}
.rb-nav a {
  display: block;
  padding: 3px 0;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}
.rb-nav a:hover {
  color: var(--text);
}
.rb-nav .rb-nav-doc {
  margin-top: 10px;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.rb-content {
  max-width: 980px;
}
.rb-doc > h2 {
  margin: 28px 0 4px;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.rb-doc > .rb-sum {
  color: var(--muted);
  margin-bottom: 12px;
}
.rb-sec {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: var(--lift);
}
.rb-sec h3 {
  margin: 0 0 8px;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.rb-sec h4 {
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--accent2);
}
.rb-sec p,
.rb-sec li {
  line-height: 1.55;
  font-size: 14px;
}
.rb-sec ul,
.rb-sec ol {
  padding-left: 22px;
  margin: 6px 0;
}
.rb-sec table {
  margin: 8px 0;
}
.rb-sec td {
  vertical-align: top;
  font-size: 13px;
}
.rb-sec code {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 6px;
  font-size: 12px;
  color: var(--accent2);
}
.rb-tip,
.rb-warn {
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin: 8px 0;
}
.rb-tip {
  background: rgba(110, 168, 255, 0.1);
  border: 1px solid rgba(110, 168, 255, 0.3);
  color: #bcd3f5;
}
.rb-warn {
  background: rgba(255, 143, 63, 0.1);
  border: 1px solid rgba(255, 143, 63, 0.35);
  color: #ffcfa0;
}
.rb-search {
  width: 100%;
  margin-bottom: 10px;
}
.msg.neg {
  border-left: 4px solid var(--red);
}
.msg.pos {
  border-left: 4px solid var(--green);
}
.msg.warning {
  border-left: 4px solid var(--amber);
}
.msg.peer {
  border-left: 4px solid var(--blue);
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--track);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent2);
}
.decision {
  border: 1px solid rgba(169, 139, 255, 0.5);
  background: linear-gradient(
    160deg,
    rgba(169, 139, 255, 0.14),
    rgba(240, 108, 196, 0.06)
  );
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}
.decision h4 {
  margin: 0 0 6px;
}
.decision label {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 6px 0;
  cursor: pointer;
  background: rgba(12, 10, 24, 0.35);
}
.decision label:hover {
  border-color: var(--purple);
}

/* checklist & timeline */
.check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 0;
}
.check.done span {
  color: var(--muted);
  text-decoration: line-through;
}
.tl {
  border-left: 2px solid var(--line);
  margin-left: 6px;
  padding-left: 14px;
}
.tl .item {
  margin-bottom: 9px;
  position: relative;
}
.tl .item:before {
  content: '';
  position: absolute;
  left: -21px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--accent);
}
.tl .item.auto:before {
  border-color: var(--dim);
}
.tl .item .when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}

/* charts */
.chart {
  width: 100%;
  height: 180px;
  display: block;
}
.chart text {
  fill: var(--dim);
  font-size: 10px;
  font-family: var(--mono);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.legend i {
  display: inline-block;
  width: 10px;
  height: 3px;
  margin-right: 4px;
  vertical-align: middle;
  border-radius: 2px;
}

/* toast & modal */
#toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  max-width: 420px;
}
.toast {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 36px rgba(6, 3, 18, 0.55);
  animation: slidein 0.2s ease-out;
}
.toast.critical,
.toast.high {
  border-left-color: var(--red);
}
.toast.error {
  border-left-color: var(--red);
}
@keyframes slidein {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 5, 20, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  width: min(820px, 100%);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 30px 80px rgba(6, 3, 18, 0.6);
}
.modal h2 {
  margin-top: 0;
  letter-spacing: -0.02em;
}
.kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 4px 12px;
  font-size: 13px;
}
.kv div:nth-child(odd) {
  color: var(--muted);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field > span {
  color: var(--muted);
  font-size: 12px;
}
.empty {
  color: var(--dim);
  text-align: center;
  padding: 22px;
}
.mon {
  display: grid;
  grid-template-columns: 56px 86px 1fr;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--dim);
  font-size: 13px;
  align-items: baseline;
}
.mon.alert {
  border-left-color: var(--red);
  background: rgba(255, 107, 139, 0.08);
}
.mon.warn {
  border-left-color: var(--amber);
  background: rgba(255, 197, 71, 0.06);
}
.mon.ok {
  border-left-color: var(--green);
}
.mon.info {
  border-left-color: var(--blue);
}
.mon .tool {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: 999px;
  text-align: center;
  background: rgba(125, 178, 255, 0.15);
  color: #b5cdf3;
  font-weight: 700;
}
.mon .tool.Synthetics {
  background: rgba(79, 230, 207, 0.14);
  color: var(--teal);
}
.mon .tool.E2E {
  background: rgba(183, 157, 255, 0.18);
  color: #d8c8ff;
}
.mon .tool.Metrics {
  background: rgba(255, 197, 71, 0.15);
  color: var(--amber);
}
.mon .tool.Deploys {
  background: rgba(110, 229, 155, 0.14);
  color: var(--green);
}
.hint {
  background: rgba(110, 168, 255, 0.1);
  border: 1px solid rgba(110, 168, 255, 0.28);
  color: #bcd3f5;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

/* first steps: the card on Overview wears the spectrum, and a dot marks the tabs it points at */
.start {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--spectrum) border-box;
}
.start-steps {
  list-style: none;
  counter-reset: s;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.start-steps li {
  counter-increment: s;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.start-steps li::before {
  content: counter(s);
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--juice);
  color: #1b1030;
  font-weight: 800;
  font-size: 13px;
}
.start-steps li > div {
  flex: 1;
  min-width: 0;
}
.tab.core .menu-label::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--juice);
  margin-left: 6px;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .panel,
  .kpi,
  .alert,
  .msg {
    border: 1px solid CanvasText;
  }
  button.primary {
    border: 1px solid ButtonText;
  }
}

/* the expansion chip: the scenario's name under the EdgeOps title, in its own colours, with chamfered corners like the wordmark */
.expansion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 9px;
  font:
    800 11px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  background:
    linear-gradient(var(--panel2), var(--panel2)) padding-box,
    var(--x-juice, var(--juice)) border-box;
  border: 2px solid transparent;
  clip-path: polygon(
    7px 0,
    100% 0,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    0 100%,
    0 7px
  );
}
.expansion svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--x-accent2, var(--accent2));
}
.expansion.big {
  font-size: 13px;
  padding: 7px 18px 7px 12px;
}
.expansion.big svg {
  width: 19px;
  height: 19px;
}

/* a loaded API key shows as a fixed row of dots in the field, in the success colour */
input.keyed {
  border-color: var(--green);
}
input.keyed::placeholder {
  color: var(--green);
  letter-spacing: 0.12em;
  opacity: 1;
}

/* team colour choices and the invite code, in the lobby wizard and the captain's dialog */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--panel2);
  cursor: pointer;
}
.swatch i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
}
.swatch[aria-pressed='true'] {
  border-color: var(--text);
}
.invite {
  font: 800 30px/1 var(--mono);
  letter-spacing: 0.14em;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--field);
  border: 1px dashed var(--line);
  text-align: center;
}

/* the status page: a team's page as subscribers read it. States use the meaning colours and always carry their words */
.sp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: var(--green);
  flex: none;
}
.sp-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  background: color-mix(in srgb, var(--green) 16%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
}
.sp-banner.sp-maintenance {
  background: color-mix(in srgb, var(--blue) 16%, var(--panel2));
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
}
.sp-banner.sp-degraded {
  background: color-mix(in srgb, var(--amber) 16%, var(--panel2));
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
}
.sp-banner.sp-partial {
  background: color-mix(in srgb, var(--tangerine) 18%, var(--panel2));
  border-color: color-mix(in srgb, var(--tangerine) 50%, transparent);
}
.sp-banner.sp-major {
  background: color-mix(in srgb, var(--red) 18%, var(--panel2));
  border-color: color-mix(in srgb, var(--red) 50%, transparent);
}
.sp-maintenance .sp-dot {
  background: var(--blue);
}
.sp-degraded .sp-dot {
  background: var(--amber);
}
.sp-partial .sp-dot {
  background: var(--tangerine);
}
.sp-major .sp-dot {
  background: var(--red);
}
.sp-comps {
  margin: 10px 0 4px;
}
.sp-comp {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.sp-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}
.sp-h {
  margin: 16px 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sp-inc {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel2);
}
.sp-it {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.sp-upd {
  padding: 6px 0 6px 10px;
  border-left: 2px solid var(--line);
  margin: 4px 0;
}
.sp-ph {
  margin-bottom: 2px;
}
.sp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.sp-row select {
  min-width: 190px;
}

/* the estate guide: a map of how a customer reaches the site, and a toolbox */
.es {
  padding: 4px 2px 24px;
}
.es-h {
  margin: 0 0 4px;
}
.es-intro {
  max-width: 70ch;
  margin: 0 0 14px;
}
.es-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 6px;
}
.es-fact {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-width: 130px;
}
.es-fact b {
  font-size: 22px;
}
.es-fact span {
  color: var(--muted);
  font-size: 12px;
}
.es-sec {
  margin: 22px 0 10px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.es-flow,
.es-around {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.es-node {
  position: relative;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--lift);
}
.es-node.es-arrow::after {
  content: '\2192';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  text-align: center;
  color: var(--accent2);
  font-weight: 800;
  z-index: 1;
}
.es-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.es-top b {
  font-size: 15px;
}
.es-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--juice);
  color: #1b1030;
  flex: none;
}
.es-node p {
  margin: 4px 0 8px;
  color: var(--muted);
}
.es-controls {
  margin: 0 0 8px 16px;
  padding: 0;
  font-size: 13px;
}
.es-look {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.es-tools {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.es-group h4 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.es-tool {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.es-tool:last-child {
  border-bottom: 0;
}
.es-limits {
  max-width: 80ch;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .es-node.es-arrow::after {
    content: '\2193';
    right: auto;
    left: 50%;
    top: auto;
    bottom: -15px;
    transform: translateX(-50%);
  }
}

/* the debrief's pipeline timeline: shapes and words carry the meaning, colour only helps */
.pg {
  width: 100%;
  height: auto;
  display: block;
}
.pg-lane {
  fill: var(--panel2);
}
.pg-lbl {
  fill: var(--muted);
  font-size: 11px;
}
.pg-band {
  fill: var(--red);
  opacity: 0.14;
}
.pg-bad {
  fill: var(--red);
}
.pg-ok {
  fill: var(--muted);
}
.pg-team {
  fill: var(--blue);
}
.pg-ring {
  fill: var(--panel2);
  stroke: var(--amber);
  stroke-width: 2.5;
}
.pg-mark {
  cursor: pointer;
}
.pg-mark:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.pg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.pg-detail {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--field);
  border: 1px solid var(--line);
  min-height: 20px;
}

/* the comms plan in the team console: the updates asked for, and where the team stands on each */
.cp-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.cp-top {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.cp-meta {
  font-size: 12px;
  margin-top: 2px;
}
.cp-guide {
  font-size: 12px;
  margin-top: 2px;
}
.cp-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.cp-chip.pending {
  color: var(--amber);
  border-color: var(--amber);
}
.cp-chip.overdue {
  color: var(--red);
  border-color: var(--red);
}
.cp-chip.met {
  color: var(--green);
  border-color: var(--green);
}
.cp-chip.late {
  color: var(--amber);
}
.cp-chip.wait {
  color: var(--muted);
}

/* The made-up vendors behind the tools: each tool page takes its vendor's look from these tokens (see content/*/
tooling.js for which tab is whose). A vendor is a name, a mark, a palette, a corner and a type
   stack: never a real logo or layout. test/vendors.js checks that the text reads on every surface. */
.vendor {
  --accent: var(--v-accent);
  --accent2: var(--v-accent);
  font-family: var(--v-font);
}
.vendor .panel {
  background: var(--v-panel);
  border-color: var(--v-line);
  border-radius: var(--v-radius);
}
.vendor .panel h3 {
  color: var(--v-accent);
}
.vendor button.primary {
  background: var(--v-accent);
  color: var(--v-ink);
  border-color: transparent;
}
.vendor .tabstrip,
.vendor .tabs {
  border-color: var(--v-line);
}
.vbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 14px;
  background: var(--v-bg);
  border: 1px solid var(--v-line);
  border-left: 4px solid var(--v-accent);
  border-radius: var(--v-radius);
  color: var(--v-text);
}
.vbar .vmark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: calc(var(--v-radius) / 2 + 2px);
  background: var(--v-accent);
  color: var(--v-ink);
}
.vbar .vmark svg {
  width: 18px;
  height: 18px;
}
.vbar .vname {
  font-size: 16px;
  letter-spacing: 0.01em;
}
.vbar .vwhat {
  color: var(--v-muted);
  font-size: 13px;
  flex: 1;
  min-width: 0;
}
.vbar .vtag {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-muted);
  border: 1px solid var(--v-line);
  border-radius: 999px;
  padding: 1px 8px;
}
.v-cloudfern {
  --v-bg: #1a1208;
  --v-panel: #241a0e;
  --v-line: #4a3216;
  --v-accent: #f6a04d;
  --v-ink: #1a1208;
  --v-text: #fff1e2;
  --v-muted: #d9b892;
  --v-radius: 6px;
  --v-font: system-ui, 'Segoe UI', Roboto, sans-serif;
}
.v-bws {
  --v-bg: #0d1624;
  --v-panel: #142033;
  --v-line: #2a3b57;
  --v-accent: #5fb0ff;
  --v-ink: #0a1424;
  --v-text: #e8f2ff;
  --v-muted: #a9c0dd;
  --v-radius: 2px;
  --v-font: 'Helvetica Neue', Arial, sans-serif;
}
.v-newrelish {
  --v-bg: #06201c;
  --v-panel: #0b2e28;
  --v-line: #14574d;
  --v-accent: #27d8b4;
  --v-ink: #052018;
  --v-text: #e3fff8;
  --v-muted: #9cd6c8;
  --v-radius: 10px;
  --v-font: 'Segoe UI', Tahoma, Geneva, sans-serif;
}
.v-pingpager {
  --v-bg: #0f1d0b;
  --v-panel: #172a11;
  --v-line: #2f5524;
  --v-accent: #8be15a;
  --v-ink: #0d1a08;
  --v-text: #eeffe6;
  --v-muted: #b2d9a0;
  --v-radius: 4px;
  --v-font: Verdana, Geneva, sans-serif;
}
.v-statusphere {
  --v-bg: #16143a;
  --v-panel: #1e1b4d;
  --v-line: #3b3780;
  --v-accent: #a3a8ff;
  --v-ink: #12103a;
  --v-text: #eeeeff;
  --v-muted: #b9bcf0;
  --v-radius: 12px;
  --v-font: system-ui, 'Segoe UI', sans-serif;
}
.v-gitbun {
  --v-bg: #1c1020;
  --v-panel: #27141f;
  --v-line: #5a2a45;
  --v-accent: #ff8fc5;
  --v-ink: #2a0f1d;
  --v-text: #ffeaf4;
  --v-muted: #e3b3cc;
  --v-radius: 8px;
  --v-font: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
}