/* IHC conversion calculator — loaded only on its own page.
 *
 * Moved here from the standalone ihc-beregner.shelly.guide, which was one
 * 536-line HTML file. Two things changed on the way in and nothing else did:
 *
 * 1. EVERY SELECTOR IS PREFIXED `ihc-`. The original was the only thing on its
 *    page, so it could afford `.card`, `.hero`, `.wrap`, `.btn`, `.note`,
 *    `.guide`, `.chip`, `.empty` and a bare `* { margin: 0 }`. Dropped in
 *    beside site.css, every one of those is a collision — `.guide` and `.note`
 *    would have reached into forty-six guides. So has the `*` reset and the
 *    `body` rule: the site sets both.
 *
 * 2. EVERY COLOUR IS A SITE TOKEN. That sounds like a re-skin and is not one.
 *    The tool was built from the same brand sheet as this site, and the values
 *    turned out to be identical — #003C82, #122A4F, #4594d1, #AAE1FA, #5b6b7d,
 *    #dbe6ef, #eef6fc, #3a80b6, #f2f7fb, the 14px radius and the card shadow
 *    all match a --sg- token exactly. Swapping in the tokens therefore renders
 *    the same pixels while putting the tool on the site's palette, which is
 *    what finder.css and panel-heat.css both do.
 *
 *    The one exception is the lime used on quantities, which has no token.
 *    It is kept as a tool-local variable rather than invented into site.css:
 *    one tool uses it, and it is the colour a reader looks for on the printed
 *    parts list.
 *
 * THE PRINTED REPORT IS A DELIVERABLE, not a print stylesheet as an
 * afterthought. It goes to a customer with a quote, so its A4 layout is
 * reproduced exactly as it was — see the print block at the foot.
 */

/* Three weights the site does not declare, declared here.
 *
 * The standalone page asked Google Fonts for 300, 400, 500, 600, 700 and 800.
 * site.css declares 400, 700 and 800 — the three the site itself uses — so
 * dropped in as-is, the tool's 300, 500 and 600 would each be rendered with
 * the nearest declared weight and the form would not look like the form.
 * The files are already in /assets/fonts/ (the whole @fontsource/manrope
 * package is copied), so this is three declarations and no new asset. They
 * live in the tool's own stylesheet rather than site.css because the tool is
 * the only thing on the site that asks for these weights, and a @font-face
 * nobody uses downloads nothing but still has to be read on every page.
 *
 * Latin only, with the same unicode-range as site.css: the calculator is
 * Danish, and Danish is Latin. */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 300;
  src: url('/assets/fonts/manrope-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500;
  src: url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600;
  src: url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.ihc {
  --ihc-lime: #C8FF78;
}

/* ===== The form ========================================================= */

.ihc-sub {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--sg-muted); margin: 30px 0 15px; padding-bottom: 7px;
  border-bottom: 1px solid var(--sg-line);
}
.ihc-sub:first-of-type { margin-top: 0; }

.ihc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
@media (max-width: 640px) { .ihc-grid { grid-template-columns: 1fr; } }

.ihc-q label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
/* min-height keeps the two columns' inputs on one line when one hint wraps and
   the other does not. It is dropped on a phone, where they stack anyway and the
   reserved space would just be a hole. */
.ihc-hint {
  font-size: 12.5px; color: var(--sg-muted); line-height: 1.4;
  margin-bottom: 8px; min-height: 34px;
}
.ihc-q input[type="number"] {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid var(--sg-line); border-radius: 9px;
  font: inherit; font-size: 16px; /* 16px or iOS zooms the page on focus */
  font-weight: 600; color: var(--sg-midnight); background: var(--sg-paper);
}
.ihc-q input[type="number"]:focus {
  outline: 2px solid var(--sg-blue); border-color: var(--sg-blue);
}

.ihc-toggle { display: flex; gap: 8px; }
.ihc-toggle button {
  flex: 1; padding: 10px; border: 1.5px solid var(--sg-line);
  background: var(--sg-paper); border-radius: 9px;
  font: inherit; font-weight: 700; cursor: pointer; color: var(--sg-muted);
}
.ihc-toggle button.is-on {
  background: var(--sg-navy); border-color: var(--sg-navy); color: #fff;
}
.ihc-toggle button:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 2px; }

.ihc-rec {
  display: inline-block; background: var(--ihc-lime); color: var(--sg-midnight);
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 20px;
  margin-left: 6px; vertical-align: middle;
}

.ihc-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.ihc-btn {
  border: none; border-radius: var(--sg-r-sm); padding: 14px 26px;
  font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
}
.ihc-btn--primary { background: var(--sg-blue); color: #fff; }
.ihc-btn--primary:hover { background: var(--sg-blue-600); }
.ihc-btn--ghost {
  background: var(--sg-paper); color: var(--sg-navy);
  border: 1.5px solid var(--sg-navy); display: none;
}
.ihc-btn--ghost:hover { background: var(--sg-sky); }

/* ===== The report ======================================================= */

/* The report re-establishes the cascade the standalone calculator had, and it
 * is not a preference. There, the report sat directly under <body>, which set
 * a family and nothing else: 16px, `line-height: normal`. Here it sits under
 * site.css, which sets 14.67px and 1.55 — so every line the original left
 * unspecified came out smaller and looser, and the printed sheet grew 54 px
 * (1280 px wide, a full parts list) without a single rule of the report's own
 * having changed. That sheet goes to a customer with a quote, so the two
 * inherited values are pinned back to what they were. Everything below styles
 * what the original styled; this line covers what it did not. */
.ihc-report { display: none; margin-top: 26px; font-size: 16px; line-height: normal; }

/* The original's `* { box-sizing: border-box; margin: 0; padding: 0 }`, kept
 * where it is still true and nowhere else.
 *
 * Site-wide it is a collision, so it was dropped on the way in — and the
 * report grew, because its headings, paragraphs and list items had never
 * needed a margin rule of their own. Everything inside `.ihc-report` is the
 * tool's own markup, written by ihc-calculator.js and nothing else, so the
 * reset is exactly as safe here as it was on the standalone page. It is not
 * applied to `.ihc`, which is the form: that section's <h2> is the site's
 * heading, in a site card, and zeroing its margins would be this stylesheet
 * reaching outside the tool. */
.ihc-report :is(h1, h2, h3, h4, p, ul, ol, li, figure) { margin: 0; padding: 0; }

/* site.css sets a line-height on headings, which beats the one inherited from
 * `.ihc-report` above on specificity. Two pixels on the report's title — and
 * two pixels is the whole point: nothing inside this block is meant to differ
 * from the sheet the standalone calculator printed. */
.ihc-report :is(h1, h2, h3, h4) { line-height: normal; }
.ihc-rep {
  background: var(--sg-paper); border-radius: var(--sg-r);
  box-shadow: var(--sg-shadow); overflow: hidden;
}

.ihc-rep__head {
  background: var(--sg-navy); color: #fff; padding: 26px 32px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap;
}
.ihc-rep__head img { height: 30px; }
.ihc-rep__brand { display: flex; gap: 18px; align-items: center; min-width: 0; }
.ihc-rep__title h2 { font-size: 22px; font-weight: 800; margin: 0; color: #fff; }
.ihc-rep__title p { font-weight: 300; color: var(--sg-sky); font-size: 13.5px; margin-top: 3px; }
.ihc-rep__date { font-size: 12.5px; color: var(--sg-sky); font-weight: 500; text-align: right; }

.ihc-rep__body { padding: 28px 32px; }

.ihc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ihc-chip {
  background: var(--sg-tint); border: 1px solid var(--sg-line); color: var(--sg-midnight);
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 20px;
}
.ihc-chip b { color: var(--sg-navy); }

.ihc-seclabel {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--sg-blue); margin: 22px 0 12px;
  border-bottom: 2px solid var(--sg-sky); padding-bottom: 6px;
}

.ihc-prod {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--sg-line);
}
.ihc-prod:last-child { border-bottom: none; }
.ihc-prod img {
  width: 92px; height: 92px; object-fit: contain;
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm); background: var(--sg-paper);
}
.ihc-prod__noimg {
  width: 92px; height: 92px; border: 1px dashed var(--sg-line); border-radius: var(--sg-r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--sg-muted); font-size: 11px; text-align: center; padding: 6px;
}
.ihc-prod__noimg--brand {
  border-style: solid;
  background: #f6fafd url("/assets/img/ihc-calculator/logo-blue.png") center/62% no-repeat;
}
.ihc-prod h3 { font-size: 16.5px; font-weight: 800; margin: 0; }
.ihc-prod__ean { font-size: 12.5px; color: var(--sg-muted); font-weight: 600; margin-top: 2px; }
.ihc-prod__note { font-size: 12.5px; color: var(--sg-muted); line-height: 1.45; margin-top: 6px; max-width: 520px; }
.ihc-prod__extra {
  display: block; margin-top: 6px; padding-left: 9px;
  border-left: 3px solid var(--sg-blue); color: var(--sg-midnight);
}
.ihc-prod__note a { color: var(--sg-navy); font-weight: 700; overflow-wrap: anywhere; }

.ihc-qty {
  background: var(--ihc-lime); border-radius: 12px; padding: 10px 16px;
  text-align: center; min-width: 78px;
}
.ihc-qty b { display: block; font-size: 24px; font-weight: 800; line-height: 1; }
.ihc-qty span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }

.ihc-totals { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.ihc-tot {
  flex: 1; min-width: 170px; background: var(--sg-midnight); color: #fff;
  border-radius: 12px; padding: 16px 18px;
}
.ihc-tot b { display: block; font-size: 26px; font-weight: 800; }
.ihc-tot span { font-size: 12px; font-weight: 500; color: var(--sg-sky); }

.ihc-notes {
  margin-top: 22px; background: var(--sg-tint); border-left: 4px solid var(--sg-blue);
  border-radius: 0 var(--sg-r-sm) var(--sg-r-sm) 0; padding: 14px 18px;
}
.ihc-notes h4 { font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.ihc-notes ul { margin: 0; padding: 0; }
.ihc-notes li { font-size: 12.5px; line-height: 1.55; color: var(--sg-midnight); margin-left: 16px; }

.ihc-guide {
  margin-top: 22px; display: flex; gap: 14px; align-items: center;
  background: var(--sg-sky); border-radius: 12px; padding: 16px 20px;
}
.ihc-guide__icon { font-size: 24px; }
.ihc-guide p { font-size: 13px; line-height: 1.5; margin: 0; }
.ihc-guide a { color: var(--sg-navy); font-weight: 800; overflow-wrap: anywhere; }

.ihc-rep__foot {
  background: #f6fafd; border-top: 1px solid var(--sg-line); padding: 18px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ihc-rep__contact { font-size: 13px; line-height: 1.6; }
.ihc-rep__contact b { color: var(--sg-navy); }
.ihc-rep__foot img { height: 22px; opacity: .95; }
.ihc-disclaimer {
  font-size: 11px; color: var(--sg-muted); line-height: 1.5;
  padding: 12px 32px 20px; background: #f6fafd;
}

.ihc-empty { padding: 30px; text-align: center; color: var(--sg-muted); font-weight: 600; }

/* ===== Phone ============================================================ */
@media (max-width: 640px) {
  .ihc-hint { min-height: 0; }   /* no reserved hole once the fields stack */
  .ihc-actions { margin-top: 22px; }
  .ihc-actions .ihc-btn { width: 100%; }

  .ihc-rep__head { padding: 20px 16px; gap: 14px; }
  .ihc-rep__brand { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ihc-rep__title h2 { font-size: 19px; }
  .ihc-rep__date { text-align: left; }
  .ihc-rep__body { padding: 20px 16px; }

  /* Picture and text side by side, the quantity on its own line underneath. */
  .ihc-prod { grid-template-columns: 60px minmax(0, 1fr); gap: 10px 14px; padding: 16px 0; }
  .ihc-prod img, .ihc-prod__noimg { width: 60px; height: 60px; grid-column: 1; grid-row: 1; }
  .ihc-prod__noimg { font-size: 9.5px; padding: 4px; line-height: 1.25; }
  .ihc-prod__info { grid-column: 2; grid-row: 1; }
  .ihc-prod h3 { font-size: 15.5px; }
  .ihc-prod .ihc-qty { grid-column: 2; grid-row: 2; justify-self: start; min-width: 0; padding: 6px 14px; }
  .ihc-prod .ihc-qty b { display: inline; font-size: 19px; }
  .ihc-prod .ihc-qty span { margin-left: 5px; }

  .ihc-tot { flex: 1 1 100%; }
  .ihc-guide { padding: 14px 16px; }
  .ihc-rep__foot { padding: 16px; flex-direction: column; align-items: flex-start; }
  .ihc-disclaimer { padding: 12px 16px 18px; }
}

/* ===== Print: the A4 report, and only it ================================
 *
 * This is the deliverable. An electrician prints it, or saves it as a PDF, and
 * hands it to a customer with a quote — so what comes out has to be the report
 * on its own, exactly as it was on the old standalone page.
 *
 * site.css already drops the header, drawer, search, footer, pager and
 * breadcrumbs. What it cannot know about is this page's own furniture: the
 * hero band, the prose either side of the tool, the form the reader has
 * finished with, and the related cards. Those go here.
 *
 * `.sg-card` is hidden wholesale and the report is lifted out of it — which is
 * why the report sits in its own element rather than inside a card. A rule
 * that had to name each card individually would break the first time somebody
 * added a paragraph to this page.
 */
@media print {
  @page { size: A4; margin: 12mm; }

  .sg-band, .sg-card, .sg-related, .sg-related__grid, .sg-updated,
  .sg-toc, .ihc-actions { display: none !important; }

  .sg-shell, .sg-wrap { margin: 0 !important; padding: 0 !important; max-width: none !important; }

  .ihc-report { display: block !important; margin: 0; }
  .ihc-rep { box-shadow: none; border-radius: 0; }

  /* Backgrounds print only when the reader ticks the box, and on this page the
     navy header, the lime quantities and the tinted note blocks ARE the
     document. Forced on, the same way the original did it. */
  .ihc-rep__head, .ihc-qty, .ihc-tot, .ihc-chip, .ihc-notes, .ihc-guide,
  .ihc-prod__noimg--brand {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .ihc-prod { break-inside: avoid; }
  .ihc-rep a { text-decoration: none; }

  /* On paper the link is dead — print the address so it can be typed in. */
  .ihc-prod__note a::after { content: " (" attr(href) ")"; font-weight: 400; word-break: break-all; }
}