/* Gap parts for the web-setup screens (prefix jp-ws-). Tokens only; each part is logged in docs/GAPS.md.
   Lines, not cards; radius 4/6/8; no shadow at rest; one action fill per screen. */

.jp-ws-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jp-ws-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.jp-ws-muted { color: var(--ink-muted); }
.jp-ws-a { color: var(--action-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:where(.jp-ws-a, .jp-ws-crumb-link, .jp-ws-step-link, .jp-ws-x, .jp-ws-check input):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.jp-ws-linkbtn { text-decoration: none; box-sizing: border-box; }
.jp-ws-linkbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- SetupCrumb ---------- */
.jp-ws-crumb { display: flex; align-items: center; gap: var(--space-2); margin-bottom: calc(var(--space-6) * -1 + var(--space-2)); font: var(--type-meta); color: var(--ink-muted); }
.jp-ws-crumb-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; color: var(--action-ink); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); }
.jp-ws-crumb-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.jp-ws-crumb-step::before { content: "·"; margin-right: var(--space-2); }
:lang(km) .jp-ws-crumb { font: var(--type-km-meta); }
@media (max-width: 767px) { .jp-ws-crumb { margin-bottom: calc(var(--space-4) * -1 + var(--space-2)); } }

/* ---------- Checklist (1.1) ---------- */
.jp-ws-progressrow { display: flex; flex-direction: column; gap: var(--space-2); margin-top: calc(var(--space-6) * -1 + var(--space-3)); }
.jp-ws-progress { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-1); }
.jp-ws-progress span { height: 4px; border-radius: var(--radius-sm); background: var(--hover); }
.jp-ws-progress span.is-done { background: var(--ink-secondary); }
.jp-ws-by { margin: 0; font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-ws-by { font: var(--type-km-meta); }

.jp-ws-steps, .jp-ws-donelist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.jp-ws-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-4); border-bottom: 1px solid var(--line-subtle); }
.jp-ws-step:last-child { border-bottom: 0; }
.jp-ws-step.is-now { background: var(--surface-raised); }
.jp-ws-step-mark { width: 28px; height: 28px; box-sizing: border-box; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); font: var(--type-meta); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-secondary); }
.jp-ws-step.is-done .jp-ws-step-mark, .jp-ws-donerow .jp-ws-step-mark { border-color: transparent; background: var(--field); color: var(--ink); }
.jp-ws-step.is-now .jp-ws-step-mark { border: 2px solid var(--action-ink); color: var(--action-ink); }
.jp-ws-step-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); padding-top: 2px; }
.jp-ws-step-title { margin: 0; font: var(--type-title-sm); color: var(--ink-heading); }
.jp-ws-step.is-todo .jp-ws-step-title { color: var(--ink); font-weight: 500; }
:lang(km) .jp-ws-step-title { font: var(--type-km-body); font-weight: 600; }
.jp-ws-step-link { display: none; }
.jp-ws-step-detail { margin: 0; font: var(--type-body); color: var(--ink-secondary); max-width: 60ch; }
.jp-ws-step.is-done .jp-ws-step-detail { font: var(--type-meta); line-height: 22px; }
:lang(km) .jp-ws-step-detail { font: var(--type-km-body); }
:lang(km) .jp-ws-step.is-done .jp-ws-step-detail { font: var(--type-km-meta); }
.jp-ws-step-action { display: flex; align-items: center; min-height: 28px; }
.jp-ws-step.is-now .jp-ws-step-action { align-self: center; }

/* Phone (1.1 · 390): one column; only the current step keeps its sentence and button; the rest are one tappable line. */
@media (max-width: 767px) {
  .jp-ws-step { grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding: 0 var(--space-4); }
  .jp-ws-step.is-now { padding: var(--space-4); }
  .jp-ws-step:not(.is-now) { align-items: center; }
  .jp-ws-step:not(.is-now) .jp-ws-step-mark { margin: var(--space-2) 0; }
  .jp-ws-step:not(.is-now) :is(.jp-ws-step-detail, .jp-ws-step-action, .jp-ws-step-text) { display: none; }
  .jp-ws-step:not(.is-now) .jp-ws-step-main { padding: 0; }
  .jp-ws-step:not(.is-now) .jp-ws-step-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--control-native); color: inherit; text-decoration: none; }
  .jp-ws-step:not(.is-now) .jp-ws-step-link > .jx-icon { color: var(--ink-muted); flex: none; }
  .jp-ws-step-link:focus-visible { outline-offset: -2px; }
  .jp-ws-step.is-now .jp-ws-step-action { grid-column: 1 / -1; }
  .jp-ws-step.is-now .jp-ws-step-action .jx-btn { width: 100%; justify-content: center; height: var(--control-native); }
}

/* ---------- Ready (1.1a) ---------- */
.jp-ws-donerow { display: grid; grid-template-columns: 28px 20px minmax(0, 1fr); gap: var(--space-3); align-items: center; min-height: var(--row-web); padding: var(--space-2) var(--space-4); box-sizing: border-box; border-bottom: 1px solid var(--line-subtle); }
.jp-ws-donerow:last-child { border-bottom: 0; }
.jp-ws-donerow-n { font: var(--type-meta); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.jp-ws-donerow-t { font: var(--type-body-strong); color: var(--ink); }
.jp-ws-donerow-c { font-weight: 400; color: var(--ink-secondary); }
:lang(km) .jp-ws-donerow-t { font: var(--type-km-body); font-weight: 600; }
@media (max-width: 767px) {
  .jp-ws-donerow-n { display: none; }
  .jp-ws-donerow { grid-template-columns: 28px minmax(0, 1fr); }
}

/* ---------- Form parts ---------- */
.jp-ws-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.jp-ws-note { margin: calc(var(--space-2) * -1) 0 0; font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-ws-note { font: var(--type-km-meta); }
.jp-ws-textarea { height: auto; min-height: calc(var(--control-web) * 3); padding: var(--space-2) var(--space-3); resize: vertical; line-height: 22px; }
.jp-ws-textarea.jx-mono { line-height: 24px; }
.jp-ws-textarea:lang(km) { font: var(--type-km-body); }
.jp-ws-h2 { margin: 0 0 var(--space-3); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font: var(--type-title-sm); color: var(--ink-heading); }
.jp-ws-h2-meta { font: var(--type-meta); color: var(--ink-muted); }
@media (max-width: 767px) { .jp-ws-h2-meta { display: none; } }
:lang(km) .jp-ws-h2 { font: var(--type-km-body); font-weight: 600; }
.jp-ws-foot { margin: calc(var(--space-6) * -1 + var(--space-3)) 0 0; font: var(--type-body); color: var(--ink-secondary); }
:lang(km) .jp-ws-foot { font: var(--type-km-body); }
.jp-ws-empty { margin: 0; padding: var(--space-6) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); font: var(--type-body); color: var(--ink-secondary); }

/* SaveBar: the form's foot. */
.jp-ws-savebar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.jp-ws-savebar-hint { margin: 0; font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-ws-savebar-hint { font: var(--type-km-meta); }
.jp-ws-savebar .jx-blocked { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.jp-ws-savebar .jx-blocked-why { color: var(--danger); font-weight: 600; max-width: 60ch; }
@media (max-width: 767px) {
  .jp-ws-savebar > .jx-btn, .jp-ws-savebar .jx-blocked, .jp-ws-savebar .jx-blocked .jx-btn { width: 100%; }
  .jp-ws-savebar .jx-btn { justify-content: center; height: var(--control-native); }
}
.jp-ws-only-wide { display: contents; }
@media (max-width: 767px) { .jp-ws-only-wide { display: none; } }

/* ---------- Add vehicles (1.2 / 1.2a) ---------- */
.jp-ws-split { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 1099px) { .jp-ws-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }
.jp-ws-preview td { height: var(--row-web); }
.jp-ws-preview tr.is-used td { background: var(--danger-tint); }
.jp-ws-preview tbody tr.is-used:hover td { background: var(--danger-tint); }
.jp-ws-statuscell { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.jp-ws-new { font: var(--type-meta); color: var(--ink-secondary); }
.jp-ws-used { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.jp-ws-used-k { font: var(--type-body-strong); color: var(--danger); }
.jp-ws-used-why { font: var(--type-meta); color: var(--ink-secondary); white-space: nowrap; }
.jp-ws-nowrap { white-space: nowrap; }
.jp-ws-preview tr.is-used .jp-ws-statuscell { flex-wrap: nowrap; }
:lang(km) :is(.jp-ws-new, .jp-ws-used-why) { font: var(--type-km-meta); }
@media (max-width: 767px) {
  .jp-ws-hide-narrow { display: none; }
  .jp-ws-preview td { padding: var(--space-2) var(--space-3); }
  .jp-ws-used { align-items: flex-start; text-align: left; }
  .jp-ws-preview tr.is-used .jp-ws-statuscell { justify-content: flex-start; flex-wrap: wrap; }
  .jp-ws-preview .jp-ws-used-why { white-space: normal; }
}

/* ---------- FormTable + CellField (1.3, 1.5) ---------- */
.jp-ws-formtable .jx-table td { vertical-align: top; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.jp-ws-formtable .jx-table tbody tr:hover td { background: transparent; }
.jp-ws-cellfield { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.jp-ws-cell-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jp-ws-cellfield-box { position: relative; display: block; }
.jp-ws-prefix { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); font: var(--type-ref); color: var(--ink-muted); pointer-events: none; }
.jp-ws-cellfield .jx-field-input.has-prefix { padding-left: calc(var(--space-3) + var(--space-3)); }
.jp-ws-cellfield-meta { font: var(--type-meta); color: var(--ink-muted); font-variant-numeric: tabular-nums; min-height: 18px; }
.jp-ws-cellfield .jx-field-hint { font: var(--type-meta); color: var(--danger); }
.jp-ws-cellfield.jx-field-error .jx-field-input { border-bottom: 2px solid var(--danger); }
:lang(km) .jp-ws-cellfield .jx-field-hint { font: var(--type-km-meta); }
.jp-ws-col-price { width: 160px; }
@media (max-width: 1099px) { .jp-ws-col-price { width: 116px; } }

.jp-ws-model { display: flex; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-1); }
.jp-ws-model > .jx-icon { color: var(--ink-secondary); flex: none; margin-top: 1px; }
.jp-ws-model > span { display: flex; flex-direction: column; }
.jp-ws-model b { font: var(--type-body-strong); color: var(--ink); }
.jp-ws-model-n { font: var(--type-meta); color: var(--ink-muted); }
.jp-ws-pstatus { display: inline-block; padding-top: var(--space-2); font: var(--type-meta); color: var(--ink-secondary); white-space: nowrap; }
.jp-ws-pstatus.is-suggested, .jp-ws-pstatus.is-changed { color: var(--warning); font-weight: 700; }
.jp-ws-pstatus.is-none { color: var(--ink-muted); }
:lang(km) :is(.jp-ws-model-n, .jp-ws-pstatus) { font: var(--type-km-meta); }

/* Day-one rentals (1.5) */
.jp-ws-count { font: var(--type-body-strong); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
:lang(km) .jp-ws-count { font: var(--type-km-body); font-weight: 600; }
@media (min-width: 1100px) {
  .jp-ws-stack-md .jx-table :is(th, td) { padding-left: var(--space-2); padding-right: var(--space-2); }
  .jp-ws-stack-md .jx-table :is(th, td):first-child { padding-left: var(--space-4); }
}
.jp-ws-c-vehicle { min-width: 200px; }
.jp-ws-c-phone, .jp-ws-c-name, .jp-ws-c-doc { min-width: 130px; }
.jp-ws-c-due { min-width: 120px; }
.jp-ws-c-cash { min-width: 100px; }
.jp-ws-c-status { min-width: 100px; }
.jp-ws-rowstatus { display: inline-flex; padding-top: var(--space-2); }
.jp-ws-addrow { margin-top: calc(var(--space-6) * -1 + var(--space-3)); }
.jp-ws-x { width: var(--control-web); height: var(--control-web); display: grid; place-items: center; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink-muted); cursor: pointer; }
.jp-ws-x:hover { background: var(--hover); color: var(--ink); }

/* FormTable stacks: each row becomes a block, each cell with its column name. Prices (1.3) under 768px;
   day-one rentals (1.5), with eight columns, already under 1100px. */
@media (max-width: 1099px) {
  .jp-ws-stack-md { background: none; border: 0; border-radius: 0; overflow: visible; }
  .jp-ws-stack-md .jx-table, .jp-ws-stack-md tbody { display: block; }
  .jp-ws-stack-md thead { display: none; }
  .jp-ws-stack-md tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; }
  .jp-ws-stack-md tr:last-child { margin-bottom: 0; }
  .jp-ws-stack-md .jx-table td { display: block; height: auto; padding: 0; border: 0; min-width: 0; width: auto; }
  .jp-ws-stack-md .jp-ws-cell-k { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font: var(--type-meta); color: var(--ink-secondary); }
  :lang(km) .jp-ws-stack-md .jp-ws-cell-k { font: var(--type-km-meta); }
  .jp-ws-stack-md tr { padding-right: calc(var(--space-4) + var(--control-web)); }
  .jp-ws-stack-md .jx-table td:last-child { position: absolute; top: var(--space-2); right: var(--space-2); }
  .jp-ws-stack-md .jx-table td:nth-last-child(2) { grid-column: 1 / -1; }
  .jp-ws-rowstatus { padding-top: 0; }
  .jp-ws-rowstatus:empty { display: none; }
}
@media (max-width: 767px) {
  .jp-ws-stack-sm { background: none; border: 0; border-radius: 0; overflow: visible; }
  .jp-ws-stack-sm .jx-table, .jp-ws-stack-sm tbody { display: block; }
  .jp-ws-stack-sm thead { display: none; }
  .jp-ws-stack-sm tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; }
  .jp-ws-stack-sm tr:last-child { margin-bottom: 0; }
  .jp-ws-stack-sm .jx-table td { display: block; height: auto; padding: 0; border: 0; min-width: 0; width: auto; }
  .jp-ws-stack-sm .jp-ws-cell-k { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font: var(--type-meta); color: var(--ink-secondary); }
  :lang(km) .jp-ws-stack-sm .jp-ws-cell-k { font: var(--type-km-meta); }
  .jp-ws-stack-sm .jx-table td:first-child, .jp-ws-stack-sm .jx-table td:last-child { grid-column: 1 / -1; }
  .jp-ws-pstatus { padding-top: 0; }
  /* 1.3: the three price labels can take two lines; keep the fields level. */
  .jp-ws-stack-sm .jp-ws-cell-k { min-height: 36px; display: flex; align-items: flex-end; }
  /* 1.5 on a phone: two columns, the vehicle across the top. */
  .jp-ws-stack-md tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-ws-stack-md .jx-table td:first-child { grid-column: 1 / -1; }
  .jp-ws-formtable .jx-field-input { height: var(--control-native); }
}

/* ---------- Shop rules (1.4) ---------- */
.jp-ws-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); align-items: start; }
@media (max-width: 1099px) { .jp-ws-cols { grid-template-columns: minmax(0, 1fr); } }
.jp-ws-section { border-top: 1px solid var(--line); padding-top: var(--space-4); min-width: 0; }
.jp-ws-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.jp-ws-section-head h2 { margin: 0; font: var(--type-title); letter-spacing: var(--track-title); color: var(--ink-heading); }
:lang(km) .jp-ws-section-head h2 { font: var(--type-km-body); font-weight: 700; }
.jp-ws-section-head .jp-filters { margin-bottom: 0; border-bottom: 0; }
.jp-ws-section-body { display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
.jp-ws-section-body > .jx-btn { align-self: flex-start; }
.jp-ws-amounts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jp-ws-amount { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-web); padding-left: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.jp-ws-amount .jp-ws-x { width: 32px; height: 32px; }
.jp-ws-inline { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); }
.jp-ws-inline > .jx-field { flex: 1 1 160px; max-width: 280px; }
.jp-ws-extra td { height: var(--row-web); }
.jp-ws-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; cursor: pointer; }
.jp-ws-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--action); }
.jp-ws-check > span { display: flex; flex-direction: column; }
.jp-ws-check b { font: var(--type-body-strong); color: var(--ink); }
.jp-ws-check span span { font: var(--type-meta); color: var(--ink-secondary); }
:lang(km) .jp-ws-check b { font: var(--type-km-body); font-weight: 600; }
:lang(km) .jp-ws-check span span { font: var(--type-km-meta); }
@media (max-width: 767px) {
  .jp-ws-inline > .jx-field { max-width: none; flex-basis: 100%; }
  .jp-ws-amount { height: var(--control-native); }
  .jp-ws-amount .jp-ws-x { width: 44px; height: 44px; }
}

/* bundle.css sets :lang(km) { font-family: khmer } on every element; plates typed in a field stay mono. */
:lang(km) :is(.jp-ws-textarea.jx-mono, .jp-ws-cellfield .jx-mono) { font-family: var(--font-mono); }