/* Every selector in this block is scoped under .jsa-vpf-root (never :root, body,
     or a bare tag/class name) so it can be pasted directly into an existing page's
     body -- inside a WordPress Custom HTML block, for instance -- without its
     colors, fonts or form-field styling leaking onto anything else on that page. */
  .jsa-vpf-root {
    --ground:#f4f6f7;
    --surface:#ffffff;
    --surface-2:#eceff1;
    --line:#d6dce0;
    --ink:#151b1f;
    --ink-soft:#4b565c;
    --muted:#7c8890;
    --accent:#1f5c73;
    --accent-ink:#ffffff;
    --accent-soft:#e4eef1;
    --amber:#d9822b;
    --good:#3c7a4e;
    --good-bg:#e7f2ea;
    --warn-bg:#fbeee0;
    --focus:#1f5c73;
    --shadow: 0 1px 2px rgba(21,27,31,.06), 0 6px 20px rgba(21,27,31,.05);
  }
  @media (prefers-color-scheme: dark) {
    .jsa-vpf-root:not([data-theme="light"]){
      --ground:#12171a;
      --surface:#1a2126;
      --surface-2:#212a30;
      --line:#2d3941;
      --ink:#e9edef;
      --ink-soft:#b7c2c8;
      --muted:#88949b;
      --accent:#5fa3bd;
      --accent-ink:#0d1416;
      --accent-soft:#20343c;
      --amber:#e5a35b;
      --good:#7cbf8f;
      --good-bg:#1c2f22;
      --warn-bg:#332616;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    }
  }
  .jsa-vpf-root[data-theme="dark"] {
    --ground:#12171a;
    --surface:#1a2126;
    --surface-2:#212a30;
    --line:#2d3941;
    --ink:#e9edef;
    --ink-soft:#b7c2c8;
    --muted:#88949b;
    --accent:#5fa3bd;
    --accent-ink:#0d1416;
    --accent-soft:#20343c;
    --amber:#e5a35b;
    --good:#7cbf8f;
    --good-bg:#1c2f22;
    --warn-bg:#332616;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }

  /* Neutralizes every inherited property a host page's own tag/element
     selectors (h1, button, input, table, a, ...) might otherwise still
     contribute on properties our own rules below don't happen to set --
     revert rolls each property back to the browser's default, not the host
     page's, so it never fights a more specific .jsa-vpf-root rule (those
     have higher specificity and always win the cascade regardless of
     source order), it only cleans up what nothing here already claims. */
  .jsa-vpf-root, .jsa-vpf-root * {all:revert;}
  .jsa-vpf-root, .jsa-vpf-root * {box-sizing:border-box;}
  .jsa-vpf-root {
    display:block;
    background:var(--ground);
    color:var(--ink);
    font-family:"IBM Plex Sans", system-ui, sans-serif;
    padding-inline:20px;
    padding-block:24px 48px;
    max-width:100%;
    overflow-x:hidden; /* backstop: this widget never scrolls sideways -- only .table-scroll does, internally */
  }
  .jsa-vpf-root .wrap {max-width:900px;margin:0 auto;}
  .jsa-vpf-root .mono {font-family:"IBM Plex Mono", ui-monospace, monospace;}
  .jsa-vpf-root .num {font-variant-numeric:tabular-nums;}

  /* ---------- header ---------- */
  .jsa-vpf-root header.top {
    display:flex; align-items:flex-start; gap:14px;
    padding-bottom:16px; margin-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .jsa-vpf-root .brand {display:flex; gap:14px; align-items:center;}
  .jsa-vpf-root .brand svg {flex:none;}
  .jsa-vpf-root h1 {
    font-family:"Archivo", sans-serif; font-weight:800;
    font-size:clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem);
    letter-spacing:-.01em; margin:0; text-wrap:balance;
    color:var(--ink);
  }
  .jsa-vpf-root .brand p {margin:3px 0 0; color:var(--muted); font-size:.88rem; max-width:60ch;}

  /* ---------- shared panel ---------- */
  .jsa-vpf-root .panel {
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow);
    min-width:0; max-width:100%;
  }
  .jsa-vpf-root .panel-pad {padding:18px 20px;}
  .jsa-vpf-root .panel + .panel {margin-top:16px;}
  .jsa-vpf-root .eyebrow {
    font:600 .72rem/1 "IBM Plex Mono",monospace; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted); margin:0 0 10px;
  }

  /* ---------- question grid (compact, two columns on desktop) ---------- */
  .jsa-vpf-root .q-grid {display:grid; grid-template-columns:1fr 1fr; gap:14px 22px;}
  @media (max-width:700px) { .jsa-vpf-root .q-grid{grid-template-columns:1fr;} }
  .jsa-vpf-root .q-span2 {grid-column:1 / -1;}
  .jsa-vpf-root .q {min-width:0;}
  .jsa-vpf-root .q + .q {margin-top:0;}

  .jsa-vpf-root fieldset {border:0; padding:0; margin:0;}
  .jsa-vpf-root legend, .jsa-vpf-root .field-label {
    font:600 .82rem "IBM Plex Sans",sans-serif; color:var(--ink); margin-bottom:7px; display:block;
  }
  .jsa-vpf-root .hint {font-size:.76rem; color:var(--muted); margin:4px 0 0;}

  /* compact, responsive choice grid -- cards flow side by side instead of
     stacking in one long column, which is most of what made the old layout
     feel like a long scrolling questionnaire */
  .jsa-vpf-root .choice-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:7px; min-width:0;}
  .jsa-vpf-root .choice {
    display:flex; align-items:flex-start; gap:9px; border:1px solid var(--line);
    border-radius:9px; padding:8px 10px; cursor:pointer; background:var(--surface);
    min-width:0;
  }
  .jsa-vpf-root .choice:hover {border-color:var(--accent);}
  .jsa-vpf-root .choice input {margin-top:3px; accent-color:var(--accent); flex:none;}
  .jsa-vpf-root .choice > span {min-width:0; flex:1 1 auto;}
  .jsa-vpf-root .choice .t {font-weight:600; font-size:.85rem; display:block;}
  .jsa-vpf-root .choice .d {font-size:.74rem; color:var(--muted); margin-top:1px; display:block; line-height:1.3;}
  .jsa-vpf-root .choice.checked {border-color:var(--accent); background:var(--accent-soft);}

  .jsa-vpf-root .sub-q + .sub-q {margin-top:12px;}
  .jsa-vpf-root .sub-q-row {display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:520px) { .jsa-vpf-root .sub-q-row{grid-template-columns:1fr;} }

  .jsa-vpf-root .field {margin-bottom:0;}
  .jsa-vpf-root select, .jsa-vpf-root input[type="number"], .jsa-vpf-root input[type="text"] {
    width:100%; font:500 .88rem "IBM Plex Mono", monospace; color:var(--ink);
    background:var(--surface); border:1px solid var(--line); border-radius:8px;
    padding:8px 9px;
  }
  .jsa-vpf-root select:focus, .jsa-vpf-root input:focus {outline:2px solid var(--focus); outline-offset:1px;}
  .jsa-vpf-root .unit-input {display:flex; gap:8px;}
  .jsa-vpf-root .unit-input input {flex:1 1 auto; min-width:0;}
  .jsa-vpf-root .unit-input select {flex:0 0 auto; width:auto; min-width:82px;}

  .jsa-vpf-root .toggle-row {display:flex; align-items:center; justify-content:space-between; gap:10px;
    border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:var(--surface-2);}
  .jsa-vpf-root .toggle-row + .toggle-row {margin-top:8px;}
  .jsa-vpf-root .toggle-row .t {font-size:.83rem; font-weight:600;}
  .jsa-vpf-root .toggle-row .d {font-size:.74rem; color:var(--muted);}
  .jsa-vpf-root .switch {position:relative; width:40px; height:23px; flex:none;}
  .jsa-vpf-root .switch input {position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;}
  .jsa-vpf-root .switch .track {position:absolute; inset:0; background:var(--line); border-radius:99px; transition:.15s;}
  .jsa-vpf-root .switch .knob {position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow); transition:.15s;}
  .jsa-vpf-root .switch input:checked + .track {background:var(--accent);}
  .jsa-vpf-root .switch input:checked + .track .knob {transform:translateX(17px);}
  .jsa-vpf-root .switch input:focus-visible + .track {outline:2px solid var(--focus); outline-offset:2px;}

  .jsa-vpf-root .priority {display:flex; gap:8px;}
  .jsa-vpf-root .priority button {
    flex:1; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
    font:500 .8rem "IBM Plex Sans",sans-serif; padding:8px 6px; border-radius:8px; cursor:pointer;
  }
  .jsa-vpf-root .priority button.active {border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600;}

  /* ---------- optional technical-specs disclosure ---------- */
  .jsa-vpf-root .tech-details summary {
    cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
    font:600 .88rem "IBM Plex Sans",sans-serif; color:var(--ink);
  }
  .jsa-vpf-root .tech-details summary::-webkit-details-marker {display:none;}
  .jsa-vpf-root .tech-details summary::marker {content:"";}
  .jsa-vpf-root .tech-details .chev {color:var(--muted); font-size:.8rem; transition:transform .15s; flex:none;}
  .jsa-vpf-root .tech-details[open] summary {margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line);}
  .jsa-vpf-root .tech-details[open] .chev {transform:rotate(180deg);}
  .jsa-vpf-root .tech-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 18px;}
  .jsa-vpf-root .tech-grid .field-note {color:var(--muted); font-weight:500;}

  /* ---------- search action ---------- */
  .jsa-vpf-root .btn-search {
    display:block; width:100%; text-align:center; border:0; cursor:pointer;
    background:var(--accent); color:var(--accent-ink);
    font:700 .95rem "IBM Plex Sans",sans-serif; letter-spacing:.01em;
    padding:13px 18px; border-radius:10px; margin-top:16px;
  }
  .jsa-vpf-root .btn-search:hover {opacity:.92;}
  .jsa-vpf-root .btn-search:focus-visible {outline:2px solid var(--focus); outline-offset:2px;}

  /* ---------- results ---------- */
  .jsa-vpf-root .results-head {margin-bottom:14px;}
  .jsa-vpf-root .results-head h2 {
    font-family:"Archivo",sans-serif; font-weight:700; font-size:1.1rem; margin:0 0 4px; color:var(--ink);
  }
  .jsa-vpf-root .results-head p {margin:0; color:var(--muted); font-size:.85rem; max-width:70ch;}

  .jsa-vpf-root .card-stack {display:flex; flex-direction:column; gap:10px; margin-bottom:6px;}
  .jsa-vpf-root .rec-card {
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:13px 15px; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
    min-width:0; max-width:100%;
  }
  .jsa-vpf-root .rec-card.top {border-color:var(--accent); box-shadow:var(--shadow);}
  @media (max-width:640px) { .jsa-vpf-root .rec-card{grid-template-columns:1fr;} }
  .jsa-vpf-root .rank {
    width:30px; height:30px; border-radius:50%; background:var(--surface-2); color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center; font:700 .88rem "IBM Plex Mono",monospace; flex:none;
  }
  .jsa-vpf-root .rec-card.top .rank {background:var(--accent); color:var(--accent-ink);}
  .jsa-vpf-root .rec-body {min-width:0;}
  .jsa-vpf-root .rec-body .name {font-family:"Archivo",sans-serif; font-weight:700; font-size:1rem; margin:0 0 2px;}
  .jsa-vpf-root .rec-body .fam {font-size:.76rem; color:var(--muted); margin:0 0 6px;}
  .jsa-vpf-root .spec-line {display:flex; flex-wrap:wrap; gap:5px 12px; font-size:.8rem;}
  .jsa-vpf-root .spec-line span {color:var(--ink-soft);}
  .jsa-vpf-root .spec-line b {color:var(--ink); font-family:"IBM Plex Mono",monospace; font-weight:600;}
  .jsa-vpf-root .pill {
    display:inline-flex; align-items:center; gap:5px; font:600 .7rem "IBM Plex Sans",sans-serif;
    padding:2px 8px; border-radius:99px; letter-spacing:.02em;
  }
  .jsa-vpf-root .pill.good {background:var(--good-bg); color:var(--good);}
  .jsa-vpf-root .pill.warn {background:var(--warn-bg); color:var(--amber);}
  .jsa-vpf-root .rec-actions {display:flex; flex-direction:column; gap:8px; align-items:flex-end;}
  @media (max-width:640px) { .jsa-vpf-root .rec-actions{align-items:flex-start;} }
  .jsa-vpf-root .btn {
    display:inline-block; text-decoration:none; text-align:center;
    background:var(--accent); color:var(--accent-ink); font:600 .8rem "IBM Plex Sans",sans-serif;
    padding:8px 14px; border-radius:8px; white-space:nowrap;
  }
  .jsa-vpf-root .why {font-size:.76rem; color:var(--ink-soft); background:var(--surface-2); border-radius:8px; padding:7px 9px; margin-top:2px;}

  .jsa-vpf-root .empty-note {
    border:1px dashed var(--line); border-radius:12px; padding:14px 16px; color:var(--ink-soft); font-size:.86rem; background:var(--surface-2);
  }

  .jsa-vpf-root .compare-divider {border-top:1px solid var(--line); margin:18px 0 16px;}

  /* ---------- comparison table ---------- */
  .jsa-vpf-root .table-scroll {overflow-x:auto; border:1px solid var(--line); border-radius:12px; max-width:100%;}
  .jsa-vpf-root table.compare {border-collapse:collapse; width:100%; min-width:640px; background:var(--surface);}
  .jsa-vpf-root table.compare caption {text-align:left; padding:12px 14px 0; font:600 .8rem "IBM Plex Sans",sans-serif; color:var(--ink);}
  .jsa-vpf-root table.compare th, .jsa-vpf-root table.compare td {
    padding:9px 11px; border-bottom:1px solid var(--line); text-align:left; font-size:.79rem; white-space:normal;
  }
  .jsa-vpf-root table.compare th:first-child, .jsa-vpf-root table.compare td:first-child {white-space:nowrap;}
  .jsa-vpf-root table.compare thead th {
    font:600 .7rem "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    background:var(--surface-2); border-bottom:1px solid var(--line);
  }
  .jsa-vpf-root table.compare tbody th {font-weight:600; color:var(--ink); background:transparent;}
  .jsa-vpf-root table.compare td {font-family:"IBM Plex Mono",monospace; color:var(--ink-soft);}
  .jsa-vpf-root table.compare tr:last-child td, .jsa-vpf-root table.compare tr:last-child th {border-bottom:0;}
  .jsa-vpf-root table.compare td.na {color:var(--muted); font-style:italic;}

  /* Below 920px the comparison table stops scrolling sideways and stacks into
     one labeled card per pump instead -- each row becomes a block, each cell
     becomes a labeled line, using the data-label attribute the JS writes onto
     every <td>. */
  @media (max-width:920px) {
    .jsa-vpf-root .table-scroll {overflow-x:visible; border:0;}
    .jsa-vpf-root table.compare, .jsa-vpf-root table.compare thead, .jsa-vpf-root table.compare tbody,
    .jsa-vpf-root table.compare th, .jsa-vpf-root table.compare td, .jsa-vpf-root table.compare tr {
      display:block; width:auto; min-width:0;
    }
    .jsa-vpf-root table.compare caption {padding:0 0 10px;}
    .jsa-vpf-root table.compare thead {
      position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
      white-space:nowrap; border:0; padding:0; margin:-1px;
    }
    .jsa-vpf-root table.compare tbody tr {
      border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:12px;
      background:var(--surface);
    }
    .jsa-vpf-root table.compare tbody tr:last-child {margin-bottom:0;}
    .jsa-vpf-root table.compare tbody th {
      font:700 .95rem "Archivo",sans-serif; padding:0 0 8px; border-bottom:1px solid var(--line); margin-bottom:8px;
      white-space:normal;
    }
    .jsa-vpf-root table.compare tbody td {
      display:flex; justify-content:space-between; align-items:baseline; gap:12px;
      padding:6px 0; border-bottom:1px dashed var(--line); white-space:normal; text-align:right;
    }
    .jsa-vpf-root table.compare tbody td:last-child {border-bottom:0;}
    .jsa-vpf-root table.compare tbody td::before {
      content:attr(data-label); font-family:"IBM Plex Sans",sans-serif; font-weight:600;
      font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
      text-align:left; padding-right:10px;
    }
  }

  .jsa-vpf-root footer.note {
    margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
    color:var(--muted); font-size:.76rem; max-width:80ch;
  }
  .jsa-vpf-root footer.note a {color:var(--accent);}