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

   Gold, and it is the track colour rather than a colour chosen for this lab
   alone: Mathematics is the fourth track and it needed a hue the other three
   do not occupy. Mechanics is cyan, Electronics green, Control blue — all
   three cool. A warm accent separates the track at a glance on the map,
   which is where the distinction has to survive being seen at 40 px.

   Inside the figures the gold means "the thing being talked about" (the
   vector a, the answer), blue is the second operand, mint the result of an
   operation, pink the leftover or the third vector, red what breaks.
   ========================================================================= */
:root {
  --bp-cyan: #ffc94d;          /* primary accent */
  --bp-blue: #ffd77a;          /* secondary */
  --bp-mark: #ffc94d;
  --note-accent: #ffc94d;
  --calc-col: 350px;
  --page-max: 1440px;
}

/* Squared paper. This lab is the one place in the academy where the grid is
   not decoration — every second figure is drawn on one, and having the page
   itself share it makes the figures read as cut-outs of the same surface. */
body {
  background-image:
    linear-gradient(rgba(255, 201, 77, 0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 201, 77, 0.030) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
}

.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%; }

/* ------------------------------ vector input ----------------------------- */
/* Three numbers on one row, with the letter in front of them. A vector typed
   as three separate labelled fields stops looking like one object, which is
   the exact misconception chapter 1 spends its length undoing. */
.vec-row {
  display: grid;
  grid-template-columns: 1.5rem repeat(3, 1fr);
  gap: 0.3rem; align-items: center;
  margin-bottom: 0.35rem;
}
.vec-row > .vec-name {
  font-family: var(--mono); font-size: 0.95rem; font-weight: 700;
  text-align: center;
}
.vec-row.a > .vec-name { color: #ffc94d; }
.vec-row.b > .vec-name { color: #4dabf7; }
.vec-row.c > .vec-name { color: #f06595; }
.vec-row input {
  width: 100%; font-family: var(--mono); font-size: 0.85rem;
  background: var(--bp-bg); color: var(--bp-ink);
  border: 1px solid var(--bp-line); border-radius: 6px;
  padding: 0.32rem 0.4rem; text-align: right;
}
.vec-row input:focus { outline: none; border-color: var(--bp-cyan); }
.vec-row input:disabled { opacity: 0.35; }
.vec-head {
  display: grid; grid-template-columns: 1.5rem repeat(3, 1fr);
  gap: 0.3rem; margin-bottom: 0.2rem;
}
.vec-head span {
  font-family: var(--mono); font-size: 0.62rem; color: var(--bp-ink-dim);
  text-align: center; letter-spacing: 0.06em;
}

/* ------------------------------ result cards ----------------------------- */
/* Every answer carries the expression that produced it. A calculator that
   prints only a number is a black box, and this lab exists to be the
   opposite of one. */
.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; }

/* A note the calculator prints when a number exists but does not mean what
   it looks like — a zero vector, a dependent set, a near-parallel pair. */
.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.7rem; 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 tr.zero td { color: var(--bp-ink-dim); }

@media (max-width: 720px) {
  .vec-row { grid-template-columns: 1.2rem repeat(3, 1fr); gap: 0.2rem; }
  .vec-head { grid-template-columns: 1.2rem repeat(3, 1fr); gap: 0.2rem; }
  .vec-row input { font-size: 0.78rem; padding: 0.3rem 0.25rem; }
}