/* Gap parts (SPEC §5.3): what the screens need that the design system lacks. Tokens only. Prefix jp-.
   Each part is logged in docs/GAPS.md. Lines, not cards; radius 4/6/8; no shadow at rest; one action fill per screen. */

/* Overrides of bundle.css (logged in docs/GAPS.md) ---------------------------------------------------------- */
/* bundle.css sets `:lang(km) { font-family: khmer }`, which matches the plate's inner spans directly and beats
   inheritance, so in Khmer a plate loses its mono face. Plates stay mono in every language. */
:lang(km) :is(.jx-plate-no, .jx-plate-prov) { font-family: var(--font-mono); }
/* A phone row's plate and model wrap rather than clip the plate (360px, Khmer). */
.jx-nrow-sub { flex-wrap: wrap; }
/* A table's customer meta (ref · phone) stays on one line; wrapping it turned one row into three. */
.jx-table .jx-cust-meta { white-space: nowrap; }

:where(.jp-langbtn, .jp-back, .jp-filter):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Full-bleed rows sit inside a scrolling list, where a ring outside the row would be clipped: draw it inside. */
.jp-nrow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---------- NativeScreen ---------- */
.jp-nscreen { height: 100%; display: flex; flex-direction: column; background: var(--page); }
.jp-nbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-6); }
.jp-nscreen > .jx-dock, .jp-nscreen > .jx-tabbar { flex: none; }

/* ---------- NativeHeader ---------- */
.jp-nhead { flex: none; background: var(--bar); border-bottom: 1px solid var(--line); padding: 0 var(--space-4) var(--space-3); }
.jp-nhead-top { display: flex; justify-content: space-between; align-items: center; min-height: var(--control-native); gap: var(--space-3); }
.jp-nhead-over { font: var(--type-meta); color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-nhead h1 { margin: 0; font: var(--type-title-lg); letter-spacing: var(--track-title-lg); color: var(--ink-heading); }
:lang(km) .jp-nhead h1 { font: var(--type-km-title); letter-spacing: 0; }
:lang(km) .jp-nhead-over { font: var(--type-km-meta); }
.jp-langbtn { flex: none; min-height: var(--control-native); padding: 0 var(--space-3); margin-right: calc(var(--space-3) * -1); border: 0; border-radius: var(--radius-md); background: none; color: var(--action-ink); font: var(--type-body-strong); cursor: pointer; }
.jp-langbtn:active { background: var(--hover); }

/* ---------- NativeFlowHeader ---------- */
.jp-flowhead { flex: none; display: flex; align-items: flex-start; background: var(--bar); border-bottom: 1px solid var(--line); }
.jp-back { flex: none; width: var(--control-native); height: var(--control-native); margin-left: var(--space-1); display: grid; place-items: center; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink); cursor: pointer; }
.jp-back:active { background: var(--hover); }
/* Override (logged in GAPS): the stepper sits inside the flow header, which owns the bar ground and the bottom rule. */
.jp-flowhead .jx-stepper { flex: 1; min-width: 0; padding-left: 0; background: transparent; border-bottom: 0; }

/* ---------- NativeQuestion ---------- */
.jp-question { padding: var(--space-6) var(--space-4) var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.jp-question h1 { margin: 0; font: var(--type-title-lg); letter-spacing: var(--track-title-lg); color: var(--ink-heading); }
.jp-question h1:lang(km) { font: var(--type-km-title); letter-spacing: 0; }
.jp-question-alt { font: var(--type-body); color: var(--ink-secondary); }
.jp-question-alt:lang(km) { font: var(--type-km-body); }
.jp-question-meta { margin: var(--space-3) 0 0; font: var(--type-body); color: var(--ink-secondary); display: flex; align-items: center; gap: var(--space-2); }
.jp-question-meta b { font: var(--type-body-strong); color: var(--ink); }
:lang(km) .jp-question-meta { font: var(--type-km-body); }

/* ---------- NativeListGroup ---------- */
.jp-group-head { margin: 0; padding: var(--space-6) var(--space-4) var(--space-2); display: flex; align-items: baseline; gap: var(--space-2); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
:lang(km) .jp-group-head { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; }
.jp-group-count { font: var(--type-meta); font-variant-numeric: tabular-nums; color: var(--ink-secondary); }
.jp-group-count.is-danger { color: var(--danger); font-weight: 700; }
.jp-group-list { border-top: 1px solid var(--line-subtle); }

/* ---------- NativeListRow (follows jx-nrow) ---------- */
.jp-nrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: var(--row-native); padding: var(--space-2) var(--space-4); box-sizing: border-box; background: var(--surface); border-bottom: 1px solid var(--line-subtle); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jp-nrow:active { background: var(--hover); }
.jp-nrow:not(:has(> .jp-nrow-lead)) { grid-template-columns: minmax(0, 1fr) auto; }
.jp-nrow.is-selected { background: var(--action-tint); }
.jp-nrow-lead { display: flex; align-items: center; justify-content: center; min-width: var(--control-native); color: var(--ink-secondary); }
.jp-nrow-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.jp-nrow-title { font: var(--type-title-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-nrow-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-nrow-sub { font: var(--type-km-meta); }
.jp-nrow-side { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); text-align: right; }
.jp-nrow.is-selected .jp-nrow-side { color: var(--action-ink); }
.jp-queue-no { font: var(--type-ref); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.jp-side-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.jp-side-k { font: var(--type-meta); color: var(--ink-muted); }
:lang(km) .jp-side-k { font: var(--type-km-meta); }

/* ---------- Toast ---------- */
.jp-toast { display: inline-flex; align-items: center; gap: var(--space-2); max-width: min(480px, calc(100vw - var(--space-8))); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-float); font: var(--type-body-strong); }
.jp-toast-success > .jx-icon { color: var(--success); }
.jp-toast-info > .jx-icon { color: var(--info); }
:lang(km) .jp-toast { font: var(--type-km-body); font-weight: 600; }

/* ---------- PageHeader ---------- */
.jp-phead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; }
.jp-phead h1 { margin: 0; font: var(--type-title-lg); letter-spacing: var(--track-title-lg); color: var(--ink-heading); }
:lang(km) .jp-phead h1 { font: var(--type-km-title); letter-spacing: 0; }
.jp-phead p { margin: var(--space-1) 0 0; font: var(--type-body); color: var(--ink-secondary); max-width: 60ch; }
:lang(km) .jp-phead p { font: var(--type-km-body); }
.jp-phead-actions { display: flex; align-items: flex-end; gap: var(--space-3); }
.jp-phead-actions .jx-field { width: 280px; }
/* Narrow pages: the header's actions take their own row, and a search field the full width. */
@media (max-width: 767px) {
  .jp-phead-actions { width: 100%; flex-wrap: wrap; }
  .jp-phead-actions .jx-field { width: 100%; }
}

/* ---------- FilterTabs ---------- */
.jp-filters { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--line); margin-bottom: calc(var(--space-6) * -1 + var(--space-3)); }
.jp-filter { height: var(--control-web); padding: 0 var(--space-3); margin-bottom: -1px; display: inline-flex; align-items: center; gap: var(--space-2); border: 0; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: none; color: var(--ink-secondary); font: var(--type-body-strong); cursor: pointer; white-space: nowrap; }
.jp-filter:hover { background: var(--hover); color: var(--ink); }
.jp-filter[aria-pressed="true"] { color: var(--ink-heading); border-bottom-color: var(--action-ink); }
.jp-filter-count { font: var(--type-meta); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.jp-filter:hover .jp-filter-count { color: var(--ink-secondary); }
.jp-filter-count.is-danger { color: var(--danger); font-weight: 700; }
.jp-filter-count.is-warning { color: var(--warning); font-weight: 700; }
:lang(km) .jp-filter { font: var(--type-km-meta); font-weight: 600; }

/* ---------- DataTable cells (jx-table styling, plus two-line cells) ---------- */
.jp-cell { display: flex; flex-direction: column; gap: 0; }
.jp-cell-meta { font: var(--type-meta); color: var(--ink-muted); white-space: nowrap; }
:lang(km) .jp-cell-meta { font: var(--type-km-meta); }
.jx-table tr[hidden] { display: none; }
.jp-footnote { margin: calc(var(--space-6) * -1 + var(--space-3)) 0 0; font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-footnote { font: var(--type-km-body); }

/* ---------- NativeField (merged from jp-nr-field, jp-rt-field, jp-nm-field) ---------- */
.jp-nfield { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.jp-nfield-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font: var(--type-body-strong); color: var(--ink-secondary); }
:lang(km) .jp-nfield-label { font: var(--type-km-body); font-weight: 600; }
.jp-nfield.is-compact .jp-nfield-label { font: var(--type-meta); font-weight: 600; }
:lang(km) .jp-nfield.is-compact .jp-nfield-label { font: var(--type-km-meta); }
.jp-nfield-opt { font: var(--type-meta); color: var(--ink-muted); }
:lang(km) .jp-nfield-opt { font: var(--type-km-meta); }
.jp-nfield-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jp-nfield-wrap { position: relative; display: flex; align-items: center; }
.jp-nfield-prefix { position: absolute; left: var(--space-3); font: var(--type-body-strong); color: var(--ink-secondary); pointer-events: none; }
.jp-nfield-input { box-sizing: border-box; width: 100%; height: var(--control-native); padding: 0 var(--space-3); border: 0; border-bottom: 1px solid var(--line-control); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--field); color: var(--ink); font: var(--type-body); font-size: 16px; }
.jp-nfield-prefix + .jp-nfield-input { padding-left: var(--space-8); }
.jp-nfield-area { height: auto; min-height: calc(var(--control-native) * 1.5); padding: var(--space-3); resize: vertical; }
.jp-nfield-input.is-mono { font-family: var(--font-mono); letter-spacing: var(--track-ref); }
.jp-nfield-input.is-numeric { font-variant-numeric: tabular-nums; }
.jp-nfield-input[readonly] { color: var(--ink-secondary); }
.jp-nfield-input::placeholder { color: var(--ink-muted); }
select.jp-nfield-input { appearance: auto; }
.jp-nfield-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.jp-nfield-hint { margin: 0; display: flex; align-items: flex-start; gap: var(--space-1); font: var(--type-meta); color: var(--ink-secondary); }
.jp-nfield-hint > .jx-icon { flex: none; margin-top: 1px; }
:lang(km) .jp-nfield-hint { font: var(--type-km-meta); }
.jp-nfield.is-error .jp-nfield-input { border-bottom: 2px solid var(--danger); }
.jp-nfield.is-error .jp-nfield-hint { color: var(--danger); }
.jp-nfield.is-strong-error.is-error .jp-nfield-hint { font-weight: 600; }

/* ---------- NativeNotice (merged from jp-nr-note, jp-rt-notice) ---------- */
.jp-nnotice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--field); color: var(--ink-secondary); }
.jp-nnotice.is-neutral { grid-template-columns: minmax(0, 1fr); }
.jp-nnotice.is-warning { background: var(--warning-tint); color: var(--warning); }
.jp-nnotice.is-danger { background: var(--danger-tint); color: var(--danger); }
.jp-nnotice > .jx-icon { margin-top: 1px; }
.jp-nnotice-title { margin: 0; font: var(--type-body-strong); color: var(--ink); }
.jp-nnotice-body { margin: var(--space-1) 0 0; font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-nnotice-title { font: var(--type-km-body); font-weight: 700; }
:lang(km) .jp-nnotice-body { font: var(--type-km-body); }

/* ---------- NativeText ---------- */
.jp-ntext { margin: 0; padding: var(--space-3) var(--space-4) 0; font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-ntext { font: var(--type-km-body); }

/* NativeText spacing variants */
.jp-ntext.is-roomy { padding: var(--space-4); }
.jp-ntext.is-lead { padding: var(--space-4) var(--space-4) 0; }
.jp-ntext.is-flush { margin: var(--space-2) 0 0; padding: 0; }
/* A row without a lead (a length, an amount, a match): two columns, so the title doesn't sit in the lead's slot. */
.jp-nrow.is-nolead { grid-template-columns: minmax(0, 1fr) auto; }
/* A question's meta line that holds a vehicle name and its plate wraps rather than overflowing at 360. */
.jp-question-meta { flex-wrap: wrap; }

/* ================= Moved in from css/groups/native-rent.css and native-more.css (4 Oct 2026) ================= */

.jp-nr-pad { padding: var(--space-4) var(--space-4) 0; }
.jp-nr-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.jp-nr-strong { font: var(--type-body-strong); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-nr-link { display: inline-flex; align-items: center; min-height: var(--control-native); padding: 0; border: 0; background: none; color: var(--action-ink); font: var(--type-body-strong); text-decoration: none; cursor: pointer; }
:lang(km) .jp-nr-link { font: var(--type-km-body); font-weight: 600; }
:where(.jp-nr-link, .jp-nr-hit, .jp-nr-pin):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.jp-nrow[aria-disabled="true"] { cursor: default; }
.jp-nrow[aria-disabled="true"]:active { background: var(--surface); }
.jp-nrow[aria-disabled="true"] .jp-nrow-title, .jp-nrow[aria-disabled="true"] .jp-nrow-lead { color: var(--ink-muted); }
/* A question's meta line that holds a vehicle name and its plate wraps rather than overflowing at 360. */
.jp-question-meta { flex-wrap: wrap; }

/* ---------- NativeForm ---------- */
.jp-nr-form { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- NativeIdPhoto: the photo at the document's own shape ---------- */
.jp-nr-doc { display: flex; flex-direction: column; gap: var(--space-2); }
.jp-nr-mrz { margin: 0; padding: var(--space-2) var(--space-3); background: var(--field); border-radius: var(--radius-sm); font: var(--type-meta); font-family: var(--font-mono); color: var(--ink-secondary); overflow-wrap: anywhere; word-break: break-all; }

/* ---------- NativeFacts: key–value lines ---------- */
.jp-nr-facts { margin-top: var(--space-4); }
.jp-nr-kvlist { margin: 0; border-top: 1px solid var(--line-subtle); background: var(--surface); }
.jp-nr-kv { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-subtle); }
.jp-nr-kv dt { font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-nr-kv dt { font: var(--type-km-meta); }
.jp-nr-kv dd { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); text-align: right; }
.jp-nr-kv-v { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); max-width: 100%; font: var(--type-body-strong); color: var(--ink); font-variant-numeric: tabular-nums; }
:lang(km) .jp-nr-kv-v { font: var(--type-km-body); font-weight: 600; }
.jp-nr-kv-sub { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-3); font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-nr-kv-sub { font: var(--type-km-meta); }
.jp-nr-kv-sub .jp-nr-link { min-height: var(--control-native); margin: calc(var(--space-3) * -1) 0; }
.jp-nr-kv .jx-money { align-items: flex-end; }
/* The total line: the one figure on the screen, ruled off from the lines above it. */
.jp-nr-kv.is-strong { align-items: center; border-top: 1px solid var(--line); }
.jp-nr-kv.is-strong dt { font: var(--type-body-strong); color: var(--ink); }
:lang(km) .jp-nr-kv.is-strong dt { font: var(--type-km-body); font-weight: 700; }

/* ---------- NativeBlockedAction: the reason in one sentence above the button ---------- */
.jp-nr-why { margin: 0; display: flex; align-items: flex-start; gap: var(--space-2); font: var(--type-body); color: var(--ink-secondary); }
.jp-nr-why > .jx-icon { flex: none; margin-top: var(--space-1); }
:lang(km) .jp-nr-why { font: var(--type-km-body); }

/* ---------- NativeFormSheet, NativeSheetLine ---------- */
.jp-nr-sheetform { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-2); }
.jp-nr-sheetline { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- NativePhotoShot: a photo with numbered damage pins and their list ---------- */
.jp-nr-shot { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.jp-nr-shot-cap { display: flex; align-items: baseline; gap: var(--space-2); }
.jp-nr-shot-no { font: var(--type-ref); color: var(--ink-muted); }
.jp-nr-shot-side { font: var(--type-body-strong); color: var(--ink); }
.jp-nr-shot-at { margin-left: auto; font: var(--type-meta); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
:lang(km) .jp-nr-shot-side { font: var(--type-km-body); font-weight: 600; }
:lang(km) .jp-nr-shot-at { font: var(--type-km-meta); }
.jp-nr-frame { position: relative; }
.jp-nr-shot.is-taken .jx-slot { border-style: solid; border-color: var(--line); }
.jp-nr-hit { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); background: transparent; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.jp-nr-hit.is-take { display: grid; place-items: center; color: var(--ink-secondary); cursor: pointer; }
.jp-nr-hit.is-take:active { background: var(--hover); }
/* A new pin is a 48px button around a 24px numbered dot, centred on the spot that was tapped. A pin on record is
   the dot alone (amber, not removable here: the owner marks it repaired). */
.jp-nr-pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; border: 0; background: none; }
.jp-nr-pin.is-new { width: var(--control-native); height: var(--control-native); border-radius: var(--radius-md); cursor: pointer; }
.jp-nr-pin.is-record { pointer-events: none; }
.jp-nr-pin.is-record, .jp-nr-pin > span, .jp-nr-dot { box-sizing: border-box; width: var(--space-6); height: var(--space-6); display: inline-grid; place-items: center; border-radius: var(--radius-sm); background: var(--ink-heading); color: var(--on-status); font: var(--type-meta); font-weight: 700; font-variant-numeric: tabular-nums; }
.jp-nr-pin.is-record, .jp-nr-pin > span { border: 2px solid var(--surface); }
.jp-nr-pin.is-record, .jp-nr-dot.is-record { background: var(--warning); }
.jp-nr-marks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.jp-nr-marks li { display: flex; align-items: center; gap: var(--space-2); font: var(--type-body); color: var(--ink); }
:lang(km) .jp-nr-marks li { font: var(--type-km-body); }
.jp-nr-dot { flex: none; }
.jp-nr-record { color: var(--warning); font-weight: 600; }
.jp-nr-now { color: var(--ink-secondary); }

/* ---------- NativeConfirmation (success colour only here) ---------- */
.jp-nr-done { padding: var(--space-6) var(--space-4) var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.jp-nr-done-mark { width: var(--control-native); height: var(--control-native); margin-bottom: var(--space-3); display: grid; place-items: center; border-radius: var(--radius-md); background: var(--success-tint); color: var(--success); }
.jp-nr-done h2 { margin: 0; font: var(--type-title-lg); letter-spacing: var(--track-title-lg); color: var(--ink-heading); overflow-wrap: anywhere; }
.jp-nr-done h2:lang(km) { font: var(--type-km-title); letter-spacing: 0; }
.jp-nr-done-text { margin: var(--space-3) 0 0; font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-nr-done-text { font: var(--type-km-body); }
.jp-nr-ref { font: var(--type-ref); letter-spacing: var(--track-ref); }

:where(.jp-nm-textbtn, .jp-nm-link):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.jp-nm-link:focus-visible { outline-offset: -2px; }


/* ---------- NativeOfflineBanner ---------- */
.jp-nm-offline { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); background: var(--field); border-bottom: 1px solid var(--line); color: var(--ink-secondary); }
.jp-nm-offline-text { min-width: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-2); align-items: baseline; }
.jp-nm-offline-text b { font: var(--type-body-strong); color: var(--ink); }
.jp-nm-offline-text span { font: var(--type-meta); font-variant-numeric: tabular-nums; }
:lang(km) .jp-nm-offline-text b { font: var(--type-km-body); font-weight: 600; }
:lang(km) .jp-nm-offline-text span { font: var(--type-km-meta); }
.jp-nm-textbtn { min-height: var(--control-native); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--action-ink); font: var(--type-body-strong); cursor: pointer; white-space: nowrap; }
.jp-nm-textbtn:active { background: var(--hover); }
:lang(km) .jp-nm-textbtn { font: var(--type-km-body); font-weight: 600; }

/* ---------- NativePushHeader ---------- */
.jp-nm-push { flex: none; display: flex; align-items: center; gap: var(--space-1); min-height: calc(var(--control-native) + var(--space-2)); padding-right: var(--space-4); background: var(--bar); border-bottom: 1px solid var(--line); }
.app-phone .jp-nm-push { padding-top: env(safe-area-inset-top); }
.jp-nm-push-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jp-nm-push h1 { margin: 0; font: var(--type-title); letter-spacing: var(--track-title); color: var(--ink-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-nm-push-over { font: var(--type-meta); color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:lang(km) .jp-nm-push h1 { font: var(--type-km-body); font-weight: 700; }
:lang(km) .jp-nm-push-over { font: var(--type-km-meta); }

/* ---------- NativeLinkRow / NativeInfoRow (follow jp-nrow) ---------- */
.jp-nm-link { color: inherit; text-decoration: none; }
.jp-nm-info { cursor: default; }
.jp-nm-info:active { background: var(--surface); }
.jp-nm-side-k { font: var(--type-meta); color: var(--ink-secondary); white-space: nowrap; }
:lang(km) .jp-nm-side-k { font: var(--type-km-meta); }

/* ---------- NativeEmpty ---------- */
.jp-nm-empty { padding: var(--space-6) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line-subtle); display: flex; flex-direction: column; gap: var(--space-1); }
.jp-nm-empty p { margin: 0; font: var(--type-body); color: var(--ink-secondary); max-width: 40ch; }
.jp-nm-empty .jp-nm-empty-title { font: var(--type-title-sm); color: var(--ink); }
:lang(km) .jp-nm-empty p { font: var(--type-km-body); }
:lang(km) .jp-nm-empty .jp-nm-empty-title { font-weight: 700; }

/* ---------- NativeActionRow, NativeSideNote: a button drawn as a row ---------- */
.jp-nm-rowbtn { width: 100%; border: 0; border-bottom: 1px solid var(--line-subtle); text-align: left; font: inherit; color: inherit; }
.jp-nm-rowbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.jp-nm-action { color: var(--action-ink); font-weight: 600; }
.jp-nrow-title .jp-nm-action { font: var(--type-title-sm); color: var(--action-ink); }

/* ================= Moved in from css/groups/native-return.css (4 Oct 2026) ================= */

:where(.jp-rt-backbtn, .jp-rt-choice-btn, .jp-rt-take, .jp-rt-hit, .jp-rt-check input):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Props added to existing parts ---------- */
/* NativeText: none / above spacing, head, danger tone. A danger sentence keeps body-strong in Khmer too (as drawn). */
.jp-ntext.is-none { margin: 0; padding: 0; }
.jp-ntext.is-above { margin: var(--space-4) 0 0; padding: 0; }
.jp-ntext.is-head { font: var(--type-title-sm); color: var(--ink); }
:lang(km) .jp-ntext.is-head { font: var(--type-km-body); font-weight: 700; }
.jp-ntext.is-danger { color: var(--danger); }
.jp-ntext.is-danger:not(.is-head), :lang(km) .jp-ntext.is-danger:not(.is-head) { font: var(--type-body-strong); }
/* NativeInset: no room above; 12 between stacked children. */
.jp-nr-pad.is-flat { padding-top: 0; }
.jp-nr-stack.is-tight { gap: var(--space-3); }
/* NativeListGroup plain: no rule under the label. */
.jp-group-list.is-plain { border-top: 0; }
/* NativeLinkButton padded. */
.jp-nr-link.is-padded { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-md); }
.jp-nr-link.is-padded:active { background: var(--hover); }
/* NativeRef muted. */
.jp-nr-ref.is-muted { color: var(--ink-secondary); white-space: nowrap; }
/* NativeEmpty: one line (no title), and bare (on the page ground). A one-line empty keeps the body face in Khmer (as drawn). */
.jp-nm-empty.is-line { padding: var(--space-4); }
:lang(km) .jp-nm-empty.is-line p { font: var(--type-body); }
.jp-nm-empty.is-bare { padding: var(--space-8) var(--space-4) 0; background: none; border-bottom: 0; gap: var(--space-4); }
:is(.jp-nm-empty.is-line, .jp-nm-empty.is-bare) p { max-width: none; }
/* NativeFacts ledger: label in body, value from its column, 48-high lines. */
.jp-nr-facts.is-ledger .jp-nr-kv { min-height: var(--control-native); box-sizing: border-box; }
.jp-nr-facts.is-ledger .jp-nr-kv dt { font: var(--type-body); }
:lang(km) .jp-nr-facts.is-ledger .jp-nr-kv dt { font: var(--type-km-body); }
.jp-nr-facts.is-ledger .jp-nr-kv dd { align-items: flex-start; text-align: left; }
.jp-nr-facts.is-ledger .jp-nr-kv-v { justify-content: flex-start; font-variant-numeric: normal; overflow-wrap: anywhere; }
.jp-nr-facts.is-ledger .jx-money-inline { font-variant-numeric: tabular-nums; }

/* ---------- NativeInline, NativeModelPlate ---------- */
.jp-rt-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.jp-rt-ellip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-rt-sep { color: var(--ink-muted); }
.jp-rt-dim { color: var(--ink-secondary); }
.jp-rt-total { font-weight: 700; }
.jp-rt-total.is-error { color: var(--danger); }

/* ---------- NativeLargeTitleHeader, NativeScreenTitle ---------- */
.jp-rt-head, .jp-rt-donehead { flex: none; background: var(--bar); border-bottom: 1px solid var(--line); padding: 0 var(--space-4) var(--space-3); }
.jp-rt-head-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-native); }
.jp-rt-backbtn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-native); min-width: var(--control-native); margin-left: calc(var(--space-2) * -1); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: var(--action-ink); font: var(--type-body-strong); cursor: pointer; }
.jp-rt-backbtn:active { background: var(--hover); }
:lang(km) .jp-rt-backbtn { font: var(--type-km-body); font-weight: 600; }
.jp-rt-head-over { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font: var(--type-meta); color: var(--ink-secondary); }
.jp-rt-head-over.is-success { color: var(--success); font-weight: 700; }
:lang(km) .jp-rt-head-over { font: var(--type-km-meta); }
.jp-rt-head h1, .jp-rt-donehead h1, .jp-rt-title h1 { margin: 0; font: var(--type-title-lg); letter-spacing: var(--track-title-lg); color: var(--ink-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:lang(km) :is(.jp-rt-head, .jp-rt-donehead, .jp-rt-title) h1 { font: var(--type-km-title); letter-spacing: 0; white-space: normal; }
.jp-rt-head-sub, .jp-rt-title p { margin: var(--space-1) 0 0; font: var(--type-body); color: var(--ink-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
:lang(km) :is(.jp-rt-head-sub, .jp-rt-title p) { font: var(--type-km-body); }
.jp-rt-donehead { padding-top: var(--space-6); }
.jp-rt-donehead .jp-rt-head-over { margin-bottom: var(--space-1); }
.jp-rt-title { padding: var(--space-6) var(--space-4) var(--space-2); }

/* ---------- NativePhotoShot compact, NativePhotoPairs ---------- */
.jp-rt-pair-k { margin: 0 0 var(--space-2); font: var(--type-body-strong); color: var(--ink); }
:lang(km) .jp-rt-pair-k { font: var(--type-km-body); font-weight: 600; }
.jp-rt-pair-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.jp-rt-colheads { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); margin-bottom: calc(var(--space-2) * -1); }
:lang(km) .jp-rt-colheads { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; }
.jp-rt-fig { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.jp-rt-fig figcaption { font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-rt-fig figcaption { font: var(--type-km-meta); }
.jp-rt-shot { position: relative; display: block; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: none; }
.jp-rt-hit { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
/* Override (logged in GAPS): ImageSlot sets a px width inline; inside a two-up pair it fills its column. */
.jp-rt-shot .jx-slot, .jp-rt-take { width: 100% !important; }
.jp-rt-shot.is-markable .jx-slot { border-style: solid; border-color: var(--line-strong); }
.jp-rt-take { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); box-sizing: border-box; border: 1px dashed var(--action-ink); border-radius: var(--radius-md); background: var(--action-tint); color: var(--action-ink); font: var(--type-body-strong); cursor: pointer; }
.jp-rt-take:active { background: var(--hover); }
.jp-rt-take-angle { font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-rt-take { font: var(--type-km-meta); font-weight: 600; }
.jp-rt-dot { position: absolute; width: var(--space-6); height: var(--space-6); margin: calc(var(--space-3) * -1) 0 0 calc(var(--space-3) * -1); display: grid; place-items: center; border-radius: var(--radius-sm); font: var(--type-meta); font-weight: 700; font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--on-status); pointer-events: none; }
.jp-rt-dot.is-record { background: var(--warning); }
.jp-rt-dot.is-new { background: var(--danger); }

/* ---------- NativeMarkList ---------- */
.jp-rt-mark { position: relative; display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: var(--row-native); padding: var(--space-2) var(--space-4); box-sizing: border-box; background: var(--surface); border-bottom: 1px solid var(--line-subtle); }
.jp-rt-mark .jp-rt-dot { position: static; margin: 0; }
.jp-rt-mark-main { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.jp-rt-mark-title { font: var(--type-title-sm); color: var(--ink); }
.jp-rt-mark-sub { font: var(--type-meta); color: var(--ink-secondary); }
.jp-rt-mark-sub.is-new { color: var(--danger); font-weight: 600; }
.jp-rt-mark-sub.is-record { color: var(--warning); font-weight: 600; }
:lang(km) .jp-rt-mark-title { font: var(--type-km-body); font-weight: 600; }
:lang(km) .jp-rt-mark-sub { font: var(--type-km-meta); }

/* ---------- NativeDecision (DecisionPanel order on a phone) ---------- */
.jp-rt-dec { margin-top: var(--space-4); border-top: 1px solid var(--line); background: var(--surface); }
.jp-rt-dec > section { padding: var(--space-4); border-bottom: 1px solid var(--line-subtle); display: flex; flex-direction: column; gap: var(--space-3); }
.jp-rt-dec > section:last-child { border-bottom: 1px solid var(--line); }
.jp-rt-dec-k { margin: 0; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
:lang(km) .jp-rt-dec-k { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; }
.jp-rt-dec-v { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.jp-rt-fromto { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.jp-rt-arrow { color: var(--ink-muted); }
.jp-rt-dec-line { margin: 0; font: var(--type-body-strong); color: var(--ink); }
:lang(km) .jp-rt-dec-line { font: var(--type-km-body); font-weight: 600; }
/* What sits inside the panel: ledger lines and the mark list bleed to its edges; the proof photos sit 4 lower. */
.jp-rt-dec-v .jp-nr-facts { margin: 0 calc(var(--space-4) * -1); }
.jp-rt-dec-v .jp-nr-kv:last-child { border-bottom: 0; }
.jp-rt-dec-v > .jp-rt-marklist { margin: var(--space-2) calc(var(--space-4) * -1) 0; border-top: 1px solid var(--line-subtle); }
.jp-rt-dec-v > .jp-rt-pair-row { margin-top: var(--space-1); }

/* ---------- NativeChoice (one of n) ---------- */
.jp-rt-choice { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jp-rt-choice-btn { flex: 1 1 0; min-width: calc((100% - var(--space-4)) / 3); min-height: var(--control-native); padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: var(--type-body-strong); cursor: pointer; }
.jp-rt-choice-btn:active { background: var(--hover); }
.jp-rt-choice-btn[aria-pressed="true"] { background: var(--action-tint); border-color: var(--action-ink); color: var(--ink-heading); }
.jp-rt-choice-btn[disabled] { opacity: .45; cursor: default; }
:lang(km) .jp-rt-choice-btn { font: var(--type-km-meta); font-weight: 600; }

/* ---------- NativeCheckRow ---------- */
.jp-rt-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-native); font: var(--type-body-strong); color: var(--ink); cursor: pointer; }
.jp-rt-check input { flex: none; width: var(--space-6); height: var(--space-6); margin: 0; accent-color: var(--action); }
:lang(km) .jp-rt-check { font: var(--type-km-body); font-weight: 600; }

/* ---------- NativeButtonRow ---------- */
.jp-rt-dockrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.jp-rt-dockrow.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- NativeSheet column, NativeRemindSheet ---------- */
.jp-rt-sheet .jx-sheet { max-height: calc(100dvh - var(--space-12)); overflow-y: auto; }
.jp-rt-sheet-k { margin: 0 0 var(--space-1); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
:lang(km) .jp-rt-sheet-k { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; }
.jp-rt-msg { margin: 0; padding: var(--space-3); background: var(--field); border-radius: var(--radius-md); font: var(--type-body); color: var(--ink); }
.jp-rt-msg:lang(km) { font: var(--type-km-body); }
.jp-rt-msg-lang { margin: var(--space-1) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); font: var(--type-meta); color: var(--ink-secondary); }
.jp-rt-sheet .jp-nr-facts { margin: 0 calc(var(--space-4) * -1) var(--space-3); }
/* On a laptop the native screen sits in a 440 column: its sheet rises inside that column, not across the window. */
.app-main-native .app-nativecol:has(.jp-rt-sheet) { position: relative; }
#app .app-main-native .jp-rt-sheet .jx-sheet-scrim { position: absolute; inset: 0; min-height: 0; }