/* ─────────────────────────────────────────────────────────
   runwise-app — the chrome every recreated Runwise screen
   sits in: the 1440×900 frame, the dark sidebar, and the
   building header with its tab strip. See runwise-app.js for
   the note on what is 1:1 here and what cannot be.

   Every number was read out of the Figma file through
   get_metadata and get_design_context, never sampled off a
   screenshot. Token names are Runwise's own so a value here
   can be checked against the file: Grey/500 is #8E8D8C,
   Navy/200 is #AFBBDB, Red/600 is #FF6262.

   These rules lived in building-health-app.css until /alerts
   needed the same frame around a different page. That file
   keeps everything below the header — the cards it puts in
   the panel — and this one keeps the frame around them.

   Namespace: .rw-*. A page that fills the panel keeps its
   own namespace for what it puts there.
   ───────────────────────────────────────────────────────── */

/* ── Fit ──────────────────────────────────────────────────
   Same trick as .bh-fit: draw at the native Figma width and
   scale the whole thing, so every proportion survives. No
   legibility floor here — unlike a single component, a whole
   1440 page is a picture of a layout, and a picture that
   scrolls sideways is worse than a small one. */
.rw-fit {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.rw-fit > .rw {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--rw-k, 1));
  transform-origin: top left;
}

/* ── The frame ────────────────────────────────────────────
   1440×900 on Grey/900. Everything inside is positioned at
   the coordinates get_metadata reports, because that is what
   the file is: a set of coordinates. */
.rw {
  --rw-ink: #191918; /* Grey/900 */
  --rw-ink-2: #72716f; /* Grey/600 */
  --rw-mute: #8e8d8c; /* Grey/500 */
  --rw-hair: #f0f0f0; /* Grey/100 */
  --rw-surface: #fafafa; /* Grey/050 */
  --rw-navy-2: #afbbdb; /* Navy/200 */
  --rw-navy-6: #36437d; /* Navy/600 */
  --rw-navy-7: #24305c; /* Navy/700 */
  --rw-orange: #ff6d24; /* Orange/600 */
  --rw-orange-1: #fff0e9; /* Orange/100 */
  --rw-red-3: #ffc0c0; /* Red/300 */
  --rw-red-6: #ff6262; /* Red/600 */

  /* Shadow/Base, Shadow/SM, and the 1.5px pair the temp card
     and every white tab button carry. */
  --rw-sh-base: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
  --rw-sh-card: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06);
  --rw-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  /* White Button/Default — three inner shadows, in order. */
  --rw-btn-white:
    inset 0 2px 0 #ffffff, inset 0 0 0 1px #f0f0f0,
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  /* Color Button/Default. The file names the ring opaque
     black; measured against the render it lands at about a
     seventh of that, so it is set to what the frame shows
     rather than to what the effect is called. */
  --rw-btn-color:
    inset 0 2px 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.14);

  position: relative;
  width: 1440px;
  height: 900px;
  overflow: hidden;
  background: var(--rw-ink);
  color: var(--rw-ink);
  font-family:
    "Codec Warm",
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.rw *,
.rw *::before,
.rw *::after {
  box-sizing: border-box;
}
.rw p,
.rw h1 {
  margin: 0;
}
.rw svg {
  display: block;
  min-width: 0;
  max-width: none;
  overflow: visible;
}

/* ── Type ─────────────────────────────────────────────────
   The named text styles, spelled out once. Everything below
   uses these rather than restating a size. */
.rw-t-xl {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}
.rw-t-base-b {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.rw-t-base {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.rw-t-s-b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.25px;
  line-height: 20px;
}
.rw-t-s {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.rw-t-xs-b {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}
.rw-t-xs {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.rw-t-caps {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 16px;
  text-transform: uppercase;
}

/* ── Icon slots ───────────────────────────────────────────
   Font Awesome is set as live text in the file: a glyph at a
   given font-size, centred in a fixed box (15×12 for the
   12px icons, 20×16 for the 16px ones). The box is what the
   layout measures, so the box is what is reproduced here;
   the glyph inside is drawn at its own advance width, the
   way a font would set it. */
.rw-i {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
}
.rw-i > svg {
  fill: currentColor;
}

/* ── Sidebar ──────────────────────────────────────────────
   Main menu, 240×632 at 0,0: pt 24, px 20, column gap 20.
   The dark ground is the frame's, not the menu's. */
.rw-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 632px;
}
.rw-logo {
  position: absolute;
  top: 24px;
  left: 29px;
  width: 142.454px;
  height: 20.004px;
}
.rw-logo-mark {
  position: absolute;
  top: 3.17px;
  left: 0;
}
.rw-logo-type {
  position: absolute;
  top: 0;
  left: 46.01px;
}

.rw-search {
  position: absolute;
  top: 64px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 200px;
  height: 44px;
  padding-left: 11px;
  border: 1px solid var(--rw-navy-6);
  border-radius: 100px;
  background: rgba(36, 48, 92, 0.8);
  color: var(--rw-navy-2);
}
.rw-search svg {
  flex: none;
}

.rw-sep {
  position: absolute;
  left: 20px;
  width: 200px;
  height: 1px;
  background: var(--rw-navy-7);
}
.rw-nav {
  position: absolute;
  left: 20px;
  width: 200px;
}
.rw-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 8px;
  border-radius: 8px;
  color: var(--rw-navy-2);
  text-decoration: none;
}

.rw-me {
  position: absolute;
  top: 832px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 200px;
  height: 48px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(21, 29, 60, 0.8);
}
.rw-me-in {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rw-me-av {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(180deg, #5179f4 0%, #7424ff 100%);
  color: #fff;
}
.rw-me-name {
  min-width: 0;
}
.rw-me-name b {
  display: block;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rw-me-name i {
  display: block;
  color: var(--rw-navy-2);
  font-style: normal;
}

/* ── The page panel ───────────────────────────────────────
   240,20 → 1180×880 on Grey/100, rounded 30 at the top only:
   the bottom edge lands exactly on the frame edge and is
   square there in the file. */
.rw-panel {
  position: absolute;
  top: 20px;
  left: 240px;
  width: 1180px;
  height: 880px;
  overflow: hidden;
  border-radius: 30px 30px 0 0;
  background: var(--rw-hair);
}

/* ── Header ───────────────────────────────────────────────
   1180×104, px 30, items centred. White, then the block's
   map photograph at object-cover, then a left-to-right white
   veil: opaque until 29.688%, 95% at the right edge. The map
   never shows at more than 5%. */
.rw-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 1180px;
  height: 104px;
  overflow: hidden;
  background:
    linear-gradient(90deg, #ffffff 29.688%, rgba(255, 255, 255, 0.95) 100%),
    url("assets/rw-header-map.webp") center / cover no-repeat,
    #ffffff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
.rw-head h1 {
  position: absolute;
  top: 16px;
  left: 30px;
  white-space: nowrap;
}
.rw-owner {
  position: absolute;
  top: 46px;
  left: 30px;
  color: var(--rw-mute);
  text-decoration: underline;
  white-space: nowrap;
}
.rw-tabs {
  position: absolute;
  top: 78px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rw-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding-bottom: 6px;
  color: var(--rw-mute);
}
.rw-tab--on {
  box-shadow: inset 0 -2px 0 var(--rw-ink);
  color: var(--rw-ink);
}
.rw-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--rw-red-3);
  color: #fff;
}
/* Red/300 with white text is what the Heating tab's badge
   reads at on /building-health. The Alerts frame lights the
   same badge at Red/600, which is the state it is in when
   three alerts are firing. */
.rw-count--hot {
  background: var(--rw-red-6);
}
.rw-settings {
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--rw-surface);
  box-shadow: var(--rw-btn-white);
}

/* ── Cards ────────────────────────────────────────────────
   All four sit at metadata coordinates inside the panel. The
   two bottom ones run off the frame; that is the frame, not
   a mistake. */
.rw-card {
  position: absolute;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
}