/* Scores and the Chief Director: only the approved tokens, type, furniture and 44px tap targets. */
.score-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--text); }
.score-art { width: 72px; height: 72px; border-radius: 12px; display: grid; place-items: center; color: #fff; font: 700 28px var(--mono); background-image: radial-gradient(rgba(255,255,255,0.22) 0.7px, transparent 0.9px); background-size: 4px 4px; }
.score-hero .val { font-size: 44px; }
.score-hero .st { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.score-strip { grid-column: 1 / -1; width: 100%; margin-top: 8px; }
.score-list { padding: 0 14px; }
.score-episode { min-height: 56px; }
.score-episode .side small { display: block; margin-top: 3px; }
.score-grid { align-items: stretch; }
.score-tile { min-height: 132px; width: 100%; color: var(--text); text-align: left; }
.score-tile .bar-h { margin-top: 10px; }
.score-mini { margin-top: 8px; }
.score-old { margin-top: 14px; }
.score-panel { position: absolute; inset: 0; z-index: 30; display: none; overflow: hidden; color: var(--text); background: var(--card-d); contain: strict; transform: translateZ(0); will-change: clip-path; }
.score-panel.on { display: block; }
.score-panel .inner { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: calc(var(--st) + 72px) var(--sr) calc(var(--sb) + 30px) var(--sl); opacity: 0; transition: opacity 0.12s; }
.score-panel.ready .inner { opacity: 1; }
.score-close { position: absolute; z-index: 2; top: calc(var(--st) + 14px); right: var(--sr); width: 44px; height: 44px; }
.score-reason { margin-bottom: 8px; }
.score-evidence { font-style: italic; }
.score-meaning { margin-top: 12px; }
.score-notes { margin-top: 20px; }
.score-note-input { display: block; min-height: 88px; margin: 10px 0; }
.score-save { min-height: 46px; }
.existing-note { margin: 8px 0 12px; }
.note-status { margin-top: 8px; }
.chief-findings { padding: 0 14px; }
#room .chips .pill { min-height: 44px; }
#room .rhead .disc { width: 44px; height: 44px; flex: 0 0 44px; }
#room .pill.sm, .score-panel .pill.sm { min-height: 36px; }
@media (max-width: 360px) {
  .score-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .score-panel .inner { transition: none; }
}