/* The window's palette (view/view.go, view/log.go), so the two viewers read
   as the same tool. */
:root {
  --bg: #1e2024;
  --sidebar: #16181b;
  --log-bg: #111316;
  --rule: #2a2d33;
  --btn: #2e343c;
  --btn-hover: #3d4a5a;
  --input-bg: #24282f;
  --text: #c8ccd4;
  --label: #ffffff;
  --muted: #6a6e78;
  --err: #e06c6c;
  --dir-in: #7fc2ff;
  --dir-out: #c8a85c;
  --lamp-on: #5cd65c;
  --lamp-off: #43464c;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

/* The hidden attribute must win. The browser's own [hidden] rule loses to
   any author display rule, so #log, #reader and #log-form, which are flex
   boxes, showed even while hidden: an empty cloud column on a board with no
   cloud, as simfleet's are. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 12px/1.35 var(--mono);
}

/* Device, state, cloud from left to right, as in the window. */
#app {
  display: grid;
  grid-template-columns: auto 320px minmax(360px, 1fr);
  height: 100vh;
}
#app.no-log { grid-template-columns: auto 320px; }

#device {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

/* As the window lays it out (view's captionAt and drawReader): the caption
   centred over the housing, the controls in a column beside it, and the
   reader band directly under it, exactly as wide. The caption and the
   reader share the face's grid column, so they are centred on the housing,
   not on the housing and the controls together. */
#product {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
}

#caption {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  color: var(--label);
  margin-bottom: 10px;
  min-height: 1.35em;
}

#controls { grid-column: 1; grid-row: 2; }
#controls:not(:empty) { margin-right: 12px; }

/* The housing is drawn at one fixed size, as frontScale fixes it in the
   window; it only shrinks when the column cannot hold it. */
#face {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  max-width: 100%;
}
#face svg { display: block; width: 100%; height: auto; }

/* The glass, laid over the SVG's glass well at the same place. Pixelated,
   because a panel scaled smoothly reads as a blurred photograph of one. */
#panel {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#face.bare #panel {
  position: static;
  width: 480px;
  max-width: 100%;
  outline: 4px solid #33363c;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.controls button { text-align: center; }
#foot-controls { margin-top: 12px; }

/* The lock section, beside the housing like the window's, with the board's
   controls under it. Its geometry is view.LockFaceGeometry; nothing here
   sizes the drawing. */
#lock { margin-bottom: 6px; grid-column: 1 / -1; }
/* With the section the controls go under it two to a row, as the window
   has them. */
#controls:has(#lock) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
}
#lock svg { display: block; }
#lock .click { cursor: pointer; }
.lock-label { fill: var(--label); font: 9px monospace; pointer-events: none; }
.lock-readout {
  font: 11px/14px monospace;
  color: var(--label);
  white-space: pre;
  margin-top: 4px;
}
.lock-readout div:last-child { cursor: pointer; }
#foot-controls:empty { display: none; }

button {
  font: inherit;
  color: var(--label);
  background: var(--btn);
  border: 0;
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
}
button:hover { background: var(--btn-hover); }
button:active { filter: brightness(1.25); }

input {
  font: inherit;
  color: var(--label);
  background: var(--input-bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 7px;
  outline: none;
}
input:focus { border-color: var(--btn-hover); }
input::placeholder { color: #4a5a70; }

#reader {
  grid-column: 2;
  grid-row: 3;
  /* As wide as the housing above it, and never what sets that width. */
  justify-self: stretch;
  width: 0;
  min-width: 100%;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#reader .row { display: flex; gap: 6px; }
#reader .row button { flex: 1; text-align: center; }

.status { color: var(--muted); min-height: 1.35em; white-space: pre-wrap; }
.status.err { color: var(--err); }

#sidebar {
  background: var(--sidebar);
  padding: 8px 16px 16px;
  overflow: auto;
}
#sidebar h3 {
  color: var(--label);
  font: inherit;
  text-transform: uppercase;
  margin: 10px 0 2px;
}
#sidebar h3::after {
  content: "";
  display: block;
  border-bottom: 1px dashed var(--text);
  width: calc(var(--n) * 1ch);
}
.kv {
  display: grid;
  grid-template-columns: 13ch 1fr;
  gap: 0 1ch;
}
.kv .lamp-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 14px 13ch 1fr;
  align-items: center;
}
.lamp {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lamp-off);
}
.lamp.on { background: var(--lamp-on); }
.value { color: var(--label); overflow-wrap: anywhere; }

#log {
  background: var(--log-bg);
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
#log h2 {
  font: inherit;
  color: var(--label);
  text-transform: uppercase;
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
}
#log-lines {
  flex: 1;
  overflow: auto;
  padding: 6px 12px;
  min-height: 0;
}
.entry { margin-bottom: 4px; }
.entry .head.in { color: var(--dir-in); }
.entry .head.out { color: var(--dir-out); }
.entry pre {
  margin: 0 0 0 2ch;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.entry.muted, .entry.muted .head { color: var(--muted); }
.entry.err, .entry.err .head { color: var(--err); }

#log-form {
  display: flex;
  gap: 1ch;
  align-items: center;
  padding: 8px 12px 0;
  border-top: 1px solid var(--rule);
  color: #4a5a70;
}
#log-input { flex: 1; min-width: 0; }
#log-status { padding: 4px 12px 8px; }

#offline {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #5a2a2a;
  color: var(--label);
  padding: 4px 12px;
  border-radius: 3px;
}

/* A narrow screen stacks the columns rather than squeezing the housing. */
@media (max-width: 1100px) {
  #app, #app.no-log { grid-template-columns: 1fr; height: auto; }
  #log { height: 70vh; }
}