/*
  Everything every page shares: the colour and type tokens, the header, the
  panel shell, and the form controls. Five of the seven pages link this and
  nothing else from here; the two that show live inputs add viewer.css.

  Dark by design: this sits beside a game, often on a second screen or a phone
  propped against the monitor, so it is built to be read at a glance from a
  distance rather than studied up close.
*/

:root {
  --bg: #0f0d16;
  --panel: #171425;
  --panel2: #1f1b2f;
  --sunk: #0b0912;
  --line: #2a2440;
  --line2: #3d3558;

  --text: #f1ecf9;
  --muted: #9c91b3;
  --dim: #6a6183;

  --accent: #ffad33;
  --accent-ink: #1a1305;
  --ok: #41d69c;
  --bad: #ff6373;
  --info: #8fa8ff;

  --punch: #5aa9ff;
  --kick: #ff8f5a;

  /* How many inputs the history shows, and how tall each one is. The game
     shows 19; the row count is a setting, and the panel is sized from it so
     that what fits is exactly what you asked for and nothing scrolls. */
  --rows: 20;
  --row-h: 26px;

  --mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace;
  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Condensed, technical, upright — the register the game's own interface is
     set in. Every face here ships with the OS: this is a tool served off a
     machine on your own network and it should not need the internet to look
     right. Bahnschrift is the Windows one and the closest to the real thing. */
  --display: "Bahnschrift", "Oswald", "Segoe UI Variable Display", "Roboto Condensed",
             "Arial Narrow", system-ui, sans-serif;

  /* Corners are cut, not rounded. The game's interface has no rounded box in
     it; where a shape needs to be less than a plain rectangle it takes a
     diagonal bite out of two opposite corners instead. */
  --cut: 7px;
}

/* Nothing in this interface is rounded. The only circles left are the button
   chips and the circled neutral, and those are shapes the game itself draws
   rather than a corner style. Panels cut their own corners; see .panel. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---- header ---- */

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.mark {
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 7px;
  line-height: 1;
}

.title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.pill {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--line2);
  color: var(--muted);
  white-space: nowrap;
}

.pill.on { color: var(--ok); border-color: var(--ok); }
.pill.off { color: var(--bad); border-color: var(--bad); }
.pill.warn { color: var(--accent); border-color: var(--accent); }

.navlink {
  background: none;
  cursor: pointer;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid var(--line2);
  white-space: nowrap;
}

.navlink:hover { color: var(--text); border-color: var(--accent); background: var(--panel2); }

.note:empty { display: none; }

/* One line, never two. This reports what just happened; it should not push the
   history down the screen to do it, and it clears itself once read. */
.note {
  margin: 0;
  padding: 4px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #241a09;
  color: #ffd79a;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
  Sections take a diagonal bite out of two opposite corners, as the game's
  interface does — there is no rounded box anywhere on its site, only cut ones.

  Clipping alone would cut the border off with the corner and leave the
  diagonal bare, so the panel's own background is the border colour and a
  pseudo-element inset by a pixel paints the interior. The rim that shows
  between them is the border, and it follows the cut.
*/
.panel {
  --cut: 14px;
  position: relative;
  background: var(--line);
  border: 0;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
}

.panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--panel);
  clip-path: inherit;
}

.panel > * { position: relative; }

.ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel2);
}

.ph h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.ph .hint { font-size: 10.5px; color: var(--dim); }

/* Controls living in a panel header, beside the title. */
.phctl { display: flex; align-items: center; gap: 9px; }

.field.slider { flex-wrap: wrap; }
.field.slider span { flex: 1 0 100%; display: flex; justify-content: space-between; }
.field.slider b { font-family: var(--mono); font-weight: 500; color: var(--muted); }
.field.slider input[type=range] { flex: 1 0 100%; accent-color: var(--accent); margin: 4px 0 0; }

.check small { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; }

/* A slider may carry a line of explanation under it. It goes on its own row:
   inside the label it would become a flex item and sit beside the value. */
.field.slider small { flex: 1 0 100%; color: var(--dim); font-size: 11px; margin-top: 3px; }
/* ---- settings ---- */

.settings { padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; }

.field { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }

select {
  background: var(--sunk);
  color: var(--text);
  border: 1px solid var(--line2);
  padding: 5px 8px;
  font: inherit;
  font-size: 12.5px;
}

.check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }
.check input { accent-color: var(--accent); margin: 0; }

.ghost {
  background: var(--panel2);
  border: 1px solid var(--line2);
  color: var(--muted);
  padding: 6px 10px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.ghost:hover { color: var(--text); border-color: var(--accent); }

.foot { margin: 0; padding: 0 3px; color: var(--dim); font-size: 11.5px; line-height: 1.6; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
  Page frame, shared by every page: each one supplies its own column template
  through its own grid class, and the viewer adds areas to this below.
*/
main {
  display: grid;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  align-items: start;
}


/* An early release says so where it is read, not only where it is asked. */
.beta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 2px 5px;
  line-height: 1;
  cursor: default;
}