/* PRICING v5 (2026-11-14, PILOTED TO JUSTUS; js/material-pricing-v5.js). Ported from the spec's own stylesheets,
   claude-admin mocks/purch-pricing-fresh-v5/kit-add.css (v4) + v5.css, onto the SHOP v5 skeleton:
   .sh-sec/.sh-sh sections and .sh-btn buttons are css/shop.css's own classes, used as they are; the row card
   and the filled tag repeat css/shop-v5.css's .sv5-row / .sv5-lab values (cited per rule) because those are
   scoped to .sh-wrap.sv5. Ink only; quiet = smaller or lighter, never grey. Everything is scoped to
   .mp-wrap.mpv5, which only the pilot's v5 screen draws. */
.mp-wrap.mpv5{--ink2:#171614;--muted:#171614;padding:24px 30px 80px;color:#171614;
  --wait-bg:#f9bf6b;--wait-ink:#4e3304;--wait-edge:#df9700;   /* css/shop-v5.css:6 (--st-ours) */
  --prog-bg:#b7d4f0;--prog-ink:#0f4c86;--prog-edge:#3d7fc4;   /* css/shop-v5.css:7 (--st-gc) */
  --done-bg:#b4dfc0;--done-ink:#0f5228;--done-edge:#207f40;   /* css/shop-v5.css:8 (--st-done) */
  --idle-bg:#e7e5e0;--idle-ink:#171614;--idle-edge:#a8a29e}  /* css/shop-v5.css:9 */
.mp-wrap.mpv5 > *{max-width:none}                               /* v3 ③: the 1,100px cap off */
.mpv5 .mp-dim,.mpv5 .mp-spec,.mpv5 .mp-vhint,.mpv5 .mp-vmore,.mpv5 .mp-q th,.mpv5 .mp-mx th,.mpv5 .mp-items th,.mpv5 .mp-tile-l{color:#171614}
.mpv5 .sh-btn[disabled]{opacity:.45;cursor:default}
.mpv5 .sv5-swrow{margin-bottom:12px}

/* ── v3 ①: one head row — title · Requests/Price books · Refresh ── */
.mpv5-head{display:flex;align-items:center;gap:16px;border-bottom:3px solid #171614;padding-bottom:14px;margin-bottom:18px}
.mpv5-head h2{margin:0;font-size:18px}
.mpv5-head .mp-screens{margin:0}
.mpv5-head .mp-screen-h{display:none}
.mpv5-head .mp-screen-l{font-size:12px}
.mpv5-head > .sh-btn{margin-left:auto}

/* ── ① the job bar (v5.css .v5-bar), on the Shop button (.sh-btn, shop.css:48); RULING 1: it wraps onto a
   second line, no name is cut, and today's search box sits at its end ── */
.mpv5-bar{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0 0 18px}
.mpv5-bar-l{align-self:center;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.mpv5 .mpv5-j{display:flex;align-items:center;gap:10px;flex:1 1 320px;min-width:320px;max-width:470px;padding:9px 14px;text-align:left;border-color:#d6d3cd}
.mpv5 .mpv5-j b{font:700 15px/1.2 ui-monospace,Menlo,monospace;white-space:nowrap}
/* RULING 1, his condition: no name is cut. A long name wraps inside its button instead (26025 / 26026 differ only at the end). */
.mpv5 .mpv5-j span{font-size:13.5px;font-weight:500;line-height:1.25;white-space:normal;min-width:0}
.mpv5 .mpv5-j i{font-style:normal;font-size:12px;font-weight:700;white-space:nowrap;margin-left:auto;padding-left:6px}
.mpv5 .mpv5-j.on{box-shadow:inset 0 -4px 0 #ec1c24}             /* v5.css .v5-j.on: the page tabs' red rule */
.mpv5 .mpv5-j:not(.on):hover{background:#f4f3ef}
.mpv5-search{flex:0 1 200px;min-width:160px;align-self:center;position:relative;margin-left:auto}
.mpv5-search .dash-jp-inner{width:100%}
.mpv5-search .dash-jp-input{width:100% !important;box-sizing:border-box}

/* ── ② the job header (v5.css .v5-jh): pinned to the top of the scrolling pane ── */
.mpv5-jh{position:sticky;top:-24px;z-index:5;background:#eae8e3;margin:0 -30px 22px;padding:16px 30px 14px;
  border-bottom:3px solid #171614;display:flex;align-items:center;gap:18px}
.mpv5-num{font:700 28px/1 ui-monospace,Menlo,monospace;letter-spacing:-.01em}
.mpv5-id{min-width:0}
.mpv5-nm{font-size:24px;font-weight:700;line-height:1.15}
.mpv5-sub{display:block;font-size:13px;margin-top:4px}
.mpv5-sub a{color:#ec1c24;font-weight:700;text-decoration:none;margin-left:10px}
.mpv5-sub a:hover{text-decoration:underline}
.mpv5-jh .mp-tiles{display:flex;gap:8px;margin:0 0 0 auto;flex-wrap:nowrap}
.mpv5-jh .mp-tile{display:flex;align-items:baseline;gap:8px;padding:9px 14px;white-space:nowrap}
.mpv5-jh .mp-tile-n{font-size:20px;margin:0}
.mpv5-jh .mp-tile-l{font-size:11.5px;font-weight:700}

/* ── each state: Shop's section (.sh-sec/.sh-sh, shop.css:17-20) at Shop v5's size (shop-v5.css:14-19) ── */
.mpv5 .sh-sec{margin-bottom:16px;padding-bottom:12px}
.mpv5 .sh-sh{padding:14px 18px;align-items:center}
.mpv5 .sh-sh b{font-size:16px}
.mpv5 .sh-sh span{font-size:14px;font-weight:600;color:#171614}
.mpv5 .sh-none{padding:16px 18px;font-size:14px;color:#171614}

/* ── the card: Shop v5's row (.sv5-row, shop-v5.css:27-33) — white, 8px radius, 6px state edge,
   2px state rule. Its content is Pricing's own: one head line, then the vendor table ── */
.mpv5-card{margin:12px 12px 0;padding:14px 20px 12px 18px;background:#fff;border:1px solid #e3e1db;border-left:6px solid transparent;border-radius:8px}
.mpv5-card.st-wait{border-left-color:var(--wait-edge);border-bottom:2px solid var(--wait-bg)}
.mpv5-card.st-prog{border-left-color:var(--prog-edge);border-bottom:2px solid var(--prog-bg)}
.mpv5-card.st-done{border-left-color:var(--done-edge);border-bottom:2px solid var(--done-bg)}
.mpv5-card.st-idle{border-left-color:var(--idle-edge);border-bottom:2px solid var(--idle-bg)}
.mpv5-card.mp-picked{box-shadow:0 0 0 2px #2472c2}              /* shop-v5.css:33 .sv5-row.sel */
.mpv5-send{padding-top:9px;padding-bottom:9px}
.mpv5-h{display:flex;align-items:center;gap:18px}
.mpv5-hl{display:flex;align-items:baseline;gap:12px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.mpv5-send .mpv5-hl{flex-wrap:nowrap;align-items:center}
.mpv5-t{font-size:17px}
.mpv5 .mpv5-hl .mp-spec{font-size:13px}
.mpv5-send .mpv5-hl .mp-spec{font-size:14px;font-weight:600}
.mpv5-n{font-size:13px;white-space:nowrap}
.mpv5-make{font-size:13.5px}
.mpv5-make b{font-weight:700}
.mpv5-what{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:640px}
.mpv5-wait{font-size:13px;font-weight:700;color:#8a5800;white-space:nowrap}
.mpv5-send .mp-qt,.mpv5-send .mp-spec,.mpv5-send .mpv5-chip,.mpv5-send .mpv5-tag{flex-shrink:0}
.mpv5 .mp-qt{font-size:12px;gap:8px;color:#171614}
.mpv5 .mp-qt input{width:16px;height:16px}
.mpv5-acts{flex:0 0 auto;display:flex;align-items:center;gap:16px;font-size:13px;white-space:nowrap}
.mpv5-acts a{text-decoration:underline;cursor:pointer}
.mpv5-note{font-size:13px;margin-top:6px}

/* ── filled tags: the Shop tag (.sv5-lab, shop-v5.css:34-38) ── */
.mpv5-chip,.mpv5-tag{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:5px;white-space:nowrap;line-height:1.2}
.mpv5-chip{font-family:ui-monospace,Menlo,monospace;background:#171614;color:#fff;align-self:center}    /* ③ the job, in ink */
.mpv5-chip-inv{background:#fff;color:#171614;margin-right:4px}                                       /* on the black pick bar */
.mpv5-tag.idle{background:var(--idle-bg);color:var(--idle-ink);align-self:center}
.mpv5-tag.done{background:var(--done-bg);color:var(--done-ink);margin-left:10px}
.mpv5-tag.best{background:#207f40;color:#fff;margin-left:12px}                                     /* v4: the one filled colour */

/* ── vendor rows (kit-add.css, v4 ②): 40px rows, 14px, the money a step up ── */
.mpv5 .mpv5-q{font-size:14px;margin-top:12px;table-layout:fixed;width:100%}
.mpv5 .mpv5-q th:first-child{width:36%}
.mpv5 .mpv5-q th{font-size:11px;padding:6px 12px;font-weight:700}
.mpv5 .mpv5-q th.n{width:130px}
.mpv5 .mpv5-q th.n + th.n{width:90px}
.mpv5 .mpv5-q td{padding:6px 12px;vertical-align:middle;height:42px;box-sizing:border-box}
.mpv5 .mpv5-q td:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpv5-v{font-weight:600}
.mpv5-st{font-size:13px}
.mpv5 .mpv5-q td.n{font-size:14.5px;font-weight:600}
.mpv5 .mpv5-q td.n + td.n{font-weight:400;font-size:13.5px}
.mpv5 .mpv5-q td.mp-acts{text-align:right;white-space:nowrap}
.mpv5 .mp-acts a,.mpv5 .mp-acts .mp-off{font-size:13px;margin:0 0 0 18px}
.mpv5 .mp-acts .sh-btn{margin-left:22px}
.mpv5 .mp-acts .mp-undo{font-size:13px;color:#171614}
.mpv5 .mp-lead{font-size:13px}
.mpv5-foot{display:flex;align-items:baseline;gap:22px;margin-top:12px;font-size:13px}
.mpv5-foot .mp-mx-bar,.mpv5-foot .mp-caveat{margin:0;font-size:13px}
.mpv5-foot .mp-caveat{font-weight:600}

/* ── what a card opens: same steps up (kit-add.css) ── */
.mpv5 .mp-vlist{padding:16px 18px;margin-top:12px;border-radius:8px}
.mpv5 .mp-vopt{font-size:13.5px;padding:3px 0}
.mpv5 .mp-vgrid{gap:6px 18px}
.mpv5 .mp-vgrp{font-size:11.5px;margin-top:6px}
.mpv5 .mp-vmore,.mpv5 .mp-vhint{font-size:13px}
.mpv5 .mp-quote{padding:12px 8px}
.mpv5 .mp-qrow{font-size:13.5px;padding:7px 10px;gap:12px}
.mpv5 .mp-mx{font-size:13px}
.mpv5 .mp-mx th{font-size:11px;padding:7px 10px}
.mpv5 .mp-mx td{padding:7px 10px}
.mpv5 .mp-items-scroll{margin:12px 0 4px;border-radius:8px}
.mpv5 .mp-items{font-size:13px}
.mpv5 .mp-items th{font-size:11px}
.mpv5 .mp-items td{padding:7px 10px}
.mpv5 .mp-review{border-radius:8px}
.mpv5 .mp-review-h{font-size:13px;color:#171614}
.mpv5 .mp-stale{border-radius:8px}

@media (max-width:900px){
  .mp-wrap.mpv5{padding:16px 16px 80px}
  .mpv5-jh{margin:0 -16px 18px;padding:12px 16px;flex-wrap:wrap;top:-16px}
  .mpv5-jh .mp-tiles{margin:0;flex-wrap:wrap}
  .mpv5 .mpv5-j{min-width:0;flex-basis:100%;max-width:none}
  .mpv5-search{flex-basis:100%}
  .mpv5-h,.mpv5-send .mpv5-hl{flex-wrap:wrap}
}