/* CANDR's site (WP5.5), over site.css (the published pages' own styles, the colours). */
.app-header { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: .5rem; }
.app-header .sep { color: var(--muted); }
.app-header .search-link { margin-left: auto; }
main.app { min-height: 60vh; }
.loading, .error { color: var(--muted); }
.error { color: var(--accent); }
form.search { margin: 1rem 0; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
form.search input { font: inherit; padding: .3rem .5rem; min-width: min(24rem, 100%); color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; }
ul.pages-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .25rem; }
ul.pages-grid a { display: block; text-align: center; padding: .2rem; border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; }
ul.columns { columns: 18rem; }
.hint { margin-top: 0; }

/* The page view: the facsimile, the score on the right (PLAN.md §8). */
.page-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.page-view .pane { height: min(85vh, 60rem); border: 1px solid var(--rule); border-radius: 4px; overflow: auto; background: var(--bg); }
candr-facsimile { display: block; position: relative; overflow: hidden; }
candr-score { display: block; padding: .5rem; color: var(--fg); }
candr-score svg { max-width: 100%; height: auto; }
candr-score .selected, candr-score .selected * { fill: var(--accent) !important; stroke: var(--accent); }

/* A system's or a staff's view: the facsimile fitted to its zone, the score underneath. */
.zone-view { display: flex; flex-direction: column; gap: .5rem; }
.zone-view .facsimile.wide { height: min(40vh, 22rem); border: 1px solid var(--rule); border-radius: 4px; }
.zone-view .score.wide { border: 1px solid var(--rule); border-radius: 4px; overflow-x: auto; }

@media (max-width: 48rem) {
  .page-view { grid-template-columns: 1fr; }
  .page-view .pane { height: 70vh; }
}