/* ---- Quiz Box Theme ---- */
/* Scoped to exercise box only */
/*
  LAYOUT SYSTEM — Every exercise box follows this pattern:
  ┌───────────────────────────┐
  │ Score          (fixed)    │  flex-shrink: 0
  │ Title          (fixed)    │  flex-shrink: 0
  │                           │
  │  ╔═══ HERO ZONE ═══╗     │  flex: 1 → centers hero vertically
  │  ║  play btn / canvas ║   │
  │  ║  / TS / question   ║   │
  │  ╚═══════════════════╝    │
  │                           │
  │  ╔═══ ANSWER ZONE ══╗    │  flex: 1 → centers answers vertically
  │  ║  pills / grid     ║   │
  │  ╚═══════════════════╝    │
  │                           │
  │ [ Skip  |  Next ]        │  margin-top: auto → ALWAYS bottom
  └───────────────────────────┘
*/

/* ---- More space between toolbar and box ---- */
body.quiz-theme .ph-controls-row {
  margin-bottom: 1.5rem;
}

/* ---- Box: flex column container ---- */
body.quiz-theme .et-exercise-box {
  position: relative;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  height: 460px;
  max-height: 460px;
  min-height: 0;
  gap: 0;
}

/* ============================================================
   ZONE 1: FIXED TOP — Score + Title
   ============================================================ */

body.quiz-theme .et-score {
  margin: 0; padding: 24px 0 0; flex-shrink: 0;
}

/* Unified title style
   NOTE: #ph-staff-practice scoped rules in notation-training.css
   have specificity (1,1,0) which beats (0,2,1). We add ID-scoped
   overrides below to ensure zero bottom margin in quiz layout. */
body.quiz-theme .et-exercise-title,
body.quiz-theme .et-prompt,
body.quiz-theme .fn-prompt-big {
  flex-shrink: 0;
  margin: 8px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  min-height: auto;
}

/* Override ID-scoped rules from notation-training.css (#ph-staff-practice) */
body.quiz-theme #ph-staff-practice .et-prompt {
  margin: 8px 0 0;
}
body.quiz-theme #ph-staff-practice .et-bottom-actions {
  margin: auto -24px 0;
}

/* HF context subtitle */
body.quiz-theme .fn-prompt-context {
  margin: 4px 0 0;
  min-height: auto;
  flex-shrink: 0;
  font-size: 0.78rem;
  color: #888;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   ZONE 2: HERO — flex:1 container, centers content vertically
   ============================================================ */

/* --- ET: play button is the hero — gets more space to appear centered --- */
body.quiz-theme .et-play-wrap {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  min-height: 0;
}

/* --- SR identification: play above canvas, canvas centered --- */
body.quiz-theme .sp-play-wrap {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 4px 0;
  width: 100%;
}
body.quiz-theme #sp-display {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  min-height: 0;
}

/* --- SR construction: canvas+clear — auto-sized to content --- */
body.quiz-theme #sp-construct-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  min-height: 0;
}

/* Canvas styling — scale down the 480×200 canvases */
body.quiz-theme .sp-canvas-wrap { margin: 0; }
body.quiz-theme #sp-canvas,
body.quiz-theme #sp-construct-canvas {
  max-width: 360px;
}

/* ============================================================
   ZONE 3: ANSWERS — flex:1 container, centers content vertically
   ============================================================ */

/* --- ET panels (note/interval/chord/mode/scale) --- */
body.quiz-theme .et-panel {
  gap: 16px;
  align-items: center !important;
}
body.quiz-theme .et-panel.active {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding-bottom: 24px;
  width: 100%;
}

/* --- SR identification: answer grid — flex wrapper like ET panel --- */
body.quiz-theme #sp-answer-grid {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-end;
  justify-content: center;
  gap: 6px;
  max-width: 340px;
  margin: 0;
  padding-bottom: 24px;
}
body.quiz-theme #sp-answer-grid .et-answer-btn {
  flex: 1 1 calc(50% - 3px);
  box-sizing: border-box;
}

/* --- SR construction: controls — identical to ET panel layout --- */
body.quiz-theme #sp-construct-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 6px;
  margin: 0;
  padding-bottom: 24px;
}

/* Reset margins on content inside zones */
body.quiz-theme .et-answer-grid { margin: 0; }
body.quiz-theme .et-feedback { margin: 12px 0 0; flex-shrink: 0; }
body.quiz-theme .sp-construct-btns { margin: 0; }

/* ============================================================
   RHYTHM PANEL — TS + grid centered together, like other panels
   ============================================================ */
body.quiz-theme #et-rhythm.active {
  flex: 1;            /* Override flex-shrink:0 — hero+answer combined */
  gap: 0;
  padding-bottom: 0;  /* Grid handles its own padding */
}
/* Click/Drums toggle — fixed below title with spacing */
body.quiz-theme #et-rhythm > div:first-child {
  flex-shrink: 0;
  margin: 16px 0 0 !important; /* !important overrides inline margin-bottom */
}
body.quiz-theme #et-rhythm .cof-pill-group {
  flex-shrink: 0;
  margin-bottom: 0;
}
/* Time signature: flex:1 to center vertically (like play button) */
body.quiz-theme .et-rhythm-ts {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
}
/* Rhythm answer grid: fixed at bottom with same padding as other panels */
body.quiz-theme .et-rhythm-grid {
  flex-shrink: 0 !important;
  align-content: center !important;
  align-items: center !important;
  max-width: 340px !important;
  padding-bottom: 24px;
}

/* ============================================================
   HF PANEL — override: question is hero, options below
   ============================================================ */
body.quiz-theme #et-functions.active {
  justify-content: stretch;
}
body.quiz-theme .fn-score {
  margin: 0; padding: 24px 0 0; flex-shrink: 0;
}
/* fn-prompt-big = hero zone (centered), fn-prompt-context = fixed below */
body.quiz-theme .fn-prompt-big {
  flex: 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0;
  min-height: 0;
}
body.quiz-theme .fn-prompt-context {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 0 0 4px;
  min-height: auto;
}
/* fn-options = answer zone */
body.quiz-theme .fn-options {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-end;
  margin: 0;
  padding-bottom: 24px;
  gap: 6px;
}
body.quiz-theme .fn-feedback { margin: 12px 0 0; flex-shrink: 0; }

/* ============================================================
   ZONE 4: SKIP/NEXT — ALWAYS pinned to bottom
   ============================================================ */
body.quiz-theme .et-bottom-actions,
body.quiz-theme .fn-actions {
  display: flex;
  gap: 0;
  margin: auto -24px 0; /* margin-top: auto = ALWAYS bottom */
  width: calc(100% + 48px);
  flex-shrink: 0;
}
body.quiz-theme .et-bottom-actions .et-action-btn:first-child,
body.quiz-theme .fn-actions .et-action-btn:first-child {
  border-right: 1.5px solid #2a2d3a;
  border-radius: 0 0 0 10px;
}
body.quiz-theme .et-bottom-actions .et-action-btn:last-child,
body.quiz-theme .fn-actions .et-action-btn:last-child {
  border-radius: 0 0 10px 0;
}

body.quiz-theme #sp-bottom-actions {
  margin: auto -24px 0;
  width: calc(100% + 48px);
  max-width: none;
  flex-shrink: 0;
}
body.quiz-theme #sp-bottom-actions .et-action-btn:first-child {
  border-right: 1.5px solid #2a2d3a;
  border-radius: 0 0 0 10px;
}
body.quiz-theme #sp-bottom-actions .et-action-btn + .et-action-btn:not(:last-child) {
  border-right: 1.5px solid #2a2d3a;
}
body.quiz-theme #sp-bottom-actions .et-action-btn:last-child {
  border-radius: 0 0 10px 0;
}
/* Dividers between visible buttons — use only border-right on first child to avoid double line */

/* ============================================================
   SHARED BUTTON STYLES
   ============================================================ */
body.quiz-theme .et-action-btn {
  flex: 1;
  justify-content: center;
  border-radius: 0;
  border: none;
  border-top: 1.5px solid #2a2d3a;
  padding: 14px 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #1a1d27;
}

body.quiz-theme .et-answer-btn {
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.2;
}
body.quiz-theme .et-answer-btn:hover {
  border-color: #3a5a8a;
  background: #1a2030;
}

/* Rhythm pill options — same size as .et-answer-btn */
body.quiz-theme .et-rhythm-option {
  border-radius: 10px !important;
  padding: 10px 20px !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  height: auto !important;
  align-self: center !important;
}
body.quiz-theme .et-rhythm-play {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
body.quiz-theme .et-rhythm-play svg {
  width: 8px;
  height: 8px;
}
body.quiz-theme .et-rhythm-label {
  font-size: 0.82rem;
  line-height: 1.2;
}

/* Functions panel pills */
body.quiz-theme .fn-opt-btn {
  border-radius: 10px;
  padding: 10px 20px;
}

/* Construction pills */
body.quiz-theme .sp-construct-btn {
  border-radius: 10px;
  padding: 10px 20px;
}