
.step h2, .toolsbar h2 { margin-top: 0; }
.step h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.step-of { font-family: var(--mono); font-size: 12px; margin: 0 0 6px; }
.small { font-size: 0.85em; }
.toolsbar { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 16px 24px; align-items: start; }
@media (max-width: 800px) { .toolsbar { grid-template-columns: minmax(0, 1fr); } }
.toolsbar > * { min-width: 0; }
.file-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.file-help { flex-basis: 100%; margin: 2px 0 0; }
.file-actions .file-info { flex-basis: 100%; margin: 0; }
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.92em; }
.field select, .field input, .field textarea {
  font: inherit; font-weight: 400; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
  max-width: 100%; min-width: 0;
}
.field textarea { font-family: var(--mono); font-size: 0.88em; resize: vertical; }
.field small { font-weight: 400; }
.field-inline { flex-direction: row; align-items: center; gap: 10px; margin: 8px 0; }
.field-inline select { min-width: 140px; }
.field-model { margin-top: 12px; max-width: 520px; }
.field input:focus, .field select:focus, .field textarea:focus, .furan-table input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.invalid, .field .invalid, .furan-table .invalid { border-color: var(--high) !important; background: var(--high-bg) !important; }
.check { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 0.92em; cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; }
.check[hidden], .mode-box[hidden], #ieeeBox[hidden], #loadUnitField[hidden] { display: none; }
.ieee-grid { margin-top: 12px; }
.adv { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.adv summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }
.furan-table { width: 100%; max-width: 420px; margin: 8px 0 10px; }
.furan-table th { text-align: left; font-size: 0.85em; color: var(--muted); padding: 4px; font-weight: 600; }
.furan-table td { padding: 4px; }
.furan-table input {
  font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); width: 100%; max-width: 160px; min-width: 0; box-sizing: border-box;
}
.stepper { margin: 24px 0 0; scroll-margin-top: 12px; }
.stepper ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stepper button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  font: inherit; font-size: 0.9em; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer;
}
.stepper button:hover { border-color: var(--btn-border); }
.stepper .num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); font-family: var(--mono); font-size: 13px;
}
.stepper button.current { color: var(--text); border-color: var(--btn-border); box-shadow: inset 0 -3px 0 var(--btn); }
.stepper button.current .num { background: var(--btn); border-color: var(--btn-border); color: var(--btn-text); }
.stepper button.done .num { background: var(--low-bg); border-color: var(--low); color: var(--low); }
.stepper button.has-error .num { background: var(--high-bg); border-color: var(--high); color: var(--high); }
@media (max-width: 760px) {
  .stepper .lbl { display: none; }
  .stepper button { justify-content: center; padding: 8px; }
  .stepper button.current .lbl { display: inline; }
  .stepper ol { grid-template-columns: repeat(5, auto); justify-content: start; }
}
.step { scroll-margin-top: 12px; }
.step h2:focus { outline: none; }
.step-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.step-errors { margin-top: 12px; }
.step-errors li.error, .errors-panel li.error { color: var(--high); }
.skip-hint { max-width: 900px; }
.results-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.results-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.results-tools .field-inline { margin: 0; }
.busy { padding: 24px 0; }
.calc-summary { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin: 8px 0 16px; }
@media (max-width: 900px) { .calc-summary { grid-template-columns: 1fr; } }
.sum-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.sum-card p { margin: 4px 0 0; }
.sum-l { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.sum-v { font-size: 1.5em; font-weight: 700; }
.sum-v.big { font-size: 2.1em; line-height: 1.1; }
.sum-d { font-size: 0.92em; }
.sum-main { border-left: 5px solid var(--brand); }
.sum-other { font-size: 0.92em; margin-top: 4px; }
.sum-case { font-size: 0.85em; color: var(--muted); }
.meter { height: 8px; border-radius: 4px; background: var(--soft-2); overflow: hidden; margin: 6px 0 2px; display: flex; }
.meter span { display: block; height: 100%; background: var(--brand-2); }
.meter span.meter-range { background: color-mix(in srgb, var(--brand-2) 35%, transparent); }
.panel { margin: 0 0 16px; }
.detail-grid .panel { margin: 0; }
.detail-grid { margin-bottom: 16px; }
.panel h4 { font-size: 0.9rem; margin: 12px 0 4px; }
.panel p { margin: 6px 0; }
.panel tr.pref td { font-weight: 700; }
.chart { width: 100%; height: auto; display: block; font-family: var(--font); }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis, .chart .tickmark { stroke: var(--muted-2); stroke-width: 1; }
.chart .tick { font-size: 11px; fill: var(--muted-2); }
.chart .axis-label { font-size: 12px; fill: var(--muted); font-weight: 600; }
.chart .band { fill: var(--brand-2); fill-opacity: 0.22; stroke: none; }
.chart .bound { fill: none; stroke: var(--brand); stroke-width: 1.6; }
.chart .bound.upper { stroke-width: 2.5; stroke-dasharray: 8 4; }
.chart .end { stroke: var(--high); stroke-width: 1.2; stroke-dasharray: 6 4; }
.chart .end-label { font-size: 11px; fill: var(--high); font-weight: 600; }
.chart .today { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .today-label { font-size: 11px; fill: var(--text); }
.chart .eol { fill: var(--high); stroke: var(--surface); stroke-width: 2; }
.chart .hist { fill: none; stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 4 3; }
.chart .hist-pt { fill: var(--text); stroke: var(--surface); stroke-width: 1.5; }
.chart .hot { fill: none; stroke-width: 2.2; }
.hot-day { stroke: #d9480f; background: #d9480f; }
.legend { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.85em; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 22px; height: 10px; border-radius: 2px; }
.lg-upper { height: 0; border-top: 3px dashed var(--brand); border-radius: 0; }
.lg-band { background: color-mix(in srgb, var(--brand-2) 30%, transparent); }
.lg-hist { width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.lg-line { height: 3px; }
.cond-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.cond-table th, .cond-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cond-table td.num { font-family: var(--mono); white-space: nowrap; }
.cond-table tr.applicable td { background: var(--low-bg); font-weight: 600; }
.cond-table .tag { display: inline-block; margin-left: 6px; font-size: 0.78em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--low); }
.inputs-used summary { cursor: pointer; list-style: none; }
.inputs-used summary h3 { display: inline; }
.inputs-used .kv { margin-top: 10px; }
.kv dd { word-break: break-word; }
.print-only { display: none; }
@media print {
  .hero, .toolsbar, .stepper, .step:not(.step-result), .skip-hint, .method { display: none !important; }
  .step-result { display: block !important; border: 0; padding: 0; margin: 0; }
  .print-only { display: flex !important; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 12px; }
  .print-brand .brand-logo { height: 22px; }
  .panel, .sum-card, .chart { break-inside: avoid; }
  .calc-summary { grid-template-columns: 1.3fr 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .meter span, .cond-table tr.applicable td, .lg, .chart .band { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .disclaimer { break-before: page; }
  .topbar { border: 0; }
}
.note-scope { border-left: 3px solid var(--btn); padding-left: 10px; margin: -4px 0 16px; max-width: 980px; }
