/*
 * The shell's entire stylesheet, shared by index.html and frametest.html.
 *
 * WHY THIS IS A FILE AND NOT A <style> BLOCK. The relay serves
 * `style-src 'self'` (see `server/relay.py`), which forbids inline <style>
 * elements and style="..." attributes. Both pages carried identical copies of
 * the palette inline; under the CSP neither would render at all. Nothing here
 * is new -- it is the union of the two former blocks, and their selectors were
 * disjoint apart from the shared base.
 *
 * No external fonts and no external scripts: the CSP forbids them, and a
 * blocked font is a page that renders late on a phone that may be on LTE.
 */

:root {
  --bg: #0b0f14;
  --panel: #141b23;
  --line: #263340;
  --text: #e8eef4;
  --muted: #8ea0b2;
  --ok: #35d07f;
  --warn: #f0b429;
  --bad: #ff5c5c;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  padding: calc(env(safe-area-inset-top) + 20px) calc(env(safe-area-inset-right) + 18px)
           calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 18px);
  -webkit-text-size-adjust: 100%;
}

h1 {
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
  font-weight: 600;
}

.row {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 600;
  word-break: break-word;
}

/* Tone is set by main.ts. Unset (or unknown) stays neutral rather than
   claiming a health it has not established. */
[data-tone="ok"]   { color: var(--ok); }
[data-tone="warn"] { color: var(--warn); }
[data-tone="bad"]  { color: var(--bad); }

/* ---------------------------------------------------------------- index.html */

#connection-state { font-size: 30px; }

#shell-note {
  color: var(--muted);
  font-size: 15px;
  margin: 0 2px 22px;
  min-height: 1.4em;
}

a.harness {
  display: block;
  text-align: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-size: 17px;
}
a.harness:active { background: var(--panel); }

/* ------------------------------------------------------------ frametest.html */

#c-state { font-size: 22px; }

.fields { display: flex; gap: 12px; }
.fields > .row { flex: 1; margin-bottom: 12px; }

input[type="number"] {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  /* 18px or larger, or iOS Safari zooms the whole page on focus. */
  font-size: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

button {
  display: block;
  width: 100%;
  /* 44px minimum: Apple's touch-target floor, and this is used one-handed. */
  min-height: 52px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}
button:active { background: var(--line); }
button:disabled { color: var(--muted); opacity: 0.5; }

#note {
  color: var(--muted);
  font-size: 15px;
  margin: 0 2px 18px;
  min-height: 1.4em;
}

a.back {
  display: block;
  text-align: center;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  padding: 12px;
}