/* ── Graphs ──────────────────────────────────────────────────────────────────
   A plane on top, the formulas under it, one button at the foot. The keypad
   rises over the lot when a formula is being written — the plane stays visible
   above it on purpose, because watching the curve move as you type is the whole
   lesson and a keyboard that covered it would take the lesson away.

   Tokens only; the plane's own colours live in css/tokens.css as --gr-*.        */

.gr-play {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.gr-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: calc(var(--sat) + var(--space-3)) var(--space-4) var(--space-2);
}

.gr-where {
  font-size: var(--text-lg);
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-where b { font-family: var(--font-mono); color: var(--accent); margin-right: var(--space-2); }

.gr-brief {
  margin: 0;
  padding: 0 var(--space-5) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--text);
}

/* ── the plane ─────────────────────────────────────────────────────────────── */

.gr-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  margin: 0 var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  background: var(--gr-paper);
  overflow: hidden;
}

/* The plane is dragged and pinched, so the browser must not treat those as
   scrolling or zooming the page. */
.gr-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.gr-canvas:active { cursor: grabbing; }

.gr-verdict {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-top: var(--hairline) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
}
.gr-verdict.win { color: var(--accent); }
.gr-verdict.miss { color: var(--dim); }

.gr-win { display: flex; align-items: center; gap: var(--space-4); }
.gr-win strong { flex: 1; text-align: left; color: var(--accent); }

/* ── the formulas ──────────────────────────────────────────────────────────── */

.gr-eqs {
  flex: 0 0 auto;
  max-height: 34vh;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4) 0;
}

.gr-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.gr-row.off .gr-src { opacity: 0.4; }
.gr-row.bad .gr-src { color: var(--danger-text); }

/* the colour of this formula's curve, so the row and the line are one thing */
/* Numbered, like the list in a graphing calculator: the number is how you refer
   to a row, and the colour is how you find its curve on the plane. */
.gr-swatch {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  border: var(--hairline) solid var(--line-2);
  background: var(--c);
  color: var(--on-accent);
  font-family: var(--font-mono); font-size: var(--text-2xs);
}
.gr-row.off .gr-swatch { background: transparent; color: var(--mute); }

/* A variable nobody defined gets one of these, automatically. */
.gr-slider {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-2) 26px;
}
.gr-var {
  font-family: var(--font-mono); font-size: var(--text-lg);
  color: var(--accent); min-width: 1.4em;
}
.gr-slider input { flex: 1; accent-color: var(--accent); min-width: 0; }
.gr-slider em {
  font-style: normal; font-family: var(--font-mono);
  font-size: var(--text-md); color: var(--dim); min-width: 3em; text-align: right;
}

.gr-src {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--text);
  text-align: left;
  overflow: hidden;
}
.gr-y { color: var(--mute); flex: none; }
.gr-dom, .gr-e {
  flex: none;
  font-style: normal;
  font-size: var(--text-2xs);
  color: var(--mute);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
}
.gr-e { color: var(--accent); border-color: var(--accent-line); }

.gr-del svg { width: var(--icon-sm); height: var(--icon-sm); }

.gr-err {
  margin: 0 0 var(--space-2) 26px;
  font-size: var(--text-sm);
  color: var(--danger-text);
}

.gr-add {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) dashed var(--line-2);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--dim);
  font-size: var(--text-md);
}
.gr-add svg { width: var(--icon-sm); height: var(--icon-sm); }

.gr-slots {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
}

.gr-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--sab) + var(--space-4));
}
.gr-hint { flex: none; }
.gr-run { flex: 1; }
.gr-run.is-run { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }

/* ── the keypad ────────────────────────────────────────────────────────────── */

.mp {
  position: fixed; inset: 0; z-index: var(--z-veil);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: color-mix(in srgb, var(--veil) 60%, transparent);
}

.mp-sheet {
  background: var(--bg);
  border-top: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4) var(--space-4) calc(var(--sab) + var(--space-4));
  animation: mp-rise var(--duration-2) var(--ease) both;
}

@keyframes mp-rise { from { transform: translateY(12%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp-sheet { animation: none; } }

.mp-head { display: flex; align-items: center; gap: var(--space-3); }
.mp-title {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
}

.mp-line {
  display: flex; align-items: baseline;
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  min-height: 2.4em;
  overflow-x: auto;
  white-space: nowrap;
}
.mp-y { color: var(--mute); flex: none; }
.mp-src { color: var(--text); }

/* a drawn caret — the field is a span, so no OS keyboard can open over ours */
.mp-caret {
  display: inline-block; width: 2px; height: 1.05em;
  vertical-align: -0.16em;
  background: var(--accent);
  animation: mp-blink 1.1s steps(1) infinite;
}
@keyframes mp-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-caret { animation: none; } }

.mp-err {
  margin: var(--space-2) 0 0;
  min-height: 1.3em;
  font-size: var(--text-sm);
  color: var(--danger-text);
  opacity: 0;
}
.mp-err.on { opacity: 1; }
.mp-err.shake { animation: mp-shake var(--duration-2) var(--ease); }
@keyframes mp-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.mp-e {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-3) 0;
  font-size: var(--text-sm); color: var(--dim);
}
.mp-e input { flex: 1; accent-color: var(--accent); min-width: 0; }
.mp-e em { font-style: normal; font-family: var(--font-mono); color: var(--accent); min-width: 2.4em; text-align: right; }

/* Three panes behind three tabs. 123 is six across like a calculator; abc needs
   seven to fit the alphabet without scrolling; the function pane is three wide
   because its labels are words. */
.mp-tabs {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-3) 0;
}
.mp-tab {
  min-width: 46px; min-height: 34px;
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--dim);
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.mp-tab.on { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-line); }

.mp-keys { display: grid; gap: var(--space-2); }
.mp-keys.pane-123 { grid-template-columns: repeat(6, 1fr); }
.mp-keys.pane-abc { grid-template-columns: repeat(7, 1fr); }
.mp-keys.pane-fn { grid-template-columns: repeat(3, 1fr); }

.mp-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.mp-actions .k-clear { flex: none; min-width: 84px; }
.mp-actions .k-done { flex: 1; }

.mp-k {
  min-height: 44px;                 /* a thumb, not a cursor */
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
}
.mp-k:active { background: var(--surface-2); }
.mp-k.k-var { color: var(--accent); border-color: var(--accent-line); }
.mp-k.k-wide, .mp-k.k-abs { font-size: var(--text-md); }
.mp-k.k-fn { font-size: var(--text-sm); }
.mp-k.k-move, .mp-k.k-del { color: var(--dim); }
.mp-k.k-clear { font-size: var(--text-sm); color: var(--dim); }
.mp-k.k-done {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* Sideways: the plane takes the left, everything written takes the right. */
@media (max-height: 560px) and (orientation: landscape) {
  .gr-play { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr auto; }
  .gr-top { grid-column: 1 / -1; }
  .gr-brief { grid-column: 1; grid-row: 2; align-self: start; }
  .gr-stage { grid-column: 1; grid-row: 2; margin-top: 2.6em; }
  .gr-eqs { grid-column: 2; grid-row: 2; max-height: none; }
  .gr-foot { grid-column: 2; grid-row: 3; }
  .mp-sheet { max-height: 100vh; overflow-y: auto; }
}