* {
  box-sizing: border-box;
}

/* Any element toggled via `hidden` in JS must actually disappear — but any
   component rule that sets its own `display` (e.g. `display: inline-flex`)
   silently overrides the browser's built-in "hidden means display:none"
   default, since a page's own CSS always wins over that built-in rule. This
   keeps [hidden] winning no matter what other display value an element
   gets. Kept even though the technician UI no longer toggles anything: the
   admin screens will, and this is a trap worth not re-learning. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: -apple-system, system-ui, sans-serif;
  background: #14161a;
  color: #e8e8e8;
}

h1 {
  margin: 0;
  padding: 16px;
  font-size: 20px;
  background: #1a1d24;
  color: #f4f4f4;
  border-bottom: 3px solid #33e0c4;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* An auto margin here, not justify-content: space-between on the parent.
   space-between worked while there were exactly two children; with three it
   would spread the job code into the middle of the bar instead of keeping
   it tucked against the van. */
.app-title {
  margin-inline-end: auto;
  flex-shrink: 0;
}

/* A button now (tapping it opens the van picker, mirroring the job code)
   but it must still READ as the plain text it has always been — the owner
   asked for this corner to persist unchanged. So: every button default
   stripped, nothing added. */
#current-van-name {
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: #b8bcc4;
  /* Never squashed by a long job code — the van is the identity and has to
     stay readable; the job code truncates instead (see below). */
  flex-shrink: 0;
  touch-action: manipulation;
}

#current-van-name:active { opacity: 0.6; }

/* The job code: a bordered pill rather than underlined text (owner's call,
   2026-10-12 — "change the underline into a box that surrounds the job
   code"). The box does the same job the underline did, signalling this is
   tappable, without the slightly broken-link look an underline gives a
   value. Same font and weight as the van name so they read as a matched
   pair, just dimmer and a touch smaller: the van is who this phone is, the
   job is where it happens to be. */
#current-job {
  min-width: 0;
  padding: 3px 9px;
  border: 1px solid #3a3f4a;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  /* A long site name truncates here rather than pushing the van off the
     right edge — "Smith Residence Main Building Phase 2" is a realistic
     thing for someone to type. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  touch-action: manipulation;
}

#current-job:active {
  color: #b8bcc4;
  border-color: #6b7280;
}

/* flex + gap, not text-align:center + margin-right on each link — the
   fixed per-item margin looked balanced only by coincidence while every
   label was a similar length ("Export CSV"/"Import CSV"); once "CSV"
   became the longer "Spreadsheet" (ADR-011), the row's remaining slack
   collected unevenly around the fixed-width margins instead of being
   shared. gap distributes the space between items evenly regardless of
   how long each label is, and wrap+center keeps it balanced if it drops
   to a second line on a narrow phone. */
footer {
  padding: 20px 16px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
}

/* Quick-jump strip, one pill per category — sticky so it stays reachable no
   matter how far down the list you've scrolled. h2 below is ALSO sticky
   (top: 0, to show which category you're currently in); giving this one a
   higher z-index and offsetting h2's top by this bar's height (50px — see
   the math in .category-nav-btn) makes them stack instead of overlapping. */
#category-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
  background: #14161a;
  border-bottom: 2px solid #363c47;
  -webkit-overflow-scrolling: touch;
}

.category-nav-btn {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 2px solid var(--accent);
  border-radius: 16px;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  touch-action: manipulation;
}

.category-nav-btn:active {
  background: var(--accent);
  color: #14161a;
}

/* Lefty mode — a per-device preference (app.js, LEFTY_KEY) for holding the
   phone in your left hand. direction: rtl is the same mechanism browsers
   use for right-to-left languages; it re-lays-out every flex row here
   (category headings, item rows, the add-item row) start-to-end in the
   opposite direction with no JS/DOM changes needed, AS LONG AS spacing in
   those rows uses logical properties (margin-inline-end, not
   margin-right) rather than physical ones — see the notes on those rules.
   Scoped to #inventory only, not the whole page: the "Vanventory" title,
   the footer links, and the who's-this picker aren't part of what the
   owner asked to mirror. Item names/category names get text-align: left
   forced back — they're still English text, so only their *position*
   should flip, not which way the text itself reads. */
.lefty #inventory {
  direction: rtl;
}

.lefty .item-name,
.lefty .category-name {
  /* direction, not just text-align: a name that happens to start with a
     digit (e.g. "22-4, White — 100ft") gets its characters visually
     reordered by the browser's bidi algorithm under direction: rtl even
     though plain Latin letters don't — text-align alone doesn't stop that.
     Caught live: names starting with a letter looked fine, only the
     digit-first ones were scrambled, until this was added. */
  direction: ltr;
  text-align: left;
}

.lefty .item-name {
  /* item-name's own padding-inline-end (see the base rule above) now
     resolves against the direction: ltr just forced on this element, i.e.
     physical right — which under the mirror is the row's OUTER edge, not
     the gap toward the +/− buttons on its left. Set the real gap
     explicitly instead of trusting the logical property to keep flipping.
     .category-name doesn't need this — its spacing comes from h2's own
     `gap`, not its own padding, so it isn't affected the same way.
     Caught live as "the name text is crowding the buttons," not assumed
     safe because the base rule looked direction-agnostic on paper. */
  padding-inline-end: 0;
  padding-left: 12px;
}

/* Text you TYPE INTO must stay left-to-right under lefty mode. direction:
   rtl on a live input hands the browser's bidi algorithm control over
   character order and visibly scrambles English text mixed with numbers and
   commas ("22-4, White" renders as "White ,22-4"). Caught live during edit
   mode, and applied here pre-emptively when the "Where?" prompt (goal 31)
   reintroduced a text input to #inventory — a job code like "24-1180" is
   exactly the digit-and-hyphen shape that triggers it. */
.lefty .where-row input {
  direction: ltr;
  text-align: left;
}

footer a {
  color: #8a8f98;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

h2 {
  margin: 0;
  padding: 10px 16px;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: #1a1d24;
  border-bottom: 2px solid var(--accent);
  position: sticky;
  /* Offset by #category-nav's own height (8+32+8+2 = 50px) so this sticks
     just below the jump strip instead of hiding behind it. */
  top: 50px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
}

section {
  /* Tapping a .category-nav-btn calls scrollIntoView() on this section —
     without this, "start" would align its top edge with the very top of the
     viewport, sliding it right under the sticky #category-nav bar. */
  scroll-margin-top: 50px;
}

.category-name {
  flex: 1;
}
.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #1c1f26;
}

.item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 18px 16px 18px 10px;
  min-height: 44px; /* comfortable phone tap target */
  border-bottom: 2px solid #363c47;
  font-size: 19px;
}

.item-name {
  flex: 1;
  /* A flex item's default minimum width is "as wide as its content," which
     is what let a long name drag the whole row wider than the screen
     instead of wrapping — this overrides that so it can actually shrink. */
  min-width: 0;
  overflow-wrap: break-word;
  /* Logical, not padding-right, so this gap survives lefty mode's
     direction: rtl on #inventory (see below) instead of landing on the
     wrong edge of the row. NOTE: this alone isn't sufficient — .item-name
     itself gets direction: ltr forced back on under .lefty (to stop digit-
     first names from visually scrambling, see that rule), which means
     inline-end resolves against ITS OWN forced-ltr direction, not the
     mirrored row's — so the .lefty override below sets the physical side
     explicitly rather than trusting inline-end here to keep flipping. */
  padding-inline-end: 12px;
  color: #f4f4f4;
}

.item-qty {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  /* Fixed, not min-width — min-width let a double-digit count (e.g. 10)
     grow the box wider than a single digit does, which shifted the − and
     + buttons around it left/right depending on the number. A fixed width
     wide enough for two digits plus a little breathing room (so the
     second digit doesn't crowd the + button's border) means the box is
     the same size regardless of the number inside, so neither button ever
     moves. flex-shrink: 0 stops it from being squeezed back down either.
     2.2ch (not the original 1.5ch, not the first fix's 3ch) — just enough
     to fit two digits without crowding + on double digits, without
     pushing the buttons noticeably farther apart than the original
     spacing. */
  width: 2.2ch;
  flex-shrink: 0;
  text-align: center;
  color: #ffffff;
  background: none;
  border: none;
  padding: 0;
  touch-action: manipulation; /* tappable now — avoid iOS double-tap-to-zoom, see qty-btn */
}

.qty-btn {
  width: 44px;
  height: 44px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  touch-action: manipulation;
}

.qty-btn:active {
  background: var(--accent);
  color: #14161a;
}
.add-item-btn {
  height: 40px;
  padding: 0 14px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  touch-action: manipulation;
}

.add-item-btn:active {
  background: var(--accent);
  color: #14161a;
}

/* ADR-005 "who's this?" picker — no per-category --accent here, so it uses
   the same cyan as the h1 border. */
.who-heading {
  padding: 24px 16px 8px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #f4f4f4;
}

.user-list {
  list-style: none;
  margin: 0;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-list li {
  display: flex;
  gap: 8px;
}

.user-btn {
  flex: 1;
  height: 48px;
  border: 2px solid #33e0c4;
  border-radius: 8px;
  background: transparent;
  color: #33e0c4;
  font-size: 16px;
  font-weight: 700;
  touch-action: manipulation;
}

.user-btn:active {
  background: #33e0c4;
  color: #14161a;
}

/* The "Where?" prompt's free-text row (ADR-014). The shortcut buttons above
   it reuse .user-btn, so only this row needed new rules. */
.where-row {
  display: flex;
  gap: 8px;
  padding: 16px;
}

.where-row input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #3a3f4a;
  border-radius: 8px;
  background: #14161a;
  color: #e8e8e8;
  /* 16px minimum: iOS Safari zooms the whole page when focusing an input
     with smaller text, which on a phone-first app reads as the layout
     breaking. */
  font-size: 16px;
}

.where-row input:focus {
  outline: none;
  border-color: #33e0c4;
}

.where-row button {
  flex-shrink: 0;
  height: 48px;
  padding: 0 20px;
  border: 2px solid #33e0c4;
  border-radius: 8px;
  background: transparent;
  color: #33e0c4;
  font-size: 16px;
  font-weight: 700;
  touch-action: manipulation;
}

.where-row button:active {
  background: #33e0c4;
  color: #14161a;
}
/* Usage screen (ADR-012) — reuses .who-heading for its title, same as the
   who's-this picker, so it doesn't need its own heading style. */
.usage-back-link {
  display: block;
  margin: 0 16px 16px;
  color: #33e0c4;
  font-weight: 700;
  text-decoration: none;
}

.usage-log-list {
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usage-log-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "item amount" "when when";
  align-items: baseline;
  column-gap: 10px;
  padding: 10px 12px;
  border: 1px solid #3a3f4a;
  border-radius: 8px;
}

.usage-log-item {
  grid-area: item;
  font-weight: 600;
}

.usage-log-amount {
  grid-area: amount;
  color: #ff8a5c;
  font-weight: 700;
}

.usage-log-when {
  grid-area: when;
  color: #b8bcc4;
  font-size: 13px;
}

.usage-log-empty {
  padding: 16px;
  color: #b8bcc4;
  text-align: center;
}