/* Manual J screening calculator — generated from manual-j-calculator.html (single source).
   Regenerate rather than hand-editing if the master file changes. */
/* Scoped under .mjc so the block can be dropped into a WordPress page without leaking styles.
   Colors/fonts read theme CSS custom properties when present, with standalone fallbacks. */
/* Ported from the Get MEP Plans theme, 2026-08-29, and re-pointed at this site's
   tokens. The two accents land on the heat/cool duality the palette already
   carries: amber for the heating side, teal for the cooling side. Fallbacks are
   kept so the block still renders if a token is ever renamed. */
.mjc {
  --mjc-paper: var(--paper, #fdfcf8);
  --mjc-bg: var(--paper-2, #f5f2ea);
  --mjc-ink: var(--ink, #16222c);
  --mjc-soft: var(--ink-soft, #3d4a55);
  --mjc-mute: var(--ink-mute, #6b7480);
  --mjc-rule: var(--rule, rgba(17,32,44,.18));
  --mjc-rule-strong: var(--rule-strong, rgba(17,32,44,.8));
  --mjc-accent: var(--heat, #b45309);
  --mjc-blue: var(--cool, #0e7490);
  --mjc-font: var(--font-body, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-family: var(--mjc-font);
  font-size: 15px; line-height: 1.55; color: var(--mjc-ink);
  max-width: 980px; margin: 0 auto;
}
.mjc *, .mjc *::before, .mjc *::after { box-sizing: border-box; }
.mjc-card { background: var(--mjc-paper); border: 1px solid var(--mjc-rule-strong); margin: 22px 0; position: relative; }
.mjc-card > h2 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; font-family: var(--mjc-font);
  margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--mjc-rule); background: rgba(17,32,44,.03); }
.mjc-card-body { padding: 14px 16px 18px; }
.mjc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px 16px; }
.mjc-field label { display: block; font: 600 12px/1.3 var(--mjc-font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--mjc-soft); margin-bottom: 4px; }
.mjc-field input, .mjc-field select {
  width: 100%; padding: 8px 9px; font: inherit; color: var(--mjc-ink);
  border: 1px solid var(--mjc-rule-strong); border-radius: 0; background: #fff; }
.mjc-field input:focus, .mjc-field select:focus { outline: 2px solid var(--mjc-blue); outline-offset: -1px; }
.mjc-hint { font-size: 12px; color: var(--mjc-mute); margin-top: 3px; }
.mjc-flag { display: inline-block; font: 600 9px/1 var(--mjc-font); letter-spacing: .08em; color: #fff;
  background: var(--mjc-blue); padding: 3px 6px; margin-left: 6px; vertical-align: 2px; text-transform: uppercase; }
.mjc-field.mjc-edited .mjc-flag { display: none; }
.mjc-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mjc-res { border: 1px solid var(--mjc-rule-strong); padding: 12px; background: #fff; }
.mjc-res b { display: block; font: 700 24px/1.2 var(--mjc-font); }
.mjc-res span { font: 600 11px/1.3 var(--mjc-font); letter-spacing: .08em; text-transform: uppercase; color: var(--mjc-mute); }
.mjc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; font-variant-numeric: tabular-nums; }
.mjc-table th, .mjc-table td { border: 1px solid var(--mjc-rule); padding: 6px 8px; text-align: right; vertical-align: top; white-space: nowrap; }
.mjc-table th:first-child, .mjc-table td:first-child { text-align: left; white-space: normal; width: 100%; }
.mjc-table th { font-family: var(--mjc-font); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: rgba(17,32,44,.04); }
.mjc-note { font-size: 12.5px; color: var(--mjc-mute); }
.mjc-warn { border-left: 4px solid var(--mjc-accent); background: rgba(138,26,26,.06); padding: 10px 14px; font-size: 13.5px; margin: 12px 0; }
.mjc-gate label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 10px 0; cursor: pointer; }
.mjc-gate input { margin-top: 3px; flex: none; }
.mjc-btn { font: 600 13px/1 var(--mjc-font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  background: var(--mjc-blue); color: #fff; border: none; padding: 13px 22px; }
.mjc-btn:disabled { background: var(--mjc-mute); cursor: not-allowed; opacity: .55; }
.mjc-btn.mjc-ghost { background: transparent; color: var(--mjc-blue); border: 1px solid var(--mjc-blue); }
.mjc-deflist { font-size: 13px; color: var(--mjc-soft); }
.mjc-deflist code { font-family: var(--mjc-font); font-size: 12px; background: rgba(31,79,122,.08); padding: 1px 5px; }
#mjc-report { display: none; }
#mjc-report.mjc-open { display: block; }
.mjc-report-sheet { background: #fff; border: 1px solid var(--mjc-rule-strong); padding: 26px 30px; }
.mjc-report-sheet h1 { font-size: 21px; margin: 0 0 2px; }
.mjc-report-sheet h3 { font: 700 12px/1 var(--mjc-font); letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--mjc-rule-strong); padding-bottom: 5px; margin: 22px 0 8px; }
.mjc-kv { font-size: 13px; width: 100%; border-collapse: collapse; }
.mjc-kv td { padding: 3px 14px 3px 0; vertical-align: top; }
.mjc-kv td:first-child { color: var(--mjc-mute); white-space: nowrap; }
.mjc-disc { font-size: 11.5px; color: var(--mjc-soft); border: 1px solid var(--mjc-rule); padding: 10px 12px; margin-top: 18px; }
@media print {
  body * { visibility: hidden !important; }
  #mjc-report, #mjc-report * { visibility: visible !important; }
  #mjc-report { display: block !important; position: absolute; left: 0; top: 0; width: 100%; }
  .mjc-report-sheet { border: none; padding: 0; }
  .mjc-noprint { display: none !important; }
}