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

   One block, `plw-`: the rail, the quick-add box, the part rows, the listing
   screen and the two modals. The page is the workspace and nothing else — the
   `plp-` chooser screen that used to stand in front of it is gone, and so is
   its CSS.

   Nothing here 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 does not — 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);
}

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

   A port of the design this page was drawn from, in the app's own tokens —
   which is what it was drawn in. The palette, the three typefaces and the
   radius scale all already existed here; what this block adds is the anatomy:
   60px rows with a status edge, a search box big enough to be the point of the
   screen, prices set in the mono face and coloured like money, and a listing
   screen that changes its own background so you know you have left the list.

   Two rules run through all of it:

   **Numbers are set in `--font-mono`.** A price, a count, a year: anything the
   crew compares down a column. Proportional digits in a right-aligned column
   do not line up, and a list of prices that does not line up cannot be read at
   a glance.

   **Green means money or live, amber means it needs you.** Nothing else in
   this block is coloured. A row missing a photo wears an amber edge and an
   amber word, and a listing on the site wears green — so a hundred rows can be
   read without touching anything.
   ══════════════════════════════════════════════════════════════ */

.plw {
    display: flex;
    min-height: 0;
    background: var(--bg-base);
    font-family: var(--font-body);
    /* The listing screen sits on its own ground so leaving the list is
       obvious. A wash of the accent rather than another grey: it is the same
       green as everything else that means "this is the work". */
    --plw-compose-bg: #eaf1ee;
    --plw-compose-edge: #0f766e;
}
[data-theme="dark"] .plw {
    --plw-compose-bg: #0c1512;
    --plw-compose-edge: var(--accent);
}

/* ── The rail: batches on the go ───────────────────────────── */
.plw-rail {
    width: 236px;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
}
.plw-rail__top { padding: 12px 12px 8px; }
.plw-rail__new {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}
.plw-rail__new:hover { border-color: var(--accent); }
.plw-rail__new svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
/* A group heading inside the list, not one label over the whole thing. The
   rail carries two different kinds of row — the runs of work you are in the
   middle of, and every car already listed off — and putting one "Sessions"
   label above both of them said the wrong thing about most of the rail. */
.plw-rail__label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 5px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.plw-rail__label:first-child { padding-top: 4px; }
.plw-rail__label b {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.75;
}

/* Finding a batch by name, once there are more than a screenful. Below that it
   would be a box with nothing to do, so it is hidden rather than offered. */
.plw-rail__find {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px 4px;
    padding: 0 9px;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    color: var(--text-muted);
}
.plw-rail__find:focus-within { border-color: var(--accent); color: var(--accent); }
.plw-rail__find svg { width: 13px; height: 13px; flex: none; }
.plw-rail__find input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
}
.plw-rail__find input:focus { outline: none; }

/* The rest of the history, behind one quiet line. */
.plw-rail__more {
    width: 100%;
    margin-top: 2px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    color: var(--text-muted);
    cursor: pointer;
}
.plw-rail__more:hover { background: var(--bg-hover); color: var(--text-primary); }
.plw-rail__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 12px;
}
.plw-rail__none {
    padding: 14px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* The row and its ✕ sit side by side, and the ✕ only exists on hover or when
   the keyboard reaches it — a rail of twenty rows each wearing a delete is a
   rail that looks like it is asking to be emptied. */
.plw-sesw { position: relative; display: flex; align-items: center; }
.plw-ses__x {
    position: absolute;
    right: 4px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
.plw-ses__x svg { width: 13px; height: 13px; }
.plw-sesw:hover .plw-ses__x,
.plw-ses__x:focus-visible {
    opacity: 1;
    pointer-events: auto;
}
.plw-sesw:hover .plw-ses__x { background: var(--bg-hover); }
.plw-ses__x:hover { background: var(--tint-danger); color: var(--color-danger); }
/* It covers the count, so the count gets out of its way rather than showing
   through a 22px button. */
.plw-sesw:hover .plw-ses__c { opacity: 0; }

.plw-ses {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
}
.plw-ses:hover { background: var(--bg-hover); }
.plw-ses.is-on { background: var(--accent-bg); color: var(--text-primary); }
.plw-ses__i {
    width: 38px;
    height: 29px;
    flex: none;
    display: grid;
    place-items: 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; display: block; }
.plw-ses__i svg { width: 17px; height: 17px; }
.plw-ses__i--loose { background: none; border: 1px dashed var(--border); }
.plw-ses__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plw-ses__n {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-ses.is-on .plw-ses__n { color: var(--text-primary); }
.plw-ses__s {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-ses__c {
    flex: none;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.plw-ses.is-on .plw-ses__c { color: var(--accent); }

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

/* ── The bar above the work ────────────────────────────────── */
.plw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.plw-sbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 18px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex: none;
}
.plw-sbar__lists {
    display: none;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.plw-sbar__lists svg { width: 16px; height: 16px; }
.plw-sbar__scope { position: relative; flex: 0 1 auto; min-width: 0; }

/* The session's name — a box that does not look like one until you are in it.
   A run is named long before anybody knows which car it is, so it leads the
   bar; but it is a label most of the time, not a form field, and a sunken
   input sitting there all day would read as something waiting to be filled
   in. The pencil is the affordance and it needs its own size: an unsized
   inline SVG takes the viewBox at whatever the font gives it and lands at
   150px square. */
.plw-sname {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 260px;
    min-width: 0;
    min-height: 36px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: text;
}
.plw-sname:hover { border-color: var(--border); background: var(--bg-base); }
.plw-sname:focus-within {
    border-color: var(--accent);
    background: var(--bg-base);
    color: var(--accent);
}
.plw-sname svg { width: 14px; height: 14px; flex: none; }
.plw-sname input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: none;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.plw-sname input:focus { outline: none; }
.plw-sname input::placeholder { font-weight: 600; color: var(--text-muted); }
/* Filed: the name is the car, and the rail says the same thing. Nothing to
   press, so nothing that looks pressable. */
.plw-sname:has(.is-locked) { cursor: default; }
.plw-sname:has(.is-locked):hover { border-color: transparent; background: none; }
.plw-sname:has(.is-locked) svg { opacity: 0.4; }

/* The car is a raised card, not a line of text — it is the one thing on this
   bar somebody presses, and it carries a photograph. */
.plw-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 4px 11px 4px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.plw-chip:hover { border-color: var(--border-hover); }
.plw-chip__i {
    width: 46px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: 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; display: block; }
.plw-chip__i svg { width: 19px; height: 19px; }
.plw-chip__t { min-width: 0; display: flex; flex-direction: column; }
.plw-chip__k { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.plw-chip__v {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-chip__v--none { color: var(--text-muted); font-weight: 600; }
.plw-chip__c { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
/* Nothing picked yet: the chip says so by being an outline. */
.plw-chip:has(.plw-chip__v--none) { border-style: dashed; }

.plw-sbar__stats {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 12px;
    color: var(--text-muted);
}
.plw-sbar__stats b { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); }
.plw-g { color: var(--accent); }

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

/* ── The box this screen is for ────────────────────────────── */
.plw-add {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 14px 18px 10px;
    background: var(--bg-base);
}
.plw-find { position: relative; flex: 1; min-width: 0; display: flex; }
.plw-find__i {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 19px;
    height: 19px;
    color: var(--text-muted);
    pointer-events: none;
}
.plw-find__in {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    padding: 0 40px 0 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.plw-find__in::placeholder {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--text-muted);
}
.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: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-size: 19px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}
.plw-find__x:hover { background: var(--bg-hover); color: var(--text-primary); }

.plw-add__pick {
    flex: none;
    min-height: 56px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}
.plw-add__pick:hover:not(:disabled) { filter: brightness(1.08); }
.plw-add__pick:disabled { opacity: 0.45; cursor: default; }
.plw-add__pick svg { width: 18px; height: 18px; flex: none; }
.plw-add__pick b {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.22);
    padding: 1px 6px;
    border-radius: 4px;
}

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

/* The dropdown under the box. */
.plw-ac {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    max-height: 348px;
    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: 11px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}
.plw-acr.is-sel { background: var(--bg-hover); }
.plw-acr.is-done { opacity: 0.5; }
.plw-acr__i {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent-bg);
    color: var(--accent);
}
.plw-acr__i svg { width: 14px; height: 14px; }
.plw-acr__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plw-acr__n {
    font-size: 14px;
    font-weight: 500;
    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-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}
.plw-acr__tag,
.plw-pt__tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border: 1px solid var(--accent);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
    vertical-align: 1px;
}
.plw-ac__f {
    display: flex;
    gap: 14px;
    padding: 8px 12px;
    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 ──────────────────────────────────────────────── */
.plw-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 18px; }
.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-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--text-primary); }
.plw-lhead__c { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-muted); }
.plw-lhead__f { margin-left: auto; display: flex; flex-wrap: wrap; gap: 5px; }
.plw-fl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.plw-fl b { font-family: var(--font-mono); color: var(--text-primary); }
.plw-fl:hover { border-color: var(--border-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 {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: hidden;
}

/* A row is 60px and wears its state on its left edge — green it is on the
   site, amber it still needs something. */
.plw-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 60px;
    padding: 7px 10px 7px 0;
    border-bottom: 1px solid var(--border);
}
.plw-row:last-child { border-bottom: none; }
.plw-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
}
.plw-row--held::before { background: var(--color-warning); }
.plw-row:hover { background: var(--bg-hover); }
.plw-row.is-fresh { animation: plw-pop 0.9s ease-out; }
@keyframes plw-pop {
    0%, 70% { background: var(--accent-bg); }
    100% { background: transparent; }
}

.plw-row__ph {
    position: relative;
    width: 54px;
    height: 41px;
    flex: none;
    margin-left: 11px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: pointer;
}
.plw-row__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plw-row__ph svg { width: 16px; height: 16px; opacity: 0.6; }
.plw-row__ph--0 {
    border: 1px dashed var(--border-hover);
    background: none;
    color: var(--color-warning);
}
.plw-row__ph--0 svg { opacity: 1; }
.plw-row__ph input[type="file"] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.plw-row__ph b {
    position: absolute;
    right: 1px;
    bottom: 1px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.6);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: #fff;
}
.plw-row__t {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}
.plw-row__n {
    font-size: 14px;
    font-weight: 500;
    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; }

/* The price is money: mono, green, right-aligned, and only a box once you are
   in it. A column of prices has to line up to be read down. */
.plw-row__pr { position: relative; width: 96px; flex: none; }
.plw-row__pr input {
    width: 100%;
    min-height: 36px;
    padding: 0 8px 0 19px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    text-align: right;
}
.plw-row__pr input:hover { border-color: var(--border); }
.plw-row__pr input:focus { outline: none; border-color: var(--accent); background: var(--bg-base); }
.plw-row__pr input::placeholder { color: var(--color-warning); font-weight: 500; }
.plw-row__pr > span {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-muted);
}
.plw-row__pr--gated {
    display: grid;
    place-items: center;
    min-height: 36px;
    color: var(--text-muted);
}

.plw-row__acts { flex: none; display: flex; align-items: center; gap: 2px; }
.plw-row__go {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.plw-row__go svg { width: 16px; height: 16px; }
.plw-row__go:hover:not(:disabled) { border-color: var(--border); background: var(--bg-base); color: var(--text-primary); }
.plw-row__go:disabled { opacity: 0.3; cursor: default; }
.plw-row__go--del:hover:not(:disabled) { border-color: var(--color-danger); color: var(--color-danger); }
.plw-row__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 0 6px;
    height: 34px;
    border: none;
    background: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
}
.plw-row__live svg { width: 14px; height: 14px; }

.plw-empty {
    margin-top: 10px;
    padding: 44px 24px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.plw-empty strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}
.plw-empty p { margin: 0 auto 14px; max-width: 400px; font-size: 13px; line-height: 1.6; }

/* ── The foot ──────────────────────────────────────────────── */
.plw-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 18px;
    padding-right: 88px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}
.plw-foot__st { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.plw-foot__st b { font-family: var(--font-mono); color: var(--text-primary); }
.plw-foot__st .plw-warn b { color: var(--color-warning); }
.plw-foot__sp { flex: 1; }
.plw-ok,
.plw-need {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.plw-ok { color: var(--accent); }
.plw-need { color: var(--color-warning); }
/* Without a size these inherit the flex row's height and the verdict becomes
   a tick the size of the sentence beside it. */
.plw-ok svg,
.plw-need svg { width: 15px; height: 15px; flex: none; }

/* ── The listing screen ────────────────────────────────────── */
/* Its own ground and a green rule across the top, so leaving the list is
   never in doubt. */
.plw-pane--compose { background: var(--plw-compose-bg); }
.plw-chead {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    background: var(--bg-card);
    border-bottom: 2px solid var(--plw-compose-edge);
}
.plw-chead__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plw-chead__k { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: var(--plw-compose-edge); }
.plw-chead__n {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-chead__a { flex: none; display: flex; align-items: center; gap: 6px; }
.plw-chead__q { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-right: 2px; white-space: nowrap; }

.plw-iconbtn {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}
.plw-iconbtn svg { width: 16px; height: 16px; }
.plw-iconbtn:hover:not(:disabled) { border-color: var(--border-hover); color: var(--text-primary); }
.plw-iconbtn:disabled { opacity: 0.35; cursor: default; }

.plw-cbody {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 16px;
    padding-top: 16px;
}
.plw-ccol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.plw-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}
.plw-card__h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}
.plw-card__sp { flex: 1; }
.plw-card__c { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.plw-card__hint { font-size: 11px; line-height: 1.55; color: var(--text-muted); }
.plw-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
}

.plw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 9px; }
.plw-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plw-f label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.plw-f input,
.plw-f select,
.plw-f textarea {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
}
.plw-f textarea { padding: 9px 10px; min-height: 64px; resize: vertical; line-height: 1.5; }
.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; }
/* Anything the crew compares down a column is set in the mono face. */
.plw-f--mono input { font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
.plw-f--price input { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.plw-f--wide { grid-column: 1 / -1; }

.plw-drop {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
    min-height: 99px;
    padding: 10px;
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-md);
}
.plw-drop.is-over { border-color: var(--accent); background: var(--accent-bg); }
.plw-ph {
    position: relative;
    width: 100px;
    height: 75px;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-hover);
}
.plw-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plw-ph--main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plw-ph__t {
    position: absolute;
    left: 3px;
    bottom: 3px;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--accent);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: #fff;
}
.plw-ph__x,
.plw-ph__m {
    position: absolute;
    top: 3px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.plw-ph__x { right: 3px; }
.plw-ph__m { left: 3px; opacity: 0; transition: opacity 0.12s; }
.plw-ph:hover .plw-ph__m, .plw-ph__m:focus-visible { opacity: 1; }
.plw-ph__x svg, .plw-ph__m svg { width: 11px; height: 11px; }
.plw-ph--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--border);
    background: var(--bg-base);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.plw-ph--add:hover { border-color: var(--accent); color: var(--accent); }
.plw-ph--add svg { width: 20px; height: 20px; }
.plw-ph--add input[type="file"] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.plw-drop__hint { align-self: center; max-width: 170px; font-size: 11px; line-height: 1.5; color: var(--text-muted); }

/* What it fits — the span is the half a buyer checks their own year against. */
.plw-fit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
}
.plw-fit__y {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}
.plw-fit__n { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.plw-state {
    padding: 8px 10px;
    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; }

/* ── The two modals ────────────────────────────────────────── */
.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: 13px 16px;
    border-bottom: 1px solid var(--border);
}
.plw-modal__title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plw-modal__title strong { font-family: var(--font-heading); font-size: 16px; font-weight: 700; 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: 14px 16px; }
.plw-modal__foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-base);
}
.plw-modal__count { flex: 1; font-size: 12.5px; color: var(--text-muted); }
.plw-modal__count strong { font-family: var(--font-mono); color: var(--text-primary); }
.plw-muted { color: var(--text-muted); }
.plw-modal__actions { flex: none; display: flex; gap: 8px; }

.plw-selbar { position: sticky; top: -14px; z-index: 1; padding: 4px 0 10px; background: var(--bg-card); }
.plw-selbar input {
    width: 100%;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-base);
    font-family: var(--font-body);
    font-size: 14px;
    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: 14px 0 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}
.plw-sec__c { font-family: var(--font-mono); font-size: 11px; }
.plw-sec__a { margin-left: auto; }
.plw-pts { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 5px; }
.plw-pt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    text-align: left;
    cursor: pointer;
}
.plw-pt:hover:not(:disabled) { border-color: var(--border-hover); 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: 18px;
    height: 18px;
    flex: none;
    display: grid;
    place-items: 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: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plw-pt__p { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-muted); }

.plw-pv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.plw-pv__m {
    aspect-ratio: 4 / 3;
    max-width: 100%;
    display: grid;
    place-items: 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 { border-style: dashed; font-size: 12px; color: var(--text-muted); }
.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: 8px 11px;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--tint-warning);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-warning);
}
.plw-pv__h {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}
.plw-pv__pr {
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 600;
    color: var(--accent);
}
.plw-pv__sp { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.plw-pv__sp > div { display: flex; gap: 10px; font-size: 12.5px; }
.plw-pv__sp dt { flex: none; width: 104px; color: var(--text-muted); }
.plw-pv__sp dd { margin: 0; font-weight: 500; color: var(--text-primary); }
.plw-pv__d { margin-top: 16px; font-size: 13px; line-height: 1.65; color: var(--text-secondary); white-space: pre-wrap; }
.plw-pv__d h4 { margin: 0 0 5px; font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* ── The batch popover off the bar ─────────────────────────── */
.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: 38px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    font-family: var(--font-body);
    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%; }

/* ── 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 the installer's and loads after
   forms.css, so app-wide every button comes out the installer's blue and every
   modifier is a no-op. Fixing that is a change to every page, not to this one. */
.plw .btn,
.plw-modal .btn {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    min-height: 38px;
    gap: 7px;
}
.plw .btn:hover:not(:disabled),
.plw-modal .btn:hover:not(:disabled) { border-color: var(--border-hover); background: var(--bg-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; }
.plw .btn svg, .plw-modal .btn svg { width: 15px; height: 15px; }

/* ── The toast, with the way back on it ────────────────────── */
.plw-toast {
    position: fixed;
    left: 50%;
    bottom: 76px;
    transform: translateX(-50%);
    z-index: var(--z-modal);
    max-width: calc(100vw - 32px);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 17px;
    border-radius: var(--radius-md);
    background: var(--text-primary);
    color: var(--bg-card);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
}
.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; }

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

/* The rail becomes a sheet over the work: at this width 236px 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: inline-flex; }
}

@media (max-width: 640px) {
    .plw-sbar { gap: 8px 10px; padding: 8px 14px; }
    .plw-sbar__stats { width: 100%; margin-left: 0; justify-content: space-between; gap: 10px; }
    .plw-add { flex-wrap: wrap; padding: 12px 14px 8px; }
    .plw-add__pick { width: 100%; justify-content: center; }
    .plw-body { padding: 0 14px 14px; }
    .plw-hint { padding: 0 14px 10px; }
    .plw-hint span:not(:first-child):not(.plw-hint__learn) { display: none; }
    .plw-lhead { flex-wrap: wrap; }
    .plw-lhead__f { margin-left: 0; width: 100%; }
    /* The row keeps the name, the photo and the two things a phone is for. */
    .plw-row__pr { display: none; }
    .plw-row__acts [data-plw-open] { display: none; }
    .plw-foot { padding: 10px 14px; padding-right: 78px; }
    .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; }
    .veh-modal-overlay.plw-modal { padding: 0; }
    .plw-modal__panel { width: 100%; height: 100%; max-height: 100vh; border: none; border-radius: 0; }
    .plw-pv__sp dt { width: 88px; }
    .plw-pop { width: calc(100vw - 24px); left: -12px; }
}

/* The same lockup as the bar's, but reading rather than opening: the listing
   screen names the car it came off and the rail is where that is changed. */
.plw-chip--static { cursor: default; width: 100%; }
.plw-chip--static:hover { border-color: var(--border); }

/* The design is a dense 13px screen; the app's root is 16px, which made every
   line that does not set its own size a fifth too big and the whole thing read
   as a different, roomier layout. */
.plw { font-size: 13px; line-height: 1.5; }

/* The active filter is inverted, not tinted — it is the one chip that has to
   be unmistakable at a glance down a list of four. */
.plw-fl { min-height: 32px; border-radius: var(--radius-sm); font-size: 12px; }
.plw-fl.is-on {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-card);
}
.plw-fl.is-on b { color: var(--bg-card); }

/* Nothing said about the car yet — the chip is an outline, because it is an
   invitation rather than a fact. */
.plw-chip--none { border-style: dashed; }

/* "Or say what they fit" — the other half of the same question, under the
   cars. Four boxes on one row and the button under them: a year, a make, a
   model and a trim are one answer, and stacking them would make the popover
   taller than the screen it hangs off. It was briefly a bare flex row left
   over from an older two-button foot, which laid the label, all four boxes
   and a `flex: 1` button out side by side and pushed the button clean off the
   panel. */
.plw-ymm {
    display: grid;
    grid-template-columns: 54px 1fr 1fr 1fr;
    gap: 6px;
}
.plw-pop__or {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.plw-ymm input {
    min-width: 0;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-primary);
}
.plw-ymm input:focus { outline: none; border-color: var(--accent); }
.plw-ymm .btn { grid-column: 1 / -1; width: 100%; }

/* The results stay up while the crew works through them, so the list under
   them is pushed down rather than covered — a dropdown that hides the rows it
   is adding to is a dropdown that has to be dismissed after every part. */
.plw-add { flex-wrap: wrap; }
.plw-ac {
    position: static;
    order: 3;
    width: 100%;
    margin-top: 2px;
    max-height: 330px;
    box-shadow: none;
}

/* A suggestion the shop has listed before but not on this chassis — worth
   offering, not worth claiming it fits. Muted, so the chassis tag still reads
   as the stronger one at a glance. */
.plw-acr__tag--shop,
.plw-pt__tag--shop { border-color: var(--border-hover); color: var(--text-muted); }