/* ============================================================
   TOUCH GRASS, THE HOMEPAGE BAND (docs/STEPS.md, assets/steps-band.js)

   Copied from steps.css, which copies the approved mockup byte for byte:
   the band, and the pieces of the page it is drawn from (a face, a name, a
   champion's tile, the small button). Its own file so the homepage does not
   load the whole page's stylesheet for one strip.
   ============================================================ */
.tg-face { position: relative; overflow: hidden; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius); background: var(--surface-2); border: var(--bw) solid var(--line); font: 700 var(--t-micro)/1 var(--f-mono); color: var(--muted); text-transform: uppercase; vertical-align: middle; }
.tg-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tg-face.tg-lg { width: 40px; height: 40px; font-size: var(--t-md); }
.tg-face.tg-md { width: 28px; height: 28px; font-size: var(--t-mono); }
.tg-who { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; font-weight: 700; font-size: var(--t-sm); }
.tg-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-btn-sm { padding: var(--s-2) var(--s-4); font-size: var(--t-sm); }
/* ---- the band, between Happening Now and the dailies ---- */
.tg-band { margin: var(--s-7) 0; display: grid; grid-template-columns: minmax(170px, 0.85fr) minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(190px, 0.85fr); align-items: center; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: var(--s-6) 0; }
.tg-band[hidden] { display: none; }
.tg-band > * { padding: 0 var(--s-7); min-width: 0; }
.tg-band > * + * { border-left: var(--bw) solid var(--line); }
.tg-band-k { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tg-band-t { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h1); line-height: 1; letter-spacing: -0.02em; margin: var(--s-2) 0; }
.tg-band-t em { font-style: inherit; color: var(--accent); }
.tg-band-s { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }
.tg-band-s b { color: var(--ink); }
.tg-band .tg-walkline { max-width: none; margin-bottom: var(--s-2); }
.tg-band .prog { max-width: none; height: 8px; margin-bottom: var(--s-2); }
.tg-band .tg-next { margin: 0; }
.tg-band-top ol { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-1); }
.tg-band-top li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); font-size: var(--t-sm); }
.tg-band-top li .tg-rank { font-family: var(--f-mono); font-weight: 800; font-size: var(--t-mono); color: var(--accent); }
.tg-band-top li .tg-v { font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.tg-band-you { display: grid; gap: var(--s-1); justify-items: start; }
.tg-band-you .tg-bignum { font-weight: 900; font-style: italic; font-size: var(--t-h2); line-height: 1; font-variant-numeric: tabular-nums; }
.tg-band-you .tg-bignum small { font-size: var(--t-mono); font-style: normal; font-family: var(--f-mono); color: var(--accent); margin-left: var(--s-2); }
.tg-band-link { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-decoration: none; margin-top: var(--s-2); }
.tg-band-link:hover { color: var(--ink); }
.tg-band-champs { grid-column: span 2; }
.tg-band-champs .tg-chips3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.tg-champ { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.tg-champ.tg-gold { border-color: var(--accent); }
.tg-champ .tg-pn { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.tg-champ .tg-pv { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 980px) {
  .tg-band { grid-template-columns: 1fr 1fr; row-gap: var(--s-6); }
  .tg-band > * + * { border-left: 0; }
  .tg-band-champs { grid-column: 1 / -1; }
}
.tg-band-tots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-3); }
.tg-band-tots b { display: block; font-weight: 900; font-style: italic; font-size: var(--t-h3); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-band-tots span { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
/* PHONES (the phone pass, 2026-10-08): one column, each part a row of its
   own. Two columns of 175px put three totals side by side in each, and the
   numbers ran into each other ("0 km0"). */
@media (max-width: 620px) {
  .tg-band { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 0; }
  .tg-band > * { padding: var(--s-6); }
  .tg-band > * + * { border-left: 0; border-top: var(--bw) solid var(--line); }
}

/* the phone pass (2026-10-08): a finger needs about 40px where a mouse needs 26 */
@media (pointer: coarse) {
  .tg-band-link { display: inline-block; padding: var(--s-3) 0; }
  .tg-band .tg-btn-sm { min-height: 40px; }
}