/* FIRMAMENT :: css/base.css :: v1.0.2
   Layout, type, and the bench instrument faceplate. Color lives in themes.css. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --font-panel: "Avenir Next Condensed", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --step-0: clamp(0.82rem, 0.78rem + 0.2vw, 0.94rem);
  --step-1: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  --step-2: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.3rem + 1.2vw, 2.4rem);

  --gap: 0.75rem;
  --pad: 1rem;
  --radius: 3px;
  --tap: 44px;
}

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3 {
  font-family: var(--font-panel);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--bg);
  padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

/* --- Faceplate -------------------------------------------------------- */

.faceplate {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  padding: 0.9rem 1.6rem;
  background: var(--panel);
  background-image: var(--panel-grain);
  border-bottom: 1px solid var(--edge);
  box-shadow: inset 0 -1px 0 var(--edge-hi);
}

.plate-id { margin-right: auto; }

.plate-id h1 {
  font-size: var(--step-3);
  letter-spacing: 0.28em;
  color: var(--engrave);
  text-shadow: var(--engrave-shadow);
}

.plate-sub {
  margin: 0.1rem 0 0;
  font-family: var(--font-panel);
  font-size: var(--step-0);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.plate-sub .sep { opacity: 0.45; padding: 0 0.2rem; }

.screw {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--screw);
  box-shadow: inset 0 1px 1px var(--edge-hi), 0 1px 1px var(--edge);
}
.screw::after {
  content: ""; position: absolute; inset: 3px 1px;
  border-top: 1px solid var(--screw-slot);
  transform: rotate(28deg);
}
.screw.tl { left: 8px; top: 8px; }
.screw.tr { right: 8px; top: 8px; }

.lamps { display: flex; gap: 1rem; align-items: center; }

.lamp { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }

.lamp-glass {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--lamp-off);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.lamp[data-state="on"] .lamp-glass {
  background: var(--lamp-on);
  box-shadow: 0 0 8px var(--lamp-on), inset 0 0 2px #fff;
}
.lamp[data-state="busy"] .lamp-glass {
  background: var(--lamp-busy);
  box-shadow: 0 0 8px var(--lamp-busy);
  animation: pulse 1.1s ease-in-out infinite;
}
.lamp-label {
  font-family: var(--font-panel);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}

@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .lamp[data-state="busy"] .lamp-glass { animation: none; }
  * { transition: none !important; }
}

.plate-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.field-inline {
  font-family: var(--font-panel);
  font-size: var(--step-0);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* --- Controls --------------------------------------------------------- */

.ctl {
  min-height: var(--tap);
  padding: 0 0.85rem;
  font-family: var(--font-panel);
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--key);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  cursor: pointer;
}
.ctl:hover { background: var(--key-hi); }
.ctl:active { box-shadow: inset 0 2px 3px rgba(0,0,0,0.45); }
.ctl.small { min-height: 34px; padding: 0 0.6rem; }
.ctl.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ctl.primary:hover { filter: brightness(1.08); }
.ctl[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ctl:disabled { opacity: 0.45; cursor: not-allowed; }

input[type="text"], input[type="number"], input[type="search"], select, textarea {
  min-height: 38px;
  padding: 0.35rem 0.5rem;
  font-family: var(--font-data);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
select { font-family: var(--font-panel); letter-spacing: 0.08em; }

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

.switch { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--step-0); }
.switch input { width: 18px; height: 18px; }

/* --- Rail ------------------------------------------------------------- */

.rail {
  background: var(--rail);
  border-bottom: 1px solid var(--edge);
  overflow-x: auto;
}
.rail ul { display: flex; list-style: none; margin: 0; padding: 0 1rem; gap: 2px; }
.rail button {
  min-height: var(--tap);
  padding: 0 1.1rem;
  font-family: var(--font-panel);
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.rail button:hover { color: var(--ink); }
.rail button[aria-current="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.rail .pending { opacity: 0.45; }

/* --- Workbench -------------------------------------------------------- */

main {
  padding: var(--pad) 1.6rem 2rem;
  overflow: auto;
}
main:focus { outline: none; }

.module-head { margin-bottom: 1rem; }
.module-head h2 { font-size: var(--step-2); color: var(--engrave); }
.module-head p { margin: 0.2rem 0 0; color: var(--ink-dim); font-size: var(--step-0); max-width: 70ch; }

.card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: inset 0 1px 0 var(--edge-hi);
}
.card > h3 {
  font-size: var(--step-0);
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--edge);
}

.row { display: flex; align-items: center; flex-wrap: wrap; }
.row.gap { gap: var(--gap); }
.grow { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }

.split {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.1fr) minmax(320px, 2.2fr);
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  main { padding: var(--pad) 0.9rem 2rem; }
  .faceplate { padding: 0.75rem 1rem; }
}

.scroll-list { max-height: 60vh; overflow: auto; }

.pick {
  list-style: none; margin: 0; padding: 0;
}
.pick li { margin: 0; }
.pick button {
  display: block;
  width: 100%;
  min-height: 38px;
  text-align: left;
  padding: 0.35rem 0.5rem;
  font-family: var(--font-data);
  font-size: var(--step-0);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.pick button:hover { background: var(--key); }
.pick button[aria-current="true"] {
  background: var(--key-hi);
  border-left-color: var(--accent);
  color: var(--accent);
}
.pick .sub { display: block; font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-dim); }

/* --- Data tables ------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-family: var(--font-data); font-size: var(--step-0); }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--edge); vertical-align: middle; }
th {
  font-family: var(--font-panel);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ink-dim);
  position: sticky; top: 0;
  background: var(--panel);
}
td.num { text-align: right; }
tbody tr:hover { background: var(--key); }

.readout {
  font-family: var(--font-data);
  color: var(--readout);
  text-shadow: 0 0 6px var(--readout-glow);
}

.stat { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.75rem; background: var(--well); border: 1px solid var(--edge); border-radius: var(--radius); }
.stat .k { font-family: var(--font-panel); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.stat .v { font-family: var(--font-data); font-size: var(--step-2); color: var(--readout); text-shadow: 0 0 6px var(--readout-glow); }
.stat .u { font-size: 0.7em; color: var(--ink-dim); text-shadow: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); }

.empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-dim);
  border: 1px dashed var(--edge);
  border-radius: var(--radius);
}
.empty strong { display: block; color: var(--ink); font-family: var(--font-panel); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.3rem; }

.note { font-size: var(--step-0); color: var(--ink-dim); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.good { color: var(--good); }

/* --- Bit grid (REGISTER) ---------------------------------------------- */

.bitgrid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; margin-top: 0.5rem; }
.bitgrid button {
  aspect-ratio: 1 / 1;
  min-height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--ink-dim);
  background: var(--well);
  border: 1px solid var(--edge);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.bitgrid button[data-set="1"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bitgrid button[data-inrange="1"] { box-shadow: inset 0 0 0 1px var(--readout); }
.bitgrid button[data-reserved="1"] { opacity: 0.35; }
.bit-index { position: absolute; top: 1px; left: 2px; font-size: 0.5rem; opacity: 0.55; }

/* --- Timeline (POWER) ------------------------------------------------- */

.timeline { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--step-0); }
.swatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--edge); }

/* --- Deck and panels -------------------------------------------------- */

.deck {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: 0.5rem 1.6rem;
  background: var(--rail);
  border-top: 1px solid var(--edge);
  font-size: var(--step-0);
  color: var(--ink-dim);
}
.deck-left { display: flex; align-items: center; gap: var(--gap); }

.panel {
  width: min(780px, 92vw);
  max-height: 84vh;
  padding: 0;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
.panel::backdrop { background: rgba(0,0,0,0.62); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: 0.75rem var(--pad);
  border-bottom: 1px solid var(--edge);
  background: var(--rail);
}
.panel-head h2 { font-size: var(--step-1); }
.panel-body { padding: var(--pad); overflow: auto; max-height: 70vh; }
.panel-body h3 { font-size: var(--step-0); letter-spacing: 0.16em; color: var(--ink-dim); margin: 1rem 0 0.4rem; }
.panel-body ul { margin: 0.25rem 0; padding-left: 1.1rem; }

.log-out {
  font-family: var(--font-data);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--well);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 0.6rem;
  max-height: 50vh;
  overflow: auto;
  margin-top: var(--gap);
}

.tally { font-family: var(--font-panel); letter-spacing: 0.12em; text-transform: uppercase; }
.suite { margin-bottom: 0.75rem; }
.suite h3 { margin-top: 0.5rem; }
.check { display: flex; gap: 0.5rem; font-family: var(--font-data); font-size: 0.78rem; padding: 0.15rem 0; }
.check .mark { width: 1.2rem; flex: none; }
.check.pass .mark { color: var(--good); }
.check.fail .mark { color: var(--bad); }

/* pointer-events: none is load bearing, not cosmetic. A veil that is stuck on
   screen is an ugly bug. A veil that is stuck on screen AND eats every click is
   an app that looks broken and cannot be recovered without a reload. The drop
   still lands, because the listener is on the window, not on the veil. */
.dropveil {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
  border: 3px dashed var(--accent);
  pointer-events: none;
}

/* This rule is not optional and it is not a tidy up.

   The browser hides a [hidden] element with a user agent rule, display: none.
   Any author rule that sets display beats it, whatever the specificity, because
   author styles outrank user agent styles. So `display: flex` above silently
   makes the hidden attribute do nothing at all, and the veil sits over the whole
   app from the moment the page loads.

   Every element in this file that is toggled with .hidden needs its own hidden
   rule for the same reason. */
.dropveil[hidden] { display: none; }
.dropveil p {
  font-family: var(--font-panel);
  font-size: var(--step-2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}