/* TONO website — the hearing age test (hearing-age-test/, de/hoertest/; script: assets/js/hearing-age.js). Loaded after
   base.css and pages.css, on those two pages only. The instrument is one of the landing page's devices: a machined plate,
   one black-glass display with the frequency in display type, a scale from 8 to 20 kHz, and keys. Orange only where
   something is on: the LED while a tone plays and the scale's needle. */

.hat { display: grid; gap: 16px; }
/* the instrument comes right after the head: a tighter rule under it, so the Start key is near the first screen */
.dochead { margin-bottom: 36px; }
.docbody > .hat { margin-top: 0; }
.hat__plate { padding: 20px; border-radius: 22px; }
.hat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 0 2px 14px; }
.docbody .hat__head h2 { margin: 0; padding: 0; border: 0; font: 650 10.5px/1.2 var(--f-sans); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.hat__model { font: 500 9.5px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }

/* ── The display ─────────────────────────────────────────────────────────── */
.hat__lcd .lcd__glass { display: grid; gap: 10px; padding: 18px 22px 18px; }
.hat__status { display: flex; align-items: center; gap: 9px; font: 500 9.5px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
.hat__big { margin-top: 6px; font-size: clamp(64px, 15vw, 124px); color: var(--lcd); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hat__hint { min-height: 3em; max-width: 36em; font-size: 15px; line-height: 1.5; color: var(--lcd-dim); text-wrap: pretty; }
.hat__hint b { color: var(--lcd); font-weight: 620; }
/* the scale: the kHz marks printed under a track, each at its frequency; the needle is one scaled bar (the compositor
   moves it) */
.hat__scale { position: relative; height: 34px; margin-top: 8px; font: 500 9px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; color: var(--lcd-dim); }
.hat__scale > span:not(.hat__track) { position: absolute; top: 20px; left: calc(6px + (100% - 12px) * var(--x, 0)); transform: translateX(-50%); }
.hat__scale > span:nth-child(3) { --x: .1667; } .hat__scale > span:nth-child(4) { --x: .3333; } .hat__scale > span:nth-child(5) { --x: .5; }
.hat__scale > span:nth-child(6) { --x: .6667; } .hat__scale > span:nth-child(7) { --x: .8333; } .hat__scale > span:nth-child(8) { --x: 1; }
.hat__track { position: absolute; left: 6px; right: 6px; top: 4px; height: 6px; border-radius: 3px; background: rgb(242 237 226 / .1); box-shadow: inset 0 1px 1px rgb(0 0 0 / .6); overflow: hidden; }
.hat__track i { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgb(255 79 0 / .35), var(--signal)); box-shadow: 0 0 10px rgb(255 79 0 / .55); will-change: transform; }
.hat[data-state="idle"] .hat__track i, .hat[data-state="level"] .hat__track i { opacity: .35; }

/* ── Keys ────────────────────────────────────────────────────────────────── */
.hat__controls { margin-top: 16px; }
.hat__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.docbody .hat .key { color: var(--ink); text-decoration: none; }
.docbody .hat .key--latched { color: var(--on-control); }
.hat__ears { flex: none; }
.hat__ears > * { height: 40px; }
.hat__go { min-width: 180px; }
/* the one key that matters while the tone climbs: as big as a thumb, the whole width */
.hat__gone { --h: 76px; flex: 1 1 100%; border-radius: 14px; font-size: 13px; letter-spacing: .12em; white-space: normal; text-align: center; line-height: 1.25; padding: 0 20px; }
.hat__gone .led { width: 8px; height: 8px; }
.hat__noscript { margin-top: 16px; font-size: 15px; color: var(--ink2); }

/* ── The result: share keys and the card, then TONO ─────────────────────── */
.hat__result { display: flex; flex-direction: column; gap: 16px; }
.hat.is-mac .hat__tono { order: -1; }
.hat__share { display: grid; grid-template-columns: minmax(0, 300px) 168px; justify-content: start; gap: 28px; align-items: start; }
.hat__keys { display: flex; flex-wrap: wrap; gap: 10px; }
.hat__share .hat__keys { flex-direction: column; align-items: stretch; max-width: 320px; }
.hat__card { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 14px; background: #1d1d1b; box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 18px 40px -18px var(--cast), 0 4px 10px -4px var(--cast); }
.hat__tono { padding: 18px 20px 20px; border-radius: 16px; background: var(--well); box-shadow: inset 0 1.5px 3px var(--cast), inset 0 -1px 0 var(--edge-light); font-size: 15.5px; line-height: 1.55; }
.hat__tono > * + * { margin-top: 14px; }
.hat__safety { margin-top: 0 !important; }

/* Phones: most visitors come from a short video, in an app's browser, and don't scroll to look for the test. So the
   head shrinks to the headline and one sentence (the rest behind MORE, the crumbs, kicker and spec line go), and the
   instrument packs tighter: Start sits on the first screen down to 375 × 500. */
@media (max-width: 640px) {
  .page { padding-top: calc(var(--nav-h) + 14px); }
  .crumbs, .dochead .kicker, .dochead .spec { display: none; }
  html[lang] .dochead h1 { font-size: 30px; line-height: 1; }
  .dochead { padding-bottom: 14px; margin-bottom: 14px; }
  .dochead .answer { margin-top: 10px; font-size: 15.5px; line-height: 1.45; }
  .js .dochead .answer-more { margin-top: 0; padding-block: 6px; }
  .hat { gap: 12px; }
  .hat__plate { padding: 10px 12px 12px; border-radius: 18px; }
  .hat__head { padding-bottom: 8px; }
  .hat__lcd .lcd__glass { gap: 6px; padding: 11px 14px 10px; }
  .hat__big { margin-top: 2px; font-size: 52px; }
  .hat__hint { min-height: 2.8em; font-size: 14px; line-height: 1.4; }
  .hat__scale { height: 28px; margin-top: 2px; }
  .hat__scale > span:not(.hat__track) { top: 16px; }
  .hat__controls { margin-top: 12px; }
  .hat__row > .hat__go, .hat__row > .hat__ears { flex: 1 1 100%; }
  .hat__ears { display: grid; order: 1; }   /* Start first: it is the key a phone needs on its first screen */
  .hat__row > .key:not(.hat__go):not(.hat__gone) { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .hat__share { grid-template-columns: minmax(0, 1fr); }
  .hat__share .hat__keys { max-width: none; display: grid; grid-template-columns: 1fr 1fr; }
  .hat__share .hat__keys > :first-child:not([hidden]), .hat__share .hat__keys > .key--latched, .hat__share .hat__keys > :last-child { grid-column: 1 / -1; }
  .hat__card { width: min(100%, 220px); justify-self: center; }
  .hat__tono .hat__keys .key { flex: 1 1 auto; }
}
/* The language hint (site.js) would sit over the Start key at the foot of a phone's screen: on the tools it stays away
   (the other language is one tap away in the menu). The plate's printed spec gives way on narrow phones, so its title
   keeps one line. */
@media (max-width: 640px) {
  .hintbar { display: none !important; }
}
@media (max-width: 420px) {
  .hat__model { display: none; }
}
/* short screens (an iPhone SE, or an app's browser with its own bars): the readout gives up a little more */
@media (max-width: 640px) and (max-height: 600px) {
  html[lang] .dochead h1 { font-size: 26px; }
  .dochead .answer { font-size: 14.5px; }
  .hat__big { font-size: 44px; }
  .hat__hint { min-height: 0; }
}
@media (max-width: 400px) {
  .hat__share .hat__keys .key--lg { padding: 0 10px; font-size: 10px; letter-spacing: .1em; }
  .hat__gone { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hat__track i { will-change: auto; }
}
@media (forced-colors: active) {
  .hat__track { border: 1px solid CanvasText; }
  .hat__track i { background: Highlight; }
}