:root {
  --background: #0f2a2e;
  --foreground: #eef4ee;
  --line: #2c5a60;
  --focus: #ffc21a;
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --panel: #14363b;
  --soft: #a9c3c2;
  --alert: #ffc21a;
  --alert-ink: #1a1400;
  --preliminary: #8fd3c7;
  --text-size: 1rem;
  --heading-size: 1.5rem;
  --line-height: 1.5;
  --border: 1px solid var(--line);
  --focus-outline: 2px solid var(--focus);
  --focus-offset: 2px;
  --space-none: 0;
  --space-small: 0.5rem;
  --space: 1rem;
  --space-large: 1.5rem;
  --target-size: 44px;
  --page-width: 82.5rem;
  --form-width: 24rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: var(--space-none);
  background: var(--background);
  color: var(--foreground);
  font: var(--text-size)/var(--line-height) var(--font);
}

.container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--space);
}

.site-header {
  border-bottom: var(--border);
}

.header-content, nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-small) var(--space);
}

.header-content {
  justify-content: space-between;
  min-height: var(--target-size);
  padding-block: var(--space-small);
}

main {
  padding-block: var(--space-large);
}

h1 {
  margin: var(--space-none) var(--space-none) var(--space);
  font-size: var(--heading-size);
}

p {
  margin: var(--space-none) var(--space-none) var(--space-small);
}

.login-form {
  display: grid;
  justify-items: start;
  gap: var(--space-small);
  max-width: var(--form-width);
}

a, button, input:not([type="hidden"]) {
  min-height: var(--target-size);
  min-width: var(--target-size);
  color: inherit;
  font: inherit;
}

a, button {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-small);
}

button, input {
  border: var(--border);
  background: var(--background);
  padding-block: var(--space-none);
}

input:not([type="hidden"]) {
  width: 100%;
  padding-inline: var(--space-small);
  margin-bottom: var(--space-small);
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

html { font-variant-numeric: tabular-nums; }
a { text-underline-offset: 3px; }
::selection { background: var(--alert); color: var(--alert-ink); }
.site-name { font-size: 1.25rem; font-weight: 700; }
.sub, .key, .demo { color: var(--soft); }
.demo { background: var(--panel); padding: .5rem 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-block: 1rem; }
.filters label { display: grid; gap: .25rem; flex: 1 1 160px; min-width: 0; }
.filters button { margin-bottom: .5rem; }
summary { min-height: var(--target-size); min-width: var(--target-size); font: inherit; }
summary { display: list-item; cursor: pointer; padding-block: .7rem; font-size: .875rem; }
.filters .checkbox { display: flex; align-items: center; }
.checkbox input { width: 44px; }
button:hover, a:hover { background: var(--panel); }
nav a[aria-current] { color: var(--foreground); text-decoration-color: var(--alert); text-decoration-thickness: 3px; }
section { margin-block: 1.5rem 2.5rem; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
caption { text-align: left; font-size: 1.25rem; font-weight: 700; padding-bottom: .5rem; }
th { text-align: left; color: var(--soft); font-size: .875rem; padding: .5rem .875rem; border-bottom: 2px solid var(--line); }
th[scope=row] { color: var(--foreground); font-size: 1rem; font-weight: 600; border-bottom: var(--border); }
td { padding: .75rem .875rem; border-bottom: var(--border); font-size: 1.375rem; font-weight: 600; }
td, th { overflow-wrap: anywhere; vertical-align: top; }
td small, th small { display: block; font-size: .8125rem; font-weight: 400; color: var(--soft); }
td ul { margin: .25rem 0; padding-left: 1rem; font-size: .8125rem; font-weight: 400; color: var(--soft); }
td[data-quality=preliminary] { color: var(--preliminary); }
td[data-state=unknown], td[data-state=partial], .error { background: var(--alert); color: var(--alert-ink); }
td[data-state=unknown] small, td[data-state=unknown] ul, td[data-state=partial] small, td[data-state=partial] ul { color: var(--alert-ink); }
.error { padding: 1rem; }
.bottom { background: var(--panel); padding: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.key { margin-top: 1rem; font-size: .875rem; }
@media (max-width: 680px) {
  .container { padding-inline: .75rem; }
  .header-content { justify-content: start; }
  nav { gap: .25rem; }
  th, td { padding: .625rem .5rem; }
  td { font-size: 1.125rem; }
  .filters label { flex-basis: 100%; }
  .filters button { width: 100%; justify-content: center; }
}

fieldset { min-width: 0; border: var(--border); padding: .5rem; }
.filters .radio { display: flex; align-items: center; gap: .5rem; }
.radio input:not([type="hidden"]) { width: 44px; margin: 0; }

[data-quality=preliminary] { color: var(--preliminary); }
[data-state=unknown], [data-state=partial] { background: var(--alert); color: var(--alert-ink); }
[data-state=unknown] small, [data-state=partial] small { color: var(--alert-ink); }
.board td { padding: 0; }
.board td > div { padding: .6rem .75rem; }
.board td > div + div { border-top: var(--border); }
.board details { font-size: .8125rem; }
.board summary { font-size: .75rem; }
.board th:first-child { width: 30%; }
@media (max-width: 600px) {
 .board td > div { padding: .5rem; }
 .board td, .board th[scope=row] { font-size: .875rem; }
 .board summary { overflow-wrap: normal; }
}
.flash { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; background: var(--alert); color: var(--alert-ink); padding: .75rem 1rem; }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.agent-panel, .agent-confirm, .agent-event { border: var(--border); padding: 1rem; overflow-wrap: anywhere; }
.agent-panel h2 { margin-top: 0; }
.agent-form { display: grid; gap: .5rem; margin-block: 1rem; max-width: 36rem; }
.agent-form label { display: grid; }
.agent-form button, .agent-confirm button { white-space: normal; text-align: left; }
:is(.agent-panel, .agent-confirm, .agent-queue) dt { color: var(--soft); }
:is(.agent-panel, .agent-confirm, .agent-queue) dd { margin: 0 0 .75rem; overflow-wrap: anywhere; }


.settings-form { display: grid; gap: .75rem; max-width: 42rem; }
.settings-form label { display: grid; gap: .25rem; min-width: 0; }
.settings-form button { justify-self: start; }
.repricer-settings dl { margin: 1rem 0; overflow-wrap: anywhere; }
.repricer-settings dt { color: var(--soft); } .repricer-settings dd { margin: 0 0 .5rem; }
.setting-row { border-bottom: var(--border); }


.settings-choice .choice-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .25rem; }
.settings-choice label.radio { display: flex; align-items: center; gap: .5rem; }
.settings-choice label.radio input { flex: 0 0 44px; margin: 0; }
.filters .settings-choice { flex: 1 1 20rem; }
.history-section td { font-size: 1rem; font-weight: 400; }
.history-section td > span { white-space: pre-wrap; }
.history-section th { width: 40%; }
.history-section th a { display: flex; }
.signal-scroll { max-width: 100%; overflow-x: auto; }
.signal-table { min-width: 76rem; }
.signal-table th[scope=row] { min-width: 12rem; }