:root {
  --espresso: #2a1a12;
  --espresso-2: #3c281d;
  --crema: #f3e7d3;
  --kraft: #efe6d6;
  --kraft-line: #dccdb5;
  --card: #fbf7ef;
  --ink: #2a1a12;
  --ink-2: #6e5a4b;
  --ink-3: #9a8775;
  --accent: #c2541b;
  --accent-deep: #9e3f0f;
  --accent-wash: #fbe4d3;
  --ok: #6e8b4e;
  --serif: Bitter, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--kraft);
  color: var(--ink);
  font: 500 15px/1.4 var(--sans);
}
h2, h3, h4, p, ol { margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- top bar ---------- */

.top { background: var(--espresso); color: var(--crema); padding-bottom: 92px; }
.top-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 28px;
}
.brand { font: 800 25px/1 var(--serif); letter-spacing: -.01em; }
.who { margin-left: auto; font-size: 13.5px; opacity: .78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who a { color: inherit; text-underline-offset: 3px; }
.btn-add {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--crema);
  color: var(--espresso);
  font-weight: 700;
  cursor: pointer;
}
.btn-add:hover { background: #fff6e6; }

.wrap { max-width: 1120px; margin: -92px auto 0; padding: 0 28px 72px; }

/* ---------- the to-reorder ticket ---------- */

.ticket {
  position: relative;
  background: #fffdf8;
  padding: 18px 24px 26px;
  font-family: var(--mono);
  box-shadow: 0 10px 28px rgba(42, 26, 18, .24);
  /* the torn bottom edge of a till receipt */
  --tooth: 12px;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / var(--tooth) var(--tooth) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / var(--tooth) var(--tooth) repeat-x;
}
.ticket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 2px dashed var(--ink);
}
.ticket-head h2 { font: 600 19px/1.2 var(--mono); }
.ticket-count { font-size: 13.5px; color: var(--ink-2); }
.ticket-list {
  list-style: none;
  columns: 2;
  column-gap: 40px;
  margin-top: 8px;
}
.ticket-list li { break-inside: avoid; }
.ticket-list a {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 2px;
  color: inherit;
  text-decoration: none;
  font-size: 13.5px;
  border-radius: 3px;
}
.ticket-list a:hover { background: var(--accent-wash); }
.t-name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.t-dots { flex: 1 1 10px; min-width: 10px; border-bottom: 1.5px dotted var(--ink-3); transform: translateY(-3px); }
.t-qty { flex: none; font-weight: 600; color: var(--accent-deep); }
.t-out { background: var(--accent-deep); color: #fff; padding: 0 5px; }
.t-level { flex: none; font-size: 12px; color: var(--ink-2); }
.ticket-note { padding: 6px 2px; font-size: 13.5px; color: var(--ink-2); column-span: all; }

/* ---------- search and filter ---------- */

.tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 22px 0 8px; }
.search { flex: 1 1 260px; max-width: 360px; }
.search input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1.5px solid var(--kraft-line);
  border-radius: 9px;
  background: var(--card);
  font-size: 16px;
}
.search input:focus { outline: 2px solid var(--espresso); outline-offset: -1px; border-color: transparent; }
.cats { display: flex; gap: 6px; flex-wrap: wrap; }
.cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--kraft-line);
  border-radius: 99px;
  background: transparent;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.cat:hover { border-color: var(--ink-3); }
.cat span { font: 500 11.5px/1 var(--mono); opacity: .6; }
.cat[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--crema); }

/* ---------- stock list ---------- */

.shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: start;
}
.cat-head {
  grid-column: 1 / -1;
  padding: 14px 2px 1px;
  font: 700 16.5px/1.2 var(--serif);
}
.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 10px 10px 10px 14px;
  background: var(--card);
  border-radius: 11px;
  box-shadow: 0 1px 0 rgba(42, 26, 18, .1);
  scroll-margin: 16px;
}
.row-info { min-width: 0; }
.row-name { font: 700 15px/1.25 var(--sans); overflow-wrap: anywhere; }
.meter { height: 4px; margin: 6px 0 5px; border-radius: 3px; background: var(--kraft-line); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--ok); border-radius: 3px; transition: width .2s ease; }
.row-sub { font-size: 12.5px; color: var(--ink-2); }

.row-low { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px #eeb18c; }
.row-low .meter { background: #f0c9ae; }
.row-low .meter span { background: var(--accent); }
.row-low .row-sub { color: var(--accent-deep); font-weight: 700; }

.row-count { display: flex; align-items: center; gap: 2px; }
.step {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--espresso);
  color: var(--crema);
  font: 500 24px/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}
.step:hover:not(:disabled) { background: var(--espresso-2); }
.step:active:not(:disabled) { transform: scale(.95); }
.step:disabled { background: var(--kraft-line); color: var(--ink-3); cursor: default; }
.qty {
  min-width: 50px;
  text-align: center;
  font: 800 25px/1 var(--serif);
  font-variant-numeric: tabular-nums;
}

.trash {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.trash:hover { color: var(--accent-deep); }
.row-confirm {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
}
.row-confirm span { flex: 1 1 100%; overflow-wrap: anywhere; }
.row-error {
  grid-column: 1 / -1;
  margin-top: 5px;
  padding: 8px 10px;
  background: var(--espresso);
  color: var(--crema);
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 700;
}
.row-error a { color: #ffd9a8; }
.flash { animation: flash 1.3s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: inset 0 0 0 2.5px var(--espresso); } 100% { box-shadow: inset 0 0 0 0 transparent; } }

.none { padding: 28px 2px; color: var(--ink-2); font: 500 17px/1.3 var(--serif); }

/* ---------- dialog ---------- */

.sheet {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  border: 0;
  border-radius: 14px;
  padding: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(42, 26, 18, .4);
}
.sheet::backdrop { background: rgba(42, 26, 18, .5); }
#add-form { display: grid; gap: 12px; }
#add-form h2 { font: 800 23px/1.2 var(--serif); }
#add-form label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 700; min-width: 0; }
#add-form input {
  width: 100%;
  height: 44px;
  padding: 0 11px;
  border: 1.5px solid var(--kraft-line);
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
  font-weight: 500;
}
#add-form input:focus { outline: 2px solid var(--espresso); outline-offset: -1px; border-color: transparent; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.form-error { padding: 9px 11px; background: var(--accent-wash); color: var(--accent-deep); border-radius: 7px; font-weight: 700; font-size: 13.5px; }
.btn-solid, .btn-plain, .btn-danger {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.btn-solid { background: var(--espresso); color: var(--crema); }
.btn-solid:disabled, .btn-danger:disabled { opacity: .6; cursor: default; }
.btn-plain { background: transparent; box-shadow: inset 0 0 0 1.5px var(--kraft-line); }
.btn-danger { background: var(--accent-deep); color: #fff; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 10px 15px;
  border-radius: 9px;
  background: var(--espresso);
  color: var(--crema);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 26px rgba(42, 26, 18, .4);
}

/* ---------- phone ---------- */

@media (max-width: 760px) {
  .top-inner { padding: 12px 14px; gap: 10px; }
  .wrap { padding: 0 12px 76px; }
  .ticket { padding: 14px 15px 24px; }
  .ticket-list { columns: 1; }
  .t-level { display: none; }
  .tools { padding-top: 16px; gap: 10px; }
  .search { max-width: none; flex-basis: 100%; }
  .cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px; scrollbar-width: none; }
  .cats::-webkit-scrollbar { display: none; }
  .shelf { grid-template-columns: minmax(0, 1fr); }
  .step { width: 54px; height: 54px; font-size: 27px; }
  .qty { min-width: 42px; font-size: 24px; }
  .row { gap: 4px 8px; padding-left: 12px; }
}