/* Canvas-only helpers for the Phase 3 states board.
   NOT part of the shipping stylesheet.
   `.is-narrow` re-applies the ≤1023px rules inside a fixed-width frame, because
   the real breakpoints are viewport-based and a canvas frame isn't a viewport. */

.frame{position:absolute;font-family:var(--font-body)}
.frame-label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6B7280;margin-bottom:8px}
.frame-label b{color:#111827;font-weight:700}
.frame-body{background:var(--color-surface-page);border:1px solid rgba(17,24,39,.14);border-radius:14px;overflow:hidden}
.frame-note{font-size:12px;line-height:1.5;color:#4B5563;margin-top:8px;max-width:60ch}
.frame-note b{color:#111827}
.device{border-radius:26px}
.device .reps{padding:12px 12px 24px}
/* sticky positions against the page scroller, which a canvas frame isn't */
.frame .reps-coach{position:static}

/* The real breakpoints are viewport-based, but a canvas frame is not a viewport:
   a 1200px desktop frame viewed in a 900px window would otherwise collapse to the
   mobile layout. Re-assert the desktop rules for every frame that isn't .is-narrow. */
.frame .reps.is-wide .reps-stage{grid-template-columns:minmax(0,1fr) 380px}
.frame .reps.is-wide .reps-flow{grid-template-columns:1fr auto 1fr auto 1fr}
.frame .reps.is-wide .reps-arrow{transform:none;justify-content:flex-start}
.frame .reps.is-wide .reps-journey{flex-wrap:wrap;overflow:visible}
.frame .reps.is-wide .reps-j-sep{display:block}
.frame .reps.is-wide .reps-boxes{display:flex}
.frame .reps.is-wide .reps-summary-grid{grid-template-columns:repeat(4,1fr)}
.frame .reps.is-wide .reps-title{font-size:var(--fs-h1)}
.frame .reps.is-wide .reps-grade{position:static}
/* desktop frames keep the wide sound nudge even when the reviewer's window is narrow */
.frame .reps.is-wide .reps-journey .reps-sound-nudge{display:inline-flex}
.frame .reps.is-wide .reps-journey.has-nudge .reps-iconbtn-sound{display:none}

.reps.is-narrow .reps-stage{grid-template-columns:1fr}
.reps.is-narrow .reps-coach{position:static;order:2}
.reps.is-narrow .reps-journey{gap:var(--space-3);padding:var(--space-2) var(--space-3);flex-wrap:nowrap;overflow:visible}
.reps.is-narrow .reps-j-sep,.reps.is-narrow .reps-boxes{display:none}
.reps.is-narrow .reps-xp{min-width:74px}
.reps.is-narrow .reps-title{font-size:var(--fs-h1-mobile)}
.reps.is-narrow .reps-flow{grid-template-columns:1fr}
.reps.is-narrow .reps-arrow{justify-content:center;transform:rotate(90deg)}
.reps.is-narrow .reps-summary-grid{grid-template-columns:repeat(2,1fr)}
.reps.is-narrow .reps-card{padding:var(--space-4)}
.reps.is-narrow .reps-mast{margin-bottom:var(--space-3)}
.reps.is-narrow .reps-sub{display:none}

/* mobile Coach affordance: a pill that expands under the answer (§7.2) */
.reps-coach-pill{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:44px;margin-top:var(--space-3);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-primary);cursor:pointer}
.reps-coach-pill svg{width:15px;height:15px}
.reps-sticky-grade{position:sticky;bottom:0;background:linear-gradient(to top,var(--color-surface-card) 72%,transparent);padding-top:var(--space-3);margin-top:var(--space-2)}

/* onboarding */
.reps-ob{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:var(--space-5) 0;text-align:left}
.reps-ob-card{background:var(--color-surface-raised);border-radius:var(--radius-lg);padding:var(--space-4)}
.reps-ob-n{width:22px;height:22px;border-radius:50%;background:var(--color-primary-subtle);color:var(--color-primary);font-family:var(--font-sans);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2)}
.reps-ob-card strong{display:block;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--color-text-heading);margin-bottom:3px}
.reps-ob-card span{font-size:var(--fs-body-sm);line-height:1.5;color:var(--color-text-muted)}
.reps-ob-prefs{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.reps-ob.is-stack{grid-template-columns:1fr;gap:var(--space-2);margin:var(--space-4) 0}
.reps-ob.is-stack .reps-ob-card{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3)}
.reps-ob.is-stack .reps-ob-n{margin:0;flex:0 0 auto}

/* signed-in journey chip */
.reps-acct{display:flex;align-items:center;gap:7px;font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.reps-acct-av{width:26px;height:26px;border-radius:50%;background:var(--color-primary-subtle);color:var(--color-primary);font-family:var(--font-sans);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.reps-synced{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-badge);font-weight:600;color:var(--color-success-text);background:var(--color-success-surface);border-radius:var(--radius-full);padding:3px 9px;white-space:nowrap}
.reps-synced svg{width:11px;height:11px}
.reps-local{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-badge);color:var(--color-text-muted);white-space:nowrap}
.reps-local a{color:var(--color-primary);font-weight:600;text-decoration:none}

/* empty / error */
.reps-empty{text-align:center;padding:var(--space-10) var(--space-6)}
.reps-empty-ic{width:46px;height:46px;border-radius:50%;background:var(--color-warning-surface);color:var(--color-warning-text);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3)}
.reps-empty-ic svg{width:22px;height:22px}
.reps-thin{display:flex;width:fit-content;margin:0 auto var(--space-3);align-items:center;gap:6px;font-size:var(--fs-badge);font-weight:600;color:var(--color-warning-text);background:var(--color-warning-surface);border-radius:var(--radius-full);padding:3px 10px;white-space:nowrap}