/* Large, high-contrast rows so results can be read from a phone screenshot. */
:root {
  --bg: #fbfaf7;
  --fg: #1b1b1b;
  --muted: #5f5f5f;
  --line: #dcd9d2;
  --pass: #0a7a3b;
  --fail: #b3261e;
  --warn: #9a5800;
  --na: #6b6b6b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-block: env(safe-area-inset-top) calc(28px + env(safe-area-inset-bottom));
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  font: 17px/1.4 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

header { padding: 12px 0 10px; border-bottom: 3px solid var(--fg); }
header h1 { font-size: 26px; margin: 0 0 4px; }
.idline { font: 600 15px/1.35 ui-monospace, Menlo, monospace; word-break: break-all; }
.clock { float: right; font: 700 16px ui-monospace, Menlo, monospace; }

nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
nav a {
  padding: 8px 12px;
  border: 2px solid var(--fg);
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
}
nav a.here { background: var(--fg); color: var(--bg); }

h2 { font-size: 21px; margin: 24px 0 6px; }
h3 { font-size: 15px; margin: 16px 0 2px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.row .label { flex: 1; min-width: 0; font-weight: 650; }
.row .detail { display: block; font-weight: 400; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }

.badge {
  flex: none;
  min-width: 86px;
  padding: 6px 10px;
  border-radius: 6px;
  text-align: center;
  font: 800 17px ui-monospace, Menlo, monospace;
  color: #fff;
}
.PASS { background: var(--pass); }
.FAIL, .ERROR { background: var(--fail); }
.OTHER, .WAIT { background: var(--warn); }
.NA { background: var(--na); }

.banner { padding: 14px; border-radius: 10px; margin: 14px 0; font-weight: 600; }
.banner.info { background: #e4eefc; }
.banner.warn { background: #fff0d1; }
.banner.bad { background: #fde4e1; }
.banner.good { background: #dff3e6; }

button, .btn {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 14px;
  border: 2px solid var(--fg);
  border-radius: 10px;
  background: #fff;
  color: var(--fg);
  font: 700 18px -apple-system, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
button.primary, .btn.primary { background: var(--fg); color: var(--bg); }

.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

input[type=email], input[type=text] {
  width: 100%;
  padding: 12px;
  border: 1px solid #999;
  border-radius: 8px;
  font-size: 18px;
}

pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
  background: #efece6;
  padding: 10px;
  border-radius: 8px;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.scroll { overflow-x: auto; }

ol.steps li { margin: 6px 0; }
.muted { color: var(--muted); }
video, img.thumb { max-width: 100%; border-radius: 8px; margin-top: 8px; }
iframe { width: 100%; height: 70vh; border: 3px dashed var(--warn); border-radius: 8px; }
footer { margin-top: 28px; font: 13px/1.4 ui-monospace, Menlo, monospace; color: var(--muted); overflow-wrap: anywhere; }