/* Step-by-Step Solvers — engine UI (mount): input "section", diagram+summary
   hero, and step-by-step cards. Reuses site tokens with safe fallbacks. */

/* ---- input "section" (blue-bordered region, like the calculator pages) ---- */
.solver-region{
  border:3px solid var(--hot-blue,#2563eb);
  background:var(--hot-blue-soft,#eff4ff);
  border-radius:14px; padding:18px 20px; margin:0 0 18px;
}
.solver-region-label{
  color:var(--hot-blue,#2563eb); font-weight:800; font-size:14px;
  letter-spacing:.5px; text-transform:uppercase; margin-bottom:14px;
}
.solver-form{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
/* author display rules below beat the [hidden] attribute's UA style, so restore it explicitly */
.solver-field[hidden],.solver-hero[hidden],.solver-figure[hidden],.solver-summary[hidden],.solver-readout[hidden]{ display:none !important; }
.solver-field{ display:flex; flex-direction:column; gap:6px; }
.solver-field-label{ font-size:13px; font-weight:700; color:var(--muted,#5b5f7e); }
.solver-input{
  font:inherit; font-size:19px; padding:11px 14px; border:1px solid var(--border,#c9cdf0);
  border-radius:12px; background:var(--surface,#fff); color:var(--ink,#14152e); width:150px; max-width:100%;
}
.solver-field--wide .solver-input{ width:min(420px,100%); }
select.solver-input{ font-weight:700; }
.solver-hint{ margin:14px 0 0; font-size:14px; color:var(--muted,#5b5f7e); }
.solver-hint b{ color:var(--hot-blue,#2563eb); }

/* ---- "Your ___" readout ---- */
.solver-readout{
  border:1px dashed var(--border,#dfe3f5); border-radius:12px; padding:13px 16px;
  background:var(--surface-2,#fafbff); margin:0 0 18px;
}
.solver-readout-k{ font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted,#5b5f7e); }
.solver-readout-v{ font:700 21px ui-monospace,SFMono-Regular,Menlo,monospace; margin-top:4px; }

/* ---- hero: figure (diagram) + summary side by side ---- */
.solver-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:18px; margin:0 0 18px; }
@media (max-width:720px){ .solver-hero{ grid-template-columns:1fr; } }
.solver-figure,.solver-summary{
  background:var(--surface,#fff); border:1px solid var(--border,#dfe3f5);
  border-radius:var(--radius-lg,16px); box-shadow:var(--shadow,0 1px 3px rgba(20,21,46,.08)); padding:20px;
}
.solver-figure svg{ width:100%; height:auto; display:block; }
.solver-summary-title{
  font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted,#5b5f7e);
  font-weight:800; margin:0 0 14px;
}
.solver-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.solver-stat{ background:var(--surface-2,#f6f7fe); border:1px solid var(--border,#dfe3f5); border-radius:12px; padding:11px 14px; }
.solver-stat-k{ font-size:12px; color:var(--muted,#5b5f7e); font-weight:700; }
.solver-stat-v{ font:800 21px ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink,#14152e); }
.solver-stat--area{ grid-column:1 / -1; background:#eafaf1; border-color:#bfe6cf; }
.solver-stat--area .solver-stat-v{ color:#0f9d58; }

/* diagram vector styling (used by the SVG the solver emits) */
.solver-tri{ fill:rgba(79,70,229,.09); stroke:var(--accent,#4f46e5); stroke-width:2.5; stroke-linejoin:round; }
.solver-tri-vtx{ fill:var(--hot-blue,#2563eb); }
.solver-tri-vlabel{ font:800 18px system-ui,sans-serif; fill:var(--ink,#14152e); }
.solver-tri-side{ font:700 15px ui-monospace,SFMono-Regular,Menlo,monospace; fill:var(--accent,#4f46e5); }
.solver-tri-ang{ font:600 13px system-ui,sans-serif; fill:var(--muted,#5b5f7e); }
.solver-tri-rt{ fill:none; stroke:var(--muted,#8a8fb0); stroke-width:1.5; }

/* ---- step-by-step cards ---- */
.solver-steps-label{ font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted,#5b5f7e); font-weight:800; margin:0 0 6px; }
.solver-step{ border:1px solid var(--border,#dfe3f5); border-radius:12px; padding:14px 16px; margin:10px 0; background:var(--surface,#fff); }
.solver-step h3{ margin:0 0 6px; font-size:16px; }
.solver-result{ font:800 17px ui-monospace,SFMono-Regular,Menlo,monospace; }
.solver-step--skipped{ opacity:.6; }
.solver-step--error{ border-color:#991b1b; }
.solver-note{ margin:2px 0 0; color:var(--muted,#5b5f7e); }
.solver-work{ margin:8px 0 0; padding-left:20px; font-size:14px; color:var(--muted,#5b5f7e); }
.solver-work li{ margin:2px 0; }
.solver-graph-wrap{ margin-top:10px; }
.solver-graph-wrap svg{ max-width:340px; width:100%; height:auto; }