:root {
  color-scheme: light dark;
  --background: #fff;
  --foreground: #161616;
  --muted: #595959;
  --rule: #8a8a8a;
  --subtle: #f2f2f2;
  --link: #0000c0;
  --visited: #6b287c;
  --error: #9f1111;
  --warning: #6b4b00;
  --focus: #005fcc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #111;
    --foreground: #eee;
    --muted: #bbb;
    --rule: #777;
    --subtle: #202020;
    --link: #8db8ff;
    --visited: #d4a1e4;
    --error: #ff9d9d;
    --warning: #f0c76a;
    --focus: #82b7ff;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--background);
  color: var(--foreground);
  font: 15px/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

body {
  width: min(100% - 2rem, 76rem);
  margin: 0 auto 4rem;
}

header,
section {
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem 0;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .35rem; font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .15em;
}

a:visited { color: var(--visited); }

.skip-link {
  position: absolute;
  left: .5rem;
  top: -5rem;
  padding: .5rem;
  background: var(--background);
  border: 2px solid var(--focus);
  z-index: 2;
}

.skip-link:focus { top: .5rem; }

button,
input,
select {
  max-width: 100%;
  padding: .35rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
}

button { background: var(--subtle); cursor: pointer; }

button:disabled,
input:disabled,
select:disabled { cursor: not-allowed; opacity: .58; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.control-line,
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}

.control-line input:first-of-type { flex: 1 1 18rem; }
.hint, small { color: var(--muted); }

.error {
  min-height: 1.45em;
  color: var(--error);
  font-weight: 700;
}

.status,
.important {
  padding: .7rem;
  border-left: .3rem solid var(--warning);
  background: var(--subtle);
}

.important { margin: 1rem 0; }
.important h3 { margin-bottom: .35rem; }
.important p { margin-bottom: 0; }

details { margin: .75rem 0; }
summary { cursor: pointer; font-weight: 700; }

dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .25rem 1rem;
}

dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
dl > div { display: contents; }

.draft-fields {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.draft-fields fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: .9rem;
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--rule);
}

.draft-fields label {
  display: grid;
  align-content: start;
  gap: .25rem;
}

.field-key { color: var(--muted); font-size: .85rem; }

.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: .45rem .7rem .45rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  white-space: nowrap;
}

th { color: var(--muted); }
td:first-child { width: 100%; }
td:nth-child(n + 3),
th:nth-child(n + 3) { text-align: right; }

.empty-row { color: var(--muted); }
.empty-row td { text-align: left; }

.packet-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.packet-detail td {
  padding: .5rem .75rem;
  background: var(--subtle);
  text-align: left;
  white-space: normal;
}

.packet-detail pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.log-entries {
  max-height: 26rem;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--rule);
  list-style: none;
  font-variant-numeric: tabular-nums;
}

.log-entry {
  display: grid;
  grid-template-columns: 7.5rem 5.5rem minmax(0, 1fr);
  gap: .75rem;
  padding: .4rem .55rem;
  border-bottom: 1px solid var(--rule);
}

.log-entry:last-child { border-bottom: 0; }
.log-entry time { color: var(--muted); }
.log-level { font-weight: 700; }
.log-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.log-truncated {
  display: inline-block;
  margin-right: .5rem;
  padding: 0 .25rem;
  border: 1px solid currentColor;
  color: var(--warning);
  font-size: .75em;
  font-weight: 700;
}
.log-error { color: var(--error); }
.log-warn { color: var(--warning); }

.empty-log {
  padding: .55rem;
  color: var(--muted);
}

#validation:empty,
#validation-summary:empty,
#log-retention:empty,
#connect-error:empty { display: none; }

#validation { color: var(--error); }

@media (max-width: 38rem) {
  body { width: min(100% - 1rem, 76rem); }
  dl { grid-template-columns: 1fr; }
  dd { margin-bottom: .5rem; }
  .control-line { align-items: stretch; flex-direction: column; }
  .control-line > * { width: 100%; }
  .log-entry { grid-template-columns: 1fr auto; gap: .2rem .75rem; }
  .log-text { grid-column: 1 / -1; }
}