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

   Violet, and it is the TRACK colour rather than one chosen for this lab.
   Data and IT is the fifth track and needed a hue the other four do not
   occupy: mechanics cyan, electronics green, control blue, mathematics
   gold. Four cool-to-warm slots taken; violet is the one that still reads
   as its own thing at 40 px on the map.

   Inside the figures violet means "the signal being talked about", blue the
   clock or the second node, mint what is detected, red what slips through.
   ========================================================================= */
:root {
  --bp-cyan: #b98cff;          /* primary accent */
  --bp-blue: #cdb0ff;          /* secondary */
  --bp-mark: #b98cff;
  --note-accent: #b98cff;
  --calc-col: 350px;
  --page-max: 1440px;
}

/* Faint vertical rules, eight columns to the block. The page is about
   things that come in powers of two, and the background says so quietly
   rather than by decoration. */
body {
  background-image:
    linear-gradient(90deg, rgba(185, 140, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 100%;
}

.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="text"] {
  width: 100%; box-sizing: border-box;
  font-family: var(--mono); font-size: 0.95rem;
  background: var(--bp-bg); color: var(--bp-ink);
  border: 1px solid var(--bp-line); border-radius: 7px;
  padding: 0.42rem 0.55rem;
}
.mini-field input[type="text"]:focus { outline: none; border-color: var(--bp-cyan); }
/* A value the parser could not read is said so on the field itself. A
   calculator that silently reads "12x" as 12 is worse than one that stops. */
.mini-field input.bad { border-color: #ff6b6b; color: #ff9c9c; }
.mini-field input[type="range"] { width: calc(100% - 3rem); vertical-align: middle; }
.mini-field output { font-family: var(--mono); font-size: 0.85rem; 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;
}
.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;
}
.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 tr.zero td { color: var(--bp-ink-dim); }
.res-table td.wrapy { overflow-wrap: anywhere; }
/* "caught" and "slips through" are the two answers the detection table gives,
   and they have to be readable at a glance rather than read — half this lab
   is the argument that a weak check is worse than none, because it looks
   like one. */
.res-table td.good { color: #5fe3a1; }
.res-table td.bad { color: #ff6b6b; font-weight: 700; }

.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); }

@media (max-width: 720px) {
  .seg button { padding: 0.3rem 0.42rem; font-size: 0.68rem; }
}