:root {
  --bg: #12131a; --panel: #1c1e28; --ink: #e8e8ef; --muted: #8a8fa3;
  --accent: #e60012; --ok: #4ade80; --line: #2a2d3a;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
main { padding: 1rem 1.5rem; max-width: 82rem; margin: 0 auto; }
h1 { font-size: 1.25rem; margin: 0 0 1rem; }

.topnav {
  display: flex; gap: .75rem; align-items: center;
  padding: .75rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line);
}
.topnav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.topnav form { margin-left: auto; }

input, button {
  font: inherit; padding: .45rem .6rem; border-radius: .4rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  min-height: 38px;
}
button { background: var(--accent); border-color: var(--accent); font-weight: 600; }

.add-row, .search { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* Fixed basis, no grow — on a wide screen these otherwise stretch to ~480px
   each for what is at most an 8-character code. */
.add-row input[name="set_code"] { flex: 0 1 9rem; }
.add-row input[name="number"]   { flex: 0 1 11rem; }
.add-row input[name="qty"]      { flex: 0 0 5rem; text-align: right; }
.search input { flex: 1 1 12rem; }

table.inventory { width: 100%; border-collapse: collapse; }
table.inventory th, table.inventory td {
  padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left;
  vertical-align: middle;
}
/* Headers and the short identifier columns must never wrap — "Buy ¥" breaking
   across two lines was what made the header row look broken. */
table.inventory th { white-space: nowrap; color: var(--muted); font-size: .8rem;
                     text-transform: uppercase; letter-spacing: .04em; }
table.inventory td.id { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Money right-aligned with tabular figures so the columns read as a column. */
table.inventory th.num, table.inventory td.num {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
table.inventory td.act { text-align: right; }

/* NOT display:flex — a flex <td> drops out of the table layout algorithm and
   the column widths stop agreeing with the header row. Keep it a table cell
   and lay the image out inline instead. */
td.card img { width: 38px; border-radius: .2rem; vertical-align: middle;
              margin-right: .55rem; }
td.card { line-height: 1.35; }
.results img, .candidate img { width: 40px; border-radius: .2rem; }

/* Qty stepper: input and its Set button on one line, not stacked. */
.qty-form { display: flex; gap: .35rem; align-items: center; }
.qty-form input[name="qty"] { width: 4.5rem; text-align: right; }
.qty-form button, td.act button { padding: .45rem .7rem; }
.card-detail img { width: 200px; max-width: 60%; border-radius: .4rem; }

tr.state-unresolved, tr.state-stale { color: var(--muted); }
tr.state-stale td { text-decoration: line-through; }
/* The strikethrough marks the card as delisted — it must not run through the
   badge that says so, nor through the qty control. */
tr.state-stale .badge, tr.state-stale .qty-form, tr.state-stale td.act {
  text-decoration: none;
}
.badge {
  font-size: .7rem; font-style: normal; padding: .1rem .35rem;
  border: 1px solid var(--muted); border-radius: .8rem; color: var(--muted);
}
.badge.pickup { border-color: var(--ok); color: var(--ok); }
.sgd td { color: var(--muted); font-size: .85rem; }
.as-of td { color: var(--muted); font-size: .85rem; }
.as-of.stale td { color: var(--accent); font-weight: 600; }
.error { color: var(--accent); }

.results { list-style: none; padding: 0; }
.results li {
  display: flex; gap: .6rem; align-items: center;
  padding: .5rem 0; border-bottom: 1px solid var(--line);
}
.results a { display: flex; gap: .6rem; align-items: center; color: var(--ink);
             text-decoration: none; flex: 1; }
.results .buy { font-weight: 700; }

.candidate { display: flex; gap: .5rem; align-items: center; margin: .4rem 0; }
.login { display: grid; gap: .75rem; max-width: 20rem; margin: 4rem auto; }

/* The inventory table is wide; let it scroll rather than the page. */
@media (max-width: 640px) {
  table.inventory { display: block; overflow-x: auto; white-space: nowrap; }
  main { padding: .75rem; }
}