@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap");

/* All @import lines MUST come before any other rule. postcss-import (run
   by the standalone tailwindcss binary) silently keeps subsequent
   @imports as raw `@import url(./foo.css)` lines if any rule appears
   between them, and the browser can't resolve those relative URLs —
   meaning buttons/inputs/modals/etc. silently disappear from the
   compiled output. */

:root {
  --coredark-900: rgba(0, 0, 0, 1);
  --corelight-100: rgba(255, 255, 255, 1);
  --corelight-900: rgba(204, 211, 228, 1);
  --coredark-500: rgba(32, 44, 58, 1);
  --coredark-100: rgba(84, 102, 131, 1);
  --corelight-300: rgba(241, 241, 241, 1);
  --corelight-500: rgba(232, 234, 237, 1);
  --coredark-700: rgba(23, 27, 31, 1);
  /* ── Typography ──────────────────────────────────────────────────
     Heading family: Fieldwork Geo, self-hosted from
       resources/public/fonts/ and registered via @font-face in
       resources/public/css/extra.css. Helvetica is the final fallback
       if the woff2 fetch fails. Weights match the Figma Typography
       frame (H2 = Black / 900, H3 = Bold / 700, H4–H5 = Semibold / 600).
     Body family: Arial (system), per the 2026-07-27 style-guide decision
       (CRM 56630): Fieldwork Geo is reserved for HEADINGS, all body text
       reads in Arial. This matches extra.css's `body { font-family:
       'Arial' }` — previously the body tokens said fieldwork-geo and
       silently overrode it wherever a component used the token.
       Specified in specs/presentation.allium (TypographyPresentation). */
  --headings-large-h1-font-family: "fieldwork-geo", Helvetica, sans-serif;
  --headings-large-h1-font-weight: 900;
  --headings-large-h1-font-size: 32px;
  --headings-large-h1-letter-spacing: 0px;
  --headings-large-h1-line-height: 38px;
  --headings-large-h1-font-style: normal;
  --headings-large-h4-font-family: "fieldwork-geo", Helvetica, sans-serif;
  --headings-large-h4-font-weight: 600;
  --headings-large-h4-font-size: 16px;
  --headings-large-h4-letter-spacing: 0px;
  --headings-large-h4-line-height: 20px;
  --headings-large-h4-font-style: normal;
  --headings-large-h5-font-family: "fieldwork-geo", Helvetica, sans-serif;
  --headings-large-h5-font-weight: 600;
  --headings-large-h5-font-size: 12px;
  --headings-large-h5-letter-spacing: 0px;
  --headings-large-h5-line-height: 14px;
  --headings-large-h5-font-style: normal;
  --headings-large-h3-font-family: "fieldwork-geo", Helvetica, sans-serif;
  --headings-large-h3-font-weight: 700;
  --headings-large-h3-font-size: 20px;
  --headings-large-h3-letter-spacing: 0px;
  --headings-large-h3-line-height: 24px;
  --headings-large-h3-font-style: normal;
  --body-large-regular-font-family: Arial, Helvetica, sans-serif;
  --body-large-regular-font-weight: 400;
  --body-large-regular-font-size: 16px;
  --body-large-regular-letter-spacing: 0px;
  --body-large-regular-line-height: 24px;
  --body-large-regular-font-style: normal;
  --headings-large-h2-font-family: "fieldwork-geo", Helvetica, sans-serif;
  --headings-large-h2-font-weight: 900;
  --headings-large-h2-font-size: 28px;
  --headings-large-h2-letter-spacing: 0px;
  --headings-large-h2-line-height: 34px;
  --headings-large-h2-font-style: normal;
  --body-large-bold-font-family: Arial, Helvetica, sans-serif;
  --body-large-bold-font-weight: 700;
  --body-large-bold-font-size: 16px;
  --body-large-bold-letter-spacing: 0px;
  --body-large-bold-line-height: 24px;
  --body-large-bold-font-style: normal;
  --body-large-italic-font-family: Arial, Helvetica, sans-serif;
  --body-large-italic-font-weight: 400;
  --body-large-italic-font-size: 16px;
  --body-large-italic-letter-spacing: 0px;
  --body-large-italic-line-height: 24px;
  --body-large-italic-font-style: italic;
  /* --body-medium-*: the 14px step, RATIFIED once here (decision D-08).
     There was no 14px token, yet 13px and 14px were in use on Compare Systems and the settings
     drawers because 12px is too tight for dense tabular data and 16px does not fit the column
     budget. Ratifying one token is the alternative to that drift continuing per-screen; the rule
     for everyone else stays "12 or 16 unless you are dense tabular content, then use this". */
  --body-medium-regular-font-family: Arial, Helvetica, sans-serif;
  --body-medium-regular-font-weight: 400;
  --body-medium-regular-font-size: 14px;
  --body-medium-regular-letter-spacing: 0px;
  --body-medium-regular-line-height: 20px;
  --body-medium-regular-font-style: normal;
  --body-medium-bold-font-family: Arial, Helvetica, sans-serif;
  --body-medium-bold-font-weight: 700;
  --body-medium-bold-font-size: 14px;
  --body-medium-bold-letter-spacing: 0px;
  --body-medium-bold-line-height: 20px;
  --body-medium-bold-font-style: normal;
  --body-small-regular-font-family: Arial, Helvetica, sans-serif;
  --body-small-regular-font-weight: 400;
  --body-small-regular-font-size: 12px;
  --body-small-regular-letter-spacing: 0px;
  --body-small-regular-line-height: 16px;
  --body-small-regular-font-style: normal;
  --body-small-bold-font-family: Arial, Helvetica, sans-serif;
  --body-small-bold-font-weight: 700;
  --body-small-bold-font-size: 12px;
  --body-small-bold-letter-spacing: 0px;
  --body-small-bold-line-height: 16px;
  --body-small-bold-font-style: normal;
  --body-small-italic-font-family: Arial, Helvetica, sans-serif;
  --body-small-italic-font-weight: 400;
  --body-small-italic-font-size: 12px;
  --body-small-italic-letter-spacing: 0px;
  --body-small-italic-line-height: 16px;
  --body-small-italic-font-style: italic;
  --load: rgba(241, 241, 241, 1);
  --grid-supply-primary: rgba(53, 71, 92, 1);
  --grid-supply-secondary: rgba(23, 27, 31, 1);
  /* The `-est` variants are the PREDICTED state of their base colour. Per the
     state conventions on /app2/admin/styles they must render at 50 % — same
     hue, half alpha. They shipped from the retired beam-ui-3.0 build at
     alpha 1, i.e. indistinguishable from the measured/actual state, which made
     every predicted block in the system diagram and the cost-benefit table
     read as measured data. Keep the alpha at 0.50; change only the hue, and
     only in lock-step with the base token directly above it. */
  --grid-est: rgba(53, 71, 92, 0.5);
  --gas-supply: rgba(125, 13, 13, 1);
  --gas-supply-est: rgba(125, 13, 13, 0.5);
  --solar-consumed: rgba(247, 201, 83, 1);
  --solar-exported: rgba(217, 122, 10, 1);
  --solar-consumed-est: rgba(247, 201, 83, 0.5);
  --solar-exported-est: rgba(217, 122, 10, 0.5);
  --battery-discharged: rgba(61, 181, 152, 1);
  --battery-charged: rgba(29, 148, 119, 1);
  --battery-discharged-est: rgba(61, 181, 152, 0.5);
  --battery-charged-est: rgba(29, 148, 119, 0.5);
  --ev: rgba(68, 93, 235, 1);
  --ev-est: rgba(68, 93, 235, 0.5);
  --generator: rgba(192, 56, 56, 1);
  --generator-est: rgba(192, 56, 56, 0.5);
  --electrification: rgba(101, 57, 122, 1);
  /* NOTE: name misspelled at source ("electricfication"). Kept as-is because
     it is referenced by name; see the Dashboard aliases table on the styles
     page, which flags the typo. */
  --electricfication-est: rgba(101, 57, 122, 0.5);
  --energygrid-100: rgba(116, 137, 254, 1);
}

/* Work Sans — used only for the sidebar avatar monogram (per Figma).
   Pulled from Google Fonts; only the 600 weight is currently needed. */

/* Fieldwork Geo — self-hosted weights (Regular / Semi-Bold / Bold / Black).
   Declared here (rather than in extra.css) so the @font-face rules flow
   through the Tailwind build into output.css and apply on every page,
   including those that bypass Biff's base layout. */

@font-face {
  font-family: 'fieldwork-geo';

  src: url('/fonts/Fieldwork-Geo-Regular.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'fieldwork-geo';

  src: url('/fonts/Fieldwork-Semi-Bold-Geo.woff2') format('woff2');

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'fieldwork-geo';

  src: url('/fonts/Fieldwork-Geo-Bold.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'fieldwork-geo';

  src: url('/fonts/Fieldwork-Geo-Black.woff2') format('woff2');

  font-weight: 900;

  font-style: normal;

  font-display: swap;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  margin: 0px;
  height: 100%;
  /* Body font: Arial, per the 2026-07-27 style-guide decision (CRM 56630) —
     Fieldwork Geo is reserved for HEADINGS (the h1-h6 rule below). Drives
     every page-level paragraph and span that doesn't explicitly override
     font-family, so it must agree with the --body-* tokens in
     styleguide.css and with extra.css's `body { font-family: 'Arial' }`.
     It was "fieldwork-geo", Arial, … until 2026-07-28: this literal is the
     MOST SPECIFIC of the three declarations and was silently beating both
     of the others, so moving the tokens to Arial alone changed nothing on
     any page that links globals.css. Verified in-browser: body computed
     font-family was "fieldwork-geo, Arial, Helvetica, sans-serif" on the
     dashboard, site setup, the sites list, edit-scenario and the report
     pages before this change. */
  font-family: Arial, Helvetica, sans-serif;
}

/* Heading font: Fieldwork Geo (self-hosted), with system-Helvetica as
   a graceful final fallback. The H2 token carries weight 900 (Black);
   per-level weights still come from each H's own --headings-large-h{n}-*
   token, applied either via tailwind utility classes or per-component
   CSS. This rule just guarantees the family is right by default. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--headings-large-h2-font-family, "fieldwork-geo", Helvetica, sans-serif);
}

/* Branded focus ring (I-06). Replaces the off-palette #4a90e2.
   Note what this rule used to do: it declared `outline` TWICE, so the second
   (-webkit-focus-ring-color auto 5px) overrode the blue and every button fell back to the
   browser default ring — measured as rgb(0,95,204) auto on 9 of 13 routes. So the real defect
   was not "an off-brand blue ring" but "no brand ring at all, inconsistently sized".
   One declaration instead of two, and one token instead of the off-palette blue.
   The `!important` is KEPT deliberately, and it is load-bearing: `energy-systems-grid.css` sets
   `outline: none` on its cells and the Tailwind `outline-none` utility sets
   `outline: 2px solid transparent`, both of which load after this file. Dropping the flag was
   measured to delete the focus ring entirely on Compare Systems and New Site. A visible focus
   ring is an accessibility floor (I-06, standards §12), so it is allowed to out-shout local
   `outline: none` — that is the one thing `!important` is genuinely for here. */

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary-300) !important;
  outline-offset: 2px;
}

a {
  text-decoration: none;
}

/* Browsers ship form controls with the OS default font, not the page
   body — without this, every <input>/<button>/<select>/<textarea> on an
   admin page renders in Arial/system, not Fieldwork. `font: inherit`
   covers family, size, weight, and line-height in one shot. */

input, button, select, textarea {
  font: inherit;
}

/* Beam link style — any anchor that opts into the brand-teal colour is
   rendered Fieldwork Bold to match the sign-in / brand-link treatment.
   Scoped to <a> so other teal-coloured text (labels, badges) isn't
   affected. */

a.text-beam-teal {
  font-weight: 700;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

input:focus-visible {
  /* Same a11y floor as the button ring above — see that comment for why !important stays. */
  outline: 2px solid var(--primary-300) !important;
  outline-offset: 2px;
}

button {
  transition: opacity 0.2s ease-in-out;
}

/* Legacy blanket hover/active feedback, now SCOPED (standards §9: "buttons never rely on colour
   alone for state; processing state = spinner + label, not opacity" / "remove reliance on global
   button:hover{opacity:.9}").
   Deleting it outright would strip hover feedback from the many ad-hoc buttons that still have no
   vocabulary class, so instead it is excluded from the buttons that define their own hover. That
   keeps the smallest diff while stopping the opacity wash from fighting the tokenised hovers
   (which is part of why disabled and idle looked alike). New code uses a vocabulary class and
   gets a real hover; this rule is a shrinking safety net, not a pattern to build on. */

button:not([class*="btn"]):not([class*="-button"]):not(:disabled):hover {
  opacity: 0.9;
}

button:not([class*="btn"]):not([class*="-button"]):not(:disabled):active {
  opacity: 0.8;
}

.pac-item {
  cursor: pointer;
  font-size: 16px !important;
  line-height: 20px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  white-space: normal !important;
}

.pac-item-query {
  font-size: 16px !important;
  line-height: 20px !important;
  display: block !important;
  white-space: normal !important;
}

.pac-icon {
  display: flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

.pac-matched {
  font-size: 16px !important;
  white-space: normal !important;
}

/* Ensure proper spacing in autocomplete predictions */

.pac-item-query .pac-matched,
.pac-item-query span {
  display: inline !important;
}

/* Fullscreen Modal Styles */

.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: var(--corelight-100);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
}

.fullscreen-modal>div {
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Selected System Quadrant Modal Styles */

.selected-system-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: transparent;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.selected-system-modal.active {
  display: flex;
}

/* Map Icon Component
 * Used on site setup map view to display supply, use, and generation markers
 */

/* Base container */

.map-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Actions live inside the hover card, in the flex flow beside the text.
   Not absolutely positioned: the topology cards stack theirs at the right edge
   because they are tall — a 32px icon over two text lines — but this card has no
   icon and can be a single line, which is not enough height for two stacked
   buttons; they overflowed its bottom edge. Side by side sizes the card to its
   content and needs no reserved padding.

   Scoped to the card rather than the bare class on purpose. These actions used to
   float centred above the marker, and any stale copy of that rule sets
   left/transform at single-class specificity, where source order alone decides.
   `.map-icon__card .map-icon__actions` outranks it outright, and it states the
   true thing: this placement exists BECAUSE they sit in the card. */

.map-icon__card .map-icon__actions {
  position: static;
  inset: auto;
  transform: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 1;
  pointer-events: auto;
}

.map-icon__card .map-icon__action {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--coredark-100);
  cursor: pointer;
  pointer-events: auto;
}

.map-icon__card .map-icon__action:hover {
  background: transparent;
  color: var(--coredark-900);
}

/* Square, because both glyphs are viewBox 0 0 20 20 — the previous 12x14 box
   stretched them vertically. */

.map-icon__card .map-icon__action svg {
  width: 17px;
  height: 17px;
}

/* Main icon marker — compact 48px tile, white border, soft
   drop-shadow, white icon. */

.map-icon__marker {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Padding was 8px 6px to seat a 24px glyph above a label. The label is gone
       and the glyph now fills the marker, so this is just the inset that keeps
       the artwork off the border — even on the circular variants, where a square
       glyph box would otherwise clip at the curve. */
  gap: 2px;
  padding: 6px;
  box-sizing: border-box;
  border: 1.5px solid var(--corelight-100);
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.map-icon:hover .map-icon__marker,
.map-icon--hover .map-icon__marker {
  transform: scale(1.05);
  box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.4);
}

/* Marker type variants — electric supply/use use --energy-grid and gas
   variants use --energy-gas, matching the diagram cards and the
   generation markers' "background colour by tech type" pattern. */

.map-icon__marker--supply {
  background-color: var(--energy-grid);
  border-radius: 8px;
}

.map-icon__marker--use {
  background-color: var(--energy-grid);
  border-radius: 200px 200px 20px 20px;
}

.map-icon__marker--gas-supply {
  background-color: var(--energy-gas);
  border-radius: 8px;
}

.map-icon__marker--gas-use {
  background-color: var(--energy-gas);
  border-radius: 200px 200px 20px 20px;
}

.map-icon__marker--off-grid {
  /* Figma 4182-57305/56772: off-grid uses the gas maroon #6B3945. */
  background-color: var(--energy-gas);
  border-radius: 8px;
}

.map-icon__marker--generation {
  /* Figma solar marker is orange (#FE9900), not the pale --energy-solar
       yellow used elsewhere — keep it in step with the diagram solar card. */
  background-color: var(--energy-solar-3);
  border-radius: 50%;
}

.map-icon__marker--ev-charger {
  background-color: var(--energy-ev-charger);
  border-radius: 50%;
}

.map-icon__marker--pfc {
  background-color: var(--energy-pfc);
  border-radius: 50%;
}

/* Icon inside marker. */

.map-icon__marker--generator {
  background-color: var(--energy-generator);
  border-radius: 50%;
}

/* The glyph fills the marker. It used to be a 24px icon centred in a 48px
   marker alongside a label; with the label gone there is no reason to keep it
   at half size. mask-size: contain on .map-icon__icon-mask keeps the artwork's
   aspect ratio, so this sets the box it fits inside rather than stretching it. */

.map-icon__icon {
  width: 100%;
  height: 100%;
}

.map-icon__icon svg {
  width: 100%;
  height: 100%;
}

/* Hover card — the marker shows no text, so hovering reveals the same card the
   topology tree shows for that component. Geometry copied from
   createTopologyCard (site-setup.js): white body, --corelight-900 hairline, 4px
   radius, and a 12px/700 name over a 10px/500 spec, with the actions beside it.

   Below the marker, since it now carries the actions that used to float above. */

.map-icon__card {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  max-width: 220px;
  box-sizing: border-box;
  padding: 8px 10px;
  background: var(--light-100, #fff);
  border: 1px solid var(--corelight-900);
  border-radius: 4px;
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.18);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1000;
}

.map-icon:hover .map-icon__card,
.map-icon--hover .map-icon__card {
  opacity: 1;
  pointer-events: auto;
}

/* The 6px offset above is a dead zone the pointer would cross on its way to the
   actions, dropping :hover and closing the card. This bridges it — a descendant,
   so hovering it keeps .map-icon:hover true. */

.map-icon__card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}

.map-icon__card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.map-icon__card-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  color: var(--coredark-900);
  word-break: break-word;
}

.map-icon__card-spec {
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  color: var(--coredark-900);
  word-break: break-word;
}

/* Dimmed state for markers belonging to a different asmt (multi-meter preview) */

.map-icon--dimmed {
  opacity: 0.4;
  filter: grayscale(0.6);
}

/* Brand, semantic energy, and sidebar palette.
   These were previously hand-edited into the compiled `output.css` and
   got lost on the next Tailwind rebuild, leaving classes like
   `bg-beam-teal`, semantic styles-page swatches, and the whole
   `bg-beam-sidebar-*` set without resolved `var()` values (so they
   painted transparently). Define them here as the canonical source. */

:root {
  /* Brand — the five identity colours from the Figma Brand sheet. */
  --beam-green:  #003A40;
  /* deep brand teal — sidebar tone, headings */
  --beam-teal-rgb: 0 193 159;
  /* RGB triple of --beam-teal, used by
                                 Tailwind so utilities like bg-beam-teal/20
                                 can apply alpha. */
  --beam-grey:   #CFCDC9;
  --beam-teal:   #00C19F;
  /* brand accent — active states, battery */
  --beam-purple: #24125F;
  --beam-pink:   #C724B1;
  /* Semantic palette — Figma "Colours" sheet (Primary/Secondary/Tertiary/
     Dark/Light/Utility). Steps run 900 (darkest) → 100 (lightest). */
  --primary-900: #003A40;
  /* = --beam-green */
  --primary-700: #02515A;
  --primary-500: #086860;
  --primary-300: #0B8E77;
  --primary-100: #00C19F;
  /* = --beam-teal */
  --secondary-900: #24125F;
  /* = --beam-purple */
  --secondary-700: #3E2277;
  --secondary-500: #592D86;
  --secondary-300: #7942A0;
  --secondary-100: #8556A6;
  --tertiary-a-500: #C724B1;
  /* = --beam-pink */
  --tertiary-a-300: #D344BF;
  --tertiary-a-100: #D766C8;
  --tertiary-b-500: #F3A712;
  --tertiary-b-300: #F7C953;
  --tertiary-b-100: #FAE189;
  --dark-900: #000000;
  --dark-700: #011618;
  --dark-500: #042124;
  --dark-300: #052A2E;
  /* hero/header dark in styles sheets */
  --dark-100: #053439;
  --light-900: #CFCDC9;
  /* = --beam-grey */
  --light-700: #DFDFE2;
  /* #ECEAF0, and it stays that way unless a designer says otherwise.
     Core/Light/500 is a Figma variable with MORE THAN ONE MODE, so its value
     depends on which frame you read it from: the Assess 3.0 dashboard card
     headers (4179:55532, 55783, 57124) resolve it to #ECEAF0, while the System
     Diagram frame (4187:53456) resolves the same variable to #E4E3E8. It was
     briefly re-synced to the latter on 2026-08-07 off that one frame; three
     frames and the long-standing code value disagreed, so that was reverted.
     Read more than one node before moving this. */
  --light-500: #ECEAF0;
  --light-300: #F6F6F6;
  --light-100: #FFFFFF;
  --alert-900: #912B2B;
  --alert-700: #C03838;
  --alert-500: #D34C4C;
  /* Warning — the middle band of the traffic-light scales (0–49 alert red,
     50–74 warning orange, 75–100 --beam-teal). It sat as a bare #e0871b
     repeated across four rules in procure.css; a semantic UI colour used in
     more than one place is a token, not a literal. Deliberately NOT
     --energy-solar-3 (#E1820F): that is an energy-series colour and must
     never carry UI semantics, however close the hex. */
  --warning-500: #E0871B;
  /* Legacy core-dark token kept for the admin styles catalogue. */
  --coredark-300: #35475C;
  /* Energy source colours — values from the Figma "Brand & Components"
     Colours sheet (node 1998:34739), swatches as source of truth.
     Solar 1-3 re-synced 2026-08-04 from the Figma Energy/Solar/* variables
     (Assess 3.0, fuKRX9xrQMjVJuch3rWAKM) which had moved off the older
     #FED65D / #FFDC00 / #FE9900 ramp. */
  --energy-solar:   #FCE855;
  /* Solar 1 — primary array */
  --energy-solar-2: #F9BA1C;
  /* Solar 2 — secondary array */
  --energy-solar-3: #E1820F;
  /* Solar 3 — tertiary array */
  --btm-battery: #00C19F;
  /* Behind-the-Meter battery */
  --fom-battery: #1B95A0;
  /* Front-of-Meter battery */
  --energy-electrification: #BB4CDD;
  --energy-ev-charger:      #3E2277;
  /* shares hex with --secondary-700 */
  --energy-generator:       #AF3739;
  --energy-grid:            #2A578D;
  --energy-gas:             #6B3945;
  --off-grid:               #2A578D;
  /* Native loads and power factor correction */
  --energy-load-thermal: #D8C9B8;
  --energy-load-electrical: #9FA4AC;
  --energy-pfc: #9FA4AC;
  /* PFC supply — neutral cool grey, matches --energy-load-electrical */
  /* ── Exported-flow hatch ──────────────────────────────────────────
     Canonical pattern used to mark "flow leaving the site" (solar
     exported, battery charged, …). Geometry matches the Figma
     pattern spec (Assess 3.0 node 504:132): 2px stripes of 50%
     white separated by 3.65px gaps, running bottom-left → top-right
     over a solid colour base. Every consumer — styles page swatch,
     system-diagram tile, future chart areas — should paint these
     exact stripes. Consumers set --hatch-color; .bg-hatch (below)
     does the rest. */
  --hatch-stripe-color: rgba(255, 255, 255, 0.5);
  --hatch-stripe-width: 2px;
  --hatch-stripe-gap:   3.65px;
  --hatch-angle:        135deg;
  /* Sidebar surfaces (Assess 3.0 navigation rail — pure black chrome) */
  --beam-sidebar-darker:    #000000;
  /* outermost rail */
  --beam-sidebar-dark:      #000000;
  /* main aside background */
  --beam-sidebar-blue-bg:   #000000;
  /* logo bar — unified with body */
  --beam-sidebar-blue:      #00C19F;
  /* icon accents — Core/Primary/100 */
  --beam-sidebar-text:       #FFFFFF;
  /* primary nav text — Core/Light/100 */
  --beam-sidebar-text-muted: #CFCDC9;
  /* submenu / secondary text — Core/Light/900 (warm grey) */
  --beam-sidebar-border:     rgba(255, 255, 255, 0.10);
  /* dividers + hover wash */
  --beam-sidebar-avatar-bg:  #02515A;
  /* account avatar square — Core/Primary/700 */
}

/* ! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder{
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder{
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper{
  padding: 0;
}

::-webkit-date-and-time-value{
  min-height: 1.5em;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
  padding-top: 0;
  padding-bottom: 0;
}

select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple]{
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio']{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox']{
  border-radius: 0px;
}

[type='radio']{
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked{
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type='radio']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
  border-color: transparent;
  background-color: currentColor;
}

[type='file']{
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus{
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

p{
  margin-bottom: 0.75rem;
}

ul{
  list-style-type: disc;
}

ol{
  list-style-type: decimal;
}

ul, ol{
  padding-left: 1.5rem;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

.container{
  width: 100%;
}

.\!container{
  width: 100% !important;
}

@media (min-width: 640px){
  .container{
    max-width: 640px;
  }

  .\!container{
    max-width: 640px !important;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px;
  }

  .\!container{
    max-width: 768px !important;
  }
}

@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }

  .\!container{
    max-width: 1024px !important;
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }

  .\!container{
    max-width: 1280px !important;
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }

  .\!container{
    max-width: 1536px !important;
  }
}

/* Primary: solid teal pill, white ink. Surface uses Core/Primary/300
     (= --primary-300, #0B8E77) per Figma Buttons 2.0 spec. */

.btn-primary{
  position: relative;
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-weight: 700;
  color: var(--corelight-100);
}

.btn-primary:disabled{
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--primary-300);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--primary-500);
}

/* Disabled is a muted grey, NOT `opacity-50` over the teal (standards §9, S-02).
     The pale-teal wash `opacity-50` produced is what made the idle Confirm on Add Site and the
     idle Save in the component modals read as "already pressed / broken" — a user cannot tell a
     disabled primary from an enabled one that just looks washed out. Matches the disabled
     treatment in components.css so the two vocabularies agree. */

.btn-primary:disabled {
  background-color: var(--light-700);
  color: var(--coredark-100);
}

/* Canonical secondary: shared with /css/new/components.css. */

.secondary-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 1px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--corelight-100);
  border-color: var(--corelight-900);
  box-sizing: border-box;
  color: var(--coredark-700);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--body-small-font-size);
  font-weight: var(--headings-large-h5-font-weight);
  gap: var(--space-2);
  line-height: var(--body-small-line-height);
  min-height: var(--control-height);
  padding: var(--control-pad-y) var(--control-pad-x);
  text-decoration: none;
  white-space: nowrap;
}

.secondary-btn:hover:not(:disabled) {
  background-color: var(--corelight-300);
}

.secondary-btn:disabled {
  background-color: var(--light-700);
  border-color: var(--light-700);
  color: var(--coredark-100);
  cursor: not-allowed;
  opacity: 1;
}

.btn-tertiary{
  position: relative;
  display: inline-flex;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  border-width: 1px;
  background-color: var(--corelight-100);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  color: var(--coredark-900);
}

.btn-tertiary:hover{
  background-color: var(--corelight-300);
}

.btn-tertiary {
  border-color: var(--beam-grey);
}

/* Toggle switch (Figma node 4281:5029): a thin 40×10 track in Core/Light/700
     (#DFDFE2) with a large 20px round knob that overlaps the track and slides
     right when on. The knob carries the colour — Core/Primary/300 (#0B8E77)
     when on, a muted grey when off. */

.beam-toggle{
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  width: 40px;
  height: 20px;
}

.beam-toggle input{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.beam-toggle .track{
  position: absolute;
  border-radius: 9999px;
  left: 0;
  top: 5px;
  width: 40px;
  height: 10px;
  background-color: var(--light-700);
}

.beam-toggle .knob{
  position: absolute;
  border-radius: 9999px;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--coredark-100);
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.beam-toggle input:checked ~ .knob {
  transform: translateX(20px);
  background-color: var(--primary-300);
}

/* Checkbox (Figma 4243:61093): white box, light border; when checked the
     box stays white and shows a teal (Core/Primary/300) check — i.e. the
     reverse of the @tailwindcss/forms default (teal fill + white check). */

/* !important so this wins over @tailwindcss/forms and any later global
     input rule regardless of stylesheet load order. */

.ds-check {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
       appearance: none !important;
  width: 16px;
  height: 16px;
  flex: none;
  background-color: #fff !important;
  background-image: none;
  border: 1px solid var(--light-700) !important;
  border-radius: 2px;
  cursor: pointer;
}

/* Typography helpers — the `font-body-*` Tailwind utilities only set
     font-family, so size/weight/line-height must come from these. */

.ds-body-sm   {
  font-family: var(--body-small-regular-font-family);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.ds-body-sm-b {
  font-family: var(--body-small-regular-font-family);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.ds-body-xs   {
  font-family: var(--body-small-regular-font-family);
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
}

.ds-h5        {
  font-family: var(--headings-large-h5-font-family);
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
}

.ds-check:checked {
  background-color: #fff !important;
  border-color: var(--light-700) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B8E77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11 12.5 5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

/* Base input styles - common to all input variants */

.input-base{
  position: relative;
  display: flex;
  height: 2.5rem;
  width: 100%;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
  overflow: hidden;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--corelight-900);
  background-color: var(--corelight-100);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: var(--body-large-regular-font-family);
  font-size: var(--body-large-regular-font-size);
  font-weight: var(--body-large-regular-font-weight);
  line-height: var(--body-large-regular-line-height);
  letter-spacing: var(--body-large-regular-letter-spacing);
  color: var(--coredark-700);
  outline: 2px solid transparent;
  outline-offset: 2px;
  font-style: var(--body-large-regular-font-style);
}

/* Input with suffix wrapper - container for input + suffix */

.input-suffix-wrapper{
  position: relative;
  display: flex;
  height: 2.5rem;
  width: 100%;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
  overflow: hidden;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--corelight-900);
  background-color: var(--corelight-100);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0px;
  padding-right: 0px;
}

/* Input field inside suffix wrapper */

.input-suffix-field{
  position: relative;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  display: flex;
  height: 2.5rem;
  flex: 1 1 0%;
  flex-grow: 1;
  align-items: center;
  gap: 0.375rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* The actual input element inside suffix wrapper */

.input-suffix-input{
  position: relative;
  flex: 1 1 0%;
  border-width: 0px;
  background-color: transparent;
  font-family: var(--body-large-regular-font-family);
  font-size: var(--body-large-regular-font-size);
  font-weight: var(--body-large-regular-font-weight);
  line-height: var(--body-large-regular-line-height);
  letter-spacing: var(--body-large-regular-letter-spacing);
  color: var(--coredark-700);
  outline: 2px solid transparent;
  outline-offset: 2px;
  font-style: var(--body-large-regular-font-style);
}

/* Suffix label (e.g., "kVA", "c/kWh") */

.input-suffix-label{
  position: relative;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  display: inline-flex;
  height: 2.5rem;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  border-left-width: 1px;
  border-style: solid;
  border-color: var(--corelight-900);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.input-suffix-text{
  position: relative;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  font-family: var(--body-large-regular-font-family);
  font-size: var(--body-large-regular-font-size);
  font-weight: var(--body-large-regular-font-weight);
  line-height: var(--body-large-regular-line-height);
  letter-spacing: var(--body-large-regular-letter-spacing);
  color: var(--coredark-100);
  font-style: var(--body-large-regular-font-style);
}

.btn{
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.btn:disabled{
  opacity: 0.5;
}

.\!btn{
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.\!btn:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.\!btn:disabled{
  opacity: 0.5;
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none{
  pointer-events: none;
}

.visible{
  visibility: visible;
}

.\!visible{
  visibility: visible !important;
}

.invisible{
  visibility: hidden;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.inset-4{
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
}

.left-24{
  left: 6rem;
}

.top-8{
  top: 2rem;
}

.top-0{
  top: 0px;
}

.left-0{
  left: 0px;
}

.right-0{
  right: 0px;
}

.top-full{
  top: 100%;
}

.top-\[100\%\]{
  top: 100%;
}

.right-5{
  right: 1.25rem;
}

.top-1\/2{
  top: 50%;
}

.left-full{
  left: 100%;
}

.top-5{
  top: 1.25rem;
}

.-top-px{
  top: -1px;
}

.left-56{
  left: 14rem;
}

.isolate{
  isolation: isolate;
}

.z-20{
  z-index: 20;
}

.z-30{
  z-index: 30;
}

.z-10{
  z-index: 10;
}

.z-\[10000\]{
  z-index: 10000;
}

.z-\[9999\]{
  z-index: 9999;
}

.z-\[10001\]{
  z-index: 10001;
}

.z-50{
  z-index: 50;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.col-span-1{
  grid-column: span 1 / span 1;
}

.m-2{
  margin: 0.5rem;
}

.m-4{
  margin: 1rem;
}

.m-6{
  margin: 1.5rem;
}

.m-1{
  margin: 0.25rem;
}

.m-0{
  margin: 0px;
}

.-m-px{
  margin: -1px;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mx-3{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-32{
  margin-left: 8rem;
  margin-right: 8rem;
}

.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mx-6{
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-8{
  margin-left: 2rem;
  margin-right: 2rem;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.-mx-6{
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-0{
  margin-bottom: 0px;
}

.mt-4{
  margin-top: 1rem;
}

.-mb-px{
  margin-bottom: -1px;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-1{
  margin-left: 0.25rem;
}

.mr-4{
  margin-right: 1rem;
}

.ml-8{
  margin-left: 2rem;
}

.ml-4{
  margin-left: 1rem;
}

.-mt-px{
  margin-top: -1px;
}

.mr-1{
  margin-right: 0.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.ml-3{
  margin-left: 0.75rem;
}

.ml-5{
  margin-left: 1.25rem;
}

.mt-8{
  margin-top: 2rem;
}

.mb-12{
  margin-bottom: 3rem;
}

.mt-0{
  margin-top: 0px;
}

.mr-2{
  margin-right: 0.5rem;
}

.-mt-1{
  margin-top: -0.25rem;
}

.-mb-1{
  margin-bottom: -0.25rem;
}

.mt-\[-1\.00px\]{
  margin-top: -1.00px;
}

.-ml-6{
  margin-left: -1.5rem;
}

.-mr-6{
  margin-right: -1.5rem;
}

.-mt-0\.5{
  margin-top: -0.125rem;
}

.ml-0\.5{
  margin-left: 0.125rem;
}

.-mt-0{
  margin-top: -0px;
}

.ml-0{
  margin-left: 0px;
}

.mt-5{
  margin-top: 1.25rem;
}

.mb-\[-1\.00px\]{
  margin-bottom: -1.00px;
}

.-mt-3{
  margin-top: -0.75rem;
}

.mt-\[15px\]{
  margin-top: 15px;
}

.mb-\[15px\]{
  margin-bottom: 15px;
}

.ml-auto{
  margin-left: auto;
}

.mt-auto{
  margin-top: auto;
}

.mt-\[-1px\]{
  margin-top: -1px;
}

.-ml-px{
  margin-left: -1px;
}

.box-border{
  box-sizing: border-box;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.\!table{
  display: table !important;
}

.table-cell{
  display: table-cell;
}

.table-column{
  display: table-column;
}

.table-header-group{
  display: table-header-group;
}

.table-row-group{
  display: table-row-group;
}

.table-row{
  display: table-row;
}

.flow-root{
  display: flow-root;
}

.grid{
  display: grid;
}

.\!grid{
  display: grid !important;
}

.inline-grid{
  display: inline-grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.\!hidden{
  display: none !important;
}

.h-3{
  height: 0.75rem;
}

.h-1{
  height: 0.25rem;
}

.h-5{
  height: 1.25rem;
}

.h-10{
  height: 2.5rem;
}

.h-6{
  height: 1.5rem;
}

.h-8{
  height: 2rem;
}

.h-4{
  height: 1rem;
}

.h-full{
  height: 100%;
}

.h-16{
  height: 4rem;
}

.h-7{
  height: 1.75rem;
}

.h-\[calc\(100vh-40px\)\]{
  height: calc(100vh - 40px);
}

.h-12{
  height: 3rem;
}

.h-screen{
  height: 100vh;
}

.h-px{
  height: 1px;
}

.h-20{
  height: 5rem;
}

.h-\[14px\]{
  height: 14px;
}

.h-\[240px\]{
  height: 240px;
}

.h-\[15px\]{
  height: 15px;
}

.h-\[17px\]{
  height: 17px;
}

.h-9{
  height: 2.25rem;
}

.h-\[40px\]{
  height: 40px;
}

.h-\[calc\(100vh-80px\)\]{
  height: calc(100vh - 80px);
}

.h-40{
  height: 10rem;
}

.h-\[105px\]{
  height: 105px;
}

.h-3\.5{
  height: 0.875rem;
}

.h-\[280px\]{
  height: 280px;
}

.h-\[42px\]{
  height: 42px;
}

.h-11{
  height: 2.75rem;
}

.h-1\.5{
  height: 0.375rem;
}

.h-2\.5{
  height: 0.625rem;
}

.h-2{
  height: 0.5rem;
}

.h-\[200px\]{
  height: 200px;
}

.h-\[36px\]{
  height: 36px;
}

.max-h-48{
  max-height: 12rem;
}

.max-h-96{
  max-height: 24rem;
}

.max-h-\[60vh\]{
  max-height: 60vh;
}

.max-h-72{
  max-height: 18rem;
}

.max-h-\[90vh\]{
  max-height: 90vh;
}

.min-h-screen{
  min-height: 100vh;
}

.min-h-0{
  min-height: 0px;
}

.min-h-\[1em\]{
  min-height: 1em;
}

.w-3{
  width: 0.75rem;
}

.w-full{
  width: 100%;
}

.w-24{
  width: 6rem;
}

.w-20{
  width: 5rem;
}

.w-5{
  width: 1.25rem;
}

.w-72{
  width: 18rem;
}

.w-6{
  width: 1.5rem;
}

.w-60{
  width: 15rem;
}

.w-48{
  width: 12rem;
}

.w-4{
  width: 1rem;
}

.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.w-3\/4{
  width: 75%;
}

.w-16{
  width: 4rem;
}

.w-8{
  width: 2rem;
}

.w-1{
  width: 0.25rem;
}

.w-28{
  width: 7rem;
}

.w-44{
  width: 11rem;
}

.w-7{
  width: 1.75rem;
}

.w-10{
  width: 2.5rem;
}

.w-80{
  width: 20rem;
}

.w-64{
  width: 16rem;
}

.w-auto{
  width: auto;
}

.w-\[480px\]{
  width: 480px;
}

.w-px{
  width: 1px;
}

.w-40{
  width: 10rem;
}

.w-\[108px\]{
  width: 108px;
}

.w-\[332px\]{
  width: 332px;
}

.w-\[17px\]{
  width: 17px;
}

.w-\[14px\]{
  width: 14px;
}

.w-\[152px\]{
  width: 152px;
}

.w-\[106px\]{
  width: 106px;
}

.w-\[15px\]{
  width: 15px;
}

.w-\[min\(\2026\)\]{
  width: min(…);
}

.w-\[200px\]{
  width: 200px;
}

.w-\[204px\]{
  width: 204px;
}

.w-\[142px\]{
  width: 142px;
}

.w-\[600px\]{
  width: 600px;
}

.w-9{
  width: 2.25rem;
}

.w-\[640px\]{
  width: 640px;
}

.w-\[180px\]{
  width: 180px;
}

.w-\[240px\]{
  width: 240px;
}

.w-\[105px\]{
  width: 105px;
}

.w-\[184px\]{
  width: 184px;
}

.w-2{
  width: 0.5rem;
}

.w-\[863px\]{
  width: 863px;
}

.w-\[674px\]{
  width: 674px;
}

.w-56{
  width: 14rem;
}

.w-\[7px\]{
  width: 7px;
}

.w-\[9px\]{
  width: 9px;
}

.w-\[10px\]{
  width: 10px;
}

.w-\[11px\]{
  width: 11px;
}

.w-1\.5{
  width: 0.375rem;
}

.w-\[73px\]{
  width: 73px;
}

.min-w-full{
  min-width: 100%;
}

.min-w-0{
  min-width: 0px;
}

.max-w-screen-lg{
  max-width: 1024px;
}

.max-w-4xl{
  max-width: 56rem;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-screen-xl{
  max-width: 1280px;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-2xl{
  max-width: 42rem;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-xs{
  max-width: 20rem;
}

.max-w-5xl{
  max-width: 64rem;
}

.max-w-none{
  max-width: none;
}

.max-w-full{
  max-width: 100%;
}

.max-w-\[100rem\]{
  max-width: 100rem;
}

.max-w-\[14rem\]{
  max-width: 14rem;
}

.max-w-\[12rem\]{
  max-width: 12rem;
}

.max-w-\[90vw\]{
  max-width: 90vw;
}

.max-w-\[580px\]{
  max-width: 580px;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-none{
  flex: none;
}

.flex-\[0_0_auto\]{
  flex: 0 0 auto;
}

.flex-\[1_0_0\]{
  flex: 1 0 0;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.flex-shrink{
  flex-shrink: 1;
}

.shrink-0{
  flex-shrink: 0;
}

.shrink{
  flex-shrink: 1;
}

.flex-grow{
  flex-grow: 1;
}

.grow{
  flex-grow: 1;
}

.basis-full{
  flex-basis: 100%;
}

.basis-32{
  flex-basis: 8rem;
}

.basis-16{
  flex-basis: 4rem;
}

.basis-8{
  flex-basis: 2rem;
}

.basis-\[25vw\]{
  flex-basis: 25vw;
}

.table-fixed{
  table-layout: fixed;
}

.border-collapse{
  border-collapse: collapse;
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

@keyframes pulse{
  50%{
    opacity: .5;
  }
}

.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cursor-pointer{
  cursor: pointer;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-default{
  cursor: default;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-all{
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize-y{
  resize: vertical;
}

.resize{
  resize: both;
}

.list-inside{
  list-style-position: inside;
}

.list-disc{
  list-style-type: disc;
}

.list-none{
  list-style-type: none;
}

.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.flex-row{
  flex-direction: row;
}

.flex-col{
  flex-direction: column;
}

.flex-wrap{
  flex-wrap: wrap;
}

.place-content-between{
  place-content: space-between;
}

.content-start{
  align-content: flex-start;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-baseline{
  align-items: baseline;
}

.items-stretch{
  align-items: stretch;
}

.justify-start{
  justify-content: flex-start;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-4{
  gap: 1rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-1{
  gap: 0.25rem;
}

.gap-8{
  gap: 2rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-0\.5{
  gap: 0.125rem;
}

.gap-0{
  gap: 0px;
}

.gap-1\.5{
  gap: 0.375rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-10{
  gap: 2.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-\[8px\]{
  gap: 8px;
}

.gap-\[10px\]{
  gap: 10px;
}

.gap-\[5px\]{
  gap: 5px;
}

.gap-\[6\.5px\]{
  gap: 6.5px;
}

.gap-\[2px\]{
  gap: 2px;
}

.gap-y-2{
  row-gap: 0.5rem;
}

.gap-x-2{
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-y-1{
  row-gap: 0.25rem;
}

.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

.divide-gray-300 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
}

.self-start{
  align-self: flex-start;
}

.self-center{
  align-self: center;
}

.self-stretch{
  align-self: stretch;
}

.overflow-auto{
  overflow: auto;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-clip{
  overflow: clip;
}

.overflow-visible{
  overflow: visible;
}

.overflow-x-auto{
  overflow-x: auto;
}

.overflow-y-auto{
  overflow-y: auto;
}

.overflow-x-hidden{
  overflow-x: hidden;
}

.overflow-y-hidden{
  overflow-y: hidden;
}

.overflow-x-clip{
  overflow-x: clip;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis{
  text-overflow: ellipsis;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.whitespace-pre-line{
  white-space: pre-line;
}

.whitespace-pre-wrap{
  white-space: pre-wrap;
}

.break-all{
  word-break: break-all;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-\[8px_8px_0px_0px\]{
  border-radius: 8px 8px 0px 0px;
}

.rounded-\[20px\]{
  border-radius: 20px;
}

.rounded-\[5px\]{
  border-radius: 5px;
}

.rounded-sm{
  border-radius: 0.125rem;
}

.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-md{
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.rounded-b-none{
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.rounded-t-none{
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.rounded-b{
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-b-lg{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-t{
  border-top-width: 1px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-0{
  border-bottom-width: 0px;
}

.border-t-0{
  border-top-width: 0px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-l{
  border-left-width: 1px;
}

.\!border-b{
  border-bottom-width: 1px !important;
}

.border-t-2{
  border-top-width: 2px;
}

.border-l-0{
  border-left-width: 0px;
}

.border-r-2{
  border-right-width: 2px;
}

.border-l-2{
  border-left-width: 2px;
}

.border-r{
  border-right-width: 1px;
}

.border-r-0{
  border-right-width: 0px;
}

.border-solid{
  border-style: solid;
}

.border-dashed{
  border-style: dashed;
}

.border-none{
  border-style: none;
}

.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
}

.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.border-beam-teal{
  --tw-border-opacity: 1;
  border-color: rgb(var(--beam-teal-rgb) / var(--tw-border-opacity));
}

.border-transparent{
  border-color: transparent;
}

.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity));
}

.border-emerald-200{
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity));
}

.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity));
}

.border-rose-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity));
}

.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity));
}

.border-slate-500{
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity));
}

.border-slate-300{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity));
}

.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity));
}

.border-slate-100{
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity));
}

.border-corelight-500{
  border-color: var(--corelight-500);
}

.border-rose-400{
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / var(--tw-border-opacity));
}

.border-coredark-700{
  border-color: var(--coredark-700);
}

.border-blue-600{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

.border-beam-teal\/30{
  border-color: rgb(var(--beam-teal-rgb) / 0.3);
}

.border-red-600{
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}

.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

.border-beam-teal\/20{
  border-color: rgb(var(--beam-teal-rgb) / 0.2);
}

.border-corelight-900{
  border-color: var(--corelight-900);
}

.border-\[\#ccd3e4\]{
  --tw-border-opacity: 1;
  border-color: rgb(204 211 228 / var(--tw-border-opacity));
}

.border-\[\#eaeaea\]{
  --tw-border-opacity: 1;
  border-color: rgb(234 234 234 / var(--tw-border-opacity));
}

.border-\[\#dfe4ee\]{
  --tw-border-opacity: 1;
  border-color: rgb(223 228 238 / var(--tw-border-opacity));
}

.border-\[\#0000001a\]{
  border-color: #0000001a;
}

.border-black\/10{
  border-color: rgb(0 0 0 / 0.1);
}

.border-corelight-300{
  border-color: var(--corelight-300);
}

.border-\[rgba\(0\2c 0\2c 0\2c 0\.5\)\]{
  border-color: rgba(0,0,0,0.5);
}

.border-\[\#e8e9ed\]{
  --tw-border-opacity: 1;
  border-color: rgb(232 233 237 / var(--tw-border-opacity));
}

.border-current{
  border-color: currentColor;
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-\[\#CCD3E4\]{
  --tw-border-opacity: 1;
  border-color: rgb(204 211 228 / var(--tw-border-opacity));
}

.border-\[\#323232\]{
  --tw-border-opacity: 1;
  border-color: rgb(50 50 50 / var(--tw-border-opacity));
}

.border-\[\#E8EAED\]{
  --tw-border-opacity: 1;
  border-color: rgb(232 234 237 / var(--tw-border-opacity));
}

.border-\[\#e8eaed\]{
  --tw-border-opacity: 1;
  border-color: rgb(232 234 237 / var(--tw-border-opacity));
}

.border-beam-sidebar-border{
  border-color: var(--beam-sidebar-border);
}

.border-black{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.border-\[var\(--Core-Light-500\2c \#E8EAED\)\]{
  border-color: var(--Core-Light-500,#E8EAED);
}

.border-beam-sidebar-blue{
  border-color: var(--beam-sidebar-blue);
}

.border-t-transparent{
  border-top-color: transparent;
}

.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.bg-corelight-100{
  background-color: var(--corelight-100);
}

.bg-beam-teal{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--beam-teal-rgb) / var(--tw-bg-opacity));
}

.bg-transparent{
  background-color: transparent;
}

.bg-emerald-50{
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
}

.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
}

.bg-rose-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity));
}

.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}

.bg-amber-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}

.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-corelight-300{
  background-color: var(--corelight-300);
}

.bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}

.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.bg-emerald-100{
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity));
}

.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.bg-blue-300{
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
}

.bg-blue-200{
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}

.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.bg-beam-teal\/60{
  background-color: rgb(var(--beam-teal-rgb) / 0.6);
}

.bg-beam-teal\/40{
  background-color: rgb(var(--beam-teal-rgb) / 0.4);
}

.bg-beam-teal\/30{
  background-color: rgb(var(--beam-teal-rgb) / 0.3);
}

.bg-beam-teal\/20{
  background-color: rgb(var(--beam-teal-rgb) / 0.2);
}

.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}

.bg-purple-50{
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
}

.bg-teal-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity));
}

.bg-beam-teal\/10{
  background-color: rgb(var(--beam-teal-rgb) / 0.1);
}

.bg-beam-sidebar-darker{
  background-color: var(--beam-sidebar-darker);
}

.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-\[\#0000001a\]{
  background-color: #0000001a;
}

.bg-corelight-900{
  background-color: var(--corelight-900);
}

.bg-\[var\(--light-300\)\]{
  background-color: var(--light-300);
}

.bg-beam-green{
  background-color: var(--beam-green);
}

.bg-white\/10{
  background-color: rgb(255 255 255 / 0.1);
}

.bg-coredark-900{
  background-color: var(--coredark-900);
}

.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}

.bg-corelight-500{
  background-color: var(--corelight-500);
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-energy-btm-battery{
  background-color: var(--btm-battery);
}

.bg-\[\#E4E4E4\]{
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 228 / var(--tw-bg-opacity));
}

.bg-\[\#323232\]{
  --tw-bg-opacity: 1;
  background-color: rgb(50 50 50 / var(--tw-bg-opacity));
}

.bg-\[\#f4f4f4\]{
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity));
}

.bg-\[\#ccd3e4\]{
  --tw-bg-opacity: 1;
  background-color: rgb(204 211 228 / var(--tw-bg-opacity));
}

.bg-beam-sidebar-dark{
  background-color: var(--beam-sidebar-dark);
}

.bg-beam-sidebar-blue-bg{
  background-color: var(--beam-sidebar-blue-bg);
}

.bg-current{
  background-color: currentColor;
}

.bg-beam-sidebar-avatar-bg{
  background-color: var(--beam-sidebar-avatar-bg);
}

.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}

.bg-opacity-10{
  --tw-bg-opacity: 0.1;
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.p-6{
  padding: 1.5rem;
}

.p-2{
  padding: 0.5rem;
}

.p-8{
  padding: 2rem;
}

.p-4{
  padding: 1rem;
}

.p-3{
  padding: 0.75rem;
}

.p-0{
  padding: 0px;
}

.p-1{
  padding: 0.25rem;
}

.p-\[8px_20px\]{
  padding: 8px 20px;
}

.p-5{
  padding: 1.25rem;
}

.p-1\.5{
  padding: 0.375rem;
}

.p-10{
  padding: 2.5rem;
}

.p-\[12px\]{
  padding: 12px;
}

.p-\[20px_20px_8px_16px\]{
  padding: 20px 20px 8px 16px;
}

.p-\[8px_20px_0px_16px\]{
  padding: 8px 20px 0px 16px;
}

.p-\[8px_20px_0px_0px\]{
  padding: 8px 20px 0px 0px;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.px-0{
  padding-left: 0px;
  padding-right: 0px;
}

.px-\[10px\]{
  padding-left: 10px;
  padding-right: 10px;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-\[12px\]{
  padding-left: 12px;
  padding-right: 12px;
}

.pl-6{
  padding-left: 1.5rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pr-4{
  padding-right: 1rem;
}

.pl-10{
  padding-left: 2.5rem;
}

.pr-8{
  padding-right: 2rem;
}

.pt-10{
  padding-top: 2.5rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pl-9{
  padding-left: 2.25rem;
}

.pr-3{
  padding-right: 0.75rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pr-10{
  padding-right: 2.5rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-7{
  padding-left: 1.75rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pb-0{
  padding-bottom: 0px;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-1{
  padding-top: 0.25rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pb-1{
  padding-bottom: 0.25rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pb-5{
  padding-bottom: 1.25rem;
}

.pr-1{
  padding-right: 0.25rem;
}

.pt-8{
  padding-top: 2rem;
}

.pt-0{
  padding-top: 0px;
}

.pr-6{
  padding-right: 1.5rem;
}

.pl-5{
  padding-left: 1.25rem;
}

.pr-\[16px\]{
  padding-right: 16px;
}

.pl-\[3px\]{
  padding-left: 3px;
}

.pr-5{
  padding-right: 1.25rem;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pr-\[45px\]{
  padding-right: 45px;
}

.pl-0{
  padding-left: 0px;
}

.pb-2\.5{
  padding-bottom: 0.625rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pt-12{
  padding-top: 3rem;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.align-top{
  vertical-align: top;
}

.align-middle{
  vertical-align: middle;
}

.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-body-small-bold{
  font-family: var(--body-small-bold-font-family);
}

.font-headings-large-h4{
  font-family: var(--headings-large-h4-font-family);
}

.font-body-small-regular{
  font-family: var(--body-small-regular-font-family);
}

.font-headings-large-h5{
  font-family: var(--headings-large-h5-font-family);
}

.font-body-large-regular{
  font-family: var(--body-large-regular-font-family);
}

.font-headings-large-h2{
  font-family: var(--headings-large-h2-font-family);
}

.font-headings-large-h3{
  font-family: var(--headings-large-h3-font-family);
}

.font-work-sans{
  font-family: "Work Sans", Arial, sans-serif;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-\[length\:var\(--headings-large-h4-font-size\)\]{
  font-size: var(--headings-large-h4-font-size);
}

.text-\[length\:var\(--body-small-regular-font-size\)\]{
  font-size: var(--body-small-regular-font-size);
}

.text-\[length\:var\(--body-large-regular-font-size\)\]{
  font-size: var(--body-large-regular-font-size);
}

.text-\[length\:var\(--headings-large-h2-font-size\)\]{
  font-size: var(--headings-large-h2-font-size);
}

.text-\[length\:var\(--headings-large-h3-font-size\)\]{
  font-size: var(--headings-large-h3-font-size);
}

.text-\[length\:var\(--headings-large-h5-font-size\)\]{
  font-size: var(--headings-large-h5-font-size);
}

.text-\[16px\]{
  font-size: 16px;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[length\:var\(--body-small-bold-font-size\)\]{
  font-size: var(--body-small-bold-font-size);
}

.text-\[9px\]{
  font-size: 9px;
}

.text-\[20px\]{
  font-size: 20px;
}

.text-\[12px\]{
  font-size: 12px;
}

.text-\[28px\]{
  font-size: 28px;
}

.text-\[14px\]{
  font-size: 14px;
}

.text-\[13px\]{
  font-size: 13px;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[length\:var\(--body-large-bold-font-size\)\]{
  font-size: var(--body-large-bold-font-size);
}

.font-bold{
  font-weight: 700;
}

.font-semibold{
  font-weight: 600;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-\[number\:var\(--headings-large-h4-font-weight\)\]{
  font-weight: var(--headings-large-h4-font-weight);
}

.font-\[number\:var\(--body-small-regular-font-weight\)\]{
  font-weight: var(--body-small-regular-font-weight);
}

.font-light{
  font-weight: 300;
}

.font-\[number\:var\(--body-large-regular-font-weight\)\]{
  font-weight: var(--body-large-regular-font-weight);
}

.font-\[number\:var\(--headings-large-h2-font-weight\)\]{
  font-weight: var(--headings-large-h2-font-weight);
}

.font-\[number\:var\(--headings-large-h3-font-weight\)\]{
  font-weight: var(--headings-large-h3-font-weight);
}

.font-\[number\:var\(--headings-large-h5-font-weight\)\]{
  font-weight: var(--headings-large-h5-font-weight);
}

.font-\[number\:var\(--body-small-bold-font-weight\)\]{
  font-weight: var(--body-small-bold-font-weight);
}

.font-\[number\:var\(--body-large-bold-font-weight\)\]{
  font-weight: var(--body-large-bold-font-weight);
}

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.not-italic{
  font-style: normal;
}

.ordinal{
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none{
  line-height: 1;
}

.leading-\[var\(--headings-large-h4-line-height\)\]{
  line-height: var(--headings-large-h4-line-height);
}

.leading-\[var\(--body-small-regular-line-height\)\]{
  line-height: var(--body-small-regular-line-height);
}

.leading-\[14px\]{
  line-height: 14px;
}

.leading-5{
  line-height: 1.25rem;
}

.leading-6{
  line-height: 1.5rem;
}

.leading-\[var\(--body-large-regular-line-height\)\]{
  line-height: var(--body-large-regular-line-height);
}

.leading-\[var\(--headings-large-h2-line-height\)\]{
  line-height: var(--headings-large-h2-line-height);
}

.leading-\[var\(--headings-large-h3-line-height\)\]{
  line-height: var(--headings-large-h3-line-height);
}

.leading-\[var\(--headings-large-h5-line-height\)\]{
  line-height: var(--headings-large-h5-line-height);
}

.leading-3{
  line-height: .75rem;
}

.leading-4{
  line-height: 1rem;
}

.leading-\[var\(--body-small-bold-line-height\)\]{
  line-height: var(--body-small-bold-line-height);
}

.leading-\[24px\]{
  line-height: 24px;
}

.leading-\[16px\]{
  line-height: 16px;
}

.leading-\[34px\]{
  line-height: 34px;
}

.leading-\[20px\]{
  line-height: 20px;
}

.leading-\[16\.8px\]{
  line-height: 16.8px;
}

.leading-tight{
  line-height: 1.25;
}

.leading-\[18px\]{
  line-height: 18px;
}

.leading-\[10px\]{
  line-height: 10px;
}

.leading-\[var\(--body-large-bold-line-height\)\]{
  line-height: var(--body-large-bold-line-height);
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-wider{
  letter-spacing: 0.05em;
}

.tracking-\[var\(--headings-large-h4-letter-spacing\)\]{
  letter-spacing: var(--headings-large-h4-letter-spacing);
}

.tracking-\[var\(--body-small-regular-letter-spacing\)\]{
  letter-spacing: var(--body-small-regular-letter-spacing);
}

.tracking-\[var\(--body-large-regular-letter-spacing\)\]{
  letter-spacing: var(--body-large-regular-letter-spacing);
}

.tracking-\[var\(--headings-large-h2-letter-spacing\)\]{
  letter-spacing: var(--headings-large-h2-letter-spacing);
}

.tracking-\[var\(--headings-large-h3-letter-spacing\)\]{
  letter-spacing: var(--headings-large-h3-letter-spacing);
}

.tracking-\[var\(--headings-large-h5-letter-spacing\)\]{
  letter-spacing: var(--headings-large-h5-letter-spacing);
}

.tracking-\[0\]{
  letter-spacing: 0;
}

.tracking-\[0\.08em\]{
  letter-spacing: 0.08em;
}

.tracking-\[var\(--body-small-bold-letter-spacing\)\]{
  letter-spacing: var(--body-small-bold-letter-spacing);
}

.tracking-\[var\(--body-large-bold-letter-spacing\)\]{
  letter-spacing: var(--body-large-bold-letter-spacing);
}

.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.text-coredark-900{
  color: var(--coredark-900);
}

.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity));
}

.text-beam-teal{
  --tw-text-opacity: 1;
  color: rgb(var(--beam-teal-rgb) / var(--tw-text-opacity));
}

.text-beam-teal\/80{
  color: rgb(var(--beam-teal-rgb) / 0.8);
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-emerald-700{
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity));
}

.text-rose-700{
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity));
}

.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity));
}

.text-coredark-100{
  color: var(--coredark-100);
}

.text-coredark-700{
  color: var(--coredark-700);
}

.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}

.text-slate-900{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}

.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity));
}

.text-slate-700{
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}

.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.text-emerald-900{
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity));
}

.text-amber-900{
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity));
}

.text-red-900{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity));
}

.text-rose-600{
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity));
}

.text-blue-500{
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));
}

.text-\[\#35475C\]{
  --tw-text-opacity: 1;
  color: rgb(53 71 92 / var(--tw-text-opacity));
}

.text-\[\#00C19F\]{
  --tw-text-opacity: 1;
  color: rgb(0 193 159 / var(--tw-text-opacity));
}

.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}

.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity));
}

.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.text-purple-700{
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity));
}

.text-teal-700{
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity));
}

.text-corelight-100{
  color: var(--corelight-100);
}

.text-beam-sidebar-text{
  color: var(--beam-sidebar-text);
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-beam-green{
  color: var(--beam-green);
}

.text-\[\#1e1e1e\]{
  --tw-text-opacity: 1;
  color: rgb(30 30 30 / var(--tw-text-opacity));
}

.text-\[\#7d7d7d\]{
  --tw-text-opacity: 1;
  color: rgb(125 125 125 / var(--tw-text-opacity));
}

.text-white\/80{
  color: rgb(255 255 255 / 0.8);
}

.text-\[\#546683\]{
  --tw-text-opacity: 1;
  color: rgb(84 102 131 / var(--tw-text-opacity));
}

.text-\[\#171B1F\]{
  --tw-text-opacity: 1;
  color: rgb(23 27 31 / var(--tw-text-opacity));
}

.text-coredark-500{
  color: var(--coredark-500);
}

.text-white\/70{
  color: rgb(255 255 255 / 0.7);
}

.text-beam-sidebar-text-muted{
  color: var(--beam-sidebar-text-muted);
}

.text-beam-sidebar-blue{
  color: var(--beam-sidebar-blue);
}

.text-\[\#d32f2f\]{
  --tw-text-opacity: 1;
  color: rgb(211 47 47 / var(--tw-text-opacity));
}

.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity));
}

.text-indigo-700{
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity));
}

.text-energy-gas{
  color: var(--energy-gas);
}

.underline{
  text-decoration-line: underline;
}

.overline{
  text-decoration-line: overline;
}

.line-through{
  text-decoration-line: line-through;
}

.no-underline{
  text-decoration-line: none;
}

.underline-offset-4{
  text-underline-offset: 4px;
}

.underline-offset-2{
  text-underline-offset: 2px;
}

.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-coredark-100::-moz-placeholder{
  color: var(--coredark-100);
}

.placeholder-coredark-100::placeholder{
  color: var(--coredark-100);
}

.opacity-50{
  opacity: 0.5;
}

.opacity-80{
  opacity: 0.8;
}

.opacity-100{
  opacity: 1;
}

.opacity-70{
  opacity: 0.7;
}

.opacity-90{
  opacity: 0.9;
}

.opacity-10{
  opacity: 0.1;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-25{
  opacity: 0.25;
}

.opacity-75{
  opacity: 0.75;
}

.opacity-30{
  opacity: 0.3;
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_12px_rgba\(0\2c 0\2c 0\2c 0\.15\)\]{
  --tw-shadow: 0 4px 12px rgba(0,0,0,0.15);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[2px_2px_20px_rgba\(0\2c 0\2c 0\2c 0\.15\)\]{
  --tw-shadow: 2px 2px 20px rgba(0,0,0,0.15);
  --tw-shadow-colored: 2px 2px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[2px_2px_20px_0_rgba\(0\2c 0\2c 0\2c 0\.20\)\]{
  --tw-shadow: 2px 2px 20px 0 rgba(0,0,0,0.20);
  --tw-shadow-colored: 2px 2px 20px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[2px_2px_20px_0_rgba\(0\2c 0\2c 0\2c 0\.10\)\]{
  --tw-shadow: 2px 2px 20px 0 rgba(0,0,0,0.10);
  --tw-shadow-colored: 2px 2px 20px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[1px_1px_5px_0_rgba\(0\2c 0\2c 0\2c 0\.15\)\]{
  --tw-shadow: 1px 1px 5px 0 rgba(0,0,0,0.15);
  --tw-shadow-colored: 1px 1px 5px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.\!ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.ring-black\/5{
  --tw-ring-color: rgb(0 0 0 / 0.05);
}

.ring-gray-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
}

.ring-amber-200{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity));
}

.ring-beam-teal{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--beam-teal-rgb) / var(--tw-ring-opacity));
}

.ring-beam-teal\/20{
  --tw-ring-color: rgb(var(--beam-teal-rgb) / 0.2);
}

.ring-green-600\/20{
  --tw-ring-color: rgb(22 163 74 / 0.2);
}

.ring-gray-500\/20{
  --tw-ring-color: rgb(107 114 128 / 0.2);
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-0{
  --tw-brightness: brightness(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-filter{
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300{
  transition-duration: 300ms;
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.link{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.link:hover{
  text-decoration-line: underline;
}

.\!link{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.\!link:hover{
  text-decoration-line: underline;
}

.\[font-style\:var\(--headings-large-h4-font-style\)\]{
  font-style: var(--headings-large-h4-font-style);
}

.\[font-style\:var\(--body-small-regular-font-style\)\]{
  font-style: var(--body-small-regular-font-style);
}

.\[font-style\:var\(--body-large-regular-font-style\)\]{
  font-style: var(--body-large-regular-font-style);
}

.\[border-right-style\:solid\]{
  border-right-style: solid;
}

.\[font-style\:var\(--headings-large-h2-font-style\)\]{
  font-style: var(--headings-large-h2-font-style);
}

.\[font-style\:var\(--headings-large-h3-font-style\)\]{
  font-style: var(--headings-large-h3-font-style);
}

.\[font-style\:var\(--headings-large-h5-font-style\)\]{
  font-style: var(--headings-large-h5-font-style);
}

.\[font-style\:var\(--body-small-bold-font-style\)\]{
  font-style: var(--body-small-bold-font-style);
}

.\[border-bottom-style\:solid\]{
  border-bottom-style: solid;
}

.\[border-left-style\:solid\]{
  border-left-style: solid;
}

.\[border-top-style\:solid\]{
  border-top-style: solid;
}

.\[font-style\:var\(--body-large-bold-font-style\)\]{
  font-style: var(--body-large-bold-font-style);
}

.\[key\:string\]{
  key: string;
}

/* Canonical hatch pattern — single source of truth for the
   "exported flow" stripes (solar exported, battery charged, …).
   Kept OUTSIDE @layer utilities so Tailwind's purger doesn't drop
   it (the `bg-` prefix collides with built-in colour utilities and
   the class gets eliminated). Override --hatch-color on the
   element itself, e.g.:

     <div class="bg-hatch" style="--hatch-color: var(--energy-solar)"></div>

   Charts (canvas-based) can't consume this directly, but should
   read the same --hatch-stripe-* / --hatch-color values via JS so
   their patterns stay in sync with HTML/SVG consumers. */

.bg-hatch {
  --hatch-color: currentColor;
  /* Solid base + translucent white stripes layered on top via the
     repeating gradient. Gaps are transparent so the base shows
     through cleanly. */
  background-color: var(--hatch-color);
  background-image: repeating-linear-gradient(
    var(--hatch-angle),
    var(--hatch-stripe-color) 0,
    var(--hatch-stripe-color) var(--hatch-stripe-width),
    transparent               var(--hatch-stripe-width),
    transparent               calc(var(--hatch-stripe-width) + var(--hatch-stripe-gap))
  );
}

.grecaptcha-badge {
  visibility: hidden;
}

.file\:mr-4::file-selector-button{
  margin-right: 1rem;
}

.file\:mr-2::file-selector-button{
  margin-right: 0.5rem;
}

.file\:rounded-md::file-selector-button{
  border-radius: 0.375rem;
}

.file\:border-0::file-selector-button{
  border-width: 0px;
}

.file\:bg-gray-100::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.file\:px-3::file-selector-button{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:px-2::file-selector-button{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.file\:py-1::file-selector-button{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:text-xs::file-selector-button{
  font-size: 0.75rem;
  line-height: 1rem;
}

.file\:font-medium::file-selector-button{
  font-weight: 500;
}

.file\:text-gray-700::file-selector-button{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.placeholder\:font-body-large-regular::-moz-placeholder{
  font-family: var(--body-large-regular-font-family);
}

.placeholder\:font-body-large-regular::placeholder{
  font-family: var(--body-large-regular-font-family);
}

.placeholder\:text-\[length\:var\(--body-large-regular-font-size\)\]::-moz-placeholder{
  font-size: var(--body-large-regular-font-size);
}

.placeholder\:text-\[length\:var\(--body-large-regular-font-size\)\]::placeholder{
  font-size: var(--body-large-regular-font-size);
}

.placeholder\:font-\[number\:var\(--body-large-regular-font-weight\)\]::-moz-placeholder{
  font-weight: var(--body-large-regular-font-weight);
}

.placeholder\:font-\[number\:var\(--body-large-regular-font-weight\)\]::placeholder{
  font-weight: var(--body-large-regular-font-weight);
}

.placeholder\:leading-\[var\(--body-large-regular-line-height\)\]::-moz-placeholder{
  line-height: var(--body-large-regular-line-height);
}

.placeholder\:leading-\[var\(--body-large-regular-line-height\)\]::placeholder{
  line-height: var(--body-large-regular-line-height);
}

.placeholder\:tracking-\[var\(--body-large-regular-letter-spacing\)\]::-moz-placeholder{
  letter-spacing: var(--body-large-regular-letter-spacing);
}

.placeholder\:tracking-\[var\(--body-large-regular-letter-spacing\)\]::placeholder{
  letter-spacing: var(--body-large-regular-letter-spacing);
}

.placeholder\:text-coredark-900::-moz-placeholder{
  color: var(--coredark-900);
}

.placeholder\:text-coredark-900::placeholder{
  color: var(--coredark-900);
}

.placeholder\:text-coredark-100::-moz-placeholder{
  color: var(--coredark-100);
}

.placeholder\:text-coredark-100::placeholder{
  color: var(--coredark-100);
}

.placeholder\:opacity-40::-moz-placeholder{
  opacity: 0.4;
}

.placeholder\:opacity-40::placeholder{
  opacity: 0.4;
}

.placeholder\:\[font-style\:var\(--body-large-regular-font-style\)\]::-moz-placeholder{
  font-style: var(--body-large-regular-font-style);
}

.placeholder\:\[font-style\:var\(--body-large-regular-font-style\)\]::placeholder{
  font-style: var(--body-large-regular-font-style);
}

.first\:border-t-0:first-child{
  border-top-width: 0px;
}

.last\:border-0:last-child{
  border-width: 0px;
}

.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.hover\:border-beam-teal\/30:hover{
  border-color: rgb(var(--beam-teal-rgb) / 0.3);
}

.hover\:border-beam-teal:hover{
  --tw-border-opacity: 1;
  border-color: rgb(var(--beam-teal-rgb) / var(--tw-border-opacity));
}

.hover\:bg-beam-teal:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(var(--beam-teal-rgb) / var(--tw-bg-opacity));
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.hover\:bg-green-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
}

.hover\:bg-amber-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
}

.hover\:bg-gray-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.hover\:bg-slate-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.hover\:bg-corelight-300:hover{
  background-color: var(--corelight-300);
}

.hover\:bg-rose-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity));
}

.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.hover\:bg-beam-teal\/10:hover{
  background-color: rgb(var(--beam-teal-rgb) / 0.1);
}

.hover\:bg-red-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.hover\:bg-corelight-100:hover{
  background-color: var(--corelight-100);
}

.hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.hover\:text-beam-teal:hover{
  --tw-text-opacity: 1;
  color: rgb(var(--beam-teal-rgb) / var(--tw-text-opacity));
}

.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.hover\:text-coredark-900:hover{
  color: var(--coredark-900);
}

.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.hover\:text-blue-800:hover{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

.hover\:text-\[\#3347c0\]:hover{
  --tw-text-opacity: 1;
  color: rgb(51 71 192 / var(--tw-text-opacity));
}

.hover\:text-gray-800:hover{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.hover\:text-red-700:hover{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:text-red-800:hover{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.hover\:text-beam-sidebar-text:hover{
  color: var(--beam-sidebar-text);
}

.hover\:text-indigo-900:hover{
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:opacity-90:hover{
  opacity: 0.9;
}

.hover\:opacity-80:hover{
  opacity: 0.8;
}

.hover\:file\:bg-gray-200::file-selector-button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.focus\:border-beam-teal:focus{
  --tw-border-opacity: 1;
  border-color: rgb(var(--beam-teal-rgb) / var(--tw-border-opacity));
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-1:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-beam-teal:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--beam-teal-rgb) / var(--tw-ring-opacity));
}

.focus\:ring-blue-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
}

.focus-visible\:outline:focus-visible{
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible{
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible{
  outline-offset: 2px;
}

.focus-visible\:outline-beam-teal:focus-visible{
  outline-color: rgb(var(--beam-teal-rgb) / 1);
}

.disabled\:opacity-50:disabled{
  opacity: 0.5;
}

.group:hover .group-hover\:block{
  display: block;
}

.group:focus .group-focus\:block{
  display: block;
}

[dir="rtl"] .rtl\:text-right{
  text-align: right;
}

@media (prefers-color-scheme: dark){
  .dark\:border-gray-700{
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity));
  }

  .dark\:bg-gray-700{
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
  }

  .dark\:bg-gray-800{
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
  }

  .dark\:text-gray-400{
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
  }

  .dark\:text-blue-500{
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
  }
}

@media (min-width: 640px){
  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:items-start{
    align-items: flex-start;
  }

  .sm\:justify-between{
    justify-content: space-between;
  }

  .sm\:rounded-lg{
    border-radius: 0.5rem;
  }

  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:pt-2{
    padding-top: 0.5rem;
  }

  .sm\:text-right{
    text-align: right;
  }
}

@media (min-width: 768px){
  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:items-end{
    align-items: flex-end;
  }

  .md\:justify-between{
    justify-content: space-between;
  }
}

@media (min-width: 1024px){
  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .lg\:block{
    display: block;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:items-center{
    align-items: center;
  }

  .lg\:justify-between{
    justify-content: space-between;
  }

  .lg\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
}