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

   Amber, the second of the Hardware track's shades. It reads as current,
   which is what this lab is about: LogicLab argued about voltage, and
   here something gets connected and starts drawing.

   Inside the figures amber is the current and what it costs, blue is the
   chip and its pin, red is a limit and whatever breaks, gold is the third
   party (the supply, the datasheet point, the barrier) and mint is what
   still fits.
   ========================================================================= */
:root {
  --bp-cyan: #ffa94d;          /* primary accent */
  --bp-blue: #ffd8a8;          /* secondary */
  --bp-mark: #ffa94d;
  --note-accent: #ffa94d;
  --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(255, 169, 77, 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; }
}