/* ============================================================================
   VenaMatch cross-reference page — v5
   Everything is scoped under .vmx so the WordPress theme cannot reach in and
   we cannot reach out. The scroll model is the same one the prototype uses,
   with one difference: the WINDOW cannot be locked here, because the theme
   owns the page above us. So the app gets a MINIMUM block height and the flex
   chain runs inside it; if the content needs more, the block grows and the page
   scrolls. min-height:0 at every level, and exactly ONE inner scroller —
   .vmx .tblwrap, the results table. The left panel (.vmx .pad) deliberately
   does NOT scroll: it is sized to show everything at once.
   Run fit_check_v5.js after edits.
   ========================================================================== */
/* ── PALETTE, v5.64.0 ──────────────────────────────────────────────────────
   Colour and depth only. Not one rule below this block changed, because the
   whole sheet already reads from these variables — which is why this swap
   cannot move, add or remove anything.

   What was wrong with the old values was not that they were light. It was
   that everything sat on one plane: --bg and white were a hair apart, --line
   was so pale the panels had no edge, and one mid-green did the work of a
   brand mark, a heading, a button and a status. So: a ground that is clearly
   a ground, lines you can see, a darker green for structure, and the lime
   kept for the brand and for emphasis.                                      */
.vmx{--g:#1E8E4A;--g-d:#156B37;--g-dd:#0E2A1C;--g2:#8DC63F;
  --ink:#0F1A14;--body:#44544A;--mute:#5C6D63;--faint:#8C9A92;
  --line:#C9D8CF;--line2:#E4EDE7;--bg:#F2F6F3;--tint:#F7FAF8;--tint2:#E9F2EC;
  --amber:#8A6100;--amberbg:#FFF8E6;--amberln:#EFDFB4;
  --red:#A33A2A;--redbg:#FDF1EF;--redln:#F0CFC8;
  --blue:#24537E;--bluebg:#EEF4FA;--blueln:#C8DCEE;
  font:13.5px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang HK","Microsoft JhengHei",sans-serif;
  color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  /* min-height, NOT height. The old fixed height + overflow:hidden capped the
     whole tool at the viewport, so when the left panel needed more room than
     the cap allowed its bottom was silently cut off — which is what forced the
     left panel to carry its own scrollbar. Now the shell grows when it has to
     and the PAGE scrolls, which is what a reader expects; on a tall window the
     min-height still makes the results panel fill the screen exactly as before. */
  height:auto;min-height:min(780px,calc(100vh - 210px));overflow:visible}
.vmx *{box-sizing:border-box}
.vmx h1, .vmx h2, .vmx h3{color:var(--ink)}
.vmx button{font-family:inherit}
.vmx .top{display:none;flex:0 0 auto;background:var(--g-dd);
  background-image:radial-gradient(circle at 10% -40%,rgba(109,190,69,.24),transparent 55%)}
.vmx .top .in{max-width:1420px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:22px}
.vmx .logo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:13.5px;letter-spacing:.3px}
.vmx .logo .mk{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--g2),var(--g));
  display:grid;place-items:center;color:#06240F;font-weight:900;font-size:11.5px}
.vmx .nav{display:flex;gap:18px;font-size:12.5px}
.vmx .nav a{color:#AECBB1;text-decoration:none;padding:3px 0;border-bottom:2px solid transparent}
.vmx .nav a:hover{color:#fff}
.vmx .nav a.on{color:#fff;border-color:var(--g2)}
.vmx .lang{margin-left:auto;display:flex;background:rgba(255,255,255,.1);border-radius:7px;padding:2px}
.vmx .lang button{border:0;background:none;color:#AECBB1;font-size:11.5px;padding:4px 9px;border-radius:5px;cursor:pointer}
.vmx .lang button[aria-pressed=true]{background:#fff;color:var(--g-dd);font-weight:700}
.vmx .hero{flex:0 0 auto;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#F7FBF8,#fff)}
.vmx .hero .in{max-width:1420px;margin:0 auto;padding:16px 20px 15px;display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.vmx .hero h1{margin:0;font-size:21px;line-height:1.2;letter-spacing:-.5px;font-weight:750}
.vmx .hero h1 em{font-style:normal;color:var(--g);box-shadow:inset 0 -7px 0 rgba(109,190,69,.22)}
.vmx .hero p{margin:4px 0 0;max-width:72ch;font-size:12.5px;color:var(--mute)}
.vmx .stats{margin-left:auto;display:flex;gap:24px}
.vmx .stat b{display:block;font-size:16px;color:var(--g);letter-spacing:-.3px;font-variant-numeric:tabular-nums;line-height:1.2}
.vmx .stat span{display:block;font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
.vmx .work{flex:1 1 auto;min-height:0;display:flex}
.vmx .inner{flex:1 1 auto;min-height:0;max-width:1420px;width:100%;margin:0 auto;padding:16px 20px 18px;
  display:grid;grid-template-columns:326px 1fr;gap:16px}
.vmx .card{border:1px solid var(--line);border-radius:12px;background:#fff;
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* the input panel is only as tall as what it holds, so it never needs a scrollbar.
   the results panel is untouched and still fills the row. */
.vmx .inner > .card:nth-of-type(1){align-self:start;max-height:none}
.vmx .card > header{flex:0 0 auto;padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.vmx .card > header h2{margin:0;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--mute);font-weight:800}
.vmx .card > header .n{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.vmx .card > header .n.over{color:var(--red);font-weight:700}
/* overflow:visible — the panel does not scroll and does not clip.
   Earlier this was overflow-y:auto, to stop the "Cross my parts" button being
   cut off on a short window (1440x640). That worked but gave the panel its own
   inner scrollbar, which hid "+ Special requirement" below a second fold.
   The fix now is height, not scrolling: the card sizes to its content
   (align-self:start above) and the content was cut to fit — smaller textarea,
   one-line drop zone, tighter spacing. Nothing is clipped and nothing scrolls.
   If you add anything to this panel, re-measure at 1440x640 before shipping. */
.vmx .pad{flex:1 1 auto;min-height:0;overflow:visible;padding:12px 13px;display:flex;flex-direction:column}
/* nothing scrolls here any more, so the button does not need to stick */
.vmx .pad > .go{position:static}
.vmx textarea{width:100%;flex:1 1 auto;min-height:78px;resize:none;border:1px solid var(--line);border-radius:9px;padding:10px 11px;font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:#fff}
.vmx textarea::placeholder{color:#B2BFB4}
.vmx textarea:focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(109,190,69,.14)}
.vmx .undr{display:flex;justify-content:space-between;gap:8px;margin:6px 2px 0;font-size:11px;color:var(--faint)}
.vmx .undr a{color:var(--g);cursor:pointer;font-weight:650}
.vmx .undr a:hover{text-decoration:underline;text-underline-offset:2px}
.vmx .dz{margin-top:9px;border:1.5px dashed #C9D6CB;border-radius:10px;background:var(--bg);
  padding:8px 10px;text-align:left;cursor:pointer;transition:.15s}
.vmx .dz:hover{border-color:var(--g2);background:var(--tint)}
.vmx .dz.over{border-color:var(--g);background:var(--tint);border-style:solid}
.vmx .dz svg{display:none}
.vmx .dz b{display:block;font-size:12px;color:var(--ink);font-weight:650}
.vmx .dz span{display:block;font-size:10px;color:var(--mute);margin-top:1px;line-height:1.35}
.vmx .dz a{color:var(--g);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.vmx .fs{margin:11px 0 0;border:0;padding:0}
.vmx .fs legend{font-size:10.5px;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px;padding:0}
.vmx .seg{display:flex;border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px;background:var(--bg)}
.vmx .seg label{flex:1;text-align:center;font-size:11.5px;font-weight:600;padding:6px 3px;border-radius:6px;cursor:pointer;color:var(--mute)}
.vmx .seg label:hover{color:var(--ink)}
.vmx .seg input{position:absolute;opacity:0;pointer-events:none}
.vmx .seg label.on{background:#fff;color:var(--g);box-shadow:0 1px 2px rgba(20,40,22,.13)}
.vmx .gh{font-size:10px;color:var(--faint);margin:5px 2px 0;line-height:1.35}
.vmx .more{margin-top:10px}
.vmx .more > summary{font-size:11.5px;color:var(--mute);cursor:pointer;list-style:none;font-weight:600;
  display:inline-flex;align-items:center;gap:5px}
.vmx .more > summary::-webkit-details-marker{display:none}
.vmx .more > summary:before{content:"+";font-size:13px;color:var(--g)}
.vmx .more[open] > summary:before{content:"−"}
.vmx .more > summary:hover{color:var(--ink)}
.vmx .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.vmx .chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 9px;font-size:10.5px;
  cursor:pointer;color:var(--body);user-select:none}
.vmx .chip:hover{border-color:var(--g2)}
.vmx .chip.on{background:var(--tint);border-color:var(--g);color:var(--g);font-weight:650}
.vmx .go{margin-top:12px}
.vmx .btn{border:0;border-radius:9px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.vmx .btn.p{background:var(--g);color:#fff;width:100%;padding:11px 18px;font-size:13.5px}
.vmx .btn.p:hover{background:var(--g-d)}
.vmx .btn.p:disabled{background:#C3D4C5;cursor:default}
.vmx .btn.s{background:#fff;border:1px solid var(--line);color:var(--mute);padding:6px 11px;font-size:11.5px}
.vmx .btn.s:hover{border-color:var(--g2);color:var(--ink)}
.vmx kbd{font:600 9.5px ui-monospace,Menlo,monospace;background:rgba(255,255,255,.22);border-radius:4px;padding:2px 4px}
.vmx .mini{margin-top:10px;font-size:10px;color:var(--faint);line-height:1.45}
.vmx #out{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.vmx .empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px}
.vmx .empty .ill{width:58px;height:58px;margin-bottom:12px;border-radius:16px;background:var(--tint);
  border:1px solid var(--tint2);display:grid;place-items:center}
.vmx .empty h3{margin:0 0 3px;font-size:14.5px}
.vmx .empty p{margin:0;color:var(--mute);font-size:12.5px}
.vmx .scan{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--mute);font-size:12.5px;padding:24px}
.vmx .bar{height:3px;background:var(--line2);border-radius:2px;overflow:hidden;width:240px;margin-top:14px}
.vmx .bar i{display:block;height:100%;width:36%;background:linear-gradient(90deg,var(--g2),var(--g));border-radius:2px;
  animation:sweep 1.05s ease-in-out infinite}
.vmx 0%{transform:translateX(-100%)}
.vmx 100%{transform:translateX(380%)}
.vmx .tally{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--line);align-items:center}
.vmx .pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:650;
  font-variant-numeric:tabular-nums}
.vmx .pill.ok{color:var(--g);border-color:#CBE2CD;background:var(--tint)}
.vmx .pill.warn{color:var(--amber);border-color:var(--amberln);background:var(--amberbg)}
.vmx .pill.no{color:var(--red);border-color:var(--redln);background:var(--redbg)}
/* Already one of ours. Blue, because it is neither a pass nor a problem — it
   is a different kind of answer, and colouring it green or red would put it
   on a scale it does not belong to. */
.vmx .pill.own{color:#1B5E8A;border-color:#C6DDEC;background:#F0F7FB}
.vmx .tally .sp{margin-left:auto;display:flex;gap:5px}
.vmx .tblwrap{flex:1 1 auto;min-height:0;overflow:auto}
.vmx table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
\.vmx th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.9px;
  color:#EAF5EC;font-weight:800;padding:10px 13px;white-space:nowrap;
  background:linear-gradient(180deg,#1B7F3B,#166A31);position:sticky;top:0;z-index:3;
  border-right:1px solid rgba(255,255,255,.14)}
.vmx th:last-child{border-right:0}
.vmx thead tr{box-shadow:0 2px 6px rgba(12,61,29,.18)}
.vmx td{padding:9px 13px;vertical-align:top;border-bottom:1px solid var(--line)}
.vmx tbody tr:last-child td{border-bottom:0}
.vmx tbody tr:hover td{background:#FAFCFA}
.vmx td.num{border-left:3px solid transparent;padding:9px 0 9px 9px;width:36px;
  font:700 10.5px ui-monospace,Menlo,monospace;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.vmx th.num{padding-left:9px;padding-right:9px;text-align:right;width:36px;color:#BFE0C6}
.vmx tr.exact td.num{border-left-color:var(--g2)}
.vmx tr.check td.num{border-left-color:var(--amberln)}
.vmx tr.miss  td.num{border-left-color:var(--redln);color:var(--red)}
.vmx tr.miss td{background:var(--redbg)}
.vmx .yp{display:block;font:600 11.5px ui-monospace,Menlo,Consolas,monospace;color:var(--ink);white-space:nowrap}
.vmx .brand{display:block;font-size:10.5px;color:var(--faint);margin-top:2px}
.vmx .spec{font-size:12.5px;color:var(--ink)}
.vmx .note{display:block;margin-top:5px;font-size:11px;color:var(--amber);background:var(--amberbg);
  border-left:2px solid var(--amberln);padding:5px 8px;border-radius:0 5px 5px 0;line-height:1.45}
.vmx .wp code{display:inline-block;font:800 12.5px ui-monospace,Menlo,Consolas,monospace;color:var(--ink);
  background:var(--tint);border:1px solid var(--tint2);border-radius:6px;padding:3px 8px;white-space:pre;cursor:pointer}
.vmx .wp code:hover{border-color:var(--g)}
/* Construction note beside a Walsin resistor part number: (thick film),
   (thin film), (made to order). Deliberately quiet - it is a qualifier on the
   part number, not a badge competing with the grade tags. Kept on the same
   line so it reads as part of the number rather than a second fact. */
.vmx .fam{font-size:10px;color:var(--mute);margin-left:5px;white-space:nowrap}
.vmx .sub .fam{font-size:9.5px}
.vmx .tag{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.4px;border-radius:4px;padding:2px 5px;margin-left:5px;vertical-align:2px}
.vmx .tag.auto{background:var(--bluebg);color:var(--blue);border:1px solid var(--blueln)}
/* automotive grade but NOT AEC-Q200 qualified - amber, so it never reads as
   the same claim as the blue AEC-Q200 badge sitting beside it in other rows */
.vmx .tag.noaec{background:var(--amberbg);color:var(--amber);border:1px solid var(--amberln)}
.vmx .tag.ser{background:#F7F2FB;color:#6A4A86;border:1px solid #E1D2EE}
.vmx .tag.own{background:#F0F7FB;color:#1B5E8A;border:1px solid #C6DDEC}
.vmx tr.ours td.num{border-left-color:#C6DDEC;color:#1B5E8A}
.vmx tr.ours td{background:#F7FBFD}
.vmx .sub{display:block;margin-top:4px;font-size:10.5px;color:var(--mute)}
.vmx .sub code{font:600 10.5px ui-monospace,Menlo,monospace;color:var(--body)}
.vmx .stock{display:inline-block;margin-top:5px;font-size:10px;font-weight:700;color:var(--g);
  background:var(--tint);border:1px solid #CBE2CD;border-radius:5px;padding:2px 6px}
.vmx .foot{flex:0 0 auto;padding:11px 14px;border-top:1px solid var(--line);background:var(--bg)}
.vmx .cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.vmx .cta p{margin:0;font-size:12px;flex:1 1 240px}
.vmx .cta b{color:var(--ink);font-size:13px}
.vmx .cta .btn.p{width:auto;padding:9px 16px;font-size:12.5px}



@media(max-width:1020px){
  .vmx, .vmx{height:auto;overflow:visible}
  .vmx{display:block}
  .vmx .work{display:block}
  .vmx .inner{display:block;padding:14px}
  .vmx .card{margin-bottom:14px}
  .vmx .pad{overflow:visible}
  .vmx .tblwrap{max-height:none;overflow:visible}
  .vmx th{position:static}
  /* Centred on a phone. Left-aligned text with a ragged right edge reads as a
     column of a wider layout that has been squeezed; centred, the hero reads
     as something designed for this screen. The three figures become an even
     row underneath — brands, coverage, stock — each one centred on its own
     column so the labels stop hanging off to one side.
     grid, not flex: equal thirds keep the middle figure genuinely central
     however long the other two labels run. */
  /* Heading and intro stay left — that is reading text, and a centred
     paragraph of three lines makes both edges ragged. Only the three figures
     centre, as an even row underneath: equal thirds via grid, so the middle
     one is genuinely central however long the other two labels run. */
  .vmx .hero .in{padding:18px 14px 16px}
  .vmx .hero h1{font-size:23px}
  .vmx .stats{margin:14px 0 0;width:100%;gap:10px;
    display:grid;grid-template-columns:repeat(3,1fr);align-items:start}
  .vmx .stat{text-align:center}
  .vmx .stat b{font-size:15px}
  .vmx .stat span{font-size:9px;letter-spacing:.4px;line-height:1.3;margin-top:3px}
}
/* the theme's own paragraph and link styling must not leak into the table */
.vmx a{box-shadow:none}
.vmx p{margin:0}
.vmx table{margin:0}
.vmx code{padding:0;background:none;font-size:inherit}
.vmx .wp code,.vmx .sub code,.vmx .yp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media(max-width:1020px){
  .vmx{height:auto;min-height:0;overflow:visible;display:block}
}

/* A part number that has a product page behind it. Underlined on hover only —
   a table of 500 underlined codes is unreadable, and the green border already
   says it is interactive. */
.vmx .wp a.lnk{text-decoration:none;color:var(--ink);cursor:pointer}
.vmx .wp a.lnk:hover{border-color:var(--g);color:var(--g);text-decoration:underline;text-underline-offset:2px}
.vmx .sub a.lnk{color:var(--body);text-decoration:none}
.vmx .sub a.lnk:hover{color:var(--g);text-decoration:underline;text-underline-offset:2px}

/* ── alternates, grouped ────────────────────────────────────────────────── */
.vmx .sub em{font-style:normal;font-weight:800;font-size:9.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--faint);margin-right:5px}

/* ── stock ──────────────────────────────────────────────────────────────── */
.vmx td.stk{white-space:nowrap}
.vmx td.stk .dash{color:var(--line)}
.vmx .instock{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;
  color:#12592a;background:var(--tint);border:1px solid #BEDCC2;border-radius:6px;padding:3px 8px}
.vmx .instock .dot{width:6px;height:6px;border-radius:50%;background:var(--g2);
  box-shadow:0 0 0 2px rgba(109,190,69,.28)}
.vmx .toorder{display:inline-block;font-size:11px;font-weight:700;color:var(--mute);
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.vmx button.add{display:block;margin-top:6px;border:1px solid var(--line);background:#fff;
  color:var(--mute);border-radius:6px;padding:4px 9px;font-size:10.5px;font-weight:700;cursor:pointer}
.vmx button.add:hover{border-color:var(--g2);color:var(--g)}
.vmx button.add.on{background:var(--g);border-color:var(--g);color:#fff}

/* ── the far-right link out ─────────────────────────────────────────────── */
.vmx td.viewc{text-align:right;white-space:nowrap}
.vmx a.view{display:inline-block;font-size:11px;font-weight:700;color:var(--g);
  border:1px solid #CBE2CD;background:var(--tint);border-radius:6px;padding:4px 9px;text-decoration:none}
.vmx a.view:hover{background:var(--g);border-color:var(--g);color:#fff}

/* ── the left panel is frozen ──────────────────────────────────────────────
   Nothing in it scrolls. The box, the drop zone, the grade control and the
   button are all always on screen; when the window is short the TEXTAREA
   shrinks and nothing else moves. Giving the panel its own scrollbar was
   worse: the button a buyer needs would disappear below a second fold they
   had no reason to expect. */
.vmx .dz,.vmx .fs,.vmx .more,.vmx .go,.vmx .mini{flex:0 0 auto}
.vmx .mini{margin-top:10px;padding-top:0}   /* sits right under the button now */

/* ═══════════════════════════════════════════════════════════════════════════
   PHONES — the results table becomes cards, and the two panels say what they
   are.

   The table carries six columns: #, Your part, Specification, Walsin part,
   Stock, and the RFQ/View buttons. On a 375px screen that is roughly half the
   width it needs, so Stock and the buttons sat off the right edge with no way
   to reach them — the buyer could see a match but not the one number they
   came for.

   Widening or shrinking the text does not fix it; six columns will not fit.
   So on a phone each row stops being a row and becomes a card, with the
   column headings moved onto the cells as labels. Nothing is hidden and
   nothing scrolls sideways.

   The second half numbers the two panels. Stacked vertically, "Your parts"
   and "Walsin parts" read as two lists rather than a before and an after, and
   a first-time visitor has no reason to know the top one is an input. A
   numbered badge and one line of instruction under each heading is enough.

   Everything here is inside the media query, so the desktop layout is
   byte-for-byte unchanged.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:1020px){

  /* ── white page; the panels are held by their edges, not by a tone ──
     A tinted page made the panels read as cards, but it also put a visible
     band across the screen where the hero ended. White is cleaner and matches
     the rest of the site — it just means the separation has to come from real
     borders instead of shadows, or the two sections melt into the page and
     into each other, which is where this started. */
  .vmx .work{background:#fff}
  .vmx .inner{padding:16px 13px 24px}

  /* ── results: rows become cards ── */
  .vmx .tblwrap table,.vmx .tblwrap tbody,.vmx .tblwrap tr,.vmx .tblwrap td{
    display:block;width:auto}
  .vmx .tblwrap thead{display:none}          /* headings move onto the cells */
  .vmx .tblwrap tr{border:1px solid #CBDDCE;border-left:3px solid var(--g);
    border-radius:10px;background:#fff;padding:13px 14px 14px;margin:0 0 9px;
    position:relative}
  .vmx .tblwrap td{border:0;padding:6px 0}
  .vmx .tblwrap td:before{display:block;font-size:9.5px;letter-spacing:.8px;
    text-transform:uppercase;color:var(--g);opacity:.75;font-weight:800;margin-bottom:3px}
  /* the Walsin answer is the point of the card — divide it from the question */
  .vmx .tblwrap td:nth-child(4){margin-top:2px;padding-top:9px;border-top:1px dashed #DCE7DD}
  /* Actions go to the thumb side, and on a phone the order flips: Add to RFQ
     first because it is the one a buyer reaches for, View beneath it. */
  .vmx .tblwrap td.viewc{padding-top:2px;display:flex;flex-direction:column;
    align-items:flex-end;gap:7px}
  .vmx .tblwrap td.viewc .add{order:1}
  .vmx .tblwrap td.viewc .view{order:2}
  .vmx .tblwrap td.viewc:before{content:none}

  /* Send to our team sits right, under its own paragraph */
  .vmx .foot .cta{text-align:right}
  .vmx .foot .cta p{text-align:left}

  /* The upload box was the tallest thing on the panel and the least used —
     most people paste. Collapsed to one line: same tap target, same drop
     behaviour, about a fifth of the height. The hint about the first column
     goes; the template link stays, pushed to the right where it reads as the
     secondary action it is. */
  .vmx .dz{padding:10px 11px;text-align:left;display:flex;align-items:center;
    gap:9px;margin-top:9px;flex-wrap:nowrap}
  .vmx .dz svg{display:block;margin:0;flex:0 0 auto;width:17px;height:17px}  /* desktop hides it; phones keep it */
  .vmx .dz b{font-size:11.5px;font-weight:650;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .vmx .dz > span:first-of-type{display:none}   /* "or browse · first column…" */
  .vmx .dz > span:last-of-type{margin:0 0 0 auto!important;flex:0 0 auto}
  .vmx .dz a{font-size:11px;white-space:nowrap}
  .vmx .tblwrap td:nth-child(1){position:absolute;top:11px;right:13px;padding:0;
    font-size:11px;color:var(--faint)}       /* the row number, out of the way */
  .vmx .tblwrap td:nth-child(2):before{content:"Your part"}
  .vmx .tblwrap td:nth-child(3):before{content:"Specification"}
  .vmx .tblwrap td:nth-child(4):before{content:"Walsin part"}
  .vmx .tblwrap td:nth-child(5):before{content:"Stock"}

  /* ── the two panels: separated, and each says what it is ──
     Stacked on a phone, two white boxes flush against each other read as one
     continuous page and the buyer cannot tell where their input ends and our
     answer begins. Space, shadow and a genuinely different treatment for the
     results zone do the work that side-by-side columns do on a desktop. */
  /* The page stays white, so the outline has to carry the grouping on its own.
     With no background step to help it, the edge has to be dark enough to read
     at arm's length — the old 1.5px #CFDDD1 was close enough in value to white
     that it disappeared. 2px at this green reads as a drawn line rather than a
     seam, which is what "put a box round it" actually means.
     A faint shadow stays: on white it adds almost nothing on a good screen, but
     it keeps the panel legible on a dim phone where the border alone can wash
     out. */
  .vmx .work{background:#fff}
  .vmx .inner>.card{margin-bottom:34px;border-radius:14px;
    border:2px solid #9CB8A4;
    box-shadow:0 1px 2px rgba(20,45,28,.045)}

  /* A step marker in the gap between them. Two bordered boxes still only say
     "two boxes"; an arrow says the top one feeds the bottom one, which is the
     single thing a first-time visitor needs to understand and the one thing
     the stacked layout takes away. Sits in the margin, ringed in white so the
     border appears to pass behind it. */
  .vmx .inner>.card:nth-of-type(1){position:relative}
  .vmx .inner>.card:nth-of-type(1):after{content:"↓";position:absolute;
    left:50%;bottom:-30px;transform:translateX(-50%);
    width:28px;height:28px;border-radius:50%;background:var(--g);color:#fff;
    display:flex;align-items:center;justify-content:center;
    /* the ring is the page colour, so the gap between the two panels appears
       to pass behind the arrow */
    font-size:15px;line-height:1;box-shadow:0 0 0 6px #fff}
  /* Both headers pin to the top of the screen while their own section is in
     view, so the buyer always knows whether they are looking at their parts
     or at our answer without scrolling back to check.
     A full freeze — two fixed panes, each scrolling inside itself, the way the
     desktop works — is not possible on a phone. After the site header and the
     hero there is roughly 400px of app left on an 812px screen; split in two
     that is 200px a side, and the input panel alone needs about 500px for the
     textarea, the drop zone, the grade control and the button. Sticky headers
     give the same certainty without the squeeze.
     Sticky needs a non-clipping ancestor, hence the overflow:visible below. */
  .vmx .inner>.card{overflow:visible}
  /* The header is the lid of the group. Tinting it and giving it a real
     dividing line means the panel reads as one thing with a top, instead of
     text that happens to sit above other text. */
  .vmx .inner>.card>header{flex-wrap:wrap;align-items:flex-start;
    padding:14px 15px 12px;background:var(--tint);border-radius:12px 12px 0 0;
    border-bottom:1.5px solid #CBDED0;
    position:sticky;top:0;z-index:6}
  .vmx .inner>.card>header h2{font-size:14.5px;letter-spacing:-.2px;text-transform:none;
    color:var(--ink);font-weight:750;display:flex;align-items:center}
  .vmx .inner>.card>header h2:before{display:inline-flex;align-items:center;
    justify-content:center;width:21px;height:21px;border-radius:7px;
    background:var(--g);color:#fff;font-size:11px;font-weight:800;margin-right:9px}
  .vmx .inner>.card>header .n{font-size:11px;padding-top:4px}
  .vmx .inner>.card:nth-of-type(1)>header h2:before{content:"1"}
  .vmx .inner>.card:nth-of-type(2)>header h2:before{content:"2"}
  .vmx .inner>.card>header:after{flex:0 0 100%;font-size:11.5px;color:var(--mute);
    font-weight:500;letter-spacing:0;text-transform:none;margin-top:6px;line-height:1.45}
  .vmx .inner>.card:nth-of-type(1)>header:after{
    content:"Paste the parts you buy today, or upload a file, then press Cross my parts."}
  .vmx .inner>.card:nth-of-type(2)>header:after{
    content:"The Walsin match for each of your parts appears here."}

  /* section 2 is a different place, not more of the same. On white the tint
     is what keeps the answer from looking like another empty input panel, so
     it stays — with a green edge to match its header. */
  .vmx .inner>.card:nth-of-type(2){background:var(--tint);border-color:#A9CDB2}
  .vmx .inner>.card:nth-of-type(2)>header{background:var(--g-dd);border-bottom:0}
  .vmx .inner>.card:nth-of-type(2)>header h2{color:#fff}
  .vmx .inner>.card:nth-of-type(2)>header h2:before{background:#fff;color:var(--g-dd)}
  .vmx .inner>.card:nth-of-type(2)>header .n{color:#9FC2A6}
  .vmx .inner>.card:nth-of-type(2)>header:after{color:#AFCFB5}
}

/* Desktop: View above Add to RFQ in the actions column.
   Add to RFQ moved out of the stock cell so a column of figures is not
   interrupted by a button. On a wide screen the specification link reads
   first and the RFQ action sits under it; the phone reverses that pair,
   because there the thumb arrives at the bottom of the card. */
@media(min-width:1021px){
  /* NOT display:flex on the cell. A <td> set to anything other than
     table-cell drops out of the table's layout: the browser stops sizing it
     with the rest of the row, so the row borders no longer line up and the
     grid develops a visible step down the right-hand edge. It looked like a
     rendering fault and it was this rule.
     The td stays a table cell; the two buttons stack inside it. */
  .vmx td.viewc{text-align:right;vertical-align:top;white-space:nowrap}
  .vmx td.viewc .view{display:block;margin-left:auto}
  .vmx td.viewc .add{display:block;margin:6px 0 0 auto}
}

/* Mobile: section 1 is a box, not just a lighter area.
   With the results panel carrying a dark header and a tinted body, the input
   panel had nothing but a shadow holding it together and read as loose page
   rather than as the first of two steps. */
@media(max-width:1020px){
  .vmx .inner>.card:nth-of-type(1){background:#fff}
  .vmx .inner>.card:nth-of-type(1)>header{border-bottom:1px solid var(--line)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP — the two panels as two panels.

   Side by side in a grid with a 16px gap and identical hairline borders, the
   input and the results read as one wide table split down the middle. Nothing
   said "this side is what you give us, that side is what we give back".

   Three changes, all on the wide layout only:
   the headers are set as headings rather than small grey labels; the results
   panel takes the dark bar it already has on a phone, so the two sides are
   plainly different things; and the gap becomes a real rule between them.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:1021px){
  .vmx .inner{gap:22px;position:relative}

  /* No rule down the gap. It was absolutely positioned against .inner, whose
     height includes the grid's padding, so the line ran past the top and
     bottom of both cards and read as a stray mark floating on the page. The
     separation is already carried by the two borders and the dark header on
     the results — a third device was one too many anyway. */

  .vmx .card{border-color:var(--tint2);
    box-shadow:0 1px 2px rgba(20,40,22,.04),0 12px 28px -24px rgba(20,40,22,.45)}

  /* headers read as headings */
  .vmx .card > header{padding:12px 15px}
  .vmx .card > header h2{font-size:12.5px;letter-spacing:.4px;font-weight:800;
    color:var(--ink)}

  /* and the answer side is visibly the answer side */
  .vmx .inner>.card:nth-of-type(2)>header{background:var(--g-dd);border-bottom:0}
  .vmx .inner>.card:nth-of-type(2)>header h2{color:#fff}
  .vmx .inner>.card:nth-of-type(2)>header .n{color:#9FC2A6}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONES — the Walsin part is the answer, so make it look like the answer.

   Every cell in the card was set the same way: small grey label, value in
   ordinary text. The part number the buyer came for was rendered identically
   to the part number they already had, and to the specification they already
   knew. Four equal rows, one of which happens to matter.

   So the Walsin row is lifted out: tinted band across the full width of the
   card, a green rule above and below, the code itself half again as large and
   set in the darkest ink. Scrolling a list of forty results, the eye should
   land on the Walsin codes and nothing else.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:1020px){
  .vmx .tblwrap td.wp{
    background:var(--tint);margin:9px -14px 0;padding:11px 14px 12px;
    border-top:1px solid #BEDAC5;border-bottom:1px solid #BEDAC5}
  .vmx .tblwrap td.wp:before{content:"Walsin part";color:var(--g);opacity:1;
    font-size:9.5px;margin-bottom:5px}
  .vmx .tblwrap td.wp code{font-size:17px;font-weight:800;letter-spacing:-.3px;
    color:var(--ink);background:none;border:0;padding:0;line-height:1.25}
  .vmx .tblwrap td.wp a.lnk{color:var(--ink);border:0}
  /* the alternates stay secondary — they are candidates, not the answer */
  .vmx .tblwrap td.wp .sub{margin-top:7px}
  .vmx .tblwrap td.wp .sub code{font-size:12.5px;font-weight:650;color:var(--body)}
  /* the row above it is the question; quieten it so the contrast reads */
  .vmx .tblwrap td:nth-child(2) .yp{font-size:12.5px;color:var(--body)}
  .vmx .tblwrap td:nth-child(3){color:var(--mute);font-size:12px}
}


/* ── language switcher ─────────────────────────────────────────────────────
   venamatch-i18n.js builds #vm-lang itself and writes inline styles for a
   generic page. These rules win on specificity and dress it for this hero.
   Nothing is repositioned: it sits at the end of the row the heading already
   occupies, hard right. */
.vmx .hero .in{position:relative}
.vmx #vm-lang{margin-left:auto;align-self:flex-start;
  border:1.5px solid var(--line)!important;border-radius:10px!important;
  background:#fff!important;padding:3px!important;
  font-family:inherit!important;box-shadow:0 1px 2px rgba(16,40,26,.05)}
.vmx #vm-lang button{font-family:inherit!important;font-size:12px!important;
  font-weight:650!important;padding:6px 11px!important;border-radius:7px!important;
  transition:background .15s,color .15s}
.vmx #vm-lang button[data-lang]{color:var(--mute)!important;background:#fff!important}
.vmx #vm-lang button[data-lang]:hover{color:var(--ink)!important}
.vmx #vm-lang button[style*="background:#1B7F3B"],
.vmx #vm-lang button[aria-pressed=true]{background:var(--g)!important;color:#fff!important}

/* Chinese needs a little more leading and no Latin letter-spacing */
.vmx[lang^="zh"] , html[lang^="zh"] .vmx{line-height:1.7}
html[lang^="zh"] .vmx h1{letter-spacing:0}


/* ══ 5.64.1 · VISIBLE DEPTH ════════════════════════════════════════════════
   The 5.64.0 palette swap was too quiet to see. The reason: the big moves in
   the design mock — a dark site header with a lime rule — belong to the
   WordPress THEME, which this plugin does not control. Everything the plugin
   owns starts at .vmx, so the work has to happen there.

   These rules override earlier ones in the same sheet rather than editing
   them, so every original declaration is still readable above and nothing
   moves: no size, no padding, no grid, no order. Only colour, edge and depth.
   ────────────────────────────────────────────────────────────────────────── */

/* 1. a ground, so the panels are objects on a surface rather than white on
      white. This is the single change that does the most work. */
.vmx{background:var(--bg)}

/* 2. the hero gets its own plane and a soft green wash behind the figures,
      instead of a near-white gradient that reads as nothing. */
.vmx .hero{
  background:
    radial-gradient(620px 200px at 88% -60%, rgba(30,142,74,.10), transparent 70%),
    linear-gradient(180deg, var(--tint2), var(--bg));
  border-bottom:1.5px solid var(--line);
}
.vmx .hero h1 em{box-shadow:inset 0 -8px 0 rgba(141,198,63,.42)}

/* 3. the stat figures in mono. Engineers read numbers in mono; proportional
      type makes a count look like advertising. */
.vmx .stat b{font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:15.5px;font-weight:700}
.vmx .stat span{color:var(--mute);font-weight:650}

/* 4. panels you can see the edge of, lifted off the ground. */
.vmx .card{border:1.5px solid var(--line);
  box-shadow:0 1px 2px rgba(16,40,26,.05), 0 14px 34px -26px rgba(16,40,26,.45)}

/* 5. the panel headings become structure, not captions: filled strip, a real
      bottom rule, full-strength ink. */
.vmx .card > header{background:var(--tint);border-bottom:1.5px solid var(--line)}
.vmx .card > header h2{color:var(--ink);font-weight:800;letter-spacing:1.2px}

/* 6. the results panel keeps its dark head and gains the lime rule that ties
      it to the brand mark. */
.vmx .card.out > header,
.vmx .card .hd.dark,
.vmx .card > header.dark{position:relative}
.vmx .card > header.dark::after,
.vmx .card.out > header::after{content:"";position:absolute;left:0;bottom:-1.5px;
  width:132px;height:3px;background:linear-gradient(90deg,var(--g2),transparent)}

/* 7. inputs with a visible edge and a green focus ring. */
.vmx textarea, .vmx input[type=text], .vmx .drop, .vmx .seg{
  border-width:1.5px!important}
.vmx textarea:focus, .vmx input[type=text]:focus{
  border-color:var(--g)!important;box-shadow:0 0 0 3px rgba(30,142,74,.12)!important}

/* 8. the primary action carries real weight. */
.vmx .btn.p, .vmx button.p, .vmx #go{
  background:linear-gradient(180deg,var(--g),var(--g-d))!important;
  box-shadow:0 8px 20px -10px var(--g), 0 1px 0 rgba(255,255,255,.22) inset!important}

/* 9. table rules you can follow across a 165-line BOM. */
.vmx table th{background:var(--tint);border-bottom:1.5px solid var(--line)!important;
  color:var(--mute);font-weight:800}
.vmx table td{border-bottom:1px solid var(--line2)}
.vmx table tbody tr:hover td{background:var(--tint)}


/* ══ 5.64.3 · the language switcher on a phone ═════════════════════════════
   venamatch-i18n.js appends #vm-lang to .hero .in, which is a wrapping flex
   row. On a wide screen it tucks in beside the stats and costs nothing. On a
   phone the row wraps, the switcher takes a line of its own, and everything
   below it moves down — which pushed "Cross my parts" off the first screen.
   This page is explicitly built to be read without scrolling, so a whole
   extra row is not a cosmetic problem, it hides the only button that matters.

   Fix: below 1020px take it out of the flow entirely and pin it to the hero's
   top-right corner, where there is already empty space beside the heading.
   It then costs zero height. Nothing else moves, and the control is still the
   first thing in reach of a right thumb. */
@media(max-width:1020px){
  .vmx .hero{position:relative}
  .vmx .hero .in{padding-right:116px}      /* room for the pinned control */
  .vmx #vm-lang{
    position:absolute!important; top:12px; right:12px; margin:0!important;
    z-index:5; padding:2px!important; border-radius:9px!important;
  }
  .vmx #vm-lang button{padding:5px 8px!important; font-size:11.5px!important}
}

/* On a narrow phone the heading needs the full width back, so drop the
   reserved gutter once the switcher has room above the text instead. */
@media(max-width:430px){
  .vmx .hero .in{padding-right:14px; padding-top:44px}
  .vmx #vm-lang{top:9px; right:10px}
}