/* AI Meters viewer: the same colours and lettering as the local page. */
:root {
  --page: #eef1ec;
  --card: #fbfcfa;
  --line: #d3dbd5;
  --line-soft: #e3e8e3;
  --ink: #14242b;
  --ink-2: #55676d;
  --fill: #0e5a6b;
  --amber: #b97a08;
  --red: #bf3427;
  --track: #e2e7e2;
  --plate: #dce3de;
  --focus: #0e5a6b;
  --din: "Bahnschrift", "DIN Alternate", "DIN Next", "Roboto Condensed", "Arial Narrow", sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d181c;
    --card: #132328;
    --line: #26393f;
    --line-soft: #1c2e33;
    --ink: #e6eeea;
    --ink-2: #8fa3a6;
    --fill: #6cc4d3;
    --amber: #e0a93a;
    --red: #ef6a5b;
    --track: #1f3238;
    --plate: #1a2c31;
    --focus: #6cc4d3;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--fill); }
[hidden] { display: none !important; }

button {
  font: 600 13px/1 var(--din);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 14px;
  min-height: 40px;
  cursor: pointer;
}
button:hover { border-color: var(--fill); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--fill); border-color: var(--fill); color: var(--card); }
button.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }

input[type="text"] {
  font: 14px var(--mono);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  width: 100%;
}