/* Black on white, monospace, thin lines. Status only through characters. */
:root { --fg: #000; --bg: #fff; --muted: #888; }
* { box-sizing: border-box; }
html { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 16px; }
body { margin: 0 auto; max-width: 600px; padding: 16px; color: var(--fg); background: var(--bg); line-height: 1.5; }
a { color: inherit; }
h1 { font-size: 1.25rem; margin: 1rem 0; }
h2 { font-size: 1rem; margin: 1.5rem 0 0; border-bottom: 1px solid var(--fg); }
small, .muted { color: var(--muted); }

header, nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; border-bottom: 1px solid var(--fg); }
header .home { margin-right: auto; font-weight: bold; text-decoration: none; }
nav a, header .home { min-height: 48px; line-height: 48px; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; min-height: 48px; cursor: pointer; }
button.main { display: block; width: 100%; margin: 1rem 0; border: 1px solid var(--fg); font-weight: bold; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; padding: .5rem 0; border-bottom: 1px solid var(--fg); }
.list .done, .list .paused { color: var(--muted); }
.mark { white-space: pre; }

.note { border: 1px solid var(--fg); padding: .75rem; font-weight: bold; }
.message { border: 1px solid var(--fg); padding: .5rem; }
.errorlist { list-style: none; margin: 0; padding: 0; }
.errorlist li::before { content: "! "; }

label { display: block; margin: .75rem 0; }
input, select, textarea { display: block; width: 100%; min-height: 48px; padding: .5rem; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--fg); border-radius: 0; }
input[type=checkbox], input[type=radio] { display: inline; width: auto; min-height: 0; }
label.inline input, label.inline select { display: inline; width: 5rem; }
label.inline input[type=time] { width: 7rem; }
fieldset { border: 1px solid var(--fg); margin: 1rem 0; }

/* Rhythm: radio buttons stacked; only the chosen preset shows its fields.
   Browsers without :has() simply show all fields. */
.rhythm label.choice { margin: 0; min-height: 48px; line-height: 48px; }
.rhythm .opts { margin: 0 0 .5rem 1.5rem; }
@supports selector(:has(*)) {
  .rhythm .opts { display: none; }
  .rhythm:has(input[value=hourly]:checked) .opts[data-kind=hourly],
  .rhythm:has(input[value=weekly]:checked) .opts[data-kind=weekly],
  .rhythm:has(input[value=monthly]:checked) .opts[data-kind=monthly],
  .rhythm:has(input[value=yearly]:checked) .opts[data-kind=yearly] { display: block; }
}
.days div, fieldset > div { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.days label, fieldset > div label { margin: .25rem 0; min-height: 48px; line-height: 48px; }

.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-top: 1rem; }
.qr-grid figure { margin: 0; }
.qr-grid svg { display: block; width: 100%; height: auto; }
.qr-grid figcaption { word-break: break-all; }
.qr-single svg { display: block; width: 100%; max-width: 280px; height: auto; }
.url { word-break: break-all; font-weight: normal; }
header form, .list form { display: inline; }