/* =============================================================================
   Daylight Design System
   Source of truth: https://github.com/Numbered-com/daylight (marketing repo)

   Scoped, self-contained stylesheet. All classes are prefixed `daylight-` and
   design tokens are scoped under `.daylight` so this file can be loaded
   alongside the global basecoat styles without conflict.

   Usage: wrap a region with `<div class="daylight">...</div>` to pick up the
   typography + color defaults, then apply `daylight-*` classes as needed.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Fonts (paths relative to this file at /static/css/daylight.css)
   ----------------------------------------------------------------------------- */
@font-face {
  font-family: "Feature Deck";
  src: url("../fonts/FeatureDeck/FeatureDeck-Regular.f75d140d9669.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-Regular.fd8b9319b807.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-RegularItalic.6f07f32cc0b9.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-Medium.ee077a23e285.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-MediumItalic.1bd49a79eff3.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-Bold.91fca4ec943e.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-BoldItalic.9f0cb1e5b6db.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ABC Social Mono";
  src: url("../fonts/ABCSocialMono/ABCSocialMono-Regular.2d79d35152b4.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Social Mono";
  src: url("../fonts/ABCSocialMono/ABCSocialMono-Bold.f317d7986f6c.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   Design tokens (scoped to .daylight)
   Colors mirror packages/config/tailwind/preset/colors.js
   ----------------------------------------------------------------------------- */
.daylight {
  /* Primary palette */
  --daylight-orange: #F66F00;
  --daylight-orange-dark: #EF6910;
  --daylight-orange-light: #FF9900;
  --daylight-orange-20: #FF8A04;
  --daylight-orange-10: #FFA224;
  --daylight-beige: #FFF7E9;
  --daylight-beige-dark: #DACAB6;
  --daylight-beige-30: #F0E5CF;
  --daylight-beige-20: #F7EED9;
  --daylight-black: #111111;
  --daylight-black-lighter: #1E1E1E;
  --daylight-offwhite: #FFFEFB;
  --daylight-grey: #A09B93;
  --daylight-grey-txt: #514E4A;
  --daylight-white: #FFFFFF;

  /* Secondary palette (marketing values) */
  --daylight-yellow: #FFD700;
  --daylight-brown: #4C2806;
  --daylight-purple: #C8B2FF;
  --daylight-purple-dark: #321F61;
  --daylight-blue: #BED5FF;
  --daylight-blue-dark: #1D3E86;

  /* Status */
  --daylight-red: #FF0000;
  --daylight-red-light: #FF2B0080;
  --daylight-warning: #FF7300;

  /* Overlays */
  --daylight-overlay-black: rgba(0, 0, 0, 0.15);
  --daylight-overlay-white: rgba(255, 255, 255, 0.30);
  --daylight-glass-bg: rgba(0, 0, 0, 0.11);
  --daylight-card-border: rgba(30, 30, 30, 0.10);
  --daylight-glass-border: rgba(255, 255, 255, 0.32);
  --daylight-white-32: rgba(255, 255, 255, 0.32);
  --daylight-input-border: rgba(28, 28, 28, 0.15);

  /* Typography */
  --daylight-font-sans: "Aeonik Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --daylight-font-mono: "ABC Social Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --daylight-font-display: "Feature Deck", "Playfair Display", Georgia, serif;

  /* Radius */
  --daylight-radius-sm: 4px;       /* marketing spec */
  --daylight-radius-panel: 6px;
  --daylight-radius-card: 16px;

  /* Motion — durations */
  --daylight-duration-hover: 150ms;
  --daylight-duration-fast: 100ms;
  --daylight-duration-base: 300ms;
  --daylight-duration-slow: 1000ms;
  --daylight-duration-reveal: 1000ms;

  /* Motion — full easing library from marketing preset */
  --daylight-ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  --daylight-ease-quad-in: cubic-bezier(0.26, 0, 0.6, 0.2);
  --daylight-ease-cubic-in: cubic-bezier(0.4, 0, 0.68, 0.06);
  --daylight-ease-quart-in: cubic-bezier(0.52, 0, 0.74, 0);
  --daylight-ease-quint-in: cubic-bezier(0.64, 0, 0.78, 0);
  --daylight-ease-sine-in: cubic-bezier(0.32, 0, 0.6, 0.36);
  --daylight-ease-expo-in: cubic-bezier(0.66, 0, 0.86, 0);
  --daylight-ease-circ-in: cubic-bezier(0.54, 0, 1, 0.44);
  --daylight-ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);

  --daylight-ease-quad-out: cubic-bezier(0.4, 0.8, 0.74, 1);
  --daylight-ease-cubic-out: cubic-bezier(0.34, 1.02, 0.68, 1);
  --daylight-ease-quart-out: cubic-bezier(0.26, 1.04, 0.54, 1);
  --daylight-ease-quint-out: cubic-bezier(0.22, 1.1, 0.48, 1);
  --daylight-ease-sine-out: cubic-bezier(0.4, 0.64, 0.68, 1);
  --daylight-ease-expo-out: cubic-bezier(0.16, 1.08, 0.38, 0.98);
  --daylight-ease-circ-out: cubic-bezier(0, 0.56, 0.46, 1);
  --daylight-ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --daylight-ease-quad-inout: cubic-bezier(0.48, 0.04, 0.52, 0.96);
  --daylight-ease-cubic-inout: cubic-bezier(0.66, 0, 0.34, 1);
  --daylight-ease-quart-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --daylight-ease-quint-inout: cubic-bezier(0.84, 0, 0.16, 1);
  --daylight-ease-sine-inout: cubic-bezier(0.36, 0, 0.64, 1);
  --daylight-ease-expo-inout: cubic-bezier(0.9, 0, 0.1, 1);
  --daylight-ease-circ-inout: cubic-bezier(0.88, 0.14, 0.12, 0.86);
  --daylight-ease-back-inout: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --daylight-ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Base typography inside a .daylight region */
  font-family: var(--daylight-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--daylight-grey-txt);
}

/* -----------------------------------------------------------------------------
   Typography — numeric size scale (matches marketing preset/fonts.js)
   ----------------------------------------------------------------------------- */
.daylight-text-7 { font-size: 7px; }
.daylight-text-8 { font-size: 8px; }
.daylight-text-9 { font-size: 9px; }
.daylight-text-10 { font-size: 10px; }
.daylight-text-11 { font-size: 11px; }
.daylight-text-12 { font-size: 12px; line-height: 1.5; letter-spacing: -0.02em; }
.daylight-text-13 { font-size: 13px; }
.daylight-text-14 { font-size: 14px; line-height: 1.4; }
.daylight-text-20 { font-size: 20px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-22 { font-size: 22px; line-height: 0.95; }
.daylight-text-28 { font-size: 28px; line-height: 0.95; }
.daylight-text-30 { font-size: 30px; line-height: 1.15; }
.daylight-text-35 { font-size: 35px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-36 { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; }
.daylight-text-40 { font-size: 40px; line-height: 1.16; }
.daylight-text-45 { font-size: 45px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-50 { font-size: 50px; line-height: 1.15; }
.daylight-text-55 { font-size: 55px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-60 { font-size: 60px; line-height: 0.95; }
.daylight-text-70 { font-size: 70px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-75 { font-size: 75px; line-height: 0.95; }
.daylight-text-85 { font-size: 85px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-100 { font-size: 100px; line-height: 0.95; }
.daylight-text-120 { font-size: 120px; line-height: 0.95; }

/* Font family utilities */
.daylight-font-sans { font-family: var(--daylight-font-sans); }
.daylight-font-mono { font-family: var(--daylight-font-mono); }
.daylight-font-display { font-family: var(--daylight-font-display); }

/* Font weight utilities */
.daylight-font-regular { font-weight: 400; }
.daylight-font-medium { font-weight: 500; }
.daylight-font-bold { font-weight: 700; }

/* Font style utilities */
.daylight-italic { font-style: italic; }

/* -----------------------------------------------------------------------------
   Semantic type presets (higher-level composition)
   ----------------------------------------------------------------------------- */
.daylight-display {
  font-family: var(--daylight-font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.daylight-display-section {
  font-family: var(--daylight-font-display);
  font-weight: 400;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.daylight-title {
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.daylight-title-sm {
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.daylight-body {
  font-family: var(--daylight-font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
}

.daylight-body-sm {
  font-family: var(--daylight-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
}

/* Mono labels — always uppercase per brand */
.daylight-label-mono {
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.daylight-label-mono-lg {
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Buttons — port of packages/ui/components/button/Button.tsx
   Shared: aeonik-pro medium, h-50, px-24, rounded-sm, text-12.
   Hover pattern: slow graceful return (1000ms) + snappy hover (100ms).
   ----------------------------------------------------------------------------- */
.daylight-btn-primary,
.daylight-btn-secondary,
.daylight-btn-gradient {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 12px;
  height: 50px;
  padding: 0 24px;
  background: transparent;
  border: 0;
  border-radius: var(--daylight-radius-sm);
  cursor: pointer;
  text-decoration: none;
  overflow: clip;
  outline: none;
  transition-property: background-color, color, opacity;
  transition-duration: var(--daylight-duration-slow);
  transition-timing-function: var(--daylight-ease-expo-out);
}

.daylight-btn-primary:hover,
.daylight-btn-secondary:hover,
.daylight-btn-gradient:hover {
  transition-duration: var(--daylight-duration-fast);
}

.daylight-btn-primary:focus-visible,
.daylight-btn-secondary:focus-visible,
.daylight-btn-gradient:focus-visible,
.daylight-btn-classic-underlined:focus-visible,
.daylight-btn-underlined:focus-visible,
.daylight-btn-solid-underlined:focus-visible {
  outline: 2px solid var(--daylight-black);
  outline-offset: 4px;
}

.daylight-btn-primary { background: var(--daylight-black); color: var(--daylight-white); }
.daylight-btn-secondary { background: var(--daylight-beige); color: var(--daylight-black); }

.daylight-btn-gradient {
  color: var(--daylight-white);
  background: linear-gradient(135deg, var(--daylight-orange) 0%, var(--daylight-orange-light) 50%, var(--daylight-yellow) 100%);
  background-size: 200% 200%;
  animation: daylight-gradient-shift 8s var(--daylight-ease-expo-inout) infinite;
}

@keyframes daylight-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Underlined link-style buttons */
.daylight-btn-classic-underlined {
  display: inline-flex;
  align-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.daylight-btn-underlined {
  position: relative;
  display: inline-block;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0 0 2px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
}
.daylight-btn-underlined::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--daylight-ease-expo-out);
  will-change: transform;
}
.daylight-btn-underlined:hover::after,
.daylight-btn-underlined:focus-visible::after {
  transform: scaleX(1);
}

.daylight-btn-solid-underlined {
  position: relative;
  display: inline-block;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0 0 4px;
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
}
.daylight-btn-solid-underlined::before,
.daylight-btn-solid-underlined::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  will-change: transform;
}
.daylight-btn-solid-underlined::before {
  transform-origin: right;
  transition: transform var(--daylight-duration-slow) var(--daylight-ease-expo-out);
  transition-delay: 75ms;
}
.daylight-btn-solid-underlined::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--daylight-duration-slow) var(--daylight-ease-expo-out);
}
.daylight-btn-solid-underlined:hover::before {
  transform: scaleX(0);
  transition-delay: 0ms;
}
.daylight-btn-solid-underlined:hover::after {
  transform: scaleX(1);
  transition-delay: 75ms;
}

/* Disabled state (shared) */
.daylight-btn-primary:disabled,
.daylight-btn-primary[aria-disabled="true"],
.daylight-btn-secondary:disabled,
.daylight-btn-secondary[aria-disabled="true"],
.daylight-btn-gradient:disabled,
.daylight-btn-gradient[aria-disabled="true"],
.daylight-btn-classic-underlined:disabled,
.daylight-btn-underlined:disabled,
.daylight-btn-solid-underlined:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Checkbox — port of packages/ui/components/checkbox/Checkbox.tsx
   Markup:
     <label class="daylight-checkbox">
       <input type="checkbox" class="daylight-checkbox-input">
       <span class="daylight-checkbox-visual"></span>
       <span>Label text</span>
     </label>
   ----------------------------------------------------------------------------- */
.daylight-checkbox {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  text-align: left;
  font-family: var(--daylight-font-sans);
  font-weight: 300;
  font-size: 12px;
  color: var(--daylight-black);
}

.daylight-checkbox:has(.daylight-checkbox-input:disabled) {
  pointer-events: none;
  cursor: auto;
  opacity: 0.6;
}

.daylight-checkbox-input {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.daylight-checkbox-visual {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--daylight-black);
  border-radius: var(--daylight-radius-sm);
  color: var(--daylight-black);
  transition: background-color var(--daylight-duration-base) var(--daylight-ease-quart-out),
              border-color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-checkbox-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M2 6L5 9L10 3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
  opacity: 0;
  transition: opacity var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-checkbox-input:checked + .daylight-checkbox-visual {
  background-color: var(--daylight-black);
  border-color: rgba(255, 255, 255, 0.4);
}
.daylight-checkbox-input:checked + .daylight-checkbox-visual::after {
  opacity: 1;
}
.daylight-checkbox-input:focus-visible + .daylight-checkbox-visual {
  outline: 2px solid var(--daylight-black);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Toggle — port of packages/ui/components/toggle/Toggle.tsx
   Markup:
     <label class="daylight-toggle">
       <input type="checkbox" class="daylight-toggle-input">
       <span class="daylight-toggle-visual"></span>
     </label>
   ----------------------------------------------------------------------------- */
.daylight-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--daylight-black);
}

.daylight-toggle:has(.daylight-toggle-input:disabled) {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

.daylight-toggle-input {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.daylight-toggle-visual {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--daylight-black);
  border-radius: 9999px;
  background: transparent;
  transition: background-color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-toggle-visual::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  background: var(--daylight-white);
  border: 1px solid var(--daylight-black);
  border-radius: 9999px;
  transform: translateX(0);
  transform-origin: center;
  transition: transform var(--daylight-duration-base) var(--daylight-ease-quart-out);
  will-change: transform;
}

.daylight-toggle-input:checked + .daylight-toggle-visual {
  background: var(--daylight-black);
}
.daylight-toggle-input:checked + .daylight-toggle-visual::after {
  transform: translateX(20px);
}
.daylight-toggle-input:focus-visible + .daylight-toggle-visual {
  outline: 2px solid var(--daylight-black);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Input / TextArea — port of packages/ui/components/inputOrTextArea
   Underline-only style, Aeonik Pro 14px, h-49.
   ----------------------------------------------------------------------------- */
.daylight-input,
.daylight-textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--daylight-input-border);
  border-radius: 0;
  font-family: var(--daylight-font-sans);
  font-weight: 400;
  font-size: 14px;
  color: #1C1C1C;
  outline: none;
  transition: border-color var(--daylight-duration-base) var(--daylight-ease-quart-out),
              color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-input {
  height: 49px;
  padding: 0;
}

.daylight-textarea {
  min-height: 100px;
  padding: 12px 0;
  resize: none;
  field-sizing: content;
}

.daylight-input:focus,
.daylight-textarea:focus {
  border-bottom-color: var(--daylight-black);
}

.daylight-input::placeholder,
.daylight-textarea::placeholder {
  color: var(--daylight-grey);
}

.daylight-input:disabled,
.daylight-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.daylight-input[aria-invalid="true"],
.daylight-textarea[aria-invalid="true"] {
  border-bottom-color: var(--daylight-warning);
  color: var(--daylight-warning);
}

.daylight-label {
  display: block;
  font-family: var(--daylight-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--daylight-grey);
  margin-bottom: 4px;
  transition: color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-input:focus ~ .daylight-label,
.daylight-textarea:focus ~ .daylight-label {
  color: var(--daylight-black);
}

/* -----------------------------------------------------------------------------
   Select — port of packages/ui/components/select/Select.tsx (simplified)
   ----------------------------------------------------------------------------- */
.daylight-select {
  position: relative;
  display: inline-block;
}

.daylight-select select,
select.daylight-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 46px;
  padding: 0 40px 0 16px;
  background-color: transparent;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M2 4L6 8L10 4" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center right 16px;
  background-size: 12px;
  border: 1px solid var(--daylight-black);
  border-radius: 0;
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--daylight-black);
  cursor: pointer;
  outline: none;
  transition: color var(--daylight-duration-base) var(--daylight-ease-quart-out),
              border-color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-select select:focus,
select.daylight-select:focus {
  outline: 1px solid var(--daylight-black);
  outline-offset: -1px;
}

/* -----------------------------------------------------------------------------
   Spinner — port of packages/ui/components/spinner/Spinner.tsx
   ----------------------------------------------------------------------------- */
.daylight-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: daylight-rotate 0.8s linear infinite;
}

/* -----------------------------------------------------------------------------
   Tag — port of packages/ui/components-lib/tag/Tag.tsx
   ----------------------------------------------------------------------------- */
.daylight-tag {
  position: relative;
  display: inline-block;
  width: max-content;
  padding: 8px 10px;
  border: 1px solid var(--daylight-white-32);
  border-radius: var(--daylight-radius-sm);
  font-family: var(--daylight-font-sans);
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .daylight-tag {
    font-size: 12px;
  }
}

/* -----------------------------------------------------------------------------
   Badges (mono, uppercase)
   ----------------------------------------------------------------------------- */
.daylight-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-radius: var(--daylight-radius-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}

.daylight-badge-orange { background-color: var(--daylight-orange); color: var(--daylight-white); }
.daylight-badge-black { background-color: var(--daylight-black); color: var(--daylight-white); }
.daylight-badge-yellow { background-color: var(--daylight-yellow); color: var(--daylight-black); }
.daylight-badge-beige { background-color: var(--daylight-beige-30); color: var(--daylight-black); }
.daylight-badge-outline {
  background-color: transparent;
  color: var(--daylight-black);
  border-color: var(--daylight-card-border);
}

/* -----------------------------------------------------------------------------
   Cards & Panels
   ----------------------------------------------------------------------------- */
.daylight-card {
  background-color: var(--daylight-beige-20);
  border: 1px solid var(--daylight-card-border);
  border-radius: var(--daylight-radius-panel);
  padding: 32px;
}

.daylight-card-photo {
  border-radius: var(--daylight-radius-card);
  overflow: hidden;
}

.daylight-card-glass {
  background-color: var(--daylight-glass-bg);
  border: 1px solid var(--daylight-glass-border);
  border-radius: var(--daylight-radius-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 32px;
}

/* -----------------------------------------------------------------------------
   Divider
   ----------------------------------------------------------------------------- */
.daylight hr {
  border: 0;
  border-top: 1px solid var(--daylight-card-border);
  margin: 0;
  height: 0;
}

/* -----------------------------------------------------------------------------
   Color utilities
   ----------------------------------------------------------------------------- */
.daylight-bg-orange { background-color: var(--daylight-orange); }
.daylight-bg-orange-dark { background-color: var(--daylight-orange-dark); }
.daylight-bg-orange-light { background-color: var(--daylight-orange-light); }
.daylight-bg-beige { background-color: var(--daylight-beige); }
.daylight-bg-beige-20 { background-color: var(--daylight-beige-20); }
.daylight-bg-beige-30 { background-color: var(--daylight-beige-30); }
.daylight-bg-beige-dark { background-color: var(--daylight-beige-dark); }
.daylight-bg-black { background-color: var(--daylight-black); }
.daylight-bg-black-lighter { background-color: var(--daylight-black-lighter); }
.daylight-bg-offwhite { background-color: var(--daylight-offwhite); }
.daylight-bg-white { background-color: var(--daylight-white); }
.daylight-bg-yellow { background-color: var(--daylight-yellow); }
.daylight-bg-purple { background-color: var(--daylight-purple); }
.daylight-bg-purple-dark { background-color: var(--daylight-purple-dark); }
.daylight-bg-blue { background-color: var(--daylight-blue); }
.daylight-bg-blue-dark { background-color: var(--daylight-blue-dark); }
.daylight-bg-brown { background-color: var(--daylight-brown); }
.daylight-bg-red { background-color: var(--daylight-red); }
.daylight-bg-warning { background-color: var(--daylight-warning); }

.daylight-text-orange { color: var(--daylight-orange); }
.daylight-text-orange-dark { color: var(--daylight-orange-dark); }

/* Autopay discount nudge on the account page: tinted-orange fill with an
   orange border and orange text/icon. */
.daylight-autopay-promo {
  border: 1px solid var(--daylight-orange);
  background-color: rgb(246 111 0 / 0.12);
  color: var(--daylight-orange);
}
.daylight-text-black { color: var(--daylight-black); }
.daylight-text-black-lighter { color: var(--daylight-black-lighter); }
.daylight-text-white { color: var(--daylight-white); }
.daylight-text-grey { color: var(--daylight-grey); }
.daylight-text-grey-txt { color: var(--daylight-grey-txt); }
.daylight-text-yellow { color: var(--daylight-yellow); }
.daylight-text-purple { color: var(--daylight-purple); }
.daylight-text-purple-dark { color: var(--daylight-purple-dark); }
.daylight-text-blue { color: var(--daylight-blue); }
.daylight-text-blue-dark { color: var(--daylight-blue-dark); }
.daylight-text-brown { color: var(--daylight-brown); }
.daylight-text-red { color: var(--daylight-red); }
.daylight-text-warning { color: var(--daylight-warning); }

.daylight-border-black { border-color: var(--daylight-black); }
.daylight-border-beige-dark { border-color: var(--daylight-beige-dark); }
.daylight-border-card { border-color: var(--daylight-card-border); }
.daylight-border-warning { border-color: var(--daylight-warning); }

/* -----------------------------------------------------------------------------
   Animations — keyframes from marketing preset/keyframes.js
   ----------------------------------------------------------------------------- */
@keyframes daylight-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes daylight-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

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

@keyframes daylight-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes daylight-translate {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

/* Animation utilities (match marketing preset/animation.js) */
.daylight-animate-blink { animation: 0.125s steps(1) 3 daylight-blink; }
.daylight-animate-blink-invisible { animation: 0.125s steps(1) 4 daylight-blink; }
.daylight-animate-marquee { animation: linear infinite daylight-marquee; }
.daylight-animate-rotate { animation: 10s linear infinite daylight-rotate; }
.daylight-animate-fade-in { animation: 1s cubic-bezier(0.075, 0.82, 0.165, 1) daylight-fade-in forwards; }
.daylight-animate-translate { animation: 1s var(--daylight-ease-expo-out) daylight-translate; }

/* -----------------------------------------------------------------------------
   Links inside a .daylight region
   ----------------------------------------------------------------------------- */
.daylight a {
  color: inherit;
  text-decoration: underline;
  transition: opacity var(--daylight-duration-hover) var(--daylight-ease-default);
}

.daylight a:hover {
  opacity: 0.6;
}

.daylight a.daylight-btn-primary,
.daylight a.daylight-btn-secondary,
.daylight a.daylight-btn-gradient,
.daylight a.daylight-btn-underlined,
.daylight a.daylight-btn-solid-underlined {
  text-decoration: none;
}
.daylight a.daylight-btn-primary:hover,
.daylight a.daylight-btn-secondary:hover,
.daylight a.daylight-btn-gradient:hover {
  opacity: 0.85;
}

/* -----------------------------------------------------------------------------
   Misc utilities
   ----------------------------------------------------------------------------- */
.daylight-uppercase { text-transform: uppercase; }
.daylight-lowercase { text-transform: lowercase; }
.daylight-tracking-tight { letter-spacing: -0.02em; }
.daylight-tracking-wide { letter-spacing: 0.05em; }

.daylight-rounded-sm { border-radius: var(--daylight-radius-sm); }
.daylight-rounded-panel { border-radius: var(--daylight-radius-panel); }
.daylight-rounded-card { border-radius: var(--daylight-radius-card); }
.daylight-rounded-full { border-radius: 9999px; }

.daylight-scrollbar-hide {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.daylight-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* -----------------------------------------------------------------------------
   Billing portal — semantic token layer
   Maps the Next.js customer portal palette onto the .daylight scope.
   ----------------------------------------------------------------------------- */
.daylight {
  --dl-bg: #FFF7E9;
  --dl-fg: #4C2806;
  --dl-fg-muted: rgb(76 40 6 / 0.7);
  --dl-fg-subtle: rgb(76 40 6 / 0.55);
  --dl-fg-quiet: rgb(76 40 6 / 0.4);
  --dl-border: rgb(76 40 6 / 0.1);
  --dl-border-strong: rgb(76 40 6 / 0.16);
  --dl-divider: rgb(76 40 6 / 0.08);
  --dl-card: #FFFDF7;
  --dl-card-border: rgb(76 40 6 / 0.06);
  --dl-primary: #1A0800;
  --dl-on-primary: #FFF7E9;
  --dl-secondary: rgb(76 40 6 / 0.06);
  --dl-on-secondary: #4C2806;
  --dl-pill-success: #C7E8CF;
  --dl-pill-success-fg: #2D5B37;
  --dl-pill-neutral: rgb(76 40 6 / 0.08);
  --dl-pill-neutral-fg: #4C2806;
  --dl-attention-bg: #FBE8E2;
  --dl-attention-fg: #8B3024;
  --dl-attention-border: #BC6A59;
  --dl-caution-bg: #F8EDD5;
  --dl-caution-fg: #735015;
  --dl-caution-border: #B39150;
  --dl-input-bg: rgb(76 40 6 / 0.04);
  --dl-input-border: rgb(76 40 6 / 0.12);
  --dl-toggle-track: rgb(76 40 6 / 0.18);
  --dl-toggle-thumb: #FFF7E9;
  --dl-toggle-track-on: #F66F00;
  --dl-toggle-thumb-on: #FFF7E9;
  --dl-nav-bg: #FFF7E9;
  --dl-seg-bg: rgb(76 40 6 / 0.04);
  --dl-seg-border: rgb(76 40 6 / 0.08);
  --dl-seg-active-bg: #1A0800;
  --dl-seg-fg: rgb(76 40 6 / 0.55);
  --dl-seg-active-fg: #FFF7E9;
  --dl-focus-ring: 2px solid var(--dl-fg);
  --dl-focus-offset: 3px;
  --dl-radius-surface: 24px;
  --dl-shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.22);
  --dl-backdrop: rgb(0 0 0 / 0.5);
  --dl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dl-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dl-duration-press: 160ms;
  --dl-duration-enter: 200ms;
  --dl-duration-scene: 240ms;
  --dl-press-scale: 0.97;
  --dl-enter-scale: 0.95;
  --dl-hairline: 1px;
  --dl-font-label: 500 13px/1.4 "Aeonik Pro", sans-serif;
  --dl-space-1: 4px;
  --dl-space-2: 8px;
  --dl-space-3: 12px;
  --dl-space-4: 16px;
  --dl-space-5: 20px;
  --dl-space-6: 24px;
  --dl-space-8: 32px;
  --dl-reserve-2-lines: 2lh;
  --dl-reserve-3-lines: 3lh;
  --dl-chip-padding: var(--dl-space-1) var(--dl-space-2);
  --dl-chip-gap: var(--dl-space-1);
  --dl-chip-marker: 6px;
  --dl-font-caption: 400 12px/1.35 "Aeonik Pro", sans-serif;
  --dl-scene-halo: rgb(255 253 247 / 0.75);
  --dl-route-width: 2px;
  --dl-route-quiet-width: 1.5px;
  --dl-scrub-band: 48px;
  --dl-scrub-tick: 6px;
  --dl-scrub-rest: 0.58;
  --dl-scrub-rest-color: var(--dl-border-strong);
  --dl-tile-surface: var(--dl-secondary);
  --dl-tile-radius: 4px;
  --dl-tile-icon: 20px;
  --dl-tile-icon-slot: 24px;
  --dl-charge-track: 40px;
  --dl-charge-floor: 96px;
  --dl-charge-inset: 8px;
  --dl-charge-fill: #7BA87B;
  --dl-charge-ink: var(--daylight-white);
  --dl-pulse-duration: 2400ms;
  --dl-pulse-opacity: 0.35;
  --dl-pulse-scale: 3;
  --dl-live-dot: 7px;
  --dl-scene-wire: rgb(255 255 255 / 0.4);
  --dl-route-trail-opacity: 0.4;
  --dl-comet-head: 7px;
  --dl-comet-core: 3px;
  --dl-comet-core-opacity: 0.95;
  --dl-comet-tail-opacity: 0.85;
  --dl-comet-tail-falloff: 0.18;
  --dl-comet-tail-taper: 1px;
  --dl-control-height: 52px;
  --dl-hint-measure: 32ch;
  --dl-popover-radius: 12px;
  --dl-popover-layer: 20;
  --dl-calendar-width: 20rem;
  --dl-calendar-day: 40px;
  --dl-date-toggle-width: 12.5rem;
  --dl-pending-opacity: 0.55;
  --dl-check-size: 16px;
  --dl-check-stroke: 2px;
  --dl-check-radius: var(--dl-tile-radius);
  --dl-check-mark-width: 5px;
  --dl-check-mark-height: 9px;
}

.daylight[data-theme="photo"],
html[data-theme-hint="photo"] .daylight {
  --dl-bg: #1A0800;
  --dl-fg: #FFF7E9;
  --dl-fg-muted: rgb(255 247 233 / 0.7);
  --dl-fg-subtle: rgb(255 247 233 / 0.55);
  --dl-fg-quiet: rgb(255 247 233 / 0.4);
  --dl-border: rgb(255 247 233 / 0.12);
  --dl-border-strong: rgb(255 247 233 / 0.2);
  --dl-divider: rgb(255 247 233 / 0.14);
  --dl-card: rgb(10 5 0 / 0.45);
  --dl-card-border: rgb(255 247 233 / 0.2);
  --dl-primary: #FFF7E9;
  --dl-on-primary: #1A0800;
  --dl-secondary: rgb(255 247 233 / 0.1);
  --dl-on-secondary: #FFF7E9;
  --dl-pill-success: #234731;
  --dl-pill-success-fg: #C7E8CF;
  --dl-pill-neutral: rgb(255 247 233 / 0.14);
  --dl-pill-neutral-fg: #FFF7E9;
  --dl-attention-bg: #48251F;
  --dl-attention-fg: #FFD9CF;
  --dl-attention-border: #A56657;
  --dl-caution-bg: #3E301B;
  --dl-caution-fg: #F3D7A2;
  --dl-caution-border: #927444;
  --dl-input-bg: rgb(10 5 0 / 0.4);
  --dl-input-border: rgb(255 247 233 / 0.2);
  --dl-toggle-track: rgb(255 247 233 / 0.22);
  --dl-toggle-thumb: #FFF7E9;
  --dl-toggle-track-on: #F66F00;
  --dl-toggle-thumb-on: #FFF7E9;
  --dl-nav-bg: rgb(26 8 0 / 0.75);
  --dl-seg-bg: rgb(255 247 233 / 0.14);
  --dl-seg-border: rgb(255 247 233 / 0.2);
  --dl-seg-active-bg: #FFF7E9;
  --dl-seg-fg: rgb(255 247 233 / 0.65);
  --dl-seg-active-fg: #1A0800;
}

.daylight[data-theme="photo"],
html[data-theme-hint="photo"] .daylight {
  position: relative;
  background: transparent;
}

.daylight[data-theme="photo"]::before,
html[data-theme-hint="photo"] .daylight::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../images/photo-hero.25e99c7c6136.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;
  pointer-events: none;
}

.daylight[data-theme="photo"]::after,
html[data-theme-hint="photo"] .daylight::after {
  content: "";
  position: fixed;
  inset: 0;
  background-color: rgb(10 5 0 / 0.55);
  z-index: -1;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Billing portal — theme toggle
   ----------------------------------------------------------------------------- */
.daylight-theme-toggle {
  display: inline-flex;
  gap: 2px;
  border-radius: 10px;
  border: 1px solid var(--dl-seg-border);
  background-color: var(--dl-seg-bg);
  padding: 3px;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.daylight-theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--dl-seg-fg);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.daylight-theme-toggle-btn[aria-checked="true"] {
  background-color: var(--dl-seg-active-bg);
  color: var(--dl-seg-active-fg);
}

.daylight-theme-toggle-btn:hover:not([aria-checked="true"]) {
  opacity: 0.7;
}

.daylight .daylight-logo-photo { display: none; }
.daylight[data-theme="photo"] .daylight-logo-light,
html[data-theme-hint="photo"] .daylight .daylight-logo-light { display: none; }
.daylight[data-theme="photo"] .daylight-logo-photo,
html[data-theme-hint="photo"] .daylight .daylight-logo-photo { display: inline; }

.daylight {
  background-color: var(--dl-bg);
  transition: background-color 300ms ease;
}

.daylight .daylight-card-v2,
.daylight .daylight-card-v2-tight,
.daylight .daylight-info-panel,
.daylight .daylight-pill,
.daylight .daylight-switch,
.daylight .daylight-theme-toggle,
.daylight .daylight-theme-toggle-btn {
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

/* -----------------------------------------------------------------------------
   Billing portal — nav
   ----------------------------------------------------------------------------- */
.daylight-nav {
  background-color: var(--dl-nav-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* -----------------------------------------------------------------------------
   Billing portal — card v2
   ----------------------------------------------------------------------------- */
.daylight-card-v2 {
  background-color: var(--dl-card);
  border-radius: 24px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 24px 20px 28px;
}
@media (min-width: 768px) {
  .daylight-card-v2 {
    padding: 48px 48px 40px;
  }
}
.daylight-card-v2-tight {
  background-color: var(--dl-card);
  border-radius: 24px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 24px 20px;
}
@media (min-width: 768px) {
  .daylight-card-v2-tight {
    padding: 32px 40px;
  }
}

/* -----------------------------------------------------------------------------
   Billing portal — info rows (key/value inside tinted panels)
   ----------------------------------------------------------------------------- */
.daylight-info-panel {
  background-color: var(--dl-input-bg);
  border: 1px solid var(--dl-input-border);
  border-radius: 12px;
  padding: 4px 24px;
}

/* Empty-state variant: centered prompt + action with comfortable padding
   (the base panel's 4px vertical padding is meant for stacked rows). */
.daylight-info-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 24px;
  text-align: center;
}

.daylight-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}
.daylight-info-row-label {
  font-family: var(--daylight-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dl-fg-muted);
}
.daylight-info-row-value {
  text-align: right;
  font-family: var(--daylight-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--dl-fg);
}

/* -----------------------------------------------------------------------------
   Billing portal — pills (status badges)
   ----------------------------------------------------------------------------- */
.daylight-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--daylight-radius-sm);
  font-family: var(--daylight-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.daylight-pill-success {
  background-color: var(--dl-pill-success);
  color: var(--dl-pill-success-fg);
}
.daylight-pill-neutral {
  background-color: var(--dl-pill-neutral);
  color: var(--dl-pill-neutral-fg);
}

/* -----------------------------------------------------------------------------
   Billing portal — buttons v2
   ----------------------------------------------------------------------------- */
.daylight-btn-v2 {
  appearance: none;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 56px;
  border-radius: var(--daylight-radius-sm);
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.daylight-btn-v2:hover { opacity: 0.85; }
.daylight-btn-v2:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.daylight-btn-v2-primary {
  background-color: var(--dl-primary);
  color: var(--dl-on-primary);
}
.daylight-btn-v2-secondary {
  background-color: var(--dl-secondary);
  color: var(--dl-on-secondary);
  border: 1px solid var(--dl-border);
}

/* -----------------------------------------------------------------------------
   Billing portal — divider
   ----------------------------------------------------------------------------- */
.daylight-divider {
  height: 1px;
  width: 100%;
  background-color: var(--dl-divider);
}

/* -----------------------------------------------------------------------------
   Billing portal — toggle switch v2
   ----------------------------------------------------------------------------- */
.daylight-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: var(--dl-toggle-track);
  cursor: pointer;
  transition: background-color 200ms ease;
}
.daylight-switch[aria-checked="true"] {
  background-color: var(--dl-toggle-track-on);
}
.daylight-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--dl-toggle-thumb);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: transform 200ms ease;
}
.daylight-switch[aria-checked="true"] .daylight-switch-thumb {
  transform: translateX(20px);
  background-color: var(--dl-toggle-thumb-on);
}

/* -----------------------------------------------------------------------------
   Billing portal — savings bar chart
   ----------------------------------------------------------------------------- */
.daylight-savings-bar-track {
  height: 8px;
  border-radius: 9999px;
  background-color: var(--dl-secondary);
  overflow: hidden;
}
.daylight-savings-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background-color: var(--daylight-orange);
  transition: width 700ms cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

/* -----------------------------------------------------------------------------
   Billing portal — pay modal overlay
   ----------------------------------------------------------------------------- */
.daylight-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 20px;
  background-color: rgba(0, 0, 0, 0.4);
}
.daylight-modal-overlay[aria-hidden="true"] {
  display: none;
}

/* -----------------------------------------------------------------------------
   Billing portal — selectable option
   ----------------------------------------------------------------------------- */
.daylight-select-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--dl-input-border);
  background-color: var(--dl-input-bg);
  text-align: left;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.daylight-select-option:hover { opacity: 0.85; }
.daylight-select-option-active {
  background-color: var(--dl-secondary);
  border-color: var(--dl-border-strong);
}

/* Floating menu that holds .daylight-select-option rows, e.g. the nav job
   switcher. Solid surface with the same border as the outline selector, so the
   panel reads as part of the selector rather than the translucent page card. */
.daylight-select-menu {
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--dl-border);
  border-radius: 12px;
  background-color: var(--dl-nav-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
}
/* The rows float over the hero image, so they need a solid fill and the same
   cream text as the rest of the portal — the shared translucent option style is
   only legible on the solid page cards it's used on elsewhere. */
.daylight-select-menu .daylight-select-option {
  background-color: var(--dl-bg);
  color: var(--dl-fg);
  text-decoration: none;
}
.daylight-select-menu .daylight-select-option-active {
  /* Secondary tint composited over the solid base stays fully opaque. */
  background-image: linear-gradient(var(--dl-secondary), var(--dl-secondary));
}

/* -----------------------------------------------------------------------------
   Billing portal — section header
   ----------------------------------------------------------------------------- */
.daylight-section-title {
  color: var(--dl-fg);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.02em;
}

/* -----------------------------------------------------------------------------
   Billing portal — tab bar
   ----------------------------------------------------------------------------- */
.customer-portal-header { flex-wrap: wrap; gap: 16px; }
.customer-portal-brand { flex-wrap: wrap; min-width: 0; }
.customer-app-download { flex: none; width: auto; height: 44px; font-size: 14px; }
.customer-app-menu { position: relative; }
.customer-app-menu > summary { gap: 8px; list-style: none; cursor: pointer; }
.customer-app-menu > summary::-webkit-details-marker { display: none; }
.customer-app-menu > summary:focus-visible { outline: 2px solid var(--daylight-orange); outline-offset: 4px; }
.customer-app-menu[open] > summary svg { transform: rotate(180deg); }
.customer-app-choices { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 224px; padding: 6px; border: 1px solid var(--dl-border); border-radius: 12px; background: var(--dl-bg); color: var(--dl-fg); box-shadow: 0 12px 32px rgb(0 0 0 / .15); }
.customer-app-choices a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 6px; font: 400 14px/20px var(--daylight-font-sans); text-decoration: none; }
.customer-app-choices a:is(:hover, :focus-visible) { background: var(--dl-secondary); }
.customer-app-choices a:focus-visible { outline: 2px solid var(--daylight-orange); outline-offset: -2px; }
.customer-logout { width: 44px; height: 44px; flex: none; cursor: pointer; }
.customer-logout.daylight-icon-btn { color: var(--dl-fg-muted); border-radius: var(--daylight-radius-sm); }
.customer-logout.daylight-icon-btn:hover { opacity: 1; color: var(--dl-fg); background: var(--dl-secondary); }
.customer-logout:focus-visible { outline: 2px solid var(--daylight-orange); outline-offset: 2px; }
.customer-logout-icon { display: block; width: 20px; height: 20px; }
.daylight .customer-submit-pending { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: wait; pointer-events: none; opacity: .75; }
.customer-submit-pending::after { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: daylight-rotate .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .customer-submit-pending::after { animation: none; } }
.customer-account-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; }
/* At most two columns, collapsing on the actual available width (including
   when Ray is open), without containing the fixed payment/invitation modals. */
.customer-account-stack-primary { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(420px, calc(50% - 12px))), 1fr)); }
.customer-account-stack > *, .customer-billing-summary { min-width: 0; }
.customer-account-full-width { grid-column: 1 / -1; }
.customer-account-billing, .customer-account-billing > .customer-billing-content { display: contents; }
.customer-billing-summary, .customer-account-payment { display: flex; flex-direction: column; }
.customer-billing-summary > .daylight-card-v2 { flex: 1; }
.customer-account [data-customer-tour="account-details"] { display: flex; flex-direction: column; }
.customer-account [data-customer-tour="account-details"] > p { margin-top: auto; }
.customer-household { display: flex; flex-direction: column; gap: 16px; }
.customer-household-header, .customer-household-person-heading, .customer-household-person-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.customer-household-people { flex: 1; }
.customer-household-person { padding: 12px 0; overflow-wrap: anywhere; }
.customer-household-person + .customer-household-person { border-top: 1px solid var(--dl-divider); }
.customer-household-person > p { margin-top: 4px; }
.customer-household-person-heading > span:first-child { min-width: 0; }
.customer-household-person-footer { gap: 0 16px; }
.customer-household-actions { display: flex; gap: 16px; }
.customer-household-text-button { min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--dl-fg-muted); font: 400 13px var(--daylight-font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.customer-household-text-button:hover { color: var(--dl-fg); }
.customer-household-text-button:focus-visible { outline: 2px solid var(--daylight-orange); outline-offset: 3px; }
.customer-household-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; gap: 10px; padding: 16px 0 24px; }
.customer-household-empty h3 { font-size: 18px; line-height: 24px; }
.customer-household-empty p { max-width: 340px; line-height: 1.6; }
.customer-household-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding-top: 16px; border-top: 1px solid var(--dl-divider); }
.customer-household-footer > p { flex: 1; min-width: 160px; max-width: 260px; }
.customer-household-modal { position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; overflow-y: auto; padding: 24px 20px; background: rgb(0 0 0 / .4); }
.customer-household-dialog { position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - 48px); overflow-y: auto; }
.customer-household-dialog h2 { padding-right: 32px; }
.customer-household-dialog > p { margin-top: 12px; line-height: 1.5; }
.customer-household-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.customer-household-invite-form { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.customer-household-invite-form .daylight-input { color: var(--dl-fg); border-color: var(--dl-border); }
.customer-household-invite-form .daylight-input:focus { border-color: var(--daylight-orange); }
.customer-household-modal-actions { display: flex; gap: 12px; padding-top: 8px; }
.customer-household-modal-actions > button { flex: 1; }
.customer-household-join { width: 100%; max-width: 560px; }
.customer-household-join-intro { margin: 12px 0 24px; font-size: 15px; line-height: 1.6; }
.customer-household-invitation-details { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 8px; background: var(--dl-secondary); }
.customer-household-invitation-details dt { margin-bottom: 4px; color: var(--dl-fg-muted); font-size: 12px; line-height: 18px; }
.customer-household-invitation-details dd { color: var(--dl-fg); font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.customer-household-access-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 13px; line-height: 20px; }
.customer-household-note-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.customer-household-join-form { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.customer-household-join-form .daylight-label { display: block; margin-bottom: 8px; color: var(--dl-fg); }
.customer-household-join-form :is(.daylight-password-help, .daylight-welcome-error) { margin: 0; text-align: left; }
.customer-household-recovery { margin-top: 24px; }
.customer-household-join-support { margin-top: 20px; font-size: 13px; line-height: 20px; text-align: center; }
.customer-account-number { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; }
.customer-account-number-label { padding: 0 10px; color: var(--dl-fg-muted); font: 400 12px/18px var(--daylight-font-sans); }
.customer-account-number-value { color: var(--dl-fg); font: 400 14px/20px var(--daylight-font-mono); user-select: text; }
.customer-account-copy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--daylight-radius-sm); background: transparent; color: var(--dl-fg-muted); cursor: pointer; }
.customer-account-copy:hover { color: var(--dl-fg); background: var(--dl-secondary); }
.customer-account-copy:focus-visible { outline: 2px solid var(--daylight-orange); outline-offset: 2px; }
.customer-account-copy-glyph { flex: none; width: 18px; height: 18px; }
.customer-account-copy-icon { display: block; width: 18px; height: 18px; }
.customer-account-copy-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.customer-contact-details .daylight-info-row-value { min-width: 0; overflow-wrap: anywhere; }
.customer-account-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.customer-billing-summary { scroll-margin-top: 24px; }
.customer-account .daylight-info-row-value, .customer-system .daylight-info-row-value { min-width: 0; overflow-wrap: anywhere; }
.customer-pending-document { display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.customer-pending-document-copy { flex: 1; min-width: 0; }
.customer-pending-document-copy p { margin-top: 6px; }
.customer-document-icon { flex: none; color: var(--daylight-orange); }
.customer-document-icon svg { display: block; width: 24px; height: 24px; }
.customer-pending-document > a { flex: none; }
@media (max-width: 767px) {
  .customer-pending-document { flex-wrap: wrap; align-items: flex-start; }
  .customer-pending-document > a { width: 100%; }
}
.customer-portal-footer { margin-top: auto; padding-top: 32px; }
.customer-app-promotion { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; padding: 32px 0; border-top: 1px solid var(--dl-divider); }
.customer-app-promotion h2 { margin: 0; color: var(--dl-fg); font: 400 22px/28px var(--daylight-font-display); letter-spacing: -0.02em; }
.customer-app-promotion p { max-width: 420px; margin: 8px 0 0; color: var(--dl-fg-muted); font: 400 14px/21px var(--daylight-font-sans); }
.customer-app-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.customer-app-badges a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 6px; }
.customer-app-badges a:focus-visible { outline: 2px solid var(--daylight-orange); outline-offset: 4px; }
.customer-app-badges img { display: block; height: 40px; width: auto; }
.customer-home-history > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-4); min-height: 44px; padding-left: var(--dl-space-1); list-style: none; cursor: pointer; color: var(--dl-fg); }
.customer-home-history > summary::-webkit-details-marker { display: none; }
.customer-home-history > summary:focus-visible { outline: var(--dl-focus-ring); outline-offset: var(--dl-focus-offset); border-radius: var(--dl-tile-radius); }
.customer-home-history[open] > summary { margin-bottom: var(--dl-space-6); }
.customer-home-history[open] > summary .daylight-agreement-chevron { transform: rotate(180deg); }

@media (max-width: 640px) {
  .customer-account .daylight-info-row, .customer-contact-details .daylight-info-row, .customer-system .daylight-info-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .customer-account .daylight-info-row-value, .customer-contact-details .daylight-info-row-value, .customer-system .daylight-info-row-value { text-align: left; }
  .daylight .customer-portal-tabs { gap: 0; }
  .daylight .customer-portal-tabs .daylight-tab { gap: 5px; padding: 12px 8px; font-size: 14px; }
  .customer-portal-tabs .daylight-tab svg { width: 15px; height: 15px; }
}

.daylight .daylight-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  padding: 10px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  color: var(--dl-fg);
  transition: opacity 150ms ease, border-color 150ms ease;
}
.daylight .daylight-tab:hover {
  opacity: 0.65;
  border-bottom-color: var(--dl-fg);
}
.daylight .daylight-tab-active {
  border-bottom-color: var(--dl-fg);
}
.daylight .daylight-tab-active:hover {
  opacity: 1;
}
.daylight .daylight-tab-disabled {
  cursor: default;
  pointer-events: none;
}
.daylight .daylight-tab-disabled:hover {
  opacity: 1;
  border-bottom-color: transparent;
}

/* -----------------------------------------------------------------------------
   Billing portal — display xl
   ----------------------------------------------------------------------------- */
.daylight-display-xl {
  font-family: var(--daylight-font-display);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dl-fg);
}
@media (min-width: 768px) {
  .daylight-display-xl {
    font-size: 56px;
  }
}

/* -----------------------------------------------------------------------------
   Billing portal — display large
   ----------------------------------------------------------------------------- */
.daylight-display-lg {
  font-family: var(--daylight-font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dl-fg);
}
.daylight-display-section-sm {
  font-family: var(--daylight-font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dl-fg);
  padding-bottom: 8px;
}
@media (min-width: 768px) {
  .daylight-display-section-sm {
    font-size: 26px;
  }
}

/* -----------------------------------------------------------------------------
   Billing portal — subtle link (pagination, footer)
   ----------------------------------------------------------------------------- */
.daylight-link-subtle {
  font-family: var(--daylight-font-mono);
  color: var(--dl-fg);
  text-decoration: none;
  transition: opacity 150ms ease;
}
.daylight-link-subtle:hover {
  opacity: 0.7;
}
.daylight-link-muted {
  font-family: var(--daylight-font-mono);
  color: var(--dl-fg-quiet);
}

/* -----------------------------------------------------------------------------
   Billing portal — outline button
   ----------------------------------------------------------------------------- */
.daylight-btn-outline {
  appearance: none;
  background: none;
  border: 1px solid var(--dl-border);
  border-radius: 4px;
  padding: 6px 12px;
  color: var(--dl-fg);
  cursor: pointer;
  font-family: var(--daylight-font-mono);
  font-size: 14px;
  font-weight: 500;
  transition: opacity 150ms ease;
}
.daylight-btn-outline:hover {
  opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   Billing portal — icon button (clickable icon with hover)
   ----------------------------------------------------------------------------- */
.daylight-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dl-fg-quiet);
  transition: opacity 150ms ease;
}
.daylight-icon-btn:hover {
  opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   Billing portal — color utilities (theme-aware)
   ----------------------------------------------------------------------------- */
.daylight-color-fg { color: var(--dl-fg); }
.daylight-color-fg-muted { color: var(--dl-fg-muted); }
.daylight-color-fg-quiet { color: var(--dl-fg-quiet); }

/* -----------------------------------------------------------------------------
   Billing portal — pill variant: primary
   ----------------------------------------------------------------------------- */
.daylight-pill-primary {
  background-color: var(--dl-primary);
  color: var(--dl-on-primary);
}

/* -----------------------------------------------------------------------------
   Billing portal — section header (spacing above content)
   ----------------------------------------------------------------------------- */
.daylight-section-header {
  margin-bottom: 24px;
  padding-left: 4px;
}

/* -----------------------------------------------------------------------------
   Billing portal — footer
   ----------------------------------------------------------------------------- */
.daylight-footer-border {
  border-top: 1px solid var(--dl-divider);
}
.daylight .daylight-footer-link {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  color: var(--dl-fg);
  text-decoration: none;
  transition: opacity 150ms ease;
}
.daylight .daylight-footer-link:hover {
  opacity: 0.7;
}
.daylight-footer-copyright {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  color: var(--dl-fg);
  opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   Billing portal — serif font utility
   ----------------------------------------------------------------------------- */
.daylight-font-serif {
  font-family: var(--daylight-font-display);
}

/* -----------------------------------------------------------------------------
   Welcome flow
   ----------------------------------------------------------------------------- */
.daylight-welcome-bg {
  background-color: #FFF7E9;
}

.daylight-welcome-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 20px 16px;
}
@media (min-width: 768px) {
  .daylight-welcome-card {
    padding: 40px;
  }
}

.daylight-welcome-btn {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 4px;
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.daylight-welcome-btn:hover {
  opacity: 0.85;
}
.daylight-welcome-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.daylight-welcome-btn-dark {
  background-color: #1A0800;
  color: #FFF7E9;
}
.daylight-welcome-btn-light {
  background-color: #FFF7E9;
  color: #111111;
}

.daylight a.daylight-welcome-btn,
.daylight a.daylight-btn-v2 {
  text-decoration: none;
}
.daylight a.daylight-welcome-btn-dark {
  color: #FFF7E9;
}
.daylight a.daylight-btn-v2-primary {
  color: var(--dl-on-primary);
}
.daylight a.daylight-btn-v2-secondary {
  color: var(--dl-on-secondary);
}

.daylight-welcome-back-btn {
  display: inline-flex;
  height: 44px;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  border-radius: 4px;
  border: 1px solid #4C28061A;
  background-color: #4C28060F;
  color: #4C2806;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--daylight-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.daylight .daylight-welcome-back-btn {
  text-decoration: none;
}

.daylight .daylight-welcome-logo-link {
  text-decoration: none;
  color: inherit;
}
.daylight-welcome-back-btn:hover {
  opacity: 0.8;
}

.daylight-welcome-heading {
  font-family: var(--daylight-font-display);
  font-size: 36px;
  line-height: 38px;
  letter-spacing: -0.02em;
  color: #4C2806;
}

.daylight-welcome-subtext {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #4C28068C;
}

.daylight-welcome-section-title {
  font-size: 18px;
  font-weight: 500;
  color: #4C2806;
}

.daylight-welcome-note {
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #4C28068C;
}

.daylight-welcome-link {
  font-size: 14px;
  color: #4C28068C;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.daylight .daylight-welcome-link:hover {
  opacity: 0.8;
}

.daylight-welcome-tip-text {
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 21px;
  color: #4C2806;
}

.daylight-welcome-tip-heading {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 21px;
  color: #4C2806;
  padding-bottom: 6px;
}

.daylight-welcome-support-card {
  border-radius: 12px;
  background-color: #4C28060A;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.daylight-welcome-support-label {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4C28068C;
  display: block;
  padding-bottom: 8px;
}
.daylight-welcome-support-text {
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 21px;
  color: #4C2806;
}

/* Step 1: dark splash */
.daylight-welcome-splash {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  padding-bottom: env(safe-area-inset-bottom);
  background-size: cover;
  background-position: center;
}
.daylight-welcome-splash-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 4, 0, 0.6);
}
.daylight-welcome-splash-title {
  font-family: var(--daylight-font-display);
  font-size: 40px;
  color: #FFF7E9;
  letter-spacing: -0.02em;
  line-height: 1.05;
  padding-bottom: 20px;
}
.daylight-welcome-splash-glass {
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background-color: rgba(8, 3, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 247, 233, 0.08);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 247, 233, 0.06);
}
.daylight-welcome-splash-stepper-label {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  color: rgba(255, 247, 233, 0.45);
}
.daylight-welcome-splash-step-text {
  font-size: 15px;
  color: rgba(255, 247, 233, 0.88);
}
.daylight-welcome-splash-arrow {
  color: rgba(255, 247, 233, 0.4);
}
.daylight-welcome-splash-step-num {
  font-family: var(--daylight-font-mono);
  font-size: 11px;
  color: rgba(255, 247, 233, 0.31);
}
.daylight-welcome-splash-step-label {
  font-size: 13px;
  color: rgba(255, 247, 233, 0.82);
  line-height: 1.2;
  text-align: center;
}

.daylight-welcome-spinner {
  width: 16px;
  height: 16px;
  border-color: #FFF7E9;
  border-right-color: transparent;
}

.daylight-welcome-error {
  color: #B91C1C;
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
}

.dl-delay-1 { animation-delay: 0.08s; }

/* -----------------------------------------------------------------------------
   Login / Verify (customer portal)
   ----------------------------------------------------------------------------- */
.daylight-login-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background-color: #0D0A07;
  background-image: url("../images/login-hero.25e99c7c6136.jpg");
  background-size: cover;
  background-position: center;
}
/* The hero is a photo, so v2 buttons on it take the photo-theme tokens. */
.daylight-login-bg {
  --dl-primary: #FFF7E9;
  --dl-on-primary: #1A0800;
  --dl-secondary: rgb(255 247 233 / 0.1);
  --dl-on-secondary: #FFF7E9;
  --dl-border: rgb(255 247 233 / 0.12);
}
.daylight-login-overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(10 4 0 / 0.6);
}
.daylight-login-logo {
  position: absolute;
  left: 20px;
  top: 20px;
}
@media (min-width: 768px) {
  .daylight-login-logo {
    left: 48px;
    top: 32px;
  }
}
.daylight-login-form {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 440px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .daylight-login-form {
    padding-left: 0;
    padding-right: 0;
  }
}
.daylight-login-heading {
  font-family: var(--daylight-font-display);
  text-align: center;
  font-size: 40px;
  color: #FFF7E9;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
@media (min-width: 768px) {
  .daylight-login-heading {
    font-size: 56px;
  }
}
.daylight-login-heading-sm {
  font-size: 28px;
}
@media (min-width: 768px) {
  .daylight-login-heading-sm {
    font-size: 36px;
  }
}
.daylight-login-fields {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 10px;
}
.daylight-login-error {
  font-size: 14px;
  color: #FF6B6B;
  text-align: center;
  margin: 0;
}
.daylight-login-input {
  height: 48px;
  width: 100%;
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 15px;
  font-family: var(--daylight-font-body);
  background-color: #17100A;
  border: 1px solid rgba(255, 247, 233, 0.2);
  color: #FFF7E9;
  outline: none;
  box-sizing: border-box;
}
.daylight-login-input::placeholder {
  color: rgba(255, 247, 233, 0.4);
}
.daylight-login-input:focus {
  border-color: rgba(255, 247, 233, 0.4);
}
.daylight-login-btn {
  display: flex;
  height: 48px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--daylight-font-body);
  background-color: #FFFFFF;
  color: #1A0800;
  border: none;
  cursor: pointer;
}
.daylight-login-btn:hover {
  background-color: #F5F0EA;
}
.daylight-login-textarea {
  height: auto;
  min-height: 120px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}
.daylight-login-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  color: rgba(255, 247, 233, 0.55);
}
.daylight-login-divider::before,
.daylight-login-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(255, 247, 233, 0.2);
}
.daylight-login-btn-arrow {
  display: inline-block;
  transform: translateX(-4px);
  opacity: 0;
  transition: all 0.2s ease-out;
}
.daylight-login-btn:hover .daylight-login-btn-arrow {
  transform: translateX(0);
  opacity: 1;
}

/* Coming Soon (pre-launch portal) — same hero shell as login, tighter stack */
a.daylight-login-btn {
  text-decoration: none;
}
.daylight-coming-soon {
  gap: 16px;
}
.daylight-coming-soon-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 247, 233, 0.6);
  text-align: center;
  margin: 0;
}
.daylight-coming-soon-copy {
  max-width: 380px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 247, 233, 0.75);
  margin: 0;
}
.daylight-coming-soon-support {
  font-size: 14px;
  text-align: center;
  color: rgba(255, 247, 233, 0.5);
  margin: 0;
}
.daylight-coming-soon-support a {
  color: #FFF7E9;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* OTP digit inputs */
.daylight-login-otp-row {
  display: flex;
  gap: 6px;
}
@media (min-width: 768px) {
  .daylight-login-otp-row {
    gap: 10px;
  }
}
.daylight-login-otp-digit {
  height: 48px;
  width: 44px;
  border-radius: 4px;
  border: 1px solid rgba(255, 247, 233, 0.2);
  text-align: center;
  font-family: var(--daylight-font-display);
  font-size: 20px;
  background-color: #17100A;
  color: #FFF7E9;
  outline: none;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .daylight-login-otp-digit {
    height: 56px;
    width: 60px;
    font-size: 24px;
  }
}
.daylight-login-otp-digit:focus {
  border-color: rgba(255, 247, 233, 0.7);
}

/* Resend link */
.daylight-login-description {
  font-size: 15px;
  color: rgba(255, 247, 233, 0.7);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 24px;
}
.daylight-login-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
}
.daylight-login-resend-label {
  color: rgba(255, 247, 233, 0.55);
}
.daylight-login-resend-btn {
  background: none;
  border: none;
  padding: 0;
  color: #FFF7E9;
  font-size: 14px;
  font-family: var(--daylight-font-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.daylight-login-resend-btn:hover {
  opacity: 0.8;
}

/* -----------------------------------------------------------------------------
   Daylight — alert overrides
   Scoped overrides for basecoat .alert components inside .daylight context.
   ----------------------------------------------------------------------------- */
.daylight .alert,
.daylight .alert-destructive {
  background-color: var(--dl-card);
  border-color: var(--dl-border);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.08);
}
.daylight .alert {
  color: var(--dl-fg);
}
.daylight .alert h2 {
  color: var(--dl-fg);
}
.daylight .alert-destructive,
.daylight .alert-destructive h2 {
  color: #B91C1C;
}
.daylight .alert section,
.daylight .alert-destructive section {
  color: var(--dl-fg-muted);
}
.daylight .alert .btn-sm-icon-ghost,
.daylight .alert-destructive .btn-sm-icon-ghost {
  color: var(--dl-fg-quiet);
}
.daylight .alert .btn-sm-icon-ghost:hover,
.daylight .alert-destructive .btn-sm-icon-ghost:hover {
  background-color: var(--dl-secondary);
}
.daylight #alert-container [data-controller="alert"] {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 12px 12px 16px;
}
.daylight #alert-container [data-controller="alert"] > svg {
  grid-column: 1;
  grid-row: 1;
  transform: none;
  translate: none;
}
.daylight #alert-container [data-controller="alert"] > h2 {
  display: block;
  grid-column: 2;
  grid-row: 1;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.daylight #alert-container [data-controller="alert"] > section {
  grid-column: 2 / -1;
  grid-row: 2;
}
.daylight #alert-container [data-controller="alert"] > button {
  position: static;
  grid-column: 3;
  grid-row: 1;
  width: 32px;
  height: 32px;
  padding: 0;
}

/* -----------------------------------------------------------------------------
   Billing portal — Home milestone timeline
   Phase nodes down the left with a connector line; each phase carries its
   customer steps in a tinted panel.
   ----------------------------------------------------------------------------- */
.daylight-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.daylight-timeline-phase {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 32px;
}
.daylight-timeline-phase:last-child {
  padding-bottom: 0;
}
.daylight-timeline-phase::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 4px;
  width: 2px;
  background-color: var(--dl-divider);
}
.daylight-timeline-phase:last-child::before {
  display: none;
}
.daylight-timeline-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--dl-primary);
  color: var(--dl-on-primary);
}
.daylight-timeline-phase-current .daylight-timeline-marker {
  background-color: transparent;
  border: 2px solid var(--dl-primary);
}
.daylight-timeline-phase-current .daylight-timeline-marker::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--dl-primary);
}
.daylight-timeline-phase-upcoming .daylight-timeline-marker {
  background-color: transparent;
  border: 2px solid var(--dl-divider);
}
.daylight-timeline-content {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}
.daylight-timeline-title {
  margin: 0;
  font-size: 16px;
  color: var(--dl-fg);
}
.daylight-timeline-phase-upcoming .daylight-timeline-title {
  color: var(--dl-fg-muted);
}
.daylight-timeline-panel {
  margin-top: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.daylight-timeline-step-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--dl-fg-quiet);
  color: transparent;
}
.daylight-timeline-step-marker-done {
  border-color: transparent;
  background-color: var(--dl-pill-success);
  color: var(--dl-pill-success-fg);
}
.daylight-timeline-panel { container-type: inline-size; }
/* A 44px target whose extra height overlaps the row padding instead of growing the row. */
.daylight-timeline-panel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: calc(var(--dl-space-2) * -1);
}
@container (max-width: 26rem) {
  .daylight-timeline-panel > :not(.daylight-divider) {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: var(--dl-space-1) var(--dl-space-3);
  }
  .daylight-timeline-panel > :not(.daylight-divider) > :nth-child(n + 3) {
    grid-column: 2;
    justify-self: start;
  }
  .daylight-timeline-panel .daylight-timeline-step-marker { margin-top: 1px; }
}

/* Inline (content-width) variant of the v2 button, e.g. the Home tab's
   next-action card on desktop. */
@media (min-width: 768px) {
  .daylight-btn-v2-inline {
    width: auto;
    padding: 0 28px;
  }
}


.daylight-setup-welcome-copy { max-width: 480px; font-size: 17px; line-height: 1.5; color: #FFF7E9; margin: 0 0 24px; }
.daylight-welcome-subtext, .daylight-welcome-note, .daylight-welcome-link { color: #765E46; }
.daylight-account-setup { width: 100%; max-width: 880px; }
.daylight-account-setup > .daylight-welcome-card > details:first-child { margin-bottom: 24px; }
.daylight-setup-system { margin-bottom: 24px; }
.daylight-setup-section-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 20px; }
.daylight-setup-overview { border: 1px solid var(--dl-border-strong); border-radius: 12px; overflow: hidden; background: var(--dl-card); }
.daylight-setup-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--dl-border-strong); }
.daylight-setup-stats > div { min-width: 0; padding: 20px; background: var(--dl-card); }
.daylight-setup-stats dt { font-size: 13px; line-height: 1.4; color: var(--dl-fg-muted); }
.daylight-setup-stats dd { margin-top: 10px; font-family: var(--daylight-font-display); font-size: 36px; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; color: var(--dl-fg); }
.daylight-setup-stats dd span { font: 14px var(--daylight-font-sans); }
.daylight-setup-stats dd small { display: block; margin-top: 6px; font: 12px/1.4 var(--daylight-font-sans); letter-spacing: normal; color: var(--dl-fg-muted); }
.daylight-setup-equipment-heading { padding: 18px 20px 0; border-top: 1px solid var(--dl-border-strong); font: 500 16px/1.4 var(--daylight-font-sans); color: var(--dl-fg); }
.daylight-setup-equipment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 14px 20px 20px; }
.daylight-setup-equipment dt { margin-bottom: 5px; font-size: 12px; color: var(--dl-fg-muted); }
.daylight-setup-equipment dd { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; color: var(--dl-fg); }
.daylight-setup-contact { margin: 28px 0; }
.daylight-setup-contact > h2 { margin-bottom: 16px; }
.daylight-setup-payment { padding: 24px; border: 1px solid var(--dl-border-strong); border-radius: 12px; background: var(--dl-secondary); scroll-margin-top: 24px; }
.daylight-setup-payment > h2 { margin-bottom: 18px; }
.daylight-setup-payment > .daylight-setup-note { margin-bottom: 16px; }
.daylight-setup-payment-summary { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--dl-border-strong); }
.daylight-setup-price-note { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--dl-fg-muted); }
.daylight-setup-bank-heading { margin-bottom: 6px; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--dl-fg); }
.daylight-setup-bank-intro { margin-bottom: 20px; font-size: 14px; line-height: 1.5; color: var(--dl-fg-muted); }
.daylight-setup-bank-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--dl-fg-muted); }
.daylight-setup-payment-timing { margin-top: 24px; max-width: 65ch; font-size: 15px; line-height: 1.5; color: var(--dl-fg); }
.daylight-setup-payment-timing > p:first-child { font-weight: 500; }
.daylight-setup-payment-qualifier { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--dl-fg-muted); }
.daylight-setup-connected { margin-bottom: 12px; padding: 12px 16px; background: var(--dl-card); }
.daylight-setup-payment-note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--dl-fg-muted); text-align: center; }
.daylight-setup-bank-help { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--dl-border-strong); color: var(--dl-fg-muted); font-size: 13px; line-height: 1.5; }
.daylight-setup-bank-help strong { font-weight: 500; color: var(--dl-fg); }
.daylight-setup-info-icon { display: block; width: 20px; height: 20px; flex: none; }
.daylight-ready-details { display: grid; gap: 20px; margin: 24px 0 28px; }
.daylight-ready-details > div { display: flex; align-items: flex-start; gap: 14px; }
.daylight-ready-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--dl-secondary); color: var(--dl-fg); }
.daylight-ready-details dt { margin-bottom: 4px; font-size: 15px; font-weight: 500; color: var(--dl-fg); }
.daylight-ready-details dd { font-size: 14px; line-height: 1.5; color: var(--dl-fg-muted); }
@media (max-width: 600px) {
  .daylight-setup-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daylight-setup-stats > div { padding: 16px; }
  .daylight-setup-stats dd { font-size: 30px; }
  .daylight-setup-equipment { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .daylight-setup-equipment > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
  .daylight-setup-equipment dt { margin: 0; padding-top: 1px; }
  .daylight-setup-payment { padding: 16px; }
}
.daylight-setup-summary { padding: 20px; margin-bottom: 24px; border: 1px solid var(--dl-border-strong); border-radius: 10px; background: var(--dl-secondary); color: var(--dl-fg); }
.daylight-setup-summary > * + * { margin-top: 10px; }
.daylight-setup-price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; font-size: 15px; }
.daylight-setup-price-row strong { font-family: var(--daylight-font-display); font-size: 30px; line-height: 1.2; font-weight: 400; }
.daylight-setup-price-row strong span { font-family: var(--daylight-font-sans); font-size: 15px; }
.daylight-setup-note { font-size: 14px; line-height: 1.5; color: var(--dl-fg-muted); }
.daylight-setup-terms { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-top: 14px; }
.daylight-setup-terms dt { font-size: 12px; color: var(--dl-fg-muted); }
.daylight-setup-terms dd { margin-top: 3px; font-size: 14px; }
.daylight-setup-review-help { margin-top: 16px; text-align: center; }
.daylight-setup-support { margin-top: 18px; font-size: 14px; line-height: 1.6; text-align: center; color: #765E46; }
.daylight-setup-support a { white-space: nowrap; }
.daylight-password-help { margin-top: 12px; color: var(--dl-fg-muted); font-size: 13px; line-height: 1.5; }
.daylight-password-help ul { list-style: disc; padding-left: 18px; }
.daylight-password-help li + li { margin-top: 3px; }
.daylight-password-field { display: flex; align-items: center; padding-right: 2px; border: 1px solid var(--dl-input-border); border-radius: var(--daylight-radius-sm); background: var(--dl-input-bg); }
.daylight-password-field .daylight-input { flex: 1; min-width: 0; height: 48px; padding: 0 12px; border: 0; border-radius: var(--daylight-radius-sm); color: var(--dl-fg); }
.daylight-password-field:has(input[aria-invalid="true"]) { border-color: var(--daylight-warning); }
.daylight-password-field:focus-within { outline: 2px solid var(--dl-fg); outline-offset: 2px; }
.daylight-password-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--daylight-radius-sm); background: transparent; color: var(--dl-fg); cursor: pointer; }
.daylight-password-toggle:hover, .daylight-password-toggle:focus-visible { background: var(--dl-secondary); }
.daylight-password-icon { display: block; width: 20px; height: 20px; }
.daylight-password-toggle [hidden] { display: none !important; }
.daylight-agreement { margin: 28px 0 24px; color: var(--dl-fg); }
.daylight-agreement > h2 { margin-bottom: 12px; }
.daylight-agreement-topic { border-top: 1px solid var(--dl-border-strong); }
.daylight-agreement-topic:last-child { border-bottom: 1px solid var(--dl-border-strong); }
.daylight-agreement-topic > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; padding: 16px 0; list-style: none; cursor: pointer; font-size: 15px; line-height: 1.5; font-weight: 500; }
.daylight-agreement-topic > summary::-webkit-details-marker { display: none; }
.daylight-agreement-chevron { display: block; flex: none; width: 20px; height: 20px; transition: transform 150ms ease; }
.daylight-agreement-icon { display: block; width: 20px; height: 20px; }
.daylight-agreement-topic[open] > summary .daylight-agreement-chevron { transform: rotate(180deg); }
.daylight-agreement-copy { display: flex; flex-direction: column; gap: 16px; padding: 0 32px 20px 0; }
.daylight-welcome-bg :is(a, button, input, summary):focus-visible { outline: 2px solid #4C2806; outline-offset: 4px; }
.daylight-welcome-bg .daylight-input { scroll-margin-top: 24px; }
@media (max-width: 480px) {
  .daylight-welcome-heading { font-size: 30px; line-height: 1.12; }
  .daylight-setup-summary { padding: 16px; }
  .daylight-setup-price-row strong { font-size: 28px; }
  .daylight-setup-terms { gap: 12px 20px; }
  .daylight-timeline-panel .daylight-font-mono { white-space: normal; }
  .daylight-timeline-panel { padding-inline: var(--dl-space-4); }
}


.daylight-autopay-feature {
  margin-bottom: 16px;
  border: 1px solid var(--dl-border-strong);
  border-radius: 8px;
  background: var(--dl-card);
  color: var(--dl-fg);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.daylight-autopay-feature:has(input:checked) { border-color: var(--daylight-orange); background: #FFF0DF; }
.daylight-autopay-recommended { padding: 5px 10px; border-radius: 6px; background: var(--dl-pill-neutral); color: var(--dl-fg); font-size: 12px; font-weight: 600; transition: background-color 150ms ease; }
.daylight-autopay-feature:has(input:checked) .daylight-autopay-recommended { background: #FFD6AE; }
.daylight-autopay-enable { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 500; }
.daylight-autopay-enable-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.daylight-autopay-enable-copy > .daylight-setup-note { font-size: 13px; font-weight: 400; }
.daylight-autopay-switch { display: inline-flex; align-items: center; position: relative; width: 48px; height: 44px; flex-shrink: 0; }
.daylight-autopay-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.daylight-autopay-switch-track { display: block; width: 48px; height: 28px; padding: 3px; border-radius: 20px; background: var(--dl-toggle-track); transition: background-color 150ms ease; }
.daylight-autopay-switch-track > span { display: block; width: 22px; height: 22px; background: var(--dl-card); border-radius: 50%; transition: transform 150ms ease; }
.daylight-autopay-switch input:checked + .daylight-autopay-switch-track { background: var(--daylight-orange); }
.daylight-autopay-switch input:checked + .daylight-autopay-switch-track > span { transform: translateX(20px); }
.daylight-autopay-switch input:focus-visible + .daylight-autopay-switch-track { outline: 2px solid var(--dl-fg); outline-offset: 4px; }
.daylight-autopay-enable-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.daylight-autopay-signed-note { padding: 0 16px 16px; font-size: 12px; line-height: 1.5; color: var(--dl-fg-muted); }
[data-controller~="welcome-autopay"] [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .daylight-autopay-feature,
  .daylight-autopay-feature :is(.daylight-autopay-recommended, .daylight-autopay-switch-track, .daylight-autopay-switch-track > span),
  .daylight-agreement-chevron { transition: none; }
}

/* Customer Ray uses the existing portal palette, surfaces, and compact actions. */
.customer-ray { --ray-viewport: 100dvh; --ray-top: 0px; font: 15px/1.5 "Aeonik Pro", sans-serif; color: var(--dl-fg); }
.customer-ray [hidden] { display: none !important; }
.customer-ray :is(button, a) { -webkit-tap-highlight-color: transparent; }
.customer-ray button { cursor: pointer; font: inherit; }
.customer-ray button:disabled { opacity: .5; cursor: default; }
.customer-ray :is(button, a):focus-visible, .customer-tour :is(button, a):focus-visible { outline: 2px solid var(--dl-fg); outline-offset: 3px; }
.customer-ray .daylight-btn-v2, .customer-tour .daylight-btn-v2 { width: auto; height: 44px; min-height: 44px; padding: 0 14px; border-radius: 4px; font: 500 15px/1 "Aeonik Pro", sans-serif; }
.customer-ray .daylight-btn-v2-primary, .customer-tour .daylight-btn-v2-primary { background: var(--dl-primary); color: var(--dl-on-primary); }
.customer-ray .daylight-btn-v2-secondary, .customer-tour .daylight-btn-v2-secondary { background: var(--dl-secondary); color: var(--dl-on-secondary); border-color: var(--dl-border); }
.customer-ray-launcher { position: fixed; z-index: 65; right: 24px; bottom: calc(20px + env(safe-area-inset-bottom)); display: inline-flex; gap: 10px; min-width: 0; height: 48px !important; min-height: 48px !important; padding: 6px 14px 6px 6px !important; border: 0; border-radius: 4px !important; box-shadow: 0 4px 20px rgb(26 8 0 / .16); }
.customer-ray-avatar { display: block; flex: none; width: 32px; height: 32px; object-fit: cover; border-radius: 50%; background: #FFF7E9; }
.customer-ray-panel { position: fixed; z-index: 70; right: 24px; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(480px, calc(100vw - 32px)); height: min(740px, calc(var(--ray-viewport) - 32px - env(safe-area-inset-bottom))); min-height: min(220px, calc(var(--ray-viewport) - 32px)); display: flex; flex-direction: column; background: var(--dl-card); border: 1px solid var(--dl-border-strong); border-radius: 24px; box-shadow: 0 12px 50px rgb(26 8 0 / .2); overflow: hidden; }
.daylight[data-theme="photo"] .customer-ray-panel, html[data-theme-hint="photo"] .customer-ray-panel { background: #21160F; }
.customer-ray-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--dl-divider); flex: none; }
.customer-ray-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.customer-ray-heading { min-width: 0; }
.customer-ray-identity h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 18px/1.2 "Aeonik Pro", sans-serif; margin: 0; }
.customer-ray-controls { display: flex; align-items: center; gap: 0; flex: none; }
.customer-ray-controls button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--dl-fg); }
.customer-ray-controls button:hover { background: var(--dl-secondary); }
.customer-ray-controls svg, .customer-ray-control-icon { display: block; flex: none; width: 20px; height: 20px; }
.customer-ray-project { margin-top: 3px; color: var(--dl-fg-muted); font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-ray-scope { margin: 0 22px; font-size: 13px; color: var(--dl-fg-muted); }
.customer-ray-scope:not(:empty) { padding-top: 12px; padding-bottom: 4px; }
.customer-ray-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; scrollbar-gutter: stable; }
.customer-ray-empty { display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding: 28px 0 8px; text-align: center; }
.customer-ray-empty-art { position: relative; isolation: isolate; flex: none; width: 80px; height: 80px; margin: 0 auto 20px; }
.customer-ray-empty-art::before { position: absolute; z-index: -1; inset: -8px; border-radius: 50%; background: color-mix(in srgb, var(--dl-primary) 30%, transparent); filter: blur(24px); content: ""; }
.customer-ray-empty-avatar { position: relative; width: 80px; height: 80px; box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--dl-primary) 20%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--dl-primary) 20%, transparent); }
.customer-ray-empty h3 { margin: 0 0 10px; font: 400 30px/1.15 "Feature Deck", serif; letter-spacing: -.02em; }
.customer-ray-empty > p { max-width: 280px; margin: 0 auto 24px; color: var(--dl-fg-muted); font-size: 14px; line-height: 1.5; }
.customer-ray-prompts { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.customer-ray-prompts .customer-ray-prompt { justify-content: flex-start; width: 100%; min-height: 44px; text-align: left; white-space: normal; }
.customer-ray-composer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.customer-ray .customer-ray-composer-actions a { display: inline-flex; align-items: center; min-height: 36px; color: var(--dl-fg-muted); font-size: 13px; text-decoration: underline; }
.customer-ray-direct-help { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--dl-fg-muted); }
.customer-ray-direct-help a { display: inline-flex; align-items: center; min-height: 36px; color: inherit; text-decoration: underline; }
.customer-ray-message { display: flex; align-items: flex-start; gap: 8px; padding-top: 22px; overflow-wrap: anywhere; }
.customer-ray-message-column { min-width: 0; flex: 1; }
.customer-ray-message-user { justify-content: flex-end; }
.customer-ray-message-user .customer-ray-message-column { display: flex; flex-direction: column; align-items: flex-end; flex: 0 1 auto; max-width: 88%; }
.customer-ray-message-avatar { display: block; flex: none; width: 28px; height: 28px; margin-top: 1px; object-fit: cover; border-radius: 50%; pointer-events: none; }
.customer-ray-message-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 28px; margin-bottom: 4px; }
.customer-ray-speaker { color: var(--dl-fg-muted); font-size: 12px; font-weight: 500; }
.customer-ray-progress { color: var(--dl-fg-muted); font-size: 13px; animation: customer-ray-progress-in .18s ease-out; }
.customer-ray-progress [data-ray-progress-dots] { display: inline-block; width: 1em; padding-left: 2px; }
.customer-ray-progress[data-working="true"] [data-ray-progress-dots] { animation: customer-ray-progress-dots 1.2s steps(3, end) infinite; }
.customer-ray-message-user .customer-ray-message-text { display: inline-block; white-space: pre-wrap; padding: 12px 16px; background: var(--dl-secondary); color: var(--dl-on-secondary); border-radius: 12px 12px 4px 12px; }
@keyframes customer-ray-progress-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes customer-ray-progress-dots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .customer-ray-progress, .customer-ray-progress [data-ray-progress-dots] { animation: none !important; } }
.customer-ray-message-text { white-space: normal; line-height: 1.6; }
.customer-ray-message-text :is(p, ul, ol, h3, h4, blockquote) { margin: 0 0 10px; }
.customer-ray-message-text > :last-child, .customer-ray-message-text blockquote > :last-child { margin-bottom: 0; }
.customer-ray-message-text :is(h3, h4) { font: inherit; font-weight: 600; }
.customer-ray-message-text :is(ul, ol) { padding-left: 22px; }
.customer-ray-message-text ul { list-style: disc; }
.customer-ray-message-text ol { list-style: decimal; }
.customer-ray-message-text li + li { margin-top: 4px; }
.customer-ray-message-text blockquote { padding-left: 12px; border-left: 2px solid var(--dl-border-strong); color: var(--dl-fg-muted); }
.customer-ray-message a { color: inherit; text-decoration: underline; }
.customer-ray-setup .daylight-btn-v2 { width: 100%; margin-top: 12px; color: var(--dl-on-primary); text-decoration: none; }
.customer-ray-card { margin-top: 14px; padding: 16px; background: var(--dl-input-bg); border: 1px solid var(--dl-input-border); border-radius: 12px; }
.customer-ray-card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 500; }
.customer-ray-card p { margin: 8px 0; }
.customer-ray-card > a { display: inline-flex; align-items: center; min-height: 36px; padding-top: 6px; color: var(--dl-fg-muted); }
.customer-ray-card .customer-ray-card-primary { margin-top: 12px; }
.customer-ray-data-row { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0; font-size: 13px; }
.customer-ray-data-row strong { font-weight: 500; text-align: right; }
.customer-ray-energy { width: 100%; font-size: 12px; border-collapse: collapse; }
.customer-ray-energy :is(th,td) { padding: 6px 0; border-bottom: 1px solid var(--dl-divider); text-align: left; }
.customer-ray-energy :is(th,td):last-child { text-align: right; }
.customer-ray-text-button, .customer-ray-composer-actions button, .customer-ray-subheader button, .customer-ray-recovery button { min-height: 36px; padding: 6px 4px; border: 0; background: transparent; color: var(--dl-fg); font-size: 13px; text-decoration: underline; }
.customer-ray-answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 4px; }
.customer-ray-byline-button { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--dl-fg-muted); }
.customer-ray-byline-button svg { display: block; width: 16px; height: 16px; }
.customer-ray-byline-button:hover, .customer-ray-byline-button:focus-visible, .customer-ray-byline-button[aria-pressed="true"] { color: var(--dl-fg); background: var(--dl-secondary); }
@media (max-width: 640px) { .customer-ray-byline-button { width: 44px; height: 44px; } }
.customer-ray-composer-wrap { flex: none; padding: 8px 16px 8px; }
.customer-ray-status { color: var(--dl-fg-muted); font-size: 13px; }
.customer-ray-status:not(:empty), .customer-ray-error:not(:empty) { padding: 6px 4px; }
.customer-ray-error { margin: 0; color: var(--dl-fg); font-size: 13px; }
.customer-ray-composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border: 1px solid var(--dl-input-border); border-radius: var(--daylight-radius-sm); background: var(--dl-input-bg); }
.customer-ray-composer:focus-within { border-color: var(--dl-fg); }
.customer-ray-composer:has(textarea:focus-visible) { outline: 2px solid var(--dl-fg); outline-offset: 2px; }
.customer-ray-composer textarea { flex: 1; min-width: 0; max-height: 150px; min-height: 44px; resize: none; box-sizing: border-box; appearance: none; padding: 10px 8px; border: none; border-radius: inherit; outline: none; background: transparent; color: var(--dl-fg); font: inherit; line-height: 24px; overflow-y: auto; }
.customer-ray-composer textarea:focus { outline: none; box-shadow: none; }
.customer-ray-composer textarea::placeholder { color: var(--dl-fg-muted); }
.customer-ray-send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 4px; background: var(--dl-primary); color: var(--dl-on-primary); }
.customer-ray-send svg { display: block; width: 20px; height: 20px; }
.customer-ray-disclaimer { margin: 8px 0 0; color: var(--dl-fg-muted); font-size: 11px; line-height: 1.4; text-align: center; }
.customer-ray-composer-actions { min-height: 36px; }
.customer-ray-composer-actions a { margin-left: auto; }
.customer-ray-history { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 22px 20px; }
.customer-ray-panel:has(.customer-ray-history:not([hidden])) .customer-ray-messages { display: none; }
.customer-ray-subheader { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.customer-ray-subheader h3 { font-size: 16px; font-weight: 500; }
.customer-ray-history-item { display: flex; flex-direction: column; width: 100%; min-height: 64px; gap: 4px; padding: 12px; border: 0; border-bottom: 1px solid var(--dl-divider); background: none; color: inherit; text-align: left; overflow-wrap: anywhere; }
.customer-ray-history-item:hover, .customer-ray-history-item:focus-visible { background: var(--dl-secondary); }
.customer-ray-history-item strong { font-weight: 500; }
.customer-ray-history-item span { color: var(--dl-fg-muted); font-size: 12px; }
.customer-ray-report { max-height: 38%; overflow-y: auto; padding: 16px 22px; border-top: 1px solid var(--dl-divider); }
.customer-ray-report label { display: block; margin-bottom: 8px; font-size: 13px; }
.customer-ray-report textarea { width: 100%; box-sizing: border-box; appearance: none; padding: 8px; border: 1px solid var(--dl-input-border); border-radius: var(--daylight-radius-sm); background: var(--dl-input-bg); color: inherit; }
.customer-ray-report textarea:focus-visible { outline: 2px solid var(--dl-fg); outline-offset: 2px; }
.customer-ray-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.customer-ray-report-actions .daylight-btn-v2 { flex: 1 1 auto; }
.customer-ray-page-space { min-height: 640px; }
.customer-ray-page .customer-ray-panel { width: min(760px, calc(100vw - 48px)); left: 50%; right: auto; transform: translateX(-50%); }
@media (max-width: 640px) {
  .customer-ray-launcher { right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .customer-ray-panel, .customer-ray-page .customer-ray-panel { top: var(--ray-top); right: 0; bottom: auto; left: 0; width: 100%; height: var(--ray-viewport); min-height: 0; max-height: var(--ray-viewport); border-radius: 0; transform: none; padding-top: env(safe-area-inset-top); }
  .customer-ray-header { padding: 10px 12px 10px 16px; }
  .customer-ray-controls .customer-ray-popout { display: none; }
  .customer-ray-composer-wrap { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .customer-ray-composer textarea, .customer-ray-report textarea { font-size: 16px; }
  .customer-ray-empty { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .customer-ray *, .customer-ray *::before, .customer-ray *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.daylight:has(> .customer-ray) > main { padding-bottom: 88px; }

/* Ray's guide follows the persistent portal navigation and uses compact surfaces. */
.customer-portal-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.customer-portal-tabs::-webkit-scrollbar { display: none; }
.customer-portal-tabs .daylight-tab { flex: none; white-space: nowrap; transition: color 180ms ease, opacity 180ms ease, border-color 180ms ease; }
.daylight .daylight-tab.customer-tour-tab-active { color: var(--daylight-orange); opacity: 1; }
.customer-tour-guide { font: 15px/1.5 "Aeonik Pro", sans-serif; color: var(--dl-fg); }
.customer-tour [hidden], .customer-tour-guide [hidden], .customer-tour-guide[hidden] { display: none !important; }
.customer-ray-guide-host { display: flex; flex-direction: column; flex: none; min-height: 0; }
.customer-ray-guide-host:empty { display: none; }
.customer-tour-guide { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 18px 20px 20px; }
.customer-tour-guide :is([data-tour-body], [data-tour-card-host], .customer-tour-card, .customer-tour-welcome, .customer-tour-banner) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.customer-tour-guide [data-tour-card-host]:empty { display: none; }
.customer-tour-content { min-height: 0; overflow-y: auto; }
.customer-tour-welcome .customer-tour-actions { flex-direction: column; align-items: stretch; gap: 8px; }
.customer-tour-welcome .customer-tour-actions > button { width: 100%; }
.customer-tour-welcome .customer-tour-actions .customer-tour-quiet { min-height: 36px; }
.customer-tour-card-active { border-color: var(--daylight-orange) !important; box-shadow: 0 0 0 1px var(--daylight-orange); }
.customer-tour-toolbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--dl-fg-muted); }
.customer-tour-section { display: block; color: var(--daylight-orange); font-weight: 500; }
.customer-tour-guide h3 { margin: 18px 0 10px; font: 400 28px/1.1 "Feature Deck", serif; letter-spacing: -.02em; }
.customer-tour-guide [data-tour-title]:focus { outline: none; }
.customer-tour-guide p { margin: 0 0 20px; color: var(--dl-fg-muted); }
.customer-tour-banner p { margin-top: 12px; }
.customer-tour-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; margin-top: auto; padding-top: 20px; }
.customer-tour-actions .daylight-btn-v2 { flex: 1 1 auto; }
.customer-tour-quiet { min-height: 44px; padding: 6px 4px; border: 0; background: transparent; color: var(--dl-fg-muted); font: 13px/1.3 "Aeonik Pro", sans-serif; text-decoration: underline; }
.customer-tour-actions button:disabled { opacity: .45; cursor: default; }
.customer-ray-panel:is([data-mode="guide"], [data-mode="tour-chat"]) { width: 360px; top: calc(var(--ray-top) + 24px); bottom: calc(24px + var(--ray-bottom-inset, 0px)); height: auto; min-height: 0; max-height: calc(var(--ray-viewport) - 48px - var(--ray-bottom-inset, 0px)); border-radius: 12px; box-shadow: 0 4px 20px rgb(26 8 0 / .08); }
.customer-ray-panel[data-mode="guide"] > :not(.customer-ray-header, .customer-ray-guide-host) { display: none !important; }
.customer-ray-panel[data-mode="guide"] .customer-ray-guide-host { flex: 1; }
.customer-ray-panel[data-mode="guide"] .customer-ray-controls { display: none; }
.daylight:has(> .customer-ray .customer-ray-panel:is([data-mode="guide"], [data-mode="tour-chat"]):not([hidden])) > :is(main, .daylight-nav) { margin-right: 408px; }
.daylight:has(> .customer-ray) > :is(main, .daylight-nav) { transition: margin-right 200ms cubic-bezier(.2, .8, .2, 1), padding-bottom 200ms cubic-bezier(.2, .8, .2, 1); }
.customer-ray-panel:is([data-mode="guide"], [data-mode="tour-chat"]) { animation: customer-ray-guide-enter 200ms cubic-bezier(.2, .8, .2, 1); }
.customer-ray-panel[data-mode="tour-chat"] .customer-ray-guide-host { order: 2; flex: none; max-height: 42%; border-top: 1px solid var(--dl-divider); }
.customer-ray-panel[data-mode="tour-chat"] .customer-tour-toolbar { display: none; }
.customer-ray-panel[data-mode="tour-chat"] .customer-tour-guide { padding-top: 12px; }
.customer-ray-panel[data-mode="tour-chat"] .customer-tour-guide h3 { margin-top: 0; font-size: 22px; }
.customer-ray-panel[data-mode="tour-chat"] .customer-tour-guide p { margin-bottom: 0; font-size: 13px; }
.customer-ray-panel[data-mode="tour-chat"] .customer-tour-actions { padding-top: 12px; }
@keyframes customer-ray-guide-enter { from { opacity: 0; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }
[data-customer-tour] { scroll-margin-top: 24px; }
@media (max-width: 1023px) {
  .daylight:has(> .customer-ray .customer-ray-panel:is([data-mode="guide"], [data-mode="tour-chat"]):not([hidden])) > :is(main, .daylight-nav) { margin-right: 0; }
  .daylight:has(> .customer-ray .customer-ray-panel[data-mode="guide"]:not([hidden])) > main { padding-bottom: calc(var(--ray-guide-height, 320px) + var(--ray-bottom-inset, 0px) + 24px); }
  .customer-ray-panel[data-mode="guide"] { top: auto; right: 0; left: 0; bottom: var(--ray-bottom-inset, 0px); width: 100%; height: auto; min-height: 0; max-height: min(44dvh, 380px); padding: 0 0 env(safe-area-inset-bottom); border-radius: 12px 12px 0 0; transform: none; }
  .customer-ray-panel[data-mode="guide"] .customer-ray-header { padding: 10px 16px; }
  .customer-ray-panel[data-mode="guide"] .customer-ray-identity h2 { font-size: 16px; }
  .customer-ray-panel[data-mode="guide"] .customer-ray-project { display: none; }
  .customer-ray-panel[data-mode="guide"] .customer-ray-avatar { width: 24px; height: 24px; }
  .customer-ray-panel[data-mode="tour-chat"] { top: var(--ray-top); right: 0; left: 0; bottom: auto; width: 100%; height: calc(var(--ray-viewport) - var(--ray-bottom-inset, 0px)); max-height: calc(var(--ray-viewport) - var(--ray-bottom-inset, 0px)); border-radius: 0; }
  .customer-ray-panel[data-mode="guide"] .customer-ray-guide-host { flex: 0 1 auto; }
  .customer-tour-guide { padding: 12px 16px; }
  .customer-tour-actions { padding-top: 12px; }
  .customer-ray-panel[data-mode="tour-chat"] .customer-tour-guide { padding: 10px 16px; }
  .customer-ray-panel[data-mode="tour-chat"] .customer-tour-guide h3 { font-size: 20px; }
  .customer-tour-guide h3 { margin: 4px 0 8px; font-size: 24px; }
  .customer-tour-guide p { margin-bottom: 12px; font-size: 14px; }
  .customer-tour-toolbar { min-height: 24px; margin-bottom: 8px; }
  .customer-tour-toolbar > span { display: flex; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-portal-tabs .daylight-tab, .daylight:has(> .customer-ray) > :is(main, .daylight-nav) { transition: none; }
  .customer-ray-panel:is([data-mode="guide"], [data-mode="tour-chat"]) { animation: none; }
}
.customer-system {
  --dl-energy-solar: #d46101;
  --dl-energy-home: var(--dl-fg);
  --dl-energy-grid-in: var(--daylight-blue-dark);
  --dl-energy-grid-out: var(--daylight-purple-dark);
  --dl-energy-battery-in: #9d7703;
  --dl-energy-battery-out: #584489;
  --dl-energy-soc: var(--dl-pill-success-fg);
  /* Brand orange is under 3:1 on the Light card; the solar series orange clears it and is brand orange on Photo. */
  --dl-scrub-selected: var(--dl-energy-solar);
  --dl-scrub-now: color-mix(in srgb, var(--dl-scrub-selected) 35%, transparent);
  /* Chart options read these: faint missing-section bridges and the quiet band over a missing bar interval. */
  --dl-energy-bridge-width: 1;
  --dl-energy-bridge-dash: 2 4;
  --dl-energy-bridge-opacity: 0.45;
  --dl-energy-gap-opacity: 0.5;
  --dl-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z'/%3E%3C/svg%3E");
}
.daylight[data-theme="photo"] .customer-system {
  /* Plots are transparent, so System surfaces stay dark enough for series and text over any photo. */
  --dl-card: rgb(26 8 0 / 0.9);
  --dl-energy-solar: var(--daylight-orange);
  --dl-energy-grid-in: var(--daylight-blue);
  --dl-energy-grid-out: var(--daylight-purple);
  --dl-energy-battery-in: var(--daylight-yellow);
  --dl-energy-battery-out: var(--daylight-orange-10);
}
.customer-system [hidden] { display: none !important; }
/* Shared primitive polish, applied only inside System and its dialog so Account keeps its trunk behaviour. */
.customer-system :is(.daylight-btn-v2, .daylight-icon-btn, .customer-system-node, .customer-energy-calendar-day) { transition: opacity var(--daylight-duration-hover) ease, transform var(--dl-duration-press) var(--dl-ease-out); }
.customer-system .daylight-btn-v2:hover { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .customer-system .daylight-btn-v2:not(:disabled, [aria-busy="true"]):hover { opacity: .85; }
  .customer-system .daylight-icon-btn:not(:disabled):hover { opacity: 1; color: var(--dl-fg); background: var(--dl-secondary); }
}
.customer-system .daylight-icon-btn { color: var(--dl-fg-muted); }
.customer-system .daylight-icon-btn:hover { opacity: 1; }
.customer-system :is(.daylight-btn-v2, .daylight-icon-btn):not(:disabled, [aria-busy="true"]):active { transform: scale(var(--dl-press-scale)); }
.customer-system :is(.daylight-btn-v2, .daylight-icon-btn):disabled { opacity: .5; cursor: not-allowed; }
.customer-system button:focus-visible, .customer-system a:focus-visible, .customer-system input:focus-visible, .customer-system summary:focus-visible,
.customer-system-detail button:focus-visible, .customer-system-detail summary:focus-visible {
  outline: 2px solid var(--dl-fg);
  outline-offset: 3px;
}
.customer-system-intro { padding-bottom: 32px; }
.customer-system-context { max-width: 68ch; margin: 8px 0 0; color: var(--dl-fg-muted); font: 400 15px/1.5 "Aeonik Pro", sans-serif; overflow-wrap: anywhere; }
.customer-system-context a { color: var(--dl-fg); text-decoration: underline; text-underline-offset: 3px; }
.customer-system-sections { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 20px; border-bottom: 1px solid var(--dl-divider); }
.customer-system-sections a { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--dl-fg-muted); font: 500 15px/1.2 "Aeonik Pro", sans-serif; text-decoration: none; transition: color 150ms ease, border-color 150ms ease; }
.customer-system-sections a:hover { color: var(--dl-fg); border-bottom-color: var(--dl-fg); }
.customer-system :is(#system-overview, #system-energy, #system-equipment, #system-energy-heading) { scroll-margin-top: var(--dl-space-6); }
.customer-system :is(#system-overview, #system-energy, #system-equipment):focus { outline: none; }
.customer-system :is(#system-overview, #system-energy, #system-equipment):focus-visible { outline: 2px solid var(--dl-fg); outline-offset: 3px; }
.customer-system-house { container-type: inline-size; overflow-anchor: none; }
/* The scene and its hour scrubber stay one unit at every width, so exploring the day never leaves the house off screen. */
.customer-system-house-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "visual" "readings" "explore"; gap: 24px; margin-top: 24px; }
@container (min-width: 760px) {
  .customer-system-house-layout { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); grid-template-areas: "visual status" "visual readings" "visual explore"; grid-template-rows: auto auto 1fr; gap: 32px 40px; }
}
.customer-system-house-status { grid-area: status; min-width: 0; container-type: inline-size; }
.customer-system-visual { grid-area: visual; display: flex; flex-direction: column; gap: 12px; align-self: start; min-width: 0; }
.customer-system-figure { align-self: stretch; min-width: 0; margin: 0; }
.customer-system-readings { grid-area: readings; min-width: 0; container-type: inline-size; }
.customer-system-explore { grid-area: explore; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.customer-system-readings:not(:has(> :not([hidden], .customer-system-partial))),
.customer-system-partial:not(:has(> :not([hidden]))),
.customer-system-house-actions:not(:has(> :not([hidden]))),
.customer-system-freshness:not(:has(> :not([hidden]):not(:empty))),
.customer-system-explore:not(:has(.customer-system-house-actions > :not([hidden]), .customer-system-freshness > :not([hidden]):not(:empty))) { display: none; }
.customer-system-slot { display: grid; min-width: 0; }
.customer-system-slot > * { grid-area: 1 / 1; min-width: 0; }
.customer-system-sizer { visibility: hidden; pointer-events: none; user-select: none; }
.customer-system-scene { position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 16px; background: var(--dl-secondary); container-type: inline-size; }
.customer-system-scene-stage { position: absolute; top: 0; left: 0; }
.customer-system-scene-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity var(--dl-duration-scene) var(--dl-ease-in-out); }
.customer-system-scene-stage img[data-previous], .customer-system-house[data-scrub-input="keyboard"] .customer-system-scene-stage img { transition: none; }
.customer-system-scene-stage img[data-previous] { opacity: 1; }
.customer-system-scene-stage img[data-active] { z-index: 1; opacity: 1; }
.customer-system-routes { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.customer-system-route { --route: var(--dl-energy-solar); fill: none; stroke: var(--dl-scene-halo); stroke-width: var(--dl-route-quiet-width); stroke-linecap: round; stroke-linejoin: round; }
.customer-system-route[data-source="grid"], .customer-system-route-arrow[data-source="grid"] { --route: var(--dl-energy-grid-in); }
.customer-system-route[data-source="battery"], .customer-system-route-arrow[data-source="battery"] { --route: var(--dl-energy-battery-out); }
.customer-system-route.is-moving { stroke: var(--route); stroke-width: var(--dl-route-width); filter: drop-shadow(0 0 var(--dl-hairline) var(--dl-scene-halo)); }
.customer-system-route.is-forecast { stroke-dasharray: 2 6; }
/* Quiet fixed wiring under everything; while comets run they carry the colour and the active route only hints at it. */
.customer-system-wire { fill: none; stroke: var(--dl-scene-wire); stroke-width: var(--dl-route-width); stroke-linecap: round; stroke-linejoin: round; }
.customer-system-routes[data-motion] .customer-system-route.is-moving { stroke-opacity: var(--dl-route-trail-opacity); filter: none; }
.customer-system-pulse { --route: var(--dl-energy-solar); }
.customer-system-pulse[data-source="grid"] { --route: var(--dl-energy-grid-in); }
.customer-system-pulse[data-source="battery"] { --route: var(--dl-energy-battery-out); }
.customer-system-pulse path { fill: none; stroke: var(--route); stroke-linecap: round; }
.customer-system-pulse .customer-system-comet-head { stroke-width: var(--dl-comet-head); }
.customer-system-pulse .customer-system-comet-core { stroke: var(--daylight-white); stroke-width: var(--dl-comet-core); opacity: var(--dl-comet-core-opacity); }
.customer-system-pulse .customer-system-comet-tail { stroke-width: calc(var(--dl-comet-head) - var(--step) * var(--dl-comet-tail-taper)); opacity: calc(var(--dl-comet-tail-opacity) - var(--step) * var(--dl-comet-tail-falloff)); }
.customer-system-route-arrow { --route: var(--dl-energy-solar); overflow: visible; }
.customer-system-route-arrow path { fill: var(--route); stroke: var(--dl-scene-halo); stroke-width: var(--dl-hairline); stroke-linejoin: round; }
.customer-system-anchor { position: absolute; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); cursor: pointer; color: var(--dl-fg); transition: transform var(--dl-duration-press) var(--dl-ease-out); }
.customer-system-anchor-marker { display: block; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 50%; background: var(--dl-card); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--dl-scene-halo); }
.customer-system-anchor-label { display: none; position: absolute; z-index: 2; min-height: 44px; white-space: nowrap; padding: 4px 6px; border: 0; border-radius: 4px; background: var(--dl-card); color: var(--dl-fg); font: 500 12px/1.2 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; box-shadow: 0 1px 5px rgb(0 0 0 / .18); cursor: pointer; transform: translate(-50%, -50%); transition: transform var(--dl-duration-press) var(--dl-ease-out); }
.customer-system-anchor:active, .customer-system-anchor-label:active { transform: translate(-50%, -50%) scale(var(--dl-press-scale)); }
@container (min-width: 420px) { .customer-system-anchor-label { display: block; } }
.customer-system-anchor-solar { color: var(--dl-energy-solar); }
.customer-system-anchor-grid { color: var(--dl-energy-grid-in); }
.customer-system-anchor-battery { color: var(--dl-energy-battery-in); }
.customer-system-meta { margin: 0 0 var(--dl-space-3); color: var(--dl-fg-muted); font: 400 14px/1.4 "Aeonik Pro", sans-serif; }
.customer-system-meta-live { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dl-space-1) var(--dl-space-2); }
.customer-system-eyebrow { position: relative; display: inline-flex; align-items: center; gap: var(--dl-space-2); color: var(--dl-fg); font: var(--dl-font-label); white-space: nowrap; }
.customer-system-eyebrow::before { content: ""; flex: none; width: var(--dl-live-dot); height: var(--dl-live-dot); border-radius: 50%; background: var(--dl-fg-muted); }
.customer-system-eyebrow[data-mode="now"]::before { background: var(--dl-scrub-selected); }
.customer-system-eyebrow[data-mode="forecast"]::before { background: transparent; box-shadow: inset 0 0 0 var(--dl-hairline) var(--dl-fg-muted); }
/* The one deliberate ambient motion: a calm halo leaves the steady dot, only while Now shows a current reading. */
.customer-system-eyebrow[data-live]::after { content: ""; position: absolute; left: 0; top: 50%; width: var(--dl-live-dot); height: var(--dl-live-dot); margin-top: calc(var(--dl-live-dot) / -2); border-radius: 50%; background: var(--dl-scrub-selected); opacity: 0; pointer-events: none; animation: customer-system-live var(--dl-pulse-duration) var(--dl-ease-out) infinite; }
@keyframes customer-system-live { from { transform: scale(1); opacity: var(--dl-pulse-opacity); } to { transform: scale(var(--dl-pulse-scale)); opacity: 0; } }
.customer-system-meta-when { color: var(--dl-fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.customer-system-meta-when:not(:empty) + .customer-system-meta-weather:not(:empty)::before { content: ", "; }
.customer-system-headline { margin: 0 0 8px; color: var(--dl-fg); font: 500 24px/1.2 "Aeonik Pro", sans-serif; text-wrap: balance; }
@container (min-width: 520px) { .customer-system-headline { font-size: 28px; line-height: 1.15; } }
.customer-system-status-detail { max-width: 60ch; margin: 0; color: var(--dl-fg-muted); font: 400 15px/1.5 "Aeonik Pro", sans-serif; text-wrap: pretty; }
.customer-system-status-detail + .customer-system-status-detail { margin-top: 12px; }
.customer-system-notice { margin: 16px 0 0; color: var(--dl-fg); font: 400 14px/1.5 "Aeonik Pro", sans-serif; text-wrap: pretty; }
.customer-system-notice.daylight-info-panel { padding: var(--dl-space-3) var(--dl-space-4); }
.customer-system-notice[data-tone] { display: grid; grid-template-columns: var(--dl-tile-icon) minmax(0, 1fr); align-items: start; gap: var(--dl-space-1) var(--dl-space-3); }
.customer-system-notice[data-tone]::before { content: ""; grid-row: 1; width: var(--dl-tile-icon); height: 1lh; background: currentColor; -webkit-mask: var(--dl-icon-warning) center / var(--dl-tile-icon) no-repeat; mask: var(--dl-icon-warning) center / var(--dl-tile-icon) no-repeat; }
.customer-system-notice[data-tone] > * { grid-column: 2; margin: 0; }
.customer-system-notice.daylight-info-panel[data-tone="attention"] { border-color: var(--dl-attention-border); background: var(--dl-attention-bg); color: var(--dl-attention-fg); }
.customer-system-notice.daylight-info-panel[data-tone="caution"] { border-color: var(--dl-caution-border); background: var(--dl-caution-bg); color: var(--dl-caution-fg); }
.customer-system-notice-title { font-weight: 500; font-size: 15px; }
.customer-system-notice[data-tone] .customer-system-quiet { justify-self: start; margin: 0 0 calc(var(--dl-space-2) * -1) calc(var(--dl-space-1) * -1); color: inherit; }
.customer-system .customer-system-caution { display: flex; align-items: flex-start; gap: var(--dl-space-2); color: var(--dl-attention-fg); font-weight: 500; }
.customer-system .customer-system-caution::before { content: ""; flex: none; width: var(--dl-space-4); height: 1lh; background: currentColor; -webkit-mask: var(--dl-icon-warning) center / var(--dl-space-4) no-repeat; mask: var(--dl-icon-warning) center / var(--dl-space-4) no-repeat; }
.daylight :is(.customer-system-house, .customer-system-notice, .customer-system-detail) { transition: none; }
/* Every tile in a row shares the tallest height, so an availability caption on one never staggers the others. */
.customer-system-nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dl-space-2); }
/* Queries the readings region; four tiles only once each can hold "Unavailable" whole. */
@container (min-width: 30rem) { .customer-system-nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.customer-system-node { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--dl-space-2); min-width: 0; min-height: 44px; padding: var(--dl-space-2); border: 0; border-radius: var(--dl-tile-radius); background: var(--dl-tile-surface); color: var(--dl-fg); text-align: center; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .customer-system-node:hover { box-shadow: inset 0 0 0 var(--dl-hairline) var(--dl-border-strong); }
}
.customer-system-node:active { transform: scale(var(--dl-press-scale)); }
/* The SVG's own 24-unit viewBox centres a 20-unit glyph viewport, so the slot needs no padding. */
.customer-system-node-icon { display: block; flex: none; width: var(--dl-tile-icon-slot); height: var(--dl-tile-icon-slot); overflow: visible; color: var(--dl-fg-muted); }
.customer-system-node-solar .customer-system-node-icon { color: var(--dl-energy-solar); }
/* The app tints Home dark blue and Grid a lighter blue; the existing blue tokens carry both roles. */
.customer-system-node-home .customer-system-node-icon { color: var(--daylight-blue-dark); }
.customer-system-node-grid .customer-system-node-icon { color: var(--daylight-blue); }
.daylight[data-theme="photo"] .customer-system-node-home .customer-system-node-icon { color: var(--daylight-blue); }
.customer-system-node-battery .customer-system-node-icon { color: var(--dl-energy-battery-in); }
.customer-system-node strong { max-width: 100%; overflow: hidden; color: var(--dl-fg); font: 500 16px/1.25 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.customer-system-node strong[data-unknown] { color: var(--dl-fg-muted); }
.customer-system-node-unit { color: var(--dl-fg-muted); }
.customer-system-node-label, .customer-system-node-caption { max-width: 100%; color: var(--dl-fg-muted); font: 500 12px/1.35 "Aeonik Pro", sans-serif; overflow-wrap: anywhere; }
/* Native charge bar: the fill carries its own label and never drops below the label's width, even at 0%. */
.customer-system-charge { margin-top: var(--dl-space-2); }
.customer-system-charge-track { position: relative; display: flex; align-items: center; height: var(--dl-charge-track); border-radius: var(--dl-tile-radius); background: var(--dl-secondary); overflow: hidden; }
.customer-system-charge-fill { position: absolute; inset: 0 auto 0 0; width: max(var(--dl-charge-floor), calc(var(--dl-charge, 0) * 100%)); max-width: 100%; border-radius: var(--dl-tile-radius); background: var(--dl-charge-fill); }
.customer-system-charge-label { position: relative; padding-left: var(--dl-charge-inset); color: var(--dl-charge-ink); font: 500 13px/1.3 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.customer-system-charge-track[data-unknown] .customer-system-charge-label { color: var(--dl-fg-muted); }
.customer-system-timeline { display: flex; flex-direction: column; gap: var(--dl-space-1); min-width: 0; }
.customer-system-timeline-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--dl-space-3); color: var(--dl-fg); font: 500 14px/1.4 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; }
.customer-system-timeline-time { flex: 1 1 14em; }
.customer-system-timeline-return { flex: none; }
.customer-system-ribbon { position: relative; height: calc(var(--dl-scrub-band) + var(--dl-space-5)); touch-action: pan-y; user-select: none; -webkit-user-select: none; border-radius: var(--daylight-radius-sm); }
@media (hover: hover) and (pointer: fine) {
  .customer-system-ribbon { cursor: ew-resize; }
}
.customer-system-ribbon:has(.customer-system-ribbon-range:focus-visible) { outline: var(--dl-focus-ring); outline-offset: var(--dl-focus-offset); }
.customer-system-ribbon-range { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.customer-system-ribbon-cells { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: repeat(var(--ticks, 24), minmax(0, 1fr)); height: var(--dl-scrub-band); }
.customer-system-ribbon-cell { position: relative; display: block; }
/* Resting ticks are one filled capsule; the hour holding the latest reading keeps a subdued accent, and only the
   selected tick grows and takes the full accent. */
.customer-system-ribbon-cell::after { content: ""; position: absolute; left: 50%; bottom: 0; width: var(--dl-scrub-tick); height: 100%; margin-left: calc(var(--dl-scrub-tick) / -2); border-radius: calc(var(--dl-scrub-tick) / 2); background: var(--dl-scrub-rest-color); transform: scaleY(var(--dl-scrub-rest)); transform-origin: bottom center; }
@media (hover: hover) and (pointer: fine) {
  .customer-system-ribbon-cell:not([data-selected]):hover::after { background: var(--dl-fg-quiet); }
}
.customer-system-ribbon-cell[data-now]::after { background: var(--dl-scrub-now); }
.customer-system-ribbon-cell[data-selected]::after { background: var(--dl-scrub-selected); transform: none; }
.customer-system-house[data-scrub-input="pointer"] .customer-system-ribbon-cell::after { transition: transform var(--dl-duration-press) var(--dl-ease-out); }
.customer-system-ribbon-axis { position: absolute; left: 0; right: 0; top: calc(var(--dl-scrub-band) + var(--dl-space-1)); height: var(--dl-space-4); }
.customer-system-ribbon-label { position: absolute; top: 0; color: var(--dl-fg-muted); font: var(--dl-font-caption); font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); }
.customer-system-ribbon-label[data-edge="start"] { left: 0; transform: none; }
.customer-system-ribbon-label[data-edge="end"] { right: 0; transform: none; }
.customer-system-ribbon-label[data-now] { color: var(--dl-fg); font-weight: 500; }
.customer-system-timeline-hint { margin: 0; color: var(--dl-fg-muted); font: var(--dl-font-caption); text-wrap: pretty; }
.customer-system-partial { margin: 10px 0 0; }
.customer-system-partial-note { color: var(--dl-fg-muted); font: 400 13px/1.5 "Aeonik Pro", sans-serif; }
.customer-system-house-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.customer-system-compact { min-height: 44px; height: 44px; width: auto; padding: 0 14px; border-radius: 4px; font: 500 15px/1 "Aeonik Pro", sans-serif; }
.customer-system-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--dl-fg); font: 500 14px/1.2 "Aeonik Pro", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.customer-system-freshness { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--dl-space-2); color: var(--dl-fg-muted); font: 400 13px/1.4 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; }
.customer-system-freshness > span:not(:empty) { margin-right: var(--dl-space-1); }
.customer-system-flow { margin: 0; }
.customer-system-flow-text { margin: 0; color: var(--dl-fg-muted); font: 400 13px/1.5 "Aeonik Pro", sans-serif; }
.customer-system-flow-text:empty { display: none; }
.customer-system-detail { position: fixed; inset: 0; margin: auto; width: min(760px, calc(100vw - 32px)); height: fit-content; max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--dl-border); border-radius: var(--dl-radius-surface); background: var(--dl-card); color: var(--dl-fg); box-shadow: var(--dl-shadow-overlay); overflow: hidden; }
.customer-system-detail::backdrop { background: var(--dl-backdrop); }
.customer-system-detail[open] { display: flex; flex-direction: column; animation: customer-system-detail-in var(--dl-duration-enter) var(--dl-ease-out); }
.customer-system-detail[open]::backdrop { animation: customer-system-detail-fade var(--dl-duration-enter) var(--dl-ease-out); }
@keyframes customer-system-detail-in { from { opacity: 0; transform: scale(var(--dl-enter-scale)); } }
@keyframes customer-system-detail-fade { from { opacity: 0; } }
.customer-system-detail-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--dl-space-4) var(--dl-space-4) var(--dl-space-4) var(--dl-space-6); background: var(--dl-card); border-bottom: 1px solid var(--dl-divider); }
.customer-system-detail-header h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.customer-system-detail-header .customer-system-compact { flex: none; }
.customer-system-detail-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 24px 24px 32px; }
.customer-system-detail-body details { margin-top: 16px; }
.customer-system-detail-body summary { min-height: 44px; cursor: pointer; }
@media (min-width: 768px) {
  .customer-system-detail-header { padding: var(--dl-space-5) var(--dl-space-5) var(--dl-space-5) var(--dl-space-8); }
  .customer-system-detail-body { padding: 24px 32px 40px; }
}
.customer-system-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .customer-system-detail[open] { animation-name: customer-system-detail-fade; }
  html:has(.customer-system) { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-system-scene-stage img, .customer-system-node, .customer-system-anchor, .customer-system-anchor-label,
  .customer-system :is(.daylight-btn-v2, .daylight-icon-btn, .customer-energy-calendar-day),
  .customer-system-house[data-scrub-input="pointer"] .customer-system-ribbon-cell::after { transition: none; }
  .customer-system :is(.customer-system-node, .daylight-btn-v2, .daylight-icon-btn):active { transform: none; }
  .customer-system-anchor:active, .customer-system-anchor-label:active { transform: translate(-50%, -50%); }
  .customer-system-eyebrow[data-live]::after { animation: none; }
}

.customer-system .customer-energy, .customer-system [data-energy-detail] { container-type: inline-size; min-width: 0; }
/* Fixed areas, so choosing a date never reflows the toolbar: the first row always holds a control's height for
   Back to today, the window line has its own row sized for its longest wrap, and the controls keep their place. */
.customer-system .customer-energy-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(44px, auto); grid-template-areas: "title today" "context context" "controls controls"; align-items: center; column-gap: var(--dl-space-4); }
.customer-system .customer-energy-toolbar > .customer-energy-heading { display: contents; }
.customer-system .customer-energy-heading { min-width: 0; }
.customer-system .customer-energy-heading h2 { grid-area: title; min-width: 0; margin: 0; padding-bottom: 0; }
.customer-system .customer-energy-heading .customer-energy-context { grid-area: context; margin-top: 6px; }
.customer-system .customer-energy-toolbar [data-energy-today] { grid-area: today; justify-self: end; }
.customer-system .customer-energy-toolbar > .customer-energy-controls { grid-area: controls; margin-top: var(--dl-space-4); }
.customer-system .customer-energy-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@container (max-width: 519px) {
  .customer-system .customer-energy-heading .customer-energy-context { min-height: var(--dl-reserve-2-lines); }
}
@container (min-width: 56rem) {
  .customer-system .customer-energy-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title today controls" "context context context"; }
  .customer-system .customer-energy-toolbar > .customer-energy-controls { margin-top: 0; flex-wrap: nowrap; }
}
.customer-system .customer-energy-context { min-height: 1.5em; max-width: 68ch; margin: 0; color: var(--dl-fg-muted); font: 400 15px/1.5 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.customer-system .customer-energy-segmented { display: flex; border: 1px solid var(--dl-seg-border); background: var(--dl-seg-bg); padding: 3px; border-radius: 4px; gap: 2px; margin: 0; min-width: 0; }
.customer-system .customer-energy-segmented label { position: relative; flex: 1; cursor: pointer; }
.customer-system .customer-energy-segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Segments fill the shared control height inside the 3px inset and 1px border, never under a 44px target. */
.customer-system .customer-energy-segmented span { display: flex; min-height: max(44px, calc(var(--dl-control-height) - 8px)); align-items: center; justify-content: center; padding: 0 12px; border-radius: 4px; color: var(--dl-seg-fg); font-size: 15px; white-space: nowrap; }
.customer-system .customer-energy-segmented input:checked + span { color: var(--dl-seg-active-fg); background: var(--dl-seg-active-bg); }
.customer-system .customer-energy-segmented input:focus-visible + span, .customer-system :is(.customer-energy, [data-energy-detail]) :is(button, summary, [tabindex]):focus-visible { outline: 2px solid var(--dl-fg); outline-offset: 3px; }
.customer-system .customer-energy-chart { min-width: 0; padding: 28px 0 32px; }
.customer-system .customer-energy-generation { padding-top: 32px; }
.customer-system .customer-energy-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.customer-system .customer-energy-chart-heading > div { min-width: 0; }
.customer-system .customer-energy-chart-heading h3 { margin: 0; color: var(--dl-fg); font: 500 16px/1.3 "Aeonik Pro", sans-serif; }
.customer-system .customer-energy-generation .customer-energy-chart-heading h3 { font-size: 20px; }
.customer-system .customer-energy-chart-heading .customer-system-quiet { flex: none; margin-top: -12px; }
.customer-system .customer-energy-description { max-width: 68ch; margin: 4px 0 0; color: var(--dl-fg-muted); font: 400 15px/1.5 "Aeonik Pro", sans-serif; }
/* The separator hangs in the gap, so a wrapped Updated line starts clean: the clipped edge hides a dot left at line start. */
.customer-system .customer-energy-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--dl-space-5); margin: 4px 0 0; overflow: hidden; }
.customer-system .customer-energy-meta:not(:has(:not(:empty))) { display: none; }
.customer-system .customer-energy-meta > .customer-energy-context { min-height: 0; color: var(--dl-fg); font-size: 14px; }
.customer-system .customer-energy-meta > .customer-energy-context:not(:empty) + .customer-energy-updated:not(:empty)::before { content: "·"; display: inline-block; width: var(--dl-space-5); margin-left: calc(var(--dl-space-5) * -1); text-align: center; color: var(--dl-fg-quiet); }
.customer-system .customer-energy-updated, .customer-system .customer-energy-notice { margin: 0; color: var(--dl-fg-muted); font: 400 13px/1.5 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; }
.customer-system .customer-energy-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dl-space-2) var(--dl-space-3); margin-top: var(--dl-space-1); }
.customer-system .customer-energy-caution { flex: 1 1 100%; margin: 0; font: 500 13px/1.5 "Aeonik Pro", sans-serif; }
.customer-system .customer-energy-status:not(:has(> :not([hidden], .customer-energy-notice-frame), .customer-energy-notice:not(:empty))) { display: none; }
/* The live notice and a hidden copy that includes the missing-section note share one cell, so filters never change its height. */
.customer-system .customer-energy-notice-frame { display: grid; min-width: 0; }
.customer-system .customer-energy-notice-frame > * { grid-area: 1 / 1; min-width: 0; }
.customer-system .customer-energy-notice-frame:not(:has(> :not(:empty))) { display: none; }
.customer-system .customer-energy-notice-reserve { visibility: hidden; pointer-events: none; user-select: none; }
.customer-system .customer-energy-chart[aria-busy="true"] .customer-energy-plot { opacity: var(--dl-pending-opacity); }
.customer-system .customer-energy-plot { transition: opacity var(--dl-duration-enter) var(--dl-ease-out); touch-action: pan-y; }
.customer-system .customer-energy-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--dl-space-4); }
.customer-system .customer-energy-footer > .customer-system-quiet { margin-top: var(--dl-space-1); }
.customer-system .customer-energy-secondary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
.customer-system .customer-energy-secondary .customer-energy-chart { border-top: 1px solid var(--dl-divider); }
.customer-system .customer-energy-secondary .customer-energy-chart:last-child { padding-bottom: 0; }
.customer-system .customer-energy-plot { height: 220px; width: 100%; margin: 8px 0 0; }
.customer-system .customer-energy-generation .customer-energy-plot { height: 240px; }
.customer-system :is(.customer-energy-notice, .customer-energy-updated):empty { display: none; }
.customer-system .customer-energy-readout { margin-top: 16px; }
/* The live line and a hidden copy of every reachable selection share one cell, so the tallest real line sets the height. */
.customer-system .customer-energy-selection-frame { display: grid; min-height: 1.5em; }
.customer-system .customer-energy-selection-frame > *, .customer-system .customer-energy-selection-reserve > span { grid-area: 1 / 1; min-width: 0; }
.customer-system .customer-energy-selection, .customer-system .customer-energy-selection-reserve { margin: 0; color: var(--dl-fg); font: 500 14px/1.5 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; }
.customer-system .customer-energy-selection-reserve { display: grid; visibility: hidden; pointer-events: none; }
/* Fixed tracks keep legend rows stable when a value changes width, such as a reading becoming Unavailable. */
.customer-system .customer-energy-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 4px 16px; margin-top: 4px; }
.customer-system .customer-energy-legend-item { display: grid; grid-template-columns: 12px minmax(0, 1fr); grid-template-areas: "swatch label" ". value"; align-items: center; gap: 0 8px; min-width: 0; min-height: 44px; color: var(--dl-fg); text-align: left; }
.customer-system .customer-energy-legend-item::before { content: ''; grid-area: swatch; box-sizing: border-box; width: 12px; height: 3px; border-radius: 2px; background: var(--series-color); }
.customer-system .customer-energy-legend-label { grid-area: label; color: var(--dl-fg-muted); font: 400 13px/1.3 "Aeonik Pro", sans-serif; }
.customer-system .customer-energy-legend-value { grid-area: value; color: var(--dl-fg); font: 500 17px/1.3 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The all-off hint overlays the empty plot so changing filters does not move the chart. */
.customer-system .customer-energy-plot-frame { position: relative; }
.customer-system .customer-energy-legend-heading { position: absolute; inset: var(--dl-space-2) 0 0; display: grid; place-items: center; padding: 0 var(--dl-space-6); pointer-events: none; }
.customer-system .customer-energy-legend-heading:not([data-empty]) > .customer-energy-legend-empty { visibility: hidden; }
.customer-system .customer-energy-legend-empty { max-width: var(--dl-hint-measure); margin: 0; color: var(--dl-fg); font: var(--dl-font-label); text-align: center; text-wrap: pretty; }
.customer-system button.customer-energy-legend-item { grid-template-columns: var(--dl-check-size) minmax(0, 1fr); cursor: pointer; padding: var(--dl-space-1) var(--dl-space-3) var(--dl-space-1) var(--dl-space-2); border: var(--dl-hairline) solid var(--dl-border-strong); border-radius: var(--dl-tile-radius); background: transparent; font: inherit; transition: transform var(--dl-duration-press) var(--dl-ease-out); }
.customer-system button.customer-energy-legend-item::before, .customer-system button.customer-energy-legend-item::after { content: ''; grid-area: swatch; box-sizing: border-box; justify-self: center; }
.customer-system button.customer-energy-legend-item::before { width: var(--dl-check-size); height: var(--dl-check-size); border: var(--dl-check-stroke) solid var(--series-color); border-radius: var(--dl-check-radius); background: transparent; }
.customer-system button.customer-energy-legend-item::after { width: var(--dl-check-mark-width); height: var(--dl-check-mark-height); margin-top: calc(var(--dl-check-stroke) / -2); border: solid var(--dl-bg); border-width: 0 var(--dl-check-stroke) var(--dl-check-stroke) 0; transform: rotate(45deg); opacity: 0; }
.customer-system button.customer-energy-legend-item[aria-pressed="true"]::before { background: var(--series-color); }
.customer-system button.customer-energy-legend-item[aria-pressed="true"]::after { opacity: 1; }
.customer-system button.customer-energy-legend-item[aria-pressed="true"] .customer-energy-legend-label { color: var(--dl-fg); }
.customer-system button.customer-energy-legend-item:is([aria-pressed="false"], :disabled) .customer-energy-legend-value { color: var(--dl-fg-muted); }
.customer-system button.customer-energy-legend-item:disabled { cursor: not-allowed; border-style: dashed; }
.customer-system button.customer-energy-legend-item:disabled::before { border-style: dashed; border-color: var(--dl-fg-quiet); }
@media (hover: hover) and (pointer: fine) {
  .customer-system button.customer-energy-legend-item:not(:disabled):hover { border-color: var(--dl-fg-quiet); background: var(--dl-secondary); }
}
.customer-system button.customer-energy-legend-item:not(:disabled):active { transform: scale(var(--dl-press-scale)); }
@media (prefers-reduced-motion: reduce) {
  .customer-system button.customer-energy-legend-item { transition: none; }
  .customer-system button.customer-energy-legend-item:not(:disabled):active { transform: none; }
}
.customer-system .customer-energy-statistics, .customer-system .customer-energy-explanation { color: var(--dl-fg-muted); font-size: 14px; line-height: 1.5; margin: 12px 0 0; max-width: 68ch; }
.customer-system .customer-energy-statistics:empty { display: none; }
.customer-system .customer-energy-render-error { margin: 8px 0; font: 400 14px/1.5 "Aeonik Pro", sans-serif; }
/* Select date: a fixed-width control whose anchored calendar floats over the charts, so opening it or naming a long
   range never changes the toolbar height. */
.customer-system .customer-energy-date-anchor { position: relative; flex: none; }
.customer-system .customer-energy-date-toggle { height: var(--dl-control-height); min-height: var(--dl-control-height); width: var(--dl-date-toggle-width); max-width: 100%; justify-content: flex-start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.customer-system .customer-energy-calendar { position: absolute; z-index: var(--dl-popover-layer); top: calc(100% + var(--dl-space-2)); right: 0; width: min(var(--dl-calendar-width), calc(100vw - 32px)); padding: var(--dl-space-4); border: var(--dl-hairline) solid var(--dl-border); border-radius: var(--dl-popover-radius); background: var(--dl-bg); color: var(--dl-fg); box-shadow: var(--dl-shadow-overlay); translate: var(--dl-calendar-shift, 0) 0; animation: customer-system-detail-fade var(--dl-duration-enter) var(--dl-ease-out); }
.customer-system .customer-energy-calendar-header { display: flex; align-items: center; justify-content: space-between; gap: var(--dl-space-2); }
.customer-system .customer-energy-calendar-title { margin: 0; font: 500 15px/1.3 "Aeonik Pro", sans-serif; }
.customer-system .customer-energy-calendar-page { width: 44px; height: 44px; border: 0; border-radius: var(--daylight-radius-sm); background: transparent; font: 400 22px/1 "Aeonik Pro", sans-serif; cursor: pointer; }
.customer-system .customer-energy-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; margin-top: var(--dl-space-2); }
.customer-system .customer-energy-calendar-weekday { padding: var(--dl-space-1) 0; color: var(--dl-fg-muted); font: var(--dl-font-caption); text-align: center; }
.customer-system .customer-energy-calendar-day { height: var(--dl-calendar-day); min-width: 0; border: 0; border-radius: var(--daylight-radius-sm); background: transparent; color: var(--dl-fg); font: 400 14px/1 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.customer-system .customer-energy-calendar-day[data-today] { box-shadow: inset 0 0 0 var(--dl-hairline) var(--dl-border-strong); }
.customer-system .customer-energy-calendar-day[data-range] { border-radius: 0; background: var(--dl-secondary); }
.customer-system .customer-energy-calendar-day[data-range="start"] { border-radius: var(--daylight-radius-sm) 0 0 var(--daylight-radius-sm); }
.customer-system .customer-energy-calendar-day[data-range="end"] { border-radius: 0 var(--daylight-radius-sm) var(--daylight-radius-sm) 0; }
.customer-system .customer-energy-calendar-day[aria-pressed="true"]:is(:not([data-range]), [data-range="start"], [data-range="end"]) { background: var(--dl-primary); color: var(--dl-on-primary); }
.customer-system .customer-energy-calendar-day:disabled { color: var(--dl-fg-quiet); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .customer-system .customer-energy-calendar-day:not(:disabled, [aria-pressed="true"]):hover { background: var(--dl-secondary); }
}
.customer-system .customer-energy-calendar-day:not(:disabled):active { transform: scale(var(--dl-press-scale)); }
.customer-system .customer-energy-calendar-hint { min-height: var(--dl-reserve-2-lines); margin: var(--dl-space-3) 0 0; color: var(--dl-fg-muted); font: 400 13px/1.4 "Aeonik Pro", sans-serif; text-wrap: pretty; }
.customer-system .customer-energy-calendar-actions { display: flex; justify-content: flex-end; gap: var(--dl-space-2); margin-top: var(--dl-space-3); }
@container (max-width: 519px) {
  .customer-system .customer-energy-date-anchor { flex: 1 1 auto; }
  .customer-system .customer-energy-date-toggle { width: 100%; }
  .customer-system .customer-energy-calendar { left: 0; right: auto; }
}
.customer-system .customer-energy-readings-back { margin: 0 0 var(--dl-space-2) calc(var(--dl-space-1) * -1); }
.customer-system .customer-energy-readings-summary { max-width: 68ch; margin: 0 0 var(--dl-space-4); color: var(--dl-fg-muted); font: 400 14px/1.5 "Aeonik Pro", sans-serif; }
.customer-system .customer-energy-readings-status { max-width: 68ch; margin: 0 0 var(--dl-space-3); color: var(--dl-fg); font: 400 14px/1.5 "Aeonik Pro", sans-serif; }
.customer-system .customer-energy-readings-status:empty { display: none; }
.customer-system .customer-energy-readings-summary:empty { display: none; }
.customer-system [data-energy-readings-retry] { margin-bottom: var(--dl-space-4); }
.customer-system .customer-energy-readings-list:empty { border-top: 0; }
.customer-system .customer-energy-readings-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dl-divider); }
.customer-system .customer-energy-reading { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dl-space-1) var(--dl-space-6); padding: var(--dl-space-3) 0; border-bottom: 1px solid var(--dl-divider); }
.customer-system .customer-energy-reading-time { margin: 0; color: var(--dl-fg); font: 500 14px/1.4 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; }
.customer-system .customer-energy-reading-values { display: flex; flex-wrap: wrap; gap: var(--dl-space-1) var(--dl-space-4); margin: 0; }
.customer-system .customer-energy-reading-values > div { display: flex; gap: var(--dl-space-1); min-width: 0; }
.customer-system .customer-energy-reading-values dt { color: var(--dl-fg-muted); font: 400 13px/1.4 "Aeonik Pro", sans-serif; }
.customer-system .customer-energy-reading-values dd { margin: 0; color: var(--dl-fg); font: 500 13px/1.4 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.customer-system .customer-energy-reading-tags { margin: 0; color: var(--dl-fg-muted); font: var(--dl-font-caption); }
@container (min-width: 640px) {
  .customer-system .customer-energy-reading { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; }
  .customer-system .customer-energy-reading-tags { grid-column: 2; }
}
.customer-system .customer-system-chart-dialog { width: min(1064px, calc(100vw - 32px)); }
.customer-system [data-energy-detail] .customer-energy-chart-view > .customer-energy-controls { gap: 8px 16px; }
.customer-system [data-energy-detail] .customer-energy-plot { height: 260px; }
.customer-system [data-energy-detail] .customer-energy-chart { padding: 20px 0 0; }
.customer-system [data-energy-detail] .customer-energy-chart > .customer-energy-context { color: var(--dl-fg); }
/* On a phone the window, notice, selection and statistics rows wrap differently for each period and while loading, so
   each holds the longest copy it can reach at that width and the plot stays put. Wider dialogs never wrap them. */
@container (max-width: 519px) {
  .customer-system [data-energy-detail] .customer-energy-meta { display: grid; }
  .customer-system [data-energy-detail] .customer-energy-chart > .customer-energy-status { display: flex; }
  .customer-system [data-energy-detail] .customer-energy-notice { display: block; min-height: var(--dl-reserve-2-lines); }
  .customer-system [data-energy-detail] .customer-energy-statistics { min-height: var(--dl-reserve-2-lines); }
}
@container (max-width: 279px) {
  .customer-system [data-energy-detail] .customer-energy-meta > .customer-energy-context { min-height: var(--dl-reserve-2-lines); }
  .customer-system [data-energy-detail] .customer-energy-notice { min-height: var(--dl-reserve-3-lines); }
  .customer-system [data-energy-detail] .customer-energy-selection { min-height: var(--dl-reserve-2-lines); }
}
.customer-system .customer-energy-groups { margin-top: 12px; }
.customer-system .customer-energy-groups > span { color: var(--dl-fg-muted); font: 400 14px/1.4 "Aeonik Pro", sans-serif; }
.customer-system .customer-energy-about { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--dl-divider); }
.customer-system .customer-energy-about:not(:has(.customer-energy-explanation:not(:empty))) { display: none; }
.customer-system .customer-energy-about h3 { margin: 0; color: var(--dl-fg); font: 500 16px/1.3 "Aeonik Pro", sans-serif; }
.customer-system .customer-energy-about .customer-energy-explanation { margin-top: 6px; font-size: 15px; }
@container (max-width: 519px) {
  .customer-system .customer-energy-controls > .customer-energy-segmented { flex: 1 1 100%; }
}
@container (min-width: 760px) {
  .customer-system .customer-energy-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-system .customer-energy-generation .customer-energy-plot { height: 300px; }
}
@media (min-width: 768px) {
  .customer-system [data-energy-detail] .customer-energy-plot { height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-system-sections a, .customer-system .customer-energy-plot { transition: none; }
}

.customer-system .customer-system-detail-body summary,
.customer-system [data-energy-render-error] { color: var(--dl-fg); }

.customer-system .customer-equipment { container-type: inline-size; min-width: 0; }
.customer-system .customer-equipment h2,
.customer-system .customer-equipment h3,
.customer-system [data-energy-equipment] :is(dt, dd) { color: var(--dl-fg); }
.customer-system .customer-equipment h3 { margin: 0 0 12px; font: 500 16px/1.4 "Aeonik Pro", sans-serif; }
.customer-system .customer-equipment > div:not(.daylight-setup-section-heading):not(:empty) { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--dl-divider); }
.customer-system .customer-equipment > .daylight-setup-section-heading + div:not(:empty),
.customer-system .customer-equipment > .daylight-setup-section-heading + div:empty + div { margin-top: 24px; padding-top: 0; border-top: 0; }
.customer-system .customer-equipment p { margin: 0; color: var(--dl-fg); font: 400 15px/1.5 "Aeonik Pro", sans-serif; max-width: 68ch; }
.customer-system .customer-equipment .customer-equipment-meta,
.customer-system .customer-equipment .customer-equipment-provenance { color: var(--dl-fg-muted); font-size: 14px; }
.customer-system .customer-equipment .customer-equipment-provenance { margin-top: 16px; }
.customer-system .customer-equipment .customer-equipment-notice { margin: 0 0 12px; }
.customer-system :is(.customer-equipment, [data-energy-equipment]) p.customer-system-caution { color: var(--dl-attention-fg); font: 500 14px/1.5 "Aeonik Pro", sans-serif; }
.customer-system .customer-equipment .customer-equipment-notice + .customer-system-compact { margin-bottom: 16px; }
.customer-system .customer-equipment-monitoring > .customer-system-quiet { margin-top: 4px; padding: 0; color: var(--dl-fg); }
.customer-system .customer-equipment .customer-equipment-measure,
.customer-system [data-energy-equipment] .customer-equipment-measure { margin: 12px 0 2px; color: var(--dl-fg); font: 500 28px/1.15 "Aeonik Pro", sans-serif; font-variant-numeric: tabular-nums; }
.customer-system [data-energy-equipment] .customer-equipment-measure { margin: 0 0 16px; font-size: 24px; }
.customer-system .customer-equipment .customer-equipment-state { color: var(--dl-fg-muted); font: var(--dl-font-label); }
/* Specification sheet: label over value in fixed tracks, so long model names wrap inside their own cell. */
.customer-system .customer-equipment-spec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 32px; margin: 0; }
.customer-system .customer-equipment-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 0 14px; border-top: 1px solid var(--dl-divider); }
.customer-system .customer-equipment-row dt { color: var(--dl-fg-muted); font: 400 13px/1.4 "Aeonik Pro", sans-serif; }
.customer-system .customer-equipment-row dd { margin: 0; color: var(--dl-fg); font: 500 16px/1.4 "Aeonik Pro", sans-serif; overflow-wrap: anywhere; text-wrap: pretty; }
.customer-system .customer-equipment-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.customer-system .customer-equipment-group { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 20px 20px 24px; }
/* The status sits on its own line under the title, so a longer status never rewraps the heading at 320px. */
.customer-system .customer-equipment-group-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dl-space-1); align-self: stretch; }
.customer-system .customer-equipment-group-heading h3 { margin: 0; }
.customer-system .customer-equipment-group .customer-system-compact { margin-top: auto; }
.customer-system .customer-equipment-group > p:last-of-type { margin-bottom: 20px; }
.customer-system .customer-equipment-estimate .customer-equipment-figure { margin: 4px 0 8px; font-size: 40px; line-height: 1.05; letter-spacing: -.01em; }
.customer-system .customer-equipment-explanations { margin-top: 20px; border-top: 1px solid var(--dl-divider); }
.customer-system .customer-equipment details { border-bottom: 1px solid var(--dl-divider); }
.customer-system .customer-equipment details summary { color: var(--dl-fg); min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font: 500 15px/1.4 "Aeonik Pro", sans-serif; }
.customer-system .customer-equipment details p { padding-bottom: 20px; }
.customer-system .customer-equipment-documents { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--dl-divider); }
.customer-system .customer-equipment-documents li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--dl-divider); color: var(--dl-fg); font: 400 15px/1.5 "Aeonik Pro", sans-serif; }
.customer-system .customer-equipment-documents a { color: var(--dl-fg); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.customer-system .customer-equipment-agreements > p { margin-bottom: 16px; }
.customer-system .customer-equipment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dl-space-2); }
.customer-system .customer-equipment [data-equipment-archive] { display: inline-flex; align-items: center; width: auto; text-decoration: none; }
.customer-system .customer-equipment :is(button, a, summary):focus-visible { outline: 2px solid var(--dl-fg); outline-offset: 3px; }
.customer-system [data-energy-equipment]:not(:empty) { padding-top: 16px; }
.customer-system [data-energy-equipment] .customer-equipment-provenance { color: var(--dl-fg-muted); font: 400 14px/1.5 "Aeonik Pro", sans-serif; margin-top: 16px; max-width: 68ch; }
@container (min-width: 640px) {
  .customer-system .customer-equipment-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-system .customer-equipment-production { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 48px; align-items: start; }
  .customer-system .customer-equipment-explanations { margin-top: 0; }
}

.customer-system .customer-equipment details summary::-webkit-details-marker { display: none; }
.customer-system .customer-equipment details summary .daylight-agreement-chevron { display: grid; place-items: center; color: var(--dl-fg); transition: transform 150ms ease; }
.customer-system .customer-equipment details summary .daylight-agreement-chevron::after { content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.customer-system .customer-equipment details[open] > summary .daylight-agreement-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .customer-system .customer-equipment details summary .daylight-agreement-chevron { transition: none; }
}