/* Receiptly — supplemental styles beyond prebuilt Tailwind
   Brand tokens: docs/brand/Receiptly_BrandAsset{1,2}.png */

:root {
  --brand-primary: #0D3B8E;
  --brand-navy: #0D3B8E;
  --brand-blue: #2563EB;
  --brand-sky: #BFD7FF;
  --brand-gold: #F4B400;
  --brand-cream: #FFF4D6;
  --brand-accent: #F4B400;
  --surface-bg: #F7F8FA;
  --surface-card: #FFFFFF;
  --border-subtle: #E4E7EC;
  --text-primary: #0F1B2E;
  --text-secondary: #5B6472;
  --status-warn: #FBD9A5;
  --status-warn-bg: #FFF4D6;
  --status-warn-fg: #92400E;
  --status-danger: #DC2626;
  --status-danger-bg: #FDEAEA;
  --status-success: #0E9F6E;
  --status-success-bg: #E6F6F1;
  --status-info: #2563EB;
  --status-info-bg: #EAF1FE;
  --status-info-fg: #1D4ED8;
  --status-neutral-bg: #f1f5f9;
  --status-neutral-fg: #475569;
  --elevation-raised: 0 1px 2px rgba(13, 59, 142, 0.06);
  --elevation-overlay: 0 8px 24px rgba(13, 59, 142, 0.12);
}

.brand-logo {
  display: block;
  height: auto;
  width: auto;
  object-fit: contain;
  background: transparent;
}
.brand-logo--mark {
  height: 2.25rem;
  width: auto;
}
/* White horizontal logo in navy header — readable width per homepage repair plan */
.brand-logo--nav {
  height: auto;
  width: min(8.5rem, 42vw); /* ~136px mobile */
  max-width: 145px;
}
@media (min-width: 640px) {
  .brand-logo--nav {
    width: 10rem; /* ~160px */
    max-width: 175px;
  }
}
.brand-logo--auth {
  height: 3.5rem;
  width: auto;
  margin: 0 auto 1rem;
}
.brand-logo--stacked {
  height: 6.5rem;
  width: auto;
  margin: 0 auto 1.25rem;
  background: transparent;
}
/* Landing hero visual (app icon / mark in card) */
.brand-logo--hero-visual {
  display: block;
  width: min(18rem, 70vw);
  max-width: 360px;
  height: auto;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .motion-safe-lift {
    transform: none !important;
  }
}

.bg-surface-bg { background-color: var(--surface-bg); }

.surface-flat { background: var(--surface-card); }
.surface-raised {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-raised);
  border-radius: 0.5rem;
}
.surface-overlay {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-overlay);
  border-radius: 0.5rem;
}

.text-mono-data {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

.skeleton-loader { display: flex; flex-direction: column; gap: 0.5rem; }
.skeleton-line {
  height: 0.75rem;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.skeleton-line:nth-child(2) { width: 88%; }
.skeleton-line:nth-child(3) { width: 72%; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; background: #e2e8f0; }
}
.inbox-tab-skeleton {
  min-height: 12rem;
}

/* Mobile receipt card is a size container so form columns follow card width, not viewport. */
.mobile-receipt-card {
  container-type: inline-size;
  container-name: mobile-card;
}
@container mobile-card (min-width: 680px) {
  .mobile-receipt-card .mobile-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Fallback when container queries unsupported but main is wide */
@supports not (container-type: inline-size) {
  @media (min-width: 720px) {
    .mobile-receipt-card .mobile-review-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

.vehicle-select-filter input[data-vehicle-filter] {
  margin-bottom: 0;
}

.badge-tooltip { display: inline-flex; align-items: center; gap: 0.125rem; }
.badge-tooltip__trigger {
  min-width: 1.25rem;
  min-height: 1.25rem;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--text-secondary);
  border-radius: 9999px;
}
.badge-tooltip__trigger:hover,
.badge-tooltip__trigger:focus-visible { color: var(--text-primary); }

.action-overflow { position: relative; display: inline-block; overflow: visible; }
.action-overflow__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 50;
  min-width: 10rem;
  padding: 0.25rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-overlay);
  border-radius: 0.5rem;
}
.action-overflow__menu[hidden] { display: none; }
.action-overflow__item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.action-overflow__visible {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.vendor-attr-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
  border: 1px solid var(--border-subtle);
}

html { scroll-behavior: smooth; }

table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid #1e40af;
  outline-offset: 2px;
}

.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 200ms; }

.rename-suggest-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Mobile capture — full-area file input (native "Choose file" is unreliable on iOS) */
.capture-picker {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.capture-picker__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.capture-picker__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 5.5rem;
  padding: 1.25rem 1rem;
  border: 2px dashed #93c5fd;
  border-radius: 0.75rem;
  background: rgba(239, 246, 255, 0.6);
  text-align: center;
  pointer-events: none;
}
.capture-picker:active .capture-picker__body,
.capture-picker:focus-within .capture-picker__body {
  border-color: #1e40af;
  background: rgba(219, 234, 254, 0.9);
}
.capture-picker__icon {
  font-size: 1.75rem;
  line-height: 1;
}
.capture-picker__title {
  font-size: 1rem;
  font-weight: 600;
  color: #1e3a5f;
}
.capture-picker__hint {
  font-size: 0.75rem;
  color: #64748b;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop receipt inbox — drag/drop + browse upload */
.receipt-upload-dropzone {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 0.75rem;
  outline: none;
}
.receipt-upload-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.receipt-upload-dropzone__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 8rem;
  padding: 1.5rem 1rem;
  border: 2px dashed #93c5fd;
  border-radius: 0.75rem;
  background: rgba(239, 246, 255, 0.55);
  text-align: center;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.receipt-upload-dropzone:hover .receipt-upload-dropzone__body,
.receipt-upload-dropzone:focus-visible .receipt-upload-dropzone__body {
  border-color: #1e40af;
  background: rgba(219, 234, 254, 0.85);
}
.receipt-upload-dropzone--active .receipt-upload-dropzone__body {
  border-color: #1e40af;
  background: rgba(191, 219, 254, 0.95);
}
.receipt-upload-dropzone__icon {
  font-size: 1.5rem;
  line-height: 1;
  color: #1e40af;
  font-weight: 700;
}
.receipt-upload-dropzone__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e3a5f;
}
.receipt-upload-dropzone__hint {
  font-size: 0.875rem;
  color: #475569;
}
.receipt-upload-dropzone__browse {
  font: inherit;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.receipt-upload-dropzone__browse:hover {
  color: #1e3a8a;
}
.receipt-upload-dropzone__files {
  font-size: 0.75rem;
  color: #64748b;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.15rem;
}

.data-table-wrapper { transition: opacity 120ms ease-in; }

.htmx-request.detail-loading .detail-placeholder {
  display: block;
  color: #64748b;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
}

/* Receipt review queue — card list (no fixed table columns) */
.receipt-review-list {
  width: 100%;
}

.receipt-ready-group + .receipt-ready-group {
  border-top: 1px solid #e2e8f0;
}

.receipt-ready-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.receipt-ready-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.receipt-ready-group__icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

.receipt-ready-group__label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-ready-group__count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-variant-numeric: tabular-nums;
}

.receipt-ready-group[data-ready-group-kind="vehicle"] .receipt-ready-group__header {
  background: #f0f9ff;
  border-bottom-color: #bae6fd;
}

.receipt-queue-item {
  transition: background-color 120ms ease-in;
}

.receipt-queue-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.125rem;
}

.receipt-queue-field {
  min-width: 0;
}

.receipt-queue-actions {
  align-self: stretch;
}

.receipt-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.receipt-action-group button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.receipt-queue-panel {
  background: var(--surface-card);
}

.receipt-queue-panel.surface-overlay:not(.hidden) {
  margin: 0.75rem 1rem 1rem;
  border-radius: 0.5rem;
  animation: receipt-panel-in 150ms ease;
}

@keyframes receipt-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .receipt-queue-panel.surface-overlay:not(.hidden) {
    animation: none;
  }
}

/* Mobile bottom navigation */
.mobile-bottom-nav__item--capture {
  position: relative;
}

body.mobile-more-sheet-open {
  overflow: hidden;
}

.mobile-more-sheet:not(.hidden) .mobile-more-sheet__panel {
  animation: mobile-sheet-in 180ms ease;
}

@keyframes mobile-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-more-sheet:not(.hidden) .mobile-more-sheet__panel {
    animation: none;
  }
}

.offline-queue-banner {
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--status-warn, #f59e0b);
  background: var(--status-warn-bg, #fffbeb);
  color: var(--status-warn-fg, #92400e);
  padding: 0.75rem 1rem;
}

.offline-queue-banner.hidden {
  display: none;
}

/* App chrome: sticky header stays above main content (never mid-document stack) */
body > header.sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
}

/* Vendor setup drawer — full-viewport overlay (not content-height) */
.vendor-setup-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}

.vendor-setup-drawer.hidden {
  display: none;
}

.vendor-setup-drawer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(15 23 42 / 0.45);
  cursor: pointer;
}

.vendor-setup-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: min(32rem, 100vw);
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--surface-card, #fff);
  box-shadow: -8px 0 24px rgb(15 23 42 / 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: vendor-drawer-in 180ms ease;
}

.vendor-setup-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #0f172a;
}

.vendor-setup-drawer__body.setup-loading {
  opacity: 0.65;
}

.vendor-setup-drawer__body > .vendor-setup-drawer__content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Scroll lock while drawer open (html + body; JS also pins scrollY) */
html.vendor-setup-drawer-is-open,
html.vendor-setup-drawer-open,
body.vendor-setup-drawer-is-open,
body.vendor-setup-drawer-open {
  overflow: hidden;
}

body.vendor-setup-drawer-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

@media (min-width: 640px) {
  .vendor-setup-drawer__panel {
    width: min(35rem, 90vw);
  }
}

@keyframes vendor-drawer-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vendor-setup-drawer__panel {
    animation: none;
  }
}

/* Status chips */
.diff-stat-chips {
  max-width: 100%;
}

.diff-stat-chip {
  white-space: nowrap;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-chip--success { background: var(--status-success-bg); color: var(--status-success); border-color: #a7f3d0; }
.status-chip--warning { background: var(--status-warn-bg); color: var(--status-warn-fg); border-color: var(--status-warn); }
.status-chip--danger { background: var(--status-danger-bg); color: var(--status-danger); border-color: #fecaca; }
.status-chip--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); border-color: #e2e8f0; }

/* Step indicator */
.step-indicator__item--done { background: #dbeafe; color: var(--brand-navy); }
.step-indicator__item--done .step-indicator__badge { background: var(--brand-navy); color: #fff; }
.step-indicator__item--current { background: #fff7ed; color: #9a3412; box-shadow: 0 0 0 2px var(--brand-amber); }
.step-indicator__item--current .step-indicator__badge { background: #fff; color: var(--brand-amber); box-shadow: inset 0 0 0 2px var(--brand-amber); }
.step-indicator__item--future { background: #f1f5f9; color: #64748b; }
.step-indicator__item--future .step-indicator__badge { background: #94a3b8; color: #fff; }
.step-indicator__jump {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

/* Workspace tabs */
.workspace-tab--active {
  font-weight: 600;
}
.workspace-tab__count {
  color: inherit;
  opacity: 0.85;
}

/* Diff row — Frazer → Tracked → QBO */
.diff-row--gap .diff-stat-chip--frazer,
.diff-row--gap .diff-stat-chip--tracked,
.diff-row--gap .diff-stat-chip--qbo {
  border-color: var(--status-warn);
  background: var(--status-warn-bg);
}
.diff-row__gap {
  margin-top: 0.25rem;
}

/* Receipt queue — left-border state accent */
.receipt-queue-item { border-left: 4px solid transparent; }
.receipt-queue-item.card-receipt { border-left-width: 4px; }
.receipt-queue-item--ready { border-left-color: #cbd5e1; }
.receipt-queue-item--review { border-left-color: var(--brand-gold, #F4B400); }
/* Attention/invalid filename: gold (Receiptly warning). Keep red for true failures. */
.receipt-queue-item--invalid { border-left-color: var(--brand-gold, #F4B400); }
.mobile-receipt-card.receipt-queue-item--invalid,
.mobile-receipt-card.receipt-queue-item--review {
  border-left-width: 3px;
  border-left-color: var(--brand-gold, #F4B400);
}
.receipt-queue-item--posted { border-left-color: var(--status-success); }
.receipt-queue-item--posting {
  border-left-color: var(--brand-navy);
  background: #f8fafc;
  opacity: 0.92;
}
.receipt-queue-item--failed { border-left-color: var(--status-danger); }

.receipt-queue-item--enriching:not([data-review-locked="1"]) {
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

body:not(.receipt-inbox-reviewing) .receipt-queue-item--enriching:not([data-review-locked="1"]) {
  animation: receipt-enriching-pulse 2.4s ease-in-out infinite;
}

@keyframes receipt-enriching-pulse {
  0%, 100% { background-color: inherit; }
  50% { background-color: rgba(219, 234, 254, 0.35); }
}

.receipt-enrichment-status__spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(37, 99, 235, 0.25);
  border-top-color: var(--status-info);
  border-radius: 9999px;
  animation: receipt-enrichment-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes receipt-enrichment-spin {
  to { transform: rotate(360deg); }
}

body.receipt-inbox-reviewing .receipt-enrichment-status {
  border-color: #fcd34d;
  background-color: #fffbeb;
  color: #92400e;
}

body.receipt-inbox-reviewing .receipt-enrichment-status #receipt-enrichment-status-detail,
body.receipt-inbox-reviewing .receipt-enrichment-status p.text-xs {
  color: #b45309;
}

@media (prefers-reduced-motion: reduce) {
  .receipt-enrichment-status__spinner {
    animation: none;
    border-top-color: rgba(37, 99, 235, 0.45);
  }
}

.receipt-posting-failed-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Sticky bottom posting progress */
.receipt-posting-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -8px 24px rgb(15 23 42 / 0.1);
}
.receipt-posting-progress__inner {
  max-width: 72rem;
  margin: 0 auto;
}
.receipt-posting-progress__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.receipt-posting-progress__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}
.receipt-posting-progress__stats {
  font-size: 0.75rem;
  color: #64748b;
  flex-shrink: 0;
}
.receipt-posting-progress__track {
  width: 100%;
  height: 0.5rem;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
}
.receipt-posting-progress__bar {
  height: 100%;
  background: var(--brand-navy);
  border-radius: 9999px;
  transition: width 300ms ease-out;
}
.receipt-posting-progress__detail {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #64748b;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.receipt-posting-active main {
  padding-bottom: 5.5rem;
}

/* Row action buttons — 40px touch target */
.receipt-action-group button,
.receipt-action-group a.btn-row-action {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
}

/* Unified resolve panel */
.unified-panel { background: #fffbeb; border-top: 1px solid #fde68a; }
.unified-panel__section { border: 1px solid #fde68a; border-radius: 0.5rem; background: #fff; padding: 1rem; }
.unified-panel__section--ok { border-color: #a7f3d0; background: #f0fdf4; }
/* Field extraction icons + posting chips: tailwind-input.css (.field-icon-*, .chip-warn) */
.technical-details-disclosure > summary::-webkit-details-marker {
  display: none;
}
.technical-details-disclosure > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s ease;
}
.technical-details-disclosure[open] > summary::before {
  transform: rotate(90deg);
}

/* Document vendor CTA — explicit colors (bg-sky-700 not in compiled Tailwind purge) */
.vendor-document-btn {
  background-color: #0369a1;
  color: #fff;
  border: 1px solid #075985;
}
.vendor-document-btn:hover {
  background-color: #0284c7;
}
.vendor-document-callout {
  color: #0c4a6e;
}
.dup-action-btn { min-height: 2.5rem; }
.dup-action-btn--primary { background: var(--brand-navy); color: #fff; }
.dup-action-btn--destructive { border-color: #fca5a5; color: #991b1b; }
.dup-action-btn--split { border-color: #7dd3fc; }

/* Results rail */
.receipt-review-list.space-y-cards > .receipt-queue-item,
.receipt-ready-group__items > .receipt-queue-item {
  margin-bottom: 0.75rem;
}
.receipt-review-list.space-y-cards > .receipt-queue-item:last-child,
.receipt-ready-group__items > .receipt-queue-item:last-child {
  margin-bottom: 0;
}

.receipt-queue-layout { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) {
  .receipt-queue-layout { flex-direction: row; align-items: flex-start; }
  .receipt-queue-layout__main { flex: 1; min-width: 0; }
  .receipt-results-rail {
    width: 18rem;
    flex-shrink: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}
.receipt-results-rail {
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08);
}
.receipt-results-rail__header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 600;
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.receipt-results-rail__list { padding: 0.5rem; font-size: 0.75rem; }
.receipt-results-rail__item { padding: 0.5rem 0.625rem; border-radius: 0.375rem; margin-bottom: 0.25rem; }
.receipt-results-rail__item--ok { background: #f0fdf4; color: #047857; }
.receipt-results-rail__item--skip { background: #fffbeb; color: #92400e; }
.receipt-results-rail__item--fail { background: #fef2f2; color: #991b1b; }

/* Dashboard — flat panels */
.dashboard-panel { box-shadow: none; }
.dashboard-disclosure summary { cursor: pointer; list-style: none; }
.dashboard-disclosure summary::-webkit-details-marker { display: none; }

/* Confirm modal */
.confirm-modal::backdrop { background: rgb(15 23 42 / 0.4); }
.confirm-modal[open] { display: block; margin: auto; }

/* Error banner variants */
.error-banner--warning { background: var(--status-warn-bg); border-color: var(--status-warn); color: var(--status-warn-fg); }
.error-banner--error { background: var(--status-danger-bg); border-color: #fecaca; color: var(--status-danger); }
.error-banner--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* Reconcile pill */
.reconcile-pill__sep { opacity: 0.5; }

/* Scan log disclosure */
.scan-log-disclosure summary { cursor: pointer; font-size: 0.75rem; color: #1e40af; }
.scan-log-disclosure[open] summary { margin-bottom: 0.5rem; }

/* Receipt queue tabs — mockup segment control.
   Prefer Tailwind .receipt-queue-tabs / .receipt-queue-tab from tailwind-input.css.
   Legacy mobile-inbox-tab* classes remain for JS; avoid gray pill chrome when
   .receipt-queue-tabs is present. */
.receipt-inbox-tabs:not(.receipt-queue-tabs),
.mobile-inbox-tabs:not(.receipt-queue-tabs) {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
  background: #e2e8f0;
}
.mobile-inbox-tabs:not(.receipt-queue-tabs) .mobile-inbox-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  text-align: center;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.mobile-inbox-tabs:not(.receipt-queue-tabs) .mobile-inbox-tab--active {
  background: #fff;
  color: #0d3b8e;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}
.mobile-inbox-tabs:not(.receipt-queue-tabs) .mobile-inbox-tab__count,
.mobile-inbox-tabs:not(.receipt-queue-tabs) .receipt-inbox-tab__count {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 9999px;
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Soften old dropzone chrome when Tailwind redesign provides its own border */
.receipt-upload-dropzone.flex-1 {
  border-style: dashed;
}

.mobile-receipt-card.card-receipt {
  overflow: hidden;
}
.mobile-receipt-card .unified-panel {
  border-top: 1px solid var(--border-subtle);
}
#mobile-receipt-list.space-y-cards > .mobile-receipt-card {
  margin-bottom: 0.75rem;
}
#mobile-receipt-list.space-y-cards > .mobile-receipt-card:last-child {
  margin-bottom: 0;
}
/*
 * Mobile inbox chrome stack (document flow + fixed app tab bar only):
 * form → receipt actions → receipt nav → page padding → fixed tab bar.
 * --mobile-stack-nav kept as alias for tab bar clearance (FAB / legacy selectors).
 */
#receipts-page-root[data-mobile-inbox="1"],
.mobile-page,
body.has-mobile-bottom-nav {
  --mobile-tab-bar-height: 4rem;
  --mobile-stack-nav: var(--mobile-tab-bar-height);
  --mobile-stack-fab: 0px;
}

/* Clear fixed tab bar + home-indicator so last controls are never hidden */
.mobile-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--mobile-tab-bar-height, 4rem) + env(safe-area-inset-bottom, 0px) + 1.5rem);
}
@media (min-width: 1024px) {
  .mobile-page {
    padding-bottom: 3rem;
  }
}

/* Keep focused fields above the fixed tab bar when the keyboard is open */
.mobile-page input,
.mobile-page select,
.mobile-page textarea,
.mobile-receipt-card input,
.mobile-receipt-card select,
.mobile-receipt-card textarea {
  scroll-margin-bottom: calc(var(--mobile-tab-bar-height, 4rem) + 2rem);
}

.mobile-capture-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--mobile-tab-bar-height, 4rem) + 0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 3rem;
  padding: 0 1.1rem;
  border-radius: 9999px;
  background: var(--brand-gold, #F4B400);
  color: var(--brand-navy, #0D3B8E);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 20px rgb(15 23 42 / 0.22);
  text-decoration: none;
}
.mobile-capture-fab__label {
  font-size: 0.875rem;
  font-weight: 600;
}
.mobile-capture-fab:active {
  transform: scale(0.98);
}
/* Align FAB with compact workspace; hide on lg+ (Capture moves to header) */
@media (min-width: 640px) {
  .mobile-capture-fab {
    right: max(1rem, calc(50% - 20rem + 1rem));
  }
}
@media (min-width: 1024px) {
  .mobile-capture-fab {
    display: none;
  }
}

/* Receipt-to-receipt nav: one grid row in document flow (not sticky over tab bar) */
.mobile-receipt-nav {
  position: static;
  margin-top: 1rem;
  padding: 0.75rem 0 0.25rem;
  border-top: 1px solid #e2e8f0;
}
.mobile-receipt-nav__disabled {
  background: #e2e8f0 !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

/* Save / move-to-ready: document flow (dirty sticky returns in a later polish PR) */
.mobile-receipt-actions {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 0 0.25rem;
  border-top: 1px solid #f1f5f9;
}
.mobile-receipt-actions__primary--blocked {
  background: #e2e8f0 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
}
.mobile-receipt-actions__primary--blocked:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}
.mobile-receipt-card .field-highlight-block {
  box-shadow: 0 0 0 3px rgba(244, 180, 0, 0.45);
  border-radius: 0.5rem;
  transition: box-shadow 0.35s ease;
}
.mobile-receipt-actions .btn.htmx-request,
.mobile-receipt-actions .field-save-btn.htmx-request,
.mobile-receipt-actions .resolve-continue-btn.htmx-request {
  opacity: 0.7;
  pointer-events: none;
}

/* Memo expand */
[data-memo-text].memo-expanded {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Technical details chevron rotates when open */
details[open] > summary .details-chevron {
  transform: rotate(90deg);
}

/* Mobile tab bar active indicator (top edge, not filled pill) */
.mobile-bottom-nav__item--active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.25rem;
  height: 2px;
  border-radius: 9999px;
  background: var(--brand-blue, #2563eb);
}

/* Title / tab vertical rhythm on mobile inbox */
.mobile-inbox-header h1 {
  margin-bottom: 0;
}
.pwa-install-banner + .mobile-inbox-header,
main .pwa-install-banner:not(.hidden) {
  margin-bottom: 1.25rem;
}

/* Compact queue tab labels on very narrow phones */
@media (max-width: 360px) {
  .receipt-queue-tab__label {
    font-size: 0.7rem;
  }
  .receipt-queue-tabs .receipt-queue-tab[data-inbox-tab="attention"] .receipt-queue-tab__label {
    /* Prefer short label via CSS content is fragile; keep aria-label on link */
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.stepper-shell {
  max-width: none;
}
.offline-queue-banner {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.875rem;
}

/* Mobile step wizard */
.mobile-step-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.mobile-step-progress__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  border: 0;
  padding: 0;
  background: #cbd5e1;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease;
}
.mobile-step-progress__dot--active {
  background: var(--brand-navy);
  transform: scale(1.15);
}
.mobile-step-pane h3 {
  letter-spacing: -0.01em;
}
.mobile-step-wizard .field-row.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-step-wizard .field-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.mobile-step-wizard .chip-warn {
  max-width: 100%;
  text-align: left;
}

/* Duplicate metadata: stacked cards on mobile inbox (table clips inside overflow-hidden cards) */
.duplicate-mismatch__cards {
  display: none;
}
[data-mobile-inbox] .duplicate-mismatch__table-wrap {
  display: none;
}
[data-mobile-inbox] .duplicate-mismatch__cards {
  display: block;
}
.mobile-step-pane .duplicate-mismatch {
  margin-top: 0.5rem;
}
.mobile-step-pane .duplicate-mismatch__card:last-child {
  padding-bottom: 0.75rem;
}
.mobile-focus-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-posted-card {
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}
.mobile-post-toast {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.18);
  transition: opacity 200ms ease, transform 200ms ease;
}
.mobile-post-toast--success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}
.mobile-post-toast--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.mobile-post-toast.hidden {
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
}