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

   Violet, the fifth of the Hardware track's shades. It reads as the copper
   itself — the thing every earlier lab drew as a line and this one has to
   give a shape.

   Inside the figures violet is the copper and what it costs, gold is the
   outgoing signal, blue is the return and the plane, red is heat and
   whatever breaks, mint is what still fits.
   ========================================================================= */
:root {
  --bp-cyan: #9775fa;          /* primary accent */
  --bp-blue: #c3b0ff;          /* secondary */
  --bp-mark: #9775fa;
  --note-accent: #9775fa;
  --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(151, 117, 250, 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; }
}