/* Shared receipt presentation. Keep data, seeking and player geometry in their owners. */
:root, .rr, .family-app {
  --receipt-primary: #f2f7f3;
  --receipt-secondary: #b8c8bd;
  --receipt-surface: #111a15;
  --receipt-active: #203c2d;
  --receipt-marker: #74d8a5;
  --receipt-list-size: 1rem;
  --receipt-detail-size: 1.0625rem;
  --receipt-meta-size: .875rem;
  --receipt-leading: 1.4;
}
[data-mode="light"], html[data-theme="light"] {
  --receipt-primary: #17251d;
  --receipt-secondary: #465b4e;
  --receipt-surface: #f7faf4;
  --receipt-active: #dfede2;
  --receipt-marker: #19754b;
}
/* Video remains a dark, bounded surface even in the light application theme. */
.txn-card {
  --receipt-primary: #f2f7f3;
  --receipt-secondary: #b8c8bd;
  --receipt-surface: rgba(5, 13, 9, .92);
  --receipt-active: #203c2d;
  --receipt-marker: #74d8a5;
  background: var(--receipt-surface) !important;
  color: var(--receipt-primary);
  text-shadow: none;
}
#hud #receipt, #hud .rcard, [data-receipt-panel] {
  color: var(--receipt-primary);
  background: var(--receipt-surface);
}
#hud #investigationPanel #receipt { background: var(--receipt-surface); }
#hud .rcard { padding: 12px; }
#hud .rcard .rc-h {
  background: var(--receipt-surface);
  color: var(--receipt-primary);
  font: 600 var(--receipt-list-size)/var(--receipt-leading) var(--ui);
  gap: 12px;
  flex-wrap: wrap;
}
#hud .rcard .rc-s, #hud .receipt-line-time, #hud .receipt-list-status, #hud .live-receipt-status, #hud #receipt .line-time {
  color: var(--receipt-secondary);
  font: 400 var(--receipt-meta-size)/var(--receipt-leading) var(--ui);
}
#hud .rcard .rc-l {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-height: 40px;
  padding: 8px 0;
  color: var(--receipt-primary);
  font: 500 var(--receipt-list-size)/var(--receipt-leading) var(--ui);
}
#hud .rcard .rc-l { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 3px 8px; }
#hud .rcard .receipt-line-pointer { grid-column: 1; grid-row: 1; align-self: center; }
#hud .rcard .receipt-line-name { grid-column: 2; grid-row: 1; }
#hud .rcard .rc-l > span:last-child { grid-column: 3; grid-row: 1; }
#hud .receipt-line-name { white-space: normal; overflow-wrap: anywhere; }
#hud .receipt-line-time { grid-column: 2 / -1; grid-row: 2; }
#hud .rc-l > span:last-child, #hud .rc-t > span:last-child, #hud #rcAmt {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  color: var(--receipt-primary);
}
#hud .rcard .rc-t, #hud #receipt .rtotal {
  font: 700 1.125rem/var(--receipt-leading) var(--ui);
  color: var(--receipt-primary);
  gap: 12px;
  padding-top: 10px;
}
#hud #rcTitle { font: 600 var(--receipt-list-size)/var(--receipt-leading) var(--ui); }
#hud #rcAmt { font-size: 1.125rem; font-weight: 700; }
/* The historical fixed-height rows clipped wrapped text and text enlargement. */
#hud #receipt .line-copy { display: flex; flex-direction: column; align-items: start; min-width: 0; gap: 3px; }
#hud #receipt .rline .line-name {
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  font: inherit;
}
#hud #receipt .rline.void { color: var(--receipt-secondary); }

#hud #receipt .live-receipt-status { background: var(--receipt-surface); }
/* Find results share the receipt hierarchy without changing filtering or paging. */
.family-app .connected-receipt-row {
  color: var(--receipt-primary);
  font: 500 var(--receipt-list-size)/var(--receipt-leading) var(--ui);
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.family-app .connected-receipt-row strong { font-weight: 600; }
.family-app .connected-receipt-row > span:nth-child(2) { font-variant-numeric: tabular-nums; text-align: right; max-width: 12rem; }
.family-app .connected-receipt-row span span,
.family-app .connected-receipt-row > span:last-child,
.family-app .connected-receipt-context,
.family-app .connected-receipt-controls label {
  color: var(--receipt-secondary);
  font-size: var(--receipt-meta-size);
  line-height: var(--receipt-leading);
}
@media (max-width: 760px) {
  .family-app .connected-receipt-row { grid-template-columns: minmax(0, 1fr) auto; }
}
/* React playback surfaces use the same tokens as the shipped Investigation HUD. */
[data-receipt-panel] { font: 500 var(--receipt-detail-size)/var(--receipt-leading) var(--ui, "Barlow", sans-serif); }
[data-receipt-panel] .receipt-detail-line { color: var(--receipt-primary); font: 500 var(--receipt-detail-size)/var(--receipt-leading) var(--ui, "Barlow", sans-serif); opacity: 1; min-height: 44px; padding: 9px 8px; align-items: start; }
[data-receipt-panel] .receipt-detail-line[data-active="true"] { background: var(--receipt-active); border-left: 3px solid var(--receipt-marker); }
[data-receipt-panel] .receipt-detail-line > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-receipt-panel] .truncate { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
[data-receipt-panel] .text-muted-foreground { color: var(--receipt-secondary); font-size: var(--receipt-meta-size); line-height: var(--receipt-leading); }
[data-receipt-panel] .receipt-detail-line-total { font-weight: 700; font-size: 1.125rem; }
.txn-card .line { color: var(--receipt-primary); font: 500 var(--receipt-detail-size)/var(--receipt-leading) var(--ui, "Barlow", sans-serif); opacity: 1; padding: 8px; align-items: start; }
.txn-card .line:hover, .txn-card.expanded .line { opacity: 1; }
.txn-card .line-desc { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.txn-card .line.current { color: var(--receipt-primary); background: var(--receipt-active); border-left: 3px solid var(--receipt-marker); }
.txn-card .line .amt { color: var(--receipt-primary); font-variant-numeric: tabular-nums; }
.txn-card .receipt-meta, .txn-card .expand, .txn-card .line-desc small { font-size: var(--receipt-meta-size); line-height: var(--receipt-leading); color: var(--receipt-secondary); opacity: 1; }
.txn-card .total { color: var(--receipt-primary); font-size: 1.125rem; }
.txn-card .receipt-lines-scroll { overflow-y: auto; }

.txn-card .line-desc small { display: block; margin-top: 3px; }

[data-receipt-panel] .scrollbar-container { font-size: var(--receipt-detail-size); }
#hud #receipt .receipt-jump-hint, #hud #receipt .receipt-filter { color: var(--receipt-secondary); font-size: var(--receipt-meta-size); }
/* Receipt cards in Find's mixed Recent view use the same readable hierarchy. */
.family-app .evidence-card:has(.evidence-card-kind.receipt) .evidence-card-copy strong {
  color: var(--receipt-primary);
  font-size: var(--receipt-list-size);
  line-height: var(--receipt-leading);
}
.family-app .evidence-card:has(.evidence-card-kind.receipt) :is(.evidence-card-meta, .evidence-card-context, .transaction-tender) {
  color: var(--receipt-secondary);
  font-size: var(--receipt-meta-size);
  line-height: var(--receipt-leading);
}
.family-app .evidence-card.transaction .transaction-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  color: var(--receipt-primary);
  font: 500 var(--receipt-list-size)/var(--receipt-leading) var(--ui);
}
.family-app .transaction-line > span:first-child { white-space: normal; overflow-wrap: anywhere; }
.family-app .transaction-line > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Keep NVR timing for seeking; mobile only hides its visual metadata row. */
.hudhost.phone:not(.phone-landscape) #hud:not([data-deck="true"]) .receipt-line-time,
.hudhost.phone:not(.phone-landscape) #hud:not(.reals):not([data-deck="true"]) #receipt .line-time { display: none; }
.receipt-list-edge { width: 100%; min-height: 44px; flex: none; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--receipt-secondary); font: 500 .875rem var(--ui); padding: 10px; cursor: pointer; }
.receipt-list-edge:disabled { opacity: .6; cursor: wait; }

/* Match the playback capsule; equal side columns keep the total on center. */
#hud #receipt .receipt-head-btn:not(:is(#receiptPrev,#receiptNext,#receiptClose,#receiptLiveFollow)) .ricon { width: 24px !important; height: 24px !important; }
#hud #receipt .receipt-head-btn:not(:is(#receiptPrev,#receiptNext,#receiptClose,#receiptLiveFollow)):hover { border-color: var(--receipt-marker); }
#hud #receipt .receipt-head-btn:not(:is(#receiptPrev,#receiptNext,#receiptClose,#receiptLiveFollow)):focus-visible { outline: 2px solid var(--receipt-marker); outline-offset: 2px; }
#hud #receipt .receipt-head-btn:not(:is(#receiptPrev,#receiptNext,#receiptClose,#receiptLiveFollow)):disabled { opacity: .4; }
#hud #rcAmt {
  grid-column: 2; grid-row: 1; margin: 0 !important; min-width: 0;
  text-align: center; overflow: hidden; text-overflow: ellipsis;
  font: 700 18px/1.2 var(--mono);
}
#hud #rcTitle { grid-column: 1 / 3; grid-row: 2; font-size: 13px; color: var(--receipt-secondary); }
#hud #receipt .receipt-head-btn:not(:is(#receiptPrev,#receiptNext,#receiptClose,#receiptLiveFollow))[hidden] { display: none !important; }
#hud .rcard { touch-action: pan-y; }
/* Five ordinary mobile detail rows: keep typography and 44px controls, recover
   the second header band instead. Short viewports still scroll without clipping. */
.hudhost.phone:not(.phone-landscape) #hud:not(.reals):not([data-deck="true"]) #receipt #rcTitle {
  grid-column: 2; grid-row: 1; align-self: center;
  max-width: 100%; text-align: center; font-size: 13px;
}
.hudhost.phone:not(.phone-landscape) #hud:not(.reals):not([data-deck="true"]) #receipt #rcAmt { grid-row: 2; align-self: center; }
.hudhost.phone:not(.phone-landscape) #hud:not(.reals) #receipt {
  height: var(--receipt-waiting-height,272px); min-height: 0; max-height: none; flex: var(--receipt-waiting-flex,0 1 272px);
  padding-top: 4px; padding-bottom: 4px; gap: 0;
}
.hudhost.phone:not(.phone-landscape) #hud:not(.reals) #receipt:not(.waiting-live) #rcLines {
  flex: 1 1 220px !important; min-height: 0 !important;
}


/* Independent mobile sheets. Export and Reels deliberately retain their own layouts. */
/* Keep portrait video anchored above the sheets rather than vertically centering it behind them. */
/* Matrix dimensions come from sizeMatrixGrid, including the gaps between tiles. */
/* Visual-review revision: full timeline or hidden, with a compact camera recovery pill. */
.evidence-find-chips { display:none; }
#evidenceFindChips { flex:1 1 0; min-width:0; }
.hudhost.phone #evidenceFindChips { overflow:hidden; flex-wrap:nowrap; }
.hudhost.phone #evidenceFindChips button { flex:none; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#evidenceFindOpen { flex:none; }
/* Second visual pass: preserve the video boundary, and keep one expanded-camera handle. */
#hud .rcard[role="button"] { cursor:pointer; font-family:var(--ui); }
#hud .receipt-inline-controls { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; gap:12px; background:rgba(4,12,8,.52); border-radius:inherit; }
#hud .receipt-inline-controls button { width:48px; min-width:48px; height:48px; min-height:48px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--brand); border-radius:50%; background:var(--panel); color:var(--brand); font:24px var(--ui); }
#hud .receipt-inline-controls .ricon { width:22px; height:22px; }
#cameraSearchDialog { position:fixed; inset:12px 12px auto; width:auto; max-width:480px; margin:0 auto; box-sizing:border-box; padding:16px; border:1px solid #456751; border-radius:18px; background:#101c15; color:#e2efe6; overflow:auto; overscroll-behavior:contain; font:16px system-ui; }
#cameraSearchDialog::backdrop { background:rgba(0,0,0,.72); }
.camera-search-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
#cameraSearchDialog button { min-height:44px; padding:8px 12px; border:1px solid #456751; border-radius:12px; background:transparent; color:#9be1b9; font:16px system-ui; }
#cameraSearchInput { box-sizing:border-box; width:100%; min-height:44px; margin:12px 0; padding:10px; border:1px solid #719d82; border-radius:10px; background:#08110b; color:#eef7f1; font:16px system-ui; }
#cameraSearchResults { display:flex; flex-direction:column; gap:6px; }
#cameraSearchResults button { text-align:left; }

/* Contain receipt gestures and keep virtual spacers out of hit testing. */
#hud .receipt-window-spacer { pointer-events:none; min-height:0; margin:0; padding:0; }

/* Fixed list header: transaction and line-crossing time, independent of playback. */
#hud #receiptBrowseStripe { display:none; }
.hudhost.phone #hud #rail[data-surface="receipts"] #receiptBrowseStripe { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); flex:none; align-items:center; gap:6px; min-height:36px; padding:3px 12px; margin:0 12px; border-radius:7px; background:#a6ebc8; color:#073523; border:1px solid #c3f7dd; font:700 18px/1.2 var(--mono); font-variant-numeric:tabular-nums; }
#hud #receiptBrowseNumber { font-size:clamp(12px,3.4vw,14px); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#hud #receiptBrowseTime { white-space:nowrap; flex:none; }


#hud #receiptBrowseTotal { text-align:right; white-space:nowrap; font-size:clamp(12px,3.7vw,15px); }

/* Keep the open matrix chooser above the camera restore pill. */