/* ─────────────────────────────────────────────────────────
   building-health-app — Figma node 2316:159891, "Final
   building health metrics component": the Runwise building
   page at 1440×900 with the shipped status component in the
   right-hand column.

   The frame, the sidebar and the header are in
   runwise-app.css, which /alerts shares. This file is what
   goes inside the panel: four cards at their metadata
   coordinates. Load runwise-app.css first.

   Every number was read out of the Figma file through
   get_metadata and get_design_context — never sampled off a
   screenshot. Where a value looks odd (a 33.25-wide bar, a
   0.5px offset on the dial) it is odd in the file too.

   What is 1:1 and what is not:

     The component is not recreated here at all. The right
     column calls BuildingHealth.build(29) and inserts the
     real tree — frame 2314:296916, already verified against
     the file. Its native width is 436, exactly the column
     width, so it draws at scale 1 inside a page that is
     itself scaled.

     Everything around it is a RECREATION of the surrounding
     product page, built to the frame's own geometry and
     tokens. It is not Runwise's component source and must
     not be cited as their spec.

     Two things cannot be exact, and are marked in place:
     the 96px dial number is set in Codec Warm HEAVY and only
     Regular and Bold are licensed here, and the Font Awesome
     6 PRO glyphs are hand-drawn outlines of the same icons
     at the same box sizes. Every vector that Figma exports
     as an asset — the dial, the ridge line — is the file's
     own artwork, inlined verbatim.

   Namespace: .rw-* is the product page. It never touches
   .bh-*, so the component keeps looking like itself no
   matter what the chrome around it does.

   No inline styles, per _headers: geometry rides on SVG
   attributes and on element.style, which is a CSSOM write.
   ───────────────────────────────────────────────────────── */

.rw-temp {
  top: 124px;
  left: 30px;
  width: 664px;
  height: 574px;
  box-shadow: var(--rw-sh-card);
}
.rw-graphs {
  top: 718px;
  left: 30px;
  width: 664px;
  height: 854px;
  box-shadow: var(--rw-sh-card);
}
.rw-col {
  position: absolute;
  top: 124px;
  left: 714px;
  width: 436px;
}
/* The one slot in this file that is not a recreation. */
.rw-slot {
  width: 436px;
}
.rw-save {
  top: 222px;
  left: 0;
  width: 436px;
  height: 391px;
  box-shadow: var(--rw-sh-base);
}
.rw-indoor {
  top: 633px;
  left: 0;
  width: 436px;
  height: 600px;
  box-shadow: var(--rw-sh-card);
}

/* ── Temperature card ─────────────────────────────────────
   Card 664×574, pt 30 px 20 pb 20. Inner column gap 24:
   dial block 204, buttons 44, targets 204, footer 16. */
.rw-scape,
.rw-ridge {
  position: absolute;
  left: 0;
  width: 664px;
}
/* Vector 13: box 664×561 at card y 61, artwork inset 0.48%
   from its top. Vector 15 rides on top of it. */
.rw-scape {
  top: 63.69px;
  height: 558.3px;
}
.rw-ridge {
  top: 63.23px;
  height: 96.5px;
}
.rw-dial {
  position: absolute;
  top: 30px;
  left: 204px;
  width: 255px;
  height: 255px;
}
/* Background dial: 255-wide box, artwork clipped 19.32% off
   the bottom — the gauge is an open arc, not a ring. */
.rw-dial-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 255px;
  height: 205.741px;
}
/* Ellipse 46: left 0, right 74.41%, top 8.95%, bottom 19.32%. */
.rw-dial-arc {
  position: absolute;
  top: 22.8225px;
  left: 0;
  width: 65.2603px;
  height: 182.919px;
}
/* 96px Codec Warm Heavy. Only Regular and Bold are licensed
   here, so this renders one weight light. The leading
   transparent 48px degree sign is in the file — it balances
   the visible one so "64°" sits optically centred. */
.rw-deg {
  position: absolute;
  top: 86px;
  left: 184px;
  width: 295px;
  height: 96px;
  font-size: 0;
  text-align: center;
}
.rw-deg span {
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
}
.rw-deg .rw-ghost {
  color: transparent;
  font-size: 48px;
}
.rw-cap {
  position: absolute;
  top: 182px;
  left: 264px;
  width: 135px;
  color: var(--rw-ink-2);
  text-align: center;
  white-space: nowrap;
}
/* No fill — the pill is an Orange/100 hairline on the card. */
.rw-heaton {
  position: absolute;
  top: 210px;
  left: 278px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 107px;
  height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--rw-orange-1);
  border-radius: 4px;
}
.rw-heaton-in {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rw-heaton-in span {
  color: var(--rw-orange);
  white-space: nowrap;
}

.rw-acts {
  position: absolute;
  top: 258px;
  left: 182px;
  display: flex;
  gap: 10px;
  width: 300px;
}
.rw-acts button {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  box-shadow: var(--rw-btn-color);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
}
.rw-cool {
  background: linear-gradient(180deg, #4dcaff 0%, #1a5bff 100%);
}
.rw-heat {
  background: linear-gradient(180deg, #ffa94d 0%, #ff531a 100%);
}

/* Three 68-tall rows, no rules between them. The active one
   is the only one that draws anything. */
.rw-targets {
  position: absolute;
  top: 322px;
  left: 20px;
  width: 624px;
}
.rw-target {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 68px;
  padding: 12px;
  border-radius: 12px;
  color: var(--rw-mute);
}
.rw-target--on {
  border: 1px solid var(--rw-hair);
  background: var(--rw-surface);
  color: var(--rw-ink);
}
.rw-target-l {
  flex: 1 1 0;
  min-width: 0;
}
.rw-target-l b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
}
.rw-target-l i {
  display: block;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.rw-target-r {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}
.rw-tfoot {
  position: absolute;
  top: 538px;
  left: 20px;
  width: 624px;
  color: var(--rw-mute);
  text-align: center;
  text-decoration: underline;
  white-space: nowrap;
}

/* ── Card header ──────────────────────────────────────────
   Shared by Graphs & trends and Indoor temperatures: 48 tall,
   pt 16 pb 8, one Grey/100 rule under it. */
.rw-chead {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 48px;
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--rw-hair);
}
.rw-expand {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  background: var(--rw-surface);
  color: var(--rw-mute);
}

/* ── Graphs & trends (clipped by the fold) ────────────────
   Only the first 162 units of an 854-tall card are ever
   seen. That is the point of including it — the component's
   column is the one that fits. */
.rw-cal {
  position: absolute;
  top: 64px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 624px;
  height: 44px;
  padding: 6px;
  border: 1px solid var(--rw-hair);
  border-radius: 12px;
  background: var(--rw-surface);
}
.rw-sq {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 10px 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--rw-sh-card);
}
.rw-cal-mid {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rw-cal-mid .rw-i {
  padding-bottom: 2px;
}
.rw-timeline {
  position: absolute;
  top: 120px;
  left: 20px;
  width: 626px;
  height: 204px;
}
.rw-timeline b {
  position: absolute;
  top: 12px;
  left: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
.rw-strip {
  position: absolute;
  top: 36px;
  left: 0;
  width: 626px;
  height: 30px;
}

/* ── Savings card ─────────────────────────────────────────
   436×391. Plot 374×170 at 20,100; bars in a 374×169 box
   with 12 of padding and 12 between, so each is 33.25 wide. */
.rw-save-n {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 0;
  white-space: nowrap;
}
.rw-save-n span {
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
}
.rw-save-n i {
  color: var(--rw-mute);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.rw-save-sub {
  position: absolute;
  top: 62px;
  left: 20px;
  color: var(--rw-mute);
  white-space: nowrap;
}
.rw-pop {
  position: absolute;
  top: 20px;
  left: 384px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--rw-surface);
  box-shadow: var(--rw-btn-white);
}
.rw-plot {
  position: absolute;
  top: 100px;
  left: 20px;
  width: 374px;
  height: 170px;
}
/* Bars sit in a 169 box — one unit clear of the baseline. */
.rw-bars {
  position: absolute;
  top: 100px;
  left: 20px;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  width: 374px;
  height: 169px;
  padding: 0 12px;
}
.rw-bar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
}
.rw-bar--clip {
  overflow: hidden;
}
.rw-bar--end {
  align-items: center;
  justify-content: flex-end;
}
/* Green/700 → #6CC768 down the bar, with a 1px hatch at 45°
   over it — 7.2 apart measured along the axis, so 5.1 across
   the stripe. get_design_context flattens the hatch away and
   returns only the gradient; it is in the render. */
.rw-saved {
  flex: none;
  width: 100%;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      135deg,
      #069500 0 1px,
      rgba(0, 0, 0, 0) 1px 5.1px
    ),
    linear-gradient(180deg, #07ad00 0%, #6cc768 100%);
  box-shadow: inset 0 0 0 0.25px #069500;
}
.rw-spent {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #dcfbcc 0%, #ffffff 100%);
  box-shadow: inset 0 0 0 0.25px rgba(7, 173, 0, 0.5);
}
.rw-ylab,
.rw-xlab {
  position: absolute;
  color: var(--rw-mute);
  white-space: nowrap;
}
.rw-ylab {
  left: 402px;
}
.rw-xlab {
  top: 271px;
  text-align: center;
  transform: translateX(-50%);
}
/* The warning sits on the axis where a date would, with a
   white glow so the gridline does not run through it. */
.rw-xwarn {
  position: absolute;
  top: 273px;
  left: 133px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--rw-mute);
  filter: drop-shadow(0 0 10px #fff);
}
.rw-legend {
  position: absolute;
  top: 299px;
  left: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  width: 396px;
  height: 20px;
}
.rw-legend > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rw-legend b {
  width: 12px;
  height: 12px;
  border-radius: 100px;
}
.rw-btns {
  position: absolute;
  top: 339px;
  left: 20px;
  display: flex;
  gap: 12px;
  width: 396px;
}
.rw-btns button {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: var(--rw-surface);
  box-shadow: var(--rw-btn-white);
  color: var(--rw-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.25px;
  line-height: 20px;
  white-space: nowrap;
}

/* ── Indoor temperatures (clipped by the fold) ──────────── */
.rw-group {
  position: absolute;
  top: 64px;
  left: 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 396px;
}
.rw-seg {
  display: flex;
  flex: none;
  gap: 4px;
  width: 284px;
  height: 44px;
  padding: 6px;
  border: 1px solid var(--rw-hair);
  border-radius: 12px;
  background: var(--rw-surface);
}
.rw-seg > span {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 32px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--rw-mute);
}
.rw-seg .rw-on {
  background: #fff;
  box-shadow: var(--rw-sh-card);
  color: var(--rw-ink);
}
.rw-tool {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--rw-surface);
  box-shadow: var(--rw-btn-white);
}