/* Guided studio scenes (studio-kit.js): gravity lab, Newton's cannon, bow draw,
   half-pipe bar charts. Same visual language as the impulse studio. */
.guided-canvas-container.phab-studio { display: flex; flex-wrap: wrap; align-content: start; padding: 0; background: #101f30; border: 1px solid #294356; border-radius: 12px; overflow: hidden; container-type: inline-size; }
.phab-studio > canvas { width: 100%; border-radius: 0 !important; }
.phab-studio > .sim3d-data-panel { display: none !important; }
.studio-heading { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 14px 16px 10px; pointer-events: none; font: 650 10px system-ui, sans-serif; letter-spacing: .08em; color: #bfd8e6; }
.studio-stage { color: #ffcf92; font-size: 11px; letter-spacing: 0; }
.studio-ui { flex: 1 1 100%; width: 100%; min-width: 0; color: #e3edf4; font-family: system-ui, sans-serif; text-align: left; }
.studio-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px 10px; font-size: 11px; color: #b3c9d8; }
.studio-camera-reset { border: 1px solid #526c80; border-radius: 5px; background: #20364a; color: #e3edf4; font: inherit; padding: 5px 9px; cursor: pointer; }
.studio-camera-reset:focus-visible { outline: 3px solid #ffcb7c; outline-offset: 2px; }
.studio-ledger { display: grid; grid-template-columns: repeat(var(--studio-cols, 3), minmax(0, 1fr)); gap: 8px; padding: 12px 14px; background: #172b3c; border-block: 1px solid #304b60; }
.studio-ledger > div { min-width: 0; }
.studio-ledger span { display: block; margin-bottom: 5px; font-size: 11px; line-height: 1.3; color: #adc4d3; }
.studio-ledger sub { font-size: .78em; line-height: 0; }
.studio-ledger strong { display: block; font-size: clamp(13px, 1.55vw, 19px); font-weight: 560; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-plots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.studio-plots > canvas { display: block; width: 100%; min-width: 0; }
.studio-model-note { margin: 0; padding: 0 14px 13px; font-size: 11px; line-height: 1.5; color: #b3c9d8; }
.studio-snapshots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; min-width: 0; }
.studio-snap { min-width: 0; padding: 8px 8px 6px; background: #132b3d; border: 1px solid #304b60; border-radius: 9px; }
.studio-snap h5 { margin: 0 0 8px; min-height: 2.5em; font: 600 11px/1.25 system-ui, sans-serif; color: #e3edf4; }
.studio-snap-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; align-items: end; height: 104px; border-bottom: 1px solid #8aa0b1; }
.studio-snap-bars i { display: block; height: 0; background: var(--bar); border-radius: 2px 2px 0 0; }
.studio-snap-labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 3px; font-size: 10px; text-align: center; color: #afc5d5; }
.studio-snap-labels sub { font-size: .8em; line-height: 0; }
.studio-snap-state { margin: 5px 0 0; font-size: 10px; color: #9fb6c6; }
.studio-snap.is-empty .studio-snap-bars { opacity: .35; }
@container (max-width: 560px) {
  .studio-plots { grid-template-columns: 1fr; }
  .studio-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .studio-heading { padding: 12px 12px 8px; padding-right: 96px; }
  .studio-stage { flex-basis: 100%; }
  .studio-caption { padding: 8px 12px; }
  .studio-camera-reset { min-height: 40px; }
  .studio-ledger { padding: 10px 12px; }
  .studio-plots { padding: 10px; }
}
/* Angled-launch derivation board (projectile-studio-3d.js). */
.launch-derive { flex: 1 1 100%; margin: 0 12px 12px; padding: 12px 14px; background: #132b3d; border: 1px solid #304b60; border-radius: 10px; font-size: 12px; color: #d8e6ef; }
.launch-derive[hidden] { display: none; }
.launch-derive h5 { margin: 0 0 9px; font: 650 10px system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #bfd8e6; }
.launch-derive i { font-family: "Times New Roman", Georgia, serif; font-size: 1.12em; }
.launch-derive sub, .launch-derive sup { font-size: .75em; line-height: 0; }
.ld-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ld-card { padding: 8px 9px; border-radius: 8px; background: #0f2434; border-left: 3px solid var(--ld, #8aa0b1); }
.ld-card h6 { margin: 0 0 4px; font: 650 11px system-ui, sans-serif; color: var(--ld, #e3edf4); }
.ld-card p { margin: 3px 0 0; line-height: 1.4; color: #b3c9d8; }
.ld-card p.ld-eq { color: #f3f8fb; font-size: 14px; }
.ld-x { --ld: #6cb6ff; } .ld-y { --ld: #ffab4a; } .ld-c { --ld: #ffd98a; }
.ld-steps { margin: 0; padding: 0; list-style: none; counter-reset: ld; }
.ld-steps li { counter-increment: ld; display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid #243f53; }
.ld-steps li::before { content: none; }
.ld-do { color: #9fb6c6; }
.ld-do::before { content: counter(ld) ". "; color: #ffcf92; font-weight: 650; }
.ld-steps .ld-eq { font-size: 14px; color: #f3f8fb; }
.ld-slot { display: inline-block; min-width: 2.2em; padding: 0 5px; border: 1px dashed #6f879a; border-radius: 5px; text-align: center; color: #9fb6c6; }
.ld-slot.is-filled { border-style: solid; color: #f3f8fb; animation: ld-fill .6s ease-out; }
.ld-slot.ld-t.is-filled { border-color: #ffab4a; background: rgba(255,171,74,.14); }
.ld-slot.ld-cx.is-filled { border-color: #6cb6ff; background: rgba(108,182,255,.14); }
.ld-slot.ld-cy.is-filled { border-color: #ffd98a; background: rgba(255,217,138,.12); }
.ld-steps strong { color: #ffe3a8; }
.ld-check { margin: 8px 0 0; color: #b3c9d8; line-height: 1.5; }
@keyframes ld-fill { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ld-slot.is-filled { animation: none; } }
@container (max-width: 560px) {
  .ld-cards { grid-template-columns: 1fr; }
  .ld-steps li { grid-template-columns: 1fr; gap: 2px; }
}
/* Reference-frames studio (frames-studio-3d.js). */
.frames-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.frames-bar button { border: 1px solid #526c80; border-radius: 6px; background: #20364a; color: #e3edf4; font: 600 12px system-ui, sans-serif; padding: 7px 12px; cursor: pointer; }
.frames-bar button.is-active { border-color: #ffd98a; background: #3a3420; color: #ffe3a8; }
.frames-bar button:focus-visible { outline: 3px solid #ffcb7c; outline-offset: 2px; }
.frames-triangle { display: block; width: calc(100% - 24px); margin: 0 12px 12px; background: #132b3d; border: 1px solid #304b60; border-radius: 10px; }
@media (max-width: 620px) { .frames-bar button { min-height: 40px; } }