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

   Leaf green, the Hardware track's accent and the first of its six shades.
   It is deliberately a different green from Electronics' mint: the two
   tracks are siblings, so their colours should read as related at a
   distance and as distinct at forty pixels.

   Inside the figures green is the driver and what it guarantees, blue is
   the receiver and what it demands, red is the forbidden band and whatever
   breaks, gold is the third party (leakage, bounce, the datasheet point)
   and mint is what still fits.
   ========================================================================= */
:root {
  --bp-cyan: #9ce85c;          /* primary accent */
  --bp-blue: #c8f59b;          /* secondary */
  --bp-mark: #9ce85c;
  --note-accent: #9ce85c;
  --calc-col: 350px;
  --page-max: 1440px;
}

/* A faint set of vertical rules behind the page: a pin pitch, which is the
   grid everything in this track is drawn on. Quiet enough to be atmosphere
   rather than decoration. */
body {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(156, 232, 92, 0.045) 0 1px, transparent 1px 74px);
}

.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% - 3.6rem); vertical-align: middle; }
.mini-field output { font-family: var(--mono); font-size: 0.85rem; color: var(--bp-cyan); }
.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;
}
/* The first card is the verdict of this whole calculator — whether these
   two chips may be wired together — so it is allowed to shout. It is the
   only card whose value is WORDS rather than a number, though, and at the
   shouting size a four-word Czech verdict wraps to three lines and drags
   the whole first row of the grid to nearly twice the height of the
   second. So it shouts one step quieter and keeps its lines tight. */
.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; }
/* The budget table marks the rows the radio is responsible for, so that
   the eye can see at a glance how small a share they usually are. */
.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 budget and jitter tables carry three columns; keep them from
   crowding on a narrow results column. */
#budgetTable td, #budgetTable th,
#jitterTable td, #jitterTable th { padding-left: 0.35rem; padding-right: 0.35rem; }

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