/* Workbench design system — the foundation component set
 * (WB-019, DS-FOUND), in CSS form.
 *
 * The seven foundation components of the UI/UX desk's 2026-10-29
 * workbench design system, section 3, generalized from the V18
 * mapping: SHELL, CARD, TAG/PILL, BUTTON, SKELETON, WAIT-PANEL,
 * STATE-LINE. Every value in this sheet resolves through the one
 * token source (site/tokens.css) — no literal colour, duration,
 * or radius stands here; the battery censuses it. Surface
 * stories adopt these components under their own claims; this
 * sheet standing linked from no page yet is the foundation's
 * honest state, not an omission.
 *
 * Standing rules carried in the forms: light-only; reduced
 * motion is a system rule (either signal suffices — the sheet
 * carries the media-query half); settled behaviors govern
 * behavior and this language governs look only.
 */

/* SHELL — the page frame: ground, type, the header band holding
 * the page's title and its provenance/freshness stamp. */
.wb-shell {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body-size);
  margin: 0;
}
.wb-shell-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px var(--gap-cards);
  margin-bottom: var(--gap-sections);
}
.wb-shell-title {
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  color: var(--ink);
}
.wb-shell-stamp {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* CARD — standard, stat, and media anatomies on one frame: white
 * surface, hairline edge, the resting shadow, card radius. The
 * air lives between cards (the shell's gaps); inside, the
 * settled compact padding governs data-dense content. */
.wb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
  padding: 16px 20px;
}
.wb-card-title {
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  color: var(--ink);
}
.wb-card--stat .wb-stat {
  font-size: var(--stat-size);
  font-weight: var(--stat-weight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wb-card--stat .wb-stat-label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--ink-3);
}
.wb-card--media { overflow: hidden; padding: 0; }

/* TAG/PILL — status in words on a tinted ground. The default
 * ground is the neutral blue tint; the semantic forms carry a
 * true semantic state only, text and tint together. */
.wb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--blue-soft);
  color: var(--ink-2);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  white-space: nowrap;
}
.wb-tag--green { background: var(--green-soft); color: var(--green-text); }
.wb-tag--amber { background: var(--amber-soft); color: var(--amber-text); }
.wb-tag--red { background: var(--red-soft); color: var(--red-text); }
.wb-tag--line { background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); }

/* BUTTON — primary blue, quiet, danger-quiet. Micro-duration
 * feedback on hover and press; no scaling, no colour floods. */
.wb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: var(--blue);
  color: var(--surface);
  font-family: var(--font);
  font-size: var(--body-size);
  font-weight: var(--label-weight);
  cursor: pointer;
  transition: background var(--dur-micro) ease-out;
}
.wb-btn:hover { background: var(--blue-strong); }
.wb-btn--quiet {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-2);
}
.wb-btn--quiet:hover { background: var(--blue-soft); }
.wb-btn--danger-quiet {
  background: var(--surface);
  border-color: var(--line);
  color: var(--red);
}
.wb-btn--danger-quiet:hover { background: var(--red-soft); }

/* SKELETON — layout-mirroring blocks for arrivals: the arriving
 * layout's own shapes in tinted blocks, never fake numbers or
 * filler text. The block itself stands still; the cross-fade to
 * content belongs to the consuming surface's entrance machinery,
 * so no animation stands in this component at all. The ground
 * is the neutral --tint: lavender is the band, not a ground, and
 * is reserved to the --band variant for layouts whose arriving
 * form truly carries the lavender band (design review F1). */
.wb-skeleton {
  background: var(--tint);
  border-radius: var(--radius-card);
  min-height: 96px;
}
.wb-skeleton--band { background: var(--lav); }
.wb-skeleton--row {
  border-radius: var(--radius-row);
  min-height: 20px;
}

/* WAIT-PANEL — the owner's wait standard as a component: a white
 * panel, the marching-orders line, a 4px progress track where a
 * total is genuinely known (the fill's width is the caller's
 * honest figure, set inline), and the status line naming the
 * wait's subject. An indeterminate wait carries no fill. */
.wb-wait-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
  padding: 16px 20px;
}
.wb-wait-orders { color: var(--ink); font-weight: var(--label-weight); }
.wb-wait-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
  margin: 12px 0;
}
.wb-wait-fill {
  height: 100%;
  background: var(--blue);
  border-radius: var(--radius-pill);
  transition: width var(--dur-view) ease-out;
}
.wb-wait-status {
  color: var(--ink-2);
  font-size: var(--body-size);
}

/* Reduced motion, the system rule's media-query half: the two
 * live transitions in this sheet (button feedback, the wait
 * fill) stand down under the reduce signal. */
@media (prefers-reduced-motion: reduce) {
  .wb-btn, .wb-wait-fill { transition: none; }
}

/* STATE-LINE — freshness, as-of, stale: rendered in words with
 * its chip; bare time is never a state. The chip is TAG/PILL by
 * composition: a .wb-tag inside the line carries the state word
 * on its tinted ground. */
.wb-state-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}