/* Home page: the calculator as the first screen.
   Builds on calc.css (the concept's tokens and components) and easy.css
   (questions, report form, spinner). */

/* The attribute must win over component display rules (.calc .controls is a
   grid), or hiding a mode would leave it on screen. */
.home [hidden] { display: none !important; }
.home[data-mode="simple"] .eng-only { display: none !important; }
.home[data-mode="engineer"] .simple-only { display: none !important; }

/* First screen: a title, one line of context, the mode switch — then the tool.
   The old poster hero put the calculator on the fourth screen. */
.home-calc { padding: 88px 5vw 4vh; }
/* Must out-rank calc.css's poster rule for h1.display (8.5vw, 14ch), which
   otherwise wins on specificity and eats half the screen. */
.home-calc h1.display.home-title { font-size: clamp(28px, 3.6vw, 50px); max-width: none; line-height: 1; }

/* Big numbers stay on one line: "1 281" broke at its thousands space. */
.home .big-out .cell .v { white-space: nowrap; font-size: clamp(1.9rem, 2.6vw, 2.5rem); }
.home-lede { margin-top: 12px; max-width: 80ch; font-size: 15.5px; }

.method { margin: 10px 0 0; max-width: 110ch; }
.method > summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 4px 0;
}
.method > summary::-webkit-details-marker { display: none; }
.method > summary::before { content: '+ '; color: var(--red); }
.method[open] > summary::before { content: '\2013 '; }
.method > summary:hover { color: var(--ink); }
.method > summary:focus-visible { outline: 2px solid var(--red-soft); outline-offset: 3px; }
.method-body {
  margin-top: 10px; border: 1px dashed var(--line-2); border-radius: 4px; padding: 16px 20px;
  color: var(--ink-2); font-size: 14px; line-height: 1.7;
}
.method-body > * + * { margin-top: 10px; }
.method-body b { color: var(--ink); font-weight: 600; }
.formula {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--ink);
  overflow-x: auto; white-space: nowrap; padding-bottom: 6px;
}
.method-src { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--ink-3); }

.modes { display: flex; gap: 6px; margin: 18px 0 20px; border-bottom: 1px solid var(--line); }
.modes button {
  background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  color: var(--ink-3); padding: 10px 18px; text-align: left;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  transition: color .15s, border-color .15s;
}
.modes button small { display: block; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--ink-3); margin-top: 2px; }
.modes button:hover { color: var(--ink-2); }
.modes button.on { color: var(--ink); border-bottom-color: var(--red); }
.modes button:focus-visible { outline: 2px solid var(--red-soft); outline-offset: 2px; }
@media (max-width: 560px) { .modes button { padding: 10px 10px; } .modes button small { display: none; } }

/* Simple mode's questions sit in the controls column, one under another. */
.calc .simple-controls { display: flex; flex-direction: column; gap: 0; }
.simple-controls .q { margin: 0 0 26px; border: 0; padding: 0; }
.simple-controls .q > h3 { font-size: 17px; margin-bottom: 4px; }
.simple-controls .q > .why { font-size: 13.5px; margin-bottom: 12px; }
.simple-controls .opts { grid-template-columns: 1fr 1fr; gap: 8px; }
.simple-controls .opts label { padding: 11px 13px; font-size: 14px; }
@media (max-width: 560px) { .simple-controls .opts { grid-template-columns: 1fr; } }
.simple-controls .assumed { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-3); }

/* results */
.big-out .cell .v .spin { vertical-align: middle; }
.home.busy .big-out .v { opacity: .55; transition: opacity .2s; }
.home.busy .spin { display: inline-block; }
/* Over budget the endpoint says "wait" (429) and the script retries; the line
   shows only while the headline's own request is waiting. */
.note-wait { display: none; font-size: 13px; color: var(--red-soft); line-height: 1.55; margin: 0; }
.home.throttled .note-wait { display: block; }
.note-horizon { font-size: 13px; color: var(--red-soft); line-height: 1.55; margin: 0; }

/* The controls column must fit a phone, and two separate things stopped it.
   It is a grid item, whose default min-width is min-content — so one long label
   inside made the whole PAGE scroll sideways, not just the row. And calc.css
   pins .prof to three columns, which the four place labels overflow. */
.calc .controls { min-width: 0; }
.home .prof { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.home .prof button, .home .chem button { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .home .prof { grid-template-columns: 1fr 1fr; }
}

/* The limits a number cannot show by itself: a place that swings with the
   season, and the cold side of the curve resting on an assumed constant. */
.note-honest {
  margin: 0; padding: 12px 16px; font-size: 13px; line-height: 1.55; color: var(--ink-2);
  border-left: 3px solid var(--line-2); background: var(--panel); border-radius: 0 3px 3px 0;
}
.guard.plating { border-color: var(--red); }
.lever { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 16px 20px; font-size: 15px; }
.lever b {
  display: block; margin-bottom: 6px; color: var(--ink-3);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
}
.outputs .honest { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.outputs .honest b { color: var(--ink); }
.warn { color: var(--red); }
.red-text { color: var(--red); }
.legend .cold-sw { border-color: #6ea8fe; }
.tl-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.guide-link { font-size: 14px; color: var(--ink-2); margin: 0; }
.guide-link a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.guide-link a:hover { color: var(--red); }

/* the wave from the old hero, labelled for what it is */
.runaway { position: relative; overflow: hidden; min-height: 56vh; display: flex; flex-direction: column; justify-content: center; }
.runaway .wavebox { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.runaway .wavebox canvas { width: 100%; height: 100%; display: block; }
.runaway > *:not(.wavebox) { position: relative; z-index: 1; }

/* The city applies to both modes, so it sits above the split rather than being
   duplicated inside each. Compact: one label, one select, one note. */
.city-row { margin-bottom: 20px; }
.city-row select {
  width: 100%; max-width: 360px; margin: 12px 0 8px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-radius: 3px;
  padding: 10px 12px; font-family: inherit; font-size: 15px;
}
.city-row select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.city-row .range-note { display: block; }

/* Range notes came from the concept with short middles, so space-between alone kept
   them apart. A middle that names a window or a caveat is long enough to wrap, and
   then the end labels touched it — "20 %задає…", "…80–100 %100 %". Only the
   three-part notes (min · note · max) get this: in a two-part note the first span is
   the long text itself and must stay free to wrap on a phone. */
.home .ctl .range-note { gap: 12px; align-items: baseline; }
.home .ctl .range-note > span:first-child:nth-last-child(3),
.home .ctl .range-note > span:last-child:nth-child(3) { flex: none; white-space: nowrap; }
.home .ctl .range-note > span:nth-child(2):nth-last-child(2) { flex: 1 1 auto; min-width: 0; text-align: center; }

/* The answer proper, hidden as one block when a placement is refused. It carries
   the column's own spacing, because .outputs now has a single child. */
.home #answer { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ---------- keeping the answer on screen ---------- */

/* The three numbers are the point of the page, and every input that changes
   them sits in a column beside (or above) them — so scrolling to reach an input
   used to scroll the answer away. The block now follows the reader.

   Sticky rather than fixed, deliberately: a fixed block leaves the flow and
   overlaps whatever is beneath it at every window size, which then has to be
   paid back in padding. Sticky keeps the block in its own column, so it pins
   only while that column is on screen and releases at the end of it — and it
   costs nothing on a browser that does not support it.

   `--nav-h` is the fixed site header, which the pinned block must clear: 18px
   padding twice plus one 11.5px monospace line. */
.home { --nav-h: 58px; }

/* The block's top edge meets the nav's bottom edge: with a gap between them, a
   sliver of whatever is scrolling past showed through between the two. */
.home #big-out {
  position: sticky; top: var(--nav-h); z-index: 20;
  /* opaque: the panels below scroll underneath it, and they share its colour */
  background: var(--panel);
  box-shadow: 0 14px 28px -16px #000, 0 2px 0 0 var(--bg);
}
/* The outputs column is a flex column; without this it stretches to the height
   of the taller controls column and the sticky block has nowhere to travel. */
.home .outputs { align-content: start; }

/* On a phone the whole calculator is one column — controls first, numbers after
   them — so the block pins to the top of its own stretch and the type has to
   come down to fit three numbers across a 360px screen. The uncertainty band is
   the one line that goes: it is the least useful of the three at this size. */
@media (max-width: 960px) {
  /* The header is TRIMMED rather than wrapped at this width (see calc.css), so
     it is shorter here than on a desktop, not taller. */
  .home { --nav-h: 48px; }
  .home #big-out {
    top: var(--nav-h);
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; padding: 13px 15px;
  }
  .home .big-out .cell .v { font-size: clamp(1.1rem, 5vw, 1.55rem); }
  .home .big-out .cell .v small { font-size: .72rem; }
  .home .big-out .cell .k {
    margin-top: 3px; font-size: 10.5px; line-height: 1.3;
    /* two lines, then ellipsis: the full sentence is in the panels below */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .home .big-out .cell .band { display: none; }
}

/* And while the reader is still ABOVE the numbers — answering the questions on
   a phone — nothing is pinned yet, because the block is further down the page.
   That is what this bar is for; the script shows it only then. */
.mini { display: none; }
@media (max-width: 960px) {
  .mini.show {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 10px 5vw calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 10, 11, .94); border-top: 1px solid var(--line-2);
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-2);
  }
  .mini b { font-family: 'Archivo', Impact, system-ui, sans-serif; font-weight: 900; font-size: 24px; color: var(--red); }
}

/* ---------- a place the tool will not put a number on ---------- */

/* Outdoors is not a colder version of a utility room, it is a different answer:
   fine in July, −25 °C in January, and charging a pack that cold plates lithium.
   So this replaces the numbers and the charts rather than annotating them. */
.refusal {
  border: 1px solid var(--red); border-radius: 4px; padding: clamp(20px, 4vw, 34px) clamp(18px, 3.4vw, 30px);
  background: linear-gradient(140deg, rgba(255, 50, 38, .12), transparent 72%);
  /* the script scrolls this into view; the fixed header must not land on top
     of the headline when it does */
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.refusal .r-head {
  font-family: 'Archivo', Impact, system-ui, sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 5.2vw, 2.6rem); line-height: 1.02; letter-spacing: -.01em; color: var(--red);
}
.refusal .r-need { margin-top: 14px; font-size: clamp(15px, 1.5vw, 17px); color: var(--ink); font-weight: 600; }
.refusal .r-why { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.refusal .r-why b { color: var(--ink); }
.refusal .r-sub {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.store-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 12px; }
.store-table th, .store-table td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.store-table th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
}
.store-table th:first-child, .store-table td:first-child { text-align: left; }
.store-table td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.store-table td:first-child { color: var(--ink); }
.store-table tr.warm td { color: var(--red-soft); }
.refusal .r-caveat { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 70ch; }