/* Design tokens copied by value from internal/api/webui/src/styles/theme.css.
   That file cannot be linked from here: it is one `@theme static { … }`
   Tailwind at-rule, and a browser drops an unknown at-rule together with its
   body — a <link> to it yields zero styles. Poppins is deliberately not
   fetched; system-ui is the rest of that font stack. */
:root {
  --color-bg: #f7f7f8;
  --color-surface: #ffffff;
  --color-surface-2: #f0f0f2;
  --color-border: #e3e3e7;
  --color-text: #101113;
  --color-text-dim: #6b6b70;
  --color-gain: #0f7a4e;
  --color-loss: #d1293b;
  --color-warn: #a15c00;
  --color-info: #3457d1;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
}

/* hidden means hidden. The browser's own [hidden] rule has the specificity of a
   single attribute selector, so ANY rule here that sets `display` on a class
   (.fields is a grid) silently beats it — and the JS that hides a block the hub
   stopped sending ("market data only", "cache inventory unavailable") would leave
   the previous numbers on screen next to the sentence saying there are none.
   Stated once, for every element, so the next display rule cannot re-break it. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 24px;
  background: var(--color-bg);
  color: var(--color-text);
  font: 13px/1.5 var(--font-sans);
}

h1 {
  margin: 0;
  font-size: 16px;
}
h2 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
}
h3 {
  margin: 16px 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
}

#top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 16px;
}
#top #forget {
  margin-left: auto;
}

.card {
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.dim {
  color: var(--color-text-dim);
}
.small {
  font-size: 11px;
}

.hero {
  font-size: 24px;
  font-family: var(--font-mono);
}

.pill {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-surface);
  background: var(--color-gain);
}
.pill.degraded {
  background: var(--color-warn);
}

.banner {
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 8px 12px;
  border: 1px solid var(--color-loss);
  border-radius: 8px;
  color: var(--color-loss);
  background: var(--color-surface);
}

.note {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--color-info);
  background: var(--color-surface-2);
}

.fields {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2px 16px;
  margin: 0;
}
.fields dt {
  color: var(--color-text-dim);
}
.fields dd {
  margin: 0;
  font-family: var(--font-mono);
}
.fields dd.warn {
  color: var(--color-warn);
}
.fields dd.bad {
  color: var(--color-loss);
}

table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-family: var(--font-mono);
}
th,
td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  white-space: nowrap;
}
th {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-text-dim);
}
th:first-child,
td:first-child {
  text-align: left;
}

input,
button {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
}
input {
  width: 320px;
  font-family: var(--font-mono);
}
button {
  cursor: pointer;
}
button:hover {
  border-color: var(--color-info);
  color: var(--color-info);
}