/* Radon dashboard. Near-black, quiet, built like an instrument rather than a template: some sections are framed
   modules, some sit straight on the page between hairlines, settings read like a spec sheet, and the protection pages
   get a command-center console. Icons stay monochrome; color is only for live state (teal on, amber needs a look, red
   bans, errors and alerts), active toggles, and the faint ambient light on the protection pages. Motion is short and
   eased, and stops for anyone who asked for less. Colors match docs/STYLE.md. */
:root {
  --bg: #0f1215;
  --side: #121519;
  --panel: #161a1f;
  --sunk: #13161a;
  --raised: #1d2228;
  --input: #0f1215;
  --line: #22282f;
  --line-2: #2e353e;
  --text: #e4e8ec;
  --text-2: #b3bcc6;
  --muted: #7f8a96;
  --teal: #18c5b0;
  --accent-rgb: 24, 197, 176; /* the accent as numbers, for the soft glows */
  --teal-hover: #2bd3bf;
  --accent-fill: #18c5b0;
  --g1: #2bd3bf; /* the theme's gradient, start and end */
  --g2: #0f8f80;
  --accent2-rgb: 15, 143, 128;
  --tint: 0%; /* how much the theme's hue tints surfaces and lines (Radon's own: none) */
  --glow-a: 0.035; /* how strong its ambient light is */
  --ok: #18c5b0; /* live and status lights: the same in every theme, so a theme never looks like an alert */
  --ok-rgb: 24, 197, 176; /* buttons and switches: a color, or a theme's gradient */
  --teal-bar: #14a898;
  --teal-ink: #04201c;
  --teal-text: #5fdcca;
  --amber: #f5a524;
  --amber-text: #f7b84f;
  --red: #f2555a;
  --red-text: #f6787c;
  --green-text: #5cc27c;
  --r: 6px;
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* the top edge catching light */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.3, 1.35, 0.5, 1);
  --fast: 150ms;
  --mid: 260ms;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--teal-text);
  text-decoration: none;
}

a:hover {
  color: var(--teal);
}

img {
  display: block;
}

code,
.mono,
time {
  font-family: var(--mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

h1,
h2 {
  font-weight: 600;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 12px;
}

.nowrap {
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.i {
  width: 16px;
  height: 16px;
  flex: none;
}

.dot {
  width: 10px;
  height: 10px;
  flex: none;
  color: var(--muted);
}

/* ---- the app frame: sidebar and main column ---- */

body.app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 14px 10px 10px;
  background: var(--side);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 14px;
  color: var(--text);
  font-weight: 600;
}

.brand:hover {
  color: var(--text);
}

.brand img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.brand code {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.guild {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
}

.guild:hover {
  color: var(--text);
  border-color: var(--line-2);
}

.guild > .i {
  color: var(--muted);
}

.gn {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.gn strong {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gn small {
  color: var(--muted);
  font-size: 12px;
}

.nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.navhead {
  margin: 14px 8px 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.navi {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--text-2);
  font-size: 13.5px;
  transition:
    background var(--fast) var(--ease),
    color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}

.navi .i {
  color: var(--muted);
  transition:
    color var(--fast) var(--ease),
    transform var(--mid) var(--ease);
}

.navi:hover {
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
}

.navi:hover .i {
  color: var(--text-2);
  transform: translateX(1px);
}

.navi.on {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.09), transparent 85%), var(--raised);
  box-shadow: var(--hi);
  color: #fff;
  font-weight: 500;
}

.navi.on .i {
  color: var(--teal);
}

/* the rail: half lit on hover, lit and glowing on the page you're on */
.navi::before {
  content: '';
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--teal);
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity var(--fast) var(--ease),
    transform var(--mid) var(--ease);
}

.navi:hover::before {
  opacity: 0.35;
  transform: scaleY(0.45);
}

.navi.on::before {
  opacity: 1;
  transform: scaleY(1);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
}

.navi:active {
  transform: scale(0.985);
}

.navi .count {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(245, 165, 36, 0.12);
  color: var(--amber-text);
  font: 500 11px/18px var(--mono);
  font-variant-numeric: tabular-nums;
}

.navi.soon {
  color: var(--muted);
  opacity: 0.55;
  cursor: default;
}

.navi.soon:hover {
  background: none;
  color: var(--muted);
}

.me {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.side .me {
  margin-top: 12px;
  padding: 10px 6px 0 8px;
  border-top: 1px solid var(--line);
}

.me img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.me form {
  margin: 0;
}

.mn {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconbtn {
  display: grid;
  place-items: center;
  padding: 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.iconbtn:hover {
  background: var(--raised);
  color: var(--text);
}

.main {
  min-width: 0;
}

.mainin {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100vh;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 32px 0;
}

/* ---- page header ---- */

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.crumbs {
  display: flex;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.crumbs a {
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--text);
}

.head h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.intro {
  margin: 4px 0 0;
  color: var(--text-2);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.facts code {
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--raised);
  color: var(--text-2);
}

.facts span + span::before {
  content: '•';
  margin: 0 8px;
  color: var(--line-2);
}

.banner,
.note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(245, 165, 36, 0.25);
  border-radius: var(--r);
  background: rgba(245, 165, 36, 0.06);
  color: var(--amber-text);
  font-size: 13px;
}

.banner .i,
.note .i {
  margin-top: 2px;
}

.banner.off {
  border-color: rgba(242, 85, 90, 0.25);
  background: rgba(242, 85, 90, 0.06);
  color: var(--red-text);
}

.note {
  margin-top: 4px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
}

/* ---- panels ---- */

.panel {
  position: relative;
  min-width: 0;
  scroll-margin-top: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--hi);
  transition:
    border-color var(--mid) var(--ease),
    box-shadow var(--mid) var(--ease);
}

.panel:hover {
  border-color: var(--line-2);
}

.ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

.ph > div {
  min-width: 0;
}

.ph h2 {
  margin: 0;
  font-size: 14.5px;
}

.ph p {
  max-width: 760px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.panel form {
  margin: 0;
}

.pb {
  padding: 14px 18px;
}

.pb.flush {
  padding: 0;
}

.pf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r) var(--r);
  background: var(--sunk);
}

.pfa {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.flash {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
}

.flash.ok {
  color: var(--teal-text);
}

.flash.error {
  color: var(--red-text);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.split.wide-left {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---- fields ---- */

.field {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 24px;
  padding: 12px 0;
}

.field:first-child {
  padding-top: 2px;
}

.field:last-child {
  padding-bottom: 2px;
}

.field + .field,
.tablewrap + .field {
  border-top: 1px solid var(--line);
}

.tablewrap + .field {
  margin-top: 4px;
  padding-top: 14px;
}

.fl label,
.flabel {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
}

.fl p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.fc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

input:not([type='checkbox']),
select,
textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--input);
  color: var(--text);
  font: 400 13.5px/1.4 var(--font);
}

textarea {
  display: block;
  resize: vertical;
}

textarea.code {
  font-family: var(--mono);
  font-size: 13px;
}

select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237f8a96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 9px center;
  background-repeat: no-repeat;
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: #5c6672;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

input[type='checkbox'] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--teal);
  cursor: pointer;
}

.pair {
  display: flex;
  gap: 8px;
}

/* on/off switch */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  cursor: pointer;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--line-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  transition:
    background var(--mid) var(--ease),
    box-shadow var(--mid) var(--ease);
}

.track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #c9d3dc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition:
    transform var(--mid) var(--spring),
    width var(--fast) var(--ease),
    background var(--fast) var(--ease);
}

.switch:hover input:not(:checked) + .track {
  background: #3a434d;
}

.switch input:checked + .track {
  background: var(--accent-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 12px -2px rgba(var(--accent-rgb), 0.6);
}

.switch input:checked + .track::after {
  transform: translateX(14px);
  background: #fff;
}

/* held down: the knob stretches toward where it's going */
.switch:active .track::after {
  width: 18px;
}

.switch:active input:checked + .track::after {
  transform: translateX(10px);
}

.switch input:focus-visible + .track {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3);
}

.sl {
  color: var(--text-2);
  font-size: 13px;
}

.switch input:checked ~ .sl .no,
.switch input:not(:checked) ~ .sl .yes {
  display: none;
}

/* role picker: a <details> with checkboxes */
.picker {
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--input);
}

.picker > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 10px;
  list-style: none;
  cursor: pointer;
}

.picker > summary::-webkit-details-marker {
  display: none;
}

.chosen {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.picker .chev,
.cmd .chev,
details.sub .chev {
  transition: transform var(--mid) var(--ease);
  color: var(--muted);
  transition: transform 0.15s;
}

.picker[open] > summary .chev,
.cmd[open] > summary .chev {
  transform: rotate(180deg);
}

.menu {
  max-height: 240px;
  padding: 4px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}

.opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.opt:hover {
  background: var(--raised);
}

.opt:has(input:checked) {
  background: rgba(var(--accent-rgb), 0.08);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.chips.left {
  justify-content: flex-start;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--raised);
  color: var(--text);
  font-size: 12.5px;
}

a.chip:hover {
  border-color: var(--teal);
  color: var(--teal-text);
}

.chip.gone {
  color: var(--muted);
}

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  font: 500 13.5px var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease),
    box-shadow var(--mid) var(--ease),
    transform var(--fast) var(--ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn.primary {
  background: var(--accent-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: var(--teal-ink);
}

.btn.primary:hover {
  background: var(--accent-fill);
  filter: brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 3px rgba(var(--accent-rgb), 0.12),
    0 8px 20px -10px rgba(var(--accent-rgb), 0.8);
  color: var(--teal-ink);
  transform: translateY(-1px);
}

.btn.primary:active {
  transform: translateY(0) scale(0.97);
}

.btn.ghost {
  border-color: var(--line-2);
  background: transparent;
  box-shadow: var(--hi);
  color: var(--text-2);
}

.btn.ghost:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--text);
}

.btn.small {
  height: 26px;
  padding: 0 10px;
  font-size: 12.5px;
}

.btn.wide {
  justify-content: center;
  width: 100%;
}

/* ---- pills, people, roles ---- */

.pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--raised);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* "on", "all running", "done": a status, so the same teal in every theme */
.pill.teal {
  border-color: rgba(var(--ok-rgb), 0.25);
  background: rgba(var(--ok-rgb), 0.1);
  color: #5fdcca;
}

.pill.amber {
  border-color: rgba(245, 165, 36, 0.25);
  background: rgba(245, 165, 36, 0.1);
  color: var(--amber-text);
}

.pill.red {
  border-color: rgba(242, 85, 90, 0.25);
  background: rgba(242, 85, 90, 0.1);
  color: var(--red-text);
}

.pill.green {
  border-color: rgba(59, 165, 93, 0.25);
  background: rgba(59, 165, 93, 0.1);
  color: var(--green-text);
}

.live {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: middle;
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.who img {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--raised);
}

.wn {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.wn > span {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wn code {
  color: var(--muted);
  font-size: 11.5px;
}

a.plain:hover .wn > span {
  text-decoration: underline;
}

.role {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}

.ext {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ext .i {
  width: 13px;
  height: 13px;
}

/* ---- tables and lists ---- */

.tablewrap {
  overflow-x: auto;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tbl th {
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.tbl td {
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.tbl tbody tr:last-child td {
  border-bottom: 0;
}

.tbl td {
  transition: background var(--fast) var(--ease);
}

.tbl tbody tr:hover td {
  background: rgba(255, 255, 255, 0.022);
}

.tbl tr.here td {
  background: rgba(var(--accent-rgb), 0.06);
}

.tbl.compact td {
  padding: 7px 18px;
}

.pb:not(.flush) .tbl th:first-child,
.pb:not(.flush) .tbl td:first-child {
  padding-left: 0;
}

.pb:not(.flush) .tbl th:last-child,
.pb:not(.flush) .tbl td:last-child {
  padding-right: 0;
}

.tbl .c {
  text-align: center;
}

.tbl .r {
  text-align: right;
}

.tbl .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tbl td.reason {
  max-width: 360px;
  overflow: hidden;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbl td select {
  width: auto;
  min-width: 190px;
}

.tbl input.narrow {
  width: 90px;
}

.strikes td {
  padding-top: 6px;
  padding-bottom: 6px;
}

.matrix td.c,
.matrix th.c {
  width: 150px;
}

.na {
  color: var(--muted);
  opacity: 0.6;
  font-size: 18px;
  line-height: 1;
  cursor: help;
}

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}

.rows li:last-child {
  border-bottom: 0;
}

.rows li > strong {
  flex: none;
  font-weight: 500;
}

.rows.stack li {
  align-items: flex-start;
}

.rows .num {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.empty {
  padding: 28px 18px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.pages {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pages a,
.pages .cur,
.pages .gap {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 6px;
  font: 12.5px var(--mono);
}

.pages a {
  color: var(--text-2);
}

.pages a:hover {
  background: var(--raised);
  color: var(--text);
}

.pages .cur {
  border: 1px solid var(--line-2);
  background: var(--raised);
  color: var(--text);
}

.tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  color: var(--text-2);
  font-size: 13px;
}

.tab:hover {
  color: var(--text);
}

.tab.on {
  background: var(--raised);
  color: var(--text);
}

.tab .count {
  color: var(--muted);
  font: 11.5px var(--mono);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.filters .search {
  position: relative;
  display: flex;
  flex: 1 1 220px;
  align-items: center;
}

.filters .search .i {
  position: absolute;
  left: 10px;
  color: var(--muted);
  pointer-events: none;
}

.filters .search input {
  padding-left: 32px;
}

.filters select {
  width: auto;
}

.filters .idin {
  width: 150px;
  font-family: var(--mono);
  font-size: 12.5px;
}

/* ---- overview ---- */

.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart .bar {
  fill: var(--teal-bar);
  transition: fill var(--fast) var(--ease);
}

.chart .barhi {
  fill: rgba(255, 255, 255, 0.45);
}

.chart .hit {
  fill: transparent;
}

.chart .col:hover .hit {
  fill: rgba(255, 255, 255, 0.03);
}

.chart .grid {
  stroke: var(--line);
  stroke-dasharray: 2 4;
}

.chart .axis {
  stroke: var(--line-2);
}

.chart .tick {
  fill: var(--muted);
  font: 11px var(--mono);
}

.checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}

.checks li:last-child {
  border-bottom: 0;
}

.checks .i {
  width: 18px;
  height: 18px;
}

.checks .done .i {
  color: var(--teal);
}

.checks .todo .i {
  color: var(--amber);
}

.ct {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.ct strong {
  font-size: 13.5px;
  font-weight: 500;
}

.ct span {
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- commands ---- */

.cmd {
  scroll-margin-top: 16px;
  border-bottom: 1px solid var(--line);
}

.cmd:last-child {
  border-bottom: 0;
}

.cmd > summary {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) 130px 70px 16px;
  align-items: center;
  gap: 16px;
  padding: 11px 18px;
  list-style: none;
  cursor: pointer;
}

.cmd > summary::-webkit-details-marker {
  display: none;
}

.cmd > summary:hover {
  background: rgba(255, 255, 255, 0.015);
}

.cmd[open] > summary {
  background: var(--raised);
}

.cn {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cn code {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
}

.aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  color: var(--muted);
  font: 11.5px var(--mono);
}

.aliases .mine {
  color: var(--teal-text);
}

.cd {
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl {
  color: var(--text-2);
  font-size: 13px;
}

.cs {
  text-align: right;
}

.cmd form {
  border-top: 1px solid var(--line);
  background: var(--sunk);
}

.cmd .pf {
  border-radius: 0;
  background: transparent;
}

.cmd:last-child .pf {
  border-radius: 0 0 var(--r) var(--r);
}

.locked {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

/* ---- case details ---- */

.facts-list {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  margin: -6px 0;
}

.facts-list dt,
.facts-list dd {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.facts-list dt {
  color: var(--muted);
  font-size: 13px;
}

.facts-list dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.facts-list dt:last-of-type,
.facts-list dd:last-of-type {
  border-bottom: 0;
}

/* ---- pages outside a server ---- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--side);
}

.top .brand {
  padding: 0;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.login {
  max-width: 380px;
  margin: 8vh auto 0;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  text-align: center;
}

.login .mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 14px;
}

.login h1 {
  margin: 0;
  font-size: 22px;
}

.lead {
  margin: 6px 0 22px;
  color: var(--text-2);
}

.login .flash {
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid rgba(242, 85, 90, 0.25);
  border-radius: 6px;
  background: rgba(242, 85, 90, 0.06);
  text-align: left;
}

.fine {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.servers h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.servers > .muted {
  margin: 0;
}

.servers .flash {
  margin-top: 16px;
}

.slist {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}

.srow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.srow:last-child {
  border-bottom: 0;
}

.srow:hover {
  background: var(--raised);
  color: var(--text);
}

.sinfo {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.sinfo strong {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sinfo .muted {
  font-size: 12.5px;
}

.srow .go {
  color: var(--muted);
}

.servers .empty {
  margin-top: 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
}

.gicon {
  flex: none;
  object-fit: cover;
  border-radius: 10px;
}

.gicon.sm {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 11px;
}

.gicon.md {
  width: 40px;
  height: 40px;
}

.gicon.blank {
  display: grid;
  place-items: center;
  background: var(--raised);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.gicon.sm.blank {
  font-size: 10.5px;
}

/* ---- automod and anti-nuke ---- */

.filt > summary {
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 2fr) 210px 130px 16px;
}

.filt .cn strong {
  font-size: 13.5px;
  font-weight: 500;
}

input.num {
  width: 88px;
  font-family: var(--mono);
}

.inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.opt.cat {
  margin-top: 4px;
  color: var(--text);
  font-weight: 500;
}

.opt.cat small {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
}

.opt.sub {
  padding-left: 22px;
  color: var(--text-2);
}

/* people pickers: a box of IDs, who they are under it */
.users {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.users textarea {
  min-height: 34px;
}

.chip.person {
  gap: 6px;
}

.chip.person img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.opt.inline {
  display: inline-flex;
  padding: 2px 6px;
}

/* custom commands */
.cc.new > summary .cn strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-text);
  font-weight: 500;
}

.prev {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #313338;
}

.dmsg {
  display: flex;
  gap: 14px;
  font-family: 'gg sans', var(--font);
}

.dav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.dbody {
  min-width: 0;
  flex: 1;
}

.dhead {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.dhead strong {
  color: #f2f3f5;
  font-weight: 500;
}

.dtag {
  padding: 0 4px;
  border-radius: 3px;
  background: #5865f2;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}

.dtime {
  color: #949ba4;
  font-size: 12px;
}

.dtext {
  color: #dbdee1;
  font-size: 15px;
  line-height: 1.375;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mention {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(88, 101, 242, 0.3);
  color: #c9cdfb;
  font-weight: 500;
}

.dembed {
  position: relative;
  max-width: 520px;
  margin-top: 6px;
  padding: 10px 14px 12px 16px;
  overflow: hidden;
  border-radius: 4px;
  background: #2b2d31;
}

.dbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.dtitle {
  margin-bottom: 4px;
  color: #f2f3f5;
  font-size: 15px;
  font-weight: 600;
}

.dembed .dtext {
  font-size: 14px;
}

.dimg,
.dfoot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #949ba4;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.var {
  display: inline-block;
  margin: 2px 4px 0 0;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--raised);
  color: var(--text-2);
  font: 11.5px var(--mono);
  cursor: help;
}

details.sub {
  margin: 4px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

details.sub > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  list-style: none;
  cursor: pointer;
}

details.sub > summary::-webkit-details-marker {
  display: none;
}

details.sub[open] > summary .chev {
  transform: rotate(180deg);
}

details.sub > .field {
  padding-right: 12px;
  padding-left: 12px;
}

.toggles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 18px;
  padding: 12px 0 2px;
}

input.color {
  width: 64px;
  height: 34px;
  padding: 2px;
  cursor: pointer;
}

.btn.danger {
  color: var(--red-text);
}

.btn.danger:hover {
  border-color: rgba(242, 85, 90, 0.4);
  color: var(--red);
}

.lastuse {
  margin: 0;
  padding: 0 18px 10px;
}

.pf.top {
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

/* read only for staff below the server owner (anti-nuke) */
fieldset.ro {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.75;
}

.botlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 8px;
}

.botlist img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.botlist code {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}

.tbl.limits td {
  vertical-align: middle;
}

/* ---- the radar backdrop ----
   Only behind the overview, the protection pages and the login page: faint range rings and a slow sweep, with three
   amber blips that light up as the sweep passes them. Content stays solid on top, so it is felt more than seen. */

.scope {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.radar {
  position: absolute;
  top: -340px;
  right: -340px;
  width: 980px;
  height: 980px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 69px, rgba(var(--accent-rgb), 0.055) 69px 70px),
    linear-gradient(
      transparent calc(50% - 0.5px),
      rgba(var(--accent-rgb), 0.06) calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      90deg,
      transparent calc(50% - 0.5px),
      rgba(var(--accent-rgb), 0.06) calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 71%);
  mask-image: radial-gradient(circle, #000 52%, transparent 71%);
}

.sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 290deg,
    rgba(var(--accent-rgb), 0.035) 330deg,
    rgba(var(--accent-rgb), 0.1) 359deg,
    rgba(var(--accent-rgb), 0.18) 360deg
  );
  animation: sweep 8s linear infinite;
}

@keyframes sweep {
  to {
    transform: rotate(360deg);
  }
}

/* each blip peaks when the sweep's edge reaches its angle: delay = angle / 360 * 8s - 8s */
.blip {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0;
  box-shadow: 0 0 8px rgba(245, 165, 36, 0.6);
  animation: blip 8s linear infinite;
}

.blip.b1 {
  top: 698px;
  left: 393px;
  animation-delay: -3.444s;
}

.blip.b2 {
  top: 603px;
  left: 180px;
  animation-delay: -2.444s;
}

.blip.b3 {
  top: 415px;
  left: 360px;
  animation-delay: -1.333s;
}

@keyframes blip {
  0% {
    opacity: 0.95;
    transform: scale(1.5);
  }
  6% {
    opacity: 0.85;
    transform: scale(1);
  }
  55%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

body.app .side,
body.app .main,
body.plain .top,
body.plain .wrap {
  position: relative;
  z-index: 1;
}

body.app .side {
  position: sticky;
}

body.home .scope {
  opacity: 0.6;
}

/* the pulsing dot: Radon is connected (amber while it isn't) */
.live {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse 2.4s ease-out infinite;
}

.live.off,
.live.off::after {
  background: var(--amber);
}

@keyframes pulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

/* the sidebar's watch line: a small radar, how many members, the gateway ping */
.watch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(15, 18, 21, 0.6);
}

.mini {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--teal) 0 1.5px, transparent 2px),
    radial-gradient(circle, transparent 0 6px, rgba(var(--accent-rgb), 0.25) 6px 7px, transparent 7px);
}

.mini .sweep {
  animation-duration: 3s;
}

.wt {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.wt strong {
  font-size: 12.5px;
  font-weight: 500;
}

.wt small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch code {
  color: var(--teal-text);
  font-size: 11px;
}

/* ---- page header: the page's icon in a crisp outlined square ---- */

.ht {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.htile {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--sunk);
  box-shadow: var(--hi);
  color: var(--text-2);
}

.htile .i {
  width: 19px;
  height: 19px;
}

body.secure .htile {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow:
    var(--hi),
    0 0 18px -6px rgba(var(--accent-rgb), 0.6);
  color: var(--teal);
}

/* the line at the bottom of every server page */
.foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: auto -32px 0;
  padding: 9px 32px;
  border-top: 1px solid var(--line);
  background: rgba(15, 18, 21, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font: 11.5px var(--mono);
  font-variant-numeric: tabular-nums;
}

.foot .sep {
  color: var(--line-2);
}

/* ---- the overview ---- */

/* the bridge: the server sits on the page itself, its banner fading in from the right */
.hero {
  position: relative;
  overflow: hidden;
  padding: 4px 0 24px;
  border-bottom: 1px solid var(--line);
}

.herobg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 90%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 90%);
}

.heroin {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}

.gicon.lg {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px var(--line-2),
    0 12px 30px -14px rgba(0, 0, 0, 0.9);
  font-size: 18px;
}

.hm {
  flex: 1;
  min-width: 0;
}

.hm h1 {
  margin: 0 0 8px;
  overflow: hidden;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm .facts {
  margin: 0;
}

.hs {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(var(--ok-rgb), 0.3);
  border-radius: 4px;
  background: rgba(var(--ok-rgb), 0.06);
  box-shadow: 0 0 16px -6px rgba(var(--ok-rgb), 0.5);
  color: #5fdcca;
  font-size: 12.5px;
  font-weight: 500;
}

.state.shadow {
  border-color: rgba(245, 165, 36, 0.3);
  background: rgba(245, 165, 36, 0.06);
  box-shadow: 0 0 16px -6px rgba(245, 165, 36, 0.5);
  color: var(--amber-text);
}

.state.shadow .live,
.state.shadow .live::after {
  background: var(--amber);
}

.state.off {
  border-color: rgba(242, 85, 90, 0.3);
  background: rgba(242, 85, 90, 0.06);
  box-shadow: none;
  color: var(--red-text);
}

.state.off .live,
.state.off .live::after {
  background: var(--red);
  animation: none;
}

.you {
  display: flex;
  align-items: center;
  gap: 8px;
}

.you img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-2);
}

.you > span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.you strong {
  font-size: 13px;
  font-weight: 500;
}

.you small {
  color: var(--muted);
  font-size: 12px;
}

/* a short tag right of a section's title, instead of a sentence under it */
.tag {
  color: var(--muted);
  font: 12px var(--mono);
  font-variant-numeric: tabular-nums;
}

/* systems: a status light per moving part, breathing gently while it's fine */
.sys {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sys li {
  display: grid;
  grid-template-columns: 10px 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  transition: background var(--fast) var(--ease);
}

.sys li:last-child {
  border-bottom: 0;
}

.sys li:hover {
  background: rgba(255, 255, 255, 0.02);
}

.sd {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px rgba(var(--ok-rgb), 0.7);
  animation: breathe 3.6s ease-in-out infinite;
}

.sys li:nth-child(2n) .sd {
  animation-delay: -1.2s;
}

.sys li:nth-child(3n) .sd {
  animation-delay: -2.4s;
}

.sys .warn .sd {
  background: var(--amber);
  box-shadow: 0 0 8px rgba(245, 165, 36, 0.7);
}

.sys .off .sd {
  background: var(--line-2);
  box-shadow: none;
  animation: none;
}

@keyframes breathe {
  50% {
    opacity: 0.5;
  }
}

.sl {
  color: var(--muted);
  font-size: 12.5px;
}

.sv {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  min-width: 0;
}

.sv strong {
  font-size: 13px;
  font-weight: 500;
}

.sv strong a {
  color: var(--text);
}

.sv strong a:hover {
  color: var(--teal);
}

.sv small {
  color: var(--muted);
  font: 11.5px var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---- the overview deck: this week and its chart on the left, a narrow right-now rail on the right ---- */

.deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  border-bottom: 1px solid var(--line);
}

.week {
  min-width: 0;
  padding: 22px 28px 12px 0;
}

.wk {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 8px;
}

.wkn {
  color: var(--text);
  font: 500 64px/0.85 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  transition: color var(--fast) var(--ease);
}

.wkn:hover {
  color: var(--teal-text);
}

.wkl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 2px;
}

.wkl strong {
  font-size: 14px;
  font-weight: 500;
}

.wkl .delta {
  font: 12px var(--mono);
}

.wk .tag {
  margin-left: auto;
  padding-bottom: 4px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag .i {
  width: 12px;
  height: 12px;
  transition: transform var(--fast) var(--ease);
}

a.tag:hover {
  color: var(--teal-text);
}

a.tag:hover .i {
  transform: translateX(2px);
}

.now {
  display: flex;
  flex-direction: column;
  padding: 22px 0 16px 24px;
  border-left: 1px solid var(--line);
}

.kicker {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
}

.nowrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 13.5px;
  transition:
    color var(--fast) var(--ease),
    padding var(--mid) var(--ease);
}

.nowrow b {
  color: var(--text);
  font: 500 22px var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.nowrow:hover {
  padding-left: 4px;
  color: var(--text);
}

.nowrow.hot b {
  color: var(--amber-text);
  text-shadow: 0 0 16px rgba(245, 165, 36, 0.35);
}

.leds {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: auto;
  padding-top: 18px;
}

.ledi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.ledi:hover {
  color: var(--text);
}

.ledi .sd {
  width: 6px;
  height: 6px;
}

.ledi.warn .sd {
  background: var(--amber);
  box-shadow: 0 0 8px rgba(245, 165, 36, 0.7);
}

.ledi.off .sd {
  background: var(--line-2);
  box-shadow: none;
  animation: none;
}

/* what's left to set up: one line, not a card */
.todo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(245, 165, 36, 0.22);
  border-radius: var(--r);
  background: rgba(245, 165, 36, 0.04);
  color: var(--amber-text);
  font-size: 13px;
}

.todo a {
  border-bottom: 1px dashed rgba(245, 165, 36, 0.5);
  color: var(--text);
}

.todo a:hover {
  color: var(--amber-text);
}

/* the cases area: a line in the theme's gradient over a soft fill, a dot per day on hover, today ringed */
.chart.area {
  overflow: visible;
}

.chart .fill {
  fill: url(#areafill);
}

.chart .a1 {
  stop-color: var(--g1);
  stop-opacity: 0.3;
}

.chart .a2 {
  stop-color: var(--g2);
  stop-opacity: 0;
}

.chart .line {
  fill: none;
  stroke: url(#linefill);
  stroke-width: 2.2;
  filter: drop-shadow(0 4px 10px rgba(var(--accent-rgb), 0.45));
}

.chart .pt {
  fill: var(--bg);
  stroke: var(--teal);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}

.chart .col:hover .pt {
  opacity: 1;
}

.chart .pt.today {
  fill: var(--teal);
  stroke: rgba(var(--accent-rgb), 0.3);
  stroke-width: 6;
  opacity: 1;
}

.chart .guide {
  stroke: rgba(var(--accent-rgb), 0.4);
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}

.chart .col:hover .guide {
  opacity: 1;
}

.chart .peak {
  fill: var(--text-2);
  font: 500 11px var(--mono);
}

/* ---- sections that sit straight on the page: a hairline above, no box ---- */

.panel.bare {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.panel.bare:hover {
  border-color: var(--line);
}

.panel.bare > .ph {
  padding: 14px 0 8px;
  border-bottom: 0;
}

.panel.bare > .pb {
  padding: 0;
}

.panel.bare .tbl th:first-child,
.panel.bare .tbl td:first-child,
.panel.bare .rows li {
  padding-left: 0;
}

.panel.bare .tbl th:last-child,
.panel.bare .tbl td:last-child,
.panel.bare .rows li {
  padding-right: 0;
}

.panel.bare .empty {
  border: 1px dashed var(--line);
  border-radius: var(--r);
}

/* ---- settings read like a spec sheet: the section's name on the left, its form framed on the right ---- */

.panel:has(> form) {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 32px;
  padding-top: 24px;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.panel:has(> form):hover {
  border-color: var(--line);
}

.panel:has(> form) > .ph {
  position: sticky;
  top: 20px;
  display: block;
  align-self: start;
  padding: 2px 0 0;
  border: 0;
}

.panel:has(> form) > .ph h2 {
  font-size: 15px;
}

.panel:has(> form) > .ph p {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
}

.panel:has(> form) > form {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--hi);
  transition:
    border-color var(--mid) var(--ease),
    box-shadow var(--mid) var(--ease);
}

.panel:has(> form) > form:hover {
  border-color: var(--line-2);
}

/* the section you're editing lights up */
.panel:has(> form) > form:focus-within {
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow:
    var(--hi),
    0 0 0 3px rgba(var(--accent-rgb), 0.06);
}

/* ---- feedback ---- */

/* the result slides in after a save; a saved section flashes teal once, a refused one nudges */
.flash {
  animation: flash-in 360ms var(--ease) both;
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.panel:has(> form):has(.flash.ok) > form,
.cmd:has(.flash.ok),
.console:has(.flash.ok) {
  animation: saved 1.8s var(--ease);
}

@keyframes saved {
  0%,
  20% {
    border-color: rgba(var(--accent-rgb), 0.75);
    box-shadow:
      var(--hi),
      0 0 0 3px rgba(var(--accent-rgb), 0.14),
      0 0 26px -8px rgba(var(--accent-rgb), 0.6);
  }
}

.panel:has(> form):has(.flash.error) > form {
  animation: refused 420ms var(--ease);
}

@keyframes refused {
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-1px);
  }
}

/* opening a row, a picker or a section: what's inside slides down into place */
.cmd > summary {
  transition: background var(--fast) var(--ease);
}

.cmd[open] > form,
.cmd[open] > .locked,
.picker[open] > .menu,
details.sub[open] > .field {
  animation: drop var(--mid) var(--ease) both;
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}

input:not([type='checkbox']),
select,
textarea {
  transition:
    border-color var(--fast) var(--ease),
    box-shadow var(--mid) var(--ease);
}

input:not([type='checkbox']):hover,
select:hover,
textarea:hover {
  border-color: #3b444f;
}

.opt,
.chip,
.pill {
  transition:
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}

/* the page comes in: each block rises into place a beat after the one above it */
.mainin > * {
  animation: rise 480ms var(--ease) both;
}

.mainin > :nth-child(2) {
  animation-delay: 40ms;
}

.mainin > :nth-child(3) {
  animation-delay: 80ms;
}

.mainin > :nth-child(4) {
  animation-delay: 120ms;
}

.mainin > :nth-child(5) {
  animation-delay: 160ms;
}

.mainin > :nth-child(6) {
  animation-delay: 200ms;
}

.mainin > :nth-child(n + 7) {
  animation-delay: 240ms;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---- the protection console: the top of Automod, Anti-raid and Anti-nuke ----
   A framed readout on a dot grid with corner brackets, a small scope, the state with its light, and the numbers.
   --glow is the state's color: teal armed, red alert, amber shadow, grey off. */

.console {
  --glow: var(--ok-rgb);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(70% 160% at 0% 50%, rgba(var(--glow), 0.09), transparent 60%),
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1.4px) 0 0 / 16px 16px,
    var(--sunk);
  box-shadow: var(--hi);
  transition: border-color var(--mid) var(--ease);
}

.console.idle {
  --glow: 127, 138, 150;
}

.console.shadow {
  --glow: 245, 165, 36;
}

.console.alert {
  --glow: 242, 85, 90;
  border-color: rgba(242, 85, 90, 0.35);
}

.console:hover {
  border-color: rgba(var(--glow), 0.35);
}

/* corner brackets that open out on hover */
.console::before,
.console::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(var(--glow), 0.8);
  border-style: solid;
  pointer-events: none;
  transition:
    width var(--mid) var(--ease),
    height var(--mid) var(--ease);
}

.console::before {
  top: 6px;
  left: 6px;
  border-width: 1px 0 0 1px;
}

.console::after {
  right: 6px;
  bottom: 6px;
  border-width: 0 1px 1px 0;
}

.console:hover::before,
.console:hover::after {
  width: 20px;
  height: 20px;
}

.cscope {
  position: relative;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(var(--glow), 0.35);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(var(--glow), 0.9) 0 1.6px, transparent 2.2px),
    repeating-radial-gradient(circle, transparent 0 9px, rgba(var(--glow), 0.18) 9px 10px);
  box-shadow: 0 0 24px -6px rgba(var(--glow), 0.5);
}

.cscope .sweep {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 280deg,
    rgba(var(--glow), 0.15) 340deg,
    rgba(var(--glow), 0.45) 360deg
  );
  animation-duration: 4s;
}

.console.alert .cscope .sweep {
  animation-duration: 1.6s;
}

.console.idle .cscope .sweep {
  opacity: 0.3;
  animation: none;
}

.cstate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cword {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.led {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--glow));
  box-shadow: 0 0 10px rgba(var(--glow), 0.9);
  animation: breathe 2.8s ease-in-out infinite;
}

.console.alert .led {
  animation: alarm 1s ease-in-out infinite;
}

.console.idle .led {
  background: var(--line-2);
  box-shadow: none;
  animation: none;
}

@keyframes alarm {
  50% {
    opacity: 0.35;
    box-shadow: 0 0 2px rgba(var(--glow), 0.4);
  }
}

.cdetail {
  color: var(--muted);
  font-size: 13px;
}

.readouts {
  display: flex;
  margin: 0;
}

.ro {
  padding: 2px 20px;
  border-left: 1px solid var(--line);
}

.ro dt {
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.ro dd {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 13.5px;
  white-space: nowrap;
}

.ro dd code {
  color: var(--text);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.ro dd small {
  margin-left: 3px;
  color: var(--muted);
  font: 12px var(--mono);
}

.ro.hot dd code {
  color: rgb(var(--glow));
  text-shadow: 0 0 16px rgba(var(--glow), 0.5);
}

.caction {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.caction .flash {
  margin: 0;
}

/* ---- the protection pages: a dot grid fading down the page, and a faint teal light at the top of their modules ---- */

body.secure .main::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 240px;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1.4px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
  pointer-events: none;
}

body.secure .panel:not(.bare):not(:has(> form)),
body.secure .panel:has(> form) > form {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.035), transparent 140px), var(--panel);
}

/* the login page sits in the middle of the radar */
body.plain .radar {
  top: 50%;
  right: 50%;
  margin: -490px -490px 0 0;
}

.login {
  position: relative;
  box-shadow:
    var(--hi),
    0 30px 80px -24px rgba(0, 0, 0, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .blip {
    opacity: 0.5;
  }
}

/* ---- your preferences (the Preferences page): accent, density, calm ---- */

/* the themes. Each is a gradient (--g1 to --g2, --accent-fill), a solid that reads on near-black (--teal), its colors
   as numbers for glows (--accent-rgb, --accent2-rgb), how much it tints surfaces and lines (--tint) and how strong its
   ambient light is (--glow-a). Teal is the default in :root. */
body.accent-mono {
  --accent-fill: linear-gradient(135deg, #e4e8ec, #9aa6b2);
  --g1: #e4e8ec;
  --g2: #8b97a3;
  --teal: #c9d3dc;
  --accent-rgb: 201, 211, 220;
  --accent2-rgb: 139, 151, 163;
  --teal-hover: #e4e8ec;
  --teal-bar: #8b97a3;
  --teal-ink: #0f1215;
  --teal-text: #e4e8ec;
  --tint: 0%;
  --glow-a: 0.02;
}

body.accent-blue {
  --accent-fill: linear-gradient(135deg, #6aa2ff, #2f62c4);
  --g1: #6aa2ff;
  --g2: #2f62c4;
  --teal: #4d8eff;
  --accent-rgb: 77, 142, 255;
  --accent2-rgb: 47, 98, 196;
  --teal-hover: #6aa2ff;
  --teal-bar: #3d7ae6;
  --teal-ink: #fff;
  --teal-text: #8fb6ff;
  --tint: 3%;
  --glow-a: 0.07;
}

body.accent-amber {
  --accent-fill: linear-gradient(135deg, #ffcf5c, #e08a0b);
  --g1: #ffcf5c;
  --g2: #e08a0b;
  --teal: #f5a524;
  --accent-rgb: 245, 165, 36;
  --accent2-rgb: 224, 138, 11;
  --teal-hover: #ffb740;
  --teal-bar: #d98f1c;
  --teal-ink: #2a1a00;
  --teal-text: #f7c26a;
  --tint: 3%;
  --glow-a: 0.07;
}

body.accent-emerald {
  --accent-fill: linear-gradient(135deg, #34d399, #047857);
  --g1: #34d399;
  --g2: #047857;
  --teal: #10b981;
  --accent-rgb: 16, 185, 129;
  --accent2-rgb: 4, 120, 87;
  --teal-hover: #34d399;
  --teal-bar: #059669;
  --teal-ink: #022c1e;
  --teal-text: #6ee7b7;
  --tint: 3%;
  --glow-a: 0.07;
}

body.accent-ocean {
  --accent-fill: linear-gradient(90deg, #22d3ee, #2563eb);
  --g1: #22d3ee;
  --g2: #2563eb;
  --teal: #0ea5e9;
  --accent-rgb: 14, 165, 233;
  --accent2-rgb: 37, 99, 235;
  --teal-hover: #38bdf8;
  --teal-bar: #0284c7;
  --teal-ink: #fff;
  --teal-text: #7dd3fc;
  --tint: 3%;
  --glow-a: 0.08;
}

body.accent-arctic {
  --accent-fill: linear-gradient(135deg, #e0f2fe, #7dd3fc);
  --g1: #e0f2fe;
  --g2: #7dd3fc;
  --teal: #a5dcfb;
  --accent-rgb: 125, 211, 252;
  --accent2-rgb: 56, 189, 248;
  --teal-hover: #e0f2fe;
  --teal-bar: #7dd3fc;
  --teal-ink: #062030;
  --teal-text: #bae6fd;
  --tint: 2.5%;
  --glow-a: 0.06;
}

body.accent-sunset {
  --accent-fill: linear-gradient(90deg, #ff9a3d, #ff3d7f);
  --g1: #ff9a3d;
  --g2: #ff3d7f;
  --teal: #ff6b5e;
  --accent-rgb: 255, 107, 94;
  --accent2-rgb: 255, 61, 127;
  --teal-hover: #ff8a5c;
  --teal-bar: #ff5470;
  --teal-ink: #fff;
  --teal-text: #ffa898;
  --tint: 3.5%;
  --glow-a: 0.08;
}

body.accent-crimson {
  --accent-fill: linear-gradient(135deg, #f43f5e, #9f1239);
  --g1: #f43f5e;
  --g2: #9f1239;
  --teal: #f43f5e;
  --accent-rgb: 225, 29, 72;
  --accent2-rgb: 159, 18, 57;
  --teal-hover: #fb7185;
  --teal-bar: #e11d48;
  --teal-ink: #fff;
  --teal-text: #fda4af;
  --tint: 3.5%;
  --glow-a: 0.08;
}

body.accent-dandi {
  --accent-fill: linear-gradient(135deg, #1f55ff 0%, #003cff 45%, #0028a8 100%);
  --g1: #2f63ff;
  --g2: #0028a8;
  --teal: #3d6bff;
  --accent-rgb: 0, 60, 255;
  --accent2-rgb: 6, 9, 24;
  --teal-hover: #5a82ff;
  --teal-bar: #003cff;
  --teal-ink: #fff;
  --teal-text: #7d9cff;
  --tint: 4%;
  --glow-a: 0.1;
}

body.accent-sud {
  --accent-fill: linear-gradient(90deg, #ff7b82, #ff4757);
  --g1: #ff7b82;
  --g2: #ff4757;
  --teal: #ff5d68;
  --accent-rgb: 255, 71, 87;
  --accent2-rgb: 255, 123, 130;
  --teal-hover: #ff7b82;
  --teal-bar: #ff4757;
  --teal-ink: #fff;
  --teal-text: #ff9aa0;
  --tint: 4%;
  --glow-a: 0.09;
}

body.accent-nex {
  --accent-fill: linear-gradient(135deg, #8a3cf0 0%, #7019d4 45%, #4c0f96 100%);
  --g1: #9150f0;
  --g2: #4c0f96;
  --teal: #9150f0;
  --accent-rgb: 112, 25, 212;
  --accent2-rgb: 13, 7, 23;
  --teal-hover: #a46cf5;
  --teal-bar: #7019d4;
  --teal-ink: #fff;
  --teal-text: #b994f5;
  --tint: 4%;
  --glow-a: 0.1;
}

/* the Preferences page: a row of choices, accent swatches */
.seg {
  display: inline-flex;
  width: max-content;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--input);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.seg label {
  position: relative;
  cursor: pointer;
}

.seg input,
.swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg span {
  display: block;
  padding: 5px 12px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition:
    background var(--fast) var(--ease),
    color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}

.seg label:hover span {
  color: var(--text-2);
}

.seg input:checked + span {
  background: var(--raised);
  box-shadow:
    var(--hi),
    inset 0 -1px 0 var(--teal);
  color: var(--text);
}

.seg input:focus-visible + span,
.swatch input:focus-visible + .sw {
  outline: 2px solid rgba(var(--accent-rgb), 0.5);
  outline-offset: 1px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 26px; /* room for the name that rises above a tile */
}

.swatch {
  position: relative;
  display: block;
  cursor: pointer;
}

.sw {
  display: block;
  width: 50px;
  height: 36px;
  border-radius: var(--r);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transition:
    transform var(--mid) var(--ease),
    box-shadow var(--mid) var(--ease);
}

.swatch:hover .sw {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 10px 22px -10px var(--sw-glow);
}

/* the one you picked: a ring and a check */
.swatch input:checked + .sw {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 2px var(--bg),
    0 0 0 4px #e4e8ec;
}

.swatch input:checked + .sw::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 19px;
  width: 12px;
  height: 7px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
  transform: rotate(-45deg);
}

.swatch input:active + .sw {
  transform: scale(0.95);
}

/* its name, only on hover or focus */
.swatch .name {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--raised);
  box-shadow:
    var(--hi),
    0 8px 18px -8px rgba(0, 0, 0, 0.8);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity var(--fast) var(--ease),
    transform var(--mid) var(--ease);
}

.swatch:hover .name,
.swatch:has(input:focus-visible) .name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sw-teal {
  --sw-glow: rgba(24, 197, 176, 0.85);
  background: linear-gradient(135deg, #2bd3bf, #18c5b0 50%, #0f8f80);
}

.sw-mono {
  --sw-glow: rgba(201, 211, 220, 0.85);
  background: linear-gradient(135deg, #e4e8ec, #9aa6b2);
}

.sw-blue {
  --sw-glow: rgba(77, 142, 255, 0.85);
  background: linear-gradient(135deg, #6aa2ff, #2f62c4);
}

.sw-amber {
  --sw-glow: rgba(245, 165, 36, 0.85);
  background: linear-gradient(135deg, #ffcf5c, #e08a0b);
}

.sw-emerald {
  --sw-glow: rgba(16, 185, 129, 0.85);
  background: linear-gradient(135deg, #34d399, #047857);
}

.sw-ocean {
  --sw-glow: rgba(14, 165, 233, 0.85);
  background: linear-gradient(90deg, #22d3ee, #2563eb);
}

.sw-arctic {
  --sw-glow: rgba(125, 211, 252, 0.85);
  background: linear-gradient(135deg, #e0f2fe, #7dd3fc);
}

.sw-sunset {
  --sw-glow: rgba(255, 107, 94, 0.85);
  background: linear-gradient(90deg, #ff9a3d, #ff3d7f);
}

.sw-crimson {
  --sw-glow: rgba(225, 29, 72, 0.85);
  background: linear-gradient(135deg, #f43f5e, #9f1239);
}

.sw-dandi {
  --sw-glow: rgba(0, 60, 255, 0.85);
  background: linear-gradient(135deg, #1f55ff 0%, #003cff 45%, #0028a8 100%);
}

.sw-sud {
  --sw-glow: rgba(255, 71, 87, 0.85);
  background: linear-gradient(90deg, #ff7b82, #ff4757);
}

.sw-nex {
  --sw-glow: rgba(112, 25, 212, 0.85);
  background: linear-gradient(135deg, #8a3cf0 0%, #7019d4 45%, #4c0f96 100%);
}

.sw-aurora {
  --sw-glow: rgba(45, 212, 191, 0.85);
  background: linear-gradient(135deg, #2dd4bf, #a855f7);
}

.sw-lagoon {
  --sw-glow: rgba(52, 211, 198, 0.85);
  background: linear-gradient(135deg, #34d3c6, #3b6cf6);
}

.sw-ember {
  --sw-glow: rgba(255, 179, 71, 0.85);
  background: linear-gradient(135deg, #ffb347, #e0302f);
}

.sw-bloom {
  --sw-glow: rgba(244, 114, 182, 0.85);
  background: linear-gradient(135deg, #f472b6, #8b7cf6);
}

.sw-toxic {
  --sw-glow: rgba(198, 244, 50, 0.85);
  background: linear-gradient(135deg, #c6f432, #10b981);
}

.sw-dusk {
  --sw-glow: rgba(99, 102, 241, 0.85);
  background: linear-gradient(135deg, #6366f1, #ec4899);
}

.swgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.swgroup + .swgroup {
  margin-top: 4px;
}

.swgroup > small {
  color: var(--muted);
  font-size: 11.5px;
}

.swgroup .swatches {
  padding-top: 24px;
}

.example {
  color: var(--text-2);
  font-size: 13px;
}

.iconbtn.on {
  background: var(--raised);
  color: var(--teal);
}

/* surfaces and lines take on a hint of the theme's hue (none for Radon's own) */
body {
  --bg: color-mix(in srgb, #0f1215 calc(100% - var(--tint)), rgb(var(--accent-rgb)));
  --side: color-mix(in srgb, #121519 calc(100% - var(--tint)), rgb(var(--accent-rgb)));
  --panel: color-mix(in srgb, #161a1f calc(100% - var(--tint)), rgb(var(--accent-rgb)));
  --sunk: color-mix(in srgb, #13161a calc(100% - var(--tint)), rgb(var(--accent-rgb)));
  --raised: color-mix(in srgb, #1d2228 calc(100% - var(--tint) * 1.4), rgb(var(--accent-rgb)));
  --input: color-mix(in srgb, #0f1215 calc(100% - var(--tint)), rgb(var(--accent-rgb)));
  --line: color-mix(in srgb, #22282f calc(100% - var(--tint) * 2.5), rgb(var(--accent-rgb)));
  --line-2: color-mix(in srgb, #2e353e calc(100% - var(--tint) * 2.5), rgb(var(--accent-rgb)));
}

/* ambient light: a glow across the top of the page and down the sidebar, in the theme's two colors */
body.app .main {
  background:
    radial-gradient(900px 340px at 20% -140px, rgba(var(--accent-rgb), var(--glow-a)), transparent 70%),
    radial-gradient(900px 340px at 85% -160px, rgba(var(--accent2-rgb), calc(var(--glow-a) * 0.8)), transparent 70%);
}

body.app .side {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), calc(var(--glow-a) * 0.9)), transparent 45%), var(--side);
}

/* the logo mark and the server's emblem pick up the theme */
.brand img {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.45),
    0 0 14px -3px rgba(var(--accent-rgb), 0.6);
}

body.themed .brand > span {
  background: var(--accent-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gicon {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

.gicon.blank {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent2-rgb), 0.08)), var(--raised);
  color: var(--teal-text);
}

.gicon.lg {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.4),
    0 0 26px -8px rgba(var(--accent-rgb), 0.55),
    0 12px 30px -14px rgba(0, 0, 0, 0.9);
}

/* the page you're on: the theme's gradient as its edge, a soft fill of its color */
.navi::before {
  background: linear-gradient(180deg, var(--g1), var(--g2));
}

.navi.on {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.03) 85%), var(--raised);
}

/* chart bars in the theme's gradient, glowing softly from underneath */
.chart .bar {
  fill: url(#barfill);
  filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb), 0.35));
}

.chart .g1 {
  stop-color: var(--g1);
}

.chart .g2 {
  stop-color: var(--g2);
}

.chart .col:hover .bar {
  filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.6)) brightness(1.15);
}

/* rows answer the pointer in the theme's color */
.tbl tbody tr:hover td {
  border-bottom-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.045);
}

.rows li,
.checks li {
  transition: background var(--fast) var(--ease);
}

.rows li:hover,
.checks li:hover,
.sys li:hover {
  background: rgba(var(--accent-rgb), 0.045);
}

/* the framed modules' top edge in the theme */
.panel:not(.bare):not(:has(> form)),
.panel:has(> form) > form {
  box-shadow:
    inset 0 1px 0 rgba(var(--accent-rgb), calc(var(--glow-a) * 1.2)),
    var(--hi);
}

/* gradient themes (2026-11-13) */
body.accent-aurora {
  --accent-fill: linear-gradient(90deg, #2dd4bf, #a855f7);
  --g1: #2dd4bf;
  --g2: #a855f7;
  --teal: #5fb8e8;
  --accent-rgb: 45, 212, 191;
  --accent2-rgb: 168, 85, 247;
  --teal-hover: #2dd4bf;
  --teal-bar: #5fb8e8;
  --teal-ink: #fff;
  --teal-text: #a5d8f5;
  --tint: 3.5%;
  --glow-a: 0.09;
}

body.accent-lagoon {
  --accent-fill: linear-gradient(90deg, #34d3c6, #3b6cf6);
  --g1: #34d3c6;
  --g2: #3b6cf6;
  --teal: #2fa6dc;
  --accent-rgb: 52, 211, 198;
  --accent2-rgb: 59, 108, 246;
  --teal-hover: #34d3c6;
  --teal-bar: #2fa6dc;
  --teal-ink: #fff;
  --teal-text: #8fd3ee;
  --tint: 3.5%;
  --glow-a: 0.09;
}

body.accent-ember {
  --accent-fill: linear-gradient(90deg, #ffb347, #e0302f);
  --g1: #ffb347;
  --g2: #e0302f;
  --teal: #f2683a;
  --accent-rgb: 255, 179, 71;
  --accent2-rgb: 224, 48, 47;
  --teal-hover: #ffb347;
  --teal-bar: #f2683a;
  --teal-ink: #fff;
  --teal-text: #ffab85;
  --tint: 3.5%;
  --glow-a: 0.09;
}

body.accent-bloom {
  --accent-fill: linear-gradient(90deg, #f472b6, #8b7cf6);
  --g1: #f472b6;
  --g2: #8b7cf6;
  --teal: #d77ce0;
  --accent-rgb: 244, 114, 182;
  --accent2-rgb: 139, 124, 246;
  --teal-hover: #f472b6;
  --teal-bar: #d77ce0;
  --teal-ink: #fff;
  --teal-text: #eab0f0;
  --tint: 3.5%;
  --glow-a: 0.09;
}

body.accent-toxic {
  --accent-fill: linear-gradient(90deg, #c6f432, #10b981);
  --g1: #c6f432;
  --g2: #10b981;
  --teal: #6fdc5a;
  --accent-rgb: 198, 244, 50;
  --accent2-rgb: 16, 185, 129;
  --teal-hover: #c6f432;
  --teal-bar: #6fdc5a;
  --teal-ink: #062b12;
  --teal-text: #b8f28e;
  --tint: 3.5%;
  --glow-a: 0.09;
}

body.accent-dusk {
  --accent-fill: linear-gradient(90deg, #6366f1, #ec4899);
  --g1: #6366f1;
  --g2: #ec4899;
  --teal: #9d6cf0;
  --accent-rgb: 99, 102, 241;
  --accent2-rgb: 236, 72, 153;
  --teal-hover: #6366f1;
  --teal-bar: #9d6cf0;
  --teal-ink: #fff;
  --teal-text: #c3b2fa;
  --tint: 3.5%;
  --glow-a: 0.09;
}

/* compact: tighter rows for reading long lists of cases */
body.compact .tbl th,
body.compact .tbl td {
  padding-top: 5px;
  padding-bottom: 5px;
}

body.compact .rows li,
body.compact .sys li,
body.compact .checks li {
  padding-top: 6px;
  padding-bottom: 6px;
}

body.compact .cmd > summary {
  padding-top: 7px;
  padding-bottom: 7px;
}

body.compact .field {
  padding: 8px 0;
}

body.compact .mainin {
  gap: 12px;
}

/* calm: nothing moves, for instant clicks */
body.calm *,
body.calm *::before,
body.calm *::after {
  animation: none !important;
  transition: none !important;
}

body.calm .scope {
  display: none;
}

/* ---- smaller screens ---- */

/* the member search, top right of every server page */
.topbar {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 14px;
}

.finder {
  position: relative;
  display: flex;
  align-items: center;
  width: min(300px, 100%);
}

.finder .i {
  position: absolute;
  left: 10px;
  color: var(--muted);
  pointer-events: none;
}

.finder input:not([type='checkbox']) {
  height: 32px;
  padding: 0 84px 0 32px;
  background: color-mix(in srgb, var(--sunk) 80%, transparent);
  font-size: 13px;
  transition:
    width var(--mid) var(--ease),
    border-color var(--fast) var(--ease);
}

.finder input:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
}

.finder kbd {
  position: absolute;
  right: 8px;
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--muted);
  font: 400 11px var(--mono);
  pointer-events: none;
}

.finder input:focus ~ kbd,
.finder input:not(:placeholder-shown) ~ kbd {
  opacity: 0;
}

/* search results */
.mlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrow {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto 16px;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: background var(--fast) var(--ease);
}

.mrow:hover {
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--text);
}

.mrow img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.mname {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mname > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mrow code {
  color: var(--muted);
}

.mmeta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-2);
}

.mrow .go {
  color: var(--muted);
  transition: transform var(--fast) var(--ease);
}

.mrow:hover .go {
  transform: translateX(2px);
  color: var(--teal-text);
}

/* a profile: the person on the left, their numbers big on the right */
.profile {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 18px 0 22px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pav {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px rgba(var(--accent-rgb), 0.55),
    0 0 34px -6px rgba(var(--accent-rgb), 0.5);
}

.pid h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pid > p {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 4px 0 0;
  color: var(--text-2);
}

.pid code {
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--muted);
}

.pid .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 14px 0 0;
}

.pfacts dt {
  color: var(--muted);
  font-size: 12px;
}

.pfacts dd {
  margin: 0;
  color: var(--text-2);
}

.pnums {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 14px 28px;
  margin: 0;
}

.pnums dd {
  margin: 0;
  font: 500 30px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.pnums dt {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.pnums .zero dd {
  color: var(--muted);
}

/* quick actions: one row each, reason box stretching */
.qa {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.qa:last-child {
  border-bottom: 0;
}

.qa .qt {
  width: 64px;
  color: var(--text-2);
  font-weight: 500;
}

.qa input[name='reason'] {
  flex: 1 1 160px;
  width: auto;
}

.qa .len {
  width: 64px;
  font-family: var(--mono);
}

.qa .flash {
  flex-basis: 100%;
  margin: 0;
}

@media (max-width: 1000px) {
  .deck {
    grid-template-columns: minmax(0, 1fr);
  }

  .week {
    padding-right: 0;
  }

  .now {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .panel:has(> form) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .panel:has(> form) > .ph {
    position: static;
  }

  .readout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rd:nth-child(4) {
    border-left: 0;
  }

  .console {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .readouts,
  .caction {
    grid-column: 1 / -1;
  }

  .ro:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .split,
  .split.wide-left {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cmd > summary {
    grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr) auto 16px;
  }

  .cl {
    display: none;
  }
}

@media (max-width: 760px) {
  .profile {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .pav {
    width: 72px;
    height: 72px;
  }

  .pnums {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, auto);
  }

  .mrow code {
    display: none;
  }

  .topbar {
    margin-top: 0;
  }

  .readout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rd:nth-child(odd) {
    border-left: 0;
  }

  .rd:nth-child(4) {
    border-left: 1px solid var(--line);
  }

  .readouts {
    flex-wrap: wrap;
    gap: 12px 0;
  }

  body.secure .main::before {
    left: 0;
  }

  body.app {
    display: block;
  }

  .side,
  body.app .side {
    position: relative;
    height: auto;
    padding: 12px 16px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .watch {
    display: none;
  }

  .radar {
    transform: scale(0.6);
    transform-origin: 100% 0;
  }

  body.plain .radar {
    transform-origin: 50% 50%;
  }

  .heroin {
    flex-wrap: wrap;
    padding: 18px;
  }

  .hs {
    align-items: flex-start;
    text-align: left;
  }

  .htile {
    display: none;
  }

  .nav {
    flex-direction: row;
    gap: 4px;
    margin: 0 -16px;
    padding: 0 16px 4px;
    overflow-x: auto;
  }

  .navhead,
  .navi.soon {
    display: none;
  }

  .navi {
    flex: none;
  }

  .navi.on::before {
    display: none;
  }

  .side .me {
    margin-top: 8px;
    padding: 8px 0 0;
  }

  .mainin {
    padding: 20px 16px 0;
  }

  .foot {
    margin: auto -16px 0;
    padding: 9px 16px;
  }

  .head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ph {
    flex-direction: column;
    align-items: flex-start;
  }

  .field {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmd > summary {
    grid-template-columns: minmax(0, 1fr) auto 16px;
  }

  .cd {
    display: none;
  }

  .tbl td.reason {
    max-width: 180px;
  }

  .filters .idin {
    flex: 1 1 140px;
  }

  .pf {
    flex-wrap: wrap;
  }

  .top {
    padding: 12px 16px;
  }

  .top .mn {
    display: none;
  }

  .wrap {
    padding: 24px 16px 48px;
  }
}