/* ============================================================================
   Sandvik-branded concepts — SHARED base
   Cross-concept foundation: reset, body/token wiring, review chrome, theme
   toggle, and the recurring table/status vocabulary. Everything is driven by
   Sandvik design tokens (--sds-*) so light & dark theme come for free.
   Per-concept layout lives in each concept's own styles.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sds-color-bg);
  color: var(--sds-color-text);
  font-family: var(--sds-font-family-text);
  font-size: var(--sds-type-body-regular-size);
  line-height: var(--sds-type-body-regular-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* ---- Review bar (neutral review chrome, theme-independent) --------------- */
.review-bar {
  position: sticky; top: 0; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 14px;
  background: #0e0f14; color: #d7dae2;
  font-size: 12px; letter-spacing: .01em;
}
.review-bar a { color: #fff; }
.review-bar a:hover { text-decoration: underline; }
.review-bar .rb-tag { color: #fff; font-weight: 700; letter-spacing: .06em; }
.review-bar .rb-sep { opacity: .35; }
.review-bar .rb-philosophy { color: #8b909c; }
.review-bar .rb-spacer { margin-left: auto; }
.review-bar .rb-theme { display: inline-flex; align-items: center; gap: 8px; color: #d7dae2; }
.review-bar .rb-home {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid #2c2f3a; border-radius: 999px; color: #d7dae2;
}
.review-bar .rb-home:hover { background: #1b1d26; text-decoration: none; }

/* ---- Shared utilities --------------------------------------------------- */
.num   { font-variant-numeric: tabular-nums; }
.muted { color: var(--sds-color-text-muted); }

/* ---- Shared table vocabulary (item cell + stock status) ----------------- *
   Reused by the tabular concepts. Stock status is rendered as a semantic-token
   dot pill rather than <sds-tag> (sds-tag has no red for a true "Critical").   */
.cell-item { display: flex; align-items: center; gap: var(--sds-space-300); }
.cell-item .tn {
  width: 34px; height: 26px; flex: none; border-radius: var(--sds-radius-m);
  border: 1px solid var(--sds-color-border);
  background:
    linear-gradient(var(--sds-color-surface-strong), var(--sds-color-surface-strong)) padding-box,
    repeating-linear-gradient(135deg, var(--sds-color-border) 0 1px, transparent 1px 6px);
}
.cell-item .iname { font-weight: var(--sds-font-weight-bold); line-height: 1.25; }
.cell-item .icode { display: block; margin-top: 2px; font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }

.st { display: inline-flex; align-items: center; gap: 7px; font-size: var(--sds-type-body-small-size); font-weight: var(--sds-font-weight-bold); white-space: nowrap; }
.st .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st.ok   .dot { background: var(--sds-color-success); }
.st.low  .dot { background: var(--sds-color-warning); }
.st.crit .dot { background: var(--sds-color-error); }
.st.crit { color: var(--sds-color-error); }
.st.none { color: var(--sds-color-text-muted); }
.st.none .dot { background: var(--sds-color-border-strong); }