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

   Mint, the third stop on the Mathematics track after VectorLab's gold and
   MatrixLab's indigo. In the shared figure palette mint has always meant
   "whatever was just computed" — and in this lab the thing just computed is
   the moved object, so the accent and the figures agree without any special
   casing.
   ========================================================================= */
:root {
  --bp-cyan: #5fe3a1;
  --bp-blue: #94edc2;
  --bp-mark: #5fe3a1;
  --note-accent: #5fe3a1;
  --calc-col: 370px;
  --page-max: 1440px;
}

body {
  background-image:
    linear-gradient(rgba(255, 201, 77, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 201, 77, 0.026) 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%; }

/* ------------------------------ the op list ------------------------------ */
/* The operations are a numbered LIST, and the number is the order they
   happen in. With transforms that is the single most important fact on the
   screen, so it gets a column of its own rather than being implied by
   vertical position alone. */
.op-list { display: flex; flex-direction: column; gap: 0.4rem; }
.op-row {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.45rem;
  align-items: start;
  border-left: 2px solid var(--bp-line); padding-left: 0.45rem;
}
.op-row.on { border-left-color: var(--bp-cyan); }
.op-num {
  font-family: var(--mono); font-size: 0.7rem; color: var(--bp-ink-dim);
  padding-top: 0.42rem; text-align: right;
}
.op-row.on .op-num { color: var(--bp-cyan); font-weight: 700; }
.op-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.op-body select {
  width: 100%; font-family: var(--mono); font-size: 0.78rem;
  background: var(--bp-bg); color: var(--bp-ink);
  border: 1px solid var(--bp-line); border-radius: 6px; padding: 0.3rem 0.35rem;
}
.op-args { display: grid; gap: 0.25rem; }
.op-args input {
  width: 100%; font-family: var(--mono); font-size: 0.78rem;
  background: var(--bp-bg); color: var(--bp-ink);
  border: 1px solid var(--bp-line); border-radius: 6px;
  padding: 0.28rem 0.3rem; text-align: right; min-width: 0;
}
.op-args input:focus, .op-body select:focus { outline: none; border-color: var(--bp-cyan); }
.op-args label {
  font-family: var(--mono); font-size: 0.6rem; color: var(--bp-ink-dim);
  display: block; margin-bottom: 0.08rem;
}
.op-args > div { min-width: 0; }

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

.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.ok { border-left-color: #5fe3a1; }
.vnote.ok b { color: #5fe3a1; }

/* ------------------------- matrices in the output ------------------------ */
.mout { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-start; }
.mout figure { margin: 0; }
.mout figcaption {
  font-family: var(--mono); font-size: 0.7rem; color: var(--bp-ink-dim);
  margin-bottom: 0.25rem; text-align: left;
}
.mbox {
  display: inline-grid; gap: 0.1rem 0.7rem;
  font-family: var(--mono); font-size: 0.8rem;
  padding: 0.4rem 0.6rem; border-left: 2px solid var(--bp-line2);
  border-right: 2px solid var(--bp-line2); border-radius: 3px;
  background: var(--bp-bg); text-align: right;
}
.mbox span.zero { color: var(--bp-ink-dim); opacity: 0.45; }
.mbox span.tr { color: #5fe3a1; }

.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.65rem; 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; }
.res-table td.num { text-align: right; font-family: var(--mono); }

@media (max-width: 720px) {
  .op-args input, .op-body select { font-size: 0.72rem; }
}