/* Load-bearing, and first. Every layout rule below sets an explicit `display`,
   which otherwise beats the UA stylesheet's `[hidden] { display: none }` and
   renders every hidden state at once. */
[hidden] {
  display: none !important;
}

/*
 * A fixed shell, as the prototype draws it: the page itself never scrolls, and
 * the two columns scroll inside it. A stall device sits on a stand, and the
 * ingredient being corrected must not scroll out from under the panel that is
 * correcting it.
 */
body.stock-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow: hidden;
}

.stock-blob {
  position: fixed;
  z-index: 0;
  top: -150px;
  right: -130px;
  width: 430px;
  height: 430px;
  border-radius: 48% 52% 58% 42%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--color-accent-300),
    var(--color-accent-200) 55%,
    transparent 75%
  );
  filter: blur(16px);
  opacity: 0.55;
  pointer-events: none;
}

/*
 * Named, not blanket.
 *
 * Two children of this body position themselves and must keep doing so: the
 * blob is `fixed` decoration, and `.gate` is `fixed; inset: 0` so it covers
 * the page rather than sitting in the flow — a passer-by must not be able to
 * read the stall's counts around it. A `body > *` rule setting `position:
 * relative` demoted both into ordinary blocks, which put 430px of empty
 * decoration above the header and dropped the gate halfway down the document.
 */
/*
 * Selected by class, not by element. `> section` looked specific enough and was
 * not: the gate is a `<section>` too, so the rule demoted it from `fixed` to
 * `relative` and dropped it into the middle of the document — a sign-in card
 * with the stall's counts readable above and below it. Naming what this rule is
 * actually for is what keeps it from catching the next element somebody adds.
 */
body.stock-page > header,
body.stock-page > main,
body.stock-page > p,
body.stock-page > .route-state {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Header — the pattern every staff surface repeats
 * ------------------------------------------------------------------ */

body.stock-page > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* `Stock.dc.html` sets --space-4 between the header's groups and --space-3
     inside the title group. */
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-3);
}

/*
 * The title group the artboard draws: back pill, stall name, surface name, on
 * `flex: 1`. That is what pushes the service pill, the peer pair, Operations
 * and Log out to the right — the bar is a title on the left and everything
 * else on the right, not five things packed left with a gap at the end.
 */
.header-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The only chevron in the bar, and it names its parent. */
.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  color: var(--color-accent-700);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}

.back-pill svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stock-page .nav-brand {
  margin: 0;
  font-size: 24px;
}

.surface-name {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.service-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--color-accent-2-200);
  color: var(--color-accent-2-800);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
}

.service-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}

/* No `margin-left: auto`: `.header-title` carries the `flex: 1` that does the
   pushing, as the artboard draws it. The gap is the header's own --space-4,
   which is what separates Operations from Log out there. */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Log out is always last and reads just "Log out": the role name is already
   on the surface and does not need repeating on the way out. */
/* `.peer-link` is gone from this list: Stock's peer is the shared
   `.peer-pair` now, which brings its own shape. */
.admin-link,
.stock-page .text-button {
  display: inline-flex;
  align-items: center;
  /* The artboard sets 8px between the glyph and the word. Without it the
     arrow touched "Log out" and read as one smudged mark. */
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: none;
  color: var(--color-accent-700);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.stock-page .text-button {
  border-color: transparent;
}

.admin-link:hover,
.stock-page .text-button:hover {
  background: var(--color-accent-100);
}

/* ------------------------------------------------------------------ *
 * Shell states
 * ------------------------------------------------------------------ */

/* Position only — background, radius and color are the shared Shell States
   band's (organic-system.css) to set, not this surface's to override. A
   blanket rule here once let this surface's accent-100 note colour win over
   the band's own offline semantics; positioning is the only thing genuinely
   per-surface. */
.connectivity-status {
  margin: 0 var(--space-6) var(--space-3);
}

.route-state,
.empty-state {
  margin: 0 var(--space-6) var(--space-3);
  padding: var(--space-4);
  border-radius: 32px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-size: 13.5px;
  line-height: 1.5;
}

.route-state {
  background: var(--color-surface);
  color: var(--color-text);
}

.route-state h2 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: 27px;
  line-height: 1.12;
}

.stock-page .eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-700);
}

.stock-page .status {
  margin: 0 var(--space-6);
  font-size: 13px;
  color: var(--color-accent-700);
}

.stock-page .status:empty {
  margin: 0;
  visibility: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Low and out
 * ------------------------------------------------------------------ */

.low-alerts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-6) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 28px;
  background: var(--color-accent-100);
}

.low-alert-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.low-alert-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14.5px;
}

.low-alert-text {
  opacity: 0.75;
}

.low-alert {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-accent-800);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

/* Out is the darker mark, and the word is in the label either way — the dot
   is never the only thing saying which of the two this is. */
.low-alert::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-accent);
}

.low-alert-out::before {
  background: var(--color-neutral-800);
}

.low-alerts-note {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* ------------------------------------------------------------------ *
 * Two columns
 * ------------------------------------------------------------------ */

.stock-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.stock-columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 404px;
  gap: var(--space-3);
  padding: 0 var(--space-6) var(--space-6);
}

/* The panel drops under the list rather than beside it once there is no room
   for both — a 404px column beside a squeezed list helps nobody. */
@media (max-width: 900px) {
  .stock-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stock-list-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The list scrolls; the tabs above it and the add row below it do not, so the
   way to add an ingredient is always reachable however long the list runs. */
.ingredient-rows,
.portion-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.ingredient-rows::-webkit-scrollbar,
.portion-rows::-webkit-scrollbar,
.stock-detail-column::-webkit-scrollbar {
  width: 0;
}

.stock-tabs {
  display: flex;
  gap: var(--space-2);
}

.stock-tabs button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.stock-tabs button[aria-pressed="true"] {
  background: var(--color-accent-600);
  border-color: var(--color-accent-700);
  color: var(--color-bg);
}

/* ------------------------------------------------------------------ *
 * Ingredient rows
 * ------------------------------------------------------------------ */

.ingredient-rows,
.portion-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

/* Portions left is a dense reading list rather than a set of cards, and the
   artboard sets it 2px apart — the rows read as one table, not ten tiles. */
.portion-rows {
  gap: 2px;
}

.ingredient-button {
  width: 100%;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: 26px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ingredient-row[data-selected="true"] .ingredient-button {
  border-color: var(--color-accent-600);
}

.ingredient-row[data-stock-state="low"] .ingredient-button,
.ingredient-row[data-stock-state="out"] .ingredient-button {
  border-color: var(--color-accent-300);
}

.ingredient-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ingredient-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
}

.ingredient-figure {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.ingredient-free {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 23px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ingredient-row[data-stock-state="low"] .ingredient-free,
.ingredient-row[data-stock-state="out"] .ingredient-free {
  color: var(--color-accent);
}

.ingredient-of,
.ingredient-held,
.ingredient-threshold {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.ingredient-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-accent-2-200);
  color: var(--color-accent-2-800);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 12.5px;
}

.ingredient-row[data-stock-state="low"] .ingredient-tag {
  background: var(--color-accent-200);
  color: var(--color-accent-800);
}

.ingredient-row[data-stock-state="out"] .ingredient-tag,
.ingredient-row[data-stock-state="uncounted"] .ingredient-tag {
  background: var(--color-neutral-800);
  color: var(--color-neutral-100);
}

/* Free as a share of opening, so a glance answers how far through the stall
   is without reading either number. */
.ingredient-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--color-accent-200);
  overflow: hidden;
}

.ingredient-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent-2-600);
}

.ingredient-row[data-stock-state="low"] .ingredient-bar > span {
  background: var(--color-accent);
}

.ingredient-row[data-stock-state="out"] .ingredient-bar > span,
.ingredient-row[data-stock-state="uncounted"] .ingredient-bar > span {
  background: var(--color-neutral-800);
}

.ingredient-notes {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ------------------------------------------------------------------ *
 * Portions left
 * ------------------------------------------------------------------ */

.portion-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 22px;
  background: var(--color-surface);
}

.portion-row[data-portion-state="sold-out"],
.portion-row[data-portion-state="untracked"] {
  opacity: 0.62;
}

.portion-label {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.portion-name {
  font-size: 15px;
}

.portion-limit {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.portion-figure {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.portion-count {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.portion-row[data-portion-state="sold-out"] .portion-count,
.portion-row[data-portion-state="thin"] .portion-count {
  color: var(--color-accent);
}

.portion-unit {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.portion-state {
  flex: none;
  min-width: 96px;
  text-align: right;
  font-size: 12.5px;
  color: var(--color-accent-700);
}

/* ------------------------------------------------------------------ *
 * Add an ingredient
 * ------------------------------------------------------------------ */

/* A visible label above the pair, as `Stock.dc.html` draws it. */
.add-ingredient {
  display: grid;
  gap: 6px;
}

.add-ingredient label {
  font-size: 13px;
  color: var(--color-text);
}

.add-ingredient-row {
  display: flex;
  gap: var(--space-2);
}

.stock-page .input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}

/* ------------------------------------------------------------------ *
 * The selected ingredient
 * ------------------------------------------------------------------ */

.stock-detail-column {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  scrollbar-width: none;
}

.stock-detail-column > .detail-card {
  flex: none;
}

.detail-card {
  padding: var(--space-4);
  border-radius: 30px;
  background: var(--color-surface);
}

.detail-card h2 {
  margin: 0;
  font-size: 22px;
}

.detail-card h3 {
  margin: 0;
  font-size: 17px;
}

.detail-line,
.mode-hint,
.portion-use-note,
.percent-example {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.detail-held,
.last-change {
  margin: var(--space-2) 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-accent-700);
}

.correction-modes {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.correction-modes button {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.correction-modes button[aria-pressed="true"] {
  background: var(--color-accent-600);
  border-color: var(--color-accent-700);
  color: var(--color-bg);
}

.correction-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.correction-form .input {
  min-height: 52px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* Refused at the field and left there, naming what was typed. */
.correction-error {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: 18px;
  background: var(--color-accent-200);
  color: var(--color-accent-900);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Steppers
 * ------------------------------------------------------------------ */

.stepper-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.stepper-button {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.stepper-button:hover {
  background: var(--color-accent-100);
}

.stepper-value {
  min-width: 56px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.follow-default {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-700);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.percent-example {
  flex: 1;
  font-size: 12px;
}

/* 72px, not the 56px the low mark uses: this value carries a percent sign. */
#percent-value {
  min-width: 72px;
}

/* ------------------------------------------------------------------ *
 * One portion uses
 * ------------------------------------------------------------------ */

.portion-use-list {
  display: grid;
  gap: 2px;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.portion-use-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 14px;
}

.portion-use-row .stepper-row {
  margin-top: 0;
}

/* 40×40, as the prototype draws them. */
.portion-use-row .stepper-button {
  width: 40px;
  height: 40px;
}

.portion-use-row .stepper-value {
  min-width: 34px;
  font-size: 18px;
}

.portion-use-add {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-accent-200);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.chip:hover {
  background: var(--color-accent-100);
}

/* ------------------------------------------------------------------ *
 * Controls and focus
 * ------------------------------------------------------------------ */

/* `Stock.dc.html:152,163-240` composes `.btn .btn-primary` and
   `.btn .btn-secondary` — the shared Organic buttons, which are set in the
   heading face. These were `font: inherit`, which is Figtree, so every commit
   on this surface was drawn in the body face while the same control on every
   other Organic surface was not. The rest of the rule is this surface's own
   sizing and stays. */
.stock-page button.primary,
.stock-page button.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}

.stock-page button.primary {
  background: var(--color-accent);
  color: var(--color-neutral-100);
  box-shadow: var(--shadow-sm);
}

.stock-page button.primary:hover {
  background: var(--color-accent-600);
}

.stock-page button.secondary {
  background: transparent;
  border-color: var(--color-accent-300);
  color: var(--color-accent-800);
}

.stock-page button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* `:focus` as well as `:focus-visible`: this surface moves focus itself after
   a correction, and a control focused programmatically does not reliably match
   `:focus-visible`. */
.stock-page :focus,
.stock-page :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* ------------------------------------------------------------------ *
 * Quick amounts
 * ------------------------------------------------------------------ */

/*
 * The four figures a stall actually types. Received offers round deliveries;
 * Recount offers what this ingredient opened with, half of it, what is on hand
 * now, and zero — the numbers somebody standing at a shelf reaches for.
 *
 * 38px, below the 44px used elsewhere, and the prototype means it: these are
 * shortcuts beside a full-size field that does the same job, not the only way
 * to reach the value.
 */
.quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.quick-amount {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.quick-amount:hover {
  background: var(--color-accent-100);
}

/* Icons are Lucide, stroked rather than filled, at the system's own weight. */
.stock-page .icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stepper-button .icon {
  width: 17px;
  height: 17px;
}

.portion-use-row .stepper-button .icon {
  width: 15px;
  height: 15px;
}

.chip .icon {
  width: 13px;
  height: 13px;
  color: var(--color-accent-700);
}

.header-actions .icon {
  width: 14px;
  height: 14px;
}

/* The tag's own dot, 7px, beside a word that already says the same thing. */
.ingredient-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}