/* Palette "concrete". Swap these tokens to restyle the whole site. */
:root {
  --bg: #dcdcd7;
  --fg: #121212;
  --muted: #5d5d59;
  --line: #c3c3bd;
  --tile: #cecec8;
  --accent: #e84a00;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); }
body { margin: 0; font: 13px/1.5 var(--mono); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1000px; margin: 0 auto; padding-inline: 20px; padding-block: 0 64px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

header { padding-block: 56px 32px; display: grid; gap: 6px; }
h1 { font: 500 13px var(--mono); margin: 0; }
.intro { color: var(--muted); margin: 0; max-width: 58ch; }

.chips { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-block: 0 16px; }
.chip { font: inherit; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 0; }
.chip::before { content: "["; }
.chip::after { content: "]"; }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); padding: 4px 8px; }
.chip[aria-pressed="true"]::before, .chip[aria-pressed="true"]::after { content: ""; }

ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 90px 80px 150px; gap: 14px; align-items: center;
  padding: 10px 8px; border-bottom: 1px solid var(--line); }
li:not(.head):hover { background: var(--tile); }
.head { border: 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-block: 0 8px; }
.empty { display: block; color: var(--muted); padding-block: 24px; }

.ph { width: 44px; aspect-ratio: 1; max-width: 100%; background: var(--tile); display: grid; place-items: center;
  overflow: hidden; color: var(--muted); text-transform: uppercase; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

.name a { color: var(--fg); text-decoration: none; }
.name a:hover { color: var(--accent); text-decoration: underline; }
.name small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.cat, .price { color: var(--muted); font-variant-numeric: tabular-nums; }
.price, .end { text-align: right; }
.act { font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; }
.act:hover { text-decoration: underline; }
.act:disabled { color: var(--muted); cursor: wait; }
.tag { color: var(--muted); }
.tag.taken { color: var(--accent); }
.is-done .name a, .is-done .name > span { color: var(--muted); text-decoration: line-through; }
.is-done .ph { opacity: .5; }

.form { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); }
.form input { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); padding: 6px 8px; width: 16ch; }
.form .err { color: var(--accent); flex-basis: 100%; }

footer { color: var(--muted); padding-block: 32px 0; font-size: 12px; }

@media (max-width: 640px) {
  li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cat, .price, .head { display: none; }
  .form { grid-column: 1 / -1; }
}