/* ── power sizing (sizing.php, DOC-ISO-119 / DOC-ISO-123) ─────────────────────
   Beside site.css and product.css, never inside them (owner 2026-09-08: "code owns
   the visual UX UI website"). The inputs, the table, the verdicts and the product
   card are the site's own (.sz-in, .perf-table, .sz-verdict, .product-card); this
   adds the two steps and the answer. */
.szp-hero.page-hero.compact{padding:52px 0 46px}
.szp-hero h1{font-size:clamp(2.3rem,3.6vw,3.5rem);line-height:1.02}
.szp{padding:36px 0 72px}

/* The two steps (owner 2026-09-11: three answers, then "a secondary card for a
   refined power calculation"). */
.szp-step{margin-top:18px;padding:22px 24px 24px;background:var(--soft);border-top:3px solid var(--blue)}
.szp-step:first-of-type{margin-top:0}
.szp-step>h2{margin:0 0 4px;font-size:1.3rem;line-height:1.2}
.szp-in{max-width:none}
.szp-in select{padding:9px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.95rem;background:var(--white);color:var(--ink);min-width:0}
.szp-in select:focus{outline:2px solid var(--lg-blue,#4588C3);outline-offset:1px}
.szp-in input,.szp-in select{width:100%}
@media(min-width:760px){
  .szp-in3{grid-template-columns:1fr 2fr 1fr}
  .szp-in3 .sz-addr{grid-column:auto}
}
.szp .sz-sun{max-width:none;background:#fff}
.szp-go{margin:16px 0 0}

/* The answer. */
.szp-answer{margin-top:28px;position:relative}
.szp-stale{display:none;margin:0 0 14px;padding:10px 14px;border-radius:6px;background:#fff7ed;color:#9a3412;font-size:.88rem;font-weight:700}
.szp-answer.is-stale .szp-stale{display:block}
.szp-answer.is-stale .szp-block{opacity:.5}
.szp-block{margin-top:26px;padding:24px;background:#fff;border-top:3px solid var(--blue);box-shadow:0 1px 0 var(--line)}
.szp-stale+.szp-block{margin-top:0}
.szp-block>h2{margin:0 0 4px;font-size:1.45rem;line-height:1.2}
.szp-design{border-top-color:var(--orange)}
.szp-h3{margin:22px 0 4px;font-size:1rem}

/* The power configuration — one large card, the preferred system's photograph to the
   left (owner 2026-09-11: "minimize space ... a large size card and have the hero
   image of the preferred product to the left"). */
/* …and the photograph is the recommended product card itself, rounded, sitting inside
   the larger card with the configuration and the load chart (owner 2026-09-11). */
.szp-block.szp-conf{padding:22px 24px}
.szp-conf-top{display:grid;grid-template-columns:1fr;gap:22px}
.szp-conf-card .product-card-body{padding:18px 20px}
.szp-conf-body>h2{margin:0 0 2px;font-size:1.35rem;line-height:1.2}
.szp-conf-chart{margin-top:10px}
@media(min-width:1024px){
  .szp-conf-top{grid-template-columns:minmax(280px,33%) 1fr;align-items:start}
  .szp-conf-top.no-photo{grid-template-columns:1fr}
}
/* The recommended product card, rounded — here and in the list below. */
.szp-rec{border-radius:12px;overflow:hidden}
.szp-rec .product-card-body h2{margin:0}
.szp-config{width:100%;margin-top:10px;border-collapse:collapse;font-size:.88rem}
.szp-config th{width:150px;padding:7px 12px 7px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.szp-config td{padding:7px 0;border-top:1px solid var(--line);color:var(--ink);line-height:1.45}
/* EVERY BOX ON ONE LINE, however long the words above it (owner 2026-09-11: "your
   boxes are not in alignment"). A row's labels stretch to the tallest; the box sits
   at the foot of each. */
.szp-in label>input,.szp-in label>select{margin-top:auto}
/* Step 2's three answers after the day. */
@media(min-width:760px){.szp-in3b{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* THE DAY, ADDED UP (owner 2026-09-11: "Those numbers don't workout you have to break
   it up") — one line under the four load answers. */
.szp-dayline{margin:12px 0 0;padding:10px 14px;border-radius:6px;background:#fff;color:var(--ink);font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}
.szp-day-warn{margin:8px 0 0;padding:8px 14px;border-radius:6px;background:#fff7ed;color:#9a3412;font-size:.85rem;font-weight:700}
.szp-day-warn[hidden]{display:none}

/* The recommended systems — the site's product card, with a rank and a reason. */
.szp-grid{margin-top:18px}
.szp-rec.is-first{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset,0 10px 30px rgba(6,29,59,.05)}
.szp-rank{margin:0 0 6px;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.szp-rec .product-card-body h2{margin:0}
.szp-why{margin:12px 0 16px;color:var(--ink);font-size:.88rem;line-height:1.55}
.szp-rec .product-card-actions{display:flex;flex-wrap:wrap;gap:8px 20px}
.szp-rec .szp-more{margin:0 0 16px}

.szp-checks{list-style:none;margin:12px 0 0;padding:0}
.szp-checks li{display:grid;grid-template-columns:22px 1fr;gap:4px;padding:6px 0;border-top:1px solid var(--line);font-size:.87rem;line-height:1.5;color:var(--muted)}
.szp-checks li:first-child{border-top:0}
.szp-checks b{color:var(--ink)}
.szp-mark{font-weight:800}
.szp-checks .is-pass .szp-mark{color:#166534}
.szp-checks .is-fail .szp-mark{color:#b42318}
.szp-checks .is-unknown .szp-mark{color:var(--muted)}

.szp-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:14px 0 4px;font-size:.88rem;font-weight:700}
.szp-links a:not(.button){color:var(--blue)}
.szp-links a:not(.button):hover{text-decoration:underline}

.szp-more{margin-top:16px;font-size:.88rem}
.szp-more summary{cursor:pointer;font-weight:700;color:var(--blue)}
.szp-more ul{margin:8px 0 0;padding-left:18px;color:var(--muted);line-height:1.55}
.szp-more li{margin:4px 0}
.szp-more li>a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--ink)}
.szp-more b{color:var(--ink)}

.szp-chain{list-style:none;counter-reset:szp;margin:16px 0 0;padding:0}
.szp-chain li{counter-increment:szp;display:grid;grid-template-columns:34px 92px 1fr;gap:4px 10px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font-size:.9rem;line-height:1.5}
.szp-chain li:first-child{border-top:0}
.szp-chain li:before{content:counter(szp);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--ink);font-size:.75rem;font-weight:800}
.szp-chain li.is-short:before{background:#fef2f2;color:#b42318}
.szp-chain b{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.szp-chain span{color:var(--ink)}

.szp-compare td,.szp-compare th{white-space:normal}
.szp-compare td:first-child{min-width:220px;text-align:left}
.szp-compare td:first-child .hint{display:block;margin:2px 0 0}
.szp-compare tr.is-chosen td{background:#eef6ff}

@media(max-width:640px){
  .szp{padding:24px 0 48px}
  .szp-step,.szp-block{padding:18px 14px}
  .szp-config th{width:auto;display:block;padding:10px 0 0}
  .szp-config td{display:block;border-top:0;padding:2px 0 10px}
  .szp-chain li{grid-template-columns:30px 1fr}
  .szp-chain li b,.szp-chain li span{grid-column:2}
}