/* The score: five registers as five colour fields. */
.score-head .lede { max-width: 38rem; }
.score-stage { position: relative; padding-bottom: 2rem; }
.score-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: min(66vh, 40rem); min-height: 26rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* Side by side, the five names, instruments and notes share rows, so they line up across the
   fields whatever each one's length; the space above is where the line is written. */
@media (min-width: 901px) {
  .score-fields { grid-template-rows: minmax(0, 1fr) auto auto auto; row-gap: .3rem; }
  .field { grid-row: 1 / -1; }
  @supports (grid-template-rows: subgrid) {
    .field { grid-template-rows: subgrid; align-content: stretch; }
    .field-name { grid-row: 2; align-self: end; }
    .field-inst { grid-row: 3; }
    .field-note { grid-row: 4; }
  }
}
@media (max-width: 900px) { .score-fields { grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(7.5rem, 1fr)); height: auto; } }

.field {
  --f-bg: #333; --f-fg: #fff; --f-ink: #fff;
  /* A register at rest is dimmed, never its lettering: the filters apply to the colour layer only. */
  --rest: saturate(.35) brightness(.62); --near: saturate(.7) brightness(.84);
  position: relative; display: grid; align-content: end; gap: .3rem; padding: 1.2rem 1.1rem 1.3rem; text-align: left; overflow: hidden; isolation: isolate;
  border: 0; border-right: 1px solid rgba(0,0,0,.25); border-radius: 0; cursor: pointer; color: var(--f-fg);
  background: transparent;
}
.field:last-child { border-right: 0; }
.field::after { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--f-bg); filter: var(--rest); transition: filter 1.2s var(--ease-ink); }
.field:hover::after, .field:focus-visible::after { filter: var(--near); }
.field[aria-pressed="true"]::after { filter: none; }
.field::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5; transition: opacity 1s;
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(0,0,0,.18) 9px 10px); }
.field[aria-pressed="true"]::before { opacity: 0; }
/* The focus ring is drawn in the field's own lettering colour, so it shows on gold and on cloud. */
.field:focus-visible { outline: 3px solid var(--f-fg); outline-offset: -7px; border-radius: 0; }
.field-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.field-key { position: absolute; top: 1rem; left: 1.1rem; color: var(--f-fg); }
.field-name { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem); line-height: 1; text-wrap: balance; }
.field-inst { font-size: 1rem; line-height: 1.3; text-wrap: balance; }
.field-note { font-size: .88rem; line-height: 1.4; max-width: 17rem; text-wrap: pretty; }
.field[aria-pressed="false"] .field-note { opacity: 0; transition: opacity .6s; }
.field[aria-pressed="true"] .field-note { opacity: 1; transition: opacity 1.2s .3s; }
/* In rows, the lettering keeps to the left and the line is written to its right (score.js). */
@media (max-width: 900px) { .field { border-right: 0; border-bottom: 1px solid rgba(0,0,0,.25); padding-top: 1.1rem; } .field-key { left: auto; right: 1.1rem; } .field[aria-pressed="false"] .field-note { display: none; } .field-name, .field-inst, .field-note { max-width: 56%; } }

/* Gold at rest is dimmed a little less than the others: its dark lettering keeps 5:1 on it. */
.field[data-layer="gold"] { --f-bg: #d4a020; --f-fg: #1a1409; --rest: saturate(.45) brightness(.84); --near: saturate(.75) brightness(.92); }
.field[data-layer="red"] { --f-bg: #c82000; --f-fg: #fff2dc; }
.field[data-layer="ink"] { --f-bg: #1a1810; --f-fg: #ece5d3; }
.field[data-layer="cloud"] { --f-bg: #f0eee8; --f-fg: #1a1810; --rest: saturate(.45) brightness(.8); --near: saturate(.75) brightness(.92); }
.field[data-layer="jade"] { --f-bg: #0a3828; --f-fg: #dff2ec; }

.score-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; }
.score-status { margin: 0; text-wrap: balance; }
.score-balance { width: 100%; max-width: 76rem; margin: 1.6rem auto 0; padding: 0 var(--gutter); font-size: var(--step-2); line-height: 1.25; font-weight: 350; text-wrap: balance; animation: fade 1.6s var(--ease-ink); }
.score-balance .label { display: block; margin-top: .6rem; font-size: var(--step--1); }
.score-notes .section-title { margin-top: .8rem; max-width: 14ch; }
.score-notes .prose p:last-child a { display: inline-flex; align-items: center; min-height: 2.75rem; }