/* ============================================================
   components.css — Fire & Fly Reusable UI Components
   ============================================================ */

/* ============================================================
   A11y utilities (a11y-remediation wave 4)
   Placed FIRST so every component rule below (equal specificity,
   later source order) wins for background/border/padding/display —
   the reset only strips the native <button> chrome the component
   class does not itself set. This is the zero-visual-change contract:
   a <div>/<span> converted to <button class="as-btn <orig classes>">
   renders pixel-identical to the original.
   ============================================================ */
.as-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* Visually-hidden-but-focusable (clip-rect). Mirrors the shipped
   .m-iv-pdf-strip__file-input pattern; used for radios-behind-labels
   and any visually-hidden focusable input. NOT display:none (that
   removes it from the a11y tree and tab order). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Top Bar Add Button (circular + in header) ---- */

.m-top-bar__add {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1816;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.m-top-bar__add:active { filter: brightness(0.9); }

/* ---- Buttons ---- */

.btn {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  border: none;
  transition: filter 0.15s, background 0.15s, opacity 0.15s;
  text-decoration: none;
  line-height: 1.3;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.btn-destructive {
  background: var(--error);
  color: #fff;
}

.btn-destructive:hover {
  filter: brightness(1.08);
}

.btn-stock {
  background: var(--stock-accent);
  color: #fff;
}

.btn-stock:hover {
  filter: brightness(1.08);
}

.btn-stock-secondary {
  background: transparent;
  color: var(--stock-accent);
  border: 1px solid var(--stock-accent);
}

.btn-stock-secondary:hover {
  background: color-mix(in srgb, var(--info) 10%, transparent);
}

.btn-sales {
  background: var(--sales-accent);
  color: #fff;
}

.btn-sales:hover {
  filter: brightness(1.08);
}

.btn:active:not(:disabled):not(.btn-disabled) {
  filter: brightness(0.9);
}

.btn-full {
  width: 100%;
}

.btn-sm {
  font-size: var(--fs-sm);
  padding: 6px var(--gutter);
  min-height: 36px;
}

.btn-disabled,
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Busy vocabulary host hook (a11y wave 6) — buttons rely on :disabled; this is
   for future non-button hosts that go busy without a disabled attribute. */
.is-busy { pointer-events: none; }

/* ---- Button Group ---- */

.btn-group {
  display: inline-flex;
  gap: 0;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-radius: 8px 0 0 8px;
}

.btn-group .btn:last-child {
  border-radius: 0 8px 8px 0;
}

.btn-group .btn + .btn {
  margin-left: -1px;
}

/* ---- Cards ---- */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px var(--gutter);
}

.card-sm {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px var(--gutter);
}

.card-clickable {
  cursor: pointer;
  transition: background 0.15s;
}

.card-clickable:hover {
  background: var(--bg-elevated);
}

.card-elevated {
  background: var(--bg-elevated);
}

/* ---- Stat Card ---- */

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px var(--gutter);
}

.stat-card__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 4px;
}

.stat-card__value {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  color: var(--text-primary);
  font-weight: 500;
  display: block;
}

.stat-card__sub {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  display: block;
  margin-top: 4px;
}

/* ---- Action Card ---- */

.action-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.action-card:hover {
  background: var(--bg-elevated);
}

.action-card__icon {
  font-size: var(--fs-xl);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.action-card__body {
  flex: 1;
  min-width: 0;
}

.action-card__title {
  font-size: var(--fs-base);
  color: var(--text-primary);
  font-weight: 500;
}

.action-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.action-card__chevron {
  color: var(--text-tertiary);
  font-size: var(--fs-lg);
  margin-left: auto;
  flex-shrink: 0;
}

/* ---- Badge ---- */

.badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-success {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

.badge-error {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  color: var(--error);
}

.badge-warning {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}

.badge-info {
  background: color-mix(in srgb, var(--info) 15%, transparent);
  color: var(--info);
}

.badge-accent {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

/* ---- Execution status badges ---- */

.badge-approved {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

.badge-pending,
.badge-in_progress,
.badge-collecting,
.badge-executing,
.badge-submitted {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}

.badge-rejected {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  color: var(--error);
}

.badge-cancelled {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-tertiary);
}

.badge-neutral {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

/* ---- Payment status badges (a11y 2026-07-05) ---- */

.badge-paid {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success-text);
  border: 1px solid var(--success);
}

.badge-unpaid {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-secondary);
  border: 1px solid var(--text-tertiary);
}

.badge-overdue {
  background: color-mix(in srgb, var(--error) 10%, transparent);
  color: var(--error-text);
  border: 1px solid var(--error);
}

.badge-disputed {
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning-text);
  border: 1px solid var(--warning);
}

/* ---- Allergen Tags & Selector ---- */

.allergen-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.allergen-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  font-weight: 500;
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
  white-space: nowrap;
}

.allergen-tag-sm {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  font-weight: 500;
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
  white-space: nowrap;
}

.allergen-tag-remove {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--warning);
  font-size: var(--fs-base);
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}

.allergen-tag-remove:hover {
  opacity: 1;
}

.allergen-selector {
  position: relative;
}

.allergen-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px var(--gutter);
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
}

.allergen-toggle:hover {
  border-color: var(--accent);
}

.allergen-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  z-index: 50;
  padding: 4px 0;
}

.allergen-dropdown.open {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.allergen-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--gutter);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  color: var(--text-primary);
  min-height: 44px;
}

.allergen-option:hover {
  background: var(--bg-subtle);
}

.allergen-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--warning);
  flex-shrink: 0;
}

/* ---- Form Elements ---- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 0;
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: block;
}

.form-input {
  width: 100%;
  height: 44px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0 var(--gutter);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.form-input.mono {
  font-family: var(--font-mono);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

.form-input--readonly {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-textarea {
  width: 100%;
  height: auto;
  min-height: 88px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 10px var(--gutter);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.form-textarea::placeholder {
  color: var(--text-tertiary);
}

.form-select {
  width: 100%;
  height: 44px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0 32px 0 var(--gutter);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2378716a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.form-helper {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.form-error-text {
  font-size: var(--fs-xs);
  color: var(--error);
  margin-top: 2px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row > * {
  flex: 1;
}

.form-section {
  margin-bottom: 24px;
}

.form-section__title {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

/* ---- Toggle ---- */

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle__track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--bg-subtle);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle__thumb {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
}

.toggle input:checked + .toggle__track {
  background: var(--success);
}

.toggle input:checked + .toggle__track .toggle__thumb {
  left: 23px;
}

/* ---- Breadcrumb ---- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin-bottom: 8px;
  align-items: center;
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb__sep {
  color: var(--text-tertiary);
  margin: 0 2px;
}

.breadcrumb span:last-child {
  color: var(--text-primary);
}

/* ---- Data Table ---- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.data-table th {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px var(--gutter);
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-weight: 500;
  background: var(--bg-surface);
  white-space: nowrap;
}

.data-table td {
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table td.mono {
  font-family: var(--font-mono);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr.highlight td {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.data-table tr.total-row td {
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.data-table th.sticky-col,
.data-table td.sticky-col {
  position: sticky;
  left: 0;
  background: var(--bg-surface);
  z-index: 1;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.data-table th.text-right,
.data-table td.text-right {
  text-align: right;
}

.data-table th.text-center,
.data-table td.text-center {
  text-align: center;
}

/* ---- Alert Row ---- */

.alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.alert-row:last-child {
  border-bottom: none;
}

.alert-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.alert-row__text {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

/* ---- Calendar ---- */

.calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.calendar__title {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text-primary);
}

.calendar__nav-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 6px 10px;
  font-size: var(--fs-lg);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.calendar__nav-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar__day-header {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-align: center;
  padding: 4px 0;
  text-transform: uppercase;
  font-family: var(--font-body);
}

.calendar__day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  transition: background 0.15s;
}

.calendar__day:hover {
  background: var(--bg-subtle);
}

.calendar__day.selected {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.calendar__day.empty {
  color: transparent;
  cursor: default;
  pointer-events: none;
}

.calendar__day.out-of-range {
  opacity: 0.3;
}

.calendar__markers {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.calendar__marker {
  width: 4px;
  height: 4px;
  border-radius: 2px;
}

.calendar__day--both {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 50%, rgba(96, 165, 250, 0.12) 50%);
}

.calendar__day--sales {
  background: rgba(76, 175, 80, 0.12);
}

.calendar__day--stock {
  background: rgba(96, 165, 250, 0.12);
}

.calendar__legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.calendar__legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 3px;
}

/* ---- Two-Column Calendar Layout ---- */

@media (min-width: 768px) {
  .page-two-col {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  .page-two-col__calendar {
    flex: 0 0 auto;
    width: 320px;
    min-width: 280px;
  }
  .page-two-col__list {
    flex: 1;
    min-width: 0;
  }
}

/* ---- Category Colour Bar ---- */

.cat-bar {
  width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.cat-bar-top {
  height: 3px;
  width: 100%;
  border-radius: 0;
}

/* ---- Progress Bar ---- */

.progress-bar {
  height: 3px;
  background: var(--bg-subtle);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

/* ---- Modal ---- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

.modal-overlay.hidden {
  display: none;
}

.modal-sheet {
  background: var(--bg-surface);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 20px var(--gutter);
  max-height: 85vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--text-primary);
}

.modal-close {
  color: var(--text-tertiary);
  font-size: var(--fs-2xl);
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
}

/* ---- Focus Header ---- */

.focus-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 12px var(--gutter);
  flex-shrink: 0;
}

.focus-header__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.focus-header__back {
  color: var(--text-tertiary);
  font-size: var(--fs-base);
  cursor: pointer;
  padding: 4px 8px 4px 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

.focus-header__back:hover {
  color: var(--text-primary);
}

.focus-header__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

.focus-header__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--text-primary);
  flex: 1;
}

.focus-header__progress-text {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

.focus-header .progress-bar {
  margin-top: 8px;
}

/* ---- Keypad ---- */

.keypad {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-strong);
  padding: 8px var(--gutter) 12px;
  flex-shrink: 0;
}

.keypad__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.keypad__key {
  height: 48px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  color: var(--text-primary);
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s;
}

.keypad__key.backspace {
  background: var(--bg-subtle);
  font-size: var(--fs-xl);
}

.keypad__key:active {
  background: var(--bg-subtle);
}

/* ---- Location Pills ---- */

.location-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.pill {
  font-size: var(--fs-xs);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: none;
  transition: background 0.15s, color 0.15s;
}

.pill.active {
  background: var(--stock-accent);
  color: #fff;
}

.pill.new {
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-tertiary);
}

/* Category type filter pills */
.category-type-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.category-type-filter--form {
  margin-bottom: 8px;
}
.pill-filter {
  padding: 6px var(--gutter);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pill-filter:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
}
.pill-filter.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---- Miscellaneous Utilities ---- */

.divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

.section-label {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  display: block;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
  font-size: var(--fs-base);
}

.empty-state__icon {
  font-size: var(--fs-display-lg);
  margin-bottom: 12px;
  display: block;
}

.deleted-item {
  opacity: 0.5;
}

.below-par {
  color: var(--error);
}

.above-par {
  color: var(--success);
}

.select-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid var(--border-strong);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.select-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
}

.floating-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-strong);
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
}

.floating-action-bar.hidden {
  display: none;
}

/* ---- Version History ---- */

.version-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.version-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px var(--gutter);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.version-badge {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.version-badge-recipe_change { background: var(--info); }
.version-badge-cost_change { background: var(--warning); }
.version-badge-yield_variance { background: var(--success); }
.version-badge-created { background: var(--text-tertiary); }

.diff-line {
  font-size: var(--fs-sm);
  padding: 3px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.diff-marker {
  font-family: var(--font-mono);
  font-weight: 600;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.diff-add { color: var(--success); }
.diff-add .diff-marker { color: var(--success); }
.diff-remove { color: var(--error); }
.diff-remove .diff-marker { color: var(--error); }
.diff-change { color: var(--text-secondary); }
.diff-change .diff-marker { color: var(--warning); }

.version-cost-impact {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 4px;
}

/* ---- Read-only Value (displayed like an input but not editable) ---- */

.read-only-value {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

/* ---- Spacing Utility ---- */

.mt-1 { margin-top: 0.5rem; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px 0; }
.pagination__info { font-size: var(--fs-sm); color: var(--text-secondary); }

/* ==========================================================
   Session expiry banner — Logout Fix B
   Hidden by default. Visibility toggled by Logout Fix C JS.
   ========================================================== */
.session-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;   /* Session alerts are top-level: above all
                       content including modals (highest existing
                       z-index in the codebase is .modal-overlay at
                       100, per reviewer §5). A user with a
                       confirmation dialog open whose session has
                       expired must see the expiry notice over
                       their dialog. */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: var(--fs-base);
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    /* Default tone — expired state.
       Follows project convention from .msg-warning/.msg-error at
       design-system.css:151-181: soft rgba fill + colored text +
       colored left-border accent. Uses real --warning / --error
       tokens (design-system.css:21-22); --warning text on this
       soft-fill has sufficient contrast. */
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
    border-left: 3px solid var(--warning);
    transition: transform 0.2s ease;
}

.session-banner--hidden {
    display: none;
}

/* Session expired — amber (matches .msg-warning pattern) */
.session-banner--expired {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
    border-left-color: var(--warning);
}

/* Server overloaded — red (matches .msg-error pattern).
   Reviewer §3 flagged that --danger does not exist in this
   codebase; --error is the canonical token. */
.session-banner--overloaded {
    background: color-mix(in srgb, var(--error) 15%, transparent);
    color: var(--error);
    border-left-color: var(--error);
}

.session-banner__icon {
    font-size: var(--fs-xl);
    flex-shrink: 0;
}

.session-banner__message {
    flex: 1;
    min-width: 0;   /* allows text to wrap */
}

.session-banner__action {
    /* Contrast pattern: currentColor-based fills work on both the
       amber (expired) and red (overloaded) variants without
       hardcoding white-on-color assumptions. */
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 6px var(--gutter);
    border-radius: 4px;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.session-banner__action:hover,
.session-banner__action:focus {
    background: rgba(0, 0, 0, 0.08);
}

.session-banner__close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: var(--fs-display);
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.session-banner__close:hover,
.session-banner__close:focus {
    opacity: 1;
}

/* Responsive — mobile */
@media (max-width: 500px) {
    .session-banner {
        flex-wrap: wrap;
        padding: 10px var(--gutter);
        font-size: var(--fs-sm);
    }
    .session-banner__message {
        flex-basis: calc(100% - 40px);   /* full width minus close */
    }
    .session-banner__action {
        margin-top: 6px;
    }
}

/* Session banner chrome offset is implemented in layout.css via
   .app-shell margin-top + height — see the body.has-session-banner
   rules around the .app-shell block. No padding rule on body itself
   is needed or used. */

/* ---- Utility ---- */

.js-hidden { display: none !important; }

/* ---- Serve Size Rows ---- */

.serve-size-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.serve-size-row:last-child {
    border-bottom: none;
}

.serve-size-row__name {
    font-size: var(--fs-base);
    color: var(--text-primary);
    min-width: 120px;
    flex: 1;
}

.serve-size-row__metrics {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.serve-size-row__input {
    width: 80px;
}

.serve-size-row--inactive {
    opacity: 0.5;
}

.sale-price-field {
    margin-top: 12px;
}

.serve-sizes-section {
    margin-top: 16px;
}

.serve-sizes-section__title {
    font-size: var(--fs-base);
    margin-bottom: 8px;
}

.serve-sizes-section__add {
    margin-top: 8px;
}

.serve-sizes-section__helper {
    margin-top: 8px;
}

.serve-size-row__label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.serve-size-row__unit {
    width: 70px;
    padding: 6px;
}

.serve-size-row__price {
    width: 80px;
}

.serve-size-gp.gp-good { color: var(--success); }
.serve-size-gp.gp-ok { color: var(--warning); }
.serve-size-gp.gp-low { color: var(--error); }
.serve-size-gp.gp-none { color: var(--text-tertiary); }
.serve-size-cost { color: var(--text-tertiary); white-space: nowrap; }

/* ============================================================
   Mobile Shared Patterns
   m- prefixed classes for mobile-specific UI primitives.
   Coexists alongside existing desktop classes — nothing above
   this line is modified.
   ============================================================ */

/* ---- Mobile Card ---- */

.m-card {
  margin: 0 var(--gutter) 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

/* ---- Mobile Card Row ---- */

.m-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gutter);
  min-height: 44px;
  border-top: 1px solid var(--border);
}

.m-card-row:first-child {
  border-top: none;
}

/* ---- Mobile State Patterns (error, empty, permission) ---- */

.m-state {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  text-align: center;
}

.m-state__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  font-family: var(--font-mono);
  margin-bottom: 16px;
}

.m-state__icon--lg {
  font-size: var(--fs-display);
}

.m-state__icon--error {
  color: var(--error);
}

.m-state__icon--warning {
  color: var(--warning);
}

.m-state__icon--accent {
  color: var(--text-secondary);
}

.m-state__title {
  font-size: var(--fs-xl);
  font-weight: 500;
  font-family: var(--font-heading);
  color: var(--text-primary);
  margin-bottom: 8px;
}

.m-state__body {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  line-height: 1.6;
  max-width: 280px;
}

.m-state__cta {
  margin-top: 22px;
  width: 220px;
}

.m-state__cta--narrow {
  width: 200px;
}

.m-state__cta .btn {
  width: 100%;
}

.m-state__cta .btn-primary {
  color: var(--bg-base);
}

.m-state__hint {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}

.m-state__link {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.m-state__diagnostic {
  margin-top: 28px;
  padding: 8px var(--gutter);
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  max-width: 280px;
  line-height: 1.5;
}

/* ---- Loading Skeleton ---- */

@keyframes m-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.m-skel {
  background: var(--bg-elevated);
  border-radius: 3px;
}

.m-skel-pulse {
  animation: m-skeleton-pulse 1.6s ease-in-out infinite;
}

/* Skeleton width utilities (px) */
.m-skel--w-10 { width: 10px; }
.m-skel--w-28 { width: 28px; }
.m-skel--w-36 { width: 36px; }
.m-skel--w-48 { width: 48px; }
.m-skel--w-50 { width: 50px; }
.m-skel--w-56 { width: 56px; }
.m-skel--w-64 { width: 64px; }
.m-skel--w-70 { width: 70px; }
.m-skel--w-75 { width: 75px; }
.m-skel--w-80 { width: 80px; }
.m-skel--w-85 { width: 85px; }
.m-skel--w-90 { width: 90px; }
.m-skel--w-92 { width: 92px; }
.m-skel--w-110 { width: 110px; }
.m-skel--w-120 { width: 120px; }
.m-skel--w-130 { width: 130px; }
.m-skel--w-140 { width: 140px; }
.m-skel--w-150 { width: 150px; }
.m-skel--w-160 { width: 160px; }
.m-skel--w-180 { width: 180px; }

/* Skeleton height utilities (px) */
.m-skel--h-8 { height: 8px; }
.m-skel--h-9 { height: 9px; }
.m-skel--h-10 { height: 10px; }
.m-skel--h-11 { height: 11px; }
.m-skel--h-13 { height: 13px; }
.m-skel--h-14 { height: 14px; }
.m-skel--h-26 { height: 26px; }

/* Skeleton opacity (dim) utilities */
.m-skel--dim-40 { opacity: 0.4; }
.m-skel--dim-45 { opacity: 0.45; }
.m-skel--dim-55 { opacity: 0.55; }
.m-skel--dim-60 { opacity: 0.6; }
.m-skel--dim-65 { opacity: 0.65; }
.m-skel--dim-70 { opacity: 0.7; }

/* Skeleton corner radius override for dot squares */
.m-skel--r-1-5 { border-radius: 1.5px; }

/* Skeleton row fade (applied to entire row containers) */
.m-skel-row--fade-100 { opacity: 1; }
.m-skel-row--fade-90 { opacity: 0.9; }
.m-skel-row--fade-80 { opacity: 0.8; }
.m-skel-row--fade-70 { opacity: 0.7; }
.m-skel-row--fade-60 { opacity: 0.6; }

/* Skeleton layout classes (no inline styles in templates) */
.m-skel-page { padding-top: 14px; }
.m-skel-section-gap { margin-bottom: 10px; }
.m-skel-hero { margin-bottom: 14px; padding: 16px var(--gutter) 14px; }
.m-skel-spacer-10 { height: 10px; }
.m-skel-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.m-skel-grid-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 8px;
}
.m-skel-list { margin-bottom: 12px; }
.m-skel-row-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Autosave Indicator ---- */

@keyframes m-autosave-dot {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.m-autosave {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.m-autosave__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.3px;
  white-space: nowrap;
  min-height: 14px;
}

.m-autosave__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: currentColor;
  flex-shrink: 0;
  animation: m-autosave-dot 1.1s ease-in-out infinite;
}

.m-autosave__diagnostic {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  opacity: 0.85;
  white-space: nowrap;
}

.m-autosave__retry {
  margin-left: 4px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(192, 108, 108, 0.55);
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}

/* Autosave state colours */
.m-autosave--idle { color: var(--text-tertiary); }
.m-autosave--saving { color: var(--text-secondary); }
.m-autosave--saved { color: var(--success); }
.m-autosave--offline { color: var(--warning); }
.m-autosave--error { color: var(--error); }

/* ---- Mobile Shared Patterns — Extended (Prompt 02) ---- */

/* ---- Permission Wall ---- */

.m-perm-wall { flex: 1; display: flex; flex-direction: column; }
.m-perm-wall__header { padding: 32px 20px 18px; text-align: center; background: var(--bg-base); }
.m-perm-wall__icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl); color: var(--warning); font-family: var(--font-mono);
}
.m-perm-wall__title {
  font-size: var(--fs-xl); font-weight: 500; font-family: var(--font-heading);
  color: var(--text-primary); margin-bottom: 6px;
}
.m-perm-wall__body {
  font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5;
  max-width: 280px; margin: 0 auto;
}
.m-perm-wall__grant { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.m-perm-wall__grant-avatar {
  width: 28px; height: 28px; border-radius: 14px;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--text-tertiary);
  border: 1px solid var(--border); flex-shrink: 0;
}
.m-perm-wall__grant-name { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; }
.m-perm-wall__grant-contact { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 2px; }
.m-perm-wall__message {
  padding: 12px var(--gutter); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; font-style: italic;
}
.m-perm-wall__cta { padding: 0 var(--gutter); }
.m-perm-wall__cta-btn {
  padding: 13px var(--gutter); background: var(--accent); color: var(--bg-base);
  border-radius: 8px; font-size: var(--fs-sm); font-weight: 500;
  font-family: var(--font-heading); letter-spacing: 0.2px;
  text-align: center; display: block; text-decoration: none;
  min-height: 44px; box-sizing: border-box;
}
.m-perm-wall__footer { padding: 12px 20px; text-align: center; font-size: var(--fs-xs); color: var(--text-tertiary); }
.m-perm-wall__footer-link {
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; color: var(--text-tertiary);
}

/* ---- Permission Preview ---- */

.m-perm-preview__intro { padding: 0 var(--gutter) 12px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.m-perm-preview__row { display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter); }
.m-perm-preview__row + .m-perm-preview__row { border-top: 1px solid var(--border); }
.m-perm-preview__mark { font-size: var(--fs-sm); width: 14px; text-align: center; font-family: var(--font-mono); flex-shrink: 0; }
.m-perm-preview__mark--granted { color: var(--success); }
.m-perm-preview__mark--denied { color: var(--text-tertiary); }
.m-perm-preview__mark--partial { color: var(--warning); }
.m-perm-preview__module { flex: 1; font-size: var(--fs-sm); color: var(--text-primary); }
.m-perm-preview__level { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.m-perm-preview__footer { padding: 14px var(--gutter); text-align: center; font-size: var(--fs-xs); color: var(--text-tertiary); }
.m-perm-preview__ask { color: var(--accent); font-weight: 500; text-decoration: none; }

/* ---- Validation Field ---- */

.m-vfield { padding: 12px var(--gutter); border-top: 1px solid var(--border); }
.m-vfield:first-child { border-top: none; }
.m-vfield__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.m-vfield__label {
  font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono);
  letter-spacing: 0.4px; text-transform: uppercase;
}
.m-vfield__hint { font-size: var(--fs-xs); color: var(--text-tertiary); }
.m-vfield__input {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 0 var(--gutter); height: 40px; background: var(--bg-base); min-height: 44px;
}
.m-vfield__input--multiline { height: auto; padding: 10px var(--gutter); }
.m-vfield__input--focus { border-color: var(--accent); }
.m-vfield__input--error { border-color: var(--error); }
.m-vfield__value { flex: 1; font-size: var(--fs-sm); color: var(--text-primary); }
.m-vfield__value--mono { font-family: var(--font-mono); }
.m-vfield__value--placeholder { color: var(--text-tertiary); }
.m-vfield__suffix { font-size: var(--fs-sm); color: var(--text-tertiary); font-family: var(--font-mono); }
.m-vfield__error {
  margin-top: 6px; display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-xs); color: var(--error); line-height: 1.4;
}
.m-vfield__error-icon { font-family: var(--font-mono); flex-shrink: 0; }

/* ---- Validation Banner ---- */

.m-validation-banner {
  flex-shrink: 0; background: color-mix(in srgb, var(--error) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--error) 45%, transparent);
  padding: 10px var(--gutter); display: flex; align-items: center; gap: 10px;
}
.m-validation-banner__icon { font-size: var(--fs-base); color: var(--error); font-family: var(--font-mono); }
.m-validation-banner__title { font-size: var(--fs-sm); font-weight: 500; color: var(--error); }
.m-validation-banner__sub { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; }
.m-validation-banner__jump { font-size: var(--fs-xs); color: var(--error); font-weight: 500; flex-shrink: 0; }

/* ---- Validation Submit States ---- */

.m-submit-bar {
  flex-shrink: 0; padding: 12px var(--gutter) 14px;
  background: var(--bg-surface); border-top: 1px solid var(--border);
}
.m-submit-bar--split { display: flex; gap: 10px; }
.m-submit-btn {
  padding: 13px var(--gutter); border-radius: 8px;
  font-size: var(--fs-sm); font-weight: 500; font-family: var(--font-heading);
  text-align: center; width: 100%; min-height: 44px; box-sizing: border-box;
  border: none; cursor: pointer;
}
.m-submit-btn--blocked {
  background: var(--bg-elevated) !important; color: var(--text-tertiary) !important;
  border: 1px solid var(--border) !important;
}
.m-submit-btn--ready {
  background: var(--accent); color: var(--bg-base);
  border: 1px solid var(--accent); letter-spacing: 0.2px;
}
.m-submit-btn--cancel {
  background: none; border: none; padding: 13px var(--gutter);
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500;
  min-height: 44px; cursor: pointer;
}

/* ---- Network Banner ---- */

.m-net-banner {
  flex-shrink: 0; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 10px;
}
.m-net-banner--warning { background: color-mix(in srgb, var(--warning) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); }
.m-net-banner--error { background: color-mix(in srgb, var(--error) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--error) 45%, transparent); }
.m-net-banner--success { background: color-mix(in srgb, var(--success) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--success) 45%, transparent); }
.m-net-banner__icon { font-size: var(--fs-base); flex-shrink: 0; font-family: var(--font-mono); }
.m-net-banner__icon--warning { color: var(--warning); }
.m-net-banner__icon--error { color: var(--error); }
.m-net-banner__icon--success { color: var(--success); }
.m-net-banner__title { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; }
.m-net-banner__title--warning { color: var(--warning); }
.m-net-banner__title--error { color: var(--error); }
.m-net-banner__title--success { color: var(--success); }
.m-net-banner__body { flex: 1; min-width: 0; }
.m-net-banner__sub { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.m-net-banner__action {
  flex-shrink: 0; font-size: var(--fs-xs); font-weight: 500;
  padding: 6px 10px; border-radius: 6px; background: transparent; cursor: pointer;
  min-height: 44px; box-sizing: border-box; display: flex; align-items: center;
}
.m-net-banner__action--warning { color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); }
.m-net-banner__action--error { color: var(--error); border: 1px solid color-mix(in srgb, var(--error) 45%, transparent); }
.m-net-banner__dismiss {
  font-size: var(--fs-base); color: var(--text-tertiary); background: none; border: none;
  cursor: pointer; padding: 4px; flex-shrink: 0; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.m-net-banner__stale-content { opacity: 0.86; }

/* ---- Additional Loading Skeleton Utilities ---- */

.m-skel--w-8 { width: 8px; }
.m-skel--h-22 { height: 22px; }
.m-skel--w-percent-62 { width: 62%; }
.m-skel--w-percent-38 { width: 38%; }
.m-skel--w-percent-100 { width: 100%; }
.m-skel--r-2 { border-radius: 2px; }
.m-skel--r-1 { border-radius: 1px; }

/* ---- Slow-load Fallback ---- */

@keyframes m-spinner { to { transform: rotate(360deg); } }
.m-slow-load__spinner {
  width: 18px; height: 18px; border-radius: 9px;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: m-spinner 0.9s linear infinite;
}
.m-slow-load__card { padding: 16px var(--gutter); }
.m-slow-load__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.m-slow-load__title { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; }
.m-slow-load__body { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.5; }
.m-slow-load__retry {
  display: flex; align-items: center; justify-content: center;
  margin-top: 14px; padding: 10px var(--gutter);
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 8px; font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-primary); text-align: center; cursor: pointer;
  text-decoration: none;
  min-height: 44px; box-sizing: border-box;
}

/* ---- Stats Skeleton Grid ---- */

.m-skel-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m-skel-stats-cell { display: flex; flex-direction: column; gap: 8px; }
.m-skel-chart { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.m-skel-chart-bar { flex: 1; }

/* ---- Padding Variants ---- */

.m-card--pad-14 { padding: 14px var(--gutter); }

/* Bar chart height utilities (stats skeleton) */
.m-skel--h-42 { height: 42px; }
.m-skel--h-52 { height: 52px; }
.m-skel--h-58 { height: 58px; }
.m-skel--h-60 { height: 60px; }
.m-skel--h-64 { height: 64px; }
.m-skel--h-71 { height: 71px; }
.m-skel--h-78 { height: 78px; }

/* ---- Sales/P&L Bubble Picker (pl-nav-picker.jsx:49-87) ---- */

.nav-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 39;
}

.nav-picker-overlay[hidden] { display: none; }

.nav-picker-bubbles {
  position: absolute;
  top: -16px;
  left: 58%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.nav-picker-bubbles[hidden] { display: none; }

.nav-picker-bubble {
  padding: 7px var(--gutter);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.nav-picker-bubble--sales {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.nav-picker-bubble--sales .nav-picker-bubble__icon {
  color: var(--text-tertiary);
}

.nav-picker-bubble--pnl {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #1a1816;
  font-weight: 600;
}

@media (min-width: 768px) {
  .nav-picker-overlay,
  .nav-picker-bubbles { display: none !important; }
}

/* ---- Segmented Toggle (option-a-bar.jsx:107-132) ---- */

.m-segmented-toggle {
  display: flex;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}

.m-segmented-toggle__segment {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
  display: block;
  line-height: 1.3;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
}

.m-segmented-toggle__segment--active {
  background: var(--accent);
  color: var(--bg-base);
  font-weight: 500;
}

/* ---- Mobile Dashboard Components ---- */

/* Section label */
.m-section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--gutter);
  margin-top: 16px;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
}
.m-section-label__right {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

/* Event strip */
.m-event-strip {
  padding: 12px var(--gutter) 8px;
}
.m-event-strip__meta {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Accuracy line */
.m-accuracy-line {
  padding: 10px var(--gutter) 0;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-accuracy-line__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--warning);
  flex-shrink: 0;
}

/* Checklist */
.m-checklist {
  margin: 0 var(--gutter);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 var(--gutter);
}
.m-checklist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.m-checklist-row:last-child {
  border-bottom: none;
}
.m-checklist-row__check {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  border: 1.5px solid var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--bg-base);
  flex-shrink: 0;
  background: transparent;
}
.m-checklist-row--done .m-checklist-row__check {
  background: var(--success);
  border: none;
}
.m-checklist-row__body {
  flex: 1;
  min-width: 0;
}
.m-checklist-row__title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.m-checklist-row--done .m-checklist-row__title {
  color: var(--text-tertiary);
  text-decoration: line-through;
}
.m-checklist-row__meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.m-checklist-row__cta {
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 6px var(--gutter);
  border-radius: 6px;
  background: var(--accent);
  color: var(--bg-base);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
a.m-checklist-row {
  text-decoration: none;
  color: inherit;
}

/* Fresh state banner */
.m-checklist-fresh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--gutter);
  margin: 0 var(--gutter);
  border-radius: 8px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.m-checklist-fresh__check {
  color: var(--success);
  font-family: var(--font-mono);
}

/* KPI inline */
.m-kpi-inline {
  margin: 0 var(--gutter);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.m-kpi-inline--dimmed {
  opacity: 0.6;
}
.m-kpi-inline__row {
  display: flex;
  flex-direction: column;
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--border);
}
.m-kpi-inline__row:nth-child(odd) {
  border-right: 1px solid var(--border);
}
.m-kpi-inline__row:nth-last-child(-n+2) {
  border-bottom: none;
}
.m-kpi-inline__row--last {
  border-bottom: none;
}
.m-kpi-inline__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.m-kpi-inline__values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 3px;
}
.m-kpi-inline__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text-primary);
}
.m-kpi-inline__value--loss {
  color: var(--error);
}
.m-kpi-inline__value--surplus {
  color: var(--success);
}
.m-kpi-inline__delta {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  text-align: right;
}
.m-kpi-inline__delta--up {
  color: var(--success);
}
.m-kpi-inline__delta--down {
  color: var(--error);
}
.m-kpi-inline__footnote {
  padding: 6px var(--gutter);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  border-top: 1px solid var(--border);
  text-align: center;
}
.m-kpi-inline__link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  line-height: 44px;
}

/* Clickable stat card */
.m-clickable-stat {
  margin: 0 var(--gutter);
  padding: 14px var(--gutter);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.m-clickable-stat__left {
  flex: 1;
  min-width: 0;
}
.m-clickable-stat__figure {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  color: var(--text-primary);
}
.m-clickable-stat__figure--loss {
  color: var(--error);
}
.m-clickable-stat__figure--surplus {
  color: var(--success);
}
.m-clickable-stat__figure--warning {
  color: var(--warning);
}
.m-clickable-stat__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 4px;
}
.m-clickable-stat__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  flex-shrink: 0;
  margin-left: var(--gutter);
}
.m-clickable-stat__cta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-clickable-stat__chevron {
  font-size: var(--fs-lg);
}

/* Detail sheet (bottom sheet overlay) */
/* drawer-regularization 09: the m-detail-sheet STRUCTURAL chrome (.m-detail-sheet
   container, __backdrop, __panel, __handle, __handle-bar, __header, __title) was
   RETIRED here — the dashboard drill-in sheets migrated onto the shared m-sl-drawer
   chrome + drawer.js engine (#sheet-cost / #sheet-consumption scoped body override
   above). The CONTENT classes below (__close, __period*, __headline, __figure*,
   __sub, __rows, __show-all) are KEPT as body hooks — renderCostSheet (dashboard.js)
   queries them and the markup still renders them inside the m-sl-drawer__body. Because
   these content classes remain, the `detail` token stays a legitimately-live entry in
   check_patterns.py's _DRAWER_CHROME_ALLOWLIST (left unchanged). */
.m-detail-sheet__close {
  color: var(--text-tertiary);
  font-size: 18px;
  padding: 4px;
  cursor: pointer;
  background: none;
  border: none;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-detail-sheet__period {
  padding: 12px var(--gutter) 8px;
}
.m-detail-sheet__period-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  font-size: 12px;
  color: var(--text-secondary);
}
.m-detail-sheet__period-caret {
  font-size: 10px;
}
/* Period chips */
.m-period-chips {
  display: flex;
  gap: 6px;
}
.m-period-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: border-color 0.15s, color 0.15s;
}
.m-period-chip--active {
  border-color: var(--accent);
  color: var(--accent);
}
.m-period-chip--loading {
  opacity: 0.5;
  pointer-events: none;
}
/* Dashboard toast */
.m-dashboard-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px var(--gutter);
  font-size: var(--fs-sm);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.m-dashboard-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.m-detail-sheet__headline {
  padding: 14px var(--gutter);
  margin: 0 var(--gutter) 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}
.m-detail-sheet__figure {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1;
}
.m-detail-sheet__figure--loss {
  color: var(--error);
}
.m-detail-sheet__figure--surplus {
  color: var(--success);
}
.m-detail-sheet__figure--warning {
  color: var(--warning);
}
.m-detail-sheet__sub {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 4px;
}
.m-detail-sheet__rows {
  margin: 0 var(--gutter);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
}
.m-detail-sheet__show-all {
  display: flex;
  padding: 12px var(--gutter);
  margin: 8px var(--gutter) 0;
  font-size: var(--fs-xs);
  color: var(--accent);
  text-decoration: none;
  min-height: 44px;
  align-items: center;
}

/* Variance row (consumption detail) */
.m-var-row {
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-var-row + .m-var-row {
  border-top: 1px solid var(--border);
}
.m-var-row__info {
  flex: 1;
  min-width: 0;
}
.m-var-row__sku {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.m-var-row__qty {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.m-var-row__bar {
  flex: 1;
  height: 4px;
  background: var(--bg-subtle);
  border-radius: 2px;
  max-width: 80px;
}
.m-var-row__bar-fill {
  height: 100%;
  border-radius: 2px;
}
.m-var-row__bar-fill--loss {
  background: var(--error);
}
.m-var-row__bar-fill--surplus {
  background: var(--success);
}
.m-var-row__cost {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  min-width: 54px;
  text-align: right;
}
.m-var-row__cost--loss {
  color: var(--error);
}
.m-var-row__cost--surplus {
  color: var(--success);
}

/* Cost row (cost detail) */
.m-cost-row {
  padding: 10px var(--gutter);
}
.m-cost-row + .m-cost-row {
  border-top: 1px solid var(--border);
}
.m-cost-row__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.m-cost-row__sku {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.m-cost-row__delta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.m-cost-row__delta--up {
  color: var(--warning);
}
.m-cost-row__delta--down {
  color: var(--success);
}
.m-cost-row__mid {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 3px;
}
.m-cost-row__prices {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-cost-row__old {
  text-decoration: line-through;
}
.m-cost-row__new {
  color: var(--text-secondary);
}
.m-cost-row__affects {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-cost-row__source {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Need row (Needs a Human) */
.m-needs-human {
  padding: 0 var(--gutter);
}
.m-need-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.m-need-row:last-child {
  border-bottom: none;
}
.m-need-row__sev {
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.6px;
  width: 36px;
  flex-shrink: 0;
}
.m-need-row__sev--blocker {
  color: var(--error);
}
.m-need-row__sev--should {
  color: var(--warning);
}
.m-need-row__sev--fyi {
  color: var(--info);
}
.m-need-row__body {
  flex: 1;
  min-width: 0;
}
.m-need-row__title {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.m-need-row__meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.m-need-row__chevron {
  color: var(--text-tertiary);
  font-size: var(--fs-base);
  flex-shrink: 0;
}

/* Archived banner */
.m-archived-banner {
  margin: 0 var(--gutter) 10px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  padding: 14px var(--gutter) 12px;
}
.m-archived-banner__body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.m-archived-banner__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--warning-bg-strong);
  color: var(--warning);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-top: 1px;
}
.m-archived-banner__content {
  flex: 1;
  min-width: 0;
}
.m-archived-banner__title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--warning);
  margin-bottom: 4px;
  font-family: var(--font-heading);
}
.m-archived-banner__desc {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}
.m-archived-banner__actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--warning-border-soft);
  display: flex;
  gap: 8px;
  align-items: center;
}
.m-archived-banner__reactivate {
  padding: 9px var(--gutter);
  background: var(--accent);
  color: var(--bg-base);
  border: none;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font-heading);
  flex-shrink: 0;
  cursor: pointer;
  min-height: 44px;
}
.m-archived-banner__secondary {
  padding: 9px var(--gutter);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.m-archived-banner__chip {
  padding: 7px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 500;
}


/* ============================================================
   Catalogue — Browse Rails (hub page)
   ============================================================ */

.m-browse-rail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--gutter);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 6px;
  min-height: 44px;
}
.m-browse-rail:last-child { margin-bottom: 0; }
.m-browse-rail__body {
  flex: 1;
  min-width: 0;
}
.m-browse-rail__title {
  font-size: var(--fs-base);
  color: var(--text-primary);
  font-weight: 500;
}
.m-browse-rail__meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-browse-rail__count {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}
.m-browse-rail__chevron {
  color: var(--text-tertiary);
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

/* Section label used in catalogue hub — scoped to catalogue parents */
.m-cat-browse .m-section-label,
.m-cat-attention .m-section-label {
  padding: 0;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  letter-spacing: 0.8px;
}
.m-cat-browse .m-section-label__right,
.m-cat-attention .m-section-label__right {
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   List Chrome — Shared browse screen pattern
   ============================================================ */

.lc-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Active / Deactivated toggle */
.lc-toggle-wrap {
  padding: 6px var(--gutter) 0;
  flex-shrink: 0;
}
.lc-toggle {
  display: flex;
  gap: 0;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.lc-toggle__btn {
  flex: 1;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  min-height: 32px;
}
.lc-toggle__btn--on {
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 600;
}
.lc-toggle__count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
}
.lc-toggle__btn--on .lc-toggle__count {
  color: var(--text-secondary);
}

/* Sticky header wrapper — pins search + chips + col-header while list scrolls */
.lc-sticky-header { position:sticky; top:0; z-index:5; background:var(--bg-base); }

/* Search row */
.lc-search-row {
  padding: 10px var(--gutter) 8px;
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
.lc-search-row__add {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--accent); border: none; border-radius: 6px;
  color: var(--bg-base); font-size: 16px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s ease;
}
.lc-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  min-height: 44px;
}
.lc-search:focus-within {
  border-color: var(--accent);
}
.lc-search__icon {
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.lc-search:focus-within .lc-search__icon {
  color: var(--accent);
}
.lc-search__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.lc-search__input::placeholder {
  color: var(--text-tertiary);
}
.lc-search__clear {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--border-strong);
  color: var(--text-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
@media (hover: hover) {
  .lc-search__clear:hover { color: var(--text-primary); }
  .lc-search-row__add:hover { color: var(--text-primary); }
}
.lc-search__clear:active { color: var(--text-primary); }
.lc-search-row__add:active { color: var(--text-primary); }

/* Sort button (beside search) */
.lc-sort-btn {
  padding: 7px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.lc-sort-btn:active {
  background: var(--bg-elevated);
}
.lc-sort-btn__icon {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

/* Filter chip strip */
.lc-chips {
  padding: 0 var(--gutter) 10px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.lc-chip {
  padding: 5px 10px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--font-body);
  min-height: 30px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) {
  .lc-chip:hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
}
.lc-chip:active { background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.lc-chip--active {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
  font-weight: 600;
}
.lc-chip__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  margin-left: 6px;
}
.lc-chip--active .lc-chip__meta {
  color: var(--bg-base);
  opacity: 0.6;
}

/* Header info banner */
.lc-header-info {
  padding: 0 var(--gutter) 10px;
}
.lc-info-banner {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  padding: 7px 10px;
  border-radius: 6px;
  line-height: 1.35;
}
.lc-info-banner--accent {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.lc-info-banner--info {
  background: color-mix(in srgb, var(--info) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 18%, transparent);
}

/* Column header strip */
.lc-col-header {
  display: grid;
  padding: 7px var(--gutter);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
  flex-shrink: 0;
}
.lc-col-header__first {
  padding-left: 8px;
}
.lc-col-header__sub {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-left: 6px;
  font-weight: 400;
}

/* Scrollable body */
.lc-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Category header — structural/sticky hook only; visuals on .lg-cat__head */
.lc-cat-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  align-items: center;
  cursor: pointer;
}
/* lc-cat-header__name removed — replaced by .lg-cat__head */
.lc-cat-header__total {
  text-align: right;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-weight: 500;
}

/* lc-sub-label removed — replaced by .lg-sub */

/* Item row — compact density */
.lc-item-row {
  display: grid;
  margin-left: 6px;
  /* left-edge align: margin-left(6) + border-left(3, transparent) + padding-left(3) = var(--gutter)(12),
     matching lc-col-header's grid-track origin; border reserved for is-selected accent on desktop */
  padding: 4px var(--gutter) 4px 3px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 6px;
  align-items: center;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: 32px;
}
/* Row feedback: hover only where a real pointer can hover (touch devices skip
   it so a tap doesn't leave a stuck wash); bare :active gives touch its press.
   KNOWN + ACCEPTED: the wash also shows while pressing a nested control inside
   the row (marks, toggles). Do NOT add :has() suppression — out of scope. */
@media (hover: hover) {
  .lc-item-row:hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
}
.lc-item-row:active { background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.lc-item-name {
  min-width: 0;
  padding-left: 8px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
/* Sub-line beneath item name */
.lc-item-sub {
  width: 100%;
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  margin-top: -1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.lc-item-name__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: var(--fs-sm);
}
.lc-item-num {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-size: var(--fs-sm);
}
.lc-item-num.lc-muted {
  color: var(--text-tertiary);
}
.lc-item-num__primary {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.lc-item-num__muted {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.lc-item-num__unit {
  color: var(--text-tertiary);
}

/* Tone colours */
.tone-ok  { color: var(--success) !important; }
.tone-warn { color: var(--warning) !important; }
.tone-err { color: var(--error) !important; }

/* Tags inline with item name */
.lc-tag {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1.4;
}
.lc-tag--accent {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.lc-tag--info {
  background: color-mix(in srgb, var(--info) 14%, transparent);
  color: var(--stock-accent);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
}
.lc-tag--purple {
  background: rgba(138, 122, 196, 0.14);
  color: #a999d8;
  border: 1px solid rgba(138, 122, 196, 0.3);
}
.lc-tag--err {
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
}
.lc-tag--warn {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}
.lc-tag--ghost {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
}

/* Add subcategory link — compact density */
.lc-add-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--gutter) 6px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  min-height: 32px;
}
.lc-add-sub__icon {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  width: 10px;
}

/* Collapse body hide/show — moved to .lg-* section (is-collapsed) */

/* Column alignment utilities */
.lc-col--right { text-align: right; }

/* Chevron cell in item rows */
.lc-item-chevron {
  text-align: right;
  font-size: var(--fs-base);
  color: var(--text-tertiary);
}

/* Footer bar */
.lc-footer {
  flex-shrink: 0;
  padding: 10px var(--gutter);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* Empty state (centered instructive — empty-a) */
.lc-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  text-align: center;
}
.lc-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.lc-empty__title {
  font-size: var(--fs-xl);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.lc-empty__text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 260px;
  margin-bottom: 24px;
}

/* ============================================================
   DESKTOP — Catalogue browse empty state (Var B onboarding)
   d-onboard-* namespace. Layers INSIDE .d-state / .d-empty.
   BASE-HIDDEN; revealed >=1024px only. Mobile .lc-empty untouched.
   ============================================================ */
.d-onboard { display: none; }

@media (min-width: 768px) {
  .d-onboard { display: block; width: 100%; max-width: 480px; text-align: left; }
  .d-onboard__eyebrow { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 500; margin-bottom: 8px; }
  .d-onboard__title { font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.3px; margin-bottom: 6px; }
  .d-onboard__text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 24px; }

  .d-onboard__steps { display: flex; flex-direction: column; gap: 10px; }
  .d-onboard-step { padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; gap: 14px; align-items: flex-start; }
  .d-onboard-step__num { width: 28px; height: 28px; border-radius: 14px; background: var(--bg-base); border: 1px solid var(--border-strong); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; font-family: var(--font-mono); flex-shrink: 0; }
  .d-onboard-step--active .d-onboard-step__num { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
  .d-onboard-step__body { flex: 1; min-width: 0; }
  .d-onboard-step__head { font-size: 14px; color: var(--text-primary); font-weight: 500; margin-bottom: 3px; }
  .d-onboard-step__sub { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }
  .d-onboard-step__cta { margin-top: 10px; padding: 8px 14px; border-radius: var(--radius); font-size: 12px; font-weight: 500; background: var(--bg-base); color: var(--text-tertiary); border: 1px solid var(--border-strong); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
  .d-onboard-step--active .d-onboard-step__cta { background: var(--accent); color: var(--bg-base); border-color: var(--accent); font-weight: 600; }
  .d-onboard-step__cta[aria-disabled="true"] { opacity: 0.55; cursor: default; pointer-events: none; }

  .d-onboard__import { margin-top: 20px; padding: 12px 16px; text-align: center; background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); font-size: 12px; color: var(--text-tertiary); }
  .d-onboard__import-link { color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; text-decoration: none; }
  .d-onboard__import-link:hover { text-decoration: underline; }
}

/* ---- Shared dropdown picker (dd-pick) — reusable select replacement ---- */
.dd-pick { position:absolute; top:100%; left:0; z-index:20; margin-top:4px;
           background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:10px;
           box-shadow:0 8px 24px rgba(0,0,0,0.5); max-height:380px; overflow-y:auto;
           min-width:240px; max-width:320px; }
.dd-pick__group { padding:6px 12px 3px; font-size:var(--fs-2xs); font-weight:600; color:var(--text-tertiary);
                  text-transform:uppercase; letter-spacing:0.06em; position:sticky; top:0;
                  background:var(--bg-elevated); border-bottom:1px solid var(--border); }
.dd-pick__item { padding:5px 12px; font-size:var(--fs-xs); color:var(--text-primary); cursor:pointer;
                 display:flex; align-items:center; gap:8px; }
.dd-pick__item:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.dd-pick__item--sub { padding-left:32px; color:var(--text-secondary); }
.dd-pick__item--active { color:var(--accent); }
.dd-pick__item--parent { font-weight:500; }
.dd-pick__dot { width:7px; height:7px; border-radius:2px; flex-shrink:0; }
.dd-pick__check { margin-left:auto; font-size:var(--fs-xs); color:var(--accent); flex-shrink:0; }

/* ---- Shared d-pdp components — panel, row, label, chart, timeline (all widths) ---- */
.d-pdp-label { font-size:11px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.05em; font-weight:600;
               display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 var(--gutter); margin-bottom:8px; }
.d-pdp-label__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); text-transform:none; letter-spacing:0; }
.d-pdp-panel { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden;
               margin:0 var(--gutter) 16px; }
.d-pdp-row { padding:10px 14px; display:flex; justify-content:space-between; align-items:center; }
.d-pdp-row + .d-pdp-row { border-top:1px solid var(--border); }
.d-pdp-row__key { font-size:12px; color:var(--text-tertiary); }
.d-pdp-row__val { font-size:12px; color:var(--text-primary); }
.d-pdp-row__val--mono { font-family:var(--font-mono); }
.d-pdp-empty-note { padding:14px 16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px;
                    margin:0 var(--gutter) 16px; }
.d-pdp-empty-note__title { font-size:12px; color:var(--text-tertiary); }
.d-pdp-empty-note__sub { font-size:11px; color:var(--text-tertiary); margin-top:4px; }
.d-pdp-row__key--empty { font-style:italic; }
.d-pdp-row__input { background:transparent; border:1px solid transparent; border-radius:4px;
                    padding:2px 6px; font-size:var(--fs-sm); font-family:var(--font-mono); color:var(--text-primary);
                    text-align:right; width:72px; outline:none; }
.d-pdp-row__input:hover:not(:disabled) { border-color:var(--border); }
.d-pdp-row__input:focus { border-color:var(--accent); background:var(--bg-surface); }
.d-pdp-row__input:disabled { opacity:0.7; }
.d-pdp-row__input::placeholder { color:var(--text-tertiary); }
.d-pdp-row__select { background:transparent; border:1px solid transparent; border-radius:4px;
                     padding:2px 6px; font-size:var(--fs-sm); color:var(--text-primary); outline:none; cursor:pointer; }
.d-pdp-row__select:hover:not(:disabled) { border-color:var(--border); }
.d-pdp-row__select:focus { border-color:var(--accent); }
.d-pdp-row__select:disabled { opacity:0.7; }
.d-pdp-row__select--sm { width:56px; }
.d-pdp-row__pfx { font-size:var(--fs-sm); color:var(--text-tertiary); font-family:var(--font-mono); margin-right:2px; }
.d-pdp-row__sfx { font-size:var(--fs-xs); color:var(--text-tertiary); margin-left:4px; }
.d-pdp-row__textarea { background:transparent; border:1px solid transparent; border-radius:4px;
                       padding:4px 6px; font-size:var(--fs-sm); color:var(--text-primary); width:100%;
                       resize:vertical; outline:none; font-family:var(--font-body); min-width:0; }
.d-pdp-row__textarea:hover:not(:disabled) { border-color:var(--border); }
.d-pdp-row__textarea:focus { border-color:var(--accent); background:var(--bg-surface); }
.d-pdp-row--top { align-items:flex-start; }
.d-pdp-row--top .d-pdp-row__val { flex:1; min-width:0; }
.d-pdp-panel--allergens { padding:12px 14px; }
.d-pdp-panel--allergens .m-pd-allergen-grid { display:flex; flex-wrap:wrap; gap:6px; }
.d-pdp-add-btn { background:none; border:none; color:var(--accent); font-size:var(--fs-sm); cursor:pointer; padding:0; font-family:var(--font-body); }
.d-pdp-add-btn:hover { text-decoration:underline; }
.d-pdp__pill-row--spaced { margin-left:4px; }
.d-pdp-label--pad { padding:var(--gutter) var(--gutter) 0; margin-top:20px; }
.d-pdp-stock-loading { padding:40px 16px; text-align:center; }
.d-pdp-stock-loading__text { font-size:var(--fs-sm); color:var(--text-tertiary); }
.m-pd-toggle__dot--on { left:17px; }
.m-pd-ss-qty-row { display:flex; gap:2px; margin-top:1px; }
.d-pdp-ss-custom-key { flex:1; min-width:0; display:flex; gap:6px; align-items:center; }
.d-pdp-row__input--left { text-align:left; }
.d-pdp-row__input--qty { width:48px; }
.d-pdp-row__input--name { flex:1; }
.d-pdp-ss-remove-btn { color:var(--error); margin-left:8px; }
.d-pdp-ph { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin:0 var(--gutter); }
.d-pdp-ph__chart-full { position:relative; height:140px; padding:8px 12px; }
.d-pdp-ph__summary { display:flex; align-items:stretch; border-top:1px solid var(--border); }
.d-pdp-ph__summary-card { padding:12px 16px; border-right:1px solid var(--border); min-width:100px; flex-shrink:0; }
.d-pdp-ph__summary-text { padding:12px 16px; flex:1; min-width:0; }
.d-pdp-ph__answer { font-size:13px; color:var(--text-primary); font-weight:500; }
.d-pdp-ph__answer-pct { color:var(--error); }
.d-pdp-ph__answer-pct--ok { color:var(--success); }
.d-pdp-ph__narr { font-size:12px; color:var(--text-secondary); margin-top:4px; line-height:1.5; }
.d-pdp-ph__ranges { display:flex; gap:4px; }
.d-pdp-ph__range { padding:3px 9px; border-radius:4px; font-size:10px; background:transparent;
                   color:var(--text-tertiary); border:1px solid var(--border); cursor:pointer; }
.d-pdp-ph__range.is-active { background:var(--accent); color:var(--bg-base); border-color:transparent; font-weight:600; }
.d-pdp-glance--strip { display:grid; grid-template-columns:1fr 1fr 1fr; border-bottom:1px solid var(--border); }
.d-pdp-glance__cell { text-align:center; padding:12px 8px; }
.d-pdp-glance__cell + .d-pdp-glance__cell { border-left:1px solid var(--border); }
.d-pdp-glance__label { font-size:10px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.04em; font-weight:500; }
.d-pdp-glance__value { font-size:18px; font-family:var(--font-mono); font-weight:600; color:var(--text-primary); margin-top:2px; }
.d-pdp-glance__value--accent { color:var(--accent); }
.d-pdp-glance__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.d-pdp-chart-empty { padding:40px 16px; text-align:center; font-size:12px; color:var(--text-tertiary);
                     display:flex; align-items:center; justify-content:center; min-height:120px; }
.d-pdp-tl { border-top:1px solid var(--border); }
.d-pdp-tl__row { padding:10px var(--gutter); display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.d-pdp-tl__row + .d-pdp-tl__row { border-top:1px solid var(--border); }
.d-pdp-tl__row:active { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.d-pdp-tl__row--spike { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.d-pdp-tl__date { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); flex-shrink:0; width:44px; padding-top:2px; }
.d-pdp-tl__more { padding:8px var(--gutter); font-size:11px; color:var(--accent); cursor:pointer; }
.d-pdp-wac__kind { width:20px; height:20px; border-radius:4px; color:var(--bg-base); display:flex;
                   align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px;
                   font-weight:700; flex-shrink:0; margin-top:1px; }
.d-pdp-wac__kind--s { background:var(--accent); }
.d-pdp-wac__kind--i { background:var(--success); }
.d-pdp-wac__kind--a { background:var(--warning); }
.d-pdp-wac__body { flex:1; min-width:0; }
.d-pdp-wac__label { font-size:12px; color:var(--text-primary); }
.d-pdp-wac__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }

/* Desktop serve-size table grid */
.d-pdp-ss-head { display:grid; grid-template-columns:20px 1fr 80px 48px; gap:8px; padding:6px var(--gutter);
                  font-size:9px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.04em;
                  font-family:var(--font-mono); border-bottom:1px solid var(--border); }
.d-pdp-ss-head > :nth-child(3),
.d-pdp-ss-head > :nth-child(4) { text-align:right; }
.d-pdp-ss-row { display:grid; grid-template-columns:20px 1fr 80px 48px; gap:8px; padding:8px var(--gutter);
                align-items:center; border-top:1px solid var(--border); }
.d-pdp-ss-row:first-of-type { border-top:none; }
.d-pdp-ss-name { font-size:12px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d-pdp-ss-price { display:flex; align-items:center; gap:2px; justify-content:flex-end; font-family:var(--font-mono); font-size:12px; }
.d-pdp-ss-price .d-pdp-row__input { text-align:right; width:54px; }
.d-pdp-ss-gp { text-align:right; font-family:var(--font-mono); font-size:11px; font-weight:500; }
.d-pdp-ss-empty { padding:10px var(--gutter); }

/* Cost-chip + used-in rows — shared (mobile drawer + desktop panel both use these) */
.d-pdp__cost-chip { padding:3px 8px; border-radius:4px; font-size:10px; font-weight:600;
                    background:color-mix(in srgb, var(--error) 10%, transparent); color:var(--error); border:1px solid color-mix(in srgb, var(--error) 20%, transparent); }

.d-pdp-used__subhead { padding:8px var(--gutter) 6px; font-size:9px; color:var(--text-tertiary); text-transform:uppercase;
                       letter-spacing:0.05em; font-weight:600; background:var(--bg-surface); }
.d-pdp-used__subhead + .d-pdp-used__subhead, .d-pdp-used__row + .d-pdp-used__subhead { border-top:1px solid var(--border); }
.d-pdp-used__row { padding:9px var(--gutter); display:flex; align-items:center; justify-content:space-between;
                   border-top:1px solid var(--border); cursor:pointer; text-decoration:none; }
.d-pdp-used__name { font-size:12px; color:var(--text-primary); }
.d-pdp-used__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.d-pdp-used__price { font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); }

/* ============================================================
   Desktop — Product Detail Panel (read-only)  (additive)
   d-pdp-* namespace. The right detail panel inside .d-md-detail
   (master-detail frame). STOCK-item variant.
   Gated >=1024px; mobile (<1024) never sees these rules.
   ============================================================ */
@media (min-width: 768px) {
  .d-pdp { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; }
  .d-pdp > form { display:flex; flex-direction:column; flex:1; min-height:0; }
  .d-pdp__header { padding:20px 32px 18px; border-bottom:1px solid var(--border);
                   display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-shrink:0; }
  .d-pdp__eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:6px;
                    font-size:11px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.05em; }
  .d-pdp__dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
  .d-pdp__title { font-size:22px; font-family:var(--font-heading); font-weight:600; color:var(--text-primary); margin:0 0 6px; }
  .d-pdp__badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .d-pdp__bucket { padding:3px 10px; border-radius:4px; font-size:10px; font-weight:600;
                   background:color-mix(in srgb, var(--success) 12%, transparent); color:var(--success); border:1px solid color-mix(in srgb, var(--success) 20%, transparent); }
  .d-pdp__sizing { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); }
  .d-pdp__actions { display:flex; gap:8px; flex-shrink:0; margin-top:4px; }
  .d-pdp__body { flex:1; overflow-y:auto; min-height:0; padding:24px 32px 32px; }

  .d-pdp__cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
  .d-pdp-card { padding:14px 16px; background:var(--bg-surface); border-radius:10px; border:1px solid var(--border); }
  .d-pdp-card__label { color:var(--text-tertiary); font-size:10px; text-transform:uppercase; letter-spacing:0.05em; }
  .d-pdp-card__value { font-family:var(--font-mono); font-size:18px; font-weight:500; color:var(--text-primary); margin-top:4px; }
  .d-pdp-card__value--accent { color:var(--success); }
  .d-pdp-card__sub { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }

  .d-pdp-label { padding:0; margin-bottom:10px; align-items:baseline; }
  .d-pdp-panel { margin:0 0 24px; }
  .d-pdp-empty-note { margin:0 0 24px; }

  .d-pdp-ph { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:24px; }
  .d-pdp-ph__chart-full { padding:16px 20px 8px; height:160px; }
  .d-pdp-ph__chart-full canvas { cursor:pointer; background:transparent; }

  /* WAC card: value card + narrative side by side below chart */
  .d-pdp-ph__summary { display:flex; align-items:flex-start; border-bottom:1px solid var(--border); }
  .d-pdp-ph__summary-card { padding:14px 20px; border-right:1px solid var(--border); flex-shrink:0; min-width:120px; }
  .d-pdp-ph__summary-text { padding:14px 20px; flex:1; min-width:0; padding-top:30px; }

  .d-pdp-ph__headline { padding:12px 20px 16px; border-bottom:1px solid var(--border); }
  .d-pdp-ph__answer { font-size:14px; color:var(--text-primary); font-weight:500; line-height:1.4; }
  .d-pdp-ph__answer-pct { font-family:var(--font-mono); color:var(--warning); }
  .d-pdp-ph__answer-pct--ok { font-family:var(--font-mono); color:var(--success); }
  .d-pdp-ph__narr { font-size:12px; color:var(--text-secondary); margin-top:4px; line-height:1.5; }
  .d-pdp-ph__ranges { display:flex; gap:4px; }
  .d-pdp-ph__range { padding:3px 9px; border-radius:4px; font-size:10px; background:transparent;
                     color:var(--text-tertiary); border:1px solid var(--border); cursor:pointer; }
  .d-pdp-ph__range.is-active { background:var(--accent); color:var(--bg-base); border-color:transparent; font-weight:600; }

  .d-pdp-tl { border-top:1px solid var(--border); }
  .d-pdp-tl__row { padding:10px 20px; display:flex; align-items:center; gap:12px; cursor:pointer; }
  .d-pdp-tl__row + .d-pdp-tl__row { border-top:1px solid var(--border); }
  .d-pdp-tl__row--spike { background:color-mix(in srgb, var(--error) 4%, transparent); }
  .d-pdp-tl__date { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); flex-shrink:0; width:44px; }
  .d-pdp-tl__badge { font-size:9px; font-family:var(--font-mono); letter-spacing:0.04em; text-transform:uppercase;
                     font-weight:500; padding:2px 6px; border-radius:3px; background:color-mix(in srgb, var(--accent) 10%, transparent);
                     color:var(--accent); flex-shrink:0; }
  .d-pdp-tl__delta { font-size:11px; font-family:var(--font-mono); font-weight:500; flex-shrink:0; }
  .d-pdp-tl__delta--up { color:var(--error); }
  .d-pdp-tl__delta--warn { color:var(--warning); }
  .d-pdp-tl__delta--held { color:var(--text-tertiary); }
  .d-pdp-tl__desc { font-size:11px; color:var(--text-tertiary); flex:1; min-width:0;
                    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .d-pdp-tl__more { padding:10px 20px; font-size:11px; color:var(--accent); border-top:1px solid var(--border); cursor:pointer; }

  .d-pdp__cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

  .d-pdp-tbl__head, .d-pdp-tbl__row { display:grid; grid-template-columns:70px 1fr 50px 70px 70px; gap:6px; }
  .d-pdp-tbl__head { padding:7px 14px; background:var(--bg-surface); font-size:9px; color:var(--text-tertiary);
                     text-transform:uppercase; letter-spacing:0.05em; font-family:var(--font-mono); }
  .d-pdp-tbl__row { padding:10px 14px; border-top:1px solid var(--border); cursor:pointer; align-items:center; text-decoration:none; display:grid; }
  .d-pdp-tbl__row--highlight { background:color-mix(in srgb, var(--error) 3%, transparent); }
  .d-pdp-tbl__cell { font-size:11px; font-family:var(--font-mono); color:var(--text-secondary); }
  .d-pdp-tbl__cell--name { font-size:12px; font-family:var(--font-body); color:var(--text-primary);
                           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .d-pdp-tbl__cell--total { color:var(--text-primary); }
  .d-pdp-tbl__cell--r { text-align:right; }

  .d-pdp-glance { padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .d-pdp-glance--strip { grid-template-columns:1fr 1fr 1fr; padding:0; border-bottom:1px solid var(--border); gap:0; }
  .d-pdp-glance__cell { text-align:center; padding:14px 12px; }
  .d-pdp-glance__cell + .d-pdp-glance__cell { border-left:1px solid var(--border); }
  .d-pdp-glance__value--accent { color:var(--accent); }
  .d-pdp-glance__card { padding:10px 12px; background:var(--bg-elevated); border-radius:8px; border:1px solid var(--border); }
  .d-pdp-glance__label { font-size:9px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.05em; font-weight:500; }
  .d-pdp-glance__value { font-size:16px; font-family:var(--font-mono); color:var(--text-primary); font-weight:500; margin-top:3px; }
  .d-pdp-glance__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }

  .d-pdp-wac__row { padding:10px 14px; display:flex; align-items:flex-start; gap:10px; }
  .d-pdp-wac__row + .d-pdp-wac__row { border-top:1px solid var(--border); }
  .d-pdp-wac__kind { width:20px; height:20px; border-radius:4px; color:var(--bg-base); display:flex;
                     align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px;
                     font-weight:700; flex-shrink:0; margin-top:1px; }
  .d-pdp-wac__kind--s { background:var(--accent); }
  .d-pdp-wac__kind--i { background:var(--success); }
  .d-pdp-wac__kind--a { background:var(--warning); }
  .d-pdp-wac__body { flex:1; min-width:0; }
  .d-pdp-wac__label { font-size:12px; color:var(--text-primary); }
  .d-pdp-wac__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
  .d-pdp-wac__meta--ok { color:var(--success); }

  .d-pdp-deactivate { width:100%; padding:10px; background:transparent; border:1px solid color-mix(in srgb, var(--error) 20%, transparent);
                      color:var(--error); border-radius:8px; font-size:12px; font-weight:500; cursor:pointer; margin-top:24px; }

  /* Edit button (header) — legacy, kept for non-editable contexts */
  .d-pdp__edit-btn { padding:8px 18px; background:var(--bg-elevated); border:1px solid var(--border-strong);
                     border-radius:8px; color:var(--text-primary); font-size:13px; cursor:pointer; font-family:var(--font-body); }
  .d-pdp__edit-btn:hover { border-color:var(--accent); }

  /* Inline-editable inputs */
  .d-pdp__header-left { flex:1; min-width:0; }
  .d-pdp__title--edit { display:block; background:transparent; border:1px solid transparent; border-radius:6px;
                        padding:2px 6px; width:100%; outline:none; box-sizing:border-box; }
  .d-pdp__title--edit:hover:not(:disabled) { border-color:var(--border); }
  .d-pdp__title--edit:focus { border-color:var(--accent); background:var(--bg-surface); }
  .d-pdp__title--edit:disabled { opacity:0.7; }
  .d-pdp__title--edit::placeholder { color:var(--text-tertiary); }
  .d-pdp__cat-wrap { position:relative; display:inline-flex; align-items:center; gap:2px; cursor:pointer; }
  .d-pdp__cat-select { position:absolute; width:0; height:0; opacity:0; pointer-events:none; overflow:hidden; }
  .d-pdp__cat-caret { font-size:10px; color:var(--text-tertiary); }
  .d-pdp__pill-row { display:flex; gap:6px; align-items:center; }
  .d-pdp__save-status { font-size:13px; font-weight:500; color:var(--accent); white-space:nowrap; }
  /* Input/select/textarea/allergen/add-btn — now in shared section above */

  /* Two chart columns: side-by-side at >=1280, stacked at 1024-1279 */
  .d-pdp__chart-cols { display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:24px; }

  /* Chart card tooltip */
  .d-pdp-chart-tip { position:absolute; z-index:10; padding:10px 14px; background:var(--bg-elevated);
                     border:1px solid var(--border-strong); border-radius:8px; pointer-events:none;
                     max-width:280px; box-shadow:0 4px 16px rgba(0,0,0,0.4); }
  .d-pdp-chart-tip__date { font-size:9px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.04em;
                           font-family:var(--font-mono); margin-bottom:4px; }
  .d-pdp-chart-tip__ref { font-size:12px; color:var(--text-primary); font-weight:500; margin-bottom:3px; }
  .d-pdp-chart-tip__delta { font-size:11px; font-family:var(--font-mono); }

  /* ---- Finished-good additions (d-pdp-* shared namespace) ---- */

  /* Title row with lock marker */
  .d-pdp__title-row { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
  .d-pdp__lock { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); flex-shrink:0; }

  /* Type / sell chips (extend .d-pdp__badges) */
  .d-pdp__chip { padding:3px 10px; border-radius:4px; font-size:10px; font-weight:600;
                 border:1px solid var(--border-strong); color:var(--text-secondary); }
  .d-pdp__chip--type { background:color-mix(in srgb, var(--info) 12%, transparent); color:var(--info); border-color:color-mix(in srgb, var(--info) 25%, transparent); }
  .d-pdp__chip--sell { background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 20%, transparent); }

  /* ⋯ overflow button */
  .d-pdp__more-btn { padding:8px 12px; background:var(--bg-elevated); border:1px solid var(--border-strong);
                     border-radius:8px; color:var(--text-tertiary); font-size:13px; cursor:pointer; font-family:var(--font-body); }
  .d-pdp__more-btn:hover { border-color:var(--accent); }

  /* Source-recipe card (finished-good only) */
  .d-pdp-source { padding:12px 20px; background:color-mix(in srgb, var(--info) 5%, transparent); border:1px solid color-mix(in srgb, var(--info) 15%, transparent);
                  border-left:3px solid var(--info); border-radius:10px; margin-bottom:24px;
                  display:flex; align-items:center; gap:20px; text-decoration:none; cursor:pointer; }
  .d-pdp-source:hover { background:color-mix(in srgb, var(--info) 8%, transparent); }
  .d-pdp-source__body { flex:1; min-width:0; }
  .d-pdp-source__eyebrow { font-size:9px; color:var(--text-tertiary); text-transform:uppercase;
                           letter-spacing:0.05em; font-weight:500; margin-bottom:2px; }
  .d-pdp-source__name { font-size:14px; color:var(--text-primary); font-weight:500; }
  .d-pdp-source__meta { display:flex; gap:16px; font-size:11px; font-family:var(--font-mono); color:var(--text-secondary); margin-top:2px; }
  .d-pdp-source__note { font-size:10px; color:var(--info); font-style:italic; }
  .d-pdp-source__open { font-size:13px; color:var(--info); font-weight:500; flex-shrink:0; }

  /* Lock marker for sizing fields */
  .d-pdp-locked { font-size:10px; color:var(--text-tertiary); margin-left:6px; }

  /* Serve-size 4-col grid header + rows */
  .d-pdp-serve-head, .d-pdp-serve-row { display:grid; grid-template-columns:1fr 60px 70px 48px; gap:6px; padding:8px 14px; align-items:center; }
  .d-pdp-serve-head { background:var(--bg-elevated); font-size:9px; color:var(--text-tertiary);
                      text-transform:uppercase; letter-spacing:0.05em; font-family:var(--font-mono); }
  .d-pdp-serve-row + .d-pdp-serve-row, .d-pdp-serve-head + .d-pdp-serve-row { border-top:1px solid var(--border); }
  .d-pdp-serve__num { text-align:right; font-family:var(--font-mono); font-size:11px; }
  .d-pdp-serve__num--price { color:var(--text-primary); }
  .d-pdp-serve__num--gp { color:var(--success); }

  /* FG chart labels + empty state */
  .d-pdp-fg-chart-label { font-size:10px; color:var(--text-tertiary); text-transform:uppercase;
                          letter-spacing:0.04em; font-weight:600; margin-bottom:8px; }
  .d-pdp-fg-chart-empty { padding:24px 16px; font-size:11px; color:var(--text-tertiary); text-align:center; line-height:1.5;
                          display:flex; align-items:center; justify-content:center; min-height:120px; }

  /* Serve-size sub text (qty + unit under the serve name) */
  .d-pdp-serve__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); }

  /* Product create drawer scroll body */
  .d-dpc__scroll { flex:1; overflow-y:auto; min-height:0; padding:16px; }
}

/* 768-1023: the catalogue master-detail pane (products / menu-items / recipes, shared
   .d-pdp detail) is only ~424px wide in the band, so the 2-col detail split crushes its
   content. Collapse .d-pdp__cols to a single column — everything stacks full-width like
   the charts already do. >=1024 (pane >=640px) keeps the 2-col split. */
@media (min-width: 768px) and (max-width: 1023px) {
  .d-pdp__cols { grid-template-columns: 1fr; }
}

@media (min-width: 1280px) {
  .d-pdp__chart-cols { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   Desktop — Category Edit drawer BODY form layout (.d-cat-edit-*)
   Renders inside the SHARED m-sl-drawer body (components.css).
   Additive, gated >=1024px. NO drawer-chrome CSS here.
   ============================================================ */
@media (min-width: 768px) {
  .d-cat-edit { padding:20px; }
  .d-cat-edit__field { margin-bottom:20px; }
  .d-cat-edit__label { font-size:11px; color:var(--text-tertiary); text-transform:uppercase;
                       letter-spacing:0.05em; font-weight:500; margin-bottom:6px; display:block; }
  .d-cat-edit__label-note { text-transform:none; letter-spacing:0; color:var(--text-tertiary); font-weight:400; }
  .d-cat-edit__input,
  .d-cat-edit__select { width:100%; padding:10px 14px; box-sizing:border-box; background:var(--bg-elevated);
                        border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--text-primary);
                        font-size:14px; font-family:var(--font-body); outline:none; }
  .d-cat-edit__input:focus,
  .d-cat-edit__select:focus { border-color:var(--accent); }
  .d-cat-edit__hint { font-size:11px; color:var(--text-tertiary); margin-top:6px; line-height:1.5; }

  .d-cat-edit__group { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .d-cat-edit__toggle { padding:10px 8px; border-radius:var(--radius-md); background:var(--bg-elevated);
                        border:1px solid var(--border); color:var(--text-secondary); font-size:13px;
                        font-weight:400; font-family:var(--font-body); cursor:pointer; text-align:center; }
  .d-cat-edit__toggle--active { background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:var(--accent);
                                color:var(--accent); font-weight:500; }

  .d-cat-edit__swatches { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
  .d-cat-edit__swatch { padding:10px 6px; border-radius:var(--radius-md); background:var(--bg-elevated);
                        border:1px solid var(--border); display:flex; flex-direction:column;
                        align-items:center; gap:5px; cursor:pointer; }
  .d-cat-edit__swatch--active { border-color:var(--accent); }
  .d-cat-edit__swatch-chip { width:18px; height:18px; border-radius:4px; }
  .d-cat-edit__swatch-name { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono);
                             text-transform:uppercase; letter-spacing:0.03em; }
  .d-cat-edit__swatch--active .d-cat-edit__swatch-name { color:var(--text-primary); }

  .d-cat-edit__readonly { padding:10px 14px; background:var(--bg-elevated); border:1px solid var(--border);
                          border-radius:var(--radius-md); font-size:13px; color:var(--text-secondary);
                          display:flex; justify-content:space-between; align-items:center; }
  .d-cat-edit__move { margin-top:8px; background:none; border:none; padding:0; color:var(--accent);
                      font-size:12px; font-weight:500; font-family:var(--font-body); cursor:pointer; }

  .d-cat-edit__gp { display:flex; align-items:center; gap:4px; }
  .d-cat-edit__gp-input { width:72px; }
  .d-cat-edit__gp-suffix { font-size:14px; color:var(--text-tertiary); font-family:var(--font-mono); }

  .d-cat-edit__delete { margin-top:8px; width:100%; padding:10px 14px; border-radius:var(--radius-md);
                        background:color-mix(in srgb, var(--error) 8%, transparent); border:1px solid color-mix(in srgb, var(--error) 25%, transparent);
                        color:var(--error); font-size:13px; font-weight:500; font-family:var(--font-body);
                        text-align:center; cursor:pointer; }
}

/* ============================================================
   Desktop — Product edit drawer density overrides
   Hides the Cost/Stock tabs (already visible on the read-only panel)
   and the footer WAC strip when inside the desktop edit drawer.
   Gated >=1024px so mobile product-detail-body is untouched.
   ============================================================ */
@media (min-width: 768px) {
  #product-edit-drawer .m-rd-tabs { display:none; }
  #product-edit-drawer [data-rd-panel="cost"],
  #product-edit-drawer [data-rd-panel="stock"] { display:none !important; }
  #product-edit-drawer .m-pd-footer { display:none; }
  #product-edit-drawer .m-pd-section--tight { display:none; }
  #product-edit-drawer .m-pd-snap-wac-row { display:none; }
  #product-edit-drawer .m-pd-section:has(.m-pd-used-in-header) { display:none; }
  #product-edit-drawer #pd-form { display:flex; flex-direction:column; }
  #product-edit-drawer #pd-allergens { order:7; }
  #product-edit-drawer #pd-more { order:8; }
  #product-edit-drawer .m-pd-deactivate { order:9; }
  #product-edit-drawer .m-pd-spacer { order:10; }
  #product-edit-drawer #pd-allergens { border-top:none; }
  #product-edit-drawer #pd-allergens .m-pd-accordion__arrow { display:none; }
  #product-edit-drawer #pd-more .m-pd-accordion__header { display:none; }
  #product-edit-drawer #pd-more .m-pd-accordion__body { display:block !important; padding-left:0; padding-right:0; }
  #product-edit-drawer #pd-cost-history,
  #product-edit-drawer #pd-sale-history { display:none; }
}

/* No results state */
.lc-no-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  text-align: center;
}
.lc-no-results__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.lc-no-results__title {
  font-size: var(--fs-lg);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 500;
  margin-bottom: 4px;
}
.lc-no-results__text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 250px;
  margin-bottom: 20px;
}
.lc-no-results__clear {
  padding: 10px var(--gutter);
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}


/* ============================================================
   Product detail — glance cards, used-in rows, invoice rows
   ============================================================ */

.m-pd-glance {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.m-pd-glance__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
}
.m-pd-glance__value {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 3px;
}
.m-pd-glance__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 1px;
}

.m-pd-used-in-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.m-pd-used-in-row--hidden {
  display: none;
}

/* ============================================================
   Product detail / edit — shared mobile components
   (used by product_detail.html AND product_form.html)
   ============================================================ */

/* Hero */
.m-pd-hero { padding: 14px var(--gutter) 0; background: var(--bg-surface); }
.m-pd-name-input {
  width: 100%; background: transparent; border: none;
  color: var(--text-primary); font-size: var(--fs-2xl);
  font-family: var(--font-heading); font-weight: 500;
  letter-spacing: -0.2px; padding: 4px 0 6px; outline: none;
}
.m-pd-name-input:focus { border-bottom: 1px solid var(--accent); }
.m-pd-hero__cat-row {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0 10px; flex-wrap: wrap;
}

/* Category picker inline */
.m-pd-cat-picker {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; white-space: nowrap;
  position: relative;
}
.m-pd-cat-picker select:not(.m-pd-cat-select--hidden) {
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-secondary); font-size: var(--fs-sm);
  font-family: var(--font-body); padding: 7px 10px;
  outline: none; cursor: pointer;
}
.m-pd-cat-picker select:not(.m-pd-cat-select--hidden):focus { border-color: var(--accent); }
.m-pd-cat-dot {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.m-pd-cat-breadcrumb {
  font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 400;
}
.m-pd-cat-select--hidden {
  position: absolute; inset: 0;
  width: 100%; height: 100%; opacity: 0; cursor: pointer;
}

/* Badges */
.m-pd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 4px;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.3px;
  text-transform: uppercase; line-height: 1.4;
}
.m-pd-badge--fg   { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.m-pd-badge--sell { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* Cost category compact picker */
.m-pd-cat-account {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.m-pd-pill {
  padding: 3px 10px; border-radius: var(--radius-pill); border: none;
  background: transparent; color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: 500; font-family: var(--font-body);
  cursor: pointer; white-space: nowrap; transition: all 100ms;
}
.m-pd-pill--active {
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600;
}
.m-pd-pill--hidden { display: none; }
.m-pd-pill:disabled { opacity: 0.5; cursor: default; }

/* Source recipe card */
.m-pd-recipe-card {
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--info); border-radius: 6px;
  padding: 10px var(--gutter); display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; min-height: 44px;
}

/* Pricing box */
.m-pd-pricing-box {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px var(--gutter); margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 12px;
}
.m-pd-cost-input {
  width: 84px; background: transparent; border: none;
  color: var(--text-primary); font-family: var(--font-mono);
  font-size: var(--fs-2xl); font-weight: 500; outline: none; padding: 0;
}
.m-pd-cost-input:focus { border-bottom: 1px solid var(--accent); }
.m-pd-cost-input:disabled { color: var(--text-tertiary); }
.m-pd-sale-input {
  width: 70px; background: transparent; border: none;
  color: var(--text-primary); font-family: var(--font-mono);
  font-size: var(--fs-xl); font-weight: 500; outline: none; padding: 0;
}
.m-pd-sale-input:focus { border-bottom: 1px solid var(--accent); }

/* Sizing field rows — editable */
.m-pd-field {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px var(--gutter);
  border-bottom: 1px solid var(--border); min-height: 44px;
}
.m-pd-field__label {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 500;
  flex-shrink: 0;
}
.m-pd-field input[type="text"],
.m-pd-field input[type="number"] {
  width: 80px; background: transparent; border: none;
  color: var(--text-primary); font-family: var(--font-mono);
  font-size: var(--fs-base); font-weight: 500; text-align: right;
  outline: none; padding: 0;
}
.m-pd-field input:focus { border-bottom: 1px solid var(--accent); }
.m-pd-field input:disabled { color: var(--text-tertiary); }
.m-pd-field select {
  background: transparent; border: none;
  color: var(--text-primary); font-family: var(--font-mono);
  font-size: var(--fs-base); font-weight: 500; text-align: right;
  cursor: pointer;
}
.m-pd-field select option {
  background: var(--bg-base); color: var(--text-primary);
}
.m-pd-field select:disabled { color: var(--text-tertiary); }
.m-pd-field__suffix {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  font-family: var(--font-mono); margin-left: 4px;
}

/* Sale toggle */
.m-pd-toggle-row {
  padding: 10px var(--gutter); margin-bottom: 8px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 6px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; min-height: 44px;
}
.m-pd-toggle {
  width: 36px; height: 20px; border-radius: 10px;
  position: relative; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border-strong);
  transition: background 120ms;
}
.m-pd-toggle--on  { background: var(--accent); }
.m-pd-toggle--off { background: var(--bg-elevated); }
.m-pd-toggle__dot {
  position: absolute; top: 1px; width: 16px; height: 16px;
  border-radius: 8px; background: #fff; transition: left 120ms;
}

/* Section divider */
.m-pd-section { padding: 14px 0 4px; border-top: 1px solid var(--border); }
.m-pd-section--no-border { border-top: none; }

/* Deactivate */
.m-pd-deactivate { padding: 14px var(--gutter); border-top: 1px solid var(--border); background: var(--bg-surface); }
.m-pd-deactivate__btn {
  width: 100%; padding: 9px; background: transparent;
  border: 1px solid color-mix(in srgb, var(--error) 25%, transparent); color: var(--error);
  border-radius: 7px; font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; min-height: 44px;
}

/* ---- Product detail drawer ---- */
.m-pd-drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; }
.m-pd-drawer--open { pointer-events: auto; visibility: visible; }
.m-pd-drawer--stacked { z-index: 110; }
.m-pd-drawer__scrim { position: absolute; inset: 0; background: rgba(10,8,6,0.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s ease-out; }
.m-pd-drawer--open .m-pd-drawer__scrim { opacity: 1; }
.m-pd-drawer__sheet {
  position: absolute; bottom: 0; left: 0; right: 0; max-height: 88%;
  background: var(--bg-base); border-top-left-radius: 16px; border-top-right-radius: 16px;
  transform: translateY(100%); transition: transform 0.3s ease-out;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
}
.m-pd-drawer--open .m-pd-drawer__sheet { transform: translateY(0); }
.m-pd-drawer--closing .m-pd-drawer__sheet { transform: translateY(100%); }
.m-pd-drawer__chrome { flex-shrink: 0; padding: 8px 0 0; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.m-pd-drawer__grabber { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 8px; }
.m-pd-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px 12px; gap: 10px;
}
.m-pd-drawer__title { font-size: 15px; font-weight: 500; font-family: var(--font-heading); }
.m-pd-drawer__subtitle { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 1px; }
.m-pd-drawer__close {
  background: transparent; border: none; color: var(--text-tertiary);
  font-size: 12px; cursor: pointer; flex-shrink: 0; font-family: var(--font-heading);
}
.m-pd-save-btn {
  background: transparent; border: none; color: var(--accent);
  font-size: var(--fs-sm); font-weight: 600; font-family: var(--font-heading);
  cursor: pointer; padding: 6px 10px; letter-spacing: 0.2px;
}
.m-pd-save-btn--create { background: var(--accent); color: var(--accent-contrast); border-radius: 6px; padding: 6px 16px; font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.3px; }
.m-pd-save-btn--create:disabled { opacity: 0.35; pointer-events: none; }
.m-pd-save-btn--saving { color: var(--text-tertiary); pointer-events: none; }
.m-pd-save-btn--saved { color: var(--success); }
.m-pd-drawer__body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.m-pd-drawer__loading { padding: 40px 24px; text-align: center; color: var(--text-tertiary); font-size: 12px; }

/* drawer-regularization 06: the product detail drawer now rides the shared
   m-sl-drawer ENGINE (drawer.js), but its injected partial was built full-bleed
   against the old m-pd-drawer__sheet — a bg-base sheet with an edge-to-edge,
   zero-padding body so the partial's own bg-surface cards/footer pop. Preserve
   that exact look with two scoped overrides (additive, no new chrome class):
   restore the bg-base panel, the bg-surface chrome strip (grabber + header)
   capped by a 1px border-bottom — the original m-pd-drawer__chrome — and the
   full-bleed body. Migration changes the engine, not the drawer's appearance. */
#product-detail-drawer.m-sl-drawer .m-sl-drawer__panel { background: var(--bg-base); }
#product-detail-drawer.m-sl-drawer .m-sl-drawer__grabber,
#product-detail-drawer.m-sl-drawer .m-sl-drawer__header { background: var(--bg-surface); }
#product-detail-drawer.m-sl-drawer .m-sl-drawer__header { border-bottom: 1px solid var(--border); }
#product-detail-drawer.m-sl-drawer .m-sl-drawer__body { padding: 0; }

/* drawer-regularization 07: the recipe detail drawer rides the same shared
   m-sl-drawer ENGINE, and its injected partial (m-recipe-detail-body.html) was
   likewise built full-bleed against the old m-rd-drawer__sheet — a bg-base sheet
   with a bg-surface chrome strip and a zero-padding body so the live footer and
   tab content sit edge-to-edge. Restore that exact look with the same scoped
   overrides as products (additive, no new chrome class): bg-base panel, the
   bg-surface chrome strip (grabber + header) capped by a 1px border-bottom, and
   the full-bleed body. The Done close affordance keeps its bespoke look on a
   recipe-namespaced CONTENT class (.m-rd-done). A shared .m-sl-drawer__close DOES
   now exist (decisions.md [2026-07-05], defined with the base chrome below); the
   per-module close stand-ins (.m-pd-drawer__close / .m-rd-done / .m-mi-close /
   .m-cd-done) are legacy and get adopted onto the shared class opportunistically
   in later module passes — never two close affordances in one header. */
#recipe-detail-drawer.m-sl-drawer .m-sl-drawer__panel { background: var(--bg-base); }
#recipe-detail-drawer.m-sl-drawer .m-sl-drawer__grabber,
#recipe-detail-drawer.m-sl-drawer .m-sl-drawer__header { background: var(--bg-surface); }
#recipe-detail-drawer.m-sl-drawer .m-sl-drawer__header { border-bottom: 1px solid var(--border); }
#recipe-detail-drawer.m-sl-drawer .m-sl-drawer__body { padding: 0; }
#recipe-detail-drawer .m-rd-done { font-size: 12px; color: var(--text-tertiary); font-weight: 500; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 4px; }

/* drawer-regularization 08: the menu-item detail drawer rides the same shared
   m-sl-drawer ENGINE (JSON-render mode), and its partial was built full-bleed
   against the old m-pf-qc__sheet — a bg-base sheet with a bg-surface chrome strip
   (grabber + header) capped by a 1px border, a 0-padding body (the content panels
   carry their own padding), and a taller 94% max-height (m-pf-qc__sheet--tall).
   Restore that exact look with the same scoped overrides as products/recipes
   (additive, no new chrome class; Charles 2026-06-16). The 0 body padding is
   already produced by #mi-d-scroll = m-sl-comp-scroll directly under the
   0-padding panel (its margin:0 -16px / padding:0 16px nets to flush content).
   The Close affordance keeps the old m-pf-qc__cancel look on a menu-item content
   class .m-mi-close (closing rides the module's [data-mi-d-close] teardown). */
#mi-detail-drawer.m-sl-drawer .m-sl-drawer__panel { background: var(--bg-base); max-height: 94%; }
#mi-detail-drawer.m-sl-drawer .m-sl-drawer__grabber,
#mi-detail-drawer.m-sl-drawer .m-sl-drawer__header { background: var(--bg-surface); }
#mi-detail-drawer.m-sl-drawer .m-sl-drawer__header { border-bottom: 1px solid var(--border); }
#mi-detail-drawer .m-mi-close { font-size: 12px; color: var(--text-tertiary); cursor: pointer; flex-shrink: 0; }
/* Visible load-failure state for the JSON-render menu-item drawer (prompt 08,
   Codex 08 — the old onError only set a placeholder on the hidden edit input). */
.m-mi-load-error { padding: 40px 16px; text-align: center; }
.m-mi-load-error__text { font-size: 13px; color: var(--error); margin-bottom: 10px; }
.m-mi-load-error__retry { font-size: 13px; color: var(--accent); font-weight: 500; text-decoration: none; }

/* drawer-regularization 09: the categories stacked drawer family (category detail +
   create-category) now rides the shared m-sl-drawer ENGINE + chrome. Their injected/
   static bodies were built full-bleed against the old m-cd-drawer__sheet — a bg-base
   sheet (max-height 92vh) with a bg-surface chrome strip (grabber + header) capped by a
   1px border-bottom and a zero-padding body so the m-cat-detail / m-cd-edit-form content
   spans edge-to-edge. Restore that exact look with the same scoped overrides as
   products/recipes/menu-items (additive, no new chrome class; D2, Charles 2026-06-17).
   The Done/Cancel close affordance keeps the old accent m-cd-drawer__close look on a
   category-namespaced CONTENT class (.m-cd-done) — closing rides the engine's
   [data-cd-close]/[data-cc-close] handlers in category-drawers.js. The stacked product
   child reuses #product-detail-drawer's own overrides above; the --top layer is applied
   at open time by category-drawers.js. */
#category-detail-drawer.m-sl-drawer .m-sl-drawer__panel,
#create-cat-drawer.m-sl-drawer .m-sl-drawer__panel { background: var(--bg-base); max-height: 92%; }
#category-detail-drawer.m-sl-drawer .m-sl-drawer__grabber,
#category-detail-drawer.m-sl-drawer .m-sl-drawer__header,
#create-cat-drawer.m-sl-drawer .m-sl-drawer__grabber,
#create-cat-drawer.m-sl-drawer .m-sl-drawer__header { background: var(--bg-surface); }
#category-detail-drawer.m-sl-drawer .m-sl-drawer__header,
#create-cat-drawer.m-sl-drawer .m-sl-drawer__header { border-bottom: 1px solid var(--border); }
#category-detail-drawer.m-sl-drawer .m-sl-drawer__body,
#create-cat-drawer.m-sl-drawer .m-sl-drawer__body { padding: 0; }
.m-cd-done { font-size: 12px; color: var(--accent); font-weight: 500; cursor: pointer; background: none; border: none; font-family: var(--font-body); min-height: 44px; display: inline-flex; align-items: center; flex-shrink: 0; }

/* drawer-regularization 09: the dashboard drill-in sheets (#sheet-cost, #sheet-consumption)
   now ride the shared m-sl-drawer ENGINE + chrome. Their panel is already bg-surface
   (matching the shared chrome), but the kept m-detail-sheet__* CONTENT classes carry
   their own horizontal padding, so the shared body's 0 16px 16px would double-pad —
   zero the body padding so the content's own padding is authoritative (D2 body-only). */
#sheet-cost.m-sl-drawer .m-sl-drawer__panel,
#sheet-consumption.m-sl-drawer .m-sl-drawer__panel { background: var(--bg-base); }
#sheet-cost.m-sl-drawer .m-sl-drawer__body,
#sheet-consumption.m-sl-drawer .m-sl-drawer__body { padding: 0; }
#sheet-cost.m-sl-drawer .m-sl-drawer__header,
#sheet-consumption.m-sl-drawer .m-sl-drawer__header { border-bottom: 2px solid color-mix(in srgb, var(--text-primary) 12%, transparent); align-items: center; padding-bottom: 10px; }

/* ---- Product detail content styles ---- */
.m-pd-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.m-pd-footer {
  flex-shrink: 0; border-top: 2px solid var(--border-strong);
  background: var(--bg-surface); display: grid;
  transition: border-color 400ms ease;
}
.m-pd-footer > div {
  padding: 9px 10px 10px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.m-pd-footer > div:last-child { border-right: none; }
.m-pd-footer--flash { border-top-color: var(--accent); }
.m-pd-footer--stock { grid-template-columns: 1.1fr 1fr 1fr; }
.m-pd-footer--sale  { grid-template-columns: 1.05fr 0.95fr 0.7fr 0.95fr; }
.m-pd-group-pill { padding: 1px 5px; border-radius: 3px; font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.5px; font-family: var(--font-mono); }
.m-pd-group-pill--drinks { background: rgba(155,90,107,0.18); color: #c98a9b; border: 1px solid rgba(155,90,107,0.5); }
.m-pd-group-pill--food   { background: color-mix(in srgb, var(--success) 18%, transparent); color: #8fc09b; border: 1px solid color-mix(in srgb, var(--success) 50%, transparent); }
.m-pd-group-pill--other  { background: color-mix(in srgb, var(--text-tertiary) 22%, transparent); color: #b0a99f; border: 1px solid color-mix(in srgb, var(--text-tertiary) 60%, transparent); }
.m-pd-accordion { border-top: 1px solid var(--border); }
.m-pd-accordion__header {
  padding: 14px var(--gutter); display: flex; justify-content: space-between;
  align-items: center; min-height: 44px; cursor: pointer; user-select: none;
}
.m-pd-accordion__label { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; }
.m-pd-accordion__right { display: flex; align-items: center; gap: 8px; }
.m-pd-accordion__meta { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.m-pd-accordion__arrow { font-size: var(--fs-xs); color: var(--text-tertiary); transition: transform 200ms; }
.m-pd-accordion__body { display: none; padding: 0 var(--gutter) 14px; }
.m-pd-accordion--open .m-pd-accordion__body { display: block; }
.m-pd-accordion--open .m-pd-accordion__arrow { transform: rotate(90deg); }
.m-pd-chart-wrap { position: relative; width: 100%; height: 160px; margin-bottom: 8px; }
.m-pd-chart-empty { font-size: var(--fs-sm); color: var(--text-tertiary); text-align: center; padding: 20px 0; }
.m-pd-chart-answer { font-size: var(--fs-xs); color: var(--text-secondary); font-style: italic; padding: 8px var(--gutter); border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--warning) 6%, transparent); margin: 8px 0; }
.m-pd-chart-tooltip { position: absolute; background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.3); border-radius: 6px; padding: 6px 8px; z-index: 5; white-space: nowrap; pointer-events: none; }
.m-pd-chart-tooltip__date { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.02em; }
.m-pd-chart-tooltip__ref { font-size: var(--fs-xs); color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.m-pd-chart-tooltip__delta { font-family: var(--font-mono); font-size: var(--fs-xs); }
.m-pd-chart-rows { margin: 0 0 8px; padding: 0 var(--gutter); }
.m-pd-chart-row { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--gutter); border-bottom: 1px solid var(--border); cursor: pointer; gap: 8px; min-height: 44px; }
.m-pd-chart-row--active { border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.m-pd-chart-row--spike { }
.m-pd-range-chip { display: inline-block; font-size: var(--fs-xs); padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text-tertiary); cursor: pointer; min-height: 32px; min-width: 32px; line-height: 24px; text-align: center; }
.m-pd-range-chip--active { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 600; }
.m-pd-chart-range { display: flex; gap: 6px; padding: 8px 0; align-items: center; flex-wrap: wrap; }
.m-pd-spike-halo { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--error); pointer-events: none; animation: m-pd-spike-pulse 2s ease-in-out infinite; }
@keyframes m-pd-spike-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.6); opacity: 0; } }
.m-pd-serve-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.m-pd-serve-header { padding: 8px var(--gutter) 6px; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--border); }
.m-pd-serve-colhead { padding: 5px var(--gutter) 4px; display: flex; gap: 6px; align-items: center; font-size: var(--fs-2xs); font-family: var(--font-mono); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); background: var(--bg-base); }
.m-pd-serve-row { padding: 7px var(--gutter); display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border); }
.m-pd-serve-row:first-child { border-top: none; }
.m-pd-serve-row--off { opacity: 0.55; }
.m-pd-serve-check { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: 700; font-family: var(--font-mono); cursor: pointer; user-select: none; }
.m-pd-serve-check--on { border: 1.5px solid var(--accent); background: var(--accent); color: #1a1816; }
.m-pd-serve-check--off { border: 1.5px solid var(--border-strong); background: transparent; color: transparent; }
.m-pd-serve-price-wrap { width: 60px; display: flex; align-items: center; justify-content: flex-end; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 5px; padding: 3px 5px; gap: 1px; flex-shrink: 0; }
.m-pd-serve-price-input { width: 36px; background: transparent; border: none; color: var(--text-primary); font-size: var(--fs-xs); font-family: var(--font-mono); text-align: right; }
.m-pd-drawer-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }

/* Product detail — inline-style replacements */
.m-pd-fg-row { display: flex; align-items: baseline; gap: 8px; }
.m-pd-name-input--fg { flex: 1; min-width: 0; }
.m-pd-fg-label { font-size: var(--fs-2xs); color: var(--text-tertiary); font-family: var(--font-mono); flex-shrink: 0; }
.m-pd-fg-cat { font-size: var(--fs-sm); color: var(--text-secondary); }
.m-pd-select-caret { font-size: var(--fs-2xs); color: var(--text-tertiary); }
.m-pd-hero__spacer { flex: 1; }
.m-pd-hero__meta { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.m-pd-account-bar { padding: 0; background: var(--bg-surface); border-bottom: 1px solid var(--border); border-left: 3px solid var(--accent); }
.m-pd-account-bar--err { border-left-color: var(--error); }
.m-pd-account-inner { display: flex; align-items: center; gap: 8px; padding: 6px var(--gutter) 6px 13px; }
.m-pd-account-label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; flex-shrink: 0; }
.m-pd-pill--placeholder { color: var(--text-tertiary); font-style: italic; }
.m-pd-pnl-hint { font-size: var(--fs-xs); color: var(--text-tertiary); font-style: italic; flex-shrink: 0; }
.m-pd-section-header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gutter); margin-bottom: 8px; }
.m-pd-section-label { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; }
.m-pd-section-meta { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.m-pd-section-body { padding: 0 var(--gutter) 4px; }
.m-pd-section-pad { padding: 14px var(--gutter) 4px; }
.m-pd-field-label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; }
.m-pd-field-required { color: var(--error); }
.m-pd-field-lock { font-size: var(--fs-xs); }
.m-pd-input-row { display: flex; align-items: baseline; gap: 2px; margin-top: 3px; }
.m-pd-currency-lg { font-size: var(--fs-lg); color: var(--text-tertiary); font-family: var(--font-mono); }
.m-pd-currency-md { font-size: var(--fs-base); color: var(--text-tertiary); font-family: var(--font-mono); }
.m-pd-currency-sm { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.m-pd-unit-hint { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-left: 6px; }
.m-pd-recipe-hint { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 4px; }
.m-pd-flex-1 { flex: 1; min-width: 0; }
.m-pd-text-right { text-align: right; }
.m-pd-text-center { text-align: center; }
.m-pd-wac-value { font-size: var(--fs-base); font-family: var(--font-mono); font-weight: 500; margin-top: 4px; }
.m-pd-wac-sub { font-size: var(--fs-2xs); font-family: var(--font-mono); margin-top: 1px; }
.m-pd-toggle-title { font-size: var(--fs-sm); color: var(--text-primary); }
.m-pd-toggle-sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.m-pd-gp-value { font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--text-secondary); margin-top: 4px; }
.m-pd-recipe-name { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; font-family: var(--font-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-pd-recipe-note { font-size: var(--fs-xs); color: var(--info); margin-top: 4px; font-style: italic; }
.m-pd-recipe-arrow { font-size: var(--fs-sm); color: var(--info); font-weight: 500; flex-shrink: 0; }
.m-pd-no-recipe { background: color-mix(in srgb, var(--error) 4%, transparent); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); border-radius: 6px; padding: 10px var(--gutter); min-height: 44px; }
.m-pd-no-recipe__title { font-size: var(--fs-sm); color: var(--error); font-weight: 500; }
.m-pd-no-recipe__sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 3px; }
.m-pd-ss-label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; }
.m-pd-ss-count { font-size: var(--fs-2xs); color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: 0.2px; }
.m-pd-ss-col--check { width: 14px; flex-shrink: 0; }
.m-pd-ss-col--name { flex: 1; min-width: 0; }
.m-pd-ss-col--cost { width: 50px; text-align: right; flex-shrink: 0; }
.m-pd-ss-col--price { width: 60px; text-align: right; flex-shrink: 0; }
.m-pd-ss-col--gp { width: 36px; text-align: right; flex-shrink: 0; }
.m-pd-ss-col--rm { width: 20px; flex-shrink: 0; }
.m-pd-ss-name { font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; color: var(--text-primary); }
.m-pd-ss-qty { font-size: var(--fs-2xs); color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: 0.2px; margin-top: 1px; }
.m-pd-ss-cost-cell { width: 50px; text-align: right; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-secondary); flex-shrink: 0; }
.m-pd-ss-gp-cell { width: 36px; text-align: right; font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 500; flex-shrink: 0; }
.m-pd-ss-empty { font-size: var(--fs-sm); color: var(--text-tertiary); text-align: center; padding: 10px 0; }
.m-pd-field-inner { display: flex; align-items: center; gap: 4px; }
.m-pd-mu-select { width: 50px; }
.m-pd-field--bordered { border-bottom: 1px solid var(--border); }
.m-pd-notes-wrap { margin-top: 8px; }
.m-pd-notes-label { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 500; margin-bottom: 4px; }
.m-pd-notes-textarea { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-sm); padding: 8px 10px; resize: vertical; }
.m-pd-allergen-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.m-pd-fg-note { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 8px; font-style: italic; }
.m-pd-allergen-hint { font-size: var(--fs-xs); color: var(--info); font-family: var(--font-mono); text-align: right; padding: 8px 0 0; }
.m-pd-used-in-footnote { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.5; padding: 8px 10px; margin: 4px var(--gutter) 0; background: color-mix(in srgb, var(--warning) 5%, transparent); border: 1px dashed color-mix(in srgb, var(--warning) 25%, transparent); border-radius: 5px; }
.m-pd-spacer { height: 16px; }
.m-pd-drawer__actions { display: flex; align-items: center; gap: 8px; }

/* Shared required-to-save banner (yellow warning) */
.m-req-banner { padding: 11px var(--gutter); display: flex; align-items: flex-start; gap: 10px; }
.m-req-banner--warning { background: var(--warning-bg, color-mix(in srgb, var(--warning) 10%, transparent)); border-bottom: 1px solid var(--warning-border, color-mix(in srgb, var(--warning) 28%, transparent)); }
.m-req-banner--ok { background: color-mix(in srgb, var(--success) 8%, transparent); border-bottom: 1px solid var(--border); }
.m-req-banner__icon { width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 600; font-family: var(--font-mono); flex-shrink: 0; margin-top: 1px; color: var(--bg-base); background: var(--warning); }
.m-req-banner__body { flex: 1; min-width: 0; }
.m-req-banner__title { font-size: var(--fs-sm); font-weight: 500; color: var(--warning); line-height: 1.35; }
.m-req-banner--ok .m-req-banner__title { color: var(--success); }
.m-req-banner--ok .m-req-banner__icon { background: var(--success); }
.m-req-banner__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.m-req-banner__chip { padding: 1px 6px; background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent); border-radius: 3px; font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.3px; }
.m-req-banner__hint { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 6px; font-style: italic; }

/* Shared required-field inline warning — any module, mobile or desktop */
.m-req-warn { border-bottom: 2px solid var(--warning) !important; }
.m-req-warn-box { border: 1px solid var(--warning) !important; border-radius: 6px; padding: 4px 8px; background: var(--warning-bg); }
.m-req-warn-card { border-color: var(--warning) !important; background: var(--warning-bg) !important; }
.m-req-warn-label { color: var(--warning) !important; }

/* DropdownPicker wrapper + hidden native select — shared across catalogue at all viewports */
.d-pdp__cat-wrap { position: relative; display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.d-pdp__cat-select { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; overflow: hidden; }

/* Cost category stripe */
.m-pd-cogs-tag { color: var(--text-tertiary); font-weight: 400; margin-left: 5px; font-size: var(--fs-xs); font-family: var(--font-mono); }

/* Cost movement indicator */
.m-pd-cost-moved { font-size: var(--fs-xs); color: var(--warning); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.m-pd-cost-moved__pct { font-family: var(--font-mono); }
.m-pd-cost-moved__detail { color: var(--text-secondary); }

/* FG per-portion cost */
.m-pd-portion-col { text-align: right; }
.m-pd-portion-label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; }
.m-pd-portion-value { font-size: var(--fs-base); font-family: var(--font-mono); color: var(--success); font-weight: 500; margin-top: 4px; }
.m-pd-portion-sub { font-size: var(--fs-2xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 1px; }

/* Stock expand button */

/* Serve size inline edit */
.m-pf-serve-edit-name { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid var(--border); outline: none; color: var(--text-primary); font-size: var(--fs-sm); font-weight: 500; font-family: var(--font-body); padding: 2px 0; }
.m-pf-serve-edit-qty { width: 40px; background: transparent; border: none; border-bottom: 1px solid var(--border); outline: none; color: var(--text-tertiary); font-size: var(--fs-2xs); font-family: var(--font-mono); padding: 2px 0; }
.m-pf-serve-edit-unit { color: var(--text-tertiary); font-size: var(--fs-2xs); font-family: var(--font-mono); padding: 2px 0; }
.m-pf-serve-edit-name:focus, .m-pf-serve-edit-qty:focus { border-bottom-color: var(--accent); }
.m-pf-serve-edit-name::placeholder, .m-pf-serve-edit-qty::placeholder { color: var(--text-tertiary); opacity: 0.6; }
.m-pd-ss-remove { background: none; border: none; color: var(--text-tertiary); font-size: var(--fs-lg); cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.m-pd-ss-remove:hover { color: var(--error); }

/* Used-in qty badge */
.m-pd-used-in-row__qty { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-secondary); flex-shrink: 0; }
.m-pd-vat-select { background: transparent; border: none; color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-xs); width: 50px; text-align: right; }
.m-pd-hidden-cb { display: none; }
.m-pf-qc__context-label { flex: 1; font-size: 11px; color: var(--text-secondary); }

/* Dynamic-colour modifiers — paired with Jinja conditionals */
.m-pd-wac-value--ok { color: var(--success); }
.m-pd-wac-sub--confirmed { color: var(--accent); }
.m-pd-footer__cell-value--accent { color: var(--accent); }
.m-pd-footer__cell-value--ok { color: var(--success); }
.m-pd-footer__cell-value--muted { color: var(--text-secondary); }
.m-pd-footer__cell-value--primary { color: var(--text-primary); }

/* Stock snapshot */
.m-pd-section--tight { padding-top: 8px; padding-bottom: 0; }
.m-pd-snap-header { padding: 0 var(--gutter) 6px; display: flex; justify-content: space-between; align-items: baseline; }
.m-pd-snap-grid { padding: 0 var(--gutter) 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.m-pd-snap-empty { padding: 0 var(--gutter) 10px; }
.m-pd-snap-empty__text { font-size: var(--fs-sm); color: var(--text-tertiary); text-align: center; padding: 8px 0; }
.m-pd-glance__value--ok { color: var(--success); }
.m-pd-snap-wac-row { padding: 0 var(--gutter) 8px; }
.m-pd-snap-wac-link { background: none; border: none; color: var(--accent); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; padding: 4px 0; min-height: 36px; display: inline-flex; align-items: center; }

/* WAC chart — event kind chips */
.m-pd-wac-kind { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.03em; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.m-pd-wac-kind--invoice { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.m-pd-wac-kind--execution { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.m-pd-wac-kind--baseline { background: rgba(255,255,255,0.06); color: var(--text-tertiary); }

/* WAC chart — period groups and interactive cards */
.m-pd-wac-period { border-top: 1px solid var(--border); padding: 0; }
.m-pd-wac-period:first-child { border-top: none; }
.m-pd-wac-period__label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-tertiary); padding: 10px var(--gutter) 2px; }

.m-pd-wac-card { display: flex; align-items: flex-start; gap: 8px; padding: 10px var(--gutter); border-radius: 6px; cursor: pointer; transition: background 0.12s; }
.m-pd-wac-card:hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.m-pd-wac-card--active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.m-pd-wac-card--anchor { border-left: 3px solid var(--accent); padding-left: 9px; }
.m-pd-wac-card--anchor .m-pd-wac-card__date { font-size: var(--fs-xs); }
.m-pd-wac-card--anchor .m-pd-wac-card__value { font-size: var(--fs-xs); color: var(--text-secondary); }
.m-pd-wac-card--invoice { border-left: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-left: 9px; }
.m-pd-wac-card--execution { border-left: 3px solid color-mix(in srgb, var(--success) 40%, transparent); padding-left: 9px; }

.m-pd-wac-card__left { flex: 1; min-width: 0; }
.m-pd-wac-card__top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.m-pd-wac-card__date { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-tertiary); flex-shrink: 0; }
.m-pd-wac-card__label { font-size: var(--fs-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-pd-wac-card__right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.m-pd-wac-card__value { font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 400; }
.m-pd-wac-card__delta { font-size: var(--fs-xs); font-family: var(--font-mono); }
.m-pd-wac-card__chevron { font-size: var(--fs-base); color: var(--text-tertiary); margin-left: 4px; line-height: 1; }

/* Used-in — inline-style replacements */
.m-pd-used-in-header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gutter); margin-bottom: 8px; }
.m-pd-used-in-body { padding: 0 var(--gutter) 14px; }
.m-pd-used-in-empty { font-size: var(--fs-sm); color: var(--text-tertiary); text-align: center; padding: 12px 0; }
.m-pd-used-in-group { margin-bottom: 10px; }
.m-pd-used-in-group__header { padding: 0 var(--gutter) 6px; display: flex; align-items: baseline; justify-content: space-between; }
.m-pd-used-in-group__label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.m-pd-used-in-group__toggle { font-size: var(--fs-xs); color: var(--accent); font-weight: 500; cursor: pointer; }
.m-pd-used-in-group__list { margin: 0 var(--gutter); }
.m-pd-used-in-row__inner { flex: 1; min-width: 0; }
.m-pd-used-in-row__name { font-size: var(--fs-sm); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-pd-used-in-row__cat { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.m-pd-used-in-row__arrow { font-size: var(--fs-sm); color: var(--text-tertiary); }
.m-pd-used-in-row__inactive { margin-left: 6px; font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }
.m-pd-used-in-row--faded { opacity: 0.5; }
.m-pd-used-in-row:last-child { border-bottom: none; }

/* Serve sizes (shared form) — inline-style replacements */
.m-pf-serve-gate { font-size: var(--fs-xs); color: var(--text-tertiary); text-align: center; padding: 14px 0; line-height: 1.5; }
.m-pf-serve-gate__hl { color: var(--text-secondary); font-weight: 500; }
.m-pf-serve-deactivated { border-top: 1px solid var(--border); padding-top: 4px; }
.m-pf-serve-deactivated__label { padding: 4px var(--gutter); font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; }

/* Footer cell (shared between detail and form) */
.m-pd-footer__cell-label {
  font-size: var(--fs-2xs); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500;
  white-space: nowrap;
}
.m-pd-footer__cell-value {
  font-size: var(--fs-base); font-family: var(--font-mono); font-weight: 500;
  margin-top: 3px; letter-spacing: -0.2px; white-space: nowrap;
}
.m-pd-footer__cell-sub {
  font-size: var(--fs-2xs); color: var(--text-tertiary);
  font-family: var(--font-mono); margin-top: 1px; white-space: nowrap;
}

/* ---- Product detail confirmation panel ---- */
@keyframes m-pd-confirm-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.m-pd-confirm-scrim {
  position: absolute; inset: 0; background: var(--overlay); z-index: 8;
}
.m-pd-confirm-panel {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 9;
  background: var(--bg-surface); border-top: 2px solid var(--text-secondary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 16px var(--gutter); max-height: 88%; overflow-y: auto;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  animation: m-pd-confirm-in 0.25s ease-out;
}
.m-pd-confirm-panel--warn { border-top-color: var(--warning); }
.m-pd-confirm-panel--error { border-top-color: var(--error); }
.m-pd-confirm-panel__handle {
  width: 32px; height: 3px; border-radius: 2px; background: var(--border);
  margin: 0 auto 12px;
}
.m-pd-confirm-panel__eyebrow {
  font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.8px; font-weight: 600; margin-bottom: 4px;
}
.m-pd-confirm-panel__headline {
  font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); margin-bottom: 6px;
}
.m-pd-confirm-panel__sub {
  font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 12px; line-height: 1.4;
}
.m-pd-confirm-panel__state-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-secondary);
}
.m-pd-confirm-panel__ref-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; font-size: var(--fs-xs); color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.m-pd-confirm-panel__ref-row:last-child { border-bottom: none; }
.m-pd-confirm-panel__btn-link {
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent); background: none;
  border: none; padding: 4px 0; cursor: pointer; text-decoration: underline;
}
.m-pd-confirm-panel__actions { display: flex; gap: 8px; margin-top: 14px; }
.m-pd-confirm-btn--warn {
  flex: 1; min-height: 44px; border: none; border-radius: var(--radius-md);
  background: var(--warning); color: var(--bg-base); font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer;
}
.m-pd-confirm-btn--error {
  flex: 1; min-height: 44px; border: none; border-radius: var(--radius-md);
  background: var(--error); color: #fff; font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer;
}
.m-pd-confirm-btn--ghost {
  flex: 1; min-height: 44px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: transparent;
  color: var(--text-secondary); font-size: var(--fs-sm); cursor: pointer;
}
.m-pd-confirm-btn--disabled {
  flex: 1; min-height: 44px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-elevated);
  color: var(--text-tertiary); font-size: var(--fs-sm); cursor: default; opacity: 0.6;
}

/* ============================================================
   Product Edit / Create — mobile form components
   ============================================================ */

/* ---- Accordion (product form variant) ---- */
.m-pf-accordion {
  border-top: 1px solid var(--border);
}
.m-pf-accordion__header {
  padding: 14px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
}
.m-pf-accordion__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
}
.m-pf-accordion__right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-pf-accordion__meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-pf-accordion__arrow {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  transition: transform 200ms;
}
.m-pf-accordion__body {
  display: none;
  padding: 0 var(--gutter) 14px;
}
.m-pf-accordion--open .m-pf-accordion__body {
  display: block;
}
.m-pf-accordion--open .m-pf-accordion__arrow {
  transform: rotate(90deg);
}


/* ---- Serve sizes (form variant) ---- */
.m-pf-serve-section {
  margin-top: 8px;
}
.m-pf-serve-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.m-pf-serve-header {
  padding: 8px var(--gutter) 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.m-pf-serve-header__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 500;
}
.m-pf-serve-header__meta {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
}
.m-pf-serve-add-btn {
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: 500;
  font-family: var(--font-body);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.m-pf-serve-colhead {
  padding: 5px var(--gutter) 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg-base);
}
.m-pf-serve-row {
  padding: 7px var(--gutter);
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border);
}
.m-pf-serve-row:first-child {
  border-top: none;
}
.m-pf-serve-row--off {
  opacity: 0.55;
}
.m-pf-serve-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-family: var(--font-mono);
  cursor: pointer;
  user-select: none;
}
.m-pf-serve-check--on {
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: #1a1816;
}
.m-pf-serve-check--off {
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: transparent;
}
.m-pf-serve-cost {
  width: 44px;
  text-align: right;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.m-pf-serve-price-wrap {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 5px;
  gap: 1px;
}
.m-pf-serve-price-input {
  width: 36px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  text-align: right;
}
.m-pf-serve-gp {
  width: 32px;
  text-align: right;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  font-weight: 500;
}
/* Wide variant — desktop product-detail panel: distribute the shared serve-row columns
   evenly across the wider container instead of the narrow-sheet flex bunching (Charles
   2026-06-30 "dead space in the middle"). Header (m-pf-serve-colhead) and rows share the
   same 5-track grid so they align; hidden inputs (menu_item_id/name) are display:none and
   take no grid track, so the five visible cells map 1:1 to the five header spans. */
.m-pf-serve-card--wide .m-pf-serve-colhead,
.m-pf-serve-card--wide .m-pf-serve-row {
  display: grid;
  grid-template-columns: 16px minmax(96px, 1.5fr) minmax(56px, 1fr) minmax(64px, 1fr) minmax(40px, 0.7fr);
  gap: 10px;
  align-items: center;
}
.m-pf-serve-card--wide .m-pf-serve-colhead span { text-align: left; }
.m-pf-serve-card--wide .m-pd-ss-col--name { flex: none; }
.m-pf-serve-card--wide .m-pf-serve-cost,
.m-pf-serve-card--wide .m-pf-serve-gp { width: auto; text-align: left; }
.m-pf-serve-card--wide .m-pf-serve-price-wrap { width: auto; max-width: 96px; justify-self: start; }
.m-pf-serve-add-custom {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: center;
  min-height: 44px;
}

/* ---- Quick-create overlay ---- */
.m-pf-qc {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  visibility: hidden;
}
.m-pf-qc--open {
  pointer-events: auto;
  visibility: visible;
}
.m-pf-qc__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.m-pf-qc--open .m-pf-qc__scrim {
  opacity: 1;
}
.m-pf-qc__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88%;
  background: var(--bg-base);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}
.m-pf-qc--open .m-pf-qc__sheet {
  transform: translateY(0);
}
.m-pf-qc__chrome {
  padding: 8px 0 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.m-pf-qc__grabber {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto 8px;
}
.m-pf-qc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px;
  gap: 10px;
}
.m-pf-qc__title {
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-heading);
}
.m-pf-qc__subtitle {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 1px;
}
.m-pf-qc__cancel {
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
}
.m-pf-qc__context-chip {
  padding: 8px 16px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-pf-qc__context-dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: var(--accent);
  flex-shrink: 0;
}
.m-pf-qc__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.m-pf-qc__footer {
  padding: 10px 14px 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-strong);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.m-pf-qc__btn-cancel {
  flex: 0.8;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
}
.m-pf-qc__btn-create {
  flex: 1.6;
  padding: 11px;
  background: var(--accent);
  border: none;
  color: #111;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
}

/* ---- Modals (deactivate confirm, unit change) ---- */
.m-pf-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
}
.m-pf-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.m-pf-modal__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-surface);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 14px var(--gutter) 18px;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.5);
  z-index: 10;
  max-height: 88%;
  overflow-y: auto;
}
.m-pf-modal__sheet--warn {
  border-top: 2px solid var(--warning);
}
.m-pf-modal__sheet--err {
  border-top: 2px solid var(--error);
}
.m-pf-modal__sheet--accent {
  border-top: 2px solid var(--accent);
}
.m-pf-modal__grabber {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto 12px;
}
.m-pf-modal__eyebrow {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 4px;
}
.m-pf-modal__headline {
  font-size: var(--fs-xl);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.m-pf-modal__sub {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 4px;
}
.m-pf-modal__info-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.m-pf-modal__state-row {
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.m-pf-modal__state-row--last {
  border-bottom: none;
}
.m-pf-modal__state-icon {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-top: 1px;
  width: 12px;
  text-align: center;
}
.m-pf-modal__ref-row {
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
}
.m-pf-modal__ref-row:last-child {
  border-bottom: none;
}
.m-pf-modal__ref-row--muted {
  opacity: 0.65;
}
.m-pf-modal__ref-kind {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  flex-shrink: 0;
  width: 64px;
}
.m-pf-modal__ref-name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.m-pf-modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  align-items: center;
}
.m-pf-modal__btn-ghost {
  padding: 10px var(--gutter);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
}
.m-pf-modal__btn-primary {
  padding: 10px;
  background: var(--accent);
  border: none;
  color: #111;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
}
.m-pf-modal__btn-warn {
  padding: 10px;
  background: transparent;
  border: 1px solid var(--warning);
  color: var(--warning);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
}

/* ---- Cost cascade toast ---- */
.m-pf-toast {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 70px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px var(--gutter);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  z-index: 90;
}
.m-pf-toast__headline {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 6px;
}
.m-pf-toast__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ---- Archived banner ---- */
.m-pf-archived-banner {
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.m-pf-archived-banner__eyebrow {
  font-size: var(--fs-2xs);
  color: var(--warning);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.m-pf-archived-banner__btn {
  padding: 8px var(--gutter);
  background: var(--accent);
  border: none;
  color: #111;
  border-radius: 5px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 36px;
}

/* ---- Shared: allergen chips (used by detail + create) ---- */
.m-pd-allergen {
  display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: 4px;
  font-size: var(--fs-xs); white-space: nowrap; line-height: 1.3;
  cursor: pointer; user-select: none;
}
.m-pd-allergen--on {
  background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); font-weight: 500;
}
.m-pd-allergen--off {
  background: transparent; color: var(--text-tertiary);
  border: 1px solid var(--border); font-weight: 400;
}

/* ---- Menu item detail: drawer modifiers ---- */
.m-pf-qc__sheet--tall { max-height: 94%; }
.m-pf-qc__body--detail { padding-bottom: 0; }
@media (min-width: 768px) {
  .m-pf-qc__sheet {
    left: auto; right: 0; top: 0; bottom: 0;
    max-height: 100%; width: 420px;
    border-radius: 0;
    transform: translateX(100%);
  }
  .m-pf-qc--open .m-pf-qc__sheet { transform: translateX(0); }
}

/* Save button (drawer header) */
.m-mi-save-btn {
  background: transparent; border: none;
  color: var(--accent); font-size: var(--fs-sm); font-weight: 600;
  font-family: var(--font-heading); cursor: pointer;
  padding: 6px 10px; letter-spacing: 0.2px;
}
.m-mi-save-btn--saving { color: var(--text-tertiary); pointer-events: none; }
.m-mi-save-btn--saved { color: var(--success); }

/* ---- MI detail hero: collapsed summary ---- */
.m-mi-hero-summary {
  padding: 14px var(--gutter) 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.m-mi-hero-summary__top {
  display: flex; align-items: flex-start; gap: 8px;
}
.m-mi-hero-summary__name {
  flex: 1;
  font-size: var(--fs-2xl); font-weight: 600; color: var(--text-primary);
  line-height: 1.2; letter-spacing: -0.3px;
}
.m-mi-hero-summary__toggle {
  flex-shrink: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-tertiary);
  font-size: var(--fs-sm); cursor: pointer; transition: all 150ms ease;
  margin-top: 2px;
}
.m-mi-hero-summary__toggle:active { background: var(--bg-elevated); }
.m-mi-hero-summary__toggle--open { transform: rotate(180deg); }
.m-mi-hero-summary__breadcrumb {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; flex-wrap: wrap;
}
.m-mi-hero-summary__breadcrumb .m-pd-group-pill { line-height: 1.5; }
.m-mi-hero-summary__breadcrumb .m-pd-cat-dot { margin-right: 2px; }
.m-mi-hero-summary__cat-text {
  font-size: var(--fs-sm); color: var(--text-secondary);
}

/* ---- MI detail hero: expanded edit panel ---- */
.m-mi-hero-edit {
  padding: 0 var(--gutter) 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.m-mi-hero-edit__row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--border);
}
.m-mi-hero-edit__row:first-child { border-top: none; }
.m-mi-hero-edit__label {
  font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.6px; font-weight: 500; flex-shrink: 0; width: 60px;
}
.m-mi-hero-edit__input {
  flex: 1; background: var(--bg-base); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary); font-size: var(--fs-sm);
  font-family: var(--font-body); padding: 7px 10px; outline: none;
}
.m-mi-hero-edit__input:focus { border-color: var(--accent); }
.m-mi-hero-edit__select-wrap {
  flex: 1; position: relative;
}
.m-mi-hero-edit__select-wrap--sm { flex: 0 0 auto; }
.m-mi-hero-edit__select {
  width: 100%; background: transparent; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary); font-size: var(--fs-sm);
  font-family: var(--font-body); padding: 7px 24px 7px 10px;
  outline: none; appearance: none; -webkit-appearance: none;
}
.m-mi-hero-edit__select:focus { border-color: var(--accent); }
.m-mi-hero-edit__caret {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-2xs); color: var(--text-tertiary); pointer-events: none;
}
.m-mi-hero-edit__pricing-row {
  display: flex; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--border);
}
.m-mi-hero-edit__field { flex: 1; }
.m-mi-hero-edit__price-input-wrap {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: 6px; padding: 0 10px; margin-top: 4px;
}
.m-mi-hero-edit__price-input-wrap:focus-within { border-color: var(--accent); }
.m-mi-hero-edit__currency {
  font-size: var(--fs-base); color: var(--text-tertiary); font-family: var(--font-mono);
}
.m-mi-hero-edit__price-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: var(--fs-lg); font-family: var(--font-mono);
  font-weight: 500; padding: 7px 0;
}

/* Combo info line (above name) */
.m-mi-combo-line {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.m-mi-combo-line__meta {
  font-size: var(--fs-xs); color: var(--text-tertiary);
}

/* Pricing card wrapper */
.m-mi-pricing-box {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px var(--gutter);
  background: var(--bg-elevated);
}

/* 3-column pricing grid */
.m-mi-pricing {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
}
.m-mi-pricing__label {
  font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.7px; font-weight: 500;
}
.m-mi-pricing__val {
  font-size: var(--fs-xl); font-family: var(--font-mono); font-weight: 500;
  margin-top: 2px; letter-spacing: -0.3px; color: var(--text-primary);
}
.m-mi-pricing__sub {
  font-size: var(--fs-2xs); color: var(--text-tertiary); font-family: var(--font-mono);
  margin-top: 1px;
}
.m-mi-pricing__col--border {
  border-left: 1px solid var(--border); padding-left: var(--gutter);
}

/* Cost range strip */
.m-mi-cost-strip {
  padding: 8px 0 0;
  font-size: var(--fs-xs); color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* Sticky footer */
.m-mi-footer {
  flex-shrink: 0;
  border-top: 2px solid var(--border-strong);
  background: var(--bg-surface);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 0.7fr 0.95fr;
  transition: border-color 400ms ease;
}
.m-mi-footer > div {
  padding: 9px 10px 10px;
  border-right: 1px solid var(--border);
}
.m-mi-footer > div:last-child { border-right: none; }
.m-mi-footer--flash { border-top-color: var(--accent); }

/* Archived banner */
.m-pf-archived-banner {
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.m-pf-archived-banner__eyebrow {
  font-size: var(--fs-xs); font-weight: 600; color: var(--error);
}
.m-pf-archived-banner__btn {
  background: transparent; border: 1px solid var(--error);
  color: var(--error); font-size: var(--fs-xs); font-weight: 500;
  font-family: var(--font-body);
  border-radius: 5px; padding: 5px 10px; cursor: pointer;
  white-space: nowrap; min-height: 32px;
}

/* Deactivate button */
.m-pd-deactivate { padding: 16px var(--gutter); text-align: center; }
.m-pd-deactivate__btn {
  background: transparent; border: 1px solid var(--error);
  color: var(--error); font-size: var(--fs-sm); font-weight: 500;
  font-family: var(--font-body);
  border-radius: 6px; padding: 10px 20px; cursor: pointer;
  min-height: 44px;
}

/* ---- Menu item detail: combo badge ---- */
.m-mi-combo-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 4px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.3px;
  background: rgba(142,100,220,0.12); color: #a07de0;
  border: 1px solid rgba(142,100,220,0.3);
  white-space: nowrap; flex-shrink: 0;
}

/* ---- Menu item detail: ingredient rows ---- */
.m-mi-ingredient-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.m-mi-ingredient-row:last-child { border-bottom: none; }

/* ---- Menu item detail: combo group cards ---- */
.m-mi-combo-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.m-mi-combo-card__header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--gutter); cursor: pointer;
}
.m-mi-combo-card__arrow {
  font-size: var(--fs-2xs); color: var(--text-tertiary);
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.m-mi-combo-card--open .m-mi-combo-card__arrow {
  transform: rotate(90deg);
}
.m-mi-combo-card__body {
  display: none;
  border-top: 1px solid var(--border);
}
.m-mi-combo-card--open .m-mi-combo-card__body {
  display: block;
}
.m-mi-combo-option {
  display: flex; align-items: center; gap: 10px;
  padding: 7px var(--gutter);
  border-bottom: 1px solid var(--border);
}
.m-mi-combo-option:last-child { border-bottom: none; }

/* ---- Combo editing affordances ---- */
.m-mi-combo-label-input {
  flex: 1;
  background: transparent; border: none;
  color: var(--text-primary);
  font-size: var(--fs-sm); font-weight: 500;
  font-family: var(--font-body);
  padding: 0;
  min-width: 0;
}
.m-mi-combo-stepper {
  display: flex; align-items: center; gap: 3px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 5px; padding: 1px;
}
.m-mi-combo-step-btn {
  width: 24px; height: 24px;
  background: transparent; border: none;
  color: var(--text-secondary);
  font-size: var(--fs-base); font-weight: 500;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  padding: 0;
}
.m-mi-combo-step-btn:active { opacity: 0.5; }
.m-mi-combo-step-val {
  width: 16px; text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs); color: var(--text-primary);
}
.m-mi-combo-del-group {
  font-size: var(--fs-base); color: var(--text-tertiary);
  padding: 2px 4px; cursor: pointer;
}
.m-mi-combo-del-group:active { color: var(--error); }
.m-mi-combo-drag {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  font-family: var(--font-mono); letter-spacing: -1px;
  cursor: grab; flex-shrink: 0;
}
.m-mi-combo-mod-wrap {
  display: flex; align-items: center; gap: 3px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 5px; padding: 2px 6px 2px 7px;
}
.m-mi-combo-mod-input {
  width: 32px; background: transparent; border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-align: right;
}
.m-mi-combo-del-opt {
  font-size: var(--fs-sm); color: var(--text-tertiary);
  padding: 2px 2px; cursor: pointer;
}
.m-mi-combo-del-opt:active { color: var(--error); }
.m-mi-combo-add-option {
  padding: 6px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.m-mi-combo-add-option:active { background: var(--bg-elevated); }

/* Combo option search overlay */
.m-mi-combo-search-overlay {
  position: fixed; inset: 0; z-index: 135;
  display: flex; flex-direction: column;
  visibility: hidden; opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}
.m-mi-combo-search-overlay--open {
  visibility: visible; opacity: 1;
}
.m-mi-combo-search-overlay__scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
}
.m-mi-combo-search-overlay__sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  max-height: 80vh;
  background: var(--bg-surface);
  border-radius: 14px 14px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.m-mi-combo-search-overlay--open .m-mi-combo-search-overlay__sheet {
  transform: translateY(0);
}
.m-mi-combo-search-hit {
  padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.m-mi-combo-search-hit:active { background: var(--bg-elevated); }
.m-mi-combo-search-add {
  padding: 5px 10px; border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-size: var(--fs-xs); font-weight: 600;
  flex-shrink: 0;
}

/* ---- MI combo: drag states ---- */
.m-mi-combo-option--dragging {
  opacity: 0.7; background: var(--bg-elevated);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 10; position: relative;
}
.m-mi-combo-card--dragging {
  opacity: 0.7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10; position: relative;
}
.m-mi-combo-group-drag {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  cursor: grab; padding: 4px 2px; touch-action: none;
  user-select: none; -webkit-user-select: none;
  min-width: 20px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- MI combo: permutation sheet ---- */
.m-mi-perm-sheet {
  position: fixed; inset: 0; z-index: 135;
  display: flex; flex-direction: column; justify-content: flex-end;
  visibility: hidden; opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s ease;
}
.m-mi-perm-sheet--open {
  visibility: visible; opacity: 1;
  transition: visibility 0s, opacity 0.3s ease;
}
.m-mi-perm-sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
}
.m-mi-perm-sheet__panel {
  position: relative; z-index: 1;
  background: var(--bg-surface);
  border-radius: 16px 16px 0 0;
  max-height: 80vh; display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.m-mi-perm-sheet--open .m-mi-perm-sheet__panel {
  transform: translateY(0);
}
.m-mi-perm-sheet__body {
  flex: 1; overflow-y: auto; padding: 0 0 16px;
  -webkit-overflow-scrolling: touch;
}
.m-mi-perm-table__head {
  display: flex; align-items: center; gap: 0;
  padding: 10px var(--gutter); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-surface); z-index: 1;
}
.m-mi-perm-table__th {
  font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.6px; font-weight: 500;
  width: 58px; text-align: right; flex-shrink: 0;
}
.m-mi-perm-table__th:first-child { text-align: left; flex: 1; width: auto; }
.m-mi-perm-table__row {
  display: flex; align-items: center; gap: 0;
  padding: 8px var(--gutter); border-bottom: 1px solid var(--border);
}
.m-mi-perm-table__row--alt { background: rgba(255,255,255,0.02); }
.m-mi-perm-table__picks { flex: 1; min-width: 0; }
.m-mi-perm-table__val {
  width: 58px; text-align: right; flex-shrink: 0;
  font-size: var(--fs-xs); font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* ---- MI type toggle (quick-create) ---- */
.m-mi-type-section {
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.m-mi-type-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 500;
  margin-bottom: 8px;
}
.m-mi-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.m-mi-type-pill {
  padding: 12px var(--gutter);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  min-height: 44px;
}
.m-mi-type-pill--active {
  background: var(--bg-elevated);
  border-color: var(--accent);
}
.m-mi-type-pill__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
}
.m-mi-type-pill--active .m-mi-type-pill__title {
  color: var(--text-primary);
}
.m-mi-type-pill__sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.m-mi-type-hint {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 10px;
  font-style: italic;
  line-height: 1.4;
}


/* ---- Cost-category validation message ---- */
.m-mi-cc-error {
  border-color: var(--error) !important;
}
.m-mi-cc-msg {
  padding: 4px var(--gutter) 8px;
  font-size: var(--fs-xs);
  color: var(--error);
}

/* ---- Subcategory quick-create link ---- */
.m-mi-subcat-link {
  font-size: var(--fs-xs);
  color: var(--accent);
  margin-top: 4px;
  cursor: pointer;
  padding: 4px 0;
}

/* ---- Subcategory quick-create overlay ---- */
.m-mi-subcat-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
}
.m-mi-subcat-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.m-mi-subcat-overlay__sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-base);
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--border-strong);
  max-height: 82%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}

/* ---- Search create-new button ---- */
.mi-d-search-create:active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ---- MI detail: cascade warning banner ---- */
.m-mi-cascade-warn {
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
}
.m-mi-cascade-warn__title {
  font-size: var(--fs-xs); font-weight: 600; color: var(--warning);
  margin-bottom: 4px;
}
.m-mi-cascade-warn__list {
  list-style: none; margin: 0; padding: 0;
}
.m-mi-cascade-warn__item {
  font-size: var(--fs-xs); color: var(--text-secondary);
  padding: 3px 0; cursor: pointer;
}
.m-mi-cascade-warn__item:active { color: var(--accent); }

/* ---- MI detail: GP target override ---- */
.m-mi-target-row {
  align-items: flex-start;
}
.m-mi-target-input-wrap {
  display: flex; align-items: center; gap: 4px;
}
.m-mi-target-input {
  width: 56px; background: var(--bg-base);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); font-family: var(--font-mono);
  font-size: var(--fs-sm); padding: 6px 8px;
  text-align: right; outline: none;
}
.m-mi-target-input:focus { border-color: var(--accent); }
.m-mi-target-input__suffix {
  font-size: var(--fs-sm); color: var(--text-tertiary);
}
.m-mi-target-reset {
  background: transparent; border: none;
  color: var(--text-tertiary); font-size: var(--fs-base);
  cursor: pointer; padding: 4px;
  min-width: 24px; min-height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.m-mi-target-reset:active { color: var(--error); }
.m-mi-target-resolution {
  font-size: var(--fs-xs); color: var(--text-tertiary);
  margin-top: 4px; font-style: italic;
}

/* ---- MI detail: save button blocked state ---- */
.m-mi-save-btn--blocked {
  opacity: 0.4; pointer-events: none;
}

/* ---- MI detail: hero archived dimming ---- */
.m-mi-hero--archived {
  opacity: 0.55;
}

/* ============================================================
   Category Detail — shared components (drawer + full page)
   ============================================================ */

.m-cat-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Identity strip */
.m-cd-identity {
  padding: 14px var(--gutter) 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-cd-identity__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-cd-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.m-cd-dot--sm {
  width: 8px;
  height: 8px;
}
.m-cd-group-pill {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.6px;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.m-cd-group-pill--drinks { background: rgba(155,90,107,0.18); color: #c98a9b; }
.m-cd-group-pill--food   { background: color-mix(in srgb, var(--success) 18%, transparent); color: #8fc09b; }
.m-cd-group-pill--other  { background: color-mix(in srgb, var(--text-tertiary) 22%, transparent); color: #b0a99f; }
.m-cd-identity__name {
  flex: 1;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.m-cd-inherited-banner {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: 7px 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.m-cd-inherited-banner b {
  color: var(--text-secondary);
}
.m-cd-identity__stats {
  display: flex;
  gap: 16px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tabs */
.m-cd-tabs {
  padding: 0 8px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.m-cd-tab {
  padding: 10px var(--gutter);
  white-space: nowrap;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
}
.m-cd-tab--active {
  border-bottom-color: var(--accent);
  color: var(--text-primary);
  font-weight: 600;
}
.m-cd-tab__count {
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Tab body */
.m-cd-body {
  flex: 1;
  overflow-y: auto;
}
.m-cd-panel {
  display: none;
}
.m-cd-panel--active {
  display: block;
}

/* Rows */
.m-cd-row {
  padding: 11px var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.m-cd-row__body {
  flex: 1;
  min-width: 0;
}
.m-cd-row__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-cd-row__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.m-cd-row__meta {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex: 1;
  text-align: right;
}
.m-cd-row__right {
  text-align: right;
  flex-shrink: 0;
}
.m-cd-row__cost {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.m-cd-gp {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
}
.m-cd-gp.tone-ok   { color: var(--success); }
.m-cd-gp.tone-warn { color: var(--warning); }
.m-cd-gp.tone-err  { color: var(--error); }
.m-cd-row__chevron {
  color: var(--text-tertiary);
  font-size: var(--fs-base);
  flex-shrink: 0;
  margin-left: 4px;
}

/* Add row */
.m-cd-add-row {
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  width: 100%;
  font-family: var(--font-body);
  min-height: 44px;
}
.m-cd-add-row__icon {
  font-size: var(--fs-lg);
  line-height: 1;
}

/* Empty state */
.m-cd-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* Linked MI section */
.m-cd-linked {
  border-top: 4px solid var(--border);
  margin-top: 8px;
}
.m-cd-linked__label {
  padding: 10px var(--gutter) 0;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 500;
}

/* Footer */
.m-cd-footer {
  flex-shrink: 0;
  padding: 10px var(--gutter);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.m-cd-footer__btn {
  padding: 8px var(--gutter);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  text-decoration: none;
}
.m-cd-footer__btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.m-cd-footer__btn--accent {
  background: var(--accent);
  color: #111;
  border: none;
  font-weight: 600;
}

/* ---- Overlay sheet shared (edit + subcat create) ---- */
.m-sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100;
  display: none;
}
.m-sheet-scrim--open {
  display: block;
}
.m-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-base);
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--border-strong);
  max-height: 88%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
  z-index: 101;
  transform: translateY(100%);
  transition: transform 0.25s ease-out;
}
.m-sheet--open {
  transform: translateY(0);
}
.m-sheet--short { max-height: 80%; }
.m-sheet__handle {
  display: flex;
  justify-content: center;
  padding: 8px 0 0;
}
.m-sheet__handle-bar {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
}
.m-sheet__header {
  padding: 10px var(--gutter) 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.m-sheet__title {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.m-sheet__action {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.m-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px var(--gutter) 18px;
}

/* ---- Edit sheet form fields ---- */
.m-ef-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  margin-bottom: 6px;
}
.m-ef-label__hint {
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}
.m-ef-field {
  margin-bottom: 16px;
}
.m-ef-input {
  padding: 9px var(--gutter);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
}
.m-ef-readonly {
  padding: 10px var(--gutter);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Group selector */
.m-ef-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.m-ef-group-btn {
  padding: 10px 8px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.1px;
  cursor: pointer;
  min-height: 44px;
}
.m-ef-group-btn--active {
  font-weight: 500;
}
.m-ef-group-btn--drinks.m-ef-group-btn--active {
  background: rgba(155,90,107,0.18);
  color: #c98a9b;
  border-color: rgba(155,90,107,0.5);
}
.m-ef-group-btn--food.m-ef-group-btn--active {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: #8fc09b;
  border-color: color-mix(in srgb, var(--success) 50%, transparent);
}
.m-ef-group-btn--other.m-ef-group-btn--active {
  background: color-mix(in srgb, var(--text-tertiary) 22%, transparent);
  color: #b0a99f;
  border-color: color-mix(in srgb, var(--text-tertiary) 60%, transparent);
}

/* Colour picker */
.m-ef-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.m-ef-swatch {
  padding: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 44px;
}
.m-ef-swatch--active {
  background: var(--bg-elevated);
  border-color: var(--accent);
}
.m-ef-swatch__dot {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.m-ef-swatch__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Serve sizes in edit sheet */
.m-ef-serves {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.m-ef-serve-row {
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
}
.m-ef-serve-row:first-child {
  border-top: none;
}
.m-ef-serve-row__grip {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  cursor: grab;
  flex-shrink: 0;
}
.m-ef-serve-row__body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.m-ef-serve-row__name {
  font-size: var(--fs-sm);
  font-weight: 500;
}
.m-ef-serve-row__qty {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
  margin-top: 1px;
}
.m-ef-serve-row__del {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  padding: 4px 6px;
  cursor: pointer;
  background: none;
  border: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.m-ef-serve-add {
  padding: 10px var(--gutter);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  font-family: var(--font-body);
  min-height: 44px;
}
.m-ef-serve-add__icon {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  line-height: 1;
}
.m-ef-serve-empty {
  padding: 14px var(--gutter);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  text-align: center;
}
.m-ef-serve-hint {
  margin-top: 6px;
  padding: 2px 4px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.45;
}

/* Add serve inline form */
.m-ef-serve-form {
  padding: 9px var(--gutter);
  background: var(--bg-elevated);
  display: flex;
  gap: 6px;
  align-items: center;
  border-top: 1px solid var(--border);
}
.m-ef-serve-form__input {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 6px 8px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
}
.m-ef-serve-form__qty {
  width: 52px;
  font-family: var(--font-mono);
  text-align: right;
}
.m-ef-serve-form__unit {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 6px 4px;
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}
.m-ef-serve-form__submit {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
  padding: 4px 4px;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
  min-height: 44px;
}

/* Mismatch nudge */
.m-ef-nudge {
  margin-top: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: 5px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  display: none;
}
.m-ef-nudge b {
  color: var(--warning);
  font-weight: 500;
}

/* Edit form inline layout */
.m-cd-edit-form {
  padding: 4px 0;
}
.m-ef-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.m-ef-save-btn {
  flex: 1;
  padding: 11px var(--gutter);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
}

/* Delete affordance */
.m-ef-delete {
  padding: 10px var(--gutter);
  border-radius: 6px;
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
  font-size: var(--fs-sm);
  color: var(--error);
  text-align: center;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  flex-shrink: 0;
  white-space: nowrap;
}
.m-ef-delete--blocked {
  cursor: not-allowed;
  color: var(--text-tertiary);
}

/* Delete blocked state */
.m-ef-delete-blocked {
  margin-top: 8px;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--error) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
  border-radius: 8px;
  display: none;
}
.m-ef-delete-blocked__title {
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  color: var(--error);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.m-ef-delete-blocked__text {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ---- Subcat create sheet ---- */
.m-sc-header {
  padding: 4px var(--gutter) 12px;
  border-bottom: 1px solid var(--border);
}
.m-sc-header__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
.m-sc-header__sub {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-sc-header__name {
  color: var(--text-secondary);
}
.m-sc-inherited {
  padding: 10px var(--gutter);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 14px;
}
.m-sc-inherited__label {
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.m-sc-inherited__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.m-sc-inherited__row:last-child {
  margin-bottom: 0;
}
.m-sc-inherited__key {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  min-width: 50px;
}
.m-sc-inherited__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.m-sc-inherited__note {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.m-sc-inherited__hint {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
}
.m-sc-footer {
  flex-shrink: 0;
  padding: 10px var(--gutter);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.m-sc-footer__hint {
  flex: 1;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-sc-footer__hint b {
  color: var(--text-secondary);
}

/* Top bar action overrides */
.m-top-bar__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
  margin-right: var(--gutter);
  flex-shrink: 0;
}
.m-top-bar__action-link {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  min-height: 44px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
}

/* Readonly field parts */
.m-ef-readonly__val {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-ef-readonly__text {
  color: var(--text-secondary);
}
.m-ef-readonly__badge {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

/* Hint / error helpers */
.m-ef-hint {
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.45;
}
.m-ef-hint--spaced { margin-top: 6px; font-size: var(--fs-xs); }
.m-ef-error {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--error);
  display: none;
}
.m-ef-input--error {
  border-color: var(--error) !important;
  outline: 1px solid var(--error);
  outline-offset: 0;
}
.m-ef-label--mono { font-size: var(--fs-2xs); font-family: var(--font-mono); }
.m-ef-label--required { color: var(--error); }
.m-ef-input--strong { border-color: var(--border-strong); }
.m-ef-input--mono { font-family: var(--font-mono); }
.m-ef-input--suffixed { padding-right: 28px; }

/* Input with suffix (e.g. %) */
.m-ef-input-wrap {
  position: relative;
}
.m-ef-input-wrap__suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
}

/* Serve form name field */
.m-ef-serve-form__name { flex: 1; min-width: 0; }

/* Serve inline edit row */
.m-ef-serve-edit { display: flex; gap: 6px; align-items: center; flex: 1; }

/* ============================================================
   Category Detail Drawer
   ============================================================ */

/* drawer-regularization 09: the m-cd-drawer chrome family was RETIRED here — the
   categories category-detail + create-category hosts migrated onto the shared
   m-sl-drawer chrome + drawer.js engine (see the #category-detail-drawer /
   #create-cat-drawer scoped overrides + .m-cd-done above). Repo-wide grep confirmed
   zero remaining consumers before deletion; the orphaned `cd` token was removed from
   check_patterns.py's _DRAWER_CHROME_ALLOWLIST in the same commit. */

/* ---- Move sheet (category subcategory move) ---- */
.m-ef-move-link {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.m-move-sheet {
  padding: 16px var(--gutter);
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.m-move-sheet__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.m-move-sheet__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
}
.m-move-sheet__close {
  background: none;
  border: none;
  font-size: var(--fs-xl);
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-move-sheet__subtitle {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.m-move-sheet__list {
  max-height: 280px;
  overflow-y: auto;
}
.m-move-sheet__group-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
  padding: 8px 4px 4px;
}
.m-move-sheet__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}
.m-move-sheet__row:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.m-move-sheet__row--current {
  opacity: 0.4;
  pointer-events: none;
}
.m-move-sheet__row--selected {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: 1px solid var(--accent);
  border-radius: 6px;
}
.m-move-sheet__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.m-move-sheet__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  flex: 1;
}
.m-move-sheet__subs {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-move-sheet__current-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-move-sheet__warning {
  margin-top: 10px;
  padding: 10px var(--gutter);
  border-radius: 6px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
}
.m-move-sheet__error {
  margin-top: 8px;
  padding: 8px var(--gutter);
  font-size: var(--fs-sm);
  color: var(--error);
}
.m-move-sheet__footer {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  justify-content: flex-end;
}
.m-move-sheet__cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px var(--gutter);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
  min-height: 44px;
  font-family: var(--font-body);
}
.m-move-sheet__move-btn {
  background: var(--accent);
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: var(--fs-sm);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  font-family: var(--font-body);
}
.m-move-sheet__move-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---- Cross-parent reorder toast ---- */
.lc-reorder-toast {
  position: fixed;
  bottom: 24px;
  left: 16px;
  right: 16px;
  max-width: 420px;
  margin: 0 auto;
  background: #2a2522;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: 8px;
  padding: 12px var(--gutter);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.lc-reorder-toast__icon {
  color: var(--warning);
  font-size: var(--fs-lg);
  flex-shrink: 0;
  line-height: 1.4;
}
.lc-reorder-toast__text {
  flex: 1;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-primary);
}
.lc-reorder-toast__close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: var(--fs-lg);
  cursor: pointer;
  padding: 2px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* lc-group-header removed — replaced by .lg-band__head */

/* ---- Subcategory drag grip ---- */
.lc-item-grip {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  cursor: grab;
  padding: 0 6px 0 0;
  user-select: none;
  touch-action: none;
}

/* ---- Archived product banner ---- */
.m-pd-archive-banner {
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.m-pd-archive-banner__inner {
  min-width: 0;
  flex: 1;
}
.m-pd-archive-banner__status {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  color: var(--warning);
}
.m-pd-archive-banner__title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 2px;
}
.m-pd-archive-banner__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
  font-family: var(--font-mono);
  line-height: 1.5;
}
.m-pd-archive-banner__btn {
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 5px;
  padding: 8px var(--gutter);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 44px;
  white-space: nowrap;
}
.m-pd-footer--frozen {
  opacity: 0.75;
}

/* ============================================================
   Recipe Method Tab — Step Accordion (Variation A)
   ============================================================ */

/* Summary strip */
.m-rs-summary {
  padding: 12px var(--gutter) 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
}
.m-rs-summary__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  margin-bottom: 6px;
}
.m-rs-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.m-rs-summary__chip {
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-body);
}
.m-rs-summary__times {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  gap: 16px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}
.m-rs-summary__time {
  color: var(--text-secondary);
}
.m-rs-summary__time-label {
  color: var(--text-tertiary);
}
.m-rs-summary__time-label--normal {
  font-weight: 400;
}
.m-rs-summary__chip--muted {
  color: var(--text-tertiary);
}
.m-rs-summary__time--total {
  color: var(--text-primary);
  margin-left: auto;
  font-weight: 500;
}

/* Section header */
.m-rs-section-header {
  padding: 10px var(--gutter) 4px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.m-rs-section-header__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
}
.m-rs-section-header__count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* Step rows */
.m-rs-steps { }
.m-rs-step {
  border-bottom: 1px solid var(--border);
  background: transparent;
  transition: background 150ms;
}
.m-rs-step--open {
  background: var(--bg-surface);
}
.m-rs-step__header {
  padding: 12px var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;
}
.m-rs-step__number {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  flex-shrink: 0;
}
.m-rs-step--open .m-rs-step__number {
  background: var(--accent);
  color: var(--bg-base);
}
.m-rs-step__body {
  flex: 1;
  min-width: 0;
}
.m-rs-step__text {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  line-height: 1.45;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-rs-step__text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-rs-step__text--expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.m-rs-step--open .m-rs-step__text {
  font-weight: 500;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.m-rs-step__meta {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.m-rs-step__toggle {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-top: 3px;
  user-select: none;
}

/* Step detail (expanded) */
.m-rs-step__detail {
  padding: 0 var(--gutter) 14px 50px;
}
.m-rs-step__equip-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.m-rs-step__equip-label {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.m-rs-step__equip-name {
  font-weight: 500;
  color: var(--text-primary);
}

/* Step photos */
.m-rs-step__photos {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.m-rs-step__photo {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  position: relative;
}
.m-rs-step__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-rs-step__photo-del {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  border-radius: 0 6px 0 4px;
  background: var(--overlay);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0;
}
.m-rs-step__photo-add {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  color: var(--accent);
  font-family: var(--font-mono);
  cursor: pointer;
}

/* Step action buttons */
.m-rs-step__actions {
  display: flex;
  gap: 8px;
  font-size: var(--fs-xs);
}
.m-rs-step__btn {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
}
.m-rs-step__btn--danger {
  margin-left: auto;
  color: var(--error);
  border-color: var(--error-border);
}

/* Delete confirmation row */
.m-rs-step__delete-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.m-rs-step__delete-confirm[hidden] {
  display: none;
}
.m-rs-step__delete-msg {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.m-rs-step__delete-form {
  display: inline;
}

/* Upload zone */
.m-rs-step__upload-zone {
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  padding: 14px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: var(--bg-base);
  cursor: pointer;
  margin-top: 10px;
}
.m-rs-step__upload-icon {
  font-size: var(--fs-2xl);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-rs-step__upload-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 500;
}
.m-rs-step__upload-hint {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

/* Add step row */
.m-rs-add-row {
  padding: 11px var(--gutter);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.m-rs-add-row__text {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 500;
}

/* ---- Catalogue browse: recipe-specific components ---- */
.m-top-bar__action-link--muted {
  color: var(--text-tertiary);
  font-size: var(--fs-xl);
}
.lc-info-banner__mono {
  font-family: var(--font-mono);
}
.lc-browse-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 10px var(--gutter);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.lc-browse-footer__btn--secondary {
  padding: 8px var(--gutter);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.lc-browse-footer__btn--primary {
  padding: 8px var(--gutter);
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.lc-item-yield {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 1px;
}
.lc-item-trend {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.3px;
  margin-top: 1px;
}
.lc-item-trend--up {
  color: var(--error);
}
.lc-item-trend--down {
  color: var(--success);
}
.lc-item-trend--flat {
  color: var(--text-tertiary);
}
.lc-cat-flag {
  padding: 1px 5px;
  background: rgba(180, 80, 60, 0.12);
  border: 1px solid var(--error);
  border-radius: 3px;
  font-size: var(--fs-2xs);
  color: var(--error);
  font-family: var(--font-mono);
}
.lc-cost-up-arrow {
  font-size: var(--fs-2xs);
  color: var(--error);
  margin-left: 4px;
  vertical-align: middle;
}

/* Import meta footer */
.m-rs-import-meta {
  padding: 14px var(--gutter) 18px;
}
.m-rs-import-meta__box {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  background: var(--warning-bg);
  border: 1px dashed var(--warning-border-soft);
  border-radius: 5px;
  padding: 8px 10px;
  line-height: 1.5;
}
.m-rs-import-meta__link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}

/* Empty state */
.m-rs-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  text-align: center;
  min-height: 300px;
}
.m-rs-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.m-rs-empty__title {
  font-size: var(--fs-xl);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.m-rs-empty__sub {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 280px;
  margin-bottom: 24px;
}
.m-rs-empty__cta {
  padding: 10px var(--gutter);
  background: var(--accent);
  color: var(--bg-base);
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  font-family: var(--font-body);
}
.m-rs-empty__import {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Step form (JS state swap) */
.m-rs-form { }
.m-rs-form__info {
  padding: 10px var(--gutter);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-rs-form__info-dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.m-rs-form__info-text {
  flex: 1;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-rs-form__section {
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--border);
}
.m-rs-form__section-title {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 500;
  margin-bottom: 8px;
}
.m-rs-form__field {
  margin-bottom: 10px;
}
.m-rs-form__field--relative {
  position: relative;
}
.m-rs-form__field:last-child {
  margin-bottom: 0;
}
.m-rs-form__field-label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 4px;
}
.m-rs-form__field-hint {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 3px;
}
.m-rs-form__textarea {
  width: 100%;
  padding: 10px var(--gutter);
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  line-height: 1.5;
  resize: none;
  box-sizing: border-box;
}
.m-rs-form__input {
  width: 100%;
  padding: 10px var(--gutter);
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  box-sizing: border-box;
}
.m-rs-form__input--mono {
  font-family: var(--font-mono);
}
.m-rs-form__time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.m-rs-form__photo-note {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 8px;
}
.m-rs-file-input {
  display: none;
}

/* Form bar (cancel / save) */
.m-rs-form-bar {
  padding: 10px var(--gutter) 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-strong);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.m-rs-form-bar__cancel {
  flex: 1;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  min-height: 44px;
}
.m-rs-form-bar__save {
  flex: 2;
  padding: 11px;
  background: var(--accent);
  border: none;
  color: var(--bg-base);
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  min-height: 44px;
}
.m-rs-form-bar__danger {
  flex: 2;
  padding: 11px;
  background: var(--error);
  border: none;
  color: var(--text-primary);
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  min-height: 44px;
}

/* Equipment auto-suggest dropdown */
.m-rs-equip-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: -4px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px;
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}
.m-rs-equip-suggest__header {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px 2px;
}
.m-rs-equip-suggest__row {
  padding: 7px 8px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 3px;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.m-rs-equip-suggest__row:hover {
  background: var(--accent-bg);
}
.m-rs-equip-suggest__row--active {
  color: var(--accent);
  font-weight: 500;
  background: var(--warning-bg);
}

/* Reorder mode */
.m-rs-reorder__hint {
  padding: 10px var(--gutter);
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning-border-soft);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-rs-reorder__grip-demo {
  font-family: var(--font-mono);
  color: var(--accent);
}
.m-rs-reorder__list {
  padding: 8px 0;
}
.m-rs-reorder__row {
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border-left: 2px solid transparent;
  cursor: grab;
  touch-action: none;
}
.m-rs-reorder__row--dragging {
  opacity: 0.5;
}
.m-rs-reorder__row--over {
  background: var(--bg-surface);
  border-left-color: var(--accent);
}
.m-rs-reorder__grip {
  font-size: var(--fs-lg);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  cursor: grab;
  flex-shrink: 0;
  padding: 0 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.m-rs-reorder__num {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.m-rs-reorder__body {
  flex: 1;
  min-width: 0;
}
.m-rs-reorder__title {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-rs-reorder__meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* Import search */
.m-rs-import-search { }
.m-rs-import-results { padding: 0 var(--gutter); }
.m-rs-import-results__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  min-height: 44px;
}
.m-rs-import-results__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.m-rs-import-results__count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-rs-import-results__empty {
  padding: 24px 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

/* Import confirm */
.m-rs-import-confirm { padding: 14px var(--gutter); }
.m-rs-import-confirm__warn {
  padding: 12px var(--gutter);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.m-rs-import-confirm__warn-icon {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--error);
  color: var(--bg-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-top: 1px;
}
.m-rs-import-confirm__warn-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.m-rs-import-confirm__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  margin-bottom: 8px;
}
.m-rs-import-confirm__preview {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.m-rs-import-confirm__card {
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.m-rs-import-confirm__card:last-child {
  border-bottom: none;
}
.m-rs-import-confirm__card-text {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.m-rs-import-confirm__times {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding: 10px var(--gutter);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}
.m-rs-import-confirm__loading {
  padding: 20px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

/* Execution detail in drawer context */
.m-rd-drawer-inner[hidden] { display: none; }
.m-rd-drawer__body .m-exec-page { min-height: 0; height: 100%; }
.m-exec-detail-back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--gutter);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.m-exec-detail-back__btn {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
}
.m-exec-detail-back__btn::before { content: "‹ "; font-size: var(--fs-xl); line-height: 1; }
.m-exec-detail-back__meta {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-exec-detail-back__badge {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.4px;
}
.m-exec-detail-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
}

/* ============================================================
   Executions tab — summary strip, charts, history, empty state
   ============================================================ */
.m-exec-empty {
  padding: 40px 20px;
  text-align: center;
}
.m-exec-empty__icon { font-size: var(--fs-display-lg); margin-bottom: 12px; opacity: 0.5; }
.m-exec-empty__title { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.m-exec-empty__desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }
.m-exec-empty__cta { font-size: var(--fs-sm); color: var(--accent); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.m-exec-empty__hint { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 4px; }

.m-exec-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}
.m-exec-summary__cell {
  padding: 12px var(--gutter);
  border-right: 1px solid var(--border);
  cursor: pointer;
}
.m-exec-summary__cell:last-child { border-right: none; }
.m-exec-summary__cell--accent .m-exec-summary__value { color: var(--accent); }
.m-exec-summary__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 500;
}
.m-exec-summary__value {
  font-size: var(--fs-xl);
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 3px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.3px;
}
.m-exec-summary__sub {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 1px;
}

/* Execution detail summary (non-clickable) */
.m-exec-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  margin: 0 0 12px;
  border-radius: 8px;
  overflow: hidden;
}
.m-exec-detail-summary .m-exec-summary__cell { cursor: default; }

/* Chart sections */
.m-exec-chart-section {
  padding: 16px var(--gutter) 8px;
  border-bottom: 1px solid var(--border);
}
.m-exec-chart-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--gutter);
  margin-bottom: 4px;
}
.m-exec-chart-section__right {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-exec-chart-wrap {
  position: relative;
  height: 140px;
  margin: 4px 0 8px;
}
.m-exec-answer {
  font-size: var(--fs-xs);
  line-height: 1.5;
  padding: 8px var(--gutter);
  border-radius: 6px;
  margin: 4px 0 8px;
}
.m-exec-answer--ok { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.m-exec-answer--warn { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }
.m-exec-answer--neutral { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }
.m-exec-answer__accent { font-weight: 500; }
.m-exec-answer__success { font-weight: 500; color: var(--success); }

/* History list */
.m-exec-history { padding: 0 var(--gutter); }
.m-exec-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.3s ease;
}
.m-exec-row--selected {
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  margin-left: -10px;
}
@keyframes exec-highlight-pulse {
  0%   { background-color: color-mix(in srgb, var(--accent) 25%, transparent); }
  100% { background-color: transparent; }
}
.m-exec-highlight-pulse {
  animation: exec-highlight-pulse 1.2s ease-out;
}
.m-exec-row__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-exec-row__left { flex: 1; min-width: 0; }
.m-exec-row__top { display: flex; align-items: baseline; gap: 4px; }
.m-exec-row__date { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; }
.m-exec-row__sep { font-size: var(--fs-xs); color: var(--text-tertiary); }
.m-exec-row__sub { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 1px; }
.m-exec-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.m-exec-row__eff { font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: 500; }
.m-exec-row__cost { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-tertiary); }
.m-exec-row__chevron { font-size: var(--fs-base); color: var(--text-tertiary); flex-shrink: 0; }
.m-exec-row__driver {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-exec-row__driver-badge {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  color: var(--warning);
}
.m-exec-row__driver-text { font-family: var(--font-mono); }

/* Load more */
.m-exec-load-more-wrap { padding: 8px var(--gutter) 16px; text-align: center; }
.m-exec-load-more {
  font-size: var(--fs-sm); color: var(--accent); font-weight: 500;
  background: none; border: none; cursor: pointer;
  min-height: 44px; padding: 0 var(--gutter);
}

/* Loading state */
.m-exec-loading { padding: 24px; text-align: center; font-size: var(--fs-sm); color: var(--text-tertiary); }

/* Execution page (full page + drawer) */
.m-exec-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-base);
}
.m-exec-page__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px var(--gutter);
}
.m-exec-page__footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}

/* Ingredient table */
.m-exec-ig-table { margin: 8px 0 16px; }
.m-exec-ig-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.m-exec-ig-row__header { display: flex; justify-content: space-between; align-items: center; }
.m-exec-ig-row__name { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; }
.m-exec-ig-row__cost { font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--text-primary); font-weight: 500; }
.m-exec-ig-row__detail { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px; font-family: var(--font-mono); }
.m-exec-ig-row__qty { color: var(--text-secondary); }
.m-exec-ig-row__delta { font-weight: 500; margin-left: 6px; }
.m-exec-ig-row__delta--warn { color: var(--error); }
.m-exec-ig-row__delta--ok { color: var(--success); }
.m-exec-ig-row__delta--neutral { color: var(--text-tertiary); }
.m-exec-ig-row__source { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.m-exec-ig-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-top: 2px solid var(--border);
  font-size: var(--fs-sm); font-weight: 500;
}
.m-exec-ig-total__label { color: var(--text-secondary); font-size: var(--fs-xs); }
.m-exec-ig-total__values { text-align: right; }
.m-exec-ig-total__amount { font-family: var(--font-mono); color: var(--text-primary); }
.m-exec-ig-total__delta { font-size: var(--fs-xs); font-family: var(--font-mono); margin-left: 6px; }

/* Attribution */
.m-exec-attribution {
  padding: 12px var(--gutter);
  margin: 16px 0;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ============================================================
   Versions tab — version list, diff view
   ============================================================ */

/* Version list — row markup migrated to m-act-* (ActivityBody card) */

/* Loading */
.m-ver-loading { padding: 24px; text-align: center; font-size: var(--fs-sm); color: var(--text-tertiary); }

/* Diff view */
.m-ver-diff-wrap { padding: 0 var(--gutter) 16px; }

/* Diff header (JS uses m-ver-diff__header) */
.m-ver-diff__header,
.m-ver-diff-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px var(--gutter);
  border-radius: 6px;
  margin-bottom: 12px;
}
.m-ver-diff__header-tag {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
  flex-shrink: 0;
  margin-top: 2px;
}
.m-ver-diff__header-info { flex: 1; min-width: 0; }
.m-ver-diff__header-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}
.m-ver-diff__header-meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.m-ver-diff-header__title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.m-ver-diff-header__close {
  font-size: var(--fs-xs); color: var(--text-tertiary); cursor: pointer;
  min-height: 44px; display: flex; align-items: center; padding: 0 4px;
}

/* Diff sections */
.m-ver-diff-section { margin-bottom: 12px; }
.m-ver-diff-section > .m-section-label { margin-bottom: 6px; }
.m-ver-diff-section__card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px var(--gutter);
}

/* Diff rows */
.m-ver-diff-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border);
}
.m-ver-diff-row:last-child { border-bottom: none; }
.m-ver-diff-row__badge {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-sm);
  flex-shrink: 0;
  border: 1px solid;
  border-radius: 4px;
  background: transparent;
}
.m-ver-diff-row__sym {
  width: 16px;
  text-align: center;
  font-weight: 600;
  flex-shrink: 0;
}
.m-ver-diff-row__sym--added { color: var(--success); }
.m-ver-diff-row__sym--removed { color: var(--error); }
.m-ver-diff-row__sym--changed { color: var(--warning); }
.m-ver-diff-row__body { flex: 1; min-width: 0; }
.m-ver-diff-row__label { color: var(--text-primary); font-weight: 500; }
.m-ver-diff-row__values {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.m-ver-diff-row__from { color: var(--text-secondary); }
.m-ver-diff-row__from--strike { text-decoration: line-through; }
.m-ver-diff-row__arrow { color: var(--text-tertiary); }
.m-ver-diff-row__to { color: var(--text-secondary); }
.m-ver-diff-row__reason { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.m-ver-diff-row__value { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-xs); }
.m-ver-diff-empty {
  padding: 20px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.m-ver-diff__close {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile Stock Hub (m-sh-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Stock hub: override page-content scroll — hub manages its own ── */
.page-content:has(.m-sh-tabs) {
  overflow: hidden;
  padding-bottom: 0;
}

/* ── Tabs ── */
.m-sh-tabs {
  flex-shrink: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  padding: 0 var(--gutter);
  position: relative;
}
.m-sh-tab {
  padding: 11px var(--gutter) 10px;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  user-select: none;
}
.m-sh-tab--active {
  font-weight: 500;
  color: var(--text-primary);
  border-bottom-color: var(--stock-accent);
}
.m-sh-tab-meta {
  flex: 1;
  text-align: right;
  align-self: center;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}

/* ── Panels ── */
.m-sh-panel { display: none; }
.m-sh-panel--active {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 93px - 61px);
  overflow: hidden;
}
.m-sh-scroll { overflow-y: auto; padding-bottom: 20px; flex: 1; min-height: 0; }
#panel-table .m-sh-table-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── Period bar ── */
/* ── Period chip strip ── */
.m-sh-period-chips {
  padding: 14px 10px 10px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-sh-period-chips::-webkit-scrollbar { display: none; }
.m-sh-period-chip {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  flex: 1;
  text-align: center;
}
.m-sh-period-chip--active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}
.m-sh-period-chip--custom {
  position: relative;
  padding: 0;
  border: 1px solid var(--border);
}
.m-sh-period-custom-select {
  padding: 6px 6px;
  width: 100%;
  background: transparent;
  border: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-body);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: center;
}
.m-sh-period-chip--custom.m-sh-period-chip--active .m-sh-period-custom-select {
  color: var(--text-primary);
}

/* ── Stat card ── */
.m-sh-stat-card-wrap { padding: 0 var(--gutter) 12px; }
.m-sh-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px var(--gutter);
}
.m-sh-stat-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.m-sh-stat-card__period {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.m-sh-stat-card__sku-count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-sh-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.m-sh-stat-grid--two {
  grid-template-columns: 1fr 1fr;
}
.m-sh-stat-grid + .m-sh-stat-grid {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.m-sh-stat-card__onhand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.m-sh-stat-card__onhand-value {
  font-size: var(--fs-xl);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.m-sh-stat-card__onhand-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-sh-stat__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.m-sh-stat__value {
  font-size: var(--fs-xl);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 2px;
  line-height: 1;
}
.m-sh-stat__value--neg { color: var(--error); }
.m-sh-stat__value--warn { color: var(--warning); }
.m-sh-stat__pct {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-weight: 400;
  margin-left: 4px;
}
.m-sh-stat__sub--ok { color: var(--success); }
.m-sh-stat__sub--warn { color: var(--warning); }
.m-sh-stat__sub--err { color: var(--error); }
.m-sh-stat-card__variance {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m-sh-stat-card__variance-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-sh-stat-card__variance-value {
  font-size: var(--fs-xl);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 2px;
}
.m-sh-stat-card__variance-value--neg { color: var(--error); }
.m-sh-stat-card__variance-value--warn { color: var(--warning); }
.m-sh-stat-card__variance-pct {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-weight: 400;
}

/* ── Chips ── */
.m-sh-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.m-sh-chip--ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.m-sh-chip--warn { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.m-sh-chip--err { background: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); }
.m-sh-chip--info { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--stock-accent); }
.m-sh-chip--neutral { background: var(--bg-elevated); color: var(--text-secondary); }

/* ── Gap warning ── */
/* ── Attention rows (Needs attention section) ── */
.m-sh-attention-row {
  margin: 0 var(--gutter) 8px;
  background: var(--bg-surface);
  border-radius: 10px;
  padding: 12px var(--gutter) 12px 15px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.m-sh-attention-row--warn { border-left-color: var(--warning); }
.m-sh-attention-row--info { border-left-color: var(--stock-accent); }
.m-sh-attention-row__icon {
  font-size: var(--fs-base);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.m-sh-attention-row--warn .m-sh-attention-row__icon { color: var(--warning); }
.m-sh-attention-row--info .m-sh-attention-row__icon { color: var(--stock-accent); }
.m-sh-attention-row__body { flex: 1; }
.m-sh-attention-row__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.m-sh-attention-row__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.m-sh-attention-row__chevron {
  color: var(--text-tertiary);
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

/* ── Stat sub-labels ── */
.m-sh-stat__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* ── Day headers (activity timeline) ── */
.m-sh-day-header {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 0 4px;
}
.m-sh-day-header:first-child { padding-top: 4px; }

/* ── Hub activity (recent items on hub tab) ── */
.m-sh-hub-activity {
  margin: 0 var(--gutter) 16px;
}
.m-sh-see-all-link {
  display: block;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--stock-accent);
  text-decoration: none;
  padding: 10px 0 4px;
  font-weight: 500;
}

/* ── Open banner ── */
.m-sh-open-banner {
  margin: 0 var(--gutter) 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px var(--gutter);
}
.m-sh-open-banner__badges {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.m-sh-open-banner__info {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  margin-bottom: 10px;
}
.m-sh-open-banner__cta {
  display: block;
  width: 100%;
  padding: 10px var(--gutter);
  background: var(--stock-accent);
  color: #111;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* ── Action block ── */
.m-sh-action-block { padding: 0 var(--gutter) 18px; }
.m-sh-action-primary {
  width: 100%;
  padding: 13px var(--gutter);
  background: var(--stock-accent);
  color: #111;
  border: none;
  border-radius: 8px;
  font-size: var(--fs-base);
  font-weight: 600;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: 44px;
}
.m-sh-action-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.m-sh-action-btn {
  flex: 1;
  padding: 8px 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  min-height: 44px;
}

/* ── Section labels ── */
.m-sh-section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--gutter) 8px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
}
.m-sh-section-label[hidden],
.m-sh-extremes-wrap[hidden] { display: none; }
.m-sh-section-label__right {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ── Variance card (biggest variances) ── */
.m-sh-var-card-wrap { padding: 0 var(--gutter) 18px; }
.m-sh-var-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 0;
}
.m-sh-var-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--gutter);
  cursor: pointer;
}
.m-sh-var-row + .m-sh-var-row { border-top: 1px solid var(--border); }
.m-sh-var-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.m-sh-var-row__dot--err { background: var(--error); }
.m-sh-var-row__dot--warn { background: var(--warning); }
.m-sh-var-row__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sh-var-row__body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.m-sh-var-row__qty {
  display: inline-block;
  min-width: 42px;
  text-align: right;
}
.m-sh-var-row__unit {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  display: inline-block;
  width: 52px;
  text-align: left;
  margin-left: 6px;
}
@media (max-width: 767px) {
  .m-sh-var-row__cost { display: none; }
}
.m-sh-var-row__chevron {
  color: var(--text-tertiary);
  font-size: var(--fs-base);
}

/* ── Extremes (short / over-held / stockholding) ── */
.m-sh-extremes-wrap { padding: 0 var(--gutter) 18px; }
.m-sh-extremes-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.m-sh-ext-group__hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--gutter);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.m-sh-ext-group:first-child .m-sh-ext-group__hdr {
  border-top: none;
}
.m-sh-ext-group__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.m-sh-ext-group__meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-sh-ext-row {
  display: flex;
  align-items: center;
  padding: 10px var(--gutter);
  border-top: 1px solid var(--border);
  gap: 10px;
}
.m-sh-ext-row__name {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sh-ext-row__qty {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  white-space: nowrap;
  min-width: 36px;
  text-align: right;
}
.m-sh-ext-row__unit {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  width: 52px;
  text-align: left;
  margin-left: 6px;
}
.m-sh-ext-row__delta {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
  min-width: 48px;
  text-align: right;
}
.m-sh-ext-row__delta--err { color: var(--error); }
.m-sh-ext-row__delta--warn { color: var(--warning); }
.m-sh-ext-row__delta--info { color: var(--stock-accent, #7198b5); }
.m-sh-ext-row__delta--ok { color: var(--success); }

/* ── Holdings card ── */
.m-sh-holdings-wrap { padding: 0 var(--gutter) 18px; }
.m-sh-holdings-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px var(--gutter);
}
.m-sh-holdings-card__value {
  font-size: var(--fs-xl);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-primary);
}
.m-sh-holdings-card__date {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 4px;
}

/* ── Completed list ── */
.m-sh-completed-wrap { padding: 0 var(--gutter) 18px; }
.m-sh-completed-item {
  display: flex;
  align-items: center;
  padding: 10px var(--gutter);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  text-decoration: none;
  cursor: pointer;
}
.m-sh-completed-item--deleted { opacity: 0.5; }
.m-sh-completed-item__body { flex: 1; min-width: 0; }
.m-sh-completed-item__top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-sh-completed-item__title {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sh-completed-item__meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.m-sh-completed-item__chevron {
  color: var(--text-tertiary);
  font-size: var(--fs-lg);
  flex-shrink: 0;
  margin-left: 8px;
}
.m-sh-empty-state {
  padding: 20px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

/* ── Deleted toggle ── */
.m-sh-deleted-toggle-wrap { padding: 8px 0 0; }
.m-sh-deleted-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.m-sh-deleted-toggle__label { user-select: none; }

/* ── Table info ── */
.m-sh-table-info {
  padding: 10px var(--gutter) 9px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.m-sh-table-info__title {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.m-sh-table-info__period {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.m-sh-table-info__count {
  text-align: right;
  font-size: var(--fs-base);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 500;
}
.m-sh-table-info__sub {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 1px;
}

/* ── Table search + sort bar ── */
.m-sh-search-row {
  padding: 8px var(--gutter) 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 6px;
  align-items: center;
}
.m-sh-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.m-sh-search-input-wrap--compact { margin-bottom: 6px; }
.m-sh-search-input__icon {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.m-sh-search-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
}
.m-sh-search-input::placeholder { color: var(--text-tertiary); }
.m-sh-sort-btn {
  padding: 7px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.m-sh-sort-btn__active {
  font-family: var(--font-mono);
  color: var(--stock-accent);
  font-size: var(--fs-xs);
}
.m-sh-filter-btn {
  padding: 7px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}

/* ── Category jump strip ── */
.m-sh-cat-jump {
  padding: 8px var(--gutter) 4px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  background: var(--bg-base);
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.m-sh-cat-jump::-webkit-scrollbar { display: none; }
.m-sh-cat-jump__chip {
  flex-shrink: 0;
  padding: 5px 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
}
.m-sh-cat-jump__chip--active {
  border-color: var(--stock-accent);
  color: var(--stock-accent);
}
.m-sh-cat-jump__count {
  color: var(--text-tertiary);
  margin-left: 3px;
}

/* ── Table hint bar ── */
.m-sh-hint-bar {
  flex-shrink: 0;
  margin: 6px var(--gutter);
  padding: 5px 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}
.m-sh-hint-bar__icon {
  color: var(--stock-accent);
  font-size: var(--fs-xs);
}
.m-sh-hint-bar__text { flex: 1; }
.m-sh-hint-bar__close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  padding: 2px 4px;
  cursor: pointer;
  line-height: 1;
}

/* ── Table column headers ── */
.m-sh-col-headers {
  display: grid;
  grid-template-columns: 1.8fr 56px 56px 48px;
  padding: 7px var(--gutter);
  gap: 6px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
  flex-shrink: 0;
}
.m-sh-col-headers--mobile { display: grid; }
.m-sh-col-headers--desktop { display: none; }
@media (min-width: 768px) {
  .m-sh-col-headers { grid-template-columns: 2fr 0.8fr 0.7fr 0.5fr; gap: 6px; }
  .m-sh-col-headers--mobile { display: none; }
  .m-sh-col-headers--desktop { display: grid; }
}
.m-sh-col-headers__right { text-align: right; }

/* ── Table body + rows ── */
.m-sh-table-body { flex: 1; overflow-y: auto; min-height: 0; }
.m-sh-cat-section { border-top: 1px solid var(--border); }
.m-sh-cat-section:first-child { border-top: none; }
.m-sh-cat-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.8fr 56px 56px 48px;
  gap: 4px;
  padding: 7px var(--gutter);
  align-items: center;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.m-sh-cat-header__left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.m-sh-cat-header__toggle {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  display: inline-block;
  transition: transform 0.12s;
}
.m-sh-cat-body--collapsed .m-sh-cat-header__toggle,
.m-sh-cat-header--collapsed .m-sh-cat-header__toggle { transform: rotate(-90deg); }
.m-sh-cat-header__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.m-sh-cat-header__count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.m-sh-cat-header__value {
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-weight: 500;
}
.m-sh-cat-header__spacer--desktop { display: none; }
.m-sh-cat-header__value--desktop { display: none; }
.m-sh-cat-header__value--mobile { display: block; }
.m-sh-cat-header__left { grid-column: 1 / 4; }
@media (min-width: 768px) {
  .m-sh-cat-header {
    grid-template-columns: 2fr 0.8fr 0.7fr 0.5fr;
    gap: 6px;
  }
  .m-sh-cat-header__spacer--desktop { display: block; }
  .m-sh-cat-header__value--desktop { display: block; }
  .m-sh-cat-header__value--mobile { display: none; }
  .m-sh-cat-header__left { grid-column: auto; }
}
.m-sh-cat-header__var {
  text-align: right;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-tertiary);
}
.m-sh-cat-header__flag {
  padding: 1px 5px;
  background: rgba(180,80,60,0.12);
  border: 1px solid var(--error);
  border-radius: 3px;
  font-size: var(--fs-2xs);
  color: var(--error);
}
.m-sh-cat-body--collapsed { display: none; }
.m-sh-subcat-header {
  padding: 6px var(--gutter) 4px 34px;
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
/* Mobile: product | expected | counted | var-units (4 cols, hide onhand/value/varpct) */
.m-sh-table-row {
  display: grid;
  grid-template-columns: 1.8fr 56px 56px 48px;
  padding: 11px var(--gutter);
  gap: 4px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  cursor: pointer;
}
.m-sh-table-row__cell--onhand,
.m-sh-table-row__cell--value,
.m-sh-table-row__cell--varpct { display: none; }
/* Desktop: product | onhand | value | var% (4 cols, hide expected/counted/varunits) */
@media (min-width: 768px) {
  .m-sh-table-row {
    grid-template-columns: 2fr 0.8fr 0.7fr 0.5fr;
  }
  .m-sh-table-row__cell--onhand,
  .m-sh-table-row__cell--value,
  .m-sh-table-row__cell--varpct { display: block; }
  .m-sh-table-row__cell--expected,
  .m-sh-table-row__cell--counted,
  .m-sh-table-row__cell--varunits { display: none; }
}
.m-sh-table-row--below-par {
  border-left: 3px solid var(--warning);
  padding-left: 13px;
}
.m-sh-table-row__product { min-width: 0; }
.m-sh-table-row__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sh-table-row__unit {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
}
.m-sh-table-row__cell {
  text-align: right;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.m-sh-table-row__actual { font-weight: 500; }
.m-sh-table-row__actual--neg { color: var(--error); }
.m-sh-table-row__actual--warn { color: var(--warning); }
.m-sh-table-row__sep { color: var(--text-tertiary); margin: 0 3px; }
.m-sh-table-row__theo { color: var(--text-tertiary); }
.m-sh-table-row__cell--var { font-size: var(--fs-xs); }
.m-sh-table-row__var--neg { color: var(--error); font-weight: 500; }
.m-sh-table-row__var--warn { color: var(--warning); font-weight: 500; }
.m-sh-table-row__var--muted { color: var(--text-tertiary); font-size: var(--fs-xs); }

/* ── Table footer ── */
.m-sh-table-footer {
  flex-shrink: 0;
  padding: 10px var(--gutter);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m-sh-table-footer--center {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
}
.m-sh-table-footer__date {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}
.m-sh-table-footer__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.m-sh-table-footer__value {
  font-size: var(--fs-lg);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-primary);
}
.m-sh-table-footer__btn {
  padding: 10px var(--gutter);
  background: var(--stock-accent);
  color: #111;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
}

/* ── Activity summary header ── */
.m-sh-act-summary {
  padding: 12px var(--gutter) 10px;
  flex-shrink: 0;
}
.m-sh-act-summary__card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px var(--gutter);
}
.m-sh-act-summary__period {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.m-sh-act-summary__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
}
.m-sh-act-summary__grid--3col {
  grid-template-columns: 1fr 1fr 1fr;
}
.m-sh-act-summary__label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.m-sh-act-summary__value {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 2px;
  line-height: 1;
}

/* ── Day group headers ── */
.m-sh-day-group { margin-bottom: 4px; }
.m-sh-day-group__header {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

/* ── Activity panel ── */
.m-sh-activity-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.m-sh-activity-filters {
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex-shrink: 0;
}
.m-sh-activity-chip {
  flex-shrink: 0;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.m-sh-activity-chip--active {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  font-weight: 500;
  color: var(--text-primary);
}
.m-sh-activity-chip__count {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
}
.m-sh-activity-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px var(--gutter) 20px;
}
.m-sh-stream-item {
  display: flex;
  gap: 10px;
  padding: 10px var(--gutter);
  background: var(--bg-surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  align-items: center;
  margin-bottom: 6px;
  text-decoration: none;
  cursor: pointer;
}
.m-sh-stream-item--ok { border-left: 3px solid var(--success); }
.m-sh-stream-item--warn { border-left: 3px solid var(--warning); }
.m-sh-stream-item--err { border-left: 3px solid var(--error); }
.m-sh-stream-item--count { border-left: 3px solid var(--stock-accent); }
.m-sh-stream-item--wastage { border-left: 3px solid var(--warning); }
.m-sh-stream-item--delivery { border-left: 3px solid var(--accent); }
.m-sh-stream-item--adjustment { border-left: 3px solid var(--text-tertiary); }
.m-sh-stream-item__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  flex-shrink: 0;
}
.m-sh-stream-item__icon--count { background: var(--stock-accent); }
.m-sh-stream-item__icon--wastage { background: var(--warning); }
.m-sh-stream-item__icon--delivery { background: var(--accent); color: #111; }
.m-sh-stream-item__icon--adjust { background: var(--text-tertiary); color: #111; }
.m-sh-stream-item--static { cursor: default; }
.m-sh-stream-item__body { min-width: 0; flex: 1; }
.m-sh-stream-item__title {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.m-sh-stream-item__meta {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-sh-meta--success { color: var(--success); }
.m-sh-meta--error { color: var(--error); }
.m-sh-meta--warning { color: var(--warning); }
.m-sh-stream-item__who {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.m-sh-dtype-chip {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}
.m-sh-dtype-chip--drinks { background: rgba(155,90,107,0.22); color: #c98a9b; }
.m-sh-dtype-chip--food { background: color-mix(in srgb, var(--success) 22%, transparent); color: #8fc09b; }
.m-sh-dtype-chip--other { background: color-mix(in srgb, var(--text-tertiary) 26%, transparent); color: #b0a99f; }
.m-sh-stream-item__chevron {
  color: var(--text-tertiary);
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

/* ── Sheet overlay (shared by count, product, sort sheets) ── */
.m-sh-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 50;
}

/* ── Start count sheet ── */
.m-sh-count-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 51;
  background: var(--bg-surface);
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
.m-sh-count-sheet[hidden] { display: none; }
.m-sh-count-sheet__grabber {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  margin: 8px auto 4px;
}
.m-sh-count-sheet__header {
  padding: 4px var(--gutter) 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.m-sh-count-sheet__eyebrow {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.m-sh-count-sheet__title {
  font-size: var(--fs-lg);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 500;
  margin-top: 2px;
}
.m-sh-count-sheet__close {
  font-size: var(--fs-xl);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-sh-count-sheet > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.m-sh-count-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-base);
  padding: 14px var(--gutter) 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.m-sh-count-sheet__group { margin: 0; }
.m-sh-count-sheet__card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px var(--gutter);
}
.m-sh-count-sheet__card .m-sh-count-sheet__dates { margin: 0; }
.m-sh-count-sheet__card .m-sh-count-sheet__date-hint { padding: 8px 2px 0; }
.m-sh-count-sheet__card .m-sh-count-sheet__scope {
  margin: 12px calc(-1 * var(--gutter)) -12px;
  padding: 10px var(--gutter);
  background: transparent;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
#line-count-extras { display: flex; flex-direction: column; gap: 14px; }
#line-count-extras[hidden] { display: none; }
.m-sh-count-sheet__card--scope { padding: 0; }
.m-sh-lc-scope__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 14px var(--gutter);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  min-height: 44px;
  justify-content: center;
}
.m-sh-lc-scope__option--active {
  background: var(--bg-elevated);
}
.m-sh-lc-scope__name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.m-sh-lc-scope__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-sh-lc-scope__divider {
  height: 1px;
  background: var(--border);
}
.m-sh-lc-scope__group-label {
  padding: 10px var(--gutter) 6px;
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.m-sh-lc-scope__chips {
  display: flex;
  gap: 6px;
  padding: 0 var(--gutter) 12px;
}
.m-sh-lc-scope__chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  min-height: 44px;
}
.m-sh-lc-scope__chip--active {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--text-primary);
}
.m-sh-lc-scope__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.m-sh-lc-scope__dot--drinks { background: rgba(155,90,107,0.7); }
.m-sh-lc-scope__dot--food { background: color-mix(in srgb, var(--success) 70%, transparent); }
.m-sh-lc-scope__dot--other { background: color-mix(in srgb, var(--text-tertiary) 70%, transparent); }
.m-sh-lc-scope__count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-left: 2px;
}
.m-sh-count-sheet__body .m-sh-count-sheet__label { margin: 0 4px 6px; }
.m-sh-count-sheet__body .m-sh-count-sheet__label-row { margin: 0 4px 6px; }
.m-sh-count-sheet__section {
  margin: 12px var(--gutter) 0;
  flex-shrink: 0;
}
.m-sh-count-sheet__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.m-sh-count-sheet__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.m-sh-count-sheet__actions-row {
  display: flex;
  gap: 10px;
}
.m-sh-count-sheet__action-link {
  font-size: var(--fs-xs);
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.m-sh-count-sheet__action-link--muted { color: var(--text-tertiary); }
.m-sh-count-sheet__dates {
  margin: 14px var(--gutter) 0;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.m-sh-count-sheet__card .m-sh-count-sheet__dates-inner .m-sh-count-sheet__label {
  margin-bottom: 6px;
}
.m-sh-count-sheet__date-field { flex: 1; }
.m-sh-date-input {
  width: 100%;
  padding: 9px var(--gutter);
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  box-sizing: border-box;
}
.m-sh-count-sheet__date-hint {
  padding: 4px var(--gutter) 0;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-sh-count-sheet__scope {
  padding: 10px var(--gutter);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-radius: 6px;
  margin: 10px var(--gutter) 0;
  text-align: center;
}
.m-sh-text-input {
  width: 100%;
  padding: 9px var(--gutter);
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  box-sizing: border-box;
}
.m-sh-type-toggle {
  display: flex;
  background: var(--bg-base);
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.m-sh-type-option {
  flex: 1;
  padding: 9px 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
}
.m-sh-type-option--active {
  font-weight: 500;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.m-sh-count-sheet__footer {
  padding: 12px var(--gutter);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  margin-top: auto;
}
.m-sh-count-sheet__cta {
  width: 100%;
  padding: 12px 0;
  background: var(--accent);
  color: #1a1816;
  border: none;
  border-radius: 8px;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

/* ── Product detail sheet ── */
.m-sh-prod-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  background: var(--bg-surface);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-top: 1px solid var(--border-strong);
  max-height: 88%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.m-sh-prod-sheet__grabber {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  margin: 8px auto 4px;
}
.m-sh-prod-sheet__header {
  padding: 6px var(--gutter) 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.m-sh-prod-sheet__header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.m-sh-prod-sheet__name {
  font-size: var(--fs-base);
  color: var(--text-primary);
  font-weight: 500;
  font-family: var(--font-heading);
  flex: 1;
  min-width: 0;
}
.m-sh-prod-sheet__unit {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-weight: 400;
}
.m-sh-prod-sheet__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.m-sh-prod-sheet__close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: var(--fs-xl);
  padding: 4px;
  cursor: pointer;
  margin-top: -2px;
  min-width: 44px;
  min-height: 44px;
}
.m-sh-prod-sheet__stats {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
}
.m-sh-prod-sheet__stat-box {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.m-sh-prod-sheet__stat-label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
}
.m-sh-prod-sheet__stat-value {
  font-size: var(--fs-lg);
  font-family: var(--font-mono);
  font-weight: 500;
  margin-top: 3px;
  line-height: 1;
}
.m-sh-prod-sheet__stat-sub {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 3px;
}
.m-sh-prod-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px var(--gutter) 18px;
}
.m-sh-waterfall-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px var(--gutter) 12px;
}
.m-sh-waterfall-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.m-sh-waterfall-card__title {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
}
.m-sh-waterfall-card__period {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-sh-waterfall-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}
.m-sh-waterfall-row__label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  text-align: right;
}
.m-sh-waterfall-row__bar {
  position: relative;
  height: 10px;
}
.m-sh-waterfall-row__bar-fill {
  position: absolute;
  left: 0;
  top: 1px;
  height: 8px;
  border-radius: 2px;
  opacity: 0.8;
}
.m-sh-waterfall-row__value {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}
.m-sh-waterfall-row__unit {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  margin-left: 2px;
}
.m-sh-waterfall-divider {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.m-sh-waterfall-row--theo .m-sh-waterfall-row__label {
  color: var(--text-primary);
  font-weight: 500;
}
.m-sh-waterfall-row--theo .m-sh-waterfall-row__value {
  color: var(--text-primary);
  font-weight: 500;
}
.m-sh-waterfall-row--counted .m-sh-waterfall-row__label { color: var(--stock-accent); }
.m-sh-waterfall-row--counted .m-sh-waterfall-row__value {
  color: var(--stock-accent);
  font-weight: 500;
}
.m-sh-waterfall-dashed {
  position: absolute;
  top: 0;
  height: 10px;
  border-left: 1px dashed var(--text-tertiary);
}

/* ── Sort sheet ── */
.m-sh-sort-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  background: var(--bg-surface);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.m-sh-sort-sheet__grabber {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  margin: 8px auto 4px;
}
.m-sh-sort-sheet__header {
  padding: 4px var(--gutter) 10px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
}
.m-sh-sort-option {
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.m-sh-sort-option:last-child { border-bottom: none; }
.m-sh-sort-option--active { background: var(--bg-elevated); }
.m-sh-sort-option__label {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 400;
}
.m-sh-sort-option--active .m-sh-sort-option__label { font-weight: 500; }
.m-sh-sort-option__hint {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.m-sh-sort-option__check {
  color: var(--stock-accent);
  font-size: var(--fs-base);
}

/* ================================================================
   Mobile Stock Count Flow (m-sc-*)
   count-final.jsx: staff-facing count with entry chips + keypad
   ================================================================ */

/* ---- Header progress (inside m-top-bar) ---- */
.m-sc-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.m-sc-header-progress {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* ---- Toolbar (location chip + search) ---- */
.m-sc-toolbar[hidden] { display: none; }
.m-sc-toolbar {
  flex-shrink: 0;
  padding: 10px var(--gutter);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Location chip */
.m-sc-loc-chip {
  padding: 8px var(--gutter);
  background: color-mix(in srgb, var(--info) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--stock-accent);
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
}
.m-sc-loc-chip__icon {
  font-family: var(--font-mono);
}
.m-sc-loc-chip__caret {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  margin-left: 2px;
}

/* Location dropdown */
.m-sc-loc-dropdown {
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: 20;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  overflow: hidden;
}
.m-sc-loc-option {
  display: block;
  width: 100%;
  padding: 12px var(--gutter);
  border: none;
  background: none;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
}
.m-sc-loc-option:last-child { border-bottom: none; }
.m-sc-loc-option--active {
  color: var(--stock-accent);
  font-weight: 500;
}

/* Search bar */
.m-sc-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 44px;
  box-sizing: border-box;
}
.m-sc-search__icon {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.m-sc-search__input {
  flex: 1;
  border: none;
  background: none;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  padding: 0;
  min-width: 0;
}
.m-sc-search__input::placeholder {
  color: var(--text-tertiary);
}
.m-sc-search__count {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ---- Main scrollable list ---- */
.m-sc-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Group bands (DRINKS / FOOD / OTHER — category mode count screen) ---- */
.m-sc-group-band { background: none; border: none; border-bottom: 1px solid var(--border); padding: 13px var(--gutter) 3px; margin-bottom: 2px; display: flex; align-items: center; }
.m-sc-group-band__label { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-tertiary); }
.m-sc-group-band--drinks { background: none; }
.m-sc-group-band--drinks .m-sc-group-band__label { color: var(--text-tertiary); }
.m-sc-group-band--food { background: none; }
.m-sc-group-band--food .m-sc-group-band__label { color: var(--text-tertiary); }
.m-sc-group-band--other { background: none; }
.m-sc-group-band--other .m-sc-group-band__label { color: var(--text-tertiary); }

/* ---- Freeflow group divider (count screen) ---- */
.m-sc-group-divider {
  padding: 8px var(--gutter);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.m-sc-group-divider__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ---- Parent category header (CatHeadStaff) ---- */
.m-sc-cat-head {
  background: none;
  border: none;
  border-left: 3px solid var(--border-strong);
  padding: 4px var(--gutter) 3px 9px;
  justify-content: space-between;
  align-items: center;
}
.m-sc-cat-head:not([hidden]) { display: flex; }
.m-sc-cat-head__label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
}
.m-sc-cat-head__progress {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.m-sc-cat-head__progress--complete {
  color: var(--success);
}

/* Subcategory label (SubCatHeadStaff) */
.m-sc-subcat {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  padding: 9px var(--gutter) 3px 22px;
}

/* ---- Count row (StaffCountRow) ---- */
.m-sc-row {
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.m-sc-row--counted {
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.m-sc-row--focus {
  background: color-mix(in srgb, var(--info) 8%, transparent);
  border-left-color: var(--stock-accent);
}
.m-sc-row__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.m-sc-row__info {
  min-width: 0;
  flex: 1;
}
.m-sc-row__name {
  font-size: var(--fs-sm); /* Wave 4: shared row type (13px weight-500 name) */
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sc-row__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--border-strong);
}
.m-sc-row--focus .m-sc-row__name {
  font-weight: 500;
}
.m-sc-row__loc {
  font-size: var(--fs-xs); /* Wave 4: shared meta type (11px mono, no forced uppercase) */
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.m-sc-row__total {
  font-size: var(--fs-base);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.m-sc-row__total--empty {
  color: var(--text-tertiary);
}
.m-sc-row__unit {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin-left: 4px;
}

/* Entry chips — only visible when row is focused */
.m-sc-row__chips {
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  display: none;
}
.m-sc-row--focus .m-sc-row__chips:not(:empty) { display: flex; }

/* Inline undo chip — visible when NOT focused, last entry only */
.m-sc-row__undo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  flex-shrink: 0;
  cursor: pointer;
  margin-left: auto;
  margin-right: 8px;
}
.m-sc-row__undo:empty { display: none; }
.m-sc-row--focus .m-sc-row__undo { display: none; }

/* Chip groups — entries grouped by location when focused */
.m-sc-row__chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.m-sc-row__chip-group + .m-sc-row__chip-group { margin-top: 3px; }
.m-sc-row__chip-group-label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: var(--font-mono);
  margin-right: 2px;
  flex-shrink: 0;
}
.m-sc-row__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.m-sc-row__chip-del {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: var(--fs-2xs);
  line-height: 1;
  min-width: 14px;
  min-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Category quick-jump strip ---- */
.m-sc-jump-strip {
  padding: 8px var(--gutter) 4px;
  gap: 6px;
  overflow-x: auto;
  background: var(--bg-base);
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.m-sc-jump-strip:not([hidden]) { display: flex; }
.m-sc-jump-strip::-webkit-scrollbar { display: none; }
.m-sc-jump-chip {
  flex-shrink: 0;
  padding: 5px 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
  min-height: 28px;
  box-sizing: border-box;
}
.m-sc-jump-chip__count {
  color: var(--text-tertiary);
  margin-left: 3px;
}

/* ---- Line count empty state ---- */
/* ---- Line count quick-filter pills ---- */
.m-sc-lc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px var(--gutter);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.m-sc-lc-pills__sep {
  width: 1px;
  flex-shrink: 0;
  background: var(--border);
  margin: 4px 2px;
}
.m-sc-lc-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px var(--gutter);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  min-height: 32px;
  white-space: nowrap;
}
.m-sc-lc-pill--group { font-weight: 600; }
.m-sc-lc-pill--done {
  opacity: 0.4;
  cursor: default;
}
.m-sc-lc-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.m-sc-lc-pill__dot--drinks { background: rgba(155,90,107,0.7); }
.m-sc-lc-pill__dot--food { background: color-mix(in srgb, var(--success) 70%, transparent); }
.m-sc-lc-pill__dot--other { background: color-mix(in srgb, var(--text-tertiary) 70%, transparent); }
.m-sc-lc-pill__count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.m-sc-line-empty {
  flex-direction: column;
  align-items: center;
  padding: 48px var(--gutter);
  gap: 12px;
}
.m-sc-line-empty:not([hidden]) { display: flex; }
.m-sc-line-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-sc-line-empty__title {
  font-size: var(--fs-lg);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 500;
}
.m-sc-line-empty__body {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
  text-align: center;
  max-width: 260px;
}

/* ---- Sticky keypad ---- */
/* Keypad scrim */
.m-sc-keypad-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 90;
}
.m-sc-keypad-scrim[hidden] { display: none; }

/* Pop-up keypad sheet */
.m-sc-keypad {
  /* position:FIXED (not absolute) — anchor to the visual viewport bottom, not the
     100vh .app-shell. On Android the URL bar makes 100vh taller than the visible
     area, so absolute+bottom:0 lands the lower half of the keypad below the fold
     ("half hidden" bug). Fixed tracks the visual viewport; max-height:dvh + scroll
     guards against short/landscape viewports. See DESIGN-LESSONS #86. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  padding: 0 var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  max-height: 92dvh;
  overflow-y: auto;
  transform: translateY(110%);
  transition: transform .18s ease;
}
.m-sc-keypad.m-sc-keypad--open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .m-sc-keypad { transition: none; } }
.m-sc-keypad[hidden] { display: none; }

/* Keypad chrome (grabber + done) */
.m-sc-keypad__chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 4px;
}
.m-sc-keypad__grabber {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
}
.m-sc-keypad__close {
  border: none;
  background: none;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Keypad focus bar */
.m-sc-keypad__focus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  gap: 8px;
}
.m-sc-keypad__focus-info {
  min-width: 0;
  flex: 1;
}
.m-sc-keypad__focus-label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.m-sc-keypad__focus-name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sc-keypad__focus-tally {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* Field toggle (Units / Cases) */
.m-sc-keypad__field-toggle {
  display: flex;
  gap: 0;
  align-items: center;
}
.m-sc-keypad__field-btn {
  padding: 5px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 32px;
  box-sizing: border-box;
}
.m-sc-keypad__field-btn:first-child { border-radius: 6px 0 0 6px; }
.m-sc-keypad__field-btn:last-child  { border-radius: 0 6px 6px 0; border-left: none; }
.m-sc-keypad__field-btn--active {
  background: var(--stock-accent);
  border-color: var(--stock-accent);
  color: var(--bg-base);
  font-weight: 600;
}
.m-sc-keypad__field-btn--disabled {
  opacity: 0.35;
  cursor: default;
}

/* Display box */
.m-sc-keypad__display {
  padding: 4px var(--gutter);
  min-width: 72px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  text-align: right;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}
.m-sc-keypad__display-value {
  font-size: var(--fs-xl);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-primary);
}
.m-sc-keypad__display-unit {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

/* Number grid */
.m-sc-keypad__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.m-sc-key {
  padding: 8px 0;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.m-sc-key:active { filter: brightness(0.9); }
.m-sc-key--num {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 400;
}
.m-sc-key--dim {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
}
.m-sc-key--ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.m-sc-key--primary {
  background: var(--stock-accent);
  border: 1px solid transparent;
  color: var(--bg-base);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.m-sc-key--tall {
  grid-row: span 2;
}

/* ---- Count footer ---- */
.m-sc-footer {
  flex-shrink: 0;
  padding: 8px var(--gutter);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}
.m-sc-footer__back {
  flex: 1;
  padding: 12px 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  cursor: pointer;
}
.m-sc-footer__review {
  flex: 1;
  padding: 12px 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  cursor: pointer;
}
.m-sc-footer #sc-finish-form {
  flex: 2;
  display: flex;
}
.m-sc-footer__submit {
  flex: 1;
  padding: 12px 0;
  background: var(--stock-accent);
  color: #111;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-base);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
}

/* ---- Review panel ---- */
.m-sc-review {
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.m-sc-review:not([hidden]) {
  display: flex;
}
.m-sc-review__header {
  flex-shrink: 0;
  padding: 12px var(--gutter);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m-sc-review__title {
  font-size: var(--fs-base);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-primary);
}
.m-sc-review__back {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 32px;
}
.m-sc-review__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px var(--gutter);
}

/* Review section label */
.m-sc-review__section-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

/* ── Auto-saved indicator ── */
.m-sc-autosaved {
  font-size: var(--fs-xs);
  color: var(--success);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 4px;
}
.m-sc-autosaved__dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: var(--success);
}

/* ── Location tile grid ── */
.m-sc-loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 0 16px;
}

/* ── Location tile ── */
.m-sc-loc-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--stock-accent);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
}
.m-sc-loc-tile__name {
  font-size: var(--fs-xs);
  color: var(--text-primary);
  font-weight: 500;
}
.m-sc-loc-tile__count {
  font-size: var(--fs-lg);
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 4px;
  line-height: 1;
}
.m-sc-loc-tile__total {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
}

/* ── Flagged item card (ReviewRow from JSX) ── */
.m-sc-flag-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 18px;
}
.m-sc-flagged {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: 8px;
  padding: 10px var(--gutter);
}
.m-sc-flagged--err { border-left-color: var(--error); }
.m-sc-flagged--warn { border-left-color: var(--warning); }
.m-sc-flagged--ok { border-left-color: transparent; }
.m-sc-flagged__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.m-sc-flagged__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.m-sc-flagged__variance {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  font-weight: 500;
}
.m-sc-flagged__variance--err { color: var(--error); }
.m-sc-flagged__variance--warn { color: var(--warning); }
.m-sc-flagged__variance--ok { color: var(--success); }
.m-sc-flagged__mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.m-sc-flagged__entries {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-sc-flagged__vs {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.m-sc-flagged__counted {
  color: var(--text-primary);
  font-weight: 500;
}
.m-sc-flagged__vs-sep {
  color: var(--text-tertiary);
  margin: 0 4px;
}
.m-sc-flagged__locs {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}
.m-sc-flagged__in {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}
.m-sc-flagged__loc-pill {
  padding: 2px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.m-sc-flag-expand {
  font-size: var(--fs-xs);
  color: var(--stock-accent);
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 4px 0;
}

/* ── Location chip strip (scrollable, hub-style) ── */
.m-sc-review__loc-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 8px;
}
.m-sc-review__loc-strip::-webkit-scrollbar { display: none; }
.m-sc-review__loc-chip {
  flex-shrink: 0;
  padding: 5px 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  cursor: pointer;
}
.m-sc-review__loc-chip--active {
  border-color: var(--stock-accent);
  color: var(--stock-accent);
}

/* ── Grouped product list card ── */
.m-sc-review__list-wrap {
  padding: 0 0 16px;
}
.m-sc-review__list-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

/* ── Category header in review list ── */
.m-sc-review__cat-head {
  padding: 10px var(--gutter);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-sc-review__cat-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-sc-review__cat-toggle {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  width: 10px;
}
.m-sc-review__cat-name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.m-sc-review__cat-count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-sc-review__cat-flag {
  padding: 0 4px;
  background: rgba(180, 80, 60, 0.12);
  border: 1px solid var(--error);
  border-radius: 3px;
  font-size: var(--fs-2xs);
  color: var(--error);
  font-family: var(--font-mono);
  line-height: 14px;
}

/* ── Subcategory header in review list ── */
.m-sc-review__subcat {
  padding: 6px var(--gutter) 4px 30px;
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  background: var(--bg-surface);
}

/* ── Review product row (FullListRow from JSX) ── */
.m-sc-review-row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 0.7fr;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 6px;
}
.m-sc-review-row:last-child { border-bottom: none; }
.m-sc-review-row__col1 {
  min-width: 0;
}
.m-sc-review-row__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sc-review-row__loc {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.m-sc-review-row__counts {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.m-sc-review-row__sep {
  color: var(--text-tertiary);
  margin: 0 3px;
}
.m-sc-review-row__expected {
  color: var(--text-tertiary);
}
.m-sc-review-row__unit {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ---- Mobile Stock Review / Manager Confirm ---- */

/* Scrollable body inside the drawer */
.m-sr-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* MgrHeader — kicker + title + badge */
.m-sr-header {
  height: 52px;
  flex-shrink: 0;
  padding: 0 var(--gutter);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-sr-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-sr-header__back {
  font-size: var(--fs-base);
  color: var(--text-tertiary);
  cursor: pointer;
  line-height: 1;
}
.m-sr-header__kicker {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.m-sr-header__title {
  font-size: var(--fs-base);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.1;
}
.m-sr-badge {
  padding: 3px 7px;
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  font-weight: 500;
}
.m-sr-badge--warn {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  color: var(--warning);
}
.m-sr-badge--ok {
  background: var(--success-bg);
  border: 1px solid var(--success);
  color: var(--success);
}

/* SubmissionMeta */
.m-sr-meta {
  padding: 12px var(--gutter);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.m-sr-meta__who {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.m-sr-meta__who strong {
  color: var(--text-primary);
  font-weight: 500;
}
.m-sr-meta__when {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 3px;
}
.m-sr-meta__approved {
  font-size: var(--fs-xs);
  color: var(--success);
  font-family: var(--font-mono);
  margin-top: 3px;
}
.m-sr-meta__pills {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.m-sr-meta__pill {
  padding: 3px 7px;
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}
.m-sr-meta__pill--clean {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.m-sr-meta__pill--flagged {
  background: var(--error-bg);
  border: 1px solid var(--error);
  color: var(--error);
  font-weight: 500;
}

/* ValueCard */
.m-sr-value-card {
  margin: 14px var(--gutter) 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px var(--gutter);
}
.m-sr-value-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.m-sr-value-card__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.m-sr-value-card__value {
  font-size: var(--fs-display);
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1;
}
.m-sr-value-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 4px;
}
.m-sr-value-card__var-label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.m-sr-value-card__var-value {
  font-size: var(--fs-xl);
  font-family: var(--font-mono);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1;
}
.m-sr-value-card__var-pct {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.m-sr-value-card__right {
  text-align: right;
}
.m-sr-value-card__bar {
  margin-top: 12px;
  position: relative;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
}
.m-sr-value-card__bar-mid {
  position: absolute;
  left: 50%;
  top: -2px;
  width: 1px;
  height: 8px;
  background: var(--border-strong);
}
.m-sr-value-card__bar-fill {
  position: absolute;
  top: 0;
  height: 4px;
  border-radius: 2px;
}
.m-sr-value-card__bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 4px;
}

/* Section label (reused for flagged / all products) */
.m-sr-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px var(--gutter) 8px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
}
.m-sr-section__right {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-mono);
  cursor: pointer;
}

/* FlagRowM — flagged item card with left border accent */
.m-sr-flag-row {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 10px var(--gutter);
}
.m-sr-flag-row--err { border-left-color: var(--error); }
.m-sr-flag-row--warn { border-left-color: var(--warning); }
.m-sr-flag-row__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.m-sr-flag-row__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.m-sr-flag-row__delta {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  font-weight: 500;
}
.m-sr-flag-row__pct {
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: var(--fs-xs);
  margin-left: 4px;
}
.m-sr-flag-row__mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.m-sr-flag-row__entries {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-sr-flag-row__counts {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.m-sr-flag-row__counted {
  color: var(--text-primary);
  font-weight: 500;
}
.m-sr-flag-row__vs {
  color: var(--text-tertiary);
  margin: 0 4px;
}
.m-sr-flag-row__locs {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}
.m-sr-flag-row__locs-label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}
.m-sr-flag-row__loc {
  padding: 2px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* Flagged expand/collapse toggle */
.m-sr-flag-expand {
  padding: 9px var(--gutter);
  text-align: center;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  cursor: pointer;
  letter-spacing: 0.3px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CategoryJumpStrip */
.m-sr-jump {
  padding: 8px var(--gutter) 4px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  background: var(--bg-base);
  -webkit-overflow-scrolling: touch;
}
.m-sr-jump::-webkit-scrollbar { display: none; }
.m-sr-jump__chip {
  flex-shrink: 0;
  padding: 5px 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
  min-height: 28px;
}
.m-sr-jump__chip--active {
  border-color: var(--stock-accent);
  color: var(--stock-accent);
}
.m-sr-jump__count {
  color: var(--text-tertiary);
  margin-left: 3px;
}

/* GroupedList — collapsible categories */
.m-sr-grouped {
  margin: 0 var(--gutter) 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.m-sr-cat-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px var(--gutter);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.m-sr-cat-header + .m-sr-cat-header { border-top: 1px solid var(--border); }
.m-sr-cat-header--open { border-bottom: 1px solid var(--border); }
.m-sr-cat-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-sr-cat-header__toggle {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  width: 10px;
}
.m-sr-cat-header__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.m-sr-cat-header__count {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-sr-cat-header__flag {
  padding: 1px 5px;
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: 3px;
  font-size: var(--fs-2xs);
  color: var(--error);
  font-family: var(--font-mono);
}
.m-sr-cat-header__value {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.m-sr-cat-body { }
.m-sr-cat-body--collapsed { display: none; }

/* Subcategory label inside grouped list */
.m-sr-subcat {
  padding: 6px var(--gutter) 4px 30px;
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  background: var(--bg-surface);
}

/* ListRowM — product row in grouped list */
.m-sr-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  padding: 9px var(--gutter);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-height: 44px;
}
.m-sr-row:last-child { border-bottom: none; }
.m-sr-row--dimmed { opacity: 0.45; }
.m-sr-row > div:first-child { min-width: 0; }
.m-sr-row__name {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-sr-row__loc {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.m-sr-row__counts {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.m-sr-row__counted { font-weight: 500; }
.m-sr-row__counted--ok { color: var(--text-secondary); }
.m-sr-row__counted--warn { color: var(--warning); font-weight: 500; }
.m-sr-row__counted--err { color: var(--error); font-weight: 500; }
.m-sr-row__sep {
  color: var(--text-tertiary);
  margin: 0 3px;
}
.m-sr-row__expected { color: var(--text-tertiary); }
.m-sr-row__value {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-primary);
}

/* Row expanded entries */
.m-sr-row-detail {
  padding: 6px var(--gutter) 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.m-sr-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.m-sr-entry__loc {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: var(--fs-2xs);
}
.m-sr-entry__qty { color: var(--text-primary); font-weight: 500; }
.m-sr-entry__empty {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  padding: 4px 0;
}
.m-sr-entry__edited {
  font-size: var(--fs-2xs);
  color: var(--warning);
  margin-left: 6px;
}
.m-sr-entry__actions {
  display: flex;
  gap: 8px;
  margin-left: 8px;
}
.m-sr-entry__btn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  min-height: 28px;
  border-radius: 4px;
}
.m-sr-entry__btn--edit {
  color: var(--stock-accent);
  border: 1px solid var(--stock-accent);
}
.m-sr-entry__btn--del {
  color: var(--error);
  border: 1px solid var(--error);
}

/* Inline edit form */
.m-sr-edit-form {
  margin-top: 6px;
  padding: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.m-sr-edit-form__row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.m-sr-edit-form__input {
  flex: 1;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--text-primary);
  min-height: 36px;
}
.m-sr-edit-form__reason {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  color: var(--text-primary);
  min-height: 36px;
  margin-bottom: 6px;
}
.m-sr-edit-form__btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.m-sr-edit-form__btn {
  padding: 6px var(--gutter);
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 36px;
  border: none;
}
.m-sr-edit-form__btn--save {
  background: var(--stock-accent);
  color: var(--bg-base);
  font-weight: 600;
}
.m-sr-edit-form__btn--cancel {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

/* Delete confirmation */
.m-sr-del-confirm {
  margin-top: 6px;
  padding: 8px;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 6px;
}
.m-sr-del-confirm__msg {
  font-size: var(--fs-xs);
  color: var(--error);
  margin-bottom: 6px;
}
.m-sr-del-confirm__reason {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  color: var(--text-primary);
  min-height: 36px;
  margin-bottom: 6px;
}
.m-sr-del-confirm__btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.m-sr-del-confirm__btn {
  padding: 6px var(--gutter);
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 36px;
  border: none;
}
.m-sr-del-confirm__btn--yes {
  background: var(--error);
  color: var(--bg-base);
  font-weight: 600;
}
.m-sr-del-confirm__btn--no {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

/* BottomBar — action bar at bottom of drawer */
.m-sr-bottom {
  flex-shrink: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}
.m-sr-bottom__note {
  padding: 8px var(--gutter) 4px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.m-sr-bottom__btns {
  padding: 4px var(--gutter) 8px;
  display: flex;
  gap: 8px;
}
.m-sr-bottom__btn {
  padding: 10px 0;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: center;
}
.m-sr-bottom__btn--primary {
  flex: 1.4;
  background: var(--stock-accent);
  color: var(--bg-base);
  border: none;
  font-weight: 600;
}
.m-sr-bottom__btn--secondary {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.m-sr-bottom__tertiary {
  padding: 2px var(--gutter) 10px;
  text-align: center;
}
.m-sr-bottom__tertiary-link {
  font-size: var(--fs-xs);
  color: var(--error);
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--error) 40%, transparent);
  background: none;
  border: none;
  padding: 4px 8px;
  min-height: 44px;
}

/* Confirmed bottom bar (simpler — Reopen + Back) */
.m-sr-bottom--confirmed .m-sr-bottom__btns {
  padding: 10px var(--gutter);
}
.m-sr-bottom--confirmed #sr-reopen-form {
  flex: 2;
  display: flex;
}
.m-sr-bottom__btn--reopen {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: var(--fs-xs);
}
.m-sr-bottom__btn--back {
  flex: 3;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--fs-sm);
}

/* Date editing inline */
.m-sr-date-edit {
  padding: 10px var(--gutter);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.m-sr-date-edit__label {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.m-sr-date-edit__input {
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-primary);
  min-height: 32px;
}
.m-sr-date-edit__save {
  background: none;
  border: 1px solid var(--stock-accent);
  color: var(--stock-accent);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  min-height: 32px;
}

/* Deleted state banner */
.m-sr-deleted-banner {
  margin: 14px var(--gutter) 0;
  padding: 12px var(--gutter);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 8px;
}
.m-sr-deleted-banner__title {
  font-size: var(--fs-sm);
  color: var(--error);
  font-weight: 500;
  margin-bottom: 6px;
}
.m-sr-deleted-banner__line {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  margin-top: 3px;
}

/* Confirm modal overlay */
.m-sr-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
}
.m-sr-modal[hidden] { display: none; }
.m-sr-modal__sheet {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  max-width: 320px;
  width: 90%;
}
.m-sr-modal__title {
  font-size: var(--fs-lg);
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.m-sr-modal__body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}
.m-sr-modal__btns {
  display: flex;
  gap: 8px;
}
.m-sr-modal__btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  cursor: pointer;
  min-height: 44px;
  text-align: center;
  border: none;
}
.m-sr-modal__btn--confirm {
  background: var(--stock-accent);
  color: var(--bg-base);
  font-weight: 600;
}
.m-sr-modal__btn--danger {
  background: var(--error);
  color: var(--bg-base);
  font-weight: 600;
}
.m-sr-modal__btn--cancel {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

/* Flagged items container */
.m-sr-flags {
  padding: 0 var(--gutter) 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================================
   Invoices — Mobile Hub: Shell · Dashboard · Navigator · Activity · Edges
   m-iv-* namespace. Owner block — prompts 02 & 03 depend on:
     .m-iv-swatch, .m-iv-empty*, .m-iv-edge-strip, .m-iv-err-*
   Category swatch colour is applied by invoice-hub.js from I_CAT_COLORS/data-cat-name.
   ============================================================ */

/* ---- Shell tab bar ---- */
.m-iv-tabbar { flex-shrink:0; position:sticky; top:0; z-index:10; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; padding:0 var(--gutter); }
.m-iv-tab { padding:11px var(--gutter) 10px; font-size:var(--fs-sm); font-weight:400; color:var(--text-tertiary); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.m-iv-tab--active { color:var(--text-primary); font-weight:500; border-bottom-color:var(--accent); }
.m-iv-tabbar__add { margin-left:auto; width:32px; height:32px; display:grid; place-items:center; background:var(--accent); color:var(--bg-elevated); border-radius:16px; font-size:var(--fs-xl); font-weight:300; line-height:1; cursor:pointer; align-self:center; flex-shrink:0; padding:0; border:none; }

/* ---- Category swatch ---- */
.m-iv-swatch { width:8px; height:8px; display:inline-block; flex-shrink:0; }
.m-iv-swatch--sm { width:6px; height:6px; }

/* ---- Section label ---- */
.m-iv-section-label { display:flex; justify-content:space-between; align-items:baseline; padding:0 var(--gutter); margin-bottom:8px; font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-iv-section-label__right { color:var(--text-tertiary); font-family:var(--font-mono); text-transform:none; letter-spacing:0; }

/* ---- Period picker (30d/60d/90d/Custom segmented) ---- */
.m-iv-period-picker { display:inline-flex; background:var(--bg-base); border:1px solid var(--border); border-radius:6px; padding:2px; font-family:var(--font-mono); }
.m-iv-period-picker__opt { padding:4px 10px; color:var(--text-tertiary); border-radius:4px; font-size:var(--fs-xs); letter-spacing:0.4px; cursor:pointer; }
.m-iv-period-picker__opt--active { background:var(--bg-elevated); color:var(--text-primary); }

/* ---- Status dot ---- */
.m-iv-status-dot { width:6px; height:6px; border-radius:3px; display:inline-block; flex-shrink:0; }
.m-iv-status-dot--draft { background:var(--warning); }
.m-iv-status-dot--confirmed { background:var(--success); }
.m-iv-status-dot--stock { background:var(--info); }
.m-iv-status-dot--deleted { background:var(--text-tertiary); }

/* ---- Mismatch hero alert ---- */
.m-iv-mismatch { margin:0 var(--gutter) 14px; padding:12px var(--gutter); background:var(--m-iv-error-tint); border:1px solid var(--m-iv-error-border); border-radius:10px; display:flex; align-items:flex-start; gap:10px; }
.m-iv-mismatch__icon { width:24px; height:24px; border-radius:6px; background:var(--m-iv-error-strong); color:var(--error); display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-family:var(--font-mono); flex-shrink:0; }
.m-iv-mismatch__body { flex:1; min-width:0; }
.m-iv-mismatch__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-mismatch__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }
.m-iv-mismatch__chevron { color:var(--error); font-size:var(--fs-lg); flex-shrink:0; }
.m-iv-mismatch--clickable { cursor:pointer; }

/* ============== DASHBOARD ============== */

.m-iv-dash-period { padding:12px var(--gutter) 8px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.m-iv-dash-period__name { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-iv-dash-period__range { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); margin-top:2px; }
.m-iv-dash-period__range-prior { color:var(--text-tertiary); }

.m-iv-spend { padding:0 var(--gutter) 14px; }
.m-iv-spend-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:14px var(--gutter); }
.m-iv-spend__header { display:flex; justify-content:space-between; align-items:baseline; }
.m-iv-spend__label { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; }
.m-iv-spend__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-spend__value-row { display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.m-iv-spend__ex { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-spend__value { font-size:var(--fs-display-lg); font-family:var(--font-heading); font-weight:500; color:var(--text-primary); letter-spacing:-0.4px; line-height:1; }
.m-iv-spend__delta { font-size:var(--fs-sm); font-family:var(--font-mono); }
.m-iv-spend__delta--up { color:var(--warning); }
.m-iv-spend__delta--down { color:var(--success); }
.m-iv-spend__bars { margin-top:14px; }
.m-iv-spend__bar-row { display:flex; align-items:center; gap:10px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-bottom:4px; }
.m-iv-spend__bar-row--prior { margin:8px 0 4px; }
.m-iv-spend__bar-row span:first-child { flex:1; }
.m-iv-spend__bar { height:6px; border-radius:3px; }
.m-iv-spend__bar--current { background:var(--accent); opacity:0.85; width:100%; }
.m-iv-spend__bar--prior { background:var(--border-strong); }

/* ── OCR Upload ── */
.m-iv-ocr-upload { flex:1; padding:14px var(--gutter); display:flex; flex-direction:column; gap:14px; }
.m-iv-dropzone { flex:1; min-height:280px; border:2px dashed var(--border-strong); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px var(--gutter); background:var(--m-iv-ocr-dropzone-bg); transition:border-color 0.15s; }
.m-iv-dropzone--active { border-color:var(--accent); }
.m-iv-dropzone--error { border-style:dashed; border-color:var(--error); }
.m-iv-dropzone__icon { width:56px; height:56px; border-radius:12px; background:var(--accent-bg); border:1px solid var(--m-iv-ocr-icon-border); display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); color:var(--accent); font-family:var(--font-mono); }
.m-iv-dropzone__text { text-align:center; }
.m-iv-dropzone__title { font-size:var(--fs-base); color:var(--text-primary); font-weight:500; }
.m-iv-dropzone__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:4px; }
.m-iv-dropzone__actions { display:flex; gap:8px; width:100%; max-width:280px; }
.m-iv-dropzone__btn { flex:1; padding:10px var(--gutter); border:none; border-radius:6px; font-size:var(--fs-sm); font-weight:600; cursor:pointer; font-family:var(--font-body); min-height:36px; white-space:nowrap; }
.m-iv-dropzone__btn--primary { background:var(--accent); color:#111; }
.m-iv-dropzone__btn--ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border-strong); font-weight:500; }
.m-iv-ocr-help { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:12px var(--gutter); }
.m-iv-ocr-help__inner { display:flex; align-items:flex-start; gap:10px; }
.m-iv-ocr-help__star { font-size:var(--fs-base); color:var(--accent); margin-top:1px; flex-shrink:0; }
.m-iv-ocr-help__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-ocr-help__body { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:4px; line-height:1.5; }
.m-iv-ocr-manual { text-align:center; font-size:var(--fs-xs); color:var(--text-tertiary); }
.m-iv-ocr-manual a { color:var(--text-tertiary); text-decoration:none; border-bottom:1px dashed var(--border-strong); }

/* OCR — selected file preview */
.m-iv-ocr-photo { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:12px var(--gutter); display:none; align-items:center; gap:12px; }
.m-iv-ocr-photo--visible { display:flex; }
.m-iv-ocr-photo__thumb { width:52px; height:68px; background:var(--m-iv-ocr-preview-bg); border:1px solid var(--border); border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xl); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-ocr-photo__info { flex:1; min-width:0; }
.m-iv-ocr-photo__name { font-size:var(--fs-sm); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-ocr-photo__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }
.m-iv-ocr-photo__change { font-size:var(--fs-xs); color:var(--accent); cursor:pointer; flex-shrink:0; background:none; border:none; padding:4px 8px; min-height:28px; display:inline-flex; align-items:center; font-family:var(--font-body); }

/* OCR — photo warning */
.m-iv-ocr-warn { background:var(--m-iv-ocr-photo-warn-bg); border:1px solid var(--m-iv-ocr-photo-warn-border); border-radius:10px; padding:12px var(--gutter); display:none; }
.m-iv-ocr-warn--visible { display:block; }
.m-iv-ocr-warn__inner { display:flex; align-items:flex-start; gap:10px; }
.m-iv-ocr-warn__badge { width:22px; height:22px; border-radius:4px; flex-shrink:0; background:var(--m-iv-ocr-photo-warn-icon-bg); color:var(--warning); display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-family:var(--font-mono); }
.m-iv-ocr-warn__title { font-size:var(--fs-sm); color:var(--warning); font-weight:500; }
.m-iv-ocr-warn__body { font-size:var(--fs-xs); color:var(--text-secondary); margin-top:6px; line-height:1.5; }
.m-iv-ocr-warn__body b { color:var(--text-primary); font-weight:500; }
.m-iv-ocr-warn__tips { margin-top:10px; padding:8px 10px; background:var(--bg-surface); border-radius:6px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); line-height:1.6; }
.m-iv-ocr-warn__footer { display:flex; gap:8px; margin-top:12px; }

/* OCR — error state */
.m-iv-ocr-error { background:var(--bg-surface); border:2px dashed var(--m-iv-error-border-40); border-radius:8px; padding:14px var(--gutter); text-align:center; display:none; }
.m-iv-ocr-error--visible { display:block; }
.m-iv-ocr-error__icon { width:38px; height:38px; border-radius:19px; margin:0 auto 10px; background:var(--m-iv-error-tint); color:var(--error); display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); font-family:var(--font-mono); font-weight:700; }
.m-iv-ocr-error__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-ocr-error__detail { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:6px; }
.m-iv-ocr-error__help { margin-top:14px; font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.55; text-align:left; }
.m-iv-ocr-error__help ul { margin:10px 0 0; padding-left:var(--gutter); line-height:1.7; }
.m-iv-ocr-error__actions { margin-top:18px; display:grid; grid-template-columns:1fr 1.4fr; gap:8px; }

/* OCR — processing / in-flight spinner */
.m-iv-ocr-proc { display:none; flex:1; flex-direction:column; align-items:center; justify-content:flex-start; padding:0 32px; padding-top:25vh; gap:18px; }
.m-iv-ocr-proc--visible { display:flex; }
.m-iv-ocr-spinner { position:relative; width:100px; height:100px; }
.m-iv-ocr-spinner__ring { position:absolute; inset:0; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:m-iv-ocr-spin 1.4s linear infinite; }
.m-iv-ocr-spinner__label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); color:var(--accent); font-family:var(--font-mono); }
.m-iv-ocr-proc__text { text-align:center; }
.m-iv-ocr-proc__title { font-size:var(--fs-base); color:var(--text-primary); }
.m-iv-ocr-proc__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:6px; line-height:1.7; }
@keyframes m-iv-ocr-spin { to { transform:rotate(360deg); } }
.m-iv-ocr-warn__submit { flex:2; }
.m-iv-ocr-upload__submit-full { width:100%; }

/* ---- OCR Inbox ---- */
.m-iv-inbox { flex:1; display:flex; flex-direction:column; }
.m-iv-inbox-header { padding:14px var(--gutter) 6px; }
.m-iv-inbox-header__title { font-size:var(--fs-xl); font-weight:500; font-family:var(--font-heading); color:var(--text-primary); }
.m-iv-inbox-header__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-iv-inbox-chips { padding:10px var(--gutter); display:flex; gap:6px; background:var(--bg-surface); border-bottom:1px solid var(--border); }
.m-iv-inbox-chip { flex-shrink:0; padding:4px 9px; border-radius:14px; font-size:var(--fs-xs); font-family:var(--font-mono); display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-secondary); cursor:pointer; }
.m-iv-inbox-chip--active { background:var(--text-primary); color:var(--bg-base); border-color:transparent; }
.m-iv-inbox-chip__count { font-weight:600; }
.m-iv-inbox-section-label { padding:12px var(--gutter) 0; }
.m-iv-inbox-card { margin:0 var(--gutter) 8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-iv-inbox-row { padding:12px var(--gutter); display:flex; gap:10px; align-items:flex-start; }
.m-iv-inbox-row--clickable { cursor:pointer; text-decoration:none; color:inherit; }
.m-iv-inbox-row + .m-iv-inbox-row { border-top:1px solid var(--border); }
.m-iv-inbox-row__badge { width:32px; height:40px; flex-shrink:0; border-radius:4px; border:1px solid rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xs); font-family:var(--font-mono); font-weight:600; }
.m-iv-inbox-row__badge--pdf { background:linear-gradient(180deg, var(--pdf-chip-grad-start) 0%, var(--pdf-chip-grad-end) 100%); color:#5a4a32; }
.m-iv-inbox-row__badge--img { background:linear-gradient(135deg, #2d2620 0%, #1d1916 100%); color:var(--text-tertiary); }
.m-iv-inbox-row__badge--file { background:var(--bg-elevated); color:var(--text-tertiary); }
.m-iv-inbox-row__body { flex:1; min-width:0; }
.m-iv-inbox-row__r1 { display:flex; align-items:center; gap:6px; }
.m-iv-inbox-row__name { font-size:var(--fs-sm); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.m-iv-inbox-row__status { flex-shrink:0; padding:1px 6px; border-radius:3px; font-size:var(--fs-2xs); font-family:var(--font-mono); font-weight:500; }
.m-iv-inbox-row__status--pending { background:color-mix(in srgb, var(--warning) 12%, transparent); color:var(--warning); }
.m-iv-inbox-row__status--review { background:color-mix(in srgb, var(--success) 12%, transparent); color:var(--success); }
.m-iv-inbox-row__status--ocr { background:color-mix(in srgb, var(--warning) 12%, transparent); color:var(--warning); }
.m-iv-inbox-row__status--failed { background:color-mix(in srgb, var(--error) 12%, transparent); color:var(--error); }
.m-iv-inbox-row__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }
.m-iv-inbox-row__stats { margin-top:5px; display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--text-secondary); }
.m-iv-inbox-row__stat--warn { color:var(--warning); }
.m-iv-inbox-row__stat--err { color:var(--error); }
.m-iv-inbox-row__stat--ok { color:var(--success); }
.m-iv-inbox-row__error { margin-top:5px; padding:5px 8px; background:color-mix(in srgb, var(--error) 8%, transparent); border-radius:4px; font-size:var(--fs-xs); color:var(--error); font-family:var(--font-mono); }
.m-iv-inbox-row__actions { margin-top:8px; display:flex; gap:8px; }
.m-iv-inbox-row__action { display:inline-flex; align-items:center; padding:5px 10px; border-radius:5px; font-size:var(--fs-xs); font-family:var(--font-mono); background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-secondary); text-decoration:none; cursor:pointer; min-height:28px; }
.m-iv-inbox-row__action--danger { color:var(--error); border-color:color-mix(in srgb, var(--error) 30%, transparent); background:color-mix(in srgb, var(--error) 6%, transparent); }
.m-iv-inbox-row__action-form { display:inline; }
.m-iv-inbox-row__chevron { flex-shrink:0; color:var(--text-tertiary); font-size:var(--fs-lg); align-self:center; }
.m-iv-inbox-upload { margin:16px var(--gutter) 24px; padding:14px var(--gutter); border-radius:10px; border:1.5px dashed var(--border-strong); display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; color:var(--text-secondary); font-size:var(--fs-sm); font-family:var(--font-mono); text-decoration:none; }
.m-iv-add-sheet__inbox-link { display:block; margin:10px var(--gutter) 0; padding:10px var(--gutter); background:var(--bg-elevated); border:1px solid var(--border); border-radius:8px; font-size:var(--fs-sm); font-family:var(--font-mono); color:var(--accent); text-decoration:none; text-align:center; }

/* OCR — review page */
.m-iv-ocr-source { display:flex; align-items:center; gap:10px; padding:8px var(--gutter); background:var(--bg-base); border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto; }
.m-iv-ocr-source__thumb { width:32px; height:42px; border-radius:3px; border:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xs); font-weight:600; font-family:var(--font-mono); color:var(--text-tertiary); background:var(--bg-elevated); }
.m-iv-ocr-source__info { flex:1; min-width:0; }
.m-iv-ocr-source__name { font-size:var(--fs-sm); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-ocr-source__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-iv-ocr-source__view { font-size:var(--fs-xs); color:var(--accent); background:none; border:none; padding:4px 8px; min-height:28px; display:inline-flex; align-items:center; font-family:var(--font-body); cursor:pointer; flex-shrink:0; text-decoration:none; }


.m-iv-ocr-summary { display:flex; gap:6px; padding:6px var(--gutter) 8px; overflow-x:auto; flex-shrink:0; }
.m-iv-sum-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:4px; white-space:nowrap; }
.m-iv-sum-chip__count { font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:600; }
.m-iv-sum-chip__label { font-size:var(--fs-xs); letter-spacing:0.3px; }
.m-iv-sum-chip--linked { background:var(--m-iv-pill-linked); color:var(--success-text); }
.m-iv-sum-chip--possible { background:var(--m-iv-pill-possible); color:var(--warning-text); }
.m-iv-sum-chip--unlinked { background:var(--m-iv-pill-unlinked); color:var(--error-text); }
.m-iv-sum-chip--nonprod { background:var(--m-iv-pill-nonprod); color:var(--text-secondary); }
.m-iv-sum-chip--attn { box-shadow:0 0 0 2px var(--m-iv-error-14); }

.m-iv-match-pill--possible { background:var(--m-iv-pill-possible); border:1px solid var(--warning); color:var(--warning-text); }
.m-iv-match-pill--possible .m-iv-match-pill__dot { background:var(--warning); }

.m-iv-line-card--ocr { cursor:default; }
.m-iv-line-card--ocr.m-iv-line-card--possible { border-color:var(--warning); }
.lg-band .m-iv-line-card--ocr { cursor:default; }

.m-iv-conf-dot { width:18px; height:18px; border-radius:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:600; background:transparent; }
.m-iv-conf-dot--high { border:1px solid var(--success); color:var(--success); }
.m-iv-conf-dot--med { border:1px solid var(--warning); color:var(--warning); }
.m-iv-conf-dot--low { border:1px solid var(--error); color:var(--error); }

.m-iv-ocr-warnings { padding:0 var(--gutter); display:flex; flex-direction:column; gap:8px; }
.m-iv-ocr-warn-banner { padding:10px var(--gutter); border-radius:8px; font-size:var(--fs-sm); line-height:1.5; }
.m-iv-ocr-warn-banner--dup { background:var(--warning-bg); border:1px solid var(--warning-border); color:var(--warning); }
.m-iv-ocr-warn-banner--quality { background:var(--warning-bg); border:1px solid var(--warning-border); color:var(--warning); }
.m-iv-ocr-warn-banner--mismatch { background:var(--m-iv-recon-off-bg); border:1px solid var(--m-iv-recon-off-border); color:var(--error); }
.m-iv-ocr-warn-banner--mismatch b { font-weight:600; }


/* ---- Category card ---- */
.m-iv-cat-list { padding:0 var(--gutter); display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.m-iv-cat-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-iv-cat-card__head { padding:12px var(--gutter); cursor:pointer; }
.m-iv-cat-card__top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.m-iv-cat-card__id { display:flex; align-items:center; gap:8px; min-width:0; }
.m-iv-cat-card__name { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); }
.m-iv-cat-card__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-cat-card__amount { font-size:var(--fs-base); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); }
.m-iv-cat-card__bar { height:4px; border-radius:2px; margin-top:8px; background:var(--bg-base); overflow:hidden; }
.m-iv-cat-card__bar-fill { height:100%; opacity:0.85; }
.m-iv-cat-card__caption { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:6px; display:flex; justify-content:space-between; gap:8px; }
.m-iv-cat-card__delta--up { color:var(--warning); }
.m-iv-cat-card__delta--down { color:var(--success); }
.m-iv-cat-card__delta--flat { color:var(--text-tertiary); }
.m-iv-cat-card__invoices { border-top:1px solid var(--border); background:var(--bg-base); }
.m-iv-cat-inv-row { padding:10px var(--gutter); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.m-iv-cat-inv-row:last-child { border-bottom:none; }
.m-iv-cat-inv-row__supplier { font-size:var(--fs-sm); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-cat-inv-row__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-iv-cat-inv-row__total { font-size:var(--fs-sm); font-family:var(--font-mono); color:var(--text-secondary); flex-shrink:0; }
.m-iv-cat-inv-row__total-ex { font-size:var(--fs-xs); color:var(--text-tertiary); margin-left:6px; }
.m-iv-cat-card__showall { padding:10px var(--gutter); text-align:center; font-size:var(--fs-xs); color:var(--accent); font-weight:500; cursor:pointer; border-top:1px solid var(--border); }
.m-iv-cat-card__showless { padding:10px var(--gutter); text-align:center; font-size:var(--fs-xs); color:var(--text-tertiary); cursor:pointer; border-top:1px solid var(--border); }

/* ---- Pipeline card ---- */
.m-iv-pipeline-card { margin:0 var(--gutter) 18px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:12px var(--gutter); display:block; }
.m-iv-pipeline-card--clickable { cursor:pointer; text-decoration:none; color:inherit; }
.m-iv-pipeline__bar { display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--bg-base); }
.m-iv-pipeline__seg { border-right:1px solid var(--bg-surface); }
.m-iv-pipeline__seg:last-child { border-right:none; }
.m-iv-pipeline__seg--uploaded { background:var(--text-tertiary); }
.m-iv-pipeline__seg--ocr { background:var(--info); }
.m-iv-pipeline__seg--manual { background:var(--accent); }
.m-iv-pipeline__seg--review { background:var(--warning); }
.m-iv-pipeline__seg--linked { background:var(--success); }
.m-iv-pipeline__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:12px; }
.m-iv-pipeline__stat-count { font-size:var(--fs-base); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); }
.m-iv-pipeline__stat-label { font-size:var(--fs-xs); color:var(--text-secondary); margin-top:2px; }
.m-iv-pipeline__stat-hint { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; line-height:1.2; }
.m-iv-pipeline__alerts { margin-top:14px; }
.m-iv-pipeline__alerts-head { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; display:flex; justify-content:space-between; }
.m-iv-pipeline__alerts-head span:last-child { font-family:var(--font-mono); text-transform:none; letter-spacing:0; }
.m-iv-pipeline__showall { padding-top:10px; border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--accent); font-weight:500; cursor:pointer; }

/* ---- Pipeline alert row ---- */
.m-iv-alert-row { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--border); }
.m-iv-alert-row__icon { width:18px; height:18px; border-radius:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:600; margin-top:1px; }
.m-iv-alert-row--error .m-iv-alert-row__icon { background:var(--m-iv-error-12); color:var(--error); }
.m-iv-alert-row--warn .m-iv-alert-row__icon { background:var(--m-iv-warn-14); color:var(--warning); }
.m-iv-alert-row--info .m-iv-alert-row__icon { background:var(--m-iv-info-tint); color:var(--info); }
.m-iv-alert-row__body { flex:1; min-width:0; }
.m-iv-alert-row__top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.m-iv-alert-row__label { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-alert-row__stage { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; }
.m-iv-alert-row__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; line-height:1.35; }
.m-iv-alert-row__action { font-size:var(--fs-xs); margin-top:4px; font-weight:500; cursor:pointer; }
.m-iv-alert-row--error .m-iv-alert-row__action { color:var(--error); }
.m-iv-alert-row--warn .m-iv-alert-row__action { color:var(--warning); }
.m-iv-alert-row--info .m-iv-alert-row__action { color:var(--info); }

/* ---- Cost alert ---- */
.m-iv-cost-list { padding:0 var(--gutter); display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.m-iv-cost-alert { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:10px var(--gutter); display:flex; align-items:center; gap:10px; }
.m-iv-cost-alert__left { flex:1; min-width:0; }
.m-iv-cost-alert__product { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-cost-alert__supplier { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-iv-cost-alert__wac { color:var(--text-secondary); }
.m-iv-cost-alert__right { flex-shrink:0; text-align:right; }
.m-iv-cost-alert__prices { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); white-space:nowrap; }
.m-iv-cost-alert__delta { font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:600; margin-top:1px; }
.m-iv-cost-alert__delta--up { color:var(--warning); }
.m-iv-cost-alert__delta--down { color:var(--success); }
.m-iv-cost-alert__chevron { color:var(--text-tertiary); font-size:var(--fs-base); flex-shrink:0; }

/* ---- Needs you ---- */
.m-iv-needs-list { padding:0 var(--gutter); display:flex; flex-direction:column; gap:6px; }
.m-iv-needs-row { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:11px var(--gutter); display:flex; align-items:center; gap:12px; }
.m-iv-needs-row__count { font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:600; color:var(--text-primary); min-width:22px; text-align:center; }
.m-iv-needs-row__body { flex:1; min-width:0; }
.m-iv-needs-row__label { font-size:var(--fs-sm); color:var(--text-primary); }
.m-iv-needs-row__hint { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-iv-needs-row__chevron { color:var(--text-tertiary); font-size:var(--fs-base); }
.m-iv-needs-row--clickable { cursor:pointer; text-decoration:none; color:inherit; }

/* ============== NAVIGATOR ============== */

/* ---- Session banners ---- */
.m-iv-banner { flex-shrink:0; display:flex; align-items:center; gap:10px; padding:10px var(--gutter); border-top:1px solid; }
.m-iv-banner--error { background:var(--m-iv-error-tint); border-top-color:var(--m-iv-error-border-30); }
.m-iv-banner--warn { background:var(--m-iv-warn-tint); border-top-color:var(--m-iv-warn-border); }
.m-iv-banner__icon { width:18px; height:18px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:600; flex-shrink:0; }
.m-iv-banner--error .m-iv-banner__icon { background:var(--m-iv-error-strong); color:var(--error); }
.m-iv-banner--warn .m-iv-banner__icon { background:var(--m-iv-warn-20); color:var(--warning); }
.m-iv-banner__body { flex:1; min-width:0; font-size:var(--fs-xs); color:var(--text-primary); }
.m-iv-banner__body b { font-weight:500; }
.m-iv-banner__sub { color:var(--text-tertiary); font-family:var(--font-mono); margin-left:6px; }
.m-iv-banner__open { font-size:var(--fs-sm); font-weight:500; cursor:pointer; flex-shrink:0; }
.m-iv-banner--error .m-iv-banner__open { color:var(--error); }
.m-iv-banner--warn .m-iv-banner__open { color:var(--warning); }
.m-iv-banner__dismiss { margin-left:2px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); font-size:var(--fs-base); cursor:pointer; user-select:none; flex-shrink:0; }
.m-iv-banner-pill { flex-shrink:0; padding:6px var(--gutter); background:var(--bg-surface); border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.m-iv-banner-pill__dot { width:6px; height:6px; border-radius:3px; background:var(--warning); display:inline-block; }
.m-iv-banner-pill__label { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); flex:1; }
.m-iv-banner-pill__show { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); cursor:pointer; }

/* ---- Breadcrumb ---- */
.m-iv-crumb { display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:10px var(--gutter) 8px; font-size:var(--fs-sm); color:var(--text-tertiary); }
.m-iv-crumb__item { color:var(--text-secondary); cursor:pointer; }
.m-iv-crumb__item--active { color:var(--text-primary); font-weight:500; cursor:default; }
.m-iv-crumb__sep { color:var(--text-tertiary); }

/* ---- Navigator search ---- */
.m-iv-nav-search { padding:4px var(--gutter) 10px; }
.m-iv-nav-search__box { display:flex; align-items:center; gap:8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:8px var(--gutter); }
.m-iv-nav-search__box--focused { background:var(--bg-elevated); border-color:var(--border-strong); }
/* a11y wave 3 (audit R6): the flush inner input keeps outline:none, so surface a
   clear ACCENT focus indicator on the wrapping box (matches .lc-search /
   .m-iv-addline-search) — the grey --focused shift alone is not a focus ring. */
.m-iv-nav-search__box:focus-within { border-color:var(--accent); }
.m-iv-nav-search__icon { color:var(--text-tertiary); font-size:var(--fs-sm); }
.m-iv-nav-search__input { flex:1; background:transparent; border:none; outline:none; color:var(--text-primary); font-size:var(--fs-sm); font-family:var(--font-body); }
.m-iv-nav-search__input::placeholder { color:var(--text-tertiary); }
.m-iv-nav-search__hint { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }

/* ---- Free-date range ---- */
.m-iv-daterange { padding:0 var(--gutter) 12px; }
.m-iv-daterange__pill { display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:8px var(--gutter); cursor:pointer; }
.m-iv-daterange__label { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-daterange__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-iv-daterange__sub span { opacity:0.7; }
.m-iv-daterange__caret { color:var(--text-tertiary); font-size:var(--fs-sm); }
.m-iv-daterange__pop { margin-top:8px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:10px; padding:12px var(--gutter); }
.m-iv-daterange__pop-label { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; margin-bottom:8px; }
.m-iv-daterange__presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.m-iv-daterange__preset { padding:4px 10px; border-radius:14px; font-size:var(--fs-xs); background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); font-family:var(--font-mono); cursor:pointer; }
.m-iv-daterange__preset--active { background:var(--accent); color:#fff; }
.m-iv-daterange__fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.m-iv-daterange__field-label { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-bottom:4px; }
.m-iv-daterange__field { padding:8px 10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; font-size:var(--fs-sm); font-family:var(--font-mono); color:var(--text-primary); }

/* ---- Period chips ---- */
.m-iv-period-chips { display:flex; gap:6px; padding:0 var(--gutter) 10px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.m-iv-period-chip { flex-shrink:0; padding:5px 11px; border-radius:var(--radius-pill); font-size:var(--fs-xs); background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); font-family:var(--font-mono); cursor:pointer; letter-spacing:0.2px; }
.m-iv-period-chip--active { background:var(--text-primary); color:var(--bg-base); border-color:var(--text-primary); }

/* ---- Group-by toggle ---- */
.m-iv-nav-toolbar { display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter) 12px; }
.m-iv-group-toggle { display:inline-flex; width:fit-content; background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; padding:2px; }
.m-iv-select-toggle { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); cursor:pointer; padding:5px 10px; border:1px solid var(--border); border-radius:5px; background:var(--bg-surface); }
.m-iv-select-toggle--active { background:var(--accent); color:var(--bg-base); border-color:var(--accent); }
.m-iv-group-toggle__opt { padding:5px 10px; font-size:var(--fs-xs); color:var(--text-tertiary); border-radius:5px; font-family:var(--font-mono); cursor:pointer; }
.m-iv-group-toggle__opt--active { background:var(--bg-elevated); color:var(--text-primary); }

/* ---- Period summary row ---- */
.m-iv-period-summary { display:flex; align-items:center; justify-content:space-between; padding:2px var(--gutter) 10px; gap:10px; }
.m-iv-period-summary__dates { font-size:var(--fs-xs); font-family:var(--font-mono); letter-spacing:0.2px; min-width:0; }
.m-iv-period-summary__dates b { color:var(--text-primary); font-weight:500; }
.m-iv-period-summary__dates span { color:var(--text-tertiary); margin-left:8px; }
.m-iv-period-summary__add { flex-shrink:0; padding:6px var(--gutter); border-radius:14px; background:var(--text-primary); color:var(--bg-base); font-size:var(--fs-sm); font-weight:500; cursor:pointer; white-space:nowrap; }

/* ---- Filter strip ---- */
.m-iv-filter-strip { padding:0 var(--gutter) 10px; overflow:hidden; }
.m-iv-filter-strip__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.m-iv-filter-strip__by { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
/* (.m-iv-filter-pivot* removed — Cat/Supp pivot retired; chips derive from group-by. B2, lesson #79.) */
.m-iv-filter-chips { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---- Accordion group ---- */
.m-iv-accordion { margin:0 var(--gutter) 8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-iv-accordion__head { display:flex; align-items:center; gap:10px; padding:13px var(--gutter); cursor:pointer; }
.m-iv-accordion__body { flex:1; min-width:0; }
.m-iv-accordion__top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.m-iv-accordion__label { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-accordion__total { font-size:var(--fs-base); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); letter-spacing:-0.2px; flex-shrink:0; }
.m-iv-accordion__bar { height:4px; background:var(--bg-base); border-radius:2px; margin-top:8px; overflow:hidden; }
.m-iv-accordion__bar-fill { height:100%; opacity:0.85; }
.m-iv-accordion__meta { display:flex; justify-content:space-between; margin-top:6px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.2px; }
.m-iv-accordion__chevron { color:var(--text-tertiary); font-size:var(--fs-base); margin-left:4px; flex-shrink:0; transition:transform 120ms ease; }
.m-iv-accordion__chevron--expanded { transform:rotate(90deg); }
.m-iv-accordion__items { border-top:1px solid var(--border); background:var(--bg-base); }

/* ---- Date group card ---- */
.m-iv-date-group { margin:0 var(--gutter) 8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-iv-date-group__head { display:flex; align-items:center; gap:8px; padding:10px var(--gutter) 8px; cursor:pointer; }
.m-iv-date-group__title { font-size:var(--fs-xs); font-weight:500; color:var(--text-primary); text-transform:uppercase; letter-spacing:0.6px; }
.m-iv-date-group__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-date-group__total { font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); letter-spacing:-0.2px; margin-left:auto; }

/* ---- Sticky group header ---- */
.m-iv-group-header { display:flex; align-items:center; gap:8px; padding:10px var(--gutter) 6px; background:var(--bg-base); border-top:1px solid var(--border); position:sticky; top:0; z-index:1; }
.m-iv-group-header__title { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); text-transform:uppercase; letter-spacing:0.6px; }
.m-iv-group-header__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-group-header__total { font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); margin-left:auto; }

/* ---- Compact invoice row ---- */
.m-iv-nav-row { display:flex; align-items:center; gap:12px; padding:9px var(--gutter); border-top:1px solid var(--border); cursor:pointer; min-height:44px; background:transparent; }
/* Selected row = the shared select style: accent inset ring + tint, exactly
   like .m-iv-line-card--selected (Charles 2026-07-03: one select look). */
.m-iv-nav-row--selected { box-shadow:inset 0 0 0 1.5px var(--accent); border-radius:8px; background:color-mix(in srgb, var(--accent) 8%, transparent); }
/* Viewing row (desktop detail panel open, invoice-peek.js) = a subtle tint,
   no ring — the ring is selection-exclusive (Charles 2026-07-16 ruling).
   :not() makes selection win by construction when both classes land on one
   row, with no cascade-order dependency (DESIGN-LESSONS #95). */
.m-iv-nav-row--viewing:not(.m-iv-nav-row--selected) { border-radius:8px; background:color-mix(in srgb, var(--accent) 5%, transparent); }
.m-iv-nav-row-indent { padding-left:var(--gutter); }
/* Select mode: the whole row toggles at ALL widths and selection reads as
   the accent ring — the 20px circle was redundant chrome ("big fat circle",
   Charles 2026-07-03) and its >=1280 "circle = toggle target" premise was
   never implemented (Codex r7-1; Charles 2026-07-04: option (a), one select
   look everywhere; row markup no longer emits .m-iv-nav-row__check). */
.m-iv-nav-row__body { flex:1; min-width:0; }
.m-iv-nav-row__top { display:flex; align-items:baseline; gap:6px; }
.m-iv-nav-row__supplier { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-nav-row__flag { padding:1px 5px; border-radius:3px; font-size:var(--fs-2xs); background:var(--m-iv-error-15); color:var(--error); font-family:var(--font-mono); font-weight:600; letter-spacing:0.4px; }
.m-iv-nav-row__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-iv-pdf-pill { display:inline-block; padding:0 4px; border-radius:3px; font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.3px; background:var(--accent-bg); color:var(--accent); vertical-align:middle; margin-left:2px; }
/* B4: the mobile pill as a REAL tap target. VISUALLY it stays the tiny
   base pill ("the pdf tags are still gigantic", Charles 2026-07-03) — the
   >=28px hit area comes from an invisible ::after overlay instead of
   visible padding (house floor: tappable area may exceed visual). */
.m-iv-pdf-pill--tap { border:none; font-family:inherit; line-height:1.4; cursor:pointer; padding:0 4px; margin-left:2px; position:relative; }
.m-iv-pdf-pill--tap::after { content:""; position:absolute; inset:-8px -7px; }
.m-iv-pdf-pill--tap:hover { text-decoration:underline; }
/* B4: desktop navigator row PDF quick action — hover/focus-revealed, sized
   to the row STATUS pills (Charles 2026-07-03: the 28px bordered button
   dwarfed the Draft/Stock-done pills; desktop is exempt from the touch
   floor). pointer-events gating: while invisible it must not swallow a
   row tap. */
/* Always visible (Charles 2026-07-05: was hover-only opacity:0 — too easy to miss). */
.m-iv-nav-row__pdf { flex-shrink:0; padding:2px 7px; border-radius:3px; border:none; background:var(--accent-bg); color:var(--accent); font-size:var(--fs-2xs); font-family:var(--font-mono); font-weight:600; letter-spacing:0.3px; cursor:pointer; opacity:1; pointer-events:auto; transition:opacity 0.12s ease; position:relative; }
/* Invisible ::after expands the effective tap area to >=25px without growing the
   visual pill (house floor: tappable area may exceed visual). Inside a
   stopPropagation button, so it won't hijack the row. */
.m-iv-nav-row__pdf::after { content:""; position:absolute; inset:-6px -4px; }
.m-iv-nav-row__pdf:hover { text-decoration:underline; }
/* Fixed-width right column so the amount + status AND the PDF tag before it line up in
   consistent columns across rows (Charles 2026-07-05: the variable amount width was
   floating the PDF tag). Amount/status right-align within it. */
.m-iv-nav-row__right { text-align:right; flex-shrink:0; width:100px; }
.m-iv-nav-row__amount { font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); letter-spacing:-0.2px; }
.m-iv-nav-row__amount-ex { font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--text-tertiary); margin-top:1px; }
.m-iv-nav-row__status { display:flex; align-items:center; gap:5px; justify-content:flex-end; margin-top:3px; }
.m-iv-nav-row__status-label { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.4px; }

/* ---- Active filter chips ---- */
.m-iv-active-filters { margin:0 var(--gutter) 10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.m-iv-active-filter { padding:4px 8px 4px 10px; border-radius:12px; font-size:var(--fs-xs); background:var(--accent); color:#fff; font-family:var(--font-mono); display:inline-flex; align-items:center; gap:6px; }
.m-iv-active-filter__x { opacity:0.85; cursor:pointer; }

/* ---- Select-all header ---- */
/* Navigator select-all header: bar chrome = the shared .m-selectbar; only
   the round select-all box + label keep bespoke chrome (retired: the old
   .m-iv-select-header elevated band — replaced by the shared bar, #79). */
.m-iv-select-header__toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.m-iv-select-header__box { width:18px; height:18px; border-radius:9px; border:1.5px solid var(--border-strong); background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:700; }
.m-iv-select-header__box--checked { border-color:var(--accent); background:var(--accent); }
.m-iv-select-header__label { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }

/* ---- Multi-select tray ---- */
.m-iv-tray { position:absolute; left:0; right:0; bottom:0; background:var(--bg-elevated); border-top:1px solid var(--border-strong); padding:10px var(--gutter); box-shadow:0 -8px 20px rgba(0,0,0,0.18); z-index:5; }
/* <768 the fixed 60px .bottom-nav owns the viewport bottom (hidden >=768) */
@media (max-width: 767px) { .m-iv-tray { bottom:60px; } }
.m-iv-tray__head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.m-iv-tray__count { width:22px; height:22px; border-radius:11px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:600; }
.m-iv-tray__info { flex:1; min-width:0; }
.m-iv-tray__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-tray__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-tray__clear { font-size:var(--fs-xs); color:var(--text-tertiary); cursor:pointer; padding:5px 8px; }
.m-iv-tray__buttons { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.m-iv-tray__btn { padding:9px 6px; border-radius:7px; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-primary); text-align:center; cursor:pointer; }
.m-iv-tray__btn--primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.m-iv-tray__btn-label { font-size:var(--fs-sm); font-weight:500; }
.m-iv-tray__btn-sub { font-size:var(--fs-2xs); font-family:var(--font-mono); opacity:0.75; margin-top:1px; }

/* ---- Add FAB + sheet ---- */
.m-iv-add-sheet { position:absolute; inset:0; z-index:10; }
.m-iv-add-sheet[hidden] { display:none; }
[hidden].m-iv-empty, [hidden].m-iv-tray, [hidden].m-iv-daterange-inline, .m-iv-cost-alert[hidden] { display:none; }

/* ---- Inline custom date range (single row) ---- */
.m-iv-daterange-inline { display:flex; align-items:center; gap:8px; padding:0 var(--gutter) 10px; }
.m-iv-daterange-inline__label { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.4px; flex-shrink:0; }
.m-iv-daterange-inline__input { flex:1; min-width:0; padding:7px 10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; font-size:var(--fs-sm); font-family:var(--font-mono); color:var(--text-primary); }
.m-iv-add-sheet__scrim { position:absolute; inset:0; background:var(--m-iv-scrim); }
.m-iv-add-sheet__panel { position:absolute; left:0; right:0; bottom:61px; background:var(--bg-base); border-radius:14px 14px 0 0; padding:0 0 18px; box-shadow:0 -10px 30px rgba(0,0,0,0.25); }
.m-iv-add-sheet__grabber { width:36px; height:4px; border-radius:2px; background:var(--border-strong); margin:8px auto 0; }
.m-iv-add-sheet__head { padding:0 var(--gutter) 12px; border-bottom:1px solid var(--border); background:var(--bg-surface); border-radius:14px 14px 0 0; }
.m-iv-add-sheet__head-row { display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; }
.m-iv-add-sheet__title { font-size:var(--fs-lg); font-weight:500; font-family:var(--font-heading); color:var(--text-primary); }
.m-iv-add-sheet__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-add-sheet__grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px var(--gutter) 0; }
.m-iv-add-option { padding:14px var(--gutter); border-radius:10px; background:var(--bg-elevated); border:1px solid var(--border); min-height:132px; display:flex; flex-direction:column; cursor:pointer; }
.m-iv-add-option__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; }
.m-iv-add-option__title { font-size:var(--fs-base); font-weight:500; color:var(--text-primary); margin-top:8px; line-height:1.2; }
.m-iv-add-option__sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:6px; line-height:1.4; flex:1; }
.m-iv-add-option__cta { font-size:var(--fs-sm); color:var(--accent); font-weight:500; margin-top:8px; }
.m-iv-add-sheet__foot { margin-top:14px; padding:0 var(--gutter); font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); text-align:center; letter-spacing:0.2px; }

/* ---- Search results ---- */
.m-iv-search-section { padding:8px var(--gutter) 4px; font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-iv-search-suggest { padding:0 var(--gutter) 16px; display:flex; flex-wrap:wrap; gap:6px; }
.m-iv-suggest-chip { padding:5px 10px; border-radius:14px; font-size:var(--fs-xs); background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); font-family:var(--font-mono); }
.m-iv-nav-end { padding:18px var(--gutter) 24px; text-align:center; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }

/* ============== ACTIVITY ============== */

.m-iv-activity-head { flex-shrink:0; padding:12px var(--gutter) 10px; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.m-iv-activity-head__label { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:3px; }
.m-iv-activity-head__stat { font-size:var(--fs-sm); color:var(--text-secondary); font-family:var(--font-mono); }
.m-iv-activity-head__stat b { color:var(--text-primary); font-weight:500; }
.m-iv-activity-filters { flex-shrink:0; padding:10px var(--gutter); border-bottom:1px solid var(--border); background:var(--bg-surface); display:flex; gap:6px; overflow:auto; }
.m-iv-activity-chip { flex-shrink:0; padding:6px 10px; border:1px solid var(--border); border-radius:14px; font-size:var(--fs-xs); font-weight:400; color:var(--text-tertiary); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.m-iv-activity-chip--active { background:var(--bg-elevated); border-color:var(--border-strong); color:var(--text-primary); font-weight:500; }
.m-iv-activity-chip__count { font-size:var(--fs-2xs); font-family:var(--font-mono); color:var(--text-tertiary); }
.m-iv-activity-stream { flex:1; overflow-y:auto; padding:8px var(--gutter) 20px; }
.m-iv-activity-day { margin-bottom:4px; }
.m-iv-activity-day__label { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; padding:12px 0 8px; }
.m-iv-activity-day__items { display:flex; flex-direction:column; gap:6px; }
.m-iv-activity-card { background:transparent; border:none; border-radius:0; overflow:hidden; border-top:1px solid var(--border); }
.m-iv-activity-row { display:flex; align-items:center; gap:12px; padding:12px var(--gutter); cursor:pointer; }
.m-iv-activity-card__hint { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-iv-activity-card__expand { color:var(--accent); }
.m-iv-activity-card--draft { border-left-color:var(--warning); }
.m-iv-activity-card--confirmed { border-left-color:var(--success); }
.m-iv-activity-card--stock { border-left-color:var(--info); }
.m-iv-activity-card--deleted { border-left-color:var(--text-tertiary); }
.m-iv-activity-card--err { border-color:var(--m-iv-error-border); }
.m-iv-activity-card--warn { border-color:var(--m-iv-warn-card); }
.m-iv-activity-card__top { padding:12px var(--gutter) 12px var(--gutter); display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.m-iv-activity-card__icon { width:28px; height:28px; border-radius:7px; color:#111; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:600; font-family:var(--font-mono); }
.m-iv-activity-card__content { flex:1; min-width:0; }
.m-iv-activity-card__row1 { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.m-iv-activity-card__supplier { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-iv-activity-card__amount { font-size:var(--fs-sm); color:var(--text-primary); font-family:var(--font-mono); flex-shrink:0; }
.m-iv-activity-card__title { font-size:var(--fs-sm); margin-top:3px; font-weight:500; color:var(--text-secondary); }
.m-iv-activity-card__title--err { color:var(--error); }
.m-iv-activity-card__title--warn { color:var(--warning); }
.m-iv-activity-card__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.m-iv-activity-card__footer { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:6px; display:flex; align-items:center; gap:8px; }
.m-iv-activity-card__footer-spacer { flex:1; }
.m-iv-activity-card__events { color:var(--text-secondary); }
.m-iv-activity-card__chevron { color:var(--text-tertiary); font-size:var(--fs-sm); transition:transform 0.15s; }
.m-iv-activity-card__chevron--expanded { transform:rotate(180deg); }

/* ---- Event log (expanded card) ---- */
.m-iv-event-log { border-top:1px solid var(--border); background:var(--bg-base); padding:10px var(--gutter) 12px; }
.m-iv-event-log__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; margin-bottom:8px; }
.m-iv-event-log__rail { position:relative; }
.m-iv-event-log__line { position:absolute; left:9px; top:6px; bottom:6px; width:1px; background:var(--border); }
.m-iv-event-row { position:relative; display:flex; align-items:flex-start; gap:10px; padding:4px 0; }
.m-iv-event-row__icon { width:19px; height:19px; border-radius:5px; color:#111; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:600; position:relative; z-index:1; margin-top:2px; }
.m-iv-event-row__body { flex:1; min-width:0; padding-bottom:2px; }
.m-iv-event-row__top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.m-iv-event-row__label { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-event-row__time { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); flex-shrink:0; }
.m-iv-event-row__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; line-height:1.4; }
.m-iv-event-log__cta { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.m-iv-event-log__hint { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-event-log__open { font-size:var(--fs-xs); color:var(--accent); font-weight:500; cursor:pointer; }

/* ---- Event-kind icon backgrounds ---- */
.m-iv-evt--upload { background:var(--m-iv-upload-bg); }
.m-iv-evt--ocr { background:var(--text-tertiary); }
.m-iv-evt--edit { background:var(--accent); }
.m-iv-evt--confirmed { background:var(--success); }
.m-iv-evt--stock { background:var(--info); }
.m-iv-evt--mismatch { background:var(--error); }
.m-iv-evt--flag { background:var(--warning); }
.m-iv-evt--deleted { background:var(--text-tertiary); }

/* ============== EDGE STATES ============== */

.m-iv-edge-strip { flex-shrink:0; height:36px; padding:0 var(--gutter); display:flex; align-items:center; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.4px; background:var(--bg-surface); border-bottom:1px solid var(--border); }
.m-iv-edge-strip--split { justify-content:space-between; }
.m-iv-empty { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 28px; }
.m-iv-empty__inner { text-align:center; max-width:280px; }
.m-iv-empty__kicker { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.9px; font-family:var(--font-mono); margin-bottom:10px; }
.m-iv-empty__title { font-size:var(--fs-xl); font-weight:500; color:var(--text-primary); font-family:var(--font-heading); line-height:1.25; margin-bottom:8px; }
.m-iv-empty__body { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.55; margin-bottom:18px; text-wrap:pretty; }
.m-iv-empty__primary { padding:10px var(--gutter); background:var(--accent); color:#1a1816; border:none; border-radius:6px; font-size:var(--fs-sm); font-weight:500; cursor:pointer; font-family:var(--font-body); }
.m-iv-empty__primary--success { background:var(--success); }
.m-iv-empty__secondary { margin-top:12px; font-size:var(--fs-xs); color:var(--text-tertiary); cursor:pointer; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.m-iv-zero-count { padding:14px var(--gutter); font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); border-bottom:1px solid var(--border); }
.m-iv-zero-count b { color:var(--text-secondary); font-weight:400; }

/* ---- Error states ---- */
.m-iv-err-wrap { flex:1; padding:16px var(--gutter); display:flex; flex-direction:column; gap:14px; }
.m-iv-err-file { padding:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; display:flex; gap:12px; align-items:center; }
.m-iv-err-file__thumb { width:44px; height:56px; border-radius:4px; background:linear-gradient(180deg, var(--pdf-chip-grad-start) 0%, var(--pdf-chip-grad-end) 100%); color:#5a4a32; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xs); font-family:var(--font-mono); font-weight:700; flex-shrink:0; position:relative; }
.m-iv-err-file__badge { position:absolute; bottom:-4px; right:-4px; width:18px; height:18px; border-radius:9px; background:var(--error); color:#1a1816; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:700; border:2px solid var(--bg-surface); }
.m-iv-err-file__name { font-size:var(--fs-sm); color:var(--text-primary); }
.m-iv-err-file__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }
.m-iv-err-why { padding:12px var(--gutter); background:var(--error-bg); border:1px solid var(--m-iv-error-border-30); border-radius:8px; }
.m-iv-err-why__label { font-size:var(--fs-2xs); color:var(--error); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.7px; margin-bottom:6px; }
.m-iv-err-why__text { font-size:var(--fs-sm); color:var(--text-primary); line-height:1.55; }
.m-iv-err-paths { display:flex; flex-direction:column; gap:8px; }
.m-iv-err-paths__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.7px; font-family:var(--font-mono); }
.m-iv-err-path { padding:11px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.m-iv-err-path--primary { background:var(--m-iv-info-path-bg); border-color:var(--m-iv-info-path-border); }
.m-iv-err-path__label { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-err-path__sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }
.m-iv-err-path__chevron { font-size:var(--fs-xs); color:var(--text-tertiary); }
.m-iv-err-upload { padding:14px var(--gutter); background:var(--bg-surface); border:1px dashed var(--m-iv-error-border-40); border-radius:8px; text-align:center; }
.m-iv-err-upload__icon { width:38px; height:38px; border-radius:19px; margin:0 auto 10px; background:var(--m-iv-error-14); color:var(--error); display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); font-family:var(--font-mono); font-weight:700; }
.m-iv-err-upload__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-err-upload__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:6px; }
.m-iv-err-net { padding:12px var(--gutter); background:var(--warning-bg); border:1px solid var(--warning-border); border-radius:8px; }
.m-iv-err-net__label { font-size:var(--fs-2xs); color:var(--warning); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.7px; margin-bottom:6px; }
.m-iv-err-net__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-err-net__text { font-size:var(--fs-xs); color:var(--text-secondary); margin-top:4px; line-height:1.5; }
.m-iv-err-receipt { padding:10px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.7; }
.m-iv-err-receipt__row { display:flex; justify-content:space-between; }
.m-iv-err-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:8px; }
.m-iv-err-btn-sec { padding:10px var(--gutter); background:transparent; color:var(--text-secondary); border:1px solid var(--border-strong); border-radius:6px; font-size:var(--fs-sm); cursor:pointer; font-family:var(--font-body); }
.m-iv-err-btn-pri { padding:10px var(--gutter); background:var(--accent); color:#1a1816; border:none; border-radius:6px; font-size:var(--fs-sm); font-weight:500; cursor:pointer; font-family:var(--font-body); }

/* ---- Tab panel visibility ---- */
.m-iv-tab-panel { display:none; height:100%; }
.m-iv-tab-panel--active { display:flex; flex-direction:column; }
.m-iv-tab-panel__scroll { overflow-y:auto; height:100%; padding-bottom:24px; }
.m-iv-nav-list-body { flex:1; overflow-y:auto; position:relative; }
.m-iv-activity-wrap { display:flex; flex-direction:column; height:100%; }

/* ============================================================
   Invoices — Create/Edit shared atoms (02a)
   Used by invoice_create.html, invoice_edit.html, and reused
   by 02b–02d and 03a–03c.
   ============================================================ */

/* ---- Create header bar ---- */
.m-iv-create-header { height:52px; flex-shrink:0; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); }
.m-iv-create-header__left { font-size:var(--fs-sm); color:var(--text-tertiary); cursor:pointer; text-decoration:none; min-height:44px; display:flex; align-items:center; }
.m-iv-create-header__center { text-align:center; }
.m-iv-create-header__kicker { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; }
.m-iv-create-header__title { font-size:var(--fs-base); font-family:var(--font-heading); font-weight:500; line-height:1.1; margin-top:2px; }
.m-iv-create-header__right { font-size:var(--fs-sm); color:var(--text-tertiary); min-width:50px; text-align:right; }

/* ---- Section label (mirrors stock manager-confirm) ---- */
.m-iv-create-section { padding-top:14px; }
.m-iv-create-section__header { display:flex; justify-content:space-between; align-items:baseline; padding:0 var(--gutter) 8px; font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-iv-create-section__right { font-family:var(--font-mono); text-transform:none; letter-spacing:0; color:var(--accent); }

/* ---- Form block (bordered section) ---- */
.m-iv-form-block { padding:12px var(--gutter) 10px; border-bottom:1px solid var(--border); }
.m-iv-form-block__title { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; margin-bottom:10px; }

/* ---- Field (standard) ---- */
.m-iv-field { margin-bottom:6px; }
.m-iv-field__label { font-size:var(--fs-2xs); color:var(--text-tertiary); font-weight:500; margin-bottom:3px; text-transform:uppercase; letter-spacing:0.6px; }
.m-iv-field__label--required::after { content:' *'; color:var(--accent); }
.m-iv-field__helper { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:3px; }

/* ---- Compact field (header form grid) ---- */
.m-iv-cfield__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.55px; margin-bottom:3px; }
.m-iv-cfield__label--required::after { content:' *'; color:var(--accent); margin-left:3px; }

/* ---- Input variants ---- */
.m-iv-input { width:100%; padding:9px 11px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:6px; color:var(--text-primary); font-size:var(--fs-sm); font-family:var(--font-body); outline:none; box-sizing:border-box; }
/* a11y wave 3 (audit R6): base class of every invoice field stripped focus with
   no replacement — adopt the house .form-input recipe (accent border + 2px ring). */
.m-iv-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.m-iv-input--mono { font-family:var(--font-mono); }
.m-iv-input--compact { padding:5px 7px; font-size:var(--fs-sm); border-radius:4px; border-color:var(--border); }
.m-iv-input--compact.m-iv-input--mono { font-family:var(--font-mono); }
.m-iv-input--readonly { color:var(--text-secondary); cursor:not-allowed; }
.m-iv-input--warning { border-color:var(--warning); }

/* ---- Sticky create/edit footer ---- */
.m-iv-create-footer { flex-shrink:0; background:var(--bg-surface); border-top:1px solid var(--border-strong); }
.m-iv-create-footer__note { padding:8px var(--gutter) 4px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-create-footer__actions { padding:4px var(--gutter) 12px; display:flex; gap:8px; }
.m-iv-create-footer__btn { border-radius:6px; cursor:pointer; text-align:center; min-height:36px; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); }
.m-iv-create-footer__btn--secondary { flex:1; padding:11px 0; background:transparent; color:var(--text-secondary); border:1px solid var(--border-strong); font-size:var(--fs-sm); font-weight:500; }
.m-iv-create-footer__btn--primary { flex:1.6; padding:11px 0; background:var(--accent); color:#111; border:none; font-size:var(--fs-sm); font-weight:600; }
.m-iv-create-footer__btn--primary:disabled { opacity:0.4; cursor:not-allowed; }
.m-iv-create-footer__form { display:flex; }
.m-iv-create-footer__form--sec { flex:1; }
.m-iv-create-footer__form--pri { flex:1.6; }
.m-iv-create-footer__form .m-iv-create-footer__btn { width:100%; }
.m-iv-create-footer__note { padding:6px var(--gutter) 2px; font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--text-tertiary); }

/* ---- Header form 2-column grid ---- */
.m-iv-header-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:8px; }

/* ---- PDF attach strip ---- */
.m-iv-pdf-attach { padding:6px 9px; background:var(--bg-base); border:1px dashed var(--border-strong); border-radius:5px; display:flex; align-items:center; gap:8px; cursor:pointer; margin-top:8px; }
.m-iv-pdf-attach__icon { width:18px; height:22px; border-radius:2px; background:linear-gradient(180deg,var(--bg-elevated),var(--border)); color:var(--text-tertiary); font-size:var(--fs-2xs); font-family:var(--font-mono); font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.m-iv-pdf-attach__text { font-size:var(--fs-xs); color:var(--text-secondary); }
.m-iv-pdf-attach__hint { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); flex:1; }
.m-iv-pdf-attach__chevron { font-size:var(--fs-xs); color:var(--text-tertiary); }

/* ---- Late date warning (inline) ---- */
.m-iv-late-warn { padding:5px 8px; background:var(--warning-bg); border:1px solid var(--warning-border); border-radius:4px; font-size:var(--fs-xs); color:var(--warning); margin-top:4px; display:none; }
.m-iv-late-warn--visible { display:block; }

/* ---- Create/edit form layout ---- */
.m-iv-create-form { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.m-iv-create-scroll { flex:1; overflow-y:auto; }
.m-iv-new-supplier { margin-top:8px; }
.m-iv-billing-hint { font-size:var(--fs-2xs); color:var(--text-tertiary); margin-top:2px; }

/* ---- Error message (create/edit) ---- */
.m-iv-form-error { margin:8px var(--gutter) 0; padding:8px var(--gutter); background:var(--error-bg); border:1px solid var(--error-border); border-radius:6px; font-size:var(--fs-sm); color:var(--error); }

/* ---- Detail page — line cards (ManualLineCardV3) ---- */
.m-iv-detail-messages { padding:0 var(--gutter) 8px; }
.m-iv-detail-section { padding:0 var(--gutter); }
.m-iv-detail-section__header { display:flex; justify-content:space-between; align-items:baseline; padding:0 0 8px; font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-iv-detail-section__right { font-family:var(--font-mono); text-transform:none; letter-spacing:0; color:var(--accent); cursor:pointer; font-size:var(--fs-xs); }

.m-iv-line-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; padding:8px 10px; cursor:pointer; }
.m-iv-line-card--nonprod { background:transparent; opacity:0.7; }
.m-iv-line-card--unlinked { border-color:var(--m-iv-error-border); }

.m-iv-line-card__r1 { display:flex; align-items:center; gap:7px; }
.m-iv-line-card__dot { width:8px; height:8px; border-radius:4px; flex-shrink:0; }
.m-iv-line-card__name { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-line-card__cta { font-size:var(--fs-sm); color:var(--error); font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-line-card__npdesc { font-size:var(--fs-sm); color:var(--text-secondary); font-style:italic; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.m-iv-line-card__r2 { margin-top:4px; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--fs-xs); }
.m-iv-line-card__desc { color:var(--text-tertiary); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-line-card__desc-arrow { opacity:0.6; }
.m-iv-line-card__path { color:var(--text-tertiary); flex-shrink:0; }

.m-iv-line-card__r3 { margin-top:5px; display:flex; align-items:center; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-secondary); }
.m-iv-line-card__qty { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-line-card__qty b { color:var(--text-primary); font-weight:500; }
.m-iv-line-card__sep { color:var(--text-tertiary); margin:0 6px; }
.m-iv-line-card__total { color:var(--text-primary); font-weight:500; }
.lg-band .m-iv-line-card__r3 { display:grid; grid-template-columns:1fr 72px 56px 72px; align-items:center; gap:4px; }
.lg-band .m-iv-line-card__qty { text-align:left; }
.lg-band .m-iv-line-card__sep { display:none; }
.lg-band .m-iv-line-card__cost, .lg-band .m-iv-line-card__vat { text-align:right; color:var(--text-secondary); }
.lg-band .m-iv-line-card__total { text-align:right; }

/* ---- SHARED select-mode action bar (.m-selectbar) ----
   THE house select-mode bar (Charles 2026-07-03: promoted from the invoice
   line multi-select build to a shared asset — use it for every select mode
   in the app; do not invent per-module selectbar chrome). Compact-pill
   family (.m-iv-conf-pill geometry at the 28px actionable floor): count
   label left (mono tertiary), action pills grouped right — action =
   accent-OUTLINED (never accent-filled), cancel/clear = muted. Consumers:
   invoice detail line multi-select + invoice hub navigator select header. */
.m-selectbar { display:flex; align-items:center; gap:8px; padding:6px var(--gutter) 8px; border-bottom:1px solid var(--border); }
/* The author display:flex above beats the UA [hidden]{display:none} — restate
   it, or the bar renders permanently ("0 selected" on page load, QA catch;
   DESIGN-LESSONS #88). */
.m-selectbar[hidden] { display:none; }
.m-selectbar__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-right:auto; }
.m-selectbar__action { min-height:28px; padding:5px 12px; border-radius:3px; border:1px solid var(--accent); background:var(--accent-bg); color:var(--accent); font-size:var(--fs-xs); font-family:var(--font-mono); letter-spacing:0.3px; cursor:pointer; }
.m-selectbar__action:disabled { opacity:0.45; cursor:default; }
.m-selectbar__cancel { display:inline-flex; align-items:center; min-height:28px; padding:5px 12px; border-radius:3px; border:1px solid var(--text-tertiary); background:var(--m-iv-conf-pill-muted-bg); color:var(--text-tertiary); font-size:var(--fs-xs); font-family:var(--font-mono); letter-spacing:0.3px; cursor:pointer; }

/* A2 UI: line multi-select specifics (bar chrome = shared .m-selectbar).
   Select toggle reuses the navigator's .m-iv-select-toggle chrome, right-
   aligned beside "+ Add line"; selected cards get an accent inset ring. */
/* Neutralise the section header's uppercase/tracking/weight so the toggle
   reads identically to the navigator's Select pill (QA catch). */
.m-iv-select-toggle--lines { margin-left:auto; margin-right:12px; text-transform:none; letter-spacing:normal; font-weight:400; }
.m-iv-line-list--selecting .m-iv-line-card { cursor:pointer; }
.m-iv-line-card--selected { box-shadow:inset 0 0 0 1.5px var(--accent); border-radius:8px; background:color-mix(in srgb, var(--accent) 8%, transparent); }

/* B5: desktop confirmed panel (.d-iv-detail) line cards on TWO rows —
   row 1 = dot + name + ↓description + pills + cost-category path,
   row 2 = the existing __r3 qty/£/vat/total strip. CSS-only: __r1/__r2 become
   display:contents and their leaf items are ordered onto one wrapping flex
   line; the description ellipsizes (min-width:0). components.css reaches both
   the hub-injected panel and the full page; mobile/non-.d-iv-detail contexts
   are untouched. */
.d-iv-detail .m-iv-line-card { display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; }
.d-iv-detail .m-iv-line-card__r1, .d-iv-detail .m-iv-line-card__r2 { display:contents; }
.d-iv-detail .m-iv-line-card__r1 > .m-iv-line-card__dot { order:1; }
.d-iv-detail .m-iv-line-card__r1 > .m-iv-line-card__name,
.d-iv-detail .m-iv-line-card__r1 > .m-iv-line-card__npdesc,
.d-iv-detail .m-iv-line-card__r1 > .m-iv-line-card__cta { order:2; flex:0 1 auto; }
.d-iv-detail .m-iv-line-card__r2 > .m-iv-line-card__desc { order:3; flex:1 1 60px; min-width:0; }
/* On the 2-row merge the description sits BESIDE the product name, so the
   mobile ↓ glyph points at nothing — face the product link instead (←).
   font-size:0 hides the span's literal ↓ text; ::before draws the ← at the
   r2 strip size (Charles 2026-07-03). */
.d-iv-detail .m-iv-line-card__desc-arrow { font-size:0; }
.d-iv-detail .m-iv-line-card__desc-arrow::before { content:"\2190\00a0"; font-size:var(--fs-xs); }
.d-iv-detail .m-iv-line-card__r1 > .m-iv-match-pill { order:4; flex-shrink:0; }
.d-iv-detail .m-iv-line-card__r2 > .m-iv-line-card__path { order:5; flex-shrink:0; }
.d-iv-detail .m-iv-line-card__r3 { order:6; flex:1 0 100%; }

/* ---- Match pill ---- */
.m-iv-match-pill { display:inline-flex; align-items:center; gap:4px; padding:1px 6px; border-radius:3px; font-size:var(--fs-2xs); font-family:var(--font-mono); font-weight:500; letter-spacing:0.3px; white-space:nowrap; }
.m-iv-match-pill__dot { width:4px; height:4px; border-radius:2px; }
.m-iv-match-pill--linked { background:var(--m-iv-pill-linked); border:1px solid var(--success); color:var(--success-text); }
.m-iv-match-pill--linked .m-iv-match-pill__dot { background:var(--success); }
.m-iv-match-pill--unlinked { background:var(--m-iv-pill-unlinked); border:1px solid var(--error); color:var(--error-text); }
.m-iv-match-pill--unlinked .m-iv-match-pill__dot { background:var(--error); }
.m-iv-match-pill--nonprod { background:var(--m-iv-pill-nonprod); border:1px solid var(--text-tertiary); color:var(--text-secondary); }
.m-iv-match-pill--nonprod .m-iv-match-pill__dot { background:var(--text-tertiary); }
.m-iv-match-pill--stocked { background:var(--m-iv-pill-stocked); border:1px solid var(--m-iv-pill-stocked-border); color:var(--success-text); }

/* ---- Shared list-grouping primitive (.lg-*) ---- */
/* Used by both invoice detail and catalogue browse screens */

/* Band — the ONLY uppercase tier (DRINK / FOOD / section divider) */
.lg-band__border { height:0; border-top:1px solid var(--border); margin:0 var(--gutter); }
.lg-band__head { display:flex; align-items:center; gap:6px; padding:13px var(--gutter) 4px; cursor:pointer; user-select:none; }
.lg-band__chev { font-size:var(--fs-2xs); color:var(--text-tertiary); transition:transform .15s ease; width:6px; display:inline-block; }
.lg-band.is-collapsed .lg-band__chev { transform:rotate(-90deg); }
.lg-band__label { font-size:var(--fs-2xs); font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-tertiary); }
.lg-band--attn .lg-band__label { color:var(--accent); }
.lg-band__count { font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--text-tertiary); }
.lg-band__rule { flex:1; height:1px; background:var(--border); }
.lg-band__sum { font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--text-tertiary); }
.lg-band.is-collapsed .lg-band__body { display:none; }

/* Category — anchor row; the ONLY tier with a subtotal; Title case, body font */
.lg-cat__head { display:flex; align-items:center; gap:8px; padding:4px var(--gutter) 3px; cursor:pointer; user-select:none; }
.lg-cat__chev { font-size:var(--fs-2xs); width:7px; color:var(--text-tertiary); transition:transform .15s ease; display:inline-block; }
.lg-cat.is-collapsed .lg-cat__chev,
.lc-cat-header.is-collapsed .lg-cat__chev { transform:rotate(-90deg); }
.lg-cat__dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.lg-cat__name { font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-cat__count { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-tertiary); flex-shrink:0; }
.lg-cat__spacer { flex:1; }
.lg-cat__sum { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-secondary); margin-left:auto; }
.lg-cat.is-collapsed .lg-cat__body { display:none; }

/* Subcategory — Title case, same voice as category, smaller + muted */
.lg-sub { font-family:var(--font-body); font-size:var(--fs-xs); font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-secondary); padding:9px var(--gutter) 3px 22px; background:none; border:none; }
.lg-sub__count { font-weight:400; letter-spacing:0; }

/* Show more */
.lg-more { display:block; margin:6px var(--gutter) 2px var(--gutter); width:calc(100% - 24px); padding:6px; text-align:center; background:none; border:1px dashed var(--border-strong); border-radius:6px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-secondary); cursor:pointer; }

/* Hidden items (show-more cap) */
.lg-hidden { display:none; }

/* Catalogue-specific: dimmed collapsed state + body hide via sibling selector */
.lc-cat-header.is-collapsed { opacity:0.65; }
.lc-cat-header.is-collapsed + .lc-cat-items { display:none; }

/* ---- Shared list-ROW contract (.lr-*) — Wave 1 (product-list-display, 2026-07-04) ----
   H3b grouping: full-width surface blocks (gap = boundary), band demoted to a thin
   divider, no dots on group headers, V1 row (name+meta stack with marks as a vertically-
   centred trailing column — never pinned to the meta line, per live review). Structural
   hooks (lc-item-row, lg-band__head, lg-sub, lc-item-name__text, lc-item-num, lc-cat-block)
   stay untouched for catalogue.js + non-adopting surfaces (sales/comp/prep/invoices) —
   these rules are scoped to the new `lr-*` classes so Waves 2-4 consumers are unaffected. */

/* Band → thin labelled divider (replaces the old lg-band__head look on adopting surfaces) */
.lg-band__head.lr-band-divider { display:flex; align-items:center; gap:8px; padding:16px var(--gutter) 6px; cursor:default; }
.lc-body > .lg-band__head.lr-band-divider:first-child { padding-top:4px; }
.lr-band-divider__label { font-size:var(--fs-2xs); font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-tertiary); white-space:nowrap; }
.lr-band-divider__rule { flex:1; height:1px; background:var(--border-strong); }

/* Category → full-width surface block (H3b); the 8px base-bg gap between blocks IS the boundary.
   Invoice surfaces (Products tab / stock-confirm drawer preview) share the .lg-cat class with the
   UNTOUCHED Lines tab, so the H3b look is scoped to their own containers here rather than applied
   to .lg-cat unconditionally. */
.lc-cat-block.lr-block,
#iv-conf-panel-products .lg-cat.lr-block,
.d-iv-stock-list .lg-cat.lr-block { background:var(--bg-surface); margin:0 0 8px; }
.lc-cat-block.lr-block:last-child,
#iv-conf-panel-products .lg-cat.lr-block:last-child,
.d-iv-stock-list .lg-cat.lr-block:last-child { margin-bottom:0; }
/* Sticky header must match the block surface, not the page base, while it sticks mid-scroll */
.lc-cat-block.lr-block .lc-cat-header { background:var(--bg-surface); }
/* H3 A/B toggle (rejected, kept as a 3-declaration review-time check — DO NOT ship enabled):
   .lc-cat-block.lr-block { margin:8px 10px; border-radius:8px; border:1px solid var(--border); } */

/* Category block head — dot-free: chevron + semibold name + mono count + optional flag */
.lg-cat__head.lr-block-head { padding:10px var(--gutter) 3px; }
.lr-block-head__name { font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lr-block-head__count { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-tertiary); margin-left:2px; }

/* Subcategory — tighten the gap under the block head (Charles: "way too big, feels off") */
.lg-sub.lr-sub { padding-top:2px; padding-bottom:2px; }
.lr-sub__count { font-weight:400; }

/* Row — two-column layout: [name+meta stack] | [marks, vertically centred]. Marks sit
   beside the name on a single line, or centred across both lines when a meta line exists —
   never pinned to the bottom line (Charles catch, 2026-07-04 live review). */
/* Not compounded with .lc-item-name — some surfaces (sales/comp detail's nested
   combo block, prep's stock/low tags) need an INNER .lr-name for the name+meta
   stack while the OUTER .lc-item-name stays a plain wrap-capable flex row so
   that extra sibling content still wraps onto its own line (Wave 3). */
.lr-name { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; }
.lr-name__stack { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.lr-name__text { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Leading colour dot — ONLY for mixed-category row lists that have no grouping header to
   carry the colour (H3b ruling: single-category blocks drop the dot, mixed lists keep it). */
.lr-dot { width:6px; height:6px; border-radius:2px; flex-shrink:0; display:inline-block; }

/* Meta line: content untouched, chrome = fs-xs mono tertiary, NO text-transform (was uppercase) */
.lc-item-sub.lr-meta { display:block; width:100%; text-transform:none; letter-spacing:0; }
.lr-meta__text { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Marks (↑ cost-up, £ sellable, surface equivalents) — bold, legible, never smaller than the meta line */
.lr-marks { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lr-mark { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; }
.lr-mark--error { color:var(--error); }
.lr-mark--accent { color:var(--accent); }
.lr-mark--warn { color:var(--warning); }
.lr-mark--muted { color:var(--text-secondary); }

/* Numeric cells on adopting surfaces read one step smaller than the name (Charles, 2026-07-04) */
.lc-item-num.lr-num { font-size:var(--fs-xs); }

/* INACTIVE: row dims, no tag (data-is-active is already emitted by every adopting row) */
.lr-row[data-is-active="0"] { opacity:0.55; }

/* Wave 2: invoice Products tab row + stock-confirm drawer preview row column templates */
.lc-grid--iv-products { grid-template-columns:1fr 90px 58px; gap:8px; cursor:default; }
.lc-grid--iv-stock-preview { grid-template-columns:1fr 90px; gap:8px; cursor:default; }

/* Desktop content cap: full-width list surfaces stay readable instead of stretching rows
   across the whole viewport (architecture doc §2.2). Applied to the surface's own container,
   not the page shell. */
@media (min-width: 1024px) {
  .lr-content-cap { max-width:720px; }
}

/* Wave 4: ingredient-typeahead result rows adopt the shared name/meta type so a product
   reads the same everywhere (13px weight-500 name; 11px mono meta, no forced uppercase).
   TYPE only + the wrapper/layout values previously held as inline styles in the JS emitters
   (MI + recipe-mobile) are relocated verbatim here (retires a forbidden-pattern inline-style
   pocket). Name spans deliberately keep their prior wrapping (no ellipsis/nowrap added) so the
   render is unchanged; the empty-state + create-label chrome keep their original 12px (not
   name/meta, so outside the type target). */
.mi-d-search-results-empty { padding:10px 12px; font-size:12px; color:var(--text-tertiary); }
.mi-d-search-hit { padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.mi-d-search-hit__name { flex:1; font-size:var(--fs-sm); font-weight:500; } /* colour inherits (was inline flex:1;font-size:12px, no colour) — verbatim relocation + type re-anchor */
.mi-d-search-hit__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.mi-d-search-create { padding:10px 12px; cursor:pointer; display:flex; align-items:center; gap:8px; border-top:1px solid var(--border-strong); background:var(--bg-surface); }
.mi-d-search-create__plus { font-size:var(--fs-base); color:var(--accent); font-weight:600; }
.mi-d-search-create__label { flex:1; font-size:12px; color:var(--accent); font-weight:500; }
.m-rd-search__hit-name { flex:1; font-size:var(--fs-sm); font-weight:500; } /* colour inherits (was inline flex:1;font-size:12px, no colour) — verbatim relocation + type re-anchor */
.m-rd-search__hit-meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }

/* ---- Invoice line-card overrides inside shared bands ---- */
.lg-band .m-iv-line-card { background:none; border:none; border-radius:0; border-top:1px solid var(--border); margin:0; padding:7px var(--gutter) 8px var(--gutter); }
.lg-band .m-iv-line-card--nonprod { background:none; }
.lg-band .m-iv-line-card--unlinked { border-color:var(--border); }

/* ---- Confirmed lock strip (muted grey, low emphasis) ---- */
.m-iv-status-lock { margin:0 var(--gutter) 8px; display:flex; align-items:flex-start; gap:9px; padding:10px var(--gutter); border-radius:10px; background:var(--bg-surface); border:1px solid var(--border); }
.m-iv-status-lock__icon { width:18px; height:18px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); margin-top:1px; background:var(--m-iv-lock-icon-bg); color:var(--text-secondary); }
.m-iv-status-lock__text { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.5; }
.m-iv-status-lock__text b { color:var(--text-primary); font-weight:600; }

/* ---- Stock confirmed card (single quiet card per mock) ---- */
.m-iv-stock-card { margin:16px var(--gutter) 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:14px var(--gutter); }
.m-iv-stock-card__label { font-family:var(--font-heading); font-weight:500; font-size:var(--fs-base); color:var(--text-primary); }
.m-iv-stock-card__confirmed { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--success); margin-top:4px; }
.m-iv-stock-card__btn { width:100%; padding:12px var(--gutter); margin-top:12px; border-radius:8px; background:transparent; border:1px solid var(--border-strong); color:var(--text-secondary); font-size:var(--fs-sm); font-weight:600; cursor:pointer; }
.m-iv-stock-card__note { text-align:center; font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:7px; font-family:var(--font-mono); }

/* ---- Line totals footer (4-cell) ---- */
/* ---- Compact line summary (inline, below section header) ---- */
.m-iv-line-summary { margin:0 var(--gutter) 8px; padding:8px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; display:flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:var(--fs-xs); }
.m-iv-line-summary__item { display:inline-flex; align-items:baseline; gap:3px; flex-shrink:0; }
.m-iv-line-summary__label { color:var(--text-tertiary); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:0.4px; }
.m-iv-line-summary__val { color:var(--text-primary); font-weight:500; }
.m-iv-line-summary__sep { color:var(--text-tertiary); flex:1; text-align:center; }
.m-iv-line-summary__alert { color:var(--warning); font-size:var(--fs-sm); flex-shrink:0; padding-left:4px; }

/* ---- Line totals footer — fixed above bottom nav, 4-cell grid ---- */
.m-iv-line-totals { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--border-strong); background:var(--bg-elevated); position:fixed; bottom:60px; left:0; right:0; z-index:39; }
.m-iv-line-totals__cell { padding:8px 6px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.m-iv-line-totals__cell:not(:last-child) { border-right:1px solid var(--border); }
.m-iv-line-totals__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:4px; line-height:1; margin-bottom:3px; height:15px; }
.m-iv-line-totals__value { font-size:var(--fs-sm); color:var(--text-primary); font-family:var(--font-mono); font-weight:500; line-height:1; margin-top:3px; }
/* Vertical padding lifts the effective height to >=28px (inputs tier); inputs
   can't use ::after overlays, so padding is required. Grows the totals footer
   ~15px — accepted, flagged visual change (a11y wave 5, AC6). */
.m-iv-line-totals__input { width:100%; padding:8px 0; margin-top:2px; background:transparent; border:none; color:var(--accent); font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:500; outline:none; box-sizing:border-box; line-height:1; text-align:center; }
.m-iv-line-totals__input:focus { border-bottom:1px solid var(--accent); }
.m-iv-line-totals__input:disabled, .m-iv-line-totals__input:read-only { color:var(--text-primary); cursor:not-allowed; font-weight:500; }
.m-iv-line-totals__input::placeholder { color:var(--text-tertiary); }
.m-iv-line-totals__indicator { display:inline-flex; vertical-align:middle; }
.m-iv-line-totals__check { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:3px; background:var(--m-iv-recon-badge-ok); color:var(--success); font-size:var(--fs-2xs); font-weight:700; line-height:1; }
.m-iv-line-totals__cross { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:3px; background:var(--m-iv-recon-badge-bad); color:var(--error); font-size:var(--fs-2xs); font-weight:700; line-height:1; cursor:help; }
.m-iv-line-totals__save-status { position:absolute; right:8px; top:1px; font-size:var(--fs-2xs); font-family:var(--font-mono); color:var(--text-tertiary); opacity:0; transition:opacity 0.3s; }

/* ---- Detail header card ---- */
.m-iv-detail-header { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; margin:12px var(--gutter) 12px; overflow:hidden; }
.m-iv-detail-header__top { padding:12px var(--gutter) 0; display:flex; justify-content:space-between; align-items:flex-start; }
.m-iv-detail-header__inv-no { font-size:var(--fs-lg); font-family:var(--font-heading); font-weight:600; color:var(--text-primary); }
.m-iv-detail-header__edit { font-size:var(--fs-xs); color:var(--accent); font-family:var(--font-mono); cursor:pointer; padding:4px 8px; border:1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius:4px; text-decoration:none; min-height:30px; display:flex; align-items:center; }
.m-iv-detail-header__grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; padding:10px var(--gutter); }
.m-iv-detail-header__grid > :nth-child(even):not(.m-iv-detail-header__stock-chip) { text-align:right; }
.m-iv-detail-header__billing-row { grid-column:1/-1; display:flex; align-items:end; gap:8px; }
.m-iv-detail-header__billing-row > :first-child { flex:1; }
.m-iv-detail-header__billing-row > :last-child { flex:1; }
.m-iv-detail-header__stock-chip { display:inline-flex; align-items:center; padding:3px 7px; border-radius:5px; background:var(--m-iv-stock-confirm-bg); border:1px solid var(--m-iv-stock-confirm-border); font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--success); white-space:nowrap; flex-shrink:0; }
.m-iv-detail-header__label { font-size:var(--fs-xs); color:var(--text-tertiary); }
.m-iv-detail-header__val { font-size:var(--fs-sm); color:var(--text-primary); margin-top:1px; }
.m-iv-detail-header__val--mono { font-family:var(--font-mono); }
.m-iv-detail-header__notes { grid-column:1/-1; }
.m-iv-detail-header__totals { display:grid; grid-template-columns:repeat(3, 1fr); background:var(--bg-elevated); }
.m-iv-detail-header__total-item { padding:8px 10px; text-align:center; }
.m-iv-detail-header__total-item:not(:last-child) { border-right:1px solid var(--border); }
.m-iv-detail-header__total-label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; }
.m-iv-detail-header__total-val { font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:500; margin-top:2px; }
.m-iv-detail-header__total-val--accent { color:var(--accent); }
.m-iv-detail-header__stock-msg { padding:8px var(--gutter); font-size:var(--fs-xs); color:var(--success); background:var(--success-bg); border-top:1px solid var(--border); }

/* ---- Mobile draft editable header ---- */
.m-iv-detail-header--draft { margin:12px var(--gutter) 12px; }
.m-iv-draft-header__top { padding:12px var(--gutter) 0; display:flex; align-items:center; gap:10px; }
.m-iv-draft-header__invno { flex:1; min-width:0; }
.m-iv-draft-header__pill { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:4px; background:var(--m-iv-conf-pill-muted-bg); border:1px solid var(--border); color:var(--text-secondary); white-space:nowrap; flex-shrink:0; }
.m-iv-draft-header__fields { padding:10px var(--gutter); }
.m-iv-draft-header__new-supplier { padding:0 var(--gutter) 8px; }
/* bottom clears the fixed totals footer (grew to ~71px in a11y wave 5's taller
   stated-total inputs; the old 116px assumed a ~56px footer and overlapped it). */
.m-iv-draft-actions { display:flex; gap:6px; padding:8px var(--gutter); background:var(--bg-elevated); border-top:1px solid var(--border); position:fixed; bottom:131px; left:0; right:0; z-index:40; }
.m-iv-draft-actions__form { margin:0; }
.m-iv-draft-actions__btn { padding:7px 12px; border-radius:6px; font-size:var(--fs-xs); font-weight:500; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-primary); font-family:var(--font-body); }
.m-iv-draft-actions__btn--ghost { color:var(--text-tertiary); }
.m-iv-draft-actions__btn--secondary { flex:1; background:rgba(255,255,255,0.06); }
.m-iv-draft-actions__btn--primary { flex:1; background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.m-iv-draft-actions__btn--primary:disabled { opacity:0.4; cursor:not-allowed; }
@media (min-width:768px) { .m-iv-draft-actions { bottom:56px; left:var(--d-rail-w, 64px); } }
@media (min-width:768px) { .m-iv-detail-header--draft { display:none; } .m-iv-draft-actions { display:none; } }

/* ---- Deleted banner ---- */
.m-iv-deleted-banner { margin:0 var(--gutter) 12px; padding:12px var(--gutter); background:var(--m-iv-danger-bg); border:1px solid var(--m-iv-danger-border); border-radius:8px; }
.m-iv-deleted-banner__title { font-size:var(--fs-sm); color:var(--error); font-weight:600; }
.m-iv-deleted-banner__reason { font-size:var(--fs-sm); color:var(--text-secondary); margin-top:4px; }
.m-iv-deleted-banner__meta { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:4px; }
.m-iv-deleted-banner__restore { margin-top:8px; }

/* ---- Late-date warning ---- */
.m-iv-late-banner { margin:0 var(--gutter) 12px; padding:10px var(--gutter); background:var(--warning-bg); border:1px solid var(--warning-border-soft, var(--warning)); border-radius:8px; font-size:var(--fs-sm); color:var(--warning); }

/* ---- PDF / source strip ---- */
/* ---- PDF / source strip — slim inline ---- */
.m-iv-pdf-strip { margin:0 var(--gutter) 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-iv-pdf-strip__link, .m-iv-pdf-strip__attach { display:flex; align-items:center; gap:10px; padding:11px 13px; background:none; border:none; border-radius:0; text-decoration:none; cursor:pointer; width:100%; }
.m-iv-pdf-strip__pdf-icon { font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:600; color:var(--error); border:1px solid var(--m-iv-error-border-40); border-radius:4px; padding:3px 5px; flex-shrink:0; }
.m-iv-pdf-strip__text { flex:1; font-size:var(--fs-xs); color:var(--text-secondary); }
.m-iv-pdf-strip__action { font-size:var(--fs-xs); color:var(--text-tertiary); flex-shrink:0; background:none; border:none; padding:6px 8px; cursor:pointer; }
/* Main-area open control: lays out like the old icon+text spans (visually
   neutral) but is a real keyboard-focusable button (a11y wave 5). `.as-btn`
   zeroes button padding, so the button would otherwise only be clickable on its
   ~20px content while the strip's own 11px/13px padding (on the non-interactive
   .m-iv-pdf-strip__link wrapper) stayed dead. align-self:stretch + a matched
   negative-margin/padding pair extends the hit area across the FULL strip
   height and to the left edge with zero visual shift (Codex wave-5 r2). */
.m-iv-pdf-strip__open-main { display:flex; align-items:center; gap:10px; flex:1; text-align:left; cursor:pointer; align-self:stretch; margin:-11px 0 -11px -13px; padding:11px 0 11px 13px; }
.m-iv-pdf-strip__file-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.m-iv-pdf-strip__btn { font-size:var(--fs-xs); padding:6px 10px; border-radius:5px; cursor:pointer; min-height:32px; display:inline-flex; align-items:center; text-decoration:none; border:1px solid var(--border-strong); background:transparent; color:var(--text-secondary); }

/* ---- Add line sheet ---- */
.m-iv-addline-trigger { padding:0 var(--gutter) 12px; }
.m-iv-addline-dashed { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px var(--gutter); border:1px dashed var(--border-strong); border-radius:7px; cursor:pointer; }
.m-iv-addline-dashed__plus { font-size:var(--fs-sm); color:var(--accent); }
.m-iv-addline-dashed__text { font-size:var(--fs-sm); color:var(--text-secondary); }

.m-iv-addline-search { background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:8px; padding:8px 10px; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
/* a11y wave 3 (audit R6): the borderless search input cleared its focus ring with
   no replacement — surface focus on the wrapping box instead (matches .lc-search). */
.m-iv-addline-search:focus-within { border-color:var(--accent); }
.m-iv-addline-search__icon { font-size:var(--fs-sm); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-addline-search__input { flex:1; padding:0; background:transparent; border:none; outline:none; color:var(--text-primary); font-size:var(--fs-sm); font-family:var(--font-mono); letter-spacing:0.2px; }
.m-iv-addline-search__clear { font-size:var(--fs-xs); color:var(--text-tertiary); cursor:pointer; }

.m-iv-addline-result { padding:10px var(--gutter); border-bottom:1px solid var(--border); cursor:pointer; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.m-iv-addline-result__name { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-addline-result__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-addline-result:active { background:var(--bg-elevated); }

.m-iv-addline-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.m-iv-addline-actions__btn { font-size:var(--fs-xs); padding:8px var(--gutter); border-radius:5px; cursor:pointer; border:1px solid var(--border-strong); background:transparent; color:var(--text-secondary); min-height:36px; }

/* ---- Choice row (create / non-product picker) — mirrors m-iv-danger-row layout ---- */
.m-iv-choice-divider { margin-top:14px; padding-top:10px; border-top:1px dashed var(--border-strong); }
.m-iv-choice-divider__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.m-iv-choice-row { padding:11px var(--gutter); border-radius:8px; display:flex; align-items:center; gap:10px; cursor:pointer; border:1px solid var(--border); background:var(--bg-elevated); }
.m-iv-choice-row + .m-iv-choice-row { margin-top:5px; }
.m-iv-choice-row__icon { width:22px; height:22px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:600; flex-shrink:0; border:1px solid var(--border-strong); background:transparent; color:var(--text-tertiary); }
.m-iv-choice-row__body { flex:1; }
.m-iv-choice-row__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-choice-row__sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }
.m-iv-choice-row__chevron { font-size:var(--fs-sm); color:var(--text-tertiary); flex-shrink:0; }
.m-iv-choice-row--accent { border:1px dashed color-mix(in srgb, var(--accent) 50%, transparent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.m-iv-choice-row--accent .m-iv-choice-row__icon { background:var(--accent); color:#1a1816; border:none; }

/* ---- Non-product flow ---- */
.m-iv-np-card { padding:10px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; }
.m-iv-np-card__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }

/* ---- Line drawer layout helpers ---- */
.m-iv-ld-section { margin-bottom:12px; }
.m-iv-ld-section-label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.m-iv-ld-btn-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.m-iv-ld-link-row { display:flex; gap:6px; margin-top:6px; }
.m-iv-ld-add-product { display:flex; align-items:baseline; justify-content:space-between; }
.m-iv-ld-add-change { margin-left:8px; }
.m-iv-ld-link-selected { margin-top:6px; }
.m-iv-ld-desc { margin-bottom:10px; }
.m-iv-ld-qty-label { margin-bottom:4px; }
.m-iv-ld-grid4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:5px; }
.m-iv-ld-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-top:8px; }
.m-iv-ld-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.m-iv-ld-classify { margin-top:8px; }
.m-iv-ld-footer { padding:0; margin-top:10px; }
.m-iv-ld-delete { margin-top:14px; margin-bottom:12px; }
.m-iv-ld-total { font-weight:600; color:var(--text-primary); background:var(--bg-elevated); cursor:not-allowed; }
.m-iv-ld-nonprod-name { color:var(--text-secondary); }
.m-iv-ld-confirm-btn { flex:1; }
.m-iv-ld-danger-btn { width:100%; }

/* ---- Linked product card in edit ---- */
.m-iv-linked-card { padding:9px 10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; display:flex; align-items:center; gap:8px; }
.m-iv-linked-card__info { flex:1; min-width:0; }
.m-iv-linked-card__name { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-linked-card__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-iv-linked-card__action { font-size:var(--fs-xs); color:var(--accent); cursor:pointer; padding:5px 10px; border:none; background:var(--accent-bg); border-radius:4px; font-weight:500; flex-shrink:0; text-decoration:none; }

/* ---- Danger row (delete line) ---- */
.m-iv-danger-row { padding:10px var(--gutter); background:var(--m-iv-danger-bg); border:1px solid var(--m-iv-danger-border); border-radius:7px; display:flex; align-items:center; gap:8px; cursor:pointer; }
.m-iv-danger-row__icon { width:22px; height:22px; border-radius:11px; background:var(--m-iv-pill-unlinked); color:var(--error); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-family:var(--font-mono); flex-shrink:0; }
.m-iv-danger-row__text { flex:1; }
.m-iv-danger-row__title { font-size:var(--fs-sm); color:var(--error-text); font-weight:500; }
.m-iv-danger-row__sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }
.m-iv-danger-row__chevron { font-size:var(--fs-xs); color:var(--text-tertiary); }

/* ---- Reconciliation footer ---- */
.m-iv-recon-foot { margin:0 var(--gutter) 12px; }
.m-iv-recon-foot__section { padding:10px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); }
.m-iv-recon-foot__section:first-child { border-radius:8px 8px 0 0; }
.m-iv-recon-foot__section:last-child { border-radius:0 0 8px 8px; border-top:none; }
.m-iv-recon-foot__section:only-child { border-radius:8px; }
.m-iv-recon-foot__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.m-iv-recon-foot__row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.m-iv-recon-foot__row + .m-iv-recon-foot__row { margin-top:4px; }
.m-iv-recon-foot__key { font-size:var(--fs-xs); color:var(--text-secondary); }
.m-iv-recon-foot__val { font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); }
.m-iv-recon-foot__inputs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.m-iv-recon-foot__derived { margin-top:6px; font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--text-tertiary); }
.m-iv-recon-foot__diff { padding:10px var(--gutter); border-radius:0 0 8px 8px; }
.m-iv-recon-foot__diff--ok { background:var(--m-iv-recon-ok-bg); border:1px solid var(--m-iv-recon-ok-border); border-top:none; }
.m-iv-recon-foot__diff--off { background:var(--m-iv-recon-off-bg); border:1px solid var(--m-iv-recon-off-border); border-top:none; }
.m-iv-recon-foot__diff--empty { background:var(--bg-elevated); border:1px solid var(--border); border-top:none; }
.m-iv-recon-foot__diff-text { font-size:var(--fs-xs); font-weight:500; }
.m-iv-recon-foot__diff-text--ok { color:var(--success); }
.m-iv-recon-foot__diff-text--off { color:var(--error); }
.m-iv-recon-foot__diff-text--empty { color:var(--text-tertiary); }
.m-iv-recon-foot__save-status { font-size:var(--fs-xs); font-family:var(--font-mono); margin-top:4px; }

/* ---- Stock update section ---- */
.m-iv-stock-section { margin:0 var(--gutter) 12px; padding:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; }
.m-iv-stock-section__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:4px; }
.m-iv-stock-section__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-bottom:10px; }
.m-iv-stock-section__confirmed { font-size:var(--fs-xs); color:var(--success); font-family:var(--font-mono); margin-bottom:8px; padding:6px 8px; background:var(--m-iv-stock-confirm-bg); border:1px solid var(--m-iv-stock-confirm-border); border-radius:6px; }
.m-iv-stock-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:10px var(--gutter); background:var(--bg-elevated); border:1px solid var(--border); border-radius:8px; margin-bottom:10px; font-family:var(--font-mono); }
.m-iv-stock-summary__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; }
.m-iv-stock-summary__val { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; margin-top:2px; }
.m-iv-stock-summary__val--ok { color:var(--success); }
.m-iv-stock-summary__val--warn { color:var(--warning); }
.m-iv-stock-line { padding:9px 10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.m-iv-stock-line__info { flex:1; min-width:0; }
.m-iv-stock-line__name { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-stock-line__desc { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }
.m-iv-stock-line__right { text-align:right; flex-shrink:0; }
.m-iv-stock-line__qty { font-size:var(--fs-sm); color:var(--success); font-family:var(--font-mono); font-weight:500; }
.m-iv-stock-gate { padding:10px var(--gutter); border-radius:8px; margin-bottom:10px; }
.m-iv-stock-gate--warning { background:color-mix(in srgb, var(--warning) 8%, transparent); border:1px solid color-mix(in srgb, var(--warning) 25%, transparent); }
.m-iv-stock-gate--error { background:var(--m-iv-danger-bg); border:1px solid var(--m-iv-danger-border); }
.m-iv-stock-gate__title { font-size:var(--fs-xs); color:var(--warning); font-weight:500; margin-bottom:4px; }
.m-iv-stock-gate__reason { font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; }
.m-iv-stock-gate__hint { font-size:var(--fs-xs); color:var(--error); line-height:1.5; }
.m-iv-stock-footer { display:flex; gap:8px; margin-top:12px; }
.m-iv-stock-footer__btn { flex:1; padding:11px 0; border-radius:6px; font-size:var(--fs-sm); font-weight:500; cursor:pointer; border:none; text-align:center; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.m-iv-stock-footer__btn--primary { background:var(--accent); color:var(--accent-contrast); flex:1.6; font-size:var(--fs-sm); font-weight:600; }
.m-iv-stock-footer__btn--danger { background:var(--error); color:var(--error-contrast); flex:1.6; font-size:var(--fs-sm); font-weight:600; }
.m-iv-stock-footer__btn--ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border-strong); flex:1; }
.m-iv-stock-footer__btn--full { flex:1; }
.m-iv-stock-footer__btn--wide { width:100%; }
.m-iv-stock-footer__note { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); text-align:center; margin-top:8px; }

/* ---- Deactivate section (two-step) ---- */
.m-iv-delete-section { margin:0 var(--gutter) 12px; padding:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--m-iv-danger-border); border-radius:8px; }
.m-iv-delete-section__label { font-size:var(--fs-2xs); color:var(--error); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:8px; }
.m-iv-deact-icon { width:36px; height:36px; border-radius:8px; margin-bottom:12px; background:color-mix(in srgb, var(--error) 12%, transparent); border:1px solid color-mix(in srgb, var(--error) 40%, transparent); color:var(--error); display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); font-family:var(--font-mono); }
.m-iv-deact-title { font-size:var(--fs-xl); color:var(--text-primary); font-family:var(--font-heading); font-weight:500; }
.m-iv-deact-body { font-size:var(--fs-sm); color:var(--text-secondary); margin-top:8px; line-height:1.5; }
.m-iv-deact-body b { color:var(--text-primary); font-weight:500; }
.m-iv-deact-note { margin-top:12px; padding:8px 10px; background:var(--bg-base); border-radius:6px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-deact-kicker { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:4px; }
.m-iv-deact-kicker + .m-iv-deact-title { font-size:var(--fs-lg); }
.m-iv-deact-reasons { display:flex; flex-direction:column; gap:5px; margin-top:14px; }
/* Bound ONLY the reason list so the whole Step-2 panel (title/hint + reasons +
   note + Back/Deactivate footer) fits BETWEEN the fixed top header and the fixed
   bottom chrome (stated-totals bar + bottom-nav), with the reasons scrolling in
   their own box and the Back/Deactivate footer always reachable (Charles-approved
   reason-list-only approach, a11y wave 5). The 500px subtrahend = the fixed chrome
   + the panel's non-reason parts (title/hint + note + footer); live-verified
   panel-fits-gap at 390x580 / 390x667 / 414x900. `dvh` tracks the mobile URL bar;
   the 96px floor keeps >=2 reasons visible on very short viewports. NOTE: the
   subtrahend is coupled to the fixed-chrome heights (incl. this wave's taller
   stated-totals inputs) — see the card For-the-Inbox for the robustness follow-up. */
#iv-deact-reasons { max-height:max(96px, calc(100dvh - 500px)); overflow-y:auto; overscroll-behavior:contain; }
.m-iv-deact-reason { padding:10px var(--gutter); background:var(--bg-base); border:1px solid var(--border); border-radius:7px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.m-iv-deact-reason--selected { background:color-mix(in srgb, var(--accent) 8%, transparent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.m-iv-deact-reason__radio { width:14px; height:14px; border-radius:7px; border:1px solid var(--border-strong); background:transparent; flex-shrink:0; }
.m-iv-deact-reason--selected .m-iv-deact-reason__radio { border-color:var(--accent); background:var(--accent); }
.m-iv-deact-reason__label { font-size:var(--fs-sm); color:var(--text-primary); }
/* The reason radio is visually-hidden-but-focusable, so its focus ring must
   surface on the wrapping label (wave-3 :focus-within house pattern, as used by
   the pdf-strip labels above). Keyboard focus into the reason group is otherwise
   invisible (Codex wave-4 r1 blocker). */
.m-iv-deact-reason:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.m-iv-deact-footer { display:flex; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }

/* ---- Cancel divergence page ---- */
.m-iv-diverge-page { padding:16px var(--gutter); max-width:500px; margin:0 auto; }
.m-iv-diverge-header { margin-bottom:12px; }
.m-iv-diverge-header__kicker { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; }
.m-iv-diverge-header__title { font-size:var(--fs-lg); color:var(--text-primary); font-family:var(--font-heading); font-weight:500; margin-top:2px; }
.m-iv-diverge-warn { padding:10px var(--gutter); background:color-mix(in srgb, var(--warning) 8%, transparent); border:1px solid color-mix(in srgb, var(--warning) 25%, transparent); border-radius:8px; margin-bottom:12px; }
.m-iv-diverge-warn__title { font-size:var(--fs-xs); color:var(--warning); font-weight:500; margin-bottom:4px; }
.m-iv-diverge-warn__body { font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; }
.m-iv-diverge-cols { display:grid; grid-template-columns:1.4fr 0.7fr 0.7fr 0.7fr; gap:6px; padding:0 0 8px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.m-iv-diverge-col { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; }
.m-iv-diverge-col--right { text-align:right; }
.m-iv-diverge-row { display:grid; grid-template-columns:1.4fr 0.7fr 0.7fr 0.7fr; gap:6px; padding:9px 0; border-bottom:1px solid var(--border); align-items:center; }
.m-iv-diverge-row__name { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-diverge-row__diff { font-size:var(--fs-2xs); font-family:var(--font-mono); margin-top:2px; }
.m-iv-diverge-row__diff--up { color:var(--error); }
.m-iv-diverge-row__diff--down { color:var(--success); }
.m-iv-diverge-row__cost { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); text-align:right; }
.m-iv-diverge-row__cost--warn { color:var(--warning); font-weight:500; }
.m-iv-diverge-row__cost--primary { color:var(--text-primary); font-weight:500; }
.m-iv-diverge-footer { margin-top:16px; }
.m-iv-diverge-footer__note { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-bottom:10px; text-align:center; }

/* ---- Stock section helpers ---- */
.m-iv-stock-section__chip { margin-top:8px; font-size:var(--fs-xs); color:var(--success); font-family:var(--font-mono); }
.m-iv-stock-gate--inline { margin:0 var(--gutter) 8px; }
.m-iv-deact-blocked { font-size:var(--fs-xs); color:var(--text-tertiary); }
.m-iv-deact-hint { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:4px; }
.m-iv-deact-note-label { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.m-iv-deact-note-input { resize:none; font-size:var(--fs-sm); }
.m-iv-deact-note-wrap { margin-top:12px; }

/* ---- PDF strip dismiss (×) button ---- */
.m-iv-pdf-strip__dismiss { background:none; border:none; padding:6px 8px; font-size:var(--fs-lg); line-height:1; color:var(--text-tertiary); cursor:pointer; flex-shrink:0; }
.m-iv-pdf-strip__dismiss:active { color:var(--error); }

/* ---- PDF viewer sheet (z-index 910/911: deliberately above session alerts at 900) ---- */
.m-iv-pdfview__scrim { position:fixed; inset:0; background:var(--overlay); z-index:910; }
.m-iv-pdfview { position:fixed; left:0; right:0; bottom:0; z-index:911; max-height:88vh; background:var(--m-iv-pdfview-bg); border-radius:16px 16px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,0.5); display:flex; flex-direction:column; overflow:hidden; }
/* Desktop (>=1280, unified line): a CENTERED, contained modal — not a full-width
   sheet (Charles 2026-07-05: "no point it takes the entire screen"). The scrim behind
   keeps the page context visible. Below 1280 it stays the mobile bottom sheet. */
@media (min-width: 1280px) {
  .m-iv-pdfview {
    top: 6vh; bottom: 6vh; left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(880px, 88vw); max-height: none;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  }
  .m-iv-pdfview__grabber { display: none; }
}
.m-iv-pdfview__grabber { display:flex; justify-content:center; padding:10px 0 4px; background:var(--m-iv-pdfview-bg); }
.m-iv-pdfview__grabber-bar { width:36px; height:4px; border-radius:2px; background:var(--border-strong); }
.m-iv-pdfview__header { display:flex; align-items:flex-start; justify-content:space-between; padding:4px var(--gutter) 8px; background:var(--m-iv-pdfview-bg); }
.m-iv-pdfview__header-left { flex:1; min-width:0; }
.m-iv-pdfview__kicker { font-size:var(--fs-2xs); font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; }
.m-iv-pdfview__page-info { font-size:var(--fs-xs); color:var(--text-secondary); margin-top:2px; }
.m-iv-pdfview__close { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--text-secondary); font-size:var(--fs-2xl); cursor:pointer; flex-shrink:0; border-radius:6px; min-height:44px; }
.m-iv-pdfview__close:active { background:rgba(255,255,255,0.06); }
/* Shared drawer close × (conf-stock / conf-activity / stock-confirm). Global (not
   page-local) because invoice-peek.js relocates #iv-stock-confirm-drawer onto the
   hub, which does not load invoice_detail.html's extra_css — a <button> here would
   otherwise render with native UA chrome. Now a <button>; reset native chrome so it
   stays visually identical to the old <span>. */
.d-iv-stock-close { background:none; border:0; font:inherit; font-size:18px; color:var(--text-tertiary); cursor:pointer; line-height:1; padding:4px; }
.d-iv-stock-close:hover { color:var(--text-primary); }
.m-iv-pdfview__canvas-wrap { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; position:relative; background:var(--m-iv-pdfview-bg); display:flex; flex-direction:column; align-items:center; touch-action:pan-x pan-y; }
.m-iv-pdfview__canvas-wrap canvas { display:block; margin:20px auto 0; box-shadow:var(--m-iv-pdfview-page-shadow); }
.m-iv-pdfview__loading { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:var(--fs-sm); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-pdfview__error { padding:24px var(--gutter); text-align:center; }
.m-iv-pdfview__error-msg { font-size:var(--fs-sm); color:var(--text-tertiary); margin-bottom:12px; }
.m-iv-pdfview__error-link { font-size:var(--fs-xs); color:var(--accent); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.m-iv-pdfview__controls { display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px var(--gutter) 20px; background:var(--m-iv-pdfview-bg); position:relative; }
.m-iv-pdfview__save-btn { position:absolute; right:16px; top:10px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--bg-surface); border:1px solid var(--border); border-radius:5px; font-size:var(--fs-lg); color:var(--text-secondary); text-decoration:none; cursor:pointer; }
.m-iv-pdfview__save-btn:active { background:var(--bg-elevated); }
.m-iv-pdfview__zoom { display:flex; align-items:center; gap:6px; }
.m-iv-pdfview__zoom-btn { padding:6px 10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:5px; font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); cursor:pointer; min-height:32px; display:flex; align-items:center; justify-content:center; }
.m-iv-pdfview__zoom-btn:active { background:var(--bg-elevated); }
.m-iv-pdfview__nav { display:flex; align-items:center; gap:10px; }
.m-iv-pdfview__nav-btn { padding:6px 10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:5px; font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); cursor:pointer; min-height:32px; display:flex; align-items:center; }
.m-iv-pdfview__nav-btn:disabled { opacity:0.4; cursor:not-allowed; }
.m-iv-pdfview__nav-btn:active:not(:disabled) { background:var(--bg-elevated); }
.m-iv-pdfview__nav-info { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }

/* ---- Mini PDF reference viewer (add-line drawer) ---- */
.m-iv-pdfref { margin-bottom:8px; }
.m-iv-pdfref__frame { position:relative; height:160px; border-radius:5px; overflow:hidden; background:var(--bg-elevated); border:1px solid var(--border-strong); box-shadow:inset 0 2px 14px rgba(0,0,0,0.35), 0 6px 22px rgba(0,0,0,0.45); touch-action:none; cursor:grab; user-select:none; }
.m-iv-pdfref__frame.is-panning { cursor:grabbing; }
.m-iv-pdfref__stage { position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
.m-iv-pdfref__stage canvas { display:block; max-width:none; }
.m-iv-pdfref__loading { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-iv-pdfref__error { padding:12px var(--gutter); font-size:var(--fs-xs); color:var(--text-tertiary); text-align:center; }
.m-iv-pdfref__error-link { font-size:var(--fs-xs); color:var(--accent); text-decoration:none; margin-left:6px; }
.m-iv-pdfref__controls { display:flex; align-items:center; gap:6px; margin-top:4px; }
.m-iv-pdfref__zoom { display:flex; align-items:center; gap:1px; background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; padding:1px; }
.m-iv-pdfref__zbtn { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:transparent; border:none; border-radius:6px; color:var(--text-secondary); font-family:var(--font-mono); font-size:var(--fs-sm); cursor:pointer; }
.m-iv-pdfref__zbtn:active { background:var(--bg-elevated); }
.m-iv-pdfref__zlevel { min-width:38px; height:28px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-tertiary); cursor:pointer; background:transparent; border:none; }
.m-iv-pdfref__rotate { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; color:var(--text-secondary); font-size:var(--fs-base); cursor:pointer; }
.m-iv-pdfref__rotate:active { background:var(--bg-elevated); }
.m-iv-pdfref__spacer { flex:1; }
.m-iv-pdfref__open { background:none; border:none; padding:0 2px; height:28px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent); cursor:pointer; }
.m-iv-pdfref__cap { font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--text-tertiary); margin-left:2px; }
.m-iv-pdfref__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.m-iv-pdfref__bar { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.m-iv-pdfref__img { display:block; max-width:none; }
.m-iv-pdfref__nav { display:flex; align-items:center; gap:2px; margin-left:auto; }
.m-iv-pdfref__page-info { font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--text-tertiary); }
.m-iv-pdfview__overlay { position:absolute; top:0; left:0; pointer-events:none; }
.m-iv-addline-zero-warn { margin-top:5px; padding:6px 9px; background:color-mix(in srgb, var(--warning) 10%, transparent); border:1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius:5px; font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--warning); }

/* ---- Add-line card sections (card-style.md) ---- */
.m-iv-addline-card { margin:0 0 8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-iv-addline-card__row { padding:6px 10px; }
.m-iv-addline-card__row + .m-iv-addline-card__row { border-top:1px solid var(--border); }
.m-iv-addline-card__row .m-iv-field { margin-bottom:0; }
.m-iv-addline-card__row .m-iv-field__label { margin-bottom:2px; }
.m-iv-addline-card__row .m-iv-input { padding:7px 10px; }
.m-iv-addline-card__row select.m-iv-input { padding:7px 10px; }
.m-iv-addline-section { font-size:var(--fs-2xs); color:var(--text-tertiary); font-weight:500; text-transform:uppercase; letter-spacing:0.6px; margin:8px 0 4px; }
.m-iv-addline-qty-hint { padding:5px 10px; font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--text-tertiary); border-top:1px solid var(--border); }
.m-iv-addline-qty-hint--warn { color:var(--warning); }
.m-iv-addline-save--disabled { opacity:0.45; pointer-events:none; }
.m-iv-addline-change { font-size:var(--fs-xs); min-height:28px; }

/* ---- Divergence page helpers ---- */
.m-iv-diverge-back { margin-bottom:12px; }
.m-iv-diverge-back a { font-size:var(--fs-sm); color:var(--text-tertiary); text-decoration:none; }
.m-iv-diverge-footer__form { flex:1.6; margin:0; }

/* ---- Detail line list ---- */
.m-iv-line-list { display:flex; flex-direction:column; gap:6px; padding:0 var(--gutter); margin-bottom:12px; }
.m-iv-line-empty { padding:14px var(--gutter); background:var(--bg-surface); border:1px dashed var(--border-strong); border-radius:10px; text-align:center; margin:0 var(--gutter) 12px; }
.m-iv-line-empty__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-iv-line-empty__sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:4px; line-height:1.5; }
.m-iv-line-empty--add { cursor:pointer; padding:10px var(--gutter); }
.m-iv-line-empty--add:hover { border-color:var(--accent); background:var(--accent-bg, color-mix(in srgb, var(--accent) 6%, transparent)); }
.m-iv-line-empty--add .m-iv-addline-dashed__plus { font-size:16px; color:var(--accent); margin-bottom:2px; }
.m-iv-line-empty--add .m-iv-line-empty__title { font-size:var(--fs-xs); }
.m-iv-line-empty--add .m-iv-line-empty__sub { font-size:10px; margin-top:2px; }

/* ---- Auto-link chip ---- */
.m-iv-autolink-chip { margin:0 var(--gutter) 8px; padding:8px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; font-size:var(--fs-xs); color:var(--text-tertiary); display:flex; align-items:center; gap:6px; }
.m-iv-autolink-chip__count { font-family:var(--font-mono); color:var(--text-secondary); font-weight:500; }

/* drawer-regularization 10: the m-iv-edit-sheet chrome family was RETIRED here — it
   had exactly two consumers (invoice_detail.html, migrated by prompt 04; and
   invoice_ocr_review.html's three OCR sheets, migrated by THIS prompt). Both now ride
   the shared m-sl-drawer chrome + drawer.js engine, so the family + its `iv-edit`
   guardrail token are gone (repo-wide grep proved zero remaining consumers). The two
   small OCR content classes below rehome the in-sheet × close button and the in-body
   kicker labels that previously borrowed m-iv-edit-sheet__close / __kicker. */
.m-ocr-close { font-size:18px; color:var(--text-tertiary); cursor:pointer; background:none; border:none; padding:4px; }
.m-ocr-kicker { font-size:9px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; }

/* ---- Qty summary (edit sheet) ---- */
.m-iv-qty-summary { padding:6px 9px; margin-top:4px; background:var(--m-iv-qty-ok-bg); border:1px solid var(--m-iv-qty-ok-border); border-radius:5px; font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); }
.m-iv-qty-summary b { color:var(--text-primary); }

/* ---- Back link ---- */
.m-iv-back-link { margin:0 var(--gutter) 12px; }
.m-iv-back-link a { display:block; text-align:center; padding:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; color:var(--text-secondary); text-decoration:none; font-size:var(--fs-sm); }

/* Spacer so content isn't hidden behind the fixed line-totals footer */
.m-iv-detail-page { padding-bottom:8px; }

/* ---- Invoice banner row — chip + hint inline ---- */
.m-iv-banner-row { display:flex; align-items:center; gap:6px; margin-top:4px; }
.m-iv-banner-row__hint { font-size:var(--fs-xs) !important; color:var(--text-tertiary) !important; font-style:italic; font-family:var(--font-body); line-height:1.3; }

/* ---- Confirmed invoice layout (04b + 04c drawer/tabs) ---- */
.m-iv-conf-header { padding:14px var(--gutter); background:var(--bg-surface); border-bottom:1px solid var(--border); }
.m-iv-conf-header__kicker { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.7px; font-weight:600; }

/* Source badge row */
.m-iv-conf-source { margin-top:10px; display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; }
.m-iv-conf-source--ocr { background:var(--m-iv-conf-ocr-bg); border:1px solid var(--m-iv-conf-ocr-border); }
.m-iv-conf-source--manual { background:var(--m-iv-conf-manual-bg); border:1px solid var(--border); }
.m-iv-conf-source__chip { font-size:var(--fs-2xs); font-family:var(--font-mono); font-weight:600; letter-spacing:0.6px; padding:2px 6px; border-radius:3px; flex-shrink:0; }
.m-iv-conf-source__chip--ocr { background:var(--info); color:#0d1418; }
.m-iv-conf-source__chip--manual { background:var(--text-secondary); color:var(--bg-base); }
/* a11y 2026-07-05: this light OCR chip sits INSIDE .m-iv-conf-source--ocr (itself info@10%),
   so a 20% chip tint composites to info@~28% over white and info-text drops to 4.12:1. Scope
   to 10% (chip composites to ~19% over white => 4.60:1). Same host-composite class as the
   peek/sum-chip forks — the tint must account for the tinted CONTAINER it stacks on. */
html.theme-light .m-iv-conf-source__chip--ocr,
body.theme-light .m-iv-conf-source__chip--ocr { background:color-mix(in srgb, var(--info) 10%, transparent); color:var(--info-text); border:1px solid var(--info); }
.m-iv-conf-source__text { font-size:var(--fs-xs); color:var(--text-secondary); flex:1; }
.m-iv-conf-source__link { font-size:var(--fs-xs); color:var(--accent); font-family:var(--font-mono); cursor:pointer; background:none; border:none; padding:4px 0; flex-shrink:0; }

/* Status pills */
.m-iv-conf-pills { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.m-iv-conf-pill { padding:3px 8px; border-radius:3px; font-size:var(--fs-xs); font-family:var(--font-mono); letter-spacing:0.3px; }
.m-iv-conf-pill--success { color:var(--success-text); background:var(--m-iv-conf-pill-success-bg); border:1px solid var(--success); }
.m-iv-conf-pill--info { color:var(--info-text); background:var(--m-iv-conf-pill-info-bg); border:1px solid var(--info); }
.m-iv-conf-pill--muted { color:var(--text-secondary); background:var(--m-iv-conf-pill-muted-bg); border:1px solid var(--text-tertiary); }
.m-iv-conf-pill--error { color:var(--error-text); background:var(--m-iv-conf-pill-error-bg); border:1px solid var(--error); }
.m-iv-conf-pill--warning { color:var(--warning-text); background:var(--m-iv-conf-pill-warning-bg); border:1px solid var(--warning); }

/* Totals strip — pinned footer above nav bar, matches unconfirmed m-iv-line-totals */
.m-iv-conf-totals { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--border-strong); background:var(--bg-elevated); position:fixed; bottom:60px; left:0; right:0; z-index:39; }
.m-iv-conf-totals__cell { padding:8px 6px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.m-iv-conf-totals__cell:not(:last-child) { border-right:1px solid var(--border); }
.m-iv-conf-totals__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:4px; line-height:1; margin-bottom:3px; height:15px; }
.m-iv-conf-totals__val { font-size:var(--fs-sm); color:var(--text-primary); font-family:var(--font-mono); font-weight:500; line-height:1; margin-top:3px; }
.m-iv-conf-totals__val--bold { font-weight:600; }
@media (min-width: 768px) {
  .m-iv-line-totals, .m-iv-conf-totals { bottom:0; left:var(--d-rail-w, 64px); }
}
/* B7: the totals strips are FIXED overlays (~50px tall). Below 768 the shared
   .page-content bottom padding (140px, layout.css) clears bar + bottom nav;
   at >=768 .page-content pads only 24px while the bar moves to bottom:0 — so
   the page's last in-flow control ("Edit invoice") rendered BEHIND the bar.
   Reserve the bar's height on the detail page. The >=1024 manual-entry
   workspace (.d-iv-me-page) un-fixes the bar (position:static, page
   overflow:hidden) and must NOT carry the reservation. */
@media (min-width: 768px) {
  .m-iv-detail-page { padding-bottom:64px; }
  .d-iv-me-page .m-iv-detail-page { padding-bottom:0; }
}

/* Meta grid */
.m-iv-conf-meta { padding:10px var(--gutter) 4px; display:grid; grid-template-columns:1fr 1fr; row-gap:8px; column-gap:12px; border-bottom:1px solid var(--border); }
.m-iv-conf-meta__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; }
.m-iv-conf-meta__val { font-size:var(--fs-sm); color:var(--text-secondary); margin-top:2px; font-family:var(--font-mono); }
/* B9: notes cell spans the meta grid (read-only, desktop-panel parity) */
.m-iv-conf-meta__notes { grid-column:1 / -1; }
.m-iv-conf-meta__notes .m-iv-conf-meta__val { font-family:inherit; }

/* ---- Invoice peek drawer body (05 B2 peek-hybrid) ----
   Read-only summary rendered inside the shared m-sl-drawer__body (which already
   provides 16px side padding). Pills reuse the m-iv-conf-pill chips; these
   classes cover the meta / totals / recon / line-preview / open-link bits.
   Chrome is NOT redefined here — only body content. */
.m-iv-peek { padding:4px 0 0; }
.m-iv-peek__card { background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:10px; padding:12px 14px; margin-bottom:10px; box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.m-iv-peek__card .m-iv-conf-pills { margin-bottom:10px; }
.m-iv-peek__meta { display:grid; grid-template-columns:1fr 1fr; row-gap:8px; column-gap:12px; }
.m-iv-peek__meta-label { font-size:9px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; }
.m-iv-peek__meta-val { font-size:12px; color:var(--text-secondary); margin-top:2px; font-family:var(--font-mono); }
.m-iv-peek__totals { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:0; font-family:var(--font-mono); }
.m-iv-peek__total { display:inline-flex; flex-direction:column; gap:2px; min-width:0; }
.m-iv-peek__total-label { font-size:9px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.4px; }
.m-iv-peek__total-val { font-size:11.5px; color:var(--text-primary); font-weight:500; }
.m-iv-peek__recon { display:flex; align-items:baseline; gap:6px; padding:8px 10px; border-radius:6px; font-size:11.5px; line-height:1.4; }
.m-iv-peek__recon-icon { font-size:12px; flex-shrink:0; }
/* a11y 2026-07-05: recon chips used bare semantic text on the tint (failed AA on every host,
   worst warning 2.53:1 light) — switched to the readable *-text tokens like the status pills. */
.m-iv-peek__recon--ok { color:var(--success-text); background:var(--m-iv-conf-pill-success-bg); border:1px solid var(--success); }
.m-iv-peek__recon--bad { color:var(--error-text); background:var(--m-iv-conf-pill-error-bg); border:1px solid var(--error); }
.m-iv-peek__recon--hint { color:var(--warning-text); background:var(--m-iv-conf-pill-warning-bg); border:1px solid var(--warning); }
.m-iv-peek__lines-card { padding:12px 0; }
.m-iv-peek__lines-title { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; padding:0 14px 8px; }
.m-iv-peek__line-list { padding:0; gap:0; }
.m-iv-peek__line-list .lg-band__head { padding:6px 14px; }
.m-iv-peek__line-list .lg-cat__head { padding:5px 14px 5px 24px; }
.m-iv-peek__line-list .lg-cat__body { padding:0 14px 0 24px; }
.m-iv-peek__line-list .lg-sub { padding-left:10px; }
.m-iv-peek__group-line { display:flex; align-items:baseline; gap:8px; padding:5px 0; border-bottom:1px dashed var(--border); }
.m-iv-peek__group-line:last-child { border-bottom:none; }
.m-iv-peek__group-line-name { font-size:var(--fs-sm); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.m-iv-peek__group-line-qty { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); flex-shrink:0; white-space:nowrap; min-width:50px; text-align:right; }
.m-iv-peek__group-line-amt { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); flex-shrink:0; white-space:nowrap; min-width:55px; text-align:right; }
.m-iv-peek__empty { padding:14px 0; font-size:12px; color:var(--text-tertiary); text-align:center; }
.m-iv-peek__open-wrap { position:sticky; bottom:-20px; z-index:2; padding:8px 0 20px; background:var(--bg-base); }
.m-iv-peek__open { display:block; width:100%; padding:9px; text-align:center; font-size:13px; font-weight:500; color:var(--text-secondary); background:transparent; border:1px solid var(--border); border-radius:6px; text-decoration:none; box-sizing:border-box; }
#invoice-peek-drawer .m-sl-drawer__panel { background:var(--bg-base); }

/* Activity trail */
.m-iv-conf-activity-section { padding:14px var(--gutter) 6px; }
.m-iv-conf-activity-section__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.m-iv-conf-activity { background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.7; }
.m-iv-conf-activity__row { display:flex; align-items:baseline; gap:8px; }
.m-iv-conf-activity__time { color:var(--text-tertiary); width:38px; flex-shrink:0; }
.m-iv-conf-activity__who { color:var(--text-secondary); width:50px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-iv-conf-activity__what { color:var(--text-primary); flex:1; }
.m-iv-conf-activity__loading { font-size:var(--fs-xs); color:var(--text-tertiary); }
.m-iv-conf-activity__empty { font-size:var(--fs-xs); color:var(--text-tertiary); }
.m-iv-conf-activity__more { font-size:var(--fs-xs); color:var(--accent); background:none; border:none; cursor:pointer; padding:4px 0; margin-top:4px; font-family:var(--font-mono); }

/* Danger zone */
.m-iv-conf-danger { padding:14px var(--gutter) 18px; }
.m-iv-conf-danger__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.m-iv-conf-danger__rows { display:flex; flex-direction:column; gap:6px; }
.m-iv-danger-row--disabled { cursor:default; opacity:0.6; }
.m-iv-conf-danger__title-muted { color:var(--text-tertiary); }

/* B8: mobile confirmed mismatch banner + resolve actions (reuses the peek
   recon strip + conf pill chrome; buttons sized to the compact 28px floor). */
.m-iv-conf-recon { margin:10px var(--gutter) 0; }
.m-iv-conf-resolve { display:flex; gap:8px; padding:8px var(--gutter) 0; }
.m-iv-conf-resolve .m-iv-conf-pill { min-height:28px; padding:5px 12px; font-family:var(--font-mono); font-size:var(--fs-xs); cursor:pointer; }

/* Footer */
.m-iv-conf-footer { padding:12px var(--gutter); margin-top:auto; }
.m-iv-conf-footer__btn { display:block; width:100%; padding:12px var(--gutter); text-align:center; font-size:var(--fs-base); font-weight:600; color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; text-decoration:none; min-height:44px; box-sizing:border-box; }
/* B3/M3: confirmed view carries a locked-edits explainer instead of a dead-end Edit link */
.m-iv-conf-footer__hint { font-size:var(--fs-xs); color:var(--text-tertiary); text-align:center; padding:4px 0; }

/* Confirmed layout: line cards are read-only */
.m-iv-conf-header ~ .m-iv-conf-tab-panel .m-iv-line-card { cursor:default; }

/* ---- Confirmed layout structure (04c) ---- */
.m-iv-conf-page { display:flex; flex-direction:column; min-height:calc(100vh - 48px - 52px - 60px); }
.m-iv-conf-header__top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.m-iv-conf-header__supplier { margin-top:2px; color:var(--text-primary); font-family:var(--font-heading); font-size:var(--fs-lg); font-weight:500; }

/* Confirmed tabs */
.m-iv-conf-tabs { display:flex; padding:0 var(--gutter); background:var(--bg-surface); border-bottom:1px solid var(--border); }
.m-iv-conf-tab { margin:0 0 -1px; padding:10px var(--gutter) 9px; color:var(--text-tertiary); background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; font:inherit; font-size:var(--fs-sm); }
.m-iv-conf-tab--active { color:var(--text-primary); border-bottom-color:var(--accent); font-weight:500; }
.m-iv-conf-tab-panel[hidden] { display:none; }
.m-iv-conf-tab-panel .m-iv-detail-section { padding-top:10px; }

/* ---- Confirmed Products tab ---- */
.m-iv-conf-products-summary { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:10px var(--gutter) 8px; padding:10px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; font-family:var(--font-mono); }
.m-iv-conf-products-summary__cell { min-width:0; }
.m-iv-conf-products-summary__label { color:var(--text-tertiary); font-size:var(--fs-2xs); letter-spacing:0.5px; text-transform:uppercase; }
.m-iv-conf-products-summary__val { margin-top:2px; color:var(--text-primary); font-size:var(--fs-sm); font-weight:500; }
.m-iv-conf-products-summary__val--ok { color:var(--success); }
.m-iv-conf-products-note { margin:0 var(--gutter) 8px; color:var(--warning); font-family:var(--font-mono); font-size:var(--fs-xs); }
.m-iv-conf-products-section__label { padding:6px var(--gutter) 8px; color:var(--text-tertiary); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; letter-spacing:0.8px; text-transform:uppercase; }
/* Row shell now comes from the shared lc-item-row/lr-row contract (.lc-grid--iv-products /
   .lc-grid--iv-stock-preview above) — these are colour-only tints on the shared lc-item-num/lr-num cells. */
.m-iv-conf-products-row__delta { color:var(--success); font-weight:500; }
.m-iv-conf-products-row__cost { color:var(--text-tertiary); }
.m-iv-conf-products-empty { margin:0 var(--gutter) 8px; padding:14px var(--gutter); background:var(--bg-surface); border:1px dashed var(--border-strong); border-radius:8px; color:var(--text-tertiary); font-size:var(--fs-sm); text-align:center; }

/* ── Shared tab strip (moved from recipes.html — used by product, menu-item, recipe drawers) ── */
.m-rd-tabs { display:flex; border-bottom:1px solid var(--border); background:var(--bg-base); flex-shrink:0; }
.m-rd-tabs__tab { flex:1; text-align:center; padding:12px 4px 11px; font-size:var(--fs-sm); font-weight:400; color:var(--text-tertiary); border-bottom:2px solid transparent; font-family:var(--font-heading); letter-spacing:0.2px; cursor:pointer; position:relative; top:1px; min-height:44px; display:flex; align-items:center; justify-content:center; }
.m-rd-tabs__tab--active { font-weight:500; color:var(--text-primary); border-bottom-color:var(--accent); }

/* ── Activity feed (canonical card — used by menu-item Activity, recipe Versions) ── */
.m-act-header { padding:14px var(--gutter) 4px; }
.m-act-header__title { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-act-header__intro { font-size:var(--fs-xs); color:var(--text-secondary); margin-top:5px; line-height:1.45; }
.m-act-row { padding:11px var(--gutter); display:flex; gap:12px; align-items:flex-start; border-top:1px solid var(--border); }
.m-act-row--link { cursor:pointer; }
.m-act-dot { width:7px; height:7px; border-radius:4px; flex-shrink:0; margin-top:5px; }
.m-act-dot--cost { background:var(--warning); }
.m-act-dot--price { background:var(--accent); }
.m-act-dot--edit { background:var(--text-secondary); }
.m-act-dot--ingredient { background:var(--success); }
.m-act-dot--yield { background:var(--warning); }
.m-act-dot--created { background:var(--info); }
.m-act-ver { font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:500; color:var(--text-tertiary); padding:2px 6px; background:var(--bg-surface); border:1px solid var(--border); border-radius:5px; flex-shrink:0; margin-top:1px; }
.m-act-ver--current { color:var(--accent); }
.m-act-body { flex:1; min-width:0; }
.m-act-current { font-size:var(--fs-2xs); font-family:var(--font-mono); font-weight:500; letter-spacing:0.4px; text-transform:uppercase; padding:1px 6px; border-radius:3px; background:var(--accent); color:var(--bg-base); margin-bottom:5px; display:inline-block; }
.m-act-chg { font-size:var(--fs-sm); color:var(--text-primary); line-height:1.4; }
.m-act-meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }
.m-act-chevron { font-size:var(--fs-sm); color:var(--text-tertiary); flex-shrink:0; align-self:center; }
.m-act-empty { padding:52px 32px; text-align:center; }
.m-act-empty__icon { width:56px; height:56px; border-radius:12px; background:var(--bg-elevated); border:1px dashed var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:var(--fs-display); color:var(--text-tertiary); margin:0 auto 16px; }
.m-act-empty__title { font-size:var(--fs-lg); font-weight:500; font-family:var(--font-heading); margin-bottom:8px; }
.m-act-empty__sub { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.55; max-width:280px; margin:0 auto; }
.m-pd-wac-card--expanded { background:color-mix(in srgb, var(--accent) 6%, transparent); }

/* ── Product Stock tab ── */
.m-pd-stock-glance { padding:0; border-bottom:1px solid var(--border); }
.m-pd-stock-glance--tight { border-top:1px solid var(--border); margin-top:0; }
.m-pd-stock-glance__header { padding:12px var(--gutter) 2px; }
.m-pd-stock-glance__header span { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-pd-stock-glance__grid { display:grid; grid-template-columns:1fr 1fr 1fr; }
.m-pd-stock-glance__cell { padding:14px var(--gutter); text-align:center; }
.m-pd-stock-glance__cell--mid { border-left:1px solid var(--border); border-right:1px solid var(--border); }
.m-pd-stock-glance__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; }
.m-pd-stock-glance__value { font-size:var(--fs-lg); font-family:var(--font-mono); font-weight:500; margin-top:3px; }
.m-pd-stock-glance__value--warn { color:var(--warning); }
.m-pd-stock-glance__value--accent { color:var(--accent); }
.m-pd-stock-glance__sub { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-pd-stock-glance__sub--warn { color:var(--warning); }
.m-pd-stock-chart-card { padding: 0 var(--gutter) 8px; }
.m-pd-stock-chart-card__canvas-wrap { position:relative; height:120px; }
.m-pd-stock-chart-card .m-pd-chart-range { margin-bottom:8px; }
.m-pd-stock-chart-note { font-size:var(--fs-xs); color:var(--text-tertiary); text-align:center; margin-top:4px; font-style:italic; }

/* ============================================================
   Sales — Mobile Hub + Table + Activity
   m-sl-* namespace. Do NOT duplicate lc-* patterns.
   ============================================================ */

/* ---- Period Selector ---- */
.m-sl-period { padding:5px var(--gutter) 6px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.m-sl-period__nav { display:flex; align-items:center; gap:8px; }
.m-sl-period__arrow { color:var(--text-tertiary); font-size:var(--fs-lg); padding:0 4px; background:none; border:none; cursor:pointer; min-width:36px; min-height:36px; display:flex; align-items:center; justify-content:center; }
.m-sl-period__arrow[disabled] { opacity:0.3; cursor:default; }
.m-sl-period__label-wrap { display:flex; flex-direction:column; align-items:flex-start; cursor:pointer; }
.m-sl-period__label-row { display:flex; align-items:center; gap:6px; }
.m-sl-period__label { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); letter-spacing:0.2px; }
.m-sl-period__preset { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; padding:1px 5px; border:1px solid var(--border); border-radius:3px; }
.m-sl-period__caret { color:var(--text-tertiary); font-size:var(--fs-xs); font-family:var(--font-mono); }
.m-sl-period__dates { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-sl-period__status { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.4px; display:flex; align-items:center; gap:6px; }
.m-sl-period__dot { width:6px; height:6px; border-radius:3px; background:var(--sales-accent); }

/* ---- Preset Sheet ---- */
.m-sl-preset-sheet { position:absolute; top:100%; left:0; right:0; z-index:10; background:var(--bg-elevated); border-bottom:1px solid var(--border); box-shadow:0 8px 16px rgba(0,0,0,0.35); display:none; }
.m-sl-preset-sheet--open { display:block; }
.m-sl-preset-sheet__header { padding:10px var(--gutter) 8px; font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; border-bottom:1px solid var(--border); }
.m-sl-preset-row { padding:10px var(--gutter); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; cursor:pointer; min-height:44px; }
.m-sl-preset-row--active { background:var(--bg-surface); }
.m-sl-preset-row__radio { width:14px; height:14px; border-radius:7px; border:1.5px solid var(--border-strong); background:transparent; flex-shrink:0; }
.m-sl-preset-row--active .m-sl-preset-row__radio { border-color:var(--sales-accent); background:var(--sales-accent); }
.m-sl-preset-row__label { font-size:var(--fs-sm); color:var(--text-primary); }
.m-sl-preset-row--active .m-sl-preset-row__label { font-weight:500; }
.m-sl-preset-row__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }

/* ---- Tab Bar ---- */
.m-sl-tabs { flex-shrink:0; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; padding:0 var(--gutter); }
.m-sl-tabs__tab { padding:11px var(--gutter) 10px; font-size:var(--fs-sm); font-weight:400; color:var(--text-tertiary); border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; font-family:var(--font-body); }
.m-sl-tabs__tab--active { font-weight:500; color:var(--text-primary); border-bottom-color:var(--sales-accent); }

/* ---- Tab Content ---- */
.m-sl-tab-content { display:flex; flex-direction:column; flex:1; overflow:hidden; position:relative; }
.m-sl-tab-pane { display:none; flex:1; min-height:0; overflow-y:auto; }
.m-sl-tab-pane--active { display:flex; flex-direction:column; }

/* ---- Hub Scroll Container ---- */
.m-sl-hub-scroll { overflow-y:auto; flex:1; padding-bottom:80px; }

/* ---- Revenue Hero Card ---- */
.m-sl-hero { margin:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:12px var(--gutter); }
.m-sl-hero__header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.m-sl-hero__period { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; }
.m-sl-hero__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-sl-hero__value-row { display:flex; align-items:baseline; gap:8px; }
.m-sl-hero__value { font-size:var(--fs-display); font-family:var(--font-heading); font-weight:500; color:var(--text-primary); letter-spacing:-0.3px; line-height:1; }
.m-sl-hero__value-label { font-size:var(--fs-xs); color:var(--text-tertiary); }

/* ---- Stat Strip (3-col inside hero) ---- */
.m-sl-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.m-sl-stat__label { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; }
.m-sl-stat__value { font-size:var(--fs-lg); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); line-height:1; }
.m-sl-stat__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }

/* ---- Vs-Period Comparison ---- */
.m-sl-compare { margin-top:12px; padding-top:10px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.m-sl-compare__label { font-size:var(--fs-xs); color:var(--text-tertiary); }
.m-sl-compare__delta { font-size:var(--fs-xl); font-family:var(--font-mono); font-weight:500; margin-top:2px; }
.m-sl-compare__delta--up { color:var(--success); }
.m-sl-compare__delta--down { color:var(--error); }
.m-sl-compare__delta-pct { font-size:var(--fs-xs); color:var(--text-tertiary); font-weight:400; }
.m-sl-compare__chip { padding:3px 8px; border-radius:4px; font-size:var(--fs-xs); font-family:var(--font-mono); font-weight:500; text-transform:uppercase; letter-spacing:0.4px; }
.m-sl-compare__chip--ok { background:color-mix(in srgb, var(--success) 15%, transparent); color:var(--success); }
.m-sl-compare__chip--warn { background:color-mix(in srgb, var(--warning) 15%, transparent); color:var(--warning); }

/* ---- Section Label ---- */
.m-sl-section-label { display:flex; justify-content:space-between; align-items:baseline; padding:0 var(--gutter); margin-bottom:8px; margin-top:2px; font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-sl-section-label__right { color:var(--text-tertiary); font-family:var(--font-mono); text-transform:none; letter-spacing:0; }

/* ---- Attention Card (extreme-card style, mirrors m-sh-extremes-card) ---- */
.m-sl-attn-list { margin:0 var(--gutter) 16px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; padding:0; }
.m-sl-attn { padding:10px var(--gutter); display:flex; gap:10px; align-items:center; min-height:44px; }
.m-sl-attn + .m-sl-attn { border-top:1px solid var(--border); }
.m-sl-attn__icon { width:22px; height:22px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-family:var(--font-mono); flex-shrink:0; }
.m-sl-attn__icon--warn { background:color-mix(in srgb, var(--warning) 14%, transparent); color:var(--warning); }
.m-sl-attn__icon--err { background:color-mix(in srgb, var(--error) 14%, transparent); color:var(--error); }
.m-sl-attn__icon--info { background:rgba(122,176,194,0.14); color:var(--info); }
.m-sl-attn__body { flex:1; min-width:0; }
.m-sl-attn__title { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); }
.m-sl-attn__sub { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-sl-attn__chevron { color:var(--text-tertiary); font-size:var(--fs-lg); flex-shrink:0; }
.m-sl-attn--loading { opacity:0.5; }

/* ---- Action Block ---- */
.m-sl-actions { padding:0 var(--gutter) 18px; }
.m-sl-actions__primary { width:100%; padding:14px var(--gutter); background:var(--sales-accent); color:#111; border:none; border-radius:8px; font-size:var(--fs-sm); font-weight:600; font-family:var(--font-body); display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; cursor:pointer; min-height:44px; text-decoration:none; }
.m-sl-actions__row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.m-sl-actions__secondary { padding:10px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-body); display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; min-height:44px; text-decoration:none; }
.m-sl-actions__secondary[disabled] { opacity:0.55; cursor:not-allowed; }
.m-sl-actions__icon { font-family:var(--font-mono); }

/* ---- Anomaly Card Container (variance-card style, mirrors m-sh-var-card) ---- */
.m-sl-anomaly-card { margin:0 var(--gutter) 18px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:4px 0; }

/* ---- Anomaly Row (variance-row style, mirrors m-sh-var-row) ---- */
.m-sl-anomaly-row { display:flex; align-items:center; gap:10px; padding:10px var(--gutter); cursor:pointer; min-height:36px; text-decoration:none; color:inherit; }
.m-sl-anomaly-row + .m-sl-anomaly-row { border-top:1px solid var(--border); }
.m-sl-anomaly-row__dot { width:6px; height:6px; border-radius:3px; flex-shrink:0; }
.m-sl-anomaly-row__dot--top-earners { background:var(--success); }
.m-sl-anomaly-row__dot--high-low { background:var(--warning); }
.m-sl-anomaly-row__dot--quiet { background:var(--info); }
.m-sl-anomaly-row__dot--not-selling { background:var(--error); }
.m-sl-anomaly-row__dot--rollup { background:var(--accent); }
.m-sl-anomaly-row__body { flex:1; min-width:0; }
.m-sl-anomaly-row__name { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-sl-anomaly-row__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; text-transform:uppercase; letter-spacing:0.4px; }
.m-sl-anomaly-row__value { text-align:right; flex-shrink:0; font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:500; letter-spacing:0.2px; color:var(--text-primary); }
.m-sl-anomaly-row__value--warn { color:var(--warning); }
.m-sl-anomaly-row__chevron { color:var(--text-tertiary); font-size:var(--fs-base); flex-shrink:0; }

/* ---- Zero State — Twin Hero ---- */
.m-sl-zero-hero { padding:18px var(--gutter) 16px; border-bottom:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.m-sl-zero-hero__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.7px; }
.m-sl-zero-hero__value { font-size:var(--fs-display-lg); color:var(--text-tertiary); font-family:var(--font-mono); font-weight:300; margin-top:4px; line-height:1; }

/* ---- Zero States ---- */
.m-sl-zero { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px; text-align:center; }
.m-sl-zero__eyebrow { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:12px; }
.m-sl-zero__title { font-size:var(--fs-lg); color:var(--text-primary); font-weight:500; margin-bottom:6px; }
.m-sl-zero__text { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.5; max-width:280px; }
.m-sl-zero__cta { margin-top:22px; width:100%; max-width:280px; display:flex; flex-direction:column; gap:8px; }
.m-sl-zero__primary { padding:12px var(--gutter); background:var(--sales-accent); color:#111; border:none; font-size:var(--fs-sm); font-weight:600; cursor:pointer; min-height:44px; text-decoration:none; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); }
.m-sl-zero__secondary { padding:10px var(--gutter); background:transparent; border:1px solid var(--border-strong); color:var(--text-secondary); font-size:var(--fs-sm); cursor:pointer; min-height:44px; font-family:var(--font-body); text-decoration:none; display:flex; align-items:center; justify-content:center; }
.m-sl-zero__or { margin-top:24px; padding-top:18px; border-top:1px dashed var(--border); width:100%; max-width:280px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; }
.m-sl-zero__or-links { color:var(--text-secondary); text-transform:none; letter-spacing:0; }

/* ---- Activity Card (stream-item style, mirrors m-sh-stream-item) ---- */
.m-sl-act-card { display:flex; gap:10px; align-items:center; padding:10px var(--gutter); border-radius:8px; border:1px solid var(--border); border-left:3px solid var(--border); margin-bottom:6px; cursor:pointer; text-decoration:none; color:inherit; min-height:44px; }
.m-sl-act-card--sales { border-left-color:var(--sales-accent); }
.m-sl-act-card--comp { border-left-color:var(--warning); }
.m-sl-act-card__icon { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); flex-shrink:0; }
.m-sl-act-card__icon--sales { background:var(--sales-accent); color:#1a1816; }
.m-sl-act-card__icon--comp { background:var(--warning); color:#1a1816; }
.m-sl-act-card__icon--deleted { background:var(--bg-elevated); color:var(--error); border:1px solid var(--border-strong); }
.m-sl-act-card__body { flex:1; min-width:0; }
.m-sl-act-card__title { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); display:flex; align-items:baseline; gap:6px; }
.m-sl-act-card__meta { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); margin-top:2px; }
.m-sl-act-card__who { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:1px; }
.m-sl-act-card__value { font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); flex-shrink:0; }
.m-sl-act-card__chevron { color:var(--text-tertiary); font-size:var(--fs-lg); flex-shrink:0; }
.m-sl-act-chip { font-size:var(--fs-2xs); padding:1px 5px; border-radius:3px; font-family:var(--font-mono); letter-spacing:0.4px; font-weight:500; }
.m-sl-act-chip--sales { background:color-mix(in srgb, var(--success) 14%, transparent); color:var(--sales-accent); border:1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.m-sl-act-chip--comp { background:color-mix(in srgb, var(--warning) 14%, transparent); color:var(--warning); border:1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.m-sl-act-chip--deleted { background:color-mix(in srgb, var(--error) 14%, transparent); color:var(--error); border:1px solid color-mix(in srgb, var(--error) 30%, transparent); }
.m-sl-act-card--deleted { opacity:0.55; border-left-color:var(--border); }

/* ---- Sales Table Tab (reuses shared lc-* / lg-* patterns) ---- */
.m-sl-tbl-scroll { overflow-y:auto; flex:1; padding-bottom:80px; }
.lc-grid--sales { grid-template-columns:1.5fr 0.55fr 0.7fr 0.7fr; }
.m-sl-tbl-scroll .lc-cat-header { position:static; z-index:auto; }
.m-sl-tbl-scroll .lc-chips { padding-top:10px; }
.lc-col--right { text-align:right; }
.m-sl-tbl-expand[hidden] { display:none; }
.lc-item-num--bold { font-weight:500; }
.m-sl-act-list { padding:0 var(--gutter) 16px; display:flex; flex-direction:column; gap:0; }
.m-sl-act-list--deleted { padding:0 var(--gutter) 20px; }
.m-sl-tbl-footer { padding:12px var(--gutter); font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-sl-section-label--top { margin-top:12px; }
.lc-item-row.lc-grid--sales.is-open { background:var(--bg-surface); border-bottom:none; }

/* ---- Table Expand Panel ---- */
.m-sl-tbl-expand { background:var(--bg-surface); border-bottom:2px solid var(--border); margin-left:9px; padding:6px var(--gutter) 14px var(--gutter); border-radius:0 0 6px 6px; }
.m-sl-tbl-expand__stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:6px 0 10px; }
.m-sl-tbl-stat-box { background:var(--bg-base); border:1px solid var(--border); border-radius:8px; padding:8px 10px; text-align:center; }
.m-sl-tbl-stat__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; }
.m-sl-tbl-stat__value { font-size:var(--fs-base); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); margin-top:2px; }
.m-sl-tbl-stat__sub { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-sl-tbl-expand__totals { margin-top:6px; padding-top:8px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:5px; }
.m-sl-tbl-expand__total-row { display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--text-secondary); }
.m-sl-tbl-expand__total-row .mono { font-family:var(--font-mono); font-weight:500; color:var(--text-primary); }
.m-sl-tbl-expand__total-row--accent { font-weight:600; color:var(--text-primary); padding-top:4px; border-top:1px solid var(--border); margin-top:2px; }
.m-sl-tbl-expand__total-row--accent .mono { font-weight:600; }

/* ---- Table Grand Total ---- */
.m-sl-tbl-grand { margin:0 var(--gutter); border-top:2px solid var(--sales-accent); padding:10px 0; display:flex; flex-direction:column; gap:6px; }
.m-sl-tbl-grand__row { display:flex; justify-content:space-between; font-size:var(--fs-sm); color:var(--text-secondary); }
.m-sl-tbl-grand__row .mono { font-family:var(--font-mono); font-weight:500; color:var(--text-primary); }
.m-sl-tbl-grand__row--accent { font-weight:600; color:var(--text-primary); }
.m-sl-tbl-grand__row--accent .mono { font-weight:600; }

/* ---- Sales Activity Tab ---- */
.m-sl-activity-scroll { overflow-y:auto; flex:1; padding-bottom:20px; }
.m-sl-activity-toggle { display:flex; align-items:center; justify-content:flex-end; padding:4px var(--gutter) 12px; }

/* ============================================================
   Sales Entry Form — mobile create/edit
   Uses shared lc-*/lg-* patterns. Only entry-specific additions here.
   ============================================================ */

/* ---- Entry Shell ---- */
.m-sl-entry-shell { display:flex; flex-direction:column; height:100%; overflow:hidden; position:relative; }
.m-sl-entry-shell > form { display:contents; }
.m-sl-entry-shell .lc-sticky-header { flex-shrink:0; position:static; }
.m-sl-entry-header { flex-shrink:0; }
.m-sl-entry-form-fields { flex-shrink:0; }
.m-sl-entry-flash { flex-shrink:0; }
.m-sl-entry-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* ---- Entry Header ---- */
.m-sl-entry-header { padding:10px var(--gutter); border-bottom:1px solid var(--border); background:var(--bg-surface); }
.m-sl-entry-header__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.m-sl-entry-header__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-sl-entry-header__badge { padding:2px 7px; background:color-mix(in srgb, var(--success) 14%, transparent); color:var(--success); font-size:var(--fs-2xs); font-weight:600; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; border-radius:3px; }
.m-sl-entry-header__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); display:flex; gap:8px; }

/* ---- Entry Header Form (type/name/dates for create) ---- */
.m-sl-entry-form-fields { padding:12px var(--gutter); border-bottom:1px solid var(--border); background:var(--bg-surface); }
.m-sl-entry-form-fields .form-group { margin-bottom:8px; }
.m-sl-entry-form-fields .form-group:last-child { margin-bottom:0; }
.m-sl-entry-form-fields .form-row { display:flex; gap:8px; }
.m-sl-entry-form-fields .form-row .form-group { flex:1; }
.m-sl-entry-form-fields .form-label { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; display:block; }

/* ---- Entry Grid (extends shared lc-item-row) ---- */
.lc-grid--entry { grid-template-columns:1fr auto; align-items:center; }
.lc-item-row--entry-active { background:color-mix(in srgb, var(--success) 6%, transparent); }
.lc-item-row--entry-active .lc-item-name__text { font-weight:600; color:var(--text-primary); }
.m-sl-entry-line { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-tertiary); text-align:right; }
.lc-item-row--entry-active .m-sl-entry-line { font-weight:600; color:var(--text-primary); }
.m-sl-entry-stepper-slot { grid-column:1 / -1; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; min-height:0; }
.m-sl-entry-qty-display { font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--sales-accent); font-weight:500; }
.m-sl-entry-cat--legacy { opacity:0.6; }

/* ---- Live Footer ---- */
.m-sl-live-footer { flex-shrink:0; background:var(--bg-surface); border-top:1px solid var(--border); padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
.m-sl-live-footer__cells { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border); }
.m-sl-live-footer__cell { padding:7px 8px; min-width:0; }
.m-sl-live-footer__cell + .m-sl-live-footer__cell { border-left:1px solid var(--border); }
.m-sl-live-footer__cell-label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; }
.m-sl-live-footer__cell-value { font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:600; color:var(--text-primary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-sl-live-footer__cell-value--cost { color:var(--error); }
.m-sl-live-footer__cell-value--gp { color:var(--warning); }
.m-sl-live-footer__buttons { padding:8px var(--gutter); display:flex; gap:8px; }
.m-sl-live-footer__save { flex:1; padding:12px var(--gutter); background:var(--sales-accent); border:none; border-radius:6px; color:#111; font-size:var(--fs-sm); font-weight:600; min-height:44px; cursor:pointer; font-family:var(--font-body); }
.m-sl-live-footer__save:disabled { opacity:0.4; cursor:not-allowed; }
.m-sl-live-footer__cancel { padding:12px var(--gutter); background:var(--bg-base); border:1px solid var(--border); border-radius:6px; color:var(--text-secondary); font-size:var(--fs-sm); min-height:44px; cursor:pointer; font-family:var(--font-body); text-decoration:none; display:flex; align-items:center; justify-content:center; }

/* ---- Entry Flash Messages ---- */
.m-sl-entry-flash { padding:8px var(--gutter); }
.form-group__static { padding:4px 0; }
.text-muted { color:var(--text-tertiary); }

/* ---- Sales Keypad (calculator, mirrors m-sc-keypad from stock count) ---- */
.m-sl-keypad-scrim { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:90; pointer-events:none; }
.m-sl-keypad-scrim[hidden] { display:none; }
/* position:FIXED + max-height:dvh — Android visual-viewport safe (mirrors m-sc-keypad; DESIGN-LESSONS #86). */
.m-sl-keypad { position:fixed; left:0; right:0; bottom:0; z-index:100; background:var(--bg-surface); border-top:1px solid var(--border); border-radius:14px 14px 0 0; padding:0 var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); max-height:92dvh; overflow-y:auto; transform:translateY(110%); transition:transform .18s ease; }
.m-sl-keypad.m-sl-keypad--open { transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { .m-sl-keypad { transition:none; } }
.m-sl-keypad[hidden] { display:none; }
.m-sl-keypad__chrome { display:flex; justify-content:center; align-items:center; padding:10px 0 6px; }
.m-sl-keypad__grabber { width:32px; height:4px; border-radius:2px; background:var(--border-strong); }
.m-sl-keypad__focus { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; gap:8px; }
.m-sl-keypad__focus-info { min-width:0; flex:1; }
.m-sl-keypad__focus-label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.7px; }
.m-sl-keypad__focus-name { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-sl-keypad__focus-meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-sl-keypad__display { padding:4px var(--gutter); min-width:72px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:6px; text-align:right; display:flex; align-items:baseline; justify-content:flex-end; gap:4px; }
.m-sl-keypad__display-value { font-size:var(--fs-xl); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); }
.m-sl-keypad__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.m-sl-key { padding:8px 0; text-align:center; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; min-height:40px; -webkit-tap-highlight-color:transparent; }
.m-sl-key:active { filter:brightness(0.9); }
.m-sl-key--num { background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-primary); font-family:var(--font-mono); font-size:var(--fs-base); }
.m-sl-key--dim { background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-tertiary); font-family:var(--font-mono); font-size:var(--fs-sm); }
.m-sl-key--ghost { background:transparent; border:1px solid var(--border-strong); color:var(--text-secondary); font-family:var(--font-body); font-size:var(--fs-sm); font-weight:500; }
.m-sl-key--primary { background:var(--sales-accent); border:1px solid transparent; color:#111; font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; }
.m-sl-key--tall { grid-row:span 2; }
.lc-item-row--entry-focus { background:color-mix(in srgb, var(--success) 8%, transparent); border-left-color:var(--sales-accent) !important; }

/* ---- Combo Panel (mobile inline picker) ---- */
.m-sl-combo-panel { margin-top:8px; padding:8px 10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; }
.m-sl-combo-panel__group + .m-sl-combo-panel__group { margin-top:8px; }
.m-sl-combo-panel__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.m-sl-combo-panel__label { font-size:var(--fs-xs); color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.4px; font-family:var(--font-mono); }
.m-sl-combo-counter { font-size:var(--fs-xs); font-family:var(--font-mono); }
.m-sl-combo-panel__opt { display:flex; justify-content:space-between; align-items:center; padding:3px 0; }
.m-sl-combo-panel__opt-name { font-size:var(--fs-sm); color:var(--text-primary); }
.m-sl-combo-panel__opt-stepper { display:inline-flex; align-items:center; }
.m-sl-combo-panel__opt-btn { width:28px; height:28px; background:none; border:none; color:var(--text-primary); font-size:var(--fs-base); font-family:var(--font-mono); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.m-sl-combo-panel__opt-val { min-width:20px; text-align:center; font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:500; }
/* Keypad-driven option values (sales entry, 02g) — tap the value to target
   it on the calculator; the comp drawer keeps the stepper variant above */
.m-sl-entry-combo-expand { padding:0 var(--gutter) 10px; border-bottom:1px solid var(--border); }
.m-sl-entry-combo-expand .m-sl-combo-panel { margin-top:0; }
.m-sl-combo-panel__opt-val--tap { min-width:48px; min-height:28px; padding:2px 8px; background:var(--bg-base); border:1px solid var(--border); border-radius:4px; display:inline-flex; align-items:center; justify-content:flex-end; cursor:pointer; }
.m-sl-combo-panel__opt--focus .m-sl-combo-panel__opt-val--tap { border-color:var(--accent); color:var(--accent); }
.m-sl-combo-panel__opt--parent { border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:6px; }
.m-sl-combo-panel__opt--parent .m-sl-combo-panel__opt-name { font-weight:500; }
/* While the keypad is open the list gains matching scroll room, so any
   value covered by the overlay can be revealed above it */
.m-sl-entry-scroll--keypad { padding-bottom:320px; }

/* ---- Mobile/Desktop visibility for entry page ---- */
@media (max-width: 767px) {
  .m-sl-entry-desktop-only { display:none !important; }
  .page-content.m-sl-entry-page { padding:0 !important; padding-bottom:0 !important; overflow:hidden; display:flex; flex-direction:column; height:100%; }
}
@media (min-width: 768px) {
  .m-sl-entry-shell { display:none !important; }
}

/* ---- Sales/Comp Drawer Chrome (shared by 02b sales detail and 02d comp detail) ---- */
.m-sl-drawer { position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.m-sl-drawer[hidden] { display:none; }
.m-sl-drawer--top { z-index:110; } /* delete sheet stacks above the detail drawer */
.m-sl-drawer__scrim { position:absolute; inset:0; background:var(--overlay); backdrop-filter:blur(2px); }
.m-sl-drawer__panel { position:relative; width:100%; max-width:480px; max-height:88%; background:var(--bg-surface); border:1px solid var(--border); border-radius:16px 16px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,0.5); display:flex; flex-direction:column; overflow:hidden; }
.m-sl-drawer__grabber { display:flex; justify-content:center; padding:10px 0 6px; }
.m-sl-drawer__grabber-bar { width:36px; height:4px; border-radius:2px; background:var(--border-strong); }
.m-sl-drawer__header { padding:4px var(--gutter) 12px; display:flex; justify-content:space-between; align-items:flex-start; }
.m-sl-drawer__title { font-size:var(--fs-lg); font-family:var(--font-heading); font-weight:500; color:var(--text-primary); }
.m-sl-drawer__subtitle { font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--text-tertiary); margin-top:2px; }
/* Shared drawer close (decisions.md [2026-07-05] — supersedes the earlier
   no-shared-__close note). Text-secondary glyph button; effective target
   >=24x24 via a min-size + flex-centred box (the narrow × glyph alone is <24px
   wide, so padding cannot guarantee the floor — same recipe as wave 3's
   .msg-close); the visual glyph stays small (house compact tier). Inherits
   wave 3's global :focus-visible ring — NO focus styles here.
   Markup contract: <button type="button" class="m-sl-drawer__close"
   data-close-drawer="<drawer-id>" aria-label="Close">&times;</button>, placed
   as the LAST child of .m-sl-drawer__header (right side, after any action slot).
   Never two close affordances in one header. */
.m-sl-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  box-sizing: border-box;
  background: none;
  border: 0;
  padding: var(--space-1);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease;
}
@media (hover: hover) {
  .m-sl-drawer__close:hover { color: var(--text-primary); }
}
.m-sl-drawer__close:active { color: var(--text-primary); }
.m-sl-drawer__body { flex:1; overflow-y:auto; padding:0 var(--gutter) 16px; }
.m-sl-drawer__loading { padding:40px var(--gutter); text-align:center; font-size:var(--fs-sm); color:var(--text-tertiary); }
.m-sl-drawer__error { padding:40px var(--gutter); text-align:center; font-size:var(--fs-sm); color:var(--error); }
.m-sl-drawer__footer { padding:12px var(--gutter); border-top:1px solid var(--border); display:flex; gap:8px; }
.m-sl-drawer__footer .btn { flex:1; }
.m-sl-drawer__body .m-sl-section-label { padding-left:0; padding-right:0; margin-top:14px; }

/* ============================================================
   Desktop — m-sl-drawer side-drawer PRESENTATION mode (>=768px)
   CSS-ONLY re-presentation of the SHARED m-sl-drawer chrome as a
   right-anchored side panel. NO new chrome family. NO JS change.
   Engine = drawer.js contract. Mobile (<768px) bottom-sheet untouched.
   ============================================================ */
@media (min-width: 768px) {
  .m-sl-drawer { align-items:stretch; justify-content:flex-end; }
  .m-sl-drawer__panel {
    width:480px; max-width:480px; max-height:100vh; height:100vh;
    border-radius:0; border-left:1px solid var(--border-strong);
    border-top:none; border-right:none; border-bottom:none;
    box-shadow:-8px 0 40px rgba(0,0,0,0.4);
  }
  .m-sl-drawer__grabber { display:none; }
}
/* Right-anchored panel narrows to 440px across the whole rail-active range
   (768-1439). The 64px rail IS present at >=768 (desktop-at-768 migration), so
   the drawer must never go full-width over it. Fixes the old bug where the
   drawer went 100% full-width at 768-1023 and covered the rail + content.
   >=1440 keeps the 480px base from the side-panel presentation block above. */
@media (min-width: 768px) and (max-width: 1439px) {
  .m-sl-drawer__panel { width:440px; max-width:440px; }
}

/* ============================================================
   Desktop — Centred Modal primitive (.d-modal*) (>=768px)
   Shared confirmation / quick-action dialog (DECISION D1).
   Centred floating dialog with a full-page backdrop. DISTINCT
   from the mobile .modal-overlay bottom-sheet (components.css:929)
   and from the drawer. Single show/hide convention: [hidden].
   ============================================================ */
@media (min-width: 768px) {
  .d-modal { position:fixed; inset:0; z-index:120; display:flex;
             align-items:center; justify-content:center; }
  .d-modal[hidden] { display:none; }
  .d-modal__scrim { position:absolute; inset:0; background:var(--overlay); }
  .d-modal__dialog {
    position:relative; width:520px; max-width:calc(100vw - 64px);
    max-height:calc(100vh - 80px); background:var(--bg-surface);
    border:1px solid var(--border-strong); border-radius:var(--radius-lg);
    box-shadow:0 24px 80px rgba(0,0,0,0.6); display:flex;
    flex-direction:column; overflow:hidden;
  }
  .d-modal__header { padding:18px 22px 14px; border-bottom:1px solid var(--border);
                     display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .d-modal__titles { min-width:0; }
  .d-modal__title { font-size:16px; font-family:var(--font-heading); font-weight:600;
                    color:var(--text-primary); line-height:1.3; }
  .d-modal__subtitle { font-size:11px; font-family:var(--font-mono); color:var(--text-tertiary); margin-top:3px; }
  .d-modal__close { width:30px; height:30px; flex-shrink:0; background:var(--bg-elevated);
                    border:1px solid var(--border); border-radius:var(--radius-md);
                    color:var(--text-tertiary); font-size:15px; line-height:1; cursor:pointer;
                    display:flex; align-items:center; justify-content:center; }
  .d-modal__close:hover { color:var(--text-primary); }
  .d-modal__body { padding:18px 22px; overflow-y:auto; font-size:13px; color:var(--text-secondary); line-height:1.5; }
  .d-modal__footer { padding:14px 22px 18px; border-top:1px solid var(--border);
                     display:flex; justify-content:flex-end; gap:10px; }
  .d-modal--compact .d-modal__dialog { width:440px; }
}

/* ---- Detail View (saved log) ---- */
.m-sl-detail-meta { padding:5px 0; border-bottom:1px dashed var(--border); display:flex; justify-content:space-between; align-items:baseline; }
.m-sl-detail-meta__key { font-size:var(--fs-xs); color:var(--text-tertiary); }
.m-sl-detail-meta__value { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-sl-detail-meta__value--mono { font-family:var(--font-mono); }
.m-sl-audit-event { padding:7px 0; border-bottom:1px dashed var(--border); }
.m-sl-audit-event__what { font-size:var(--fs-xs); color:var(--text-primary); line-height:1.4; }
.m-sl-audit-event__who { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.lc-grid--sl-detail { grid-template-columns:1.6fr 0.5fr 0.65fr 0.75fr; }
.m-sl-detail-actions { display:flex; gap:8px; padding:14px 0 4px; }
.m-sl-detail-actions__form { flex:1; display:flex; }
.m-sl-detail-actions__btn { flex:1; min-height:44px; padding:12px 10px; border-radius:6px; font-size:var(--fs-sm); font-weight:500; font-family:var(--font-body); display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; white-space:nowrap; background:transparent; border:1px solid var(--border-strong); color:var(--text-secondary); }
.m-sl-detail-actions__btn--solid { background:var(--bg-elevated); color:var(--text-primary); }
.m-sl-detail-actions__btn--primary { background:var(--sales-accent); border-color:transparent; color:#111; font-weight:600; }

/* Sticky search → pills → column header stack inside the drawer scroll area.
   Full-bleed (-16px) so the bg-base band spans the panel edge-to-edge. */
.m-sl-detail__sticky { margin:0 calc(-1 * var(--gutter)); border-bottom:1px solid var(--border); }

/* Entries zone recessed on bg-base against the bg-surface panel for depth */
.m-sl-detail__entries { margin:0 calc(-1 * var(--gutter)); background:var(--bg-base); padding-bottom:6px; border-bottom:1px solid var(--border); }
.m-sl-detail__no-results { padding:14px var(--gutter); }

/* Totals strip — elevated band, mirrors the invoice detail totals pattern */
.m-sl-detail__totals { display:grid; grid-template-columns:repeat(3,1fr); background:var(--bg-elevated); margin:0 calc(-1 * var(--gutter)); border-bottom:1px solid var(--border); }
.m-sl-detail__total-item { padding:10px; text-align:center; }
.m-sl-detail__total-item:not(:last-child) { border-right:1px solid var(--border); }
.m-sl-detail__total-label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; }
.m-sl-detail__total-val { font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:500; margin-top:2px; color:var(--text-primary); }
.m-sl-detail__total-val--accent { color:var(--sales-accent); }

/* Meta/audit cards — recessed panels under their section labels */
.m-sl-detail-card { background:var(--bg-base); border:1px solid var(--border); border-radius:10px; padding:4px var(--gutter); margin-bottom:4px; }
.m-sl-detail-card .m-sl-detail-meta:last-child,
.m-sl-detail-card .m-sl-audit-event:last-child { border-bottom:none; }

/* ==================================================================
   Mobile Sales — comp create sheet (02c) + comp detail drawer (02d)
   Both reuse the m-sl-drawer chrome above; classes below are the
   comp-specific form/body pieces only.
   ================================================================== */

/* ---- Comp header band (create sheet + detail drawer) ----
   Full-bleed recessed strip at the top of the drawer body — metadata and
   type chips live here, framed by hairlines top and bottom (the same
   depth treatment as the 02b detail drawer zones). */
.m-sl-comp-head { margin:0 0 12px; padding:14px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; }
.m-sl-comp-head .m-sl-comp-meta__value { background:transparent; border:none; padding:6px 0; font-weight:500; }
.m-sl-comp-head .form-input { margin-top:10px; }

/* ---- Comp metadata strip (create sheet + detail drawer) ---- */
.m-sl-comp-meta { display:grid; grid-template-columns:1.2fr 1fr; gap:12px; margin-bottom:10px; }
.m-sl-comp-meta__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.7px; margin-bottom:3px; }
.m-sl-comp-meta__label--gap { margin-top:12px; }
.m-sl-comp-meta__value { width:100%; font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; padding:6px 8px; min-height:32px; background:var(--bg-base); border:1px solid var(--border); border-radius:4px; font-family:var(--font-body); color-scheme:dark; }
.m-sl-comp-meta__value[readonly] { color:var(--text-secondary); }
.m-sl-comp-meta__value--display { display:flex; align-items:center; }

/* ---- Comp type chips (UI-only — selected label is prepended to notes) ---- */
.m-sl-comp-chips { display:flex; gap:6px; flex-wrap:wrap; }
.m-sl-comp-chip { padding:5px 9px; min-height:28px; background:transparent; border:1px solid var(--border); border-radius:4px; font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-body); cursor:pointer; }
.m-sl-comp-chip--active { background:var(--bg-elevated); border-color:var(--border-strong); font-weight:500; color:var(--text-primary); }
.m-sl-comp-chip--ghost { color:var(--text-tertiary); border-style:dashed; }

/* ---- Comp detail drawer: item search (02d) ---- */
.m-sl-comp-items-card { margin-bottom:12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; }
.m-sl-comp-items-card .m-sl-detail__entries { background:transparent; margin:0; border-bottom:none; }
.m-sl-comp-items-card .lc-col-header { background:transparent; }
.m-sl-comp-items-card .lc-item-row { background:transparent; }
.m-sl-comp-search { position:relative; margin-bottom:8px; }
.m-sl-comp-results { position:absolute; top:100%; left:0; right:0; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:6px; max-height:240px; overflow-y:auto; z-index:5; }
.m-sl-comp-results[hidden] { display:none; }
.m-sl-comp-results__item { padding:10px var(--gutter); min-height:32px; border-bottom:1px solid var(--border); cursor:pointer; }
.m-sl-comp-results__item:last-child { border-bottom:none; }
.m-sl-comp-results__name { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-sl-comp-results__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-sl-comp-add-flat { margin-top:8px; margin-bottom:8px; padding:6px 10px; min-height:28px; background:transparent; border:1px solid var(--border); border-radius:4px; color:var(--text-secondary); font-size:var(--fs-xs); font-family:var(--font-body); cursor:pointer; }

/* ---- Comp create catalogue: inline-qty rows (relocated from sales_list.html
   page CSS, Wave 3 — page-local CSS for a shared row family violates the CSS
   architecture). Hybrid family: lc-item-row shell + lr_row name/meta content,
   but the qty input / value span are the row's own bespoke grid cells
   (own 3-col grid, not lc-grid--comp — different job to comp detail's 5-col row). */
.d-comp-row {
  display: grid; grid-template-columns: 1fr 64px 72px;
  gap: 6px; align-items: center;
  padding: 6px var(--gutter); border-bottom: 1px solid rgba(255,255,255,0.04);
  border-left: 3px solid transparent;
}
.d-comp-row:hover { background: var(--bg-elevated); }
.d-comp-row__name { min-width: 0; }
.d-comp-row__qty {
  width: 100%; text-align: right; padding: 4px 6px;
  background: rgba(0,0,0,0.2); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-primary);
  font-family: var(--font-mono); font-size: var(--fs-sm);
}
.d-comp-row__qty:focus { border-color: var(--accent); outline: none; }
.d-comp-row__qty::placeholder { color: var(--text-tertiary); opacity: 0.5; }
.d-comp-row--has-qty { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.d-comp-row--has-qty .d-comp-row__qty { border-color: var(--accent); }
.d-comp-row__val {
  text-align: right; font-family: var(--font-mono);
  font-size: var(--fs-sm); color: var(--text-tertiary);
  white-space: nowrap;
}
.d-comp-row--has-qty .d-comp-row__val { color: var(--warning); }

/* ---- Desktop Sales Table (relocated from sales_list.html page CSS, Wave 3 —
   page-local CSS for a shared row family violates the CSS architecture).
   .dt-* is the generic data-table primitive shared with stock hub / import
   previews / OCR inbox — each of those keeps its OWN page-local .dt-* copy,
   untouched by this wave (D2 ruling). Since components.css is loaded on every
   page, every rule here is scoped under the sales table's own `.d-sl-dt`
   wrapper so it cannot leak onto those other pages' unscoped `.dt-*` (a plain
   `.dt-row:hover` there would otherwise lose to this block's higher-specificity
   `:not()` rule regardless of source order — self-review catch). This page's
   copy also carries the H3b look via lr_row/lr_block_head in the Jinja
   (category header row + name cell), reusing the existing lr-name/lr-num/
   lr-mark assets — no dot on the category row (H3b: single-category headers
   drop it), .dt-cell keeps its own numeric tones. */
@media (min-width: 768px) {
  .d-sl-dt .dt-header, .d-sl-dt .dt-row {
    display: grid; grid-template-columns: var(--dt-cols);
    align-items: center; gap: 12px; padding: 8px var(--gutter);
  }
  .d-sl-dt .dt-header {
    position: sticky; top: 0; z-index: 3;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-strong);
    font-size: var(--fs-xs); color: var(--text-tertiary);
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.4px;
  }
  .d-sl-dt .dt-header__cell {
    cursor: pointer; user-select: none; background: none; border: none;
    color: inherit; text-align: left; font: inherit; padding: 0;
  }
  .d-sl-dt .dt-header__cell--num { text-align: center; }
  .d-sl-dt .dt-header__cell.is-sorted::after { content: ' \25BE'; color: var(--accent); }
  .d-sl-dt .dt-header__cell.is-sorted-asc::after { content: ' \25B4'; color: var(--accent); }
  .d-sl-dt .dt-row {
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm); cursor: pointer; min-height: 36px;
  }
  .d-sl-dt .dt-row[hidden] { display: none; }
  .d-sl-dt .dt-row.is-selected { background: var(--accent-bg); }
  .d-sl-dt .dt-row:hover:not(.is-selected) { background: var(--accent-bg-soft); }
  .d-sl-dt .dt-cell { color: var(--text-primary); min-width: 0; }
  .d-sl-dt .dt-cell--num { text-align: center; font-family: var(--font-mono); }
  .d-sl-dt .dt-cell--neg { color: var(--error); }
  .d-sl-dt .dt-cell--warn { color: var(--warning); }
  .d-sl-dt .dt-cell--ok { color: var(--success); }
  .d-sl-dt .dt-cat {
    position: sticky; top: 34px; z-index: 2;
    background: var(--bg-surface); padding: 10px var(--gutter);
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border);
  }
  .d-sl-dt .dt { --dt-cols: 24px minmax(180px, 1.5fr) repeat(5, 1fr); }
  .d-sl-dt .dt-header__cell--num { text-align: right; }
  .d-sl-dt .dt-cell--num { text-align: right; }
  .d-sl-dt .dt-header__cell:last-child,
  .d-sl-dt .dt-cell:last-child { padding-right: 40px; }
  .d-sl-dt .dt-cell--gp-ok  { color: var(--success); }
  .d-sl-dt .dt-cell--gp-warn { color: var(--warning); }
  .d-sl-dt .dt-cell--gp-err  { color: var(--error); }
  .d-sl-dt .dt-cell--icon { color: var(--text-tertiary); font-size: var(--fs-xs); cursor: pointer; }
  .d-sl-dt .dt-cell--icon.is-expanded { transform: rotate(90deg); }
  .d-sl-dt .dt-cell--cost { color: var(--text-secondary); }
  .d-sl-dt .dt-row--expand { padding-left: 32px; background: var(--bg-surface); }
  .d-sl-dt .dt-cell--comp-name { font-size: var(--fs-xs); color: var(--text-secondary); }
  .d-sl-dt .dt-cell--comp-qty { font-size: var(--fs-xs); font-family: var(--font-mono); }
  .d-sl-dt .dt-cell--loading { font-size: var(--fs-xs); color: var(--text-tertiary); }
  .d-sl-dt .dt-row--hover-wrap { position: relative; }
}

/* ---- Comp detail drawer: entries list (02d/02g) ----
   Rows are the shared lc-item-row primitive with the comp grid modifier;
   the entries zone reuses m-sl-detail__entries for the recessed full-bleed
   depth treatment. m-sl-comp-row stays as a behaviour hook only (no visual
   styles) — the cell classes below are the comp-specific cells. */
.lc-grid--comp { grid-template-columns:minmax(0,1.6fr) 48px 52px 60px 24px; }
.m-sl-comp-colhead { margin-top:0; }
.m-sl-comp-row__input { width:100%; min-height:32px; padding:4px 6px; background:var(--bg-surface); border:1px solid var(--border); border-radius:4px; color:var(--text-primary); font-family:var(--font-mono); font-size:var(--fs-sm); text-align:right; }
.m-sl-comp-row__input--flat { grid-column:2 / span 2; }
.m-sl-comp-row__value { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--warning); font-weight:500; text-align:right; }
.m-sl-comp-row__static { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-secondary); text-align:right; }
.m-sl-comp-row__remove { width:28px; height:28px; background:none; border:none; color:var(--text-tertiary); font-size:var(--fs-base); font-family:var(--font-mono); cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* Sales detail drawer: combo picks as a block list (02g) — one line per
   component so long selections stay readable */
.m-sl-detail-combo { margin-top:4px; padding-left:8px; border-left:2px solid var(--info); }
.m-sl-detail-combo__line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:1px 0; }
.m-sl-detail-combo__name { font-size:var(--fs-xs); color:var(--text-secondary); min-width:0; }
.m-sl-detail-combo__qty { font-size:var(--fs-xs); color:var(--text-primary); font-family:var(--font-mono); flex-shrink:0; }

/* Table expand card: actual combo components sold this period (02g) */
.m-sl-tbl-combo { margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.m-sl-tbl-combo__title { font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:0.6px; color:var(--info); font-family:var(--font-mono); font-weight:600; margin-bottom:4px; }
.m-sl-tbl-combo__group { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:2px 0; }
.m-sl-tbl-combo__opts { font-size:var(--fs-xs); color:var(--text-secondary); min-width:0; }
.m-sl-tbl-combo__label { font-size:var(--fs-xs); color:var(--text-primary); font-family:var(--font-mono); font-weight:500; flex-shrink:0; }

/* Combo component editing (02f) — summary line toggles a full-width
   m-sl-combo-panel (02a primitive) inserted as a sibling row */
.m-sl-comp-combo-toggle { display:block; background:none; border:none; padding:0; min-height:28px; text-align:left; cursor:pointer; }
.m-sl-comp-combo-expand { padding:0 var(--gutter) 10px; border-bottom:1px solid var(--border); }
.m-sl-comp-combo-expand .m-sl-combo-panel { margin-top:0; }
.m-sl-comp-row.has-combo-open { border-bottom:none; }
.m-sl-comp-rows__empty { padding:14px var(--gutter); font-size:var(--fs-sm); color:var(--text-tertiary); }

/* ---- Comp detail drawer: flex body + pinned footer (02d) ----
   The comp drawer body becomes a flex column: everything except the
   footer lives in an internal scroll area, so the footer is always
   pinned to the panel bottom and never covers content (same shape as
   the entry form's live footer and the invoice confirmed footer). */
.m-sl-drawer__body--flex { display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; }
#comp-detail-drawer .m-sl-drawer__panel { background:var(--bg-base); }
.m-sl-drawer__body--flex .m-sl-comp-detail { display:flex; flex-direction:column; flex:1; min-height:0; }
.m-sl-drawer__body--flex .m-sl-comp-detail > form { display:flex; flex-direction:column; flex:1; min-height:0; }
.m-sl-comp-scroll { flex:1; min-height:0; overflow-y:auto; margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter) 16px; }

.m-sl-comp-footer { flex-shrink:0; display:grid; grid-template-columns:1fr 1.2fr auto; align-items:stretch; margin:0 calc(-1 * var(--gutter)); background:var(--bg-surface); border-top:1px solid var(--border); }
.m-sl-comp-footer__cell { padding:10px var(--gutter) 12px; }
.m-sl-comp-footer__cell + .m-sl-comp-footer__cell { border-left:1px solid var(--border); }
.m-sl-comp-footer__btnwrap { display:flex; align-items:center; padding:8px var(--gutter); border-left:1px solid var(--border); }
.m-sl-comp-footer__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.7px; }
.m-sl-comp-footer__value { font-size:var(--fs-base); font-family:var(--font-mono); font-weight:500; margin-top:2px; color:var(--text-primary); }
.m-sl-comp-footer__value--warn { color:var(--warning); }
.m-sl-comp-footer__save { padding:12px 24px; min-height:48px; background:var(--accent); color:var(--bg-base); border:none; border-radius:8px; font-size:var(--fs-sm); font-weight:600; font-family:var(--font-body); cursor:pointer; }

/* ============================================================
   P&L — Mobile Hub + Table + Activity (08-sales-pnl / 03a)
   m-pl-* namespace. Shell pieces (period selector, preset
   sheet, tabs, panes) reuse the shared m-sl-* primitives from
   the Sales shell; the rules below only re-skin them to the
   P&L accent and add genuinely new P&L components.
   ============================================================ */

/* ---- Accent re-skin of shared shell primitives ---- */
.m-pl-shell .m-sl-period { position: relative; }
.m-pl-shell .m-sl-tabs__tab--active { border-bottom-color: var(--accent); }
.m-pl-shell .m-sl-period__dot { background: var(--accent); }
.m-pl-shell .m-sl-preset-row--active .m-sl-preset-row__radio { border-color: var(--accent); background: var(--accent); }

/* ---- Period preset sheet depth — SHARED by Sales and P&L (born in
       03a, promoted to shared per Charles). pl-period-picker.jsx
       selected-row language: tinted wash + coloured edge; the sheet
       floats as a raised panel. Module accent: sales keeps its green
       edge, P&L re-skins to copper below. ---- */
.m-sl-preset-sheet { background: var(--bg-surface); border: 1px solid var(--border-strong); border-top: none; border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px var(--overlay); overflow: hidden; }
.m-sl-preset-sheet__header { background: var(--bg-base); }
.m-sl-preset-row { border-left: 2px solid transparent; transition: background 0.12s ease; }
.m-sl-preset-row:active { background: var(--bg-elevated); }
.m-sl-preset-row--active { border-left-color: var(--sales-accent); }
.m-pl-shell .m-sl-preset-row--active { background: var(--accent-bg); border-left-color: var(--accent); }
.m-pl-shell .m-sl-preset-row--active .m-sl-preset-row__label { color: var(--accent); }

/* ---- Preset sheet: custom range pocket — SHARED by Sales and P&L.
       An inset "pocket" below the rows. P&L: FROM/TO combine (aggregate
       endpoint). Sales: jump to any period (no aggregate endpoint yet). ---- */
.m-sl-custom { display: none; padding: 12px var(--gutter) 16px; background: var(--bg-base); border-top: 1px solid var(--border); box-shadow: inset 0 8px 14px -10px var(--overlay); }
.m-sl-custom--open { display: block; }
.m-sl-custom__row { display: flex; align-items: center; gap: 10px; }
.m-sl-custom__field { flex: 1; min-width: 0; }
.m-sl-custom__label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; margin-bottom: 6px; }
.m-sl-custom__arrow { color: var(--text-tertiary); font-size: var(--fs-sm); padding-top: 14px; flex-shrink: 0; }
.m-sl-custom__select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); font-size: var(--fs-sm); font-family: var(--font-mono); min-height: 36px; box-shadow: 0 2px 6px -2px var(--overlay); }
.m-sl-custom__apply { margin-top: 10px; width: 100%; padding: 11px var(--gutter); border-radius: 8px; font-size: var(--fs-sm); font-weight: 500; font-family: var(--font-body); min-height: 44px; cursor: pointer; border: 1px solid var(--sales-accent); background: var(--sales-accent); color: var(--bg-base); }
.m-pl-shell .m-sl-custom__apply { border-color: var(--accent); background: var(--accent); }
.m-sl-custom__error { margin-top: 8px; font-size: var(--fs-xs); color: var(--error); display: none; }
.m-sl-custom__error--show { display: block; }

/* ---- Hub scroll container (same shape as .m-sl-hub-scroll, plus
       the 14px top breathing room from pl-hub.jsx) ---- */
.m-pl-hub-scroll { overflow-y: auto; flex: 1; padding: 14px 0 80px; }

/* ---- Card + section label ---- */
.m-pl-card { margin: 0 var(--gutter) 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.m-pl-row { padding: 11px var(--gutter); display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.m-pl-row + .m-pl-row { border-top: 1px solid var(--border); }
.m-pl-row__muted { color: var(--text-tertiary); }

.m-pl-section-label { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gutter); margin-bottom: 8px; font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; }
.m-pl-section-label__right { color: var(--text-tertiary); font-family: var(--font-mono); text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }

/* ---- Stat grid ---- */
.m-pl-stat-grid { display: grid; border-top: 1px solid var(--border); }
.m-pl-stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.m-pl-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.m-pl-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.m-pl-stat-grid__cell { padding: 10px var(--gutter); min-width: 0; }
.m-pl-stat-grid__cell + .m-pl-stat-grid__cell { border-left: 1px solid var(--border); }
.m-pl-stat-grid--dense .m-pl-stat-grid__cell { padding: 8px 10px; }
.m-pl-stat-grid--flush { border-top: none; }
.m-pl-stat-grid__label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; }
.m-pl-stat-grid__value { font-size: var(--fs-base); font-family: var(--font-heading); font-weight: 500; margin-top: 3px; color: var(--text-primary); line-height: 1.1; }
.m-pl-stat-grid__value--secondary { color: var(--text-secondary); }
.m-pl-stat-grid__sub { font-size: var(--fs-xs); margin-top: 3px; color: var(--text-tertiary); font-family: var(--font-mono); }

/* ---- Badges ---- */
.m-pl-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-size: var(--fs-2xs); letter-spacing: 0.7px; font-weight: 600; text-transform: uppercase; font-family: var(--font-mono); }
.m-pl-badge--default { background: var(--bg-elevated); color: var(--text-tertiary); border: 1px solid var(--border); }
.m-pl-badge--accent { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-border); }
.m-pl-badge--ref { background: var(--bg-elevated); color: var(--text-tertiary); border: 1px solid var(--border); }
.m-pl-badge--info { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-border); }
.m-pl-badge--success { background: var(--success-bg-strong); color: var(--success); border: 1px solid var(--success-border); }
.m-pl-badge--warning { background: var(--warning-bg-strong); color: var(--warning); border: 1px solid var(--warning-border-soft); }
.m-pl-badge--required { background: var(--error-bg-strong); color: var(--error); border: 1px solid var(--error-border); }

/* ---- Group dots (drinks/food/other — fixed PL_GROUP_COLORS palette,
       analogous to CAT_COLORS; palette constants, not theme tokens) ---- */
.m-pl-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; flex-shrink: 0; vertical-align: middle; }
.m-pl-dot--drinks { background: var(--accent); }
.m-pl-dot--food { background: #8aa274; }
.m-pl-dot--other { background: #7c7c82; }

/* ---- Deltas (Decision 25: green = favourable, red = unfavourable,
       grey = flat) ---- */
.m-pl-delta { font-size: var(--fs-xs); font-family: var(--font-mono); }
.m-pl-delta--up { color: var(--success); }
.m-pl-delta--down { color: var(--error); }
.m-pl-delta--flat { color: var(--text-tertiary); }

/* ---- Dashed explainer note (neutral) ---- */
.m-pl-note { margin: 0 var(--gutter) 12px; padding: 8px var(--gutter); border: 1px dashed var(--border-strong); border-radius: 8px; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-tertiary); }
.m-pl-note--stub { margin-top: 14px; }

/* ---- Hub: GP% hero ---- */
.m-pl-hero { padding: 14px var(--gutter) 0; }
.m-pl-hero__period { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; font-family: var(--font-mono); margin-bottom: 6px; }
.m-pl-hero__row { display: flex; justify-content: space-between; align-items: flex-end; }
.m-pl-hero__right { text-align: right; }
.m-pl-hero__gp { font-size: var(--fs-display-lg); font-family: var(--font-heading); font-weight: 400; color: var(--text-primary); line-height: 1; letter-spacing: -0.5px; }
.m-pl-hero__gp-sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 4px; font-family: var(--font-mono); }
.m-pl-hero__margin-label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; }
.m-pl-hero__margin { font-size: var(--fs-2xl); font-family: var(--font-heading); font-weight: 500; margin-top: 3px; line-height: 1.1; }
.m-pl-hero__margin-sub { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.m-pl-hero__grid-gap { margin-top: 14px; }

/* ---- Hub: mirrored comparison block ---- */
.m-pl-compare { background: var(--bg-elevated); border-top: 1px solid var(--border); }
.m-pl-compare__header { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--gutter) 0; }
.m-pl-compare__label { font-size: var(--fs-xs); color: var(--text-tertiary); }
.m-pl-compare__label b { color: var(--text-secondary); font-weight: 500; }
.m-pl-compare__rule { padding: 4px var(--gutter) 0; font-size: var(--fs-2xs); color: var(--text-tertiary); font-style: italic; }

/* Hero row: GP% large on left, gross profit + net margin on right */
.m-pl-compare__hero { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px var(--gutter) 6px; }
.m-pl-compare__hero-left { flex: 1; min-width: 0; }
.m-pl-compare__hero-gp { font-size: var(--fs-display-lg); font-family: var(--font-heading); font-weight: 400; color: var(--text-primary); line-height: 1; }
.m-pl-compare__hero-label { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.m-pl-compare__hero-right { text-align: right; flex-shrink: 0; }
.m-pl-compare__hero-amount { font-size: var(--fs-lg); font-family: var(--font-mono); font-weight: 500; color: var(--text-primary); line-height: 1.2; }
.m-pl-compare__hero-margin-label { font-size: var(--fs-2xs); color: var(--text-tertiary); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.m-pl-compare__hero-margin { font-size: var(--fs-base); font-family: var(--font-heading); font-weight: 500; color: var(--text-secondary); margin-top: 2px; line-height: 1.1; }
.m-pl-compare__prev-sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); }
.m-pl-compare__delta-line { margin-top: 2px; display: block; }

/* 2x2 stat grid for the comparison breakdown */
.m-pl-compare__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border); }
.m-pl-compare__stat { padding: 8px var(--gutter); border-bottom: 1px solid var(--border); }
.m-pl-compare__stat:nth-child(odd) { border-right: 1px solid var(--border); }
.m-pl-compare__stat-label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.m-pl-compare__stat-value { font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: 500; color: var(--text-secondary); margin-top: 2px; }
.m-pl-compare__stat-delta { margin-top: 2px; }

/* ---- Hub: variance strip (neutral — diagnostic, not alarm) ---- */
.m-pl-variance { margin: 0 var(--gutter) 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px var(--gutter); }
.m-pl-variance__header { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.m-pl-variance__value { font-family: var(--font-mono); color: var(--text-primary); }
.m-pl-variance__body { font-size: var(--fs-xs); line-height: 1.55; color: var(--text-tertiary); }
.m-pl-variance__body .mono { font-family: var(--font-mono); color: var(--text-secondary); }

/* ---- PLButton ---- */
.m-pl-btn { padding: 11px var(--gutter); text-align: center; border-radius: 8px; font-size: var(--fs-sm); font-weight: 500; font-family: var(--font-body); cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.m-pl-btn--secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); }
.m-pl-btn--primary { background: var(--accent); color: var(--bg-base); border: 1px solid var(--accent); }
.m-pl-btn--grow { flex: 1; }
.m-pl-btn--full { width: 100%; }
.m-pl-btn-row { display: flex; gap: 8px; width: 100%; }
.m-pl-btn-row--gap-top { margin-top: 16px; }
.m-pl-btn-stack-gap { margin-top: 8px; width: 100%; }

/* ---- Empty states (9a / 9b) ---- */
.m-pl-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 28px; text-align: center; }
.m-pl-empty__icon { width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--bg-surface); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); color: var(--text-tertiary); margin-bottom: 14px; font-family: var(--font-mono); }
.m-pl-empty__title { font-size: var(--fs-lg); color: var(--text-primary); font-weight: 500; font-family: var(--font-heading); margin-bottom: 8px; }
.m-pl-empty__text { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.55; max-width: 280px; }
.m-pl-empty__foot { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 12px; font-style: italic; }
.m-pl-empty__cta { margin-top: 18px; width: 200px; }

/* ---- Export menu (header overflow dropdown) ---- */
.m-pl-export-trigger { background: none; border: none; color: var(--text-secondary); font-size: var(--fs-xl); line-height: 1; padding: 0 6px; min-width: 36px; min-height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.m-pl-export-menu { position: fixed; top: 56px; right: 12px; z-index: 120; width: 200px; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 8px 24px var(--overlay); overflow: hidden; }
.m-pl-export-menu[hidden] { display: none; }
.m-pl-export-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px var(--gutter); border: none; background: none; text-align: left; font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; font-family: var(--font-body); cursor: pointer; min-height: 44px; }
.m-pl-export-menu__item + .m-pl-export-menu__item { border-top: 1px solid var(--border); }
.m-pl-export-menu__item--disabled { color: var(--text-tertiary); cursor: default; }
.m-pl-export-menu__icon { width: 18px; text-align: center; color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-sm); flex-shrink: 0; }
.m-pl-export-menu__hint { margin-left: auto; font-size: var(--fs-2xs); color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; }
.m-pl-export-scrim { position: fixed; inset: 0; z-index: 115; background: transparent; }
.m-pl-export-scrim[hidden] { display: none; }

/* ---- Top-bar eyebrow: long period names truncate, never wrap ---- */
.m-pl-eyebrow-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Smart report placeholder (pl-hub.jsx, coming soon) ---- */
.m-pl-smart { margin: 0 var(--gutter) 16px; padding: 20px var(--gutter); border: 1px dashed var(--border-strong); border-radius: 10px; text-align: center; background: var(--bg-surface); }
.m-pl-smart__title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; font-family: var(--font-heading); }
.m-pl-smart__text { font-size: var(--fs-xs); color: var(--text-tertiary); max-width: 240px; margin: 0 auto; line-height: 1.5; }

/* (Custom range pocket lives in the shared .m-sl-custom* block above —
   one source of truth for the Sales and P&L period pickers.) */

/* ============================================================
   P&L Table tab — waterfall (03b)
   ============================================================ */

/* ---- Scroll pane (same shape as .m-pl-hub-scroll) ---- */
.m-pl-table-scroll { overflow-y: auto; flex: 1; padding: 14px 0 80px; }

/* ---- Combined-view notice (dismissable) ---- */
.m-pl-note--combined { display: flex; align-items: flex-start; gap: 8px; }
.m-pl-note--combined[hidden] { display: none; }
.m-pl-note__dismiss { margin-left: auto; flex-shrink: 0; background: none; border: none; color: var(--text-tertiary); font-size: var(--fs-base); line-height: 1; padding: 0 4px; min-width: 28px; min-height: 28px; cursor: pointer; }

/* ---- Waterfall column headers (no Δ column — deltas render only on
   section rows, Amendment 2) ---- */
.m-pl-col-header { display: flex; align-items: center; padding: 6px var(--gutter); background: var(--bg-base); border-bottom: 1px solid var(--border); font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; font-family: var(--font-mono); }
.m-pl-col-header--indent { padding-left: 26px; }
.m-pl-col-header__name { flex: 1; min-width: 0; }
.m-pl-col-header__amount { width: 78px; text-align: right; }
.m-pl-col-header__share { width: 48px; text-align: right; }
.m-pl-col-header__expand { width: 16px; }

/* ---- Waterfall rows ---- */
.m-pl-wf-row { display: flex; align-items: center; padding: 10px var(--gutter); }
.m-pl-wf-row[data-wf-drawer] { cursor: pointer; }
.m-pl-wf-row--indent { padding-left: 26px; }
.m-pl-wf-row--bold { font-weight: 500; }
.m-pl-wf-row--tinted { background: var(--accent-bg-soft); }
.m-pl-wf-row--rule { border-top: 1px solid var(--border); }
.m-pl-wf-row__name { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-secondary); display: flex; align-items: center; }
.m-pl-wf-row__name--faint { color: var(--text-tertiary); }
.m-pl-wf-row--bold .m-pl-wf-row__name { color: var(--text-primary); }
.m-pl-wf-row__amount { width: 78px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-sm); }
.m-pl-wf-row--bold .m-pl-wf-row__amount { font-size: var(--fs-sm); color: var(--text-primary); }
.m-pl-wf-row__share { width: 48px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); }
.m-pl-wf-row__delta { width: 68px; margin-left: 6px; text-align: right; white-space: nowrap; flex-shrink: 0; } /* fixed-width so amount/% rev align across header, section and category rows */
.m-pl-col-header__delta { width: 68px; margin-left: 6px; flex-shrink: 0; text-align: right; }
.m-pl-wf-row__expand { width: 16px; text-align: right; color: var(--text-tertiary); font-size: var(--fs-base); font-family: var(--font-mono); }
.m-pl-wf-row__badge { margin-left: 6px; }
/* Reference rows (sales log under a declared total): visibly NOT a
   component of the revenue sum — smaller, tertiary, annotated inline */
.m-pl-wf-row--ref { padding-top: 7px; padding-bottom: 7px; }
.m-pl-wf-row--ref .m-pl-wf-row__name { font-size: var(--fs-xs); color: var(--text-tertiary); display: block; }
.m-pl-wf-row--ref .m-pl-wf-row__amount { font-size: var(--fs-xs); color: var(--text-tertiary); }
/* Annotation stacks under the name — inline it squeezes the name cell
   against the amount and forces ugly wrapping */
.m-pl-wf-row__annot { display: block; margin-top: 2px; font-size: var(--fs-2xs); color: var(--text-tertiary); font-family: var(--font-mono); white-space: nowrap; }

/* ---- Drill-in drawer close (extends shared chrome with an m-pl child —
   the table behind the scrim confused without an explicit way out) ---- */
.m-pl-drill-close { flex-shrink: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 500; font-family: var(--font-body); padding: 6px var(--gutter); min-height: 32px; cursor: pointer; }

/* ---- Other-costs subsection headers (Promoted / Other) ---- */
.m-pl-sub-section { padding: 7px var(--gutter) 4px; border-top: 1px solid var(--border); font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; font-family: var(--font-mono); }
.m-pl-sub-section--promoted { color: var(--text-secondary); }

/* ---- Drill-in drawer cards — each breakdown group is an inset card
   on the drawer surface (bg-base on bg-surface), totals on an elevated
   footer strip. Rows directly on the panel read flat. ---- */
.m-pl-drill-card { background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.m-pl-drill-card:first-child { margin-top: 4px; }
.m-pl-sub-header { padding: 8px var(--gutter); margin-bottom: 4px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; font-family: var(--font-mono); }
.m-pl-sub-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px var(--gutter); font-size: var(--fs-xs); color: var(--text-secondary); }
.m-pl-sub-row:last-child { padding-bottom: 11px; }
.m-pl-sub-row--divider { border-bottom: 1px dashed var(--border); }
.m-pl-sub-row--faint { color: var(--text-tertiary); }
/* Category groups (other-costs drill): lead row + source line bond into one
   unit, hairline between units so long category lists stay scannable */
.m-pl-sub-row--lead { border-top: 1px solid var(--border); padding-top: 9px; color: var(--text-primary); }
.m-pl-sub-header + .m-pl-sub-row--lead { border-top: none; padding-top: 6px; }
.m-pl-sub-row--src { padding-top: 0; margin-top: -2px; }
.m-pl-sub-row__value { font-family: var(--font-mono); white-space: nowrap; color: var(--text-primary); }
.m-pl-sub-row--faint .m-pl-sub-row__value { color: inherit; }
.m-pl-sub-row__annot { color: var(--text-tertiary); font-size: 0.85em; }
.m-pl-sub-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px var(--gutter); margin-top: 4px; border-top: 1px solid var(--border); background: var(--bg-elevated); font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); }
.m-pl-sub-total__value { font-family: var(--font-mono); color: var(--text-primary); }
.m-pl-drill-card--total .m-pl-sub-total { margin-top: 0; border-top: none; }

/* ---- Neutral variance strip (COGS drawer only — the Hub owns the
   surface-level variance card). Same inset-card shape. ---- */
.m-pl-var-strip { background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.m-pl-var-strip__header { display: flex; justify-content: space-between; align-items: baseline; padding: 9px var(--gutter); background: var(--bg-elevated); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); }
.m-pl-var-strip__value { font-family: var(--font-mono); color: var(--text-primary); }
.m-pl-var-strip__detail { padding: 8px var(--gutter) 10px; font-size: var(--fs-2xs); color: var(--text-tertiary); line-height: 1.5; }

/* ---- GP / Net emphasised totals. A loss must never render in
   celebratory green/copper (Amendment 4) — --neg switches to error. ---- */
.m-pl-gp-total { margin: 6px var(--gutter) 10px; background: var(--success-bg); border: 1px solid var(--success-border); border-radius: 12px; overflow: hidden; }
.m-pl-gp-total__label { padding: 11px var(--gutter) 3px; font-size: var(--fs-2xs); color: var(--success); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.m-pl-gp-total__row { padding: 0 var(--gutter) 11px; display: flex; align-items: baseline; justify-content: space-between; }
.m-pl-gp-total__value { font-size: var(--fs-2xl); font-family: var(--font-heading); color: var(--success); font-weight: 500; line-height: 1; }
.m-pl-gp-total__pct { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--success); margin-left: 8px; opacity: 0.85; }
.m-pl-gp-total--neg { background: var(--error-bg-strong); border-color: var(--error-border); }
.m-pl-gp-total--neg .m-pl-gp-total__label,
.m-pl-gp-total--neg .m-pl-gp-total__value,
.m-pl-gp-total--neg .m-pl-gp-total__pct { color: var(--error); }

/* Total costs (goods + other) — sibling of the GP/Net cards, error-toned */
.m-pl-cost-total { margin: 6px var(--gutter) 10px; background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 12px; overflow: hidden; }
.m-pl-cost-total__label { padding: 11px var(--gutter) 3px; font-size: var(--fs-2xs); color: var(--error); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.m-pl-cost-total__row { padding: 0 var(--gutter) 11px; display: flex; align-items: baseline; justify-content: space-between; }
.m-pl-cost-total__value { font-size: var(--fs-2xl); font-family: var(--font-heading); color: var(--error); font-weight: 500; line-height: 1; }
.m-pl-cost-total__pct { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--error); margin-left: 8px; opacity: 0.85; }

.m-pl-net-total { margin: 6px var(--gutter) 14px; background: var(--accent-bg-soft); border: 1px solid var(--accent-border); border-radius: 12px; overflow: hidden; }
.m-pl-net-total__label { padding: 12px var(--gutter) 4px; font-size: var(--fs-2xs); color: var(--accent); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.m-pl-net-total__row { padding: 0 var(--gutter) 12px; display: flex; align-items: baseline; justify-content: space-between; }
.m-pl-net-total__value { font-size: var(--fs-display); font-family: var(--font-heading); color: var(--accent); font-weight: 500; line-height: 1; }
.m-pl-net-total__pct { font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--accent); font-weight: 500; margin-left: 10px; }
.m-pl-net-total--neg { background: var(--error-bg-strong); border-color: var(--error-border); }
.m-pl-net-total--neg .m-pl-net-total__label,
.m-pl-net-total--neg .m-pl-net-total__value,
.m-pl-net-total--neg .m-pl-net-total__pct { color: var(--error); }

/* ============================================================
   P&L Activity tab — manual revenue/costs, attendance, feed (03c)
   ============================================================ */

/* ---- Scroll pane (same shape as .m-pl-hub-scroll) ---- */
.m-pl-activity-scroll { overflow-y: auto; flex: 1; padding: 14px 0 80px; }

/* ---- Section-label extras: tap hint line ---- */
.m-pl-hint { padding: 0 var(--gutter) 6px; font-size: var(--fs-2xs); color: var(--text-tertiary); font-style: italic; }

/* ---- Add-entry button row ---- */
.m-pl-add-row { padding: 0 var(--gutter) 12px; }

/* ---- Revenue rows (tap → 04a edit sheet) ---- */
.m-pl-rev-row { display: flex; align-items: center; gap: 10px; padding: 11px var(--gutter); }
.m-pl-rev-row[data-revenue-id] { cursor: pointer; }
.m-pl-rev-row + .m-pl-rev-row { border-top: 1px solid var(--border); }
.m-pl-rev-row__body { flex: 1; min-width: 0; }
.m-pl-rev-row__name { font-size: var(--fs-sm); color: var(--text-primary); }
.m-pl-rev-row__meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); }
.m-pl-rev-row__amount { font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: 500; }

/* ---- Manual cost rows (tap → 04a edit sheet) ---- */
.m-pl-cost-row { display: flex; align-items: center; gap: 10px; padding: 11px var(--gutter); }
.m-pl-cost-row[data-cost-id] { cursor: pointer; }
.m-pl-cost-row + .m-pl-cost-row { border-top: 1px solid var(--border); }
.m-pl-cost-row__body { flex: 1; min-width: 0; }
.m-pl-cost-row__name { font-size: var(--fs-sm); color: var(--text-primary); }
.m-pl-cost-row__meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); }
.m-pl-cost-row__right { text-align: right; }
.m-pl-cost-row__amount { font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: 500; }
.m-pl-cost-row__tag { font-size: var(--fs-2xs); font-family: var(--font-mono); letter-spacing: 0.3px; margin-top: 2px; }
.m-pl-cost-row__tag--auto { color: var(--success); }
.m-pl-cost-row__tag--manual { color: var(--text-tertiary); }

/* ---- Dual-display revenue summary (Manual / Sales log / Gap) ---- */
.m-pl-dual-display { margin: 0 var(--gutter) 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.m-pl-dual-row { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--gutter); }
.m-pl-dual-row + .m-pl-dual-row { border-top: 1px solid var(--border); }
.m-pl-dual-row--gap { background: var(--bg-base); }
.m-pl-dual-row__label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; }
.m-pl-dual-row__label--warn { color: var(--warning); }
.m-pl-dual-row__sub { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 2px; }
.m-pl-dual-row__value { font-size: var(--fs-lg); font-family: var(--font-heading); font-weight: 500; }
.m-pl-dual-row__value--secondary { font-size: var(--fs-base); font-family: var(--font-mono); color: var(--text-secondary); }
.m-pl-dual-row__value--warn { color: var(--warning); }
.m-pl-dual-row__right { text-align: right; }

/* ---- 9c dashed empty cards (revenue strong variant, costs plain) ---- */
.m-pl-empty-card { margin: 0 var(--gutter) 8px; padding: 22px var(--gutter); border: 1px dashed var(--border-strong); border-radius: 10px; text-align: center; font-size: var(--fs-xs); color: var(--text-tertiary); }
.m-pl-empty-card--strong { border-width: 1.5px; background: var(--bg-surface); }
.m-pl-empty-card__title { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; margin-bottom: 4px; }
.m-pl-empty-card__text { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.5; max-width: 260px; margin: 0 auto; }

/* ---- Attendance editable fields (shared m-autosave indicator) ---- */
.m-pl-attendance-row { display: flex; align-items: center; gap: 10px; padding: 10px var(--gutter); }
.m-pl-attendance-row + .m-pl-attendance-row { border-top: 1px solid var(--border); }
.m-pl-attendance-row__label { flex: 1; font-size: var(--fs-sm); }
.m-pl-attendance-row__input { width: 96px; padding: 6px 10px; font-family: var(--font-mono); font-size: var(--fs-sm); text-align: right; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-base); color: var(--text-primary); outline: none; }
.m-pl-attendance-row__input:focus { border-color: var(--accent); }

/* ---- Recent activity feed rows (stream-item style, built by pnl.js) ---- */
.m-pl-activity-row { display: flex; align-items: center; gap: 10px; padding: 10px var(--gutter); border-radius: 8px; border: 1px solid var(--border); margin-bottom: 6px; }
.m-pl-activity-row[hidden] { display: none; }
.m-pl-activity-row--create { border-left: 3px solid var(--success); }
.m-pl-activity-row--update { border-left: 3px solid var(--accent); }
.m-pl-activity-row--delete { border-left: 3px solid var(--error); }
.m-pl-activity-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-family: var(--font-mono); flex-shrink: 0; }
.m-pl-activity-icon--create { background: var(--success); color: #1a1816; }
.m-pl-activity-icon--update { background: var(--accent); color: #1a1816; }
.m-pl-activity-icon--delete { background: var(--error); color: #1a1816; }
.m-pl-activity-row__body { flex: 1; min-width: 0; }
.m-pl-activity-row__title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.m-pl-activity-row__who { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); }
.m-pl-activity-row__amount { font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: 500; flex-shrink: 0; }

/* ================================================================
   P&L add/edit/delete sheets (mobile, 04a — partials/pnl_sheets.html)
   Sheet shell is the shared m-sl-drawer chrome — chrome is NEVER
   redefined here. Only footer layout helpers, field styles and the
   layer/scope/chip pickers are new.
   ================================================================ */

/* ---- Sheet footer layout helpers ---- */
.m-pl-sheet-row { display: flex; gap: 10px; width: 100%; }
.m-pl-sheet-row > .m-pl-btn, .m-pl-sheet-row > .m-pl-delete-btn { flex: 1; }
.m-pl-sheet-stack { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* ---- PLField + PLInput (drawer body carries 16px padding, so fields
   keep no side margin of their own) ---- */
.m-pl-field { margin: 0 0 12px; }
.m-pl-field__label { font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500; margin-bottom: 6px; }
.m-pl-input { display: flex; align-items: center; gap: 8px; padding: 8px var(--gutter); border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(0,0,0,0.28); box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); font-size: var(--fs-sm); color: var(--text-primary); }
.m-pl-input--lg { padding: 11px var(--gutter); font-size: var(--fs-lg); font-weight: 500; }
.m-pl-input--mono { font-family: var(--font-mono); }
.m-pl-input__prefix { color: var(--text-tertiary); }
.m-pl-input__suffix { color: var(--text-tertiary); }
.m-pl-input > input, .m-pl-input > select { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; outline: none; padding: 0; }
.m-pl-input > select { appearance: none; -webkit-appearance: none; }
.m-pl-input:focus-within { border-color: var(--accent); }

/* ---- Delete confirmation ---- */
.m-pl-delete-target { padding: 0 2px 4px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.m-pl-delete-desc { padding: 0 2px 12px; margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.m-pl-delete-btn { background: transparent; border: 1px solid var(--border); color: var(--error); padding: 10px; border-radius: 8px; font-size: var(--fs-sm); font-family: var(--font-body); font-weight: 500; cursor: pointer; width: 100%; min-height: 44px; }
.m-pl-delete-btn[disabled] { opacity: 0.45; cursor: default; }

/* ---- Inline sheet error ---- */
.m-pl-sheet-error { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--error); line-height: 1.4; }

/* ---- Chips (one-off/recurring, GP scope, date mode) ---- */
.m-pl-chip-row { display: flex; gap: 8px; }
.m-pl-chip-row--gap { margin: 0 0 12px; }
.m-pl-chip { padding: 7px var(--gutter); min-height: 32px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-secondary); font-size: var(--fs-xs); font-family: var(--font-body); font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.m-pl-chip--on { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* ---- Three-layer revenue radio (locked labels, lesson #53) ---- */
.m-pl-layer-group { display: flex; flex-direction: column; gap: 6px; }
.m-pl-layer { display: flex; align-items: flex-start; gap: 10px; padding: 9px var(--gutter); border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-elevated); box-shadow: 0 1px 2px rgba(0,0,0,0.25); cursor: pointer; }
.m-pl-layer input { position: absolute; opacity: 0; pointer-events: none; }
.m-pl-layer__dot { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex-shrink: 0; }
.m-pl-layer__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-pl-layer__name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.m-pl-layer__sub { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.4; }
.m-pl-layer:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.m-pl-layer:has(input:checked) .m-pl-layer__dot { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 4px, transparent 5px); }

/* ---- Recurring template list (rows built by pnl.js, textContent only) ---- */
.m-pl-section-label--sheet { padding: 0; margin: 0 0 8px; }
/* Notes inside a sheet body sit on the drawer's own 16px padding */
.m-sl-drawer__body .m-pl-note { margin: 0 0 12px; }
.m-pl-tmpl-list { border: 1px solid var(--border-strong); border-radius: 8px; background: rgba(0,0,0,0.28); box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); margin: 0 0 10px; overflow: hidden; }
.m-pl-tmpl-row { display: flex; align-items: center; gap: 10px; padding: 9px var(--gutter); cursor: pointer; }
.m-pl-tmpl-row + .m-pl-tmpl-row { border-top: 1px solid var(--border); }
.m-pl-tmpl-row__body { flex: 1; min-width: 0; }
.m-pl-tmpl-row__name { font-size: var(--fs-sm); }
.m-pl-tmpl-row__meta { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 2px; }
.m-pl-tmpl-row__amount { font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: 500; }
.m-pl-tmpl-row__del { background: none; border: none; color: var(--text-tertiary); font-size: var(--fs-base); min-width: 28px; min-height: 28px; cursor: pointer; flex-shrink: 0; }
.m-pl-tmpl-row__del--armed { color: var(--error); font-size: var(--fs-xs); font-weight: 500; }
.m-pl-tmpl-empty { padding: 14px var(--gutter); font-size: var(--fs-xs); color: var(--text-tertiary); text-align: center; }
.m-pl-populate-btn { margin: 0 0 14px; }

/* ---- Activity feed "Show more" expander (rows 11+ hidden until tap) ---- */
.m-pl-activity-more { display: block; width: 100%; padding: 11px var(--gutter); min-height: 36px; background: none; border: none; border-top: 1px solid var(--border); color: var(--accent); font-size: var(--fs-xs); font-family: var(--font-body); font-weight: 500; cursor: pointer; text-align: center; }

/* ============================================================
   P&L settings sheet + COGS drill rows + yield tooltip
   (mobile, 04b — partials/pnl_sheets.html + pnl_table.html)
   ============================================================ */

/* Settings rows sit in a LIFTED card — interactive surfaces go up,
   sunken wells are for typing (DESIGN-LESSONS #55) */
.m-pl-settings-card { border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-elevated); box-shadow: 0 1px 2px rgba(0,0,0,0.25); margin: 0 0 8px; overflow: hidden; }
.m-pl-settings-row { display: flex; align-items: center; gap: 10px; padding: 11px var(--gutter); }
.m-pl-settings-row + .m-pl-settings-row { border-top: 1px solid var(--border); }
.m-pl-settings-row--tap { cursor: pointer; }
.m-pl-settings-row__body { flex: 1; min-width: 0; }
.m-pl-settings-row__primary { font-size: var(--fs-sm); color: var(--text-primary); }
.m-pl-settings-row__secondary { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.m-pl-settings-row__promoted { font-size: var(--fs-xs); color: var(--success); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.3px; margin-top: 2px; }
.m-pl-settings-check { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }

/* On/off toggle — the track is a sunken well, the on-state lifts to accent */
.m-pl-toggle { position: relative; width: 40px; height: 22px; border-radius: 11px; border: 1px solid var(--border-strong); background: rgba(0,0,0,0.28); box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.15s ease, border-color 0.15s ease; }
.m-pl-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-tertiary); transition: left 0.15s ease, background 0.15s ease; }
.m-pl-toggle--on { background: var(--accent-bg); border-color: var(--accent); }
.m-pl-toggle--on .m-pl-toggle__thumb { left: 20px; background: var(--accent); }

/* Inline add-category row (Settings JSON create route — no Settings page) */
.m-pl-addcat-row { display: flex; gap: 8px; margin: 0 0 8px; }
.m-pl-addcat-row .m-pl-input { flex: 1; }
.m-pl-addcat-row .m-pl-chip { flex-shrink: 0; }

/* "edit ›" hint on the settings template list rows */
.m-pl-tmpl-row__edit { font-size: var(--fs-xs); color: var(--text-tertiary); flex-shrink: 0; }

/* COGS drill product rows (Visual Spec) */
.m-pl-drill-row { display: flex; align-items: center; gap: 10px; padding: 11px var(--gutter); }
.m-pl-drill-row + .m-pl-drill-row { border-top: 1px solid var(--border); }
.m-pl-drill-row__body { flex: 1; min-width: 0; }
.m-pl-drill-row__name { font-size: var(--fs-sm); color: var(--text-primary); }
.m-pl-drill-row__name--faint { color: var(--text-tertiary); }
.m-pl-drill-row__meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); }
.m-pl-drill-row__right { text-align: right; }
.m-pl-drill-row__amount { font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: 500; }
.m-pl-drill-row__share { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 2px; }

/* Yield loss tooltip — modal card over a full scrim; must layer above
   the stacked drawers (m-sl-drawer 100 / --top 110) because one trigger
   lives inside the drill drawer body */
.m-pl-tooltip-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 120; }
.m-pl-tooltip { position: absolute; top: 140px; left: 24px; right: 24px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px; padding: 14px var(--gutter); box-shadow: 0 6px 24px rgba(0,0,0,0.45); }
.m-pl-tooltip__header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--fs-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500; font-family: var(--font-mono); }
.m-pl-tooltip__icon { font-size: var(--fs-base); color: var(--text-secondary); }
.m-pl-tooltip__body { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; }
.m-pl-tooltip__detail { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.5; margin-top: 10px; }
.m-pl-tooltip__stat { margin-top: 10px; padding: 8px 10px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }
.m-pl-tooltip__dismiss { margin-top: 12px; text-align: right; font-size: var(--fs-xs); color: var(--accent); font-weight: 500; cursor: pointer; min-height: 28px; display: flex; align-items: center; justify-content: flex-end; }

/* Inline tappable "recipe yield loss ⓘ" trigger inside variance copy */
.m-pl-yield-link { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }

/* Desktop settings modal checkbox label (billing split, 04b) */
.form-label--check { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   Settings — Mobile (single scrollable page; sheets on shared
   m-sl-drawer chrome — NO sheet/overlay/scrim/grabber CSS here).
   m-set-* namespace.
   ============================================================ */

/* ---- Lead band (above sticky chips) ---- */
.m-set-lead { padding:16px var(--gutter) 0; }
.m-set-lead__title { font-family:var(--font-heading); font-size:var(--fs-2xl); font-weight:500; letter-spacing:-0.4px; color:var(--text-primary); margin-bottom:4px; }
.m-set-lead__sub { font-size:var(--fs-sm); color:var(--text-tertiary); line-height:1.5; }

/* ---- Sticky anchor chip row (section jump-nav) ---- */
.m-set-anchors { position:sticky; top:0; z-index:2; margin-top:12px; padding:12px var(--gutter); background:var(--bg-base); border-bottom:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.m-set-anchors__row { display:flex; gap:6px; }

/* ---- Section divider (visual separator between major sections) ---- */
.m-set-divider { height:1px; margin:16px var(--gutter) 0; background:var(--border-strong); }

/* ---- Section header (numbered, optional collapse toggle) ---- */
.m-set-section { padding:24px var(--gutter) 10px; display:flex; align-items:baseline; gap:8px; }
.m-set-section__num { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:1px; min-width:20px; }
.m-set-section__body { flex:1; min-width:0; }
.m-set-section__titlerow { display:flex; align-items:baseline; gap:8px; }
.m-set-section__title { font-family:var(--font-heading); font-size:var(--fs-xl); font-weight:500; color:var(--text-primary); letter-spacing:-0.2px; }
.m-set-section__sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; line-height:1.4; }
.m-set-section__toggle { color:var(--text-tertiary); font-size:var(--fs-base); font-family:var(--font-mono); background:none; border:none; cursor:pointer; min-width:44px; min-height:44px; align-self:center; }
.m-set-section__action { margin-left:auto; }

/* ---- Chip (anchors + filters — matches card radius) ---- */
.m-set-chip { padding:6px var(--gutter); font-size:var(--fs-xs); font-weight:500; font-family:var(--font-body); color:var(--text-secondary); background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); white-space:nowrap; flex-shrink:0; text-decoration:none; min-height:30px; display:inline-flex; align-items:center; cursor:pointer; }
.m-set-chip--active { background:var(--accent); color:var(--bg-base); border-color:var(--accent); font-weight:600; }
.m-set-filters { padding:0 var(--gutter) 8px; display:flex; gap:6px; flex-wrap:wrap; }

/* ---- Card container ---- */
.m-set-card { margin:0 var(--gutter) 8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }

/* ---- COGS / Overhead tag ---- */
.m-set-tag { padding:4px 10px; font-size:var(--fs-xs); font-weight:500; font-family:var(--font-mono); letter-spacing:0.3px; border-radius:14px; flex-shrink:0; }
.m-set-tag--cogs { background:var(--settings-cogs-bg); color:var(--accent); border:1px solid var(--settings-cogs-border); }
.m-set-tag--oh { background:transparent; color:var(--text-tertiary); border:1px solid var(--border-strong); }

/* ---- Cost-category row ---- */
.m-set-cat-row { display:flex; align-items:center; gap:12px; padding:14px var(--gutter); border-top:1px solid var(--border); min-height:52px; cursor:pointer; }
.m-set-cat-row:first-child { border-top:none; }
.m-set-cat-row__main { flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; }
.m-set-cat-row__name { font-size:var(--fs-base); color:var(--text-primary); font-weight:500; }
.m-set-cat-row__uses { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }

/* ---- Numbered sub-label (2.1, 2.2, 2.3) ---- */
.m-set-sublabel { display:flex; align-items:baseline; gap:8px; padding:14px var(--gutter) 6px; }
.m-set-sublabel__num { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:1px; min-width:24px; }
.m-set-sublabel__text { flex:1; font-size:var(--fs-xs); font-weight:500; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.8px; }
.m-set-sublabel__right { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }

/* ---- Dense row ---- */
.m-set-row { display:flex; align-items:center; gap:12px; padding:11px var(--gutter); border-top:1px solid var(--border); min-height:44px; }
.m-set-row:first-child { border-top:none; }
.m-set-row--tap { cursor:pointer; }
.m-set-row--button { width:100%; background:none; border:0; border-top:1px solid var(--border); text-align:left; }
.m-set-row__body { flex:1; min-width:0; }
.m-set-row__head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.m-set-row__label { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-set-row__label--error { color:var(--error); }
.m-set-row__value { font-size:var(--fs-sm); color:var(--text-secondary); }
.m-set-row__value--mono { font-family:var(--font-mono); }
.m-set-row__hint { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; line-height:1.4; font-family:var(--font-mono); }
.m-set-row__arrow { color:var(--text-tertiary); font-size:var(--fs-base); flex-shrink:0; }

/* ---- Inline toggle ---- */
.m-set-toggle { width:32px; height:18px; border-radius:9px; background:var(--bg-base); border:1px solid var(--border-strong); position:relative; flex-shrink:0; cursor:pointer; padding:0; }
.m-set-toggle--on { background:var(--accent); border-color:var(--accent); }
.m-set-toggle__knob { position:absolute; top:1px; left:1px; width:14px; height:14px; border-radius:7px; background:var(--text-tertiary); transition:left 120ms; }
.m-set-toggle--on .m-set-toggle__knob { left:14px; background:var(--text-primary); }

/* ---- Recurring-cost row ---- */
.m-set-rec-row { display:flex; align-items:center; gap:10px; padding:10px var(--gutter); border-top:1px solid var(--border); min-height:44px; cursor:pointer; }
.m-set-rec-row:first-child { border-top:none; }
.m-set-rec-row__body { flex:1; min-width:0; }
.m-set-rec-row__name { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-set-rec-row__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-set-rec-row__amount { font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); flex-shrink:0; }

/* ---- "+ Add" inline action row ---- */
.m-set-add-row { display:flex; align-items:center; gap:8px; padding:9px var(--gutter); border:0; border-top:1px solid var(--border); color:var(--accent); font-size:var(--fs-sm); font-weight:500; font-family:var(--font-body); cursor:pointer; min-height:44px; background:transparent; width:100%; text-align:left; }
.m-set-add-row__icon { font-family:var(--font-mono); font-size:var(--fs-sm); }

/* ---- Populate row ---- */
.m-set-populate-row { display:flex; align-items:center; gap:8px; padding:9px var(--gutter); border:0; border-top:1px solid var(--border); color:var(--text-secondary); font-size:var(--fs-sm); font-weight:500; font-family:var(--font-body); cursor:pointer; min-height:44px; background:transparent; width:100%; text-align:left; }
.m-set-populate-row:disabled { opacity:0.45; cursor:not-allowed; }
.m-set-populate-row__hint { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-left:auto; }

/* ---- Compact empty state ---- */
.m-set-empty { padding:22px var(--gutter); text-align:center; }
.m-set-empty__title { font-size:var(--fs-sm); color:var(--text-secondary); font-weight:500; margin-bottom:4px; }
.m-set-empty__text { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.45; }

/* ---- Version footer ---- */
.m-set-version { padding:12px var(--gutter) 24px; text-align:center; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.5px; }

/* ============== SHEET CONTENT (chrome is shared m-sl-drawer) ============== */
.m-set-sheet-sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; line-height:1.4; }
.m-set-sheet-form { display:flex; flex-direction:column; gap:14px; }
.m-set-sheet-actions { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.m-set-sheet-actions__spacer { flex:1; }
.m-set-destruct { font-size:var(--fs-sm); color:var(--error); font-weight:500; display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; min-height:44px; }
.m-set-owner-badge { font-size:var(--fs-2xs); font-weight:500; padding:2px 6px; background:var(--warning-bg-strong); color:var(--warning); letter-spacing:0.6px; text-transform:uppercase; font-family:var(--font-mono); }
.m-set-btn-cancel { padding:9px var(--gutter); font-size:var(--fs-sm); font-weight:500; background:transparent; color:var(--text-secondary); border:1px solid var(--border-strong); border-radius:8px; cursor:pointer; min-height:44px; }
.m-set-btn-save { padding:9px var(--gutter); font-size:var(--fs-sm); font-weight:500; background:var(--accent); color:var(--bg-base); border:none; border-radius:8px; cursor:pointer; min-height:44px; }
.m-set-btn-save:disabled { opacity:0.45; cursor:not-allowed; }

/* ---- Form field ---- */
.m-set-field__label { font-size:var(--fs-xs); font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:6px; }
.m-set-field__hint { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:6px; line-height:1.4; }
.m-set-field__hint--error { color:var(--error); }
.m-set-input { width:100%; box-sizing:border-box; padding:10px var(--gutter); font-size:var(--fs-sm); font-family:var(--font-body); color:var(--text-primary); background:var(--bg-base); border:1px solid var(--border-strong); outline:none; }
.m-set-input:focus { border-color:var(--accent); }
textarea.m-set-input { resize:none; }

/* ---- Amount input (£ prefix) ---- */
.m-set-form-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.m-set-amount { display:flex; align-items:center; border:1px solid var(--border-strong); background:var(--bg-base); }
.m-set-amount:focus-within { border-color:var(--accent); }
.m-set-amount__prefix { padding:0 10px; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-set-amount__input { flex:1; border:none; background:transparent; padding:10px var(--gutter) 10px 0; font-size:var(--fs-sm); font-family:var(--font-body); color:var(--text-primary); outline:none; }

/* ---- Segmented control ---- */
.m-set-seg { display:flex; background:var(--bg-base); border:1px solid var(--border-strong); padding:2px; }
.m-set-seg__opt { flex:1; text-align:center; padding:7px 8px; font-size:var(--fs-sm); font-weight:500; font-family:var(--font-mono); letter-spacing:0.3px; color:var(--text-tertiary); background:transparent; border:none; cursor:pointer; min-height:44px; }
.m-set-seg__opt--active { background:var(--bg-elevated); color:var(--text-primary); font-family:var(--font-body); }

/* ---- Warning box ---- */
.m-set-warn { padding:12px var(--gutter); background:var(--warning-bg); border:1px solid var(--warning-border-soft); display:flex; gap:10px; align-items:flex-start; }
.m-set-warn--inset { margin:0 var(--gutter) 8px; padding:10px var(--gutter); }
.m-set-warn__icon { color:var(--warning); font-size:var(--fs-base); font-family:var(--font-mono); flex-shrink:0; }
.m-set-warn__text { flex:1; font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; }

/* ---- Category picker row ---- */
.m-set-picker { display:flex; align-items:center; gap:10px; padding:10px var(--gutter); background:var(--bg-base); border:1px solid var(--border-strong); cursor:pointer; min-height:44px; }
.m-set-picker__name { flex:1; font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); }
.m-set-picker__arrow { color:var(--text-tertiary); font-size:var(--fs-base); }

/* ============== CATEGORY VISIBILITY SHEET ============== */
.m-set-vis-search-row { padding:0 var(--gutter) 10px; flex-shrink:0; }
.m-set-vis-search { display:flex; align-items:center; gap:8px; padding:9px var(--gutter); background:var(--bg-base); border:1px solid var(--border-strong); }
.m-set-vis-search:focus-within { border-color:var(--accent); }
.m-set-vis-search__icon { color:var(--text-tertiary); font-size:var(--fs-sm); font-family:var(--font-mono); flex-shrink:0; }
.m-set-vis-search__input { flex:1; border:none; background:transparent; font-size:var(--fs-sm); font-family:var(--font-body); color:var(--text-primary); outline:none; }
.m-set-vis-search__input::placeholder { color:var(--text-tertiary); }
.m-set-vis-search__clear { background:none; border:none; color:var(--text-tertiary); font-size:var(--fs-base); cursor:pointer; }
.m-set-vis-meta { padding:0 var(--gutter) 8px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.m-set-vis-meta__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.3px; }
.m-set-vis-meta__clear { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); background:none; border:none; cursor:pointer; }
.m-set-vis-list { flex:1; overflow-y:auto; border-top:1px solid var(--border); }
.m-set-vis-row { display:flex; align-items:center; gap:12px; padding:12px var(--gutter); border-top:1px solid var(--border); min-height:44px; cursor:pointer; }
.m-set-vis-row:first-child { border-top:none; }
.m-set-vis-row--selected { background:var(--settings-selected-bg); }
.m-set-vis-row__body { flex:1; min-width:0; }
.m-set-vis-row__head { display:flex; align-items:baseline; gap:8px; }
.m-set-vis-row__name { font-size:var(--fs-sm); font-weight:500; color:var(--text-secondary); }
.m-set-vis-row--selected .m-set-vis-row__name { color:var(--text-primary); }
.m-set-vis-row__uses { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-set-vis-check { width:20px; height:20px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--border-strong); background:transparent; flex-shrink:0; }
.m-set-vis-row--selected .m-set-vis-check { border-color:var(--accent); background:var(--accent); }
.m-set-vis-check__mark { color:var(--bg-base); font-size:var(--fs-sm); font-weight:700; }
.m-set-vis-empty { padding:32px var(--gutter); text-align:center; }
.m-set-vis-empty__title { font-size:var(--fs-sm); color:var(--text-tertiary); margin-bottom:4px; }
.m-set-vis-empty__q { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }

/* ============================================================
   Operations — Overview · Detail · Drawer · Edit · Confirms · Empty
   m-ops-* namespace. Owns shared atoms reused by Prompt 02 (wizard).
   Avatar pill + drawer reuse m-usr-avatar / m-usr-role (Users module).
   ============================================================ */

/* ---- Avatar button (topbar; opens drawer) ---- */
/* a11y wave 3 (audit R4): mobile top-bar avatar is now a real <button> — reset
   native button chrome so it renders identically to the former <div> (the round
   avatar background/size come from .m-usr-avatar / --xs, unchanged). */
.m-ops-avatar-btn { cursor:pointer; appearance:none; -webkit-appearance:none; border:none; padding:0; font:inherit; }

/* ---- Archived banner (topbar, below header) ---- */
.m-ops-archived-banner { flex-shrink:0; background:var(--m-ops-warn-12); border-bottom:1px solid var(--m-ops-warn-32); padding:8px var(--gutter); display:flex; align-items:center; gap:10px; font-size:var(--fs-xs); }
.m-ops-archived-banner__dot { width:6px; height:6px; border-radius:100px; background:var(--warning); flex-shrink:0; }
.m-ops-archived-banner__body { flex:1; min-width:0; }
.m-ops-archived-banner__title { font-weight:500; color:var(--warning); font-size:var(--fs-sm); }
.m-ops-archived-banner__meta { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:1px; }
.m-ops-archived-banner__action { font-size:var(--fs-xs); font-weight:500; font-family:var(--font-mono); letter-spacing:0.4px; color:var(--warning); text-transform:uppercase; cursor:pointer; background:none; border:none; padding:0; }

/* ---- Stat tile (overview cards) ---- */
.m-ops-stat-row { display:flex; }
.m-ops-stat-tile { flex:1; min-width:0; padding:10px 10px 9px; background:transparent; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px; position:relative; overflow:hidden; }
.m-ops-stat-tile--attention { background:var(--m-ops-attn-06); }
.m-ops-stat-tile__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; display:flex; align-items:center; gap:4px; }
.m-ops-stat-tile__attn-dot { width:4px; height:4px; border-radius:100px; background:var(--error); }
.m-ops-stat-tile__value { font-size:var(--fs-base); font-family:var(--font-mono); font-weight:500; letter-spacing:-0.3px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-ops-stat-tile__value--heading { font-family:var(--font-heading); }
.m-ops-stat-tile--attention .m-ops-stat-tile__value { color:var(--error); }
.m-ops-stat-tile__hint { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.2px; }

/* ---- Status chip ---- */
.m-ops-status { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; font-size:var(--fs-xs); font-weight:500; font-family:var(--font-mono); letter-spacing:0.4px; text-transform:uppercase; border-radius:4px; }
.m-ops-status__dot { width:5px; height:5px; border-radius:100px; flex-shrink:0; background:currentColor; }
.m-ops-status--active { background:var(--m-ops-success-16); color:var(--success); }
.m-ops-status--archived { background:var(--m-ops-warn-12); color:var(--warning); }
.m-ops-status--setup { background:var(--bg-elevated); color:var(--text-secondary); }

/* ---- Lead / answer band + section header + group ---- */
.m-ops-lead { padding:14px var(--gutter) 0; font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; }
.m-ops-lead__alert { color:var(--error); font-weight:500; }
.m-ops-ov-head { padding:14px var(--gutter) 4px; display:flex; align-items:baseline; justify-content:space-between; }
.m-ops-ov-head__label { font-size:var(--fs-xs); font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; }
.m-ops-ov-head__add { font-size:var(--fs-xs); font-weight:500; color:var(--accent); font-family:var(--font-mono); letter-spacing:0.3px; cursor:pointer; text-decoration:none; }
.m-ops-section { padding:14px var(--gutter) 6px; font-size:var(--fs-xs); font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; }
.m-ops-group { margin:0 var(--gutter) 8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }

/* ---- Operation card (overview Variant A) ---- */
.m-ops-card { display:block; text-decoration:none; color:inherit; margin:0 var(--gutter) 14px; background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.m-ops-card--alert { border-color:var(--m-ops-attn-32); }
.m-ops-card--muted { opacity:0.65; }
.m-ops-card__id { padding:12px var(--gutter) 10px; display:flex; align-items:center; gap:10px; background:var(--bg-elevated); }
.m-ops-card__id-body { flex:1; min-width:0; }
.m-ops-card__name { font-size:var(--fs-base); font-weight:500; font-family:var(--font-heading); letter-spacing:-0.2px; }
.m-ops-card__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; letter-spacing:0.2px; }
.m-ops-card__open { font-size:var(--fs-sm); font-family:var(--font-heading); color:var(--text-secondary); }

/* ---- Detail ---- */
.m-ops-detail-id { padding:14px var(--gutter) 8px; display:flex; align-items:center; gap:10px; }
.m-ops-detail-id__range { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.2px; }
.m-ops-answer { margin:0 var(--gutter) 12px; padding:14px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; }
.m-ops-answer--archived { border-color:var(--m-ops-archived-answer); }
.m-ops-answer__label { font-size:var(--fs-xs); font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:4px; }
.m-ops-answer__stats { display:flex; gap:0; }
.m-ops-answer__stat { flex:1; text-align:center; padding:6px 0; }
.m-ops-answer__stat + .m-ops-answer__stat { border-left:1px solid var(--border); }
.m-ops-answer__stat-label { display:block; font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; }
.m-ops-answer__stat-value { display:block; font-size:var(--fs-lg); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); margin-top:4px; }
.m-ops-answer__alert { margin-top:8px; padding-top:8px; border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--error); }
.m-ops-answer__text { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.5; }
.m-ops-answer__text b { color:var(--text-primary); font-weight:500; }
.m-ops-answer__text .alert { color:var(--error); }
.m-ops-stat-row2 { display:flex; align-items:center; gap:12px; padding:12px var(--gutter); text-decoration:none; color:inherit; }
.m-ops-stat-row2 + .m-ops-stat-row2 { border-top:1px solid var(--border); }
.m-ops-stat-row2--attention { background:var(--m-ops-attn-04); }
.m-ops-stat-row2__body { flex:1; min-width:0; }
.m-ops-stat-row2__label { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); }
.m-ops-stat-row2--attention .m-ops-stat-row2__label { color:var(--error); }
.m-ops-stat-row2__attn-dot { width:5px; height:5px; border-radius:100px; background:var(--error); }
.m-ops-stat-row2__hint { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; letter-spacing:0.2px; }
.m-ops-stat-row2__value { font-family:var(--font-mono); font-size:var(--fs-base); font-weight:500; color:var(--text-primary); }
.m-ops-stat-row2--attention .m-ops-stat-row2__value { color:var(--error); }
.m-ops-stat-row2__chevron { color:var(--text-tertiary); font-size:var(--fs-base); }
.m-ops-action-row { display:flex; align-items:center; gap:12px; padding:12px var(--gutter); text-decoration:none; color:inherit; cursor:pointer; background:none; border:none; width:100%; }
.m-ops-action-row + .m-ops-action-row { border-top:1px solid var(--border); }
.m-ops-action-row__icon { width:18px; font-size:var(--fs-base); color:var(--text-tertiary); font-family:var(--font-mono); text-align:center; flex-shrink:0; }
.m-ops-action-row__body { flex:1; min-width:0; }
.m-ops-action-row__label { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); }
.m-ops-action-row__label--error { color:var(--error); }
.m-ops-action-row__hint { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; letter-spacing:0.2px; }
.m-ops-action-row__chevron { color:var(--text-tertiary); font-size:var(--fs-base); }
.m-ops-restriction { margin:12px var(--gutter) 0; padding:10px var(--gutter); background:var(--m-ops-warn-08); border:1px solid var(--warning-border-soft); border-radius:8px; font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.45; }

/* ---- Avatar drawer (positioning rules in layout.css) ---- */
.m-ops-drawer-scrim { position:absolute; inset:0; background:var(--m-ops-scrim); z-index:40; }
.m-ops-drawer { position:absolute; top:0; right:0; bottom:0; width:320px; max-width:88%; background:var(--bg-surface); border-left:1px solid var(--border-strong); display:flex; flex-direction:column; box-shadow:-8px 0 24px rgba(0,0,0,0.35); z-index:41; }
.m-ops-drawer__head { padding:14px var(--gutter) 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:var(--bg-elevated); }
.m-ops-drawer__head-body { flex:1; min-width:0; }
.m-ops-drawer__name { font-size:var(--fs-sm); font-weight:500; font-family:var(--font-heading); }
.m-ops-drawer__email { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-ops-drawer-section { padding:12px var(--gutter) 0; }
.m-ops-drawer-section--admin { padding:14px var(--gutter) 0; }
.m-ops-drawer-label { font-size:var(--fs-2xs); font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; padding:0 4px 6px; }
.m-ops-drawer-current { background:var(--m-ops-accent-10); border:1px solid var(--m-ops-accent-42); border-radius:10px; padding:12px var(--gutter); display:flex; align-items:center; gap:10px; box-shadow:0 2px 6px rgba(0,0,0,0.12); }
.m-ops-drawer-current__dot { width:6px; height:6px; border-radius:100px; background:var(--accent); flex-shrink:0; }
.m-ops-drawer-current__body { flex:1; min-width:0; }
.m-ops-drawer-current__name { font-size:var(--fs-sm); font-weight:500; }
.m-ops-drawer-current__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-ops-drawer-current__here { font-size:var(--fs-2xs); color:var(--accent); font-family:var(--font-mono); letter-spacing:0.4px; text-transform:uppercase; font-weight:500; }
.m-ops-drawer-group { background:var(--bg-base); border:1px solid var(--border-strong); border-radius:10px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,0.12); }
.m-ops-drawer-row { display:flex; align-items:center; gap:12px; padding:12px var(--gutter); text-decoration:none; color:inherit; background:none; border:none; cursor:pointer; width:100%; font:inherit; text-align:left; }
.m-ops-drawer-row + .m-ops-drawer-row { border-top:1px solid var(--border); }
.m-ops-drawer-row__icon { width:18px; font-size:var(--fs-base); color:var(--text-tertiary); font-family:var(--font-mono); text-align:center; flex-shrink:0; }
.m-ops-drawer-row__icon--accent { color:var(--accent); }
.m-ops-drawer-row__icon--error { color:var(--error); }
.m-ops-drawer-row__body { flex:1; min-width:0; }
.m-ops-drawer-row__label { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-ops-drawer-row__label--accent { color:var(--accent); }
.m-ops-drawer-row__label--error { color:var(--error); }
.m-ops-drawer-row__hint { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-ops-drawer-row__chevron { color:var(--text-tertiary); font-size:var(--fs-base); }
.m-ops-drawer-row--disabled { opacity:0.4; pointer-events:none; cursor:default; }
.m-ops-drawer-row-form { border-top:1px solid var(--border); }
.m-ops-drawer-row--logout { border-top:none; }
.m-ops-drawer-spacer { flex:1; }
.m-ops-drawer-foot { padding:12px var(--gutter) 14px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.4px; text-align:center; }

/* ---- Edit form (shared field atoms; reused by Prompt 02 wizard) ---- */
.m-ops-form-label { font-size:var(--fs-xs); font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.7px; margin-bottom:6px; padding:16px var(--gutter) 0; }
.m-ops-form-label--danger { color:var(--error); }
.m-ops-form-label + .m-ops-group { margin-top:4px; }
.m-ops-field-row { padding:12px var(--gutter); }
.m-ops-field-row + .m-ops-field-row { border-top:1px solid var(--border); }
.m-ops-field-row__label { font-size:var(--fs-xs); color:var(--text-tertiary); margin-bottom:6px; }
.m-ops-field-row__label .req { color:var(--accent); }
.m-ops-input { width:100%; box-sizing:border-box; padding:10px var(--gutter); background:var(--bg-base); border:1px solid var(--border-strong); border-radius:6px; font-size:var(--fs-sm); color:var(--text-primary); font-family:var(--font-body); outline:none; }
.m-ops-input:focus { border-color:var(--accent); }
.m-ops-input--mono { font-family:var(--font-mono); }
.m-ops-input::placeholder { color:var(--text-tertiary); }
.m-ops-field-row__hint { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:4px; line-height:1.45; }
.m-ops-danger { margin:0 var(--gutter); background:var(--bg-surface); border:1px solid var(--m-ops-danger-32); border-radius:10px; overflow:hidden; }
.m-ops-danger + .m-ops-field-row__hint { padding:6px 22px 0; }
.m-ops-danger__row { padding:12px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.m-ops-danger__body { min-width:0; }
.m-ops-danger__title { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); margin-bottom:2px; }
.m-ops-danger__sub { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.45; }
.m-ops-danger__btn { padding:7px var(--gutter); background:var(--m-ops-danger-10); color:var(--error); border:1px solid var(--m-ops-danger-45); border-radius:6px; font-size:var(--fs-xs); font-weight:500; flex-shrink:0; cursor:pointer; font-family:var(--font-body); }
.m-ops-form-footer { flex-shrink:0; padding:12px var(--gutter) 14px; background:var(--bg-surface); border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.m-ops-btn-cancel { padding:12px var(--gutter); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:8px; font-size:var(--fs-sm); font-weight:500; color:var(--text-secondary); cursor:pointer; text-decoration:none; text-align:center; font-family:var(--font-body); }
.m-ops-btn-save { padding:12px 22px; background:var(--accent); color:var(--bg-base); border:none; border-radius:8px; font-size:var(--fs-sm); font-weight:500; font-family:var(--font-heading); letter-spacing:0.2px; cursor:pointer; }
.m-ops-btn-save--saved, .m-ops-btn-save:disabled { background:var(--bg-elevated); color:var(--text-tertiary); border:1px solid var(--border); cursor:default; }
.m-ops-form-footer__spacer { flex:1; }
.m-ops-form-spacer { height:24px; }
.m-ops-danger-hint { padding:6px 22px 0; }

/* ---- Confirm sheet (generic — archive / reactivate) ---- */
.m-ops-confirm-overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.m-ops-confirm-overlay[hidden] { display:none; }
.m-ops-confirm-overlay__scrim { position:absolute; inset:0; background:var(--m-ops-confirm-scrim); }
.m-ops-confirm { position:relative; width:100%; max-width:480px; background:var(--bg-surface); border-top:1px solid var(--border); border-radius:18px 18px 0 0; box-shadow:0 -16px 40px rgba(0,0,0,0.4); display:flex; flex-direction:column; }
.m-ops-confirm__grabber { padding:10px 0 6px; display:flex; justify-content:center; }
.m-ops-confirm__grabber span { width:36px; height:4px; border-radius:100px; background:var(--border-strong); }
.m-ops-confirm__body { padding:4px var(--gutter) 0; }
.m-ops-confirm__header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.m-ops-confirm__icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-base); font-family:var(--font-mono); flex-shrink:0; }
.m-ops-confirm__icon--danger { background:var(--m-ops-danger-14); color:var(--error); }
.m-ops-confirm__icon--success { background:var(--m-ops-success-18); color:var(--success); }
.m-ops-confirm__title { font-size:var(--fs-xl); font-weight:500; font-family:var(--font-heading); letter-spacing:-0.3px; }
.m-ops-confirm__desc { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.55; margin-bottom:14px; }
.m-ops-confirm__desc b { color:var(--text-primary); font-weight:500; }
.m-ops-impact-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-ops-impact-row { display:flex; align-items:center; gap:12px; padding:10px var(--gutter); }
.m-ops-impact-row + .m-ops-impact-row { border-top:1px solid var(--border); }
.m-ops-impact-row__label { flex:1; font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-ops-impact-row__value { font-size:var(--fs-sm); color:var(--text-primary); font-family:var(--font-mono); font-weight:500; min-width:28px; text-align:right; }
.m-ops-impact-row__value--warn { color:var(--warning); }
.m-ops-impact-row__value--sm { font-size:var(--fs-xs); }
.m-ops-impact-row__hint { font-size:var(--fs-xs); color:var(--text-tertiary); flex:0 0 auto; }
.m-ops-impact-row__hint--warn { color:var(--warning); }
.m-ops-confirm__warn { padding:10px 4px 0; font-size:var(--fs-xs); color:var(--warning); line-height:1.5; }
.m-ops-confirm__note { padding:12px 4px 0; font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; }
.m-ops-confirm__footer { padding:14px var(--gutter); border-top:1px solid var(--border); display:flex; gap:10px; }
.m-ops-confirm-btn { flex:1; padding:12px var(--gutter); text-align:center; border-radius:8px; font-size:var(--fs-sm); font-weight:500; cursor:pointer; font-family:var(--font-body); }
.m-ops-confirm-btn--cancel { background:var(--bg-elevated); border:1px solid var(--border-strong); color:var(--text-primary); }
.m-ops-confirm-btn--danger { background:var(--m-ops-danger-16); border:1px solid var(--m-ops-danger-55); color:var(--error); }
.m-ops-confirm-btn--accent { background:var(--accent); color:var(--bg-base); border:none; }

/* ---- Empty / welcome (first operation) ---- */
.m-ops-welcome { flex:1; overflow:auto; background:var(--bg-base); display:flex; flex-direction:column; padding:28px 20px 20px; }
.m-ops-welcome__eyebrow { font-size:var(--fs-xs); font-weight:500; color:var(--accent); font-family:var(--font-mono); letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
.m-ops-welcome__title { font-size:var(--fs-display-lg); font-weight:500; font-family:var(--font-heading); letter-spacing:-0.7px; line-height:1.12; margin-bottom:10px; }
.m-ops-welcome__sub { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.55; }
.m-ops-flow-list { display:flex; flex-direction:column; gap:8px; margin:22px 0 18px; }
.m-ops-flow-card { display:flex; align-items:flex-start; gap:12px; padding:12px 13px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; }
.m-ops-flow-card--payoff { padding:14px var(--gutter); background:var(--m-ops-accent-08); border-color:var(--m-ops-accent-42); }
.m-ops-flow-card__icon { width:30px; height:30px; background:var(--bg-elevated); border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); line-height:1; }
.m-ops-flow-card--payoff .m-ops-flow-card__icon { width:36px; height:36px; background:var(--m-ops-accent-18); font-size:var(--fs-xl); }
.m-ops-flow-card__body { flex:1; min-width:0; }
.m-ops-flow-card__label { font-size:var(--fs-sm); font-weight:500; margin-bottom:2px; color:var(--text-primary); }
.m-ops-flow-card--payoff .m-ops-flow-card__label { font-size:var(--fs-base); color:var(--accent); font-family:var(--font-heading); letter-spacing:-0.1px; }
.m-ops-flow-card__text { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.45; }
.m-ops-flow-card--payoff .m-ops-flow-card__text { font-size:var(--fs-sm); color:var(--text-secondary); }
.m-ops-welcome__cta-spacer { flex:1; min-height:8px; }
.m-ops-welcome__cta { display:block; padding:14px var(--gutter); background:var(--accent); color:var(--bg-base); border-radius:10px; font-size:var(--fs-base); font-weight:500; font-family:var(--font-heading); letter-spacing:0.2px; text-align:center; cursor:pointer; text-decoration:none; }
.m-ops-welcome__cta-note { text-align:center; margin-top:10px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.3px; }

/* ---- Archived audit banner (in-content, cross-module spot-check) ---- */
.m-ops-arch-card { margin:0 var(--gutter) 10px; padding:12px var(--gutter); background:var(--m-ops-warn-12); border:1px solid var(--m-ops-warn-32); border-radius:10px; display:flex; align-items:flex-start; gap:10px; }
.m-ops-arch-card__icon { font-size:var(--fs-base); color:var(--warning); font-family:var(--font-mono); flex-shrink:0; margin-top:1px; }
.m-ops-arch-card__body { flex:1; min-width:0; }
.m-ops-arch-card__title { font-size:var(--fs-sm); font-weight:500; color:var(--warning); margin-bottom:2px; }
.m-ops-arch-card__text { font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; }
.m-ops-arch-card--sm { margin:0 var(--gutter) 8px; padding:8px var(--gutter); border-radius:8px; align-items:center; gap:8px; font-size:var(--fs-xs); }
.m-ops-arch-card--sm .m-ops-arch-card__body { flex:1; color:var(--text-secondary); }
.m-ops-arch-card--sm .m-ops-arch-card__view { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.3px; }

/* ---- Desktop — Archived-state banners (U6, cross-module) ----
   Additive; gated >=1024px. Mobile (<1024) render UNCHANGED.
   Adapts the PRESENTATION of the shipped .m-ops-arch* classes at
   desktop width. No new class family; no base rule restyled. */
@media (min-width: 768px) {
  .m-ops-archived-banner,
  .m-ops-arch-card { margin-left:0; margin-right:0; }
  .is-op-archived .page-content > * { opacity:0.85; }
}

/* ============================================================
   Operations — Setup Wizard (8 steps)
   m-ops-* namespace. Requires prompt 01 (m-ops-group, m-ops-field-row,
   m-ops-input, m-ops-section, m-ops-welcome*) + Users (m-usr-avatar/-role).
   ============================================================ */

/* ---- Wizard shell: progress + counter + skip ---- */
.page-content.m-ops-wiz-page { display:flex; flex-direction:column; overflow:hidden; padding:0; padding-bottom:0; }
#wiz-app { display:flex; flex-direction:column; flex:1; min-height:0; }
.m-ops-wiz-bar { flex-shrink:0; padding:12px var(--gutter) 14px; background:var(--bg-surface); border-bottom:1px solid var(--border); }
.m-ops-wiz-progress { display:flex; gap:3px; margin-bottom:8px; }
.m-ops-wiz-progress__seg { flex:1; height:4px; border-radius:2px; background:var(--bg-elevated); }
.m-ops-wiz-progress__seg--done { background:var(--accent); }
.m-ops-wiz-counter { display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.4px; }
.m-ops-wiz-counter__step { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-ops-wiz-counter__learning { color:var(--accent); margin-left:6px; }
.m-ops-wiz-body { flex:1; overflow:auto; background:var(--bg-base); position:relative; }
.m-ops-wiz-step-body { padding:14px var(--gutter) 16px; }
.m-ops-wiz-skip { position:absolute; top:10px; right:14px; z-index:2; font-size:var(--fs-sm); color:var(--text-tertiary); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; background:none; border:none; font-family:var(--font-body); }
.m-ops-wiz-head { font-size:var(--fs-2xl); font-weight:500; font-family:var(--font-heading); letter-spacing:-0.5px; margin-bottom:6px; }
.m-ops-wiz-sub { font-size:var(--fs-sm); color:var(--text-tertiary); line-height:1.5; }
.m-ops-wiz-intro { padding:20px var(--gutter) 6px; }

/* ---- Wizard footer ---- */
.m-ops-wiz-footer { flex-shrink:0; padding:12px var(--gutter) 14px; background:var(--bg-surface); border-top:1px solid var(--border); }
.m-ops-wiz-footer__row { display:flex; gap:10px; align-items:center; }
.m-ops-wiz-back { padding:12px var(--gutter); font-size:var(--fs-sm); font-weight:500; color:var(--text-secondary); background:none; border:none; cursor:pointer; font-family:var(--font-body); }
.m-ops-wiz-next { padding:12px 22px; background:var(--accent); color:var(--bg-base); border:none; border-radius:8px; font-size:var(--fs-sm); font-weight:500; font-family:var(--font-heading); letter-spacing:0.2px; cursor:pointer; }
.m-ops-wiz-next:disabled { background:var(--bg-elevated); color:var(--text-tertiary); cursor:default; }
.m-ops-wiz-resume { text-align:center; padding-top:10px; font-size:var(--fs-xs); color:var(--text-tertiary); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.m-ops-wiz-note { margin:14px var(--gutter) 16px; padding:11px 13px; background:var(--m-ops-warn-08); border:1px solid var(--warning-border-soft); border-radius:8px; font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.45; }
.m-ops-wiz-note b { color:var(--warning); font-weight:500; }
.m-ops-wiz-dashed { margin:4px 4px 16px; padding:11px 13px; background:var(--bg-surface); border:1px dashed var(--border); border-radius:10px; font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; }
.m-ops-wiz-dashed b { color:var(--text-secondary); font-weight:500; }
.m-ops-wiz-italic { margin:16px var(--gutter); font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.55; text-align:center; font-style:italic; }
.m-ops-wiz-subnote { margin:-6px var(--gutter) 8px; font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.45; }
.m-ops-chip { padding:4px 9px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:4px; font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); letter-spacing:0.3px; }

/* ---- Step 2: preset card ---- */
.m-ops-preset-list { display:flex; flex-direction:column; gap:8px; }
.m-ops-preset { padding:13px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.m-ops-preset--active { background:var(--m-ops-accent-10); border-color:var(--m-ops-accent-42); }
.m-ops-preset__top { display:flex; align-items:flex-start; gap:12px; }
.m-ops-preset__radio { width:18px; height:18px; border-radius:100px; border:2px solid var(--border-strong); background:transparent; flex-shrink:0; margin-top:2px; position:relative; }
.m-ops-preset--active .m-ops-preset__radio { border-color:var(--accent); background:var(--accent); }
.m-ops-preset--active .m-ops-preset__radio::after { content:''; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:100px; background:var(--bg-base); }
.m-ops-preset__head { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.m-ops-preset__name { font-size:var(--fs-base); font-weight:500; font-family:var(--font-heading); color:var(--text-primary); }
.m-ops-preset--active .m-ops-preset__name { color:var(--accent); }
.m-ops-preset__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.4px; }
.m-ops-preset__blurb { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.45; }
.m-ops-preset__toggle { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.4px; flex-shrink:0; margin-top:2px; }
.m-ops-preset__list { margin-top:10px; padding-top:10px; margin-left:30px; border-top:1px dashed var(--border); font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); line-height:1.6; }

/* ---- Step 3: product route ---- */
.m-ops-route-list { display:flex; flex-direction:column; gap:10px; }
.m-ops-route { padding:14px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; }
.m-ops-route--featured { background:var(--m-ops-accent-10); border-color:var(--m-ops-accent-45); }
.m-ops-route__tag { font-size:var(--fs-2xs); color:var(--accent); font-family:var(--font-mono); letter-spacing:0.7px; text-transform:uppercase; margin-bottom:5px; font-weight:500; }
.m-ops-route__title { font-size:var(--fs-lg); font-weight:500; font-family:var(--font-heading); color:var(--text-primary); letter-spacing:-0.2px; margin-bottom:5px; }
.m-ops-route--featured .m-ops-route__title { color:var(--accent); }
.m-ops-route__body { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; }
.m-ops-route__action { display:inline-flex; margin-top:10px; padding:7px var(--gutter); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:6px; font-size:var(--fs-xs); font-weight:500; color:var(--text-secondary); cursor:pointer; }

/* ---- Step 4: tab strip + pattern card ---- */
.m-ops-tabchips-wrap { padding:20px var(--gutter) 4px; }
.m-ops-tabchips { display:flex; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:4px; gap:4px; }
.m-ops-tabchips__chip { flex:1; text-align:center; padding:9px 8px; border-radius:7px; font-size:var(--fs-sm); font-weight:500; color:var(--text-secondary); font-family:var(--font-heading); letter-spacing:0.1px; }
.m-ops-tabchips__chip--active { background:var(--bg-elevated); color:var(--accent); }
.m-ops-tabchips__hint { text-align:center; margin-top:8px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.5px; }
.m-ops-pattern-list { padding:16px var(--gutter) 0; display:flex; flex-direction:column; gap:10px; }
.m-ops-pattern { padding:14px var(--gutter) 13px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; display:flex; gap:12px; }
.m-ops-pattern--accent { border-color:var(--m-ops-accent-42); }
.m-ops-pattern__rail { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.m-ops-pattern__num { width:26px; height:26px; border-radius:50%; background:var(--bg-elevated); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:600; font-family:var(--font-mono); }
.m-ops-pattern--accent .m-ops-pattern__num { background:var(--accent); color:var(--bg-base); }
.m-ops-pattern__icon { font-size:var(--fs-lg); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-ops-pattern--accent .m-ops-pattern__icon { color:var(--accent); }
.m-ops-pattern__body-wrap { flex:1; min-width:0; }
.m-ops-pattern__title { font-size:var(--fs-base); font-weight:500; font-family:var(--font-heading); color:var(--text-primary); letter-spacing:-0.2px; margin-bottom:6px; }
.m-ops-pattern--accent .m-ops-pattern__title { color:var(--accent); }
.m-ops-pattern__body { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.55; }

/* ---- Step 5: level card ---- */
.m-ops-level-list { display:flex; flex-direction:column; gap:10px; }
.m-ops-level { padding:14px var(--gutter); border-radius:10px; position:relative; }
.m-ops-level--start { background:var(--m-ops-accent-18); border:1px solid var(--m-ops-accent-70); box-shadow:0 2px 14px var(--m-ops-accent-18); }
.m-ops-level--next { background:var(--bg-surface); border:1px solid var(--border); }
.m-ops-level--full { background:var(--m-ops-success-18); border:1px solid var(--m-ops-success-32); }
.m-ops-level__head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.m-ops-level__num { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:600; font-family:var(--font-mono); }
.m-ops-level--start .m-ops-level__num { background:var(--accent); color:var(--bg-base); }
.m-ops-level--next .m-ops-level__num { background:var(--bg-elevated); color:var(--text-secondary); }
.m-ops-level--full .m-ops-level__num { background:var(--m-ops-success-18); color:var(--success); }
.m-ops-level__label { font-size:var(--fs-2xs); font-weight:600; font-family:var(--font-mono); letter-spacing:0.8px; text-transform:uppercase; }
.m-ops-level--start .m-ops-level__label { color:var(--accent); }
.m-ops-level--next .m-ops-level__label { color:var(--text-primary); }
.m-ops-level--full .m-ops-level__label { color:var(--success); }
.m-ops-level__title { font-size:var(--fs-lg); font-weight:500; font-family:var(--font-heading); letter-spacing:-0.2px; margin-bottom:6px; }
.m-ops-level--start .m-ops-level__title { color:var(--accent); }
.m-ops-level--next .m-ops-level__title { color:var(--text-primary); }
.m-ops-level--full .m-ops-level__title { color:var(--success); }
.m-ops-level__body { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.55; margin-bottom:10px; }
.m-ops-level__chips { display:flex; gap:6px; flex-wrap:wrap; }
.m-ops-level__foot { padding:6px var(--gutter) 0; font-size:var(--fs-xs); color:var(--text-tertiary); font-style:italic; line-height:1.4; }

/* ---- Step 6: modules panel, truth card, variance ---- */
.m-ops-step6-content { display:flex; flex-direction:column; gap:12px; }
.m-ops-modules { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-ops-modules__head { padding:12px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.m-ops-modules__head-body { min-width:0; }
.m-ops-modules__title { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); }
.m-ops-modules__sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }
.m-ops-modules__toggle { font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); letter-spacing:0.4px; padding:5px 9px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:6px; flex-shrink:0; cursor:pointer; }
.m-ops-module-row { padding:10px var(--gutter); display:flex; align-items:baseline; gap:12px; border-top:1px solid var(--border); }
.m-ops-module-row__name { flex:0 0 84px; font-size:var(--fs-sm); font-weight:500; color:var(--accent); font-family:var(--font-heading); }
.m-ops-module-row__desc { flex:1; font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.45; }
.m-ops-truth { padding:14px var(--gutter) 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; }
.m-ops-truth--actual { border-color:var(--m-ops-accent-42); }
.m-ops-truth--prep { border-color:var(--m-ops-success-40); }
.m-ops-truth__eyebrow { font-size:var(--fs-2xs); font-family:var(--font-mono); letter-spacing:0.6px; text-transform:uppercase; margin-bottom:6px; color:var(--text-tertiary); }
.m-ops-truth--actual .m-ops-truth__eyebrow { color:var(--accent); }
.m-ops-truth--prep .m-ops-truth__eyebrow { color:var(--success); }
.m-ops-truth__label { font-size:var(--fs-xl); font-weight:500; font-family:var(--font-heading); letter-spacing:-0.3px; margin-bottom:8px; color:var(--text-primary); }
.m-ops-truth--actual .m-ops-truth__label { color:var(--accent); }
.m-ops-truth--prep .m-ops-truth__label { color:var(--success); }
.m-ops-truth__formula { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.5; margin-bottom:4px; }
.m-ops-truth__formula .mono { font-family:var(--font-mono); color:var(--text-tertiary); }
.m-ops-truth__formula b { color:var(--text-primary); font-weight:500; }
.m-ops-truth__body { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; margin-bottom:10px; }
.m-ops-truth__chips { display:flex; gap:6px; }
.m-ops-explainer { margin:-4px 4px 0; padding:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; }
.m-ops-explainer__label { font-size:var(--fs-xs); font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.7px; margin-bottom:6px; }
.m-ops-explainer__text { font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.55; }
.m-ops-explainer__text b { color:var(--text-primary); font-weight:500; }
.m-ops-variance { margin:8px 4px 4px; padding:20px var(--gutter) 18px; background:linear-gradient(180deg, var(--m-ops-accent-20) 0%, var(--m-ops-accent-10) 100%); border:2px solid var(--accent); border-radius:14px; box-shadow:0 4px 24px var(--m-ops-accent-18); }
.m-ops-variance__eyebrow { font-size:var(--fs-xs); color:var(--accent); font-family:var(--font-mono); letter-spacing:0.9px; text-transform:uppercase; margin-bottom:8px; font-weight:600; }
.m-ops-variance__title { font-size:var(--fs-2xl); font-weight:500; font-family:var(--font-heading); color:var(--accent); letter-spacing:-0.4px; margin-bottom:8px; line-height:1.2; }
.m-ops-variance__text { font-size:var(--fs-sm); color:var(--text-primary); line-height:1.55; font-weight:500; }

/* ---- Step 7: team row + invite (reuses m-usr-avatar / m-usr-role) ---- */
.m-ops-wiz-invite-row { display:flex; gap:6px; align-items:center; }
.m-ops-wiz-invite-btn { padding:10px var(--gutter); background:var(--accent); color:var(--bg-base); border:none; border-radius:6px; font-size:var(--fs-sm); font-weight:500; font-family:var(--font-heading); cursor:pointer; flex-shrink:0; }
.m-ops-team-row { display:flex; align-items:center; gap:12px; padding:12px var(--gutter); cursor:pointer; }
.m-ops-team-row + .m-ops-team-row { border-top:1px solid var(--border); }
.m-ops-team-row--selected { background:var(--accent-bg-soft); }
.m-ops-team-row__check { width:18px; height:18px; border-radius:4px; border:2px solid var(--border-strong); background:transparent; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--bg-base); font-size:var(--fs-xs); font-weight:700; }
.m-ops-team-row--selected .m-ops-team-row__check { border-color:var(--accent); background:var(--accent); }
.m-ops-team-row__name { font-size:var(--fs-sm); font-weight:500; }
.m-ops-team-row__email { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }

/* ---- Step 8: done ---- */
.m-ops-done-hero { padding:14px 20px 6px; text-align:center; }
.m-ops-done-hero__icon { width:40px; height:40px; border-radius:50%; background:var(--m-ops-success-16); color:var(--success); margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); font-family:var(--font-mono); }
.m-ops-done-hero__sub { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; max-width:280px; margin:0 auto; }
.m-ops-done-cta-wrap { padding:16px var(--gutter) 6px; }
.m-ops-done-cta { padding:18px var(--gutter) 16px; background:var(--m-ops-accent-10); border:1px solid var(--m-ops-accent-45); border-radius:12px; }
.m-ops-done-cta__eyebrow { font-size:var(--fs-2xs); color:var(--accent); font-family:var(--font-mono); letter-spacing:0.7px; text-transform:uppercase; margin-bottom:8px; }
.m-ops-done-cta__title { font-size:var(--fs-xl); font-weight:500; font-family:var(--font-heading); color:var(--text-primary); letter-spacing:-0.3px; margin-bottom:6px; }
.m-ops-done-cta__body { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.5; margin-bottom:14px; }
.m-ops-done-cta__btn { display:flex; padding:13px var(--gutter); text-align:center; background:var(--accent); color:var(--bg-base); border-radius:10px; font-size:var(--fs-base); font-weight:500; font-family:var(--font-heading); letter-spacing:0.2px; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-decoration:none; }
.m-ops-done-cta__btn--disabled { background:var(--bg-elevated); color:var(--text-tertiary); cursor:not-allowed; }
.m-ops-done-cta__note { margin-top:8px; text-align:center; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.3px; }
.m-ops-done-template-wrap { padding:12px var(--gutter) 0; }
.m-ops-done-template { padding:14px var(--gutter); background:var(--bg-surface); border:1.5px solid var(--border-strong); border-radius:10px; text-align:center; }
.m-ops-done-template__title { font-size:var(--fs-sm); font-weight:500; font-family:var(--font-heading); color:var(--text-primary); margin-bottom:4px; }
.m-ops-done-template__body { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.45; margin-bottom:10px; }
.m-ops-done-template__btn { display:inline-flex; padding:9px var(--gutter); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:8px; font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); letter-spacing:0.2px; cursor:pointer; text-decoration:none; }
.m-ops-check-row { display:flex; align-items:flex-start; gap:12px; padding:11px var(--gutter); }
.m-ops-check-row + .m-ops-check-row { border-top:1px solid var(--border); }
.m-ops-check-row__box { width:16px; height:16px; border-radius:4px; border:2px solid var(--border-strong); flex-shrink:0; margin-top:2px; }
.m-ops-check-row__label { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-ops-check-row__payoff { font-size:var(--fs-xs); color:var(--accent); font-family:var(--font-mono); letter-spacing:0.3px; margin-top:2px; }
.m-ops-summary-row { display:flex; align-items:baseline; gap:12px; padding:11px var(--gutter); }
.m-ops-summary-row + .m-ops-summary-row { border-top:1px solid var(--border); }
.m-ops-summary-row__label { flex:0 0 110px; font-size:var(--fs-xs); font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; }
.m-ops-summary-row__value { flex:1; font-size:var(--fs-sm); color:var(--text-primary); }
.m-ops-summary-row__value--mono { font-family:var(--font-mono); }
.m-ops-flex-body { flex:1; min-width:0; }
.m-ops-section--flush { padding:18px 4px 6px; }
.m-ops-section--tight { padding:6px 4px 6px; }
.m-ops-section--clickable { cursor:pointer; }
.m-ops-wiz-icon-mono { font-family:var(--font-mono); font-size:var(--fs-lg); }
.m-ops-wiz-role-select { width:auto; min-width:90px; }
.m-ops-done-foot { flex-shrink:0; padding:10px var(--gutter) 14px; background:var(--bg-surface); border-top:1px solid var(--border); text-align:center; font-size:var(--fs-sm); color:var(--text-tertiary); }

/* ============================================================
   Import — Mobile: Shell · Upload · Mapping · Preview · Success · Misc
   m-imp-* namespace. Owner block — prompt 02 depends on:
     .m-imp-tile, .m-imp-bucket, .m-imp-linkswap, .m-imp-section-label,
     .m-imp-pill, .m-imp-empty*, .m-imp-shell/.m-imp-topbar, .m-imp-commitbar,
     .m-imp-minibtn, .m-imp-dot
   Import is a full-screen takeover flow: NO bottom nav.
   Category/type dot colour is applied client-side in JS (data-cat-name + CAT_COLORS map by name); no inline style.
   ============================================================ */

/* ---- Shell (full-screen flow; 390x844 in JSX is the design frame only) ---- */
.m-imp-shell { display:flex; flex-direction:column; min-height:100dvh; background:var(--bg-base); color:var(--text-primary); font-family:var(--font-body); overflow:hidden; }
.m-imp-topbar { flex-shrink:0; background:var(--bg-surface); border-bottom:1px solid var(--border); }
.m-imp-topbar__row { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); }
.m-imp-topbar__lead { display:flex; align-items:center; gap:10px; }
.m-imp-topbar__back { font-size:var(--fs-2xl); color:var(--text-tertiary); line-height:1; min-width:24px; min-height:44px; display:flex; align-items:center; }
.m-imp-topbar__title { font-size:var(--fs-lg); font-weight:500; font-family:var(--font-heading); }
.m-imp-topbar__step { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); line-height:1; margin-top:2px; }
.m-imp-topbar__step b { color:var(--accent); font-weight:400; }
.m-imp-topbar__right { display:flex; align-items:center; gap:12px; color:var(--text-tertiary); font-size:var(--fs-xl); }
.m-imp-topbar__saved { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-topbar__saved--ok { color:var(--success); }
.m-imp-stepbar { display:flex; gap:4px; padding:0 var(--gutter) 10px; }
.m-imp-stepbar__seg { flex:1; height:2px; border-radius:1px; background:var(--border-strong); }
.m-imp-stepbar__seg--done { background:var(--accent); }
.m-imp-body { flex:1; overflow:auto; position:relative; }

/* ---- CommitBar (sticky bottom action bar) ---- */
.m-imp-commitbar { position:absolute; left:0; right:0; bottom:0; padding:12px var(--gutter); background:var(--bg-surface); border-top:1px solid var(--border-strong); display:flex; gap:8px; }
.m-imp-commitbar__cancel { flex:0 0 auto; padding:11px var(--gutter); min-height:44px; background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--text-secondary); font-family:var(--font-body); font-size:var(--fs-sm); font-weight:500; cursor:pointer; }
.m-imp-commitbar__form { flex:1; display:flex; }
.m-imp-commitbar__confirm { flex:1; padding:11px var(--gutter); min-height:44px; background:var(--accent); color:#1a1816; border:none; border-radius:var(--radius); font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; letter-spacing:0.2px; cursor:pointer; }
.m-imp-commitbar__confirm:disabled { background:var(--bg-elevated); color:var(--text-tertiary); cursor:default; }
.m-imp-commitbar__confirm--danger { background:color-mix(in srgb, var(--error) 16%, transparent); color:var(--error); border:1px solid color-mix(in srgb, var(--error) 45%, transparent); }

/* ---- Section label (above cards, never inside) ---- */
.m-imp-section-label { display:flex; justify-content:space-between; align-items:baseline; padding:0 var(--gutter); margin:18px 0 8px; font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-imp-section-label--flush { padding:0; }
.m-imp-section-label__right { color:var(--text-tertiary); font-family:var(--font-mono); text-transform:none; letter-spacing:0; }

/* ---- Category / type dot (sharp 8x8; colour applied in JS via data-cat-name) ---- */
.m-imp-dot { width:8px; height:8px; border-radius:2px; display:inline-block; flex-shrink:0; }
.m-imp-dot--empty { background:transparent; border:1px dashed var(--border-strong); }

/* ---- Bucket badge (NEW / MATCH / ERROR / UPDATE / EXCLUDED) ---- */
.m-imp-bucket { display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border-radius:3px; font-size:var(--fs-2xs); font-weight:500; font-family:var(--font-mono); letter-spacing:0.5px; text-transform:uppercase; border:1px solid; }
.m-imp-bucket--match { color:var(--info); background:color-mix(in srgb, var(--info) 14%, transparent); border-color:color-mix(in srgb, var(--info) 30%, transparent); }
.m-imp-bucket--new { color:var(--success); background:color-mix(in srgb, var(--success) 14%, transparent); border-color:color-mix(in srgb, var(--success) 30%, transparent); }
.m-imp-bucket--error { color:var(--error); background:color-mix(in srgb, var(--error) 14%, transparent); border-color:color-mix(in srgb, var(--error) 30%, transparent); }
.m-imp-bucket--update { color:var(--warning); background:color-mix(in srgb, var(--warning) 14%, transparent); border-color:color-mix(in srgb, var(--warning) 30%, transparent); }
.m-imp-bucket--excluded { color:var(--text-tertiary); background:transparent; border-color:var(--border-strong); }
.m-imp-bucket__conf { opacity:0.75; }

/* ---- CountTile (Match · New · Errors summary) ---- */
.m-imp-tile { flex:1; padding:10px var(--gutter); border-radius:var(--radius); background:var(--bg-elevated); border:1px solid var(--border-strong); }
.m-imp-tile__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; }
.m-imp-tile__count { font-size:var(--fs-2xl); font-family:var(--font-mono); color:var(--text-primary); font-weight:500; letter-spacing:-0.5px; margin-top:2px; }
.m-imp-tile--match.m-imp-tile--active { background:color-mix(in srgb, var(--info) 10%, transparent); border-color:color-mix(in srgb, var(--info) 33%, transparent); }
.m-imp-tile--match.m-imp-tile--active .m-imp-tile__label, .m-imp-tile--match.m-imp-tile--active .m-imp-tile__count { color:var(--info); }
.m-imp-tile--new.m-imp-tile--active { background:color-mix(in srgb, var(--success) 10%, transparent); border-color:color-mix(in srgb, var(--success) 33%, transparent); }
.m-imp-tile--new.m-imp-tile--active .m-imp-tile__label, .m-imp-tile--new.m-imp-tile--active .m-imp-tile__count { color:var(--success); }
.m-imp-tile--error.m-imp-tile--active { background:color-mix(in srgb, var(--error) 10%, transparent); border-color:color-mix(in srgb, var(--error) 33%, transparent); }
.m-imp-tile--error.m-imp-tile--active .m-imp-tile__label, .m-imp-tile--error.m-imp-tile--active .m-imp-tile__count { color:var(--error); }

/* ---- EditableField (tap-to-edit cell: plain / locked / error) ---- */
.m-imp-field { padding:8px var(--gutter); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius); flex:1 1 0; min-width:0; cursor:text; }
.m-imp-field--full { flex:1 1 100%; }
.m-imp-field--locked { background:transparent; border:1px dashed var(--border-strong); cursor:default; }
.m-imp-field--error { border:1px solid color-mix(in srgb, var(--error) 50%, transparent); }
.m-imp-field__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; margin-bottom:2px; }
.m-imp-field__label-lock { margin-left:5px; opacity:0.6; }
.m-imp-field__value { font-size:var(--fs-sm); font-family:var(--font-body); color:var(--text-primary); display:flex; align-items:baseline; gap:3px; min-height:18px; }
.m-imp-field__value--mono { font-family:var(--font-mono); }
.m-imp-field__value--error { color:var(--error); }
.m-imp-field__value--placeholder { color:var(--text-tertiary); }
.m-imp-field__value-text { text-decoration:underline dotted; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.m-imp-field--locked .m-imp-field__value-text { text-decoration:none; }
.m-imp-field__fix { color:var(--text-tertiary); }

/* ---- LinkSwap (swap a link target) ---- */
.m-imp-linkswap { padding:8px 10px; background:color-mix(in srgb, var(--info) 8%, transparent); border:1px solid color-mix(in srgb, var(--info) 25%, transparent); border-radius:var(--radius); display:flex; align-items:center; gap:8px; }
.m-imp-linkswap__body { flex:1; min-width:0; }
.m-imp-linkswap__label { font-size:var(--fs-2xs); color:var(--info); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; margin-bottom:1px; }
.m-imp-linkswap__to { font-size:var(--fs-sm); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-imp-linkswap__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-imp-linkswap__change { font-size:var(--fs-xs); color:var(--info); white-space:nowrap; }

/* ---- Generic preview row ---- */
.m-imp-row { padding:10px var(--gutter); border-bottom:1px solid var(--border); }
.m-imp-row--dim { opacity:0.45; }

/* ---- Mini button (preview/POS inline actions) ---- */
.m-imp-minibtn { padding:5px 11px; min-height:32px; border-radius:var(--radius); border:1px solid var(--border-strong); background:transparent; color:var(--text-secondary); font-size:var(--fs-xs); font-weight:500; font-family:var(--font-body); cursor:pointer; }
.m-imp-minibtn--primary { border:none; background:var(--accent); color:#1a1816; }

/* ---- Filter pill (history / POS bulk filters; owned here via misc HistoryEmpty) ---- */
.m-imp-pill { padding:5px var(--gutter); border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:transparent; color:var(--text-secondary); font-size:var(--fs-sm); white-space:nowrap; cursor:pointer; }
.m-imp-pill--active { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.m-imp-pill__n { font-family:var(--font-mono); opacity:0.7; }

/* ============== UPLOAD ============== */
.m-imp-upload { padding:14px var(--gutter); padding-bottom:80px; }
.m-imp-drop { border:1px dashed var(--border-strong); border-radius:var(--radius-md); padding:30px var(--gutter); text-align:center; background:var(--bg-surface); cursor:pointer; }
.m-imp-drop--over { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.m-imp-drop__icon { font-size:var(--fs-2xl); color:var(--text-tertiary); font-family:var(--font-mono); margin-bottom:8px; }
.m-imp-drop__title { font-size:var(--fs-sm); color:var(--text-primary); margin-bottom:4px; }
.m-imp-drop__formats { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-period { margin-top:12px; padding:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.m-imp-period__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; margin-bottom:6px; }
.m-imp-period__req { color:var(--error); }
.m-imp-period__hint { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; margin-bottom:8px; }
.m-imp-period__fields { display:flex; gap:8px; align-items:center; }
.m-imp-period__date { flex:1; padding:8px 10px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius); }
.m-imp-period__date-label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.m-imp-period__date-val { font-size:var(--fs-sm); font-family:var(--font-mono); }
.m-imp-period__arrow { font-size:var(--fs-xs); color:var(--text-tertiary); }
.m-imp-period__detected { font-size:var(--fs-xs); color:var(--info); font-family:var(--font-mono); margin-top:6px; }
.m-imp-template { margin-top:12px; padding:10px var(--gutter); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius); display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.m-imp-template__icon { font-family:var(--font-mono); color:var(--accent); }
.m-imp-template__body { flex:1; min-width:0; }
.m-imp-template__title { font-size:var(--fs-sm); color:var(--text-primary); }
.m-imp-template__name { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-recent { padding:10px var(--gutter); margin:0 calc(-1 * var(--gutter)); border-bottom:1px solid var(--border); }
.m-imp-recent__top { display:flex; justify-content:space-between; align-items:baseline; }
.m-imp-recent__name { font-size:var(--fs-sm); }
.m-imp-recent__status { font-size:var(--fs-2xs); font-family:var(--font-mono); letter-spacing:0.5px; }
.m-imp-recent__status--ok { color:var(--success); }
.m-imp-recent__status--err { color:var(--error); }
.m-imp-recent__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-imp-recent--empty { padding:8px 0; }
.m-imp-upload__note { margin-top:16px; font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.55; }

/* ============== MAPPING ============== */
.m-imp-map { padding:14px var(--gutter); padding-bottom:90px; }
.m-imp-map-banner { padding:10px var(--gutter); background:color-mix(in srgb, var(--warning) 10%, transparent); border:1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius:var(--radius); font-size:var(--fs-sm); color:var(--warning); line-height:1.5; }
.m-imp-map-auto { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.m-imp-map-auto__row { padding:8px var(--gutter); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.m-imp-map-auto__row:last-child { border-bottom:none; }
.m-imp-map-auto__from { flex:1; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-map-auto__arrow { color:var(--text-tertiary); font-size:var(--fs-xs); }
.m-imp-map-auto__to { flex:1; font-size:var(--fs-sm); color:var(--success); font-family:var(--font-mono); text-align:right; }
.m-imp-map-need { padding:12px var(--gutter); margin-bottom:8px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius); }
.m-imp-map-need__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.m-imp-map-need__col { font-size:var(--fs-sm); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-map-need__samples { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-map-need__select { padding:7px 10px; min-height:38px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-sm); color:var(--text-primary); }
.m-imp-map-need__caret { color:var(--text-tertiary); font-size:var(--fs-sm); }
.m-imp-map-need__alt { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:6px; }

/* ============== PREVIEW ============== */
.m-imp-tabs { padding:10px var(--gutter) 0; flex-shrink:0; display:flex; gap:6px; }
.m-imp-tab { flex:1; padding:8px 10px; border-radius:var(--radius); background:var(--bg-surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.m-imp-tab__label { font-size:var(--fs-2xs); font-family:var(--font-mono); letter-spacing:0.6px; text-transform:uppercase; font-weight:500; color:var(--text-tertiary); }
.m-imp-tab__count { font-size:var(--fs-base); font-family:var(--font-mono); font-weight:500; color:var(--text-primary); }
.m-imp-tab--new.m-imp-tab--active { background:color-mix(in srgb, var(--success) 14%, transparent); border-color:color-mix(in srgb, var(--success) 33%, transparent); }
.m-imp-tab--new.m-imp-tab--active .m-imp-tab__label, .m-imp-tab--new.m-imp-tab--active .m-imp-tab__count { color:var(--success); }
.m-imp-tab--error.m-imp-tab--active { background:color-mix(in srgb, var(--error) 14%, transparent); border-color:color-mix(in srgb, var(--error) 33%, transparent); }
.m-imp-tab--error.m-imp-tab--active .m-imp-tab__label, .m-imp-tab--error.m-imp-tab--active .m-imp-tab__count { color:var(--error); }
.m-imp-tab--match.m-imp-tab--active { background:color-mix(in srgb, var(--info) 14%, transparent); border-color:color-mix(in srgb, var(--info) 33%, transparent); }
.m-imp-tab--match.m-imp-tab--active .m-imp-tab__label, .m-imp-tab--match.m-imp-tab--active .m-imp-tab__count { color:var(--info); }
.m-imp-list-intro { padding:10px var(--gutter) 8px; font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.55; }
.m-imp-list-intro b { color:var(--text-secondary); font-weight:400; }
.m-imp-slim { padding:10px var(--gutter); border-bottom:1px solid var(--border); }
.m-imp-slim--error { background:color-mix(in srgb, var(--error) 4%, transparent); }
.m-imp-slim__head { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.m-imp-slim__dot { width:8px; height:8px; border-radius:2px; margin-top:5px; flex-shrink:0; }
.m-imp-slim__name { flex:1; min-width:0; font-size:var(--fs-base); color:var(--text-primary); text-decoration:underline dotted; text-decoration-color:var(--border-strong); text-underline-offset:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-imp-slim__menu { color:var(--text-tertiary); font-size:var(--fs-base); padding:0 4px; min-height:44px; display:flex; align-items:center; cursor:pointer; }
.m-imp-slim__chips { margin-left:var(--gutter); display:flex; flex-wrap:wrap; gap:6px; font-size:var(--fs-xs); font-family:var(--font-mono); }
.m-imp-slim__extra { margin-left:var(--gutter); margin-top:6px; display:flex; align-items:center; gap:12px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-slim__extra-caret { color:var(--accent); }
.m-imp-chip { display:inline-flex; align-items:baseline; gap:4px; padding:3px 7px; background:var(--bg-surface); border:1px solid var(--border); border-radius:4px; cursor:pointer; }
.m-imp-chip__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.4px; }
.m-imp-chip__value { font-size:var(--fs-xs); color:var(--text-primary); font-family:var(--font-body); }
.m-imp-chip__value--mono { font-family:var(--font-mono); }
.m-imp-chip__value--muted, .m-imp-chip__value--placeholder { color:var(--text-tertiary); }
.m-imp-chip--error { background:color-mix(in srgb, var(--error) 10%, transparent); border-color:color-mix(in srgb, var(--error) 40%, transparent); }
.m-imp-chip--error .m-imp-chip__value { color:var(--error); }
.m-imp-chip--accent { background:color-mix(in srgb, var(--accent) 10%, transparent); border-color:color-mix(in srgb, var(--accent) 35%, transparent); }
.m-imp-chip--accent .m-imp-chip__label, .m-imp-chip--accent .m-imp-chip__value { color:var(--accent); }
.m-imp-tick { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.m-imp-tick__box { width:12px; height:12px; border-radius:2px; border:1px solid var(--border-strong); background:transparent; display:inline-flex; align-items:center; justify-content:center; color:#1a1816; font-size:var(--fs-2xs); line-height:1; }
.m-imp-tick--on .m-imp-tick__box { border-color:var(--accent); background:var(--accent); }
.m-imp-tick__label { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; }
.m-imp-tick--on .m-imp-tick__label { color:var(--accent); }
.m-imp-err-missing { padding:4px var(--gutter) 0; font-size:var(--fs-xs); color:var(--error); font-family:var(--font-mono); background:color-mix(in srgb, var(--error) 4%, transparent); }
.m-imp-fixbanner { position:absolute; bottom:60px; left:14px; right:14px; padding:10px var(--gutter); background:color-mix(in srgb, var(--error) 12%, transparent); border:1px solid color-mix(in srgb, var(--error) 40%, transparent); border-radius:var(--radius); display:flex; align-items:center; gap:10px; }
.m-imp-fixbanner__icon { font-size:var(--fs-base); color:var(--error); }
.m-imp-fixbanner__body { flex:1; }
.m-imp-fixbanner__title { font-size:var(--fs-sm); color:var(--error); }
.m-imp-fixbanner__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-imp-fixbanner__cta { font-size:var(--fs-xs); color:var(--error); font-weight:500; }
/* Fuzzy match row overrides (wider head spacing, plain name, action bar) */
.m-imp-fuzzy__head { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.m-imp-fuzzy__name { flex:1; min-width:0; font-size:var(--fs-base); color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-imp-fuzzy__actions { display:flex; justify-content:flex-end; gap:6px; margin-top:8px; }
/* Picker row — expanded optional fields / inline category quick-create */
.m-imp-picker { padding:8px 10px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius); display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.m-imp-picker__label { font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:1px; }
.m-imp-picker__value { font-size:var(--fs-sm); color:var(--text-primary); }
.m-imp-picker__value--placeholder { color:var(--text-tertiary); }
.m-imp-picker__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
/* ============== SUCCESS ============== */
.m-imp-success { padding:24px var(--gutter) 0; }
.m-imp-success__hero { text-align:center; padding:24px 0; }
.m-imp-success__check { width:44px; height:44px; border-radius:22px; background:color-mix(in srgb, var(--success) 14%, transparent); border:1px solid color-mix(in srgb, var(--success) 40%, transparent); color:var(--success); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); }
.m-imp-success__title { font-size:var(--fs-lg); font-family:var(--font-heading); font-weight:500; margin-bottom:4px; }
.m-imp-success__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-success__counts { padding:14px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:12px; }
.m-imp-success__count-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm); }
.m-imp-success__count-row:last-child { border-bottom:none; }
.m-imp-success__count-k { color:var(--text-tertiary); }
.m-imp-success__count-v { font-family:var(--font-mono); color:var(--text-primary); }
.m-imp-success__advisory { padding:12px var(--gutter); background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:var(--radius); font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.55; margin-bottom:16px; }
.m-imp-success__advisory b { color:var(--accent); font-weight:400; }
.m-imp-success__primary { display:block; width:100%; padding:12px var(--gutter); min-height:44px; border-radius:var(--radius); background:var(--accent); color:#1a1816; border:none; font-size:var(--fs-sm); font-weight:600; font-family:var(--font-body); text-align:center; text-decoration:none; cursor:pointer; }
.m-imp-success__history { text-align:center; margin-top:12px; }
.m-imp-success__history a { font-size:var(--fs-xs); color:var(--text-tertiary); text-decoration:none; }

/* ============== MISC: row sheet · error toasts · empty (shared) ============== */
.m-imp-sheet { position:absolute; inset:0; z-index:10; }
.m-imp-sheet[hidden] { display:none; }
.m-imp-sheet__scrim { position:absolute; inset:0; background:rgba(0,0,0,0.45); }
.m-imp-sheet__panel { position:absolute; left:0; right:0; bottom:0; background:var(--bg-surface); border-top:1px solid var(--border-strong); border-radius:16px 16px 0 0; padding:8px 0 18px; }
.m-imp-sheet__grabber { width:32px; height:3px; background:var(--border-strong); border-radius:2px; margin:4px auto 12px; }
.m-imp-sheet__head { padding:0 var(--gutter) 10px; border-bottom:1px solid var(--border); }
.m-imp-sheet__title { font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-imp-sheet__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-imp-sheet__opt { display:flex; align-items:flex-start; gap:12px; padding:12px var(--gutter); border-bottom:1px solid var(--border); min-height:44px; cursor:pointer; }
.m-imp-sheet__opt:last-child { border-bottom:none; }
.m-imp-sheet__opt-icon { width:22px; font-family:var(--font-mono); font-size:var(--fs-base); color:var(--text-tertiary); margin-top:1px; }
.m-imp-sheet__opt-label { font-size:var(--fs-sm); color:var(--text-primary); }
.m-imp-sheet__opt-sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; line-height:1.45; }
.m-imp-sheet__opt--danger .m-imp-sheet__opt-icon, .m-imp-sheet__opt--danger .m-imp-sheet__opt-label { color:var(--error); }
.m-imp-toast { margin-bottom:10px; padding:10px var(--gutter); border-radius:var(--radius-md); display:flex; gap:10px; }
.m-imp-toast--err { background:color-mix(in srgb, var(--error) 8%, transparent); border:1px solid color-mix(in srgb, var(--error) 30%, transparent); }
.m-imp-toast--warn { background:color-mix(in srgb, var(--warning) 8%, transparent); border:1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.m-imp-toast--gap { margin-top:12px; }
.m-imp-toast__icon { width:18px; height:18px; border-radius:9px; color:#1a1816; font-size:var(--fs-xs); font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.m-imp-toast--err .m-imp-toast__icon { background:var(--error); }
.m-imp-toast--warn .m-imp-toast__icon { background:var(--warning); }
.m-imp-toast__body { flex:1; min-width:0; }
.m-imp-toast__title { font-size:var(--fs-sm); font-weight:500; }
.m-imp-toast--err .m-imp-toast__title { color:var(--error); }
.m-imp-toast--warn .m-imp-toast__title { color:var(--warning); }
.m-imp-toast__text { font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; margin-top:4px; }
.m-imp-toast__actions { display:flex; gap:14px; margin-top:8px; }
.m-imp-toast__action { font-size:var(--fs-xs); color:var(--text-tertiary); cursor:pointer; }
.m-imp-toast__action--primary { font-weight:500; }
.m-imp-toast--err .m-imp-toast__action--primary { color:var(--error); }
.m-imp-toast--warn .m-imp-toast__action--primary { color:var(--warning); }
.m-imp-empty { padding:60px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.m-imp-empty__icon { width:56px; height:56px; border-radius:12px; background:var(--bg-elevated); border:1px dashed var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-empty__title { font-size:var(--fs-lg); color:var(--text-primary); margin-bottom:6px; font-family:var(--font-heading); }
.m-imp-empty__body { font-size:var(--fs-sm); color:var(--text-tertiary); line-height:1.6; max-width:280px; }
.m-imp-empty__ctas { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.m-imp-empty__cta { padding:9px var(--gutter); min-height:44px; display:inline-flex; align-items:center; border-radius:var(--radius); font-size:var(--fs-sm); font-weight:500; text-decoration:none; }
.m-imp-empty__cta--primary { background:var(--accent); color:#1a1816; }
.m-imp-empty__cta--secondary { background:transparent; color:var(--text-secondary); border:1px solid var(--border-strong); }

/* ============================================================
   Import 02 — POS preview · linking · history · rollback
   m-imp-* namespace. REUSES prompt-01 atoms (paste 01's block first):
     .m-imp-shell .m-imp-topbar .m-imp-commitbar .m-imp-section-label
     .m-imp-tile .m-imp-bucket .m-imp-linkswap .m-imp-minibtn .m-imp-pill
     .m-imp-dot .m-imp-empty* .m-imp-toast
   History type-dot colour is set by an import_type modifier class (m-imp-dot--<type>); no inline style.
   ============================================================ */

/* ---- POS preview: summary chrome ---- */
.m-imp-pos-head { padding:12px var(--gutter) 0; flex-shrink:0; }
.m-imp-pos-tiles { display:flex; gap:6px; margin-bottom:12px; }
.m-imp-overlap { padding:8px 10px; background:color-mix(in srgb, var(--warning) 10%, transparent); border:1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius:var(--radius); font-size:var(--fs-xs); color:var(--warning); line-height:1.5; margin-bottom:4px; }
.m-imp-pos-summary { padding:8px var(--gutter); margin-top:4px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); display:flex; justify-content:space-between; }
.m-imp-pos-vat { color:var(--text-secondary); }

/* ---- Segmented mode toggle (Inline / Bulk linking) ---- */
.m-imp-segtoggle { display:flex; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius); padding:2px; margin-bottom:4px; }
.m-imp-segtoggle__opt { flex:1; padding:7px 10px; min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:var(--fs-xs); font-weight:500; border-radius:4px; color:var(--text-tertiary); border:1px solid transparent; cursor:pointer; }
.m-imp-segtoggle__opt--active { background:var(--bg-base); color:var(--accent); border-color:var(--border-strong); }

/* ---- Rejected rows (validation errors surfaced before commit) ---- */
.m-imp-errors { background:color-mix(in srgb, var(--error) 8%, transparent); border:1px solid color-mix(in srgb, var(--error) 30%, transparent); border-radius:var(--radius); margin-bottom:8px; }
.m-imp-errors__summary { padding:8px var(--gutter); font-size:var(--fs-sm); font-weight:500; color:var(--error); cursor:pointer; list-style:none; }
.m-imp-errors__summary::-webkit-details-marker { display:none; }
.m-imp-errors__summary::before { content:'▸ '; }
.m-imp-errors[open] .m-imp-errors__summary::before { content:'▾ '; }
.m-imp-errors__list { margin:0; padding:0 var(--gutter) 8px; list-style:none; }
.m-imp-errors__item { display:flex; gap:8px; padding:4px 0; font-size:var(--fs-xs); border-top:1px solid color-mix(in srgb, var(--error) 15%, transparent); }
.m-imp-errors__row { flex:0 0 auto; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-errors__msg { flex:1; color:var(--text-secondary); }

/* ---- POS inline card (suggestion + unlinked) ---- */
.m-imp-pos-card { padding:12px var(--gutter); margin-bottom:10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.m-imp-pos-card__head { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.m-imp-pos-card__id { flex:1; min-width:0; }
.m-imp-pos-card__name { font-size:var(--fs-sm); color:var(--text-secondary); font-family:var(--font-mono); }
.m-imp-pos-card__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-imp-pos-card__menu { color:var(--text-tertiary); font-size:var(--fs-base); min-height:44px; display:flex; align-items:center; cursor:pointer; }
.m-imp-pos-card__actions { display:flex; justify-content:flex-end; gap:6px; margin-top:8px; }
/* unlinked search affordance */
.m-imp-searchbox { padding:9px 10px; min-height:44px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius); display:flex; align-items:center; gap:8px; color:var(--text-tertiary); cursor:text; }
.m-imp-searchbox__icon { font-size:var(--fs-sm); }
.m-imp-searchbox__placeholder { font-size:var(--fs-sm); flex:1; }
.m-imp-searchbox__enter { font-size:var(--fs-xs); color:var(--info); font-family:var(--font-mono); }
.m-imp-pos-card__foot { margin-top:6px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); display:flex; justify-content:space-between; }
.m-imp-pos-card__new { color:var(--accent); cursor:pointer; }
/* live search results dropdown (AJAX) */
.m-imp-results { margin-top:6px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; }
.m-imp-result { padding:9px 10px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); cursor:pointer; min-height:44px; }
.m-imp-result:last-child { border-bottom:none; }
.m-imp-result__name { flex:1; min-width:0; font-size:var(--fs-sm); color:var(--text-primary); }
.m-imp-result__type { font-size:var(--fs-2xs); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; color:var(--text-tertiary); }
.m-imp-result__cat { font-size:var(--fs-2xs); font-family:var(--font-mono); color:var(--text-tertiary); }

/* ---- POS bulk mode ---- */
.m-imp-bulk-filters { padding:8px var(--gutter); display:flex; gap:6px; align-items:center; position:sticky; top:0; background:var(--bg-base); z-index:1; overflow-x:auto; }
.m-imp-bulk-selectall { padding:10px var(--gutter); border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-surface); display:flex; align-items:center; gap:10px; }
.m-imp-check { width:16px; height:16px; border-radius:3px; border:1px solid var(--border-strong); background:transparent; color:#1a1816; font-size:var(--fs-xs); font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }
.m-imp-check--on { border-color:var(--accent); background:var(--accent); }
.m-imp-check--partial { border-color:var(--accent); background:transparent; color:var(--accent); }
.m-imp-bulk-selectall__label { flex:1; font-size:var(--fs-sm); color:var(--text-secondary); }
.m-imp-bulk-selectall__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-imp-bulk-list { padding:0 var(--gutter); }
.m-imp-bulk-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.m-imp-bulk-row__body { flex:1; min-width:0; }
.m-imp-bulk-row__name { font-size:var(--fs-sm); color:var(--text-primary); font-family:var(--font-mono); }
.m-imp-bulk-row__state { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }
.m-imp-bulk-row__state--linked { color:var(--text-secondary); }
.m-imp-bulk-row__state b { color:var(--text-primary); }
.m-imp-bulk-row__hint { color:var(--info); }
.m-imp-bulk-row__right { text-align:right; }
.m-imp-bulk-row__rows { font-size:var(--fs-sm); font-family:var(--font-mono); color:var(--text-secondary); }
.m-imp-bulk-row__rev { font-size:var(--fs-2xs); font-family:var(--font-mono); color:var(--text-tertiary); }
/* bulk sticky action bar */
.m-imp-bulk-action { position:sticky; bottom:0; margin:14px var(--gutter) 0; padding:12px var(--gutter); background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:var(--radius-md); }
.m-imp-bulk-action__summary { font-size:var(--fs-xs); color:var(--accent); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.m-imp-bulk-action__target { padding:9px 10px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius); display:flex; align-items:center; gap:8px; color:var(--text-tertiary); margin-bottom:8px; }
.m-imp-bulk-action__buttons { display:flex; gap:6px; }
.m-imp-bulk-action__primary { flex:1; }
.m-imp-bulk-action__foot { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:8px; line-height:1.5; }

/* ---- History item ---- */
.m-imp-hist-filters { padding:14px var(--gutter) 0; flex-shrink:0; }
.m-imp-hist-filters__row { display:flex; gap:6px; overflow-x:auto; }
.m-imp-hist-messages { margin:12px var(--gutter) 0; }
.m-imp-hist-list { padding:14px var(--gutter) 20px; }
.m-imp-hist { padding:12px var(--gutter); margin-bottom:8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.m-imp-hist--rolled { opacity:0.65; }
.m-imp-hist__head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.m-imp-hist__type { font-size:var(--fs-2xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.6px; font-weight:500; }
.m-imp-hist__spacer { flex:1; }
.m-imp-hist__status { font-size:var(--fs-xs); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; }
.m-imp-hist__status--completed { color:var(--success); }
.m-imp-hist__status--superseded { color:var(--text-tertiary); }
.m-imp-hist__status--rolled_back { color:var(--error); }
.m-imp-hist__name { font-size:var(--fs-base); color:var(--text-primary); margin-bottom:4px; font-family:var(--font-mono); }
.m-imp-hist__meta { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.55; }
.m-imp-hist__actions { margin-top:8px; display:flex; gap:6px; }
.m-imp-hist__undo { padding:4px 10px; min-height:32px; display:inline-flex; align-items:center; border:1px solid var(--border-strong); border-radius:var(--radius); font-size:var(--fs-xs); color:var(--error); text-decoration:none; }
/* History type-dot colour — by import_type modifier class (no inline style) */
.m-imp-dot--products { background:var(--accent); }
.m-imp-dot--menu_items { background:#a86b4e; }
.m-imp-dot--pos_data { background:#7198b5; }

/* ---- Rollback confirm ---- */
.m-imp-rb { padding:14px var(--gutter); padding-bottom:90px; }
.m-imp-rb-warn { padding:14px var(--gutter); background:color-mix(in srgb, var(--error) 10%, transparent); border:1px solid color-mix(in srgb, var(--error) 30%, transparent); border-radius:var(--radius-md); margin-bottom:14px; }
.m-imp-rb-warn__title { font-size:var(--fs-sm); color:var(--error); font-weight:500; margin-bottom:6px; }
.m-imp-rb-warn__body { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.55; }
.m-imp-rb-warn__body b { color:var(--text-primary); font-weight:500; }
.m-imp-revert { display:flex; align-items:flex-start; gap:10px; padding:10px; margin-bottom:6px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); }
.m-imp-revert__icon { width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); color:var(--text-tertiary); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:4px; font-family:var(--font-mono); }
.m-imp-revert__title { font-size:var(--fs-sm); color:var(--text-primary); margin-bottom:2px; }
.m-imp-revert__detail { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; }
.m-imp-rb-blocked { margin-top:14px; padding:12px var(--gutter); background:color-mix(in srgb, var(--warning) 10%, transparent); border:1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius:var(--radius); }
.m-imp-rb-blocked__title { font-size:var(--fs-xs); font-weight:500; color:var(--warning); margin-bottom:4px; }
.m-imp-rb-blocked__body { font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; }
.m-imp-rb-blocked__list { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:4px; line-height:1.7; }
.m-imp-rb-blocked--spaced { margin-top:8px; }
.m-imp-rb-disclaimer { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:14px; line-height:1.6; }

/* ============================================================
   Import — categorical picker (bottom sheet) + in-place value
   edit + locked-field tip + flag-new chip + full editor.
   Picker / editor chrome is the SHARED m-sl-drawer (DESIGN-LESSONS
   #8/#47); classes below are the import-specific body content only.
   ============================================================ */

/* Picker header action */
.m-imp-pick__done { background:transparent; border:none; color:var(--accent); font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; cursor:pointer; padding:4px 2px; min-height:32px; }

/* Locked explainer (field has no upload column) */
.m-imp-pick__locked { padding:12px var(--gutter); margin-bottom:12px; background:color-mix(in srgb, var(--warning) 10%, transparent); border:1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius:var(--radius); font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.55; }

/* Search */
.m-imp-pick__search { margin-bottom:10px; }
.m-imp-pick__search-input { width:100%; box-sizing:border-box; padding:9px 11px; min-height:38px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--text-primary); font-family:var(--font-body); font-size:var(--fs-sm); color-scheme:dark; }
.m-imp-pick__search-input:focus { outline:none; border-color:var(--accent); }

/* Option list */
.m-imp-pick__list { display:flex; flex-direction:column; gap:2px; }
.m-imp-pick__opt { display:flex; align-items:center; gap:10px; width:100%; padding:10px; min-height:38px; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text-primary); font-family:var(--font-body); font-size:var(--fs-sm); text-align:left; cursor:pointer; }
.m-imp-pick__opt:hover { background:var(--bg-elevated); }
.m-imp-pick__opt--current { color:var(--accent); }
.m-imp-pick__opt-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.m-imp-pick__opt-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-imp-pick__opt-check { color:var(--accent); font-size:var(--fs-sm); flex-shrink:0; }
.m-imp-pick__opt--sub { padding-left:30px; min-height:34px; font-size:var(--fs-sm); color:var(--text-secondary); border-bottom:none; }
.m-imp-pick__opt--sub .m-imp-pick__opt-dot { width:7px; height:7px; opacity:0.6; }
.m-imp-pick__addsub { display:block; width:100%; padding:6px 10px 10px 30px; margin-bottom:2px; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text-tertiary); font-family:var(--font-body); font-size:var(--fs-xs); text-align:left; cursor:pointer; }
.m-imp-pick__addsub:hover { color:var(--accent); }
.m-imp-pick__empty { padding:14px 4px; font-size:var(--fs-sm); color:var(--text-tertiary); }

/* Cost-category pills (drinks / food / other) */
.m-imp-pick__pills { display:flex; gap:8px; flex-wrap:wrap; padding:6px 0; }
.m-imp-pick__pill { padding:9px var(--gutter); min-height:38px; background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--text-secondary); font-family:var(--font-body); font-size:var(--fs-sm); cursor:pointer; }
.m-imp-pick__pill--current { background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:var(--accent); color:var(--accent); font-weight:500; }

/* Create new */
.m-imp-pick__create { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.m-imp-pick__create-open { display:flex; align-items:center; gap:8px; width:100%; padding:9px 0; min-height:36px; background:transparent; border:none; color:var(--accent); font-family:var(--font-body); font-size:var(--fs-sm); font-weight:500; text-align:left; cursor:pointer; }
.m-imp-pick__create-open[hidden] { display:none; }
.m-imp-pick__create-plus { font-size:var(--fs-lg); line-height:1; }
.m-imp-pick__create-form { display:flex; gap:8px; align-items:center; }
.m-imp-pick__create-form[hidden] { display:none; }
.m-imp-pick__create-input { flex:1; min-width:0; padding:9px 11px; min-height:38px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--text-primary); font-family:var(--font-body); font-size:var(--fs-sm); color-scheme:dark; }
.m-imp-pick__create-input:focus { outline:none; border-color:var(--accent); }
.m-imp-pick__create-err { margin-top:8px; font-size:var(--fs-xs); color:var(--error); }

/* Size composer (pack number + measurement-unit pills) */
.m-imp-pick__size { display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.m-imp-pick__size[hidden] { display:none; }
.m-imp-pick__size-input { width:100%; box-sizing:border-box; padding:10px var(--gutter); min-height:40px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--text-primary); font-family:var(--font-mono); font-size:var(--fs-lg); color-scheme:dark; }
.m-imp-pick__size-input:focus { outline:none; border-color:var(--accent); }
.m-imp-pick__size-set { align-self:flex-start; }

/* Explainer footer */
.m-imp-pick__explain { margin-top:14px; font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.55; }

/* In-place value edit input (menu items: tap name / price to edit) */
.m-imp-edit-input { width:100%; min-width:56px; box-sizing:border-box; padding:2px 5px; min-height:24px; background:var(--bg-base); border:1px solid var(--accent); border-radius:4px; color:var(--text-primary); font-family:var(--font-mono); font-size:var(--fs-sm); color-scheme:dark; }
/* a11y wave 3: the old .m-imp-edit-input:focus rule that cleared the focus ring is
   removed (its accent border is always-on, not focus-distinct) — the global
   :focus-visible baseline now paints the ring. */
.m-imp-slim__name .m-imp-edit-input { font-family:var(--font-body); font-size:var(--fs-base); }

/* "+ par · barcode · notes" affordance (opens the full editor) */
.m-imp-slim__extra-more { cursor:pointer; }

/* flag-new chip marker (category will be auto-created on commit) */
.m-imp-chip--new { border-color:color-mix(in srgb, var(--success) 45%, transparent); }
.m-imp-chip__flag { margin-left:5px; padding:1px 5px; border-radius:3px; background:color-mix(in srgb, var(--success) 18%, transparent); color:var(--success); font-size:var(--fs-2xs); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; }

/* Ephemeral tip toast (tapping a no-column field) */
.m-imp-tip { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px); max-width:320px; padding:10px var(--gutter); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:0 6px 20px rgba(0,0,0,0.4); color:var(--text-primary); font-size:var(--fs-xs); line-height:1.5; z-index:200; opacity:0; pointer-events:none; transition:opacity 0.18s ease, transform 0.18s ease; }
.m-imp-tip--show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Full editor = the reused product quick-create drawer (BACKUP editor). In
   import mode we hide the fields an import row sets elsewhere or can't persist:
   VAT (category-level), the sold-direct toggle + serve sizes (sellable/serve-
   size complexity, deferred), allergens, and the P&L/Account picker — P&L is set
   on the inline chip + auto-derived, so the drawer must NOT own it (its
   category-driven pill auto-fill can't be cleanly told apart from a real pick,
   and would clobber the derived/manual value). The sale-price row is force-shown
   from JS (a column-backed import field). */
.m-pf-qc--import .m-pd-section-meta,
.m-pf-qc--import .m-pd-toggle-row,
.m-pf-qc--import #pf-serve-sizes-section,
.m-pf-qc--import #pf-allergens-create,
.m-pf-qc--import #pf-account-stripe { display:none; }

/* Quick-action sheet menu — defined, tappable cards inside a shared m-sl-drawer
   bottom sheet (catalogue ⋯ menus + Sales "Log Sales"). The drawer panel is
   --bg-surface, so rows are raised --bg-elevated cards (with accent-tinted icon
   badges + gaps) to give depth rather than reading as flat dark-on-dark rows. */
.m-sheet-menu .m-sl-drawer__body { display:flex; flex-direction:column; gap:10px; padding-top:4px; padding-bottom:18px; }
.m-sheet-menu__item { display:flex; align-items:center; gap:14px; width:100%; padding:13px var(--gutter); min-height:60px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--text-primary); font-family:var(--font-body); text-align:left; text-decoration:none; cursor:pointer; box-sizing:border-box; transition:border-color 0.12s ease, background 0.12s ease; }
.m-sheet-menu__item:hover { border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.m-sheet-menu__item:active { background:var(--bg-surface); border-color:var(--accent); }
.m-sheet-menu__icon { flex:0 0 40px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent); font-size:var(--fs-xl); }
.m-sheet-menu__text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.m-sheet-menu__label { font-size:var(--fs-base); font-weight:500; color:var(--text-primary); }
.m-sheet-menu__sub { font-size:var(--fs-xs); color:var(--text-tertiary); }

/* ============================================================
   USERS MODULE 10 — m-usr-* canonical block
   Shared atoms used by Prompt 01 (team/detail/account) and
   Prompt 02 (permissions/public-auth). Add Prompt 02 block after this.
   ============================================================ */

/* ============== USERS SHARED ATOMS ============== */
.m-usr-card { margin:0 var(--gutter) 8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-usr-section-label { display:flex; justify-content:space-between; align-items:baseline; padding:0 var(--gutter); margin:14px 0 8px; font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; }
.m-usr-section-label__right { color:var(--text-tertiary); font-family:var(--font-mono); text-transform:none; letter-spacing:0; }

.m-usr-role { display:inline-flex; align-items:center; padding:3px 8px; font-size:var(--fs-xs); font-weight:500; font-family:var(--font-mono); letter-spacing:0.5px; text-transform:uppercase; border-radius:4px; }
.m-usr-role--sm { padding:2px 6px; font-size:var(--fs-xs); letter-spacing:0.4px; }
.m-usr-role--owner { background:var(--warning-bg); color:var(--warning); }
.m-usr-role--manager { background:var(--bg-elevated); color:var(--info); }
.m-usr-role--staff { background:var(--bg-elevated); color:var(--text-secondary); }
.m-usr-role--client { background:var(--accent-bg); color:var(--accent); }

/* Option A addition 1: fallback bg/color so tone-less Operations avatars render */
.m-usr-avatar { flex-shrink:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:500; letter-spacing:0.4px; background:var(--bg-elevated); color:var(--text-primary); }
.m-usr-avatar--sm { width:36px; height:36px; font-size:var(--fs-sm); }
.m-usr-avatar--md { width:48px; height:48px; font-size:var(--fs-xl); }
.m-usr-avatar--lg { width:56px; height:56px; font-size:var(--fs-2xl); }
/* Option A addition 2: --xs size for Operations topbar avatar */
.m-usr-avatar--xs { width:32px; height:32px; font-size:var(--fs-sm); }
.m-usr-avatar--tone-a { background:var(--accent-bg); color:var(--accent); }
.m-usr-avatar--tone-b { background:var(--bg-elevated); color:var(--info); }
.m-usr-avatar--tone-c { background:var(--success-bg); color:var(--success); }
.m-usr-avatar--tone-d { background:var(--warning-bg); color:var(--warning); }
.m-usr-avatar--deactivated { background:var(--bg-elevated); color:var(--text-tertiary); filter:grayscale(0.6); }

.m-usr-status-dot { border-radius:100px; display:inline-block; flex-shrink:0; width:6px; height:6px; }
.m-usr-status-dot--active { background:var(--success); }
.m-usr-status-dot--inactive { background:var(--text-tertiary); }
.m-usr-status-dot--pending { background:var(--warning); }

.m-usr-toggle { width:36px; height:20px; border-radius:10px; background:var(--bg-base); border:1px solid var(--border-strong); position:relative; flex-shrink:0; cursor:pointer; }
.m-usr-toggle--on { background:var(--accent); border-color:var(--accent); }
.m-usr-toggle__knob { position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:8px; background:var(--text-tertiary); transition:left 120ms; }
.m-usr-toggle--on .m-usr-toggle__knob { left:16px; background:var(--bg-base); }

.m-usr-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font-size:var(--fs-xs); font-weight:400; background:transparent; color:var(--text-tertiary); border:1px solid var(--border); border-radius:var(--radius-pill); letter-spacing:0.2px; cursor:pointer; }
.m-usr-chip--active { font-weight:500; background:var(--bg-elevated); color:var(--text-primary); border-color:var(--border-strong); }
.m-usr-chip__count { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-tertiary); }

.m-usr-pill { display:inline-flex; align-items:center; padding:2px 7px; font-size:var(--fs-xs); font-weight:500; font-family:var(--font-mono); letter-spacing:0.3px; border-radius:4px; }
.m-usr-pill--accent { background:var(--accent-bg); color:var(--accent); }
.m-usr-pill--warn { background:var(--warning-bg); color:var(--warning); }
.m-usr-pill--success { background:var(--success-bg); color:var(--success); }
.m-usr-pill--muted { background:var(--bg-elevated); color:var(--text-secondary); }

.m-usr-cta { min-height:44px; padding:12px var(--gutter); border-radius:8px; font-size:var(--fs-sm); font-weight:500; font-family:var(--font-heading); letter-spacing:0.2px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--bg-base); }
.m-usr-cta--secondary { background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border-strong); }
.m-usr-cta--danger { background:var(--error-bg); color:var(--error); border:1px solid var(--error-border); }
.m-usr-cta--full { width:100%; }
/* Sheet inputs recess to --bg-base (darker than the --bg-surface drawer panel) for
   depth — matches the shared account sheets (m-set-input); never flat-on-flat (DESIGN-LESSON #55). */
.m-usr-input { width:100%; box-sizing:border-box; padding:12px var(--gutter); background:var(--bg-base); border:1px solid var(--border-strong); color:var(--text-primary); font-family:var(--font-body); font-size:var(--fs-lg); outline:none; }
.m-usr-input:focus { border-color:var(--accent); }

/* ============== TEAM LIST ============== */
.m-usr-filter-strip { padding:12px var(--gutter) 10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--border); }
.m-usr-invite-cta-wrap { padding:14px var(--gutter) 8px; }
/* Accent-tint card (not a solid copper slab) — matches the app's accent-card language
   (accent-bg fill + accent border/text), better contrast than dark-on-copper. */
.m-usr-invite-cta { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px var(--gutter); background:var(--accent-bg); color:var(--text-primary); border-radius:10px; text-decoration:none; border:1px solid var(--accent); width:100%; }
.m-usr-invite-cta__title { font-size:var(--fs-sm); font-weight:500; font-family:var(--font-heading); color:var(--accent); }
.m-usr-invite-cta__sub { font-size:var(--fs-xs); color:var(--text-secondary); margin-top:2px; font-family:var(--font-mono); letter-spacing:0.2px; }
.m-usr-invite-cta__arrow { font-size:var(--fs-lg); color:var(--accent); }
.m-usr-invite-cta__plus { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--bg-base); display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); font-weight:500; line-height:1; }
.m-usr-invite-cta__body { flex:1; min-width:0; }
.m-usr-list-head { padding:10px var(--gutter) 6px; display:flex; justify-content:space-between; align-items:baseline; }
.m-usr-rolecount { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-tertiary); letter-spacing:0.4px; }
/* Used on both <a> and <button> — reset UA button chrome so button rows aren't
   rendered with the light default ButtonFace background. */
.m-usr-row { min-height:44px; display:flex; align-items:center; gap:12px; padding:11px var(--gutter); color:inherit; text-decoration:none; background:transparent; border:none; width:100%; box-sizing:border-box; font-family:inherit; font-size:var(--fs-sm); text-align:left; cursor:pointer; }
.m-usr-row + .m-usr-row { border-top:1px solid var(--border); }
.m-usr-row--muted { opacity:0.62; }
.m-usr-row__main { flex:1; min-width:0; }
.m-usr-row__top { display:flex; align-items:center; gap:8px; margin-bottom:2px; min-width:0; }
.m-usr-row__name { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
.m-usr-row__sub { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-usr-row__sub-action { color:var(--text-secondary); font-family:var(--font-body); }
.m-usr-row__chevron { color:var(--text-tertiary); font-size:var(--fs-lg); flex-shrink:0; margin-left:auto; }
.m-usr-row__envelope { width:36px; height:36px; flex-shrink:0; background:var(--warning-bg); border:1px dashed var(--warning); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--warning); font-size:var(--fs-base); font-family:var(--font-mono); }
.m-usr-row__resend { min-height:44px; display:inline-flex; align-items:center; font-size:var(--fs-xs); color:var(--info); font-weight:500; font-family:var(--font-heading); flex-shrink:0; }

/* ============== USER DETAIL ============== */
.m-usr-identity { padding:18px var(--gutter) 16px; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; gap:14px; align-items:flex-start; }
.m-usr-identity__body { flex:1; min-width:0; }
.m-usr-identity__name { font-size:var(--fs-xl); font-weight:500; font-family:var(--font-heading); letter-spacing:-0.3px; color:var(--text-primary); margin-bottom:2px; }
.m-usr-identity__email { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-usr-identity__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.m-usr-identity__status { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--text-secondary); font-family:var(--font-mono); letter-spacing:0.2px; }
.m-usr-tabs { display:flex; gap:4px; padding:0 8px; border-bottom:1px solid var(--border); background:var(--bg-surface); }
.m-usr-tab { min-height:44px; padding:10px var(--gutter); font-size:var(--fs-sm); font-weight:500; color:var(--text-tertiary); border-bottom:2px solid transparent; margin-bottom:-1px; font-family:var(--font-heading); letter-spacing:0.1px; background:transparent; border-left:none; border-right:none; border-top:none; cursor:pointer; }
.m-usr-tab--active { color:var(--text-primary); border-bottom-color:var(--text-primary); }
.m-usr-tab-panel[hidden] { display:none; }
.m-usr-act-row { display:flex; gap:12px; align-items:flex-start; padding:12px var(--gutter); }
.m-usr-act-row + .m-usr-act-row { border-top:1px solid var(--border); }
.m-usr-act-icon { width:28px; height:28px; flex-shrink:0; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:500; font-family:var(--font-mono); background:var(--bg-elevated); color:var(--text-secondary); }
.m-usr-act-icon--stock { background:var(--bg-elevated); color:var(--stock-accent); }
.m-usr-act-icon--sales { background:var(--success-bg); color:var(--sales-accent); }
.m-usr-act-icon--invoice { background:var(--accent-bg); color:var(--accent); }
.m-usr-act-row__body { flex:1; min-width:0; }
.m-usr-act-row__top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:2px; }
.m-usr-act-row__label { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); }
.m-usr-act-row__time { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); flex-shrink:0; }
.m-usr-act-row__detail { font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.4; }
.m-usr-login-row { display:flex; align-items:flex-start; gap:12px; padding:12px var(--gutter); }
.m-usr-login-row + .m-usr-login-row { border-top:1px solid var(--border); }
.m-usr-login-row__body { flex:1; min-width:0; }
.m-usr-login-row__device { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); }
.m-usr-login-row__meta { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; line-height:1.4; }
.m-usr-access-row { display:flex; align-items:center; gap:12px; padding:12px var(--gutter); }
.m-usr-access-row + .m-usr-access-row { border-top:1px solid var(--border); }
.m-usr-access-row__body { flex:1; min-width:0; }
.m-usr-access-row__label { font-size:var(--fs-sm); color:var(--text-primary); }
.m-usr-access-row__meta { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-usr-danger-card { margin:0 var(--gutter); border:1px solid var(--error-border); background:var(--error-bg); border-radius:10px; overflow:hidden; }
.m-usr-danger-card__row { min-height:44px; padding:14px var(--gutter); display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; border:none; width:100%; background:transparent; }
.m-usr-danger-card__title { font-size:var(--fs-sm); font-weight:500; color:var(--error); }
.m-usr-danger-card__sub { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; line-height:1.45; }
.m-usr-danger-card__chevron { color:var(--error); font-size:var(--fs-base); margin-left:auto; }

/* ============== ACCOUNT ============== */
/* Used on both <div> and <button> — reset UA button chrome (same fix as m-usr-row). */
.m-usr-field-row { min-height:44px; display:flex; align-items:center; gap:10px; padding:12px var(--gutter); background:transparent; border:none; width:100%; box-sizing:border-box; font:inherit; color:inherit; text-align:left; }
button.m-usr-field-row { cursor:pointer; }
.m-usr-field-row--center { justify-content:center; }
.m-usr-field-row--center .m-usr-field-row__body { flex:1; text-align:center; display:flex; flex-direction:column; }
.m-usr-field-row--tight { min-height:0; padding:9px var(--gutter); }
.m-usr-field-row + .m-usr-field-row { border-top:1px solid var(--border); }
.m-usr-field-row__body { flex:1; min-width:0; }
.m-usr-field-row__label { font-size:var(--fs-xs); color:var(--text-tertiary); margin-bottom:2px; }
.m-usr-field-row__value { font-size:var(--fs-sm); color:var(--text-primary); }
.m-usr-field-row__value--mono { font-family:var(--font-mono); }
.m-usr-field-row__hint { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:2px; }
.m-usr-field-row__edit { min-height:44px; display:inline-flex; align-items:center; font-size:var(--fs-xs); color:var(--text-tertiary); border:none; background:transparent; cursor:pointer; }
.m-usr-session-row { min-height:44px; display:flex; align-items:center; gap:12px; padding:12px var(--gutter); }
.m-usr-session-row + .m-usr-session-row { border-top:1px solid var(--border); }
.m-usr-session-row__body { flex:1; min-width:0; }
.m-usr-session-row__device { font-size:var(--fs-base); font-weight:500; color:var(--text-primary); }
.m-usr-session-row__this { font-size:var(--fs-2xs); font-family:var(--font-mono); color:var(--success); margin-left:6px; }
.m-usr-session-row__meta { font-size:var(--fs-sm); color:var(--text-tertiary); margin-left:auto; }
.m-usr-action-strip { min-height:44px; margin:0 var(--gutter) 8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:14px var(--gutter); font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); text-align:center; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.m-usr-action-strip--danger { border-color:var(--error-border); color:var(--error); background:var(--error-bg); }

/* (Amendment 1 #1: no admin-menu CSS — the admin items live in the existing
   base.html hamburger menu and reuse its hamburger-menu__item classes.) */

/* ============== SHEET CONTENT (chrome is shared m-sl-drawer) ============== */
/* Invite, pending-invite, and the four confirm sheets all sit on the
   m-sl-drawer scrim/panel/grabber/header/body classes already in
   components.css — never redefined here (Amendment 1 #4). The m-usr-*
   classes below style only the content INSIDE the drawer body. */
.m-usr-sheet-desc { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.55; margin-top:4px; }
.m-usr-sheet-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.m-usr-sheet-actions { display:flex; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.m-usr-sheet-btn { flex:1; min-height:44px; padding:12px var(--gutter); text-align:center; border-radius:8px; font-size:var(--fs-sm); font-weight:500; border:none; cursor:pointer; }
.m-usr-sheet-btn--cancel { background:var(--bg-elevated); border:1px solid var(--border-strong); color:var(--text-primary); }
.m-usr-sheet-btn--primary { background:var(--accent); color:var(--bg-base); }
.m-usr-sheet-btn--danger { background:var(--error-bg); border:1px solid var(--error-border); color:var(--error); }
.m-usr-form-row { margin-bottom:14px; }
.m-usr-form-row__label { display:block; font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; margin-bottom:6px; }
.m-usr-form-error { margin-top:8px; font-size:var(--fs-xs); color:var(--error); line-height:1.45; }
.m-usr-form-success { margin-top:8px; font-size:var(--fs-xs); color:var(--success); line-height:1.45; }

.m-usr-confirm__icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-base); font-family:var(--font-mono); flex-shrink:0; }
.m-usr-confirm__icon--danger { background:var(--error-bg); color:var(--error); }
.m-usr-confirm__icon--warn { background:var(--warning-bg); color:var(--warning); }
.m-usr-confirm__icon--success { background:var(--success-bg); color:var(--success); }
.m-usr-impact-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.m-usr-impact-row { display:flex; align-items:center; gap:12px; padding:10px var(--gutter); }
.m-usr-impact-row + .m-usr-impact-row { border-top:1px solid var(--border); }
.m-usr-impact-row__label { flex:1; font-size:var(--fs-sm); color:var(--text-primary); font-weight:500; }
.m-usr-impact-row__value { font-size:var(--fs-sm); color:var(--text-primary); font-family:var(--font-mono); font-weight:500; min-width:28px; text-align:right; }
.m-usr-impact-row__hint { font-size:var(--fs-xs); color:var(--text-tertiary); flex:0 0 auto; }
.m-usr-confirm__note { padding:12px 4px 0; font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; }

/* ============================================================
   Users — Permissions + Public Auth
   m-usr-* namespace. Requires prompt 01 (m-usr-role/-toggle/-pill/
   -card/-cta/-input). If those shared atoms are absent, stop rather than
   duplicating them here. Public shell has no app chrome / bottom nav.
   ============================================================ */

/* ============== PERMISSIONS ============== */
.m-usr-perm-intro { padding:12px var(--gutter) 8px; font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; }
.m-usr-role-seg { display:flex; background:var(--bg-elevated); padding:3px; gap:2px; border-radius:8px; margin:4px var(--gutter) 14px; }
.m-usr-role-seg__opt { flex:1; padding:8px 0; text-align:center; background:transparent; border:none; color:var(--text-tertiary); font-size:var(--fs-sm); font-weight:500; font-family:var(--font-heading); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.m-usr-role-seg__opt--active { background:var(--bg-surface); color:var(--text-primary); }
.m-usr-perm-summary { margin:0 var(--gutter) 14px; padding:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; gap:12px; }
.m-usr-perm-summary__text { flex:1; font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.4; }

.m-usr-perm-cat { padding:12px var(--gutter); display:flex; align-items:center; gap:10px; background:var(--bg-surface); cursor:pointer; }
.m-usr-perm-cat--open { background:var(--bg-elevated); border-bottom:1px solid var(--border); }
.m-usr-perm-cat__body { flex:1; min-width:0; }
.m-usr-perm-cat__title { font-size:var(--fs-sm); font-weight:500; color:var(--text-primary); font-family:var(--font-heading); letter-spacing:-0.1px; }
.m-usr-perm-cat__meta { display:flex; align-items:center; gap:8px; margin-top:3px; }
.m-usr-perm-cat__count { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.3px; }
.m-usr-perm-cat__caret { color:var(--text-tertiary); font-size:var(--fs-base); font-family:var(--font-mono); transition:transform 120ms; }
.m-usr-perm-cat__caret--closed { transform:rotate(-90deg); }

.m-usr-perm-row { display:flex; align-items:center; gap:12px; padding:12px var(--gutter); }
.m-usr-perm-row + .m-usr-perm-row { border-top:1px solid var(--border); }
.m-usr-perm-row--modified { background:var(--warning-bg); }
.m-usr-perm-row__dot-cell { width:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.m-usr-perm-row__dot { width:6px; height:6px; border-radius:3px; background:var(--warning); }
.m-usr-perm-row__body { flex:1; min-width:0; }
.m-usr-perm-row__label { font-size:var(--fs-sm); color:var(--text-primary); line-height:1.35; }
.m-usr-perm-row__override { font-size:var(--fs-xs); color:var(--warning); font-family:var(--font-mono); letter-spacing:0.5px; margin-top:2px; }

.m-usr-perm-reset { margin:12px var(--gutter) 16px; padding:12px var(--gutter); border:1px dashed var(--border-strong); border-radius:10px; text-align:center; }
.m-usr-perm-reset__text { font-size:var(--fs-sm); color:var(--text-secondary); margin-bottom:4px; }
.m-usr-perm-reset__action { font-size:var(--fs-xs); color:var(--error); font-family:var(--font-heading); font-weight:500; letter-spacing:0.3px; cursor:pointer; }
.m-usr-perm-note { padding:4px var(--gutter) 24px; font-size:var(--fs-xs); color:var(--text-tertiary); text-align:center; font-family:var(--font-mono); letter-spacing:0.2px; }
.m-usr-perm-empty { padding:32px var(--gutter); text-align:center; }
.m-usr-perm-empty__title { font-size:var(--fs-sm); color:var(--text-secondary); margin-bottom:4px; }
.m-usr-perm-empty__text { font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.45; }

/* ============== PUBLIC AUTH SHELL ============== */
.m-usr-pub { width:100%; min-height:100%; background:var(--bg-base); color:var(--text-primary); font-family:var(--font-body); display:flex; flex-direction:column; }
.m-usr-pub__brand { padding:24px var(--gutter-wide) 0; display:flex; align-items:center; gap:10px; }
.m-usr-pub__logo { width:28px; height:28px; background:var(--text-primary); color:var(--bg-base); display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:600; font-family:var(--font-heading); }
.m-usr-pub__brand-name { font-size:var(--fs-sm); font-weight:500; font-family:var(--font-heading); letter-spacing:-0.1px; }
.m-usr-pub__brand-tag { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); letter-spacing:0.4px; margin-top:1px; }
.m-usr-pub__body { flex:1; padding:32px var(--gutter-wide) 0; display:flex; flex-direction:column; }
.m-usr-pub__footer { padding:16px var(--gutter-wide) 22px; text-align:center; }
.m-usr-pub__title { font-size:var(--fs-2xl); font-weight:500; font-family:var(--font-heading); letter-spacing:-0.5px; margin-bottom:6px; }
.m-usr-pub__sub { font-size:var(--fs-sm); color:var(--text-secondary); margin-bottom:28px; line-height:1.5; }
.m-usr-pub__sub b, .m-usr-pub__sub .mono { color:var(--text-primary); font-family:var(--font-mono); font-weight:500; }
.m-usr-pub-link { font-size:var(--fs-sm); color:var(--info); font-weight:500; font-family:var(--font-heading); text-decoration:none; }
.m-usr-pub-link--mute { color:var(--text-tertiary); }

.m-usr-pub-field { margin-bottom:14px; }
.m-usr-pub-field__label { font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; margin-bottom:6px; }
.m-usr-pub-field--error .m-usr-pub-field__label { color:var(--error); }
.m-usr-pub-input { width:100%; box-sizing:border-box; padding:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--border-strong); font-size:var(--fs-lg); color:var(--text-primary); font-family:var(--font-body); outline:none; }
.m-usr-pub-input--mono { font-family:var(--font-mono); letter-spacing:0.2px; }
.m-usr-pub-input:focus { border-color:var(--accent); }
.m-usr-pub-field--error .m-usr-pub-input { border-color:var(--error); }
.m-usr-pub-field__error { font-size:var(--fs-xs); color:var(--error); margin-top:5px; line-height:1.45; }
.m-usr-pub-field__error--block { margin-bottom:12px; }
.m-usr-pub-action-top { margin-top:18px; }
.m-usr-pub-action-top--tight { margin-top:6px; }
.m-usr-pub__title--sm { font-size:var(--fs-2xl); }

.m-usr-pub-alert { margin-top:24px; padding:20px var(--gutter); background:var(--error-bg); border:1px solid var(--error); border-radius:10px; }
.m-usr-pub-alert__head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.m-usr-pub-alert__icon { width:24px; height:24px; background:var(--error); color:var(--bg-base); display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-family:var(--font-mono); }
.m-usr-pub-alert__title { font-size:var(--fs-base); font-weight:500; color:var(--error); font-family:var(--font-heading); }
.m-usr-pub-alert__text { font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.5; }
.m-usr-pub-mono { padding:12px var(--gutter); background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:8px; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-secondary); letter-spacing:0.3px; }
.m-usr-pub-hero-icon { width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); font-family:var(--font-mono); margin-bottom:18px; }
.m-usr-pub-hero-icon--info { background:var(--bg-elevated); color:var(--info); }
.m-usr-pub-hero-icon--success { background:var(--success-bg); color:var(--success); }
.m-usr-pub-hint { padding:10px var(--gutter); background:var(--bg-elevated); font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; margin-bottom:18px; }
.m-usr-pub-note-strip { padding:10px var(--gutter); background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); font-size:var(--fs-xs); color:var(--text-tertiary); line-height:1.5; }
.m-usr-pub-invite-banner { padding:14px var(--gutter); background:var(--warning-bg); border-top:1px solid var(--warning); border-bottom:1px solid var(--warning); margin:0 calc(-1 * var(--gutter-wide)) 24px; display:flex; align-items:center; gap:10px; }
.m-usr-pub-invite-banner__icon { width:28px; height:28px; background:var(--warning); color:var(--bg-base); display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-family:var(--font-mono); flex-shrink:0; }
.m-usr-pub-invite-banner__text { font-size:var(--fs-sm); color:var(--text-primary); line-height:1.45; }
.m-usr-pub-invite-banner__text b { font-weight:500; }

/* ============================================================
   DESKTOP — Public Auth (standalone pages: login / forgot /
   reset / accept-invite). Additive; gated >=1024px. Mobile
   (<1024) render UNCHANGED. These templates do not extend
   base.html, so there is no {% block extra_css %}. The
   .m-usr-pub* atoms are INHERITED — referenced, NOT restyled.
   NOTE: deliberately KEPT at 1024 by the desktop-at-768 migration —
   these pages have no rail and are outside the rail-shell band.
   ============================================================ */
@media (min-width: 1024px) {
  .m-usr-pub {
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
  }
  .m-usr-pub::before {
    content: "";
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%,
      transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .m-usr-pub__brand,
  .m-usr-pub__body,
  .m-usr-pub__footer {
    width: 480px;
    max-width: 100%;
    position: relative;
    z-index: 1;
  }
  .m-usr-pub__body { flex: 0 0 auto; }
}

/* ============================================================
   Prep — Mobile 01a: Sessions list · detail · lifecycle · CRUD
   m-prp-* namespace — genuinely-new, non-chrome content atoms ONLY.
   Shared atoms (.m-card/.m-card-row/.badge/.btn/.lc-search/.m-section-label +
   the m-sl-drawer chrome + empty_state/error_state/loading_list_skeleton macros)
   are REUSED, never redefined here. 01b/01c append their own new classes after.
   Category dot colour is painted by JS via data-cat-colour — never inline style.
   ============================================================ */

/* ---- Additive section-label right-slot tones (canonical class, additive) ---- */
.m-section-label__right--accent { color:var(--accent); cursor:pointer; }
.m-section-label__right--error { color:var(--error); }

/* ---- Flexible middle column for prep flex rows (JSX used inline flex:1) ---- */
.m-prp-rowfill { flex:1; min-width:0; }

/* ---- Page-level primary action wrapper (Start run) ---- */
.m-prp-page-action { padding:14px 12px 24px; }

/* ---- Prep drawer footer: app-polished button tones, scoped to prep footers
   (NOT global .btn). Primary = dark text on accent (crisp, like m-set-btn-save +
   the prep design intent), not the washed-out white-on-accent; secondary recedes
   to a neutral outline so the primary leads. ---- */
.m-prp-foot .btn-primary { color:var(--bg-base); font-weight:600; }
.m-prp-foot .btn-secondary { background:transparent; color:var(--text-secondary); border-color:var(--border-strong); }
.m-prp-foot .btn-secondary:hover { background:var(--bg-elevated); color:var(--text-primary); }
.m-prp-foot .btn-primary:hover { filter:brightness(1.05); }

/* ---- Standard inset (side margins matching the card grid) ---- */
.m-prp-inset { margin:8px 12px; }


/* ---- Sessions list: compact activity card + month grouping ----
   Density/shape mirrors the app's activity cards (m-sh-stream-item / m-sl-act-card):
   10x12 padding, surface bg, status-coloured 3px left stripe — not a big washed-out block. */
.m-prp-list { padding:2px 0 16px; }
.m-prp-list .m-section-label { margin-top:14px; margin-bottom:8px; }
.m-prp-list > .m-section-label:first-of-type { margin-top:8px; }
.m-prp-month { font-size:9px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.6px; font-weight:500; font-family:var(--font-mono); padding:8px 16px 4px; }
.m-prp-scard { display:flex; align-items:center; gap:8px; margin:0 var(--gutter) 4px; padding:8px 10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.m-prp-scard, .m-prp-scard:hover { color:inherit; text-decoration:none; }
.m-prp-scard--active { background:color-mix(in srgb, var(--accent) 5%, var(--bg-surface)); }
.m-prp-scard--cancelled { opacity:0.6; }
.m-prp-scard__accent { display:none; }
.m-prp-scard__date { flex-shrink:0; width:28px; text-align:center; line-height:1; }
.m-prp-scard__day { font-size:var(--fs-base); font-weight:600; color:var(--text-primary); }
.m-prp-scard__mon { font-size:8px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.4px; margin-top:1px; }
.m-prp-scard__body { flex:1; min-width:0; }
.m-prp-scard__name { font-size:var(--fs-xs); font-weight:500; color:var(--text-primary); }
.m-prp-scard__meta { font-size:10px; color:var(--text-secondary); font-family:var(--font-mono); margin-top:1px; }
.m-prp-scard__who { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-prp-scard__time { font-size:10px; color:var(--accent); font-family:var(--font-mono); margin-top:1px; }
.m-prp-scard__badge { flex-shrink:0; }

/* ---- Drawer form fields: reuse the app's m-set-* pattern (recessed bg-base
   inputs on the bg-surface drawer for depth). Only prep-specific additions: ---- */
.m-prp-date { font-family:var(--font-mono); color-scheme:dark; }
.m-prp-field-opt { color:var(--text-tertiary); font-weight:400; text-transform:none; letter-spacing:0; }
.m-prp-field-req { color:var(--error); }

/* ---- Action-sheet danger row (Delete) — additive modifier on shared m-sheet-menu ---- */
.m-sheet-menu__item--danger .m-sheet-menu__icon { background:color-mix(in srgb, var(--error) 14%, transparent); border-color:color-mix(in srgb, var(--error) 30%, transparent); color:var(--error); }
.m-sheet-menu__item--danger .m-sheet-menu__label { color:var(--error); }

/* ---- Session detail: stats strip ---- */
.m-prp-stats { display:grid; grid-template-columns:repeat(4,1fr); }
.m-prp-stats--dim { opacity:0.6; }
.m-prp-stat { text-align:center; padding:10px 4px; }
.m-prp-stat--mid { border-right:1px solid var(--border); }
.m-prp-stat__label { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; }
.m-prp-stat__v { font-size:18px; font-family:var(--font-mono); font-weight:500; margin-top:3px; }
.m-prp-card--session-stats { margin-top:12px; }

/* ---- Session detail: recipe rows + dependency tree ---- */
.m-prp-recipe-row { padding:7px 14px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); cursor:pointer; min-height:36px; }
.m-prp-recipe-row:first-child { border-top:none; }
.m-prp-recipe-row__name { font-size:14px; font-weight:500; }
.m-prp-recipe-row__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-recipe-row__chev { font-size:12px; color:var(--text-tertiary); }
.m-prp-recipe-row--selectable { padding-left:10px; gap:10px; }
.m-prp-recipe-row__toggle { width:16px; height:16px; border-radius:3px; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:9px; color:transparent; transition:all 0.15s; }
.m-prp-recipe-row--selected .m-prp-recipe-row__toggle { background:var(--accent); border-color:var(--accent); color:#fff; }
.m-prp-recipe-row--selected { background:color-mix(in srgb, var(--accent) 6%, transparent); box-shadow:inset 3px 0 0 var(--accent); }
.m-prp-recipe-row--locked { opacity:0.55; cursor:default; gap:10px; padding-left:14px; }
.m-prp-recipe-row--locked .m-prp-recipe-row__chev { display:none; }

/* ---- Floating action bar (draft selection) ---- */
.m-prp-action-bar { position:fixed; bottom:0; left:0; right:0; z-index:100; padding:14px var(--gutter) 24px; background:var(--bg-surface); border-top:1px solid var(--border); display:flex; gap:8px; animation:prp-bar-up 200ms ease; }
.m-prp-action-bar[hidden] { display:none; }
.m-prp-action-bar .btn { flex:1; }
@keyframes prp-bar-up { from { transform:translateY(100%); } to { transform:translateY(0); } }
.m-prp-dep-row { padding:8px 14px; background:var(--bg-base); border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.m-prp-dep-row__tree { color:var(--text-tertiary); font-size:10px; font-family:var(--font-mono); }
.m-prp-dep-row__rail { width:3px; height:20px; background:var(--info); border-radius:2px; opacity:0.5; flex-shrink:0; }
.m-prp-dep-row__rail--deep { opacity:0.3; }
.m-prp-dep-row__name { font-size:12px; flex:1; min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.m-prp-dep-row__qty { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-prp-dep-row--d0 { padding-left:28px; }
.m-prp-dep-row--d1 { padding-left:48px; }
.m-prp-dep-row--d2 { padding-left:68px; }
.m-prp-dep-row--d3 { padding-left:88px; }
.m-prp-dep-row--d4 { padding-left:108px; }
.m-prp-dep-row--d5 { padding-left:128px; }
/* De-emphasise sub-recipes under a fully-in-stock parent — shown for completeness
   (the make-list visual aid) but won't actually be made in that branch. */
.m-prp-dep-row--muted { opacity:0.45; }
.m-prp-info-note { margin:0 12px 8px; padding:8px 12px; background:color-mix(in srgb, var(--info) 6%, transparent); border:1px solid color-mix(in srgb, var(--info) 12%, transparent); border-radius:8px; font-size:10px; color:var(--info); font-family:var(--font-mono); line-height:1.5; }

/* ---- Session detail: ingredient snapshot + action rows ---- */
.m-prp-snapshot { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.m-prp-snapshot__title { font-size:12px; color:var(--text-secondary); font-weight:500; }
.m-prp-snapshot__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-snapshot__right { display:flex; align-items:center; gap:6px; }
.m-prp-action-av { padding:12px 14px; display:flex; align-items:center; gap:10px; border-top:1px solid var(--border); cursor:pointer; }
.m-prp-action-av:first-child { border-top:none; }
.m-prp-action-av__icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.m-prp-action-av__icon--info { background:color-mix(in srgb, var(--info) 12%, transparent); border:1px solid color-mix(in srgb, var(--info) 25%, transparent); color:var(--info); }
.m-prp-action-av__icon--accent { background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent); color:var(--accent); }
.m-prp-action-av__icon--error { background:color-mix(in srgb, var(--error) 12%, transparent); border:1px solid color-mix(in srgb, var(--error) 25%, transparent); color:var(--error); }
.m-prp-action-av--danger .m-prp-action-av__title { color:var(--error); }
.m-prp-action-av__body { flex:1; min-width:0; }
.m-prp-action-av__title { font-size:13px; font-weight:500; }
.m-prp-action-av__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-prp-action-av__chev { font-size:12px; color:var(--text-tertiary); }

/* ---- Session detail: empty CTA ---- */
.m-prp-empty-cta { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; text-align:center; }
.m-prp-empty-cta__plus { font-size:36px; margin-bottom:18px; opacity:0.25; }
.m-prp-empty-cta__hint { margin:14px auto 0; padding:0 24px; max-width:320px; text-align:center; font-size:10px; line-height:1.5; color:var(--text-tertiary); font-family:var(--font-mono); }

/* ---- Delete confirm / blocked content ---- */
.m-prp-warn-wash { padding:10px 12px; background:color-mix(in srgb, var(--warning) 6%, transparent); border:1px solid color-mix(in srgb, var(--warning) 12%, transparent); border-radius:8px; font-size:11px; color:var(--text-secondary); line-height:1.5; }
.m-prp-block-wash { padding:12px 14px; background:color-mix(in srgb, var(--error) 6%, transparent); border:1px solid color-mix(in srgb, var(--error) 18%, transparent); border-radius:8px; display:flex; gap:10px; align-items:flex-start; }
.m-prp-block-wash__icon { width:28px; height:28px; border-radius:7px; background:color-mix(in srgb, var(--error) 18%, transparent); display:flex; align-items:center; justify-content:center; color:var(--error); font-size:14px; flex-shrink:0; }
.m-prp-block-wash__title { font-size:13px; font-weight:500; color:var(--error); margin-bottom:6px; }
.m-prp-block-wash__body { font-size:11px; color:var(--text-secondary); line-height:1.55; }
.m-prp-run-link { padding:12px 14px; background:color-mix(in srgb, var(--accent) 5%, transparent); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius:8px; display:flex; align-items:center; gap:10px; cursor:pointer; }
.m-prp-run-link__dot { width:8px; height:8px; border-radius:4px; background:var(--accent); flex-shrink:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.m-prp-run-link__title { font-size:12px; font-weight:500; color:var(--accent); }
.m-prp-run-link__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-run-link__cta { font-size:11px; color:var(--accent); font-family:var(--font-mono); }

/* ---- Locked state (active run) ---- */
.m-prp-locked-banner { padding:12px 14px; background:color-mix(in srgb, var(--accent) 6%, transparent); border-bottom:1px solid color-mix(in srgb, var(--accent) 15%, transparent); display:flex; align-items:center; gap:10px; }
.m-prp-locked-banner__icon { width:28px; height:28px; border-radius:7px; background:color-mix(in srgb, var(--accent) 18%, transparent); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:14px; }
.m-prp-locked-banner__title { font-size:13px; font-weight:500; color:var(--accent); }
.m-prp-locked-banner__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-locked-row { padding:10px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.m-prp-locked-row:first-child { border-top:none; }
.m-prp-locked-row--pending { opacity:0.55; }
.m-prp-locked-row__dot { width:8px; height:8px; border-radius:4px; flex-shrink:0; }
.m-prp-locked-row__dot--done { background:var(--success); }
.m-prp-locked-row__dot--current { background:var(--accent); }
.m-prp-locked-row__dot--pending { background:var(--text-tertiary); }
.m-prp-locked-row__name { font-size:13px; font-weight:500; }
.m-prp-locked-row__v { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-locked-row__run { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); margin-left:auto; flex-shrink:0; }

/* ---- Monitoring dashboard (multi-run) ---- */
.m-prp-run-card { margin:0 var(--gutter) 8px; padding:14px 14px 10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; }
.m-prp-run-card__header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.m-prp-run-card__dot { width:8px; height:8px; border-radius:4px; background:var(--accent); flex-shrink:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.m-prp-run-card__title { font-size:12px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-prp-run-card__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); flex-shrink:0; }
.m-prp-run-card__checklist { margin-bottom:10px; }
.m-prp-run-check { display:flex; align-items:center; gap:8px; padding:4px 0; }
.m-prp-run-check--child { padding-left:20px; }
.m-prp-run-check__icon { width:16px; text-align:center; font-size:11px; flex-shrink:0; }
.m-prp-run-check--pending .m-prp-run-check__icon,
.m-prp-run-check--collecting .m-prp-run-check__icon { color:var(--text-tertiary); }
.m-prp-run-check--executing .m-prp-run-check__icon,
.m-prp-run-check--submitted .m-prp-run-check__icon { color:var(--accent); }
.m-prp-run-check--approved .m-prp-run-check__icon { color:var(--success); }
.m-prp-run-check__name { font-size:12px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-prp-run-check__status { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); flex-shrink:0; }
.m-prp-run-card__actions { display:flex; justify-content:flex-end; gap:12px; padding-top:6px; border-top:1px solid var(--border); }
.m-prp-run-card__action { background:none; border:none; font-size:11px; font-family:var(--font-mono); color:var(--accent); cursor:pointer; padding:4px 0; }
.m-prp-run-card__action:hover { text-decoration:underline; }

/* ---- Run history share status ---- */
.m-prp-hist-row__token { font-size:9px; font-family:var(--font-mono); padding:1px 5px; border-radius:3px; margin-left:6px; }
.m-prp-hist-row__token--live { background:color-mix(in srgb, var(--success) 12%, transparent); color:var(--success); }
.m-prp-hist-row__token--expired { background:color-mix(in srgb, var(--error) 10%, transparent); color:var(--error); }
.m-prp-hist-row__reshare { background:none; border:none; font-size:10px; font-family:var(--font-mono); color:var(--accent); cursor:pointer; padding:6px 10px; flex-shrink:0; }
.m-prp-hist-row__reshare:hover { text-decoration:underline; }

/* ---- Completed state (read-only) ---- */
.m-prp-approved-banner { margin:12px 12px 8px; padding:14px 16px 16px; background:color-mix(in srgb, var(--success) 6%, transparent); border:1px solid color-mix(in srgb, var(--success) 18%, transparent); border-radius:10px; }
.m-prp-approved-banner__kicker { display:flex; align-items:center; gap:8px; font-size:10px; font-family:var(--font-mono); color:var(--success); font-weight:600; letter-spacing:0.8px; text-transform:uppercase; }
.m-prp-approved-banner__kicker-dot { width:6px; height:6px; border-radius:3px; background:var(--success); }
.m-prp-approved-banner__sub { font-size:13px; color:var(--text-primary); margin-top:8px; }
.m-prp-run-list-row { padding:12px 14px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); cursor:pointer; }
.m-prp-run-list-row:first-child { border-top:none; }
.m-prp-run-list-row__title { font-size:13px; font-weight:500; }
.m-prp-run-list-row__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-notes-card { margin:0 12px 6px; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:10px 14px; }
.m-prp-notes-card__label { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.m-prp-notes-card__body { font-size:11px; color:var(--text-secondary); font-style:italic; line-height:1.4; }

/* ============================================================
   Prep — Mobile 01b: Add-recipe drawer + 4 calculator modes
   Genuinely-new content atoms (no app equivalent): search-suggest rows,
   recipe-match header, dependency preview, calculator tabs/inputs/strip,
   ingredient rows, max-stock rows. Search field reuses .lc-search; chrome
   is the shared m-sl-drawer. m-prp-bleed = full-bleed within the drawer's
   16px gutter so list rows span edge-to-edge.
   ============================================================ */
.m-prp-bleed { margin-left:-16px; margin-right:-16px; }
.m-prp-drawer-err { padding:12px 14px; font-size:12px; color:var(--error); }

/* ---- Search-suggest rows (results list) ---- */
.m-prp-suggest-row { padding:11px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.m-prp-suggest-row:first-child { border-top:none; }
.m-prp-suggest-row__body { flex:1; min-width:0; }
.m-prp-suggest-row__name { font-size:13px; font-weight:500; }
.m-prp-suggest-row__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-suggest-row__add { font-size:14px; color:var(--accent); font-weight:500; }

/* ---- Recipe-match header + dependency preview ---- */
.m-prp-recipe-match { padding:12px 14px; background:color-mix(in srgb, var(--accent) 5%, transparent); border-bottom:1px solid var(--border); }
.m-prp-recipe-match__name { font-size:13px; font-weight:500; }
.m-prp-recipe-match__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-dep-preview { padding:14px; background:color-mix(in srgb, var(--info) 6%, transparent); border-bottom:1px solid color-mix(in srgb, var(--info) 12%, transparent); }
.m-prp-dep-preview__title { font-size:11px; color:var(--info); font-weight:500; margin-bottom:8px; }
.m-prp-dep-preview__row { display:flex; align-items:center; gap:8px; font-size:11px; font-family:var(--font-mono); padding:3px 0; }
.m-prp-dep-preview__tree { color:var(--text-tertiary); }
.m-prp-dep-preview__name { color:var(--text-secondary); }
.m-prp-dep-preview__note { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:10px; line-height:1.5; }

/* ---- Calculator: tabs · fields · strip ---- */
.m-prp-calc-tabs { display:flex; gap:6px; padding:12px 0 6px; }
.m-prp-calc-tab { flex:1; padding:8px 4px; border-radius:6px; font-size:10px; font-family:var(--font-mono); text-align:center; background:var(--bg-elevated); border:1px solid var(--border-strong); color:var(--text-tertiary); line-height:1.3; white-space:pre-line; cursor:pointer; }
.m-prp-calc-tab--active { background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:var(--accent); color:var(--accent); font-weight:500; }
.m-prp-calc-field { padding:12px 0; }
.m-prp-calc-field__label { font-size:11px; color:var(--text-secondary); font-weight:500; margin-bottom:6px; }
.m-prp-calc-field__row { display:flex; gap:8px; }
.m-prp-calc-amount { flex:1; padding:10px 12px; background:var(--bg-base); border:1.5px solid var(--accent); border-radius:6px; font-size:18px; font-family:var(--font-mono); font-weight:500; text-align:center; color:var(--text-primary); }
.m-prp-calc-unit { width:70px; padding:10px 12px; background:var(--bg-base); border:1.5px solid var(--border-strong); border-radius:6px; font-size:14px; font-family:var(--font-mono); text-align:center; color:var(--text-secondary); }
.m-prp-calc-hint { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:6px; text-align:center; }
.m-prp-calc-picker { padding:10px 12px; background:var(--bg-base); border:1.5px solid var(--accent); border-radius:6px; font-size:13px; color:var(--text-primary); width:100%; font-family:var(--font-body); color-scheme:dark; margin-bottom:10px; }
.m-prp-calc-picker__hint { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-prp-calc-strip { display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-elevated); }
.m-prp-calc-stat { text-align:center; padding:8px 0; }
.m-prp-calc-stat--mid { border-left:1px solid var(--border); border-right:1px solid var(--border); }
.m-prp-calc-stat__label { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; }
.m-prp-calc-stat__v { font-size:15px; font-family:var(--font-mono); font-weight:500; margin-top:3px; }

/* ---- Ingredient preview rows ---- */
.m-prp-ing-row { padding:9px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.m-prp-ing-row:first-child { border-top:none; }
.m-prp-ing-row__body { flex:1; min-width:0; }
.m-prp-ing-row__name { font-size:12px; font-weight:500; display:flex; align-items:center; gap:6px; }
.m-prp-ing-row__sub { font-size:10px; font-family:var(--font-mono); margin-top:1px; color:var(--text-tertiary); }
.m-prp-ing-row__sub--ok { color:var(--success); }
.m-prp-ing-row__sub--warn { color:var(--warning); }
.m-prp-ing-row__sub--err { color:var(--error); }
.m-prp-ing-row__sub--info { color:var(--info); }
.m-prp-ing-row__qty { font-size:12px; font-family:var(--font-mono); font-weight:500; }

/* ---- Max-stock ingredient rows (informational) ---- */
.m-prp-max-row { padding:10px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.m-prp-max-row:first-child { border-top:none; }
.m-prp-max-row--selected { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.m-prp-max-row__name { font-size:12px; font-weight:500; display:flex; gap:6px; align-items:center; flex:1; min-width:0; }
.m-prp-max-row__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-max-row__mark { font-size:12px; color:var(--text-tertiary); }
.m-prp-max-row--selected .m-prp-max-row__mark { color:var(--accent); }

/* ============================================================
   Prep — Mobile 01c: Aggregation · Recipe-select · Share · Export drawers
   Carried genuinely-new atoms. Category bands/dots reuse the shared
   lg_band_head/lg_cat_head markup (lg-band__*, lg-cat__dot[data-cat-colour]) —
   NOT m-prp-catdot/cat-header. PREP-A: aggregation has no category_type/colour,
   so dots are grey (data-cat-colour="") and there is no food/drink/other chip.
   ============================================================ */

/* ---- Aggregation (shopping list) ---- */
.m-prp-agg-warn { padding:10px 14px; background:color-mix(in srgb, var(--warning) 6%, transparent); border-bottom:1px solid color-mix(in srgb, var(--warning) 12%, transparent); font-size:11px; color:var(--warning); font-weight:500; }
/* Rows reuse the shared lc-item-row list primitive (one place to style — matches
   catalogue/invoices). prep-agg grid = name | right-aligned count(+volume).
   is-short red-stripes a shortfall row; rows are not tappable here. */
.lc-grid--prep-agg { grid-template-columns:minmax(0,1fr) auto; cursor:default; }
.lc-grid--prep-agg.is-short { border-left-color:var(--error); }
.m-prp-agg-empty { padding:14px 16px; font-size:12px; color:var(--text-tertiary); text-align:center; }
/* Shopping-list drawer — scoped re-skin of the shared list primitives (reuse the
   classes, re-skin via descendants in this context; never fork — DESIGN-LESSON #47).
   Darker well so the product rows lift; category hugs its subcategory (more space
   above, tight below); slightly smaller amount figures. Catalogue is untouched. */
#prp-agg-body { background:var(--bg-base); }
#prp-agg-body .lc-item-row { background:var(--bg-surface); border-bottom:none; margin-bottom:3px; }
#prp-agg-body .lg-cat__head { padding-top:9px; padding-bottom:2px; }
#prp-agg-body .lg-sub { padding-top:1px; padding-bottom:3px; }
#prp-agg-body .lc-item-num__primary { font-size:11.5px; }
#prp-agg-body .lc-item-num__muted { font-size:10.5px; }

/* ---- Recipe-select (start run) ---- */
.m-prp-select-banner { padding:12px 16px; background:color-mix(in srgb, var(--accent) 6%, transparent); border-bottom:1px solid color-mix(in srgb, var(--accent) 15%, transparent); font-size:12px; color:var(--text-secondary); line-height:1.5; }

/* ---- Share modal · PIN cells ---- */
.m-prp-share { background:var(--bg-surface); border-radius:14px; padding:18px 16px 14px; border:1px solid var(--border); }
.m-prp-share__title { font-size:15px; font-family:var(--font-heading); font-weight:500; text-align:center; }
.m-prp-share__expiry { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); text-align:center; margin-top:3px; }
.m-prp-share__card { padding:14px; background:var(--bg-base); border:1px solid var(--border); border-radius:10px; margin-top:14px; }
.m-prp-share__link { padding:8px 10px; background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:5px; font-size:11px; font-family:var(--font-mono); color:var(--info); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-prp-share__pin { font-size:22px; font-family:var(--font-mono); font-weight:500; letter-spacing:6px; margin-top:2px; }
.m-prp-share__btn { padding:7px 12px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:5px; font-size:11px; color:var(--text-secondary); cursor:pointer; font-family:var(--font-body); }
.m-prp-pin-cell { width:48px; height:56px; background:var(--bg-surface); border:1.5px solid var(--border-strong); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:24px; font-family:var(--font-mono); font-weight:500; color:var(--text-tertiary); }
.m-prp-pin-cell--on { border-color:var(--accent); color:var(--accent); }
.m-prp-pin-row { display:flex; gap:8px; justify-content:center; margin-top:10px; }
.m-prp-share__btnrow { display:flex; gap:8px; margin-top:10px; }

/* ---- Export spec ---- */
.m-prp-spec-bullet { padding:10px 14px; border-top:1px solid var(--border); display:flex; align-items:flex-start; gap:10px; }
.m-prp-spec-bullet:first-child { border-top:none; }
.m-prp-spec-bullet__tick { font-size:12px; color:var(--success); margin-top:1px; }
.m-prp-spec-bullet__text { font-size:12px; font-weight:500; }
.m-prp-spec-bullet__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-spec-recipe { padding:13px 16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:12px; min-height:48px; }
.m-prp-spec-recipe:first-child { border-top:none; }
.m-prp-spec-recipe--indent { padding-left:42px; background:var(--bg-base); }
.m-prp-spec-recipe__tree { color:var(--text-tertiary); font-size:10px; font-family:var(--font-mono); }
.m-prp-spec-recipe__name { font-size:13px; font-weight:500; }
.m-prp-spec-recipe--indent .m-prp-spec-recipe__name { font-weight:400; color:var(--text-secondary); }
.m-prp-spec-recipe__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }

/* ============================================================
   Prep 02a — Collection phase (mobile)
   SHARED-CATALOGUE-GROUPING STANDARD: the ingredient list is the shared
   lg-band / lg-cat / lg-sub + lc-item-row pattern, re-skinned in context via
   #prp-collection-list descendant selectors (DESIGN-LESSON #47 — reuse the
   class, restyle by container; never fork a row family). Genuinely-new atoms
   here are only the non-list pieces: progress bar, confirm checkbox, shortfall
   entry, and the complete-sheet body. Appended AFTER the prep-01 + aggregation
   blocks (CSS paste order 01 -> 02).
   ============================================================ */

/* ---- Collection progress bar ---- */
.m-prp-cprogress { padding:8px 14px 6px; }
.m-prp-cprogress__track { height:5px; background:var(--bg-elevated); border-radius:3px; overflow:hidden; }
.m-prp-cprogress__fill { width:0; height:100%; background:var(--success); border-radius:3px; transition:width 200ms ease; }
.m-prp-cprogress__label { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }

/* ---- Inline tag tones (additive to the shared lc-tag family — stock / low) ---- */
.lc-tag--success { background:color-mix(in srgb, var(--success) 14%, transparent); color:var(--success); border:1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.lc-tag--error { background:color-mix(in srgb, var(--error) 12%, transparent); color:var(--error); border:1px solid color-mix(in srgb, var(--error) 30%, transparent); }

/* ---- Confirm checkbox (rounded square, tap = confirm full qty) — JSX PChk ---- */
.m-prp-chk { width:22px; height:22px; border-radius:5px; border:2px solid var(--text-tertiary); background:transparent; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; color:transparent; cursor:pointer; flex-shrink:0; transition:background 150ms ease, border-color 150ms ease; }
.m-prp-chk--on { background:var(--success); border-color:var(--success); color:#fff; }

/* ---- Collection list: shared grouping re-skinned in context ---- */
.lc-grid--prep-collection { grid-template-columns:minmax(0,1fr) auto 22px; column-gap:10px; align-items:center; cursor:pointer; min-height:44px; }
#prp-collection-list { background:var(--bg-base); }
#prp-collection-list .lc-item-row { background:var(--bg-surface); border-bottom:1px solid var(--border); border-left:3px solid transparent; border-radius:0; margin:0; padding:8px 14px; }
#prp-collection-list .lc-item-row.is-low { background:color-mix(in srgb, var(--error) 4%, transparent); border-left-color:var(--error); }
#prp-collection-list .lc-item-row.is-confirmed { opacity:0.6; cursor:default; }
#prp-collection-list .lc-item-row.is-confirmed .lc-item-name__text { text-decoration:line-through; color:var(--text-secondary); }
#prp-collection-list .lc-item-num { display:flex; align-items:baseline; justify-content:flex-end; gap:5px; }
#prp-collection-list .lc-item-num__primary { font-size:13px; }
#prp-collection-list .lc-item-row.is-low .lc-item-num__primary { color:var(--error); }
#prp-collection-list .lc-item-num__unit { font-size:10px; }

/* ---- Collection shortfall entry (inline expansion under a tapped row) ---- */
.m-prp-shortfall { padding:12px 14px; background:color-mix(in srgb, var(--error) 4%, transparent); border-left:3px solid var(--error); border-bottom:1px solid var(--border); }
.m-prp-shortfall__head { display:flex; align-items:center; gap:6px; }
.m-prp-shortfall__name { font-size:13px; font-weight:500; }
.m-prp-shortfall__need { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-shortfall__row { display:flex; align-items:center; gap:10px; margin-top:8px; }
.m-prp-shortfall__lbl { font-size:11px; color:var(--text-secondary); }
.m-prp-shortfall__input { padding:5px 10px; background:var(--bg-base); border:1.5px solid var(--error); border-radius:5px; font-size:15px; font-family:var(--font-mono); font-weight:500; color:var(--error); width:64px; text-align:center; }
.m-prp-shortfall__of { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-prp-shortfall__actions { display:flex; gap:8px; margin-top:10px; }
.m-prp-shortfall__msg { font-size:10px; color:var(--error); font-family:var(--font-mono); margin-top:6px; min-height:12px; }

/* ---- Collection complete sheet body (m-sl-drawer JSON-render) ---- */
.m-prp-ccomplete { padding:20px 16px; text-align:center; }
.m-prp-ccomplete__check { width:40px; height:40px; border-radius:10px; background:color-mix(in srgb, var(--success) 15%, transparent); border:1px solid color-mix(in srgb, var(--success) 30%, transparent); display:inline-flex; align-items:center; justify-content:center; font-size:18px; color:var(--success); margin-bottom:12px; }
.m-prp-ccomplete__title { font-size:15px; font-family:var(--font-heading); font-weight:500; margin-bottom:4px; }
.m-prp-ccomplete__sub { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-prp-ccomplete__sub--ok { color:var(--success); }
.m-prp-affected { margin:0 12px 12px; padding:12px; background:color-mix(in srgb, var(--warning) 6%, transparent); border:1px solid color-mix(in srgb, var(--warning) 12%, transparent); border-radius:8px; }
.m-prp-affected__label { font-size:9px; color:var(--warning); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:8px; }
.m-prp-affected__row { display:flex; justify-content:space-between; font-size:11px; padding:4px 0; border-bottom:1px solid var(--border); }
.m-prp-affected__row:last-of-type { border-bottom:none; }
.m-prp-affected__name { color:var(--text-secondary); }
.m-prp-affected__note { color:var(--warning); font-family:var(--font-mono); }
.m-prp-affected__foot { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:8px; }
.m-prp-clean-note { margin:8px 12px; padding:10px 12px; background:color-mix(in srgb, var(--success) 4%, transparent); border:1px solid color-mix(in srgb, var(--success) 12%, transparent); border-radius:8px; font-size:10px; color:var(--success); font-family:var(--font-mono); line-height:1.5; }
/* Deepen the scrim behind the collection-complete drawer so the sheet pops
   (scoped — id beats the shared .m-sl-drawer__scrim, never restyle it globally). */
#prp-collection-complete .m-sl-drawer__scrim { background:rgba(0,0,0,0.72); }

/* ============================================================
   Prep 02b — Run plan · in-progress · cascade (mobile)
   Genuinely-new run-state atoms (none existed before this prompt — the 01
   realignment never built them). Base m-prp-navbar* values carried verbatim
   from the monolithic 01-sessions-add-recipe.md (the run-progress strip is the
   one legitimate prep m-prp-navbar — it replaces the shared bottom nav on full
   run views). The rest carried verbatim from the superseded 02-collection-run-
   states.md Visual Spec. NOT carried (per the 02b prompt): m-prp-btn--link
   (use <a class="btn btn-primary">), m-prp-card, m-prp-badge, m-prp-catdot.
   The plan view's "Ingredients needed" list reuses the shared lg-band/lg-cat/
   lg-sub + lc-item-row (lc-grid--prep-agg) grouping — never a bespoke list.
   ============================================================ */

/* ---- Run-progress strip (collapsed recipe-progress + expanded list) ---- */
.m-prp-navbar { height:44px; flex-shrink:0; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 14px; }
.m-prp-navbar--expanded { border-bottom:none; }
.m-prp-navbar__recipe { font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-prp-navbar__recipe-dot { width:8px; height:8px; border-radius:4px; background:var(--accent); display:inline-block; flex-shrink:0; }
.m-prp-navbar__right { display:flex; align-items:center; gap:8px; }
.m-prp-navbar__dots { display:flex; gap:4px; align-items:center; }
.m-prp-navbar__dot { width:8px; height:8px; border-radius:4px; display:inline-block; }
.m-prp-navbar__dot--ok { background:var(--success); }
.m-prp-navbar__dot--active { background:transparent; border:1.5px solid var(--accent); }
.m-prp-navbar__dot--pending { background:transparent; border:1px solid var(--border-strong); }
.m-prp-navbar__gap { width:6px; display:inline-block; }
.m-prp-navbar__count { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-prp-navbar__caret { font-size:10px; color:var(--text-tertiary); }
.m-prp-navbar-list { background:var(--bg-surface); border-bottom:1px solid var(--border); padding:6px 10px 10px; }
.m-prp-navbar-list__row { padding:8px 10px; display:flex; align-items:center; gap:8px; font-size:12px; border-radius:8px; margin-bottom:2px; }
.m-prp-navbar-list__row, .m-prp-navbar-list__row:hover { color:inherit; text-decoration:none; }
.m-prp-navbar-list__row--done { background:color-mix(in srgb, var(--success) 8%, transparent); }
.m-prp-navbar-list__row--done .m-prp-navbar-list__yield { color:var(--success); }
.m-prp-navbar-list__row--current { background:color-mix(in srgb, var(--accent) 10%, transparent); font-weight:600; }
.m-prp-navbar-list__row--pending { background:var(--bg-base); }
.m-prp-navbar-list__dot { width:6px; height:6px; border-radius:3px; display:inline-block; }
.m-prp-navbar-list__yield { margin-left:auto; font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-prp-navbar-list__overview { background:var(--bg-base); font-weight:500; color:var(--accent); border-bottom:1px solid var(--border); margin-bottom:4px; padding-bottom:10px; }

/* ---- Phase bar (collection-phase strip: dot + label + hollow pips) ---- */
.m-prp-phasebar { flex-shrink:0; height:44px; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 14px; cursor:pointer; }
.m-prp-phasebar__lead { display:flex; align-items:center; gap:8px; }
.m-prp-phasebar__dot { width:8px; height:8px; border-radius:4px; background:var(--text-tertiary); display:inline-block; }
.m-prp-phasebar__label { font-size:13px; font-weight:500; color:var(--text-secondary); }
.m-prp-phasebar__dots { display:flex; gap:4px; align-items:center; }
.m-prp-phasebar__pip { width:8px; height:8px; border-radius:4px; background:transparent; border:1px solid var(--border-strong); display:inline-block; }
.m-prp-phasebar__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); }

/* ============== RUN PLAN ============== */
.m-prp-hier-hero { padding:11px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--border); cursor:pointer; }
.m-prp-hier-hero:first-child { border-top:none; }
.m-prp-hier-hero__id { min-width:0; display:flex; align-items:baseline; gap:8px; flex:1; }
.m-prp-hier-hero__name { font-size:15px; font-weight:500; font-family:var(--font-heading); }
.m-prp-hier-hero__meta { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); white-space:nowrap; }
.m-prp-hier-hero__chev { font-size:12px; color:var(--text-tertiary); }
.m-prp-hier-hero__right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.m-prp-hier-hero__open { font-size:11px; color:var(--accent); font-family:var(--font-mono); white-space:nowrap; }
a.m-prp-hier-hero, a.m-prp-hier-hero:hover { color:inherit; text-decoration:none; }
.m-prp-hier-dep { background:var(--bg-base); border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; padding:6px 14px; }
.m-prp-hier-dep--d0 { padding-left:14px; }
.m-prp-hier-dep--d1 { padding-left:28px; }
.m-prp-hier-dep--d2 { padding-left:42px; }
.m-prp-hier-dep--d3 { padding-left:56px; }
.m-prp-hier-dep--d4 { padding-left:70px; }
.m-prp-hier-dep--d5 { padding-left:84px; }
.m-prp-hier-dep__tree { color:var(--text-tertiary); font-size:10px; font-family:var(--font-mono); }
.m-prp-hier-dep__rail { width:2px; height:14px; background:var(--info); border-radius:1px; opacity:0.6; flex-shrink:0; }
.m-prp-hier-dep__rail--deep { opacity:0.4; }
.m-prp-hier-dep__name { font-size:11px; font-weight:500; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-prp-hier-dep__tag { font-size:9px; padding:1px 4px; background:color-mix(in srgb, var(--info) 12%, transparent); border:1px solid color-mix(in srgb, var(--info) 25%, transparent); border-radius:3px; color:var(--info); font-family:var(--font-mono); font-weight:500; flex-shrink:0; }
.m-prp-hier-dep__spacer { flex:1; }
.m-prp-hier-dep__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); white-space:nowrap; }
.m-prp-out-row { padding:10px 14px; display:flex; justify-content:space-between; border-bottom:1px solid var(--border); }
.m-prp-out-row:last-child { border-bottom:none; }
.m-prp-out-row__name { font-size:12px; }
.m-prp-out-row__qty { font-size:12px; font-family:var(--font-mono); }
.m-prp-expandable { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.m-prp-expandable__title { font-size:12px; color:var(--text-secondary); font-weight:500; }
.m-prp-expandable__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-expandable__caret { font-size:12px; color:var(--text-tertiary); transition:transform 150ms ease; }
.m-prp-expandable__caret--open { transform:rotate(90deg); }

/* ============== RUN IN-PROGRESS ============== */
.m-prp-segbar { padding:12px 14px 6px; }
.m-prp-segbar__track { display:flex; gap:3px; }
.m-prp-segbar__seg { flex:1; height:6px; background:var(--bg-elevated); }
.m-prp-segbar__seg--submitted { background:var(--success); }
.m-prp-segbar__seg--executing { background:color-mix(in srgb, var(--accent) 35%, transparent); }
.m-prp-segbar__seg:first-child { border-radius:3px 0 0 3px; }
.m-prp-segbar__seg:last-child { border-radius:0 3px 3px 0; }
.m-prp-segbar__label { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:4px; }
.m-prp-runrow { padding:10px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); border-left:3px solid transparent; }
.m-prp-runrow:last-child { border-bottom:none; }
.m-prp-runrow--done { background:color-mix(in srgb, var(--success) 15%, transparent); border-left-color:var(--success); cursor:pointer; text-decoration:none; color:inherit; }
.m-prp-runrow--current { padding:12px 14px; background:color-mix(in srgb, var(--accent) 6%, transparent); border-left-color:var(--accent); cursor:pointer; text-decoration:none; color:inherit; }
.m-prp-runrow__dot { width:8px; height:8px; border-radius:4px; flex-shrink:0; }
.m-prp-runrow__dot--done { background:var(--success); }
.m-prp-runrow__dot--current { background:var(--accent); }
.m-prp-runrow__dot--pending { background:var(--bg-elevated); border:1px solid var(--border-strong); }
.m-prp-runrow__body { flex:1; min-width:0; }
.m-prp-runrow__name { flex:1; font-size:12px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-prp-runrow--current .m-prp-runrow__name { font-size:13px; font-weight:500; white-space:normal; }
.m-prp-runrow__shared { font-size:9px; color:var(--info); font-family:var(--font-mono); margin-left:6px; }
.m-prp-runrow__scale { display:inline-block; margin-left:6px; font-size:9px; padding:2px 6px; background:color-mix(in srgb, var(--warning) 12%, transparent); border:1px solid color-mix(in srgb, var(--warning) 25%, transparent); border-radius:3px; color:var(--warning); font-family:var(--font-mono); font-weight:500; }
.m-prp-runrow__yield { font-size:11px; font-family:var(--font-mono); white-space:nowrap; color:var(--text-tertiary); }
.m-prp-runrow--done .m-prp-runrow__yield { color:var(--success); }
.m-prp-runrow__sub { font-size:10px; color:var(--accent); font-family:var(--font-mono); margin-top:1px; }
.m-prp-runrow__sub--done { color:var(--success); }
.m-prp-runrow__open--done { color:var(--success); }
.m-prp-runrow__open { font-size:12px; color:var(--accent); font-family:var(--font-mono); }
.m-prp-runrow__parent { font-size:10px; color:var(--text-tertiary); margin-top:1px; }
.m-prp-runrow--dep.m-prp-runrow--current { background:transparent; border-left-color:var(--border-strong); }
.m-prp-runrow--dep.m-prp-runrow--current .m-prp-runrow__dot--current { background:var(--text-tertiary); }
.m-prp-runrow--dep.m-prp-runrow--current .m-prp-runrow__open { color:var(--text-secondary); }
/* Shared sub-recipe dependency rows (PREP-CASCADE 03, gap b) reuse m-prp-runrow.
   --orphan flags a sub-recipe whose consumers are all cancelled (all_consumers_cancelled). */
.m-prp-runrow--orphan { border-left-color:var(--warning); background:color-mix(in srgb, var(--warning) 5%, transparent); }
.m-prp-runrow--orphan .m-prp-runrow__sub { color:var(--warning); }

/* ============== CASCADE NOTIFICATION (toast · overview · badges) ============== */
.m-prp-cascade-toast { position:fixed; top:60px; left:12px; right:12px; z-index:1000; padding:12px 14px; background:color-mix(in srgb, var(--warning) 95%, transparent); border:1px solid var(--warning); border-radius:10px; display:flex; align-items:flex-start; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,0.45); max-width:420px; margin:0 auto; }
.m-prp-cascade-toast__icon { width:24px; height:24px; border-radius:6px; background:rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--bg-base); flex-shrink:0; font-weight:600; }
.m-prp-cascade-toast__body { flex:1; min-width:0; }
.m-prp-cascade-toast__head { font-size:12px; font-weight:600; color:var(--bg-base); }
.m-prp-cascade-toast__sub { font-size:11px; color:rgba(0,0,0,0.6); margin-top:2px; line-height:1.4; }
.m-prp-cascade-toast__x { font-size:12px; color:rgba(0,0,0,0.4); cursor:pointer; flex-shrink:0; }
.m-prp-ovrow { padding:11px 14px; border-top:1px solid var(--border); border-left:3px solid transparent; display:flex; align-items:center; gap:10px; }
.m-prp-ovrow:first-child { border-top:none; }
.m-prp-ovrow--done { opacity:0.55; }
.m-prp-ovrow--current { border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent); }
.m-prp-ovrow__dot { width:8px; height:8px; border-radius:4px; flex-shrink:0; }
.m-prp-ovrow__dot--done { background:var(--success); }
.m-prp-ovrow__dot--current { background:var(--accent); }
.m-prp-ovrow__dot--pending { background:var(--bg-elevated); border:1px solid var(--border-strong); }
.m-prp-ovrow__body { flex:1; min-width:0; }
.m-prp-ovrow__name { font-size:12px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.m-prp-ovrow--current .m-prp-ovrow__name { font-size:13px; font-weight:500; }
.m-prp-ovrow__factor { font-size:10px; font-family:var(--font-mono); margin-top:2px; color:var(--text-tertiary); }
.m-prp-ovrow__factor--scaled { color:var(--warning); }
.m-prp-ovrow__factor--current { color:var(--accent); }
.m-prp-ovrow__qty { font-size:11px; font-family:var(--font-mono); color:var(--text-tertiary); }
.m-prp-ovrow__qty--done { color:var(--success); }
.m-prp-ovrow__qty--current { color:var(--accent); }
.m-prp-ovrow__qty--scaled { color:var(--warning); }
.m-prp-scale-badge { font-size:9px; padding:1px 5px; background:color-mix(in srgb, var(--warning) 12%, transparent); border:1px solid color-mix(in srgb, var(--warning) 25%, transparent); border-radius:3px; color:var(--warning); font-family:var(--font-mono); font-weight:500; }

/* ---- Ingredients-needed list: shared catalogue grouping re-skinned in context
   (reuse lc-item-row + lc-grid--prep-agg; never fork — DESIGN-LESSON #47). ---- */
#prp-ingredients-list { background:var(--bg-base); }
#prp-ingredients-list .lc-item-row { background:var(--bg-surface); border-bottom:none; margin-bottom:3px; }
#prp-ingredients-list .lg-cat__head { padding-top:9px; padding-bottom:2px; }
#prp-ingredients-list .lg-sub { padding-top:1px; padding-bottom:3px; }
#prp-ingredients-list .lc-item-num__primary { font-size:11.5px; }
#prp-ingredients-list .lc-item-num__muted { font-size:10.5px; }

/* ============================================================
   Prep 03 — Methodology: equipment · cascade banner (C3) · ingredients ·
   inline edit · steps · yield entry · auto-complete · photo overlay.
   m-prp-* namespace, additive. REUSES shared atoms (.m-card, .badge, .btn,
   .m-section-label + __right--accent) and prior prep atoms (.m-prp-chk,
   .m-prp-cascade-toast C1 from 02b) — those are NOT redefined here.
   ============================================================ */

/* ---- No-padding card modifier (flush list cards) ---- */
.m-card--flush { padding:0; overflow:hidden; }

/* ---- Equipment strip ---- */
.m-prp-equip { padding:8px 14px; border-bottom:1px solid var(--border); display:flex; gap:5px; flex-wrap:wrap; align-items:center; background:var(--bg-surface); }
.m-prp-equip__label { font-size:9px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.7px; font-weight:500; margin-right:4px; }
.m-prp-equip__chip { padding:3px 7px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:4px; font-size:10px; color:var(--text-secondary); }

/* ---- Cascade banner (C3 — collapsed lead + expandable breakdown) ---- */
.m-prp-cbanner { background:color-mix(in srgb, var(--warning) 6%, transparent); border-bottom:1px solid color-mix(in srgb, var(--warning) 12%, transparent); }
.m-prp-cbanner__bar { padding:8px 14px; display:flex; align-items:center; gap:8px; cursor:pointer; }
.m-prp-cbanner__icon { width:18px; height:18px; border-radius:5px; background:color-mix(in srgb, var(--warning) 18%, transparent); color:var(--warning); display:flex; align-items:center; justify-content:center; font-size:10px; font-family:var(--font-mono); font-weight:600; flex-shrink:0; }
.m-prp-cbanner__summary { flex:1; font-size:11px; color:var(--text-secondary); font-family:var(--font-mono); }
.m-prp-cbanner__chevron { font-size:10px; color:var(--text-tertiary); flex-shrink:0; }
.m-prp-cbanner__detail { padding:0 14px 8px; max-height:500px; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease; }
.m-prp-cbanner__detail--collapsed { max-height:0; padding-top:0; padding-bottom:0; }
.m-prp-cbanner__toggle { font-size:10px; color:var(--accent); font-family:var(--font-mono); flex-shrink:0; }
.m-prp-cbanner__scale-row { cursor:pointer; align-items:center; }
.m-prp-cbanner__scale-check { accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }
.m-prp-cbanner-exp__row { display:flex; justify-content:space-between; padding:7px 14px; font-size:11px; font-family:var(--font-mono); border-top:1px solid var(--border); }
.m-prp-cbanner-exp__row--constraint span { color:var(--warning); font-weight:500; }
.m-prp-cbanner-exp__row--minor span { color:var(--text-tertiary); }
.m-prp-cbanner-exp__note { font-size:10px; color:var(--text-tertiary); padding:8px 14px 12px; line-height:1.5; }

/* ---- Yield-strip preview (Expected vs Planned-struck) ---- */
.m-prp-ystat { flex:1; padding:10px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; }
.m-prp-ystat__label { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; }
.m-prp-ystat__v { font-size:16px; font-family:var(--font-mono); font-weight:500; margin-top:3px; }
.m-prp-ystat__v--warning { color:var(--warning); }
.m-prp-ystat__v--strike { color:var(--text-tertiary); text-decoration:line-through; }

/* ---- Methodology ingredient row (MIngRow): edit LEFT, qty + chk RIGHT.
   Compact density (Charles 2026-06-16: the carried 12/16 + 18px qty read too big). ---- */
.m-prp-ming { padding:7px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.m-prp-ming:first-child { border-top:none; }
.m-prp-ming--on { opacity:0.6; }
.m-prp-ming--flash { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.m-prp-ming--error { background:color-mix(in srgb, var(--error) 12%, transparent); }
.m-prp-ming__body { flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.m-prp-ming__id { flex:1; min-width:0; }
.m-prp-ming__name { font-size:12px; }
.m-prp-ming__badge { display:inline-block; padding:1px 5px; background:color-mix(in srgb, var(--success) 12%, transparent); border:1px solid color-mix(in srgb, var(--success) 25%, transparent); border-radius:3px; font-size:8px; font-family:var(--font-mono); color:var(--success); margin-left:6px; vertical-align:middle; }
.m-prp-ming__sub { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }
.m-prp-ming__sub--struck { text-decoration:line-through; opacity:0.5; }
.m-prp-ming__edit { display:inline-block; padding:1px 5px; border:1px solid var(--border-strong); border-radius:3px; font-size:8px; font-family:var(--font-mono); color:var(--text-tertiary); flex-shrink:0; cursor:pointer; text-transform:uppercase; letter-spacing:0.4px; }
.m-prp-ming__qtywrap { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.m-prp-ming__qty { text-align:center; min-width:44px; }
.m-prp-ming__qty-n { font-size:13px; font-family:var(--font-mono); font-weight:500; color:var(--text-primary); line-height:1.2; }
.m-prp-ming__qty-n--adjusted { color:var(--warning); }
.m-prp-ming__qty-u { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); }

/* ---- Ingredient inline edit (P30d) — compact (Charles: the qty input was ~4 cards tall) ---- */
.m-prp-ingedit { padding:10px 12px; background:color-mix(in srgb, var(--accent) 4%, transparent); border-left:3px solid var(--accent); }
.m-prp-ingedit__head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.m-prp-ingedit__name { font-size:13px; font-weight:500; }
.m-prp-ingedit__hint { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-ingedit__done { font-size:10px; color:var(--accent); font-family:var(--font-mono); cursor:pointer; }
.m-prp-ingedit__fields { display:flex; gap:8px; margin-bottom:8px; align-items:flex-end; }
.m-prp-ingedit__qty-col { flex:1; }
.m-prp-ingedit__field-label { font-size:8px; color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:3px; }
.m-prp-ingedit__qty { padding:6px 10px; background:var(--bg-base); border:1.5px solid var(--accent); border-radius:6px; font-size:14px; font-family:var(--font-mono); font-weight:500; text-align:center; color:var(--accent); width:100%; }
.m-prp-ingedit__unit { padding:6px 10px; background:var(--bg-base); border:1.5px solid var(--border-strong); border-radius:6px; font-size:12px; font-family:var(--font-mono); text-align:center; color:var(--text-secondary); width:52px; }
.m-prp-ingedit__actions { display:flex; gap:8px; }
.m-prp-ingedit__btn { flex:1; padding:6px 10px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:5px; font-size:10px; color:var(--text-secondary); cursor:pointer; }

/* ---- Method step row (done / current / pending + photo) ---- */
.m-prp-step { padding:12px 14px; border-top:1px solid var(--border); border-left:3px solid transparent; display:flex; gap:10px; align-items:flex-start; }
.m-prp-step:first-child { border-top:none; }
.m-prp-step--done { opacity:0.6; }
.m-prp-step--current { border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 4%, transparent); }
.m-prp-step__num { width:22px; height:22px; border-radius:5px; flex-shrink:0; border:1.5px solid var(--border-strong); background:transparent; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); font-weight:500; cursor:pointer; }
.m-prp-step--done .m-prp-step__num { border-color:var(--success); background:color-mix(in srgb, var(--success) 15%, transparent); color:var(--success); }
.m-prp-step--current .m-prp-step__num { border-color:var(--accent); color:var(--accent); }
.m-prp-step__body { flex:1; min-width:0; }
.m-prp-step__text { font-size:12px; line-height:1.5; }
.m-prp-step--current .m-prp-step__text { font-weight:500; }
.m-prp-step__time { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }
.m-prp-step__photo { width:44px; height:44px; border-radius:6px; background:var(--bg-elevated); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text-tertiary); flex-shrink:0; cursor:pointer; }

/* ---- Yield entry (Expected -> Actual input) — compact; row wraps so the % column
   never overflows the card (Charles: a stray "1" hung off the right edge). ---- */
.m-prp-yield { padding:11px 14px; }
.m-prp-yield__label { font-size:9px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.8px; font-weight:500; font-family:var(--font-mono); margin-bottom:8px; }
.m-prp-yield__planned { font-size:10px; font-family:var(--font-mono); color:var(--text-tertiary); opacity:0.45; text-decoration:line-through; margin-bottom:6px; }
.m-prp-yield__row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.m-prp-yield__col-label { font-size:8px; font-family:var(--font-mono); margin-bottom:3px; }
.m-prp-yield__col-label--expected { color:var(--warning); }
.m-prp-yield__col-label--actual { color:var(--accent); font-weight:500; }
.m-prp-yield__col-label--yield { color:var(--warning); }
.m-prp-yield__expected { font-size:14px; font-family:var(--font-mono); font-weight:500; }
.m-prp-yield__arrow { font-size:12px; color:var(--text-tertiary); margin-bottom:2px; }
.m-prp-yield__actual { font-size:14px; font-family:var(--font-mono); font-weight:500; color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:2px; width:56px; min-width:0; background:transparent; }
.m-prp-yield__pct { font-size:15px; font-family:var(--font-mono); font-weight:500; color:var(--warning); }
.m-prp-yield__unit { font-size:9px; color:var(--text-tertiary); }
.m-prp-yield__hint { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:8px; font-style:italic; }
.m-prp-yield__error { font-size:10px; color:var(--error); font-family:var(--font-mono); margin-top:8px; }
.m-prp-yield__pct-col { margin-left:auto; text-align:right; }
.m-prp-list--hidden { display:none !important; }
.m-prp-expand-all { text-align:center; padding:8px; font-size:12px; color:var(--accent); cursor:pointer; border-top:1px solid var(--border); }
.m-prp-yield__actions { margin-top:12px; }
.m-prp-yield__actions[hidden] { display:none; }

/* ---- Auto-complete banner (P32) ---- */
.m-prp-autocomplete { padding:10px 14px; background:color-mix(in srgb, var(--success) 6%, transparent); border-bottom:1px solid color-mix(in srgb, var(--success) 12%, transparent); display:flex; align-items:flex-start; gap:10px; }
.m-prp-autocomplete[hidden] { display:none; }
.m-prp-autocomplete__icon { width:24px; height:24px; border-radius:6px; background:color-mix(in srgb, var(--success) 18%, transparent); display:flex; align-items:center; justify-content:center; color:var(--success); font-size:12px; flex-shrink:0; }
.m-prp-autocomplete__body { flex:1; }
.m-prp-autocomplete__title { font-size:12px; font-weight:500; color:var(--success); }
.m-prp-autocomplete__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }

/* ---- Step photo full-screen overlay (P30c) ----
   Deviation from the carried spec: position:fixed (not absolute) so the
   overlay pins to the viewport on a scrolling mobile page — the JSX value
   assumed a positioned phone-frame ancestor that doesn't exist here. ---- */
.m-prp-photo { position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,0.85); display:flex; flex-direction:column; padding:40px 16px 24px; }
.m-prp-photo[hidden] { display:none; }
.m-prp-photo__close { position:absolute; top:14px; right:16px; font-size:22px; color:#fff; cursor:pointer; }
.m-prp-photo__kicker { font-size:10px; color:rgba(255,255,255,0.55); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:8px; text-align:center; }
.m-prp-photo__title { font-size:14px; color:#fff; font-family:var(--font-heading); font-weight:500; margin-bottom:16px; text-align:center; }
.m-prp-photo__img { flex:1; background:#2a2622; border:1px solid rgba(255,255,255,0.1); border-radius:12px; min-height:280px; width:100%; object-fit:contain; display:flex; align-items:center; justify-content:center; font-size:48px; color:rgba(255,255,255,0.18); }
.m-prp-photo__caption { margin-top:16px; padding:12px 14px; background:rgba(255,255,255,0.08); border-radius:10px; font-size:12px; color:#fff; line-height:1.55; }
.m-prp-photo__nav { margin-top:12px; display:flex; justify-content:space-between; align-items:center; }
.m-prp-photo__nav-btn { font-size:11px; color:rgba(255,255,255,0.55); font-family:var(--font-mono); cursor:pointer; min-height:44px; display:flex; align-items:center; }

/* ---- Method-collapsed toggle (Method · N steps) ---- */
.m-prp-method-toggle { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.m-prp-method-toggle__title { font-size:12px; color:var(--text-secondary); font-weight:500; }
.m-prp-method-toggle__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-method-toggle__chevron { font-size:12px; color:var(--text-tertiary); transition:transform 150ms ease; }
.m-prp-method-toggle__chevron--open { transform:rotate(90deg); }

/* ============================================================
   Prep 04a — Recap (staff/manager) · Reject · Cancel
   m-prp-* namespace, additive. Shared atoms (.m-card .m-section-label
   .btn .badge .m-sl-drawer) are reused, NOT redefined here — only the
   genuinely-new recap/reject/cancel content atoms live below.
   Cost/WAC classes render only in manager recap (template gate).
   ============================================================ */

/* ---- Yield warnings (slim, top of recap) ---- */
.m-prp-ywarn-list { margin:0 var(--gutter); padding:4px 0 6px; }
.m-prp-ywarn { padding:4px 0; display:flex; align-items:flex-start; gap:8px; border-bottom:1px dashed var(--border); }
.m-prp-ywarn:last-child { border-bottom:none; }
.m-prp-ywarn__dot { width:5px; height:5px; border-radius:3px; flex-shrink:0; }
.m-prp-ywarn__dot--warning { background:var(--warning); }
.m-prp-ywarn__dot--error { background:var(--error); }
.m-prp-ywarn__detail { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); }

/* ---- Hero stat cells (3-up: recipes/yield/time [+ cost for manager]) ---- */
.m-prp-hero-card { margin-top:var(--gutter); }
.m-prp-hero { display:grid; grid-template-columns:1fr 1fr 1fr; }
.m-prp-hero-cell { padding:14px 6px; text-align:center; min-width:0; }
.m-prp-hero-cell--mid { border-left:1px solid var(--border); border-right:1px solid var(--border); }
.m-prp-hero-cell__label { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.6px; }
.m-prp-hero-cell__v { font-size:16px; font-family:var(--font-mono); font-weight:500; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-prp-hero-cell__v--success { color:var(--success); }
.m-prp-hero-cell__v--warning { color:var(--warning); }

/* ---- Recipe result row (yield bar) ---- */
.m-prp-result { padding:10px 14px; border-top:1px solid var(--border); }
.m-prp-result:first-child { border-top:none; }
.m-prp-result__top { display:flex; align-items:center; gap:8px; }
.m-prp-result__name { font-size:12px; flex:1; font-weight:500; min-width:0; }
.m-prp-result__shared { font-size:9px; color:var(--info); font-family:var(--font-mono); font-weight:400; margin-left:6px; }
.m-prp-result__short { font-size:9px; padding:1px 4px; background:color-mix(in srgb, var(--error) 12%, transparent); border:1px solid color-mix(in srgb, var(--error) 25%, transparent); border-radius:3px; color:var(--error); font-family:var(--font-mono); margin-left:6px; }
.m-prp-result__bar { width:56px; height:7px; background:var(--bg-base); border:1px solid var(--border); border-radius:4px; overflow:hidden; flex-shrink:0; }
.m-prp-result__bar-fill { display:block; width:0; height:100%; border-radius:3px; }
.m-prp-result__bar-fill--success { background:var(--success); }
.m-prp-result__bar-fill--warning { background:var(--warning); }
.m-prp-result__bar-fill--error { background:var(--error); }
.m-prp-result__pct { font-size:11px; font-family:var(--font-mono); width:32px; text-align:right; }
.m-prp-result__pct--success { color:var(--success); }
.m-prp-result__pct--warning { color:var(--warning); }
.m-prp-result__pct--error { color:var(--error); }
.m-prp-result__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:3px; }
/* Planned vs actual cost-per-unit line (manager recap only, 2026-06-20) */
.m-prp-result__cost { font-size:10px; font-family:var(--font-mono); margin-top:3px; display:flex; flex-wrap:wrap; gap:2px 6px; align-items:baseline; }
.m-prp-result__cost-k { color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.4px; font-size:9px; }
.m-prp-result__cost-plan { color:var(--text-secondary); }
.m-prp-result__cost-act { color:var(--text-primary); font-weight:500; }
.m-prp-result__cost-act--up { color:var(--warning); }
.m-prp-result__cost-act--down { color:var(--success); }
.m-prp-result--clickable { cursor:pointer; }
.m-prp-result--clickable:active { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.m-prp-result--surplus { background:color-mix(in srgb, var(--warning) 3%, transparent); }
.m-prp-result__surplus-qty { font-size:12px; font-family:var(--font-mono); font-weight:500; color:var(--warning); white-space:nowrap; flex-shrink:0; }

/* ---- Recap tags (final / surplus / used) ---- */
.m-prp-tag { font-size:9px; font-family:var(--font-mono); font-weight:400; margin-left:6px; padding:1px 5px; border-radius:3px; white-space:nowrap; vertical-align:middle; }
.m-prp-tag--final { color:var(--success); background:color-mix(in srgb, var(--success) 12%, transparent); }
.m-prp-tag--surplus { color:var(--warning); background:color-mix(in srgb, var(--warning) 12%, transparent); }
.m-prp-tag--used { color:var(--info); background:color-mix(in srgb, var(--info) 10%, transparent); }
.m-prp-tag--error { color:var(--error); background:color-mix(in srgb, var(--error) 12%, transparent); }

/* ---- Staff timing table ---- */
.m-prp-timing-row { display:flex; justify-content:space-between; align-items:center; padding:8px var(--gutter); font-size:var(--fs-sm); border-top:1px solid var(--border); }
.m-prp-timing-row:first-child { border-top:none; }
.m-prp-timing-row__name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-prp-timing-row__val { font-family:var(--font-mono); color:var(--text-secondary); flex-shrink:0; }
.m-prp-timing-row--total { border-top:1px solid var(--border-strong); background:var(--bg-elevated); }
.m-prp-timing-row--total .m-prp-timing-row__name { font-weight:500; }
.m-prp-timing-row--total .m-prp-timing-row__val { font-weight:500; color:var(--text-primary); }

/* ---- Drill-down drawer content ---- */
#prp-drill-drawer .m-sl-drawer__panel { background:var(--bg-base); }
#prp-drill-drawer .m-sl-drawer__header { border-bottom:1px solid var(--border); padding-bottom:10px; }
#prp-drill-drawer .m-prp-drill-card { background:var(--bg-surface); }
#prp-drill-drawer .m-prp-drill-summary { background:var(--bg-surface); }
#prp-drill-drawer .m-prp-wac-row { background:var(--bg-surface); border-radius:0; }
.m-prp-drill-card { margin:6px 6px; padding:10px 12px; background:var(--bg-base); border:1px solid var(--border-strong); border-radius:8px; }
.m-prp-drill-card:first-child { margin-top:4px; }
.m-prp-drill-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.m-prp-drill-card__name { font-size:var(--fs-sm); font-weight:500; flex:1; min-width:0; }
.m-prp-drill-card__pct { font-size:var(--fs-sm); font-family:var(--font-mono); font-weight:500; flex-shrink:0; }
.m-prp-drill-card__pct--success { color:var(--success); }
.m-prp-drill-card__pct--warning { color:var(--warning); }
.m-prp-drill-card__pct--error { color:var(--error); }
.m-prp-drill-card__pct--pending { color:var(--text-tertiary); }
.m-prp-drill-bar { display:block; width:48px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.m-prp-drill-bar__fill { display:block; height:100%; border-radius:3px; }
.m-prp-drill-bar__fill--success { background:var(--success); }
.m-prp-drill-bar__fill--warning { background:var(--warning); }
.m-prp-drill-bar__fill--error { background:var(--error); }
.m-prp-drill-bar__fill--pending { background:var(--text-tertiary); }
.m-prp-drill-card__yield { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.m-prp-drill-card__detail { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); margin-top:4px; }
.m-prp-drill-label { padding:10px 6px 4px; font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; }
.m-prp-drill-label--spaced { margin-top:12px; }
.m-prp-drill-card__surplus { font-size:var(--fs-xs); color:var(--warning); font-family:var(--font-mono); margin-top:3px; font-weight:500; }
.m-prp-drill-card--parent { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.m-prp-drill-card--parent .m-prp-drill-card__name { color:var(--accent); }
.m-prp-drill-summary { margin:6px 6px; padding:10px 12px; font-size:var(--fs-xs); font-family:var(--font-mono); color:var(--text-secondary); background:var(--bg-base); border:1px solid var(--border-strong); border-radius:8px; line-height:1.5; }
.m-prp-drill-empty { padding:20px 6px; font-size:var(--fs-sm); color:var(--text-tertiary); font-style:italic; text-align:center; }

/* ---- In-progress child indent ---- */
.m-prp-runrow--child { padding-left:0; }
.m-prp-runrow__indent { display:inline-block; flex-shrink:0; }
.m-prp-runrow__indent--d1 { width:16px; }
.m-prp-runrow__indent--d2 { width:32px; }
.m-prp-runrow__indent--d3 { width:48px; }
.m-prp-runrow__indent--d4 { width:64px; }

.m-prp-collapse-row { padding:10px 14px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.m-prp-collapse-row__label { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-prp-collapse-row__chev { font-size:12px; color:var(--text-tertiary); transition:transform 150ms ease; }
.m-prp-collapse-row__chev--open { transform:rotate(90deg); }

/* ---- Product rows + surplus ---- */
.m-prp-prod { padding:10px 14px; border-top:1px solid var(--border); min-height:52px; display:flex; flex-direction:column; justify-content:center; }
.m-prp-prod:first-child { border-top:none; }
.m-prp-prod--surplus { background:color-mix(in srgb, var(--warning) 3%, transparent); }
.m-prp-prod__top { display:flex; align-items:center; gap:8px; }
.m-prp-prod__dot { width:8px; height:8px; border-radius:4px; flex-shrink:0; }
.m-prp-prod__dot--success { background:var(--success); }
.m-prp-prod__dot--warning { background:var(--warning); }
.m-prp-prod__name { flex:1; font-size:13px; font-weight:500; min-width:0; }
.m-prp-prod__tag { font-size:9px; color:var(--info); font-family:var(--font-mono); font-weight:400; margin-left:6px; padding:1px 5px; background:color-mix(in srgb, var(--info) 10%, transparent); border-radius:3px; white-space:nowrap; }
.m-prp-prod__tag--over { color:var(--warning); background:color-mix(in srgb, var(--warning) 12%, transparent); }
.m-prp-prod__qty { font-size:13px; font-family:var(--font-mono); font-weight:500; }
.m-prp-prod__qty--success { color:var(--success); }
.m-prp-prod__qty--warning { color:var(--warning); }
.m-prp-prod__qty-u { font-size:10px; color:var(--text-tertiary); font-weight:400; }
.m-prp-prod__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:4px; padding-left:16px; }

/* ---- Key-value / timing rows ---- */
.m-prp-kv { padding:8px 14px; display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--border); }
.m-prp-kv:first-child { border-top:none; }
.m-prp-kv__k { font-size:12px; color:var(--text-secondary); flex:0 1 auto; min-width:0; }
.m-prp-kv__v { font-size:12px; font-family:var(--font-mono); flex:1 1 auto; text-align:right; min-width:0; overflow-wrap:anywhere; }
/* Products-used row: total in primary, the bottle/counting breakdown greyed + smaller beneath. */
.m-prp-kv__total { color:var(--text-primary); }
.m-prp-kv__break { display:block; font-size:9px; color:var(--text-tertiary); margin-top:2px; }
.m-prp-kv--total { border-top:1px solid var(--border-strong); background:var(--bg-elevated); }
.m-prp-kv--total .m-prp-kv__k { font-weight:500; color:var(--text-primary); }
.m-prp-kv--total .m-prp-kv__v { font-weight:500; font-size:13px; }

/* ---- WAC impact table (MANAGER ONLY) ---- */
/* Shared, FIXED column template so head + rows line up under OLD / NEW / CHANGE. */
.m-prp-wac-head { display:grid; grid-template-columns:1fr 62px 62px 58px; padding:6px 14px; font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px; gap:8px; border-bottom:1px solid var(--border); }
.m-prp-wac-head span { text-align:right; }
.m-prp-wac-head span:first-child { text-align:left; }
.m-prp-wac-row { display:grid; grid-template-columns:1fr 62px 62px 58px; padding:8px 14px; font-size:11px; gap:8px; border-top:1px solid var(--border); align-items:center; }
.m-prp-wac-row--clickable { cursor:pointer; }
.m-prp-wac-row--clickable:active { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.m-prp-wac-row__name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.m-prp-wac-row__unit { display:block; font-size:9px; color:var(--text-tertiary); font-weight:400; margin-top:1px; }
.m-prp-wac-row__old { font-family:var(--font-mono); color:var(--text-tertiary); text-align:right; }
.m-prp-wac-row__new { font-family:var(--font-mono); text-align:right; }
.m-prp-wac-row__chg { font-family:var(--font-mono); text-align:right; font-weight:500; }
.m-prp-wac-row__chg--success { color:var(--success); }
.m-prp-wac-row__chg--warning { color:var(--warning); }
.m-prp-wac-row__chg--info { color:var(--info); }
.m-prp-wac-summary { display:flex; justify-content:space-between; align-items:center; padding:12px var(--gutter); }
.m-prp-wac-summary__text { font-size:var(--fs-sm); color:var(--text-primary); }
.m-prp-wac-summary__hint { font-size:var(--fs-xs); color:var(--text-tertiary); font-family:var(--font-mono); }
.m-prp-info-wash { margin:0 12px 8px; padding:8px 12px; background:color-mix(in srgb, var(--info) 6%, transparent); border:1px solid color-mix(in srgb, var(--info) 12%, transparent); border-radius:8px; font-size:10px; color:var(--info); font-family:var(--font-mono); line-height:1.5; }
.m-prp-info-wash strong { font-weight:600; }

/* ---- Notes blocks ---- */
.m-prp-notes-ro { padding:10px 14px; font-size:12px; color:var(--text-secondary); font-style:italic; line-height:1.5; }
.m-prp-notes-edit { padding:10px 14px; min-height:60px; font-size:12px; color:var(--text-primary); line-height:1.5; width:100%; background:transparent; border:none; font-family:var(--font-body); resize:none; }
.m-prp-notes-edit::placeholder { color:var(--text-tertiary); font-style:italic; }
.m-prp-notes-status { font-size:10px; font-family:var(--font-mono); padding:4px 14px 8px; min-height:14px; }
.m-prp-notes-status--ok { color:var(--success); }
.m-prp-notes-status--err { color:var(--error); }

/* ---- 3-action manager footer (extends shared m-prp-foot) ---- */
.m-prp-foot__stack { display:flex; flex-direction:column; gap:6px; }
.m-prp-foot__row2 { display:flex; gap:8px; }
.m-prp-foot__row2 .btn { flex:1; white-space:nowrap; }
/* The action (destructive) button gets more width so its label fits on one line. */
.m-prp-foot__row2 .btn-destructive { flex:1.7; }

/* ---- Reject flow (P44, m-sl-drawer inline) ---- */
.m-prp-reject-info { padding:12px 16px; background:color-mix(in srgb, var(--error) 4%, transparent); border-bottom:1px solid color-mix(in srgb, var(--error) 12%, transparent); font-size:11px; color:var(--text-secondary); line-height:1.5; }
.m-prp-reject-pick { padding:11px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; cursor:pointer; }
.m-prp-reject-pick:first-child { border-top:none; }
.m-prp-reject-pick--picked { background:color-mix(in srgb, var(--error) 4%, transparent); }
.m-prp-reject-pick__name { flex:1; font-size:12px; min-width:0; }
.m-prp-reject-pick--picked .m-prp-reject-pick__name { font-weight:500; }
.m-prp-reject-pick__pct { font-size:10px; font-family:var(--font-mono); }
.m-prp-reject-pick__pct--success { color:var(--success); }
.m-prp-reject-pick__pct--warning { color:var(--warning); }
.m-prp-reject-pick__pct--error { color:var(--error); }
.m-prp-reject-pick__chk { width:22px; height:22px; border-radius:5px; border:1.5px solid var(--border-strong); background:transparent; display:flex; align-items:center; justify-content:center; color:var(--error); font-size:12px; flex-shrink:0; }
.m-prp-reject-pick--picked .m-prp-reject-pick__chk { border-color:var(--error); background:color-mix(in srgb, var(--error) 15%, transparent); }
.m-prp-quick-reasons { padding:10px 14px; display:flex; flex-wrap:wrap; gap:6px; }
.m-prp-quick-reasons--flush { padding:10px 0 0; }
.m-prp-quick-reason { font-size:11px; padding:5px 10px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:14px; color:var(--text-secondary); font-family:var(--font-mono); cursor:pointer; }
.m-prp-quick-reason--active { border-color:var(--accent); color:var(--accent); }
.m-prp-reason-area { width:100%; min-height:64px; padding:10px 12px; font-size:12px; color:var(--text-primary); line-height:1.5; background:var(--bg-base); border:1px solid var(--border); border-radius:8px; font-family:var(--font-body); resize:vertical; }
.m-prp-reason-area::placeholder { color:var(--text-tertiary); }
.m-prp-sheet-body { padding:14px 16px; }
.m-prp-sheet-body__label { font-size:11px; color:var(--text-secondary); margin:14px 0 6px; }
.m-prp-sheet-body__label--req::after { content:' *'; color:var(--error); }

/* ---- Cancel drawer (P46) ---- */
.m-prp-cancel-wash { padding:12px 14px; background:color-mix(in srgb, var(--error) 6%, transparent); border:1px solid color-mix(in srgb, var(--error) 15%, transparent); border-radius:8px; font-size:11px; color:var(--text-secondary); line-height:1.55; }
.m-prp-cancel-wash__head { color:var(--error); font-weight:600; margin-bottom:6px; }
.m-prp-cancel-wash__intro { margin-bottom:4px; }
.m-prp-cancel-wash__list { list-style:none; padding-left:0; margin:0; }
.m-prp-cancel-wash__li { padding-left:14px; position:relative; margin-bottom:2px; }
.m-prp-cancel-wash__li::before { content:'\00b7'; position:absolute; left:0; color:var(--text-tertiary); }
.m-prp-cancel-wash__foot { color:var(--text-tertiary); margin-top:8px; }
/* recap ingredient lazy-load table (manager only) */
.m-prp-ing-table { width:100%; border-collapse:collapse; }
.m-prp-ing-table td { padding:7px 14px; font-size:11px; border-top:1px solid var(--border); }
.m-prp-ing-table td:nth-child(2) { font-family:var(--font-mono); text-align:right; color:var(--text-secondary); white-space:nowrap; }
.m-prp-ing-table td:nth-child(3) { font-family:var(--font-mono); text-align:right; white-space:nowrap; }
.m-prp-ing-table__total td { border-top:1px solid var(--border-strong); font-weight:600; background:var(--bg-elevated); }
.m-prp-ing-loading { padding:10px 14px; font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); }

/* ===== 04b lifecycle states (approved banner · cancelled · run history) =====
   Carried verbatim from the superseded 04-recap-approval-shared.md. Only the atoms
   actually rendered by 04b are added (stock-note / stockwarn omitted — no backend
   data source, per PREP-5/7/8). m-prp-wac-* (above) + m-prp-approved-banner (01a)
   are reused as-is. */
/* ---- Approved state (P45): approved-by banner bar + 2-up cheaper/dearer (manager) ---- */
.m-prp-approved-banner-bar { padding:14px 16px; background:color-mix(in srgb, var(--success) 8%, transparent); border-bottom:1px solid color-mix(in srgb, var(--success) 15%, transparent); display:flex; align-items:center; gap:10px; }
.m-prp-approved-banner-bar__icon { width:28px; height:28px; border-radius:7px; background:color-mix(in srgb, var(--success) 18%, transparent); display:flex; align-items:center; justify-content:center; color:var(--success); font-size:14px; flex-shrink:0; }
.m-prp-approved-banner-bar__title { font-size:13px; font-weight:500; color:var(--success); }
.m-prp-approved-banner-bar__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-twoup { padding:12px 16px 4px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.m-prp-twoup__card { background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:10px; text-align:center; }
.m-prp-twoup__label { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); text-transform:uppercase; }
.m-prp-twoup__n { font-size:22px; font-family:var(--font-mono); font-weight:500; margin-top:4px; }
.m-prp-twoup__n--success { color:var(--success); }
.m-prp-twoup__n--warning { color:var(--warning); }
.m-prp-twoup__sub { font-size:9px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:1px; }

/* ---- Cancelled state (P51/P52 — generic only per PREP-5/7/8 backend gap) ---- */
.m-prp-cancelled-banner { padding:12px 14px; background:color-mix(in srgb, var(--error) 6%, transparent); border-bottom:1px solid color-mix(in srgb, var(--error) 15%, transparent); display:flex; align-items:center; gap:10px; }
.m-prp-cancelled-banner__icon { width:32px; height:32px; border-radius:8px; background:color-mix(in srgb, var(--error) 18%, transparent); display:flex; align-items:center; justify-content:center; color:var(--error); font-size:16px; }
.m-prp-cancelled-banner__title { font-size:13px; font-weight:500; color:var(--error); }
.m-prp-cancelled-banner__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }

/* ---- Run history (P50 — sparse: date + recipe count + link only, per PREP-6) ----
   No status dot / yield / cancelled dim: get_production_runs_for_session() returns no
   per-run status, so those would be invented data (Codex 2026-06-20, medium). */
.m-prp-hist-row { border-top:1px solid var(--border); display:flex; align-items:center; position:relative; }
.m-prp-hist-row:first-child { border-top:none; }
.m-prp-hist-row__link { padding:12px 14px; display:flex; align-items:center; gap:10px; flex:1; min-width:0; color:inherit; text-decoration:none; }
.m-prp-hist-row__body { flex:1; min-width:0; }
.m-prp-hist-row__name { font-size:13px; font-weight:500; }
.m-prp-hist-row__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-hist-row__chev { font-size:12px; color:var(--text-tertiary); }
.m-prp-hist-row__delete { background:none; border:none; color:var(--error); font-size:16px; padding:8px 12px; cursor:pointer; opacity:0.6; }
.m-prp-hist-row__delete:hover { opacity:1; }
.m-prp-hist-row--cancelled { opacity:0.6; }
.m-prp-hist-row--cancelled:hover { opacity:0.8; }

/* ===== 04c public share pages (PIN · external view · expired) =====
   Carried from the superseded 04-recap-approval-shared.md. These render on STANDALONE
   public pages (no base.html / app shell), so m-prp-share-page owns full height
   (min-height:100vh) instead of the carried `flex:1` — there is no m-prp-shell parent
   here, and that wrapper is forbidden by the Foundation Contract. m-prp-pin-cell/--on
   and m-prp-pin-row are reused as-is (already in components.css from 01). The external
   view renders NO cost/WAC — the template is the security boundary. */
/* ---- Share PIN entry + expired (P60/P63) ---- */
.m-prp-share-page { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; text-align:center; }
.m-prp-share-page__logo { width:48px; height:48px; border-radius:24px; background:color-mix(in srgb, var(--accent) 15%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--accent); margin-bottom:14px; }
.m-prp-share-page__brand { font-size:16px; font-family:var(--font-heading); font-weight:500; margin-bottom:4px; }
.m-prp-share-page__ctx { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); margin-bottom:24px; }
.m-prp-share-page__prompt { font-size:13px; color:var(--text-secondary); margin-bottom:16px; }
.m-prp-share-page__title { font-size:16px; font-family:var(--font-heading); font-weight:500; margin-bottom:8px; }
.m-prp-share-page__msg { font-size:12px; color:var(--text-tertiary); line-height:1.55; max-width:280px; }
.m-prp-pin-input { position:absolute; opacity:0; pointer-events:none; }
.m-prp-share-page__hint { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); padding:6px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; margin-top:18px; }
.m-prp-share-page__hint--err { color:var(--error); border-color:color-mix(in srgb, var(--error) 30%, transparent); background:color-mix(in srgb, var(--error) 6%, transparent); }
.m-prp-expired-icon { width:48px; height:48px; border-radius:12px; background:color-mix(in srgb, var(--error) 12%, transparent); border:1px solid color-mix(in srgb, var(--error) 25%, transparent); display:inline-flex; align-items:center; justify-content:center; font-size:22px; color:var(--error); margin-bottom:14px; }

/* ---- Share external view (P62) — public, NO costs ---- */
.m-prp-share-banner { padding:7px 14px; background:color-mix(in srgb, var(--info) 8%, transparent); border-bottom:1px solid color-mix(in srgb, var(--info) 12%, transparent); display:flex; justify-content:space-between; align-items:center; }
.m-prp-share-banner__left { display:flex; align-items:center; gap:8px; }
.m-prp-share-banner__meta { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); }
.m-prp-ext-head { padding:16px 16px 4px; }
.m-prp-ext-head__name { font-size:16px; font-family:var(--font-heading); font-weight:500; }
.m-prp-ext-head__date { font-size:11px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-ext-row { padding:12px 14px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.m-prp-ext-row:first-child { border-top:none; }
.m-prp-ext-row__body { flex:1; min-width:0; }
.m-prp-ext-row__name { font-size:13px; font-weight:500; }
.m-prp-ext-row__sub { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); margin-top:2px; }
.m-prp-ext-foot { padding:12px 16px; font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); text-align:center; line-height:1.5; }

/* ============================================================
   DESKTOP — Shared state patterns (decisions #8-#12)
   d-* namespace. Generic: reused by Catalogue + Dashboard + post-wave.
   ALL rules gated >=768px; additive only; mobile render untouched.
   Skeleton bar/pulse, banner family, autosave family are INHERITED
   (m-skel / m-net-banner / m-autosave) — these wrappers extend, not fork.
   ============================================================ */

@media (min-width: 768px) {

  /* ---- 1. Loading skeleton — shape-matched (decision #8) ---- */
  .d-skel { display: grid; grid-template-columns: 400px 1fr; flex: 1; overflow: hidden; }
  .d-skel--hub { grid-template-columns: 1fr; }

  .d-skel__left { border-right: 1px solid var(--border); display: flex; flex-direction: column; }
  .d-skel__left-search { padding: 16px 20px; border-bottom: 1px solid var(--border); }
  .d-skel__left-chips { padding: 12px 20px; display: flex; gap: 8px; border-bottom: 1px solid var(--border); }
  .d-skel__row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
  .d-skel__row-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }

  .d-skel__right { padding: 24px 32px; overflow: hidden; }
  .d-skel__card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; margin-bottom: 24px; }
  .d-skel__card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 20px; }
  .d-skel__card-stat { display: flex; flex-direction: column; gap: 6px; }
  .d-skel__section-label { display: flex; justify-content: space-between; margin-bottom: 12px; }
  .d-skel__rows { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
  .d-skel__detail-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
  .d-skel__detail-row + .d-skel__detail-row { border-top: 1px solid var(--border); }

  .d-skel__row--f90 { opacity: 0.9; }
  .d-skel__row--f80 { opacity: 0.8; }
  .d-skel__row--f70 { opacity: 0.7; }
  .d-skel__row--f60 { opacity: 0.6; }
  .d-skel__row--f50 { opacity: 0.5; }

  .d-skel-bar--h28 { height: 28px; }
  .d-skel-bar--h36 { height: 36px; }
  .d-skel-bar--w200 { width: 200px; }

  /* ---- 2. Error + empty states — centred in the FULL content area (decision #9) ---- */
  .d-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; }
  .d-state__icon { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--bg-surface); border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-family: var(--font-mono); font-size: 26px; }
  .d-state__icon--error { color: var(--error); }
  .d-state__icon--empty { color: var(--text-tertiary); }
  .d-state__title { font-size: 20px; font-weight: 500; color: var(--text-primary); margin-bottom: 10px; }
  .d-state__text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; max-width: 400px; }
  .d-state__cta { margin-top: 24px; padding: 12px 28px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; border: none; cursor: pointer; background: var(--accent); color: var(--bg-base); min-height: 36px; box-sizing: border-box; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
  .d-state__sub { margin-top: 12px; font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: 0.3px; }
  .d-state__learn { margin-top: 14px; font-size: 11px; color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); background: none; border: none; cursor: pointer; }
  .d-state__diagnostic { margin-top: 28px; padding: 8px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); line-height: 1.5; }
  .d-state__diagnostic-key { color: var(--text-secondary); }

  .d-empty, .d-error { }

  /* ---- 3. Network banner — desktop inline diagnostic detail (decision #10) ---- */
  #network-banner { position: relative; z-index: 5; }
  .m-net-banner { padding-left: 32px; padding-right: 32px; }
  .d-net-detail { flex-shrink: 0; font-size: 10px; opacity: 0.7; font-family: var(--font-mono); white-space: nowrap; margin-left: auto; }
  .d-net-detail + .m-net-banner__action,
  .d-net-detail + .m-net-banner__dismiss { margin-left: 12px; }

  /* ---- 4. Autosave — page-header right slot (decision #11) ---- */
  .d-autosave-slot { display: flex; align-items: center; justify-content: flex-end; min-width: 160px; }
  .d-autosave-slot .m-autosave { align-items: flex-end; }

  /* ---- 5. Inline validation — blur + submit-count + summary banner (decision #12) ---- */
  .d-validate-field__error { display: none; font-size: 11px; color: var(--error); margin-top: 5px; line-height: 1.4; align-items: flex-start; gap: 5px; }
  .d-validate-field.is-invalid .d-validate-field__error { display: flex; }
  .d-validate-field__error-mark { font-family: var(--font-mono); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
  .d-validate-field.is-invalid .d-validate-field__input,
  .d-validate-field.is-invalid input,
  .d-validate-field.is-invalid select,
  .d-validate-field.is-invalid textarea { border-color: var(--error); }
  .d-validate-field.is-valid .d-validate-field__input,
  .d-validate-field.is-valid input,
  .d-validate-field.is-valid select,
  .d-validate-field.is-valid textarea { border-color: var(--success-border); }
  .d-validate-field__hint { font-size: 10px; color: var(--text-tertiary); margin-top: 4px; }
  .d-validate-field__hint--ok { color: var(--success); }

  .d-validate-summary { display: none; padding: 10px 16px; background: var(--error-bg); border-bottom: 1px solid var(--error-border); align-items: center; gap: 8px; }
  .d-validate-summary.is-shown { display: flex; }
  .d-validate-summary__mark { color: var(--error); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
  .d-validate-summary__text { font-size: 12px; color: var(--error); font-weight: 500; }
  .d-validate-summary__jump { margin-left: auto; font-size: 11px; color: var(--error); text-decoration: underline; background: none; border: none; cursor: pointer; }

  .d-validate-submit.is-blocked { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); cursor: not-allowed; }
}

/* ============================================================
   SHARED DESKTOP PERIOD PICKER POPOVER (d-pp-*)
   Replaces the raw <select> custom period picker across all
   modules. Styled popover with From/To range selection.
   Consumed by: Sales, Stock, P&L (any page with period chips).
   ============================================================ */
@media (min-width: 768px) {
  .d-pp { position: relative; display: inline-block; }
  .d-pp__trigger {
    padding: 7px 14px; font-size: 11px; background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text-secondary); cursor: pointer; font-family: inherit;
    min-height: 32px; display: inline-flex; align-items: center; gap: 6px;
  }
  .d-pp__trigger:hover { color: var(--text-primary); }
  .d-pp__trigger.is-active {
    background: var(--accent-bg); color: var(--accent); font-weight: 600;
    border-color: var(--accent-border);
  }
  .d-pp__trigger::after { content: '▾'; font-size: 9px; opacity: 0.5; }

  .d-pp__popover {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    z-index: 120; min-width: 420px;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    overflow: hidden;
  }
  .d-pp__popover.is-open { display: block; }

  .d-pp__header {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .d-pp__header-title {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
  }
  .d-pp__header-clear {
    font-size: 11px; color: var(--text-tertiary); cursor: pointer;
    background: none; border: none; font-family: inherit;
  }
  .d-pp__header-clear:hover { color: var(--accent); }

  .d-pp__cols { display: flex; }
  .d-pp__col { flex: 1; }
  .d-pp__col + .d-pp__col { border-left: 1px solid var(--border); }
  .d-pp__col-title {
    padding: 8px 16px; font-size: 9px; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.06em;
    font-family: var(--font-mono); border-bottom: 1px solid var(--border);
    font-weight: 500;
  }
  .d-pp__list { max-height: 280px; overflow-y: auto; }
  .d-pp__item {
    padding: 9px 16px; font-size: 12px; color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.03);
  }
  .d-pp__item:hover { background: rgba(255,255,255,0.03); color: var(--text-primary); }
  .d-pp__item.is-selected {
    background: var(--accent-bg); color: var(--accent); font-weight: 500;
  }
  .d-pp__item.is-in-range { background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .d-pp__item.is-disabled { opacity: 0.35; pointer-events: none; }
  .d-pp__item-name { flex: 1; }
  .d-pp__item-dates {
    font-size: 10px; color: var(--text-tertiary);
    font-family: var(--font-mono); margin-left: 8px;
  }
  .d-pp__item-check {
    width: 14px; text-align: center; color: var(--accent);
    font-size: 11px; flex-shrink: 0;
  }

  .d-pp__footer {
    padding: 10px 16px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .d-pp__range-label {
    font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono);
  }
  .d-pp__range-label strong { color: var(--text-secondary); font-weight: 500; }
  .d-pp__view-btn {
    padding: 7px 18px; font-size: 12px; font-weight: 600;
    background: var(--accent); border: none; border-radius: var(--radius-md);
    color: var(--bg-base); cursor: pointer; font-family: inherit;
  }
  .d-pp__view-btn:disabled { opacity: 0.4; cursor: not-allowed; }
}

/* ---- Tablet adaptation (768–1023px) — invoice category cards 2-up ---- */

@media (min-width: 768px) and (max-width: 1023px) {
  .m-iv-cat-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .m-iv-cat-list > .m-iv-cat-card {
    flex: 1 1 calc(50% - 4px);
  }
}

/* ============================================================
   DESKTOP DASHBOARD — Variation-B asymmetric 2+1 widget grid
   d-dash-* namespace. NET-NEW desktop subtree components.
   Additive, entirely inside @media (min-width:1024px).
   Mobile (<1024px) m-dashboard families are untouched.
   ============================================================ */

@media (min-width: 768px) {

  /* ---- KPI card ---- */
  .d-dash-kpi {
    flex: 1;
    min-width: 0;
    padding: 16px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
  .d-dash-kpi__label { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
  .d-dash-kpi__values { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
  .d-dash-kpi__value { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 500; color: var(--text-primary); line-height: 1; }
  .d-dash-kpi__value--loss { color: var(--error); }
  .d-dash-kpi__delta { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-tertiary); }
  .d-dash-kpi__delta--up { color: var(--success); }
  .d-dash-kpi__delta--down { color: var(--error); }
  a.d-dash-kpi__value { text-decoration: none; }
  a.d-dash-kpi__value:hover { text-decoration: underline; text-decoration-color: var(--border-strong); }

  /* ---- Widget card ---- */
  .d-dash-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .d-dash-widget__head {
    padding: 14px 18px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--border);
  }
  .d-dash-widget__title { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
  .d-dash-widget__right { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
  .d-dash-widget__body { padding: 14px 18px 16px; }
  .d-dash-widget__body--flush { padding: 0; }

  /* ---- Variance stat headline ---- */
  .d-dash-varstat { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
  .d-dash-varstat:hover .d-dash-varstat__hint { color: var(--text-secondary); }
  .d-dash-varstat__figure { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 500; line-height: 1; }
  .d-dash-varstat__figure--loss { color: var(--error); }
  .d-dash-varstat__figure--surplus { color: var(--success); }
  .d-dash-varstat__figure--warning { color: var(--warning); }
  .d-dash-varstat__sub { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 6px; }
  .d-dash-varstat__hint { display: flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-size: var(--fs-sm); flex-shrink: 0; }
  .d-dash-varstat__chev { font-size: var(--fs-lg); }

  .d-dash-varlist { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }

  /* Cost-mover row (shared by both consumption + cost variance cards) */
  .d-dash-mover { padding: 6px 0; }
  .d-dash-mover + .d-dash-mover { border-top: 1px solid var(--border); }
  .d-dash-mover__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .d-dash-mover__sku { font-size: var(--fs-sm); color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .d-dash-mover__delta { font-family: var(--font-mono); font-size: var(--fs-sm); flex-shrink: 0; }
  .d-dash-mover__delta--up { color: var(--warning); }
  .d-dash-mover__delta--down { color: var(--success); }
  .d-dash-mover__delta--loss { color: var(--error); }
  .d-dash-mover__delta--surplus { color: var(--success); }
  .d-dash-mover__prices { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 1px; }
  .d-dash-mover__old { text-decoration: line-through; }
  .d-dash-mover__new { color: var(--text-secondary); }

  /* ---- Checklist row ---- */
  .d-dash-check { display: flex; align-items: center; gap: 12px; padding: 11px 18px; text-decoration: none; }
  .d-dash-check + .d-dash-check { border-top: 1px solid var(--border); }
  .d-dash-check__box {
    width: 18px; height: 18px; border-radius: 9px; flex-shrink: 0;
    border: 1.5px solid var(--border-strong); background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--bg-base); font-size: var(--fs-xs); font-weight: 700;
  }
  .d-dash-check--done .d-dash-check__box { background: var(--success); border-color: var(--success); }
  .d-dash-check__body { flex: 1; min-width: 0; }
  .d-dash-check__title { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
  .d-dash-check--done .d-dash-check__title { color: var(--text-tertiary); text-decoration: line-through; }
  .d-dash-check__meta { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 1px; }
  .d-dash-check__cta {
    font-size: var(--fs-sm); font-weight: 600; padding: 6px 14px; border-radius: var(--radius);
    background: var(--accent); color: var(--bg-base); border: none; text-decoration: none;
    flex-shrink: 0; cursor: pointer;
  }

  /* Fresh / all-clear green banner */
  .d-dash-fresh {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    background: var(--success-bg);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
  }
  .d-dash-fresh__check {
    width: 18px; height: 18px; border-radius: 9px; flex-shrink: 0;
    background: var(--success); color: var(--bg-base);
    display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700;
  }

  /* ---- Needs-a-human row (DG2: non-clickable) ---- */
  .d-dash-need { display: flex; align-items: center; gap: 10px; padding: 11px 18px; }
  .d-dash-need + .d-dash-need { border-top: 1px solid var(--border); }
  .d-dash-need__sev { width: 38px; flex-shrink: 0; font-size: var(--fs-2xs); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.6px; }
  .d-dash-need__sev--blocker { color: var(--error); }
  .d-dash-need__sev--should { color: var(--warning); }
  .d-dash-need__sev--fyi { color: var(--info); }
  .d-dash-need__body { flex: 1; min-width: 0; }
  .d-dash-need__title { font-size: var(--fs-sm); color: var(--text-primary); }
  .d-dash-need__meta { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 1px; }
  .d-dash-need__chev { color: var(--text-tertiary); font-size: var(--fs-base); flex-shrink: 0; }

  /* ---- Accuracy badge (page-header right) ---- */
  .d-dash-accuracy {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
    font-size: var(--fs-sm); color: var(--warning);
    flex-shrink: 0;
  }
  .d-dash-accuracy__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--warning); flex-shrink: 0; }
}

/* ============================================================
   DESKTOP — Dashboard empty states (EventNoStats grid)
   d-dash-empty-* namespace. NoEventSelected reuses foundations-04
   .d-state / .d-empty — NOT redefined here. Renders only >=1024px
   because it lives inside .d-dash (base-hidden <1024px).
   ============================================================ */

@media (min-width: 768px) {
  .d-dash-empty {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
    padding: 24px 32px 32px;
  }
  .d-dash-empty__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .d-dash-empty__col--right { gap: 16px; }

  .d-dash-empty__kpis { display: flex; gap: 12px; }
  .d-dash-empty__kpi {
    flex: 1; min-width: 0; padding: 16px 18px;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  }
  .d-dash-empty__kpi-label { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
  .d-dash-empty__kpi-value { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 500; color: var(--text-tertiary); line-height: 1; margin-top: 6px; }

  .d-dash-empty__widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .d-dash-empty__dashed {
    min-height: 120px; padding: 20px 18px;
    border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
    background: var(--bg-surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 12px;
  }
  .d-dash-empty__dashed-text { font-size: var(--fs-sm); color: var(--text-tertiary); line-height: 1.6; max-width: 220px; }
  .d-dash-empty__cta {
    padding: 9px 18px; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 600;
    border: none; cursor: pointer; background: var(--accent); color: var(--bg-base);
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; box-sizing: border-box;
  }

  .d-dash-empty__card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .d-dash-empty__card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--border); }
  .d-dash-empty__card-title { font-size: var(--fs-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
  .d-dash-empty__card-count { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
  .d-dash-empty__check-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; }
  .d-dash-empty__check-row + .d-dash-empty__check-row { border-top: 1px solid var(--border); }
  .d-dash-empty__check-dot { width: 18px; height: 18px; border-radius: 9px; border: 1.5px solid var(--border-strong); flex-shrink: 0; }
  .d-dash-empty__check-body { flex: 1; min-width: 0; }
  .d-dash-empty__check-title { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 500; }
  .d-dash-empty__check-meta { font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 1px; }
  .d-dash-empty__card-empty { padding: 18px; text-align: center; font-size: var(--fs-sm); color: var(--text-tertiary); }
}

/* ============================================================
   Desktop — MI Detail Panel (right panel in master-detail)
   d-mid-* namespace. Renders client-side from menu_items_detail_json.
   Matches the mi-detail-regular-b.jsx / mi-detail-combo-a.jsx designs.
   Gated >=1024px; mobile (<1024) uses the drawer.
   ============================================================ */
.d-mid-hero { display: none; }

@media (min-width: 768px) {
  .d-mid-header {
    position: relative;
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--border);
  }
  .d-mid-header__tape {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
  }
  .d-mid-header__eyebrow {
    font-size: 11px; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.6px;
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
  }
  .d-mid-header__name {
    font-size: 24px; font-weight: 500;
    font-family: var(--font-heading);
    color: var(--text-primary);
    letter-spacing: -0.3px;
  }
  .d-mid-header__edit {
    position: absolute; right: 24px; top: 20px;
    padding: 8px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--accent);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
  }
  .d-mid-header__edit:hover { border-color: var(--accent); }
  .d-mid-combo-badge {
    padding: 2px 7px; border-radius: 4px;
    background: rgba(138,122,196,0.14);
    color: #a999d8;
    font-size: 10px; font-weight: 500;
    border: 1px solid rgba(138,122,196,0.3);
    letter-spacing: 0.5px; text-transform: uppercase;
  }

  .d-mid-hero {
    display: block;
    padding: 16px 24px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
  }
  .d-mid-tile {
    background: var(--bg-elevated);
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .d-mid-tile__top {
    display: grid; grid-template-columns: 1fr 1fr;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .d-mid-tile__label {
    font-size: 10px; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500;
  }
  .d-mid-tile__big {
    font-size: 22px; font-family: var(--font-mono);
    color: var(--text-primary); font-weight: 500;
    margin-top: 4px; letter-spacing: -0.3px;
  }
  .d-mid-tile__big--gp { color: var(--success); }
  .d-mid-tile__sub {
    font-size: 10px; color: var(--text-tertiary);
    font-family: var(--font-mono); margin-top: 2px;
  }
  .d-mid-tile__right { text-align: right; }
  .d-mid-cost-bar { padding: 12px 16px; }
  .d-mid-cost-bar__head {
    display: flex; justify-content: space-between;
    align-items: baseline; margin-bottom: 8px;
  }
  .d-mid-cost-bar__val {
    font-size: 14px; font-family: var(--font-mono);
    color: var(--text-primary); font-weight: 500;
  }
  .d-mid-bar {
    display: flex; height: 6px; border-radius: 3px;
    overflow: hidden; gap: 1px;
  }
  .d-mid-bar__seg { opacity: 0.8; }
  .d-mid-cost-bar__meta {
    font-size: 10px; color: var(--text-tertiary);
    margin-top: 6px; font-family: var(--font-mono);
  }

  /* Cost spread (combo) */
  .d-mid-spread { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
  .d-mid-spread__track {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
  }
  .d-mid-spread__min { font-size: 12px; color: var(--success); }
  .d-mid-spread__max { font-size: 12px; color: var(--error); }
  .d-mid-spread__bar {
    flex: 1; height: 4px; background: var(--bg-base);
    border-radius: 2px; position: relative; overflow: hidden;
  }
  .d-mid-spread__grad {
    position: absolute; inset: 0;
    background: linear-gradient(to right, var(--success), var(--warning), var(--error));
    opacity: 0.5;
  }
  .d-mid-spread__marker {
    position: absolute; top: -3px; bottom: -3px;
    width: 2px; background: var(--text-primary);
  }

  .d-mid-section-label {
    font-size: 10px; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.6px;
    font-weight: 500; margin-bottom: 8px;
    display: flex; justify-content: space-between;
    align-items: baseline; padding: 0 24px;
  }
  .d-mid-section-label__right {
    font-size: 11px; font-weight: 400;
    letter-spacing: normal; text-transform: none;
  }

  .d-mid-ig-row {
    padding: 10px 24px; display: flex;
    align-items: center; gap: 10px;
    border-bottom: 1px solid var(--border);
  }
  .d-mid-ig-row:first-child { border-top: 1px solid var(--border); }
  .d-mid-ig-key {
    width: 3px; height: 22px; border-radius: 1.5px;
    flex-shrink: 0; opacity: 0.6;
  }
  .d-mid-ig-info { flex: 1; }
  .d-mid-ig-name { font-size: 14px; color: var(--text-primary); }
  .d-mid-ig-meta {
    font-size: 11px; color: var(--text-tertiary);
    font-family: var(--font-mono); margin-top: 2px;
  }
  .d-mid-ig-cost {
    font-size: 13px; font-family: var(--font-mono);
    color: var(--text-secondary);
  }
  .d-mid-add-link {
    padding: 10px 24px;
    font-size: 13px; color: var(--accent); font-weight: 500;
    cursor: pointer;
  }
  .d-mid-ig-unit {
    font-size: 11px; color: var(--text-tertiary);
    font-family: var(--font-mono); min-width: 24px;
  }
  .d-mid-ig-search {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    display: flex; align-items: center; gap: 8px;
    position: relative;
  }
  .d-mid-ig-search:focus-within { border-color: var(--accent); }
  .d-mid-ig-search__icon { font-size: 14px; color: var(--text-tertiary); flex-shrink: 0; }
  .d-mid-ig-search__input {
    flex: 1; background: none; border: none; outline: none;
    font-size: 12px; color: var(--text-primary);
    font-family: var(--font-body);
  }
  .d-mid-ig-search__input::placeholder { color: var(--text-tertiary); }

  /* Combo group cards */
  .d-mid-grp-card {
    margin: 0 24px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
  }
  .d-mid-grp-card__head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between;
    align-items: center;
  }
  .d-mid-grp-card__label { font-size: 13px; color: var(--text-primary); font-weight: 500; }
  .d-mid-grp-card__meta {
    font-size: 10px; color: var(--text-tertiary);
    font-family: var(--font-mono); margin-top: 1px;
  }
  .d-mid-grp-opt {
    padding: 9px 14px; display: flex;
    align-items: center; gap: 10px;
    border-bottom: 1px solid var(--border);
  }
  .d-mid-grp-opt:last-child { border-bottom: none; }
  .d-mid-grp-opt--default { background: color-mix(in srgb, var(--accent) 4%, transparent); }
  .d-mid-grp-dot {
    width: 6px; height: 6px; border-radius: 3px; flex-shrink: 0;
  }
  .d-mid-grp-opt__info { flex: 1; }
  .d-mid-grp-opt__name { font-size: 13px; color: var(--text-primary); }
  .d-mid-grp-opt__sub {
    font-size: 10px; color: var(--text-tertiary);
    font-family: var(--font-mono); margin-top: 1px;
  }
  .d-mid-grp-opt__cost {
    font-size: 12px; font-family: var(--font-mono);
    color: var(--text-secondary);
  }

  /* Allergen chips */
  .d-mid-allergens {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
  }
  .d-mid-allergen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .d-mid-allergen-chip {
    padding: 4px 9px; border-radius: 4px;
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    color: var(--warning);
    font-size: 11px; font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent);
  }
  .d-mid-allergen-note {
    font-size: 10px; color: var(--text-tertiary);
    margin-top: 8px; font-style: italic;
  }

  .d-mid-scroll {
    flex: 1; overflow-y: auto; min-height: 0;
  }

  /* Meta section */
  .d-mid-meta { padding: 0 0 8px; margin-top: 16px; border-top: 1px solid var(--border); }
  .d-mid-meta__rows { padding: 0 24px; }
  .d-mid-meta__row {
    display: flex; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--border);
  }
  .d-mid-meta__key { font-size: 12px; color: var(--text-tertiary); }
  .d-mid-meta__val {
    font-size: 12px; color: var(--text-primary);
    text-align: right; max-width: 65%;
  }
  .d-mid-meta__val--muted { color: var(--text-secondary); }

  /* Danger zone */
  .d-mid-danger {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
  }
  .d-mid-danger__btn {
    width: 100%; padding: 11px 14px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
    color: var(--error);
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    font-family: var(--font-body);
  }
  .d-mid-danger__btn:hover { background: color-mix(in srgb, var(--error) 6%, transparent); }
  .d-mid-create-btn { padding:8px 18px; background:var(--accent); border:1px solid var(--accent); border-radius:8px; color:var(--accent-contrast); font-size:var(--fs-xs); font-weight:500; cursor:pointer; font-family:var(--font-body); letter-spacing:0.3px; }
  .d-mid-create-btn:hover { opacity:0.85; }
}

/* ============================================================
   Desktop Combo Edit — full-page group editor (U7, additive)
   d-cmb-* namespace = net-new desktop full-page chrome.
   Option rows + live footer reuse SHIPPED .m-mi-* classes.
   Gated >=1024px; mobile (<1024) never sees these rules.
   ============================================================ */
.d-cmb { display: none; }

@media (min-width: 768px) {
  .d-cmb {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .d-cmb__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
  }
  .d-cmb__crumbs { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .d-cmb__back {
    font-size: 13px;
    color: var(--text-tertiary);
    text-decoration: none;
    cursor: pointer;
  }
  .d-cmb__back:hover { color: var(--text-secondary); }
  .d-cmb__crumb-sep { color: var(--border-strong); }
  .d-cmb__title {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .d-cmb__save {
    flex-shrink: 0;
    padding: 8px 20px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: var(--bg-base);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
  }
  .d-cmb__save:hover { filter: brightness(1.05); }
  .d-cmb__save:disabled { opacity: 0.55; cursor: not-allowed; }
  .d-cmb__save--saved { background: var(--success); color: var(--bg-base); }
  .d-cmb__body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
  .d-cmb__groups {
    width: 400px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .d-cmb__groups-head {
    flex-shrink: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
  }
  .d-cmb__groups-scroll { flex: 1; overflow-y: auto; min-height: 0; }
  .d-cmb__add-group {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--accent);
    font-weight: 500;
    cursor: pointer;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    text-align: left;
    width: 100%;
  }
  .d-cmb__add-group:hover { background: var(--accent-bg-soft); }
  .d-cmb-grp {
    margin: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-elevated);
    overflow: hidden;
  }
  .d-cmb-grp__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-left: 2px solid transparent;
    cursor: pointer;
  }
  .d-cmb-grp.is-selected {
    border-color: var(--accent);
    background: var(--bg-surface);
  }
  .d-cmb-grp.is-selected .d-cmb-grp__head {
    border-left-color: var(--accent);
  }
  .d-cmb-grp__drag {
    font-size: 13px;
    color: var(--text-tertiary);
    cursor: grab;
    flex-shrink: 0;
  }
  .d-cmb-grp__caret {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    font-family: var(--font-mono);
  }
  .d-cmb-grp__body { flex: 1; min-width: 0; }
  .d-cmb-grp__label {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .d-cmb-grp__meta {
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    margin-top: 2px;
  }
  .d-cmb-grp__preview { padding: 4px 16px 10px 44px; border-top: 1px solid var(--border); background: var(--bg-base); }
  .d-cmb-grp.is-collapsed .d-cmb-grp__preview { display: none; }
  .d-cmb-grp__preview-item {
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 3px 0;
  }
  .d-cmb-grp__dragging { opacity: 0.5; }
  .d-cmb__detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .d-cmb__detail-head {
    flex-shrink: 0;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
  }
  .d-cmb__detail-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 16px 24px; background: var(--bg-base); }
  .d-cmb__field { margin-bottom: 20px; }
  .d-cmb__field-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
  .d-cmb__label-input {
    width: 100%;
    max-width: 360px;
    padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-body);
    outline: none;
    box-sizing: border-box;
  }
  .d-cmb__label-input:focus { border-color: var(--accent); }
  .d-cmb__stepper { display: flex; align-items: center; gap: 8px; }
  .d-cmb__step-btn {
    width: 28px;
    height: 28px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
  }
  .d-cmb__step-btn:hover { border-color: var(--accent); }
  .d-cmb__step-val {
    font-size: 15px;
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-weight: 500;
    width: 24px;
    text-align: center;
  }
  .d-cmb__opts {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    overflow: hidden;
  }
  .d-cmb-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .d-cmb-opt:last-child { border-bottom: none; }
  .d-cmb-opt__drag { font-size: 13px; color: var(--text-tertiary); cursor: grab; flex-shrink: 0; }
  .d-cmb-opt__main { flex: 1; min-width: 0; }
  .d-cmb-opt__name-row { display: flex; align-items: center; gap: 8px; }
  .d-cmb-opt__name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .d-cmb-opt__badge {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 9px;
    border-radius: 3px;
    background: var(--info-bg);
    color: var(--info);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
  }
  .d-cmb-opt__meta {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    margin-top: 3px;
  }
  .d-cmb-opt__mod-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .d-cmb-opt__mod-prefix { font-size: 9px; color: var(--text-tertiary); font-family: var(--font-mono); }
  .d-cmb-opt__mod-input {
    width: 64px;
    padding: 6px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-mono);
    text-align: right;
    outline: none;
  }
  .d-cmb-opt__mod-input:focus { border-color: var(--accent); }
  .d-cmb-opt__del {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px 6px;
    background: none;
    border: none;
  }
  .d-cmb-opt__del:hover { color: var(--error); }
  .d-cmb__add-opt {
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--bg-base);
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--accent);
    font-weight: 500;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
  }
  .d-cmb__add-opt:hover { background: var(--bg-elevated); }
  .d-cmb__add-opt-hint { color: var(--text-tertiary); font-weight: 400; margin-left: 8px; }
  .d-cmb__detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 32px;
    gap: 8px;
  }
  .d-cmb__detail-empty-title { font-size: 15px; color: var(--text-primary); font-weight: 500; }
  .d-cmb__detail-empty-text { font-size: 12px; color: var(--text-secondary); max-width: 320px; }
  .d-cmb__search-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
  }
  .d-cmb__search-sheet {
    width: 420px;
    max-height: 400px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .d-cmb__search-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .d-cmb__search-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-body);
    outline: none;
  }
  .d-cmb__search-input:focus { border-color: var(--accent); }
  .d-cmb__search-close {
    font-size: 16px;
    color: var(--text-tertiary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
  }
  .d-cmb__search-results { flex: 1; overflow-y: auto; }
  .d-cmb__search-hit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .d-cmb__search-hit:last-child { border-bottom: none; }
  .d-cmb__search-hit:hover { background: var(--bg-elevated); }
  .d-cmb__search-hit-name { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); } /* Wave 4: shared name type (13px weight-500, tokenised) */
  .d-cmb__search-hit-meta {
    font-size: var(--fs-xs); color: var(--text-tertiary); font-family: var(--font-mono); /* Wave 4: shared meta type (11px mono, tokenised) */
  }
  .d-cmb__search-hit-badge {
    padding: 2px 6px;
    font-size: 9px;
    border-radius: 3px;
    background: var(--info-bg);
    color: var(--info);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
  }
  .d-cmb__search-empty {
    padding: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  .d-cmb__groups { width: 360px; }
}

/* ============================================================
   Desktop — Menu-Item Create drawer CONTENT layout (U11)
   d-mic-* namespace. Form-field arrangement INSIDE the inherited
   m-sl-drawer body. Chrome + side presentation inherited.
   Additive only; mobile (<1024px) untouched.
   ============================================================ */
@media (min-width: 768px) {
  .d-mic-type { margin-bottom: 20px; }
  .d-mic-type__label { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase;
                       letter-spacing: 0.05em; font-weight: 500; margin-bottom: 8px; }
  .d-mic-type__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .d-mic-type__card { padding: 14px; background: var(--bg-elevated); border: 1px solid var(--border);
                      border-radius: var(--radius-lg); cursor: pointer; text-align: left;
                      font-family: var(--font-body); }
  .d-mic-type__card--active { background: var(--bg-surface); border-color: var(--accent); }
  .d-mic-type__card-title { display: block; font-size: 14px; color: var(--text-secondary); font-weight: 500; }
  .d-mic-type__card--active .d-mic-type__card-title { color: var(--text-primary); }
  .d-mic-type__card-sub { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
  .d-mic-type__hint { font-size: 11px; color: var(--text-tertiary); margin-top: 8px; line-height: 1.45; }
  .d-mic-type__hint[hidden] { display: none; }
  .d-mic-field { margin-bottom: 18px; }
  .d-mic-field__label { font-size: 11px; color: var(--text-secondary); font-weight: 500;
                        letter-spacing: 0.03em; margin-bottom: 6px; display: block; }
  .d-mic-field__hint { font-size: 10px; color: var(--text-tertiary); margin-top: 4px; }
  #mi-create-form input[type="text"],
  #mi-create-form textarea,
  #mi-create-form select {
    width: 100%; box-sizing: border-box; padding: 9px 11px;
    background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: 6px;
    color: var(--text-primary); font-size: var(--fs-sm); font-family: var(--font-body);
  }
  #mi-create-form textarea { resize: vertical; min-height: 60px; }
  #mi-create-form select { appearance: auto; cursor: pointer; }
  #mi-create-form input::placeholder,
  #mi-create-form textarea::placeholder { color: var(--text-tertiary); }
  .d-mic-cat-row { display: flex; align-items: center; gap: 8px; }
  .d-mic-cat-row select { flex: 1; }
  .d-mic-cat-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 500;
                     letter-spacing: 0.06em; padding: 2px 5px; border-radius: 3px;
                     background: var(--bg-elevated); color: var(--text-tertiary); white-space: nowrap; }
  .d-mic-cat-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--border-strong); flex-shrink: 0; }
  .d-mic-add-sub { font-size: 11px; color: var(--accent); margin-top: 5px; cursor: pointer;
                   background: none; border: none; padding: 0; font-family: var(--font-body); }
  .d-mic-sub-form { display: none; gap: 8px; margin-top: 8px; }
  .d-mic-sub-form.is-shown { display: flex; }
  .d-mic-sub-form input { flex: 1; }
  .d-mic-cc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .d-mic-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
  .d-mic-affix { position: relative; }
  .d-mic-affix__sym { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
                      font-size: 13px; color: var(--text-tertiary); font-family: var(--font-mono); }
  .d-mic-affix__suf { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
                      font-size: 13px; color: var(--text-tertiary); font-family: var(--font-mono); }
  .d-mic-affix input { padding-left: 24px; font-family: var(--font-mono); }
  .d-mic-footer { display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .d-mic-footer__sub { font-size: 10px; color: var(--text-tertiary); text-align: center; }
}

/* ============================================================
   Desktop — MI Ingredients side-drawer additions (U13)
   d-mi-ing-* namespace. Layered on SHARED m-sl-drawer chrome
   + foundations PART A. The GP footer is shipped .m-mi-footer.
   Steppers reuse .m-mi-combo-stepper. Search is .lc-search.
   Mobile (<1024px) ingredient editing is untouched.
   ============================================================ */
.d-mi-ing-search, .d-mi-ing-results, .d-mi-ing-create,
.d-mi-ing-list, .d-mi-ing-list__head { display: none; }

@media (min-width: 768px) {
  .d-mi-ing-search {
    display: block;
    position: relative;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .d-mi-ing-results {
    display: none;
    position: absolute;
    left: 16px; right: 16px;
    top: 100%;
    z-index: 2;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    max-height: 280px;
    overflow-y: auto;
  }
  .d-mi-ing-results--open { display: block; }
  .d-mi-ing-results__hit {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .d-mi-ing-results__hit:last-child { border-bottom: none; }
  .d-mi-ing-results__hit:hover { background: var(--bg-elevated); }
  .d-mi-ing-results__name { flex: 1; font-size: 13px; color: var(--text-primary); }
  .d-mi-ing-results__meta {
    font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono);
  }
  .d-mi-ing-results__empty {
    padding: 12px; font-size: 12px; color: var(--text-tertiary);
  }
  .d-mi-ing-create {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    border-top: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    cursor: pointer;
  }
  .d-mi-ing-create__icon {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
  }
  .d-mi-ing-create__label { flex: 1; font-size: 13px; color: var(--accent); font-weight: 500; }
  .d-mi-ing-list { display: block; flex: 1; overflow-y: auto; }
  .d-mi-ing-list__head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 12px 16px 8px;
  }
  .d-mi-ing-list__head-label {
    font-size: 10px; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.7px; font-weight: 500;
  }
  .d-mi-ing-list__head-meta {
    font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono);
  }
  .d-mi-ing-line-cost {
    flex: 1; text-align: right;
    font-size: 13px; font-family: var(--font-mono); color: var(--text-secondary);
  }
  .d-mi-ing-remove {
    flex-shrink: 0; padding: 4px 6px; cursor: pointer;
    color: var(--error); font-size: 12px;
    background: none; border: none;
  }
  .d-mi-ing-row-pack {
    font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 2px;
  }
  .d-mi-ing-empty {
    padding: 24px 16px; text-align: center;
    font-size: 12px; color: var(--text-tertiary);
  }
  .d-mi-ing-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }
  .d-mi-ing-row__info { flex: 1; min-width: 0; }
  .d-mi-ing-row__name {
    font-size: 13px; color: var(--text-primary); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ============================================================
   MI Inline-Editable Fields (shared mobile + desktop)
   Transparent-border inputs that look like display text until
   hovered/focused. Used on both the mobile drawer and desktop
   detail panel for name, category, sale price, VAT, notes.
   ============================================================ */
.mi-inline-input {
  width: 100%; box-sizing: border-box; padding: 4px 6px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-sm);
  outline: none; transition: border-color 150ms ease, background 150ms ease;
}
.mi-inline-input:hover:not(:disabled) { border-color: var(--border); }
.mi-inline-input:focus { border-color: var(--accent); background: var(--bg-base); }
.mi-inline-input:disabled { opacity: 1; -webkit-text-fill-color: var(--text-primary); }
.mi-inline-input::placeholder { color: var(--text-tertiary); }

.mi-inline-input--name {
  font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 600;
  letter-spacing: -0.3px; line-height: 1.2; padding: 2px 4px;
}
.mi-inline-input--price {
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 500;
  letter-spacing: -0.3px; width: 90px; text-align: right; padding: 2px 4px;
}
.mi-inline-input--target {
  font-family: var(--font-mono); font-size: var(--fs-sm); width: 48px;
  text-align: right; padding: 2px 4px;
}

.mi-inline-select {
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-sm);
  padding: 4px 20px 4px 6px; outline: none; cursor: pointer;
  transition: border-color 150ms ease;
  appearance: auto;
}
.mi-inline-select:hover:not(:disabled) { border-color: var(--border); }
.mi-inline-select:focus { border-color: var(--accent); }
.mi-inline-select:disabled { opacity: 1; -webkit-text-fill-color: var(--text-primary); cursor: default; }

.mi-inline-select--cat { font-size: var(--fs-xs); color: var(--text-secondary); max-width: 200px; }
.mi-inline-select--vat { font-family: var(--font-mono); width: 64px; }

.mi-inline-textarea {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-sm);
  outline: none; resize: vertical; min-height: 48px; line-height: 1.5;
  transition: border-color 150ms ease, background 150ms ease;
}
.mi-inline-textarea:hover:not(:disabled) { border-color: var(--border); }
.mi-inline-textarea:focus { border-color: var(--accent); background: var(--bg-base); }
.mi-inline-textarea:disabled { opacity: 1; -webkit-text-fill-color: var(--text-primary); }
.mi-inline-textarea::placeholder { color: var(--text-tertiary); }

.mi-inline-price-wrap { display: flex; align-items: baseline; gap: 2px; }
.mi-inline-price-wrap__sym { font-size: var(--fs-xl); color: var(--text-tertiary); font-family: var(--font-mono); }
.mi-inline-target-wrap { display: flex; align-items: center; gap: 2px; }
.mi-inline-target-wrap__suf { font-size: var(--fs-sm); color: var(--text-tertiary); font-family: var(--font-mono); }

/* MI create type-picker popover (desktop — positioned by JS near + button) */
.mi-type-popover { position: fixed; z-index: 200;
                   background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 10px;
                   padding: 14px 16px; width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.mi-type-popover[hidden] { display: none; }
.mi-type-popover__arrow { position: absolute; top: -6px; right: 14px; width: 10px; height: 10px;
                          background: var(--bg-elevated); border-left: 1px solid var(--border-strong);
                          border-top: 1px solid var(--border-strong); transform: rotate(45deg); }
.mi-type-popover__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.mi-type-popover__grid { display: flex; flex-direction: column; gap: 6px; }
.mi-type-popover__btn { background: var(--bg-base); border: 1px solid var(--border); border-radius: 8px;
                        padding: 10px 12px; cursor: pointer; text-align: left; transition: border-color 150ms; }
.mi-type-popover__btn:hover { border-color: var(--accent); background: var(--accent-bg); }
.mi-type-popover__btn-title { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.mi-type-popover__btn-sub { display: block; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }

/* ================================================================
   Info hint + tooltip — shared pattern
   Usage: <span class="m-info-hint" data-tooltip="...">i</span>
   Appears as a subtle "i" indicator; hover shows a styled card tooltip.
   ================================================================ */
.m-info-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  cursor: help;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
}
.m-info-hint:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-secondary);
}
/* Tooltip card — positioned by JS, shared across the app */
.m-tooltip {
  position: absolute;
  width: 260px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.m-tooltip--visible { opacity: 1; }
.m-tooltip__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.m-tooltip__body {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
}
.m-tooltip__body strong { color: var(--text-primary); font-weight: 600; }
.m-tooltip__body em { color: var(--text-tertiary); font-style: italic; }

/* ============================================================
   A11y wave 4 — heading resets + conversion parity (invoice hub)
   Zero-visual-change: <div>→<h1>/<h2> keeps its visual class; we
   only neutralise the UA heading margin. Per DESIGN-LESSONS
   (2026-07-05 wave 3): a class that ALREADY sets font-size/weight
   must NOT get font-size/font-weight:inherit (h1.class specificity
   would flatten the real size). Where the class also sets margin,
   we do NOT touch margin (it owns it); only classes with no margin
   of their own get margin:0.
   ============================================================ */
/* Classes that set font-size/weight AND their own margin → no reset needed
   (.d-iv-me-header__title margin:2px 0, .d-iv-detail-head__title margin:4px 0 2px). */
/* Classes that set font-size/weight but NO margin → kill UA heading margin only. */
h1.m-top-bar__title,
h1.d-iv-ro-header__title,
h2.m-iv-detail-header__inv-no { margin: 0; }
/* Classes that set a partial margin-top only → preserve top, zero the rest. */
h1.m-iv-create-header__title { margin: 2px 0 0; }
h2.m-iv-conf-header__supplier { margin: 2px 0 0; }
/* Section-label classes that set font-size but NOT font-weight → an <h2> would
   inherit the UA bold; pin the (normal) inherited weight. */
h2.m-iv-activity-head__label,
h2.m-iv-conf-activity-section__label { font-weight: inherit; }
/* "Lines · N" heading is a bare heading inside a styled flex header (no
   font-setting class of its own) → neutralise the full UA heading type. */
.m-iv-detail-section__header h2 { margin: 0; font-size: inherit; font-weight: inherit; }

/* Converted <div>→<button> whose visual class sets no `display`: a button
   defaults to inline-block and would shrink. Pin the block flow the div had
   (identical render for any <div> instances of the same class too). */
.m-iv-line-card,
.m-iv-cat-card__head,
.m-iv-cat-card__showall,
.m-iv-pipeline__showall { display: block; width: 100%; }
/* Same intent but the class carries side margins, so fill via block flow only
   (width:100% + side margins would overflow). */
.m-iv-line-empty--add { display: block; }
/* Export-tray submit button wraps the label/sub that were direct form children;
   fill the form cell so the tray reads identically. */
.m-iv-tray__btn > .as-btn { display: block; width: 100%; }

/* Cost-alert rendered as a non-navigating <span> (no invoice_id): keep the
   row look but drop the pointer affordance (no href, not interactive). */
.m-iv-cost-alert--static { cursor: default; }

/* Field-label <div>→<label for> conversions: these label classes set no
   `display`, so an inline <label> would reflow next to its input. Pin the
   stacked block the div had. (Only targets <label> — <div> uses are untouched.) */
label.m-iv-cfield__label,
label.m-iv-field__label,
label.m-iv-ld-section-label,
label.m-iv-deact-note-label,
label.d-iv-me-field__label { display: block; }

/* File-input labels: the input is visually-hidden-but-focusable, so its
   focus ring must surface on the wrapping label (wave-3 :focus-within
   house pattern for flush/hidden controls). */
.m-iv-pdf-strip__link:focus-within,
.m-iv-pdf-attach:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;

/* ===========================================================================
   Org-status banner (Multi-Tenancy Phase 5, 05c — the D3 grace-then-lockout
   surface). Persistent, server-rendered, no-JS account-state notice. Follows
   the .session-banner / .msg-warning tone (soft --warning fill + --warning text
   + a left-border accent — DESIGN-LESSONS #23: real tokens, no raw colours) but
   sits in NORMAL FLOW above the page content on mobile and desktop alike, so it
   never overlaps the fixed bottom-nav at 390px. No dismiss control by design.
   =========================================================================== */
.m-org-status-banner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding: 10px var(--gutter);
  font-size: var(--fs-sm);
  line-height: 1.4;
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
  border-left: 3px solid var(--warning);
}
.m-org-status-banner__icon {
  flex-shrink: 0;
  font-size: var(--fs-base);
}
.m-org-status-banner__msg {
  flex: 1;
}

/* 05c: per-org sidebar logo — capped to the brand line, replaces the text mark
   when logo_url passes the valid_logo fence. No inline styles (house law). */
.sidebar__brand-logo {
  display: block;
  max-height: 28px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}