/* =========================================================================
   BitLab — 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 value being talked about", blue the
   second operand or the encoding's overhead, mint the result, red what is
   lost or what breaks.
   ========================================================================= */
: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; }

/* ------------------------------- the bit grid ---------------------------- */
/* Sixty-four cells have to fit a 350 px column on a phone, so the grid wraps
   at eight per row and the cells size themselves. Bytes stay together — a
   64-bit word broken across rows at an arbitrary point would be unreadable,
   and eight is the one grouping every reader already has. */
.bitgrid { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.bitbyte { display: flex; gap: 2px; }
.bitcell {
  width: 26px; height: 30px; border-radius: 3px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  border: 1px solid #3a4759; background: #2a3546; color: #6b7787;
  transition: 0.1s;
}
.bitcell.on {
  background: var(--bp-cyan); border-color: var(--bp-cyan); color: var(--bp-bg);
}
.bitcell:hover { border-color: var(--bp-cyan); }
.bitlbl {
  font-family: var(--mono); font-size: 0.58rem; color: var(--bp-ink-dim);
  text-align: center; margin-top: 0.2rem;
}

/* --------------------------------- 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; }

@media (max-width: 720px) {
  .bitcell { width: 22px; height: 27px; font-size: 0.72rem; }
  .bitgrid { gap: 0.4rem 0.6rem; }
}