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

   Lime — the fifth distinct shade on the wireless track after WaveLab's
   coral, ModLab's orange, WiFiLab's sky and BleLab's indigo. It reads as
   the low-power colour, which is what this lab is about.

   Inside the figures lime is the technology being examined, gold what it
   costs, mint what fits and red what does not.
   ========================================================================= */
:root {
  --bp-cyan: #a9e34b;          /* primary accent */
  --bp-blue: #d8f5a2;          /* secondary */
  --bp-mark: #a9e34b;
  --note-accent: #a9e34b;
  --calc-col: 350px;
  --page-max: 1440px;
}

/* A sparse dotted field behind the page: nodes scattered over a site, which
   is the picture this lab keeps returning to. Quiet enough to be atmosphere
   rather than decoration. */
body {
  background-image:
    radial-gradient(circle at 20% 12%, rgba(169, 227, 75, 0.05) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 72% 46%, rgba(169, 227, 75, 0.04) 0 1.5px, transparent 1.5px);
  background-size: 130px 130px, 190px 190px;
}

.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 air time is the verdict of this whole calculator, because everything
   the duty cycle forbids follows from it — so it is allowed to shout. */
.vres .card.verdict .v { font-size: 1.4rem; }
.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 comparison table marks the licensed rows: they are not worse, they
   are a different kind of decision — one with a monthly invoice. */
.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; }

/* Five columns is one more than the other labs carry, so the comparison
   table gets to breathe less. */
#compareTable td, #compareTable th { padding-left: 0.35rem; padding-right: 0.35rem; }

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