/* =========================================================================
   SysLab — page identity on top of kit.css.

   Teal, the sixth and last of the Hardware track's shades. It reads as the
   link itself — the thing the five earlier labs each ended at the edge of
   and this one has to draw all the way across.

   Inside the figures teal is the link and the node, gold is the constraint
   that binds, blue is the other domain and the return, red is what breaks,
   mint is what still fits.
   ========================================================================= */
:root {
  --bp-cyan: #4dd4ac;          /* primary accent */
  --bp-blue: #a8ecd8;          /* secondary */
  --bp-mark: #4dd4ac;
  --note-accent: #4dd4ac;
  --calc-col: 350px;
  --page-max: 1440px;
}

/* A faint lattice behind the page: nodes on a grid, which is what a block
   diagram is before anybody draws a single line between them. Quiet enough
   to be atmosphere rather than decoration. */
body {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(77, 212, 172, 0.04) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,
      rgba(77, 212, 172, 0.028) 0 1px, transparent 1px 96px);
}

.hint { font-size: 0.76rem; color: var(--bp-ink-dim); line-height: 1.55; margin-top: 0.5rem; }
.hint b { color: var(--bp-cyan); }

.results-col { min-width: 0; }
.results-col svg { max-width: 100%; }

/* -------------------------------- inputs -------------------------------- */
.mini-field { margin-bottom: 0.6rem; }
.mini-field label {
  display: block; font-size: 0.68rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--bp-ink-dim); margin-bottom: 0.25rem;
  font-family: var(--mono);
}
.mini-field input[type="range"] { width: calc(100% - 5.4rem); vertical-align: middle; }
/* Five of this lab's sliders stand for WORDS rather than numbers — a bus
   is not chosen on a scale and neither is a logic family — so the output
   beside them is text and needs the room. */
.mini-field output {
  font-family: var(--mono); font-size: 0.78rem; color: var(--bp-cyan);
  display: inline-block; width: 5rem; text-align: right;
  vertical-align: middle; overflow-wrap: anywhere;
}
.mini-field select {
  width: 100%; box-sizing: border-box;
  font-family: var(--mono); font-size: 0.85rem;
  background: var(--bp-bg); color: var(--bp-ink);
  border: 1px solid var(--bp-line); border-radius: 7px;
  padding: 0.38rem 0.45rem;
}
.mini-field select:focus { outline: none; border-color: var(--bp-cyan); }

/* ------------------------------ result cards ----------------------------- */
.vres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem; margin-bottom: 0.9rem;
}
.vres .card {
  border: 1px solid var(--bp-line); border-radius: 9px;
  background: var(--bp-panel); padding: 0.55rem 0.7rem;
}
.vres .card .k {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--bp-ink-dim);
}
.vres .card .v {
  font-family: var(--mono); font-size: 1.12rem; font-weight: 700;
  color: var(--bp-cyan); margin-top: 0.15rem; overflow-wrap: anywhere;
}
.vres .card .x {
  font-family: var(--mono); font-size: 0.68rem; color: var(--bp-ink-dim);
  margin-top: 0.15rem; overflow-wrap: anywhere;
}
/* Half the cards in this lab hold words rather than numbers — a bus name,
   a verdict, the name of an isolator — so the shouting size is kept for
   the verdict alone, and even that stays one step quieter with tight
   lines, or a four-word Czech verdict wraps to three and drags the whole
   first row of the grid to twice the height of the second. */
.vres .card.verdict .v { font-size: 1.4rem; }
.vres .card.vword .v { font-size: 0.98rem; line-height: 1.25; }
.vres .card.ok .v { color: #5fe3a1; }
.vres .card.warn .v { color: #ffc94d; }
.vres .card.bad .v { color: #ff6b6b; }
.vres .card.wide { grid-column: 1 / -1; }

.vnote {
  border: 1px solid var(--bp-line); border-left-width: 4px;
  border-left-color: #ffd43b; border-radius: 9px;
  background: var(--bp-panel); padding: 0.5rem 0.8rem; margin-bottom: 0.8rem;
  font-size: 0.8rem; line-height: 1.55; color: var(--bp-ink-dim);
}
.vnote b { color: #ffd43b; }
.vnote + .vnote { margin-top: -0.4rem; }

/* --------------------------------- toggles ------------------------------- */
.seg {
  display: inline-flex; border: 1px solid var(--bp-line); border-radius: 7px;
  overflow: hidden; flex-wrap: wrap;
}
.seg button {
  font-family: var(--mono); font-size: 0.72rem; cursor: pointer;
  background: transparent; color: var(--bp-ink-dim);
  border: none; padding: 0.3rem 0.62rem; transition: 0.16s;
}
.seg button.active { background: var(--bp-cyan); color: var(--bp-bg); font-weight: 700; }
.seg button:not(.active):hover { color: var(--bp-ink); }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }

/* --------------------------------- tables -------------------------------- */
.res-table td.mono, .res-table th.mono { font-family: var(--mono); }
.res-table td.num { text-align: right; font-family: var(--mono); }
.res-table td.good { color: #5fe3a1; }
.res-table td.bad { color: #ff6b6b; font-weight: 700; }
.res-table tr.loss td.num { color: #ff9c9c; }
.res-table tr.gain td.num { color: #5fe3a1; }
.res-table tr.total td { border-top: 1px solid var(--bp-line); font-weight: 700; }

/* The candidate table is the widest thing in this lab: seven columns, five
   of them a single tick. Squeeze the padding so it stays on one screen in
   a narrow results column. */
#busTable td, #busTable th { padding-left: 0.3rem; padding-right: 0.3rem; }
#busTable td.num, #busTable th.num { text-align: center; }
#busTable tr.total td { color: #5fe3a1; }

@media (max-width: 720px) {
  .seg button { padding: 0.3rem 0.42rem; font-size: 0.68rem; }
  #busTable { font-size: 0.72rem; }
  .mini-field input[type="range"] { width: calc(100% - 4.6rem); }
  .mini-field output { width: 4.2rem; font-size: 0.72rem; }
}