/* ============================================================================
   Meta Collection · Incoming · shared business views — CardCrow design system.
   Every class the existing view modules render, restyled in the token
   language, plus the redesign's specimen archetype cards.
   ============================================================================ */

/* Legacy button aliases → kit buttons */
.metaPrimaryBtn, .metaSecondaryBtn, .metaDangerBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-md); padding: 0 14px;
  font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: 0.01em;
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.metaPrimaryBtn:active, .metaSecondaryBtn:active, .metaDangerBtn:active { transform: translateY(0.5px) scale(0.995); }
.metaPrimaryBtn {
  background: linear-gradient(var(--gold-400), var(--gold-500));
  color: var(--on-accent); border: 1px solid var(--gold-600);
  box-shadow: var(--edge-top), var(--shadow-sm); font-weight: var(--weight-semibold);
}
.metaPrimaryBtn:hover { filter: brightness(1.06); }
.metaSecondaryBtn {
  background: var(--surface-raised); color: var(--text-primary);
  border: 1px solid var(--border-strong); box-shadow: var(--edge-top);
  font-weight: var(--weight-medium);
}
.metaSecondaryBtn:hover { background: var(--surface-hover); }
.metaDangerBtn {
  background: var(--seal-tint); color: var(--seal-400);
  border: 1px solid var(--seal-600); font-weight: var(--weight-medium);
}
.metaDangerBtn:hover { background: rgba(187,76,64,0.22); }
.metaPrimaryBtn:disabled, .metaSecondaryBtn:disabled, .metaDangerBtn:disabled { opacity: 0.42; cursor: not-allowed; }
.metaSmallBtn { height: var(--control-sm); padding: 0 10px; font-size: var(--text-xs); }

/* Filter controls (selects with mono eyebrow labels) */
.metaControls { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; align-items: flex-end; }
.metaControls label {
  display: flex; flex-direction: column; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); font-weight: var(--weight-regular);
}
.metaControls select, .metaControls input {
  height: var(--control-md); padding: 0 11px; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--surface-raised);
  color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-sm);
  letter-spacing: normal; text-transform: none; outline: none; cursor: pointer;
}
.metaControls input { background: var(--bg-well); cursor: text; }
.metaControls select option { background: var(--stock-850); }

/* ===== Archetype specimen cards (redesign grid) ===== */
.metaTierSection { margin-bottom: 26px; }
.metaTierSection .sectionHead { margin-bottom: 14px; }
.metaGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }

.metaCard {
  text-align: left; cursor: pointer; padding: 0;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--edge-top);
  display: flex; flex-direction: column;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.metaCard:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.metaCardImg {
  height: 116px; position: relative; background: var(--surface-raised) center/cover no-repeat;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 12px;
  overflow: hidden;
}
.metaCardImg.hasArt::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,10,8,0.35) 0%, transparent 38%, rgba(11,10,8,0.55) 100%);
}
.metaCardImg .watermark {
  position: absolute; top: 8px; right: 10px; width: 66px; height: 66px;
  object-fit: contain; opacity: 0.08;
}
.metaCardImg .cardBadges { position: absolute; top: 10px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.metaCardImg .pips { position: relative; z-index: 2; }

.metaCardBody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.metaCardBody h3 {
  margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-semibold);
  letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.15;
}
.metaCardStats {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.metaCardStats .share { color: var(--text-secondary); }
.trendUp { color: var(--success-400); display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 11px; }
.trendDown { color: var(--seal-400); display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 11px; }
.trendFlat { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; }
.metaCardMeters { margin-top: auto; display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.metaCardFoot {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

.tierBadge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  border-radius: var(--radius-xs); white-space: nowrap;
  color: var(--ink-300); background: rgba(180,171,156,0.10); border: 1px solid var(--border-strong);
}
.tierBadge.tier-1 { color: var(--on-accent); background: var(--gold-500); border-color: transparent; }
.tierBadge.tier-2 { color: var(--gold-300); background: var(--gold-tint); border-color: var(--gold-700); }
.tierBadge.tier-3 { color: var(--ink-300); }
.tierBadge.tier-a { color: var(--on-accent); background: var(--gold-500); border-color: transparent; }
.tierBadge.tier-b { color: var(--gold-300); background: var(--gold-tint); border-color: var(--gold-700); }
.tierBadge.tier-c { color: var(--ink-300); }
.tierBadge.tier-d { color: var(--ink-400); }
.staleBadge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-xs);
  color: var(--seal-400); background: var(--seal-tint); border: 1px solid var(--seal-600);
}

/* ===== Modals (Start Building Meta wizard, decklist import) ===== */
.metaModalOverlay {
  position: fixed; inset: 0; background: rgba(6,5,4,0.78); backdrop-filter: blur(3px);
  z-index: 200; display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.metaModal {
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 640px;
}
.metaModalHeader {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.metaModalHeader h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-semibold); }
.metaCloseBtn { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.metaCloseBtn:hover { color: var(--text-primary); }
.metaModalBody { padding: 18px 20px 22px; }
.metaStepLabel {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider); color: var(--gold-400); text-transform: uppercase; margin: 0 0 6px;
}
.metaHint { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 14px; max-width: 760px; }
.metaSearchRow { display: flex; gap: 8px; margin-bottom: 12px; }
.metaSearchRow input, .metaTextarea {
  flex: 1; background: var(--bg-well); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
  padding: 10px 12px; font-size: var(--text-base); outline: none;
}
.metaSearchRow input:focus, .metaTextarea:focus { border-color: var(--gold-500); }
.metaTextarea {
  width: 100%; min-height: 220px; font-family: var(--font-mono); font-size: var(--text-sm);
  margin-bottom: 12px; resize: vertical; box-sizing: border-box;
}
.metaModalActions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.metaSuggestion, .metaConfirmCard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.metaSuggestion p, .metaConfirmCard h3 { margin: 0 0 10px; }
.metaConfirmTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.metaConfirmTable td { padding: 5px 0; border-bottom: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 12.5px; }
.metaConfirmTable td:first-child { color: var(--text-muted); width: 40%; }
.metaMatchList { display: flex; flex-direction: column; gap: 6px; }
.metaMatchItem {
  display: flex; justify-content: space-between; text-align: left;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-primary);
  padding: 9px 12px; border-radius: var(--radius-md); cursor: pointer; font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.metaMatchItem:hover { border-color: var(--border-strong); }
.metaChip {
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  color: var(--info-400); border-radius: var(--radius-pill); padding: 2px 9px;
  font-family: var(--font-mono); font-size: 12px; cursor: pointer; margin: 2px 2px;
}
.metaChip:hover { border-color: var(--info-400); }

.metaPreviewBox {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-top: 10px;
}
.metaPreviewStats { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12.5px; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.metaWarnStat strong { color: var(--seal-400); }
.metaIssueBlock { margin-bottom: 10px; }
.metaIssueTitle { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
.metaIssueBlock ul, .metaDecklistCols ul { margin: 0; padding-left: 18px; font-size: 13px; }

/* ===== Archetype detail ===== */
.metaBackLink {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-muted); text-decoration: none; font-size: 13px;
}
.metaBackLink:hover { color: var(--gold-400); }
.metaDetailHeader { display: grid; grid-template-columns: 160px 1fr; gap: 20px; margin: 16px 0 22px; align-items: start; }
.metaDetailImgCol { display: flex; flex-direction: column; gap: 8px; }
.metaDetailImg {
  width: 160px; height: 160px; border-radius: var(--radius-md);
  background: var(--surface-raised) center/cover no-repeat; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 42px; color: var(--ink-600);
  overflow: hidden;
}
.metaDetailImgActions { display: flex; flex-direction: column; gap: 6px; }
.metaDetailInfo h2 {
  margin: 0 0 8px; font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: var(--weight-semibold); letter-spacing: -0.015em;
}
.metaCardTop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.metaCardRow { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.completionRow { display: flex; gap: 14px; flex-wrap: wrap; }
.metaDetailActions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.metaSection { margin-top: 26px; }
.metaSectionHeader { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.metaSectionHeader h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-semibold); }
.metaDecklistList { display: flex; flex-direction: column; gap: 7px; }
.metaDecklistItem {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 11px 14px;
}
.metaDecklistRow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.metaDecklistRow > span:first-child { font-weight: var(--weight-semibold); font-size: 13.5px; }
.metaDecklistRow .meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.metaDecklistDetail { margin-top: 10px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.metaDecklistCols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.metaDecklistCols ul { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); }

@media (max-width: 640px) {
  .metaDetailHeader { grid-template-columns: 1fr; }
  .metaDetailImg { width: 100%; }
  .metaDecklistCols { grid-template-columns: 1fr; }
}

/* ===== Analysis / search tables ===== */
.metaStatsTable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.metaStatsTable th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: var(--weight-medium);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
.metaStatsTable td {
  padding: 10px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.metaStatsTable td:first-child { font-family: var(--font-sans); font-size: 13.5px; color: var(--text-primary); }
.metaStatsTable tbody tr:hover td { background: color-mix(in srgb, var(--surface-hover) 55%, transparent); }
/* Cards below the inclusion cutoff: visible, but clearly not part of the
   "needed for completion" set. */
.metaStatsTable tbody tr.belowCutoff td { opacity: 0.5; }
.metaStatsTable tbody tr.belowCutoff:hover td { opacity: 0.75; }
.metaTag.metaTagMuted {
  color: var(--text-muted); border-color: var(--border, rgba(255,255,255,0.14));
}

.tableCard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--edge-top);
  padding: 10px 6px; overflow-x: auto;
}

.targetBadge {
  display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px;
  border-radius: var(--radius-pill); background: var(--success-tint);
  border: 1px solid color-mix(in srgb, var(--success-500) 40%, transparent);
  color: var(--success-400); font-family: var(--font-mono);
  font-size: 13px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
}
.targetBadge.overridden { background: rgba(154,124,184,0.14); color: #c79bf0; border-color: rgba(199,155,240,0.45); }

.metaLinkBtn {
  background: none; border: none; color: var(--text-primary); font: inherit;
  font-weight: var(--weight-medium); padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.metaLinkBtn:hover { color: var(--gold-300); }

.metaBreakdownRow td { background: var(--bg-well); font-size: 12px; }
.metaBreakdownRow ul { margin: 4px 0 0; padding-left: 18px; }

.overrideCell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.overrideInput {
  width: 64px; height: 26px; background: var(--bg-well); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0 8px; font-family: var(--font-mono); font-size: 12.5px; text-align: center; outline: none;
}
.overrideInput:focus { border-color: var(--gold-600); }

/* ===== Settings ===== */
.settingsRow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.settingsRow label {
  display: flex; flex-direction: column; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); font-weight: var(--weight-regular);
}
.settingsRow input, .settingsRow select {
  height: var(--control-md); width: 110px; padding: 0 11px;
  background: var(--bg-well); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 14px; outline: none;
  letter-spacing: normal; text-transform: none;
}
.settingsRow select { width: auto; background: var(--surface-raised); font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
.settingsRow input:focus { border-color: var(--gold-500); }
/* Inline checkbox + label (overrides the stacked, full-width defaults above). */
.settingsRow label.settingsCheck {
  flex-direction: row; align-items: center; gap: 10px;
  text-transform: none; letter-spacing: normal; font-family: var(--font-sans);
  font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.settingsRow label.settingsCheck input[type="checkbox"] {
  height: auto; width: auto; cursor: pointer; accent-color: var(--gold-500);
}
#saveStatus, #recalcStatus, #feeSaveStatus, #velocitySaveStatus, #exportStatus, #excludeUnmatchedSaveStatus { margin-top: 10px; }
.settingsSectionTitle h3, .metaSection > .metaSectionHeader h3 { font-family: var(--font-display); }

/* ===== Scraper debug + manual meta entry ===== */
.metaDebugDetails { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.metaDebugDetails summary { cursor: pointer; color: var(--info-400); font-weight: var(--weight-medium); }
.metaDebugDetails .metaConfirmTable { margin-top: 8px; }
.metaDebugSample {
  white-space: pre-wrap; word-break: break-word; background: var(--bg-well);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 10px; font-family: var(--font-mono); font-size: 11.5px; max-height: 160px; overflow-y: auto;
}
.manualEntryGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.manualEntryGrid label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); font-weight: var(--weight-regular);
}
.manualEntryGrid input, .manualEntryGrid select {
  height: var(--control-md); background: var(--bg-well); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 0 10px; font-size: 14px; font-weight: var(--weight-regular);
  text-transform: none; letter-spacing: normal; outline: none;
}
.manualEntryGrid select { background: var(--surface-raised); cursor: pointer; }

/* ===== Global inventory cells (shared by cards / archetype / inventory) ===== */
.invCell { display: flex; flex-direction: column; gap: 5px; min-width: 190px; }
.invNums { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.invNums .invOwned { font-weight: var(--weight-bold); color: var(--text-primary); }
.invIncoming { color: var(--info-400); }
.invStatusRow { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.invBuyBadge { color: var(--gold-400); font-weight: var(--weight-semibold); }
.invSurplusBadge { color: var(--info-400); }
.invOkBadge { color: var(--success-400); font-weight: var(--weight-semibold); }
.invActions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.invActions .metaSecondaryBtn.metaSmallBtn { height: 26px; min-width: 30px; padding: 0 8px; font-family: var(--font-mono); }
.invCorrectForm { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.invCorrectInput {
  width: 64px; height: 28px; background: var(--bg-well); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0 8px; font-family: var(--font-mono); font-size: 12.5px; outline: none;
}
.invCorrectNote {
  flex: 1 1 140px; height: 28px; background: var(--bg-well); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0 8px; font-size: 12.5px; outline: none;
}
.invAddCard { margin-bottom: 16px; }
.invAddCardLabel {
  display: flex; flex-direction: column; gap: 7px; max-width: 360px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); font-weight: var(--weight-regular);
}
.invAddCardInput {
  height: var(--control-md); background: var(--bg-well); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0 11px; font-size: 14px; font-weight: var(--weight-regular);
  text-transform: none; letter-spacing: normal; outline: none;
}
.invAddCardInput:focus { border-color: var(--gold-500); }
.invAddCard .metaMatchList { max-width: 360px; margin-top: 8px; }
.incomingDetail { margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; }
.incomingLine { padding: 2px 0; }

/* ===== Purchase orders ===== */
.orderStatusBadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap;
  color: var(--text-muted); padding: 0; border: 0; background: transparent;
}
.orderStatusBadge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.orderStatusBadge.status-ordered { color: var(--info-400); }
.orderStatusBadge.status-shipped { color: var(--gold-400); }
.orderStatusBadge.status-partially_received { color: #c79bf0; }
.orderStatusBadge.status-received { color: var(--success-400); }
.orderStatusBadge.status-cancelled { color: var(--seal-400); }

.deliveryBadge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong); color: var(--text-muted);
}
/* .dw-overdue is reused by sales.mjs for the "Incomplete cost basis" badge;
   the other delivery-window variants went with the delivery-window drop. */
.deliveryBadge.dw-overdue { color: var(--seal-400); border-color: var(--seal-600); background: var(--seal-tint); }

.orderList { display: flex; flex-direction: column; gap: 10px; }
.orderCard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--edge-top);
  padding: 14px 18px; overflow: hidden;
}
.orderCardTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.orderCardTop h4 { margin: 0; font-size: 15px; font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: 10px; }
.orderCardMeta {
  display: flex; gap: 3px 14px; flex-wrap: wrap; margin-top: 7px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.orderLineTable { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 12px; }
.orderLineTable th {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: var(--weight-medium);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint);
}
.orderLineTable td {
  padding: 8px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.resolveForm { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.resolveForm select, .resolveForm input {
  height: 28px; background: var(--bg-well); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0 8px; font-size: 12.5px; outline: none;
}
.resolveForm select { background: var(--surface-raised); cursor: pointer; }
.resolveForm input[type="number"] { width: 56px; font-family: var(--font-mono); }
.resolveForm input[type="text"] { width: 120px; }
/* Post-receipt correction (migration 033): reuses .resolveForm layout, sits
   below the received line, with a full-width live preview of the FIFO unwind. */
.correctBox:not(:empty) { margin-top: 6px; }
.correctForm { padding-top: 6px; border-top: 1px dashed var(--border-strong); }
.correctPreview { flex-basis: 100%; margin: 2px 0 0; }
.orderFormGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.orderFormGrid label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); font-weight: var(--weight-regular);
}
.orderFormGrid input, .orderFormGrid select {
  height: var(--control-md); background: var(--bg-well); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 0 10px; font-size: 14px; font-weight: var(--weight-regular);
  text-transform: none; letter-spacing: normal; outline: none;
}
.orderFormGrid select { background: var(--surface-raised); cursor: pointer; }

/* ===== History / audit (Phase 10) ===== */
.auditJson {
  background: var(--bg-well); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px; font-family: var(--font-mono); font-size: 12px;
  overflow: auto; max-height: 260px; white-space: pre-wrap;
}
.cardFinancials { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.historyUndoneRow td { opacity: 0.55; }

.metaCardMeters .meter.compact { margin-top: 8px; }

.incomingDelta {
  color: var(--mana-green, #88b889);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-left: 4px;
}
.meterTrack { position: relative; overflow: hidden; }
.meterProjection {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--mana-green, #88b889) 28%, transparent);
  opacity: .65;
}
.meterFill { position: relative; z-index: 1; }

/* ---- Sales import: "Orders in this file" filter ---- */
.salesOrderFilterActions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px;
}
.salesOrderFilter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.salesOrderRow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border, #333);
  border-radius: 8px; background: var(--surface, #141414); cursor: pointer;
}
.salesOrderRow:hover { border-color: var(--gold-700); }
.salesOrderRow input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--gold-500); cursor: pointer; }
.salesOrderRow .salesOrderId {
  font-family: var(--font-mono); font-size: 13px; color: var(--text-primary, #eee);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.salesOrderRow .salesOrderMeta { margin-left: auto; font-size: 11px; color: var(--text-faint, #888); white-space: nowrap; }

/* ===== Quick Fill (semi-manual decklist entry) ===== */
.qfBox { padding: 16px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.qfHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qfProgress { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qfCount { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.qfCount.ok { color: var(--success-400); }
.qfActions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.qfActions .metaPrimaryBtn { min-height: 46px; font-size: 15px; }
.qfPasteWrap { margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.qfPasteWrap .metaTextarea { min-height: 120px; }
.qfMsg { min-height: 18px; font-size: 12.5px; margin-bottom: 8px; color: var(--text-muted); }
.qfMsg.ok { color: var(--success-400); }
.qfMsg.err { color: var(--seal-400); }
.qfStack { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; min-height: 20px; }
.qfChip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12.5px; }
.qfChipName { color: var(--text-primary); }
.qfChipSize { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.qfChipDel { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 50%; }
.qfChipDel:hover { color: var(--seal-400); background: var(--seal-tint); }
.qfFooter { display: flex; gap: 8px; justify-content: flex-end; }
.qfFooter .metaPrimaryBtn { min-height: 44px; }

/* Settings — Danger zone (full inventory wipe) */
.bsDangerZone { border: 1px solid var(--seal-600); border-radius: var(--radius-lg); background: var(--seal-tint); }
.bsWipeCols { display: flex; gap: 28px; flex-wrap: wrap; margin: 4px 0 12px; }
.bsWipeCols > div { flex: 1; min-width: 200px; }
.bsWipeLabel {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 4px;
}
.bsWipeDelete { color: var(--seal-400); }
.bsWipeKeep { color: var(--success-400); }
.bsWipeList { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.65; }
.bsDangerZone code {
  font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: var(--radius-xs);
  background: var(--bg-well); border: 1px solid var(--border-strong); color: var(--gold-300);
}