:root {
  --green: #1f6f43;
  --green-dark: #17553a;
  --red: #b3261e;
  --text: #1c1c1c;
  --muted: #5f6368;
  --border: #d0d4d8;
  /* Text boxes need a stronger border (3:1 contrast) so they are easy to spot. */
  --input-border: #80868b;
  --background: #f4f5f6;
  --card: #ffffff;
  --button-text: #ffffff;
  --green-tint: #e8f3ec;
  --red-tint: #fbe9e7;
  /* Lets the browser style scrollbars and form controls to match the theme. */
  color-scheme: light dark;
}

/* Dark mode follows the device setting. Only the colors change. */
@media (prefers-color-scheme: dark) {
  :root {
    --green: #5cc28a;
    --green-dark: #7fd3a4;
    --red: #f28b82;
    --text: #e8eaed;
    --muted: #a0a6ad;
    --border: #3c4043;
    --input-border: #757b81;
    --background: #121212;
    --card: #1e1f21;
    --button-text: #0d1f15;
    --green-tint: #1b3326;
    --red-tint: #3a1f1d;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  color: var(--text);
  background: var(--background);
}

header,
main {
  max-width: 40rem;
  margin: 0 auto;
}

header {
  text-align: center;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  color: var(--green);
}

header p {
  margin: 0 0 1rem;
  color: var(--muted);
}

label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

input {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  /* 16px or larger keeps iOS from zooming in on focus. */
  font-size: 1rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
}

button {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--button-text);
  background: var(--green);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

button:hover {
  background: var(--green-dark);
}

/* A clear outline around whatever has keyboard focus. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.4;
  cursor: default;
}

button.secondary {
  color: var(--red);
  background: transparent;
  border: 1px solid var(--red);
}

#area-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: -0.5rem 0 1rem;
}

#area-choices button {
  flex: 1;
  padding: 0.5rem;
  color: var(--green);
  background: var(--card);
  border: 1px solid var(--green);
}

#area-choices button:hover {
  background: var(--green-tint);
}

.scan-row {
  display: flex;
  gap: 0.5rem;
}

.scan-row input {
  flex: 1;
}

.scan-row button {
  margin-bottom: 1rem;
}

#empty {
  color: var(--muted);
  text-align: center;
}

footer {
  max-width: 40rem;
  margin: 2rem auto 0;
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
}

#items {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

#items li {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.item-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.upc {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.remove {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  color: var(--red);
  background: transparent;
}

.remove:hover {
  background: var(--red-tint);
}

.counters {
  display: grid;
  /* minmax(0, 1fr) lets the columns shrink below their content width instead of overflowing. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

/* The sign type name sits on its own line above the - count + controls,
  which keeps two counters side by side even on small phones. */
.counter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.25rem;
}

.counter-name {
  grid-column: 1 / -1;
  font-size: 0.875rem;
}

.counter button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1.25rem;
}

.count {
  font-weight: 700;
  text-align: center;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.actions button {
  flex: 1;
}

/* Hidden on screen but still read by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}