/* styles/components.css */

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--input-height);
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.btn:hover { background: var(--surface-hover); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary { border-color: var(--border-strong); }
.btn-ghost { background: transparent; }
.btn-danger { background: var(--negative); color: #fff; }
.btn-row-danger {
  border-color: color-mix(in srgb, var(--negative) 42%, var(--border) 58%);
  background: transparent;
  color: var(--negative);
}
.btn-row-danger:hover {
  border-color: color-mix(in srgb, var(--negative) 68%, var(--border) 32%);
  background: color-mix(in srgb, var(--negative) 12%, transparent);
}
.btn-icon {
  width: var(--input-height);
  padding: 0;
}
.btn-plus-cart {
  gap: 9px;
}
.btn-plus-cart-icon {
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}
.btn-plus-cart-icon svg {
  width: 18px;
  height: 18px;
}
.btn-plus-cart-badge {
  position: absolute;
  top: -2px;
  right: -3px;
  display: grid;
  width: 11px;
  height: 11px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

/* === Inputs === */
.input,
.select,
.textarea {
  width: 100%;
  height: var(--input-height);
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.textarea { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label { color: var(--text-muted); font-size: 13px; }
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  max-width: 720px;
  display: grid;
  gap: var(--space-4);
}
.input-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.input-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.input-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.input-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
  .input-row,
  .input-row.cols-2,
  .input-row.cols-3,
  .input-row.cols-4 { grid-template-columns: 1fr; }
}
.photo-picker {
  display: grid;
  gap: var(--space-3);
  align-items: stretch;
}
.photo-preview {
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-hover);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 12px;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-preview-placeholder {
  color: var(--text-faint);
  font-size: 12px;
}
.photo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.sr-only-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.add-inventory-form {
  max-width: 1180px;
}
.add-inventory-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-5);
  align-items: start;
}
.add-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.add-main-panel {
  min-width: 0;
  gap: var(--space-5);
}
.add-side-panel {
  position: sticky;
  top: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.add-panel-head {
  display: grid;
  gap: 4px;
}
.add-panel-head .t-subhead {
  margin: 0;
}
.add-field-zone {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.add-optional-details {
  background: color-mix(in srgb, var(--surface-raised) 62%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.add-optional-details[open] {
  background: var(--surface);
}
.add-optional-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.add-optional-details summary::-webkit-details-marker {
  display: none;
}
.add-optional-details summary::after {
  content: '+';
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
}
.add-optional-details[open] summary::after {
  content: '-';
}
.add-optional-hint {
  color: var(--text-faint);
  font-size: 10px;
  margin-left: auto;
}
.add-optional-body {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
}
.add-panel-head + .add-field-zone,
.add-field-zone:first-child {
  padding-top: 0;
  border-top: 0;
}
.add-dynamic-fields {
  display: grid;
  gap: var(--space-5);
}
.add-optional-group {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* Add Inventory checkbox group — used by the "Auto Update Market Value"
   opt-in row. Checkbox sits left, label + helper copy stack to its right.
   Whole row is a label so clicking anywhere toggles the checkbox.

   Used in:
     - app/views/add.js (Optional valuation zone, market-value row)
   May extend to other opt-in flags later (favorites, alerts, etc.). */
.add-checkbox-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-raised) 50%, var(--surface) 50%);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.add-checkbox-group:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border) 60%);
  background: color-mix(in srgb, var(--surface-raised) 70%, var(--surface) 30%);
}
.add-checkbox-group.is-compact {
  min-height: var(--input-height);
  align-self: end;
  padding: 10px 12px;
}
.add-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}
.add-checkbox-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.add-checkbox-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.add-checkbox-help {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.add-lookup-panel {
  display: grid;
  gap: var(--space-3);
  min-height: 44px;
}
.add-lookup-empty,
.add-lookup-status {
  color: var(--text-muted);
  font-size: 13px;
}
.add-lookup-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.add-lookup-list {
  display: grid;
  gap: var(--space-2);
}
.add-lookup-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.add-lookup-thumb {
  width: 48px;
  height: 64px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface-hover);
  overflow: hidden;
}
.add-lookup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.add-lookup-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.add-lookup-name {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-lookup-meta {
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .add-lookup-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .add-lookup-row .btn {
    grid-column: 1 / -1;
  }
}
.add-save-bar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
@media (max-width: 1100px) {
  .add-inventory-shell {
    grid-template-columns: 1fr;
  }
  .add-side-panel {
    position: static;
    grid-row: 2;
  }
}
@media (max-width: 700px) {
  .add-panel {
    padding: var(--space-4);
  }
  .photo-preview {
    min-height: 220px;
  }
  .photo-actions,
  .add-save-bar {
    grid-template-columns: 1fr;
  }
  .add-save-bar {
    display: grid;
  }
}
.input-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA0AB' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px;
  padding-left: 36px;
}

/* === Chips === */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.chip[data-active="true"] {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
/* Type chips — 18 variants. Use --type-color so views can pick from data. */
.chip-type {
  border-color: var(--type-color, var(--border));
  color: var(--type-color, var(--text-muted));
}
.chip-type[data-active="true"] {
  background: var(--type-color);
  color: #fff;
}
.inventory-page {
  display: grid;
  gap: var(--space-3);
}
.inventory-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--brand) 12%, transparent) 0 28%, transparent 58%),
    color-mix(in srgb, var(--surface) 92%, transparent);
}
.inventory-hero-copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.inventory-hero-copy .t-display-lg {
  margin: 0;
}
.inventory-hero-subtitle {
  margin: 0;
  color: var(--text-muted);
  max-width: 620px;
}
.inventory-hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.inventory-stat-strip {
  display: grid;
  /* 4 stats now (auto-refresh added). On narrower viewports the responsive
     pass below collapses to 2 columns. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.inventory-stats-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}
.inventory-stats-list {
  display: grid;
  gap: 2px;
}
.inventory-stat {
  display: grid;
  gap: 6px;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.inventory-stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  min-height: 34px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.inventory-stat-row:last-child {
  border-bottom: 0;
}
.inventory-stat strong,
.inventory-stat-row strong,
.inventory-stat-autorefresh > span:last-child {
  font-size: 20px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Auto-refresh over-limit state — admin lowered the cap below current
   enrollment. Per spec: do not auto-disable, just visually flag and block
   new enrollments. Yellow warning tone, not red error tone — the count
   isn't an error, it's a settling-in state after a config change. */
.inventory-stat.is-over-limit,
.inventory-stat-row.is-over-limit {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border) 50%);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface) 92%);
}
.inventory-stat.is-over-limit > span:last-child,
.inventory-stat-row.is-over-limit > span:last-child {
  color: var(--warning);
}
.inventory-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.inventory-workspace.no-rail {
  grid-template-columns: 1fr;
}
.inventory-control-rail {
  position: sticky;
  top: var(--space-4);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.inventory-results-panel {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.inventory-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}
.inventory-results-head .t-title {
  margin: 0;
}
.inventory-result-summary {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}
.inventory-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}
.inventory-pagination[hidden] {
  display: none;
}
.inventory-page-status,
.inventory-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.inventory-page-status {
  color: var(--text-muted);
  font-size: 13px;
}
.inventory-page-status strong {
  color: var(--text);
  font-family: var(--font-mono);
}
.inventory-page-size,
.inventory-page-count {
  color: var(--text-faint);
  font-size: 12px;
}
.inventory-page-jump {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
}
.inventory-page-input {
  width: 54px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.inventory-page-input:focus {
  outline: 2px solid var(--brand-soft);
  outline-offset: 2px;
  border-color: var(--brand);
}
.inventory-page-actions .btn {
  min-height: 34px;
  padding: 0 12px;
}
.inventory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}
.inventory-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.inventory-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 0;
}
.inventory-active-filters:empty {
  display: none;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--inventory-tile-min, 220px)), var(--inventory-tile-min, 220px)));
  gap: var(--inventory-grid-gap, 4px);
  align-items: start;
  justify-content: start;
}
.inventory-grid .card.is-mini {
  position: relative;
  width: min(100%, var(--inventory-tile-min, 220px));
  flex-basis: min(100%, var(--inventory-tile-min, 220px));
}
.inventory-grid.is-stack {
  --inventory-grid-gap: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.inventory-grid.is-stack .card.is-mini {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 8px 12px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.inventory-grid.is-stack[data-size="small"] .card.is-mini { height: 60px; }
.inventory-grid.is-stack[data-size="medium"] .card.is-mini { height: 84px; }
.inventory-grid.is-stack[data-size="large"] .card.is-mini { height: 112px; }
.inventory-grid.is-stack .card-art {
  flex: 0 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
}
.inventory-grid.is-stack[data-size="small"] .card-art { width: 44px; }
.inventory-grid.is-stack[data-size="medium"] .card-art { width: 62px; }
.inventory-grid.is-stack[data-size="large"] .card-art { width: 84px; }
.inventory-grid.is-stack .card.is-mini .card-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "chips footer"
    "name footer"
    "meta footer";
  align-items: center;
  gap: 1px 16px;
  flex: 1;
  min-width: 0;
  padding: 0;
}
.inventory-grid.is-stack .card.is-mini .card-type-chips {
  grid-area: chips;
  margin: 0;
  min-width: 0;
}
.inventory-grid.is-stack .card.is-mini .card-name {
  grid-area: name;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-grid.is-stack .card.is-mini .card-meta {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 11px;
}
.inventory-grid.is-stack .card.is-mini .card-footer {
  grid-area: footer;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 2px;
  min-width: 86px;
  margin-left: auto;
}
.inventory-grid.is-stack[data-size="small"] .card.is-mini .card-name { font-size: 13px; }
.inventory-grid.is-stack[data-size="small"] .card.is-mini .card-price { font-size: 13px; }
.inventory-grid.is-stack[data-size="small"] .card.is-mini .card-stock { font-size: 10px; }
.inventory-grid.is-stack[data-size="small"] .card.is-mini .card-meta {
  display: flex;
  font-size: 10px;
  gap: 4px;
}
.inventory-grid.is-stack[data-size="small"] .card.is-mini .type-chip {
  max-width: 160px;
  overflow: hidden;
  font-size: 9px;
  padding: 1px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-grid.is-stack .card.is-mini .rarity-badge {
  top: 4px;
  right: 4px;
  max-width: calc(100% - 8px);
  overflow: hidden;
  padding: 1px 4px;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-grid.is-stack .card.is-mini .quick-add {
  width: 24px;
  height: 24px;
}
.inventory-grid.is-stack .card.is-mini .quick-add svg {
  width: 12px;
  height: 12px;
}
.inventory-grid.is-stack .card.is-mini[data-kind="sealed"] .item-kind-badge,
.inventory-grid.is-stack .card.is-mini[data-kind="supply"] .item-kind-badge,
.inventory-grid.is-stack .card.is-mini[data-kind="custom"] .item-kind-badge {
  display: none;
}
.inventory-grid.is-stack .card.is-mini[data-kind="sealed"] .pack-art-inner {
  justify-content: center;
  padding: 5px;
}
.inventory-grid.is-stack .card.is-mini[data-kind="sealed"] .pack-text-block {
  display: none;
}
.inventory-grid.is-stack .card.is-mini[data-kind="sealed"] .pack-logo-frame {
  flex: 0 1 auto;
  width: 100%;
  height: 100%;
}
.inventory-grid.is-stack .card.is-mini[data-kind="sealed"] .pack-set-mark-fallback {
  width: min(34px, 78%);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.inventory-grid.is-stack[data-size="medium"] .card.is-mini[data-kind="sealed"] .pack-set-mark-fallback {
  width: min(48px, 78%);
  font-size: 17px;
}
.inventory-grid.is-stack[data-size="large"] .card.is-mini[data-kind="sealed"] .pack-set-mark-fallback {
  width: min(64px, 78%);
  font-size: 20px;
}
.inventory-grid.is-stack .card.is-mini[data-kind="supply"] .item-art-inner,
.inventory-grid.is-stack .card.is-mini[data-kind="custom"] .item-art-inner {
  gap: 0;
  padding: 5px;
}
.inventory-grid.is-stack .card.is-mini[data-kind="supply"] .item-art-label,
.inventory-grid.is-stack .card.is-mini[data-kind="custom"] .item-art-label {
  display: none;
}
.inventory-grid.is-stack .card.is-mini[data-kind="supply"] .item-art-initials,
.inventory-grid.is-stack .card.is-mini[data-kind="custom"] .item-art-initials {
  width: min(34px, 78%);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.inventory-grid.is-stack[data-size="medium"] .card.is-mini[data-kind="supply"] .item-art-initials,
.inventory-grid.is-stack[data-size="medium"] .card.is-mini[data-kind="custom"] .item-art-initials {
  width: min(48px, 78%);
  font-size: 17px;
}
.inventory-grid.is-stack[data-size="large"] .card.is-mini[data-kind="supply"] .item-art-initials,
.inventory-grid.is-stack[data-size="large"] .card.is-mini[data-kind="custom"] .item-art-initials {
  width: min(64px, 78%);
  font-size: 20px;
}
.inventory-grid.is-list {
  --inventory-grid-gap: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.inventory-grid.is-list .card.is-mini {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) minmax(118px, auto);
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0 12px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}
.inventory-grid.is-list[data-size="small"] .card.is-mini { min-height: 36px; }
.inventory-grid.is-list[data-size="medium"] .card.is-mini { min-height: 52px; }
.inventory-grid.is-list[data-size="large"] .card.is-mini { min-height: 68px; }
.inventory-grid.is-list .card-art {
  display: none;
}
.inventory-grid.is-list .card-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(110px, 0.8fr) minmax(86px, auto);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
}
.inventory-grid.is-list .card-type-chips {
  margin: 0;
  min-width: 0;
}
.inventory-grid.is-list .card-type-chips .badge {
  display: none;
}
.inventory-grid.is-list .card-name,
.inventory-grid.is-list .card-meta {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-grid.is-list .card-name {
  font-size: 14px;
}
.inventory-grid.is-list .card-meta {
  font-size: 11px;
}
.inventory-grid.is-list .card-footer {
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}
.inventory-grid.is-list .card-price {
  font-size: 13px;
}
.inventory-grid.is-list .card-stock {
  font-size: 11px;
}
.inventory-grid.is-list[data-size="small"] .type-chip {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}
.inventory-grid.is-list[data-size="small"] .card-name,
.inventory-grid.is-list[data-size="small"] .card-price {
  font-size: 12px;
}
.inventory-grid.is-list[data-size="small"] .card-meta,
.inventory-grid.is-list[data-size="small"] .card-stock {
  font-size: 10px;
}
.inventory-grid.is-list .inventory-list-status {
  justify-self: end;
  min-width: 0;
}
.inventory-grid:not(.is-list) .inventory-list-status {
  display: none;
}
.inventory-grid.is-gallery {
  --inventory-grid-gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--inventory-tile-min, 148px)), var(--inventory-tile-min, 148px)));
}
.inventory-grid.is-gallery .card.is-mini {
  width: min(100%, var(--inventory-tile-min, 148px));
  padding: 4px;
}
.inventory-grid.is-gallery .card-art {
  border-radius: var(--radius-sm);
}
.inventory-grid.is-gallery .card-info,
.inventory-grid.is-gallery .inventory-list-status,
.inventory-grid.is-gallery .rarity-badge,
.inventory-grid.is-gallery .item-kind-badge,
.inventory-grid.is-gallery .quick-add {
  display: none;
}
.inventory-status-placeholder {
  color: var(--text-faint);
  font-size: 12px;
}
.inventory-select-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  font-size: 13px;
  font-weight: 800;
}
.inventory-grid.is-selecting .inventory-select-check {
  opacity: 1;
}
.inventory-grid.is-list .inventory-select-check {
  position: static;
  opacity: 1;
}
.card.is-mini.is-selected {
  border-color: color-mix(in srgb, var(--brand) 72%, var(--border));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 38%, transparent);
}
.card.is-mini.is-selected .inventory-select-check {
  background: var(--brand);
  border-color: var(--brand);
}
.inventory-grid.is-selecting .quick-add,
.inventory-grid.is-list .quick-add {
  display: none;
}
.inventory-select-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.inventory-rail-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--input-height);
  padding: 0 var(--space-3);
  border: 1px solid color-mix(in srgb, var(--negative) 58%, var(--border) 42%);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--negative) 10%, transparent);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}
.inventory-rail-add:hover {
  transform: translateY(-1px);
  border-color: var(--negative);
  background: color-mix(in srgb, var(--negative) 18%, transparent);
}
.inventory-rail-add-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--negative);
  color: #fff;
  line-height: 1;
}
.inventory-select-panel.is-active {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 90%, transparent);
}
.inventory-select-toggle {
  width: 100%;
  justify-content: center;
}
.inventory-select-toggle[data-active="true"] {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--text);
}
.inventory-selection-count {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inventory-selection-help {
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.inventory-select-panel.is-active .inventory-selection-count,
.inventory-select-panel.is-active .inventory-selection-help {
  color: color-mix(in srgb, var(--brand) 54%, var(--text-muted) 46%);
}
.inventory-select-panel.is-active .inventory-selection-count {
  border-color: color-mix(in srgb, var(--brand) 36%, var(--border));
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  color: var(--text);
}
.inventory-selection-actions:empty {
  display: none;
}
.inventory-selection-actions {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.inventory-bulk-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.inventory-bulk-actions .btn {
  width: 100%;
  justify-content: center;
  min-height: 36px;
}
.inventory-bulk-actions .inventory-bulk-primary {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 16%, transparent);
}
.inventory-bulk-actions .btn-danger {
  border-color: color-mix(in srgb, var(--negative) 48%, var(--border) 52%);
  background: transparent;
  color: var(--negative);
}
.inventory-bulk-actions .btn-danger:hover {
  background: color-mix(in srgb, var(--negative) 10%, transparent);
}
.inventory-filter-panel {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inventory-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}
.inventory-filter-summary::-webkit-details-marker { display: none; }
.inventory-filter-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.inventory-filter-count {
  color: var(--text-muted);
  font-size: 12px;
}
.inventory-filter-body {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}
.inventory-filter-group {
  display: grid;
  gap: var(--space-2);
}
.inventory-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.inventory-chip-row-dense {
  gap: 6px;
}
.inventory-chip-row-dense .chip {
  min-height: 28px;
  padding-inline: 9px;
  font-size: 11px;
}
.inventory-location-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.inventory-filter-select-field {
  display: grid;
  gap: 6px;
}
.inventory-filter-select-field > span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.inventory-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.inventory-layout-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.inventory-toolbar .inventory-layout-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.inventory-toolbar .inventory-layout-head {
  align-self: center;
  min-width: auto;
}
.inventory-layout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.inventory-layout-value {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.inventory-toolbar .inventory-layout-value {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  font-size: 11px;
}
.inventory-view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.inventory-size-control {
  display: grid;
  gap: var(--space-2);
}
.inventory-toolbar .inventory-size-control {
  display: flex;
  align-items: center;
  min-width: 0;
}
.inventory-toolbar .inventory-sort-control {
  min-width: 210px;
}
.inventory-sort-control .select {
  width: 100%;
}
.inventory-layout-panel[data-view-mode="gallery"] .inventory-size-control:not(.inventory-sort-control) {
  display: none;
}
@media (min-width: 1401px) {
  .inventory-toolbar .inventory-view-toggle {
    flex-wrap: nowrap;
  }
}
.inventory-filter-dropdown {
  position: relative;
  align-self: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.inventory-filter-dropdown .inventory-filter-summary {
  min-height: var(--input-height);
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.inventory-filter-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.inventory-toolbar-icon-glyph {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.inventory-toolbar-icon-glyph svg {
  display: block;
  width: 18px;
  height: 18px;
}
.inventory-quick-filter {
  display: inline-grid;
  place-items: center;
  width: var(--input-height);
  height: var(--input-height);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    box-shadow var(--motion-fast);
}
.inventory-quick-filter:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
}
.inventory-quick-filter[data-active="true"] {
  border-color: color-mix(in srgb, var(--brand) 58%, var(--border) 42%);
  background: color-mix(in srgb, var(--brand) 13%, var(--surface) 87%);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent);
}
.inventory-quick-filter-text {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.language-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--highlight) 48%, var(--border) 52%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--highlight) 12%, transparent);
  color: color-mix(in srgb, var(--highlight) 82%, var(--text) 18%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.inventory-filter-dropdown[open] .inventory-filter-summary,
.inventory-filter-dropdown .inventory-filter-summary:hover {
  border-color: color-mix(in srgb, var(--brand) 46%, var(--border-strong) 54%);
  background: var(--surface-hover);
}
.inventory-filter-dropdown .inventory-filter-body {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(560px, calc(100vw - 48px));
  max-height: min(620px, calc(100vh - 220px));
  overflow: auto;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.38);
}
.inventory-filter-mobile-head {
  display: none;
}
.inventory-filter-search:empty { display: none; }
.inventory-search-pill,
.inventory-filter-pill {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-hover);
  overflow: hidden;
}
.inventory-filter-pill.is-type {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border) 58%);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-hover) 92%);
}
.inventory-search-pill-main,
.inventory-search-pill-clear,
.inventory-filter-pill-main,
.inventory-filter-pill-clear,
.inventory-filter-clear-all {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.inventory-search-pill-main,
.inventory-filter-pill-main {
  min-width: 0;
  padding: 6px 10px 6px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-search-pill-clear,
.inventory-filter-pill-clear {
  width: 30px;
  border-left: 1px solid var(--border);
}
.inventory-search-pill-main:hover,
.inventory-search-pill-clear:hover,
.inventory-filter-pill-main:hover,
.inventory-filter-pill-clear:hover,
.inventory-filter-clear-all:hover {
  color: var(--text);
  background: var(--surface);
}
.inventory-filter-clear-all {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}
/* === Trade Workspace === */
.trade-page {
  display: grid;
  gap: var(--space-4);
}
.trade-head {
  align-items: flex-start;
}
.trade-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.trade-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-4);
  align-items: start;
}
.trade-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.trade-panel,
.trade-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.trade-panel {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.trade-panel-head,
.trade-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.trade-panel-head .t-title,
.trade-summary-header .t-title {
  margin: 0;
}
.trade-default-rate {
  max-width: 220px;
}
.trade-inline-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.trade-inline-input .input {
  min-width: 0;
}
.trade-list {
  display: grid;
  gap: var(--space-3);
}
.trade-empty {
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.trade-empty.compact {
  padding: var(--space-3);
  text-align: left;
}
.trade-row {
  position: relative;
  display: grid;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.trade-row-incoming {
  grid-template-columns: minmax(0, 1fr) 150px auto;
}
.trade-row-outgoing {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}
.trade-row-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.trade-row-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.trade-row-copy span {
  color: var(--text-muted);
  font-size: 12px;
}
.trade-row-money {
  display: grid;
  grid-template-columns: auto 74px auto;
  align-items: end;
  gap: var(--space-3);
  text-align: right;
}
.trade-qty-control {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: left;
}
.trade-rate-box {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}
.trade-rate-note {
  color: var(--text-muted);
  font-size: 12px;
}
.trade-use-default {
  justify-self: start;
  padding-inline: 0;
}
.trade-credit-value {
  font-size: 18px;
}
.trade-row-remove {
  align-self: start;
}
.trade-search-results {
  display: grid;
  gap: var(--space-2);
}
.trade-search-result-wrap,
.add-lookup-result {
  display: grid;
  gap: var(--space-2);
}
.trade-suggestion-section {
  display: grid;
  gap: var(--space-2);
}
.trade-suggestion-section + .trade-suggestion-section {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.trade-suggestion-title {
  color: var(--text-muted);
}
.trade-search-result {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  padding: var(--space-3);
  text-align: left;
  cursor: pointer;
}
.trade-search-result:hover {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
  background: var(--surface-hover);
}
.trade-search-result small {
  color: var(--text-muted);
}
.trade-summary-panel {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-4));
}
.trade-summary-card {
  display: grid;
  gap: var(--space-4);
}
.trade-direction {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface-raised);
}
.trade-direction span {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.trade-direction strong {
  font-size: 26px;
  line-height: 1.1;
}
.trade-direction.tone-positive {
  border-color: color-mix(in srgb, var(--positive) 38%, var(--border));
}
.trade-direction.tone-attention {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
}
.trade-totals,
.trade-summary-fields {
  display: grid;
  gap: var(--space-3);
}
.trade-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-muted);
}
.trade-total-row strong {
  color: var(--text);
}
.trade-complete-btn {
  width: 100%;
}
.trade-warning-text {
  color: var(--warning);
  font-size: 12px;
  margin: 0;
}
.trade-test-toggle {
  justify-self: start;
}
.section-head.compact {
  padding-block-end: var(--space-2);
}
.trade-head.compact {
  margin-bottom: var(--space-1);
}
.trade-lookup-box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.trade-lookup-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.trade-lookup-help,
.trade-search-status {
  color: var(--text-muted);
  font-size: 12px;
}
.trade-added-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-1);
}
.trade-count-pill {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.trade-card-result,
.trade-inventory-result {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
}
.trade-inventory-result {
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
}
.trade-card-thumb {
  width: 38px;
  aspect-ratio: 5 / 7;
  border-radius: 5px;
  background: var(--surface-raised);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}
.trade-card-thumb img,
.trade-picked-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trade-result-main,
.trade-result-price {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.trade-result-main strong,
.trade-result-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trade-result-price {
  text-align: right;
}
.trade-result-action {
  color: var(--brand);
  font-weight: 800;
  font-size: 12px;
}
.trade-row-picked {
  grid-template-columns: 58px minmax(0, 1fr) auto 30px;
  align-items: center;
}
.trade-row-outgoing.trade-row-picked {
  grid-template-columns: 58px minmax(0, 1fr) auto 30px;
}
.trade-picked-media {
  width: 52px;
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-weight: 800;
}
.trade-row-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: var(--space-2);
}
.trade-mini-field,
.trade-credit-box {
  display: grid;
  gap: 4px;
  min-width: 74px;
}
.trade-mini-field > span:first-child,
.trade-credit-box span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trade-mini-field .input {
  width: 96px;
}
.trade-mini-field .trade-inline-input .input {
  width: 72px;
}
.trade-credit-box strong {
  white-space: nowrap;
}
.trade-summary-card .input-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ===== Sub-slice B visual layer: column totals strip + cash field + custom item form =====
   Authored by Claude per the role-split shift. Codex wires data binding, state
   persistence, math, and schema; CSS + DOM structure live here. */

/* Persistent totals strip at the top of each trade column (Customer Gives /
   Vendor Gives). Updates live as items, rates, and cash change. The cash
   value is editable inline — same visual position as the static totals so
   the operator scans the strip left-to-right and sees Market → Credit → Cash
   on Customer side, or Asking → Cash on Vendor side. Cash counts at 100%
   value (not at the trade rate) toward each side's total. */
.trade-column-totals {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.trade-column-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.trade-column-stat > .t-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trade-column-stat strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Cash stat is editable. Visual cue: input replaces the strong tag in the
   same slot, slightly tinted background so the input hit zone is obvious
   without screaming "form field." */
.trade-column-stat.is-input .input {
  height: 28px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 700;
  width: 100%;
  background: var(--surface);
  border-color: var(--border-strong);
}
.trade-column-stat.is-input .input:focus {
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border-strong) 50%);
}

/* "Add custom item" toggle + inline form for non-card Customer Gives intake.
   Toggle is a quiet ghost button below the Pokemon TCG lookup section —
   card lookup stays the dominant flow, custom intake is the secondary path
   for sealed/supply/custom items the customer brings. Form opens inline
   (not modal) for booth speed: one less click between intent and action. */
.trade-add-custom-toggle {
  align-self: start;
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--text-muted);
}
.trade-add-custom-toggle:hover {
  color: var(--text);
}
.trade-add-custom-toggle::before {
  content: '+ ';
  font-weight: 700;
  margin-right: 2px;
}

.trade-custom-form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}
.trade-custom-form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.trade-custom-form-head .t-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trade-custom-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.trade-custom-form-row.cols-1 {
  grid-template-columns: 1fr;
}
.trade-custom-form .input-group label,
.trade-custom-form .input-group > span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.trade-custom-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Below ~720px the column totals collapse into a vertical stack so they
   stay readable on narrow viewports. Custom form fields also drop to single
   column so the inputs aren't squeezed. */
@media (max-width: 720px) {
  .trade-column-totals {
    flex-direction: column;
    gap: var(--space-2);
  }
  .trade-custom-form-row {
    grid-template-columns: 1fr;
  }
}

/* ===== Sub-slice C visual layer: shared review-modal primitive + order code prominence =====
   Authored by Claude. Codex wires modal dispatch in main.js, JS handlers, and
   per-consumer data binding (trade completion / cart checkout). The visual
   shell is shared; each consumer fills the slots with surface-specific
   content. */

/* Review modal — a richer confirmation pattern for transaction commits.
   Used by trade completion and cart checkout. Differs from confirmModal
   (single-line body + 2 buttons) by giving an itemized breakdown the
   operator (and optionally customer) can inspect before committing.

   Pushed onto the modal stack with kind: 'reviewModal' (or 'tradeReview' /
   'cartReview' if you'd rather have surface-specific kinds). Backdrop click
   and ESC dismiss it as cancel. */
.review-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.45);
}
.review-modal-header {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 4px;
}
.review-modal-header .t-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.review-modal-header .t-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.review-modal-body {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  display: grid;
  gap: var(--space-4);
}
.review-modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Direction display — large tone-coded amount for trade confirmations.
   "Customer owes you $12.00" / "You owe customer $12.00" / "Even trade".
   Tone applied via .tone-positive / .tone-attention / .tone-neutral on the
   container. Same tones as the in-workspace direction display so the
   confirmation feels continuous with the workspace. */
.review-direction {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  text-align: left;
}
.review-direction > * {
  min-width: 0;
}
.review-direction.tone-positive {
  border-color: color-mix(in srgb, var(--positive) 40%, var(--border) 60%);
  background: color-mix(in srgb, var(--positive) 6%, var(--surface-raised) 94%);
}
.review-direction.tone-attention {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border) 55%);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-raised) 93%);
}
.review-direction.tone-neutral {
  border-color: var(--border);
  background: var(--surface-raised);
}
.review-direction-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.review-direction-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  text-align: right;
}

/* Section block — for itemized lists (received items, given items, single
   cart line items). Each section has an eyebrow header, optional inline
   subtotal, then a stack of compact rows. */
.review-section {
  display: grid;
  gap: var(--space-2);
}
.review-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.review-section-head .t-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.review-section-subtotal {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
  border-radius: var(--radius-sm);
  align-items: center;
}
.review-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.review-row-main strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-row-main span {
  font-size: 11px;
  color: var(--text-muted);
}
.review-row-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.review-row.is-cash .review-row-main strong::before {
  content: '💵 ';
  margin-right: 2px;
}

/* Totals breakdown — a separate section with explicit math leg labels.
   Used at the bottom of trade reviews to show Customer credit / Vendor
   value / Cash difference / Final amount. Cart reviews use a simpler
   variant with Subtotal / Discount / Total. */
.review-totals {
  display: grid;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.review-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 13px;
}
.review-totals-row > span {
  color: var(--text-muted);
}
.review-totals-row > strong {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
.review-totals-row.is-final {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.review-totals-row.is-final > span {
  color: var(--text);
  font-weight: 700;
}
.review-totals-row.is-final > strong {
  font-size: 18px;
  font-weight: 800;
}

/* Method block — labeled select for trade payment/payout method picking
   inside the review. Last-chance change before commit. Hidden when direction
   is 'even' (no method needed). */
.review-method {
  display: grid;
  gap: 6px;
}
.review-method label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.review-note {
  display: grid;
  gap: 6px;
}
.review-note label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.review-note p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

/* ===== Order code prominence at checkout =====
   When a hosted order is created, the customer-facing code is the
   handoff artifact. Donovan reported he literally couldn't find it.
   Fix: blow it up. Large monospace block with copy affordance, label
   above so the customer knows what to do with it. Lives prominently in
   the cart's hosted order surface — not buried in stat cells. */
.order-code-block {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-raised) 92%);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border) 70%);
  border-radius: var(--radius-md);
  text-align: center;
}
.order-code-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.order-code-value {
  font-family: 'Menlo', 'Monaco', 'SF Mono', 'Courier New', monospace;
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.08em;
  line-height: 1.1;
  user-select: all; /* triple-click selects entire code */
}
.order-code-instructions {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}
.order-code-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.order-code-actions .btn {
  font-size: 13px;
}

@media (max-width: 600px) {
  .review-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 32px);
  }
  .review-modal-header,
  .review-modal-body,
  .review-modal-footer {
    padding: var(--space-3) var(--space-4);
  }
  .order-code-value {
    font-size: 28px;
  }
}

/* ===== Sub-slice D visual layer: editable per-card credit + haggle adjustment =====
   Authored by Claude. Codex wires state, persistence, math integration, and the
   adjustment-shape plumbing into trade records. */

/* Editable per-card credit — Customer Gives rows currently auto-compute credit
   from market × rate. This makes credit ALSO editable. When the operator
   manually overrides credit, a small badge appears on the row indicating
   the value is no longer auto-computed. The badge doubles as the reset
   affordance: clicking it reverts to calculated. Same visual position as
   the existing Market/Rate inputs in trade-row-controls — credit just
   joins them as the third editable field. */
.trade-credit-field .input {
  width: 96px;
  font-weight: 700;
  text-align: right;
}
.trade-credit-field .input.is-manual {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border-strong) 50%);
  background: color-mix(in srgb, var(--warning) 5%, var(--surface) 95%);
}
/* Manual badge — small chip below the input. Shown when credit value diverges
   from market × rate. Click to reset to calculated. */
.trade-credit-manual-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--warning) 12%, var(--surface) 88%);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border) 65%);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: background var(--motion-fast) ease;
}
.trade-credit-manual-badge:hover {
  background: color-mix(in srgb, var(--warning) 22%, var(--surface) 78%);
}
.trade-credit-manual-badge::after {
  content: '↺';
  font-size: 12px;
  font-weight: 800;
  margin-left: 2px;
}

/* Haggle adjustment — lives in the summary panel below the direction display,
   above the totals breakdown. Operator agrees on a different final amount
   than the math computed. Stored as an adjustment line (not a mutation of
   item values), so the trade record preserves both the computed gap and
   the negotiated agreement.

   When inactive: small "Adjust amount" button. When active: a compact field
   that takes the negotiated final amount, computes the delta as an adjustment,
   and shows the delta inline. */
.trade-haggle {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.trade-haggle-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.trade-haggle-head .t-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trade-haggle-toggle {
  font-size: 12px;
  color: var(--brand);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-weight: 600;
}
.trade-haggle-toggle:hover {
  text-decoration: underline;
}
.trade-haggle-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}
.trade-haggle-row label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.trade-haggle-row .input {
  font-weight: 700;
  height: 32px;
}
.trade-haggle-delta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.trade-haggle-delta strong {
  color: var(--text);
  font-weight: 700;
}
.trade-haggle-delta.is-discount strong {
  color: var(--positive);
}
.trade-haggle-delta.is-surcharge strong {
  color: var(--warning);
}

/* ===== Hosted trade payment slice visual layer =====
   Authored by Claude. Codex wires payment capability state, Stripe routing,
   trade record persistence, settings page data, and the Settings → Payments
   admin gating. Visual structure lives here. */

/* Trade receipt — post-completion view of a trade record. Renders inside the
   tradeDetail modal we already built (or a dedicated trade-receipt modal if
   Codex prefers separation). Differs from a sale receipt by showing both
   sides of the exchange plus the cash leg. Top-down read order:
     1. Header: trade id + completion timestamp + void badge if applicable
     2. Direction display (reuses .review-direction palette from the review
        modal — same tone-coded customer-pays / vendor-pays / even visual)
     3. Side-by-side itemized breakdown (Customer gives | Vendor gives)
     4. Cash legs (if non-zero on either side)
     5. Totals breakdown (computed gap, adjustments, final amount)
     6. Method + reference (payment or payout method, Stripe checkout code if
        hosted, customer name/handle, notes)
     7. Audit footer (created/completed timestamps, void info if applicable)
*/
.trade-receipt {
  display: grid;
  gap: var(--space-3);
}
.trade-receipt-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: start;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.trade-receipt-head .t-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trade-receipt-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.trade-receipt-head-meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Stripe checkout code chip — sits in the head-meta row so the operator can
   see and read off the trade code at a glance without scrolling to the
   reference cells at the bottom. Monospace, user-selectable for fast copy. */
.trade-receipt-head-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
  border: 1px solid var(--border);
}
.trade-receipt-head-code .t-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trade-receipt-head-code strong {
  font-family: 'Menlo', 'Monaco', 'SF Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  user-select: all;
}

/* Side-by-side breakdown: customer column | vendor column. Stacks at narrow
   viewports. Reuses .review-section styling from the review modal so the
   visual language is continuous between confirmation and receipt. */
.trade-receipt-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}
.trade-receipt-side {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-height: 0;
  padding: 8px;
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.trade-receipt-side-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.trade-receipt-side-head .t-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trade-receipt-side-subtotal {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.trade-receipt-side-lines {
  display: grid;
  gap: 0;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.trade-receipt-side-lines.is-scrollable {
  max-height: 176px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.trade-receipt-side-lines.is-scrollable::-webkit-scrollbar,
.sales-detail-lines.is-scrollable::-webkit-scrollbar {
  width: 8px;
}
.trade-receipt-side-lines.is-scrollable::-webkit-scrollbar-thumb,
.sales-detail-lines.is-scrollable::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}
.trade-receipt-empty {
  padding: var(--space-4);
}

/* Cash leg row — shown inline within a side when cash > 0. Uses the same
   row treatment as items but with a 💵 prefix to distinguish. */
.trade-receipt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-radius: 0;
  align-items: center;
}
.trade-receipt-item-row {
  min-height: 58px;
  padding: 7px 9px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.trade-receipt-item-row:last-child { border-bottom: 0; }
.trade-receipt-item-row.is-linkable {
  cursor: pointer;
  transition:
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}
.trade-receipt-item-row.is-linkable:hover,
.trade-receipt-item-row.is-linkable:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border) 55%);
  background: color-mix(in srgb, var(--surface-raised) 84%, var(--brand) 16%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent 80%);
  outline: none;
}
.trade-receipt-row.is-cash {
  background: color-mix(in srgb, var(--positive) 6%, var(--surface) 94%);
  border: 1px dashed color-mix(in srgb, var(--positive) 30%, var(--border) 70%);
}
.trade-receipt-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.trade-receipt-item-row .trade-receipt-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.trade-receipt-row-media {
  width: 34px;
  height: 46px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  flex: 0 0 auto;
}
.trade-receipt-row-media.placeholder {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.trade-receipt-row-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.trade-receipt-row-main strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-receipt-row-main span {
  font-size: 11px;
  color: var(--text-muted);
}
.trade-receipt-row-link {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.trade-receipt-row-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.trade-receipt-row.is-cash .trade-receipt-row-main strong::before {
  content: '💵 ';
  margin-right: 2px;
}

/* Reference block — payment method, Stripe checkout code if hosted,
   customer name/handle, notes. Quiet treatment — operator references this
   block for follow-up; it's not the primary content of the receipt. */
.trade-receipt-reference {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
  border-radius: var(--radius-sm);
}
.trade-receipt-reference-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.trade-receipt-reference-cell .t-eyebrow {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trade-receipt-reference-cell strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-receipt-reference-cell.is-code strong {
  font-family: 'Menlo', 'Monaco', 'SF Mono', 'Courier New', monospace;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  user-select: all;
}

/* Audit footer — created/completed timestamps + void info. Smallest text,
   muted color, sits at the very bottom. Audit-trail compliance, not
   primary content. */
.trade-receipt-audit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11px;
}
.trade-receipt-audit-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.trade-receipt-audit-cell strong {
  color: var(--text-muted);
  font-weight: 600;
}

/* Trade Stripe payment lifecycle on in-app trade receipts. */
.trade-payment-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.trade-payment-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.trade-payment-status.is-pending {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface) 86%);
  color: var(--warning);
}
.trade-payment-status.is-processing {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface) 88%);
  color: var(--brand);
}
.trade-payment-status.is-paid {
  background: color-mix(in srgb, var(--positive) 14%, var(--surface) 86%);
  color: var(--positive);
}
.trade-payment-status.is-failed {
  background: color-mix(in srgb, var(--negative) 14%, var(--surface) 86%);
  color: var(--negative);
}
.trade-payment-status.is-refunded {
  background: color-mix(in srgb, var(--text-muted) 14%, var(--surface) 86%);
  color: var(--text-muted);
}
.trade-receipt-row.is-cash .trade-receipt-row-value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.trade-payment-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
}
.trade-payment-banner.is-pending {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border) 65%);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface) 90%);
}
.trade-payment-banner.is-failed {
  border-color: color-mix(in srgb, var(--negative) 35%, var(--border) 65%);
  background: color-mix(in srgb, var(--negative) 10%, var(--surface) 90%);
}
.trade-payment-banner-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.trade-payment-banner-copy strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.trade-payment-banner-copy span {
  font-size: 12px;
  color: var(--text-muted);
}
.trade-payment-banner-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.trade-payment-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
  border: 1px solid var(--border);
  font-family: 'Menlo', 'Monaco', 'SF Mono', 'Courier New', monospace;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
}
.trade-payment-link strong {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all;
}

@media (max-width: 720px) {
  .review-direction {
    align-items: flex-start;
  }
  .review-direction-amount {
    font-size: 16px;
  }
  .trade-receipt-head {
    grid-template-columns: 1fr;
  }
  .trade-receipt-sides {
    grid-template-columns: 1fr;
  }
  .trade-receipt-side-lines.is-scrollable,
  .sales-detail-lines.is-scrollable {
    max-height: 176px;
  }
  .trade-receipt-reference {
    grid-template-columns: 1fr;
  }
  .trade-payment-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .trade-payment-banner-actions {
    justify-content: flex-end;
  }
}

/* Disabled-state styling for hosted/Stripe affordances when capability is
   absent. Used on Cart hosted-checkout button, trade method picker Stripe
   option, and any other surface that gates on payment capability. The disabled
   state shows the affordance but visibly inert, with hover-tooltip-friendly
   styling. */
.btn.is-capability-disabled,
.btn.is-capability-disabled:hover,
.btn.is-capability-disabled:focus-visible {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface);
  color: var(--text-muted);
  border-color: var(--border);
}
.btn.is-capability-disabled .btn-icon-warning {
  margin-left: 4px;
  color: var(--warning);
  font-size: 12px;
}
/* Inline reason copy near disabled affordances — operator sees WHY without
   needing to hover for a tooltip. */
.payment-capability-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface) 92%);
  border: 1px solid color-mix(in srgb, var(--warning) 25%, var(--border) 75%);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
}
.payment-capability-note::before {
  content: '⚠';
  color: var(--warning);
  font-size: 14px;
  flex-shrink: 0;
}
.payment-capability-note a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
}

/* ===== Payment Settings page (admin-only at #/settings/payments) =====
   Authored by Claude — RE-REDRAFTED after Donovan's clarification:
     - No seller-facing Stripe key entry. Sellers won't have Netlify access.
     - Stripe keys stay env-var-only (Option C from the persistence question).
     - Page is admin configuration: status display, enabled toggle, method
       management, per-flow availability.
     - Stripe disabled by default even when keys exist. Admin must explicitly
       toggle on. Cannot toggle on without valid key.
     - Test-mode keys + Stripe enabled = every Stripe payment auto-marks
       isTest. Test-mode warning is mandatory and visible.

   Three sections in vertical sequence:
     1. Stripe (status, mode badge, enabled toggle, test-mode warning, webhook)
     2. Manual Payment Methods (enable/disable, rename built-in, custom methods)
     3. Per-flow availability (cart sales / trade payments / trade payouts)

   Naming: user-facing copy says "Stripe" / "Checkout with Stripe" — never
   "Hosted checkout." That label is gone from the product. CSS class names
   referencing "stripe" are fine; the user never sees them.

   Security posture: secret keys never appear in the DOM. Server config
   exposes only safe status: { configured, mode, enabled, canUse, reason,
   keyLast4 }. */
.payments-page {
  display: grid;
  gap: var(--space-4);
}
.payments-head {
  display: grid;
  gap: 4px;
  margin-bottom: var(--space-2);
}
.payments-head .t-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.payments-head h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}
.payments-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

/* Status banner — shown at top when something needs configuration. Clean
   variant when all configured methods are active. */
.payments-status-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface) 92%);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border) 70%);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 14px;
}
.payments-status-banner.is-clean {
  background: color-mix(in srgb, var(--positive) 6%, var(--surface) 94%);
  border-color: color-mix(in srgb, var(--positive) 28%, var(--border) 72%);
}
.payments-status-banner-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.payments-status-banner.is-clean .payments-status-banner-icon { color: var(--positive); }
.payments-status-banner:not(.is-clean) .payments-status-banner-icon { color: var(--warning); }

/* Section container — each major settings section gets its own card-style
   container so the page reads as discrete configuration surfaces. */
.payments-section {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.payments-section-head {
  display: grid;
  gap: 4px;
}
.payments-section-head .t-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.payments-section-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.payments-section-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* === Section 1: Hosted Payments (Stripe) === */

/* Stripe status row — at-a-glance state. Configured / Not configured / Test
   mode active / Live mode active. Mode badge sits beside status. */
.stripe-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.stripe-status-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.stripe-status-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.stripe-status-state::before {
  content: '●';
  font-size: 10px;
  line-height: 1;
}
.stripe-status.is-configured .stripe-status-state { color: var(--positive); }
.stripe-status.is-configured .stripe-status-state::before { color: var(--positive); }
.stripe-status:not(.is-configured) .stripe-status-state { color: var(--warning); }
.stripe-status:not(.is-configured) .stripe-status-state::before { color: var(--warning); }

.stripe-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stripe-mode-badge.is-test {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface) 86%);
  color: var(--warning);
}
.stripe-mode-badge.is-live {
  background: color-mix(in srgb, var(--positive) 14%, var(--surface) 86%);
  color: var(--positive);
}

.stripe-key-display {
  font-family: 'Menlo', 'Monaco', 'SF Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.stripe-key-display em {
  color: var(--text-muted);
  font-style: normal;
}

/* Stripe action buttons — Test connection. (No "Update keys" — keys are
   env-var-only per Donovan's call; sellers won't have Netlify access.) */
.stripe-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Stripe enabled toggle — independent of "are keys configured." Admin
   explicitly toggles Stripe on for the app. Default off. Cannot enable
   without a valid configured key (toggle disabled in that state with
   inline copy explaining why). */
.stripe-enabled-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.stripe-enabled-toggle.is-blocked {
  opacity: 0.65;
}
.stripe-enabled-toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.stripe-enabled-toggle-copy strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.stripe-enabled-toggle-copy span {
  font-size: 12px;
  color: var(--text-muted);
}

/* Webhook URL display — large monospace block with copy button. Operator
   pastes this into Stripe dashboard's webhook configuration. */
.payment-webhook-block {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.payment-webhook-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.payment-webhook-url {
  font-family: 'Menlo', 'Monaco', 'SF Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: var(--radius-xs);
  user-select: all;
}
.payment-webhook-actions {
  display: flex;
  gap: var(--space-2);
}

/* === Section 2: Manual Payment Methods === */

.manual-methods {
  display: grid;
  gap: var(--space-2);
}
.manual-method-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.manual-method-row.is-disabled {
  opacity: 0.55;
}
.manual-method-row.is-disabled .manual-method-name input,
.manual-method-row.is-disabled .manual-method-handle input {
  pointer-events: none;
}
.manual-method-name input,
.manual-method-handle input {
  font-size: 13px;
  height: 32px;
  width: 100%;
}
.manual-method-name input {
  font-weight: 600;
}
.manual-method-handle input {
  font-family: 'Menlo', 'Monaco', 'SF Mono', 'Courier New', monospace;
  color: var(--text-muted);
}
.manual-method-handle input::placeholder {
  color: var(--text-faint);
  font-family: inherit;
}
.manual-method-remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 16px;
  border-radius: var(--radius-xs);
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.manual-method-remove:hover {
  color: var(--negative);
  border-color: color-mix(in srgb, var(--negative) 25%, transparent);
}
.manual-method-remove[disabled],
.manual-method-remove[disabled]:hover {
  color: var(--text-faint);
  border-color: transparent;
  cursor: not-allowed;
}

.manual-method-add {
  align-self: start;
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--brand);
}
.manual-method-add::before {
  content: '+ ';
  font-weight: 700;
}

.payment-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.payment-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border) 70%);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-raised) 90%);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.payment-tag-chip strong {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
}
.payment-tag-chip:hover {
  border-color: color-mix(in srgb, var(--negative) 45%, var(--border) 55%);
}
.payment-tag-chip:hover strong {
  color: var(--negative);
}
.payment-tags-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.payment-tag-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

/* === Section 3: Per-flow availability matrix === */

.payment-flow-matrix {
  display: grid;
  gap: var(--space-2);
}
.payment-flow-row {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.payment-flow-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.payment-flow-label strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.payment-flow-label span {
  font-size: 11px;
  color: var(--text-muted);
}
.payment-flow-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.payment-flow-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.inventory-image-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--type-color, var(--brand)) 16%, transparent), transparent 48%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface-raised) 88%, transparent), var(--surface));
}
.inventory-image-fallback span {
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 64px;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--type-color, var(--brand)) 28%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-raised) 76%, transparent);
}
.payment-flow-check input[type="checkbox"] {
  margin: 0;
}
.payment-flow-check.is-unavailable {
  color: var(--text-faint);
  cursor: not-allowed;
}
.payment-flow-check.is-unavailable input { cursor: not-allowed; }

/* === Toggle switch primitive ===
   Used by Stripe hosted-payments toggle and manual method enable toggles.
   Larger hit zone than a checkbox, clearer affordance for boolean settings. */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
}
.toggle-switch-track {
  position: absolute;
  inset: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
  pointer-events: none;
}
.toggle-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform var(--motion-fast) ease, background var(--motion-fast) ease;
  pointer-events: none;
}
.toggle-switch input:checked ~ .toggle-switch-track {
  background: color-mix(in srgb, var(--brand) 70%, var(--surface) 30%);
  border-color: color-mix(in srgb, var(--brand) 60%, var(--border) 40%);
}
.toggle-switch input:checked ~ .toggle-switch-thumb {
  transform: translateX(18px);
  background: #fff;
}
.toggle-switch input:focus-visible ~ .toggle-switch-track {
  outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent);
  outline-offset: 2px;
}

/* === Test-mode warning banner ===
   Shown on the Payments page Stripe section when keys are test mode AND
   admin has enabled Stripe. Operator must understand: every Stripe charge
   in this state will be auto-marked isTest, KPI-excluded, and treated as
   non-revenue. Visible AND inline copy in the confirmation modal too. */
.stripe-test-mode-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface) 88%);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border) 65%);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.stripe-test-mode-warning::before {
  content: '⚠';
  color: var(--warning);
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.2;
}
.stripe-test-mode-warning strong {
  color: var(--warning);
  font-weight: 700;
}

/* === Checkout method picker ===
   Reframes the Cart checkout away from "Hosted vs Manual" toward "what
   payment method is the customer using." Each method is a selectable card.
   Selection drives the primary CTA label: "Record sale" for manual methods,
   "Checkout with Stripe" for Stripe.

   Stripe option is hidden entirely unless capability.canUse === true. When
   shown in test mode, gets an inline test-mode badge. Vendor-pays trade
   payouts use the same picker minus the Stripe option. */
.checkout-method-picker {
  display: grid;
  gap: var(--space-2);
}
.checkout-method-picker-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.checkout-method-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}
.checkout-method-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition:
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
  position: relative;
  user-select: none;
}
.checkout-method-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkout-method-option:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border) 70%);
  background: var(--surface-hover);
}
.checkout-method-option.is-selected {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface) 92%);
}
.checkout-method-option:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent);
  outline-offset: 2px;
}
/* Visual indicator dot — fills when selected. */
.checkout-method-option::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.checkout-method-option.is-selected::before {
  border-color: var(--brand);
  background: radial-gradient(circle, var(--brand) 0%, var(--brand) 40%, transparent 50%);
}
/* Test-mode marker beside Stripe option when in test mode. */
.checkout-method-option .test-mode-tag {
  margin-left: auto;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--warning) 18%, var(--surface) 82%);
  color: var(--warning);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.checkout-method-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface);
}
.checkout-method-option.is-disabled:hover {
  border-color: var(--border);
  background: var(--surface);
}

@media (max-width: 720px) {
  .manual-method-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .payment-flow-row {
    grid-template-columns: 1fr;
  }
  .stripe-status {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Shared controls for audit-style logs: Transactions and Trade Log. */
.log-toolbar {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.log-toolbar-row {
  display: flex;
  align-items: end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.log-toolbar-group {
  display: grid;
  gap: 7px;
}
.log-toolbar-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.log-toolbar-select {
  min-width: 170px;
  height: 38px;
}
.log-custom-range {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 12px;
}
.log-custom-range .input {
  width: 150px;
  height: 34px;
}
.log-view-toggle,
.log-range-chips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.log-view-toggle button,
.log-range-chip {
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-muted);
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.log-view-toggle button.is-active,
.log-range-chip.is-active {
  background: color-mix(in srgb, var(--brand) 22%, var(--surface-raised) 78%);
  color: var(--text);
}
.log-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: 12px;
}
.log-page-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.log-page-count {
  min-width: 86px;
  text-align: center;
  color: var(--text-muted);
}
.audit-log-list,
.trade-log-compact-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}
.audit-log-empty {
  padding: var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}
.audit-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, auto) minmax(128px, auto);
  align-items: center;
  gap: 18px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}
.audit-log-row:last-child {
  border-bottom: 0;
}
.audit-log-row.is-clickable {
  cursor: pointer;
  transition: background var(--motion-fast) ease;
}
.audit-log-row.is-clickable:hover,
.audit-log-row.is-clickable:focus-visible {
  background: var(--surface-hover);
  outline: none;
}
.audit-log-row.is-test-record {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, var(--brand) 8%);
}
.audit-log-row.is-hosted-order {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 72%, transparent);
}
.audit-log-row.is-hosted-order.is-featured {
  min-height: 58px;
  background: color-mix(in srgb, var(--surface) 80%, var(--brand) 10%);
  border-bottom-color: color-mix(in srgb, var(--brand) 25%, var(--border) 75%);
}
.audit-log-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}
.audit-log-title-row,
.audit-log-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.audit-log-title-row strong {
  max-width: 220px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.audit-log-meta {
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}
.audit-log-note {
  flex-basis: 100%;
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}
.audit-log-amount {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: right;
}
.audit-log-actions {
  display: flex;
  justify-content: flex-end;
}
.audit-log-actions .row-actions,
.trade-log-actions {
  gap: 8px;
}
.audit-log-actions .btn,
.trade-log-actions .btn {
  height: 32px;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
}

.trade-log-page {
  display: grid;
  gap: var(--space-4);
}
.trade-log-list {
  display: grid;
  gap: var(--space-3);
}
.trade-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, auto) minmax(128px, auto);
  align-items: center;
  gap: 18px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0 14px;
}
.trade-log-row.is-compact {
  min-height: 40px;
}
.trade-log-row:last-child {
  border-bottom: 0;
}
.trade-log-row.is-clickable {
  cursor: pointer;
  transition:
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}
.trade-log-row.is-clickable:hover,
.trade-log-row.is-clickable:focus-visible {
  background: var(--surface-hover);
  outline: none;
}
.trade-log-row.is-voided {
  opacity: 0.72;
}
.trade-log-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.trade-log-title-row,
.trade-log-meta,
.trade-log-items,
.trade-log-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.trade-log-title-row strong {
  max-width: 190px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.trade-log-status {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.trade-log-status.completed {
  color: var(--positive);
  border-color: color-mix(in srgb, var(--positive) 42%, var(--border));
}
.trade-log-status.voided {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
}
.trade-log-meta,
.trade-log-items,
.trade-log-note {
  color: var(--text-muted);
  font-size: 10px;
}
.trade-log-items {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-log-items span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-log-note {
  margin: 0;
}
.trade-log-metric {
  display: grid;
  gap: 3px;
  text-align: right;
}
.trade-log-metric span {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.trade-log-actions {
  display: flex;
  justify-content: flex-end;
}
.trade-log-compact-numbers {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 170px;
  text-align: right;
}
.trade-log-compact-numbers span {
  color: var(--text-muted);
  font-size: 10px;
}
.trade-log-compact-numbers strong {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.trade-detail-modal {
  width: min(980px, calc(100vw - 40px));
  max-height: calc((100vh - 40px) / var(--ui-scale));
  overflow: auto;
}
.trade-detail-stack {
  min-width: 0;
}
.trade-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-right: 44px;
}
/* Picked rows squeeze when all three workspace columns are side-by-side and
   controls (Market/Rate/Credit) intrinsic width (~326px) exceeds available
   copy space. Drop controls to a second row so text doesn't overlap labels.
   Threshold: incoming column needs ~450px for inline controls + minimum copy
   width; that requires viewport > ~1536px (sidebar 280 + content 1256 + sum
   panel 340 + gaps + workspace breathing room). Below ~1100 the workspace
   collapses to single column on its own. The middle band — 1101 to ~1500 —
   is where the squeeze is real. Setting the upper bound at 1500 covers most
   realistic desktop viewports including 1280, 1366, 1440, and browser windows
   around 1512px that still have sidebar/header chrome pressure. */
@media (min-width: 1101px) and (max-width: 1700px) {
  /* Picked rows: drop controls to a second row inside the row, so
     Market/Rate/Credit don't overlap the copy column at this viewport. */
  .trade-row-picked {
    grid-template-columns: 58px minmax(0, 1fr) 30px;
    grid-template-areas:
      "media copy remove"
      "media controls remove";
    align-items: start;
  }
  .trade-row-picked .trade-picked-media { grid-area: media; }
  .trade-row-picked .trade-row-copy { grid-area: copy; }
  .trade-row-picked .trade-row-controls {
    grid-area: controls;
    justify-content: flex-start;
  }
  .trade-row-picked .trade-row-remove { grid-area: remove; }

  /* Workspace columns: stack Customer Gives above Vendor Gives instead of
     side-by-side. Summary panel stays on the right at 340px. Below 1500px
     each column needs full width to avoid input overflow / row crowding;
     summary stays as the operator's persistent reference rail. */
  .trade-columns {
    grid-template-columns: 1fr;
  }
  /* Default rate control sometimes escapes the column header at narrow
     widths because the header is a flex row with no wrap allowed. Force
     wrap so the rate input drops below the heading instead of pushing
     into the next column. */
  .trade-default-rate {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .trade-default-rate .input {
    max-width: 96px;
  }
}
@media (max-width: 1100px) {
  /* Below 1100px the summary panel also collapses to full width.
     Operator works through customer → vendor → summary in vertical sequence
     on small screens. */
  .trade-workspace,
  .trade-columns {
    grid-template-columns: 1fr;
  }
  .trade-summary-panel {
    position: static;
  }
}
@media (max-width: 720px) {
  .log-toolbar {
    gap: var(--space-2);
    padding: 10px;
    border-radius: var(--radius-sm);
  }
  .log-toolbar-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-3);
  }
  .log-toolbar-group {
    min-width: 0;
  }
  .log-toolbar-group:has(.log-range-chips),
  .log-toolbar-group:has(.log-view-toggle),
  .log-toolbar-group:has(.log-custom-range) {
    grid-column: 1 / -1;
  }
  .log-toolbar-select {
    width: 100%;
    min-width: 0;
    height: 38px;
  }
  .log-range-chips,
  .log-view-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .log-range-chip,
  .log-view-toggle button {
    min-height: 40px;
    padding: 8px 10px;
  }
  .trade-row-incoming,
  .trade-row-outgoing,
  .trade-row-money,
  .trade-row-grid {
    grid-template-columns: 1fr;
  }
  .trade-row-picked,
  .trade-row-outgoing.trade-row-picked,
  .audit-log-row {
    grid-template-columns: 1fr;
  }
  .audit-log-list,
  .trade-log-compact-list {
    border-radius: var(--radius-sm);
  }
  .audit-log-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main actions"
      "amount actions";
    align-items: end;
    min-height: auto;
    gap: 8px 12px;
    padding: 12px;
  }
  .audit-log-main {
    grid-area: main;
    display: grid;
    gap: 6px;
  }
  .audit-log-title-row,
  .audit-log-meta {
    flex-wrap: wrap;
    gap: 6px 8px;
    white-space: normal;
  }
  .audit-log-title-row strong {
    max-width: 100%;
    white-space: normal;
  }
  .audit-log-meta span {
    min-width: 0;
  }
  .audit-log-amount {
    grid-area: amount;
    font-size: 15px;
  }
  .audit-log-actions {
    grid-area: actions;
    align-self: end;
  }
  .audit-log-actions .row-actions {
    align-items: flex-end;
  }
  .trade-log-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main actions"
      "numbers actions";
    align-items: end;
    min-height: auto;
    gap: 8px 12px;
    padding: 12px;
  }
  .trade-log-main {
    grid-area: main;
    display: grid;
    gap: 6px;
  }
  .trade-log-title-row,
  .trade-log-meta,
  .trade-log-items {
    flex-wrap: wrap;
    gap: 6px 8px;
    white-space: normal;
  }
  .trade-log-title-row strong {
    max-width: 100%;
    white-space: normal;
  }
  .trade-log-items {
    display: grid;
    gap: 2px;
  }
  .trade-log-items span {
    min-width: 0;
  }
  .trade-log-compact-numbers {
    grid-area: numbers;
    justify-content: flex-start;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .trade-log-actions {
    grid-area: actions;
    align-self: end;
    align-items: flex-end;
    flex-direction: column;
  }
  .trade-row-controls,
  .trade-log-numbers,
  .trade-log-compact-numbers,
  .audit-log-amount {
    justify-content: flex-start;
    text-align: left;
  }
  .log-custom-range {
    align-items: stretch;
    flex-direction: column;
  }
  .log-custom-range .input {
    width: 100%;
  }
  .log-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .log-page-actions {
    justify-content: space-between;
  }
}
@media (max-width: 700px) {
  .section-head {
    margin-bottom: var(--space-3);
  }
  .home-page {
    gap: 16px !important;
  }
  .home-page .table-wrap {
    overflow: visible;
  }
  .home-page .table {
    display: block;
  }
  .home-page .table thead {
    display: none;
  }
  .home-page .table tbody {
    display: grid;
    gap: var(--space-2);
  }
  .home-page .table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "activity amount"
      "meta meta";
    gap: 8px 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
  }
  .home-page .table tr:last-child {
    border-bottom: 0;
  }
  .home-page .table th,
  .home-page .table td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }
  .home-page .table td:nth-child(1),
  .home-page .table td:nth-child(2),
  .home-page .table td:nth-child(4),
  .home-page .table td:nth-child(5) {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }
  .home-page .table td:nth-child(3) {
    grid-area: activity;
    min-width: 0;
    font-weight: 700;
  }
  .home-page .table td:nth-child(6) {
    grid-area: amount;
    align-self: start;
    text-align: right;
    font-size: 14px;
  }
  .home-page .table td:nth-child(1),
  .home-page .table td:nth-child(2),
  .home-page .table td:nth-child(4),
  .home-page .table td:nth-child(5) {
    grid-row: 2;
    color: var(--text-muted);
    font-size: 12px;
  }
  .home-page .table td:nth-child(1) { grid-column: 1; }
  .home-page .table td:nth-child(2) { grid-column: 1; margin-left: 54px; }
  .home-page .table td:nth-child(4) { grid-column: 2; justify-self: end; }
  .home-page .table td:nth-child(5) {
    grid-column: 1 / -1;
    margin-top: 28px;
  }
  .home-page .table .row-type-bar {
    height: 18px;
    margin-right: 8px;
  }
  .home-page .table .set-inline {
    display: block;
    margin: 2px 0 0 12px;
  }
  .home-page .table-wrap {
    overflow: hidden;
  }
  .home-page .table {
    display: none;
  }
  .home-activity-mobile {
    display: grid;
    gap: 0;
  }
  .home-activity-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 68%, transparent);
  }
  .home-activity-card:last-child {
    border-bottom: 0;
  }
  .home-activity-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }
  .home-activity-title {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    font-weight: 800;
    line-height: 1.3;
  }
  .home-activity-title .row-type-bar {
    flex: 0 0 auto;
    height: 18px;
    margin: 0 8px 0 0;
  }
  .home-activity-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .home-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    color: var(--text-muted);
    font-size: 12px;
  }
  .home-activity-age,
  .home-activity-empty {
    color: var(--text-faint);
    font-size: 12px;
  }
  .home-activity-empty {
    padding: 18px;
    text-align: center;
  }
  .trade-page {
    gap: var(--space-3);
  }
  .trade-head.compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-2);
    padding-block-end: 0;
  }
  .trade-head.compact > div:first-child {
    min-width: 0;
  }
  .trade-head-actions {
    justify-content: flex-end;
  }
  .trade-panel,
  .trade-summary-card {
    padding: 14px;
    border-radius: var(--radius-sm);
  }
  .trade-panel {
    gap: var(--space-3);
  }
  .trade-panel-head,
  .trade-summary-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .trade-panel-head .t-title {
    font-size: 26px;
    line-height: 1.15;
  }
  .trade-default-rate {
    max-width: none;
    width: 100%;
  }
  .trade-default-rate .trade-inline-input {
    width: 100%;
  }
  .trade-default-rate .input {
    width: 100%;
    max-width: none;
  }
  .trade-column-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    padding: 10px;
    margin-bottom: 0;
  }
  .trade-column-stat > .t-eyebrow {
    font-size: 10px;
  }
  .trade-column-stat strong {
    font-size: 15px;
  }
  .trade-column-stat.is-input .input {
    width: 100%;
    min-width: 0;
  }
  .trade-lookup-box {
    padding: 12px;
    border-radius: var(--radius-sm);
  }
  .trade-lookup-help,
  .trade-search-status {
    font-size: 13px;
    line-height: 1.4;
  }
  .trade-empty {
    padding: 12px;
    border-radius: var(--radius-sm);
  }
  .inventory-hero {
    align-items: stretch;
    flex-direction: column;
  }
  .inventory-page {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
  }
  .inventory-hero-actions {
    justify-content: stretch;
  }
  .inventory-hero-actions .btn {
    flex: 1;
  }
  .inventory-stat-strip,
  .inventory-workspace {
    grid-template-columns: 1fr;
  }
  .inventory-workspace {
    gap: var(--space-3);
  }
  .inventory-control-rail {
    position: static;
    gap: var(--space-2);
  }
  .inventory-stats-panel,
  .inventory-select-panel {
    padding: var(--space-3);
  }
  .inventory-stats-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px var(--space-3);
  }
  .inventory-stat-row {
    min-height: auto;
    padding: 6px 0;
  }
  .inventory-stat-row strong,
  .inventory-stat-autorefresh > span:last-child {
    font-size: 18px;
  }
  .inventory-rail-add {
    min-height: 44px;
  }
  .inventory-results-head {
    align-items: end;
    flex-direction: row;
    gap: var(--space-3);
  }
  .inventory-filter-actions {
    align-items: stretch;
  }
  .inventory-filter-actions .chip,
  .inventory-filter-actions .btn {
    width: 100%;
  }
  .inventory-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .inventory-toolbar .inventory-layout-panel {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .inventory-toolbar-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-2);
  }
  .inventory-toolbar-actions .inventory-filter-dropdown:only-child {
    width: 100%;
  }
  .inventory-quick-filter,
  .inventory-filter-dropdown .inventory-filter-summary {
    min-height: 44px;
  }
  .inventory-toolbar-actions .inventory-filter-dropdown {
    flex: 1 1 150px;
  }
  .inventory-toolbar .inventory-layout-head,
  .inventory-toolbar .inventory-size-control,
  .inventory-toolbar .inventory-sort-control {
    min-width: 0;
  }
  .inventory-filter-dropdown {
    align-self: stretch;
  }
  .inventory-filter-dropdown .inventory-filter-summary {
    justify-content: center;
  }
  .inventory-filter-dropdown .inventory-filter-body {
    position: fixed;
    top: calc(var(--topbar-height) + 10px);
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 220;
    width: auto;
    max-height: none;
    margin-top: 0;
    padding: 12px;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.62);
  }
  .inventory-filter-mobile-head {
    position: sticky;
    top: -12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: -12px -12px 0;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .inventory-filter-mobile-head strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
  }
  .inventory-filter-close {
    min-height: 34px;
  }
  .inventory-filter-body .inventory-filter-group {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-raised) 62%, transparent);
  }
  .inventory-filter-body .inventory-chip-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .inventory-filter-body .inventory-chip-row-dense {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .inventory-filter-body .chip {
    justify-content: center;
    width: 100%;
    min-height: 38px;
    height: auto;
    padding: 7px 8px;
    text-align: center;
    white-space: normal;
  }
  .inventory-filter-body .inventory-filter-actions {
    position: sticky;
    bottom: -12px;
    margin: 0 -12px -12px;
    padding: 10px 12px 12px;
    background: var(--surface);
  }
  .inventory-active-filters {
    gap: 8px;
  }
  .inventory-active-filters .inventory-search-pill,
  .inventory-active-filters .inventory-filter-pill {
    max-width: 100%;
  }
  .inventory-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .inventory-page-status,
  .inventory-page-actions {
    justify-content: space-between;
    width: 100%;
  }
  .inventory-page-jump {
    flex: 1 1 auto;
    justify-content: center;
  }
  .inventory-page-actions .btn {
    flex: 0 0 auto;
  }
  .inventory-filter-clear-all {
    min-height: 36px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  .inventory-view-toggle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  }
  .inventory-toolbar .inventory-size-control {
    display: grid;
    gap: var(--space-2);
  }
  .inventory-toolbar .inventory-size-control .inventory-view-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .inventory-layout-panel[data-view-mode="list"] .inventory-size-control:not(.inventory-sort-control) {
    display: none;
  }
  .inventory-toolbar .inventory-sort-control {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
  }
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-3);
  }
  .inventory-grid .card.is-mini {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
  }
  .inventory-grid.is-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .inventory-grid.is-gallery .card.is-mini {
    padding: 3px;
  }
  .inventory-grid.is-stack,
  .inventory-grid.is-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .top-value-strip,
  .table-wrap {
    max-width: 100%;
    min-width: 0;
  }
  .table-wrap {
    overflow-x: auto;
  }
}
@media (min-width: 701px) and (max-width: 1400px) {
  .inventory-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .inventory-toolbar .inventory-layout-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(180px, 0.9fr);
    gap: 10px 14px;
  }
  .inventory-toolbar .inventory-layout-head {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .inventory-toolbar .inventory-size-control {
    display: grid;
    gap: var(--space-2);
  }
  .inventory-toolbar .inventory-sort-control {
    min-width: 0;
  }
  .inventory-toolbar-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* === Cards / KPI === */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.card.is-archived {
  opacity: 0.72;
  border-style: dashed;
}
.card.is-deleted {
  opacity: 0.82;
  border-style: dashed;
}
/* KPI cards — ported from V4 mock §591-630 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.kpi:hover { border-color: var(--border-strong); }
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}
.kpi-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.kpi-delta.up { color: var(--positive); }
.kpi-delta.down { color: var(--negative); }

/* === Card art / mini-card / rank chip / rarity badge / quick-add ===
   Ported from card-vault-mock.html lines 729-1093.
   Adds perspective + cursor + halos atop the existing base .card rule
   (line 85) via attribute/class selectors so settings-style cards are
   unaffected. Mock duration tokens swapped to --motion-* per project canon. */
.card[data-type] {
  perspective: 800px;
  cursor: pointer;
}
.card.is-mini {
  perspective: 800px;
  cursor: pointer;
  width: 168px;
  flex: 0 0 168px;
  padding: var(--space-2);
}
.top-value-strip .crown-jewel-card {
  width: 136px;
  flex-basis: 136px;
  padding: 6px;
}
.card.is-mini .card-info {
  gap: 6px;
  padding-top: var(--space-2);
}
.top-value-strip .crown-jewel-card .card-info {
  padding: 8px 4px 2px;
}
.card.is-mini .quick-add {
  width: 28px;
  height: 28px;
}
.card.is-mini .quick-add svg { width: 14px; height: 14px; }
.card.is-mini .rarity-badge {
  font-size: 8px;
  padding: 2px 5px;
}

.card-art {
  position: relative;
  aspect-ratio: 5 / 7;       /* real Pokémon card proportions */
  border-radius: var(--radius-md);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--motion-base) var(--ease-spring),
              box-shadow var(--motion-base) var(--ease-out);
  will-change: auto;
  background: var(--surface-raised);
}
.card.is-mini .card-art:hover,
.card.is-mini .card-art:focus-within {
  transform: translateY(-2px) translateZ(0);
  will-change: transform;
}
.card.is-mini.is-tilting .card-art {
  will-change: transform;
}
.card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* Type-tinted halo — every card has its type's edge tint, always.
   On hover, the halo blooms. Read by data-type attribute. */
.card[data-type] .card-art { box-shadow: 0 0 0 1px color-mix(in srgb, var(--type-color, var(--type-normal)) 32%, transparent), 0 4px 16px -4px color-mix(in srgb, var(--type-color, var(--type-normal)) 20%, transparent); }
.card[data-type="fire"]      .card-art { box-shadow: 0 0 0 1px rgba(240,128,48,0.25),  0 4px 16px -4px rgba(240,128,48,0.15); }
.card[data-type="water"]     .card-art { box-shadow: 0 0 0 1px rgba(104,144,240,0.25), 0 4px 16px -4px rgba(104,144,240,0.15); }
.card[data-type="grass"]     .card-art { box-shadow: 0 0 0 1px rgba(120,200,80,0.25),  0 4px 16px -4px rgba(120,200,80,0.15); }
.card[data-type="electric"]  .card-art { box-shadow: 0 0 0 1px rgba(248,208,48,0.25),  0 4px 16px -4px rgba(248,208,48,0.15); }
.card[data-type="psychic"]   .card-art { box-shadow: 0 0 0 1px rgba(248,88,136,0.25),  0 4px 16px -4px rgba(248,88,136,0.15); }
.card[data-type="ghost"]     .card-art { box-shadow: 0 0 0 1px rgba(112,88,152,0.25),  0 4px 16px -4px rgba(112,88,152,0.15); }
.card[data-type="fighting"]  .card-art { box-shadow: 0 0 0 1px rgba(192,48,40,0.25),   0 4px 16px -4px rgba(192,48,40,0.15); }
.card[data-type="dragon"]    .card-art { box-shadow: 0 0 0 1px rgba(112,56,248,0.25),  0 4px 16px -4px rgba(112,56,248,0.15); }
.card[data-type="normal"]    .card-art { box-shadow: 0 0 0 1px rgba(168,168,120,0.25), 0 4px 16px -4px rgba(168,168,120,0.15); }
.card[data-type="dark"]      .card-art { box-shadow: 0 0 0 1px rgba(112,88,72,0.3),    0 4px 16px -4px rgba(112,88,72,0.2); }

.card[data-type="fire"]     .card-art:hover { box-shadow: 0 0 0 1px rgba(240,128,48,0.6),  0 8px 32px -4px rgba(240,128,48,0.4); }
.card[data-type="water"]    .card-art:hover { box-shadow: 0 0 0 1px rgba(104,144,240,0.6), 0 8px 32px -4px rgba(104,144,240,0.4); }
.card[data-type="grass"]    .card-art:hover { box-shadow: 0 0 0 1px rgba(120,200,80,0.6),  0 8px 32px -4px rgba(120,200,80,0.4); }
.card[data-type="electric"] .card-art:hover { box-shadow: 0 0 0 1px rgba(248,208,48,0.6),  0 8px 32px -4px rgba(248,208,48,0.4); }
.card[data-type="psychic"]  .card-art:hover { box-shadow: 0 0 0 1px rgba(248,88,136,0.6),  0 8px 32px -4px rgba(248,88,136,0.4); }
.card[data-type="ghost"]    .card-art:hover { box-shadow: 0 0 0 1px rgba(112,88,152,0.6),  0 8px 32px -4px rgba(112,88,152,0.4); }
.card[data-type="fighting"] .card-art:hover { box-shadow: 0 0 0 1px rgba(192,48,40,0.6),   0 8px 32px -4px rgba(192,48,40,0.4); }
.card[data-type="dragon"]   .card-art:hover { box-shadow: 0 0 0 1px rgba(112,56,248,0.6),  0 8px 32px -4px rgba(112,56,248,0.4); }
.card[data-type="normal"]   .card-art:hover { box-shadow: 0 0 0 1px rgba(168,168,120,0.6), 0 8px 32px -4px rgba(168,168,120,0.4); }
.card[data-type="dark"]     .card-art:hover { box-shadow: 0 0 0 1px rgba(112,88,72,0.7),   0 8px 32px -4px rgba(112,88,72,0.5); }

.card[data-kind="sealed"] .card-art { box-shadow: 0 0 0 1px rgba(120,200,80,0.25), 0 4px 16px -4px rgba(120,200,80,0.15); }
.card[data-kind="sealed"] .card-art:hover { box-shadow: 0 0 0 1px rgba(120,200,80,0.6), 0 8px 32px -4px rgba(120,200,80,0.4); }
.card[data-kind="supply"] .card-art { box-shadow: 0 0 0 1px rgba(104,144,240,0.22), 0 4px 16px -4px rgba(104,144,240,0.14); }
.card[data-kind="supply"] .card-art:hover { box-shadow: 0 0 0 1px rgba(104,144,240,0.5), 0 8px 32px -4px rgba(104,144,240,0.32); }
.card[data-kind="custom"] .card-art { box-shadow: 0 0 0 1px rgba(200,168,255,0.22), 0 4px 16px -4px rgba(200,168,255,0.14); }
.card[data-kind="custom"] .card-art:hover { box-shadow: 0 0 0 1px rgba(200,168,255,0.5), 0 8px 32px -4px rgba(200,168,255,0.32); }

.card.is-mini[data-kind="card"][data-type] .card-art {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--type-color, var(--type-normal)) 34%, transparent),
    0 8px 22px -12px color-mix(in srgb, var(--type-color, var(--type-normal)) 42%, transparent);
}
.card.is-mini[data-kind="card"][data-type] .card-art:hover,
.card.is-mini[data-kind="card"][data-type] .card-art:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--type-color, var(--type-normal)) 68%, transparent),
    0 0 24px 4px color-mix(in srgb, var(--type-color, var(--type-normal)) 30%, transparent),
    0 14px 36px -16px color-mix(in srgb, var(--type-color, var(--type-normal)) 52%, transparent);
}
.card.is-mini[data-kind="sealed"] .card-art {
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ADDC85 28%, transparent),
    0 8px 22px -12px color-mix(in srgb, #ADDC85 30%, transparent);
}
.card.is-mini[data-kind="sealed"] .card-art:hover,
.card.is-mini[data-kind="sealed"] .card-art:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ADDC85 58%, transparent),
    0 0 20px 2px color-mix(in srgb, #ADDC85 20%, transparent),
    0 14px 34px -16px color-mix(in srgb, #ADDC85 42%, transparent);
}
.card.is-mini[data-kind="supply"] .card-art,
.card.is-mini[data-kind="custom"] .card-art {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--border-strong) 56%, transparent),
    0 8px 18px -14px rgba(0,0,0,0.45);
}
.card.is-mini[data-kind="supply"] .card-art:hover,
.card.is-mini[data-kind="supply"] .card-art:focus-within,
.card.is-mini[data-kind="custom"] .card-art:hover,
.card.is-mini[data-kind="custom"] .card-art:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--border-strong) 78%, transparent),
    0 12px 30px -18px rgba(0,0,0,0.62);
}

/* GLOSS — moving highlight that follows the cursor. */
.card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--gloss-angle, 105deg),
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0) 65%
  );
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
  pointer-events: none;
  z-index: 2;
}
.card.is-mini[data-kind="card"] .card-art:hover::before,
.card.is-mini[data-kind="card"] .card-art:focus-within::before,
.card.is-mini[data-kind="card"].is-tilting .card-art::before { opacity: 1; }
.card.is-mini[data-kind="sealed"] .card-art:hover::before,
.card.is-mini[data-kind="sealed"] .card-art:focus-within::before,
.card.is-mini[data-kind="sealed"].is-tilting .card-art::before { opacity: 0.35; }

/* HOLO SHEEN — animated rainbow foil for rare cards. */
.card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    conic-gradient(
      from var(--holo-angle, 0deg),
      rgba(255, 80, 80, 0.55),
      rgba(255, 220, 80, 0.55),
      rgba(80, 255, 120, 0.55),
      rgba(80, 220, 255, 0.55),
      rgba(120, 80, 255, 0.55),
      rgba(255, 80, 200, 0.55),
      rgba(255, 80, 80, 0.55)
    );
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
/* Holo only appears on rare+ rarities */
.card.is-mini[data-kind="card"][data-rarity="holo"] .card-art:hover::after,
.card.is-mini[data-kind="card"][data-rarity="holo"] .card-art:focus-within::after,
.card.is-mini[data-kind="card"][data-rarity="holo"].is-tilting .card-art::after { opacity: 0.35; }
.card.is-mini[data-kind="card"][data-rarity="ex"] .card-art:hover::after,
.card.is-mini[data-kind="card"][data-rarity="ex"] .card-art:focus-within::after,
.card.is-mini[data-kind="card"][data-rarity="ex"].is-tilting .card-art::after { opacity: 0.55; }
.card.is-mini[data-kind="card"][data-rarity="full-art"] .card-art:hover::after,
.card.is-mini[data-kind="card"][data-rarity="full-art"] .card-art:focus-within::after,
.card.is-mini[data-kind="card"][data-rarity="full-art"].is-tilting .card-art::after { opacity: 0.75; }
.card.is-mini[data-kind="card"][data-rarity="rainbow"] .card-art:hover::after,
.card.is-mini[data-kind="card"][data-rarity="rainbow"] .card-art:focus-within::after,
.card.is-mini[data-kind="card"][data-rarity="rainbow"].is-tilting .card-art::after { opacity: 0.95; }
.card.pack .card-art::after,
.card[data-kind="supply"] .card-art::after,
.card[data-kind="custom"] .card-art::after { display: none; }
.inventory-grid.is-stack .card-art:hover,
.inventory-grid.is-stack .card-art:focus-within {
  transform: none;
}
.inventory-grid.is-stack .card-art::before,
.inventory-grid.is-stack .card-art::after {
  display: none;
}

/* CARD INFO (text below art — stays static, doesn't tilt) */
.card-info {
  padding: var(--space-3) var(--space-2) var(--space-1);
}

.rarity-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  color: white;
  z-index: 3;
  pointer-events: none;
}
.rarity-badge.holo { color: #FFD580; }
.rarity-badge.ex { color: #FFB76B; background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(240,128,48,0.4)); }
.rarity-badge.full-art { color: #C8A8FF; background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(123,97,255,0.5)); }
.rarity-badge.rainbow {
  color: white;
  background: linear-gradient(135deg,
    rgba(255,80,80,0.65),
    rgba(255,220,80,0.65),
    rgba(80,255,120,0.65),
    rgba(80,220,255,0.65),
    rgba(120,80,255,0.65),
    rgba(255,80,200,0.65));
  background-size: 200% 200%;
}
@keyframes rainbow-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Motion opt-out keeps the final static treatment but removes hover travel and
   animation for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .card.is-mini,
  .card.is-mini *,
  .holo-card,
  .holo-card::after,
  .modal-content.card-detail,
  .rarity-badge.rainbow {
    transition: none !important;
    animation: none !important;
  }
  .card.is-mini .card-art:hover,
  .card.is-mini .card-art:focus-within,
  .holo-card:hover {
    transform: none !important;
  }
}

.item-kind-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 9999px;
  border: 1px solid currentColor;
  pointer-events: none;
}
.item-kind-badge.sealed { color: #ADDC85; background: rgba(120,200,80,0.14); }
.item-kind-badge.supply { color: #A8B8F8; background: rgba(104,144,240,0.14); }
.item-kind-badge.custom { color: #C8A8FF; background: rgba(123,97,255,0.14); }

.pack-art {
  background: linear-gradient(165deg, #2a2d33 0%, #15171b 50%, #07080a 100%);
}
.pack-art-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4) var(--space-4);
}
.pack-logo-frame {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
}
.pack-set-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)) drop-shadow(0 0 12px rgba(0,0,0,0.25));
}
.pack-set-mark-fallback {
  display: grid;
  place-items: center;
  width: min(96px, 78%);
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.pack-text-block {
  flex: 0 0 auto;
  margin-top: var(--space-3);
}
.pack-product-line {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.56);
  margin-bottom: 2px;
}
.pack-product-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.item-art {
  background: linear-gradient(165deg, var(--surface-raised) 0%, var(--surface) 58%, #08090d 100%);
}
.item-art-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
}
.item-art-initials {
  display: grid;
  place-items: center;
  width: 72px;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.item-art-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.detail-generic-visual {
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--detail-accent) 22%, transparent), transparent 46%),
    linear-gradient(165deg, var(--surface-raised) 0%, var(--surface) 56%, #08090d 100%);
  border-color: color-mix(in srgb, var(--detail-accent) 34%, var(--border) 66%);
}
.detail-generic-visual .item-art-inner {
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
}
.detail-generic-visual .item-art-initials {
  width: 132px;
  border-color: color-mix(in srgb, var(--detail-accent) 38%, var(--border) 62%);
  background: color-mix(in srgb, var(--detail-accent) 10%, var(--surface-hover) 90%);
  color: color-mix(in srgb, var(--detail-accent) 52%, var(--text) 48%);
  font-size: 42px;
}

/* Quick-add button sits on the bottom-right of any tile art and fades in when
   the parent tile is hovered or the button is keyboard-focused. */
.quick-add {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
  z-index: 4;
}
.card-art:hover .quick-add,
.card-art:focus-within .quick-add,
.quick-add:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.quick-add:hover {
  background: var(--brand);
  color: white;
  transform: translateY(-1px);
}
.quick-add:active { transform: scale(0.94); }
.quick-add svg { width: 16px; height: 16px; }
.quick-add:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Top Value strip — Home page showcase row. Horizontal flex of mini cards. */
.top-value-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: visible;
  padding: var(--space-3) var(--space-2) var(--space-4);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.top-value-strip::-webkit-scrollbar { height: 8px; }
.top-value-strip::-webkit-scrollbar-track { background: transparent; }
.top-value-strip::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 9999px;
}
.top-value-strip > .card { scroll-snap-align: start; }
@media (max-width: 700px) {
  .top-value-strip .crown-jewel-card {
    width: 124px;
    flex-basis: 124px;
  }
  .top-value-strip .crown-jewel-card .card-name {
    min-height: 29px;
    font-size: 12px;
  }
  .top-value-strip .crown-jewel-card .card-price {
    font-size: 13px;
  }
}

/* Rank chip — small leaderboard marker, top-left of card-art.
   Mock only defines .gold; .silver and .bronze added per plan line 1124. */
.rank-chip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: var(--text);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.rank-chip.gold {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(255, 200, 80, 0.55));
  color: #FFE5A8;
}
.rank-chip.silver {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(200, 200, 210, 0.55));
  color: #E0E5EE;
}
.rank-chip.bronze {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(180, 120, 80, 0.55));
  color: #F0C8A0;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.quick-action {
  display: grid;
  grid-template-columns: 40px 1fr 16px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon label arrow"
    "icon desc  arrow";
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition:
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}
.quick-action:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  transform: translateY(-1px);
}
.quick-action:hover .quick-action-arrow { color: var(--brand); transform: translateX(2px); }
.quick-action-icon {
  grid-area: icon;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.quick-action-label {
  grid-area: label;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.quick-action-desc {
  grid-area: desc;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.quick-action-arrow {
  grid-area: arrow;
  color: var(--text-muted);
  transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

/* === Holographic card === */
.holo-card {
  --holo-size: 160px;
  width: var(--holo-size);
  aspect-ratio: 5 / 7;
  border-radius: 12px;
  background:
    linear-gradient(135deg, var(--type-color, #444) 0%, transparent 60%),
    var(--surface-raised);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--motion-base) var(--ease-spring),
              box-shadow var(--motion-base) var(--ease-out);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--type-color, var(--border)) 42%, transparent),
    0 18px 48px -22px color-mix(in srgb, var(--type-color, var(--brand)) 42%, transparent);
}
/* Rarity-tier hover effects (Task 10) — drive via data-rarity attribute set
   by detail.js. Common is static-ish, holo/reverse get gentle gloss + tilt,
   ultra/alt-art/special get full sheen + bigger tilt + animated gradient. */
.holo-card[data-rarity="common"]:hover  { transform: scale(1.01); }
.holo-card[data-rarity="holo"]:hover,
.holo-card[data-rarity="ex"]:hover { transform: rotate(1deg) scale(1.03); }
.holo-card[data-rarity="full-art"]:hover,
.holo-card[data-rarity="rainbow"]:hover { transform: rotate(2deg) scale(1.05); }

.holo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.38) 50%,
    transparent 70%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
  pointer-events: none;
  z-index: 2;
}
.holo-card:hover::before { opacity: 0.75; }

.holo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    rgba(255, 80, 80, 0.55),
    rgba(255, 220, 80, 0.55),
    rgba(80, 255, 120, 0.55),
    rgba(80, 220, 255, 0.55),
    rgba(120, 80, 255, 0.55),
    rgba(255, 80, 200, 0.55),
    rgba(255, 80, 80, 0.55)
  );
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.holo-card[data-rarity="holo"]:hover::after { opacity: 0.35; }
.holo-card[data-rarity="ex"]:hover::after { opacity: 0.55; }
.holo-card[data-rarity="full-art"]:hover::after { opacity: 0.75; }
.holo-card[data-rarity="rainbow"]:hover::after { opacity: 0.95; }

/* Ultra / alt-art / special: replace the hover-only sheen with a continuous
   animated sheen that rides over the card art whether or not it's hovered. */
.holo-card[data-rarity="full-art"]::after,
.holo-card[data-rarity="rainbow"]::after {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.48), transparent 22%),
    conic-gradient(
      from var(--holo-angle, 0deg),
      rgba(255, 80, 80, 0.68),
      rgba(255, 220, 80, 0.68),
      rgba(80, 255, 120, 0.68),
      rgba(80, 220, 255, 0.68),
      rgba(120, 80, 255, 0.68),
      rgba(255, 80, 200, 0.68),
      rgba(255, 80, 80, 0.68)
    );
}
@keyframes holo-sheen {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}

/* === Card detail modal (Task 10) — no V4 mock equivalent; designed per
   v6 redesign §5.2: 320×448 holo on left, full metadata + actions on right,
   type-color tinted accents via inline --type-color var. Stacks vertically
   on narrow viewports. */
.modal-content.card-detail {
  display: grid;
  grid-template-columns: minmax(400px, 460px) minmax(0, 1fr);
  gap: 40px;
  padding: 40px;
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  position: relative;
  /* Type-tinted top edge accent — picks from the inline --type-color var. */
  border-top: 2px solid var(--detail-accent, var(--type-color, var(--border)));
  /* Scoped --ui-scale guard — overrides .modal-content base max-height so the
     zoomed render stays inside the viewport. Same calc pattern as .app-shell
     and .auth-screen in layout.css. Base rule is left untouched (Task 15). */
  max-height: calc((100vh - 32px) / var(--ui-scale));
}
.modal-content.card-detail.is-entering {
  animation: detail-modal-in 160ms var(--ease-out);
}
@keyframes detail-modal-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Mobile: full-screen modal + vertical stack. Consolidated here (rather than
   layout.css) so the component's responsive rules live with its definition.
   Scoped to .card-detail since .holo-card is only used inside this modal. */
@media (max-width: 980px) {
  .modal-content.card-detail {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh / var(--ui-scale));
    max-height: calc(100vh / var(--ui-scale)) !important;
    border-radius: 0;
    padding: var(--space-5);
  }
  .modal-content.card-detail .holo-card {
    margin-inline: auto;
    --holo-size: min(280px, 70vw) !important;
  }
  .modal-content.card-detail .card-detail-meta {
    width: min(560px, calc(100vw - 48px));
  }
  .modal-content.card-detail .card-detail-actions {
    position: static;
    background: transparent;
  }
}
.card-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.card-detail-visual-stage {
  position: relative;
  display: grid;
  place-items: start center;
  min-width: 0;
  isolation: isolate;
}
.card-detail-visual-stage::before {
  content: "";
  position: absolute;
  inset: -28px -36px auto;
  height: 72%;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--detail-accent, var(--brand)) 34%, transparent) 0%,
    transparent 68%
  );
  filter: blur(18px);
  opacity: 0.82;
  pointer-events: none;
  z-index: -1;
}
.card-detail-meta.is-editing {
  margin: calc(-1 * var(--space-4));
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--warning) 26%, var(--border) 74%);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 5%, var(--surface) 95%);
}
.card-detail-header {
  display: grid;
  gap: var(--space-2);
}
.card-detail-eyebrow {
  color: var(--text-muted);
}
.card-detail-header .t-display {
  margin: 0;
}
.card-detail-subtitle {
  color: var(--text-muted);
  margin: 0;
}
.card-detail-title-input {
  height: 48px;
  font-size: 24px;
  font-weight: 700;
}
.card-detail-meta .rarity-badge {
  /* Override the absolutely-positioned card-art badge: in detail meta the
     badge sits inline at the top of the right column. */
  position: static;
  align-self: flex-start;
}
.card-detail-meta .item-kind-badge {
  position: static;
  align-self: flex-start;
}
.detail-item-visual {
  width: min(360px, 70vw);
  aspect-ratio: 5 / 7;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}
.detail-image-visual {
  display: grid;
  place-items: center;
  background: var(--surface-raised);
}
.detail-image-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-image-visual.sealed img {
  object-fit: contain;
  padding: var(--space-3);
  background: var(--surface);
}
.detail-sealed-visual {
  display: grid;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--detail-accent) 30%, transparent), transparent 40%),
    linear-gradient(160deg, #262a2f 0%, #15171c 52%, #07080a 100%);
}
.detail-sealed-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  justify-items: center;
  height: 100%;
  padding: var(--space-5);
  text-align: center;
}
.detail-sealed-eyebrow {
  color: color-mix(in srgb, var(--detail-accent) 58%, var(--text-muted) 42%);
}
.detail-sealed-logo-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 78%;
  min-height: 38%;
}
.detail-sealed-logo-stage > * {
  grid-area: 1 / 1;
}
.detail-sealed-logo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
}
.detail-sealed-initials {
  display: grid;
  place-items: center;
  width: min(150px, 82%);
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--detail-accent) 38%, rgba(255,255,255,0.18) 62%);
  background: color-mix(in srgb, var(--detail-accent) 12%, rgba(255,255,255,0.06) 88%);
  color: rgba(255,255,255,0.88);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.detail-sealed-copy {
  display: grid;
  gap: var(--space-1);
}
.detail-sealed-copy strong {
  font-size: 24px;
  line-height: 1.05;
}
.detail-sealed-copy span {
  color: var(--text-muted);
  font-size: 13px;
}
.detail-note-text {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
  line-height: 1.5;
  white-space: pre-wrap;
}
.card-detail-section {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.card-detail-section-title {
  color: var(--text-muted);
}
.field-hint,
.detail-image-hint {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.card-detail-operational {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.card-detail-code-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 52%, transparent);
}
.card-detail-code-strip strong {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.card-detail-operational.is-editing {
  align-items: end;
}
.card-detail-operational.is-editing > div {
  flex: 1;
}
.card-detail-price-block {
  display: grid;
  gap: var(--space-1);
}
.card-detail-quantity-chip {
  display: grid;
  gap: 2px;
  min-width: 78px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--detail-accent) 28%, var(--border) 72%);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--detail-accent) 8%, var(--surface) 92%);
}
.card-detail-quantity-chip strong {
  font-size: 18px;
}
.card-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: 0;
}
.card-detail-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-detail-location-editor .card-detail-stats.compact {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.card-detail-location-editor .field {
  min-width: 0;
}
.card-detail-stats > .detail-checkbox-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 36%, transparent);
  cursor: pointer;
}
.detail-checkbox-field input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--brand);
}
.detail-checkbox-copy {
  display: grid;
  gap: 2px;
}
.detail-checkbox-copy strong {
  font-size: 13px;
}
.detail-checkbox-copy span {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.card-detail-stats strong {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

/* Market refresh control row — sits in the Valuation section on card
   detail. Auto-update toggle on the left, manual "Refresh price" button
   on the right. Card-only per the spec lock. */
.card-detail-market-refresh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.card-detail-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.card-detail-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}
.card-detail-toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.card-detail-toggle-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.card-detail-toggle-copy span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}
.card-detail-refresh-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.card-detail-price {
  font-size: 38px;
  line-height: 1;
  font-weight: 800;
  margin-top: 0;
  color: var(--detail-accent, var(--type-color, var(--text)));
}
.card-detail-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  background: linear-gradient(to top, var(--surface-raised) 82%, transparent);
}
.card-detail-meta.is-editing .card-detail-actions {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--warning) 5%, var(--surface) 95%) 82%,
    transparent
  );
}
.detail-image-editor {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}
.detail-image-thumb {
  width: 88px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.detail-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-image-editor-copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.detail-image-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* === Tables === */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table th, .table td {
  padding: 12px var(--row-pad);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.table th {
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
}
.table tr:hover td { background: var(--surface-hover); }

/* === Lists === */
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--row-pad);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.list-row:hover { background: var(--surface-hover); }

/* === Modals === */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: grid;
  place-items: center;
  z-index: 30;
  animation: fade-in var(--motion-fast) ease;
}
.modal-content {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(var(--modal-max-width), calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.confirm-modal {
  display: grid;
  gap: var(--space-5);
  width: min(460px, calc(100vw - 32px));
  padding: var(--space-6);
  border-top: 2px solid var(--border);
}
.confirm-modal.tone-warning {
  border-top-color: var(--warning);
}
.confirm-modal.tone-danger {
  border-top-color: var(--negative);
}
.confirm-copy {
  display: grid;
  gap: var(--space-2);
}
.confirm-body {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.whats-new-modal {
  display: grid;
  gap: var(--space-4);
  width: min(500px, calc(100vw - 32px));
  padding: var(--space-6);
  border-top: 2px solid var(--highlight);
}
.whats-new-head {
  display: grid;
  gap: 6px;
}
.whats-new-head .t-title {
  margin: 0;
}
.whats-new-head p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}
.whats-new-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.whats-new-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.whats-new-item:last-child {
  border-bottom: 0;
}
.whats-new-dot {
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--highlight);
}
.whats-new-item strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}
.whats-new-item p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.whats-new-actions {
  display: flex;
  justify-content: flex-end;
}
.sales-detail-modal {
  position: relative;
  width: min(740px, calc(100vw - 32px));
  max-height: calc((100vh - 32px) / var(--ui-scale));
  overflow: auto;
  padding: 18px;
}
.trade-detail-modal {
  width: min(860px, calc(100vw - 32px));
}
.sales-detail-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: 20px;
  line-height: 1;
}
.sales-detail-stack {
  display: grid;
  gap: var(--space-2);
  padding-right: 0;
}
.sales-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sales-detail-header .t-display {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}
.sales-detail-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.sales-test-toggle,
.cart-test-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 13px;
}
.sales-test-toggle {
  justify-self: start;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, #a78bfa 32%, var(--border) 68%);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #a78bfa 10%, var(--surface) 90%);
}
.sales-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, black 12%);
}
.sales-detail-stat {
  background: transparent;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0;
  min-height: 46px;
  padding: 6px 9px;
  display: grid;
  align-content: center;
  gap: 3px;
}
.sales-detail-stat strong {
  font-size: 13px;
}
.sales-detail-grid > .sales-detail-stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.record-date-editor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 82%, var(--surface-raised) 18%);
}
.record-date-editor-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.record-date-editor-copy strong {
  font-size: 14px;
  color: var(--text);
}
.record-date-editor-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.record-date-editor-controls .input {
  min-width: 210px;
  min-height: 34px;
  height: 34px;
}
.record-date-editor-controls .btn {
  min-height: 34px;
  height: 34px;
  min-width: 72px;
  padding: 0 12px;
  white-space: nowrap;
}
.sales-detail-note {
  background: color-mix(in srgb, var(--surface) 85%, white 15%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: grid;
  gap: 8px;
}
.sales-detail-note p {
  margin: 0;
  color: var(--text-muted);
}
.sales-detail-note.tone-negative {
  border-color: rgba(255, 92, 106, 0.28);
  background: rgba(255, 92, 106, 0.08);
}
.sales-detail-link-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.sales-detail-link-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.sales-detail-link-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.sales-detail-addendum-card,
.sales-detail-addendum-list {
  background: color-mix(in srgb, var(--surface) 90%, var(--negative) 10%);
  border: 1px solid color-mix(in srgb, var(--negative) 26%, var(--border) 74%);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
}
.sales-detail-addendum-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.sales-detail-addendum-card .sales-detail-link-copy {
  gap: 3px;
}
.sales-detail-addendum-card .sales-detail-link-copy p {
  display: none;
}
.sales-detail-addendum-card .btn {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
}
.sales-detail-addendum-list {
  display: grid;
  gap: 6px;
}
.sales-detail-addendum-rows {
  display: grid;
  gap: 6px;
}
.sales-detail-addendum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 80%, black 20%);
  color: var(--text);
  min-height: 30px;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
}
.sales-detail-addendum-row:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border) 55%);
}
.sales-detail-lifecycle-card,
.sales-detail-lines-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  display: grid;
  gap: 8px;
}
.sales-detail-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.sales-detail-lines {
  display: grid;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--radius-sm);
}
.sales-detail-lines.is-scrollable {
  max-height: 176px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.sales-detail-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-height: 56px;
  padding: 7px 9px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface-raised) 88%, black 12%);
}
.sales-detail-line:last-child { border-bottom: 0; }
.sales-detail-line.is-linkable {
  cursor: pointer;
  transition:
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}
.sales-detail-line.is-linkable:hover,
.sales-detail-line.is-linkable:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border) 55%);
  background: color-mix(in srgb, var(--surface-raised) 84%, var(--brand) 16%);
  box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.16);
  outline: none;
}
.sales-detail-line-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.sales-detail-line-media {
  width: 34px;
  height: 46px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  flex: 0 0 auto;
}
.sales-detail-line-media.placeholder {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-weight: 700;
}
.sales-detail-line-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.sales-detail-line-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sales-detail-line-values {
  display: grid;
  gap: 4px;
  justify-items: end;
}
.sales-detail-line-sub {
  color: var(--text-muted);
  font-size: 11px;
}
.sales-detail-line-cta {
  display: none;
}
.sales-detail-loading,
.sales-detail-empty {
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-8) var(--space-4);
}
@media (max-width: 900px) {
  .sales-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .sales-detail-modal {
    width: min(100vw - 20px, 820px);
    padding: 14px;
  }
  .sales-detail-stack {
    padding-right: 0;
  }
  .sales-detail-header {
    flex-direction: column;
    gap: var(--space-2);
  }
  .sales-detail-header .t-display {
    font-size: 20px;
  }
  .sales-detail-link-card {
    flex-direction: column;
    align-items: stretch;
  }
  .sales-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .record-date-editor {
    align-items: stretch;
    flex-direction: column;
  }
  .record-date-editor-copy {
    display: none;
  }
  .record-date-editor-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .record-date-editor-controls .input {
    min-width: 0;
  }
  .sales-detail-addendum-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sales-detail-addendum-card .sales-detail-link-copy {
    gap: 3px;
  }
  .sales-detail-addendum-card .sales-detail-link-copy p {
    display: none;
  }
  .sales-detail-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sales-detail-lines.is-scrollable {
    max-height: 176px;
  }
  .sales-detail-line-values {
    justify-items: end;
  }
}
.modal-sheet {
  position: fixed;
  inset: auto 0 0 0;
  background: var(--surface-raised);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 90vh;
  overflow: auto;
  z-index: 30;
  animation: slide-up var(--motion-base) ease;
}

/* === Toasts === */
.toast-region {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 40;
}
.toast {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  min-width: 240px;
  animation: slide-in var(--motion-base) ease;
  transition: opacity 300ms ease;
}
.toast-error    { border-left: 3px solid var(--negative); }
.toast-warn     { border-left: 3px solid var(--warning); }
.toast-info     { border-left: 3px solid var(--info); }
.toast-success  { border-left: 3px solid var(--positive); }

/* === Drawer (cart, mobile sub-nav) === */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: 420px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 25;
  transform: translateX(100%);
  transition: transform var(--motion-base);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.drawer[data-open="true"] { transform: translateX(0); }
@media (max-width: 700px) {
  .drawer {
    inset: auto 0 0 0;
    width: 100%;
    /* Under body { zoom: var(--ui-scale) }, 90vh renders at 90vh × scale and
       overflows the viewport. Divide by --ui-scale to restore the 90vh
       intent in actual screen space. Same idiom as Task 14's card-detail. */
    max-height: calc(90vh / var(--ui-scale));
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  .drawer[data-open="true"] { transform: translateY(0); }
}

/* === Cart drawer — Task 13. The V4 mock has no cart-overlay markup
   (only the topbar .icon-btn.cart at lines 1784-1787), so styling falls
   back to the design doc convention: section-head header, mini card-art
   item rows, totals + payment + checkout pinned at bottom. */

/* Section-head reused as drawer header. Override its bottom margin (which
   exists for in-page section spacing) and add padding + border so it sits
   flush at the top of the drawer. The close button absolute-positions to
   the top-right via .drawer-close. */
.drawer-section-head {
  position: relative;
  margin-bottom: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.drawer-section-head .t-display { margin: 0; }
.drawer-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: 20px;
  line-height: 1;
}

/* Items list: scrollable middle section between header and footer. */
.cart-items {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

/* Footer — totals + discount + payment + checkout, pinned at bottom. */
.cart-footer {
  flex: 0 0 auto;
  padding: var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* Hosted-vs-manual mode toggle: two equal-width buttons in a row. The active
   one wears `.btn-primary`, the other plain `.btn`. Toggle sits at the top of
   the footer, above the helper copy and totals. */
.cart-mode-toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.cart-mode-button { flex: 1; }

/* Helper copy under the toggle: explains what the active mode does so the
   buyer/seller knows what "Create hosted order" vs "Record sale" will do. */
.cart-mode-helper {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: 13px;
}
.cart-addendum-banner {
  margin: var(--space-4) var(--space-5) 0;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--border) 62%);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface) 88%);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.cart-addendum-copy {
  min-width: 0;
}
.cart-addendum-cancel {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
}
.cart-split-payments {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 55%, var(--surface) 45%);
}
.cart-split-head,
.cart-split-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cart-split-summary,
.cart-split-paid {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cart-split-summary.tone-positive { color: var(--positive); }
.cart-split-summary.tone-warning { color: var(--warning); }
.cart-split-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.85fr) minmax(88px, 0.7fr) minmax(90px, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}
.cart-split-row .select,
.cart-split-row .input {
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
}
.cart-split-row .btn-icon {
  width: 36px;
  height: 36px;
}

/* Subtotal / Total / Discount rows in the footer. `.strong` variant promotes
   the Total row (heavier weight + larger font + extra top margin). */
.cart-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: var(--space-1);
}
.cart-totals-row.strong {
  font-weight: 700;
  font-size: 18px;
  margin-top: var(--space-3);
}
.cart-agreed-total-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}
.cart-agreed-reset {
  min-width: 74px;
  height: 38px;
  padding: 0 var(--space-3);
}

/* Cart item row — mini card-art on the left, name/price middle, qty
   controls + line total + trash on the right. Grid keeps the columns
   aligned even when names wrap. */
.cart-item-row {
  display: grid;
  grid-template-columns: 48px 1fr auto auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.cart-item-row:last-child { border-bottom: none; }

.cart-item-art {
  position: relative;
  width: 48px;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-raised);
  flex-shrink: 0;
}
.cart-item-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.cart-item-info { min-width: 0; }
.cart-item-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-item-code {
  margin-top: 2px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.cart-item-price {
  display: grid;
  gap: 4px;
  max-width: 118px;
}
.cart-item-price span {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cart-line-price-input {
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 2px;
}
.cart-item-qty .btn-icon {
  width: 28px;
  height: 28px;
}
.cart-item-qty-value {
  min-width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.cart-item-total {
  font-weight: 600;
  font-size: 14px;
  text-align: right;
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}

.cart-item-remove {
  width: 28px;
  height: 28px;
  color: var(--text-muted);
}
.cart-item-remove:hover { color: var(--negative); }

@media (max-width: 640px) {
  .cart-split-row {
    grid-template-columns: 1fr 92px auto;
  }
  .cart-split-row input[type="text"] {
    grid-column: 1 / -1;
  }
}

/* === Badges ===
   Base chip styling. Tonal modifiers (.positive / .warning / .negative,
   defined further down) override `color`, `background`, and `border-color`
   on top of these defaults. Border lives here so all badges get a tinted
   edge by default; tonal variants swap `border-color` cleanly. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  background: var(--surface-hover);
  color: var(--text-muted);
}
.badge.test-data-badge {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.36);
  background: rgba(167, 139, 250, 0.12);
}
.badge-count {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  justify-content: center;
}

/* === Skeletons === */
.skel-line, .skel-rect {
  background: linear-gradient(90deg,
    var(--surface) 0%,
    var(--surface-hover) 50%,
    var(--surface) 100%);
  background-size: 200% 100%;
  animation: skel 1.5s linear infinite;
  border-radius: var(--radius-sm);
}
.skel-line { height: 14px; margin-bottom: 8px; }
.skel-rect { height: 80px; }

/* === Animations === */
@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in  { from { transform: translateX(40px); opacity: 0; }
                       to   { transform: translateX(0);     opacity: 1; } }
@keyframes slide-up  { from { transform: translateY(40px); opacity: 0; }
                       to   { transform: translateY(0);    opacity: 1; } }
@keyframes skel      { 0% { background-position: 200% 0; }
                       100% { background-position: -200% 0; } }

/* === Sidebar — ported from V4 mock lines 248-424 === */

/* Brand mark (mock 248-265) */
.brand-mark {
  padding: var(--space-3);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    background var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}
.brand-mark:hover,
.brand-mark:focus-visible {
  background: var(--surface-hover);
  outline: none;
  transform: translateY(-1px);
}
/* Theme V8 Holo: official BB logo image. align-self defaults stretch in
   flex column would distort the logo's aspect ratio (we hit this exact
   bug on the sign-in mock); explicit width: auto + height keeps the
   chunky BB letterforms in their natural proportion. */
.brand-mark-logo {
  display: block;
  height: 36px;
  width: auto;
  align-self: flex-start;
}
/* Legacy .dot kept in CSS in case any other surface uses it — logo lockup
   doesn't render the dot anymore. */
.brand-mark .dot {
  width: 8px;
  height: 8px;
  background: var(--positive);
  border-radius: 9999px;
  box-shadow: 0 0 8px var(--positive);
}

/* Nav groups (mock 267-275) */
.nav-group { margin-bottom: var(--space-4); }
.nav-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: var(--space-2) var(--space-3);
}

/* Nav row (mock 276-312) — replaces old flat-NAV style.
   Existing project uses [data-active="true"] (not .active); rules adapted.

   Scoping note: these rules are sidebar-scoped semantically, but the selector
   is unscoped. They currently leak into app/views/settings.js:59, which also
   renders elements with class="nav-item" for its in-view sub-page navigation.
   Task 12 of the v6 plan removes that in-view settings nav (the sidebar
   handles sub-routes now), eliminating the collision. If the leak needs to
   be fixed before Task 12 ships, scope by ancestor:
     .sidebar nav .nav-item { ... }
*/
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  padding: 0 var(--space-3);
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
  user-select: none;
}
.nav-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item[data-active="true"] {
  background: var(--surface-hover);
  color: var(--text);
}
.nav-item[data-active="true"]::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--brand);
  border-radius: 2px;
}
/* Reserved for future icon pass; not rendered by current shell.js */
.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.8;
}

/* Standalone nav row (mock 314-317) — e.g. Home, sits above first group label */
.nav-standalone {
  margin-bottom: var(--space-5);
}

/* Sub-item under a group label (mock 319-328) — text-only, indented, no icon */
/* Theme V8 Holo: settings shell affordances. */

/* "← Back to app" — sits at the top of the sidebar nav when in settings.
   Reads as a navigation OUT, not as a regular nav item. Quieter color +
   a small visual gap below to separate from the settings group. */
.nav-item.nav-back-to-app {
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.nav-item.nav-back-to-app:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* "Sign out" — destructive action pinned at the bottom of the settings nav.
   Negative tone treatment so it reads as the exit affordance, not just
   another nav row. Button (not anchor) since it fires auth.logout()
   directly rather than navigating. */
.nav-item.nav-sign-out {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--negative);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-item.nav-sign-out:hover {
  color: var(--negative);
  background: color-mix(in srgb, var(--negative) 10%, var(--surface) 90%);
}

.nav-item.nav-sub {
  height: 32px;
  font-size: 13px;
  padding-left: calc(var(--space-3) + var(--space-4));
}
.nav-item.nav-sub[data-active="true"]::before {
  top: 4px;
  bottom: 4px;
}

/* Sidebar footer (mock 337-341) */
.sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
/* Theme V8 Holo: user-chip is now an anchor element — clicking anywhere on
   it navigates to Settings → Account. The chip is the seller's entry point
   into the settings shell (which contains sign out). Removes the dead-UI
   problem where the chip looked clickable but did nothing. */
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.16s var(--ease-out);
}
.user-chip:hover {
  background: var(--surface-hover);
  text-decoration: none;
}
/* Active-context state — when the route is already in settings, the chip
   reads as "you're here" via a subtle brand-tinted background. Avoids the
   "click chip → already in settings, nothing visible changes" confusion. */
.user-chip.is-active-context {
  background: var(--brand-soft);
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand), var(--type-fire));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
  overflow: hidden;
  flex: 0 0 auto;
}
.avatar.has-image {
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-name { font-size: 13px; font-weight: 500; }
.user-role {
  font-size: 11px;
  color: var(--text-muted);
}

/* Temporary theme toggle pill */
.theme-toggle {
  display: flex;
  align-items: center;
  margin-top: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 3px;
  position: relative;
  height: 36px;
  cursor: pointer;
  user-select: none;
}
.theme-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  /* Width = exactly one third of the inner track, so translateX(100%)
     lands the knob on the next segment with no math. */
  width: calc((100% - 6px) / 3);
  height: 28px;
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  transition: transform var(--motion-base) var(--ease-out);
}
.theme-toggle.pokeball .theme-toggle-knob { transform: translateX(0); }
.theme-toggle.squirtle .theme-toggle-knob { transform: translateX(100%); }
.theme-toggle.night    .theme-toggle-knob { transform: translateX(200%); }
.theme-toggle-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out);
}
.theme-toggle-option svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}
.theme-toggle.pokeball .theme-toggle-option.pokeball,
.theme-toggle.squirtle .theme-toggle-option.squirtle,
.theme-toggle.night    .theme-toggle-option.night {
  color: var(--text);
}

/* === Section head (eyebrow + display heading) — mock lines 537-540 === */
.section-head {
  margin-bottom: var(--space-6);
}
.section-head .t-eyebrow {
  display: block;
  margin-bottom: var(--space-2);
}

/* === Home greeting — mock lines 635-644 === */
.greeting {
  display: grid;
  gap: var(--space-2);
}
/* mock keeps this scoped reset; redundant with the utility but preserved for parity */
.greeting .t-display-lg { margin: 0; }
.greeting-sub {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 60ch;
}

/* Sync status pill */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  color: var(--text-muted);
}
.sync-pill[data-state="synced"]  { color: var(--positive); }
.sync-pill[data-state="syncing"] { color: var(--warning); }
.sync-pill[data-state="offline"] { color: var(--negative); }

/* === Topbar — ported from V4 mock lines 439-525 === */

/* Breadcrumb (mock 439-443) */
.breadcrumb {
  color: var(--text-muted);
  font-size: 13px;
}
.breadcrumb strong { color: var(--text); font-weight: 500; }

/* Search input wrapper (mock 445-468) — note: distinct from .input-search */
.search {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  height: 36px;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.search:focus-within { border-color: var(--brand); }
.search input {
  flex: 1;
  background: none;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

/* Keyboard shortcut chip (mock 469-477) */
.kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  background: var(--surface-hover);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Icon button (mock 484-501) — used for topbar add/cart actions */
.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
  position: relative;
}
.icon-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.topbar-action {
  text-decoration: none;
}
.topbar-action::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 80;
  max-width: 180px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}
.topbar-action:hover::after,
.topbar-action:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.icon-btn-add {
  border-color: color-mix(in srgb, var(--negative) 62%, var(--border) 38%);
  background: color-mix(in srgb, var(--negative) 18%, var(--surface) 82%);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--negative) 20%, transparent);
}
.icon-btn-add:hover {
  border-color: var(--negative);
  background: var(--negative);
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--negative) 22%, transparent);
}

/* Item-count badge on icon buttons (mock 503-522) — currently used for the cart */
.icon-btn-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--brand);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--bg);
}

/* Empty cart: icon dims to text-faint (mock 524) */
.icon-btn.cart.is-empty { color: var(--text-faint); }

/* ============================================================
   Settings primitives — .setting-card family
   Source: V4 mock lines 1408-1512.
   First consumer: Settings Account (Task 2). Used by all 8
   settings sub-pages and Task 3 (Display) full mock port.
   ============================================================ */
.setting-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.setting-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}
.setting-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.setting-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 56ch;
  line-height: 1.5;
  margin: 0;
}
.setting-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
/* Stacks the big readout above its tiny "Reset" affordance */
.setting-value-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.account-avatar-control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.account-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--type-fire));
  color: white;
  font-size: 28px;
  font-weight: 800;
  box-shadow:
    0 0 0 1px var(--border-strong),
    0 14px 34px rgba(0, 0, 0, 0.28);
}
.account-avatar-preview.has-image {
  background: var(--surface-hover);
}
.account-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-avatar-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.account-avatar-copy strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.account-avatar-copy span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.account-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.account-avatar-crop-slot {
  display: grid;
}
.account-avatar-cropper {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-raised) 72%, var(--surface) 28%);
}
.account-avatar-crop-head {
  display: grid;
  gap: 2px;
  justify-self: stretch;
}
.account-avatar-crop-head strong {
  font-size: 13px;
  color: var(--text);
}
.account-avatar-crop-head span {
  font-size: 12px;
  color: var(--text-muted);
}
.account-avatar-crop-frame {
  position: relative;
  width: 220px;
  height: 220px;
  max-width: 100%;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent),
    var(--surface);
  cursor: grab;
  touch-action: none;
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--surface) 72%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.28);
}
.account-avatar-crop-frame:active {
  cursor: grabbing;
}
.account-avatar-crop-frame img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
.account-avatar-zoom-row {
  width: min(340px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.account-avatar-zoom {
  width: 100%;
  accent-color: var(--brand);
}
.account-avatar-crop-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
@media (max-width: 640px) {
  .account-avatar-control {
    align-items: flex-start;
  }
  .account-avatar-actions .btn {
    flex: 1 1 140px;
  }
  .account-avatar-crop-actions .btn {
    flex: 1 1 120px;
  }
}
.reset-link {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: 'JetBrains Mono', monospace;
  transition: color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out),
              opacity var(--motion-fast) var(--ease-out);
}
.reset-link:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.reset-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand);
}
.reset-link[aria-disabled="true"],
.reset-link:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.setting-control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.setting-bound {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.setting-tickrow {
  display: flex;
  justify-content: space-between;
  padding: 0 60px;          /* nudge inside the slider track bounds */
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.setting-foot {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  letter-spacing: 0.04em;
}
.setting-foot code {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}

/* ============================================================
   Typography utility — JetBrains Mono with tabular figures.
   Mock canon (card-vault-mock.html:171-176). Used by .setting-value,
   .setting-tickrow, .setting-foot, and any future readout where
   numeric alignment matters.
   ============================================================ */
.mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Payments methods list — read-only inventory inside a setting-card.
   Used only by app/views/settings/payments.js to render the cart's
   three hardcoded methods (Cash / Card / Other) as stacked rows. Not
   a primitive — narrowly scoped to that one consumer.
   ============================================================ */
.payments-methods-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.payments-methods-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border);
}

/* ============================================================
   Theme picker + UI slider — V7 mock lines 1514-1636
   First consumer: Settings Display (Task 3). The
   `.theme-card.active` selector from the mock is rewritten to
   `.theme-card[aria-pressed="true"]` so JS toggles a single
   ARIA attribute (semantic for the radiogroup) instead of a
   class.
   ============================================================ */
.ui-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9999px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.ui-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(123, 97, 255, 0.4);
  cursor: grab;
  transition: transform 100ms ease;
}
.ui-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.ui-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(123, 97, 255, 0.4);
  cursor: grab;
}
.ui-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.3);
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.theme-card {
  background: transparent;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 150ms ease, transform 150ms ease;
  font: inherit;
  color: var(--text);
  text-align: left;
}
.theme-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.theme-card[aria-pressed="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.theme-card-preview {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.theme-card-preview.is-night {
  background: #050609;
  border: 1px solid #252B36;
}
.theme-card-preview.is-night .theme-card-preview-bar {
  background: #3B4CCA;
}
.theme-card-preview.is-night .theme-card-preview-tile {
  background: linear-gradient(180deg, #171A22 0%, #101218 100%);
  border: 1px solid #3A4250;
}
.theme-card-preview.is-pokeball {
  background: #030303;
  border: 1px solid #FF3347;
}
.theme-card-preview.is-pokeball .theme-card-preview-bar {
  background: linear-gradient(90deg, #FF3347 0%, #FF3347 48%, #FFFFFF 52%, #FFFFFF 100%);
}
.theme-card-preview.is-pokeball .theme-card-preview-tile {
  background: linear-gradient(180deg, #221416 0%, #0D0D10 100%);
  border: 1px solid #F7F7F8;
}
.theme-card-preview.is-squirtle {
  background: #041018;
  border: 1px solid #65BCEB;
}
.theme-card-preview.is-squirtle .theme-card-preview-bar {
  background: linear-gradient(90deg, #4FC3F7 0%, #4FC3F7 68%, #D8B071 68%, #D8B071 100%);
}
.theme-card-preview.is-squirtle .theme-card-preview-tile {
  background: linear-gradient(180deg, #0B2432 0%, #071A25 100%);
  border: 1px solid #1B465C;
}
.theme-card-preview-bar {
  height: 8px;
  border-radius: 3px;
  width: 40%;
}
.theme-card-preview-tile {
  flex: 1;
  border-radius: 4px;
}
.theme-card-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* ============================================================
   CARD INFO BLOCK — text below .card-art on mini + grid cards.
   Ported from card-vault-mock.html lines 824-925 to back the
   Home top-value strip and (later) the Inventory grid.
   Static — doesn't tilt with the art.
   ============================================================ */
.card-type-chips {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-2);
}
.type-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid;
  color: color-mix(in srgb, var(--type-color, var(--text-muted)) 70%, white 30%);
  background: color-mix(in srgb, var(--type-color, var(--surface-hover)) 14%, transparent);
  border-color: color-mix(in srgb, var(--type-color, var(--border-strong)) 45%, transparent);
}
.type-chip[data-type="fire"]     { color: #FFB07A; background: rgba(240,128,48,0.12);  border-color: rgba(240,128,48,0.4); }
.type-chip[data-type="water"]    { color: #A8B8F8; background: rgba(104,144,240,0.12); border-color: rgba(104,144,240,0.4); }
.type-chip[data-type="grass"]    { color: #ADDC85; background: rgba(120,200,80,0.12);  border-color: rgba(120,200,80,0.4); }
.type-chip[data-type="electric"] { color: #FBE578; background: rgba(248,208,48,0.12);  border-color: rgba(248,208,48,0.4); }
.type-chip[data-type="psychic"]  { color: #FFA8C0; background: rgba(248,88,136,0.12);  border-color: rgba(248,88,136,0.4); }
.type-chip[data-type="ghost"]    { color: #B0A0C8; background: rgba(112,88,152,0.15);  border-color: rgba(112,88,152,0.5); }
.type-chip[data-type="fighting"] { color: #E68078; background: rgba(192,48,40,0.12);   border-color: rgba(192,48,40,0.4); }
.type-chip[data-type="dragon"]   { color: #B098F8; background: rgba(112,56,248,0.12);  border-color: rgba(112,56,248,0.4); }
.type-chip[data-type="normal"]   { color: #D4D0A8; background: rgba(168,168,120,0.12); border-color: rgba(168,168,120,0.4); }
.type-chip[data-type="dark"]     { color: #B89878; background: rgba(112,88,72,0.18);   border-color: rgba(112,88,72,0.55); }
.type-chip[data-type="trainer"]  { color: var(--text-muted); background: var(--surface-hover); border-color: var(--border-strong); }
.type-chip.kind-sealed { color: #ADDC85; background: rgba(120,200,80,0.12); border-color: rgba(120,200,80,0.4); }
.type-chip.kind-supply { color: #A8B8F8; background: rgba(104,144,240,0.12); border-color: rgba(104,144,240,0.4); }
.type-chip.kind-custom { color: #C8A8FF; background: rgba(123,97,255,0.12); border-color: rgba(123,97,255,0.45); }

.card-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 2px;
  color: var(--text);
}
.top-value-strip .crown-jewel-card .card-name {
  display: -webkit-box;
  min-height: 31px;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13px;
  line-height: 1.2;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}
/* Set symbol — Pokémon-native expansion icon. Symbols are typically dark
   on transparent; we invert to white on dark canvas. */
.set-symbol {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity var(--motion-base) var(--ease-out);
  flex-shrink: 0;
}
.card:hover .set-symbol { opacity: 1; }
.set-name {
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.set-divider,
.set-number { color: var(--text-faint); flex-shrink: 0; }
/* Inline variant for table rows — smaller, fainter, beside Pokémon name */
.set-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-faint);
  vertical-align: middle;
  margin-left: 4px;
}
.set-inline .set-symbol {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}
.table tbody tr:hover .set-inline .set-symbol { opacity: 0.85; }
/* Base Set famously has no expansion symbol — collectors identify it by
   the absence. Hide the placeholder the API serves so we stay accurate. */
.set-symbol[src*="base1/symbol"] { display: none; }

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.card-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.top-value-strip .crown-jewel-card .card-footer {
  margin-top: 6px;
}
.top-value-strip .crown-jewel-card .card-price {
  font-size: 14px;
}
.card-stock {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   TABLE EXTRAS — wrap container, numeric columns, and the
   typed row-bar marker used in the Recent Sales table.
   Ported from mock lines 1180-1231. Additive on top of the
   existing .table rule (which is shared with Settings tables);
   we don't overwrite the base layout. Mock §2479-2548.
   ============================================================ */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.home-activity-mobile {
  display: none;
}
.home-page .home-activity-row.is-clickable,
.home-activity-card.is-clickable {
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}
.home-page .home-activity-row.is-clickable:hover,
.home-page .home-activity-row.is-clickable:focus-visible,
.home-activity-card.is-clickable:hover,
.home-activity-card.is-clickable:focus-visible {
  background: var(--surface-hover);
  outline: none;
}
@media (max-width: 700px) {
  .home-activity-mobile {
    display: grid;
  }
}
.table th.num,
.table td.num,
.table .num {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Right-aligned column without the numeric monospace treatment. Used for
   the Orders Actions column — header text and cell content both want to
   align to the right edge, but the cell holds buttons (not numbers) so
   we don't inherit the tabular-nums font swap. */
.table th.col-right,
.table td.col-right { text-align: right; }

.table tbody tr.is-test-record td {
  background: rgba(167, 139, 250, 0.06);
  border-left-color: rgba(167, 139, 250, 0.5);
}
.table tbody tr.is-test-record td:first-child {
  box-shadow: inset 3px 0 0 rgba(167, 139, 250, 0.7);
}
.table tbody tr.is-test-record:hover td {
  background: rgba(167, 139, 250, 0.1);
}
.sales-status-stack {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Action button group inside a table cell. Flex row, right-aligned to
   match the column's `.col-right` header, wraps on narrow viewports so
   "Cancel" + "Delete" + "Open checkout" don't overflow the cell. */
.row-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Muted "No actions" placeholder shown when an order is in a state with
   no permissible follow-up (paid, fulfilled, completed). Lives inside a
   `.row-actions` wrapper so it inherits the same alignment. */
.row-actions-empty {
  color: var(--text-faint);
  font-size: 12px;
}
.row-type-bar {
  display: inline-block;
  width: 3px;
  height: 16px;
  vertical-align: middle;
  margin-right: var(--space-3);
  border-radius: 2px;
}
.row-type-bar[data-type="fire"]     { background: var(--type-fire); }
.row-type-bar[data-type="water"]    { background: var(--type-water); }
.row-type-bar[data-type="grass"]    { background: var(--type-grass); }
.row-type-bar[data-type="electric"] { background: var(--type-electric); }
.row-type-bar[data-type="psychic"]  { background: var(--type-psychic); }
.row-type-bar[data-type="ghost"]    { background: var(--type-ghost); }
.row-type-bar[data-type="dragon"]   { background: var(--type-dragon); }
.row-type-bar[data-type="normal"]   { background: var(--type-normal); }
.row-type-bar[data-type="dark"]     { background: var(--type-dark); }

/* Tonal badge variants (mock 1245-1247). Override color / background /
   border-color on top of the base .badge rule (defined in the Badges
   block earlier in this file) for the recent-sales table's
   Paid / Reserved / Expired pills. */
.badge.positive { color: var(--positive); border-color: rgba(54,209,123,0.3); background: rgba(54,209,123,0.08); }
.badge.warning  { color: var(--warning);  border-color: rgba(245,165,36,0.3); background: rgba(245,165,36,0.08); }
.badge.negative { color: var(--negative); border-color: rgba(255,92,106,0.3); background: rgba(255,92,106,0.08); }
.badge.deleted  { color: var(--text-muted); border-color: rgba(156,160,171,0.28); background: rgba(156,160,171,0.08); }
.badge.pending  { color: var(--warning); border-color: rgba(245,165,36,0.34); background: rgba(245,165,36,0.1); }

/* Analytics chart container — used by the Sales Analytics tab to
   wrap each barChart/sparkline in a surface card. Padding handles the
   inner spacing so call-sites don't need inline marginTop on chart
   headings. Co-located here with the other "data-display" primitives
   (.table-wrap, .badge variants). */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.chart-card h3 {
  margin: 0 0 var(--space-4) 0;
  font-size: 16px;
  color: var(--text);
}

/* Analytics V1 - live booth report. Replaces the old two-chart page with
   operator-facing cash, trade, payment, and inventory movement summaries. */
.analytics-dashboard {
  display: grid;
  gap: var(--space-5);
}
.analytics-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}
.analytics-toolbar-copy {
  display: grid;
  gap: 4px;
}
.analytics-toolbar-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.analytics-range-chips,
.analytics-sort {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.analytics-range-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.analytics-range-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.analytics-range-chip.is-active {
  border-color: color-mix(in srgb, var(--highlight) 45%, var(--border) 55%);
  background: color-mix(in srgb, var(--highlight) 12%, var(--surface) 88%);
  color: var(--highlight);
}
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}
.analytics-kpi,
.analytics-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.analytics-kpi {
  display: grid;
  gap: 6px;
  min-height: 122px;
  padding: var(--space-5);
}
.analytics-kpi-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.analytics-kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  line-height: 1;
  color: var(--text);
}
.analytics-kpi-note {
  color: var(--text-muted);
  font-size: 12px;
}
.analytics-split-grid,
.analytics-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}
.analytics-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  min-width: 0;
}
.analytics-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.analytics-card-head h3 {
  margin: 0;
  font-size: 16px;
}
.analytics-card-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.analytics-ledger {
  display: grid;
  gap: var(--space-2);
}
.analytics-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.analytics-ledger-row:last-child {
  border-bottom: 0;
}
.analytics-ledger-row strong {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
}
.analytics-ledger-row strong.is-negative {
  color: var(--negative);
}
.analytics-ledger-row.is-summary {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.analytics-mix-list,
.analytics-mover-list,
.analytics-movement-list {
  display: grid;
  gap: var(--space-2);
}
.analytics-mix-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}
.analytics-mix-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.analytics-mix-label strong {
  font-size: 13px;
}
.analytics-mix-label span {
  color: var(--text-muted);
  font-size: 11px;
}
.analytics-mix-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
}
.analytics-mix-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}
.analytics-mix-row.is-noncash .analytics-mix-track span {
  background: var(--highlight);
}
.analytics-mix-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text);
}
.analytics-timeline {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  min-height: 210px;
  padding-top: var(--space-3);
}
.analytics-timeline.is-day {
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
}
.analytics-timeline.is-month {
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
}
.analytics-timeline-bar {
  display: grid;
  grid-template-rows: minmax(150px, 1fr) 18px;
  align-items: end;
  gap: 6px;
  min-width: 0;
}
.analytics-timeline-fill {
  align-self: end;
  display: block;
  min-height: 2px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--highlight), var(--brand));
}
.analytics-timeline-bar small {
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
}
.analytics-mover-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-raised) 62%, transparent);
}
.analytics-mover-row img,
.analytics-mover-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-raised);
}
.analytics-mover-placeholder {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-weight: 800;
}
.analytics-mover-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.analytics-mover-copy strong,
.analytics-mover-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-mover-copy span {
  color: var(--text-muted);
  font-size: 12px;
}
.analytics-mover-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.analytics-movement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.analytics-movement-grid h4 {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.analytics-movement-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.analytics-movement-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-movement-row strong {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.analytics-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
@media (max-width: 1100px) {
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .analytics-split-grid,
  .analytics-bottom-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .analytics-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .analytics-kpi-grid,
  .analytics-movement-grid {
    grid-template-columns: 1fr;
  }
  .analytics-mix-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   EMPTY STATE — dashed-card panel with optional illustration,
   title, body, and call-to-action. Ported from mock lines
   1282-1307 to back the Inventory grid's no-results panel
   (Task 11). Sits inside a grid cell via `grid-column: 1 / -1`
   from the call site so it spans the full inventory grid.
   ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.empty-illustration {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-4);
  color: var(--text-faint);
}
.empty-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.empty-body {
  color: var(--text-muted);
  margin-bottom: var(--space-6);
  font-size: 14px;
}

/* ============================================================
   External lookup row — quick-link buttons for cross-referencing
   card prices/sales on partner sites (TCGplayer, eBay, eBay sold,
   PriceCharting, GameStop). Always visible alongside internal API
   lookup results on Add Inventory, Trade incoming lookup, Inventory
   detail, and Pending detail. Brand-tinted via --provider-color
   custom property — each button sets its own color, the styles
   pick up the tint automatically. Logos can be swapped in later
   without touching this CSS.
   ============================================================ */
.external-lookup-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}
.external-lookup-row.is-collapsed {
  display: grid;
  gap: var(--space-2);
  padding: 0;
}
.external-lookup-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  list-style: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.external-lookup-summary::-webkit-details-marker {
  display: none;
}
.external-lookup-summary::before {
  content: '+';
  color: var(--brand);
  font-weight: 800;
}
.external-lookup-row.is-collapsed[open] .external-lookup-summary::before {
  content: '-';
}
.external-lookup-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.external-lookup-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.external-lookup-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--provider-color, var(--brand)) 14%, var(--surface) 86%);
  border: 1px solid color-mix(in srgb, var(--provider-color, var(--brand)) 35%, var(--border) 65%);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    background 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.external-lookup-button:hover {
  background: color-mix(in srgb, var(--provider-color, var(--brand)) 24%, var(--surface) 76%);
  border-color: color-mix(in srgb, var(--provider-color, var(--brand)) 60%, var(--border) 40%);
  transform: translateY(-1px);
}
.external-lookup-button:active {
  transform: translateY(0);
}
.external-lookup-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--provider-color, var(--brand)) 70%, var(--border) 30%);
  outline-offset: 2px;
}
.external-lookup-label {
  white-space: nowrap;
}
.external-lookup-icon {
  width: 11px;
  height: 11px;
  opacity: 0.7;
  flex-shrink: 0;
  transition: opacity 0.16s ease;
}
.external-lookup-button:hover .external-lookup-icon {
  opacity: 1;
}

@media (max-width: 640px) {
  .external-lookup-buttons { gap: 6px; }
  .external-lookup-button {
    padding: 5px 9px;
    font-size: 11px;
  }
}

/* === Lookup tool === */
.lookup-page {
  display: grid;
  gap: var(--space-4);
}
.lookup-mode-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.lookup-mode-tab {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
}
.lookup-mode-tab.is-active {
  background: var(--surface-hover);
  color: var(--text);
}
.lookup-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-4);
  align-items: start;
}
.lookup-panel {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.lookup-detail-panel {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-4));
}
.lookup-panel-head {
  display: grid;
  gap: var(--space-3);
}
.lookup-search-input {
  max-width: 560px;
}
.lookup-status {
  min-height: 18px;
  color: var(--text-muted);
  font-size: 12px;
}
.lookup-warning-chip {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 36%, var(--border) 64%);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 9%, var(--surface) 91%);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.lookup-warning-chip strong {
  color: var(--warning);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lookup-result-list {
  display: grid;
  gap: var(--space-2);
}
.lookup-result-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lookup-result-row:hover,
.lookup-result-row.is-selected {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  background: var(--surface-hover);
}
.lookup-thumb,
.lookup-selected-art {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-hover);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.lookup-thumb {
  width: 42px;
  aspect-ratio: 5 / 7;
}
.lookup-thumb img,
.lookup-selected-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lookup-result-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.lookup-result-copy strong,
.lookup-result-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lookup-result-copy small,
.lookup-result-value {
  color: var(--text-muted);
  font-size: 12px;
}
.lookup-result-value {
  font-weight: 800;
  white-space: nowrap;
}
.lookup-selected-head {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}
.lookup-selected-art {
  width: 74px;
  aspect-ratio: 5 / 7;
}
.lookup-selected-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.lookup-selected-copy .t-title {
  margin: 0;
}
.lookup-selected-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.lookup-stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.lookup-stat {
  display: grid;
  gap: 4px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.lookup-stat strong {
  color: var(--text);
}
.lookup-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.lookup-empty {
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.lookup-empty.is-panel {
  min-height: 160px;
  display: grid;
  place-items: center;
  text-align: center;
}
.lookup-sealed-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 1200px) {
  .lookup-workspace {
    grid-template-columns: 1fr;
  }
  .lookup-detail-panel {
    position: static;
  }
}
@media (max-width: 720px) {
  .lookup-sealed-fields,
  .lookup-stat-strip {
    grid-template-columns: 1fr;
  }
  .lookup-result-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .lookup-result-value {
    grid-column: 2;
  }
}

/* ============================================================
   Settings · Market — daily batch refresh card.
   Status indicator dot + tone, run-history list. The dot color
   semantics mirror payment-status pills: success = green, warning
   = amber when failures occurred but the run still completed.
   ============================================================ */
.market-batch-summary {
  display: grid;
  gap: var(--space-2);
}
.market-batch-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.market-batch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.market-batch-status.is-success .market-batch-dot {
  background: var(--positive);
  box-shadow: 0 0 8px color-mix(in srgb, var(--positive) 60%, transparent);
}
.market-batch-status.is-warning .market-batch-dot {
  background: var(--warning);
  box-shadow: 0 0 8px color-mix(in srgb, var(--warning) 60%, transparent);
}

.market-batch-history {
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
}
.market-batch-history-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.market-batch-history-row:last-child {
  border-bottom: none;
}
.market-batch-history-time {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 11px;
  color: var(--text-faint);
}
.market-batch-history-stats {
  color: var(--text);
}

/* ============================================================
   Theme V8 "Holo" — Sign-in / Bootstrap surface.

   Two-column hero + form layout ported from signin-mock.html, which
   is the design canon. Left half is the brand surface (BB logo top-
   left, diagonal card marquee, status strip bottom). Right half is
   the form pane with eyebrow + display heading + restrained inputs +
   white-on-dark CTA. The whole shape is "this is a real product" —
   intentional choices over generic SaaS defaults.

   Used by:
     - app/views/auth.js renderLogin (returning sellers)
     - app/views/auth.js renderBootstrap (first-time owner setup)

   Both flows share the same hero treatment; only the form pane copy
   and field set differ.
   ============================================================ */
.holo-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  color: var(--text);
  /* Inter as the primary UI font — matches mock canon. Production's body
     stack (BlinkMacSystemFont / Segoe UI / system) was rendering the
     auth surface in OS fonts that don't match the mock's Inter feel.
     Inter must be loaded by index.html (it is, post-Holo). */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Un-zoom: body has zoom: var(--ui-scale) (1.25 by default), which scales
     EVERY CSS px value inside the body by 1.25 on render. The mock canon
     was designed at zoom 1.0, so porting mock dimensions verbatim made
     production render 25% larger than intended.
     Setting zoom: 1/var(--ui-scale) on .holo-auth scales the auth surface
     back down to natural mock-equivalent size. Combined effective scale
     for content inside .holo-auth: 1.25 × 0.8 = 1.0. */
  zoom: calc(1 / var(--ui-scale));
  /* min-height changes from "calc(100vh / var(--ui-scale))" to raw 100vh
     because the zoom compensation evens out: 100vh × 1.25 (body) × 0.8
     (own) = 100vh on screen. */
  min-height: 100vh;
}

/* ─── Left: hero ─────────────────────────────────────────── */
.holo-auth-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 48px;
  /* Atmospheric glows match the signin-mock canon: barely-there color
     bias, not visible blobs. The general-purpose --brand-soft and
     --highlight-soft tokens are 0.16 alpha (tuned for focus rings and
     tinted backgrounds), which read as "lit up" in this hero context.
     The hero wants 0.06 / 0.04 alpha — atmospheric only. */
  background:
    radial-gradient(ellipse at 28% 32%, rgba(59, 76, 202, 0.06), transparent 55%),
    radial-gradient(ellipse at 72% 68%, rgba(255, 204, 3, 0.04), transparent 55%),
    linear-gradient(180deg, #07070a, var(--bg) 60%, #07070a);
}
.holo-auth-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  aspect-ratio: 1;
  /* Match mock canon: lower-saturation glow blob behind the marquee.
     --brand-glow at 0.42 alpha pulsed too brightly; the mock used a
     softer accent glow at ~0.32. Inline rgba here to match the mock
     exactly without coupling to a token tuned for other contexts. */
  background: radial-gradient(circle, rgba(59, 76, 202, 0.32), transparent 60%);
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  animation: holoAuthGlowPulse 9s ease-in-out infinite;
  z-index: 0;
}
@keyframes holoAuthGlowPulse {
  0%, 100% { opacity: 0.32; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.55; transform: translate(-50%, -50%) scale(1.08); }
}
.holo-auth-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.holo-auth-brand {
  position: relative;
  z-index: 2;
  display: flex;
  animation: holoAuthFadeUp 0.9s var(--ease-out) both;
  animation-delay: 0.4s;
}
.holo-auth-logo {
  display: block;
  height: 72px;
  width: auto;
  align-self: flex-start;
}
.holo-auth-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  /* Right-aligned now that the version tag is removed. Status indicator
     sits opposite the brand logo (top-left ↔ bottom-right), keeping the
     hero corners visually balanced without dead space. */
  justify-content: flex-end;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: holoAuthFadeUp 0.9s var(--ease-out) both;
  animation-delay: 0.6s;
}
.holo-auth-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.holo-auth-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 10px var(--positive);
  animation: holoAuthStatusPulse 2.4s ease-in-out infinite;
}
@keyframes holoAuthStatusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@keyframes holoAuthFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Card marquee (diagonal scrolling rows) ─────────────── */
.holo-card-rows {
  position: absolute;
  inset: -25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Mock canon value — no compensation needed because .holo-auth now
     applies zoom: calc(1 / var(--ui-scale)), un-doing body's 1.25× zoom
     for everything inside. */
  gap: 28px;
  pointer-events: none;
  transform: rotate(-12deg);
  transform-origin: center;
  z-index: 1;
  /* Dedicated keyframes — `holoAuthFadeUp` would override the rotation
     because both target the `transform` property (animation always wins
     over static styles). The rotation MUST be baked into the keyframes
     for this element so the diagonal tilt survives the entrance animation
     and stays through the steady state. */
  animation: holoCardRowsEnter 1.2s var(--ease-out) both;
  animation-delay: 0.15s;
}
@keyframes holoCardRowsEnter {
  from { opacity: 0; transform: rotate(-12deg) translateY(20px); }
  to   { opacity: 1; transform: rotate(-12deg) translateY(0); }
}
.holo-card-row {
  display: flex;
  align-items: center;
}
.holo-card-row-track {
  display: flex;
  /* Mock canon value — .holo-auth's un-zoom handles the scale math. */
  gap: 18px;
  width: max-content;
  animation-duration: 75s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: holoCardScrollLeft;
  will-change: transform;
  pointer-events: auto;
}
.holo-card-row:nth-child(1) .holo-card-row-track { animation-duration: 80s; }
.holo-card-row:nth-child(2) .holo-card-row-track {
  animation-duration: 65s;
  animation-name: holoCardScrollRight;
}
.holo-card-row:nth-child(3) .holo-card-row-track { animation-duration: 95s; }

@keyframes holoCardScrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes holoCardScrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.holo-card-tile {
  /* Mock canon value — .holo-auth's un-zoom handles the scale math.
     Renders at ~200px on screen via combined body zoom × auth un-zoom. */
  height: 200px;
  width: auto;
  border-radius: 12px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  cursor: pointer;
  flex-shrink: 0;
  filter: saturate(1.05);
  transition:
    transform 0.45s var(--ease-spring),
    box-shadow 0.4s var(--ease-out);
}
.holo-card-tile:hover {
  transform: scale(1.12) rotate(4deg);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 0 32px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  filter: saturate(1.15) brightness(1.05);
}

/* ─── Right: form pane ───────────────────────────────────── */
.holo-auth-form-pane {
  position: relative;
  /* Form pane uses the deepest base color so it blends with the hero
     instead of standing out as a lifted grey panel. The mock's depth
     hierarchy: pane = darkest (matches hero feel) → inputs subtly
     lifted above pane → focused input lifted further. Production was
     inverting this (pane lifted, inputs sunken into deeper base). */
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.holo-auth-form-pane::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  /* Mock canon: --ink-500 = #2a2a32 (cool grey, no blue tint).
     Production tokens skew bluer (--border = #2A2E37) so we hardcode
     the mock value to match exactly. */
  background: linear-gradient(180deg, transparent, #2a2a32 50%, transparent);
  opacity: 0.55;
}
.holo-auth-form-inner {
  width: 100%;
  max-width: 380px;
  animation: holoAuthFadeUp 0.85s var(--ease-out) both;
  animation-delay: 0.25s;
}
.holo-auth-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--highlight);
  margin-bottom: 14px;
}
.holo-auth-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.15;
}
.holo-auth-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 36px;
}
.holo-auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.holo-auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.holo-auth-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.005em;
}
.holo-auth-field input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  /* Mock canon hex values used directly. Production tokens (--surface
     #15171C, --surface-raised #1E2128, --border-strong #3A3F4A) are
     ~25-50% lighter than the mock's --ink-800 / --ink-700 / --ink-400,
     making inputs read as visibly grey panels instead of subtle deep
     dark lifts. Hardcoded to match the mock pixel-for-pixel. */
  background: #0f0f13;
  border: 1px solid #1f1f26;
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  font-weight: 400;
  transition:
    border-color 0.18s var(--ease-out),
    background 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
}
.holo-auth-field input::placeholder { color: var(--text-faint); }
.holo-auth-field input:hover { border-color: #3a3a44; }
.holo-auth-field input:focus {
  outline: none;
  border-color: var(--brand);
  /* Focused input lifts one more step — mock canon --ink-700 = #16161b. */
  background: #16161b;
  box-shadow: 0 0 0 4px var(--brand-soft);
}

/* CTA — white-on-dark, Apple-style restraint with subtle arrow lift */
.holo-auth-cta {
  margin-top: 8px;
  height: 48px;
  /* Mock canon: --text-primary = #f5f5f7 (cool white). Production --text
     is #F4F2EE (warmer cream) — close but reads as off-white instead
     of clean white in the CTA context. */
  background: #f5f5f7;
  color: #07070a;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    transform 0.18s var(--ease-out),
    box-shadow 0.22s var(--ease-out),
    background 0.18s ease;
}
.holo-auth-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.holo-auth-cta svg {
  width: 14px; height: 14px;
  transition: transform 0.18s var(--ease-out);
}
.holo-auth-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(244, 242, 238, 0.16);
}
.holo-auth-cta:hover:not(:disabled) svg { transform: translateX(3px); }
.holo-auth-cta:active:not(:disabled) { transform: translateY(0); }

.holo-auth-error {
  margin-top: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--negative) 14%, var(--surface) 86%);
  border: 1px solid color-mix(in srgb, var(--negative) 35%, var(--border) 65%);
  border-radius: 10px;
  color: var(--negative);
  font-size: 13px;
  line-height: 1.5;
}

/* Stack on narrow viewports — hero shrinks, form takes the rest */
@media (max-width: 900px) {
  .holo-auth { grid-template-columns: 1fr; }
  .holo-auth-hero { min-height: 44vh; padding: 32px; }
  .holo-auth-form-pane { padding: 32px 24px 48px; }
  .holo-auth-form-pane::before { display: none; }
  .holo-auth-bottom { font-size: 10px; }
  .holo-card-tile { height: 140px; }
  .holo-card-row:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .holo-auth-glow,
  .holo-auth-status-dot,
  .holo-card-rows,
  .holo-card-row-track { animation: none; }
  .holo-card-tile { transition: none; }
}