/* Screen layouts of the native-more screens (prefix jp-nm-): the deposits summary, sign-in, the QR pages. Every part lives in ui/.
   Tokens only. Lines, not cards; radius 4/6/8; no shadow at rest; one action fill per screen. */

/* ---------- 1.1a: the check-ins group's sentence and the queued rental ---------- */
.jp-nm-explain { margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line-subtle); font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-nm-explain { font: var(--type-km-body); }
.jp-nm-pending { font: var(--type-meta); font-weight: 600; color: var(--ink-secondary); white-space: nowrap; }
:lang(km) .jp-nm-pending { font: var(--type-km-meta); font-weight: 600; }

/* ---------- 5.1: the deposits summary ---------- */
.jp-nm-sum { padding: var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-2); }
.jp-nm-sum-k { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
:lang(km) .jp-nm-sum-k { font: var(--type-km-meta); letter-spacing: 0; text-transform: none; }
.jp-nm-sum-docs { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font: var(--type-body); color: var(--ink); }
.jp-nm-sum-docs span { display: inline-flex; align-items: center; gap: var(--space-1); }
.jp-nm-sum-for { font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-nm-sum-docs { font: var(--type-km-body); }
:lang(km) .jp-nm-sum-for { font: var(--type-km-meta); }
.jp-nm-depside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.jp-nm-depside .jx-money-usd { color: var(--ink); }

/* ---------- 6.1 Sign in ---------- */
.jp-nm-signin-top { flex: none; display: flex; justify-content: flex-end; padding: 0 var(--space-4); min-height: var(--control-native); background: var(--page); }
.app-phone .jp-nm-signin-top { padding-top: env(safe-area-inset-top); }
.jp-nm-signin { padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); max-width: 440px; }
.jp-nm-signin-brand { display: flex; flex-direction: column; gap: var(--space-4); }
.jp-nm-signin-brand .jp-question { padding: 0; }
.jp-nm-signin-brand p { margin: 0; font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-nm-signin-brand p { font: var(--type-km-body); }
.jp-nm-signin-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.jp-nm-signin-help { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line-subtle); font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-nm-signin-help { font: var(--type-km-body); }

/* ---------- 6.3 Show check-in QR: the customer reads it, so the code leads ---------- */
.jp-nm-qr { min-height: 100%; box-sizing: border-box; padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; background: var(--surface); }
.jp-nbody:has(> .jp-nm-qr) { background: var(--surface); }
.jp-nm-qr-shop { font: var(--type-body-strong); color: var(--ink-secondary); }
.jp-nm-qr .jp-question { padding: 0; align-items: center; }
.jp-nm-qr p { margin: 0; font: var(--type-body); color: var(--ink-secondary); max-width: 34ch; }
:lang(km) .jp-nm-qr p, :lang(km) .jp-nm-qr-shop { font: var(--type-km-body); }
:lang(km) .jp-nm-qr-shop { font-weight: 600; }
.jp-nm-wifi { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-subtle); border-bottom: 1px solid var(--line-subtle); width: 100%; box-sizing: border-box; max-width: 340px; }
.jp-nm-wifi b { font: var(--type-ref); color: var(--ink); overflow-wrap: anywhere; }
.jp-nm-qr .jp-nm-qr-print { font: var(--type-meta); color: var(--ink-muted); }
:lang(km) .jp-nm-qr .jp-nm-qr-print { font: var(--type-km-meta); }

/* ---------- 6.4 Check-in: the counter QR beside one sentence ---------- */
.jp-nm-ciqr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.jp-nm-ciqr p { margin: 0; font: var(--type-body); color: var(--ink-secondary); }
.jp-nm-ciqr b { display: block; font: var(--type-title-sm); color: var(--ink); }
:lang(km) .jp-nm-ciqr p { font: var(--type-km-body); }