/* Light only: this app reports pass and fail by colour, and one palette means
   the two read the same on every device. */
:root { color-scheme: light }
html { background: #fbfbfa; color: #1b1b19 }
body { font: 13px/1.5 system-ui, sans-serif; margin: 0 auto; padding: 2.5rem 1.25rem; max-width: 34rem }
header { text-align: center; margin: 0 0 1.75rem }
h1 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem }
p.lede { margin: 0; color: #6b6b65 }
nav { text-align: center }
a { color: #1b1b19 }
form, .run { display: flex; gap: .5rem; align-items: center; justify-content: center }
form { margin: 0 0 .75rem }
.run { margin: 0 0 1.5rem }
input, button { font: inherit; padding: .4rem .65rem; border: 1px solid #d5d5cf; border-radius: 5px; background: #fff; color: inherit }
button { cursor: pointer; background: #1b1b19; color: #fbfbfa; border-color: #1b1b19 }
button[disabled] { cursor: default; background: #e4e4de; color: #9a9a92; border-color: #e4e4de }
#tally { color: #6b6b65; font-variant-numeric: tabular-nums }
ol { list-style: none; margin: 0; padding: 0 }
li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .5rem; padding: .4rem 0; border-top: 1px solid #ebebe5 }
li:first-child { border-top: 0 }

/* A row that carries acts puts them in a third column, so the name and what it
   stands at keep the width they have on every other list and the buttons sit
   beside them rather than under. */
#register li { grid-template-columns: 1.2rem 1fr auto; align-items: center }
#register .acts { display: flex; gap: .35rem; white-space: nowrap }
#register .acts button { padding: .2rem .55rem; font-size: .9em }
#register .acts button[data-act="remove"] { background: #fff; color: #a11; border-color: #e0c9c9 }
/* A form asking for more than a word per field stacks: the row above suits two
   or three controls and puts five off the side of the page. The label carries
   its own text, so each one is the block and the input fills it. */
#clone { display: block; margin: 0 0 1.5rem }
#clone label { display: block; margin: 0 0 .6rem; color: #6b6b65 }
#clone input { display: block; width: 100%; margin-top: .2rem; box-sizing: border-box }
#clone button { width: 100%; margin-top: .4rem }

.mark { text-align: center; line-height: 1.5 }
li[data-state="running"] .mark::before { content: "…"; color: #6b6b65 }
li[data-state="passed"]  .mark::before { content: "✓"; color: #157f3b }
li[data-state="failed"]  .mark::before { content: "✗"; color: #a11 }
li[data-state="unclaimed"] .mark::before { content: "—"; color: #b08900 }
li[data-state="running"] b { color: #6b6b65 }
b { font-weight: 600; font-family: ui-monospace, monospace; font-size: .95em }
.why { display: block; color: #6b6b65; white-space: pre-wrap; word-break: break-word; margin-top: .1rem }
li[data-state="failed"] .why { color: #a11 }
li[data-state="unclaimed"] .why { color: #b08900 }
.err { color: #a11 }