/* TuneLit long-form pages in Design F: his cards (kicker + h2 + text) in a grid, his tiles, his feature rows,
   his panel. content.mjs writes the markup (one .info grid per page, the first card being the about card);
   tunelit.css holds his base (.card, .kicker, .tiles/.tile, .features, .section-head, .faq, .related, .table-wrap).
   Also here: breadcrumbs, note tables, the home page's instrument chips, and the string tension calculator (st-*).
   Tokens only. */

/* ---------- breadcrumbs (inside the centred hero) */
.crumbs { margin: 0 0 14px; font-size: 13.5px; color: var(--faint); }
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: '›'; margin: 0 8px; color: var(--faint); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -6px; color: var(--muted); text-decoration: none; } /* 44 px to the finger, 32 in the line */
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--muted); }

/* ==========================================================================
   The card grid
   ========================================================================== */
.info {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch;
  max-width: var(--maxw); margin: clamp(56px, 9vw, 110px) auto 0;
  padding: 0 max(var(--gutter), var(--right)) 0 max(var(--gutter), var(--left));
}
@media (min-width: 900px) {
  .info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .info > .about, .info > [data-split], .info > [data-span="2"], .info > .info-band { grid-column: 1 / -1; }
}
.info > .card { --glow: rgba(255, 107, 107, 0.16); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; overflow: hidden; overflow: clip; }
/* his lab-card light, top right: coral on the tuner's cards, aqua on the tension card */
.info > .card::before {
  content: ''; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--glow), transparent 65%);
}
.info > .card > * { position: relative; }
.info > .tint-aqua { --glow: rgba(63, 211, 230, 0.18); }
.info .card h2 { font-weight: 800; font-size: clamp(26px, 3.1vw, 36px); line-height: 1.08; text-wrap: balance; }
.info > .about h2 { font-size: clamp(30px, 4vw, 44px); }
.info .card .kicker { margin-bottom: -4px; }
.kicker.aqua { color: var(--aqua); }
.info .card > .prose, .split-main > .prose { font-size: 16px; }

/* split card: copy on the left, his darker panel on the right (like the tuner card) */
.info > [data-split] { gap: 22px; }
@media (min-width: 900px) {
  .info > [data-split] { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 48px); align-items: start; }
}
@media (min-width: 900px) { .info > .side-wide[data-split] { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } } /* a table beside the text */
.split-side table.notes thead th { white-space: normal; vertical-align: bottom; }
.split-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.split-side {
  display: grid; gap: 14px; align-content: start; min-width: 0; padding: clamp(16px, 2.4vw, 26px);
  border-radius: 24px; border: 1px solid var(--line); background: rgba(4, 10, 24, 0.5);
}
@media (max-width: 599px) { .split-side { margin-inline: -8px; padding: 16px 14px; border-radius: 20px; } } /* phones: the panel takes the card's edge, the text keeps its width */
.split-side > h3 { font: 900 12px/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.split-side p { color: var(--muted); }
.split-side .table-wrap { background: transparent; }

.info-card { scroll-margin-top: 90px; }
/* the instrument's own picture (instrument-art.js), large, in the hub's side panel */
.hub-art { --art-accent: var(--coral); display: grid; place-items: center; padding: 6px 0 2px; color: var(--text); }
.hub-art svg { width: 150px; height: 150px; max-width: 60%; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45)); }

/* a long read in a full-width card: two columns on wide screens */
@media (min-width: 1000px) {
  .info > .is-reading > .prose { columns: 2; column-gap: 48px; }
  .info > .is-reading > .prose > * { break-inside: avoid; }
}

/* a full-width band without a card: his section head over tiles */
.info-band { min-width: 0; padding-top: clamp(28px, 5vw, 60px); }
.info-band .section-head { margin-bottom: 18px; }
.info-band .section-head p a { color: var(--aqua); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- text blocks inside the cards */
.info .prose > * + * { margin-top: 0.9em; }
.info .aka { font-size: 14px; color: var(--faint); }
.info .fine { font-size: 13px; color: var(--faint); }
.info .route { font-size: 14.5px; }
.info .tip, .info .note-box {
  padding: 14px 16px; border-radius: 16px; font-size: 15px; line-height: 1.55; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--aqua) 28%, transparent); background: color-mix(in srgb, var(--aqua) 7%, transparent);
}
.info .tip strong { color: var(--aqua); }
.info .note-box { border-color: color-mix(in srgb, var(--sand) 38%, transparent); background: color-mix(in srgb, var(--sand) 7%, transparent); }
.info .note-box strong { color: var(--sand); }

/* his coral ring dots */
.info .checks { list-style: none; padding: 0; display: grid; gap: 10px; }
.info .checks li { position: relative; margin: 0; padding-left: 30px; color: var(--text); font-weight: 600; }
.info .checks li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255, 107, 107, 0.16); box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 9px var(--coral);
}
/* numbered steps: the number in a coral ring */
.info .steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 12px; }
.info .steps li { position: relative; margin: 0; padding-left: 42px; min-height: 30px; counter-increment: step; }
.info .steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 107, 107, 0.13); box-shadow: inset 0 0 0 1.5px rgba(255, 107, 107, 0.6);
  font: 800 14px/1 var(--display); color: var(--coral); font-variant-numeric: tabular-nums;
}
.info .steps strong { color: var(--text); }
/* one row per string: the string in bold, then the move */
.info .moves { list-style: none; padding: 0; display: grid; font-variant-numeric: tabular-nums; }
.info .moves li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.info .moves li:last-child { border-bottom: 0; }
.info .moves strong { color: var(--text); font-weight: 800; }
.info .moves .is-same { color: var(--faint); }
.info .moves .is-same strong { color: var(--muted); }
/* his feature rows */
.info .features { padding: 0; }
.info .features li { margin: 0; }
.info .features strong { font-size: 16px; color: var(--text); }
.info .features.defs li { grid-template-columns: 4.6em minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 12px 16px; }
.info .features.defs strong { font: 800 18px/1.2 var(--display); color: var(--coral); }
@media (min-width: 700px) { .info > [data-span="2"] > .prose > .features:only-child { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* keyboard keys */
.info .keys { list-style: none; padding: 0; display: grid; gap: 12px; }
.info .keys li { margin: 0; }
.info kbd {
  display: inline-grid; place-items: center; min-width: 2.2em; height: 2em; padding: 0 0.5em; border-radius: 8px;
  border: 1px solid var(--line-2); border-bottom-width: 3px; background: rgba(255, 255, 255, 0.06); color: var(--text);
  font: 800 0.85em/1 var(--font);
}
.info pre {
  overflow-x: auto; margin: 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(4, 10, 24, 0.5);
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.info pre code { padding: 0; background: none; }
.info pre.formula { padding: 14px 18px; font: 600 17px/1.4 var(--display); letter-spacing: 0.01em; white-space: pre-wrap; }
.info pre.formula code { font: inherit; }
.info .card > .prose > pre:only-of-type { font-size: 13px; }
.info .prose a:focus-visible, .crumbs a:focus-visible, .table-wrap:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 6px; }
.table-wrap:focus-visible { border-radius: var(--r); }

/* calls to action: his coral pill (aqua on the tension card); .cta-plain is a bold text link */
.info .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.info .cta a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--coral); color: var(--on-coral); font-weight: 800; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(255, 107, 107, 0.8); transition: background 0.2s, transform 0.15s;
}
.info .cta a:hover { background: #FF8585; }
.info .cta a:active { transform: scale(0.97); }
.info .tint-aqua .cta a { background: var(--aqua); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(63, 211, 230, 0.7); }
.info .tint-aqua .cta a:hover { background: #6BE0EE; }
.info .cta span { color: var(--muted); font-size: 14.5px; }
.info .cta-plain a { min-height: 44px; padding: 0; background: none; color: var(--aqua); box-shadow: none; }
.info .cta-plain a:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }

/* measured figures: his big numbers */
.measured { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.measured li {
  display: grid; grid-template-columns: 5.6em minmax(0, 1fr); align-items: center; column-gap: 14px; margin: 0;
  padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
}
.measured b { font: 800 28px/1 var(--display); letter-spacing: -0.02em; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.measured span { font-size: 14px; line-height: 1.4; color: var(--muted); }

/* the hub's measured range: phone-mic error by note (bars), the instrument's strings (dots), one log axis.
   The labels are HTML placed over the drawing, so they stay 12 px or more when the SVG scales down on a phone */
.range-chart { margin: 0; padding: 14px 14px 10px; border-radius: 18px; border: 1px solid var(--line); background: rgba(4, 10, 24, 0.45); }
.rc-plot { position: relative; padding-right: 2.6em; }
.range-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.rc-grid { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.rc-y { position: absolute; right: 0; top: var(--y, 50%); transform: translateY(-50%); font: 700 12px/1 var(--font); color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-ticks { position: relative; height: 1.3em; margin: 4px 2.6em 0 0; font: 800 12px/1.3 var(--font); letter-spacing: 0.06em; color: var(--muted); }
.rc-ticks span { position: absolute; left: var(--x, 50%); transform: translateX(-50%); white-space: nowrap; }
.rc-bars rect, .rc-key-bar { fill: color-mix(in srgb, var(--coral) 60%, transparent); background: color-mix(in srgb, var(--coral) 60%, transparent); }
.rc-axis { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.rc-dots circle { fill: var(--text); stroke: var(--bg-mid); stroke-width: 2; }
.range-chart figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.range-chart figcaption span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rc-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.rc-key-dot { border-radius: 50%; background: var(--text); }

/* ---------- strings as big note tiles (like the tuner's string chips) */
.note-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.note-tiles li {
  display: grid; justify-items: center; gap: 4px; margin: 0; padding: 12px 6px 11px; text-align: center;
  border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
}
/* tiles that play their note (album pages: build/bands.mjs, app.js wireNoteTiles) */
.note-tiles li:has(> .nt-btn) { padding: 0; }
.nt-btn {
  display: grid; justify-items: center; gap: 4px; width: 100%; height: 100%; padding: 12px 6px 11px; margin: 0;
  border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.nt-btn:hover { background: rgba(255, 255, 255, 0.06); }
.nt-btn:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; }
.nt-btn.is-on { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 2px var(--foam); }
.nt-btn.is-on .nt-note { color: var(--foam); }
.nt-who { font-size: 10.5px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.nt-note { font: 800 32px/1 var(--display); letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.nt-oct { position: relative; top: 0.22em; margin-left: 0.04em; font-size: 0.52em; }
.nt-hz { font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- tuning tiles: "B · String chart" (the owner's pick, 2026-10-07; tuning-tiles.js writes them, on the
   tuning pages, hubs, /tunings/, the guide and the home page). Wide glass cards: the name, a line in plain words,
   then the strings as pegs with their note letters, the string under each and how far it moves from standard
   under that ("↓2", "↑1", a dash for no change). The strings a tuning retunes glow: coral lower, aqua higher; soft
   when they move with all the others (a shift), bright when the tuning moves them on their own. No Hz, no octave
   numbers. The pegs size themselves to their column (container units), so 4 to 8 strings fit any card. Phones:
   two cards across while a card keeps 23 px per string (six strings from 375 px; fewer strings already at 360),
   one across below that and for 7–8 strings, with a tighter chart. */
ul.tt-tiles, ol.tt-tiles {
  --tile-min: 300px;
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min)), 1fr));
}
.tt-tiles > li, .tt-tiles > li + li { display: grid; min-width: 0; margin: 0; }
.tt-tile {
  position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 4px; min-width: 0; padding: 20px 20px 16px; border-radius: 26px;
  container: tt-tile / inline-size; color: var(--text); border: 1px solid var(--line-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 60%, rgba(255, 255, 255, 0.05)), color-mix(in srgb, var(--bg-mid) 70%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 50px -30px rgba(0, 0, 0, 0.8);
}
a.tt-tile, a.tt-tile:hover { color: var(--text); text-decoration: none; }
a.tt-tile:hover { border-color: rgba(255, 255, 255, 0.26); }
a.tt-tile:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 26px; }
@media (prefers-reduced-motion: no-preference) {
  a.tt-tile { transition: transform 0.2s, border-color 0.2s; }
  a.tt-tile:hover { transform: translateY(-2px); }
}
/* the tuning this page is about, or the one in the tuner (home): a coral ring and a pill that says so */
.tt-tile.is-on { border-color: color-mix(in srgb, var(--coral) 62%, transparent); box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.22), 0 18px 40px -22px rgba(255, 107, 107, 0.7); }
.tt-tile.is-off { border-style: dashed; background: transparent; box-shadow: none; } /* no page of its own: outlined, the text stays readable */
.tt-plain { grid-template-rows: none; align-content: center; }
@media (min-width: 700px) { ul.tt-tiles.tt-links { --tile-min: 220px; } } /* the 404's links: four across */
.tt-top { display: grid; gap: 4px; min-width: 0; }
.tt-name { font: 800 26px/1.1 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.tt-here {
  display: inline-flex; align-items: center; height: 22px; margin-left: 10px; padding: 0 9px; border-radius: 999px; vertical-align: 0.2em;
  background: rgba(255, 107, 107, 0.16); color: #FFB3B3; font: 800 11.5px/1 var(--font); letter-spacing: 0.04em; white-space: nowrap;
}
.tt-say { color: var(--muted); font-size: 16px; font-weight: 700; line-height: 1.35; text-wrap: pretty; }
/* the strings: a peg on top, the string under it, the move under that */
.tt-chart { /* at the card's foot: the charts of a row line up when one line runs longer */
  container-type: inline-size; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-self: end; margin-top: 10px;
  padding: 14px 6px 10px; border-radius: 18px; border: 1px solid var(--line); background: rgba(4, 10, 24, 0.42);
}
/* a peg fills its column, up to 40 px; in a list (--pegs: its most strings) every peg takes the size of the fullest
   card's, so a bass beside guitars keeps the guitars' pegs, spaced wider */
.tt-s { --peg: clamp(20px, calc(100cqi / max(var(--n), var(--pegs, 1)) - 3px), 40px); display: grid; justify-items: center; grid-template-rows: auto 30px auto; min-width: 0; }
.tt-s b {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--peg); height: var(--peg); border-radius: 50%;
  border: 1.5px solid var(--line-2); background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  font: 800 clamp(11.5px, calc(var(--peg) * 0.45), 18px)/1 var(--display); letter-spacing: -0.02em; white-space: nowrap;
}
.tt-s i { display: block; width: var(--w, 2px); height: 100%; border-radius: 2px; background: linear-gradient(rgba(166, 181, 204, 0.55), rgba(166, 181, 204, 0.25)); }
.tt-s em {
  display: grid; place-items: center; min-width: min(38px, 100%); height: 26px; margin-top: 2px; padding: 0 6px; border-radius: 999px;
  font: 900 14px/1 var(--font); font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tt-s em[data-m]::before { content: attr(data-m); } /* "↓2": drawn, the chart is a picture (tuning-tiles.js) */
.tt-0 { display: block; width: 12px; height: 2px; border-radius: 2px; background: var(--faint); opacity: 0.75; } /* no change */
/* a 12-string's pair: the partner beside its string, as thick as its own pitch makes it */
.tt-s.is-pair i { position: relative; translate: calc(-0.5 * (var(--w2) + 2.5px)) 0; }
.tt-s.is-pair i::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(100% + 2.5px); width: var(--w2); border-radius: 2px; background: inherit; box-shadow: inherit; }
/* moved with all the others (E♭ Standard): soft */
.tt-s.is-down b { border-color: color-mix(in srgb, var(--coral) 42%, transparent); background: color-mix(in srgb, var(--coral) 8%, rgba(10, 20, 38, 0.6)); }
.tt-s.is-down i { background: linear-gradient(rgba(255, 107, 107, 0.55), rgba(255, 107, 107, 0.18)); }
.tt-s.is-down em { color: #F2A3A8; background: rgba(255, 107, 107, 0.09); }
.tt-s.is-up b { border-color: color-mix(in srgb, var(--aqua) 42%, transparent); background: color-mix(in srgb, var(--aqua) 7%, rgba(10, 20, 38, 0.6)); }
.tt-s.is-up i { background: linear-gradient(rgba(63, 211, 230, 0.55), rgba(63, 211, 230, 0.18)); }
.tt-s.is-up em { color: #A3E3EC; background: rgba(63, 211, 230, 0.08); }
/* moved on its own (Drop D's low D, the strings of an open chord): bright */
.tt-s.is-down.is-extra b { border-width: 2px; border-color: color-mix(in srgb, var(--coral) 75%, transparent); background: color-mix(in srgb, var(--coral) 18%, rgba(10, 20, 38, 0.6)); box-shadow: 0 0 18px -4px rgba(255, 107, 107, 0.75); }
.tt-s.is-down.is-extra i { background: linear-gradient(var(--coral), rgba(255, 107, 107, 0.35)); box-shadow: 0 0 6px rgba(255, 107, 107, 0.35); }
.tt-s.is-down.is-extra em { color: #FFB3B3; background: rgba(255, 107, 107, 0.16); }
.tt-s.is-up.is-extra b { border-width: 2px; border-color: color-mix(in srgb, var(--aqua) 75%, transparent); background: color-mix(in srgb, var(--aqua) 16%, rgba(10, 20, 38, 0.6)); box-shadow: 0 0 16px -5px rgba(63, 211, 230, 0.7); }
.tt-s.is-up.is-extra i { background: linear-gradient(var(--aqua), rgba(63, 211, 230, 0.35)); box-shadow: 0 0 6px rgba(63, 211, 230, 0.35); }
.tt-s.is-up.is-extra em { color: #A8EEF7; background: rgba(63, 211, 230, 0.15); }
/* the legend, once at the top of a section with tiles */
.tt-key { display: grid; gap: 10px; }
.tt-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tt-legend li {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; margin: 0; padding: 0 14px 0 6px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); font-size: 15px; font-weight: 700;
}
.tt-legend .tt-s { grid-template-rows: auto; }
.tt-legend .tt-s em { min-width: 38px; margin: 0; }
p.tt-note { color: var(--muted); font-size: 15px; }
/* /tunings/: one band per family (its head carries the legend), each instrument's head over its tiles */
.tt-group .section-head { margin-bottom: 26px; }
.tt-inst + .tt-inst { margin-top: 48px; }
.tt-ihead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 18px; }
.tt-art {
  --art-accent: var(--coral); display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; color: var(--text);
  border: 1px solid var(--line-2); background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
}
.tt-art svg { width: 38px; height: 38px; }
.tt-ititle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; margin-right: auto; }
.tt-ititle h3 { font-weight: 800; font-size: clamp(26px, 3.2vw, 34px); }
/* on the open sky, where a passing aurora glow can lighten it: the full text colour keeps 4.5:1 */
.tt-count {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07);
  color: var(--text); font: 800 13.5px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tt-go {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.06); color: var(--text); font: 700 15px/1.1 var(--font); white-space: nowrap;
}
.tt-go:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); text-decoration: none; }
.tt-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tt-go-s { display: none; }
.tt-free { color: var(--muted); }
/* instruments with one tuning, side by side: the picture and name over the one tile (it opens that tuner) */
.tt-solo {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 30px 16px; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.tt-solo > li, .tt-solo > .tt-inst.is-solo { display: grid; grid-template-rows: auto 1fr; min-width: 0; margin: 0; }
.tt-inst + .tt-solo, .tt-solo + .tt-inst { margin-top: 48px; }
.tt-inst.is-solo .tt-ihead { flex-wrap: nowrap; gap: 12px; margin-bottom: 14px; }
.tt-inst.is-solo .tt-art { width: 44px; height: 44px; border-radius: 14px; }
.tt-inst.is-solo .tt-art svg { width: 30px; height: 30px; }
.tt-inst.is-solo h3 { min-width: 0; font-weight: 800; font-size: 24px; line-height: 1.1; }
/* phones: as compact as the chart allows. Two cards across while each keeps 23 px per string (at most two), the
   chart's rows tight (30 px pegs at most, a short string, a small move); a card alone on its row puts its line
   beside the name when both fit */
@media (max-width: 699px) {
  ul.tt-tiles, ol.tt-tiles {
    --tile-min: calc(var(--pegs, 6) * 23px + 26px); gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(max(min(100%, var(--tile-min)), calc(50% - 4px)), 1fr));
  }
  .tt-tile { gap: 2px; padding: 9px 10px 8px; border-radius: 18px; }
  a.tt-tile:focus-visible { border-radius: 18px; }
  .tt-top { gap: 2px; }
  .tt-name { font-size: 17px; }
  .tt-here { height: 18px; margin-left: 6px; padding: 0 7px; font-size: 10.5px; vertical-align: 0.12em; }
  .tt-say { font-size: 12.5px; line-height: 1.3; }
  .tt-chart { margin-top: 6px; padding: 6px 1px 4px; border-radius: 12px; }
  .tt-s { --peg: clamp(19px, calc(100cqi / max(var(--n), var(--pegs, 1)) - 2px), 30px); grid-template-rows: auto 7px auto; }
  .tt-s b { font-size: clamp(11.5px, calc(var(--peg) * 0.5), 15px); }
  .tt-s.is-down.is-extra b, .tt-s.is-up.is-extra b { border-width: 1.5px; }
  .tt-s em { min-width: 0; height: 17px; margin-top: 1px; padding: 0 4px; font-size: 11.5px; }
  @container tt-tile (min-width: 250px) {
    .tt-top { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
    .tt-say { font-size: 13px; }
  }
  .tt-legend { gap: 6px; }
  .tt-legend li { min-height: 32px; gap: 6px; padding: 0 10px 0 5px; font-size: 13.5px; }
  .tt-legend .tt-s em { min-width: 30px; height: 22px; font-size: 12.5px; }
  p.tt-note { font-size: 14px; }
  /* /tunings/: each instrument's head in one row: picture, name over its count, "Tuner →" */
  .tt-group .section-head { margin-bottom: 18px; }
  .tt-inst + .tt-inst { margin-top: 26px; }
  .tt-ihead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; margin-bottom: 12px; }
  .tt-art { width: 44px; height: 44px; border-radius: 14px; }
  .tt-art svg { width: 30px; height: 30px; }
  .tt-ititle { display: grid; gap: 3px; margin: 0; }
  .tt-ititle h3 { font-size: 22px; line-height: 1.1; }
  .tt-count { height: auto; padding: 0; background: none; font-size: 12.5px; }
  .tt-go { padding: 0 14px; }
  .tt-go-l { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tt-go-s { display: inline; }
  .tt-solo { /* auto-fit: an instrument alone on its row takes the row */
    --tile-min: calc(var(--pegs, 6) * 23px + 26px); gap: 18px 8px;
    grid-template-columns: repeat(auto-fit, minmax(max(min(100%, var(--tile-min)), calc(50% - 4px)), 1fr));
  }
  .tt-inst + .tt-solo, .tt-solo + .tt-inst { margin-top: 26px; }
  .tt-inst.is-solo .tt-ihead { display: flex; gap: 8px; margin-bottom: 8px; }
  .tt-inst.is-solo .tt-art { width: 34px; height: 34px; border-radius: 11px; }
  .tt-inst.is-solo .tt-art svg { width: 24px; height: 24px; }
  .tt-inst.is-solo h3 { font-size: 17px; }
}
/* tuning families as colours (--c): the band pages use them (bands.css), the tuning tiles no longer do */
.k-standard { --c: var(--aqua); }
.k-drop { --c: var(--coral); }
.k-open { --c: var(--sand); }
.k-other { --c: var(--violet); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.info .jump a.chip { color: var(--text); text-decoration: none; border-color: var(--line-2); background: rgba(255, 255, 255, 0.05); }
.info .jump a.chip:hover { border-color: var(--aqua); }

/* ---------- note tables (base: .table-wrap in tunelit.css) */
table.notes { font-size: 15px; line-height: 1.35; }
table.notes th, table.notes td { text-align: right; white-space: nowrap; vertical-align: baseline; }
table.notes th:first-child, table.notes .note { text-align: left; }
table.notes tbody th { font: 800 15px/1.35 var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
table.notes td.note { font: 700 17px/1.2 var(--display); color: var(--text); }
table.notes td.note-list { white-space: normal; min-width: 8em; word-spacing: 0.15em; }
table.notes tbody th a { font-family: var(--display); font-weight: 700; white-space: normal; }
table.notes tbody tr:last-child > * { border-bottom: 0; }
table.notes tbody tr:hover > * { background: rgba(255, 255, 255, 0.03); }
table.notes strong { color: var(--coral); }
table.notes caption {
  caption-side: bottom; text-align: left; padding: 10px 14px 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--faint); border-top: 1px solid var(--line);
}
/* the big note chart and the accuracy table scroll sideways on phones: keep the note names in view */
table.note-chart { font-size: 14px; }
table.note-chart th, table.note-chart td { padding: 8px 10px; }
table.note-chart tbody th, table.note-chart thead th:first-child, table.accuracy tbody th, table.accuracy thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--sheet-bg); color: var(--text); font-family: var(--display);
}
table.accuracy th.what, table.accuracy td.what { text-align: left; white-space: normal; min-width: 12em; color: var(--muted); }
table.accuracy tbody th { font: 800 16px/1.2 var(--display); }
table.accuracy td:nth-child(n+3):nth-child(-n+5) { color: var(--text); font-weight: 700; }
table.accuracy thead th { white-space: normal; }

/* a scroll cue: app.js marks a table that is wider than its frame; its far edge fades until the end is reached */
.table-wrap.is-scrollable:not(.is-end) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0, 0, 0, 0.25)); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0, 0, 0, 0.25));
}
/* phones: a table marked .stack shows one small card per row, each value under its column's name */
@media (max-width: 560px) {
  table.stack { display: flex; flex-direction: column; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.stack tbody { display: block; }
  table.stack caption { order: 2; display: block; }
  table.stack tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.6em, 1fr)); gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.notes.stack tr > * { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.notes.stack tbody th { grid-column: 1 / -1; font: 700 17px/1.25 var(--display); color: var(--text); }
  table.notes.stack tbody th a { white-space: nowrap; }
  table.stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 900 10.5px/1.3 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
}
@media (max-width: 480px) {
  table.notes { font-size: 14px; }
  table.notes th, table.notes td { padding: 9px 8px; }
  table.notes thead th { letter-spacing: 0.04em; }
  table.notes tbody th { font-size: 14px; }
  .a4-pre { display: none; }
  .nt-note { font-size: 28px; }
  .measured li { grid-template-columns: 4.8em minmax(0, 1fr); padding: 12px 14px; }
  .measured b { font-size: 24px; }
}
/* a 360 px phone: the five columns of "Notes and frequencies" (a 12-string's "6 octave" rows too) fit without scrolling */
@media (max-width: 380px) {
  table.notes { font-size: 13.5px; }
  table.notes th, table.notes td { padding-inline: 6px; }
  table.notes th:first-child, table.notes td:first-child { padding-left: 10px; }
  table.notes td.note { font-size: 16px; }
  table.notes tbody th { font-size: 13.5px; }
  table.notes td.wrap { white-space: normal; } /* a words column ("+0.7 half steps") takes two lines rather than scroll */
}

/* ---------- the home page's Instruments card: a chip list per family */
.home-insts .prose h3 { margin: 1.1em 0 0; font: 900 12px/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.home-insts .prose h3 + .jump { margin-top: 8px; }
.info .jump a.chip { min-height: 38px; } /* a size up from chip-sm: easier to hit */

@media print {
  .skip-link, .tool, .related, .info .cta, .jump { display: none !important; }
  .info .card, .split-side { box-shadow: none; background: none; }
  .prose a { color: inherit; }
}

/* ==========================================================================
   String tension calculator: build/partials/tension.html + tension-ui.js, in his card language:
   the result first (his tension line), the setup in his darker panel, then the table.
   ========================================================================== */
.tension-tool { --c: var(--aqua); }
.st-card { display: grid; gap: clamp(18px, 2.6vw, 26px); overflow: hidden; }
.st-card::before {
  content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(63, 211, 230, 0.16), transparent 65%);
}
.st-card > * { position: relative; }
.st-setup {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px 24px;
  padding: clamp(16px, 2.4vw, 24px); border-radius: 24px; border: 1px solid var(--line); background: rgba(4, 10, 24, 0.5);
}
.st-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.st-field .label { color: var(--faint); }
.st-field .fine, .st-field .hint { margin: 0; }
.st-tune { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-tune .field { flex: 1 1 140px; width: auto; min-width: 0; }
.st-tune .chip-tune { flex: none; min-height: 48px; }
/* a span, not a button here: centre it like the tuner's chip name */
.st-tune .chip-name { display: inline-flex; align-items: center; justify-content: center; min-width: 9ch; font-weight: 800; }
.st-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.st-input { display: inline-flex; align-items: center; gap: 6px; }
.st-num { width: 7.5ch; padding: 0 12px; text-align: right; font-variant-numeric: tabular-nums; }
.st-num[aria-invalid=true], .st-gauge[aria-invalid=true] { border-color: var(--coral); }
/* the words say what is wrong; the colour only repeats it */
.st-err { margin: 0; color: var(--coral); font-weight: 700; }

/* phones: the result in one line at the bottom of the screen while the controls are scrolled (JS hides it
   while the summary or the table is in view) */
.st-mini { display: none; }
@media (max-width: 759px) {
  .st-mini:not([hidden]) {
    display: block; position: sticky; bottom: 0; z-index: 3; margin: 0; border-radius: 16px 16px 0 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--sheet-bg); border: 1px solid var(--line-2); border-bottom: 0; color: var(--text);
    font: 700 15px/1.35 var(--display); font-variant-numeric: tabular-nums; box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, 0.6);
  }
}

.st-top, .st-out { display: grid; gap: 12px; min-width: 0; }
.st-out { gap: 14px; container: st-out / inline-size; }
/* the result: his tension line, a size up */
.st-summary {
  margin: 0; font: 700 clamp(20px, 2.6vw, 28px)/1.3 var(--display); letter-spacing: -0.01em; color: var(--text); text-wrap: balance;
}
.st-advice {
  margin: 0; padding: 12px 16px; border-radius: 16px; font-size: 15px; line-height: 1.5; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--sand) 40%, transparent); background: color-mix(in srgb, var(--sand) 8%, transparent);
}
.st-head { justify-content: space-between; gap: 10px 16px; }
.st-head .link { min-height: 44px; display: inline-flex; align-items: center; color: var(--aqua); text-decoration-color: color-mix(in srgb, var(--aqua) 45%, transparent); }

/* the table scrolls sideways inside its frame on phones; the string number stays in view */
.st-table { min-width: 760px; }
.st-table th, .st-table td { vertical-align: middle; }
.st-table thead th { white-space: normal; }
.st-table tbody th, .st-table tfoot th, .st-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--sheet-bg); }
.st-table tfoot th, .st-table tfoot td { border-top: 1px solid var(--line-2); border-bottom: 0; font-weight: 800; color: var(--text); }
.st-n { font: 800 18px/1 var(--display); color: var(--text); }
.st-sub { display: block; margin-top: 3px; font: 600 12.5px/1.3 var(--font); color: var(--faint); letter-spacing: 0; text-transform: none; }
.st-note { font: 700 17px/1.2 var(--display); color: var(--text); }
.st-main { display: block; font-weight: 800; color: var(--text); }
.st-table-wrap { margin: 0; }
.st-c-note, .st-c-feel { text-align: left !important; }
.st-c-gauge { padding-block: 6px; }
.st-c-ten, .st-c-chg { font-variant-numeric: tabular-nums; }
.st-gauge-wrap { display: inline-flex; align-items: center; gap: 6px; }
.st-gauge, .st-type {
  min-height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.06); color: var(--text);
  font: 700 16px/1 var(--font); font-variant-numeric: tabular-nums;
}
.st-gauge { width: 5.4ch; padding: 0 8px; text-align: right; }
.st-type { padding: 0 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.st-type option { background: var(--sheet-bg); color: var(--text); }
.st-gauge:focus, .st-type:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); }

/* feel: a bar over the five bands (colour, position and the word all say the same thing): foam where it feels
   normal, sand for light or firm, coral for slack or tight */
.st-c-feel { --f: var(--foam); min-width: 150px; }
.st-c-feel[data-feel=light], .st-c-feel[data-feel=firm] { --f: var(--sand); }
.st-c-feel[data-feel=slack], .st-c-feel[data-feel=tight] { --f: var(--coral); }
.st-bar {
  --w: 0%; --b1: 20%; --b2: 40%; --b3: 60%; --b4: 80%;
  position: relative; display: block; height: 6px; border-radius: 99px; overflow: hidden;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--coral) 24%, transparent) 0 var(--b1),
    color-mix(in srgb, var(--sand) 22%, transparent) var(--b1) var(--b2),
    color-mix(in srgb, var(--foam) 22%, transparent) var(--b2) var(--b3),
    color-mix(in srgb, var(--sand) 22%, transparent) var(--b3) var(--b4),
    color-mix(in srgb, var(--coral) 24%, transparent) var(--b4) 100%);
}
.st-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: inherit; background: var(--f); }
.st-word { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 800; color: var(--f); }
.st-c-match { font-weight: 700; color: var(--text); }
.st-same { color: var(--faint); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .st-bar i { transition: width 0.25s ease; } }
.st-table tbody tr:hover > th { background: var(--sheet-bg); }
/* wide enough for the whole table: nothing scrolls under the string column, so it takes the row's own surface */
@container st-out (min-width: 760px) {
  .st-table :is(th, td):first-child, .st-table thead th:first-child, .st-table tbody tr:hover > th { background: transparent; }
}

/* narrow space (phones, tablets, split screens): each string becomes a small card (number, note, tension /
   gauge, feel / change, same feel), so nothing important hides behind a sideways scroll. Sized by the room the
   table really has, not the viewport. The markup keeps explicit table roles for screen readers. */
@container st-out (max-width: 759px) {
  .st-table { min-width: 0; }
  .st-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .st-table, .st-table tbody, .st-table tfoot { display: block; }
  .st-table caption { display: block; }
  /* a fixed first column, so the note sits at the same x for "6" and "6 octave"; long pair labels wrap */
  .st-table tr {
    display: grid; grid-template-columns: 5.5em minmax(0, 1fr) minmax(96px, auto); align-items: center; gap: 10px 14px;
    grid-template-areas: "num note ten" "gauge gauge feel" "chg chg match";
    padding: 16px 14px; border-bottom: 1px solid var(--line);
  }
  .st-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
  .st-table tfoot tr { border-top: 1px solid var(--line-2); border-bottom: 0; grid-template-areas: "num gauge ten" "chg chg match"; }
  table.st-table tr > * { display: block; padding: 0 !important; border: 0 !important; text-align: left; background: none !important; position: static !important; }
  .st-table tr > th { grid-area: num; min-width: 2.2em; }
  .st-table .st-n { font-size: 22px; }
  .st-table .st-note { font-size: 20px; }
  .st-table .st-c-note { grid-area: note; }
  .st-table .st-c-ten { grid-area: ten; text-align: right; }
  .st-table .st-c-ten .st-main { font-size: 17px; }
  .st-table .st-c-gauge { grid-area: gauge; }
  .st-table .st-c-feel { grid-area: feel; min-width: 0; }
  .st-gauge-wrap { max-width: 100%; }
  .st-type { min-width: 0; flex: 1 1 auto; }
  .st-table tr > th .st-n { white-space: normal; }
  .st-table .st-c-chg { grid-area: chg; }
  .st-table .st-c-match { grid-area: match; text-align: right; }
  .st-table .st-c-chg::before, .st-table .st-c-match::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font: 900 10.5px/1.3 var(--font);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  }
  .st-table tfoot .st-c-note, .st-table tfoot .st-c-feel { display: none; }
}