/* Physics Graphing Lab. Shared tokens and components come from ../shared/zsa-base.css; everything here is zsa-pg-.
   Layout: one column on phones and tablets (settings, then the track, graphs and reflection); from 1100px the
   settings sit in a 280px column beside the work. The graphs are side by side wherever three fit at 250px or more. */
.zsa.zsa-pg {--zsa-max-width:1440px; --zsa-pg-x:#1d4ed8; --zsa-pg-v:#0f766e; --zsa-pg-a:#7e22ce; --zsa-pg-pred:#b45309;}
.zsa-pg-header {margin-bottom:8px;}
.zsa-pg-topline {display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;}
.zsa-pg-topline .zsa-eyebrow {margin:0;}
.zsa-pg .zsa-pg-header h1 {margin:8px 0 8px;}
.zsa-pg-lede {margin:0 0 8px;max-width:60ch;}
.zsa-pg h2 {font-size:1.35rem;line-height:1.3;margin:4px 0 12px;}
.zsa-pg h3 {font-size:1.1rem;line-height:1.3;margin:16px 0 8px;}
.zsa-pg .zsa-eyebrow {margin:0;}
.zsa-pg-small {font-size:var(--zsa-text-sm);margin:8px 0;}
.zsa-pg-print-only {display:none;}

/* Mode bar */
.zsa-pg-modebar {display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;border-top:1px solid var(--zsa-border);border-bottom:1px solid var(--zsa-border);padding:12px 0;margin:16px 0;}
.zsa-pg-modes {display:flex;flex-wrap:wrap;gap:4px;background:var(--zsa-sky);border:1px solid var(--zsa-border);border-radius:var(--zsa-radius);padding:4px;}
.zsa-pg-mode {border:1px solid transparent;border-radius:var(--zsa-radius-sm);background:transparent;color:var(--zsa-navy);padding:8px 16px;font-size:16px;}
.zsa-pg-mode:hover {background:var(--zsa-white);}
.zsa-pg-mode[aria-pressed="true"] {background:var(--zsa-white);border-color:var(--zsa-navy);font-weight:600;box-shadow:0 2px 6px rgba(11,42,91,.12);}
.zsa-pg-mode-note {margin:0;font-size:var(--zsa-text-sm);}
.zsa-pg-print {margin-left:auto;padding:8px 16px;}

/* Layout */
.zsa-pg-layout {display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
.zsa-pg-side,.zsa-pg-work {min-width:0;}
.zsa-pg .zsa-card {margin:0 0 16px;background:var(--zsa-white);}
@media(min-width:1100px) {
  .zsa-pg-layout {grid-template-columns:280px minmax(0,1fr);column-gap:24px;align-items:start;}
  .zsa-pg .zsa-card {padding:20px 24px;}
}
.zsa-pg-label {display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px;}

/* Settings */
.zsa-pg-field {display:block;font-size:var(--zsa-text-sm);font-weight:600;color:var(--zsa-navy);margin:12px 0 4px;}
.zsa-pg select {width:100%;min-height:44px;border:1px solid var(--zsa-navy);border-radius:var(--zsa-radius);padding:6px 8px;color:var(--zsa-navy);background:var(--zsa-white);font-size:16px;}
.zsa-pg-control {margin-top:12px;}
.zsa-pg-control-label {display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:var(--zsa-text-sm);font-weight:600;color:var(--zsa-navy);}
.zsa-pg-control-label output {font-variant-numeric:tabular-nums;background:var(--zsa-sky);border-radius:var(--zsa-radius-sm);padding:0 8px;white-space:nowrap;}
.zsa-pg-range {display:block;width:100%;min-height:44px;margin:0;accent-color:var(--zsa-blue);cursor:pointer;}
.zsa-pg-ends {display:flex;justify-content:space-between;font-size:var(--zsa-text-label);margin-top:-6px;}
.zsa-pg-model {margin-top:16px;padding-top:4px;border-top:1px solid var(--zsa-border);}
.zsa-pg-model h3 {margin-top:12px;}
.zsa-pg-equations {color:var(--zsa-navy);line-height:1.9;margin:0;font-variant-numeric:tabular-nums;}
.zsa-pg-wide {width:100%;margin-top:8px;}
@media(min-width:600px) and (max-width:1099px) {
  .zsa-pg-settings {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;}
  .zsa-pg-settings > .zsa-eyebrow,.zsa-pg-settings > h2,.zsa-pg-settings > .zsa-pg-field,.zsa-pg-settings > select,.zsa-pg-settings > #zsa-pg-scenario-text {grid-column:1 / -1;}
  .zsa-pg-model {grid-row:span 2;}
}

/* Track */
.zsa-pg-pill {margin:0;font-size:var(--zsa-text-label);font-weight:600;color:var(--zsa-navy);background:var(--zsa-sky);border:1px solid var(--zsa-border);border-radius:var(--zsa-radius-pill);padding:2px 12px;}
.zsa-pg-track {display:block;width:100%;height:130px;margin:8px 0;}
.zsa-pg-track-axis {stroke:#64748b;stroke-width:2;}
.zsa-pg-track-tick {stroke:#64748b;stroke-width:1.5;}
.zsa-pg-track-origin {stroke:#94a3b8;stroke-width:1;stroke-dasharray:4 4;}
.zsa-pg-track-label {font-size:13px;fill:var(--zsa-slate);font-variant-numeric:tabular-nums;}
.zsa-pg-cart-body {fill:var(--zsa-blue);}
.zsa-pg-cart-top {fill:var(--zsa-accent-light);}
.zsa-pg-wheel {fill:var(--zsa-navy);}
.zsa-pg-arrow {fill:none;stroke:var(--zsa-pg-v);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.zsa-pg-readouts {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;background:var(--zsa-sky);border-radius:var(--zsa-radius);padding:10px 0;}
.zsa-pg-readouts > div {padding:0 12px;border-right:1px solid var(--zsa-border);min-width:0;}
.zsa-pg-readouts > div:last-child {border-right:0;}
.zsa-pg-readouts dt {font-size:var(--zsa-text-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--zsa-blue);}
.zsa-pg-readouts dd {margin:0;font-size:1.2rem;font-weight:600;color:var(--zsa-navy);font-variant-numeric:tabular-nums;white-space:nowrap;}
.zsa-pg-playback {display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;}
.zsa-pg-play {min-width:9.5em;}
.zsa-pg-scrub {display:flex;align-items:center;gap:12px;flex:1 1 220px;font-size:var(--zsa-text-sm);font-weight:600;color:var(--zsa-navy);}
@media(max-width:599px) {
  .zsa-pg-readouts {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px;}
  .zsa-pg-readouts > div:nth-child(2) {border-right:0;}
  .zsa-pg-pill {display:none;}
  .zsa-pg-topline .zsa-eyebrow {display:none;}
  .zsa-pg-print {margin-left:0;}
  .zsa-pg-mode {flex:1 1 auto;}
}

/* Prediction bar */
.zsa-pg-predictbar {background:#fffbeb;border:1px solid #f59e0b;border-radius:var(--zsa-radius-lg);padding:12px 16px;margin:0 0 16px;}
.zsa-pg-predictbar h2 {font-size:1.1rem;margin:0 0 4px;}
.zsa-pg-predictbar p {margin:0 0 8px;font-size:var(--zsa-text-sm);}
.zsa-pg-predict-actions {display:flex;flex-wrap:wrap;gap:8px;}

/* Graphs */
.zsa-pg-graphsection {margin:0 0 16px;}
.zsa-pg-legend {display:flex;align-items:center;gap:6px;margin:0;font-size:var(--zsa-text-label);}
.zsa-pg-key-model {display:inline-block;width:18px;border-top:3px solid var(--zsa-navy);}
.zsa-pg-key-pred {display:inline-block;width:18px;border-top:3px dashed var(--zsa-pg-pred);margin-left:10px;}
.zsa-pg-graphs {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:8px;}
.zsa-pg-graph {margin:0;border:1px solid var(--zsa-border);border-radius:var(--zsa-radius-lg);padding:12px 8px 6px;background:var(--zsa-white);min-width:0;}
.zsa-pg-graph h3 {margin:0 6px;font-size:1.05rem;font-weight:600;}
.zsa-pg-graph-x h3 {color:var(--zsa-pg-x);}
.zsa-pg-graph-v h3 {color:var(--zsa-pg-v);}
.zsa-pg-graph-a h3 {color:var(--zsa-pg-a);}
.zsa-pg-unit {font-weight:400;color:var(--zsa-slate);}
.zsa-pg-graph-sub {margin:0 6px;font-size:var(--zsa-text-label);}
.zsa-pg-svg {display:block;width:100%;height:auto;max-height:340px;}
.zsa-pg-drawable .zsa-pg-svg {touch-action:none;cursor:crosshair;}
.zsa-pg-grid {stroke:#e2e8f0;stroke-width:1;}
.zsa-pg-zero {stroke:#64748b;stroke-width:1.5;}
.zsa-pg-axis {stroke:#64748b;stroke-width:1.5;}
.zsa-pg-tick {font-size:13px;fill:var(--zsa-slate);font-variant-numeric:tabular-nums;}
.zsa-pg-axis-label {font-size:13px;fill:var(--zsa-slate);}
.zsa-pg-empty {font-size:14px;fill:#475569;}
.zsa-pg-empty-sub {font-size:12px;}
.zsa-pg-model {fill:none;stroke-width:3;stroke-linejoin:round;}
.zsa-pg-model-x {stroke:var(--zsa-pg-x);}
.zsa-pg-model-v {stroke:var(--zsa-pg-v);}
.zsa-pg-model-a {stroke:var(--zsa-pg-a);}
.zsa-pg-pred {fill:none;stroke:var(--zsa-pg-pred);stroke-width:2.5;stroke-dasharray:6 4;stroke-linejoin:round;}
.zsa-pg-pred-point {fill:var(--zsa-white);stroke:var(--zsa-pg-pred);stroke-width:2;}
.zsa-pg-off {fill:var(--zsa-pg-pred);}
.zsa-pg-cursor {stroke:#64748b;stroke-width:1;stroke-dasharray:3 3;}
.zsa-pg-dot {stroke:var(--zsa-white);stroke-width:1.5;}
.zsa-pg-dot-x {fill:var(--zsa-pg-x);}
.zsa-pg-dot-v {fill:var(--zsa-pg-v);}
.zsa-pg-dot-a {fill:var(--zsa-pg-a);}
.zsa-pg-scale-note {margin:4px 6px;font-size:var(--zsa-text-label);line-height:1.4;color:#92400e;}

/* Feedback and keyboard predictions */
.zsa-pg-feedback {border:1px solid var(--zsa-border);border-left:6px solid var(--zsa-blue);border-radius:var(--zsa-radius);background:var(--zsa-sky);padding:10px 16px;margin:0 0 16px;font-size:var(--zsa-text-sm);}
.zsa-pg-feedback:focus-visible {outline:var(--zsa-focus-ring);outline-offset:var(--zsa-focus-offset);}
.zsa-pg-feedback h3 {margin:4px 0 8px;}
.zsa-pg-feedback p {margin:6px 0;}
.zsa-pg-keyboard summary {cursor:pointer;color:var(--zsa-navy);font-weight:600;min-height:44px;display:flex;align-items:center;}
.zsa-pg-keyboard summary:focus-visible {outline:var(--zsa-focus-ring);outline-offset:var(--zsa-focus-offset);}
.zsa-pg-inputset {border:0;margin:12px 0 0;padding:0;min-width:0;}
.zsa-pg-inputset legend {font-weight:600;color:var(--zsa-navy);padding:0;font-size:var(--zsa-text-sm);}
.zsa-pg-inputrow {display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:4px;}
.zsa-pg-inputcell {display:flex;flex-direction:column;font-size:var(--zsa-text-label);font-weight:600;}
.zsa-pg-input {width:100%;min-height:44px;border:1px solid var(--zsa-navy);border-radius:var(--zsa-radius-sm);padding:4px 8px;color:var(--zsa-navy);font-size:16px;font-variant-numeric:tabular-nums;}
.zsa-pg-input:disabled {background:#f8fafc;color:#475569;border-color:var(--zsa-border-strong);}

/* Reflection */
.zsa-pg-reflection {display:grid;gap:8px 32px;}
@media(min-width:900px) {.zsa-pg-reflection {grid-template-columns:repeat(2,minmax(0,1fr));}}
.zsa-pg-textarea {display:block;width:100%;min-height:8em;resize:vertical;border:1px solid var(--zsa-navy);border-radius:var(--zsa-radius);padding:10px 12px;font:inherit;font-size:16px;color:var(--zsa-slate);}
.zsa-pg-textarea:focus-visible {outline:var(--zsa-focus-ring);outline-offset:var(--zsa-focus-offset);}

/* Print: the experiment, the graphs, the feedback and the whole reflection; no controls. */
@media print {
  .zsa.zsa-pg {max-width:none;padding:0;}
  .zsa-pg-topline,.zsa-pg-lede,.zsa-pg-modebar,.zsa-pg-side,.zsa-pg-playback,.zsa-pg-predictbar,.zsa-pg-keyboard,.zsa-pg .zsa-footer,.zsa-pg-pill,.zsa-pg-textarea,#zsa-pg-reflection-note {display:none!important;}
  .zsa-pg-print-only {display:block;}
  .zsa-pg-print-reflection {white-space:pre-wrap;border:1px solid #94a3b8;border-radius:6px;padding:8px 10px;min-height:6em;}
  .zsa-pg .zsa-pg-header h1 {font-size:1.6rem;margin:0 0 4px;}
  .zsa-pg-layout {display:block;}
  .zsa-pg-graphs {grid-template-columns:repeat(3,minmax(0,1fr));}
  .zsa-pg-graph,.zsa-pg-trackcard,.zsa-pg-feedback {break-inside:avoid;}
  .zsa-pg-reflection {grid-template-columns:1fr;}
}