/* Scorecards: the Scorecard tab in the piece drawer and the format by month grid. Ink and paper carry it;
   the status chips use the shared ok, warn and alert colours, so marker red only ever marks a miss. */

/* ---- the drawer tab ---- */
.sc-before, .sc-after { gap: 12px; }
.sc-after { border-top: 1px solid var(--border); padding-top: 14px; }
.sc-head { display: flex; align-items: center; gap: 16px; }
.sc-score { display: flex; align-items: baseline; gap: 5px; font: 600 34px/1 var(--font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sc-score span { font: 500 11px/1 var(--font-mono); letter-spacing: 0; color: var(--text-3); }
.sc-meta { gap: 5px; min-width: 0; }
.sc-crits { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.sc-crit { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.sc-crit:last-child { border-bottom: 0; }
.sc-crit .chip { justify-self: start; }
.sc-crit .col { gap: 2px; }
.sc-bench, .sc-history { gap: 6px; }
.sc-open { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.sc-open:last-child { border-bottom: 0; }
.sc-open .col { flex: 1; gap: 2px; min-width: 0; }
.sc-hist { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; justify-content: stretch; text-align: left; white-space: normal; line-height: 1.35;
  background: transparent; border-color: transparent; }
.sc-hist:hover { background: var(--hover); }
.sc-hist.on { background: var(--panel); border-color: var(--border-strong); }
.sc-post { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.sc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.sc-stat { gap: 3px; padding: 9px 10px; background: var(--sunken); border-radius: var(--radius); }
.sc-stat .v { font-size: 18px; }
.sc-groups, .sc-group { display: flex; flex-direction: column; }
.sc-groups { gap: 10px; }
.sc-group { gap: 3px; }

/* ---- /scorecards ---- */
.sc-scroll { overflow-x: auto; }
.sc-grid td { vertical-align: top; }
.sc-cell { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; width: 100%; min-width: 156px; text-align: left; white-space: normal;
  line-height: 1.35; background: transparent; border-color: transparent; }
.sc-cell:hover { background: var(--paper-warm); }
.sc-cell.on { background: var(--panel); border-color: var(--accent); }
.sc td.num, .sc th.num { text-align: right; }
.sc-note { padding: 10px 14px; border-top: 1px solid var(--border); }
.sc .pagehd .titles { flex-basis: 300px; }   /* the month picker wraps under the title on a phone */