/* Seventh Inversions' charts, its top row and its switches, their one copy, linked after /site.css by
   /seventh-inversions/ (its own <style> holds only its layout, Static and Animated). Markup:
     <div class="wrap inv-page">
       <div class="inv-top"><a class="inv-back" href="…"><img src="/icon-180.png" … alt="" /><span>&larr;</span> Back to …</a>
         <h1 class="sr">…</h1></div>
       <div class="seg" role="group"><button data-set="…" data-val="…" aria-pressed="true">…</button>…</div>
       <span class="chip c0">R</span>
       <figure class="kb" style="--surf: …"><figcaption><span class="root">C</span><span class="q">maj7</span>
         <span class="bass">/E</span></figcaption><svg>…charts.js's keyboard()…</svg></figure>
   Each chord tone keeps one colour, the one place that colours keys by tone and not by letter (Joe, 2026-10-16;
   Night Sky Theme.md § The keys' colours): R pink, 3 gold, 5 green, 7 sky, every label black. The keys are a plain
   chart (Joe: "more traditional-looking but also simple"), Static and Animated alike (Joe, 2026-10-17: "the same
   style as the animated"): not inverted, the key map's unlit white and black, a dark line between the white keys,
   a black key's lip strike and a lit one's its colour darker (Chart Style.md). Each key's chart sits in a box of its own faint colour, its root's key-map colour (--surf, set by the
   script; Joe, 2026-10-17: "slightly different colored background boxes around each key"). */
/* The pressed keys darker than the neons (Joe, 2026-10-17: "make them darker"), each at 72 % over black, its label
   whichever of black or white reads better on it: white on the pink and the sky, black on the gold and the green. */
.inv-page { --t0: color-mix(in srgb, var(--pink) 72%, #000000); --t1: color-mix(in srgb, var(--gold) 72%, #000000);
  --t2: color-mix(in srgb, var(--green) 72%, #000000); --t3: color-mix(in srgb, var(--sky) 72%, #000000);
  --i0: #ffffff; --i1: #000000; --i2: #000000; --i3: #ffffff; --on-key: #000000;
  --key-w: #f4f4f0; --key-b: #12131a; --key-lip: #3a4160; --key-line: rgba(0,0,0,.3); max-width: none; padding-top: 0; }

/* No nav bar (Joe, 2026-10-16): the crane and the step back, centred on top. */
.inv-top { display: flex; justify-content: center; padding: 10px 0 4px; }
.inv-back { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--sans); color: var(--muted);
  text-decoration: none; white-space: nowrap; }
.inv-back img { width: 26px; height: 26px; mix-blend-mode: screen; }
@media (hover: hover) { .inv-back:hover { color: var(--white); } }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The switches: each a combined pill. */
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--hairline); border-radius: 999px; }
.seg button { font: 600 12.5px/1 var(--sans); padding: 7px 11px; border: 0; border-radius: 999px;
  background: none; color: var(--soft); cursor: pointer; white-space: nowrap; }
@media (hover: hover) { .seg button:hover { color: var(--white); } }
.seg button[aria-pressed="true"] { background: var(--text); color: #000000; }
/* To a finger each switch is a little taller. */
@media (pointer: coarse) { .seg button { padding-block: 10px; } }
.inv-page button:focus-visible { outline: var(--focus); outline-offset: -2px; }
.count { min-width: 3.6em; text-align: center; font: 600 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.chip { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 5px;
  font: 700 12px/1 var(--sans); color: var(--on-key); }
.c0 { background: var(--t0); color: var(--i0); } .c1 { background: var(--t1); color: var(--i1); }
.c2 { background: var(--t2); color: var(--i2); } .c3 { background: var(--t3); color: var(--i3); }

/* Each key's chart in its faintly coloured box, no border. */
.kb { margin: 0; display: grid; gap: 6px; padding: 12px 14px 14px; border-radius: 8px; background: var(--surf, rgba(255,255,255,.06)); }
.kb figcaption { display: flex; align-items: baseline; line-height: 1.15; }
.kb .root { font: 700 20px var(--sans); color: var(--white); }
.kb .q { font: 500 15px var(--sans); color: var(--soft); margin-left: 1px; }
.kb .bass { font: 500 15px var(--sans); color: var(--muted); margin-left: 2px; }
.kb svg { display: block; width: 100%; height: auto; }

/* The keys. */
.w { fill: var(--key-w); }
.line { fill: var(--key-line); }
.b { fill: var(--key-b); }
.lip { fill: var(--key-lip); }
.w.t0, .b.t0 { fill: var(--t0); } .w.t1, .b.t1 { fill: var(--t1); } .w.t2, .b.t2 { fill: var(--t2); } .w.t3, .b.t3 { fill: var(--t3); }
.lip.t0 { fill: color-mix(in srgb, var(--t0) 62%, #000000); } .lip.t1 { fill: color-mix(in srgb, var(--t1) 62%, #000000); }
.lip.t2 { fill: color-mix(in srgb, var(--t2) 62%, #000000); } .lip.t3 { fill: color-mix(in srgb, var(--t3) 62%, #000000); }
.lbl { font-family: var(--sans); font-weight: 600; text-anchor: middle; fill: var(--on-key); }
.lbl.on-w { font-size: 9.5px; }
.lbl.on-b { font-size: 7.5px; }
.lbl.job { font-weight: 800; }
.lbl.i0 { fill: var(--i0); } .lbl.i1 { fill: var(--i1); } .lbl.i2 { fill: var(--i2); } .lbl.i3 { fill: var(--i3); }