/* Shared styling for the three assessment apps. Light, integrated with the site
   theme (cosmo) — no more dark isolated panel. Scoped under #app-root. App-specific
   bits (tuner meter, level bar, timeline, beat dot) live in each app's app.css. */

#app-root { max-width: 1200px; margin: 1rem auto 2rem; padding: 0; color: inherit; }
#app-root > p { max-width: 70ch; }

/* cards: subtle, site-native */
#app-root .card {
  background: #fff; border: 1px solid #dee2e6; border-radius: .5rem;
  padding: 1rem 1.15rem; margin: 0 0 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
#app-root label { display:block; font-size:.8rem; color:#6c757d; margin-bottom:.3rem; font-weight:500; }
#app-root select, #app-root button, #app-root a.btn, #app-root input[type=range] {
  font-size:.95rem; padding:.45rem .75rem; border-radius:.375rem;
  border:1px solid #ced4da; background:#fff; color:#212529; text-decoration:none; display:inline-block;
}
#app-root input[type=range]{ padding:0; vertical-align:middle; }
#app-root button { cursor:pointer; }
#app-root button.primary { background:#2780e3; border-color:#2780e3; color:#fff; font-weight:600; }
#app-root button:disabled { opacity:.5; cursor:not-allowed; }
#app-root .muted { color:#6c757d; font-size:.85rem; }
#app-root .row { display:flex; gap:.75rem; align-items:end; flex-wrap:wrap; }
#app-root .bar { height:6px; background:#e9ecef; border-radius:3px; overflow:hidden; margin-top:.4rem; }
#app-root .bar > div { height:100%; width:0%; background:#2780e3; transition:width .05s linear; }
#app-root table { width:100%; border-collapse:collapse; margin-top:.5rem; font-variant-numeric:tabular-nums; }
#app-root th, #app-root td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid #e9ecef; font-size:.92rem; }
#app-root th { color:#6c757d; font-weight:600; font-size:.78rem; }
#app-root .pass { color:#198754; font-weight:700; }
#app-root .fail { color:#dc3545; font-weight:700; }
#app-root .overall { font-size:1.3rem; font-weight:700; margin-top:.6rem; }
#app-root .cb { display:flex; align-items:center; gap:.35rem; font-size:.9rem; color:#212529; }
#app-root kbd { background:#f1f3f5; border:1px solid #ced4da; border-bottom-width:2px;
  border-radius:5px; padding:0 .35rem; font-family:inherit; font-size:.9em; color:#212529; }

/* abcjs notation panels (always light, black notes). Force the SVG to fill the
   pane's full width so the notation uses all available horizontal space. */
#app-root #notation svg, #app-root #responseNotation svg, #app-root #performedNotation svg {
  width: 100% !important; height: auto !important; display: block;
}
#app-root #notation, #app-root #responseNotation, #app-root #performedNotation {
  background:#fff; border:1px solid #e9ecef; border-radius:.375rem; padding:.4rem .5rem; color:#000; min-height:64px;
}
#app-root #notation svg path, #app-root #notation svg text, #app-root #notation svg rect { fill:#000; }
#app-root #notation svg, #app-root #responseNotation svg, #app-root #performedNotation svg { cursor:default; }

/* flow status banner */
#app-root .flow { padding:.6rem .9rem; border-radius:.5rem; margin:.4rem 0 1rem; font-weight:600;
  border:1px solid #dee2e6; background:#f8f9fa; color:#212529; }
#app-root .flow.passed { color:#0f5132; border-color:#a3cfbb; background:#d1e7dd; }
#app-root .flow.failed { color:#664d03; border-color:#ffe69c; background:#fff3cd; }
#app-root .flow.recording { color:#084298; border-color:#9ec5fe; background:#e7f1ff; }
#app-root .flow.nomic { color:#6c757d; }

#app-root .hidden { visibility:hidden !important; }

/* collapsible options */
#app-root details#options > summary { cursor:pointer; font-weight:600; color:#6c757d; list-style:none; }
#app-root details#options > summary::before { content:"▸ "; }
#app-root details#options[open] > summary::before { content:"▾ "; }
#app-root details#options > summary::-webkit-details-marker { display:none; }

/* ===== layout ===== */
/* full-width notation row: original (left) + response (right); stacks when narrow */
#app-root .score-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:0 0 1rem; }
#app-root .score-pane { min-width:0; }
#app-root .score-pane > h2 { font-size:.78rem; color:#6c757d; font-weight:600; margin:0 0 .35rem;
  text-transform:uppercase; letter-spacing:.04em; }
#app-root .score-row.single { grid-template-columns:1fr; }
/* Equal-height notation boxes: the grid stretches the panes to the same height,
   and the notation box fills its pane — so the Pattern (original) box matches the
   response/performed box height. */
#app-root .score-pane { display: flex; flex-direction: column; }
#app-root .score-pane > #notation { flex: 1 1 auto; }
#app-root .score-pane > #responseCard,
#app-root .score-pane > #performedCard { flex: 1 1 auto; display: flex; flex-direction: column; }
#app-root .score-pane > #responseCard > #responseNotation,
#app-root .score-pane > #performedCard > #performedNotation { flex: 1 1 auto; }
/* The original always occupies the left half (response/performed fills the right,
   empty until the student records); a fixed two-pane grid means the original never
   resizes when the response appears. Stacks on narrow screens. */
@media (max-width: 720px){ #app-root .score-row { grid-template-columns:1fr; } }

/* two-column area for controls/results on wide screens; stacks below the breakpoint */
#app-root .cols { display:block; }
#app-root .col { min-width:0; }
@media (min-width: 900px){
  #app-root .cols { display:flex; align-items:flex-start; gap:1.25rem; }
  #app-root .col { flex:1 1 0; min-width:0; }
}