/* ══════════════════════════════════════════════════════════════
   PARTS LISTER PAGE (`plp-`)
   ══════════════════════════════════════════════════════════════

   Two blocks, and they are two different screens:

     `plp-`  picking a batch — the vehicle grid, the typed-fitment form, the
             list of loose batches already on the go.
     `plw-`  the workspace it opens into — the rail, the quick-add box, the
             part rows, the listing screen and the two modals.

   Neither of them restyles a `pl-` class. That block is the shared two-column
   picker (assets/css/parts-lister.css), which Vehicle Check In uses and this
   page no longer does — reaching into it from here is how the check-in flow
   would start looking like whatever this page last needed.
   ══════════════════════════════════════════════════════════════ */

/* The workspace runs full height so the two part lists scroll rather than the
   page — the shared layout is `flex: 1` inside a `min-height: 0` column, and
   this is the column. Mirrors .vehicle-flow-page.vf-fullheight. */
.parts-lister-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.parts-lister-page.pl-fullheight {
    /* 56px topbar. Unlike Vehicle Check In there is no fixed bottom nav to
       leave room for, so this is 56 rather than its 112. */
    height: calc(100vh - 56px);
    overflow: hidden;
    padding-bottom: 0;
}
/* The sub-header is about *picking* a batch — the two modes and the yard's
   totals. Inside the workspace it answers a question nobody is asking any more,
   and its counts are the ones the page loaded with, so it would sit there
   insisting there are no parts on cars while somebody adds forty. The bar above
   the work says which batch is in hand instead. */
.parts-lister-page.pl-fullheight .pg-head { display: none; }

.parts-lister-page.pl-fullheight #plWorkspace {
    /* Rail beside the work. Below 900px the rail slides in over it instead —
       see the bottom of this file. */
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 0;
    min-height: 0;
    border-top: 1px solid var(--border);
}

/* ── Pick a vehicle ────────────────────────────────────────── */
.plp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.plp-vcard {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.plp-vcard:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.plp-vcard__img {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--bg-hover);
    overflow: hidden;
}
.plp-vcard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.plp-vcard__noimg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.45;
}
.plp-vcard__noimg svg { width: 42px; height: 42px; }
.plp-vcard__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 13px 13px;
    min-width: 0;
}
.plp-vcard__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plp-vcard__sub {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plp-vcard__parts {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    margin-top: 2px;
}
.plp-empty {
    grid-column: 1 / -1;
    padding: 48px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* ── No vehicle ────────────────────────────────────────────── */
.plp-loose {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .plp-loose { grid-template-columns: 1fr; }
}
.plp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.plp-card__head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
}
.plp-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.plp-card__sub {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}
/* Start from a car we have — fills the boxes below. Its own band above the
   form, because it is a different kind of control: it writes the other fields
   rather than being one of them. */
.plp-pick {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border);
}
.plp-pick__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.plp-pick__select {
    padding: 9px 11px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-width: 420px;
}
.plp-pick__select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14);
}
.plp-pick__hint {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}

.plp-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    padding: 16px 18px;
}
.plp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.plp-field--wide { grid-column: 1 / -1; }
.plp-field label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.plp-field input {
    padding: 9px 11px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.plp-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14);
}
.plp-field__hint {
    font-size: 11px;
    color: var(--text-muted);
}
.plp-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-hover);
}
.plp-form__note {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
    min-width: 180px;
}
.plp-batches {
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
}
.plp-batch {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 11px 18px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.plp-batch:last-child { border-bottom: none; }
.plp-batch:hover { background: var(--bg-hover); }
.plp-batch__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.plp-batch__meta {
    font-size: 11px;
    color: var(--text-muted);
}
.plp-unavailable {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    max-width: 560px;
}
.plp-unavailable h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.plp-unavailable p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ── The bar naming the batch in hand ──────────────────────── */
.plp-scope {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.plp-scope__back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-shrink: 0;
}
.plp-scope__back:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.plp-scope__thumb {
    width: 46px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plp-scope__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.plp-scope__noimg {
    color: var(--text-muted);
    opacity: 0.45;
    display: flex;
}
.plp-scope__noimg svg { width: 20px; height: 20px; }
.plp-scope__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.plp-scope__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plp-scope__sub {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plp-scope__link {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    flex-shrink: 0;
}
.plp-scope__link:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .plp-scope { padding: 9px 14px; gap: 9px; }
    .plp-scope__back span { display: none; }
    .plp-scope__thumb { display: none; }
    .plp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   THE WORKSPACE (`plw-`)
   ══════════════════════════════════════════════════════════════

   The rail, the bar above the work, the quick-add box, the part rows, the
   listing screen and the two modals. Everything scrolls inside its own column
   so the page itself never does — the bar and the foot stay put, which is what
   lets somebody add forty parts without losing the button that puts them live.
   ══════════════════════════════════════════════════════════════ */

.plw {
    display: flex;
    min-height: 0;
    background: var(--bg-base);
}

/* Buttons, scoped.
   `.btn` is meant to be an unpainted base that `.btn--primary` fills in — but
   assets/css/setup.css carries a bare `.btn` of its own (the installer's) and
   is loaded globally after forms.css, so every button in the app comes out the
   installer's blue and every modifier is a no-op. Fixing that is a change to
   every page in the app, not to this one, so the workspace paints its own:
   plain buttons read as secondary, and only the button that actually does
   something is filled. */
.plw .btn,
.plw-modal .btn {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 600;
}
.plw .btn:hover:not(:disabled),
.plw-modal .btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.plw .btn--primary,
.plw-modal .btn--primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.plw .btn--primary:hover:not(:disabled),
.plw-modal .btn--primary:hover:not(:disabled) {
    filter: brightness(1.08);
    background: var(--accent);
    color: #fff;
}
.plw .btn:disabled,
.plw-modal .btn:disabled { opacity: 0.45; }

/* ── The rail: batches on the go ───────────────────────────── */
.plw-rail {
    width: 252px;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-card);
}
.plw-rail__top { padding: 12px 12px 8px; }
.plw-rail__new {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
}
.plw-rail__new:hover { background: var(--bg-hover); }
.plw-rail__new svg { width: 15px; height: 15px; flex: none; }
.plw-rail__label {
    padding: 4px 14px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.plw-rail__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.plw-rail__none {
    padding: 16px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

.plw-ses {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    text-align: left;
    cursor: pointer;
}
.plw-ses:hover { background: var(--bg-hover); }
.plw-ses.is-on {
    background: var(--accent-bg);
    border-color: var(--accent);
}
.plw-ses__i {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--text-muted);
}
.plw-ses__i img { width: 100%; height: 100%; object-fit: cover; }
.plw-ses__i svg { width: 17px; height: 17px; }
.plw-ses__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plw-ses__n {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-ses__s {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-ses__c {
    flex: none;
    min-width: 20px;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.plw-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--z-overlay);
}

/* ── The bar, and the column under it ──────────────────────── */
.plw-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.plw-sbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    flex: none;
}
.plw-sbar__lists {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.plw-sbar__lists svg { width: 15px; height: 15px; }
.plw-sbar__scope { min-width: 0; flex: 1; }
.plw-chip { display: flex; align-items: center; gap: 9px; min-width: 0; }
.plw-chip__i {
    width: 32px;
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--text-muted);
}
.plw-chip__i img { width: 100%; height: 100%; object-fit: cover; }
.plw-chip__i svg { width: 16px; height: 16px; }
.plw-chip__t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plw-chip__k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.plw-chip__v {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-sbar__stats {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.plw-sbar__stats b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.plw-g { color: var(--accent); }

.plw-pane {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.plw-loading {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Quick add ─────────────────────────────────────────────── */
.plw-add {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 14px 16px 8px;
}
.plw-find { position: relative; flex: 1; min-width: 0; }
.plw-find__i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--text-muted);
    pointer-events: none;
}
.plw-find__in {
    width: 100%;
    min-height: 46px;
    padding: 0 38px 0 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.plw-find__in:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.plw-find__x {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}
.plw-find__x:hover { background: var(--bg-hover); color: var(--text-primary); }
.plw-add__pick { min-height: 46px; flex: none; gap: 7px; }
.plw-add__pick svg { width: 15px; height: 15px; }

.plw-hint {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding: 0 16px 12px;
    font-size: 11px;
    color: var(--text-muted);
}
.plw-hint b { color: var(--text-secondary); }

/* The dropdown. It sits over the rows, so it needs a layer of its own — and it
   is a dropdown, not a modal, which is why it reads --z-dropdown. */
.plw-ac {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}
.plw-acr {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 11px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}
.plw-acr.is-sel { background: var(--bg-hover); }
.plw-acr.is-done { opacity: 0.55; }
.plw-acr__i {
    width: 24px;
    height: 24px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--accent-bg);
    color: var(--accent);
}
.plw-acr__i svg { width: 13px; height: 13px; }
.plw-acr__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plw-acr__n {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-acr__s { font-size: 11px; color: var(--text-muted); }
.plw-acr__p {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.plw-ac__f {
    display: flex;
    gap: 14px;
    padding: 7px 11px;
    border-top: 1px solid var(--border);
    background: var(--bg-base);
    font-size: 10.5px;
    color: var(--text-muted);
}
.plw-ac__f b { color: var(--text-secondary); }

/* ── The list of parts ─────────────────────────────────────── */
.plw-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
}
.plw-lhead {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0 10px;
    background: var(--bg-base);
}
.plw-lhead__t { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.plw-lhead__c {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}
.plw-lhead__f { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.plw-fl {
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.plw-fl b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.plw-fl:hover { background: var(--bg-hover); }
.plw-fl.is-on {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
}
.plw-fl.is-on b { color: var(--accent); }

.plw-rows { display: flex; flex-direction: column; gap: 6px; }

.plw-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.plw-row--held { border-left-color: var(--border-hover); }
.plw-row.is-fresh { animation: plw-flash 1.1s ease-out; }
@keyframes plw-flash {
    0% { background: var(--accent-bg); }
    100% { background: var(--bg-card); }
}

.plw-row__ph {
    position: relative;
    width: 46px;
    height: 46px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.plw-row__ph img { width: 100%; height: 100%; object-fit: cover; }
.plw-row__ph svg { width: 19px; height: 19px; }
.plw-row__ph--0 { border-style: dashed; }
.plw-row__ph b {
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 0 4px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.66);
    font-size: 10px;
    color: #fff;
}
.plw-row__t {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    padding: 0;
}
.plw-row__n {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-row__s {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-warn { color: var(--color-warning); font-weight: 600; }

.plw-row__pr {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    width: 104px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    font-size: 12px;
    color: var(--text-muted);
}
.plw-row__pr input {
    width: 100%;
    min-height: 34px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.plw-row__pr input:focus { outline: none; }
.plw-row__pr--gated {
    justify-content: center;
    min-height: 36px;
    border-style: dashed;
}

.plw-row__acts { flex: none; display: flex; gap: 4px; }
.plw-row__go {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.plw-row__go svg { width: 15px; height: 15px; }
.plw-row__go:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.plw-row__go:disabled { opacity: 0.32; cursor: default; }
.plw-row__go--del:hover:not(:disabled) { border-color: var(--color-danger); color: var(--color-danger); }
.plw-row__live {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-bg);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
}
.plw-row__live svg { width: 12px; height: 12px; }

.plw-empty {
    padding: 44px 20px;
    text-align: center;
    color: var(--text-muted);
}
.plw-empty strong { display: block; font-size: 14px; color: var(--text-primary); margin-bottom: 6px; }
.plw-empty p { margin: 0 auto; max-width: 420px; font-size: 12.5px; line-height: 1.65; }

/* ── The foot ──────────────────────────────────────────────── */
/* The FAB stack is fixed to the bottom right and the bug widget is always in
   it — so the last 72px of this bar are not really the bar's. Reserve them, or
   the button that puts the run on the site sits under a red circle. */
.plw-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    padding-right: 88px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
.plw-foot__sp { flex: 1; }
.plw-foot__st { display: flex; gap: 16px; font-size: 11.5px; color: var(--text-muted); }
.plw-foot__st b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.plw-ok { font-size: 12px; font-weight: 700; color: var(--accent); }
.plw-need { font-size: 12px; font-weight: 700; color: var(--color-warning); }

/* ── The listing screen ────────────────────────────────────── */
.plw-chead {
    flex: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.plw-chead__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plw-chead__k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.plw-chead__n {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-chead__a { flex: none; }

.plw-iconbtn {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.plw-iconbtn svg { width: 16px; height: 16px; }
.plw-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }

.plw-cbody {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 16px;
    padding-top: 14px;
}
.plw-ccol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.plw-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 13px;
}
.plw-card__h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.plw-card__sp { flex: 1; }
.plw-card__c { font-size: 11px; color: var(--text-muted); }
.plw-card__hint {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
}
.plw-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
}
.plw-fit {
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.plw-state {
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    font-size: 12px;
    color: var(--text-muted);
}
.plw-state.is-live {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

/* Photos. The add tile and the shots are the same size so the grid does not
   jump when the first one lands. */
.plw-drop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.plw-ph {
    position: relative;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
}
.plw-ph img { width: 100%; height: 100%; object-fit: cover; }
.plw-ph--add {
    flex-direction: column;
    gap: 5px;
    border-style: dashed;
    background: var(--bg-base);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.plw-ph--add svg { width: 20px; height: 20px; }
.plw-ph--add:hover { border-color: var(--accent); color: var(--accent); }
.plw-ph--main { border-color: var(--accent); }
.plw-ph__t {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
}
.plw-ph__x {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.plw-ph__x svg { width: 12px; height: 12px; }
.plw-drop__hint {
    grid-column: 1 / -1;
    font-size: 11.5px;
    color: var(--text-muted);
}

.plw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 11px;
}
.plw-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.plw-f--wide { grid-column: 1 / -1; }
.plw-f label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.plw-f input,
.plw-f select,
.plw-f textarea {
    /* A <textarea> defaults to the browser's monospace, which makes the buyer
       note read like a config file beside every other box on the card. */
    font-family: inherit;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    font-size: 13px;
    color: var(--text-primary);
}
.plw-f textarea { min-height: 78px; resize: vertical; line-height: 1.55; }
.plw-f--mono input { font-variant-numeric: tabular-nums; font-weight: 600; }
.plw-f input:focus,
.plw-f select:focus,
.plw-f textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.plw-f input:disabled,
.plw-f select:disabled,
.plw-f textarea:disabled { opacity: 0.6; }

/* ── The two modals ────────────────────────────────────────── */
/* The overlay itself is .veh-modal-overlay — the app's one modal backdrop,
   which is also what modal.js's Escape handler looks for. Only the panel is
   ours, because these two are wider than a form modal. */
.plw-modal__panel {
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: min(86vh, 760px);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}
.plw-modal__panel--tall { width: min(760px, 100%); }
.plw-modal__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.plw-modal__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plw-modal__title strong { font-size: 15px; color: var(--text-primary); }
.plw-modal__title span { font-size: 11.5px; color: var(--text-muted); }
.plw-modal__nav { flex: none; display: flex; gap: 5px; }
.plw-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }
.plw-modal__foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-base);
}
.plw-modal__count { flex: 1; font-size: 12px; color: var(--text-muted); }
.plw-modal__count strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.plw-muted { color: var(--text-muted); }
.plw-modal__actions { flex: none; display: flex; gap: 8px; }

/* Select parts */
.plw-selbar { position: sticky; top: -12px; z-index: 1; padding: 4px 0 10px; background: var(--bg-card); }
.plw-selbar input {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    font-size: 13px;
    color: var(--text-primary);
}
.plw-selbar input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.plw-sec {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.plw-sec__c {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    font-size: 10.5px;
}
.plw-sec__a { margin-left: auto; text-transform: none; letter-spacing: 0; }
.plw-pts { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 5px; }
.plw-pt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    text-align: left;
    cursor: pointer;
}
.plw-pt:hover:not(:disabled) { background: var(--bg-hover); }
.plw-pt.is-on { border-color: var(--accent); background: var(--accent-bg); }
.plw-pt.is-done { opacity: 0.42; cursor: default; }
.plw-pt.is-done .plw-pt__n { text-decoration: line-through; }
.plw-cb {
    width: 17px;
    height: 17px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    color: transparent;
}
.plw-cb svg { width: 11px; height: 11px; }
.plw-pt.is-on .plw-cb { border-color: var(--accent); background: var(--accent); color: #fff; }
.plw-pt.is-done .plw-cb { color: var(--text-muted); }
.plw-pt__n {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-pt__p { flex: none; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }

/* Preview */
.plw-pv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.plw-pv__m {
    aspect-ratio: 4 / 3;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-hover);
}
.plw-pv__m img { width: 100%; height: 100%; object-fit: contain; }
.plw-pv__m--none { font-size: 12px; color: var(--text-muted); border-style: dashed; }
.plw-pv__st { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.plw-pv__st button {
    width: 54px;
    height: 42px;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    padding: 0;
}
.plw-pv__st button.is-on { border-color: var(--accent); }
.plw-pv__st img { width: 100%; height: 100%; object-fit: cover; }
.plw-pv__bar {
    margin-bottom: 10px;
    padding: 7px 10px;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
    background: var(--tint-warning);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-warning);
}
.plw-pv__h { margin: 0 0 6px; font-size: 18px; line-height: 1.35; color: var(--text-primary); }
.plw-pv__pr {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.plw-pv__sp { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.plw-pv__sp > div { display: flex; gap: 10px; font-size: 12px; }
.plw-pv__sp dt { flex: none; width: 104px; color: var(--text-muted); }
.plw-pv__sp dd { margin: 0; color: var(--text-primary); font-weight: 600; }
.plw-pv__d { margin-top: 14px; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); white-space: pre-wrap; }
.plw-pv__d h4 { margin: 0 0 5px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* A toast, for when nothing else on screen can say what happened. */
.plw-toast {
    position: fixed;
    left: 50%;
    /* Clear of the foot bar — a toast that covers the button it is reporting
       on is worse than no toast. */
    bottom: 76px;
    transform: translateX(-50%);
    z-index: var(--z-modal);
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    background: var(--text-primary);
    color: var(--bg-card);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
}

/* ── Narrow ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .plw-cbody { grid-template-columns: minmax(0, 1fr); }
    .plw-pv { grid-template-columns: minmax(0, 1fr); }
}

/* The rail stops being a column and becomes a sheet over the work: at this
   width 252px of it is a third of the screen, and the parts are the point. */
@media (max-width: 900px) {
    .plw-rail {
        position: fixed;
        top: 56px;
        bottom: 0;
        left: 0;
        z-index: calc(var(--z-overlay) + 1);
        transform: translateX(-100%);
        transition: transform 0.18s ease;
    }
    .plw-rail.is-open { transform: none; }
    .plw-sbar__lists { display: flex; }
}

@media (max-width: 640px) {
    .plw-sbar { flex-wrap: wrap; gap: 8px 10px; }
    .plw-sbar__stats { width: 100%; justify-content: space-between; gap: 10px; }
    .plw-add { flex-wrap: wrap; padding: 12px 14px 8px; }
    .plw-add__pick { width: 100%; }
    .plw-body { padding: 0 14px 14px; }
    .plw-hint { padding: 0 14px 10px; }
    /* The row loses its price box and its middle buttons: at this width the
       name and the photo are what a phone is for, and everything else is one
       tap away on the listing screen. */
    .plw-row__pr { display: none; }
    .plw-row__acts [data-plw-open] { display: none; }
    /* The foot keeps one row of two buttons and gives the stats their own line
       above it. Wrapping the buttons instead pushed them off the left edge, and
       a button that has left the screen is not a button. */
    .plw-foot {
        flex-wrap: wrap;
        padding: 9px 14px;
        padding-right: 78px;
    }
    /* Whatever the foot is saying gets its own line above the buttons —
       the list's stats and the listing screen's one-line verdict alike. */
    .plw-foot__st,
    .plw-foot .plw-ok,
    .plw-foot .plw-need { width: 100%; order: -1; }
    .plw-foot__sp { display: none; }
    .plw-foot .btn { flex: 1; min-width: 0; }
    /* One line of help is a reminder; three is a wall on a 390px screen. */
    .plw-hint span:not(:first-child) { display: none; }
    /* The filters get their own row rather than squeezing the heading into
       two words per line beside them. */
    .plw-lhead { flex-wrap: wrap; }
    .plw-lhead__f { margin-left: 0; width: 100%; }
    /* Full screen on a phone — the gutter the shared overlay keeps is width
       the catalog and the preview both need. */
    .veh-modal-overlay.plw-modal { padding: 0; }
    .plw-modal__panel { width: 100%; max-height: 100vh; height: 100%; border: none; border-radius: 0; }
    .plw-pv__sp dt { width: 88px; }
}

/* ══════════════════════════════════════════════════════════════
   THE FAITHFUL BITS (`plw-`, continued)
   ══════════════════════════════════════════════════════════════ */

/* A photo tile is the picker. The input is inside the label and invisible;
   never `display: none` on it — a hidden input is still the label's control,
   but some mobile browsers will not open a camera for a `display: none` one. */
.plw-row__ph,
.plw-ph--add { position: relative; cursor: pointer; }
.plw-row__ph input[type="file"],
.plw-ph--add input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* A part that just landed says so once. */
.plw-row.is-fresh { animation: plw-flash 1.1s ease-out; }

/* Drag a folder of shots onto the photo card. */
.plw-drop {
    border: 1px dashed transparent;
    border-radius: var(--radius-md);
    margin: -4px;
    padding: 4px;
    transition: border-color 0.12s, background 0.12s;
}
.plw-drop.is-over {
    border-color: var(--accent);
    background: var(--accent-bg);
}
.plw-ph__m {
    position: absolute;
    left: 4px;
    bottom: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.12s;
}
.plw-ph:hover .plw-ph__m,
.plw-ph__m:focus-visible { opacity: 1; }
.plw-ph__m svg { width: 12px; height: 12px; }

/* The finish queue's position and its two steps. */
.plw-chead__a { display: flex; align-items: center; gap: 6px; }
.plw-chead__q {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.plw-iconbtn:disabled { opacity: 0.35; cursor: default; }

/* The fitment reads as a span and a car, not one run-on string — the span is
   the half a buyer checks their own year against. */
.plw-fit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plw-fit__y {
    font-family: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.plw-fit__n { font-weight: 600; }

/* A suggestion that came off this shop's own listings wears where it came
   from, so nobody wonders why the catalog knows about an X-brace. */
.plw-acr__tag,
.plw-pt__tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent);
    vertical-align: 1px;
}
.plw-hint__learn { color: var(--accent); font-weight: 600; }

/* The toast carries the way back. */
.plw-toast {
    display: flex;
    align-items: center;
    gap: 14px;
}
.plw-toast__undo {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
}
.plw-toast__undo:hover { text-decoration: underline; }

/* The bar's chip is also the way to another batch. */
.plw-chip {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    padding: 4px 8px 4px 4px;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.plw-chip:hover { border-color: var(--border); background: var(--bg-hover); }
.plw-chip__c { width: 14px; height: 14px; flex: none; color: var(--text-muted); }

.plw-sbar__scope { position: relative; }
.plw-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--z-dropdown);
    width: min(380px, calc(100vw - 32px));
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}
.plw-pop__s { padding: 8px; border-bottom: 1px solid var(--border); }
.plw-pop__s input {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    font-size: 13px;
    color: var(--text-primary);
}
.plw-pop__s input:focus { outline: none; border-color: var(--accent); }
.plw-pop__l { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.plw-pop__e { padding: 18px 10px; text-align: center; font-size: 12px; color: var(--text-muted); }
.plw-pop__f { padding: 8px; border-top: 1px solid var(--border); background: var(--bg-base); }
.plw-pop__f .btn { width: 100%; }

@media (max-width: 640px) {
    /* The popover is the phone's way to another batch, so it gets the width. */
    .plw-pop { width: calc(100vw - 24px); left: -12px; }
}

/* The bar's chip with no batch behind it yet — still a control, never a label. */
.plw-chip__v--none { color: var(--text-muted); font-weight: 600; }