/* Colours from assets/paradiddle-icon.svg, plus --stop, which is the one warm red
   the icon lacks: Stop has to be unmistakable from behind a kit. */
:root {
  color-scheme: light;
  --wood: #4a2d1a;
  --wood-dark: #2e1a0e;
  --head: #f4e6cd;
  --head-shadow: #dcc29c;
  --rim-light: #ecd9b8;
  --rim: #a98a60;
  --rim-dark: #6d5233;
  --ink: #14181f;
  --lug: #55585c;
  --stop: #b3261e;
  --bar-height: 3.5rem;
  --navbot-height: 4.5rem;
  --tap: 3rem;
}
html { background: var(--head); }
body { font-family: system-ui, sans-serif; max-width: 32rem; margin: 0 auto; padding: calc(var(--bar-height) + env(safe-area-inset-top) + 1rem) calc(1rem + env(safe-area-inset-right)) calc(var(--navbot-height) + env(safe-area-inset-bottom) + 1rem) calc(1rem + env(safe-area-inset-left)); text-align: center; color: var(--ink); background: var(--head); }
#session { display: block; width: 100%; height: 45vh; font-size: 3rem; font-weight: bold; border: 0.5rem solid var(--rim); border-radius: 1rem; background: var(--wood); color: var(--head); }
#session[aria-pressed="true"] { background: var(--stop); border-color: var(--wood-dark); color: var(--head); }
#strokes { display: grid; gap: 0.25rem; margin: 1rem 0; }
#strokes span { padding: 0.75rem 0; border-radius: 0.25rem; background: var(--rim-light); color: var(--ink); font-size: 1.25rem; }
#strokes .accent { font-weight: bold; text-decoration: underline; }
#strokes .now { background: var(--ink); color: var(--head); }
#strokes small { color: var(--rim-dark); }
#strokes .now small { color: var(--head); }
label { display: block; margin-bottom: 1rem; }
input { width: 100%; accent-color: var(--wood); }
input:disabled { accent-color: var(--lug); }
#session-status { min-height: 3em; font-size: 1.25rem; font-weight: bold; }
.note { font-size: 0.875rem; color: var(--rim-dark); margin: 0.5rem 0; }
#details-close { border-color: var(--wood); color: var(--wood); }
#tab-details button { min-height: var(--tap); font-size: 1rem; padding: 0.5rem 1rem; border: 1px solid var(--wood-dark); border-radius: 0.5rem; background: var(--wood); color: var(--head); }
#tab-details button:disabled { border-color: var(--rim); background: var(--head-shadow); color: var(--wood); }
:focus-visible { outline: 0.2rem solid var(--ink); outline-offset: 0.15rem; }
#listening { margin-top: 2rem; border-top: 1px solid var(--rim); padding-top: 1rem; }
#listen-status { min-height: 1.5em; }
/* Above the tabs, and held under the top bar, so that it shows on all of them however far they scroll. */
#session-warning { position: sticky; top: calc(var(--bar-height) + env(safe-area-inset-top)); z-index: 1; margin: 0 0 1rem; padding: 0.5rem; font-weight: bold; color: var(--stop); background: var(--head); }
#session-warning:empty { display: none; }
#readout { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; text-align: left; }
#readout dt { font-weight: bold; color: var(--wood); }
#readout dd { margin: 0; }
small { color: var(--rim-dark); }
#rudiment-list { list-style: none; margin: 0; padding: 0; text-align: left; }
#rudiment-list li { margin-bottom: 0.75rem; padding: 0.75rem; border: 1px solid var(--rim); border-radius: 0.5rem; }
#rudiment-list li[aria-current="true"] { border: 0.2rem solid var(--wood); background: var(--rim-light); }
#rudiment-list h2 { margin: 0 0 0.25rem; font-size: 1.125rem; color: var(--wood); }
#rudiment-list p { margin: 0.25rem 0; }
#rudiment-list .sticking { font-size: 1.125rem; word-spacing: 0.15em; }
#rudiment-list .accent { font-weight: bold; text-decoration: underline; }