.graph-app {
  display: grid; grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  height: calc(100svh - 4.1rem); padding-bottom: 1.25rem;
}

.panel { min-height: 0; overflow-y: auto; padding: 0 0.6rem 1rem 0; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.5) transparent; }
.panel .lab-title { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.block { margin-top: 1.9rem; }

/* Function rows */
.fn { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.5rem 0.6rem; margin-bottom: 0.6rem; }
.fn-dot { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--c); border: 2px solid var(--mist); }
.fn-error { grid-column: 2 / -1; min-height: 0; color: var(--sun); }
.fn-error:empty { display: none; }
.hint { margin-top: 0.4rem; font-size: 1rem; opacity: 0.85; }

.panel input {
  width: 100%; min-width: 0; padding: 0.55rem 0.8rem; border-radius: 0.8rem;
  border: 2px solid rgb(255 255 255 / 0.5); background: rgb(255 255 255 / 0.1); color: #fff;
  font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 500; font-size: 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.panel input:hover { border-color: rgb(255 255 255 / 0.8); }
.panel input:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-color: var(--sun); }
.panel input[aria-invalid="true"] { border-color: var(--sun); }
.panel input[type="checkbox"] { width: 1.15rem; height: 1.15rem; padding: 0; accent-color: var(--sun); }

.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.9rem; }
.presets .ui { margin-right: 0.2rem; opacity: 0.85; }

.check { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 0.8rem; cursor: pointer; }
.fields { display: grid; gap: 0.6rem; }
.fields.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.num { display: grid; gap: 0.25rem; }
.num .ui { opacity: 0.85; }

/* Results */
.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 2px solid rgb(255 255 255 / 0.3); }
.readout .wide { grid-column: 1 / -1; }
.readout dt { opacity: 0.8; }
.readout dd { margin-top: 0.1rem; font-size: 1.25rem; overflow-wrap: anywhere; }

/* Graph */
.plot-wrap { position: relative; min-height: 0; overflow: hidden; border-radius: 1.25rem; background: var(--mist); }
#plot { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#plot:active { cursor: grabbing; }
#plot:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; }

.plot-readout {
  position: absolute; left: 0.9rem; top: 0.9rem; display: grid; gap: 0.3rem; min-width: 9rem;
  padding: 0.6rem 0.85rem; border-radius: 0.9rem; background: rgb(16 10 58 / 0.9); color: var(--mist);
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.plot-readout.is-on { opacity: 1; }
.plot-readout b { font-variation-settings: "wdth" 100, "wght" 720; }
.ro-row { display: flex; align-items: center; gap: 0.5rem; }
.ro-row i { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid var(--mist); }

.plot-tools { position: absolute; right: 0.9rem; bottom: 0.9rem; display: flex; gap: 0.5rem; }
.plot-tools .btn { min-width: 2.7rem; background: var(--ink); color: var(--mist); border-color: var(--ink); }
.plot-tools .btn:hover { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.plot-tools .zoom { min-width: 3.1rem; padding: 0.3rem 1rem; font-size: 1.7rem; line-height: 1; font-variation-settings: "wdth" 100, "wght" 500; }

@media (max-width: 860px) {
  .graph-app { grid-template-columns: minmax(0, 1fr); height: auto; }
  .plot-wrap { order: -1; height: 62svh; min-height: 22rem; }
  .panel { overflow: visible; padding-right: 0; }
}