/* /ear/ only: layout B of design/ear-options.html (the chart is the hero: a big readout of the difference, the run
   drawn live as a staircase, the two answers side by side under it, a stats row). Shared pieces (.intro,
   .rules-line, .sheet, .sheet-h, .btn, kbd, .sr, focus ring) come from site.css. The parts sit in the page in the
   order they are seen, so reading order and tab order match the screen. Narrow first; the wide layout starts at
   821px, like the rest of the site. */
:root { --miss: var(--soon); --ok-flash: #a9dcbd; --bad-flash: #f3b6ae; --screen-ink: #dfe6ec; }

.nht { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--body); max-width: 46em; }   /* under the instrument, so that Start is on a phone's first screen */

.tool { display: grid; gap: 20px; min-width: 0; }
.earinst { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; align-content: start; scroll-margin-top: 8px; }
.earinst:focus { outline: none; }
.earinst > * { min-width: 0; }
.m-lab { display: block; margin: 0 0 6px; font: 500 13px var(--mono); color: var(--mute); }

/* Settings: sound, range, next pair, volume, then Start. Shown before a run and after it. */
.setup { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); background: var(--sheet); border: 1px solid var(--rule); padding: 12px 14px 14px; }
/* With JavaScript off the settings do nothing and no chart is drawn: only the readout stays, and it says what is needed. */
@media (scripting: none) { .setup, .earinst .chart, .readout .ro-state { display: none; } }
.grp { min-width: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opts button { font: 500 14px var(--mono); min-height: 44px; padding: 8px 14px; border: 1px solid var(--field); background: var(--sheet); color: var(--ink); cursor: pointer; }
.opts button:hover { background: var(--tint); }
.opts button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.vol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.vol p { margin: 0; flex: 1 1 15em; min-width: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.snd-line { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); max-width: 60em; }
.snd-line.err { color: var(--bad); }
.go { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 64px; padding: 10px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--sheet); font: 600 19px var(--sans); cursor: pointer; }
.go:hover { background: var(--ink-hover); }
.go small { font: 500 12.5px var(--mono); color: var(--screen-ink); }
.keys-line { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--mute); }

/* Readout (the big number) */
.readout { --ro: clamp(60px, 11cqi, 132px); min-width: 0; background: var(--sheet); border: 1px solid var(--ink); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.readout:focus { outline: none; }
.ro-lab { margin: 0; font: 500 13px var(--mono); color: var(--mute); }
.ro-val { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; font-family: var(--mono); font-weight: 500; font-size: var(--ro); line-height: .95; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ro-unit { font-size: max(14px, .16em); letter-spacing: .04em; color: var(--mute); margin-left: 12px; }
.ro-state { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.ro-state:empty { display: none; }
.earinst[data-state="run"] .ro-state { display: none; }   /* narrow: the number, the chart and the answers share one screen */
.readout noscript { display: block; }
.ro-off { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--bad); }

/* Result reading: plain words and the cents ruler */
.reading { display: grid; gap: 10px; background: var(--sheet); border: 1px solid var(--rule); padding: 12px 14px; }
.reading p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); max-width: 46em; text-wrap: pretty; }
.reading .rd-2 { color: var(--body); font-size: 14.5px; }
.ruler { margin: 2px 0 0; }
.ruler-plot { position: relative; height: 62px; }
.ruler-plot svg, .plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }

/* Chart: the run, one mark per question (site chart style: mono labels, hairline grid, ink marks) */
.chart { margin: 0; min-width: 0; background: var(--sheet); border: 1px solid var(--ink); }
.plot { position: relative; height: 212px; }
.chart text, .ruler text { font: 500 11.5px var(--mono); fill: var(--mute); }
.chart .tlab, .ruler .tlab { fill: var(--ink); font-weight: 600; }
.chart .empty { font: 400 13.5px var(--sans); fill: var(--mute); }
.chart .gl, .ruler .gl { stroke: var(--rule); stroke-width: 1; fill: none; }
.chart .semi { stroke: var(--field); stroke-dasharray: 4 3; }
.chart .stair { stroke: var(--field); stroke-width: 1.25; fill: none; }
.chart .ok { fill: var(--ink); }
.chart .no { stroke: var(--miss); stroke-width: 2.2; stroke-linecap: square; fill: none; }
.chart .rv { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.chart .nextpt { fill: var(--sheet); stroke: var(--blue); stroke-width: 1.5; }
.chart .tl, .ruler .tl { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.ruler .you { fill: var(--blue); } .ruler .tk { stroke: var(--ink); stroke-width: 1; }

/* The answer area: two lights that show when each sound plays, the feedback line, the two answers.
   After an answer the whole area turns green (right) or red (wrong): one short flash from a stronger shade to a
   pale one, which then stays until the next pair. The word and the shape in the feedback line say the same thing,
   so the colour is never the only sign. */
.ansarea { display: grid; gap: 8px; padding: 8px 10px 10px; background: var(--sheet); border: 1px solid var(--rule); }
.ansarea.is-right { background-color: var(--ok-bg); border-color: var(--ok); animation: ear-right .45s ease-out 1; }
.ansarea.is-wrong { background-color: var(--bad-bg); border-color: var(--bad); animation: ear-wrong .45s ease-out 1; }
@keyframes ear-right { from { background-color: var(--ok-flash); } to { background-color: var(--ok-bg); } }
@keyframes ear-wrong { from { background-color: var(--bad-flash); } to { background-color: var(--bad-bg); } }
.lights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lt { height: 36px; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--sheet); font: 500 13px var(--mono); color: var(--mute); }
.lt.on { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.fb { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.fb svg { flex: none; width: 26px; height: 26px; }
.fb .fb-ok { fill: var(--ok); } .fb .fb-ok-m { fill: none; stroke: var(--sheet); stroke-width: 2.5; }
.fb .fb-no { fill: var(--sheet); stroke: var(--bad); stroke-width: 2; } .fb .fb-no-m { fill: none; stroke: var(--bad); stroke-width: 2.5; }
.fb .fb-wait { fill: none; stroke: var(--rule); stroke-width: 2; }
.answers { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ans { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 72px; padding: 10px 14px; margin: 0; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); font: 600 22px var(--sans); text-align: left; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ans:hover { background: var(--tint); }
.ans.picked { background: var(--press); box-shadow: inset 0 0 0 1px var(--ink); }
.ans svg { width: 22px; height: 22px; fill: currentColor; }

.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.bar .keys { margin: 0; flex: 1 1 100%; font-size: 13.5px; line-height: 1.8; color: var(--mute); }
.textbtn { min-height: 44px; padding: 4px 2px; border: 0; background: none; color: var(--blue); font: 500 14.5px var(--sans); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.textbtn:hover { text-decoration-thickness: 2px; }
.hint { margin: 0; padding: 10px 12px; background: var(--note-bg); color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.runopts { padding: 10px 14px 12px; background: var(--sheet); border: 1px solid var(--rule); }

.redo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.redo .btn { min-height: 52px; padding-inline: 28px; font-size: 16.5px; }
.redo p { margin: 0; font-size: 14px; color: var(--mute); }

/* Statistics row */
.stats { min-width: 0; border: 1px solid var(--ink); }
.stats dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.stats dl > div { background: var(--sheet); padding: 10px 12px 12px; min-width: 0; }
.stats dt { font: 500 12px var(--mono); color: var(--mute); }
.stats dd { margin: 0; padding: 4px 0 0; font: 500 19px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; }
.stats .u { color: var(--mute); font-size: .85em; }

/* The cents scale, in plain words */
.scale { min-width: 0; }
.scale dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.scale dt, .scale dd { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.5; }
.scale dt { font: 500 13px var(--mono); color: var(--ink); border-right: 1px solid var(--rule); white-space: nowrap; text-align: right; padding-top: 11px; }
.scale dd { color: var(--body); }
.scale dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* How this measures */
.how { min-width: 0; }
.how dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule); }
.how dl > div { background: var(--sheet); padding: 12px 14px 14px; min-width: 0; }
.how dt { margin: 0 0 4px; font: 500 13px var(--mono); color: var(--mute); }
.how dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--body); max-width: 70ch; overflow-wrap: anywhere; }
.how .rd { font: 500 14px var(--mono); color: var(--ink); white-space: nowrap; }
.how .rd.wait { font: italic 400 14.5px var(--sans); color: var(--mute); }

/* Reduced motion: no flash. The colour is there at once and stays until the next pair. (site.css shortens every
   transition and animation to a hundredth of a millisecond under this setting; here they are switched off.) */
@media (prefers-reduced-motion: reduce) {
  .ansarea, .ansarea.is-right, .ansarea.is-wrong { animation: none !important; transition: none !important; }
}

@media (min-width: 821px) {
  .setup { grid-template-columns: auto auto auto minmax(0, 1fr); gap: 14px 32px; align-items: start; padding: 14px 16px 16px; }
  .grp-vol { grid-column: 4; grid-row: 1 / span 2; }      /* the volume note is three lines: the sound line sits beside it, under the choices */
  .snd-line { grid-column: 1 / 4; grid-row: 2; align-self: end; }   /* in the page it comes after Start (a phone shows Start sooner); here it keeps its row */
  .keys-line { grid-column: 1 / -1; grid-row: 4; }
  .go { grid-column: 1 / -1; grid-row: 3; width: auto; min-width: 22em; justify-self: start; }
  .readout { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lab lab" "val state"; align-items: end; gap: 10px 40px; padding: 18px 20px 20px; }
  .ro-lab { grid-area: lab; } .ro-val { grid-area: val; }
  .ro-state, .earinst[data-state="run"] .ro-state { display: block; grid-area: state; max-width: 30em; padding-bottom: 8px; }
  .ro-state:empty { display: none; }
  .readout noscript { grid-column: 1 / -1; }
  .plot { height: 330px; }
  .ansarea { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: center; gap: 10px 20px; padding: 10px 12px 12px; }
  .answers { grid-column: 1 / -1; }
  .lt { height: 44px; }
  .ans { min-height: 68px; padding-inline: 18px; gap: 14px; }
  .stats dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats dl > div { padding: 12px 16px 14px; }
  .stats dd { font-size: 22px; }
  .scale dl { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .scale dl > :nth-last-child(-n+4) { border-bottom: 0; }
  .scale dd:nth-of-type(odd) { border-right: 1px solid var(--rule); }
  .how dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd last entry takes the whole row: no empty cell */
}
@media (max-width: 520px) {
  .keys, .keys-line, .ans kbd { display: none; }
  .opts button { flex: 1 1 auto; padding-inline: 9px; }   /* the four sounds fit one row and fill it */
}
@media (max-width: 380px) {
  .opts button { padding-inline: 6px; font-size: 13.5px; }   /* still one row on a 360 px phone */
}
@media (max-width: 340px) {
  .opts button[data-sound] { flex-basis: 40%; }   /* narrower still: two rows of two, not three and one */
}