/* The tin whistle tune pages (2026-10-14, /tin-whistle-tunes and /tin-whistle-tunes/<slug>, built by
   scripts/build_tune_pages.py, played by js/tunes.js). Loaded after site.css: the whistle drawing, Penny, the readout and
   the buttons all come from the finger chart there; this file adds the breadcrumb, the tab (the notes bar by bar), the
   fingering row, the level and the tune list. Same color rule as the rest of the site: yellow only on things you can
   touch (buttons, links, a tab note under the pointer); the note being played is lit in pewter, never yellow. All text
   here is 16px or more. */

.tn-page{--tn-gap:clamp(56px,8vw,104px)}

/* header: the section you are in; nav, logo and footer links sized up to 16px text and 44px taps on these pages */
.tn-page .tw-top nav a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem}
.tn-page .tw-top nav a[aria-current]{color:var(--pewter);background-size:100% 2px}
.tn-page .brand{display:inline-flex;align-items:center;min-height:44px}
.tn-page .tw-desc{font-size:clamp(1.0625rem,1.4vw,1.25rem)}
.tn-page .tw-card-name .tw-plus{font-size:1rem}

.tn-crumbs{padding-top:clamp(18px,2.4vw,28px)}
.tn-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:1rem;color:var(--pewter-3)}
.tn-crumbs li{display:inline-flex;align-items:center;gap:10px}
.tn-crumbs li + li::before{content:"";width:6px;height:6px;border-top:1.5px solid var(--mark);border-right:1.5px solid var(--mark);transform:rotate(45deg)}
.tn-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--pewter-2);text-decoration:none;font-weight:600}
.tn-crumbs a:hover{color:var(--act-hi)}
.tn-crumbs a:active{color:var(--act)}
.tn-crumbs [aria-current]{color:var(--pewter-3)}

/* the top: the tune's name, then the player (the chart's whistle and readout) */
.tn-hero{padding-block:clamp(8px,1.6vw,20px) var(--tn-gap)}
.tn-intro h1{font-size:clamp(2.6rem,5.6vw,5rem);font-weight:900;line-height:.9;color:var(--pewter);letter-spacing:-0.015em;max-width:16ch}
.tn-intro h1 span{display:block;margin-top:.35em;font:600 clamp(1.15rem,1.8vw,1.45rem)/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--pewter-2)}
.tn-intro .tw-lede{max-width:52ch}
.tn-index-note{margin:16px 0 0;max-width:62ch;color:var(--pewter-2);font-size:1.0625rem}
.tn-index-note a:hover,.tn-story a:hover,.tw-soon a:hover{color:var(--act-hi)}

/* the learning grid: the whistle on the left, sticky, so the holes stay in view while you read the tab. */
.tn-learn{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"stage intro" "stage side" "stage tab";
  column-gap:clamp(32px,5vw,72px);align-items:start;padding-block:clamp(8px,1.6vw,20px) var(--tn-gap)}
.tn-learn .tn-intro{grid-area:intro}
.tn-learn .tn-stage{grid-area:stage;position:sticky;top:16px;height:min(620px,calc(100vh - 32px));padding-inline:clamp(16px,3vw,48px)}
.tn-learn .tn-player{grid-area:side;margin-top:clamp(24px,3vw,36px)}
.tn-learn .tn-tab{grid-area:tab}
.tn-page .tw-count{font-size:1rem}
.tn-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:22px}
.tn-play{min-width:13.5rem}
.tn-play[aria-pressed="true"] svg{display:none}
.tn-speed{display:inline-flex;gap:6px;padding:4px;border-radius:26px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line)}
.tn-speed .tw-pick{font-size:1rem;background:transparent;box-shadow:none}
.tn-speed .tw-pick:hover{box-shadow:inset 0 0 0 1.5px var(--act)}
.tn-speed .tw-pick[aria-pressed="true"]{background:var(--act-fill);color:var(--act-ink);box-shadow:0 2px 0 var(--act-edge)}
.tn-step{margin-top:clamp(22px,3vw,32px);padding-top:clamp(18px,2.4vw,24px);border-top:1px solid var(--line)}
.tn-step-label{margin:0;font:700 1rem/1.3 var(--body);color:var(--label)}
.tn-step .tw-controls{margin-top:12px}
.tn-next{min-width:11rem}
.tn-hint{margin:12px 0 0;font-size:1rem;color:var(--pewter-3)}
.tn-hint-touch{display:none}
@media (hover:none),(pointer:coarse){.tn-hint-key{display:none}.tn-hint-touch{display:inline}}

/* the tab: one box per bar, one tile per note; a held note's tile is wider and its line longer */
.tn-tab{margin-top:clamp(48px,6vw,80px);padding:clamp(24px,3vw,40px);border-radius:16px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line)}
.tn-tab h2,.tn-about h2,.tn-more h2{font-size:clamp(2.2rem,4.4vw,3.6rem);color:var(--pewter)}
.tn-tab-head p{margin:16px 0 0;max-width:62ch;color:var(--pewter-2)}
.tn-key{display:inline-block;min-width:1.6em;padding:0 .35em;border-radius:6px;background:var(--night-3);box-shadow:inset 0 0 0 1px var(--line);color:var(--pewter);text-align:center;font-weight:800}
.tn-bars{list-style:none;margin:clamp(24px,3.4vw,36px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.tn-bar{max-width:100%;padding:8px;border-radius:12px;background:var(--night);box-shadow:inset 0 0 0 1px var(--line)}
.tn-pickup{background:transparent;box-shadow:none;outline:1.5px dashed var(--line);outline-offset:-1.5px} /* the notes before the first full bar */
.tn-notes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.tn-notes li{position:relative;display:flex;align-items:flex-start;justify-content:center;min-width:46px;min-height:58px;padding:10px 6px 0;border-radius:8px;
  font:800 1.75rem/1 var(--display);color:var(--pewter);background:var(--night-2);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .15s var(--ease-out),color .15s,box-shadow .15s var(--ease-out)}
.tn-notes li .tw-plus{font:700 1rem/1 var(--body);vertical-align:super;margin-left:1px;color:var(--label)}
.tn-notes li::after{content:"";position:absolute;left:9px;bottom:9px;height:3px;width:14px;border-radius:2px;background:var(--mark)}
.tn-notes li.b-short::after{width:6px}
.tn-notes li.b-mid{min-width:56px} .tn-notes li.b-mid::after{width:24px}
.tn-notes li.b-long{min-width:68px} .tn-notes li.b-long::after{width:calc(100% - 18px)}
.tn-notes li.b-xl{min-width:84px} .tn-notes li.b-xl::after{width:calc(100% - 18px)}
.tn-notes li:hover{box-shadow:inset 0 0 0 1.5px var(--act)}
.tn-notes li.done{color:var(--pewter-3)}
.tn-notes li.done .tw-plus{color:var(--pewter-3)}
.tn-notes li.now{background:var(--pewter);color:var(--night);box-shadow:0 4px 14px -6px rgba(0,0,0,.6)}
.tn-notes li.now .tw-plus{color:var(--night-3)}
.tn-notes li.now::after{background:var(--night-3)}

/* the fingers for each note in this tune; the one being played lights */
.tn-fings{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.tn-fings li{transition:background-color .15s var(--ease-out),box-shadow .15s var(--ease-out)}
.tn-fings li.now{background:var(--night-3);box-shadow:inset 0 0 0 2px var(--pewter)}
.tn-page .tw-row-label{font-size:1rem}
.tn-page .tw-sm{height:140px}

/* about the tune, and how hard it is */
.tn-about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);padding-block:var(--tn-gap)}
.tn-story p{margin:16px 0 0;max-width:62ch;color:var(--pewter-2)}
.tn-src{font-weight:600}
.tn-dl{margin:16px 0 0}
.tn-dl div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tn-dl dt{font-weight:600;color:var(--label)}
.tn-dl dd{margin:0;color:var(--pewter);font-variant-numeric:tabular-nums}
.tn-dl .tw-plus,.tn-row-meta .tw-plus{font-weight:700;color:var(--label)}

/* keep going: the tunes either side, the list, the chart */
.tn-more{padding-block:0 var(--tn-gap)}
.tn-next-tunes{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.tn-next-tunes li{display:flex}
.tn-next-tunes a{display:flex;flex-direction:column;gap:6px;min-width:15rem;padding:18px 22px;border-radius:14px;text-decoration:none;
  font:800 1.6rem/1 var(--display);color:var(--pewter);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s var(--ease-out),background-color .15s}
.tn-next-tunes span{font:500 1rem/1.3 var(--body);color:var(--pewter-2)}
.tn-next-tunes a:hover{box-shadow:inset 0 0 0 1.5px var(--act)}
.tn-next-tunes a:active{background:var(--night-3)}
.tn-links{display:flex;flex-wrap:wrap;gap:4px 28px;margin:20px 0 0}
.tn-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.tn-links a:hover{color:var(--act-hi)}
.tn-page .tw-soon{color:var(--pewter-2)}

/* the index: one row per tune */
.tn-index{padding-bottom:clamp(24px,3vw,40px)}
.tn-list{padding-bottom:var(--tn-gap)}
.tn-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tn-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name level" "meta level";gap:6px 24px;align-items:center;
  padding:18px clamp(8px,1.6vw,20px);border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .15s var(--ease-out)}
.tn-row-name{grid-area:name;font:800 clamp(1.7rem,2.6vw,2.1rem)/1 var(--display);color:var(--pewter);transition:color .15s}
.tn-row-meta{grid-area:meta;font-size:1rem;color:var(--pewter-2)}
.tn-row-level{grid-area:level;padding:6px 14px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);font-size:1rem;font-weight:600;color:var(--label);white-space:nowrap}
.tn-row:hover{background:var(--night-2)}
.tn-row:hover .tn-row-name{color:var(--act-hi)}
.tn-row:active{background:var(--night-3)}
.tn-row:focus-visible{outline-offset:-3px}

.tn-page .foot-link,.tn-page .foot-row p{font-size:1rem}

@media (max-width:899px){
  .tn-learn{grid-template-areas:"intro intro" "stage side" "tab tab";column-gap:14px}
  .tn-learn .tn-stage{position:relative;height:400px;padding-inline:0;margin-top:clamp(24px,3vw,36px)} /* relative, not static: the glow (::before) sizes from it */
  .tn-tab{padding:20px 14px}
}
@media (max-width:767px){
  .tn-crumbs [aria-current]{display:none}
  .tn-crumbs li:nth-last-child(2)::after{content:none}
  .tn-intro h1{font-size:clamp(2.4rem,11vw,3.2rem)}
  .tn-controls .tn-play{flex:1 1 100%;min-width:0}
  .tn-speed{flex:1 1 100%}
  .tn-speed .tw-pick{flex:1 1 0;justify-content:center}
  .tn-step .tw-controls .tn-next{flex:1 1 100%;min-width:0}
  .tn-step .tw-controls .btn-line:not(.tn-next){flex:1 1 100%}
  .tn-bars{gap:8px}
  .tn-bar{padding:6px}
  .tn-notes{gap:3px}
  .tn-notes li{min-width:44px;min-height:54px;font-size:1.6rem}
  .tn-about{grid-template-columns:1fr}
  .tn-next-tunes li{flex:1 1 100%} .tn-next-tunes a{flex:1;min-width:0}
  .tn-row{grid-template-areas:"name" "meta" "level";grid-template-columns:1fr}
  .tn-row-level{justify-self:start;margin-top:4px}
  .tn-page .tw-sm{height:116px}
}
@media (prefers-reduced-motion:reduce){
  .tn-notes li,.tn-fings li,.tn-row,.tn-next-tunes a{transition:none}
}