style.css

/* style.css — DMCRA Lab · elastic level-set quantisation, measured.
 *
 * The palette, glow and scanline are the hdc-suite page's, so the two Spaces read as one family;
 * what is added here is this page's own subject matter: numeric result tables, a per-block grid map,
 * and an explicit radius scale so every rounded thing on the page rounds by the same amount.
 *
 * Two things are deliberate and worth stating, because they are the two things that go wrong in
 * instrument panels:
 *
 *   1. TEXT WRAPS. Every place a token, a path or a sentence can be long — table cells, `code`,
 *      `pre.out`, the terminal and the log — wraps with `overflow-wrap: anywhere` instead of
 *      scrolling sideways. Only the table WRAPPER scrolls, and only when a table is genuinely
 *      wider than the screen, so a narrow window never splits a sentence across a scrollbar.
 *   2. NUMBERS LINE UP. Every numeric cell uses `font-variant-numeric: tabular-nums` and right
 *      alignment, so a column of figures can be compared down its decimal points by eye. The three
 *      table treatments below are used for three different kinds of content and are not
 *      interchangeable: `telemetry` for label→value figures, `spec` for label→sentence prose,
 *      `data` for measured result tables.
 *
 * No web font is fetched. 'Space Mono' is used when the visitor already has it; otherwise the
 * monospace stack renders the same layout with no network dependency, which is what keeps this
 * bundle fully client-side and offline-capable.
 */
:root {
  --dp-bg: #06040f;
  --dp-panel: rgba(12, 6, 28, 0.9);
  --dp-cyan: #00f5ff;
  --dp-pink: #ff2d78;
  --dp-violet: #b44aff;
  --dp-lime: #b8ff2e;
  --dp-orange: #ff9500;
  --dp-blue: #3b82f6;
  --dp-grey: #6b6480;
  --dp-border: rgba(180, 74, 255, 0.3);
  --dp-line: rgba(180, 74, 255, 0.18);
  --dp-glow-c: rgba(0, 245, 255, 0.4);
  --dp-glow-p: rgba(255, 45, 120, 0.4);
  --dp-glow-v: rgba(180, 74, 255, 0.4);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --font: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scrollbar-color: rgba(180, 74, 255, 0.45) rgba(0, 0, 0, 0.4); }

body {
  background: var(--dp-bg);
  color: #e0d8f8;
  font-family: var(--font);
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background-image:
    radial-gradient(ellipse at 10% 0%, rgba(180, 74, 255, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(0, 245, 255, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 45, 120, 0.03) 0%, transparent 100%);
}

.scanline {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px,
    rgba(0, 0, 0, 0.04) 3px, rgba(0, 0, 0, 0.04) 4px);
  pointer-events: none; z-index: 9999;
}

.app {
  display: flex; flex-direction: column; min-height: 100vh;
  padding: 12px; gap: 12px; max-width: 1120px; margin: 0 auto; width: 100%;
}

/* ---------------- header ---------------- */
header {
  font-size: 0.95rem; font-weight: 700; color: var(--dp-cyan); text-align: center;
  border-bottom: 1px solid var(--dp-border); padding: 4px 0 10px;
  text-shadow: 0 0 12px var(--dp-glow-c), 0 0 30px var(--dp-glow-c);
  letter-spacing: 3px; text-transform: uppercase;
}
header .brand { display: inline-block; }
header .sub {
  display: block; font-size: 0.55rem; color: var(--dp-violet);
  letter-spacing: 4px; margin-top: 4px; text-shadow: 0 0 8px var(--dp-glow-v);
  overflow-wrap: anywhere;
}

/* ---------------- panels ---------------- */
.panel {
  background: var(--dp-panel); border: 1px solid var(--dp-border);
  border-radius: var(--r-md); padding: 12px 14px; position: relative;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.panel::before {
  content: ''; position: absolute; top: 0; left: 14px; width: 44px; height: 2px;
  background: var(--dp-violet); box-shadow: 0 0 8px var(--dp-violet);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.panel.accent-panel { border-color: rgba(184, 255, 46, 0.28); }
.panel.accent-panel::before { background: var(--dp-lime); box-shadow: 0 0 8px var(--dp-lime); }

.panel-title {
  font-size: 0.64rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dp-cyan); margin-bottom: 10px; text-shadow: 0 0 6px var(--dp-glow-c);
  overflow-wrap: anywhere;
}
.panel-title.pink { color: var(--dp-pink); text-shadow: 0 0 6px var(--dp-glow-p); }
.panel-title.lime { color: var(--dp-lime); text-shadow: 0 0 6px rgba(184, 255, 46, 0.4); }
.sub-title {
  font-size: 0.56rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dp-violet); margin: 12px 0 6px; overflow-wrap: anywhere;
}

/* ---------------- rows and controls ---------------- */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row + .row { margin-top: 8px; }
.row.legend { gap: 14px; margin-top: 8px; }
.row label { font-size: 0.6rem; color: var(--dp-violet); letter-spacing: 1px; white-space: nowrap; }

input[type=text], input[type=number], textarea, select {
  background: rgba(0, 0, 0, 0.55); color: var(--dp-cyan);
  border: 1px solid rgba(0, 245, 255, 0.25); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 0.72rem; padding: 7px 9px; outline: none;
  letter-spacing: 0.5px; max-width: 100%;
}
input[type=text]:focus, input[type=number]:focus, textarea:focus, select:focus {
  border-color: var(--dp-cyan); box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.14), 0 0 10px var(--dp-glow-c);
}
input[type=text] { flex: 1; min-width: 140px; }
select { color: var(--dp-pink); border-color: rgba(180, 74, 255, 0.4); flex: 0 1 auto; max-width: 100%; }
textarea { width: 100%; resize: vertical; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
input[type=range] { flex: 0 1 210px; accent-color: var(--dp-violet); height: 4px; cursor: pointer; min-width: 120px; }
input[type=checkbox] { accent-color: var(--dp-lime); }

.btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.2));
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-sm); cursor: pointer; font-family: var(--font); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 1px; text-transform: uppercase;
  padding: 9px 13px; transition: transform 0.12s, box-shadow 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--dp-cyan); outline-offset: 2px; }
.btn:disabled { opacity: 0.35; pointer-events: none; }
.btn.primary { border-color: var(--dp-cyan); color: var(--dp-cyan); text-shadow: 0 0 6px var(--dp-glow-c); }
.btn.primary:hover { background: rgba(0, 245, 255, 0.12); box-shadow: 0 0 16px var(--dp-glow-c); }
.btn.accent { border-color: var(--dp-pink); color: var(--dp-pink); text-shadow: 0 0 6px var(--dp-glow-p); }
.btn.accent:hover { background: rgba(255, 45, 120, 0.18); box-shadow: 0 0 16px var(--dp-glow-p); color: #fff; }
.btn.step { border-color: var(--dp-violet); color: var(--dp-violet); }
.btn.step:hover { background: rgba(180, 74, 255, 0.16); box-shadow: 0 0 16px var(--dp-glow-v); }
.btn.warn { border-color: var(--dp-orange); color: var(--dp-orange); }
.btn.warn:hover { background: rgba(255, 149, 0, 0.16); box-shadow: 0 0 16px rgba(255, 149, 0, 0.35); }
.btn.ghost { border-color: #555; color: #a49cc0; }
.btn.ghost:hover { border-color: #888; color: #ddd; }

.status-text { font-size: 0.6rem; color: rgba(184, 255, 46, 0.85); letter-spacing: 0.5px; overflow-wrap: anywhere; }
.hint {
  color: rgba(180, 74, 255, 0.8); font-size: 0.58rem; margin-top: 8px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.num { color: #fff; font-variant-numeric: tabular-nums; }

/* ---------------- layouts ---------------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.vis-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px;
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--dp-line);
  padding: 8px; border-radius: var(--r-md);
}
.vis-label { font-size: 0.54rem; color: var(--dp-cyan); text-align: center; letter-spacing: 1px; overflow-wrap: anywhere; }
canvas {
  width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-sm);
  border: 1px solid rgba(0, 245, 255, 0.14); image-rendering: pixelated; display: block;
}
.swatch { display: flex; align-items: center; gap: 6px; font-size: 0.58rem; color: #b9aee0; overflow-wrap: anywhere; }
.swatch i { width: 11px; height: 11px; display: inline-block; border-radius: 3px; flex: 0 0 auto; }

/* ---------------- tables (three treatments, not interchangeable) ---------------- */
.table-wrap {
  border: 1px solid var(--dp-line); border-radius: var(--r-md);
  overflow-x: auto; overflow-y: hidden; margin-top: 10px; background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.64rem; }
th, td { padding: 7px 10px; vertical-align: top; }
td { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }

/* telemetry: label -> single figure. Right-aligned so digits stack. */
table.telemetry th {
  text-align: left; font-weight: 400; color: var(--dp-violet);
  letter-spacing: 1px; width: 52%; background: rgba(180, 74, 255, 0.04);
}
table.telemetry td { text-align: right; color: var(--dp-lime); font-variant-numeric: tabular-nums; }
table.telemetry tbody tr + tr th, table.telemetry tbody tr + tr td { border-top: 1px solid var(--dp-line); }

/* spec: label -> a sentence. Left-aligned and wrapping, because it is prose. */
table.spec th {
  text-align: left; font-weight: 400; color: var(--dp-cyan); letter-spacing: 0.6px;
  width: 30%; background: rgba(0, 245, 255, 0.035); white-space: normal; overflow-wrap: anywhere;
}
table.spec td { color: #cfc7e8; }
table.spec tbody tr:nth-child(even) td, table.spec tbody tr:nth-child(even) th,
table.spec tr:nth-child(even) td, table.spec tr:nth-child(even) th { background: rgba(180, 74, 255, 0.045); }
table.spec tr + tr th, table.spec tr + tr td { border-top: 1px solid var(--dp-line); }
table.spec code {
  color: var(--dp-lime); background: rgba(0, 0, 0, 0.45); padding: 1px 4px;
  border-radius: 4px; overflow-wrap: anywhere;
}

/* data: measured result tables. First column names the row, every other column is a figure. */
table.data thead th {
  text-align: right; font-weight: 700; color: var(--dp-cyan); font-size: 0.55rem;
  letter-spacing: 1.2px; text-transform: uppercase; background: rgba(0, 245, 255, 0.055);
  border-bottom: 1px solid var(--dp-border); position: sticky; top: 0;
}
table.data thead th:first-child { text-align: left; }
table.data tbody td { text-align: right; font-variant-numeric: tabular-nums; color: var(--dp-lime); }
table.data tbody td:first-child { text-align: left; color: #e8e2fb; font-variant-numeric: normal; }
table.data tbody td[colspan] { text-align: left; color: rgba(180, 74, 255, 0.8); font-variant-numeric: normal; }
table.data tbody tr + tr td { border-top: 1px solid var(--dp-line); }
table.data tbody tr:nth-child(even) td { background: rgba(180, 74, 255, 0.05); }
table.data tbody tr:hover td { background: rgba(0, 245, 255, 0.06); }
table.data td.best { color: #fff; text-shadow: 0 0 8px var(--dp-glow-c); }
table.data td.worse { color: var(--dp-orange); }
table.data td.bad { color: var(--dp-pink); }
table.data td.ident { color: var(--dp-pink); font-weight: 700; }

/* ---------------- terminal + log ---------------- */
.terminal-box {
  background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(184, 255, 46, 0.35);
  padding: 12px 14px; font-size: 0.72rem; color: var(--dp-lime);
  border-radius: var(--r-md); line-height: 1.7; min-height: 96px; max-height: 40vh;
  overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: inset 0 0 20px rgba(184, 255, 46, 0.06), 0 0 12px rgba(184, 255, 46, 0.08);
  text-shadow: 0 0 6px rgba(184, 255, 46, 0.4);
}
.cursor {
  display: inline-block; width: 8px; height: 1em; background: var(--dp-lime);
  margin-left: 2px; vertical-align: text-bottom; animation: blink 0.8s step-end infinite;
  box-shadow: 0 0 6px var(--dp-lime);
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.log {
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--dp-line); border-radius: var(--r-md);
  font-size: 0.6rem; line-height: 1.6; padding: 8px 10px; margin-top: 10px;
  max-height: 24vh; overflow-y: auto; color: #b9aee0;
}
.log:empty { display: none; }
.logline { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1px 0; }
.logline.ok { color: var(--dp-lime); }
.logline.warn { color: var(--dp-orange); }
.logline.bad { color: var(--dp-pink); }

/* ---------------- misc ---------------- */
pre.out {
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--dp-line); border-radius: var(--r-sm);
  padding: 10px; font-size: 0.64rem; line-height: 1.6; color: var(--dp-lime);
  white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 10px;
}
.sample {
  font-size: 0.6rem; color: var(--dp-cyan); overflow-wrap: anywhere;
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--dp-line);
  padding: 7px 9px; border-radius: var(--r-sm); line-height: 1.55;
}
code { font-family: var(--font); overflow-wrap: anywhere; }

footer {
  color: rgba(180, 74, 255, 0.72); font-size: 0.58rem; text-align: center;
  border-top: 1px solid var(--dp-line); padding: 12px 6px; line-height: 1.7;
  overflow-wrap: anywhere;
}
footer code { color: rgba(0, 245, 255, 0.85); }

/* ---------------- scrollbars ---------------- */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.45); border-radius: var(--r-sm); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(180, 74, 255, 0.55), rgba(0, 245, 255, 0.4));
  border-radius: var(--r-sm); border: 2px solid rgba(0, 0, 0, 0.4);
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--dp-violet), var(--dp-cyan)); }