/* =========================================================================
   StockChief design system

   One vocabulary for the whole product. The application had grown a stylesheet
   per mission — 381 distinct block classes and a "product clarity" patch layer
   loaded on top to correct the layer beneath it — so the same idea looked
   different depending on which month the screen was built in.

   This file is the single source of truth for how StockChief looks. It redefines
   the tokens the older stylesheet already consumes, so every existing screen
   moves with it rather than splitting into an old half and a new half, and it
   adds the components the redesigned screens are built from.

   Order matters: this loads after app.css and is meant to win.

   Contents
     1. Tokens        colour, type, space, radius, elevation, motion
     2. Foundations   page rhythm, headings, focus, scrollbars
     3. Primitives    button, input, badge, table, panel, alert
     4. Patterns      page header, inbox item, timeline, lifecycle, stat strip
     5. Shell         sidebar, topbar, mobile bar
     6. States        empty, loading, error
     7. Responsive    laptop, tablet, phone
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Tokens */

/*
 * Aliases, not definitions.
 *
 * design.css owns the palette, the scale and the shape of everything shared.
 * This sheet keeps its own vocabulary — it is written in terms of `--space-4`
 * and `--text-sm` — so every one of those names is mapped onto the system
 * here. Nothing below this block had to change, and nothing below it can drift
 * from the rest of the product any more.
 */
:root {
  --content-max: var(--page-w);

  --line-strong: var(--line-3);
  --accent-ink:  var(--brand-2);

  --info:      #1D5FD6;
  --info-bg:   #EBF1FD;
  --info-line: #BFD3F7;
  --ok-line:     var(--good-line);
  --warn-line:   var(--flag-line);
  --danger-line: var(--bad-line);

  --radius-xs:   var(--r-xs);
  --radius-sm:   var(--r-sm);
  --radius:      var(--r-lg);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --radius-pill: var(--pill);

  --shadow-sm: var(--sh-1);
  --shadow:    var(--sh-2);
  --shadow-md: var(--sh-2);
  --shadow-lg: var(--sh-3);
  --shadow-xl: var(--sh-4);
  --ring: 0 0 0 3px rgba(91, 75, 232, .16);

  --space-1:  var(--s1);
  --space-2:  var(--s2);
  --space-3:  var(--s3);
  --space-4:  var(--s4);
  --space-5:  var(--s5);
  --space-6:  var(--s6);
  --space-8:  var(--s7);
  --space-10: var(--s8);
  --space-12: var(--s8);
  --space-16: var(--s9);

  --text-2xs: var(--t-2xs);
  --text-xs:  var(--t-xs);
  --text-sm:  var(--t-sm);
  --text-md:  var(--t-md);
  --text-lg:  var(--t-lg);
  --text-xl:  var(--t-xl);
  --text-2xl: var(--t-2xl);
  --text-3xl: var(--t-3xl);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.55;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast:   120ms;
  --normal: 200ms;
}

/*
 * Reduced motion means less decoration, not a frozen application.
 *
 * The blanket version of this rule stopped every animation on the page, which
 * included the one that says StockChief is still working. The spinner froze
 * mid-rotation into a static arc under a button, beneath the words "StockChief is
 * looking through your records…", and stayed there for the length of a model
 * call. Someone reading that sees an application that has hung.
 *
 * So progress keeps moving. What it does instead of spinning is fade, which
 * carries the same "still going" without the rotation somebody asked not to be
 * shown. Everything decorative still stops dead.
 */
@media (prefers-reduced-motion: reduce) {
  *:not(.is-busy)::before, *:not(.is-busy)::after,
  *:not(.skeleton):not(.is-busy) {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* A whole ring rather than the arc, because an arc that is not turning just
     looks like a letter C somebody left behind. */
  .is-busy::after {
    animation: busy-fade 1.1s ease-in-out infinite !important;
    border-color: var(--accent) !important;
  }
  .btn--primary.is-busy::after,
  .operator-command__send.is-busy::after,
  .tell__send.is-busy::after {
    border-color: #fff !important;
  }
  .skeleton { animation: busy-fade 1.6s ease-in-out infinite !important; }
}

@keyframes busy-fade {
  0%, 100% { opacity: .28; }
  50% { opacity: 1; }
}

/* ----------------------------------------------------------- 2. Foundations */

body {
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
h2 { font-size: var(--text-xl); letter-spacing: -.014em; }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

/* Tables. One table pattern in the product. Dense, quiet lines, numbers right
   aligned, the whole row clickable when the row represents a record. */
table, .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
thead th {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------------------------------------------ 7. Responsive */

/* How the frame and the shared components fold is design.css's business,
   including the 44px touch-target floor. What is left here is what these
   screens do differently. */

@media (max-width: 720px) {
  .inbox-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .inbox-item__do .btn { width: 100%; }
  .timeline-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .timeline-who { display: none; }
}

.topbar-help {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.topbar-help:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }

/* Tell StockChief on a phone is the raised centre of the bar — the one thing you
   reach for rather than a place you navigate to. */
.mobilenav-tell { color: var(--accent-ink); }
.mobilenav-tell svg { color: var(--accent); }

/* ------------------------------------------------------ Home: the briefing */

/* The verdict is the largest thing on the page because it is the sentence the
   page exists to say. Everything else on Home is context for it. */
.briefing {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 0 var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--line);
}
.briefing__greeting {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
}
.briefing__verdict {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semi);
  letter-spacing: -.022em;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}
.briefing--attention .briefing__verdict { color: var(--ink); }
.briefing--paused .briefing__verdict { color: var(--warn); }
.briefing__sub { margin: 0; color: var(--muted); font-size: var(--text-md); max-width: 56ch; }

.briefing__state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex: none;
  padding-top: var(--space-1);
}
.briefing__pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--ok);
}
.briefing__pulse.is-paused { color: var(--warn); }
.briefing__checked { font-size: var(--text-xs); color: var(--muted-soft); }

/* Tell StockChief — one field, always in the same place, the width of the page.
   It is the product's main verb, so it gets the room a main verb deserves. */
.tell__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.tell__form:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.tell__mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.tell__input {
  flex: 1 1 auto;
  min-height: 34px;
  border: 0 !important;
  background: none;
  box-shadow: none !important;
  font-size: var(--text-md);
  padding: 0 var(--space-1);
}
.tell__input:focus { outline: none; }
.tell__attach {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  margin: 0;
}
.tell__attach:hover { background: var(--surface-3); color: var(--ink); }
.tell__attach input[type="file"] { display: none; }
.tell__send { flex: none; height: 34px; }
@keyframes foundry-spin { to { transform: rotate(360deg); } }
.ask-pending {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
}
.ask-pending[hidden] { display: none; }
.tell__status {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs); color: var(--ok);
}
.tell__examples {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3);
}
.tell__examples a {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--muted);
  text-decoration: none;
}
.tell__examples a:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-2); }

/* A quiet note is what an empty section says. One line, no box, no icon block
   — an empty section should take up as little room as it deserves. */
.quiet-note {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.section-foot { margin-top: var(--space-3); font-size: var(--text-sm); }

@media (max-width: 720px) {
  .briefing { flex-direction: column; gap: var(--space-4); }
  .briefing__state { align-items: flex-start; flex-direction: row; align-items: center; }
  .briefing__verdict { font-size: var(--text-2xl); }
  .tell__examples { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); }
  .tell__examples a { white-space: nowrap; }
}

/* Guide reference grid — plain columns, no card per paragraph. */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5) var(--space-8);
}
.guide-grid h3 { font-size: var(--text-sm); margin-bottom: var(--space-1); }
.guide-grid p { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-snug); }

/* --------------------------------------------------- Guidance and checklist */

/* The eyebrows and answer labels here were uppercase, which on a page that
   already shouts its section headings made the guidance read as the loudest
   thing on screen. Labels are labels again. */
.operating-guide__head .operator-lane__eyebrow,
.operating-next-answers dt {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--muted);
}
.operating-guide {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}
.operating-guide__head h2 { font-size: var(--text-lg); margin-top: var(--space-1); }

.setup-progress {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.setup-progress > summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 650;
}

.screen-guide {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.screen-guide__help summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 650;
  color: var(--ink-soft);
}
.screen-guide__help p {
  margin: var(--space-2) 0 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.screen-guide__state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}
.screen-guide__need {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.screen-guide__next {
  min-width: 0;
  font-size: var(--text-sm);
}
.screen-guide__next span { color: var(--ink-soft); }

.opening-grid { display: grid; gap: var(--space-4); }
.opening-grid__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.opening-grid__head h3, .opening-grid__head p { margin-top: 0; }
.input--qty { min-width: 5.5rem; max-width: 8rem; }

@media (max-width: 820px) {
  .screen-guide { grid-template-columns: 1fr; }
  .screen-guide__state { align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; }
}
.operating-next-answers { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.operating-next-answers dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--ink-soft); }
.operating-checklist { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.operating-step { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius); }
.operating-step.is-current { background: var(--accent-soft); }
.operating-step__number {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-3); color: var(--muted);
  font-size: var(--text-xs); font-weight: var(--weight-semi);
}
.operating-step.is-complete .operating-step__number { background: var(--ok-bg); color: var(--ok); }
.operating-step.is-current .operating-step__number { background: var(--accent); color: #fff; }
.operating-step__copy strong { font-size: var(--text-sm); }
.operating-step__copy p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--muted); }
.inbox-bar__count { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--ink-soft); }

/* One decision. The title and what happened carry it; why and the suggestion
   sit underneath in a quieter register; the decision being asked for is stated
   immediately beside the button that makes it. */
.need {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 268px);
  gap: var(--space-6);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.need:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.need--urgent { border-left: 3px solid var(--danger); }
.need--important { border-left: 3px solid var(--warn); }

.need__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  letter-spacing: -.012em;
  margin: var(--space-2) 0 var(--space-2);
}
.need .badge + .need__title { margin-top: var(--space-2); }
.need__happened {
  margin: 0;
  font-size: var(--text-md);
  color: var(--ink-soft);
  line-height: var(--leading-snug);
}

/* The supporting answers. Deliberately smaller than what happened — they are
   the reasoning, and somebody who already knows why can skip past them. */
.need__detail {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}
.need__detail dt {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 2px;
}
.need__detail dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-snug);
}

.need__decide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-left: var(--space-6);
  border-left: 1px solid var(--line-soft);
}
.need__ask { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: var(--leading-snug); }
.need__ask span {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: var(--space-1);
}
.need__decide .btn { width: 100%; }

@media (max-width: 900px) {
  /* The decision column becomes the bottom of the card rather than a squeezed
     sidebar — on a phone the button is the thing a thumb goes for. */
  .need { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .need__decide {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: var(--space-4);
  }
}

/* A refusal that still points somewhere. Quieter than the answer above it,
   because it is the consolation prize and should not compete with the reply. */
.dead-end {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}
.dead-end__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink-soft);
}
.dead-end__examples { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dead-end__more { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--muted); }

/* Suggestion chips — the one chip pattern, shared by Ask and Tell StockChief. */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--muted);
  text-decoration: none;
  min-height: 30px;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-2); text-decoration: none; }

/* ------------------------------------------------------ Per-screen guidance */

/* A thin band above the page, not a card competing with it. It answers "what
   is this screen and what should I do on it" and then gets out of the way. */
.screen-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.screen-guide__help > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-weight: var(--weight-medium);
}
.screen-guide__help > summary::-webkit-details-marker { display: none; }
.screen-guide__help > summary:hover { color: var(--ink); }
.screen-guide__help p {
  margin: var(--space-2) 0 0;
  max-width: 68ch;
  color: var(--ink-soft);
  line-height: var(--leading-snug);
}
.screen-guide__state { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.screen-guide__need strong { font-weight: var(--weight-semi); color: var(--ink-soft); }
.screen-guide__next { color: var(--muted); }
.screen-guide__next span { color: var(--muted-soft); }
.screen-guide__next strong { color: var(--ink-soft); font-weight: var(--weight-medium); }

@media (max-width: 720px) {
  .screen-guide { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .screen-guide__state { width: 100%; }
}

/* ------------------------------------------------------------- Filter bars */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
}
.filters .filter-search { flex: 1 1 260px; min-width: 200px; }
.filters .select, .filters select { width: auto; min-width: 150px; }

/* Table cells that carry a title and a subtitle. */
.cell-main { min-width: 220px; }
.cell-title {
  display: block;
  font-weight: var(--weight-semi);
  color: var(--ink);
  text-decoration: none;
}
.cell-title:hover { color: var(--accent-ink); }
.cell-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--muted-soft);
}
.cell-sub .mono { font-family: var(--mono); font-size: var(--text-2xs); }

/* The stacked-table treatment moved into design.css, which owns tables for
   the whole product. Two copies of it, at two different breakpoints, is how a
   table ended up stacking on a laptop. */

/* ============================================================== Purchasing */

.supplier-order { margin-bottom: var(--space-4); }
.supplier-order .panel-head h3 { font-size: var(--text-md); }
.supplier-order:last-of-type { margin-bottom: 0; }

.is-warn { color: var(--warn); }

/* Secondary destinations at the foot of a page. Places to go, not actions to
   take, so they are links in a row rather than four buttons of equal weight. */
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm);
}
.page-links a { color: var(--muted); text-decoration: none; }
.page-links a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ========================================================= Inventory: item */

/* The four headline numbers were four cards the size of a paragraph each,
   sitting in a flex row with the four action buttons wedged in beside them.
   They are one strip now; the actions are a row underneath, because they are
   things you can do rather than the first thing to read. */
.item-hero {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.item-hero__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}
.action-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.action-bar .btn { min-width: 0; }

.stat-value--quiet { color: var(--muted-soft); }

/* Where a variant is held. One quiet line, not a row of bordered chips. */
.cell-where { max-width: 240px; }
.where-list { font-size: var(--text-xs); color: var(--muted); }
.where-at strong { color: var(--ink-soft); font-weight: var(--weight-semi); }
.where-sep { margin: 0 var(--space-1); color: var(--line-strong); }

/* The metrics cell packs four figures and a button into one column. Keep the
   figures on a fixed rhythm so the header labels sit over their own numbers. */
.stock-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(52px, 1fr)) auto;
  gap: var(--space-3);
  align-items: center;
}
.stock-metrics-heading .stock-metrics-grid > span {
  text-align: right;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.stock-metric { display: block; text-align: right; font-variant-numeric: tabular-nums; }
.stock-metric-label { display: none; }
.stock-metric strong { font-weight: var(--weight-semi); color: var(--ink); }

/* The sidebar's section kickers were uppercase micro-labels above each heading
   — "SALES / Pricing", "PURCHASING / Reorder settings" — which made a 320px
   column shout twice per panel. */
.item-reorder__kicker {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted-soft);
}

/* A little more room for the record, a little less for the rail. */
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 296px; gap: var(--space-5); }

@media (max-width: 1100px) {
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .cell-where { max-width: none; }
  .stock-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .stock-metrics-heading { display: none; }
  .stock-metric { text-align: left; }
  .stock-metric-label {
    display: block;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-soft);
  }
}

/* ------------------------------------- Item record: layout, not decoration */

/*
 * The variants table was running underneath the sidebar and putting its own
 * "on order" column behind the pricing panel.
 *
 * A grid child is min-width:auto by default, so a card holding a wide table
 * refuses to shrink and simply overflows its column — and because the sidebar
 * paints after it, the sidebar wins. Every level between the grid and the
 * scroll container has to be allowed to shrink, which is what min-width:0 says.
 */
.grid--sidebar > *,
.grid--sidebar .grid,
.grid--sidebar .card,
.grid--sidebar .panel { min-width: 0; }

/* Where a variant is held. Place on the left, quantity on the right, aligned
   down the column so three locations can be compared at a glance. Boxed pills
   made the column too wide; running the words together made it prose. */
.cell-where { max-width: 260px; }
.where-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  margin: 0;
  font-size: var(--text-xs);
  align-items: baseline;
}
.where-list dt {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.where-list dd {
  margin: 0;
  text-align: right;
  color: var(--ink-soft);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .cell-where { max-width: none; }
  .where-list { grid-template-columns: minmax(0, 1fr) auto; }
}

/* The SKU code is the least-scanned column and the widest — CLASSIC-COTTON-T-
   SHIRT-B-SMALL is thirty characters of something nobody reads across. It gets
   the smallest type and is allowed to wrap, so the numbers keep the room. */
.inventory-variant-table td.mono,
.inventory-variant-table .mono {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
  max-width: 150px;
}
.inventory-variant-table td, .inventory-variant-table th { padding-left: var(--space-3); padding-right: var(--space-3); }
.inventory-variant-table .cell-main { min-width: 120px; }

/* ============================================================= Connections */

/* A connected system: name, where it came from, when it last said anything,
   and one status word. Everything else is on the connection's own page. */
.conn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
}
.conn:last-child { border-bottom: 0; }
.conn:hover { background: var(--surface-2); text-decoration: none; }
.conn__body { display: block; min-width: 0; }
.conn__name { display: block; font-weight: var(--weight-semi); color: var(--ink); }
.conn__meta { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--muted); }
.conn__issue { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--warn); }

/* One row per thing you could connect. The button is secondary: which one you
   want depends on which till you own, so none of them is the page's action. */
.provider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.provider:last-child { border-bottom: 0; }
.provider__id { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.provider__mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
}
.provider__id h3 { font-size: var(--text-md); }
.provider__what { margin: 2px 0 0; font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-snug); }
.provider__do { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.provider__form { display: flex; align-items: center; gap: var(--space-2); }
.provider__form .input { width: 210px; min-height: 34px; font-size: var(--text-sm); }
.provider__form .btn { height: 34px; }

.provider__more { grid-column: 1 / -1; }
.provider__more > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--muted-soft);
  padding-left: 44px;
}
.provider__more > summary::-webkit-details-marker { display: none; }
.provider__more > summary:hover { color: var(--accent-ink); }
.provider__more > div {
  padding: var(--space-3) 0 0 44px;
  font-size: var(--text-sm);
  color: var(--muted);
}
.provider__more p { margin-bottom: var(--space-2); }

@media (max-width: 720px) {
  .provider { grid-template-columns: minmax(0, 1fr); }
  .provider__do { flex-wrap: wrap; }
  .provider__form { width: 100%; flex-wrap: wrap; }
  .provider__form .input { width: 100%; }
  .provider__form .btn { width: 100%; }
  .provider__more > summary, .provider__more > div { padding-left: 0; }
}

/* The guidance band's suggestion: a link, because it belongs to the workspace
   rather than to the page it happens to be sitting above. */
.screen-guide__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--accent-ink);
  text-decoration: none;
  white-space: nowrap;
}
.screen-guide__go:hover { text-decoration: underline; }

/* Sub-headings inside a disclosure body — the breakdowns behind the numbers. */
.detail-head {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-2);
}
.disclose__body > .detail-head:first-child { margin-top: 0; }
.disclose__body .location-bars { margin-bottom: var(--space-2); }

/* A section heading may carry a link and a small control without them stacking. */
.section-head__aside { display: flex; align-items: center; gap: var(--space-3); }
.filter-more__body .select, .filter-more__body select { min-width: 150px; width: auto; }
.filter-more__body .input[type="date"] { width: auto; min-width: 150px; }

/* Timeline rows carry a detail line and a stream marker. */
.timeline-detail { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--muted); }
.timeline-item--exception .timeline-what a { color: var(--warn); }

.pager {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm);
}
.pager__go { margin-left: auto; display: flex; gap: var(--space-2); }

/* ------------------------------------------------------------ Global search */

/*
 * The magnifying glass sat on top of the word "Search".
 *
 * The design system's blanket rule for text inputs set an even padding on
 * every one of them, which replaced the 36px of left padding this field used
 * to keep clear for the icon sitting inside it. The icon is positioned
 * absolutely, so nothing pushed back — it simply overlapped the placeholder.
 *
 * A field with something inside it needs room made for that thing, so the room
 * is stated here rather than left to a rule that knows nothing about it.
 */
.topbar-search { position: relative; flex: 1; max-width: 520px; }
.search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-soft);
  pointer-events: none;
}
.topbar-search input.search-input {
  height: 38px;
  min-height: 38px;
  padding: 0 var(--space-3) 0 var(--space-10);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* ================================================================= Settings */

/* One column. None of this was ever a sidebar; the split just meant related
   settings landed in different places depending on when they were written. */
.settings { max-width: 780px; }
.settings .card { margin-bottom: var(--space-4); }
.settings .card:last-child { margin-bottom: 0; }

/* A row that is a destination: what it is, what it does, and where it goes. */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-2); text-decoration: none; }
.list-row strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--ink); }
.list-row p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-snug); }
.list-row > span:last-child {
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent-ink);
}
a.list-row.panel { display: flex; margin-bottom: var(--space-4); }

.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
.kv dt { font-size: var(--text-sm); color: var(--muted); }
.kv dd { margin: 0; font-size: var(--text-sm); color: var(--ink); }

/* A question StockChief cannot answer, with the way forward attached. */
.act-create {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.act-create p { margin: 0; }

/* The one action that closes a shortfall, when there is stock to close it with. */
.sales-action-card--commit {
  margin-top: var(--space-4);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* "optional" beside a label is an aside, not part of the name. */
.optional { font-weight: var(--weight-normal); color: var(--muted-soft); }

/* A dense table: same vocabulary as every other table, less air per row. */
.table--tight thead th { padding: var(--space-2) var(--space-3); }
.table--tight tbody td { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

/* A table that can outgrow its container scrolls inside its own frame rather
   than pushing the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* A heading inside a section — below h2, above body text. */
.sub-head {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink);
}
.sub-head:first-child { margin-top: 0; }

/* Notices carried three tone names the stylesheets never defined, so a success
   and a warning looked identical. Same five meanings as every other status. */
.notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.notice--success, .notice--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.notice--info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.notice strong { font-weight: var(--weight-semi); }

.input--sm { min-height: 32px; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }

/* Breadcrumbs, singular and plural — both spellings are in the views. */
.breadcrumb, .breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted);
}
.breadcrumb a, .breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumb svg, .breadcrumbs svg { color: var(--line-strong); }

/* A checkbox row that explains its own consequence. */
.choice { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.choice input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.choice strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semi); }
.choice small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--muted); line-height: var(--leading-snug); }

/* The computed answer beneath a spoken one: the record, quieter than the reply. */
.answer-record {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm);
  color: var(--muted);
}

/*
 * Long, unbroken strings that are not words.
 *
 * A webhook address, an account id, an API endpoint. None of them contain a
 * space, so nothing in normal text wrapping will ever break one, and a
 * viewport narrower than the string is a line running out through the side of
 * the panel it belongs to. StockChief shows several of these on the connection
 * screens, which is exactly where somebody is reading carefully.
 */
code,
.t-code {
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.92em;
}