/* PowerConvert — Power Desk power calculators.
   Source → destination conversion flow with a grey conditions rail, custom
   pickers, and a keyword-led SEO content band. Visual system shared with the
   gencalc / PowerMatch (JCB type, #FAA747 orange, square edges, white-on-grey).
   Loaded on the overview (page-power-conversion-calculator.php) and each
   dedicated tool page (page-pconv-tool.php). */

.pconv-page{ --ink:#1a1a1a; --ink2:#2a2d33; --ink3:#555; --ink4:#888; --line:#e5e7eb; --panel:#e8e8e8; --orange:#FAA747; --orange-d:#E08F2C;
  --bold:'JCBEuro Bold Regular',Arial,sans-serif; --body:'JCBEuro Roman Regular',Arial,sans-serif; --disp:'JCBEuro BoldCondensed Regular','Arial Narrow',sans-serif;
  background:#f7f8fa; color:var(--ink); }
.pconv-container{ max-width:980px; margin:0 auto; padding:0 20px; box-sizing:border-box; }

/* ── two-tone centered hero ── */
.pconv-hero{ background:#fff; border-bottom:1px solid #e7e9ee; text-align:center; padding:50px 0; }
.pconv-lockup{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0 16px; margin:0;
  font-family:var(--disp); font-weight:400; font-size:clamp(22px,2.6vw,34px); line-height:1.04; letter-spacing:-.4px; }
.pconv-lockup__name{ color:#111; text-transform:uppercase; letter-spacing:-.5px; }
.pconv-lockup__icon{ display:inline-block; width:.9em; height:.9em; margin-right:.32em; vertical-align:middle; position:relative; top:-.05em; }
.pconv-lockup__icon svg{ display:block; width:100%; height:100% }
.pconv-lockup__match{ color:var(--orange) }
.pconv-lockup__tm{ font-size:.46em; vertical-align:super; margin-left:2px; color:#111 }
.pconv-lockup__dash{ color:var(--orange) }
.pconv-lockup__desc{ color:#888e96; text-transform:uppercase; letter-spacing:.4px; font-size:.9em; }

/* ── breadcrumb (slim left-aligned bar below the hero) ── */
.pconv-bc{ background:#fff; border-bottom:1px solid #eef0f3 }
.pconv-bc .pconv-container{ padding-top:12px; padding-bottom:12px; font-size:12.5px; color:#9aa1ab }
.pconv-bc a{ color:#9aa1ab; text-decoration:none } .pconv-bc a:hover{ color:var(--orange-d) }
.pconv-bc .sep{ color:#cfd4da; margin:0 7px } .pconv-bc .cur{ color:var(--ink3) }

/* ── app body ── */
.pconv-wrap{ max-width:980px; margin:0 auto; padding:32px 20px 80px; display:flex; flex-direction:column; gap:18px; }

/* ── calculator card: white flow area + grey conditions rail ── */
.pconv-card{ background:#fff; border:1.5px solid #ddd; display:grid; grid-template-columns:minmax(0,1fr) 232px; }
.pconv-card--solo{ grid-template-columns:1fr }
@media(max-width:720px){ .pconv-card{ grid-template-columns:1fr } }
.pconv-card__main{ padding:24px 26px; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.pconv-card__title{ font-family:var(--bold); font-weight:700; font-size:17px; letter-spacing:-.1px; margin:0; align-self:flex-start; text-align:left }
.pconv-card__title a{ color:var(--ink); text-decoration:none } .pconv-card__title a:hover{ color:var(--orange-d) }
.pconv-card__sub{ font-size:12.5px; color:var(--ink3); margin:4px 0 0; align-self:flex-start; text-align:left }

/* the conversion flow: SOURCE → DESTINATION (centered in the white panel) */
.pconv-flow{ display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; margin-top:22px; justify-content:center }
.pconv-leg{ display:flex; flex-direction:column; gap:8px; min-width:0; align-items:flex-start }
.pconv-leg__lab{ font-family:var(--bold); font-weight:700; font-size:11px; letter-spacing:1.3px; text-transform:uppercase; color:var(--ink3); white-space:nowrap }
.pconv-combo{ display:flex; position:relative }
.pconv-bigbox{ background:#fff; border:1px solid var(--line); border-radius:0; height:58px; width:150px; padding:0 14px;
  font-family:var(--bold); font-weight:700; font-size:24px; letter-spacing:-.3px; color:var(--ink);
  font-variant-numeric:tabular-nums; outline:none; transition:border-color .12s; }
.pconv-bigbox:hover{ border-color:var(--ink4) } .pconv-bigbox:focus{ border-color:var(--orange) }
.pconv-bigbox[type=number]{ -moz-appearance:textfield } .pconv-bigbox::-webkit-outer-spin-button,.pconv-bigbox::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0 }
.pconv-combo .pconv-bigbox{ border-right:0; width:120px }
.pconv-arrow{ font-size:24px; color:var(--orange); line-height:1; padding-bottom:15px; flex:0 0 auto }
.pconv-dst{ display:flex; align-items:center; gap:8px; height:58px }
.pconv-dst__num{ font-family:var(--bold); font-weight:700; font-size:38px; letter-spacing:-.5px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums }
.pconv-dst__unit{ font-family:var(--bold); font-size:14px; color:var(--ink4); text-transform:uppercase; letter-spacing:.5px }
.pconv-eq{ font-size:12px; color:var(--ink4); margin:16px 0 0; line-height:1.5; font-variant-numeric:tabular-nums }
.pconv-eq b{ color:var(--ink3); font-family:var(--bold); font-weight:400 }
.pconv-eq.is-bad{ color:#c0392b }

/* ── conditions rail (grey) ── */
.pconv-conds{ background:var(--panel); padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px }
@media(max-width:720px){ .pconv-conds{ flex-direction:row; flex-wrap:wrap; align-items:flex-end } }
.pconv-conds__cap{ font-family:var(--bold); font-weight:700; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink4) }
@media(max-width:720px){ .pconv-conds__cap{ flex:1 1 100% } }
.pconv-f{ display:flex; flex-direction:column; gap:7px; min-width:0; position:relative }
.pconv-f__lab{ font-family:var(--bold); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:1.3px; color:var(--ink3); line-height:1; white-space:nowrap }
.pconv-box{ background:#fff; border:1px solid var(--line); border-radius:0; height:42px; padding:0 11px;
  font-family:var(--body); font-size:16px; color:var(--ink); width:100%; outline:none; transition:border-color .12s }
.pconv-box:hover{ border-color:var(--ink4) } .pconv-box:focus{ border-color:var(--orange) }
.pconv-box[type=number]{ -moz-appearance:textfield } .pconv-box::-webkit-outer-spin-button,.pconv-box::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0 }
.pconv-f.is-dim{ opacity:.4; pointer-events:none }
.pconv-f[hidden]{ display:none }
@media(max-width:720px){ .pconv-conds .pconv-f{ flex:1 1 90px } }

/* ── custom picker (mirrors .gencalc-picker-*) ── */
.pconv-pick{ position:relative; min-width:0 }
.pconv-pick__trig{ display:flex; align-items:center; gap:8px; width:100%; height:42px; padding:0 12px;
  background:#fff; border:1.5px solid #d1d5db; border-radius:0;
  font-family:var(--body); font-size:14.5px; color:var(--ink); text-align:left; cursor:pointer; line-height:1.3;
  transition:border-color .12s, box-shadow .12s; }
.pconv-pick--big .pconv-pick__trig{ height:58px; border-color:var(--line); padding:0 12px 0 10px; font-family:var(--bold); font-size:14px; color:var(--ink3); }
.pconv-pick__trig:hover{ border-color:#999 }
.pconv-pick[data-open="true"] .pconv-pick__trig, .pconv-pick__trig:focus-visible{ border-color:var(--orange); outline:none; box-shadow:0 0 0 3px rgba(250,167,71,.15); }
.pconv-pick__lab{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500 }
.pconv-pick__caret{ color:#999; font-size:10px; margin-left:auto; flex-shrink:0; transition:transform .15s }
.pconv-pick[data-open="true"] .pconv-pick__caret{ transform:rotate(180deg) }
.pconv-pick__panel{ position:absolute; top:calc(100% + 4px); left:0; z-index:1000; min-width:100%; width:max-content; max-width:300px;
  background:#fff; border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.10); padding:6px 0; max-height:340px; overflow-y:auto; }
.pconv-pick__panel[hidden]{ display:none }
.pconv-pick__opt{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 14px; background:none; border:none;
  font-family:var(--body); font-size:13.5px; color:var(--ink); text-align:left; cursor:pointer; line-height:1.25; transition:background-color .12s; }
.pconv-pick__opt:hover{ background:#fafbfc }
.pconv-pick__opt[aria-selected="true"]{ background:#fffaf2 }
.pconv-pick__opt[aria-selected="true"] .pconv-pick__opt-l{ font-weight:700; font-family:var(--bold) }
.pconv-pick__check{ color:var(--orange); font-size:11px; opacity:0; flex-shrink:0; margin-left:auto }
.pconv-pick__opt[aria-selected="true"] .pconv-pick__check{ opacity:1 }
.pconv-pick__opt-stack{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0 }
.pconv-pick__opt-l{ color:var(--ink) }
.pconv-pick__opt-h{ font-size:11.5px; line-height:1.35; color:#6b7280 }
.pconv-pick__sep{ border-top:1px solid #f0f1f3; margin:4px 0 }

/* ── quick-reference rows (HP card rail) ── */
.pconv-ref{ display:flex; flex-direction:column; margin:-2px 0 }
.pconv-ref__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  background:none; border:0; border-bottom:1px dashed #d9dcdf; border-radius:0; padding:7px 2px; cursor:pointer; text-align:left;
  font-family:var(--body); font-size:13px; color:var(--ink3); font-variant-numeric:tabular-nums; transition:color .12s; }
.pconv-ref__row:last-child{ border-bottom:0 }
.pconv-ref__row b{ font-family:var(--bold); font-weight:400; color:var(--ink); font-size:13.5px }
.pconv-ref__row:hover{ color:var(--ink) } .pconv-ref__row:hover b{ color:var(--orange-d) }
.pconv-ref__row.is-on b{ color:var(--orange-d) }
@media(max-width:720px){ .pconv-ref{ flex:1 1 100% } }

/* ── SEO content band ── */
.pconv-seo{ background:#fff; border-top:1px solid #e7e9ee }
.pconv-seo__inner{ max-width:820px; margin:0 auto; padding:56px 20px 76px }
.pconv-seo h2{ font-family:var(--disp); font-weight:400; text-transform:uppercase; letter-spacing:-.2px; font-size:27px; line-height:1.1; margin:0 0 10px; color:var(--ink) }
.pconv-seo h3{ font-family:var(--bold); font-weight:700; font-size:16px; margin:30px 0 6px; color:var(--ink) }
.pconv-seo p{ font-size:15px; line-height:1.66; color:var(--ink3); margin:0 0 14px }
.pconv-seo p b{ color:var(--ink); font-family:var(--bold); font-weight:400 }
.pconv-seo a{ color:var(--orange-d); text-decoration:none; font-family:var(--bold); font-weight:400 }
.pconv-seo a:hover{ text-decoration:underline }
.pconv-seo__lead{ font-size:17px; line-height:1.6; color:var(--ink2) }
.pconv-seo__eyebrow{ font-family:var(--bold); font-weight:700; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--orange-d); margin:0 0 10px }
table.pconv-fx{ width:100%; border-collapse:collapse; margin:10px 0 6px; font-size:13.5px }
table.pconv-fx th, table.pconv-fx td{ border:1px solid var(--line); padding:9px 12px; text-align:left }
table.pconv-fx th{ font-family:var(--bold); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink3); background:#f7f8fa }
table.pconv-fx td{ font-variant-numeric:tabular-nums; color:var(--ink) }
table.pconv-fx td:first-child{ font-family:var(--bold); font-weight:400; color:var(--ink3) }
.pconv-seo__note{ margin-top:28px; padding-top:16px; border-top:1px solid #eef0f3; font-size:13px; color:var(--ink4) }

/* FAQ accordion — mirrors .gencalc-seo-faq-item, square edges to match */
.pconv-faq{ margin:10px 0 0 }
.pconv-faq-item{ border:1px solid #e5e7eb; border-radius:0; margin-bottom:10px; background:#fff }
.pconv-faq-item > summary{ cursor:pointer; padding:14px 18px; padding-right:36px; font-family:var(--bold); font-weight:700; font-size:14.5px; color:var(--ink); list-style:none; position:relative }
.pconv-faq-item > summary::-webkit-details-marker{ display:none }
.pconv-faq-item > summary::after{ content:'+'; position:absolute; right:16px; top:13px; font-size:18px; line-height:1; color:var(--orange); transition:transform .2s }
.pconv-faq-item[open] > summary::after{ content:'−' }
.pconv-faq-item > p{ padding:0 18px 16px; margin:0; font-size:14px; line-height:1.6; color:#4a4a4a }

/* dedicated-page head (H1 + intro above the calculator) */
.pconv-toolhead{ max-width:820px }
.pconv-toolhead__h1{ font-family:var(--disp); font-weight:400; text-transform:uppercase; letter-spacing:-.3px; font-size:30px; line-height:1.06; margin:0 0 8px; color:var(--ink) }
.pconv-toolhead__intro{ font-size:15.5px; line-height:1.6; color:var(--ink3); margin:0 }
.pconv-related a{ display:inline-block; margin-right:16px }