Calc2

frontend/app/assets/css/_calculator.scss

@@ -0,0 +1,248 @@
+@use 'mixins' as *;
+
+// ---------- Graphing calculator (/calculator) ----------
+
+// desktop: the plane owns the space beside the sidebar the way the link
+// map does — a full surface with the function dock and the zoom buttons
+// floating over it. (The page transition only fades, so no transform
+// steals the fixed positioning.)
+.calc-stage {
+  position: fixed;
+  inset: 0 0 0 var(--sidebar-w);
+  transition: left 0.22s ease;
+  z-index: 1;
+  background: var(--bg);
+}
+
+// the plane fills the stage
+.plot-wrap {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: var(--surface);
+}
+
+.plot-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  touch-action: none; // the plane owns drags and pinches, not the page
+}
+
+// the function dock, pinned to the plane's left edge
+.calc-dock {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  width: clamp(260px, 24vw, 320px);
+  padding: 18px 16px;
+  border-right: 1px solid var(--border);
+  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-lg);
+  overflow-y: auto;
+}
+
+.calc-dock-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 0 0 14px;
+}
+
+.calc-dock-title {
+  @include eyebrow(0.74rem, 750, 0.09em);
+  margin: 0;
+}
+
+.calc-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.calc-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+// the curve's hue; a press hands it on to the next one in the palette
+.calc-swatch {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
+  transition: transform 0.15s;
+
+  &:hover { transform: scale(1.2); }
+}
+
+.calc-input-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface);
+  transition: border-color 0.15s, box-shadow 0.15s;
+
+  &:focus-within {
+    border-color: var(--accent);
+    box-shadow: var(--ring);
+  }
+
+  .calc-item.invalid & {
+    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
+  }
+}
+
+// the "y =" the field answers to, set like the math it introduces
+.calc-y {
+  flex: none;
+  padding: 0 2px 0 10px;
+  color: var(--faint);
+  font: italic 0.95rem/1 'Computer Modern', Georgia, serif;
+}
+
+.calc-input {
+  flex: 1;
+  min-width: 0;
+  padding: 9px 10px 9px 6px;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--text);
+  font: 0.95rem/1.2 'Computer Modern', Georgia, serif;
+
+  &::placeholder { color: var(--faint); opacity: 0.75; }
+
+  &.input-error { color: var(--danger); }
+}
+
+.calc-remove:hover {
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 10%, transparent);
+}
+
+.calc-error {
+  display: block;
+  margin: 5px 2px 1px;
+  color: var(--danger);
+  font-size: 0.78rem;
+}
+
+.calc-add { margin-top: 12px; }
+
+// the fold: the dock slides out to the left, under the app sidebar, and a
+// quiet card takes its place at the plane's top-left corner
+.calc-dock-enter-active,
+.calc-dock-leave-active { transition: transform 0.22s ease; }
+
+.calc-dock-enter-from,
+.calc-dock-leave-to { transform: translateX(-105%); }
+
+.calc-dock-open {
+  position: absolute;
+  top: 10px;
+  left: 12px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
+  backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-sm);
+  color: var(--muted);
+  font-size: 0.84rem;
+  font-weight: 650;
+  white-space: nowrap;
+  transition: color 0.15s, background-color 0.15s;
+
+  &:hover { color: var(--text); background: var(--surface-2); }
+}
+
+// the button row floating on the plane's top-right corner — clear of the dock
+.plot-toolbar {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  z-index: 2;
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
+  backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-sm);
+}
+
+// where the cursor stands, bottom-right so the dock never covers it
+.plot-readout {
+  position: absolute;
+  bottom: 10px;
+  right: 12px;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
+  backdrop-filter: blur(10px);
+  color: var(--muted);
+  font: 0.78rem/1.3 'Computer Modern', Georgia, serif;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+
+// the top bar is in the flow here, so the calculator folds into panels of
+// the page: the dock first, then the plane as its own card
+@media (max-width: 900px) {
+  .calc-stage {
+    position: static;
+    inset: auto;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+  }
+
+  .calc-dock {
+    position: static;
+    order: 1;
+    width: auto;
+    margin-bottom: 16px;
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: var(--bg-elev);
+    backdrop-filter: none;
+    box-shadow: var(--shadow-sm);
+    overflow: visible;
+  }
+
+  .plot-wrap {
+    position: static;
+    order: 2;
+    width: 100%;
+    height: min(66dvh, 560px);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+  }
+
+  .plot-toolbar { top: 8px; right: 8px; }
+
+  // during the fold the dock lifts out of the flow, so the plane takes the
+  // width back at once rather than after the slide
+  .calc-dock-leave-active { position: absolute; left: 0; right: 0; }
+}