/* Shop plate: the look of the sign-in screen and the floor kiosks.
   Big and bold stays (gloved hands, across the room), with the finish of a well-made tool:
   - a faint knurled texture instead of flat black (the crosshatch on a tool handle);
   - buttons as machined keys: the same strong colors, a bevel (light top edge, darker bottom), a lip underneath and a
     real press-down;
   - panels as steel plates with a fine edge; inputs recessed like a pocket cut into the plate;
   - safety-amber focus rings so a keyboard or scanner user always sees where they are.
   Colors keep their meaning on the floor: green go, amber pause, red stop. No web fonts: kiosks work offline. */

:root {
  --plate-base: #12161c;      /* graphite */
  --plate: #1b212a;           /* a panel */
  --plate-edge: #2c3542;      /* its edge */
  --steel-text: #e8ecf1;
  --steel-muted: #9aa6b3;
  --safety: #f5b324;          /* focus, attention */
  --knurl: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 7px),
           repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 7px);
  --shop-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
  background-color: var(--plate-base);
  /* a work light from above, on knurled steel */
  background-image: radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.07), transparent 60%), var(--knurl);
  background-attachment: fixed;
  color: var(--steel-text);
}
body, button, input, select, textarea { font-family: var(--shop-font); }
h1, h2 { letter-spacing: -0.015em; }
h1 { font-weight: 800; }

/* ---- Machined keys ---- */
.btn, .plate-btn, button.key {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.45) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 46%, rgba(0, 0, 0, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),  /* top bevel */
    inset 0 -3px 0 rgba(0, 0, 0, 0.2),        /* lower bevel */
    0 6px 0 rgba(0, 0, 0, 0.5),               /* the lip */
    0 12px 20px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  letter-spacing: 0.01em;
  transition: transform 80ms ease, box-shadow 80ms ease, filter 120ms ease;
}
.btn:hover, .plate-btn:hover, button.key:hover { filter: brightness(1.06); }
.btn:active, .plate-btn:active, button.key:active {
  transform: translateY(5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.35);
}
.btn:focus-visible, .plate-btn:focus-visible, button.key:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid var(--safety);
  outline-offset: 3px;
}
.btn:disabled, .plate-btn:disabled { filter: saturate(0.4) brightness(0.8); cursor: not-allowed; }

/* ---- Steel plates and recessed fields ---- */
.plate {
  background-color: var(--plate);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 30%);
  border: 1px solid var(--plate-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 48px rgba(0, 0, 0, 0.45);
}
.recessed, .plate input, .plate select {
  background: #0d1015;
  border: 1px solid #323c4a;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);
  color: #fff;
}
.plate input:focus, .plate select:focus { border-color: var(--safety); }

@media (prefers-reduced-motion: reduce) {
  .btn, .plate-btn, button.key { transition: none; }
}