/* warm monochrome. ink grounds, bone speaks on ink, ash labels only — never a sentence
   somebody has to read. no blue, no orange, no accent, no gradient: the restraint is the brand. */
:root {
  --ink:   #17130D;
  --ash:   #8C8474;
  --bone:  #E9DCC2;
  --paper: #F2ECDE;
  --rule:  rgba(233, 220, 194, .14);   /* bone at low alpha — a tint of the palette, not a new hue */
  --max: 46rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: Overpass, ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  padding: 3rem 1.25rem 6rem;
}

.wrap { max-width: var(--max); margin: 0 auto; }

/* ---- the checkerboard. always 4x4, ink + bone, a tad. never a texture, never wallpaper. */
.check { display: grid; grid-template-columns: repeat(4, 7px); width: 28px; flex: 0 0 auto; }
.check i { display: block; height: 7px; background: transparent; }
.check i.on { background: var(--bone); }

/* ---- masthead */
header { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.5rem; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.lede { font-size: 1.25rem; font-weight: 300; letter-spacing: -.01em; margin-bottom: .875rem; }
.plain { color: var(--ash); max-width: 34rem; }
.plain + .plain { margin-top: .5rem; }

/* ---- steps */
section { border-top: 1px solid var(--rule); padding-top: 1.25rem; margin-top: 2.5rem; }
.label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ash); margin-bottom: .875rem;
}
.note { color: var(--ash); font-size: .875rem; margin-top: .75rem; }

/* ---- controls */
button, select, textarea, input {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--rule); border-radius: 2px;
}
button { cursor: pointer; padding: .5rem .9rem; }
button:hover:not(:disabled) { border-color: var(--ash); }
button:disabled { opacity: .38; cursor: not-allowed; }
button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--bone); outline-offset: 1px; }

.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.go {
  background: var(--bone); color: var(--ink); border-color: var(--bone);
  font-weight: 700; padding: .7rem 1.5rem; margin-top: 1.5rem;
}
.go:hover:not(:disabled) { background: var(--paper); border-color: var(--paper); }

/* ---- pickable cards: role and model. text states the caveat; there are no badges here. */
.picks { display: grid; gap: .5rem; }
.picks.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 30rem) { .picks.two { grid-template-columns: 1fr; } }
.pick {
  text-align: left; padding: .8rem .9rem; display: block; width: 100%;
  border: 1px solid var(--rule); border-radius: 2px; background: transparent;
}
.pick[aria-pressed="true"] { border-color: var(--bone); background: rgba(233, 220, 194, .06); }
.pick b { font-weight: 600; display: block; }
.pick span { color: var(--ash); font-size: .8125rem; display: block; margin-top: .1rem; }

select, textarea { padding: .5rem .6rem; width: 100%; }
select { appearance: none; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%),
                    linear-gradient(135deg, var(--ash) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea { min-height: 7rem; resize: vertical; line-height: 1.45; }
.field { margin-bottom: .875rem; }
.field > .label { margin-bottom: .375rem; }

.hidden { display: none !important; }

/* ---- the real waveform. drawn from decoded peaks — never a decorative squiggle,
   and never a stand-in for one we haven't got. */
canvas { width: 100%; height: 56px; display: block; border: 1px solid var(--rule); border-radius: 2px; }

/* ---- results */
.take { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1rem; }
.take h3 { font-size: .9375rem; font-weight: 600; margin-bottom: .5rem; }
audio { width: 100%; margin: .5rem 0; }
.info {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; color: var(--ash); word-break: break-word; line-height: 1.7;
}
.warn { color: var(--bone); border-left: 2px solid var(--ash); padding-left: .75rem; margin-top: .75rem; font-size: .875rem; }

a { color: var(--bone); }
footer { margin-top: 4rem; border-top: 1px solid var(--rule); padding-top: 1rem; }