/* Line 16013 (edit-bay-eb04-reframe-r1): the three-shapes panel on the Google path. Colours only from ns-tokens.css (dark
   by default, light under prefers-color-scheme: light); 375 px first. The body's data-level reveals advanced (.ebr-adv)
   and expert (.ebr-exp) controls over the same crops. */
.ebr { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ns-border); display: grid; gap: 10px; min-width: 0; }
.ebr h3 { margin: 0; color: var(--ns-text); }
.ebr-adv, .ebr-exp { display: none; }
.eb[data-level="advanced"] .ebr-adv, .eb[data-level="expert"] .ebr-adv { display: block; }
.eb[data-level="advanced"] .ebr-controls, .eb[data-level="expert"] .ebr-controls { display: flex; }
.eb[data-level="expert"] .ebr-exp { display: block; }

.ebr-scenes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ebr-scenes button, .ebr-group button { min-height: 40px; padding: 0 14px; border: 1px solid var(--ns-border-strong); border-radius: 20px; background: transparent; color: var(--ns-text); cursor: pointer; white-space: nowrap; font: inherit; }
.ebr-scenes button[aria-checked="true"], .ebr-group button[aria-checked="true"] { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-on-accent); font-weight: 500; }

.ebr-stage { display: grid; gap: 12px; }
.ebr-src { margin: 0; }
.ebr-src canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ns-bg-deep); border-radius: var(--ns-radius); cursor: crosshair; touch-action: none; }
.ebr-shapes { display: grid; grid-template-columns: 1fr 1.25fr; grid-template-areas: "phone square" "wide wide"; gap: 10px; align-items: end; }
.ebr-shape--phone { grid-area: phone; }
.ebr-shape--square { grid-area: square; }
.ebr-shape--wide { grid-area: wide; }
@media (min-width: 600px) { .ebr-shapes { grid-template-columns: 0.75fr 1fr 1.6fr; grid-template-areas: "phone square wide"; } }
.ebr-shape { margin: 0; min-width: 0; }
.ebr-frame { background: var(--ns-bg-deep); border-radius: 8px; overflow: hidden; border: 1px solid var(--ns-border); }
.ebr-shape--phone .ebr-frame { aspect-ratio: 9 / 16; }
.ebr-shape--square .ebr-frame { aspect-ratio: 1 / 1; }
.ebr-shape--wide .ebr-frame { aspect-ratio: 16 / 9; }
.ebr-frame canvas { display: block; width: 100%; height: 100%; }
.ebr-shape figcaption { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--ns-text-2); overflow-wrap: anywhere; }
.ebr-shape figcaption strong { color: var(--ns-text); }
.ebr-shape[data-editing="true"] .ebr-frame { border-color: var(--ns-gold); box-shadow: 0 0 0 2px var(--ns-gold-glow); }

.ebr-scrub { display: grid; gap: 4px; font-size: 13px; color: var(--ns-text-2); }
.ebr-scrub input, .ebr-zoom input { accent-color: var(--ns-gold); width: 100%; min-height: 32px; }
.ebr-controls { flex-wrap: wrap; gap: 10px; align-items: center; }
.ebr-group { display: flex; flex-wrap: wrap; gap: 6px; }
.ebr-zoom { display: flex; align-items: center; gap: 8px; min-width: 200px; flex: 1 1 200px; font-size: 14px; }
.ebr-check { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; }
.ebr-check input { width: 20px; height: 20px; accent-color: var(--ns-gold); }

.ebr-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ebr-tools label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.ebr-tools select, .ebr-keys input { min-height: 36px; border: 1px solid var(--ns-border-strong); border-radius: 8px; background: var(--ns-card); color: var(--ns-text); font: inherit; padding: 0 6px; }
.ebr-keys input { width: 72px; }
.ebr-keys tr[aria-selected="true"] td { background: var(--ns-gold-glow); }
.ebr-keys button { min-height: 32px; min-width: 32px; border: 1px solid var(--ns-border-strong); border-radius: 16px; background: transparent; color: var(--ns-text); cursor: pointer; }
.ebr-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ebr-export { display: grid; gap: 8px; }
.ebr-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ebr-results li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.ebr-results a { color: var(--ns-gold-light); }

@media (min-width: 900px) {
    .ebr-stage { grid-template-columns: 1.2fr 1fr; align-items: start; }
    .eb[data-level="beginner"] .ebr-stage { grid-template-columns: 1fr; }
    .eb[data-level="beginner"] .ebr-shapes { max-width: 720px; }
}