/* Solidsvac website skin for the Pump Selector.
   Restyles the tool to match the new site. No changes to the tool's own code. */
:root{
  --ink:#17242D;--ocean:#007CBB;--aqua:#007CBB;--foam:#F4F7F8;--sand:#E2E8EC;--paper:#F4F7F8;--line:#E2E8EC;--muted:#6C7880;
  --background:#F4F7F8;--foreground:#17242D;--card-foreground:#17242D;--popover-foreground:#17242D;--primary:#007CBB;
  --secondary:#F4F7F8;--accent:#F4F7F8;--border:#E2E8EC;--input:#E2E8EC;--ring:#4FB2E2;--radius:0;
  --sv-navy:#071B2B;--sv-blue-dark:#006395;--sv-soft:#4FB2E2;--sv-steel:#D9E2E7;--sv-body:#45525B;
  --sv-head:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--sv-text:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--sv-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
body{font-family:var(--sv-text);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
main{background:var(--paper)}

/* Masthead */
.mast{border-bottom:0;padding-top:56px;padding-bottom:56px;align-items:center}
.mast h1{font-family:var(--sv-head);font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.02;font-size:clamp(2.4rem,5vw,3.9rem)}
.eyebrow,.rank{font-family:var(--sv-mono);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ocean)}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.eyebrow:before{content:"";width:30px;height:1px;background:currentColor}
.brand-claim{font-family:var(--sv-text);font-weight:600;font-size:1.05rem;line-height:1.6;margin-top:18px}
.intro{font-size:.97rem;line-height:1.7;color:var(--sv-body)}
.air-stamp{border-left-color:rgba(255,255,255,.2)}
.air-stamp span{font-family:var(--sv-mono);font-weight:600;font-size:11.5px;letter-spacing:.16em;color:var(--sv-soft)}
.air-stamp strong{font-family:var(--sv-head);font-weight:700;font-size:1.7rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.15}
.air-stamp small{font-family:var(--sv-mono);font-size:12px;color:var(--sv-steel)}
.mast{background:linear-gradient(115deg,#fff 0 58%,var(--sv-navy) 58% 100%)}
/* Inside the website page: full navy band like the site's hero sections */
.embed .mast{background:var(--sv-navy);color:#fff}
.embed .mast h1{color:#fff}
.embed .eyebrow{color:var(--sv-soft)}
.embed .brand-claim{color:#fff}
.embed .intro{color:var(--sv-steel)}

/* Layout */
.workspace{max-width:1288px;padding-top:56px;padding-bottom:64px;gap:32px;grid-template-columns:minmax(460px,1fr) minmax(0,1.15fr)}
.section-title{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px}
.section-title>span{font-family:var(--sv-mono);font-weight:600;font-size:13px;color:#fff;background:var(--ocean);width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px}
.section-title h2{font-family:var(--sv-head);font-weight:700;text-transform:uppercase;font-size:1.6rem;line-height:1.05;letter-spacing:.005em}
.section-title p{font-size:.86rem;color:var(--muted);margin-top:4px}

/* Inputs */
.inputs{border:1px solid var(--line);box-shadow:none;padding:30px}
.controls{gap:16px 18px}
.control{grid-template-rows:minmax(26px,auto) 46px minmax(22px,auto)}
.control>span{font-family:var(--sv-mono);font-weight:600;font-size:11.5px;letter-spacing:.1em;color:var(--ink);align-self:end}
.control small{font-size:11.5px;color:var(--muted)}
[data-slot=select-trigger]{height:46px;border-radius:0;border-color:var(--sv-steel);background:#fff;font-family:var(--sv-text);font-size:14.5px;color:var(--ink);box-shadow:none}
[data-slot=select-trigger]{min-width:0;max-width:100%}
[data-slot=select-trigger]>[data-slot=select-value]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
[data-slot=select-trigger]:hover{border-color:var(--ocean)}
[data-slot=select-trigger]:focus-visible{border-color:var(--ocean);--tw-ring-color:rgba(0,124,187,.25)}
[data-slot=select-content]{border-radius:0;border-color:var(--sv-steel);font-family:var(--sv-text);box-shadow:0 18px 40px rgba(7,27,43,.14)}
[data-slot=select-item]{border-radius:0;font-size:14.5px;padding-top:8px;padding-bottom:8px}

/* Results */
.evidence-note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--ocean);color:var(--sv-body);font-size:.84rem;line-height:1.6;padding:14px 16px;margin:0 0 16px}
.result-stack{gap:16px}
.result-card{border-radius:0;border:1px solid var(--line);background:#fff;box-shadow:none}
.result-card.primary-result{border-left:1px solid var(--line);border-top:3px solid var(--ocean);box-shadow:0 18px 40px rgba(7,27,43,.08)}
.result-card [data-slot=card-content]{padding:26px}
.model-logo{background:var(--foam);border-color:var(--line)}
.rank{font-size:11.5px;letter-spacing:.12em;color:var(--sv-blue-dark);margin-bottom:6px}
.result-head h3{font-family:var(--sv-head);font-weight:700;text-transform:uppercase;font-size:2rem;line-height:1.02}
.result-head p:not(.rank){font-size:.86rem;color:var(--muted);margin:6px 0 0}
.metrics{margin:22px 0 6px;gap:0}
.metrics div{padding:2px 0 2px 16px}
.metrics div:first-child{border-left:0;padding-left:0}
.metrics span{font-family:var(--sv-mono);font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.metrics strong{font-family:var(--sv-head);font-weight:700;font-size:2.1rem;line-height:1.15;color:var(--ink)}
.metrics small{font-family:var(--sv-text);font-size:.8rem;font-weight:500;color:var(--sv-body)}
.checks span{font-family:var(--sv-mono);font-weight:600;font-size:10.5px;letter-spacing:.08em;border-radius:0;padding:6px 9px}
.geometry{font-family:var(--sv-mono);font-size:11.5px;color:var(--muted);margin-top:16px;padding-top:14px}

/* Footer note */
footer{max-width:1288px;font-size:.8rem;line-height:1.6;padding-top:24px;padding-bottom:40px}

@media(max-width:900px){
  .workspace{grid-template-columns:1fr}
  .mast{padding-top:44px;padding-bottom:44px}
  .embed .mast{background:var(--sv-navy)}
  .workspace{padding-top:40px;padding-bottom:48px}
}
@media(max-width:560px){
  .mast{padding:40px 24px}
  .workspace{padding:32px 16px 40px}
  .inputs{padding:22px 18px}
  .result-card [data-slot=card-content]{padding:20px 18px}
  .metrics div:last-child{border-left:0;padding-left:0;margin-top:12px}
  .metrics strong{font-size:1.8rem}
  footer{padding-left:16px;padding-right:16px}
}

/* Keep the top band, the tool and the footer note on the site's 1240px content width */
.mast,.workspace,footer{padding-left:max(24px,calc((100% - 1192px)/2));padding-right:max(24px,calc((100% - 1192px)/2))}
.workspace,footer{max-width:none}
.mast{gap:48px}
.brand-block{max-width:720px}
@media(max-width:560px){.mast,.workspace,footer{padding-left:16px;padding-right:16px}.mast{padding-left:24px;padding-right:24px}}

/* Mark: remove the live air readout and the repeated intro line from the top band */
.mast .air-stamp,.mast .intro{display:none!important}

/* Real Solidsvac logo on result cards */
.model-logo.model-logo-real{transform:none!important;background:#fff!important;border:1px solid var(--line)!important;width:150px!important;height:auto!important;padding:10px 12px!important;display:flex!important;align-items:center;justify-content:center}
.model-logo.model-logo-real:after{display:none!important;content:none!important}
.model-logo.model-logo-real img{width:100%;height:auto;display:block}
@media (max-width:680px){.model-logo.model-logo-real{width:118px!important;padding:8px 10px!important}}